@devicai/ui 0.1.0

package/dist/esm/components/ChatDrawer/ChatInput.d.ts

@@ -0,0 +1,5 @@
+import type { ChatInputProps } from './ChatDrawer.types';
+/**
+ * Chat input component with file upload support
+ */
+export declare function ChatInput({ onSend, disabled, placeholder, enableFileUploads, allowedFileTypes, maxFileSize, }: ChatInputProps): JSX.Element;

package/dist/esm/components/ChatDrawer/ChatInput.js

@@ -0,0 +1,126 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+
+const FILE_TYPE_ACCEPT = {
+    images: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
+    documents: [
+        'application/pdf',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'text/plain',
+        'text/csv',
+    ],
+    audio: ['audio/mpeg', 'audio/wav', 'audio/ogg'],
+    video: ['video/mp4', 'video/webm', 'video/ogg'],
+};
+/**
+ * Chat input component with file upload support
+ */
+function ChatInput({ onSend, disabled = false, placeholder = 'Type a message...', enableFileUploads = false, allowedFileTypes = { images: true, documents: true }, maxFileSize = 10 * 1024 * 1024, // 10MB
+ }) {
+    const [message, setMessage] = useState('');
+    const [files, setFiles] = useState([]);
+    const textareaRef = useRef(null);
+    const fileInputRef = useRef(null);
+    // Calculate accepted file types
+    const acceptedTypes = Object.entries(allowedFileTypes)
+        .filter(([, enabled]) => enabled)
+        .flatMap(([type]) => FILE_TYPE_ACCEPT[type] || [])
+        .join(',');
+    // Auto-resize textarea
+    const handleInput = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
+        }
+    }, []);
+    // Handle send
+    const handleSend = useCallback(() => {
+        const trimmedMessage = message.trim();
+        if (!trimmedMessage && files.length === 0)
+            return;
+        // Convert File objects to ChatFile format
+        const chatFiles = files.map((file) => ({
+            name: file.name,
+            fileType: getFileType(file.type),
+        }));
+        onSend(trimmedMessage, chatFiles.length > 0 ? chatFiles : undefined);
+        setMessage('');
+        setFiles([]);
+        // Reset textarea height
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+        }
+    }, [message, files, onSend]);
+    // Handle key press
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    }, [handleSend]);
+    // Handle file selection
+    const handleFileSelect = useCallback((e) => {
+        const selectedFiles = Array.from(e.target.files || []);
+        // Filter valid files
+        const validFiles = selectedFiles.filter((file) => {
+            if (file.size > maxFileSize) {
+                console.warn(`File ${file.name} exceeds maximum size`);
+                return false;
+            }
+            return true;
+        });
+        setFiles((prev) => [...prev, ...validFiles]);
+        // Reset input
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    }, [maxFileSize]);
+    // Remove file
+    const removeFile = useCallback((index) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    }, []);
+    return (jsxs("div", { className: "devic-input-area", children: [files.length > 0 && (jsx("div", { className: "devic-file-preview", children: files.map((file, idx) => (jsxs("div", { className: "devic-file-preview-item", children: [jsx(FileIcon, {}), jsx("span", { children: file.name }), jsx("button", { className: "devic-file-remove", onClick: () => removeFile(idx), type: "button", children: "\u00D7" })] }, idx))) })), jsxs("div", { className: "devic-input-wrapper", children: [enableFileUploads && (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedTypes, multiple: true, onChange: handleFileSelect, style: { display: 'none' } }), jsx("button", { className: "devic-input-btn", onClick: () => fileInputRef.current?.click(), disabled: disabled, type: "button", title: "Attach file", children: jsx(AttachIcon, {}) })] })), jsx("textarea", { ref: textareaRef, className: "devic-input", value: message, onChange: (e) => {
+                            setMessage(e.target.value);
+                            handleInput();
+                        }, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1 }), jsx("button", { className: "devic-input-btn devic-send-btn", onClick: handleSend, disabled: disabled || (!message.trim() && files.length === 0), type: "button", title: "Send message", children: jsx(SendIcon, {}) })] })] }));
+}
+/**
+ * Get file type category from MIME type
+ */
+function getFileType(mimeType) {
+    if (mimeType.startsWith('image/'))
+        return 'image';
+    if (mimeType.startsWith('audio/'))
+        return 'audio';
+    if (mimeType.startsWith('video/'))
+        return 'video';
+    if (mimeType.startsWith('application/pdf') ||
+        mimeType.startsWith('application/msword') ||
+        mimeType.startsWith('text/')) {
+        return 'document';
+    }
+    return 'other';
+}
+/**
+ * Attach icon
+ */
+function AttachIcon() {
+    return (jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }));
+}
+/**
+ * Send icon
+ */
+function SendIcon() {
+    return (jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }));
+}
+/**
+ * File icon
+ */
+function FileIcon() {
+    return (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), jsx("polyline", { points: "14,2 14,8 20,8" })] }));
+}
+
+export { ChatInput };
+//# sourceMappingURL=ChatInput.js.map

package/dist/esm/components/ChatDrawer/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","sources":["../../../../src/components/ChatDrawer/ChatInput.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from 'react';\nimport type { ChatInputProps } from './ChatDrawer.types';\nimport type { ChatFile } from '../../api/types';\n\nconst FILE_TYPE_ACCEPT: Record<string, string[]> = {\n  images: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],\n  documents: [\n    'application/pdf',\n    'application/msword',\n    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    'text/plain',\n    'text/csv',\n  ],\n  audio: ['audio/mpeg', 'audio/wav', 'audio/ogg'],\n  video: ['video/mp4', 'video/webm', 'video/ogg'],\n};\n\n/**\n * Chat input component with file upload support\n */\nexport function ChatInput({\n  onSend,\n  disabled = false,\n  placeholder = 'Type a message...',\n  enableFileUploads = false,\n  allowedFileTypes = { images: true, documents: true },\n  maxFileSize = 10 * 1024 * 1024, // 10MB\n}: ChatInputProps): JSX.Element {\n  const [message, setMessage] = useState('');\n  const [files, setFiles] = useState<File[]>([]);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  // Calculate accepted file types\n  const acceptedTypes = Object.entries(allowedFileTypes)\n    .filter(([, enabled]) => enabled)\n    .flatMap(([type]) => FILE_TYPE_ACCEPT[type] || [])\n    .join(',');\n\n  // Auto-resize textarea\n  const handleInput = useCallback(() => {\n    const textarea = textareaRef.current;\n    if (textarea) {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;\n    }\n  }, []);\n\n  // Handle send\n  const handleSend = useCallback(() => {\n    const trimmedMessage = message.trim();\n    if (!trimmedMessage && files.length === 0) return;\n\n    // Convert File objects to ChatFile format\n    const chatFiles: ChatFile[] = files.map((file) => ({\n      name: file.name,\n      fileType: getFileType(file.type),\n    }));\n\n    onSend(trimmedMessage, chatFiles.length > 0 ? chatFiles : undefined);\n    setMessage('');\n    setFiles([]);\n\n    // Reset textarea height\n    if (textareaRef.current) {\n      textareaRef.current.style.height = 'auto';\n    }\n  }, [message, files, onSend]);\n\n  // Handle key press\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' && !e.shiftKey) {\n        e.preventDefault();\n        handleSend();\n      }\n    },\n    [handleSend]\n  );\n\n  // Handle file selection\n  const handleFileSelect = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const selectedFiles = Array.from(e.target.files || []);\n\n      // Filter valid files\n      const validFiles = selectedFiles.filter((file) => {\n        if (file.size > maxFileSize) {\n          console.warn(`File ${file.name} exceeds maximum size`);\n          return false;\n        }\n        return true;\n      });\n\n      setFiles((prev) => [...prev, ...validFiles]);\n\n      // Reset input\n      if (fileInputRef.current) {\n        fileInputRef.current.value = '';\n      }\n    },\n    [maxFileSize]\n  );\n\n  // Remove file\n  const removeFile = useCallback((index: number) => {\n    setFiles((prev) => prev.filter((_, i) => i !== index));\n  }, []);\n\n  return (\n    <div className=\"devic-input-area\">\n      {files.length > 0 && (\n        <div className=\"devic-file-preview\">\n          {files.map((file, idx) => (\n            <div key={idx} className=\"devic-file-preview-item\">\n              <FileIcon />\n              <span>{file.name}</span>\n              <button\n                className=\"devic-file-remove\"\n                onClick={() => removeFile(idx)}\n                type=\"button\"\n              >\n                &times;\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n\n      <div className=\"devic-input-wrapper\">\n        {enableFileUploads && (\n          <>\n            <input\n              ref={fileInputRef}\n              type=\"file\"\n              accept={acceptedTypes}\n              multiple\n              onChange={handleFileSelect}\n              style={{ display: 'none' }}\n            />\n            <button\n              className=\"devic-input-btn\"\n              onClick={() => fileInputRef.current?.click()}\n              disabled={disabled}\n              type=\"button\"\n              title=\"Attach file\"\n            >\n              <AttachIcon />\n            </button>\n          </>\n        )}\n\n        <textarea\n          ref={textareaRef}\n          className=\"devic-input\"\n          value={message}\n          onChange={(e) => {\n            setMessage(e.target.value);\n            handleInput();\n          }}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          disabled={disabled}\n          rows={1}\n        />\n\n        <button\n          className=\"devic-input-btn devic-send-btn\"\n          onClick={handleSend}\n          disabled={disabled || (!message.trim() && files.length === 0)}\n          type=\"button\"\n          title=\"Send message\"\n        >\n          <SendIcon />\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Get file type category from MIME type\n */\nfunction getFileType(\n  mimeType: string\n): 'image' | 'document' | 'audio' | 'video' | 'other' {\n  if (mimeType.startsWith('image/')) return 'image';\n  if (mimeType.startsWith('audio/')) return 'audio';\n  if (mimeType.startsWith('video/')) return 'video';\n  if (\n    mimeType.startsWith('application/pdf') ||\n    mimeType.startsWith('application/msword') ||\n    mimeType.startsWith('text/')\n  ) {\n    return 'document';\n  }\n  return 'other';\n}\n\n/**\n * Attach icon\n */\nfunction AttachIcon(): 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      <path d=\"M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48\" />\n    </svg>\n  );\n}\n\n/**\n * Send icon\n */\nfunction SendIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\" />\n    </svg>\n  );\n}\n\n/**\n * File icon\n */\nfunction FileIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n      <polyline points=\"14,2 14,8 20,8\" />\n    </svg>\n  );\n}\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/esm/components/ChatDrawer/ChatMessages.d.ts

@@ -0,0 +1,5 @@
+import type { ChatMessagesProps } from './ChatDrawer.types';
+/**
+ * Messages list component
+ */
+export declare function ChatMessages({ messages, isLoading, welcomeMessage, suggestedMessages, onSuggestedClick, showToolTimeline, }: ChatMessagesProps): JSX.Element;

package/dist/esm/components/ChatDrawer/ChatMessages.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { ToolTimeline } from './ToolTimeline.js';
+
+/**
+ * Format timestamp to readable time
+ */
+function formatTime(timestamp) {
+    return new Date(timestamp).toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+/**
+ * Messages list component
+ */
+function ChatMessages({ messages, isLoading, welcomeMessage, suggestedMessages, onSuggestedClick, showToolTimeline = true, }) {
+    const containerRef = useRef(null);
+    const lastMessageCountRef = useRef(messages.length);
+    // Auto-scroll to bottom when new messages arrive
+    useEffect(() => {
+        if (messages.length > lastMessageCountRef.current && containerRef.current) {
+            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+        }
+        lastMessageCountRef.current = messages.length;
+    }, [messages.length]);
+    // Extract tool calls for timeline
+    const toolCalls = showToolTimeline
+        ? messages
+            .filter((m) => m.tool_calls?.length)
+            .flatMap((m) => m.tool_calls.map((tc) => ({
+            id: tc.id,
+            name: tc.function.name,
+            status: 'completed',
+            timestamp: m.timestamp,
+        })))
+        : [];
+    return (jsxs("div", { className: "devic-messages-container", ref: containerRef, children: [messages.length === 0 && (welcomeMessage || suggestedMessages?.length) && (jsxs("div", { className: "devic-welcome", children: [welcomeMessage && (jsx("p", { className: "devic-welcome-text", children: welcomeMessage })), suggestedMessages && suggestedMessages.length > 0 && (jsx("div", { className: "devic-suggested-messages", children: suggestedMessages.map((msg, idx) => (jsx("button", { className: "devic-suggested-btn", onClick: () => onSuggestedClick?.(msg), children: msg }, idx))) }))] })), messages.map((message) => {
+                // Skip tool messages in main display (shown in timeline)
+                if (message.role === 'tool' && showToolTimeline) {
+                    return null;
+                }
+                return (jsxs("div", { className: "devic-message", "data-role": message.role, children: [jsxs("div", { className: "devic-message-bubble", children: [message.content.message, message.content.files && message.content.files.length > 0 && (jsx("div", { className: "devic-message-files", children: message.content.files.map((file, idx) => (jsxs("div", { className: "devic-message-file", children: [jsx(FileIcon, {}), jsx("span", { children: file.name })] }, idx))) }))] }), jsx("span", { className: "devic-message-time", children: formatTime(message.timestamp) })] }, message.uid));
+            }), showToolTimeline && toolCalls.length > 0 && (jsx(ToolTimeline, { toolCalls: toolCalls })), isLoading && (jsxs("div", { className: "devic-loading", children: [jsx("span", { className: "devic-loading-dot" }), jsx("span", { className: "devic-loading-dot" }), jsx("span", { className: "devic-loading-dot" })] }))] }));
+}
+/**
+ * Simple file icon
+ */
+function FileIcon() {
+    return (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), jsx("polyline", { points: "14,2 14,8 20,8" })] }));
+}
+
+export { ChatMessages };
+//# sourceMappingURL=ChatMessages.js.map

package/dist/esm/components/ChatDrawer/ChatMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessages.js","sources":["../../../../src/components/ChatDrawer/ChatMessages.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { ChatMessagesProps } from './ChatDrawer.types';\nimport { ToolTimeline } from './ToolTimeline';\n\n/**\n * Format timestamp to readable time\n */\nfunction formatTime(timestamp: number): string {\n  return new Date(timestamp).toLocaleTimeString([], {\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n}\n\n/**\n * Messages list component\n */\nexport function ChatMessages({\n  messages,\n  isLoading,\n  welcomeMessage,\n  suggestedMessages,\n  onSuggestedClick,\n  showToolTimeline = true,\n}: ChatMessagesProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const lastMessageCountRef = useRef(messages.length);\n\n  // Auto-scroll to bottom when new messages arrive\n  useEffect(() => {\n    if (messages.length > lastMessageCountRef.current && containerRef.current) {\n      containerRef.current.scrollTop = containerRef.current.scrollHeight;\n    }\n    lastMessageCountRef.current = messages.length;\n  }, [messages.length]);\n\n  // Extract tool calls for timeline\n  const toolCalls = showToolTimeline\n    ? messages\n        .filter((m) => m.tool_calls?.length)\n        .flatMap((m) =>\n          m.tool_calls!.map((tc) => ({\n            id: tc.id,\n            name: tc.function.name,\n            status: 'completed' as const,\n            timestamp: m.timestamp,\n          }))\n        )\n    : [];\n\n  return (\n    <div className=\"devic-messages-container\" ref={containerRef}>\n      {messages.length === 0 && (welcomeMessage || suggestedMessages?.length) && (\n        <div className=\"devic-welcome\">\n          {welcomeMessage && (\n            <p className=\"devic-welcome-text\">{welcomeMessage}</p>\n          )}\n          {suggestedMessages && suggestedMessages.length > 0 && (\n            <div className=\"devic-suggested-messages\">\n              {suggestedMessages.map((msg, idx) => (\n                <button\n                  key={idx}\n                  className=\"devic-suggested-btn\"\n                  onClick={() => onSuggestedClick?.(msg)}\n                >\n                  {msg}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {messages.map((message) => {\n        // Skip tool messages in main display (shown in timeline)\n        if (message.role === 'tool' && showToolTimeline) {\n          return null;\n        }\n\n        return (\n          <div\n            key={message.uid}\n            className=\"devic-message\"\n            data-role={message.role}\n          >\n            <div className=\"devic-message-bubble\">\n              {message.content.message}\n              {message.content.files && message.content.files.length > 0 && (\n                <div className=\"devic-message-files\">\n                  {message.content.files.map((file, idx) => (\n                    <div key={idx} className=\"devic-message-file\">\n                      <FileIcon />\n                      <span>{file.name}</span>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n            <span className=\"devic-message-time\">\n              {formatTime(message.timestamp)}\n            </span>\n          </div>\n        );\n      })}\n\n      {showToolTimeline && toolCalls.length > 0 && (\n        <ToolTimeline toolCalls={toolCalls} />\n      )}\n\n      {isLoading && (\n        <div className=\"devic-loading\">\n          <span className=\"devic-loading-dot\"></span>\n          <span className=\"devic-loading-dot\"></span>\n          <span className=\"devic-loading-dot\"></span>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Simple file icon\n */\nfunction FileIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n      <polyline points=\"14,2 14,8 20,8\" />\n    </svg>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/ChatDrawer/ToolTimeline.d.ts

@@ -0,0 +1,5 @@
+import type { ToolTimelineProps } from './ChatDrawer.types';
+/**
+ * Tool execution timeline component
+ */
+export declare function ToolTimeline({ toolCalls }: ToolTimelineProps): JSX.Element | null;

package/dist/esm/components/ChatDrawer/ToolTimeline.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/**
+ * Tool execution timeline component
+ */
+function ToolTimeline({ toolCalls }) {
+    if (toolCalls.length === 0) {
+        return null;
+    }
+    return (jsx("div", { className: "devic-tool-timeline", children: toolCalls.map((tool) => (jsxs("div", { className: "devic-tool-item", children: [jsx("span", { className: "devic-tool-status", "data-status": tool.status }), jsx("span", { className: "devic-tool-name", children: formatToolName(tool.name) }), tool.status === 'error' && tool.error && (jsx("span", { className: "devic-tool-error", children: tool.error }))] }, tool.id))) }));
+}
+/**
+ * Format tool name for display
+ */
+function formatToolName(name) {
+    // Convert snake_case or camelCase to Title Case with spaces
+    return name
+        .replace(/_/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+export { ToolTimeline };
+//# sourceMappingURL=ToolTimeline.js.map

package/dist/esm/components/ChatDrawer/ToolTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolTimeline.js","sources":["../../../../src/components/ChatDrawer/ToolTimeline.tsx"],"sourcesContent":["import React from 'react';\nimport type { ToolTimelineProps } from './ChatDrawer.types';\n\n/**\n * Tool execution timeline component\n */\nexport function ToolTimeline({ toolCalls }: ToolTimelineProps): JSX.Element | null {\n  if (toolCalls.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"devic-tool-timeline\">\n      {toolCalls.map((tool) => (\n        <div key={tool.id} className=\"devic-tool-item\">\n          <span className=\"devic-tool-status\" data-status={tool.status} />\n          <span className=\"devic-tool-name\">{formatToolName(tool.name)}</span>\n          {tool.status === 'error' && tool.error && (\n            <span className=\"devic-tool-error\">{tool.error}</span>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/**\n * Format tool name for display\n */\nfunction formatToolName(name: string): string {\n  // Convert snake_case or camelCase to Title Case with spaces\n  return name\n    .replace(/_/g, ' ')\n    .replace(/([a-z])([A-Z])/g, '$1 $2')\n    .replace(/\\b\\w/g, (char) => char.toUpperCase());\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;AAGA;;AAEG;AACG,SAAU,YAAY,CAAC,EAAE,SAAS,EAAqB,EAAA;AAC3D,IAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1B,QAAA,OAAO,IAAI;IACb;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EACjC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,MAClBC,IAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,CAC5CD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA,aAAA,EAAc,IAAI,CAAC,MAAM,GAAI,EAChEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,CAAQ,EACnE,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KACpCA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,GAAQ,CACvD,CAAA,EAAA,EALO,IAAI,CAAC,EAAE,CAMX,CACP,CAAC,EAAA,CACE;AAEV;AAEA;;AAEG;AACH,SAAS,cAAc,CAAC,IAAY,EAAA;;AAElC,IAAA,OAAO;AACJ,SAAA,OAAO,CAAC,IAAI,EAAE,GAAG;AACjB,SAAA,OAAO,CAAC,iBAAiB,EAAE,OAAO;AAClC,SAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;AACnD;;;;"}

package/dist/esm/components/ChatDrawer/index.d.ts

@@ -0,0 +1,5 @@
+export { ChatDrawer } from './ChatDrawer';
+export { ChatMessages } from './ChatMessages';
+export { ChatInput } from './ChatInput';
+export { ToolTimeline } from './ToolTimeline';
+export type { ChatDrawerProps, ChatDrawerOptions, ChatMessagesProps, ChatInputProps, ToolTimelineProps, AllowedFileTypes, } from './ChatDrawer.types';

package/dist/esm/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { useDevicChat } from './useDevicChat';
+export type { UseDevicChatOptions, UseDevicChatResult } from './useDevicChat';
+export { usePolling } from './usePolling';
+export type { UsePollingOptions, UsePollingResult } from './usePolling';
+export { useModelInterface } from './useModelInterface';
+export type { UseModelInterfaceOptions, UseModelInterfaceResult } from './useModelInterface';

package/dist/esm/hooks/useDevicChat.d.ts

@@ -0,0 +1,120 @@
+import type { ChatMessage, ChatFile, ModelInterfaceTool, RealtimeStatus } from '../api/types';
+export interface UseDevicChatOptions {
+    /**
+     * Assistant identifier
+     */
+    assistantId: string;
+    /**
+     * Existing chat UID to continue a conversation
+     */
+    chatUid?: string;
+    /**
+     * API key (overrides provider context)
+     */
+    apiKey?: string;
+    /**
+     * Base URL (overrides provider context)
+     */
+    baseUrl?: string;
+    /**
+     * Tenant ID for multi-tenant environments
+     */
+    tenantId?: string;
+    /**
+     * Tenant metadata
+     */
+    tenantMetadata?: Record<string, any>;
+    /**
+     * Tools enabled from the assistant's configured tool groups
+     */
+    enabledTools?: string[];
+    /**
+     * Client-side tools for model interface protocol
+     */
+    modelInterfaceTools?: ModelInterfaceTool[];
+    /**
+     * Polling interval for async mode (ms)
+     * @default 1000
+     */
+    pollingInterval?: number;
+    /**
+     * Callback when a message is sent
+     */
+    onMessageSent?: (message: ChatMessage) => void;
+    /**
+     * Callback when a message is received
+     */
+    onMessageReceived?: (message: ChatMessage) => void;
+    /**
+     * Callback when a tool is called
+     */
+    onToolCall?: (toolName: string, params: any) => void;
+    /**
+     * Callback when an error occurs
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Callback when a new chat is created
+     */
+    onChatCreated?: (chatUid: string) => void;
+}
+export interface UseDevicChatResult {
+    /**
+     * Current chat messages
+     */
+    messages: ChatMessage[];
+    /**
+     * Current chat UID
+     */
+    chatUid: string | null;
+    /**
+     * Whether a message is being processed
+     */
+    isLoading: boolean;
+    /**
+     * Current status
+     */
+    status: RealtimeStatus | 'idle';
+    /**
+     * Last error
+     */
+    error: Error | null;
+    /**
+     * Send a message
+     */
+    sendMessage: (message: string, options?: {
+        files?: ChatFile[];
+        metadata?: Record<string, any>;
+    }) => Promise<void>;
+    /**
+     * Clear the chat and start a new conversation
+     */
+    clearChat: () => void;
+    /**
+     * Load an existing chat
+     */
+    loadChat: (chatUid: string) => Promise<void>;
+}
+/**
+ * Main hook for managing chat with a Devic assistant
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   messages,
+ *   isLoading,
+ *   sendMessage,
+ * } = useDevicChat({
+ *   assistantId: 'my-assistant',
+ *   modelInterfaceTools: [
+ *     {
+ *       toolName: 'get_user_location',
+ *       schema: { ... },
+ *       callback: async () => ({ lat: 40.7, lng: -74.0 })
+ *     }
+ *   ],
+ *   onMessageReceived: (msg) => console.log('Received:', msg),
+ * });
+ * ```
+ */
+export declare function useDevicChat(options: UseDevicChatOptions): UseDevicChatResult;