@alliance-droid/chat-widget 0.1.0

package/dist/components/ChatWidget.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { IconButton, Badge } from '@alliance-droid/svelte-component-library/components/atoms';
+	import ChatPanel from './ChatPanel.svelte';
+	import { connect, disconnect, sendMessage, requestEscalation } from '../client/connection.js';
+	import { chatStore } from '../stores/chat.js';
+	import { connectionStore } from '../stores/connection.js';
+	import type { ChatWidgetProps } from '../types.js';
+
+	const {
+		serverUrl,
+		apiKey,
+		reconnect = true,
+		reconnectInterval = 3000,
+		theme = 'dark',
+		position = 'bottom-right',
+		greeting,
+		placeholder = 'Type a message...',
+		fabIcon = 'comment',
+		enableSounds = false,
+		enableEscalation = true,
+		escalationLabel = 'Talk to a human',
+		userId,
+		userMeta,
+		class: className = ''
+	}: ChatWidgetProps = $props();
+
+	let isOpen = $state(false);
+	let unreadCount = $state(0);
+
+	// Subscribe to stores
+	const messages = chatStore.messages;
+	const status = chatStore.status;
+	const isTyping = chatStore.isTyping;
+	const typingSender = chatStore.typingSender;
+	const connectionState = connectionStore.state;
+
+	// Position classes
+	const positionClasses = $derived(() => {
+		return position === 'bottom-left' ? 'left-4' : 'right-4';
+	});
+
+	// Theme class
+	const themeClass = $derived(() => {
+		if (theme === 'auto') return '';
+		return theme;
+	});
+
+	function toggleOpen() {
+		isOpen = !isOpen;
+		if (isOpen) {
+			unreadCount = 0;
+		}
+	}
+
+	function handleMessage(message: string) {
+		sendMessage(message);
+	}
+
+	function handleEscalate() {
+		requestEscalation();
+	}
+
+	function playNotificationSound() {
+		// TODO: Implement sound notification
+	}
+
+	onMount(() => {
+		connect({
+			serverUrl,
+			apiKey,
+			reconnect,
+			reconnectInterval,
+			userId,
+			userMeta
+		});
+
+		// Add greeting message if provided
+		if (greeting) {
+			chatStore.addMessage({
+				id: 'greeting',
+				content: greeting,
+				sender: 'system',
+				timestamp: Date.now()
+			});
+		}
+	});
+
+	onDestroy(() => {
+		disconnect();
+	});
+</script>
+
+<div class="fixed bottom-4 {positionClasses()} z-50 {themeClass()} {className}">
+	{#if isOpen}
+		<div
+			class="w-[380px] h-[600px] max-h-[80vh] mb-4 animate-in fade-in slide-in-from-bottom-4 duration-200"
+		>
+			<ChatPanel
+				messages={$messages}
+				status={$status}
+				connectionState={$connectionState}
+				isTyping={$isTyping}
+				typingSender={$typingSender}
+				{placeholder}
+				{enableEscalation}
+				{escalationLabel}
+				onmessage={handleMessage}
+				onescalate={handleEscalate}
+				onclose={toggleOpen}
+			/>
+		</div>
+	{/if}
+
+	<!-- FAB Button -->
+	<div class="relative">
+		<IconButton
+			variant="primary"
+			size="lg"
+			rounded="full"
+			onclick={toggleOpen}
+			label={isOpen ? 'Close chat' : 'Open chat'}
+			class="w-14 h-14 shadow-lg"
+		>
+			{#if isOpen}
+				<svg class="w-6 h-6" 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>
+			{:else}
+				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+				</svg>
+			{/if}
+		</IconButton>
+
+		{#if !isOpen && unreadCount > 0}
+			<div class="absolute -top-1 -right-1">
+				<Badge variant="danger" size="sm">
+					{unreadCount > 9 ? '9+' : unreadCount}
+				</Badge>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	@keyframes fade-in {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+
+	@keyframes slide-in-from-bottom-4 {
+		from { transform: translateY(1rem); }
+		to { transform: translateY(0); }
+	}
+
+	.animate-in {
+		animation: fade-in 0.2s ease-out, slide-in-from-bottom-4 0.2s ease-out;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { ChatWidgetProps } from '../types.js';
+declare const ChatWidget: import("svelte").Component<ChatWidgetProps, {}, "">;
+type ChatWidget = ReturnType<typeof ChatWidget>;
+export default ChatWidget;

package/dist/components/MessageBubble.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Message } from '../types.js';
+
+	interface Props {
+		message: Message;
+		class?: string;
+	}
+
+	const { message, class: className = '' }: Props = $props();
+
+	const isUser = $derived(message.sender === 'user');
+	const isSystem = $derived(message.sender === 'system');
+
+	const bubbleClasses = $derived(() => {
+		if (isSystem) {
+			return 'bg-surface text-foreground-secondary text-center text-sm italic mx-auto';
+		}
+		if (isUser) {
+			return 'bg-primary text-white ml-auto';
+		}
+		return 'bg-surface text-foreground mr-auto';
+	});
+
+	const senderLabel = $derived(() => {
+		switch (message.sender) {
+			case 'ai':
+				return 'AI';
+			case 'human':
+				return 'Support';
+			case 'system':
+				return '';
+			default:
+				return '';
+		}
+	});
+
+	function formatTime(timestamp: number): string {
+		return new Date(timestamp).toLocaleTimeString([], {
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+</script>
+
+<div class="flex flex-col gap-1 {className}" class:items-end={isUser}>
+	{#if senderLabel() && !isUser}
+		<span class="text-xs text-foreground-tertiary px-1">{senderLabel()}</span>
+	{/if}
+
+	<div class="max-w-[80%] rounded-2xl px-4 py-2 {bubbleClasses()}">
+		<p class="whitespace-pre-wrap break-words">{message.content}</p>
+		{#if message.streaming}
+			<span class="inline-block w-2 h-4 bg-current animate-pulse ml-1">|</span>
+		{/if}
+	</div>
+
+	<span class="text-xs text-foreground-tertiary px-1">
+		{formatTime(message.timestamp)}
+	</span>
+</div>

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

@@ -0,0 +1,8 @@
+import type { Message } from '../types.js';
+interface Props {
+    message: Message;
+    class?: string;
+}
+declare const MessageBubble: import("svelte").Component<Props, {}, "">;
+type MessageBubble = ReturnType<typeof MessageBubble>;
+export default MessageBubble;

package/dist/components/MessageList.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import MessageBubble from './MessageBubble.svelte';
+	import { Spinner } from '@alliance-droid/svelte-component-library/components/atoms';
+	import type { Message } from '../types.js';
+
+	interface Props {
+		messages: Message[];
+		isTyping?: boolean;
+		typingSender?: 'ai' | 'human' | null;
+		class?: string;
+	}
+
+	const { messages, isTyping = false, typingSender = null, class: className = '' }: Props = $props();
+
+	let listElement: HTMLDivElement | undefined = $state();
+
+	// Auto-scroll to bottom when new messages arrive
+	$effect(() => {
+		if (messages.length > 0) {
+			scrollToBottom();
+		}
+	});
+
+	async function scrollToBottom() {
+		await tick();
+		if (listElement) {
+			listElement.scrollTop = listElement.scrollHeight;
+		}
+	}
+
+	const typingLabel = $derived(() => {
+		if (typingSender === 'human') return 'Support is typing...';
+		return 'AI is typing...';
+	});
+</script>
+
+<div
+	bind:this={listElement}
+	class="flex-1 overflow-y-auto p-4 space-y-4 {className}"
+>
+	{#if messages.length === 0}
+		<div class="flex items-center justify-center h-full text-foreground-tertiary">
+			<p>No messages yet</p>
+		</div>
+	{:else}
+		{#each messages as message (message.id)}
+			<MessageBubble {message} />
+		{/each}
+	{/if}
+
+	{#if isTyping}
+		<div class="flex items-center gap-2 text-foreground-tertiary text-sm">
+			<Spinner size="sm" />
+			<span>{typingLabel()}</span>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Message } from '../types.js';
+interface Props {
+    messages: Message[];
+    isTyping?: boolean;
+    typingSender?: 'ai' | 'human' | null;
+    class?: string;
+}
+declare const MessageList: import("svelte").Component<Props, {}, "">;
+type MessageList = ReturnType<typeof MessageList>;
+export default MessageList;

package/dist/components/SupportChat.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import ChatPanel from './ChatPanel.svelte';
+	import { Badge } from '@alliance-droid/svelte-component-library/components/atoms';
+	import { chatStore } from '../stores/chat.js';
+	import { connectionStore } from '../stores/connection.js';
+	import type { SupportChatProps, ClientMessage, ServerMessage } from '../types.js';
+
+	const { serverUrl, sessionId, class: className = '' }: SupportChatProps = $props();
+
+	let ws: WebSocket | null = null;
+
+	const messages = chatStore.messages;
+	const status = chatStore.status;
+	const isTyping = chatStore.isTyping;
+	const typingSender = chatStore.typingSender;
+	const connectionState = connectionStore.state;
+
+	function connect() {
+		connectionStore.setConnecting();
+
+		try {
+			ws = new WebSocket(serverUrl);
+
+			ws.onopen = () => {
+				// Join the session as support agent
+				send({ type: 'join', sessionId });
+			};
+
+			ws.onmessage = (event) => {
+				try {
+					const message: ServerMessage = JSON.parse(event.data);
+					handleServerMessage(message);
+				} catch (err) {
+					console.error('[SupportChat] Failed to parse message:', err);
+				}
+			};
+
+			ws.onclose = () => {
+				connectionStore.setDisconnected();
+			};
+
+			ws.onerror = () => {
+				connectionStore.setError('Connection error');
+			};
+		} catch (err) {
+			connectionStore.setDisconnected('Failed to connect');
+		}
+	}
+
+	function send(message: ClientMessage) {
+		if (ws && ws.readyState === WebSocket.OPEN) {
+			ws.send(JSON.stringify(message));
+		}
+	}
+
+	function handleServerMessage(message: ServerMessage) {
+		switch (message.type) {
+			case 'connected':
+				connectionStore.setConnected(sessionId);
+				chatStore.setStatus('human');
+				break;
+
+			case 'message':
+				if (message.id && message.content && message.sender) {
+					chatStore.addMessage({
+						id: message.id,
+						content: message.content,
+						sender: message.sender,
+						timestamp: message.timestamp || Date.now()
+					});
+				}
+				break;
+
+			case 'typing':
+				chatStore.setTyping(true, 'ai');
+				setTimeout(() => chatStore.setTyping(false, null), 3000);
+				break;
+
+			case 'error':
+				connectionStore.setError(message.error || 'Unknown error');
+				break;
+		}
+	}
+
+	function handleMessage(content: string) {
+		const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+		// Add to local store
+		chatStore.addMessage({
+			id,
+			content,
+			sender: 'human',
+			timestamp: Date.now()
+		});
+
+		// Send to server
+		send({ type: 'message', content, sessionId });
+	}
+
+	onMount(() => {
+		connect();
+	});
+
+	onDestroy(() => {
+		if (ws) {
+			ws.close();
+			ws = null;
+		}
+		chatStore.clear();
+		connectionStore.reset();
+	});
+</script>
+
+<div class="h-full {className}">
+	<ChatPanel
+		messages={$messages}
+		status={$status}
+		connectionState={$connectionState}
+		isTyping={$isTyping}
+		typingSender={$typingSender}
+		placeholder="Reply to customer..."
+		enableEscalation={false}
+		onmessage={handleMessage}
+	>
+		{#snippet header()}
+			<div class="flex items-center gap-2">
+				<span class="font-semibold text-foreground">Support Chat</span>
+				<Badge variant="info" size="sm">Session: {sessionId.slice(0, 8)}...</Badge>
+			</div>
+		{/snippet}
+	</ChatPanel>
+</div>

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

@@ -0,0 +1,4 @@
+import type { SupportChatProps } from '../types.js';
+declare const SupportChat: import("svelte").Component<SupportChatProps, {}, "">;
+type SupportChat = ReturnType<typeof SupportChat>;
+export default SupportChat;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @alliance-droid/chat-widget
+ *
+ * Svelte chat widget with AI support and human escalation
+ */
+export { default as ChatWidget } from './components/ChatWidget.svelte';
+export { default as SupportChat } from './components/SupportChat.svelte';
+export { default as ChatPanel } from './components/ChatPanel.svelte';
+export { default as MessageList } from './components/MessageList.svelte';
+export { default as MessageBubble } from './components/MessageBubble.svelte';
+export { default as ChatInput } from './components/ChatInput.svelte';
+export { chatStore } from './stores/chat.js';
+export { connectionStore } from './stores/connection.js';
+export { connect, disconnect, sendMessage, requestEscalation, sendTyping } from './client/connection.js';
+export type { Message, ClientMessage, ServerMessage, ConnectionState, ChatStatus, ChatWidgetProps, SupportChatProps, ChatServerConfig, AIProviderConfig, EscalationConfig, ChatSession } from './types.js';

package/dist/index.js

@@ -0,0 +1,17 @@
+/**
+ * @alliance-droid/chat-widget
+ *
+ * Svelte chat widget with AI support and human escalation
+ */
+// Components
+export { default as ChatWidget } from './components/ChatWidget.svelte';
+export { default as SupportChat } from './components/SupportChat.svelte';
+export { default as ChatPanel } from './components/ChatPanel.svelte';
+export { default as MessageList } from './components/MessageList.svelte';
+export { default as MessageBubble } from './components/MessageBubble.svelte';
+export { default as ChatInput } from './components/ChatInput.svelte';
+// Stores
+export { chatStore } from './stores/chat.js';
+export { connectionStore } from './stores/connection.js';
+// Client utilities
+export { connect, disconnect, sendMessage, requestEscalation, sendTyping } from './client/connection.js';

package/dist/server/ai/anthropic.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Anthropic Provider
+ *
+ * Fallback AI provider using Anthropic's Claude API
+ */
+import type { AIProvider, AIProviderOptions } from './provider.js';
+import type { Message } from '../../types.js';
+export declare class AnthropicProvider implements AIProvider {
+    private apiKey;
+    private model;
+    private maxTokens;
+    constructor(options: AIProviderOptions);
+    generateResponse(messages: Message[], systemPrompt?: string): AsyncGenerator<string, void, unknown>;
+    summarize(messages: Message[]): Promise<string>;
+    private formatMessages;
+}

package/dist/server/ai/anthropic.js

@@ -0,0 +1,109 @@
+/**
+ * Anthropic Provider
+ *
+ * Fallback AI provider using Anthropic's Claude API
+ */
+const ANTHROPIC_API_URL = 'https://api.anthropic.com/v1/messages';
+export class AnthropicProvider {
+    apiKey;
+    model;
+    maxTokens;
+    constructor(options) {
+        this.apiKey = options.apiKey;
+        this.model = options.model || 'claude-3-haiku-20240307';
+        this.maxTokens = options.maxTokens || 1024;
+    }
+    async *generateResponse(messages, systemPrompt) {
+        const apiMessages = this.formatMessages(messages);
+        const response = await fetch(ANTHROPIC_API_URL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+                'anthropic-version': '2023-06-01'
+            },
+            body: JSON.stringify({
+                model: this.model,
+                max_tokens: this.maxTokens,
+                system: systemPrompt,
+                messages: apiMessages,
+                stream: true
+            })
+        });
+        if (!response.ok) {
+            const error = await response.text();
+            throw new Error(`Anthropic API error: ${response.status} - ${error}`);
+        }
+        const reader = response.body?.getReader();
+        if (!reader)
+            throw new Error('No response body');
+        const decoder = new TextDecoder();
+        let buffer = '';
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done)
+                break;
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop() || '';
+            for (const line of lines) {
+                if (line.startsWith('data: ')) {
+                    const data = line.slice(6);
+                    try {
+                        const parsed = JSON.parse(data);
+                        if (parsed.type === 'content_block_delta') {
+                            const text = parsed.delta?.text;
+                            if (text) {
+                                yield text;
+                            }
+                        }
+                    }
+                    catch {
+                        // Skip invalid JSON
+                    }
+                }
+            }
+        }
+    }
+    async summarize(messages) {
+        const conversationText = messages
+            .map(m => `${m.sender}: ${m.content}`)
+            .join('\n');
+        const response = await fetch(ANTHROPIC_API_URL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': this.apiKey,
+                'anthropic-version': '2023-06-01'
+            },
+            body: JSON.stringify({
+                model: this.model,
+                max_tokens: 150,
+                system: 'Summarize this customer support conversation in 1-2 sentences. Focus on what the customer needs help with.',
+                messages: [
+                    {
+                        role: 'user',
+                        content: conversationText
+                    }
+                ]
+            })
+        });
+        if (!response.ok) {
+            return 'Customer requested support assistance.';
+        }
+        const data = await response.json();
+        return data.content?.[0]?.text || 'Customer requested support assistance.';
+    }
+    formatMessages(messages) {
+        const apiMessages = [];
+        for (const msg of messages) {
+            if (msg.sender === 'user') {
+                apiMessages.push({ role: 'user', content: msg.content });
+            }
+            else if (msg.sender === 'ai') {
+                apiMessages.push({ role: 'assistant', content: msg.content });
+            }
+        }
+        return apiMessages;
+    }
+}

package/dist/server/ai/openai.d.ts

@@ -0,0 +1,16 @@
+/**
+ * OpenAI Provider
+ *
+ * Fallback AI provider using OpenAI's API
+ */
+import type { AIProvider, AIProviderOptions } from './provider.js';
+import type { Message } from '../../types.js';
+export declare class OpenAIProvider implements AIProvider {
+    private apiKey;
+    private model;
+    private maxTokens;
+    constructor(options: AIProviderOptions);
+    generateResponse(messages: Message[], systemPrompt?: string): AsyncGenerator<string, void, unknown>;
+    summarize(messages: Message[]): Promise<string>;
+    private formatMessages;
+}