@chainai/react 1.0.0 → 1.0.2

package/README.md

@@ -1,17 +1,17 @@
-# @chain-ai/react
+# @chainai/react
 
 React components for Chain AI - Embeddable blockchain AI assistant.
 
 ## Installation
 
 ```bash
-npm install @chain-ai/react @chain-ai/core
+npm install @chainai/react @chainai/core
 ```
 
 ## Quick Start
 
 ```typescript
-import { ChainAI } from '@chain-ai/react';
+import { ChainAI } from '@chainai/react';
 
 function App() {
   return (
@@ -38,7 +38,7 @@ function App() {
 ### Standalone Component
 
 ```typescript
-import { ChainAI } from '@chain-ai/react';
+import { ChainAI } from '@chainai/react';
 
 function App() {
   return (
@@ -61,7 +61,7 @@ function App() {
 ### Advanced Usage with Provider
 
 ```typescript
-import { ChainAIProvider, useChainAI, useChat } from '@chain-ai/react';
+import { ChainAIProvider, useChainAI, useChat } from '@chainai/react';
 
 function App() {
   return (
@@ -112,7 +112,7 @@ function MyCustomChat() {
 ### Built-in Themes
 
 ```typescript
-import { ChainAI, darkTheme, lightTheme } from '@chain-ai/react';
+import { ChainAI, darkTheme, lightTheme } from '@chainai/react';
 
 // Dark theme
 <ChainAI config={config} theme={darkTheme} />
@@ -124,7 +124,7 @@ import { ChainAI, darkTheme, lightTheme } from '@chain-ai/react';
 ### Custom Theme
 
 ```typescript
-import { ChainAI, Theme } from '@chain-ai/react';
+import { ChainAI, Theme } from '@chainai/react';
 
 const customTheme: Theme = {
   colors: {
@@ -187,7 +187,7 @@ import {
   ChatHeader,
   useChat,
   defaultTheme,
-} from '@chain-ai/react';
+} from '@chainai/react';
 
 function CustomLayout() {
   const { messages, sendMessage, isLoading } = useChat();
@@ -219,7 +219,7 @@ import type {
   Message,
   ChainAIConfig,
   ResponseCustomization,
-} from '@chain-ai/react';
+} from '@chainai/react';
 ```
 
 ## License

package/dist/components/ChainAIWidget.d.ts

@@ -8,7 +8,7 @@
  * - Works in any context (web, extension, mobile)
  */
 import React from 'react';
-import type { ChainAIConfig } from '@chainai/core';
+import type { ChainAIConfig, WalletAddress } from '@chainai/core';
 import type { Theme } from '../styles/themes';
 import '../styles/widget.css';
 /** Branding configuration for white-labeling */
@@ -55,6 +55,27 @@ export interface DimensionConfig {
 }
 export interface ChainAIWidgetProps {
     config: ChainAIConfig;
+    /**
+     * Connected wallet addresses - passed with every request so the AI knows
+     * the user's wallets for balance checks, transaction history, etc.
+     *
+     * @example
+     * ```tsx
+     * const { address } = useAccount(); // wagmi
+     * const { publicKey } = useWallet(); // solana
+     *
+     * <ChainAIWidget
+     *   config={{ apiKey: 'xxx' }}
+     *   wallets={[
+     *     { chain: 'ethereum', address: address },
+     *     { chain: 'solana', address: publicKey?.toString() },
+     *   ]}
+     * />
+     * ```
+     */
+    wallets?: WalletAddress[];
+    /** Currently active chain (optional, for context) */
+    activeChain?: string;
     /** Branding/white-label configuration */
     branding?: BrandingConfig;
     /** Dimension/size configuration */

package/dist/components/ChainAIWidget.js

@@ -92,7 +92,7 @@ const Logo = ({ branding }) => {
     // 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 ChainAIWidgetInner = ({ wallets, activeChain, 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);
@@ -166,7 +166,13 @@ const ChainAIWidgetInner = ({ branding = {}, dimensions = {}, defaultOpen = fals
         const text = input;
         setInput('');
         onMessage?.(text);
-        await sendMessage(text);
+        // Include wallet context with every request
+        const walletContext = wallets?.length ? {
+            wallets,
+            activeChain,
+            activeAddress: wallets.find(w => w.isPrimary)?.address || wallets[0]?.address,
+        } : undefined;
+        await sendMessage(text, { walletContext });
     };
     const handleKeyDown = (e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
@@ -175,7 +181,12 @@ const ChainAIWidgetInner = ({ branding = {}, dimensions = {}, defaultOpen = fals
         }
     };
     const handleActionFieldSubmit = (field, value) => {
-        sendMessage(`${field}: ${value}`);
+        const walletContext = wallets?.length ? {
+            wallets,
+            activeChain,
+            activeAddress: wallets.find(w => w.isPrimary)?.address || wallets[0]?.address,
+        } : undefined;
+        sendMessage(`${field}: ${value}`, { walletContext });
         setPendingAction(null);
     };
     // CSS custom properties for theming and dimensions

package/dist/context/ChainAIProvider.d.ts

@@ -3,13 +3,18 @@
  */
 import React, { ReactNode } from 'react';
 import { ChainAIClient } from '@chainai/core';
-import type { ChainAIConfig, ResponseCustomization } from '@chainai/core';
+import type { ChainAIConfig, ResponseCustomization, WalletProvider } from '@chainai/core';
 export interface ChainAIContextValue {
     client: ChainAIClient | null;
     isReady: boolean;
     error: string | null;
     customization: ResponseCustomization | null;
     updateCustomization: (customization: Partial<ResponseCustomization>) => Promise<void>;
+    /**
+     * Set or update the wallet provider function
+     * This allows dynamic updates when wallets connect/disconnect
+     */
+    setWalletProvider: (provider: WalletProvider) => void;
 }
 export interface ChainAIProviderProps {
     config: ChainAIConfig;

package/dist/context/ChainAIProvider.js

@@ -75,12 +75,18 @@ const ChainAIProvider = ({ config, children }) => {
         const updated = await client.getCustomization();
         setCustomization(updated);
     };
+    const setWalletProvider = (0, react_1.useCallback)((provider) => {
+        if (client) {
+            client.setWalletProvider(provider);
+        }
+    }, [client]);
     const value = {
         client,
         isReady,
         error,
         customization,
         updateCustomization,
+        setWalletProvider,
     };
     return react_1.default.createElement(ChainAIContext.Provider, { value: value }, children);
 };

package/dist/hooks/useChat.d.ts

@@ -1,12 +1,23 @@
 /**
  * useChat hook - Manages chat messages and state
  */
-import type { Message } from '@chainai/core';
+import type { Message, WalletContext } from '@chainai/core';
+export interface SendMessageOptions {
+    /** @deprecated Use walletContext instead */
+    userContext?: any;
+    /** Override wallet context for this specific request */
+    walletContext?: WalletContext;
+}
 export interface UseChatReturn {
     messages: Message[];
     isLoading: boolean;
     error: string | null;
-    sendMessage: (text: string, userContext?: any) => Promise<void>;
+    /**
+     * Send a message to the AI
+     * Wallet context is automatically included from the walletProvider in config.
+     * You can optionally override it by passing walletContext in options.
+     */
+    sendMessage: (text: string, options?: SendMessageOptions) => Promise<void>;
     clearMessages: () => void;
 }
 export declare const useChat: (conversationId?: string) => UseChatReturn;

package/dist/hooks/useChat.js

@@ -11,7 +11,7 @@ const useChat = (conversationId) => {
     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) => {
+    const sendMessage = (0, react_1.useCallback)(async (text, options) => {
         if (!client || !isReady) {
             setError('Client not ready');
             return;
@@ -38,7 +38,8 @@ const useChat = (conversationId) => {
             await client.streamChat({
                 text,
                 conversationId: conversationId || 'default',
-                userContext,
+                userContext: options?.userContext,
+                walletContext: options?.walletContext,
             }, {
                 onChunk: (chunk) => {
                     assistantResponse += chunk;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @chain-ai/react - React components for Chain AI
+ * @chainai/react - React components for Chain AI
  *
  * Embeddable blockchain AI assistant components
  */
@@ -21,4 +21,4 @@ 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';
+export type { ChainAIConfig, ResponseCustomization, ResponseStyle, ResponseLength, Message, WalletAddress, WalletContext, } from '@chainai/core';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * @chain-ai/react - React components for Chain AI
+ * @chainai/react - React components for Chain AI
  *
  * Embeddable blockchain AI assistant components
  */

package/dist/styles/default.css

@@ -0,0 +1,156 @@
+/* Chain AI Default Styles */
+
+.chain-ai-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.chain-ai-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid;
+}
+
+.chain-ai-header-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.chain-ai-header-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chain-ai-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chain-ai-welcome {
+  text-align: center;
+  padding: 48px 16px;
+  color: #6b7280;
+}
+
+.chain-ai-welcome h2 {
+  margin: 0 0 8px 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: inherit;
+}
+
+.chain-ai-welcome p {
+  margin: 0;
+  font-size: 16px;
+}
+
+.chain-ai-message {
+  max-width: 80%;
+  padding: 12px 16px;
+  border-radius: 8px;
+  position: relative;
+}
+
+.chain-ai-message-user {
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.chain-ai-message-assistant {
+  align-self: flex-start;
+  margin-right: auto;
+}
+
+.chain-ai-message-content {
+  margin: 0;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.chain-ai-message-timestamp {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+}
+
+.chain-ai-input-container {
+  display: flex;
+  gap: 8px;
+  padding: 16px;
+  border-top: 1px solid;
+}
+
+.chain-ai-input {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+}
+
+.chain-ai-input:focus {
+  border-color: #3b82f6;
+}
+
+.chain-ai-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.chain-ai-send-button {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.chain-ai-send-button:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.chain-ai-send-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.chain-ai-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.chain-ai-error {
+  padding: 12px;
+  background-color: #fee2e2;
+  color: #dc2626;
+  border-radius: 6px;
+  margin: 8px 0;
+  font-size: 14px;
+}

package/dist/styles/widget.css

@@ -0,0 +1,531 @@
+/**
+ * Chain AI Widget Styles
+ *
+ * CSS Variables for theming:
+ * --chain-ai-primary: Primary brand color
+ * --chain-ai-primary-text: Text on primary color
+ * --chain-ai-bg: Background color
+ * --chain-ai-text: Main text color
+ * --chain-ai-border: Border color
+ * --chain-ai-user-bg: User message background
+ * --chain-ai-user-text: User message text
+ * --chain-ai-assistant-bg: Assistant message background
+ * --chain-ai-assistant-text: Assistant message text
+ * --chain-ai-font: Font family
+ *
+ * CSS Variables for dimensions:
+ * --chain-ai-fab-size: FAB button size (default: 56px)
+ * --chain-ai-fab-radius: FAB border radius (default: 50%)
+ * --chain-ai-window-width: Chat window width (default: 380px)
+ * --chain-ai-window-height: Chat window height (default: 520px)
+ * --chain-ai-window-radius: Chat window border radius (default: 16px)
+ * --chain-ai-avatar-gradient: Avatar gradient background
+ */
+
+/* Reset and base */
+.chain-ai-widget,
+.chain-ai-widget * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.chain-ai-widget {
+  position: fixed;
+  font-family: var(--chain-ai-font, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Floating Action Button */
+.chain-ai-widget-fab {
+  width: var(--chain-ai-fab-size, 56px);
+  height: var(--chain-ai-fab-size, 56px);
+  border-radius: var(--chain-ai-fab-radius, 50%);
+  border: none;
+  background: var(--chain-ai-primary, #3b82f6);
+  color: var(--chain-ai-primary-text, #ffffff);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.chain-ai-widget-fab:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.chain-ai-widget-fab:active {
+  transform: scale(0.95);
+}
+
+.chain-ai-widget-fab-open {
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+  color: var(--chain-ai-text, #1f2937);
+}
+
+/* Chat Window */
+.chain-ai-widget-window {
+  position: absolute;
+  bottom: calc(var(--chain-ai-fab-size, 56px) + 14px);
+  right: 0;
+  width: var(--chain-ai-window-width, 380px);
+  max-width: calc(100vw - 40px);
+  height: var(--chain-ai-window-height, 520px);
+  max-height: calc(100vh - 100px);
+  background: var(--chain-ai-bg, #ffffff);
+  border-radius: var(--chain-ai-window-radius, 16px);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: chain-ai-slide-up 0.2s ease;
+}
+
+@keyframes chain-ai-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Header */
+.chain-ai-widget-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: var(--chain-ai-bg, #ffffff);
+  border-bottom: 1px solid var(--chain-ai-border, #e5e7eb);
+}
+
+.chain-ai-widget-header-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chain-ai-widget-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--chain-ai-primary, #3b82f6), #8b5cf6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex-shrink: 0;
+}
+
+.chain-ai-widget-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--chain-ai-text, #1f2937);
+}
+
+.chain-ai-widget-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--chain-ai-text, #6b7280);
+  transition: background 0.15s;
+}
+
+.chain-ai-widget-close:hover {
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+}
+
+/* Messages Area */
+.chain-ai-widget-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  scroll-behavior: smooth;
+}
+
+.chain-ai-widget-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chain-ai-widget-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chain-ai-widget-messages::-webkit-scrollbar-thumb {
+  background: var(--chain-ai-border, #e5e7eb);
+  border-radius: 3px;
+}
+
+/* Welcome Screen */
+.chain-ai-widget-welcome {
+  text-align: center;
+  padding: 32px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.chain-ai-widget-welcome .chain-ai-widget-avatar {
+  width: 48px;
+  height: 48px;
+}
+
+.chain-ai-widget-welcome h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--chain-ai-text, #1f2937);
+  margin: 0;
+}
+
+.chain-ai-widget-welcome p {
+  color: #6b7280;
+  font-size: 14px;
+  max-width: 280px;
+  margin: 0;
+}
+
+/* Message Bubbles */
+.chain-ai-widget-message {
+  display: flex;
+  gap: 8px;
+  max-width: 90%;
+}
+
+.chain-ai-widget-message-user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.chain-ai-widget-message-assistant {
+  align-self: flex-start;
+}
+
+.chain-ai-widget-message-assistant .chain-ai-widget-avatar {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+}
+
+.chain-ai-widget-message-bubble {
+  flex: 1;
+}
+
+.chain-ai-widget-message-bubble .chain-ai-message {
+  max-width: 100%;
+  border-radius: 16px;
+  padding: 10px 14px;
+}
+
+.chain-ai-widget-message-user .chain-ai-message {
+  background: var(--chain-ai-user-bg, #3b82f6);
+  color: var(--chain-ai-user-text, #ffffff);
+  border-bottom-right-radius: 4px;
+}
+
+.chain-ai-widget-message-assistant .chain-ai-message {
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+  color: var(--chain-ai-assistant-text, #1f2937);
+  border-bottom-left-radius: 4px;
+}
+
+.chain-ai-widget-message-bubble .chain-ai-message-timestamp {
+  display: none;
+}
+
+/* Typing Indicator */
+.chain-ai-widget-typing {
+  display: flex;
+  gap: 4px;
+  padding: 12px 16px;
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+  border-radius: 16px;
+  border-bottom-left-radius: 4px;
+}
+
+.chain-ai-widget-typing span {
+  width: 8px;
+  height: 8px;
+  background: #9ca3af;
+  border-radius: 50%;
+  animation: chain-ai-bounce 1.4s infinite ease-in-out both;
+}
+
+.chain-ai-widget-typing span:nth-child(1) { animation-delay: -0.32s; }
+.chain-ai-widget-typing span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes chain-ai-bounce {
+  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Input Area */
+.chain-ai-widget-input-area {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--chain-ai-bg, #ffffff);
+  border-top: 1px solid var(--chain-ai-border, #e5e7eb);
+}
+
+.chain-ai-widget-input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--chain-ai-border, #e5e7eb);
+  border-radius: 24px;
+  font-size: 14px;
+  background: var(--chain-ai-bg, #ffffff);
+  color: var(--chain-ai-text, #1f2937);
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.chain-ai-widget-input:focus {
+  border-color: var(--chain-ai-primary, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.chain-ai-widget-input::placeholder {
+  color: #9ca3af;
+}
+
+.chain-ai-widget-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.chain-ai-widget-send {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: var(--chain-ai-primary, #3b82f6);
+  color: var(--chain-ai-primary-text, #ffffff);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.chain-ai-widget-send:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+
+.chain-ai-widget-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Action Prompt */
+.chain-ai-action-prompt {
+  background: var(--chain-ai-bg, #ffffff);
+  border: 1px solid var(--chain-ai-border, #e5e7eb);
+  border-radius: 12px;
+  padding: 16px;
+  margin-top: 8px;
+}
+
+.chain-ai-action-prompt-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.chain-ai-action-prompt-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: rgba(59, 130, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chain-ai-action-prompt-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.chain-ai-action-prompt-action {
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  color: var(--chain-ai-primary, #3b82f6);
+}
+
+.chain-ai-action-prompt-label {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.chain-ai-action-prompt-message {
+  font-size: 14px;
+  color: var(--chain-ai-text, #1f2937);
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+.chain-ai-action-prompt-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chain-ai-action-prompt-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chain-ai-action-prompt-field-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.chain-ai-action-prompt-quick-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.chain-ai-action-prompt-quick-btn {
+  padding: 6px 12px;
+  border: 1px solid var(--chain-ai-border, #e5e7eb);
+  border-radius: 16px;
+  background: transparent;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.chain-ai-action-prompt-quick-btn:hover {
+  border-color: var(--chain-ai-primary, #3b82f6);
+  color: var(--chain-ai-primary, #3b82f6);
+}
+
+.chain-ai-action-prompt-input {
+  padding: 10px 12px;
+  border: 1px solid var(--chain-ai-border, #e5e7eb);
+  border-radius: 8px;
+  font-size: 14px;
+  background: var(--chain-ai-bg, #ffffff);
+  color: var(--chain-ai-text, #1f2937);
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.chain-ai-action-prompt-input:focus {
+  border-color: var(--chain-ai-primary, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.chain-ai-action-prompt-input::placeholder {
+  color: #9ca3af;
+}
+
+.chain-ai-action-prompt-submit {
+  padding: 12px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  margin-top: 4px;
+}
+
+.chain-ai-action-prompt-submit:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.chain-ai-action-prompt-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Dark mode support via data attribute or class */
+.chain-ai-widget[data-theme="dark"],
+.chain-ai-widget.dark {
+  --chain-ai-bg: #1f2937;
+  --chain-ai-text: #f9fafb;
+  --chain-ai-border: #374151;
+  --chain-ai-assistant-bg: #374151;
+  --chain-ai-assistant-text: #f9fafb;
+}
+
+/* Mobile responsive */
+@media (max-width: 480px) {
+  .chain-ai-widget-window {
+    width: calc(100vw - 20px);
+    height: calc(100vh - 100px);
+    bottom: calc(var(--chain-ai-fab-size, 56px) + 14px);
+    right: -10px;
+    border-radius: var(--chain-ai-window-radius, 12px);
+  }
+}
+
+/* Logo in header */
+.chain-ai-widget-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chain-ai-widget-logo img {
+  max-height: 28px;
+  width: auto;
+}
+
+/* Powered by badge */
+.chain-ai-widget-powered-by {
+  padding: 8px 16px;
+  text-align: center;
+  font-size: 11px;
+  color: #9ca3af;
+  border-top: 1px solid var(--chain-ai-border, #e5e7eb);
+  background: var(--chain-ai-bg, #ffffff);
+}
+
+.chain-ai-widget-powered-by a {
+  color: var(--chain-ai-primary, #3b82f6);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.chain-ai-widget-powered-by a:hover {
+  text-decoration: underline;
+}
+
+/* Custom header support */
+.chain-ai-widget-header-custom {
+  padding: 12px 16px;
+}
+
+/* Custom welcome support */
+.chain-ai-widget-welcome-custom {
+  padding: 16px;
+}

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@chainai/react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React components for Chain AI - Embeddable blockchain AI assistant widget",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "sideEffects": [
     "**/*.css"
@@ -23,7 +22,7 @@
   },
   "scripts": {
     "build": "tsc && npm run copy-styles",
-    "copy-styles": "mkdir -p styles && cp src/styles/*.css styles/",
+    "copy-styles": "mkdir -p styles && cp src/styles/*.css styles/ && mkdir -p dist/styles && cp src/styles/*.css dist/styles/",
     "dev": "tsc --watch",
     "test": "jest",
     "lint": "eslint src --ext .ts,.tsx",
@@ -45,7 +44,7 @@
   "author": "Chain AI",
   "license": "MIT",
   "dependencies": {
-    "@chainai/core": "^1.0.0"
+    "@chainai/core": "^1.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",