@liyalabs/liya-ai-chat-react 1.0.0

package/dist/style.css

@@ -0,0 +1 @@
+:root{--liya-primary-color: #6366f1;--liya-primary-hover: #4f46e5;--liya-secondary-color: #e5e7eb;--liya-bg-color: #ffffff;--liya-bg-secondary: #f3f4f6;--liya-text-color: #374151;--liya-text-muted: #9ca3af;--liya-border-color: #e5e7eb;--liya-border-radius: 12px;--liya-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--liya-z-index: 9999;--liya-sidebar-width: 300px}@media (prefers-color-scheme: dark){:root{--liya-bg-color: #1f2937;--liya-bg-secondary: #374151;--liya-text-color: #f9fafb;--liya-text-muted: #9ca3af;--liya-border-color: #4b5563}}.liya-widget,.liya-app{box-sizing:border-box;font-family:var(--liya-font-family);font-size:14px;line-height:1.5;color:var(--liya-text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.liya-widget *,.liya-app *{box-sizing:border-box}.liya-widget button,.liya-app button,.liya-widget input,.liya-widget textarea,.liya-app input,.liya-app textarea{font-family:inherit}.liya-message{display:flex;gap:12px;margin-bottom:16px;max-width:85%}.liya-message--user{margin-left:auto;flex-direction:row-reverse}.liya-message--assistant{margin-right:auto}.liya-message__avatar{flex-shrink:0}.liya-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}.liya-avatar--assistant{background:var(--liya-primary-color, #6366f1);color:#fff}.liya-avatar--user{background:var(--liya-secondary-color, #e5e7eb);color:var(--liya-text-color, #374151)}.liya-message__content{flex:1;min-width:0}.liya-message__bubble{padding:12px 16px;border-radius:var(--liya-border-radius, 12px);word-wrap:break-word}.liya-message--user .liya-message__bubble{background:var(--liya-primary-color, #6366f1);color:#fff;border-bottom-right-radius:4px}.liya-message--assistant .liya-message__bubble{background:var(--liya-bg-secondary, #f3f4f6);color:var(--liya-text-color, #374151);border-bottom-left-radius:4px}.liya-message__text{font-size:14px;line-height:1.5;white-space:pre-wrap}.liya-message__meta{display:flex;gap:8px;margin-top:4px;font-size:11px;color:var(--liya-text-muted, #9ca3af)}.liya-message--user .liya-message__meta{justify-content:flex-end}.liya-message__suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.liya-suggestion{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:13px;font-family:inherit;color:var(--liya-primary-color, #6366f1);background:transparent;border:1px solid var(--liya-primary-color, #6366f1);border-radius:20px;cursor:pointer;transition:all .2s ease}.liya-suggestion:hover{background:var(--liya-primary-color, #6366f1);color:#fff}.liya-suggestion svg{flex-shrink:0}.liya-message-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column}.liya-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;color:var(--liya-text-muted, #9ca3af)}.liya-welcome__icon{margin-bottom:16px;opacity:.5}.liya-welcome__text{font-size:14px;max-width:280px;line-height:1.5;margin:0}.liya-typing{display:flex;align-items:center;gap:12px;margin-bottom:16px}.liya-typing__avatar{width:36px;height:36px;border-radius:50%;background:var(--liya-primary-color, #6366f1);color:#fff;display:flex;align-items:center;justify-content:center}.liya-typing__dots{display:flex;gap:4px;padding:12px 16px;background:var(--liya-bg-secondary, #f3f4f6);border-radius:12px 12px 12px 4px}.liya-typing__dots span{width:8px;height:8px;border-radius:50%;background:var(--liya-text-muted, #9ca3af);animation:liya-typing-bounce 1.4s infinite ease-in-out both}.liya-typing__dots span:nth-child(1){animation-delay:-.32s}.liya-typing__dots span:nth-child(2){animation-delay:-.16s}@keyframes liya-typing-bounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}.liya-chat-input{padding:12px 16px;border-top:1px solid var(--liya-border-color, #e5e7eb);background:var(--liya-bg-color, #ffffff)}.liya-chat-input__files{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.liya-file-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--liya-bg-secondary, #f3f4f6);border-radius:8px;font-size:12px}.liya-file-chip--error{background:#fef2f2;color:#dc2626}.liya-file-chip__name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.liya-file-chip__size{color:var(--liya-text-muted, #9ca3af)}.liya-file-chip__remove{background:none;border:none;padding:2px;cursor:pointer;color:var(--liya-text-muted, #9ca3af);display:flex;align-items:center;justify-content:center}.liya-file-chip__remove:hover{color:var(--liya-text-color, #374151)}.liya-chat-input__wrapper{display:flex;align-items:flex-end;gap:8px;background:var(--liya-bg-secondary, #f3f4f6);border-radius:24px;padding:8px 12px}.liya-chat-input__file-input{display:none}.liya-chat-input__textarea{flex:1;border:none;background:transparent;resize:none;font-size:14px;line-height:1.5;max-height:150px;color:var(--liya-text-color, #374151);font-family:inherit;outline:none}.liya-chat-input__textarea::placeholder{color:var(--liya-text-muted, #9ca3af)}.liya-chat-input__btn{flex-shrink:0;width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;background:transparent;color:var(--liya-text-muted, #9ca3af)}.liya-chat-input__btn:hover:not(:disabled){background:var(--liya-bg-color, #ffffff);color:var(--liya-text-color, #374151)}.liya-chat-input__btn:disabled{opacity:.5;cursor:not-allowed}.liya-chat-input__btn--send{background:var(--liya-primary-color, #6366f1);color:#fff}.liya-chat-input__btn--send:hover:not(:disabled){background:var(--liya-primary-hover, #4f46e5);color:#fff}.liya-chat-input__btn--recording{background:#dc2626;color:#fff;animation:liya-pulse 1.5s infinite}.liya-chat-input__btn--voice-disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--liya-text-muted, #9ca3af)}.liya-chat-input__btn--voice-disabled:hover{background:transparent;color:var(--liya-text-muted, #9ca3af)}@keyframes liya-pulse{0%,to{opacity:1}50%{opacity:.7}}.liya-chat-input__count{text-align:right;font-size:11px;color:var(--liya-text-muted, #9ca3af);margin-top:4px}.liya-widget{position:fixed;z-index:var(--liya-z-index, 9999);font-family:var(--liya-font-family)}.liya-widget--bottom-right{bottom:20px;right:20px}.liya-widget--bottom-left{bottom:20px;left:20px}.liya-widget--top-right{top:20px;right:20px}.liya-widget--top-left{top:20px;left:20px}.liya-widget__toggle{width:60px;height:60px;border-radius:50%;border:none;background:var(--liya-primary-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:all .3s ease}.liya-widget__toggle:hover{transform:scale(1.05);box-shadow:0 6px 16px #0003}.liya-widget__toggle--open{background:var(--liya-text-muted)}.liya-widget__panel{position:absolute;width:380px;height:550px;max-height:calc(100vh - 100px);background:var(--liya-bg-color);border-radius:var(--liya-border-radius);box-shadow:0 10px 40px #00000026;display:flex;flex-direction:column;overflow:hidden}.liya-widget--bottom-right .liya-widget__panel,.liya-widget--bottom-left .liya-widget__panel{bottom:70px}.liya-widget--top-right .liya-widget__panel,.liya-widget--top-left .liya-widget__panel{top:70px}.liya-widget--bottom-right .liya-widget__panel,.liya-widget--top-right .liya-widget__panel{right:0}.liya-widget--bottom-left .liya-widget__panel,.liya-widget--top-left .liya-widget__panel{left:0}.liya-widget__header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--liya-primary-color);color:#fff}.liya-widget__header-info{display:flex;align-items:center;gap:12px}.liya-widget__avatar{width:40px;height:40px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center}.liya-widget__header-text{display:flex;flex-direction:column}.liya-widget__title{margin:0;font-size:16px;font-weight:600}.liya-widget__status{font-size:12px;opacity:.9}.liya-widget__close{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s}.liya-widget__close:hover{opacity:1}.liya-widget__branding{padding:8px;text-align:center;font-size:11px;color:var(--liya-text-muted);border-top:1px solid var(--liya-border-color)}.liya-widget__branding a{color:var(--liya-primary-color);text-decoration:none}.liya-widget__branding a:hover{text-decoration:underline}@media (max-width: 480px){.liya-widget__panel{width:calc(100vw - 40px);height:calc(100vh - 100px);max-height:none}.liya-widget--bottom-right,.liya-widget--bottom-left{bottom:10px;right:10px;left:10px}.liya-widget--bottom-right .liya-widget__panel,.liya-widget--bottom-left .liya-widget__panel{right:0;left:0}}.liya-sidebar{width:100%;height:100%;display:flex;flex-direction:column;background:var(--liya-bg-color, #ffffff);border-right:1px solid var(--liya-border-color, #e5e7eb)}.liya-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--liya-border-color, #e5e7eb)}.liya-sidebar__logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:var(--liya-text-color, #374151)}.liya-sidebar__logo svg{color:var(--liya-primary-color, #6366f1)}.liya-sidebar__new-btn{width:36px;height:36px;border:none;border-radius:8px;background:var(--liya-primary-color, #6366f1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.liya-sidebar__new-btn:hover{background:var(--liya-primary-hover, #4f46e5)}.liya-sidebar__list{flex:1;overflow-y:auto;padding:8px}.liya-sidebar__loading,.liya-sidebar__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--liya-text-muted, #9ca3af);text-align:center}.liya-sidebar__spinner{width:24px;height:24px;border:2px solid var(--liya-border-color, #e5e7eb);border-top-color:var(--liya-primary-color, #6366f1);border-radius:50%;animation:liya-spin .8s linear infinite;margin-bottom:12px}@keyframes liya-spin{to{transform:rotate(360deg)}}.liya-sidebar__empty svg{opacity:.3;margin-bottom:12px}.liya-sidebar__empty p{margin:0 0 16px;font-size:14px}.liya-sidebar__start-btn{padding:10px 20px;border:none;border-radius:8px;background:var(--liya-primary-color, #6366f1);color:#fff;font-size:14px;cursor:pointer;transition:background .2s}.liya-sidebar__start-btn:hover{background:var(--liya-primary-hover, #4f46e5)}.liya-sidebar__item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;cursor:pointer;transition:background .2s;position:relative}.liya-sidebar__item:hover,.liya-sidebar__item--active{background:var(--liya-bg-secondary, #f3f4f6)}.liya-sidebar__item--active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--liya-primary-color, #6366f1);border-radius:0 2px 2px 0}.liya-sidebar__item-icon{flex-shrink:0;color:var(--liya-text-muted, #9ca3af)}.liya-sidebar__item-content{flex:1;min-width:0}.liya-sidebar__item-title{font-size:14px;font-weight:500;color:var(--liya-text-color, #374151);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.liya-sidebar__item-meta{display:flex;gap:8px;font-size:12px;color:var(--liya-text-muted, #9ca3af);margin-top:2px}.liya-sidebar__item-delete{flex-shrink:0;width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:var(--liya-text-muted, #9ca3af);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s}.liya-sidebar__item:hover .liya-sidebar__item-delete{opacity:1}.liya-sidebar__item-delete:hover{background:#fef2f2;color:#dc2626}.liya-app{display:flex;height:100%;width:100%;background:var(--liya-bg-color);font-family:var(--liya-font-family);position:relative;overflow:hidden}.liya-app__mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:var(--liya-bg-color);border-bottom:1px solid var(--liya-border-color);align-items:center;justify-content:space-between;padding:0 12px;z-index:100}.liya-app__menu-btn,.liya-app__new-btn{width:40px;height:40px;border:none;background:transparent;color:var(--liya-text-color);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px}.liya-app__menu-btn:hover,.liya-app__new-btn:hover{background:var(--liya-bg-secondary)}.liya-app__mobile-title{font-weight:600;font-size:16px;color:var(--liya-text-color);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.liya-app__sidebar{width:var(--liya-sidebar-width);flex-shrink:0;height:100%}.liya-app__overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:199}.liya-app__main{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}.liya-app__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--liya-border-color);background:var(--liya-bg-color)}.liya-app__header-info{display:flex;align-items:center;gap:12px}.liya-app__avatar{width:44px;height:44px;border-radius:50%;background:var(--liya-primary-color);color:#fff;display:flex;align-items:center;justify-content:center}.liya-app__header-text{display:flex;flex-direction:column}.liya-app__title{margin:0;font-size:16px;font-weight:600;color:var(--liya-text-color)}.liya-app__status{font-size:13px;color:var(--liya-text-muted)}@media (max-width: 768px){.liya-app__mobile-header{display:flex}.liya-app__sidebar{position:fixed;left:0;top:0;bottom:0;width:300px;z-index:200;transform:translate(-100%);transition:transform .3s ease}.liya-app__sidebar--open{transform:translate(0)}.liya-app__overlay{display:block}.liya-app__main{padding-top:56px}.liya-app__header{display:none}}

package/dist/types/index.d.ts

@@ -0,0 +1,165 @@
+export type ChatMode = 'widget' | 'app';
+export interface LiyaChatConfig {
+    mode?: ChatMode;
+    apiKey: string;
+    baseUrl: string;
+    assistantId: string;
+    assistantName?: string;
+    theme?: ThemeConfig;
+    features?: FeaturesConfig;
+    locale?: string;
+}
+export interface ThemeConfig {
+    primaryColor?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    fontFamily?: string;
+    borderRadius?: string;
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    widgetSize?: 'small' | 'medium' | 'large';
+    zIndex?: number;
+}
+export interface FeaturesConfig {
+    voice?: boolean;
+    voiceEnabled?: boolean;
+    fileUpload?: boolean;
+    sessionHistory?: boolean;
+    markdown?: boolean;
+    codeHighlight?: boolean;
+    typingIndicator?: boolean;
+    soundEffects?: boolean;
+}
+export interface ApiResponse<T = unknown> {
+    status: 'success' | 'error';
+    data?: T;
+    message?: string;
+    errors?: Record<string, string[]>;
+}
+export interface Assistant {
+    id: string;
+    name: string;
+    description: string;
+    model: string;
+    total_messages: number;
+}
+export interface Session {
+    id: string;
+    assistant_id?: string;
+    session_name: string;
+    message_count: number;
+    created_at: string;
+    last_message_at: string | null;
+}
+export interface SessionListResponse {
+    sessions: Session[];
+    total: number;
+    limit: number;
+    offset: number;
+}
+export interface CreateSessionRequest {
+    assistant_id: string;
+    session_name?: string;
+    external_session_id?: string;
+}
+export type MessageRole = 'user' | 'assistant';
+export interface Message {
+    id: string;
+    content: string;
+    role: MessageRole;
+    created_at: string;
+    response_time?: number;
+    attachments?: FileAttachment[];
+    raw_response?: string;
+}
+export interface ParsedResponse {
+    response: string;
+    suggestions?: string[];
+    source?: string;
+    metadata?: {
+        confidence?: number;
+        category?: string;
+        requires_followup?: boolean;
+    };
+}
+export interface SendMessageRequest {
+    assistant_id: string;
+    message: string;
+    session_id?: string;
+    external_session_id?: string;
+    file_ids?: string[];
+}
+export interface SendMessageResponse {
+    session_id: string;
+    message_id?: string;
+    response?: string;
+    response_time?: number;
+    user_message?: Message;
+    assistant_message?: Message;
+}
+export interface SessionHistoryResponse {
+    session_id: string;
+    messages: Message[];
+    total: number;
+}
+export interface FileAttachment {
+    id: string;
+    file_name: string;
+    file_size: number;
+    file_type: string;
+    openai_file_id?: string;
+    created_at: string;
+}
+export interface UploadFileRequest {
+    session_id: string;
+    file: File;
+}
+export interface ChatWidgetProps {
+    position?: ThemeConfig['position'];
+    theme?: ThemeConfig;
+    welcomeMessage?: string;
+    placeholder?: string;
+    showBranding?: boolean;
+    showVoice?: boolean;
+    voiceEnabled?: boolean;
+    showFileUpload?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onMessageSent?: (message: string) => void;
+    onMessageReceived?: (message: string) => void;
+}
+export interface ChatAppProps {
+    theme?: ThemeConfig;
+    showSidebar?: boolean;
+    sidebarWidth?: string;
+    welcomeMessage?: string;
+    placeholder?: string;
+    showVoice?: boolean;
+    voiceEnabled?: boolean;
+    showFileUpload?: boolean;
+    onSessionCreated?: (session: Session) => void;
+    onSessionSelected?: (session: Session) => void;
+    onSessionDeleted?: (sessionId: string) => void;
+    onMessageSent?: (message: string) => void;
+    onMessageReceived?: (message: string) => void;
+}
+export interface MessageBubbleProps {
+    message: Message;
+    showAvatar?: boolean;
+    assistantName?: string;
+    onSuggestionClick?: (suggestion: string) => void;
+}
+export interface ChatInputProps {
+    placeholder?: string;
+    disabled?: boolean;
+    showVoice?: boolean;
+    voiceEnabled?: boolean;
+    showFileUpload?: boolean;
+    maxLength?: number;
+    sessionId?: string | null;
+    onSend: (message: string, fileIds?: string[]) => void;
+}
+export interface LiyaChatContextValue {
+    config: LiyaChatConfig;
+    isInitialized: boolean;
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@liyalabs/liya-ai-chat-react",
+  "version": "1.0.0",
+  "description": "Liya AI Chat - React chat widget and full app component for AI assistants",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "axios": "^1.6.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "keywords": [
+    "react",
+    "chat",
+    "chatbot",
+    "ai",
+    "assistant",
+    "widget",
+    "liya"
+  ],
+  "author": "Liya Labs",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/liyalabs/liya-ai-chat-react"
+  },
+  "homepage": "https://liyalabs.com"
+}