@chainai/react 1.0.0

package/dist/components/ChainAIWidget.js

@@ -0,0 +1,243 @@
+"use strict";
+/**
+ * ChainAIWidget - Fully customizable floating chat widget
+ *
+ * Features:
+ * - Floating action button (FAB) that expands to chat
+ * - Full branding customization (logo, colors, text)
+ * - CSS variables for easy styling
+ * - Works in any context (web, extension, mobile)
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainAIWidget = void 0;
+const react_1 = __importStar(require("react"));
+const ChainAIProvider_1 = require("../context/ChainAIProvider");
+const useChat_1 = require("../hooks/useChat");
+const ChatMessage_1 = require("./ChatMessage");
+const ActionPrompt_1 = require("./ActionPrompt");
+const themes_1 = require("../styles/themes");
+require("../styles/widget.css");
+// Default icons
+const DefaultChatIcon = () => (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+    react_1.default.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })));
+const DefaultCloseIcon = () => (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+    react_1.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    react_1.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+const DefaultSendIcon = () => (react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+    react_1.default.createElement("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+    react_1.default.createElement("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })));
+const Avatar = ({ branding, size = 'medium', className = '' }) => {
+    const sizeMap = { small: 28, medium: 36, large: 48 };
+    const iconSizeMap = { small: 14, medium: 20, large: 24 };
+    const px = sizeMap[size];
+    const iconPx = iconSizeMap[size];
+    const gradient = branding?.avatarGradient || ['#3b82f6', '#8b5cf6'];
+    const gradientStyle = `linear-gradient(135deg, ${gradient[0]}, ${gradient[1]})`;
+    // If avatar is a string (URL), render as image
+    if (typeof branding?.avatar === 'string') {
+        return (react_1.default.createElement("div", { className: `chain-ai-widget-avatar ${className}`, style: { width: px, height: px } },
+            react_1.default.createElement("img", { src: branding.avatar, alt: "Assistant", style: { width: '100%', height: '100%', borderRadius: '50%', objectFit: 'cover' } })));
+    }
+    // If avatar is a React node, render it
+    if (branding?.avatar) {
+        return (react_1.default.createElement("div", { className: `chain-ai-widget-avatar ${className}`, style: { width: px, height: px, background: gradientStyle } }, branding.avatar));
+    }
+    // Default avatar
+    return (react_1.default.createElement("div", { className: `chain-ai-widget-avatar ${className}`, style: { width: px, height: px, background: gradientStyle } },
+        react_1.default.createElement("svg", { width: iconPx, height: iconPx, viewBox: "0 0 24 24", fill: "currentColor" },
+            react_1.default.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" }))));
+};
+const Logo = ({ branding }) => {
+    // If logo is a string (URL), render as image
+    if (typeof branding?.logo === 'string') {
+        return (react_1.default.createElement("img", { src: branding.logo, alt: branding?.name || 'Logo', className: "chain-ai-widget-logo", style: { height: 28, width: 'auto', objectFit: 'contain' } }));
+    }
+    // If logo is a React node, render it
+    if (branding?.logo) {
+        return react_1.default.createElement("div", { className: "chain-ai-widget-logo" }, branding.logo);
+    }
+    // Default: use avatar as logo
+    return react_1.default.createElement(Avatar, { branding: branding, size: "medium" });
+};
+const ChainAIWidgetInner = ({ branding = {}, dimensions = {}, defaultOpen = false, position = 'bottom-right', customPosition, theme: customTheme, className = '', placeholder = 'Ask me anything...', zIndex = 9999, onToggle, onMessage, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
+    const [input, setInput] = (0, react_1.useState)('');
+    const [pendingAction, setPendingAction] = (0, react_1.useState)(null);
+    const messagesEndRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const { isReady } = (0, ChainAIProvider_1.useChainAI)();
+    const { messages, isLoading, sendMessage } = (0, useChat_1.useChat)();
+    // Merge custom theme with defaults
+    const theme = {
+        ...themes_1.defaultTheme,
+        ...customTheme,
+        colors: { ...themes_1.defaultTheme.colors, ...customTheme?.colors },
+        fonts: { ...themes_1.defaultTheme.fonts, ...customTheme?.fonts },
+        spacing: { ...themes_1.defaultTheme.spacing, ...customTheme?.spacing },
+    };
+    // Branding defaults (Chain AI branding)
+    const { name = 'Chain AI', welcomeTitle = 'Hi! I\'m Chain AI', welcomeMessage = 'Ask me anything about blockchain operations, transactions, or crypto.', welcomeContent, showPoweredBy = false, fabIcon, fabIconOpen, sendIcon, headerContent, avatarGradient = ['#3b82f6', '#8b5cf6'], } = branding;
+    // Dimension defaults
+    const { fabSize = 56, windowWidth = 380, windowHeight = 520, fabBorderRadius = '50%', windowBorderRadius = 16, offset = 20, } = dimensions;
+    // Position styles
+    const getPositionStyles = () => {
+        if (customPosition) {
+            return customPosition;
+        }
+        const positionMap = {
+            'bottom-right': { bottom: offset, right: offset },
+            'bottom-left': { bottom: offset, left: offset },
+            'top-right': { top: offset, right: offset },
+            'top-left': { top: offset, left: offset },
+        };
+        return positionMap[position];
+    };
+    // Auto-scroll to bottom
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages, isOpen]);
+    // Focus input when opened
+    (0, react_1.useEffect)(() => {
+        if (isOpen && inputRef.current) {
+            setTimeout(() => inputRef.current?.focus(), 100);
+        }
+    }, [isOpen]);
+    // Check for incomplete actions in messages
+    (0, react_1.useEffect)(() => {
+        const lastMessage = messages[messages.length - 1];
+        if (lastMessage?.role === 'assistant' && lastMessage.content) {
+            try {
+                const parsed = JSON.parse(lastMessage.content);
+                if (parsed.type === 'action' && parsed.status === 'incomplete') {
+                    setPendingAction(parsed);
+                }
+                else {
+                    setPendingAction(null);
+                }
+            }
+            catch {
+                setPendingAction(null);
+            }
+        }
+    }, [messages]);
+    const handleToggle = () => {
+        const newState = !isOpen;
+        setIsOpen(newState);
+        onToggle?.(newState);
+    };
+    const handleSend = async () => {
+        if (!input.trim() || isLoading)
+            return;
+        const text = input;
+        setInput('');
+        onMessage?.(text);
+        await sendMessage(text);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    const handleActionFieldSubmit = (field, value) => {
+        sendMessage(`${field}: ${value}`);
+        setPendingAction(null);
+    };
+    // CSS custom properties for theming and dimensions
+    const cssVars = {
+        '--chain-ai-primary': theme.colors.primary,
+        '--chain-ai-primary-text': theme.colors.primaryText,
+        '--chain-ai-bg': theme.colors.background,
+        '--chain-ai-text': theme.colors.text,
+        '--chain-ai-border': theme.colors.border,
+        '--chain-ai-user-bg': theme.colors.userMessage,
+        '--chain-ai-user-text': theme.colors.userMessageText,
+        '--chain-ai-assistant-bg': theme.colors.assistantMessage,
+        '--chain-ai-assistant-text': theme.colors.assistantMessageText,
+        '--chain-ai-font': theme.fonts.body,
+        '--chain-ai-fab-size': typeof fabSize === 'number' ? `${fabSize}px` : fabSize,
+        '--chain-ai-fab-radius': typeof fabBorderRadius === 'number' ? `${fabBorderRadius}px` : fabBorderRadius,
+        '--chain-ai-window-width': typeof windowWidth === 'number' ? `${windowWidth}px` : windowWidth,
+        '--chain-ai-window-height': typeof windowHeight === 'number' ? `${windowHeight}px` : windowHeight,
+        '--chain-ai-window-radius': typeof windowBorderRadius === 'number' ? `${windowBorderRadius}px` : windowBorderRadius,
+        '--chain-ai-avatar-gradient': `linear-gradient(135deg, ${avatarGradient[0]}, ${avatarGradient[1]})`,
+    };
+    // Render FAB icon
+    const renderFabIcon = () => {
+        if (isOpen) {
+            return fabIconOpen || react_1.default.createElement(DefaultCloseIcon, null);
+        }
+        return fabIcon || react_1.default.createElement(DefaultChatIcon, null);
+    };
+    return (react_1.default.createElement("div", { className: `chain-ai-widget ${className}`, style: { ...getPositionStyles(), zIndex, ...cssVars } },
+        isOpen && (react_1.default.createElement("div", { className: "chain-ai-widget-window" },
+            headerContent ? (react_1.default.createElement("div", { className: "chain-ai-widget-header chain-ai-widget-header-custom" }, headerContent)) : (react_1.default.createElement("div", { className: "chain-ai-widget-header" },
+                react_1.default.createElement("div", { className: "chain-ai-widget-header-info" },
+                    react_1.default.createElement(Logo, { branding: branding }),
+                    react_1.default.createElement("span", { className: "chain-ai-widget-title" }, name)),
+                react_1.default.createElement("button", { className: "chain-ai-widget-close", onClick: handleToggle, "aria-label": "Close chat" },
+                    react_1.default.createElement(DefaultCloseIcon, null)))),
+            react_1.default.createElement("div", { className: "chain-ai-widget-messages" },
+                messages.length === 0 ? (welcomeContent ? (react_1.default.createElement("div", { className: "chain-ai-widget-welcome chain-ai-widget-welcome-custom" }, welcomeContent)) : (react_1.default.createElement("div", { className: "chain-ai-widget-welcome" },
+                    react_1.default.createElement(Avatar, { branding: branding, size: "large" }),
+                    react_1.default.createElement("h3", null, welcomeTitle),
+                    react_1.default.createElement("p", null, welcomeMessage)))) : (messages.map((message) => (react_1.default.createElement("div", { key: message.id, className: `chain-ai-widget-message chain-ai-widget-message-${message.role}` },
+                    message.role === 'assistant' && (react_1.default.createElement(Avatar, { branding: branding, size: "small" })),
+                    react_1.default.createElement("div", { className: "chain-ai-widget-message-bubble" },
+                        react_1.default.createElement(ChatMessage_1.ChatMessage, { message: message, theme: theme })))))),
+                isLoading && (react_1.default.createElement("div", { className: "chain-ai-widget-message chain-ai-widget-message-assistant" },
+                    react_1.default.createElement(Avatar, { branding: branding, size: "small" }),
+                    react_1.default.createElement("div", { className: "chain-ai-widget-typing" },
+                        react_1.default.createElement("span", null),
+                        react_1.default.createElement("span", null),
+                        react_1.default.createElement("span", null)))),
+                pendingAction && (react_1.default.createElement(ActionPrompt_1.ActionPrompt, { action: pendingAction.action, missing: pendingAction.missing, prompt: pendingAction.prompt, onSubmit: handleActionFieldSubmit, theme: theme })),
+                react_1.default.createElement("div", { ref: messagesEndRef })),
+            react_1.default.createElement("div", { className: "chain-ai-widget-input-area" },
+                react_1.default.createElement("input", { ref: inputRef, type: "text", className: "chain-ai-widget-input", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: !isReady || isLoading }),
+                react_1.default.createElement("button", { className: "chain-ai-widget-send", onClick: handleSend, disabled: !input.trim() || isLoading, "aria-label": "Send message" }, sendIcon || react_1.default.createElement(DefaultSendIcon, null))),
+            showPoweredBy && (react_1.default.createElement("div", { className: "chain-ai-widget-powered-by" },
+                "Powered by ",
+                react_1.default.createElement("a", { href: "https://chain-ai.io", target: "_blank", rel: "noopener noreferrer" }, "Chain AI"))))),
+        react_1.default.createElement("button", { className: `chain-ai-widget-fab ${isOpen ? 'chain-ai-widget-fab-open' : ''}`, onClick: handleToggle, "aria-label": isOpen ? 'Close chat' : 'Open chat' }, renderFabIcon())));
+};
+const ChainAIWidget = ({ config, ...props }) => {
+    return (react_1.default.createElement(ChainAIProvider_1.ChainAIProvider, { config: config },
+        react_1.default.createElement(ChainAIWidgetInner, { ...props })));
+};
+exports.ChainAIWidget = ChainAIWidget;

package/dist/components/ChatHeader.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ChatHeader - Header bar for chat component
+ */
+import React from 'react';
+import type { Theme } from '../styles/themes';
+export interface ChatHeaderProps {
+    title: string;
+    theme: Theme;
+    onClose?: () => void;
+}
+export declare const ChatHeader: React.FC<ChatHeaderProps>;

package/dist/components/ChatHeader.js

@@ -0,0 +1,20 @@
+"use strict";
+/**
+ * ChatHeader - Header bar for chat component
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const ChatHeader = ({ title, theme, onClose }) => {
+    return (react_1.default.createElement("div", { className: "chain-ai-header", style: {
+            backgroundColor: theme.colors.headerBackground,
+            color: theme.colors.headerText,
+            borderBottomColor: theme.colors.border,
+        } },
+        react_1.default.createElement("h3", { className: "chain-ai-header-title" }, title),
+        onClose && (react_1.default.createElement("button", { className: "chain-ai-header-close", onClick: onClose }, "\u00D7"))));
+};
+exports.ChatHeader = ChatHeader;

package/dist/components/ChatInput.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ChatInput - Input field and send button for chat
+ */
+import React from 'react';
+import type { Theme } from '../styles/themes';
+export interface ChatInputProps {
+    onSend: (text: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    theme: Theme;
+}
+export declare const ChatInput: React.FC<ChatInputProps>;

package/dist/components/ChatInput.js

@@ -0,0 +1,65 @@
+"use strict";
+/**
+ * ChatInput - Input field and send button for chat
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatInput = void 0;
+const react_1 = __importStar(require("react"));
+const ChatInput = ({ onSend, placeholder = 'Type a message...', disabled = false, theme, }) => {
+    const [input, setInput] = (0, react_1.useState)('');
+    const handleSend = () => {
+        if (input.trim() && !disabled) {
+            onSend(input);
+            setInput('');
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    return (react_1.default.createElement("div", { className: "chain-ai-input-container", style: { borderColor: theme.colors.border } },
+        react_1.default.createElement("input", { type: "text", className: "chain-ai-input", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, style: {
+                backgroundColor: theme.colors.inputBackground,
+                color: theme.colors.text,
+            } }),
+        react_1.default.createElement("button", { className: "chain-ai-send-button", onClick: handleSend, disabled: disabled || !input.trim(), style: {
+                backgroundColor: theme.colors.primary,
+                color: theme.colors.primaryText,
+            } }, "Send")));
+};
+exports.ChatInput = ChatInput;

package/dist/components/ChatMessage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ChatMessage - Displays a single chat message
+ */
+import React from 'react';
+import type { Message } from '@chainai/core';
+import type { Theme } from '../styles/themes';
+export interface ChatMessageProps {
+    message: Message;
+    theme: Theme;
+}
+export declare const ChatMessage: React.FC<ChatMessageProps>;

package/dist/components/ChatMessage.js

@@ -0,0 +1,20 @@
+"use strict";
+/**
+ * ChatMessage - Displays a single chat message
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatMessage = void 0;
+const react_1 = __importDefault(require("react"));
+const ChatMessage = ({ message, theme }) => {
+    const isUser = message.role === 'user';
+    return (react_1.default.createElement("div", { className: `chain-ai-message ${isUser ? 'chain-ai-message-user' : 'chain-ai-message-assistant'}`, style: {
+            backgroundColor: isUser ? theme.colors.userMessage : theme.colors.assistantMessage,
+            color: isUser ? theme.colors.userMessageText : theme.colors.assistantMessageText,
+        } },
+        react_1.default.createElement("div", { className: "chain-ai-message-content" }, message.content),
+        react_1.default.createElement("div", { className: "chain-ai-message-timestamp" }, new Date(message.timestamp).toLocaleTimeString())));
+};
+exports.ChatMessage = ChatMessage;

package/dist/context/ChainAIProvider.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ChainAIProvider - Context provider for Chain AI client
+ */
+import React, { ReactNode } from 'react';
+import { ChainAIClient } from '@chainai/core';
+import type { ChainAIConfig, ResponseCustomization } from '@chainai/core';
+export interface ChainAIContextValue {
+    client: ChainAIClient | null;
+    isReady: boolean;
+    error: string | null;
+    customization: ResponseCustomization | null;
+    updateCustomization: (customization: Partial<ResponseCustomization>) => Promise<void>;
+}
+export interface ChainAIProviderProps {
+    config: ChainAIConfig;
+    children: ReactNode;
+}
+export declare const ChainAIProvider: React.FC<ChainAIProviderProps>;
+export declare const useChainAI: () => ChainAIContextValue;

package/dist/context/ChainAIProvider.js

@@ -0,0 +1,95 @@
+"use strict";
+/**
+ * ChainAIProvider - Context provider for Chain AI client
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainAI = exports.ChainAIProvider = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@chainai/core");
+const ChainAIContext = (0, react_1.createContext)(undefined);
+const ChainAIProvider = ({ config, children }) => {
+    const [client, setClient] = (0, react_1.useState)(null);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [customization, setCustomization] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const initializeClient = async () => {
+            try {
+                const newClient = new core_1.ChainAIClient(config);
+                // Validate API key
+                const validation = await newClient.validateApiKey();
+                if (!validation.ok) {
+                    setError(validation.error || 'API key validation failed');
+                    return;
+                }
+                // Fetch customization
+                const custom = await newClient.getCustomization();
+                setCustomization(custom);
+                setClient(newClient);
+                setIsReady(true);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to initialize Chain AI client');
+            }
+        };
+        initializeClient();
+    }, [config]);
+    const updateCustomization = async (newCustomization) => {
+        if (!client) {
+            throw new Error('Client not initialized');
+        }
+        await client.updateCustomization(newCustomization);
+        const updated = await client.getCustomization();
+        setCustomization(updated);
+    };
+    const value = {
+        client,
+        isReady,
+        error,
+        customization,
+        updateCustomization,
+    };
+    return react_1.default.createElement(ChainAIContext.Provider, { value: value }, children);
+};
+exports.ChainAIProvider = ChainAIProvider;
+const useChainAI = () => {
+    const context = (0, react_1.useContext)(ChainAIContext);
+    if (!context) {
+        throw new Error('useChainAI must be used within a ChainAIProvider');
+    }
+    return context;
+};
+exports.useChainAI = useChainAI;

package/dist/hooks/useChat.d.ts

@@ -0,0 +1,12 @@
+/**
+ * useChat hook - Manages chat messages and state
+ */
+import type { Message } from '@chainai/core';
+export interface UseChatReturn {
+    messages: Message[];
+    isLoading: boolean;
+    error: string | null;
+    sendMessage: (text: string, userContext?: any) => Promise<void>;
+    clearMessages: () => void;
+}
+export declare const useChat: (conversationId?: string) => UseChatReturn;

package/dist/hooks/useChat.js

@@ -0,0 +1,80 @@
+"use strict";
+/**
+ * useChat hook - Manages chat messages and state
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChat = void 0;
+const react_1 = require("react");
+const ChainAIProvider_1 = require("../context/ChainAIProvider");
+const useChat = (conversationId) => {
+    const { client, isReady } = (0, ChainAIProvider_1.useChainAI)();
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const sendMessage = (0, react_1.useCallback)(async (text, userContext) => {
+        if (!client || !isReady) {
+            setError('Client not ready');
+            return;
+        }
+        // Add user message
+        const userMessage = {
+            id: Date.now().toString(),
+            role: 'user',
+            content: text,
+            timestamp: Date.now(),
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        setIsLoading(true);
+        setError(null);
+        try {
+            let assistantResponse = '';
+            const assistantMessage = {
+                id: (Date.now() + 1).toString(),
+                role: 'assistant',
+                content: '',
+                timestamp: Date.now(),
+            };
+            setMessages((prev) => [...prev, assistantMessage]);
+            await client.streamChat({
+                text,
+                conversationId: conversationId || 'default',
+                userContext,
+            }, {
+                onChunk: (chunk) => {
+                    assistantResponse += chunk;
+                    setMessages((prev) => {
+                        const updated = [...prev];
+                        const lastMsg = updated[updated.length - 1];
+                        if (lastMsg && lastMsg.role === 'assistant') {
+                            lastMsg.content = assistantResponse;
+                        }
+                        return updated;
+                    });
+                },
+                onDone: () => {
+                    setIsLoading(false);
+                },
+                onError: (err) => {
+                    setError(err);
+                    setIsLoading(false);
+                },
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+            setIsLoading(false);
+        }
+    }, [client, isReady, conversationId]);
+    const clearMessages = (0, react_1.useCallback)(() => {
+        setMessages([]);
+        setError(null);
+    }, []);
+    return {
+        messages,
+        isLoading,
+        error,
+        sendMessage,
+        clearMessages,
+    };
+};
+exports.useChat = useChat;

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @chain-ai/react - React components for Chain AI
+ *
+ * Embeddable blockchain AI assistant components
+ */
+export { ChainAI } from './components/ChainAI';
+export type { ChainAIProps } from './components/ChainAI';
+export { ChainAIWidget } from './components/ChainAIWidget';
+export type { ChainAIWidgetProps, BrandingConfig, DimensionConfig } from './components/ChainAIWidget';
+export { ChatMessage } from './components/ChatMessage';
+export type { ChatMessageProps } from './components/ChatMessage';
+export { ChatInput } from './components/ChatInput';
+export type { ChatInputProps } from './components/ChatInput';
+export { ChatHeader } from './components/ChatHeader';
+export type { ChatHeaderProps } from './components/ChatHeader';
+export { ActionPrompt } from './components/ActionPrompt';
+export type { ActionPromptProps } from './components/ActionPrompt';
+export { ChainAIProvider, useChainAI } from './context/ChainAIProvider';
+export type { ChainAIContextValue, ChainAIProviderProps } from './context/ChainAIProvider';
+export { useChat } from './hooks/useChat';
+export type { UseChatReturn } from './hooks/useChat';
+export { defaultTheme, darkTheme, lightTheme } from './styles/themes';
+export type { Theme } from './styles/themes';
+export type { ChainAIConfig, ResponseCustomization, ResponseStyle, ResponseLength, Message, } from '@chainai/core';