@chainai/react 1.0.2 → 1.0.3

package/dist/components/ChainAIWidget.js

@@ -99,7 +99,7 @@ const ChainAIWidgetInner = ({ wallets, activeChain, branding = {}, dimensions =
     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)();
+    const { messages, isLoading, loadingStage, loadingLabel, sendMessage } = (0, useChat_1.useChat)();
     // Merge custom theme with defaults
     const theme = {
         ...themes_1.defaultTheme,
@@ -231,12 +231,13 @@ const ChainAIWidgetInner = ({ wallets, activeChain, branding = {}, dimensions =
                     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" },
+                isLoading && loadingStage !== 'idle' && loadingStage !== 'complete' && (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)))),
+                    react_1.default.createElement("div", { className: "chain-ai-widget-loading-stage" },
+                        react_1.default.createElement("div", { className: "chain-ai-widget-loading-spinner" }),
+                        react_1.default.createElement("span", { className: "chain-ai-widget-loading-text" },
+                            loadingLabel,
+                            "...")))),
                 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" },

package/dist/hooks/useChat.d.ts

@@ -2,6 +2,7 @@
  * useChat hook - Manages chat messages and state
  */
 import type { Message, WalletContext } from '@chainai/core';
+export type LoadingStage = 'idle' | 'thinking' | 'analyzing' | 'generating' | 'complete';
 export interface SendMessageOptions {
     /** @deprecated Use walletContext instead */
     userContext?: any;
@@ -11,6 +12,8 @@ export interface SendMessageOptions {
 export interface UseChatReturn {
     messages: Message[];
     isLoading: boolean;
+    loadingStage: LoadingStage;
+    loadingLabel: string;
     error: string | null;
     /**
      * Send a message to the AI

package/dist/hooks/useChat.js

@@ -6,11 +6,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChat = void 0;
 const react_1 = require("react");
 const ChainAIProvider_1 = require("../context/ChainAIProvider");
+const LOADING_STAGES = [
+    { stage: 'thinking', label: 'Thinking', duration: 600 },
+    { stage: 'analyzing', label: 'Analyzing request', duration: 800 },
+    { stage: 'generating', label: 'Generating response', duration: 0 }, // stays until response
+];
 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 [loadingStage, setLoadingStage] = (0, react_1.useState)('idle');
+    const [loadingLabel, setLoadingLabel] = (0, react_1.useState)('');
     const [error, setError] = (0, react_1.useState)(null);
+    const stageTimeoutsRef = (0, react_1.useRef)([]);
+    const clearStageTimeouts = () => {
+        stageTimeoutsRef.current.forEach(clearTimeout);
+        stageTimeoutsRef.current = [];
+    };
+    const startLoadingStages = () => {
+        clearStageTimeouts();
+        let cumulativeDelay = 0;
+        LOADING_STAGES.forEach(({ stage, label, duration }) => {
+            const timeout = setTimeout(() => {
+                setLoadingStage(stage);
+                setLoadingLabel(label);
+            }, cumulativeDelay);
+            stageTimeoutsRef.current.push(timeout);
+            cumulativeDelay += duration;
+        });
+    };
+    const stopLoadingStages = () => {
+        clearStageTimeouts();
+        setLoadingStage('complete');
+        setLoadingLabel('');
+        // Reset to idle after a brief moment
+        setTimeout(() => {
+            setLoadingStage('idle');
+        }, 100);
+    };
     const sendMessage = (0, react_1.useCallback)(async (text, options) => {
         if (!client || !isReady) {
             setError('Client not ready');
@@ -26,8 +59,10 @@ const useChat = (conversationId) => {
         setMessages((prev) => [...prev, userMessage]);
         setIsLoading(true);
         setError(null);
+        startLoadingStages();
         try {
             let assistantResponse = '';
+            let hasReceivedContent = false;
             const assistantMessage = {
                 id: (Date.now() + 1).toString(),
                 role: 'assistant',
@@ -42,6 +77,11 @@ const useChat = (conversationId) => {
                 walletContext: options?.walletContext,
             }, {
                 onChunk: (chunk) => {
+                    // Once we receive content, stop showing loading stages
+                    if (!hasReceivedContent && chunk.length > 0) {
+                        hasReceivedContent = true;
+                        stopLoadingStages();
+                    }
                     assistantResponse += chunk;
                     setMessages((prev) => {
                         const updated = [...prev];
@@ -53,15 +93,18 @@ const useChat = (conversationId) => {
                     });
                 },
                 onDone: () => {
+                    stopLoadingStages();
                     setIsLoading(false);
                 },
                 onError: (err) => {
+                    stopLoadingStages();
                     setError(err);
                     setIsLoading(false);
                 },
             });
         }
         catch (err) {
+            stopLoadingStages();
             setError(err instanceof Error ? err.message : 'An error occurred');
             setIsLoading(false);
         }
@@ -69,10 +112,14 @@ const useChat = (conversationId) => {
     const clearMessages = (0, react_1.useCallback)(() => {
         setMessages([]);
         setError(null);
+        setLoadingStage('idle');
+        setLoadingLabel('');
     }, []);
     return {
         messages,
         isLoading,
+        loadingStage,
+        loadingLabel,
         error,
         sendMessage,
         clearMessages,

package/dist/index.d.ts

@@ -18,7 +18,7 @@ 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 type { UseChatReturn, LoadingStage } from './hooks/useChat';
 export { defaultTheme, darkTheme, lightTheme } from './styles/themes';
 export type { Theme } from './styles/themes';
 export type { ChainAIConfig, ResponseCustomization, ResponseStyle, ResponseLength, Message, WalletAddress, WalletContext, } from '@chainai/core';

package/dist/styles/default.css

@@ -85,6 +85,7 @@
   line-height: 1.5;
   white-space: pre-wrap;
   word-wrap: break-word;
+  text-align: left;
 }
 
 .chain-ai-message-timestamp {

package/dist/styles/widget.css

@@ -278,6 +278,43 @@
   40% { transform: scale(1); opacity: 1; }
 }
 
+/* Loading Stage Indicator */
+.chain-ai-widget-loading-stage {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+  border-radius: 16px;
+  border-bottom-left-radius: 4px;
+  color: var(--chain-ai-assistant-text, #6b7280);
+  font-size: 13px;
+}
+
+.chain-ai-widget-loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--chain-ai-border, #e5e7eb);
+  border-top-color: var(--chain-ai-primary, #3b82f6);
+  border-radius: 50%;
+  animation: chain-ai-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes chain-ai-spin {
+  to { transform: rotate(360deg); }
+}
+
+.chain-ai-widget-loading-text {
+  display: flex;
+  align-items: center;
+}
+
+/* Message content alignment */
+.chain-ai-widget-message-bubble .chain-ai-message {
+  text-align: left;
+}
+
 /* Input Area */
 .chain-ai-widget-input-area {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chainai/react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React components for Chain AI - Embeddable blockchain AI assistant widget",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -44,7 +44,7 @@
   "author": "Chain AI",
   "license": "MIT",
   "dependencies": {
-    "@chainai/core": "^1.0.2"
+    "@chainai/core": "^1.0.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

package/styles/default.css

@@ -85,6 +85,7 @@
   line-height: 1.5;
   white-space: pre-wrap;
   word-wrap: break-word;
+  text-align: left;
 }
 
 .chain-ai-message-timestamp {

package/styles/widget.css

@@ -278,6 +278,43 @@
   40% { transform: scale(1); opacity: 1; }
 }
 
+/* Loading Stage Indicator */
+.chain-ai-widget-loading-stage {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--chain-ai-assistant-bg, #f3f4f6);
+  border-radius: 16px;
+  border-bottom-left-radius: 4px;
+  color: var(--chain-ai-assistant-text, #6b7280);
+  font-size: 13px;
+}
+
+.chain-ai-widget-loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--chain-ai-border, #e5e7eb);
+  border-top-color: var(--chain-ai-primary, #3b82f6);
+  border-radius: 50%;
+  animation: chain-ai-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes chain-ai-spin {
+  to { transform: rotate(360deg); }
+}
+
+.chain-ai-widget-loading-text {
+  display: flex;
+  align-items: center;
+}
+
+/* Message content alignment */
+.chain-ai-widget-message-bubble .chain-ai-message {
+  text-align: left;
+}
+
 /* Input Area */
 .chain-ai-widget-input-area {
   display: flex;