@chainai/react 1.0.0

package/README.md

@@ -0,0 +1,227 @@
+# @chain-ai/react
+
+React components for Chain AI - Embeddable blockchain AI assistant.
+
+## Installation
+
+```bash
+npm install @chain-ai/react @chain-ai/core
+```
+
+## Quick Start
+
+```typescript
+import { ChainAI } from '@chain-ai/react';
+
+function App() {
+  return (
+    <ChainAI
+      config={{ apiKey: 'sk_dev_123_...' }}
+      height="600px"
+      placeholder="Ask me anything about blockchain..."
+    />
+  );
+}
+```
+
+## Features
+
+- ✅ **Simplified Components** - 94% reduction from 2,556 lines to ~360 lines
+- ✅ **Customizable Theming** - Dark/light themes with full CSS customization
+- ✅ **Real-time Streaming** - Word-by-word response streaming
+- ✅ **Type Safe** - Full TypeScript support
+- ✅ **Responsive** - Works on all screen sizes
+- ✅ **Accessible** - Keyboard navigation support
+
+## Basic Usage
+
+### Standalone Component
+
+```typescript
+import { ChainAI } from '@chain-ai/react';
+
+function App() {
+  return (
+    <ChainAI
+      config={{
+        apiKey: 'sk_dev_123_...',
+        host: 'https://icp0.io', // optional
+      }}
+      height="600px"
+      theme={darkTheme}
+      placeholder="Message Chain AI..."
+      showHeader={true}
+      headerTitle="Blockchain Assistant"
+      onMessage={(msg) => console.log('User sent:', msg)}
+    />
+  );
+}
+```
+
+### Advanced Usage with Provider
+
+```typescript
+import { ChainAIProvider, useChainAI, useChat } from '@chain-ai/react';
+
+function App() {
+  return (
+    <ChainAIProvider
+      config={{
+        apiKey: 'sk_dev_123_...',
+      }}
+    >
+      <MyCustomChat />
+    </ChainAIProvider>
+  );
+}
+
+function MyCustomChat() {
+  const { messages, sendMessage, isLoading } = useChat();
+
+  return (
+    <div>
+      {messages.map(msg => (
+        <div key={msg.id}>{msg.content}</div>
+      ))}
+      <button onClick={() => sendMessage('What is BTC price?')}>
+        Get BTC Price
+      </button>
+    </div>
+  );
+}
+```
+
+## Props
+
+### ChainAI Component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `config` | `ChainAIConfig` | **required** | API key and configuration |
+| `conversationId` | `string` | `'default'` | Unique conversation identifier |
+| `theme` | `Theme` | `defaultTheme` | Color scheme and styling |
+| `className` | `string` | `''` | Additional CSS classes |
+| `height` | `string \| number` | `'600px'` | Component height |
+| `placeholder` | `string` | `'Ask me anything...'` | Input placeholder text |
+| `showHeader` | `boolean` | `true` | Show/hide header bar |
+| `headerTitle` | `string` | `'Chain AI'` | Header title text |
+| `onMessage` | `(msg: string) => void` | - | Callback when user sends message |
+
+## Theming
+
+### Built-in Themes
+
+```typescript
+import { ChainAI, darkTheme, lightTheme } from '@chain-ai/react';
+
+// Dark theme
+<ChainAI config={config} theme={darkTheme} />
+
+// Light theme
+<ChainAI config={config} theme={lightTheme} />
+```
+
+### Custom Theme
+
+```typescript
+import { ChainAI, Theme } from '@chain-ai/react';
+
+const customTheme: Theme = {
+  colors: {
+    primary: '#6366f1',
+    primaryText: '#ffffff',
+    background: '#0f172a',
+    text: '#f8fafc',
+    border: '#1e293b',
+    userMessage: '#6366f1',
+    userMessageText: '#ffffff',
+    assistantMessage: '#1e293b',
+    assistantMessageText: '#f8fafc',
+    inputBackground: '#1e293b',
+    headerBackground: '#020617',
+    headerText: '#f8fafc',
+  },
+  fonts: {
+    body: 'Inter, sans-serif',
+    heading: 'Inter, sans-serif',
+  },
+  spacing: {
+    small: '8px',
+    medium: '16px',
+    large: '24px',
+  },
+};
+
+<ChainAI config={config} theme={customTheme} />
+```
+
+## Hooks
+
+### useChainAI()
+
+Access the Chain AI client and customization settings.
+
+```typescript
+const { client, isReady, error, customization, updateCustomization } = useChainAI();
+```
+
+### useChat(conversationId?)
+
+Manage chat messages and state.
+
+```typescript
+const { messages, isLoading, error, sendMessage, clearMessages } = useChat('my-conversation');
+```
+
+## Components
+
+### Individual Components
+
+You can use individual components for custom layouts:
+
+```typescript
+import {
+  ChainAIProvider,
+  ChatMessage,
+  ChatInput,
+  ChatHeader,
+  useChat,
+  defaultTheme,
+} from '@chain-ai/react';
+
+function CustomLayout() {
+  const { messages, sendMessage, isLoading } = useChat();
+
+  return (
+    <div>
+      <ChatHeader title="My Custom Chat" theme={defaultTheme} />
+      {messages.map(msg => (
+        <ChatMessage key={msg.id} message={msg} theme={defaultTheme} />
+      ))}
+      <ChatInput
+        onSend={sendMessage}
+        disabled={isLoading}
+        theme={defaultTheme}
+      />
+    </div>
+  );
+}
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  ChainAIProps,
+  Theme,
+  Message,
+  ChainAIConfig,
+  ResponseCustomization,
+} from '@chain-ai/react';
+```
+
+## License
+
+MIT

package/dist/components/ActionPrompt.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ActionPrompt - UI for handling incomplete actions
+ *
+ * Displays missing fields and allows users to fill them in
+ */
+import React from 'react';
+import type { Theme } from '../styles/themes';
+export interface ActionPromptProps {
+    /** The action type (e.g., 'send', 'swap') */
+    action: string;
+    /** List of missing required fields */
+    missing: string[];
+    /** AI-generated prompt asking for the missing fields */
+    prompt: string;
+    /** Called when user submits a field value */
+    onSubmit: (field: string, value: string) => void;
+    /** Theme configuration */
+    theme: Theme;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare const ActionPrompt: React.FC<ActionPromptProps>;

package/dist/components/ActionPrompt.js

@@ -0,0 +1,130 @@
+"use strict";
+/**
+ * ActionPrompt - UI for handling incomplete actions
+ *
+ * Displays missing fields and allows users to fill them in
+ */
+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.ActionPrompt = void 0;
+const react_1 = __importStar(require("react"));
+// Field-specific input configurations
+const fieldConfig = {
+    amount: { type: 'number', placeholder: '0.00', label: 'Amount' },
+    recipient: { type: 'text', placeholder: '0x... or wallet address', label: 'Recipient Address' },
+    token: { type: 'text', placeholder: 'ETH, BTC, USDC...', label: 'Token' },
+    address: { type: 'text', placeholder: '0x... or wallet address', label: 'Address' },
+    fee: { type: 'text', placeholder: 'low, medium, or high', label: 'Fee Priority' },
+    memo: { type: 'text', placeholder: 'Optional note', label: 'Memo' },
+    chain: { type: 'text', placeholder: 'Ethereum, Bitcoin...', label: 'Chain' },
+    slippage: { type: 'number', placeholder: '0.5', label: 'Slippage %' },
+};
+// Action icons
+const ActionIcon = ({ action }) => {
+    switch (action) {
+        case 'send':
+            return (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" })));
+        case 'swap':
+            return (react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                react_1.default.createElement("polyline", { points: "17 1 21 5 17 9" }),
+                react_1.default.createElement("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }),
+                react_1.default.createElement("polyline", { points: "7 23 3 19 7 15" }),
+                react_1.default.createElement("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })));
+        default:
+            return (react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+                react_1.default.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                react_1.default.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })));
+    }
+};
+const ActionPrompt = ({ action, missing, prompt, onSubmit, theme, className = '', }) => {
+    const [values, setValues] = (0, react_1.useState)({});
+    const [focusedField, setFocusedField] = (0, react_1.useState)(null);
+    const handleChange = (field, value) => {
+        setValues((prev) => ({ ...prev, [field]: value }));
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Submit all filled values
+        const filledFields = Object.entries(values).filter(([_, v]) => v.trim());
+        if (filledFields.length > 0) {
+            // Send as a combined message
+            const message = filledFields.map(([k, v]) => `${k}: ${v}`).join(', ');
+            onSubmit(filledFields[0][0], message);
+        }
+    };
+    const handleQuickSelect = (field, value) => {
+        setValues((prev) => ({ ...prev, [field]: value }));
+        onSubmit(field, `${field}: ${value}`);
+    };
+    // Quick selection options for certain fields
+    const quickOptions = {
+        fee: ['low', 'medium', 'high'],
+        token: ['ETH', 'BTC', 'USDC', 'USDT'],
+        chain: ['Ethereum', 'Bitcoin', 'Solana', 'ICP'],
+    };
+    return (react_1.default.createElement("div", { className: `chain-ai-action-prompt ${className}` },
+        react_1.default.createElement("div", { className: "chain-ai-action-prompt-header" },
+            react_1.default.createElement("div", { className: "chain-ai-action-prompt-icon", style: { color: theme.colors.primary } },
+                react_1.default.createElement(ActionIcon, { action: action })),
+            react_1.default.createElement("div", { className: "chain-ai-action-prompt-title" },
+                react_1.default.createElement("span", { className: "chain-ai-action-prompt-action" }, action.toUpperCase()),
+                react_1.default.createElement("span", { className: "chain-ai-action-prompt-label" }, "Missing information"))),
+        react_1.default.createElement("p", { className: "chain-ai-action-prompt-message" }, prompt),
+        react_1.default.createElement("form", { onSubmit: handleSubmit, className: "chain-ai-action-prompt-form" },
+            missing.map((field) => {
+                const config = fieldConfig[field] || {
+                    type: 'text',
+                    placeholder: `Enter ${field}`,
+                    label: field.charAt(0).toUpperCase() + field.slice(1),
+                };
+                return (react_1.default.createElement("div", { key: field, className: `chain-ai-action-prompt-field ${focusedField === field ? 'focused' : ''}` },
+                    react_1.default.createElement("label", { className: "chain-ai-action-prompt-field-label" }, config.label),
+                    quickOptions[field] && (react_1.default.createElement("div", { className: "chain-ai-action-prompt-quick-options" }, quickOptions[field].map((option) => (react_1.default.createElement("button", { key: option, type: "button", className: "chain-ai-action-prompt-quick-btn", onClick: () => handleQuickSelect(field, option), style: {
+                            borderColor: theme.colors.border,
+                            color: theme.colors.text,
+                        } }, option))))),
+                    react_1.default.createElement("input", { type: config.type, className: "chain-ai-action-prompt-input", placeholder: config.placeholder, value: values[field] || '', onChange: (e) => handleChange(field, e.target.value), onFocus: () => setFocusedField(field), onBlur: () => setFocusedField(null), style: {
+                            borderColor: focusedField === field ? theme.colors.primary : theme.colors.border,
+                        } })));
+            }),
+            react_1.default.createElement("button", { type: "submit", className: "chain-ai-action-prompt-submit", disabled: Object.values(values).every((v) => !v.trim()), style: {
+                    backgroundColor: theme.colors.primary,
+                    color: theme.colors.primaryText,
+                } }, "Continue"))));
+};
+exports.ActionPrompt = ActionPrompt;

package/dist/components/ChainAI.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ChainAI - Main chat component (simplified from 2,556-line playground)
+ */
+import React from 'react';
+import type { ChainAIConfig } from '@chainai/core';
+import type { Theme } from '../styles/themes';
+import '../styles/default.css';
+export interface ChainAIProps {
+    config: ChainAIConfig;
+    conversationId?: string;
+    theme?: Theme;
+    className?: string;
+    height?: string | number;
+    placeholder?: string;
+    showHeader?: boolean;
+    headerTitle?: string;
+    onMessage?: (message: string) => void;
+}
+export declare const ChainAI: React.FC<ChainAIProps>;

package/dist/components/ChainAI.js

@@ -0,0 +1,89 @@
+"use strict";
+/**
+ * ChainAI - Main chat component (simplified from 2,556-line playground)
+ */
+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.ChainAI = 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 ChatInput_1 = require("./ChatInput");
+const ChatHeader_1 = require("./ChatHeader");
+const themes_1 = require("../styles/themes");
+require("../styles/default.css");
+const ChainAIInner = ({ conversationId, theme = themes_1.defaultTheme, className = '', height = '600px', placeholder = 'Ask me anything about blockchain...', showHeader = true, headerTitle = 'Chain AI', onMessage, }) => {
+    const { isReady, error: clientError } = (0, ChainAIProvider_1.useChainAI)();
+    const { messages, isLoading, error, sendMessage } = (0, useChat_1.useChat)(conversationId);
+    const messagesEndRef = (0, react_1.useRef)(null);
+    // Auto-scroll to bottom when new messages arrive
+    (0, react_1.useEffect)(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    const handleSend = async (text) => {
+        onMessage?.(text);
+        await sendMessage(text);
+    };
+    if (!isReady) {
+        return (react_1.default.createElement("div", { className: `chain-ai-container ${className}`, style: { height } },
+            react_1.default.createElement("div", { className: "chain-ai-loading" }, "Initializing Chain AI...")));
+    }
+    if (clientError) {
+        return (react_1.default.createElement("div", { className: `chain-ai-container ${className}`, style: { height } },
+            react_1.default.createElement("div", { className: "chain-ai-error" },
+                "Error: ",
+                clientError)));
+    }
+    return (react_1.default.createElement("div", { className: `chain-ai-container ${className}`, style: {
+            height,
+            backgroundColor: theme.colors.background,
+            color: theme.colors.text,
+        } },
+        showHeader && react_1.default.createElement(ChatHeader_1.ChatHeader, { title: headerTitle, theme: theme }),
+        react_1.default.createElement("div", { className: "chain-ai-messages" },
+            messages.length === 0 && (react_1.default.createElement("div", { className: "chain-ai-welcome" },
+                react_1.default.createElement("h2", null, "Welcome to Chain AI"),
+                react_1.default.createElement("p", null, "Ask me anything about blockchain operations"))),
+            messages.map((message) => (react_1.default.createElement(ChatMessage_1.ChatMessage, { key: message.id, message: message, theme: theme }))),
+            error && react_1.default.createElement("div", { className: "chain-ai-error" }, error),
+            react_1.default.createElement("div", { ref: messagesEndRef })),
+        react_1.default.createElement(ChatInput_1.ChatInput, { onSend: handleSend, placeholder: placeholder, disabled: isLoading, theme: theme })));
+};
+const ChainAI = ({ config, ...props }) => {
+    return (react_1.default.createElement(ChainAIProvider_1.ChainAIProvider, { config: config },
+        react_1.default.createElement(ChainAIInner, { ...props })));
+};
+exports.ChainAI = ChainAI;

package/dist/components/ChainAIWidget.d.ts

@@ -0,0 +1,86 @@
+/**
+ * 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)
+ */
+import React from 'react';
+import type { ChainAIConfig } from '@chainai/core';
+import type { Theme } from '../styles/themes';
+import '../styles/widget.css';
+/** Branding configuration for white-labeling */
+export interface BrandingConfig {
+    /** Company/product name shown in header */
+    name?: string;
+    /** Logo as image URL or React component */
+    logo?: string | React.ReactNode;
+    /** Avatar shown next to AI messages (URL or React component) */
+    avatar?: string | React.ReactNode;
+    /** Welcome screen title */
+    welcomeTitle?: string;
+    /** Welcome screen message */
+    welcomeMessage?: string;
+    /** Custom welcome screen content (replaces default) */
+    welcomeContent?: React.ReactNode;
+    /** Show "Powered by Chain AI" badge */
+    showPoweredBy?: boolean;
+    /** Custom FAB icon when closed */
+    fabIcon?: React.ReactNode;
+    /** Custom FAB icon when open */
+    fabIconOpen?: React.ReactNode;
+    /** Custom send button icon */
+    sendIcon?: React.ReactNode;
+    /** Custom header content (replaces default header) */
+    headerContent?: React.ReactNode;
+    /** Gradient colors for avatar background [start, end] */
+    avatarGradient?: [string, string];
+}
+/** Dimension configuration for the widget */
+export interface DimensionConfig {
+    /** FAB button size in pixels */
+    fabSize?: number;
+    /** Chat window width */
+    windowWidth?: number | string;
+    /** Chat window height */
+    windowHeight?: number | string;
+    /** Border radius for FAB */
+    fabBorderRadius?: number | string;
+    /** Border radius for window */
+    windowBorderRadius?: number | string;
+    /** Offset from edge (applies to position) */
+    offset?: number;
+}
+export interface ChainAIWidgetProps {
+    config: ChainAIConfig;
+    /** Branding/white-label configuration */
+    branding?: BrandingConfig;
+    /** Dimension/size configuration */
+    dimensions?: DimensionConfig;
+    /** Initial open state */
+    defaultOpen?: boolean;
+    /** Position of the widget */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Custom position (overrides position preset) */
+    customPosition?: {
+        top?: number | string;
+        right?: number | string;
+        bottom?: number | string;
+        left?: number | string;
+    };
+    /** Custom theme colors */
+    theme?: Partial<Theme>;
+    /** Additional CSS class for the container */
+    className?: string;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Z-index for the widget */
+    zIndex?: number;
+    /** Called when widget opens/closes */
+    onToggle?: (isOpen: boolean) => void;
+    /** Called when user sends a message */
+    onMessage?: (message: string) => void;
+}
+export declare const ChainAIWidget: React.FC<ChainAIWidgetProps>;