@vezlo/assistant-chat 1.0.0

package/lib/components/Widget.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Send, X, MessageCircle, Bot, ThumbsUp, ThumbsDown } from 'lucide-react';
+import { generateId, formatTimestamp } from '../utils/index.js';
+import { VezloFooter } from './ui/VezloFooter.js';
+import { createConversation, createUserMessage, generateAIResponse } from '../api/index.js';
+export function Widget({ config, isPlayground = false, onOpen, onClose, onMessage, onError, useShadowRoot = false, }) {
+    // Use defaultOpen from config, fallback to isPlayground for backward compatibility
+    const [isOpen, setIsOpen] = useState(config.defaultOpen ?? isPlayground);
+    // Update isOpen when config.defaultOpen changes
+    useEffect(() => {
+        if (config.defaultOpen !== undefined) {
+            setIsOpen(config.defaultOpen);
+        }
+    }, [config.defaultOpen]);
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [messageFeedback, setMessageFeedback] = useState({});
+    const [streamingMessage, setStreamingMessage] = useState('');
+    const [conversationUuid, setConversationUuid] = useState(null);
+    const [isCreatingConversation, setIsCreatingConversation] = useState(false);
+    const messagesEndRef = useRef(null);
+    const hostRef = useRef(null);
+    const shadowRef = useRef(null);
+    const shadowMountRef = useRef(null);
+    const [shadowReady, setShadowReady] = useState(false);
+    useEffect(() => {
+        // No global scroll locking for embedded component usage
+        return () => { };
+    }, [isPlayground]);
+    // Initialize Shadow DOM if enabled
+    useEffect(() => {
+        if (!useShadowRoot)
+            return;
+        if (!hostRef.current)
+            return;
+        if (!shadowRef.current) {
+            shadowRef.current = hostRef.current.attachShadow({ mode: 'open' });
+            // Create a dedicated mount point inside the shadow for React
+            const mount = document.createElement('div');
+            mount.setAttribute('id', 'vezlo-shadow-mount');
+            shadowRef.current.appendChild(mount);
+            shadowMountRef.current = mount;
+            // Clone existing styles into shadow to ensure Tailwind/host CSS is available
+            try {
+                const headNodes = Array.from(document.head.querySelectorAll('style, link[rel="stylesheet"]'));
+                headNodes.forEach((node) => {
+                    shadowRef.current?.appendChild(node.cloneNode(true));
+                });
+            }
+            catch { }
+            // Mark shadow as ready to trigger a re-render for the portal
+            setShadowReady(true);
+        }
+    }, [useShadowRoot]);
+    // Create conversation when widget opens for the first time
+    useEffect(() => {
+        const initializeConversation = async () => {
+            if (isOpen && !conversationUuid && !isCreatingConversation) {
+                setIsCreatingConversation(true);
+                try {
+                    // Create a new conversation
+                    const userUuid = import.meta.env.VITE_DEFAULT_USER_UUID || 'user-' + generateId().substring(0, 8);
+                    const companyUuid = import.meta.env.VITE_DEFAULT_COMPANY_UUID || 'company-' + generateId().substring(0, 8);
+                    const conversation = await createConversation({
+                        title: 'New Chat',
+                        user_uuid: userUuid,
+                        company_uuid: companyUuid,
+                    });
+                    setConversationUuid(conversation.uuid);
+                    console.log('[Widget] Conversation created:', conversation.uuid);
+                    // Add welcome message after conversation is created
+                    const welcomeMsg = {
+                        id: generateId(),
+                        content: config.welcomeMessage || 'Hello! I\'m your AI assistant. How can I help you today?',
+                        role: 'assistant',
+                        timestamp: new Date(),
+                    };
+                    setMessages([welcomeMsg]);
+                    onMessage?.(welcomeMsg);
+                }
+                catch (error) {
+                    console.error('[Widget] Failed to create conversation:', error);
+                    onError?.('Failed to initialize conversation');
+                    // Still show welcome message even if conversation creation fails
+                    const welcomeMsg = {
+                        id: generateId(),
+                        content: config.welcomeMessage || 'Hello! I\'m your AI assistant. How can I help you today?',
+                        role: 'assistant',
+                        timestamp: new Date(),
+                    };
+                    setMessages([welcomeMsg]);
+                    onMessage?.(welcomeMsg);
+                }
+                finally {
+                    setIsCreatingConversation(false);
+                }
+            }
+        };
+        initializeConversation();
+    }, [isOpen, conversationUuid, isCreatingConversation, config.welcomeMessage, onMessage, onError]);
+    useEffect(() => {
+        // Scroll to bottom when messages change or when streaming
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages, streamingMessage]);
+    const handleSendMessage = async () => {
+        if (!input.trim() || isLoading || !conversationUuid)
+            return;
+        const userMessageContent = input;
+        const userMessage = {
+            id: generateId(),
+            content: userMessageContent,
+            role: 'user',
+            timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        onMessage?.(userMessage);
+        setInput('');
+        setIsLoading(true);
+        try {
+            // Step 1: Create user message via API
+            const userMessageResponse = await createUserMessage(conversationUuid, {
+                content: userMessageContent,
+            });
+            console.log('[Widget] User message created:', userMessageResponse.uuid);
+            // Update the user message with the actual UUID from server
+            setMessages((prev) => prev.map((msg) => msg.id === userMessage.id ? { ...msg, id: userMessageResponse.uuid } : msg));
+            // Step 2: Generate AI response
+            // Keep loading indicator visible until AI response is received
+            const aiResponse = await generateAIResponse(userMessageResponse.uuid);
+            console.log('[Widget] AI response received:', aiResponse.uuid);
+            // Hide loading indicator now that we have the response
+            setIsLoading(false);
+            // Stream the AI response character by character
+            const responseContent = aiResponse.content;
+            setStreamingMessage('');
+            let currentText = '';
+            const streamInterval = setInterval(() => {
+                if (currentText.length < responseContent.length) {
+                    currentText += responseContent[currentText.length];
+                    setStreamingMessage(currentText);
+                }
+                else {
+                    clearInterval(streamInterval);
+                    // Add the complete message to messages array
+                    const assistantMessage = {
+                        id: aiResponse.uuid,
+                        content: responseContent,
+                        role: 'assistant',
+                        timestamp: new Date(aiResponse.created_at),
+                    };
+                    setMessages((prev) => [...prev, assistantMessage]);
+                    onMessage?.(assistantMessage);
+                    setStreamingMessage('');
+                }
+            }, 15); // 15ms delay between characters for smooth streaming
+        }
+        catch (error) {
+            console.error('[Widget] Error sending message:', error);
+            setIsLoading(false);
+            onError?.('Failed to send message');
+            // Show error message to user
+            const errorMessage = {
+                id: generateId(),
+                content: 'Sorry, I encountered an error processing your message. Please try again.',
+                role: 'assistant',
+                timestamp: new Date(),
+            };
+            setMessages((prev) => [...prev, errorMessage]);
+            onMessage?.(errorMessage);
+        }
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSendMessage();
+        }
+    };
+    const handleFeedback = (messageId, type) => {
+        setMessageFeedback(prev => ({
+            ...prev,
+            [messageId]: prev[messageId] === type ? null : type
+        }));
+    };
+    const handleOpenWidget = () => {
+        setIsOpen(true);
+        onOpen?.();
+        // Notify parent window (for embed mode)
+        if (window.parent && !isPlayground) {
+            window.parent.postMessage({ type: 'vezlo-widget-opened' }, '*');
+        }
+    };
+    const handleCloseWidget = () => {
+        setIsOpen(false);
+        onClose?.();
+        // Notify parent window (for embed mode)
+        if (window.parent && !isPlayground) {
+            window.parent.postMessage({ type: 'vezlo-widget-closed' }, '*');
+        }
+    };
+    // Fixed positioning styles for embedded usage (non-playground)
+    const isBottomRight = config.position !== 'bottom-left';
+    const isInIframe = window.parent !== window;
+    const containerStyle = isPlayground
+        ? {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+        }
+        : isInIframe
+            ? {
+                // When in iframe, don't add positioning - let iframe handle it
+                position: 'relative',
+                zIndex: 2147483647,
+                pointerEvents: 'none', // container lets clicks pass unless on inner elements
+            }
+            : {
+                position: 'fixed',
+                zIndex: 2147483647,
+                bottom: 20,
+                right: isBottomRight ? 20 : undefined,
+                left: !isBottomRight ? 20 : undefined,
+                pointerEvents: 'none', // container lets clicks pass unless on inner elements
+            };
+    const content = (_jsxs("div", { id: "vezlo-widget-root", className: ``, style: containerStyle, children: [_jsx("style", { 
+                // Using unique, prefixed names to avoid collisions with host styles
+                dangerouslySetInnerHTML: {
+                    __html: `
+@keyframes vezloDotPulse { 0%, 80%, 100% { opacity: .2; transform: scale(0.8);} 40% { opacity: 1; transform: scale(1);} }
+@keyframes vezloCaretBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
+          `
+                } }), !isOpen && (_jsxs("div", { className: "relative animate-fadeIn", style: { pointerEvents: 'auto', width: 64, height: 64 }, children: [_jsx("div", { style: {
+                            position: 'absolute',
+                            inset: 0,
+                            backgroundColor: config.themeColor || '#059669',
+                            borderRadius: 9999,
+                            opacity: 0.2,
+                            filter: 'blur(0px)'
+                        } }), _jsx("button", { onClick: handleOpenWidget, style: {
+                            position: 'relative',
+                            width: 64,
+                            height: 64,
+                            borderRadius: 9999,
+                            color: '#fff',
+                            background: `linear-gradient(135deg, ${config.themeColor}, ${config.themeColor}dd)`,
+                            boxShadow: '0 10px 25px rgba(0,0,0,0.20)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'transform 0.2s ease, box-shadow 0.2s ease'
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.transform = 'scale(1.05)';
+                            e.currentTarget.style.boxShadow = '0 14px 30px rgba(0,0,0,0.22)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.transform = 'scale(1)';
+                            e.currentTarget.style.boxShadow = '0 10px 25px rgba(0,0,0,0.20)';
+                        }, children: _jsx(MessageCircle, { className: "w-7 h-7" }) })] })), isOpen && (_jsxs("div", { className: "bg-white rounded-2xl shadow-2xl flex flex-col border border-gray-100 overflow-hidden animate-fadeIn", style: {
+                    pointerEvents: 'auto',
+                    width: (config.size && config.size.width) ? config.size.width : 420,
+                    height: (config.size && config.size.height) ? config.size.height : 600
+                }, children: [_jsxs("div", { className: "text-white p-4 flex justify-between items-center relative overflow-hidden", style: { background: `linear-gradient(to right, ${config.themeColor}, ${config.themeColor}dd, ${config.themeColor}bb)`, color: '#fff' }, children: [_jsxs("div", { className: "absolute inset-0 opacity-10", children: [_jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-gradient-to-br from-white/20 to-transparent" }), _jsx("div", { className: "absolute bottom-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-8 translate-x-8" })] }), _jsxs("div", { className: "flex items-center gap-3 relative z-10", children: [_jsx("div", { className: "w-10 h-10 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm", children: _jsx(Bot, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-lg", children: config.title }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-2 h-2 bg-green-400 rounded-full animate-pulse" }), _jsxs("p", { className: "text-xs text-emerald-100", children: ["Online \u2022 ", config.subtitle] })] })] })] }), _jsx("button", { onClick: handleCloseWidget, className: "hover:bg-white/20 rounded-lg p-2 transition-all duration-200 hover:scale-110 relative z-10", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 bg-gradient-to-b from-gray-50 to-gray-100", children: [messages.map((message, index) => (_jsxs("div", { className: `flex ${message.role === 'user' ? 'justify-end' : 'justify-start'} animate-fadeIn`, style: { animationDelay: `${index * 0.1}s` }, children: [message.role === 'assistant' && (_jsx("div", { className: "w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1 mr-2", children: _jsx(Bot, { className: "w-4 h-4 text-emerald-600" }) })), _jsxs("div", { className: "flex flex-col max-w-[75%]", children: [_jsx("div", { className: `rounded-2xl px-4 py-3 shadow-sm transition-all duration-200 hover:shadow-md ${message.role === 'user'
+                                                    ? 'text-white'
+                                                    : 'bg-white text-gray-900 border border-gray-200'}`, style: {
+                                                    backgroundColor: message.role === 'user' ? config.themeColor : undefined,
+                                                    boxShadow: message.role === 'user'
+                                                        ? `0 4px 12px ${config.themeColor}4D` // 4D is ~30% opacity
+                                                        : '0 2px 8px rgba(0, 0, 0, 0.1)'
+                                                }, children: _jsx("p", { className: "text-sm whitespace-pre-wrap break-words leading-relaxed", children: message.content }) }), _jsxs("div", { className: "flex items-center justify-between mt-1", children: [_jsx("p", { className: `text-xs ${message.role === 'user' ? 'text-emerald-100' : 'text-gray-500'}`, children: formatTimestamp(message.timestamp) }), message.role === 'assistant' && (_jsxs("div", { className: "flex items-center gap-1 ml-2", children: [_jsx("button", { onClick: () => handleFeedback(message.id, 'like'), className: `p-1 rounded transition-all duration-200 hover:scale-110 cursor-pointer ${messageFeedback[message.id] === 'like'
+                                                                    ? 'text-green-600'
+                                                                    : 'text-gray-400 hover:text-green-600'}`, children: _jsx(ThumbsUp, { className: `w-4 h-4 ${messageFeedback[message.id] === 'like' ? 'fill-current' : ''}` }) }), _jsx("button", { onClick: () => handleFeedback(message.id, 'dislike'), className: `p-1 rounded transition-all duration-200 hover:scale-110 cursor-pointer ${messageFeedback[message.id] === 'dislike'
+                                                                    ? 'text-red-600'
+                                                                    : 'text-gray-400 hover:text-red-600'}`, children: _jsx(ThumbsDown, { className: `w-4 h-4 ${messageFeedback[message.id] === 'dislike' ? 'fill-current' : ''}` }) })] }))] })] })] }, message.id))), streamingMessage && (_jsxs("div", { className: "flex justify-start animate-fadeIn", children: [_jsx("div", { className: "w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1 mr-2", children: _jsx(Bot, { className: "w-4 h-4 text-emerald-600" }) }), _jsx("div", { className: "flex flex-col max-w-[75%]", children: _jsx("div", { className: "bg-white text-gray-900 border border-gray-200 rounded-2xl px-4 py-3 shadow-sm", children: _jsxs("p", { className: "text-sm whitespace-pre-wrap break-words leading-relaxed", style: { color: '#111827' }, children: [streamingMessage, _jsx("span", { style: { display: 'inline-block', animation: 'vezloCaretBlink 1s steps(1, end) infinite' }, children: "|" })] }) }) })] })), isLoading && (_jsx("div", { className: "flex justify-start animate-fadeIn", children: _jsx("div", { className: "bg-white border border-gray-200 rounded-2xl px-4 py-3 flex items-center gap-3 shadow-sm", children: _jsxs("div", { className: "flex gap-1", style: { display: 'flex', gap: '4px' }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || '#10b981', display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0s' } }), _jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || '#10b981', display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0.15s' } }), _jsx("span", { style: { width: 8, height: 8, borderRadius: 9999, backgroundColor: config.themeColor || '#10b981', display: 'inline-block', animation: 'vezloDotPulse 1s infinite ease-in-out', animationDelay: '0.3s' } })] }) }) })), _jsx("div", { ref: messagesEndRef })] }), _jsx("div", { className: "border-t border-gray-200 p-4 bg-white", children: _jsxs("div", { className: "flex gap-3", children: [_jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyPress: handleKeyPress, placeholder: config.placeholder, disabled: isLoading, className: "flex-1 px-4 py-3 border border-gray-300 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed text-sm transition-all duration-200" }), _jsx("button", { onClick: handleSendMessage, disabled: !input.trim() || isLoading, className: "text-white px-4 py-3 rounded-2xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center shadow-lg hover:shadow-xl disabled:shadow-none transform hover:scale-105 disabled:scale-100", style: { background: `linear-gradient(to right, ${config.themeColor}, ${config.themeColor}dd)` }, children: _jsx(Send, { className: "w-4 h-4" }) })] }) }), _jsx("div", { className: "border-t border-gray-200 px-4 py-3 bg-gradient-to-r from-gray-50 to-gray-100", children: _jsx(VezloFooter, { size: "sm" }) })] }))] }));
+    if (useShadowRoot) {
+        // Ensure host exists in DOM
+        return (_jsx("div", { ref: hostRef, style: { all: 'initial' }, children: shadowReady && shadowMountRef.current ? createPortal(content, shadowMountRef.current) : null }));
+    }
+    return content;
+}

package/lib/components/ui/VezloFooter.d.ts

@@ -0,0 +1,5 @@
+interface VezloFooterProps {
+    size?: 'sm' | 'md';
+}
+export declare function VezloFooter({ size }: VezloFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ui/VezloFooter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { THEME } from '../../config/theme.js';
+export function VezloFooter({ size = 'md' }) {
+    const iconSize = size === 'sm' ? 'w-3 h-3' : 'w-4 h-4';
+    const textSize = size === 'sm' ? 'text-xs' : 'text-sm';
+    return (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: `${iconSize} rounded-sm flex items-center justify-center`, style: { backgroundColor: THEME.primary.hex }, children: _jsx("span", { className: "text-white text-xs font-bold", children: "V" }) }), _jsxs("p", { className: `${textSize} text-gray-600`, children: ["Powered by ", _jsx("span", { className: "font-semibold", style: { color: THEME.primary.hex }, children: "Vezlo" })] })] }));
+}

package/lib/config/theme.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Centralized theme configuration
+ * Change these values to update colors across the entire application
+ */
+export declare const THEME: {
+    readonly primary: {
+        readonly hex: "#059669";
+        readonly tailwind: "emerald";
+    };
+    readonly colors: {
+        readonly bg: "bg-emerald-600";
+        readonly bgHover: "bg-emerald-700";
+        readonly bgLight: "bg-emerald-100";
+        readonly bgLighter: "bg-emerald-50";
+        readonly text: "text-emerald-600";
+        readonly textHover: "text-emerald-700";
+        readonly textLight: "text-emerald-100";
+        readonly border: "border-emerald-600";
+        readonly borderLight: "border-emerald-200";
+    };
+};
+export declare const getButtonGradient: (color?: string) => string;
+export declare const getHeaderGradient: (color?: string) => string;

package/lib/config/theme.js

@@ -0,0 +1,31 @@
+/**
+ * Centralized theme configuration
+ * Change these values to update colors across the entire application
+ */
+export const THEME = {
+    // Primary brand color (emerald)
+    primary: {
+        hex: '#059669',
+        tailwind: 'emerald',
+    },
+    // Tailwind color variants
+    colors: {
+        bg: 'bg-emerald-600',
+        bgHover: 'bg-emerald-700',
+        bgLight: 'bg-emerald-100',
+        bgLighter: 'bg-emerald-50',
+        text: 'text-emerald-600',
+        textHover: 'text-emerald-700',
+        textLight: 'text-emerald-100',
+        border: 'border-emerald-600',
+        borderLight: 'border-emerald-200',
+    },
+};
+// Helper function to get gradient for buttons
+export const getButtonGradient = (color = THEME.primary.hex) => {
+    return `linear-gradient(to right, ${color}, ${color}dd)`;
+};
+// Helper function to get header gradient
+export const getHeaderGradient = (color = THEME.primary.hex) => {
+    return `linear-gradient(to right, ${color}, ${color}dd, ${color}bb)`;
+};

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { Widget } from './components/Widget.js';
+export type { WidgetProps } from './components/Widget.js';
+export type { WidgetConfig, ChatMessage, ChatSource, ChatState, AssistantServerResponse } from './types/index.js';
+export { generateId, formatTimestamp, validateWidgetConfig, parseSize, getEnvConfig, debugLog } from './utils/index.js';
+export { THEME } from './config/theme.js';

package/lib/index.js

@@ -0,0 +1,6 @@
+// Export the main Widget component for library usage
+export { Widget } from './components/Widget.js';
+// Export utilities
+export { generateId, formatTimestamp, validateWidgetConfig, parseSize, getEnvConfig, debugLog } from './utils/index.js';
+// Export theme
+export { THEME } from './config/theme.js';

package/lib/types/index.d.ts

@@ -0,0 +1,54 @@
+export interface WidgetConfig {
+    uuid: string;
+    theme: 'light' | 'dark';
+    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    size: {
+        width: number;
+        height: number;
+    };
+    title: string;
+    subtitle?: string;
+    placeholder?: string;
+    welcomeMessage?: string;
+    apiUrl: string;
+    apiKey: string;
+    themeColor?: string;
+    defaultOpen?: boolean;
+}
+export interface ChatMessage {
+    id: string;
+    content: string;
+    role: 'user' | 'assistant';
+    timestamp: Date;
+    sources?: ChatSource[];
+}
+export interface ChatSource {
+    title: string;
+    url?: string;
+    content?: string;
+}
+export interface ChatState {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    error?: string;
+    isOpen: boolean;
+}
+export interface AssistantServerResponse {
+    message: string;
+    sources?: ChatSource[];
+    conversationId?: string;
+}
+export interface WidgetProps {
+    config: WidgetConfig;
+    onMessage?: (message: ChatMessage) => void;
+    onError?: (error: string) => void;
+}
+export interface EnvConfig {
+    VITE_ASSISTANT_SERVER_URL: string;
+    VITE_ASSISTANT_SERVER_API_KEY: string;
+    VITE_WIDGET_DEFAULT_THEME: 'light' | 'dark';
+    VITE_WIDGET_DEFAULT_POSITION: string;
+    VITE_WIDGET_DEFAULT_SIZE: string;
+    VITE_DEV_MODE: boolean;
+    VITE_DEBUG_MODE: boolean;
+}

package/lib/types/index.js

@@ -0,0 +1,2 @@
+// Core types for the assistant chat widget
+export {};

package/lib/utils/index.d.ts

@@ -0,0 +1,19 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function generateId(): string;
+export declare function formatTimestamp(date: Date): string;
+export declare function validateWidgetConfig(config: any): boolean;
+export declare function parseSize(sizeString: string): {
+    width: number;
+    height: number;
+};
+export declare function getEnvConfig(): {
+    VITE_ASSISTANT_SERVER_URL: any;
+    VITE_ASSISTANT_SERVER_API_KEY: any;
+    VITE_WIDGET_DEFAULT_THEME: "light" | "dark";
+    VITE_WIDGET_DEFAULT_POSITION: any;
+    VITE_WIDGET_DEFAULT_SIZE: any;
+    VITE_DEV_MODE: boolean;
+    VITE_DEBUG_MODE: boolean;
+};
+export declare function debugLog(message: string, data?: any): void;

package/lib/utils/index.js

@@ -0,0 +1,47 @@
+import { clsx } from 'clsx';
+// Utility function for conditional CSS classes
+export function cn(...inputs) {
+    return clsx(inputs);
+}
+// Generate unique IDs
+export function generateId() {
+    return Math.random().toString(36).substr(2, 9);
+}
+// Format timestamp
+export function formatTimestamp(date) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+// Validate widget configuration
+export function validateWidgetConfig(config) {
+    return (config &&
+        typeof config.uuid === 'string' &&
+        typeof config.apiUrl === 'string' &&
+        typeof config.apiKey === 'string' &&
+        typeof config.title === 'string');
+}
+// Parse size string (e.g., "350x500") to object
+export function parseSize(sizeString) {
+    const [width, height] = sizeString.split('x').map(Number);
+    return {
+        width: width || 350,
+        height: height || 500
+    };
+}
+// Get environment configuration
+export function getEnvConfig() {
+    return {
+        VITE_ASSISTANT_SERVER_URL: import.meta.env.VITE_ASSISTANT_SERVER_URL || 'http://localhost:3000',
+        VITE_ASSISTANT_SERVER_API_KEY: import.meta.env.VITE_ASSISTANT_SERVER_API_KEY || '',
+        VITE_WIDGET_DEFAULT_THEME: import.meta.env.VITE_WIDGET_DEFAULT_THEME || 'light',
+        VITE_WIDGET_DEFAULT_POSITION: import.meta.env.VITE_WIDGET_DEFAULT_POSITION || 'bottom-right',
+        VITE_WIDGET_DEFAULT_SIZE: import.meta.env.VITE_WIDGET_DEFAULT_SIZE || '350x500',
+        VITE_DEV_MODE: import.meta.env.VITE_DEV_MODE === 'true',
+        VITE_DEBUG_MODE: import.meta.env.VITE_DEBUG_MODE === 'true'
+    };
+}
+// Debug logging
+export function debugLog(message, data) {
+    if (getEnvConfig().VITE_DEBUG_MODE) {
+        console.log(`[VezloChat] ${message}`, data);
+    }
+}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@vezlo/assistant-chat",
+  "version": "1.0.0",
+  "description": "React component library for AI-powered chat widgets with RAG knowledge base integration and real-time streaming",
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./widget.js": "./public/widget.js"
+  },
+  "files": [
+    "lib",
+    "public/widget.js",
+    "PACKAGE_README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && npm run build:types && vite build",
+    "build:types": "tsc -p tsconfig.lib.json",
+    "lint": "eslint .",
+    "preview": "vite preview --port 5173 --host 0.0.0.0",
+    "clean": "rm -rf dist",
+    "start": "npm run preview",
+    "vercel-build": "npm run build",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "react-router-dom": "^7.9.3",
+    "tailwindcss": "^4.1.14"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^24.6.2",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^5.0.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "postcss": "^8.5.6",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7"
+  },
+  "keywords": [
+    "ai-chatbot",
+    "chat-widget",
+    "chatbot",
+    "knowledge-base",
+    "rag",
+    "vector-search",
+    "embeddings",
+    "conversational-ai",
+    "llm",
+    "ai-assistant",
+    "saas-bot",
+    "customer-support",
+    "react-widget",
+    "embeddable-chat",
+    "semantic-search",
+    "ai-sdk",
+    "openai",
+    "supabase",
+    "pgvector",
+    "typescript"
+  ],
+  "author": "Vezlo",
+  "license": "AGPL-3.0",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vezlo/assistant-chat.git"
+  },
+  "homepage": "https://github.com/vezlo/assistant-chat#readme",
+  "bugs": {
+    "url": "https://github.com/vezlo/assistant-chat/issues"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.0.0"
+  },
+  "readme": "PACKAGE_README.md"
+}