@social.io/catalog

Documentation for @social.io/catalog

readme.md for @social.io/catalog

A modern, beautifully designed UI component library for building conversational interfaces and support chat experiences. Built with Lit Element and TypeScript.

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

🎯 Features

📦 Installation

npm install @social.io/catalog
# or
pnpm add @social.io/catalog

🚀 Quick Start

import { SioFab, SioCombox } from '@social.io/catalog';

// Components auto-register as custom elements
// Just use them in your HTML:

<!-- Floating Action Button that opens the chat -->
<sio-fab></sio-fab>

<!-- Or use the full chat box directly -->
<sio-combox></sio-combox>

🧩 Components

Core Components

Component Description
<sio-fab> Floating action button with animated chat icon
<sio-combox> Complete chat interface with conversation list and message view
<sio-button> Styled button with variants (primary, secondary, destructive, outline, ghost)
<sio-icon> Lucide icon wrapper with size and color customization
<sio-dropdown-menu> Animated dropdown menu with keyboard support

Conversation Components

Component Description
<sio-conversation-selector> Searchable list of conversations with unread indicators
<sio-conversation-view> Message thread with typing indicators and file attachments
<sio-message-input> Auto-expanding textarea with file upload

Media Components

Component Description
<sio-image-lightbox> Fullscreen image viewer with zoom and pan
<sio-pdf-viewer> PDF renderer with page navigation and zoom controls

Utility Components

Component Description
<sio-recorder> Session recording using rrweb

💅 Styling & Theming

The library uses CSS custom properties for theming. The design system includes:

Dark Mode

Dark mode is automatically supported. The components use bdTheme() helper that switches between light and dark values:

import { bdTheme } from '@social.io/catalog';

// Usage in styles
css`
  background: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 10%)')};
`

📖 Usage Examples

Basic Chat FAB

<sio-fab></sio-fab>

The FAB opens a complete chat interface when clicked. It includes:

Custom Button Variants

<sio-button type="primary">Submit</sio-button>
<sio-button type="destructive">Delete</sio-button>
<sio-button type="outline">Cancel</sio-button>
<sio-button type="ghost" size="sm">
  <sio-icon icon="settings"></sio-icon>
</sio-button>

Image Lightbox

const lightbox = document.querySelector('sio-image-lightbox');
lightbox.open({
  url: 'https://example.com/photo.jpg',
  name: 'My Photo',
  size: 1024000
});

PDF Viewer

<sio-pdf-viewer
  url="https://example.com/document.pdf"
  fileName="document.pdf"
></sio-pdf-viewer>

Dropdown Menu

<sio-dropdown-menu
  .items=${[
    { id: 'edit', label: 'Edit', icon: 'pencil' },
    { id: 'delete', label: 'Delete', icon: 'trash', destructive: true }
  ]}
  @item-selected=${(e) => console.log('Selected:', e.detail.item)}
>
  <sio-button type="ghost">
    <sio-icon icon="more-vertical"></sio-icon>
  </sio-button>
</sio-dropdown-menu>

🔧 Development

# Install dependencies
pnpm install

# Start development server with hot reload
pnpm watch

# Run tests
pnpm test

# Build for production
pnpm build

📚 Dependencies

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the LICENSE file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

Company Information

Task Venture Capital GmbH Registered at District Court Bremen HRB 35230 HB, Germany

By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

changelog.md for @social.io/catalog

2026-01-02 - 1.7.0 - feat(recorder)

lazy-load rrweb and rrweb-player from CDN via SioServiceLibLoader and switch sio-recorder to use the loader

2025-12-18 - 1.6.1 - fix(sio-combox)

tweak dropdown shadow and bind close event on conversation selector

2025-12-18 - 1.6.0 - feat(conversation-selector)

add conversation status badges to conversation selector and include status in sample data

2025-12-17 - 1.5.0 - feat(combox)

Introduce singleton SioCombox attached to document.body with open/close/toggle API and animated show/hide; integrate SioFab to use the singleton and update styles/positioning

2025-12-17 - 1.4.1 - fix(ui)

handle on-screen keyboard visibility to adjust layout and prevent inputs from being obscured

2025-12-17 - 1.4.0 - feat(elements)

update design tokens and sio-fab component; bump deps and update npmextra config

2025-12-08 - 1.3.0 - feat(components)

Add reusable message input component, refactor element properties to use accessor, update styles and docs, bump dependencies

2025-04-20 - 1.2.4 - fix(build)

Update build script and async function signature

2025-04-20 - 1.2.3 - fix(core)

Update dependency versions and adjust UI CSS for fab and combox elements

2025-01-26 - 1.2.2 - fix(sio-recorder)

Fixed the recording loop and ensured it stops correctly

2025-01-25 - 1.2.1 - fix(sio-recorder)

Enhance styling and positioning for rrweb player elements in SioRecorder component.

2025-01-25 - 1.2.0 - feat(elements)

Added sio-recorder element for recording and replaying sessions

2024-12-27 - 1.1.0 - feat(ci)

Add Gitea workflows for CI/CD process.

2024-12-27 - 1.0.93 - fix(core)

Fix package naming inconsistencies in the project

2024-10-09 - 1.0.92 - fix(build)

Correct build command and module type configuration in package.json and tsconfig.json.

2024-10-09 - 1.0.91 - fix(elements)

Style and dependency adjustments in elements

2023-08-27 - 1.0.89 to 1.0.90 - core updates

Incremental updates with core fixes.

2023-01-07 to 2023-01-11 - 1.0.84 to 1.0.89 - core updates

Continuous core fixes and updates over releases.

2022-05-09 to 2022-05-24 - 1.0.75 to 1.0.82 - core updates

Progressive upgrades with core fixes.

2022-03-24 to 2022-04-25 - 1.0.72 to 1.0.74 - core updates

Minor updates focusing on core functionalities.

2020-08-05 to 2020-12-10 - 1.0.55 to 1.0.71 - core updates

Regular maintenance with core fixes to enhance stability.