acecoderz-chat-ui 1.0.0

package/README.md

@@ -0,0 +1,309 @@
+# @chatbot/chat-ui
+
+A framework-agnostic, fully customizable chat UI package that works with React, Solid, Vanilla JS, and any other framework.
+
+## Features
+
+- 🎨 **Fully Customizable** - Theme via CSS variables or props
+- 🔌 **Framework Agnostic** - Works with React, Solid, Vue, Svelte, and Vanilla JS
+- 🚀 **Lightweight Core** - Zero framework dependencies in the core
+- 💬 **Real-time Support** - WebSocket and HTTP API support
+- 🎯 **TypeScript** - Full TypeScript support
+- 📦 **Modular** - Import only what you need
+
+## Installation
+
+### npm/pnpm/yarn
+
+```bash
+pnpm add @chatbot/chat-ui
+# or
+npm install @chatbot/chat-ui
+# or
+yarn add @chatbot/chat-ui
+```
+
+### Browser / CDN (Script Tag)
+
+For browser usage without a build step, see [CDN.md](./CDN.md) for detailed documentation.
+
+**Quick Start:**
+```html
+<!-- Include CSS -->
+<link rel="stylesheet" href="https://cdn.example.com/chatbot-ui.css">
+
+<!-- Include JavaScript -->
+<script src="https://cdn.example.com/chatbot-ui.min.js"></script>
+
+<!-- Add container -->
+<div id="chatbot-container"></div>
+
+<!-- Initialize -->
+<script>
+  ChatbotUI.init('chatbot-container', {
+    config: {
+      apiUrl: 'https://your-api.com/api/chat',
+    },
+    theme: {
+      primaryColor: '#3b82f6',
+      userMessageColor: '#3b82f6',
+      assistantMessageColor: '#f1f5f9',
+    },
+  });
+</script>
+```
+
+**Building for CDN:**
+```bash
+# Build browser bundle
+pnpm build:browser
+
+# Output files will be in dist/browser/:
+# - chatbot-ui.min.js (production)
+# - chatbot-ui.js (development)
+# - chatbot-ui.css (styles)
+# - cdn-example.html (example file)
+```
+
+### Iframe Embedding
+
+After building, you can embed the chatbot in an iframe:
+
+```html
+<iframe 
+  src="https://cdn.example.com/chatbot.html?apiUrl=https://your-api.com/api/chat"
+  width="400" 
+  height="600"
+  frameborder="0">
+</iframe>
+```
+
+## CSS Setup
+
+Import the CSS file in your project:
+
+```css
+@import '@chatbot/chat-ui/styles';
+```
+
+Or in your JavaScript/TypeScript:
+
+```javascript
+import '@chatbot/chat-ui/styles';
+```
+
+## Usage
+
+### React
+
+```tsx
+import { ChatUI } from '@chatbot/chat-ui/react';
+import '@chatbot/chat-ui/styles';
+
+function App() {
+  return (
+    <ChatUI
+      config={{
+        apiUrl: 'http://localhost:3000/api',
+      }}
+      theme={{
+        primaryColor: '#3b82f6',
+        userMessageColor: '#3b82f6',
+      }}
+    />
+  );
+}
+```
+
+Or use the hook directly:
+
+```tsx
+import { useChat } from '@chatbot/chat-ui/react';
+
+function CustomChat() {
+  const { messages, input, sendMessage, setInput } = useChat({
+    apiUrl: 'http://localhost:3000/api',
+  });
+
+  return (
+    <div>
+      {messages.map(msg => (
+        <div key={msg.id}>{msg.content}</div>
+      ))}
+      <input value={input} onChange={e => setInput(e.target.value)} />
+      <button onClick={() => sendMessage(input)}>Send</button>
+    </div>
+  );
+}
+```
+
+### Solid
+
+```tsx
+import { createChat } from '@chatbot/chat-ui/solid';
+import '@chatbot/chat-ui/styles';
+
+function App() {
+  const chat = createChat({
+    apiUrl: 'http://localhost:3000/api',
+  });
+
+  return (
+    <div>
+      <For each={chat.messages()}>
+        {(msg) => <div>{msg.content}</div>}
+      </For>
+      <input 
+        value={chat.input()} 
+        onInput={e => chat.setInput(e.target.value)} 
+      />
+      <button onClick={() => chat.sendMessage(chat.input())}>
+        Send
+      </button>
+    </div>
+  );
+}
+```
+
+### Vanilla JS
+
+```javascript
+import { createChatUI } from '@chatbot/chat-ui/vanilla';
+import '@chatbot/chat-ui/styles';
+
+const container = document.getElementById('chat-container');
+
+const chatUI = createChatUI({
+  config: {
+    apiUrl: 'http://localhost:3000/api',
+  },
+  theme: {
+    primaryColor: '#3b82f6',
+  },
+  container,
+});
+
+// Later, to destroy:
+// chatUI.destroy();
+```
+
+### Core Only (Advanced)
+
+```typescript
+import { ChatEngine } from '@chatbot/chat-ui/core';
+
+const engine = new ChatEngine({
+  apiUrl: 'http://localhost:3000/api',
+});
+
+engine.on('messagesChange', (messages) => {
+  console.log('Messages updated:', messages);
+});
+
+engine.sendMessage('Hello!');
+```
+
+## Theming
+
+### CSS Variables
+
+The package uses CSS variables for theming. You can override them:
+
+```css
+.chat-container {
+  --chat-primary-color: #your-color;
+  --chat-user-message-color: #your-color;
+  --chat-assistant-message-color: #your-color;
+  --chat-border-radius: 0.5rem;
+  --chat-font-family: 'Your Font', sans-serif;
+  /* ... and more */
+}
+```
+
+### Theme Props (React)
+
+```tsx
+<ChatUI
+  config={config}
+  theme={{
+    primaryColor: '#3b82f6',
+    userMessageColor: '#3b82f6',
+    assistantMessageColor: '#f1f5f9',
+    borderRadius: '0.5rem',
+    fontFamily: 'system-ui, sans-serif',
+  }}
+/>
+```
+
+## Configuration
+
+```typescript
+interface ChatConfig {
+  apiUrl?: string;              // Backend API URL
+  apiKey?: string;              // API key for authentication
+  headers?: Record<string, string>; // Custom headers
+  onMessage?: (message: Message) => void; // Message callback
+  onError?: (error: Error) => void; // Error callback
+  enableWebSocket?: boolean;    // Enable WebSocket
+  websocketUrl?: string;        // WebSocket URL
+}
+```
+
+## Customization
+
+### Custom Message Renderer (React)
+
+```tsx
+<ChatUI
+  config={config}
+  customMessageRenderer={(message) => (
+    <div className="my-custom-message">
+      {message.content}
+    </div>
+  )}
+/>
+```
+
+### Custom Input Renderer (React)
+
+```tsx
+<ChatUI
+  config={config}
+  customInputRenderer={({ value, onChange, onSend, disabled }) => (
+    <div>
+      <textarea value={value} onChange={e => onChange(e.target.value)} />
+      <button onClick={onSend} disabled={disabled}>Send</button>
+    </div>
+  )}
+/>
+```
+
+## Backend API
+
+The package expects a backend API with the following endpoint:
+
+### POST `/api/chat`
+
+Request:
+```json
+{
+  "message": "Hello!",
+  "conversationId": "optional-conversation-id"
+}
+```
+
+Response:
+```json
+{
+  "id": "message-id",
+  "message": "Response message",
+  "content": "Response message",
+  "timestamp": "2024-01-01T00:00:00.000Z",
+  "metadata": {}
+}
+```
+
+## License
+
+MIT
+

package/browser/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Browser Entry Point
+ * This file is used to create the browser bundle (UMD format)
+ * It imports the vanilla adapter, exposing ChatbotUI globally
+ */
+
+// Import the vanilla adapter (which already sets up window.ChatbotUI)
+import { createChatUI } from '../adapters/vanilla/index.js';
+
+// Re-export for convenience
+export { createChatUI };
+export type { ChatUIOptions, ChatUIInstance } from '../adapters/vanilla/index.js';
+
+// The vanilla adapter already sets up window.ChatbotUI when in browser context
+// This ensures it's available globally when loaded via script tag

package/dist/adapters/react/ChatUI.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ChatConfig, ChatTheme, Message } from '../../core/src/types';
+export interface ChatUIProps {
+    config: ChatConfig;
+    theme?: ChatTheme;
+    className?: string;
+    placeholder?: string;
+    showTimestamp?: boolean;
+    showAvatar?: boolean;
+    userAvatar?: string | React.ReactNode;
+    assistantAvatar?: string | React.ReactNode;
+    maxHeight?: string;
+    disabled?: boolean;
+    initialGreeting?: string;
+    messagesContainerClassName?: string;
+    messageClassName?: string;
+    inputContainerClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    errorClassName?: string;
+    emptyStateClassName?: string;
+    customMessageRenderer?: (message: Message) => React.ReactNode;
+    customInputRenderer?: (props: {
+        value: string;
+        onChange: (value: string) => void;
+        onSend: () => void;
+        disabled: boolean;
+    }) => React.ReactNode;
+    dataAttributes?: Record<string, string>;
+}
+export declare const ChatUI: React.FC<ChatUIProps>;
+//# sourceMappingURL=ChatUI.d.ts.map

package/dist/adapters/react/ChatUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatUI.d.ts","sourceRoot":"","sources":["../../../adapters/react/ChatUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAuD3E,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC5B,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,QAAQ,EAAE,OAAO,CAAC;KACnB,KAAK,KAAK,CAAC,SAAS,CAAC;IAEtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgOxC,CAAC"}

package/dist/adapters/react/ChatUI.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useChat } from './useChat';
+// Optional markdown support - will be dynamically imported if available
+// Add react-markdown and remark-gfm to your app's dependencies to enable markdown rendering
+const MarkdownContent = ({ content }) => {
+    const [MarkdownRenderer, setMarkdownRenderer] = React.useState(null);
+    React.useEffect(() => {
+        // @ts-ignore - react-markdown is an optional dependency
+        import('react-markdown')
+            .then((module) => {
+            // @ts-ignore - remark-gfm is an optional dependency
+            import('remark-gfm')
+                .then((gfm) => {
+                setMarkdownRenderer(() => {
+                    const ReactMarkdown = module.default;
+                    const remarkGfm = gfm.default;
+                    // Note: react-markdown v10+ removed className prop
+                    // We wrap it in a div with the className instead
+                    return (props) => (_jsx("div", { className: "chat-markdown", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: props.children }) }));
+                });
+            })
+                .catch(() => {
+                // remark-gfm not available, use basic markdown
+                setMarkdownRenderer(() => {
+                    const ReactMarkdown = module.default;
+                    return (props) => (_jsx("div", { className: "chat-markdown", children: _jsx(ReactMarkdown, { children: props.children }) }));
+                });
+            });
+        })
+            .catch(() => {
+            // react-markdown not available, will use plain text
+        });
+    }, []);
+    if (MarkdownRenderer) {
+        return _jsx(MarkdownRenderer, { children: content });
+    }
+    return _jsx("div", { className: "chat-markdown", children: content });
+};
+export const ChatUI = ({ config, theme = {}, className = '', placeholder = 'Type your message...', showTimestamp = true, showAvatar = true, userAvatar, assistantAvatar, maxHeight = '600px', disabled = false, initialGreeting, messagesContainerClassName = '', messageClassName = '', inputContainerClassName = '', inputClassName = '', buttonClassName = '', errorClassName = '', emptyStateClassName = '', customMessageRenderer, customInputRenderer, dataAttributes = {}, }) => {
+    const { messages, input, isLoading, error, sendMessage, setInput, addMessage, } = useChat(config);
+    // Add initial greeting message when component mounts
+    React.useEffect(() => {
+        if (initialGreeting && messages.length === 0) {
+            const greetingMessage = {
+                id: `greeting-${Date.now()}`,
+                content: initialGreeting,
+                role: 'assistant',
+                timestamp: new Date(),
+            };
+            addMessage(greetingMessage);
+        }
+    }, [initialGreeting, messages.length, addMessage]);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (input.trim() && !isLoading && !disabled) {
+            sendMessage(input);
+        }
+    };
+    const formatTimestamp = (date) => {
+        return new Intl.DateTimeFormat('en-US', {
+            hour: '2-digit',
+            minute: '2-digit',
+        }).format(date);
+    };
+    const renderAvatar = (role) => {
+        if (role === 'system')
+            return null;
+        if (!showAvatar)
+            return null;
+        const avatar = role === 'user' ? userAvatar : assistantAvatar;
+        if (typeof avatar === 'string') {
+            return (_jsx("div", { className: "chat-avatar", children: _jsx("img", { src: avatar, alt: role }) }));
+        }
+        if (React.isValidElement(avatar)) {
+            return _jsx("div", { className: "chat-avatar", children: avatar });
+        }
+        return (_jsx("div", { className: "chat-avatar", children: role === 'user' ? 'U' : 'A' }));
+    };
+    const renderMessage = (message) => {
+        if (customMessageRenderer) {
+            return customMessageRenderer(message);
+        }
+        const isUser = message.role === 'user';
+        return (_jsxs("div", { className: `chat-message ${isUser ? 'chat-message-user' : 'chat-message-assistant'} ${messageClassName}`, "data-message-role": message.role, "data-message-id": message.id, children: [!isUser && renderAvatar(message.role), _jsxs("div", { className: `chat-message-content ${isUser ? 'chat-message-content-user' : 'chat-message-content-assistant'}`, children: [_jsx("div", { className: "chat-message-text", children: isUser ? (message.content) : (_jsx(MarkdownContent, { content: message.content })) }), showTimestamp && (_jsx("div", { className: "chat-message-timestamp", children: formatTimestamp(message.timestamp) }))] }), isUser && renderAvatar(message.role)] }, message.id));
+    };
+    // Apply theme via CSS variables (only set if provided)
+    const themeStyles = {};
+    if (theme?.primaryColor)
+        themeStyles['--chat-primary-color'] = theme.primaryColor;
+    if (theme?.secondaryColor)
+        themeStyles['--chat-secondary-color'] = theme.secondaryColor;
+    if (theme?.backgroundColor)
+        themeStyles['--chat-background-color'] = theme.backgroundColor;
+    if (theme?.textColor)
+        themeStyles['--chat-text-color'] = theme.textColor;
+    if (theme?.userMessageColor)
+        themeStyles['--chat-user-message-color'] = theme.userMessageColor;
+    if (theme?.assistantMessageColor)
+        themeStyles['--chat-assistant-message-color'] = theme.assistantMessageColor;
+    if (theme?.inputBackgroundColor)
+        themeStyles['--chat-input-background-color'] = theme.inputBackgroundColor;
+    if (theme?.inputTextColor)
+        themeStyles['--chat-input-text-color'] = theme.inputTextColor;
+    if (theme?.errorBackgroundColor)
+        themeStyles['--chat-error-background-color'] = theme.errorBackgroundColor;
+    if (theme?.errorTextColor)
+        themeStyles['--chat-error-text-color'] = theme.errorTextColor;
+    if (theme?.borderColor)
+        themeStyles['--chat-border-color'] = theme.borderColor;
+    if (theme?.fontFamily)
+        themeStyles['--chat-font-family'] = theme.fontFamily;
+    if (theme?.fontSize)
+        themeStyles['--chat-font-size'] = theme.fontSize;
+    if (theme?.fontWeight)
+        themeStyles['--chat-font-weight'] = theme.fontWeight;
+    if (theme?.lineHeight)
+        themeStyles['--chat-line-height'] = theme.lineHeight;
+    if (theme?.padding)
+        themeStyles['--chat-padding'] = theme.padding;
+    if (theme?.messageGap)
+        themeStyles['--chat-message-gap'] = theme.messageGap;
+    if (theme?.inputPadding)
+        themeStyles['--chat-input-padding'] = theme.inputPadding;
+    if (theme?.messagePadding)
+        themeStyles['--chat-message-padding'] = theme.messagePadding;
+    if (theme?.borderRadius)
+        themeStyles['--chat-border-radius'] = theme.borderRadius;
+    if (theme?.messageBorderRadius)
+        themeStyles['--chat-message-border-radius'] = theme.messageBorderRadius;
+    if (theme?.inputBorderRadius)
+        themeStyles['--chat-input-border-radius'] = theme.inputBorderRadius;
+    if (theme?.borderWidth)
+        themeStyles['--chat-border-width'] = theme.borderWidth;
+    if (theme?.boxShadow)
+        themeStyles['--chat-box-shadow'] = theme.boxShadow;
+    if (theme?.messageBoxShadow)
+        themeStyles['--chat-message-box-shadow'] = theme.messageBoxShadow;
+    if (theme?.inputBoxShadow)
+        themeStyles['--chat-input-box-shadow'] = theme.inputBoxShadow;
+    if (maxHeight || theme?.maxHeight)
+        themeStyles['--chat-max-height'] = maxHeight || theme.maxHeight || '';
+    if (theme?.maxWidth)
+        themeStyles['--chat-max-width'] = theme.maxWidth;
+    if (theme?.messageMaxWidth)
+        themeStyles['--chat-message-max-width'] = theme.messageMaxWidth;
+    if (theme?.avatarSize)
+        themeStyles['--chat-avatar-size'] = theme.avatarSize;
+    if (theme?.transitionDuration)
+        themeStyles['--chat-transition-duration'] = theme.transitionDuration;
+    if (theme?.animationDuration)
+        themeStyles['--chat-animation-duration'] = theme.animationDuration;
+    if (theme?.scrollbarWidth)
+        themeStyles['--chat-scrollbar-width'] = theme.scrollbarWidth;
+    if (theme?.scrollbarColor)
+        themeStyles['--chat-scrollbar-color'] = theme.scrollbarColor;
+    if (theme?.scrollbarTrackColor)
+        themeStyles['--chat-scrollbar-track-color'] = theme.scrollbarTrackColor;
+    // Build data attributes
+    const containerDataAttributes = {
+        'data-chat-ui': 'true',
+        ...dataAttributes,
+    };
+    return (_jsxs("div", { className: `chat-container ${className}`, style: themeStyles, ...containerDataAttributes, children: [theme?.customCSS && (_jsx("style", { dangerouslySetInnerHTML: { __html: theme.customCSS } })), _jsxs("div", { className: `chat-messages-container ${messagesContainerClassName}`, children: [messages.length === 0 && (_jsx("div", { className: `chat-empty-state ${emptyStateClassName}`, children: "Start a conversation..." })), messages.map(renderMessage), isLoading && (_jsxs("div", { className: `chat-message chat-message-assistant ${messageClassName}`, children: [renderAvatar('assistant'), _jsx("div", { className: "chat-message-content chat-message-content-assistant", children: _jsx("div", { className: "chat-message-text", children: "Thinking..." }) })] }))] }), error && (_jsxs("div", { className: `chat-error ${errorClassName}`, children: ["Error: ", error.message] })), _jsx("div", { className: `chat-input-container ${inputContainerClassName}`, children: customInputRenderer ? (customInputRenderer({
+                    value: input,
+                    onChange: setInput,
+                    onSend: () => sendMessage(input),
+                    disabled: disabled || isLoading,
+                })) : (_jsxs("form", { onSubmit: handleSubmit, className: "chat-input-form", children: [_jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: placeholder, disabled: disabled || isLoading, className: `chat-input ${inputClassName}` }), _jsx("button", { type: "submit", disabled: disabled || isLoading || !input.trim(), className: `chat-send-button ${buttonClassName}`, children: "Send" })] })) })] }));
+};

package/dist/adapters/react/index.d.ts

@@ -0,0 +1,5 @@
+export { ChatUI } from './ChatUI';
+export { useChat } from './useChat';
+export type { ChatUIProps } from './ChatUI';
+export type { UseChatReturn } from './useChat';
+//# sourceMappingURL=index.d.ts.map

package/dist/adapters/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../adapters/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}

package/dist/adapters/react/index.js

@@ -0,0 +1,2 @@
+export { ChatUI } from './ChatUI';
+export { useChat } from './useChat';

package/dist/adapters/react/useChat.d.ts

@@ -0,0 +1,14 @@
+import type { ChatConfig, Message } from '../../core/src/types';
+export interface UseChatReturn {
+    messages: Message[];
+    input: string;
+    isLoading: boolean;
+    error: Error | null;
+    sendMessage: (content: string) => Promise<void>;
+    setInput: (value: string) => void;
+    clearMessages: () => void;
+    retryLastMessage: () => Promise<void>;
+    addMessage: (message: Message) => void;
+}
+export declare function useChat(config: ChatConfig): UseChatReturn;
+//# sourceMappingURL=useChat.d.ts.map

package/dist/adapters/react/useChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChat.d.ts","sourceRoot":"","sources":["../../../adapters/react/useChat.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,UAAU,GAAG,aAAa,CA0EzD"}

package/dist/adapters/react/useChat.js

@@ -0,0 +1,64 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { ChatEngine } from '../../core/src/ChatEngine';
+export function useChat(config) {
+    const engineRef = useRef(null);
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const engine = new ChatEngine(config);
+        engineRef.current = engine;
+        // Set initial state
+        setMessages(engine.getMessages());
+        setInput(engine.getInput());
+        setIsLoading(engine.getIsLoading());
+        setError(engine.getError());
+        // Subscribe to events
+        const unsubscribeMessages = engine.on('messagesChange', (msgs) => {
+            setMessages(msgs || []);
+        });
+        const unsubscribeInput = engine.on('inputChange', (value) => {
+            setInput(value || '');
+        });
+        const unsubscribeLoading = engine.on('loadingChange', (loading) => {
+            setIsLoading(loading || false);
+        });
+        const unsubscribeError = engine.on('error', (err) => {
+            setError(err || null);
+        });
+        return () => {
+            unsubscribeMessages();
+            unsubscribeInput();
+            unsubscribeLoading();
+            unsubscribeError();
+            engine.destroy();
+        };
+    }, []);
+    const sendMessage = useCallback(async (content) => {
+        await engineRef.current?.sendMessage(content);
+    }, []);
+    const setInputValue = useCallback((value) => {
+        engineRef.current?.setInput(value);
+    }, []);
+    const clearMessages = useCallback(() => {
+        engineRef.current?.clearMessages();
+    }, []);
+    const retryLastMessage = useCallback(async () => {
+        await engineRef.current?.retryLastMessage();
+    }, []);
+    const addMessage = useCallback((message) => {
+        engineRef.current?.addMessage(message);
+    }, []);
+    return {
+        messages,
+        input,
+        isLoading,
+        error,
+        sendMessage,
+        setInput: setInputValue,
+        clearMessages,
+        retryLastMessage,
+        addMessage,
+    };
+}

package/dist/adapters/solid/createChat.d.ts

@@ -0,0 +1,13 @@
+import type { ChatConfig, Message } from '../../core/src/types';
+export interface CreateChatReturn {
+    messages: () => Message[];
+    input: () => string;
+    isLoading: () => boolean;
+    error: () => Error | null;
+    sendMessage: (content: string) => Promise<void>;
+    setInput: (value: string) => void;
+    clearMessages: () => void;
+    retryLastMessage: () => Promise<void>;
+}
+export declare function createChat(config: ChatConfig): CreateChatReturn;
+//# sourceMappingURL=createChat.d.ts.map

package/dist/adapters/solid/createChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createChat.d.ts","sourceRoot":"","sources":["../../../adapters/solid/createChat.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,OAAO,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,KAAK,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,UAAU,GAAG,gBAAgB,CAqC/D"}

package/dist/adapters/solid/createChat.js

@@ -0,0 +1,34 @@
+import { createSignal, onCleanup } from 'solid-js';
+import { ChatEngine } from '../../core/src/ChatEngine';
+export function createChat(config) {
+    const engine = new ChatEngine(config);
+    const [messages, setMessages] = createSignal(engine.getMessages());
+    const [input, setInput] = createSignal(engine.getInput());
+    const [isLoading, setIsLoading] = createSignal(engine.getIsLoading());
+    const [error, setError] = createSignal(engine.getError());
+    engine.on('messagesChange', (msgs) => {
+        setMessages(msgs || []);
+    });
+    engine.on('inputChange', (value) => {
+        setInput(value || '');
+    });
+    engine.on('loadingChange', (loading) => {
+        setIsLoading(loading || false);
+    });
+    engine.on('error', (err) => {
+        setError(err || null);
+    });
+    onCleanup(() => {
+        engine.destroy();
+    });
+    return {
+        messages,
+        input,
+        isLoading,
+        error,
+        sendMessage: (content) => engine.sendMessage(content),
+        setInput: (value) => engine.setInput(value),
+        clearMessages: () => engine.clearMessages(),
+        retryLastMessage: () => engine.retryLastMessage(),
+    };
+}