@aspect-ops/exon-ui 0.1.0 → 0.2.1

package/dist/components/Chatbot/Chatbot.svelte

@@ -0,0 +1,640 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import ChatMessage from './ChatMessage.svelte';
+	import type { ChatMessage as ChatMessageType, LeadData } from './types.js';
+
+	interface Props {
+		initialMessages?: ChatMessageType[];
+		sessionId?: string;
+		placeholder?: string;
+		welcomeMessage?: string;
+		title?: string;
+		subtitle?: string;
+		defaultOpen?: boolean;
+		inactivityTimeout?: number;
+		showTypingIndicator?: boolean;
+		position?: 'bottom-right' | 'bottom-left';
+		class?: string;
+		onSendMessage?: (message: string, sessionId: string) => Promise<string | null>;
+		onEscalate?: (sessionId: string, messages: ChatMessageType[]) => Promise<void>;
+		onLeadCapture?: (data: LeadData, sessionId: string) => Promise<void>;
+		onOpen?: () => void;
+		onClose?: () => void;
+	}
+
+	let {
+		initialMessages = [],
+		sessionId: propSessionId,
+		placeholder = 'Type your message...',
+		welcomeMessage = 'Hello! How can I help you today?',
+		title = 'Chat Support',
+		subtitle = 'We typically reply within minutes',
+		defaultOpen = false,
+		inactivityTimeout = 40000,
+		showTypingIndicator = true,
+		position = 'bottom-right',
+		class: className = '',
+		onSendMessage,
+		onEscalate,
+		onLeadCapture,
+		onOpen,
+		onClose
+	}: Props = $props();
+
+	// State - intentionally capture initial values (not reactive to prop changes)
+	// eslint-disable-next-line svelte/valid-compile
+	let isOpen = $state(defaultOpen);
+	let isMinimized = $state(false);
+	// eslint-disable-next-line svelte/valid-compile
+	let messages = $state<ChatMessageType[]>([...initialMessages]);
+	let inputValue = $state('');
+	let isTyping = $state(false);
+	// eslint-disable-next-line svelte/valid-compile
+	let sessionId = $state(propSessionId || generateSessionId());
+	let messagesContainer: HTMLDivElement | undefined = $state();
+	let textareaRef: HTMLTextAreaElement | undefined = $state();
+	let inactivityTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// Generate session ID
+	function generateSessionId(): string {
+		return `chat_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+	}
+
+	// Create message helper
+	function createMessage(role: ChatMessageType['role'], content: string): ChatMessageType {
+		return {
+			id: `msg_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
+			role,
+			content,
+			timestamp: new Date()
+		};
+	}
+
+	// Auto-resize textarea
+	function autoResize() {
+		if (textareaRef) {
+			textareaRef.style.height = 'auto';
+			textareaRef.style.height = Math.min(textareaRef.scrollHeight, 120) + 'px';
+		}
+	}
+
+	// Scroll to bottom
+	function scrollToBottom() {
+		if (messagesContainer) {
+			setTimeout(() => {
+				if (messagesContainer) {
+					messagesContainer.scrollTop = messagesContainer.scrollHeight;
+				}
+			}, 50);
+		}
+	}
+
+	// Handle send message
+	async function handleSend() {
+		const content = inputValue.trim();
+		if (!content) return;
+
+		// Add user message
+		const userMessage = createMessage('user', content);
+		messages = [...messages, userMessage];
+		inputValue = '';
+		if (textareaRef) {
+			textareaRef.style.height = 'auto';
+		}
+		scrollToBottom();
+
+		// Show typing indicator
+		if (showTypingIndicator && onSendMessage) {
+			isTyping = true;
+		}
+
+		// Call onSendMessage callback
+		if (onSendMessage) {
+			try {
+				const response = await onSendMessage(content, sessionId);
+				if (response) {
+					const assistantMessage = createMessage('assistant', response);
+					messages = [...messages, assistantMessage];
+				}
+			} catch (error) {
+				const errorMessage = createMessage(
+					'system',
+					'Sorry, something went wrong. Please try again.'
+				);
+				messages = [...messages, errorMessage];
+			} finally {
+				isTyping = false;
+				scrollToBottom();
+			}
+		}
+	}
+
+	// Handle key press
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSend();
+		}
+	}
+
+	// Handle escalation
+	async function handleEscalate() {
+		if (onEscalate) {
+			const systemMessage = createMessage('system', 'Connecting you to a human agent...');
+			messages = [...messages, systemMessage];
+			scrollToBottom();
+
+			try {
+				await onEscalate(sessionId, messages);
+				const successMessage = createMessage('system', 'A human agent will be with you shortly.');
+				messages = [...messages, successMessage];
+			} catch {
+				const errorMessage = createMessage(
+					'system',
+					'Unable to connect to an agent. Please try again later.'
+				);
+				messages = [...messages, errorMessage];
+			}
+			scrollToBottom();
+		}
+	}
+
+	// Open chat
+	function openChat() {
+		isOpen = true;
+		isMinimized = false;
+
+		// Add welcome message if no messages
+		if (messages.length === 0 && welcomeMessage) {
+			const welcome = createMessage('assistant', welcomeMessage);
+			messages = [welcome];
+		}
+
+		onOpen?.();
+		scrollToBottom();
+	}
+
+	// Close chat
+	function closeChat() {
+		isOpen = false;
+		isMinimized = false;
+		onClose?.();
+	}
+
+	// Minimize chat
+	function minimizeChat() {
+		isMinimized = true;
+	}
+
+	// Restore from minimized
+	function restoreChat() {
+		isMinimized = false;
+		scrollToBottom();
+	}
+
+	// Reset inactivity timer
+	function resetInactivityTimer() {
+		if (inactivityTimer) {
+			clearTimeout(inactivityTimer);
+			inactivityTimer = null;
+		}
+
+		if (inactivityTimeout > 0 && !isOpen) {
+			inactivityTimer = setTimeout(() => {
+				openChat();
+			}, inactivityTimeout);
+		}
+	}
+
+	// Setup inactivity detection
+	onMount(() => {
+		if (inactivityTimeout > 0 && !defaultOpen) {
+			resetInactivityTimer();
+
+			const events = ['mousemove', 'keydown', 'scroll', 'click'];
+			events.forEach((event) => {
+				document.addEventListener(event, resetInactivityTimer, { passive: true });
+			});
+
+			return () => {
+				events.forEach((event) => {
+					document.removeEventListener(event, resetInactivityTimer);
+				});
+			};
+		}
+	});
+
+	onDestroy(() => {
+		if (inactivityTimer) {
+			clearTimeout(inactivityTimer);
+		}
+	});
+
+	// Scroll on new messages
+	$effect(() => {
+		if (messages.length > 0) {
+			scrollToBottom();
+		}
+	});
+</script>
+
+<div
+	class="chatbot chatbot--{position} {className}"
+	class:chatbot--open={isOpen}
+	class:chatbot--minimized={isMinimized}
+>
+	{#if isOpen}
+		<div class="chatbot__window">
+			<!-- Header -->
+			<div class="chatbot__header">
+				<div class="chatbot__header-info">
+					<div class="chatbot__title">{title}</div>
+					<div class="chatbot__subtitle">{subtitle}</div>
+				</div>
+				<div class="chatbot__header-actions">
+					<button
+						type="button"
+						class="chatbot__header-btn"
+						onclick={minimizeChat}
+						aria-label="Minimize chat"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M5 12h14" />
+						</svg>
+					</button>
+					<button
+						type="button"
+						class="chatbot__header-btn"
+						onclick={closeChat}
+						aria-label="Close chat"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M18 6L6 18" />
+							<path d="M6 6l12 12" />
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			{#if !isMinimized}
+				<!-- Messages -->
+				<div class="chatbot__messages" bind:this={messagesContainer}>
+					{#each messages as message (message.id)}
+						<ChatMessage {message} />
+					{/each}
+
+					{#if isTyping}
+						<div class="chatbot__typing">
+							<div class="chatbot__typing-dot"></div>
+							<div class="chatbot__typing-dot"></div>
+							<div class="chatbot__typing-dot"></div>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Quick Actions -->
+				{#if onEscalate}
+					<div class="chatbot__actions">
+						<button type="button" class="chatbot__action-btn" onclick={handleEscalate}>
+							Talk to human
+						</button>
+					</div>
+				{/if}
+
+				<!-- Input -->
+				<div class="chatbot__input-container">
+					<textarea
+						bind:this={textareaRef}
+						bind:value={inputValue}
+						{placeholder}
+						class="chatbot__input"
+						rows="1"
+						oninput={autoResize}
+						onkeydown={handleKeyDown}
+					></textarea>
+					<button
+						type="button"
+						class="chatbot__send-btn"
+						onclick={handleSend}
+						disabled={!inputValue.trim()}
+						aria-label="Send message"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M22 2L11 13" />
+							<path d="M22 2l-7 20-4-9-9-4 20-7z" />
+						</svg>
+					</button>
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<!-- Launcher Button -->
+		<button type="button" class="chatbot__launcher" onclick={openChat} aria-label="Open chat">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+			</svg>
+		</button>
+	{/if}
+</div>
+
+<style>
+	.chatbot {
+		position: fixed;
+		z-index: 9999;
+		font-family: inherit;
+	}
+
+	.chatbot--bottom-right {
+		bottom: var(--space-lg, 1.5rem);
+		right: var(--space-lg, 1.5rem);
+	}
+
+	.chatbot--bottom-left {
+		bottom: var(--space-lg, 1.5rem);
+		left: var(--space-lg, 1.5rem);
+	}
+
+	/* Launcher */
+	.chatbot__launcher {
+		width: 3.5rem;
+		height: 3.5rem;
+		border-radius: var(--radius-full, 9999px);
+		border: none;
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
+		transition: all var(--transition-base, 200ms ease);
+	}
+
+	.chatbot__launcher:hover {
+		background: var(--color-primary-hover, #2563eb);
+		transform: scale(1.05);
+	}
+
+	.chatbot__launcher:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Window */
+	.chatbot__window {
+		width: 380px;
+		max-width: calc(100vw - 2rem);
+		height: 500px;
+		max-height: calc(100vh - 6rem);
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-xl, 1rem);
+		box-shadow:
+			0 25px 50px -12px rgba(0, 0, 0, 0.25),
+			0 0 0 1px rgba(0, 0, 0, 0.05);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.chatbot--minimized .chatbot__window {
+		height: auto;
+	}
+
+	/* Header */
+	.chatbot__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--space-md, 1rem);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.chatbot__header-info {
+		flex: 1;
+	}
+
+	.chatbot__title {
+		font-size: var(--text-base, 1rem);
+		font-weight: var(--font-semibold, 600);
+	}
+
+	.chatbot__subtitle {
+		font-size: var(--text-xs, 0.75rem);
+		opacity: 0.9;
+	}
+
+	.chatbot__header-actions {
+		display: flex;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	.chatbot__header-btn {
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-md, 0.375rem);
+		transition: background var(--transition-fast, 150ms ease);
+	}
+
+	.chatbot__header-btn:hover {
+		background: rgba(255, 255, 255, 0.2);
+	}
+
+	/* Messages */
+	.chatbot__messages {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--space-md, 1rem);
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* Typing indicator */
+	.chatbot__typing {
+		display: flex;
+		gap: 4px;
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		background: var(--color-bg-muted, #f3f4f6);
+		border-radius: var(--radius-lg, 0.75rem);
+		width: fit-content;
+		margin-bottom: var(--space-sm, 0.5rem);
+	}
+
+	.chatbot__typing-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-text-muted, #6b7280);
+		animation: typing 1.4s infinite ease-in-out both;
+	}
+
+	.chatbot__typing-dot:nth-child(1) {
+		animation-delay: 0s;
+	}
+
+	.chatbot__typing-dot:nth-child(2) {
+		animation-delay: 0.2s;
+	}
+
+	.chatbot__typing-dot:nth-child(3) {
+		animation-delay: 0.4s;
+	}
+
+	@keyframes typing {
+		0%,
+		80%,
+		100% {
+			transform: scale(0.6);
+			opacity: 0.4;
+		}
+		40% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	/* Quick Actions */
+	.chatbot__actions {
+		padding: 0 var(--space-md, 1rem);
+		padding-bottom: var(--space-sm, 0.5rem);
+	}
+
+	.chatbot__action-btn {
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-full, 9999px);
+		background: transparent;
+		color: var(--color-text-muted, #6b7280);
+		font-size: var(--text-xs, 0.75rem);
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+	}
+
+	.chatbot__action-btn:hover {
+		background: var(--color-bg-muted, #f3f4f6);
+		border-color: var(--color-border-hover, #d1d5db);
+	}
+
+	/* Input */
+	.chatbot__input-container {
+		display: flex;
+		align-items: flex-end;
+		gap: var(--space-sm, 0.5rem);
+		padding: var(--space-md, 1rem);
+		border-top: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	.chatbot__input {
+		flex: 1;
+		min-height: 2.5rem;
+		max-height: 120px;
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-lg, 0.75rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		resize: none;
+		transition: border-color var(--transition-fast, 150ms ease);
+	}
+
+	.chatbot__input:focus {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	.chatbot__input::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.chatbot__send-btn {
+		width: 2.5rem;
+		height: 2.5rem;
+		border: none;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all var(--transition-fast, 150ms ease);
+		flex-shrink: 0;
+	}
+
+	.chatbot__send-btn:hover:not(:disabled) {
+		background: var(--color-primary-hover, #2563eb);
+	}
+
+	.chatbot__send-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Mobile */
+	@media (max-width: 480px) {
+		.chatbot--bottom-right,
+		.chatbot--bottom-left {
+			bottom: var(--space-md, 1rem);
+			right: var(--space-md, 1rem);
+			left: var(--space-md, 1rem);
+		}
+
+		.chatbot__window {
+			width: 100%;
+			max-width: none;
+			height: calc(100vh - 6rem);
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { ChatMessage as ChatMessageType, LeadData } from './types.js';
+interface Props {
+    initialMessages?: ChatMessageType[];
+    sessionId?: string;
+    placeholder?: string;
+    welcomeMessage?: string;
+    title?: string;
+    subtitle?: string;
+    defaultOpen?: boolean;
+    inactivityTimeout?: number;
+    showTypingIndicator?: boolean;
+    position?: 'bottom-right' | 'bottom-left';
+    class?: string;
+    onSendMessage?: (message: string, sessionId: string) => Promise<string | null>;
+    onEscalate?: (sessionId: string, messages: ChatMessageType[]) => Promise<void>;
+    onLeadCapture?: (data: LeadData, sessionId: string) => Promise<void>;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare const Chatbot: import("svelte").Component<Props, {}, "">;
+type Chatbot = ReturnType<typeof Chatbot>;
+export default Chatbot;

package/dist/components/Chatbot/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Chatbot } from './Chatbot.svelte';
+export { default as ChatMessage } from './ChatMessage.svelte';
+export type { ChatMessage as ChatMessageType, MessageRole, LeadData, ChatbotProps } from './types.js';

package/dist/components/Chatbot/index.js

@@ -0,0 +1,2 @@
+export { default as Chatbot } from './Chatbot.svelte';
+export { default as ChatMessage } from './ChatMessage.svelte';

package/dist/components/Chatbot/types.d.ts

@@ -0,0 +1,48 @@
+export type MessageRole = 'user' | 'assistant' | 'system';
+export interface ChatMessage {
+    id: string;
+    role: MessageRole;
+    content: string;
+    timestamp?: Date;
+}
+export interface LeadData {
+    name?: string;
+    email?: string;
+    phone?: string;
+    company?: string;
+    [key: string]: string | undefined;
+}
+export interface ChatbotProps {
+    /** Initial messages to display */
+    initialMessages?: ChatMessage[];
+    /** Session ID for conversation tracking */
+    sessionId?: string;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Welcome message shown when chat opens */
+    welcomeMessage?: string;
+    /** Title shown in header */
+    title?: string;
+    /** Subtitle shown in header */
+    subtitle?: string;
+    /** Whether chat starts open */
+    defaultOpen?: boolean;
+    /** Inactivity timeout in ms before auto-opening (0 to disable) */
+    inactivityTimeout?: number;
+    /** Whether to show typing indicator when waiting for response */
+    showTypingIndicator?: boolean;
+    /** Position of the chat widget */
+    position?: 'bottom-right' | 'bottom-left';
+    /** Custom class */
+    class?: string;
+    /** Called when user sends a message. Should return AI response or null */
+    onSendMessage?: (message: string, sessionId: string) => Promise<string | null>;
+    /** Called when user requests human agent */
+    onEscalate?: (sessionId: string, messages: ChatMessage[]) => Promise<void>;
+    /** Called when lead data is captured */
+    onLeadCapture?: (data: LeadData, sessionId: string) => Promise<void>;
+    /** Called when chat is opened */
+    onOpen?: () => void;
+    /** Called when chat is closed */
+    onClose?: () => void;
+}

package/dist/components/Chatbot/types.js

@@ -0,0 +1,2 @@
+// Chatbot component types
+export {};