jonathanbelolo/composable-svelte

Overview

This skill provides transport-agnostic streaming chat and collaborative features for Composable Svelte. It combines a StreamingChat state machine with presence, typing, cursor tracking, and WebSocket integration to build real-time LLM chat interfaces. Use the provided components and reducers to add streaming LLM responses, file attachments, voice input, and multi-user collaboration quickly.

How this skill works

The skill exposes store-based components (Minimal, Standard, Full, and StreamingChat) that wire into a streaming sendMessage dependency implemented as an async generator. Collaborative features use a separate reducer with WebSocket connect/disconnect handlers to broadcast presence, typing, and cursor events. UI primitives like PresenceAvatarStack, TypingIndicator, and CursorOverlay consume derived store data to render live user state.

When to use it

• Building chat interfaces that stream LLM outputs token-by-token or chunk-by-chunk.
• Adding real-time presence, typing indicators, and live cursors for multi-user conversations.
• Embedding voice input, file attachments (images, PDFs, audio), and transcription workflows.
• Connecting to custom WebSocket backends for synchronization and presence management.
• Creating both lightweight embedded chat (Minimal) and full-featured chat apps (Full).

Best practices

• Implement sendMessage as an async generator to yield streaming chunks from your LLM or proxy.
• Keep WebSocket lifecycle logic inside connectWebSocket and return a cleanup function to close connections.
• Use StandardStreamingChat for most cases; upgrade to FullStreamingChat only when attachments and reactions are required.
• Provide optional dependencies (uploadFile, transcribeVoice) only if you need attachments or voice features.
• Debounce typing events and send compact presence updates to minimize WebSocket traffic.

Example use cases

• A support chat that streams LLM suggestions while agents collaborate and see typing status.
• A collaborative document Q&A where multiple users chat, share PDFs, and track live cursors.
• A voice-enabled assistant that records audio, uploads files, and transcribes with Whisper or similar.
• An embedded widget for customer websites that uses a minimal chat UI and a streaming LLM proxy.
• A team chat app with reactions, attachments, and offline presence indicators.