@alliance-droid/chat-widget 0.1.0

package/README.md

@@ -0,0 +1,102 @@
+# @alliance-droid/chat-widget
+
+A Svelte chat widget with AI support and human escalation.
+
+## Installation
+
+```bash
+npm install @alliance-droid/chat-widget
+```
+
+## Usage
+
+### Client Widget
+
+```svelte
+<script>
+  import { ChatWidget } from '@alliance-droid/chat-widget';
+</script>
+
+<ChatWidget
+  serverUrl="wss://your-server.com/chat"
+  theme="dark"
+  position="bottom-right"
+  greeting="Hi! How can I help you today?"
+  enableEscalation={true}
+/>
+```
+
+### Server Setup
+
+```typescript
+import { createChatHandler } from '@alliance-droid/chat-widget/server';
+import { WebSocketServer } from 'ws';
+
+const wss = new WebSocketServer({ port: 8080 });
+
+const chatHandler = createChatHandler({
+  ai: {
+    provider: 'xai',
+    apiKey: process.env.XAI_API_KEY,
+    model: 'grok-2-latest',
+    systemPrompt: 'You are a helpful assistant...'
+  },
+  escalation: {
+    telegram: {
+      botToken: process.env.TELEGRAM_BOT_TOKEN,
+      chatId: process.env.TELEGRAM_CHAT_ID
+    },
+    joinUrl: (sessionId) => `https://yourapp.com/support/chat/${sessionId}`
+  }
+});
+
+wss.on('connection', chatHandler);
+```
+
+### Support Agent View
+
+```svelte
+<script>
+  import { SupportChat } from '@alliance-droid/chat-widget';
+  import { page } from '$app/stores';
+</script>
+
+<SupportChat
+  serverUrl="wss://your-server.com/chat"
+  sessionId={$page.params.sessionId}
+/>
+```
+
+## Props
+
+### ChatWidget
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| serverUrl | string | required | WebSocket server URL |
+| theme | 'light' \| 'dark' \| 'auto' | 'dark' | Color theme |
+| position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Widget position |
+| greeting | string | undefined | Initial greeting message |
+| placeholder | string | 'Type a message...' | Input placeholder |
+| enableEscalation | boolean | true | Show "Talk to human" button |
+| escalationLabel | string | 'Talk to a human' | Escalation button text |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Build package
+npm run build:package
+
+# Run tests
+npm test
+```
+
+## License
+
+MIT

package/dist/client/connection.d.ts

@@ -0,0 +1,39 @@
+/**
+ * WebSocket Connection Client
+ *
+ * Handles WebSocket connection with auto-reconnect
+ */
+import type { ClientMessage } from '../types.js';
+export interface ConnectionOptions {
+    serverUrl: string;
+    apiKey?: string;
+    reconnect?: boolean;
+    reconnectInterval?: number;
+    maxReconnectAttempts?: number;
+    userId?: string;
+    userMeta?: Record<string, unknown>;
+}
+/**
+ * Connect to the chat server
+ */
+export declare function connect(opts: ConnectionOptions): void;
+/**
+ * Disconnect from the server
+ */
+export declare function disconnect(): void;
+/**
+ * Send a message to the server
+ */
+export declare function send(message: ClientMessage): void;
+/**
+ * Send a chat message
+ */
+export declare function sendMessage(content: string): void;
+/**
+ * Request escalation to human support
+ */
+export declare function requestEscalation(): void;
+/**
+ * Send typing indicator
+ */
+export declare function sendTyping(): void;

package/dist/client/connection.js

@@ -0,0 +1,198 @@
+/**
+ * WebSocket Connection Client
+ *
+ * Handles WebSocket connection with auto-reconnect
+ */
+import { connectionStore } from '../stores/connection.js';
+import { chatStore } from '../stores/chat.js';
+let ws = null;
+let reconnectTimeout = null;
+let options = null;
+/**
+ * Connect to the chat server
+ */
+export function connect(opts) {
+    options = opts;
+    connectionStore.setConnecting();
+    try {
+        ws = new WebSocket(opts.serverUrl);
+        ws.onopen = () => {
+            console.log('[ChatWidget] WebSocket connected, authenticating...');
+            // Send auth message with API key
+            if (ws && opts.apiKey) {
+                ws.send(JSON.stringify({
+                    type: 'auth',
+                    apiKey: opts.apiKey,
+                    userId: opts.userId,
+                    userMeta: opts.userMeta
+                }));
+            }
+        };
+        ws.onmessage = (event) => {
+            try {
+                const message = JSON.parse(event.data);
+                handleServerMessage(message);
+            }
+            catch (err) {
+                console.error('[ChatWidget] Failed to parse message:', err);
+            }
+        };
+        ws.onclose = (event) => {
+            console.log('[ChatWidget] WebSocket closed:', event.code, event.reason);
+            connectionStore.setDisconnected();
+            // Attempt reconnect if enabled
+            if (opts.reconnect !== false && opts.maxReconnectAttempts !== 0) {
+                scheduleReconnect();
+            }
+        };
+        ws.onerror = (error) => {
+            console.error('[ChatWidget] WebSocket error:', error);
+            connectionStore.setError('Connection error');
+        };
+    }
+    catch (err) {
+        console.error('[ChatWidget] Failed to connect:', err);
+        connectionStore.setDisconnected('Failed to connect');
+    }
+}
+/**
+ * Disconnect from the server
+ */
+export function disconnect() {
+    if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout);
+        reconnectTimeout = null;
+    }
+    if (ws) {
+        ws.close();
+        ws = null;
+    }
+    connectionStore.reset();
+    chatStore.clear();
+}
+/**
+ * Send a message to the server
+ */
+export function send(message) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        console.warn('[ChatWidget] Cannot send message: not connected');
+        return;
+    }
+    ws.send(JSON.stringify(message));
+}
+/**
+ * Send a chat message
+ */
+export function sendMessage(content) {
+    const id = generateId();
+    const timestamp = Date.now();
+    // Add message to local store immediately
+    chatStore.addMessage({
+        id,
+        content,
+        sender: 'user',
+        timestamp
+    });
+    // Send to server
+    send({
+        type: 'message',
+        content
+    });
+}
+/**
+ * Request escalation to human support
+ */
+export function requestEscalation() {
+    chatStore.setStatus('escalating');
+    send({ type: 'escalate' });
+}
+/**
+ * Send typing indicator
+ */
+export function sendTyping() {
+    send({ type: 'typing' });
+}
+/**
+ * Handle incoming server message
+ */
+function handleServerMessage(message) {
+    switch (message.type) {
+        case 'connected':
+        case 'auth_success':
+            if (message.sessionId) {
+                connectionStore.setConnected(message.sessionId);
+                chatStore.setStatus('ai');
+            }
+            break;
+        case 'message':
+            if (message.id && message.content && message.sender) {
+                const msg = {
+                    id: message.id,
+                    content: message.content,
+                    sender: message.sender,
+                    timestamp: message.timestamp || Date.now(),
+                    streaming: message.streaming
+                };
+                if (message.streaming) {
+                    // Update existing message or add new one
+                    chatStore.updateMessage(message.id, { content: message.content });
+                }
+                else {
+                    chatStore.addMessage(msg);
+                }
+            }
+            break;
+        case 'typing':
+            chatStore.setTyping(true, message.sender);
+            // Auto-clear after 3 seconds
+            setTimeout(() => chatStore.setTyping(false, null), 3000);
+            break;
+        case 'escalated':
+            chatStore.setStatus('human');
+            chatStore.addMessage({
+                id: generateId(),
+                content: 'You are now connected with support.',
+                sender: 'system',
+                timestamp: Date.now()
+            });
+            break;
+        case 'status':
+            if (message.content) {
+                chatStore.addMessage({
+                    id: generateId(),
+                    content: message.content,
+                    sender: 'system',
+                    timestamp: Date.now()
+                });
+            }
+            break;
+        case 'error':
+            connectionStore.setError(message.error || 'Unknown error');
+            break;
+        case 'auth_error':
+            connectionStore.setError(message.error || 'Authentication failed');
+            // Don't reconnect on auth errors
+            if (ws) {
+                ws.close();
+            }
+            break;
+    }
+}
+/**
+ * Schedule a reconnection attempt
+ */
+function scheduleReconnect() {
+    if (!options)
+        return;
+    const interval = options.reconnectInterval || 3000;
+    reconnectTimeout = setTimeout(() => {
+        connectionStore.setReconnecting();
+        connect(options);
+    }, interval);
+}
+/**
+ * Generate a unique ID
+ */
+function generateId() {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}

package/dist/client/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Client-side exports
+ */
+export { connect, disconnect, send, sendMessage, requestEscalation, sendTyping } from './connection.js';
+export { chatStore } from '../stores/chat.js';
+export { connectionStore } from '../stores/connection.js';

package/dist/client/index.js

@@ -0,0 +1,6 @@
+/**
+ * Client-side exports
+ */
+export { connect, disconnect, send, sendMessage, requestEscalation, sendTyping } from './connection.js';
+export { chatStore } from '../stores/chat.js';
+export { connectionStore } from '../stores/connection.js';

package/dist/components/ChatInput.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { IconButton } from '@alliance-droid/svelte-component-library/components/atoms';
+
+	interface Props {
+		placeholder?: string;
+		disabled?: boolean;
+		onsubmit?: (message: string) => void;
+		class?: string;
+	}
+
+	const {
+		placeholder = 'Type a message...',
+		disabled = false,
+		onsubmit,
+		class: className = ''
+	}: Props = $props();
+
+	let inputValue = $state('');
+	let inputElement: HTMLTextAreaElement | undefined = $state();
+
+	function handleSubmit() {
+		const message = inputValue.trim();
+		if (!message || disabled) return;
+
+		onsubmit?.(message);
+		inputValue = '';
+
+		// Reset textarea height
+		if (inputElement) {
+			inputElement.style.height = 'auto';
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSubmit();
+		}
+	}
+
+	function handleInput() {
+		// Auto-resize textarea
+		if (inputElement) {
+			inputElement.style.height = 'auto';
+			inputElement.style.height = Math.min(inputElement.scrollHeight, 120) + 'px';
+		}
+	}
+</script>
+
+<div class="flex items-end gap-2 p-4 border-t border-border {className}">
+	<textarea
+		bind:this={inputElement}
+		bind:value={inputValue}
+		{placeholder}
+		{disabled}
+		rows="1"
+		class="flex-1 resize-none bg-surface border border-border rounded-xl px-4 py-2 text-foreground placeholder-foreground-tertiary focus:outline-none focus:border-primary transition-colors disabled:opacity-50"
+		onkeydown={handleKeydown}
+		oninput={handleInput}
+	></textarea>
+
+	<IconButton
+		variant="primary"
+		size="md"
+		disabled={disabled || !inputValue.trim()}
+		onclick={handleSubmit}
+		label="Send message"
+	>
+		<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+		</svg>
+	</IconButton>
+</div>

package/dist/components/ChatInput.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    placeholder?: string;
+    disabled?: boolean;
+    onsubmit?: (message: string) => void;
+    class?: string;
+}
+declare const ChatInput: import("svelte").Component<Props, {}, "">;
+type ChatInput = ReturnType<typeof ChatInput>;
+export default ChatInput;

package/dist/components/ChatPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { IconButton, Button, Badge } from '@alliance-droid/svelte-component-library/components/atoms';
+	import MessageList from './MessageList.svelte';
+	import ChatInput from './ChatInput.svelte';
+	import type { Message, ChatStatus, ConnectionState } from '../types.js';
+
+	interface Props {
+		messages: Message[];
+		status: ChatStatus;
+		connectionState: ConnectionState;
+		isTyping?: boolean;
+		typingSender?: 'ai' | 'human' | null;
+		placeholder?: string;
+		enableEscalation?: boolean;
+		escalationLabel?: string;
+		onmessage?: (message: string) => void;
+		onescalate?: () => void;
+		onclose?: () => void;
+		header?: Snippet;
+		class?: string;
+	}
+
+	const {
+		messages,
+		status,
+		connectionState,
+		isTyping = false,
+		typingSender = null,
+		placeholder = 'Type a message...',
+		enableEscalation = true,
+		escalationLabel = 'Talk to a human',
+		onmessage,
+		onescalate,
+		onclose,
+		header,
+		class: className = ''
+	}: Props = $props();
+
+	const isConnected = $derived(connectionState === 'connected');
+	const isEscalated = $derived(status === 'human');
+	const isEscalating = $derived(status === 'escalating');
+
+	const statusBadge = $derived(() => {
+		switch (status) {
+			case 'ai':
+				return { label: 'AI', variant: 'info' as const };
+			case 'human':
+				return { label: 'Support', variant: 'success' as const };
+			case 'escalating':
+				return { label: 'Connecting...', variant: 'warning' as const };
+			default:
+				return null;
+		}
+	});
+</script>
+
+<div class="flex flex-col h-full bg-surface rounded-2xl shadow-xl border border-border overflow-hidden {className}">
+	<!-- Header -->
+	<div class="flex items-center justify-between px-4 py-3 border-b border-border bg-surface">
+		{#if header}
+			{@render header()}
+		{:else}
+			<div class="flex items-center gap-2">
+				<span class="font-semibold text-foreground">Chat</span>
+				{#if statusBadge()}
+					<Badge variant={statusBadge()!.variant} size="sm">
+						{statusBadge()!.label}
+					</Badge>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="flex items-center gap-1">
+			{#if enableEscalation && !isEscalated && !isEscalating}
+				<Button
+					variant="neutral"
+					style="ghost"
+					size="sm"
+					onclick={onescalate}
+					disabled={!isConnected}
+				>
+					{escalationLabel}
+				</Button>
+			{/if}
+			{#if onclose}
+				<IconButton
+					variant="neutral"
+					size="sm"
+					onclick={onclose}
+					label="Close chat"
+				>
+					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</IconButton>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Messages -->
+	<MessageList {messages} {isTyping} {typingSender} class="flex-1" />
+
+	<!-- Input -->
+	<ChatInput
+		{placeholder}
+		disabled={!isConnected}
+		onsubmit={onmessage}
+	/>
+
+	<!-- Connection status -->
+	{#if connectionState === 'connecting' || connectionState === 'reconnecting'}
+		<div class="px-4 py-2 bg-warning/10 text-warning text-sm text-center">
+			{connectionState === 'reconnecting' ? 'Reconnecting...' : 'Connecting...'}
+		</div>
+	{/if}
+</div>

package/dist/components/ChatPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { Message, ChatStatus, ConnectionState } from '../types.js';
+interface Props {
+    messages: Message[];
+    status: ChatStatus;
+    connectionState: ConnectionState;
+    isTyping?: boolean;
+    typingSender?: 'ai' | 'human' | null;
+    placeholder?: string;
+    enableEscalation?: boolean;
+    escalationLabel?: string;
+    onmessage?: (message: string) => void;
+    onescalate?: () => void;
+    onclose?: () => void;
+    header?: Snippet;
+    class?: string;
+}
+declare const ChatPanel: import("svelte").Component<Props, {}, "">;
+type ChatPanel = ReturnType<typeof ChatPanel>;
+export default ChatPanel;