@devicai/ui 0.1.0

package/README.md

@@ -0,0 +1,363 @@
+# @devicai/ui
+
+React component library for integrating Devic AI assistants into your application.
+
+## Features
+
+- **ChatDrawer** - A ready-to-use chat drawer component
+- **useDevicChat** - Hook for building custom chat UIs
+- **Model Interface Protocol** - Support for client-side tool execution
+- **CSS Variables** - Easy theming with CSS custom properties
+- **TypeScript** - Full type definitions included
+- **React 17+** - Compatible with React 17 and above
+- **Minimal Dependencies** - Only React as a peer dependency
+
+## Installation
+
+```bash
+npm install @devicai/ui
+# or
+yarn add @devicai/ui
+# or
+pnpm add @devicai/ui
+```
+
+## Quick Start
+
+### Using ChatDrawer (Simplest)
+
+```tsx
+import { DevicProvider, ChatDrawer } from '@devicai/ui';
+import '@devicai/ui/dist/esm/styles.css';
+
+function App() {
+  return (
+    <DevicProvider apiKey="your-api-key">
+      <ChatDrawer
+        assistantId="my-assistant"
+        options={{
+          position: 'right',
+          welcomeMessage: 'Hello! How can I help you?',
+          suggestedMessages: ['Help me with...', 'Tell me about...'],
+        }}
+      />
+    </DevicProvider>
+  );
+}
+```
+
+### Using the Hook (Custom UI)
+
+```tsx
+import { DevicProvider, useDevicChat } from '@devicai/ui';
+
+function CustomChat() {
+  const { messages, isLoading, sendMessage } = useDevicChat({
+    assistantId: 'my-assistant',
+  });
+
+  return (
+    <div>
+      {messages.map((msg) => (
+        <div key={msg.uid}>
+          <strong>{msg.role}:</strong> {msg.content.message}
+        </div>
+      ))}
+      {isLoading && <div>Thinking...</div>}
+      <button onClick={() => sendMessage('Hello!')}>Send</button>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <DevicProvider apiKey="your-api-key">
+      <CustomChat />
+    </DevicProvider>
+  );
+}
+```
+
+## Components
+
+### DevicProvider
+
+Context provider for global configuration.
+
+```tsx
+<DevicProvider
+  apiKey="devic-xxx"           // Required
+  baseUrl="https://api.devic.ai"
+  tenantId="tenant-123"        // Optional global tenant
+  tenantMetadata={{ ... }}     // Optional global metadata
+>
+  <App />
+</DevicProvider>
+```
+
+### ChatDrawer
+
+A complete chat drawer component.
+
+```tsx
+<ChatDrawer
+  assistantId="my-assistant"
+  chatUid="optional-existing-chat"
+  options={{
+    position: 'right',           // 'left' | 'right'
+    width: 400,
+    defaultOpen: false,
+    color: '#1890ff',            // Primary color
+    welcomeMessage: 'Hello!',
+    suggestedMessages: ['Help me...'],
+    enableFileUploads: true,
+    allowedFileTypes: { images: true, documents: true },
+    inputPlaceholder: 'Type a message...',
+    title: 'Chat Assistant',
+    showToolTimeline: true,
+  }}
+  enabledTools={['tool1', 'tool2']}
+  modelInterfaceTools={[
+    {
+      toolName: 'get_user_location',
+      schema: {
+        type: 'function',
+        function: {
+          name: 'get_user_location',
+          description: 'Get user current location',
+          parameters: { type: 'object', properties: {} }
+        }
+      },
+      callback: async () => {
+        const pos = await getCurrentPosition();
+        return { lat: pos.coords.latitude, lng: pos.coords.longitude };
+      }
+    }
+  ]}
+  tenantId="specific-tenant"     // Override provider
+  tenantMetadata={{ userId: '123' }}
+  apiKey="override-key"          // Override provider
+
+  // Callbacks
+  onMessageSent={(message) => {}}
+  onMessageReceived={(message) => {}}
+  onToolCall={(toolName, params) => {}}
+  onError={(error) => {}}
+  onChatCreated={(chatUid) => {}}
+  onOpen={() => {}}
+  onClose={() => {}}
+
+  // Controlled mode
+  isOpen={true}
+/>
+```
+
+## Hooks
+
+### useDevicChat
+
+Main hook for chat functionality.
+
+```tsx
+const {
+  messages,      // ChatMessage[]
+  chatUid,       // string | null
+  isLoading,     // boolean
+  status,        // 'idle' | 'processing' | 'completed' | 'error'
+  error,         // Error | null
+  sendMessage,   // (message: string, options?: { files?: ChatFile[] }) => Promise<void>
+  clearChat,     // () => void
+  loadChat,      // (chatUid: string) => Promise<void>
+} = useDevicChat({
+  assistantId: 'my-assistant',
+  chatUid: 'optional-existing-chat',
+  apiKey: 'override-key',
+  baseUrl: 'https://api.devic.ai',
+  tenantId: 'tenant-123',
+  tenantMetadata: { userId: '456' },
+  enabledTools: ['tool1', 'tool2'],
+  modelInterfaceTools: [...],
+  pollingInterval: 1000,
+  onMessageSent: (message) => {},
+  onMessageReceived: (message) => {},
+  onToolCall: (toolName, params) => {},
+  onError: (error) => {},
+  onChatCreated: (chatUid) => {},
+});
+```
+
+### useModelInterface
+
+Hook for implementing the Model Interface Protocol.
+
+```tsx
+const {
+  toolSchemas,           // Tool schemas to send to API
+  isClientTool,          // (name: string) => boolean
+  handleToolCalls,       // (toolCalls: ToolCall[]) => Promise<ToolCallResponse[]>
+  extractPendingToolCalls, // (messages: ChatMessage[]) => ToolCall[]
+} = useModelInterface({
+  tools: [
+    {
+      toolName: 'get_user_location',
+      schema: {
+        type: 'function',
+        function: {
+          name: 'get_user_location',
+          description: 'Get user location',
+          parameters: { type: 'object', properties: {} }
+        }
+      },
+      callback: async () => ({ lat: 40.7, lng: -74.0 })
+    }
+  ],
+  onToolExecute: (toolName, params) => {},
+  onToolComplete: (toolName, result) => {},
+  onToolError: (toolName, error) => {},
+});
+```
+
+### usePolling
+
+Hook for polling real-time chat history.
+
+```tsx
+const {
+  data,       // RealtimeChatHistory | null
+  isPolling,  // boolean
+  error,      // Error | null
+  start,      // () => void
+  stop,       // () => void
+  refetch,    // () => Promise<void>
+} = usePolling(
+  chatUid,
+  async () => client.getRealtimeHistory(assistantId, chatUid),
+  {
+    interval: 1000,
+    enabled: true,
+    stopStatuses: ['completed', 'error'],
+    onUpdate: (data) => {},
+    onStop: (data) => {},
+    onError: (error) => {},
+  }
+);
+```
+
+## API Client
+
+Use the API client directly for advanced use cases.
+
+```tsx
+import { DevicApiClient } from '@devicai/ui';
+
+const client = new DevicApiClient({
+  apiKey: 'your-api-key',
+  baseUrl: 'https://api.devic.ai',
+});
+
+// Get assistants
+const assistants = await client.getAssistants();
+
+// Send message (async mode)
+const { chatUid } = await client.sendMessageAsync('my-assistant', {
+  message: 'Hello!',
+  tenantId: 'tenant-123',
+});
+
+// Poll for results
+const result = await client.getRealtimeHistory('my-assistant', chatUid);
+
+// Send tool responses
+await client.sendToolResponses('my-assistant', chatUid, [
+  { tool_call_id: 'call_123', content: { result: 'data' }, role: 'tool' }
+]);
+```
+
+## Theming
+
+Customize appearance with CSS variables:
+
+```css
+.devic-chat-drawer {
+  --devic-primary: #1890ff;
+  --devic-primary-hover: #40a9ff;
+  --devic-primary-light: #e6f7ff;
+  --devic-bg: #ffffff;
+  --devic-bg-secondary: #f5f5f5;
+  --devic-text: #333333;
+  --devic-text-secondary: #666666;
+  --devic-text-muted: #999999;
+  --devic-border: #e8e8e8;
+  --devic-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --devic-radius: 8px;
+  --devic-radius-sm: 4px;
+  --devic-radius-lg: 16px;
+}
+```
+
+Or use the `color` option in ChatDrawer:
+
+```tsx
+<ChatDrawer
+  options={{ color: '#ff4081' }}
+/>
+```
+
+## Model Interface Protocol
+
+The Model Interface Protocol allows you to define client-side tools that the assistant can call during a conversation.
+
+```tsx
+const locationTool: ModelInterfaceTool = {
+  toolName: 'get_user_location',
+  schema: {
+    type: 'function',
+    function: {
+      name: 'get_user_location',
+      description: 'Get the user current geographic location',
+      parameters: {
+        type: 'object',
+        properties: {},
+      }
+    }
+  },
+  callback: async () => {
+    return new Promise((resolve, reject) => {
+      navigator.geolocation.getCurrentPosition(
+        (pos) => resolve({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+        }),
+        (err) => reject(err)
+      );
+    });
+  }
+};
+
+<ChatDrawer
+  assistantId="my-assistant"
+  modelInterfaceTools={[locationTool]}
+/>
+```
+
+## TypeScript
+
+All types are exported:
+
+```tsx
+import type {
+  ChatMessage,
+  ChatFile,
+  ModelInterfaceTool,
+  ModelInterfaceToolSchema,
+  ToolCall,
+  ToolCallResponse,
+  RealtimeChatHistory,
+  ChatDrawerOptions,
+  UseDevicChatOptions,
+} from '@devicai/ui';
+```
+
+## License
+
+MIT

package/dist/cjs/api/client.js

@@ -0,0 +1,118 @@
+'use strict';
+
+/**
+ * Devic API client using native fetch
+ */
+class DevicApiClient {
+    constructor(config) {
+        this.config = config;
+    }
+    /**
+     * Update client configuration
+     */
+    setConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+    /**
+     * Make an authenticated request to the API
+     */
+    async request(endpoint, options = {}) {
+        const url = `${this.config.baseUrl}${endpoint}`;
+        const headers = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${this.config.apiKey}`,
+            ...options.headers,
+        };
+        const response = await fetch(url, {
+            ...options,
+            headers,
+        });
+        if (!response.ok) {
+            let errorData;
+            try {
+                errorData = await response.json();
+            }
+            catch {
+                errorData = {
+                    statusCode: response.status,
+                    message: response.statusText,
+                };
+            }
+            throw new DevicApiError(errorData);
+        }
+        // Handle responses that may have a wrapper structure
+        const data = await response.json();
+        // If the response has a data property, extract it (common wrapper pattern)
+        if (data && typeof data === 'object' && 'data' in data) {
+            return data.data;
+        }
+        return data;
+    }
+    /**
+     * Get all assistant specializations
+     */
+    async getAssistants(external = false) {
+        const query = external ? '?external=true' : '';
+        return this.request(`/api/v1/assistants${query}`);
+    }
+    /**
+     * Get a specific assistant specialization
+     */
+    async getAssistant(identifier) {
+        return this.request(`/api/v1/assistants/${identifier}`);
+    }
+    /**
+     * Send a message to an assistant (sync mode)
+     */
+    async sendMessage(assistantId, dto) {
+        return this.request(`/api/v1/assistants/${assistantId}/messages`, {
+            method: 'POST',
+            body: JSON.stringify(dto),
+        });
+    }
+    /**
+     * Send a message to an assistant (async mode)
+     */
+    async sendMessageAsync(assistantId, dto) {
+        return this.request(`/api/v1/assistants/${assistantId}/messages?async=true`, {
+            method: 'POST',
+            body: JSON.stringify(dto),
+        });
+    }
+    /**
+     * Get real-time chat history (for polling in async mode)
+     */
+    async getRealtimeHistory(assistantId, chatUid) {
+        return this.request(`/api/v1/assistants/${assistantId}/chats/${chatUid}/realtime`);
+    }
+    /**
+     * Get chat history for a specific conversation
+     */
+    async getChatHistory(assistantId, chatUid) {
+        return this.request(`/api/v1/assistants/${assistantId}/chats/${chatUid}`);
+    }
+    /**
+     * Send tool call responses back to the assistant
+     */
+    async sendToolResponses(assistantId, chatUid, responses) {
+        return this.request(`/api/v1/assistants/${assistantId}/chats/${chatUid}/tool-response`, {
+            method: 'POST',
+            body: JSON.stringify({ responses }),
+        });
+    }
+}
+/**
+ * Custom error class for API errors
+ */
+class DevicApiError extends Error {
+    constructor(error) {
+        super(error.message);
+        this.name = 'DevicApiError';
+        this.statusCode = error.statusCode;
+        this.errorType = error.error;
+    }
+}
+
+exports.DevicApiClient = DevicApiClient;
+exports.DevicApiError = DevicApiError;
+//# sourceMappingURL=client.js.map

package/dist/cjs/api/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sources":["../../../../src/api/client.ts"],"sourcesContent":["import type {\n  ProcessMessageDto,\n  ChatMessage,\n  AsyncResponse,\n  RealtimeChatHistory,\n  ChatHistory,\n  AssistantSpecialization,\n  ApiError,\n  ToolCallResponse,\n} from './types';\n\nexport interface DevicApiClientConfig {\n  apiKey: string;\n  baseUrl: string;\n}\n\n/**\n * Devic API client using native fetch\n */\nexport class DevicApiClient {\n  private config: DevicApiClientConfig;\n\n  constructor(config: DevicApiClientConfig) {\n    this.config = config;\n  }\n\n  /**\n   * Update client configuration\n   */\n  setConfig(config: Partial<DevicApiClientConfig>): void {\n    this.config = { ...this.config, ...config };\n  }\n\n  /**\n   * Make an authenticated request to the API\n   */\n  private async request<T>(\n    endpoint: string,\n    options: RequestInit = {}\n  ): Promise<T> {\n    const url = `${this.config.baseUrl}${endpoint}`;\n\n    const headers: HeadersInit = {\n      'Content-Type': 'application/json',\n      'Authorization': `Bearer ${this.config.apiKey}`,\n      ...options.headers,\n    };\n\n    const response = await fetch(url, {\n      ...options,\n      headers,\n    });\n\n    if (!response.ok) {\n      let errorData: ApiError;\n      try {\n        errorData = await response.json();\n      } catch {\n        errorData = {\n          statusCode: response.status,\n          message: response.statusText,\n        };\n      }\n      throw new DevicApiError(errorData);\n    }\n\n    // Handle responses that may have a wrapper structure\n    const data = await response.json();\n\n    // If the response has a data property, extract it (common wrapper pattern)\n    if (data && typeof data === 'object' && 'data' in data) {\n      return data.data as T;\n    }\n\n    return data as T;\n  }\n\n  /**\n   * Get all assistant specializations\n   */\n  async getAssistants(external = false): Promise<AssistantSpecialization[]> {\n    const query = external ? '?external=true' : '';\n    return this.request<AssistantSpecialization[]>(`/api/v1/assistants${query}`);\n  }\n\n  /**\n   * Get a specific assistant specialization\n   */\n  async getAssistant(identifier: string): Promise<AssistantSpecialization> {\n    return this.request<AssistantSpecialization>(`/api/v1/assistants/${identifier}`);\n  }\n\n  /**\n   * Send a message to an assistant (sync mode)\n   */\n  async sendMessage(\n    assistantId: string,\n    dto: ProcessMessageDto\n  ): Promise<ChatMessage[]> {\n    return this.request<ChatMessage[]>(\n      `/api/v1/assistants/${assistantId}/messages`,\n      {\n        method: 'POST',\n        body: JSON.stringify(dto),\n      }\n    );\n  }\n\n  /**\n   * Send a message to an assistant (async mode)\n   */\n  async sendMessageAsync(\n    assistantId: string,\n    dto: ProcessMessageDto\n  ): Promise<AsyncResponse> {\n    return this.request<AsyncResponse>(\n      `/api/v1/assistants/${assistantId}/messages?async=true`,\n      {\n        method: 'POST',\n        body: JSON.stringify(dto),\n      }\n    );\n  }\n\n  /**\n   * Get real-time chat history (for polling in async mode)\n   */\n  async getRealtimeHistory(\n    assistantId: string,\n    chatUid: string\n  ): Promise<RealtimeChatHistory> {\n    return this.request<RealtimeChatHistory>(\n      `/api/v1/assistants/${assistantId}/chats/${chatUid}/realtime`\n    );\n  }\n\n  /**\n   * Get chat history for a specific conversation\n   */\n  async getChatHistory(\n    assistantId: string,\n    chatUid: string\n  ): Promise<ChatHistory> {\n    return this.request<ChatHistory>(\n      `/api/v1/assistants/${assistantId}/chats/${chatUid}`\n    );\n  }\n\n  /**\n   * Send tool call responses back to the assistant\n   */\n  async sendToolResponses(\n    assistantId: string,\n    chatUid: string,\n    responses: ToolCallResponse[]\n  ): Promise<AsyncResponse> {\n    return this.request<AsyncResponse>(\n      `/api/v1/assistants/${assistantId}/chats/${chatUid}/tool-response`,\n      {\n        method: 'POST',\n        body: JSON.stringify({ responses }),\n      }\n    );\n  }\n}\n\n/**\n * Custom error class for API errors\n */\nexport class DevicApiError extends Error {\n  public statusCode: number;\n  public errorType?: string;\n\n  constructor(error: ApiError) {\n    super(error.message);\n    this.name = 'DevicApiError';\n    this.statusCode = error.statusCode;\n    this.errorType = error.error;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/cjs/components/ChatDrawer/ChatDrawer.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useDevicChat = require('../../hooks/useDevicChat.js');
+var ChatMessages = require('./ChatMessages.js');
+var ChatInput = require('./ChatInput.js');
+
+const DEFAULT_OPTIONS = {
+    position: 'right',
+    width: 400,
+    defaultOpen: false,
+    color: '#1890ff',
+    welcomeMessage: '',
+    suggestedMessages: [],
+    enableFileUploads: false,
+    allowedFileTypes: { images: true, documents: true },
+    maxFileSize: 10 * 1024 * 1024,
+    inputPlaceholder: 'Type a message...',
+    title: 'Chat',
+    showToolTimeline: true,
+    zIndex: 1000,
+};
+/**
+ * Chat drawer component for Devic assistants
+ *
+ * @example
+ * ```tsx
+ * <ChatDrawer
+ *   assistantId="my-assistant"
+ *   options={{
+ *     position: 'right',
+ *     width: 400,
+ *     welcomeMessage: 'Hello! How can I help you?',
+ *     suggestedMessages: ['Help me with...', 'Tell me about...'],
+ *   }}
+ *   modelInterfaceTools={[
+ *     {
+ *       toolName: 'get_user_location',
+ *       schema: { ... },
+ *       callback: async () => ({ lat: 40.7, lng: -74.0 })
+ *     }
+ *   ]}
+ *   onMessageReceived={(msg) => console.log('Received:', msg)}
+ * />
+ * ```
+ */
+function ChatDrawer({ assistantId, chatUid: initialChatUid, options = {}, enabledTools, modelInterfaceTools, tenantId, tenantMetadata, apiKey, baseUrl, onMessageSent, onMessageReceived, onToolCall, onError, onChatCreated, onOpen, onClose, isOpen: controlledIsOpen, className, }) {
+    // Merge options with defaults
+    const mergedOptions = react.useMemo(() => ({ ...DEFAULT_OPTIONS, ...options }), [options]);
+    // Drawer open state (can be controlled or uncontrolled)
+    const [internalIsOpen, setInternalIsOpen] = react.useState(mergedOptions.defaultOpen);
+    const isOpen = controlledIsOpen ?? internalIsOpen;
+    // Use chat hook
+    const chat = useDevicChat.useDevicChat({
+        assistantId,
+        chatUid: initialChatUid,
+        apiKey,
+        baseUrl,
+        tenantId,
+        tenantMetadata,
+        enabledTools,
+        modelInterfaceTools,
+        onMessageSent,
+        onMessageReceived,
+        onToolCall,
+        onError,
+        onChatCreated,
+    });
+    // Handle open/close
+    const handleOpen = react.useCallback(() => {
+        setInternalIsOpen(true);
+        onOpen?.();
+    }, [onOpen]);
+    const handleClose = react.useCallback(() => {
+        setInternalIsOpen(false);
+        onClose?.();
+    }, [onClose]);
+    // Handle send message
+    const handleSend = react.useCallback((message, files) => {
+        chat.sendMessage(message, { files });
+    }, [chat]);
+    // Handle suggested message click
+    const handleSuggestedClick = react.useCallback((message) => {
+        chat.sendMessage(message);
+    }, [chat]);
+    // Apply CSS variable for primary color
+    react.useEffect(() => {
+        if (mergedOptions.color !== DEFAULT_OPTIONS.color) {
+            document.documentElement.style.setProperty('--devic-primary', mergedOptions.color);
+        }
+    }, [mergedOptions.color]);
+    // Build style object
+    const drawerStyle = react.useMemo(() => ({
+        width: mergedOptions.width,
+        zIndex: mergedOptions.zIndex,
+    }), [mergedOptions.width, mergedOptions.zIndex]);
+    const overlayStyle = react.useMemo(() => ({
+        zIndex: mergedOptions.zIndex - 1,
+    }), [mergedOptions.zIndex]);
+    const triggerStyle = react.useMemo(() => ({
+        zIndex: mergedOptions.zIndex - 1,
+        [mergedOptions.position]: 20,
+        bottom: 20,
+    }), [mergedOptions.zIndex, mergedOptions.position]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "devic-drawer-overlay", "data-open": isOpen, style: overlayStyle, onClick: handleClose }), jsxRuntime.jsxs("div", { className: `devic-chat-drawer ${className || ''}`, "data-position": mergedOptions.position, "data-open": isOpen, style: drawerStyle, children: [jsxRuntime.jsxs("div", { className: "devic-drawer-header", children: [jsxRuntime.jsx("h2", { className: "devic-drawer-title", children: mergedOptions.title }), jsxRuntime.jsx("button", { className: "devic-drawer-close", onClick: handleClose, type: "button", "aria-label": "Close chat", children: jsxRuntime.jsx(CloseIcon, {}) })] }), chat.error && (jsxRuntime.jsx("div", { className: "devic-error", children: chat.error.message })), jsxRuntime.jsx(ChatMessages.ChatMessages, { messages: chat.messages, isLoading: chat.isLoading, welcomeMessage: mergedOptions.welcomeMessage, suggestedMessages: mergedOptions.suggestedMessages, onSuggestedClick: handleSuggestedClick, showToolTimeline: mergedOptions.showToolTimeline }), jsxRuntime.jsx(ChatInput.ChatInput, { onSend: handleSend, disabled: chat.isLoading, placeholder: mergedOptions.inputPlaceholder, enableFileUploads: mergedOptions.enableFileUploads, allowedFileTypes: mergedOptions.allowedFileTypes, maxFileSize: mergedOptions.maxFileSize })] }), !isOpen && (jsxRuntime.jsx("button", { className: "devic-trigger", onClick: handleOpen, style: triggerStyle, type: "button", "aria-label": "Open chat", children: jsxRuntime.jsx(ChatIcon, {}) }))] }));
+}
+/**
+ * Close icon
+ */
+function CloseIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+}
+/**
+ * Chat icon for trigger button
+ */
+function ChatIcon() {
+    return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }) }));
+}
+
+exports.ChatDrawer = ChatDrawer;
+//# sourceMappingURL=ChatDrawer.js.map

package/dist/cjs/components/ChatDrawer/ChatDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatDrawer.js","sources":["../../../../../src/components/ChatDrawer/ChatDrawer.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { useDevicChat } from '../../hooks/useDevicChat';\nimport { ChatMessages } from './ChatMessages';\nimport { ChatInput } from './ChatInput';\nimport type { ChatDrawerProps, ChatDrawerOptions } from './ChatDrawer.types';\nimport './styles.css';\n\nconst DEFAULT_OPTIONS: Required<ChatDrawerOptions> = {\n  position: 'right',\n  width: 400,\n  defaultOpen: false,\n  color: '#1890ff',\n  welcomeMessage: '',\n  suggestedMessages: [],\n  enableFileUploads: false,\n  allowedFileTypes: { images: true, documents: true },\n  maxFileSize: 10 * 1024 * 1024,\n  inputPlaceholder: 'Type a message...',\n  title: 'Chat',\n  showToolTimeline: true,\n  zIndex: 1000,\n};\n\n/**\n * Chat drawer component for Devic assistants\n *\n * @example\n * ```tsx\n * <ChatDrawer\n *   assistantId=\"my-assistant\"\n *   options={{\n *     position: 'right',\n *     width: 400,\n *     welcomeMessage: 'Hello! How can I help you?',\n *     suggestedMessages: ['Help me with...', 'Tell me about...'],\n *   }}\n *   modelInterfaceTools={[\n *     {\n *       toolName: 'get_user_location',\n *       schema: { ... },\n *       callback: async () => ({ lat: 40.7, lng: -74.0 })\n *     }\n *   ]}\n *   onMessageReceived={(msg) => console.log('Received:', msg)}\n * />\n * ```\n */\nexport function ChatDrawer({\n  assistantId,\n  chatUid: initialChatUid,\n  options = {},\n  enabledTools,\n  modelInterfaceTools,\n  tenantId,\n  tenantMetadata,\n  apiKey,\n  baseUrl,\n  onMessageSent,\n  onMessageReceived,\n  onToolCall,\n  onError,\n  onChatCreated,\n  onOpen,\n  onClose,\n  isOpen: controlledIsOpen,\n  className,\n}: ChatDrawerProps): JSX.Element {\n  // Merge options with defaults\n  const mergedOptions = useMemo(\n    () => ({ ...DEFAULT_OPTIONS, ...options }),\n    [options]\n  );\n\n  // Drawer open state (can be controlled or uncontrolled)\n  const [internalIsOpen, setInternalIsOpen] = useState(mergedOptions.defaultOpen);\n  const isOpen = controlledIsOpen ?? internalIsOpen;\n\n  // Use chat hook\n  const chat = useDevicChat({\n    assistantId,\n    chatUid: initialChatUid,\n    apiKey,\n    baseUrl,\n    tenantId,\n    tenantMetadata,\n    enabledTools,\n    modelInterfaceTools,\n    onMessageSent,\n    onMessageReceived,\n    onToolCall,\n    onError,\n    onChatCreated,\n  });\n\n  // Handle open/close\n  const handleOpen = useCallback(() => {\n    setInternalIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const handleClose = useCallback(() => {\n    setInternalIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  // Handle send message\n  const handleSend = useCallback(\n    (message: string, files?: any[]) => {\n      chat.sendMessage(message, { files });\n    },\n    [chat]\n  );\n\n  // Handle suggested message click\n  const handleSuggestedClick = useCallback(\n    (message: string) => {\n      chat.sendMessage(message);\n    },\n    [chat]\n  );\n\n  // Apply CSS variable for primary color\n  useEffect(() => {\n    if (mergedOptions.color !== DEFAULT_OPTIONS.color) {\n      document.documentElement.style.setProperty(\n        '--devic-primary',\n        mergedOptions.color\n      );\n    }\n  }, [mergedOptions.color]);\n\n  // Build style object\n  const drawerStyle = useMemo(\n    () => ({\n      width: mergedOptions.width,\n      zIndex: mergedOptions.zIndex,\n    }),\n    [mergedOptions.width, mergedOptions.zIndex]\n  );\n\n  const overlayStyle = useMemo(\n    () => ({\n      zIndex: mergedOptions.zIndex - 1,\n    }),\n    [mergedOptions.zIndex]\n  );\n\n  const triggerStyle = useMemo(\n    () => ({\n      zIndex: mergedOptions.zIndex - 1,\n      [mergedOptions.position]: 20,\n      bottom: 20,\n    }),\n    [mergedOptions.zIndex, mergedOptions.position]\n  );\n\n  return (\n    <>\n      {/* Overlay */}\n      <div\n        className=\"devic-drawer-overlay\"\n        data-open={isOpen}\n        style={overlayStyle}\n        onClick={handleClose}\n      />\n\n      {/* Drawer */}\n      <div\n        className={`devic-chat-drawer ${className || ''}`}\n        data-position={mergedOptions.position}\n        data-open={isOpen}\n        style={drawerStyle}\n      >\n        {/* Header */}\n        <div className=\"devic-drawer-header\">\n          <h2 className=\"devic-drawer-title\">{mergedOptions.title}</h2>\n          <button\n            className=\"devic-drawer-close\"\n            onClick={handleClose}\n            type=\"button\"\n            aria-label=\"Close chat\"\n          >\n            <CloseIcon />\n          </button>\n        </div>\n\n        {/* Error display */}\n        {chat.error && (\n          <div className=\"devic-error\">\n            {chat.error.message}\n          </div>\n        )}\n\n        {/* Messages */}\n        <ChatMessages\n          messages={chat.messages}\n          isLoading={chat.isLoading}\n          welcomeMessage={mergedOptions.welcomeMessage}\n          suggestedMessages={mergedOptions.suggestedMessages}\n          onSuggestedClick={handleSuggestedClick}\n          showToolTimeline={mergedOptions.showToolTimeline}\n        />\n\n        {/* Input */}\n        <ChatInput\n          onSend={handleSend}\n          disabled={chat.isLoading}\n          placeholder={mergedOptions.inputPlaceholder}\n          enableFileUploads={mergedOptions.enableFileUploads}\n          allowedFileTypes={mergedOptions.allowedFileTypes}\n          maxFileSize={mergedOptions.maxFileSize}\n        />\n      </div>\n\n      {/* Trigger button (when drawer is closed) */}\n      {!isOpen && (\n        <button\n          className=\"devic-trigger\"\n          onClick={handleOpen}\n          style={triggerStyle}\n          type=\"button\"\n          aria-label=\"Open chat\"\n        >\n          <ChatIcon />\n        </button>\n      )}\n    </>\n  );\n}\n\n/**\n * Close icon\n */\nfunction CloseIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n/**\n * Chat icon for trigger button\n */\nfunction ChatIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z\" />\n    </svg>\n  );\n}\n"],"names":["useMemo","useState","useDevicChat","useCallback","useEffect","_jsxs","_jsx","ChatMessages","ChatInput"],"mappings":"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"}