@usecrow/ui 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,203 +1,1179 @@
-import { createContext, useRef, useEffect, useMemo, useContext, useState, useCallback } from 'react';
-import { CrowClient } from '@usecrow/client';
+import React3, { createContext, forwardRef, useRef, useCallback, useEffect, useContext, useState, useMemo, useLayoutEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
+import { Square, ArrowUp, ChevronDown, Check, MessageCircle, Plus, History, ChevronUp, Brain, ChevronRight, Loader2, X } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { CrowClient } from '@usecrow/client';
 
-var CrowContext = createContext(null);
-function CrowProvider({
-  children,
+// src/utils.ts
+var cn = (...classes) => classes.filter(Boolean).join(" ");
+var formatTime = (date) => date.toLocaleTimeString("en-US", {
+  hour: "numeric",
+  minute: "2-digit"
+});
+var formatConversationDate = (dateStr) => {
+  const date = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const diffDays = Math.floor(
+    (now.getTime() - date.getTime()) / (1e3 * 60 * 60 * 24)
+  );
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return `${diffDays} days ago`;
+  return date.toLocaleDateString();
+};
+var generateMessageId = (prefix) => `${prefix}-${Date.now()}`;
+
+// src/constants.ts
+var AVAILABLE_MODELS = [
+  { id: "gpt-4o", name: "GPT-4o", provider: "OpenAI" },
+  { id: "gpt-5-mini", name: "GPT-5 Mini", provider: "OpenAI" },
+  { id: "gpt-5.2", name: "GPT-5.2", provider: "OpenAI" },
+  { id: "gpt-5.2-pro", name: "GPT-5.2 Pro", provider: "OpenAI" },
+  { id: "claude-haiku-4-5-20251001", name: "Haiku 4.5", provider: "Anthropic" },
+  { id: "claude-sonnet-4-5-20250929", name: "Sonnet 4.5", provider: "Anthropic" },
+  { id: "claude-opus-4-5-20251203", name: "Opus 4.5", provider: "Anthropic" }
+];
+var DEFAULT_MODEL = "claude-sonnet-4-5-20250929";
+var DEFAULT_WELCOME_MESSAGE = "Hi! How can I help you today?";
+var MESSAGES_CONTAINER_ID = "crow-messages-container";
+
+// src/hooks/useChat.ts
+var getConversationStorageKey = (productId) => `crow_conv_${productId}`;
+function useChat({
   productId,
-  apiUrl,
-  model
+  apiUrl = "",
+  onVerificationStatus,
+  onConversationId,
+  onWorkflowEvent,
+  onToolCall,
+  onRestoredConversation
 }) {
-  const clientRef = useRef(null);
-  if (!clientRef.current) {
-    clientRef.current = new CrowClient({ productId, apiUrl, model });
-  }
-  const client = clientRef.current;
+  const [messages, setMessages] = useState([
+    {
+      id: "welcome",
+      content: DEFAULT_WELCOME_MESSAGE,
+      isBot: true,
+      timestamp: /* @__PURE__ */ new Date()
+    }
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [activeToolCalls, setActiveToolCalls] = useState([]);
+  const [conversationId, setConversationId] = useState(() => {
+    try {
+      return localStorage.getItem(getConversationStorageKey(productId));
+    } catch {
+      return null;
+    }
+  });
+  const [selectedModel, setSelectedModel] = useState(DEFAULT_MODEL);
+  const abortControllerRef = useRef(null);
+  const hasRestoredRef = useRef(false);
   useEffect(() => {
-    return () => {
-      client.destroy();
-    };
-  }, [client]);
-  const value = useMemo(() => ({ client }), [client]);
-  return /* @__PURE__ */ jsx(CrowContext.Provider, { value, children });
+    if (conversationId && onRestoredConversation && !hasRestoredRef.current) {
+      hasRestoredRef.current = true;
+      onRestoredConversation(conversationId);
+    }
+  }, []);
+  const streamFromBackend = useCallback(
+    async (message, botMsgId) => {
+      let accumulatedText = "";
+      let firstChunk = true;
+      abortControllerRef.current = new AbortController();
+      try {
+        const identityToken = window.__crow_identity_token;
+        const response = await fetch(`${apiUrl}/api/chat/message`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            product_id: productId,
+            message,
+            conversation_id: conversationId,
+            identity_token: identityToken,
+            model: selectedModel
+          }),
+          signal: abortControllerRef.current.signal
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+        if (reader) {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value);
+            const lines = chunk.split("\n");
+            for (const line of lines) {
+              if (line.startsWith("data: ")) {
+                const data = line.slice(6).trim();
+                if (data === "[DONE]") {
+                  setIsLoading(false);
+                  return;
+                }
+                try {
+                  const parsed = JSON.parse(data);
+                  switch (parsed.type) {
+                    case "verification_status":
+                      onVerificationStatus?.(parsed.is_verified === true);
+                      break;
+                    case "conversation_id":
+                      if (parsed.conversation_id) {
+                        setConversationId(parsed.conversation_id);
+                        try {
+                          localStorage.setItem(
+                            getConversationStorageKey(productId),
+                            parsed.conversation_id
+                          );
+                        } catch {
+                        }
+                        onConversationId?.(parsed.conversation_id);
+                      }
+                      break;
+                    case "thinking":
+                      if (parsed.status === "complete") {
+                        setMessages(
+                          (prev) => prev.map(
+                            (msg) => msg.id === botMsgId ? { ...msg, thinkingComplete: true } : msg
+                          )
+                        );
+                      }
+                      break;
+                    case "thinking_token":
+                      if (parsed.content) {
+                        setMessages(
+                          (prev) => prev.map(
+                            (msg) => msg.id === botMsgId ? { ...msg, thinking: (msg.thinking || "") + parsed.content } : msg
+                          )
+                        );
+                      }
+                      break;
+                    case "content":
+                      if (firstChunk) firstChunk = false;
+                      accumulatedText += parsed.content;
+                      setMessages(
+                        (prev) => prev.map(
+                          (msg) => msg.id === botMsgId ? { ...msg, content: accumulatedText } : msg
+                        )
+                      );
+                      break;
+                    case "citations":
+                      if (parsed.citations) {
+                        setMessages(
+                          (prev) => prev.map(
+                            (msg) => msg.id === botMsgId ? { ...msg, citations: parsed.citations } : msg
+                          )
+                        );
+                      }
+                      break;
+                    case "error":
+                      if (parsed.message) {
+                        setMessages(
+                          (prev) => prev.map(
+                            (msg) => msg.id === botMsgId ? { ...msg, content: parsed.message } : msg
+                          )
+                        );
+                      }
+                      break;
+                    case "tool_call_start":
+                      onToolCall?.({
+                        type: "start",
+                        toolName: parsed.tool_name,
+                        arguments: parsed.arguments
+                      });
+                      setActiveToolCalls((prev) => [
+                        ...prev,
+                        {
+                          id: `tool-${Date.now()}`,
+                          name: parsed.tool_name,
+                          arguments: parsed.arguments || {},
+                          status: "executing",
+                          timestamp: /* @__PURE__ */ new Date()
+                        }
+                      ]);
+                      break;
+                    case "tool_call_complete":
+                      onToolCall?.({
+                        type: "complete",
+                        toolName: parsed.tool_name,
+                        success: parsed.success
+                      });
+                      setActiveToolCalls(
+                        (prev) => prev.map(
+                          (tool) => tool.name === parsed.tool_name ? { ...tool, status: parsed.success ? "complete" : "error" } : tool
+                        )
+                      );
+                      break;
+                    case "client_tool_call":
+                      onToolCall?.({
+                        type: "client_call",
+                        toolName: parsed.tool_name,
+                        arguments: parsed.arguments
+                      });
+                      break;
+                    case "workflow_started":
+                      onWorkflowEvent?.({
+                        type: "started",
+                        name: parsed.name,
+                        todos: parsed.todos
+                      });
+                      break;
+                    case "todo_updated":
+                      onWorkflowEvent?.({
+                        type: "todo_updated",
+                        todoId: parsed.id,
+                        todoStatus: parsed.status
+                      });
+                      break;
+                    case "workflow_ended":
+                      onWorkflowEvent?.({ type: "ended" });
+                      break;
+                    case "workflow_complete_prompt":
+                      onWorkflowEvent?.({ type: "complete_prompt" });
+                      break;
+                  }
+                } catch (e) {
+                  console.error("[Crow] Parse error:", e);
+                }
+              }
+            }
+          }
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          if (accumulatedText) {
+            setMessages(
+              (prev) => prev.map(
+                (msg) => msg.id === botMsgId ? { ...msg, content: accumulatedText } : msg
+              )
+            );
+          } else {
+            setMessages((prev) => prev.filter((msg) => msg.id !== botMsgId));
+          }
+          return;
+        }
+        console.error("[Crow] Error:", error);
+        setMessages(
+          (prev) => prev.map(
+            (msg) => msg.id === botMsgId ? { ...msg, content: "Sorry, I encountered an error. Please try again." } : msg
+          )
+        );
+      } finally {
+        setIsLoading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [apiUrl, productId, conversationId, selectedModel, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall]
+  );
+  const sendMessage = useCallback(
+    (content) => {
+      if (!content.trim()) {
+        return { userMsgId: "", botMsgId: "" };
+      }
+      setActiveToolCalls([]);
+      const userMsgId = generateMessageId("user");
+      const botMsgId = generateMessageId("bot");
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: userMsgId,
+          content,
+          isBot: false,
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+      setIsLoading(true);
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: botMsgId,
+          content: "Thinking...",
+          isBot: true,
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+      streamFromBackend(content, botMsgId);
+      return { userMsgId, botMsgId };
+    },
+    [streamFromBackend]
+  );
+  const stopGeneration = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setIsLoading(false);
+    }
+  }, []);
+  const resetMessages = useCallback(() => {
+    setMessages([
+      {
+        id: "welcome",
+        content: DEFAULT_WELCOME_MESSAGE,
+        isBot: true,
+        timestamp: /* @__PURE__ */ new Date()
+      }
+    ]);
+    setConversationId(null);
+    try {
+      localStorage.removeItem(getConversationStorageKey(productId));
+    } catch {
+    }
+  }, [productId]);
+  const loadMessages = useCallback((historyMessages) => {
+    setMessages(historyMessages);
+  }, []);
+  return {
+    messages,
+    isLoading,
+    activeToolCalls,
+    conversationId,
+    selectedModel,
+    setSelectedModel,
+    setConversationId,
+    sendMessage,
+    stopGeneration,
+    resetMessages,
+    loadMessages
+  };
 }
-function useCrowClient() {
-  const context = useContext(CrowContext);
-  if (!context) {
-    throw new Error("useCrowClient must be used within a CrowProvider");
-  }
-  return context.client;
+function useConversations({ productId, apiUrl = "" }) {
+  const [conversations, setConversations] = useState([]);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const loadConversations = useCallback(async () => {
+    const token = window.__crow_identity_token;
+    if (!token) return;
+    try {
+      const res = await fetch(
+        `${apiUrl}/api/chat/conversations?product_id=${productId}&identity_token=${encodeURIComponent(token)}`
+      );
+      if (res.ok) {
+        const data = await res.json();
+        setConversations(data.conversations || []);
+      }
+    } catch (error) {
+      console.error("[Crow] Failed to load conversations:", error);
+    }
+  }, [apiUrl, productId]);
+  const loadConversationHistory = useCallback(
+    async (conversationId) => {
+      const token = window.__crow_identity_token;
+      if (!token) return [];
+      setIsLoadingHistory(true);
+      try {
+        const res = await fetch(
+          `${apiUrl}/api/chat/conversations/${conversationId}/history?product_id=${productId}&identity_token=${encodeURIComponent(token)}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          const historyMessages = data.messages || [];
+          return historyMessages.map(
+            (msg, idx) => ({
+              id: `history-${idx}`,
+              content: msg.content,
+              isBot: msg.role === "assistant",
+              timestamp: /* @__PURE__ */ new Date()
+            })
+          );
+        }
+      } catch (error) {
+        console.error("[Crow] Error loading conversation history:", error);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+      return [];
+    },
+    [apiUrl, productId]
+  );
+  const loadAnonymousConversationHistory = useCallback(
+    async (conversationId) => {
+      setIsLoadingHistory(true);
+      try {
+        const res = await fetch(
+          `${apiUrl}/api/chat/conversations/${conversationId}/history/anonymous?product_id=${productId}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          const historyMessages = data.messages || [];
+          return historyMessages.map(
+            (msg, idx) => ({
+              id: `history-${idx}`,
+              content: msg.content,
+              isBot: msg.role === "assistant",
+              timestamp: /* @__PURE__ */ new Date()
+            })
+          );
+        }
+      } catch (error) {
+        console.error("[Crow] Error loading anonymous conversation history:", error);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+      return [];
+    },
+    [apiUrl, productId]
+  );
+  return {
+    conversations,
+    isLoadingHistory,
+    loadConversations,
+    loadConversationHistory,
+    loadAnonymousConversationHistory
+  };
 }
-function useCrowClientOptional() {
-  const context = useContext(CrowContext);
-  return context?.client ?? null;
+function useWorkflow({
+  productId,
+  apiUrl = "",
+  conversationId,
+  selectedModel,
+  onMessage
+}) {
+  const [activeWorkflow, setActiveWorkflow] = useState(null);
+  const abortControllerRef = useRef(null);
+  const startWorkflow = useCallback((name, todos) => {
+    setActiveWorkflow({ name, todos });
+  }, []);
+  const updateTodo = useCallback((todoId, status) => {
+    setActiveWorkflow((prev) => {
+      if (!prev) return null;
+      return {
+        ...prev,
+        todos: prev.todos.map(
+          (todo) => todo.id === todoId ? { ...todo, status } : todo
+        )
+      };
+    });
+  }, []);
+  const markComplete = useCallback(() => {
+    setActiveWorkflow((prev) => {
+      if (!prev) return null;
+      return { ...prev, isComplete: true };
+    });
+  }, []);
+  const endWorkflow = useCallback((delay = 0) => {
+    if (delay > 0) {
+      setTimeout(() => setActiveWorkflow(null), delay);
+    } else {
+      setActiveWorkflow(null);
+    }
+  }, []);
+  const exitWorkflow = useCallback(async () => {
+    abortControllerRef.current = new AbortController();
+    try {
+      const identityToken = window.__crow_identity_token;
+      const response = await fetch(`${apiUrl}/api/chat/message`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          product_id: productId,
+          message: "[EXIT_WORKFLOW]",
+          conversation_id: conversationId,
+          identity_token: identityToken,
+          model: selectedModel
+        }),
+        signal: abortControllerRef.current.signal
+      });
+      if (!response.ok) return;
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (reader) {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          const chunk = decoder.decode(value);
+          const lines = chunk.split("\n");
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              const data = line.slice(6).trim();
+              if (data === "[DONE]") return;
+              try {
+                const parsed = JSON.parse(data);
+                if (parsed.type === "workflow_ended") {
+                  setActiveWorkflow(null);
+                }
+                if (parsed.type === "content" && parsed.content) {
+                  onMessage?.(parsed.content);
+                }
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error("[Crow] Exit workflow error:", error);
+    } finally {
+      abortControllerRef.current = null;
+    }
+  }, [apiUrl, productId, conversationId, selectedModel, onMessage]);
+  return {
+    activeWorkflow,
+    startWorkflow,
+    updateTodo,
+    markComplete,
+    endWorkflow,
+    exitWorkflow
+  };
 }
-function useChat({ client, onStreamEvent }) {
-  const [messages, setMessages] = useState(client.messages);
-  const [isLoading, setIsLoading] = useState(client.isLoading);
-  const onStreamEventRef = useRef(onStreamEvent);
+function useCrowAPI({ onIdentified, onReset } = {}) {
+  const onIdentifiedRef = useRef(onIdentified);
+  const onResetRef = useRef(onReset);
+  const hasCalledInitialRef = useRef(false);
   useEffect(() => {
-    onStreamEventRef.current = onStreamEvent;
+    onIdentifiedRef.current = onIdentified;
+    onResetRef.current = onReset;
   });
   useEffect(() => {
-    const unsubMessages = client.onMessages(setMessages);
-    const unsubLoading = client.onLoading(setIsLoading);
-    setMessages(client.messages);
-    setIsLoading(client.isLoading);
+    window.crow = function(command, options) {
+      const opts = options;
+      switch (command) {
+        case "identify":
+          if (!opts?.token) {
+            console.error("[Crow] identify() requires a token");
+            return;
+          }
+          window.__crow_identity_token = opts.token;
+          const { token, ...metadata } = opts;
+          window.__crow_public_metadata = metadata;
+          console.log("[Crow] User identified");
+          window.dispatchEvent(
+            new CustomEvent("crow:identified", { detail: { token, metadata } })
+          );
+          break;
+        case "resetUser":
+          window.__crow_identity_token = void 0;
+          window.__crow_public_metadata = void 0;
+          console.log("[Crow] User reset");
+          window.dispatchEvent(new CustomEvent("crow:reset"));
+          break;
+        case "registerTools":
+          if (!opts || typeof opts !== "object") {
+            console.error("[Crow] registerTools() requires an object");
+            return;
+          }
+          if (!window.__crow_client_tools) {
+            window.__crow_client_tools = {};
+          }
+          for (const [toolName, handler] of Object.entries(opts)) {
+            if (typeof handler === "function") {
+              window.__crow_client_tools[toolName] = handler;
+              console.log(`[Crow] Registered tool: ${toolName}`);
+            }
+          }
+          break;
+        case "runJourney":
+          if (!opts?.journeyId) {
+            console.error("[Crow] runJourney() requires a journeyId");
+            return;
+          }
+          window.dispatchEvent(
+            new CustomEvent("crow:runJourney", {
+              detail: { journeyId: opts.journeyId, inputs: opts.inputs || {} }
+            })
+          );
+          break;
+        default:
+          console.warn(`[Crow] Unknown command: ${command}`);
+      }
+    };
+    console.log("[Crow] API ready");
+    const handleIdentified = () => onIdentifiedRef.current?.();
+    const handleReset = () => onResetRef.current?.();
+    window.addEventListener("crow:identified", handleIdentified);
+    window.addEventListener("crow:reset", handleReset);
+    if (window.__crow_identity_token && !hasCalledInitialRef.current) {
+      hasCalledInitialRef.current = true;
+      onIdentifiedRef.current?.();
+    }
     return () => {
-      unsubMessages();
-      unsubLoading();
+      window.removeEventListener("crow:identified", handleIdentified);
+      window.removeEventListener("crow:reset", handleReset);
     };
-  }, [client]);
-  const sendMessage = useCallback(
-    async (content) => {
-      for await (const event of client.sendMessage(content)) {
-        onStreamEventRef.current?.(event);
+  }, []);
+  const executeClientTool = useCallback(
+    async (toolName, args) => {
+      const handler = window.__crow_client_tools?.[toolName];
+      if (handler) {
+        try {
+          return await handler(args);
+        } catch (err) {
+          console.error(`[Crow] Client tool error: ${toolName}`, err);
+          return { status: "error", error: String(err) };
+        }
       }
+      console.warn(`[Crow] No handler for: ${toolName}`);
+      return { status: "error", error: "No handler registered" };
     },
-    [client]
+    []
   );
-  const stop = useCallback(() => {
-    client.stop();
-  }, [client]);
-  const clearMessages = useCallback(() => {
-    client.clearMessages();
-  }, [client]);
+  return { executeClientTool };
+}
+
+// src/styles/defaults.ts
+var DEFAULT_WIDGET_STYLES = {
+  // ═══════════════════════════════════════════════════════════
+  // COLORS
+  // ═══════════════════════════════════════════════════════════
+  colors: {
+    // Primary accent
+    primary: "#000000",
+    // Widget container
+    background: "rgba(255, 255, 255, 0.95)",
+    border: "#d1d5db",
+    text: "#111827",
+    // Bot messages
+    botBubble: "#000000",
+    botText: "#ffffff",
+    // User messages
+    userBubble: "#ffffff",
+    userText: "#000000",
+    userBorder: "#000000",
+    // Floating chat bubble
+    bubbleBackground: "#ffffff",
+    bubbleBorder: "#d1d5db",
+    bubbleIcon: "#111827",
+    // Messages container
+    messagesBackground: "rgba(255, 255, 255, 0.5)"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // TYPOGRAPHY
+  // ═══════════════════════════════════════════════════════════
+  typography: {
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: 14,
+    headerFontSize: 16
+  },
+  // ═══════════════════════════════════════════════════════════
+  // ANIMATIONS
+  // ═══════════════════════════════════════════════════════════
+  animations: {
+    duration: 0.3,
+    easing: "easeInOut"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // DIMENSIONS
+  // ═══════════════════════════════════════════════════════════
+  dimensions: {
+    width: 400,
+    maxHeight: 600,
+    previewHeight: 700,
+    messagesMaxHeight: 350,
+    borderRadius: 24,
+    padding: 20
+  },
+  // ═══════════════════════════════════════════════════════════
+  // POSITIONING (floating widget only)
+  // ═══════════════════════════════════════════════════════════
+  position: {
+    right: 16,
+    bottom: 80,
+    bubbleRight: 16,
+    bubbleBottom: 16
+  },
+  // ═══════════════════════════════════════════════════════════
+  // CHAT BUBBLE (floating button)
+  // ═══════════════════════════════════════════════════════════
+  bubble: {
+    size: 48,
+    iconSize: 24
+  },
+  // ═══════════════════════════════════════════════════════════
+  // SHADOWS
+  // ═══════════════════════════════════════════════════════════
+  shadows: {
+    widget: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    bubble: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // BRANDING
+  // ═══════════════════════════════════════════════════════════
+  branding: {
+    showPoweredBy: true,
+    poweredByText: "Powered by Crow",
+    showLogo: true,
+    logoUrl: "/static/crow.png"
+  }
+};
+var DEFAULT_COPILOT_STYLES = {
+  // ═══════════════════════════════════════════════════════════
+  // COLORS (same as widget by default)
+  // ═══════════════════════════════════════════════════════════
+  colors: {
+    primary: "#000000",
+    background: "rgba(255, 255, 255, 0.95)",
+    border: "#d1d5db",
+    text: "#111827",
+    botBubble: "#000000",
+    botText: "#ffffff",
+    userBubble: "#ffffff",
+    userText: "#000000",
+    userBorder: "#000000",
+    bubbleBackground: "#ffffff",
+    bubbleBorder: "#d1d5db",
+    bubbleIcon: "#111827",
+    messagesBackground: "rgba(255, 255, 255, 0.5)"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // TYPOGRAPHY
+  // ═══════════════════════════════════════════════════════════
+  typography: {
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: 14,
+    headerFontSize: 16
+  },
+  // ═══════════════════════════════════════════════════════════
+  // ANIMATIONS
+  // ═══════════════════════════════════════════════════════════
+  animations: {
+    duration: 0.3,
+    easing: "easeInOut"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // DIMENSIONS
+  // ═══════════════════════════════════════════════════════════
+  dimensions: {
+    width: 400,
+    headerHeight: 56,
+    borderRadius: 16,
+    padding: 16
+  },
+  // ═══════════════════════════════════════════════════════════
+  // POSITIONING
+  // ═══════════════════════════════════════════════════════════
+  position: {
+    side: "right"
+  },
+  // ═══════════════════════════════════════════════════════════
+  // BRANDING
+  // ═══════════════════════════════════════════════════════════
+  branding: {
+    showPoweredBy: true,
+    poweredByText: "Powered by Crow"
+  }
+};
+
+// src/styles/utils.ts
+function deepMerge(target, source) {
+  if (!source) return target;
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue !== void 0 && sourceValue !== null && typeof sourceValue === "object" && !Array.isArray(sourceValue) && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+      result[key] = deepMerge(
+        targetValue,
+        sourceValue
+      );
+    } else if (sourceValue !== void 0) {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+function mergeWidgetStyles(dbStyles, propStyles) {
+  let result = { ...DEFAULT_WIDGET_STYLES };
+  if (dbStyles) {
+    result = {
+      colors: deepMerge(result.colors, dbStyles.colors),
+      typography: deepMerge(result.typography, dbStyles.typography),
+      animations: deepMerge(result.animations, dbStyles.animations),
+      dimensions: deepMerge(result.dimensions, dbStyles.dimensions),
+      position: deepMerge(result.position, dbStyles.position),
+      bubble: deepMerge(result.bubble, dbStyles.bubble),
+      shadows: deepMerge(result.shadows, dbStyles.shadows),
+      branding: deepMerge(result.branding, dbStyles.branding)
+    };
+  }
+  if (propStyles) {
+    result = {
+      colors: deepMerge(result.colors, propStyles.colors),
+      typography: deepMerge(result.typography, propStyles.typography),
+      animations: deepMerge(result.animations, propStyles.animations),
+      dimensions: deepMerge(result.dimensions, propStyles.dimensions),
+      position: deepMerge(result.position, propStyles.position),
+      bubble: deepMerge(result.bubble, propStyles.bubble),
+      shadows: deepMerge(result.shadows, propStyles.shadows),
+      branding: deepMerge(result.branding, propStyles.branding)
+    };
+  }
+  return result;
+}
+function mergeCopilotStyles(dbStyles, propStyles) {
+  let result = { ...DEFAULT_COPILOT_STYLES };
+  if (dbStyles) {
+    result = {
+      colors: deepMerge(result.colors, dbStyles.colors),
+      typography: deepMerge(result.typography, dbStyles.typography),
+      animations: deepMerge(result.animations, dbStyles.animations),
+      dimensions: deepMerge(result.dimensions, dbStyles.dimensions),
+      position: deepMerge(result.position, dbStyles.position),
+      branding: deepMerge(result.branding, dbStyles.branding)
+    };
+  }
+  if (propStyles) {
+    result = {
+      colors: deepMerge(result.colors, propStyles.colors),
+      typography: deepMerge(result.typography, propStyles.typography),
+      animations: deepMerge(result.animations, propStyles.animations),
+      dimensions: deepMerge(result.dimensions, propStyles.dimensions),
+      position: deepMerge(result.position, propStyles.position),
+      branding: deepMerge(result.branding, propStyles.branding)
+    };
+  }
+  return result;
+}
+function stylesToCSSVariables(styles2) {
   return {
-    messages,
+    // Colors
+    "--crow-color-primary": styles2.colors.primary,
+    "--crow-color-background": styles2.colors.background,
+    "--crow-color-text": styles2.colors.text,
+    "--crow-color-border": styles2.colors.border,
+    "--crow-color-bot-bubble": styles2.colors.botBubble,
+    "--crow-color-bot-text": styles2.colors.botText,
+    "--crow-color-user-bubble": styles2.colors.userBubble,
+    "--crow-color-user-text": styles2.colors.userText,
+    "--crow-color-user-border": styles2.colors.userBorder,
+    "--crow-color-messages-bg": styles2.colors.messagesBackground,
+    // Typography
+    "--crow-font-family": styles2.typography.fontFamily,
+    "--crow-font-size": `${styles2.typography.fontSize}px`,
+    "--crow-header-font-size": `${styles2.typography.headerFontSize}px`,
+    // Animations
+    "--crow-animation-duration": `${styles2.animations.duration}s`,
+    "--crow-animation-easing": styles2.animations.easing
+  };
+}
+
+// src/hooks/useWidgetStyles.ts
+var styleCache = /* @__PURE__ */ new Map();
+async function fetchWidgetConfig(productId, apiUrl) {
+  const baseUrl = apiUrl || "";
+  const url = `${baseUrl}/api/products/${productId}/widget-config`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch widget config: ${response.status} ${response.statusText}`);
+  }
+  return response.json();
+}
+function useWidgetStyles({
+  productId,
+  apiUrl,
+  propStyles,
+  skip = false,
+  cacheKey
+}) {
+  const key = cacheKey || productId;
+  const [isLoading, setIsLoading] = useState(!skip && !styleCache.has(key));
+  const [error, setError] = useState(null);
+  const [dbStyles, setDbStyles] = useState(
+    styleCache.get(key)?.widgetStyles
+  );
+  const [agentName, setAgentName] = useState(
+    styleCache.get(key)?.agentName || "Assistant"
+  );
+  const hasFetchedRef = useRef(false);
+  const fetchStyles = async () => {
+    if (skip) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const config = await fetchWidgetConfig(productId, apiUrl);
+      styleCache.set(key, config);
+      setDbStyles(config.widgetStyles);
+      setAgentName(config.agentName || "Assistant");
+    } catch (err) {
+      console.error("[CrowWidget] Failed to fetch styles:", err);
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (skip || hasFetchedRef.current) return;
+    const cached = styleCache.get(key);
+    if (cached) {
+      setDbStyles(cached.widgetStyles);
+      setAgentName(cached.agentName || "Assistant");
+      setIsLoading(false);
+      return;
+    }
+    hasFetchedRef.current = true;
+    fetchStyles();
+  }, [productId, apiUrl, skip, key]);
+  const styles2 = mergeWidgetStyles(dbStyles, propStyles);
+  return {
+    styles: styles2,
     isLoading,
-    sendMessage,
-    stop,
-    clearMessages
+    error,
+    agentName,
+    refetch: fetchStyles
   };
 }
-function ChatBubble({ isOpen, onClick, className }) {
+function useCopilotStyles({
+  productId,
+  apiUrl,
+  propStyles,
+  skip = false,
+  cacheKey
+}) {
+  const key = cacheKey || productId;
+  const [isLoading, setIsLoading] = useState(!skip && !styleCache.has(key));
+  const [error, setError] = useState(null);
+  const [dbStyles, setDbStyles] = useState(
+    styleCache.get(key)?.copilotStyles
+  );
+  const [agentName, setAgentName] = useState(
+    styleCache.get(key)?.agentName || "Assistant"
+  );
+  const hasFetchedRef = useRef(false);
+  const fetchStyles = async () => {
+    if (skip) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const config = await fetchWidgetConfig(productId, apiUrl);
+      styleCache.set(key, config);
+      setDbStyles(config.copilotStyles);
+      setAgentName(config.agentName || "Assistant");
+    } catch (err) {
+      console.error("[CrowCopilot] Failed to fetch styles:", err);
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (skip || hasFetchedRef.current) return;
+    const cached = styleCache.get(key);
+    if (cached) {
+      setDbStyles(cached.copilotStyles);
+      setAgentName(cached.agentName || "Assistant");
+      setIsLoading(false);
+      return;
+    }
+    hasFetchedRef.current = true;
+    fetchStyles();
+  }, [productId, apiUrl, skip, key]);
+  const styles2 = mergeCopilotStyles(dbStyles, propStyles);
+  return {
+    styles: styles2,
+    isLoading,
+    error,
+    agentName,
+    refetch: fetchStyles
+  };
+}
+function clearStyleCache(productId) {
+  if (productId) {
+    styleCache.delete(productId);
+  } else {
+    styleCache.clear();
+  }
+}
+function usePreviewWidgetStyles(previewStyles) {
+  return {
+    styles: mergeWidgetStyles(void 0, previewStyles)
+  };
+}
+function usePreviewCopilotStyles(previewStyles) {
+  return {
+    styles: mergeCopilotStyles(void 0, previewStyles)
+  };
+}
+var WidgetStyleContext = createContext(null);
+function WidgetStyleProvider({
+  children,
+  styles: styles2,
+  agentName = "Assistant",
+  isLoading = false,
+  variant = "floating"
+}) {
+  const value = useMemo(
+    () => ({ styles: styles2, agentName, isLoading, variant }),
+    [styles2, agentName, isLoading, variant]
+  );
+  return /* @__PURE__ */ jsx(WidgetStyleContext.Provider, { value, children });
+}
+function useWidgetStyleContext() {
+  const context = useContext(WidgetStyleContext);
+  if (!context) {
+    throw new Error(
+      "useWidgetStyleContext must be used within a WidgetStyleProvider. Make sure your component is wrapped with CrowWidget or WidgetStyleProvider."
+    );
+  }
+  return context;
+}
+function useWidgetStyles2() {
+  const context = useContext(WidgetStyleContext);
+  return context?.styles ?? DEFAULT_WIDGET_STYLES;
+}
+var CopilotStyleContext = createContext(null);
+function CopilotStyleProvider({
+  children,
+  styles: styles2,
+  agentName = "Assistant",
+  isLoading = false
+}) {
+  const value = useMemo(
+    () => ({ styles: styles2, agentName, isLoading }),
+    [styles2, agentName, isLoading]
+  );
+  return /* @__PURE__ */ jsx(CopilotStyleContext.Provider, { value, children });
+}
+function useCopilotStyleContext() {
+  const context = useContext(CopilotStyleContext);
+  if (!context) {
+    throw new Error(
+      "useCopilotStyleContext must be used within a CopilotStyleProvider. Make sure your component is wrapped with CrowCopilot or CopilotStyleProvider."
+    );
+  }
+  return context;
+}
+function useCopilotStyles2() {
+  const context = useContext(CopilotStyleContext);
+  return context?.styles ?? DEFAULT_COPILOT_STYLES;
+}
+function ChatBubble({ isExpanded, onClick }) {
+  const { styles: styles2 } = useWidgetStyleContext();
   return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
-      className: clsx(
-        "crow-fixed crow-z-[999999] crow-rounded-full",
-        "crow-w-14 crow-h-14 crow-flex crow-items-center crow-justify-center",
-        "crow-bg-crow-primary hover:crow-bg-crow-primary-dark",
-        "crow-shadow-lg hover:crow-shadow-xl crow-transition-all crow-duration-300",
-        "hover:crow-scale-110",
-        className
-      ),
+      className: "fixed z-[999999] rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-all duration-500 border border-gray-200/30 backdrop-blur-md",
       style: {
-        right: "20px",
-        bottom: "20px"
+        width: styles2.bubble.size,
+        height: styles2.bubble.size,
+        right: styles2.position.bubbleRight,
+        bottom: styles2.position.bubbleBottom,
+        background: styles2.colors.bubbleBackground,
+        borderColor: styles2.colors.bubbleBorder,
+        boxShadow: styles2.shadows.bubble,
+        color: styles2.colors.bubbleIcon
       },
-      "aria-label": isOpen ? "Close chat" : "Open chat",
-      children: isOpen ? /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "crow-w-6 crow-h-6 crow-text-white",
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M19 9l-7 7-7-7"
-            }
-          )
-        }
-      ) : /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "crow-w-6 crow-h-6 crow-text-white",
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-            }
-          )
-        }
-      )
+      "aria-label": isExpanded ? "Close Chat" : "Open Chat",
+      children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: styles2.bubble.iconSize, strokeWidth: 2 }) : /* @__PURE__ */ jsx(MessageCircle, { size: styles2.bubble.iconSize, strokeWidth: 2 })
     }
   );
 }
+var GlassCard = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "bg-white/30 border border-gray-200/30 flex flex-col gap-6 rounded-2xl py-6 backdrop-blur-md",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+GlassCard.displayName = "GlassCard";
+var WidgetShell = forwardRef(
+  ({ children, className }, ref) => {
+    const { styles: styles2, variant } = useWidgetStyleContext();
+    const baseStyle = {
+      borderRadius: styles2.dimensions.borderRadius,
+      padding: styles2.dimensions.padding,
+      background: styles2.colors.background,
+      borderColor: styles2.colors.border,
+      color: styles2.colors.text,
+      boxShadow: styles2.shadows.widget,
+      fontFamily: styles2.typography.fontFamily,
+      fontSize: styles2.typography.fontSize
+    };
+    if (variant === "embedded") {
+      return /* @__PURE__ */ jsx(
+        GlassCard,
+        {
+          ref,
+          className: `flex flex-col shadow-2xl gap-3 w-full h-full ${className ?? ""}`,
+          style: {
+            ...baseStyle,
+            maxWidth: styles2.dimensions.width,
+            maxHeight: styles2.dimensions.previewHeight
+          },
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      GlassCard,
+      {
+        ref,
+        className: `fixed z-[999999] shadow-2xl gap-3 transition-all duration-500 flex flex-col ${className ?? ""}`,
+        style: {
+          ...baseStyle,
+          width: `min(${styles2.dimensions.width}px, calc(100vw - 32px))`,
+          height: `min(${styles2.dimensions.maxHeight}px, calc(100vh - 120px))`,
+          right: styles2.position.right,
+          bottom: styles2.position.bottom
+        },
+        children
+      }
+    );
+  }
+);
+WidgetShell.displayName = "WidgetShell";
 function WidgetHeader({
-  title = "Chat",
+  isVerifiedUser,
+  showConversationList,
   onNewChat,
-  onClose,
-  showNewChat = true,
-  showClose = false,
-  className
+  onToggleHistory,
+  showMinimize = false,
+  isMinimized = false,
+  onToggleMinimize
 }) {
+  const { agentName, styles: styles2 } = useWidgetStyleContext();
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx(
-        "crow-flex crow-items-center crow-justify-between crow-px-4 crow-py-3",
-        "crow-border-b crow-border-gray-200 crow-bg-white",
-        className
-      ),
+      className: "flex items-center justify-between mb-3 pb-2 border-b",
+      style: { borderColor: styles2.colors.border },
       children: [
-        /* @__PURE__ */ jsx("h2", { className: "crow-font-semibold crow-text-gray-900", children: title }),
-        /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-2", children: [
-          showNewChat && onNewChat && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-sm font-semibold",
+            style: {
+              color: styles2.colors.text,
+              fontSize: styles2.typography.headerFontSize
+            },
+            children: agentName
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
             "button",
             {
               onClick: onNewChat,
-              className: "crow-p-1.5 crow-rounded-lg crow-text-gray-500 hover:crow-bg-gray-100 hover:crow-text-gray-700 crow-transition-colors",
-              "aria-label": "New chat",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "crow-w-5 crow-h-5",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M12 4v16m8-8H4"
-                    }
-                  )
-                }
-              )
+              className: "p-1.5 hover:bg-gray-200 rounded transition-colors",
+              "aria-label": "New Chat",
+              title: "New Chat",
+              children: /* @__PURE__ */ jsx(Plus, { size: 18, className: "text-gray-700" })
             }
           ),
-          showClose && onClose && /* @__PURE__ */ jsx(
+          isVerifiedUser && /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: onClose,
-              className: "crow-p-1.5 crow-rounded-lg crow-text-gray-500 hover:crow-bg-gray-100 hover:crow-text-gray-700 crow-transition-colors",
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "crow-w-5 crow-h-5",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M6 18L18 6M6 6l12 12"
-                    }
-                  )
-                }
-              )
+              onClick: onToggleHistory,
+              className: `p-1.5 hover:bg-gray-200 rounded transition-colors ${showConversationList ? "bg-gray-200" : ""}`,
+              "aria-label": "Conversation History",
+              title: "Conversation History",
+              children: /* @__PURE__ */ jsx(History, { size: 18, className: "text-gray-700" })
+            }
+          ),
+          showMinimize && onToggleMinimize && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onToggleMinimize,
+              className: "p-1 hover:bg-gray-200 rounded transition-colors",
+              "aria-label": isMinimized ? "Expand" : "Minimize",
+              children: isMinimized ? /* @__PURE__ */ jsx(ChevronUp, { size: 18, className: "text-gray-900" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 18, className: "text-gray-900" })
             }
           )
         ] })
@@ -205,420 +1181,1399 @@ function WidgetHeader({
     }
   );
 }
-function formatTime(date) {
-  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+function StreamingText({
+  content,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ReactMarkdown,
+      {
+        components: {
+          strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-bold", children }),
+          ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "list-disc pl-5 my-1", children }),
+          ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal pl-5 my-1", children }),
+          li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "[&>p]:inline [&>p]:m-0", children }),
+          p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-1 last:mb-0", children }),
+          a: ({ href, children }) => /* @__PURE__ */ jsx(
+            "a",
+            {
+              href,
+              className: "underline hover:text-blue-300",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children
+            }
+          ),
+          code: ({ className, children, ...props }) => {
+            const isInline = !className;
+            return isInline ? /* @__PURE__ */ jsx(
+              "code",
+              {
+                className: "bg-gray-100 px-1 py-0.5 rounded text-sm",
+                ...props,
+                children
+              }
+            ) : /* @__PURE__ */ jsx("code", { className, ...props, children });
+          },
+          pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 p-2 rounded my-1 overflow-x-auto text-sm", children })
+        },
+        children: content
+      }
+    ),
+    isStreaming && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-block w-0.5 h-4 ml-0.5 align-text-bottom",
+        style: {
+          backgroundColor: "currentColor",
+          animation: "cursor-blink 1s ease-in-out infinite"
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes cursor-blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      ` })
+  ] });
+}
+function ThinkingIndicator() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-block font-medium",
+        style: {
+          background: "linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.4) 100%)",
+          backgroundSize: "200% 100%",
+          WebkitBackgroundClip: "text",
+          backgroundClip: "text",
+          WebkitTextFillColor: "transparent",
+          animation: "shimmer 1.5s ease-in-out infinite"
+        },
+        children: "Thinking..."
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes shimmer {
+          0% { background-position: 100% 0; }
+          100% { background-position: -100% 0; }
+        }
+      ` })
+  ] });
+}
+function LoadingHistory() {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      className: "flex justify-center items-center py-8",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [0, 0.15, 0.3].map((delay, i) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "w-2 h-2 bg-gray-400 rounded-full",
+            animate: { y: [0, -8, 0] },
+            transition: { duration: 0.6, repeat: Infinity, delay }
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Loading conversation..." })
+      ] })
+    }
+  );
+}
+var THINKING_MESSAGES = [
+  "Pondering",
+  "Analyzing",
+  "Reasoning",
+  "Considering",
+  "Processing",
+  "Evaluating",
+  "Thinking",
+  "Exploring",
+  "Connecting",
+  "Synthesizing"
+];
+function getRandomThinkingMessage() {
+  const idx = Math.floor(Math.random() * THINKING_MESSAGES.length);
+  return THINKING_MESSAGES[idx] + "...";
+}
+function ShimmeringContent({ children }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-block",
+      style: {
+        background: "linear-gradient(90deg, rgba(100,100,100,0.6) 0%, rgba(100,100,100,1) 50%, rgba(100,100,100,0.6) 100%)",
+        backgroundSize: "200% 100%",
+        WebkitBackgroundClip: "text",
+        backgroundClip: "text",
+        WebkitTextFillColor: "transparent",
+        animation: "shimmer 1.5s ease-in-out infinite"
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes shimmer {
+          0% { background-position: 100% 0; }
+          100% { background-position: -100% 0; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+function ReasoningTrace({ thinking, isComplete, toolCalls = [], isWaiting = false }) {
+  const hasThinking = !!thinking && thinking.trim().length > 0;
+  const hasToolCalls = toolCalls.length > 0;
+  if (!isWaiting && !hasThinking && !hasToolCalls) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-start mb-2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-[90%] space-y-1.5", children: [
+    isWaiting && !hasThinking && /* @__PURE__ */ jsx(WaitingIndicator, {}),
+    hasThinking && /* @__PURE__ */ jsx(ThinkingBlock, { thinking, isComplete }),
+    toolCalls.map((tool) => /* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tool }, tool.id))
+  ] }) });
+}
+function WaitingIndicator() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-gray-500", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "w-3.5 h-3.5" }) }) }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium", children: /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) })
+  ] });
+}
+function ThinkingBlock({ thinking, isComplete }) {
+  const [isExpanded, setIsExpanded] = useState(!isComplete);
+  useLayoutEffect(() => {
+    setIsExpanded(!isComplete);
+  }, [isComplete]);
+  const isInProgress = !isComplete;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: `flex items-center gap-1.5 select-none transition-colors ${isInProgress ? "text-gray-500" : "text-gray-600 hover:text-gray-800"} cursor-pointer`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-4 h-4", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: /* @__PURE__ */ jsx(Brain, { className: "w-3.5 h-3.5" }) }) : /* @__PURE__ */ jsx(Brain, { className: "w-3.5 h-3.5" }) }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: isInProgress ? /* @__PURE__ */ jsx(ShimmeringContent, { children: getRandomThinkingMessage() }) : "Thought" }),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { rotate: isExpanded ? 90 : 0 },
+              transition: { duration: 0.15 },
+              className: "flex-shrink-0",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" })
+            }
+          ),
+          isComplete && /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-green-500" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.15 },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsx("div", { className: "border-l-2 border-gray-200 pl-3 ml-2", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `text-xs leading-relaxed whitespace-pre-wrap ${isComplete ? "text-gray-500" : "text-gray-600"}`,
+            children: thinking
+          }
+        ) })
+      }
+    ) })
+  ] });
 }
-function MessageBubble({ message, isStreaming = false }) {
-  const isUser = message.role === "user";
-  const isWaiting = !message.content && !isUser;
+function ToolCallBlock({ toolCall }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasArgs = Object.keys(toolCall.arguments || {}).length > 0;
+  const isExecuting = toolCall.status === "executing";
+  const isComplete = toolCall.status === "complete";
+  const isError = toolCall.status === "error";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => hasArgs && setExpanded(!expanded),
+        className: `flex items-center gap-1.5 select-none transition-colors ${hasArgs ? "cursor-pointer hover:text-gray-800" : "cursor-default"} ${isExecuting ? "text-gray-500" : "text-gray-600"}`,
+        disabled: !hasArgs,
+        children: [
+          hasArgs && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { rotate: expanded ? 90 : 0 },
+              transition: { duration: 0.15 },
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" })
+            }
+          ),
+          isExecuting && /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-blue-500" }),
+          isComplete && /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-green-500" }),
+          isError && /* @__PURE__ */ jsx("span", { className: "w-3 h-3 text-red-500", children: "\u2715" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: toolCall.name }),
+          /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+            isExecuting && "running...",
+            isComplete && "done",
+            isError && "failed"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && hasArgs && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.15 },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsx("pre", { className: "mt-1 p-2 bg-gray-100 rounded text-[10px] font-mono text-gray-700 overflow-x-auto max-h-32 overflow-y-auto ml-4", children: JSON.stringify(toolCall.arguments, null, 2) })
+      }
+    ) })
+  ] });
+}
+function MessageBubble({
+  message,
+  toolCalls = [],
+  isLoading = false
+}) {
+  const styles2 = useWidgetStyles2();
+  const isWaiting = message.content === "Thinking..." || message.isBot && isLoading && !message.content;
+  const hasThinking = message.isBot && message.thinking;
+  const hasContent = message.content && message.content !== "Thinking...";
+  const hasToolCalls = toolCalls.length > 0;
+  const showReasoningTrace = message.isBot && (isWaiting || hasThinking || hasToolCalls);
+  const isStreaming = Boolean(message.isBot && isLoading && hasContent);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx(
-        "crow-flex crow-flex-col",
-        isUser ? "crow-items-end" : "crow-items-start"
-      ),
+      id: message.id,
+      className: `flex flex-col ${message.isBot ? "items-start" : "items-end"}`,
       children: [
-        message.thinking && /* @__PURE__ */ jsx("div", { className: "crow-mb-2 crow-text-xs crow-text-gray-500 crow-bg-gray-100 crow-rounded-lg crow-px-3 crow-py-2 crow-max-w-[80%]", children: /* @__PURE__ */ jsxs("details", { open: !message.thinkingComplete, children: [
-          /* @__PURE__ */ jsx("summary", { className: "crow-cursor-pointer crow-font-medium", children: message.thinkingComplete ? "Reasoning" : "Thinking..." }),
-          /* @__PURE__ */ jsx("div", { className: "crow-mt-1 crow-text-gray-600 crow-whitespace-pre-wrap", children: message.thinking })
-        ] }) }),
-        isWaiting && /* @__PURE__ */ jsxs("div", { className: "crow-flex crow-items-center crow-gap-1 crow-text-gray-500 crow-text-sm crow-px-3 crow-py-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse", children: "\u25CF" }),
-          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse crow-animation-delay-100", children: "\u25CF" }),
-          /* @__PURE__ */ jsx("span", { className: "crow-animate-pulse crow-animation-delay-200", children: "\u25CF" })
-        ] }),
-        message.content && /* @__PURE__ */ jsxs(
+        showReasoningTrace && /* @__PURE__ */ jsx(
+          ReasoningTrace,
+          {
+            thinking: message.thinking,
+            isComplete: message.thinkingComplete,
+            toolCalls,
+            isWaiting: isWaiting && !hasThinking
+          }
+        ),
+        hasContent && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx(
-              "crow-max-w-[80%] crow-rounded-2xl crow-px-4 crow-py-2 crow-transition-all",
-              isUser ? "crow-bg-crow-primary crow-text-white" : "crow-bg-gray-100 crow-text-gray-900"
-            ),
+            className: "max-w-[80%] rounded-2xl px-4 py-2 transition-all duration-150",
+            style: message.isBot ? {
+              background: styles2.colors.botBubble,
+              color: styles2.colors.botText
+            } : {
+              background: styles2.colors.userBubble,
+              color: styles2.colors.userText,
+              border: `1px solid ${styles2.colors.userBorder}`
+            },
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "crow-text-sm crow-whitespace-pre-wrap", children: [
-                message.content,
-                isStreaming && /* @__PURE__ */ jsx("span", { className: "crow-inline-block crow-w-1 crow-h-4 crow-ml-0.5 crow-bg-current crow-animate-pulse" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "crow-text-xs crow-opacity-60 crow-mt-1", children: formatTime(message.timestamp) })
+              /* @__PURE__ */ jsx("div", { className: "text-sm whitespace-pre-wrap", children: message.isBot ? /* @__PURE__ */ jsx(
+                StreamingText,
+                {
+                  content: message.content,
+                  isStreaming
+                }
+              ) : /* @__PURE__ */ jsx(
+                ReactMarkdown,
+                {
+                  components: {
+                    strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-bold", children }),
+                    ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "list-disc pl-5 my-1", children }),
+                    ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal pl-5 my-1", children }),
+                    li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "[&>p]:inline [&>p]:m-0", children }),
+                    p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-1 last:mb-0", children }),
+                    a: ({ href, children }) => /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href,
+                        className: "underline hover:text-blue-300",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children
+                      }
+                    )
+                  },
+                  children: message.content
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs opacity-60 mt-1", children: formatTime(message.timestamp) })
             ]
           }
-        ),
-        message.citations && message.citations.length > 0 && /* @__PURE__ */ jsx("div", { className: "crow-mt-1 crow-flex crow-flex-wrap crow-gap-1", children: message.citations.map((citation, idx) => /* @__PURE__ */ jsx(
-          "span",
+        )
+      ]
+    }
+  );
+}
+function MessageList({
+  messages,
+  activeToolCalls,
+  isLoadingHistory,
+  isGenerating = false
+}) {
+  if (isLoadingHistory) {
+    return /* @__PURE__ */ jsx(LoadingHistory, {});
+  }
+  const lastBotIndex = messages.reduce(
+    (lastIdx, m, i) => m.isBot ? i : lastIdx,
+    -1
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: messages.map((msg, index) => /* @__PURE__ */ jsx(
+    MessageBubble,
+    {
+      message: msg,
+      toolCalls: index === lastBotIndex ? activeToolCalls : void 0,
+      isLoading: index === lastBotIndex && isGenerating
+    },
+    msg.id
+  )) });
+}
+var MessagesContainer = forwardRef(
+  ({ children, maxHeight }, ref) => {
+    const styles2 = useWidgetStyles2();
+    const internalRef = useRef(null);
+    const lastScrollHeightRef = useRef(0);
+    const isUserScrollingRef = useRef(false);
+    const containerRef = ref || internalRef;
+    const isNearBottom = useCallback(() => {
+      const container = containerRef.current;
+      if (!container) return true;
+      const threshold = 100;
+      return container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
+    }, [containerRef]);
+    const scrollToBottom = useCallback(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: "smooth"
+      });
+    }, [containerRef]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const handleScroll = () => {
+        isUserScrollingRef.current = !isNearBottom();
+      };
+      container.addEventListener("scroll", handleScroll, { passive: true });
+      return () => container.removeEventListener("scroll", handleScroll);
+    }, [containerRef, isNearBottom]);
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const currentHeight = container.scrollHeight;
+      const heightChanged = currentHeight !== lastScrollHeightRef.current;
+      if (heightChanged) {
+        lastScrollHeightRef.current = currentHeight;
+        if (!isUserScrollingRef.current || isNearBottom()) {
+          scrollToBottom();
+        }
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref: containerRef,
+        id: MESSAGES_CONTAINER_ID,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: styles2.animations.duration },
+        className: "relative flex-1 min-h-0 rounded-2xl mb-3 overflow-y-auto p-4 space-y-3 pointer-events-auto",
+        style: {
+          background: styles2.colors.messagesBackground,
+          ...maxHeight && { maxHeight }
+        },
+        children
+      }
+    );
+  }
+);
+MessagesContainer.displayName = "MessagesContainer";
+function ConversationList({
+  conversations,
+  currentConversationId,
+  onSelect,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 },
+      className: "mb-3 rounded-xl bg-gray-50 border border-gray-200",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "p-2 border-b border-gray-200 flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700", children: "Recent Conversations" }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-1 hover:bg-gray-200 rounded", children: /* @__PURE__ */ jsx(X, { size: 14, className: "text-gray-500" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-[200px] overflow-y-auto", children: conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-gray-500", children: "No conversations yet" }) : conversations.map((conv) => /* @__PURE__ */ jsxs(
+          "button",
           {
-            className: "crow-text-xs crow-bg-blue-100 crow-text-blue-700 crow-px-2 crow-py-0.5 crow-rounded",
-            children: citation.filename
+            onClick: () => onSelect(conv.id),
+            className: `w-full p-3 text-left hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0 ${currentConversationId === conv.id ? "bg-blue-50" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-800 truncate", children: conv.name || "Untitled conversation" }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: formatConversationDate(conv.updated_at) })
+            ]
           },
-          idx
+          conv.id
         )) })
       ]
     }
   );
 }
-function MessageList({ messages, isLoading = false, className }) {
-  const containerRef = useRef(null);
-  useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    }
-  }, [messages]);
+function WorkflowPanel({ workflow, onExit }) {
   return /* @__PURE__ */ jsx(
-    "div",
+    motion.div,
     {
-      ref: containerRef,
-      className: `crow-flex-1 crow-overflow-y-auto crow-px-4 crow-py-4 crow-space-y-3 ${className || ""}`,
-      children: messages.map((message, index) => {
-        const isLastBotMessage = message.role === "assistant" && index === messages.length - 1;
-        return /* @__PURE__ */ jsx(
-          MessageBubble,
+      initial: { opacity: 0, y: -10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+      transition: { duration: 0.3 },
+      className: "mb-3 p-3 rounded-xl bg-gray-50 border border-gray-200",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900 flex items-center gap-1", children: workflow.name }),
+        /* @__PURE__ */ jsx(
+          "button",
           {
-            message,
-            isStreaming: isLastBotMessage && isLoading
+            onClick: onExit,
+            className: "text-xs text-gray-500 hover:text-gray-700 underline",
+            children: "Exit"
+          }
+        )
+      ] })
+    }
+  );
+}
+function PoweredByBadge({ apiUrl = "" }) {
+  const styles2 = useWidgetStyles2();
+  const branding = styles2.branding;
+  if (!branding.showPoweredBy) return null;
+  const logoUrl = branding.logoUrl?.startsWith("http") ? branding.logoUrl : `${apiUrl}${branding.logoUrl}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5 mb-3 text-[11px] text-gray-400", children: [
+    branding.showLogo && logoUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logoUrl,
+        alt: "Crow",
+        width: 14,
+        height: 14,
+        className: "opacity-50"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: branding.poweredByText })
+  ] });
+}
+var ModelSelector = ({
+  models,
+  selectedModel,
+  onModelChange,
+  disabled = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const selectedModelData = models.find((m) => m.id === selectedModel);
+  const groupedModels = models.reduce((acc, model) => {
+    if (!acc[model.provider]) acc[model.provider] = [];
+    acc[model.provider].push(model);
+    return acc;
+  }, {});
+  return /* @__PURE__ */ jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        disabled,
+        className: cn(
+          "flex items-center gap-1 px-2 py-1 rounded-md text-xs",
+          "bg-transparent text-[#9CA3AF]",
+          "hover:text-gray-700 transition-colors",
+          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: selectedModelData?.name || "Select Model" }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "w-3 h-3 transition-transform",
+                isOpen ? "rotate-180" : ""
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full mb-2 left-0 min-w-[180px] bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden", children: Object.entries(groupedModels).map(([provider, providerModels]) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-xs font-medium text-gray-400 uppercase tracking-wide bg-gray-50", children: provider }),
+      providerModels.map((model) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            onModelChange(model.id);
+            setIsOpen(false);
           },
-          message.id
-        );
-      })
-    }
-  );
+          className: cn(
+            "w-full flex items-center justify-between px-3 py-1.5 text-sm",
+            "hover:bg-gray-100 transition-colors",
+            model.id === selectedModel ? "text-gray-900" : "text-gray-600"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: model.name }),
+            model.id === selectedModel && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-500" })
+          ]
+        },
+        model.id
+      ))
+    ] }, provider)) })
+  ] });
+};
+var styles = `
+  *:focus-visible {
+    outline-offset: 0 !important;
+    --ring-offset: 0 !important;
+  }
+  textarea::-webkit-scrollbar {
+    width: 6px;
+  }
+  textarea::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  textarea::-webkit-scrollbar-thumb {
+    background-color: #444444;
+    border-radius: 3px;
+  }
+  textarea::-webkit-scrollbar-thumb:hover {
+    background-color: #555555;
+  }
+`;
+if (typeof document !== "undefined") {
+  const styleSheet = document.createElement("style");
+  styleSheet.innerText = styles;
+  document.head.appendChild(styleSheet);
 }
-function PromptInput({
-  onSend,
-  onStop,
-  isLoading = false,
-  placeholder = "Type your message...",
-  disabled = false,
-  className
-}) {
-  const [value, setValue] = useState("");
-  const textareaRef = useRef(null);
-  useEffect(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.height = "auto";
-      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-    }
-  }, [value]);
-  const handleSubmit = useCallback(() => {
-    if (value.trim() && !isLoading) {
-      onSend(value.trim());
-      setValue("");
-    }
-  }, [value, isLoading, onSend]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmit();
-      }
-    },
-    [handleSubmit]
-  );
-  const hasContent = value.trim().length > 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
+var Textarea = React3.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "textarea",
     {
-      className: clsx(
-        "crow-flex crow-items-end crow-gap-2 crow-p-3 crow-border-t crow-border-gray-200 crow-bg-white",
+      className: cn(
+        "flex w-full rounded-md border-none bg-transparent px-3 py-1.5 text-base text-gray-900 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 min-h-[32px] resize-none",
         className
       ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            ref: textareaRef,
-            value,
-            onChange: (e) => setValue(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder,
-            disabled: disabled || isLoading,
-            rows: 1,
-            className: clsx(
-              "crow-flex-1 crow-resize-none crow-border crow-border-gray-300 crow-rounded-xl crow-px-4 crow-py-2",
-              "crow-text-sm crow-text-gray-900 crow-placeholder-gray-500",
-              "focus:crow-outline-none focus:crow-ring-2 focus:crow-ring-crow-primary focus:crow-border-transparent",
-              "disabled:crow-bg-gray-50 disabled:crow-cursor-not-allowed"
-            )
-          }
+      ref,
+      rows: 1,
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border border-[#333333] bg-[#1F2023] px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = "TooltipContent";
+var Button = React3.forwardRef(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    const variantClasses = {
+      default: "bg-white hover:bg-white/80 text-black",
+      outline: "border border-[#444444] bg-transparent hover:bg-[#3A3A40]",
+      ghost: "bg-transparent hover:bg-[#3A3A40]"
+    };
+    const sizeClasses = {
+      default: "h-10 px-4 py-2",
+      sm: "h-8 px-3 text-sm",
+      lg: "h-12 px-6",
+      icon: "h-8 w-8 rounded-full aspect-[1/1]"
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
         ),
-        /* @__PURE__ */ jsx(
-          "button",
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var PromptInputContext = React3.createContext({
+  isLoading: false,
+  value: "",
+  setValue: () => {
+  },
+  maxHeight: 240,
+  onSubmit: void 0,
+  disabled: false
+});
+function usePromptInput() {
+  const context = React3.useContext(PromptInputContext);
+  if (!context) {
+    throw new Error("usePromptInput must be used within a PromptInput");
+  }
+  return context;
+}
+var PromptInput = React3.forwardRef(
+  ({
+    className,
+    isLoading = false,
+    maxHeight = 240,
+    value,
+    onValueChange,
+    onSubmit,
+    children,
+    disabled = false
+  }, ref) => {
+    const [internalValue, setInternalValue] = React3.useState(value || "");
+    const handleChange = (newValue) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    };
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
+      PromptInputContext.Provider,
+      {
+        value: {
+          isLoading,
+          value: value ?? internalValue,
+          setValue: onValueChange ?? handleChange,
+          maxHeight,
+          onSubmit,
+          disabled
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: isLoading ? onStop : handleSubmit,
-            disabled: !isLoading && !hasContent,
-            className: clsx(
-              "crow-flex-shrink-0 crow-w-10 crow-h-10 crow-rounded-full crow-flex crow-items-center crow-justify-center",
-              "crow-transition-all crow-duration-200",
-              isLoading ? "crow-bg-red-500 hover:crow-bg-red-600 crow-text-white" : hasContent ? "crow-bg-crow-primary hover:crow-bg-crow-primary-dark crow-text-white" : "crow-bg-gray-200 crow-text-gray-400 crow-cursor-not-allowed"
+            ref,
+            className: cn(
+              "rounded-3xl border border-[#444444] bg-[#1F2023] p-1.5 shadow-[0_8px_30px_rgba(0,0,0,0.24)] transition-all duration-300",
+              isLoading && "border-red-500/70",
+              className
             ),
-            "aria-label": isLoading ? "Stop generation" : "Send message",
-            children: isLoading ? /* @__PURE__ */ jsx("svg", { className: "crow-w-4 crow-h-4", fill: "currentColor", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "1" }) }) : /* @__PURE__ */ jsx("svg", { className: "crow-w-4 crow-h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
+            children
           }
         )
-      ]
+      }
+    ) });
+  }
+);
+PromptInput.displayName = "PromptInput";
+var PromptInputTextarea = ({ className, onKeyDown, disableAutosize = false, placeholder, ...props }) => {
+  const { value, setValue, maxHeight, onSubmit, disabled } = usePromptInput();
+  const textareaRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (disableAutosize || !textareaRef.current) return;
+    textareaRef.current.style.height = "auto";
+    textareaRef.current.style.height = typeof maxHeight === "number" ? `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px` : `min(${textareaRef.current.scrollHeight}px, ${maxHeight})`;
+  }, [value, maxHeight, disableAutosize]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit?.();
+    }
+    onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ref: textareaRef,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onKeyDown: handleKeyDown,
+      className: cn("text-base", className),
+      disabled,
+      placeholder,
+      ...props
     }
   );
-}
+};
+var PromptInputActions = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props, children });
+var PromptInputAction = ({
+  tooltip,
+  children,
+  side = "top",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(Tooltip, { ...props, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, children: tooltip })
+  ] });
+};
+var PromptInputBox = React3.forwardRef(
+  ({
+    onSend = () => {
+    },
+    onStop,
+    isLoading = false,
+    placeholder = "Type your message here...",
+    className,
+    selectedModel = "gpt-4o",
+    onModelChange,
+    availableModels = []
+  }, ref) => {
+    const [input, setInput] = React3.useState("");
+    const promptBoxRef = React3.useRef(null);
+    const handleSubmit = () => {
+      if (input.trim()) {
+        onSend(input);
+        setInput("");
+      }
+    };
+    const hasContent = input.trim() !== "";
+    return /* @__PURE__ */ jsxs(
+      PromptInput,
+      {
+        value: input,
+        onValueChange: setInput,
+        isLoading,
+        onSubmit: handleSubmit,
+        className: cn(
+          "w-full bg-[#1F2023] border-[#444444] shadow-[0_8px_30px_rgba(0,0,0,0.24)] transition-all duration-300 ease-in-out",
+          className
+        ),
+        disabled: isLoading,
+        ref: ref || promptBoxRef,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "transition-all duration-300 opacity-100", children: /* @__PURE__ */ jsx(PromptInputTextarea, { placeholder, className: "text-base" }) }),
+          /* @__PURE__ */ jsxs(PromptInputActions, { className: "flex items-center justify-between gap-2 p-0 pt-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center", children: availableModels.length > 0 && onModelChange && /* @__PURE__ */ jsx(
+              ModelSelector,
+              {
+                models: availableModels,
+                selectedModel,
+                onModelChange,
+                disabled: isLoading
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              PromptInputAction,
+              {
+                tooltip: isLoading ? "Stop generation" : hasContent ? "Send message" : "Type a message",
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "default",
+                    size: "icon",
+                    className: cn(
+                      "h-7 w-7 rounded-full transition-all duration-200",
+                      isLoading ? "!bg-red-500 hover:!bg-red-600 !text-white" : hasContent ? "!bg-white hover:!bg-white/80 !text-[#1F2023]" : "!bg-transparent hover:!bg-gray-600/30 !text-[#1F2023] hover:!text-[#1F2023]"
+                    ),
+                    onClick: () => {
+                      if (isLoading && onStop) {
+                        onStop();
+                      } else if (hasContent) {
+                        handleSubmit();
+                      }
+                    },
+                    children: isLoading ? /* @__PURE__ */ jsx(Square, { className: "h-3.5 w-3.5 fill-white text-white" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5 text-[#1F2023]" })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+PromptInputBox.displayName = "PromptInputBox";
 function CrowWidget({
   productId,
-  apiUrl,
-  model,
-  agentName = "Assistant",
-  defaultCollapsed = true,
-  onIdentify,
-  tools,
-  className,
-  zIndex = 999999
+  apiUrl = "",
+  variant = "floating",
+  styles: propStyles,
+  previewMode = false,
+  onReady
 }) {
-  const contextClient = useCrowClientOptional();
-  const standaloneClientRef = useRef(null);
-  if (!contextClient && !standaloneClientRef.current) {
-    standaloneClientRef.current = new CrowClient({ productId, apiUrl, model });
-  }
-  const client = contextClient || standaloneClientRef.current;
-  useEffect(() => {
-    return () => {
-      if (standaloneClientRef.current) {
-        standaloneClientRef.current.destroy();
+  const { styles: styles2, isLoading: isLoadingStyles, agentName } = useWidgetStyles({
+    productId,
+    apiUrl,
+    propStyles,
+    skip: previewMode
+  });
+  const messagesContainerRef = useRef(null);
+  const executeClientToolRef = useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(variant === "floating");
+  const [showConversationList, setShowConversationList] = useState(false);
+  const [isVerifiedUser, setIsVerifiedUser] = useState(false);
+  const {
+    activeWorkflow,
+    startWorkflow,
+    updateTodo,
+    markComplete,
+    endWorkflow
+  } = useWorkflow({
+    productId,
+    apiUrl,
+    conversationId: null,
+    selectedModel: DEFAULT_MODEL
+  });
+  const conversations = useConversations({ productId, apiUrl });
+  const [shouldRestoreHistory, setShouldRestoreHistory] = useState(false);
+  const hasRestoredHistoryRef = useRef(false);
+  const chat = useChat({
+    productId,
+    apiUrl,
+    onVerificationStatus: (isVerified) => {
+      setIsVerifiedUser(isVerified);
+    },
+    onConversationId: () => {
+    },
+    onWorkflowEvent: (event) => {
+      switch (event.type) {
+        case "started":
+          if (event.name && event.todos) {
+            startWorkflow(event.name, event.todos);
+          }
+          break;
+        case "todo_updated":
+          if (event.todoId && event.todoStatus) {
+            updateTodo(event.todoId, event.todoStatus);
+          }
+          break;
+        case "ended":
+          endWorkflow(2e3);
+          break;
+        case "complete_prompt":
+          markComplete();
+          break;
       }
-    };
-  }, []);
-  useEffect(() => {
-    if (tools) {
-      client.registerTools(tools);
+    },
+    onToolCall: (event) => {
+      if (event.type === "client_call" && event.toolName) {
+        console.log("[Crow Widget] Executing client tool:", event.toolName, event.arguments);
+        const result = executeClientToolRef.current?.(event.toolName, event.arguments || {});
+        result?.then((r) => console.log("[Crow Widget] Tool result:", r)).catch((e) => console.error("[Crow Widget] Tool error:", e));
+      }
+    },
+    onRestoredConversation: () => {
+      setShouldRestoreHistory(true);
     }
-  }, [client, tools]);
+  });
   useEffect(() => {
-    if (onIdentify) {
-      onIdentify((options) => client.identify(options));
+    if (shouldRestoreHistory && chat.conversationId && !hasRestoredHistoryRef.current) {
+      hasRestoredHistoryRef.current = true;
+      console.log("[Crow Widget] Restoring conversation history:", chat.conversationId);
+      conversations.loadAnonymousConversationHistory(chat.conversationId).then((historyMessages) => {
+        if (historyMessages.length > 0) {
+          chat.loadMessages(historyMessages);
+        }
+      });
+    }
+  }, [shouldRestoreHistory, chat.conversationId, conversations, chat]);
+  const workflowActions = useWorkflow({
+    productId,
+    apiUrl,
+    conversationId: chat.conversationId,
+    selectedModel: chat.selectedModel,
+    onMessage: (content) => {
+      chat.loadMessages([
+        ...chat.messages,
+        {
+          id: `bot-${Date.now()}`,
+          content,
+          isBot: true,
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
     }
-  }, [client, onIdentify]);
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-  const { messages, isLoading, sendMessage, stop, clearMessages } = useChat({
-    client
   });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ChatBubble, { isOpen: !isCollapsed, onClick: () => setIsCollapsed(!isCollapsed) }),
-    !isCollapsed && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx(
-          "crow-fixed crow-flex crow-flex-col",
-          "crow-bg-white crow-rounded-2xl crow-shadow-2xl",
-          "crow-border crow-border-gray-200",
-          "crow-overflow-hidden crow-animate-fade-in",
-          className
-        ),
-        style: {
-          zIndex,
-          right: "20px",
-          bottom: "90px",
-          width: "380px",
-          height: "550px",
-          maxHeight: "calc(100vh - 120px)"
-        },
-        children: [
+  const { executeClientTool } = useCrowAPI({
+    onIdentified: async () => {
+      setIsVerifiedUser(true);
+      await conversations.loadConversations();
+    },
+    onReset: () => {
+      setIsVerifiedUser(false);
+      chat.resetMessages();
+    }
+  });
+  executeClientToolRef.current = executeClientTool;
+  useEffect(() => {
+    if (!isLoadingStyles) {
+      onReady?.();
+    }
+  }, [isLoadingStyles, onReady]);
+  const handleSend = (message) => {
+    if (!message.trim()) return;
+    setIsCollapsed(false);
+    chat.sendMessage(message);
+  };
+  const handleNewChat = () => {
+    chat.resetMessages();
+    setShowConversationList(false);
+  };
+  const handleToggleHistory = () => {
+    setShowConversationList(!showConversationList);
+    if (!showConversationList) {
+      conversations.loadConversations();
+    }
+  };
+  const handleSelectConversation = async (convId) => {
+    const historyMessages = await conversations.loadConversationHistory(convId);
+    if (historyMessages.length > 0) {
+      chat.loadMessages(historyMessages);
+      chat.setConversationId(convId);
+    } else {
+      chat.resetMessages();
+    }
+    setShowConversationList(false);
+  };
+  const handleCloseConversationList = () => {
+    setShowConversationList(false);
+  };
+  const handleExitWorkflow = async () => {
+    await workflowActions.exitWorkflow();
+  };
+  const handleBubbleClick = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  return /* @__PURE__ */ jsxs(
+    WidgetStyleProvider,
+    {
+      styles: styles2,
+      agentName,
+      isLoading: isLoadingStyles,
+      variant,
+      children: [
+        variant === "floating" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ChatBubble, { isExpanded: !isCollapsed, onClick: handleBubbleClick }),
+          !isCollapsed && /* @__PURE__ */ jsxs(WidgetShell, { children: [
+            /* @__PURE__ */ jsx(
+              WidgetHeader,
+              {
+                isVerifiedUser,
+                showConversationList,
+                onNewChat: handleNewChat,
+                onToggleHistory: handleToggleHistory
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
+              ConversationList,
+              {
+                conversations: conversations.conversations,
+                currentConversationId: chat.conversationId,
+                onSelect: handleSelectConversation,
+                onClose: handleCloseConversationList
+              }
+            ) }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: activeWorkflow && /* @__PURE__ */ jsx(
+              WorkflowPanel,
+              {
+                workflow: activeWorkflow,
+                onExit: handleExitWorkflow
+              }
+            ) }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
+              MessageList,
+              {
+                messages: chat.messages,
+                activeToolCalls: chat.activeToolCalls,
+                isLoadingHistory: conversations.isLoadingHistory,
+                isGenerating: chat.isLoading
+              }
+            ) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-auto", children: [
+              /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
+              /* @__PURE__ */ jsx(
+                PromptInputBox,
+                {
+                  onSend: handleSend,
+                  onStop: chat.stopGeneration,
+                  placeholder: "Type your message...",
+                  isLoading: chat.isLoading,
+                  className: "!bg-white !border-gray-300 backdrop-blur-md"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        variant === "embedded" && /* @__PURE__ */ jsxs(WidgetShell, { children: [
           /* @__PURE__ */ jsx(
             WidgetHeader,
             {
-              title: agentName,
-              onNewChat: clearMessages,
-              showNewChat: true
+              isVerifiedUser,
+              showConversationList,
+              onNewChat: handleNewChat,
+              onToggleHistory: handleToggleHistory
             }
           ),
-          /* @__PURE__ */ jsx(
-            MessageList,
+          /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
+            ConversationList,
             {
-              messages,
-              isLoading,
-              className: "crow-flex-1"
+              conversations: conversations.conversations,
+              currentConversationId: chat.conversationId,
+              onSelect: handleSelectConversation,
+              onClose: handleCloseConversationList
             }
-          ),
-          /* @__PURE__ */ jsx(
-            PromptInput,
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: activeWorkflow && /* @__PURE__ */ jsx(
+            WorkflowPanel,
             {
-              onSend: sendMessage,
-              onStop: stop,
-              isLoading,
-              placeholder: "Type your message..."
+              workflow: activeWorkflow,
+              onExit: handleExitWorkflow
             }
-          )
-        ]
-      }
-    )
-  ] });
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory) && /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
+            MessageList,
+            {
+              messages: chat.messages,
+              activeToolCalls: chat.activeToolCalls,
+              isLoadingHistory: conversations.isLoadingHistory,
+              isGenerating: chat.isLoading
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-auto", children: [
+            /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
+            /* @__PURE__ */ jsx(
+              PromptInputBox,
+              {
+                onSend: handleSend,
+                onStop: chat.stopGeneration,
+                placeholder: "Type your message...",
+                isLoading: chat.isLoading,
+                className: "!bg-white !border-gray-300 backdrop-blur-md"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function CrowCopilot({
   productId,
-  apiUrl,
-  model,
+  apiUrl = "",
   title = "Copilot",
   position = "right",
   width = 400,
   showClose = false,
   onClose,
-  onIdentify,
-  tools,
-  className
+  styles: propStyles,
+  previewMode = false,
+  className,
+  onReady
 }) {
-  const contextClient = useCrowClientOptional();
-  const standaloneClientRef = useRef(null);
-  if (!contextClient && !standaloneClientRef.current && productId) {
-    standaloneClientRef.current = new CrowClient({ productId, apiUrl, model });
-  }
-  const client = contextClient || standaloneClientRef.current;
-  if (!client) {
-    console.error(
-      "[CrowCopilot] No client available. Either wrap in CrowProvider or provide productId prop."
-    );
-    return null;
-  }
-  useEffect(() => {
-    return () => {
-      if (standaloneClientRef.current) {
-        standaloneClientRef.current.destroy();
+  const { styles: styles2, isLoading: isLoadingStyles, agentName } = useCopilotStyles({
+    productId,
+    apiUrl,
+    propStyles,
+    skip: previewMode
+  });
+  const messagesContainerRef = useRef(null);
+  const executeClientToolRef = useRef(null);
+  const [showConversationList, setShowConversationList] = useState(false);
+  const [isVerifiedUser, setIsVerifiedUser] = useState(false);
+  const conversations = useConversations({ productId, apiUrl });
+  const [shouldRestoreHistory, setShouldRestoreHistory] = useState(false);
+  const hasRestoredHistoryRef = useRef(false);
+  const chat = useChat({
+    productId,
+    apiUrl,
+    onVerificationStatus: (isVerified) => {
+      setIsVerifiedUser(isVerified);
+    },
+    onConversationId: () => {
+    },
+    onToolCall: (event) => {
+      if (event.type === "client_call" && event.toolName) {
+        console.log("[Crow Copilot] Executing client tool:", event.toolName, event.arguments);
+        const result = executeClientToolRef.current?.(event.toolName, event.arguments || {});
+        result?.then((r) => console.log("[Crow Copilot] Tool result:", r)).catch((e) => console.error("[Crow Copilot] Tool error:", e));
       }
-    };
-  }, []);
-  useEffect(() => {
-    if (tools) {
-      client.registerTools(tools);
+    },
+    onRestoredConversation: () => {
+      setShouldRestoreHistory(true);
     }
-  }, [client, tools]);
+  });
   useEffect(() => {
-    if (onIdentify) {
-      onIdentify((options) => client.identify(options));
+    if (shouldRestoreHistory && chat.conversationId && !hasRestoredHistoryRef.current) {
+      hasRestoredHistoryRef.current = true;
+      conversations.loadAnonymousConversationHistory(chat.conversationId).then((historyMessages) => {
+        if (historyMessages.length > 0) {
+          chat.loadMessages(historyMessages);
+        }
+      });
+    }
+  }, [shouldRestoreHistory, chat.conversationId, conversations, chat]);
+  const { executeClientTool } = useCrowAPI({
+    onIdentified: async () => {
+      setIsVerifiedUser(true);
+      await conversations.loadConversations();
+    },
+    onReset: () => {
+      setIsVerifiedUser(false);
+      chat.resetMessages();
     }
-  }, [client, onIdentify]);
-  const { messages, isLoading, sendMessage, stop, clearMessages } = useChat({
-    client
   });
+  executeClientToolRef.current = executeClientTool;
+  useEffect(() => {
+    if (!isLoadingStyles) {
+      onReady?.();
+    }
+  }, [isLoadingStyles, onReady]);
+  const handleSend = (message) => {
+    if (!message.trim()) return;
+    chat.sendMessage(message);
+  };
+  const handleNewChat = () => {
+    chat.resetMessages();
+    setShowConversationList(false);
+  };
+  const handleToggleHistory = () => {
+    setShowConversationList(!showConversationList);
+    if (!showConversationList) {
+      conversations.loadConversations();
+    }
+  };
+  const handleSelectConversation = async (convId) => {
+    const historyMessages = await conversations.loadConversationHistory(convId);
+    if (historyMessages.length > 0) {
+      chat.loadMessages(historyMessages);
+      chat.setConversationId(convId);
+    } else {
+      chat.resetMessages();
+    }
+    setShowConversationList(false);
+  };
+  const handleCloseConversationList = () => {
+    setShowConversationList(false);
+  };
   const widthStyle = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsx(
+    CopilotStyleProvider,
+    {
+      styles: styles2,
+      agentName: agentName || title,
+      isLoading: isLoadingStyles,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex flex-col h-full bg-white ${position === "left" ? "border-r" : "border-l"} border-gray-200 ${className || ""}`,
+          style: {
+            width: widthStyle,
+            fontFamily: styles2.typography.fontFamily,
+            fontSize: styles2.typography.fontSize,
+            background: styles2.colors.background,
+            borderColor: styles2.colors.border
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between px-4 py-3 border-b",
+                style: {
+                  height: styles2.dimensions.headerHeight,
+                  borderColor: styles2.colors.border
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "font-semibold",
+                      style: {
+                        color: styles2.colors.text,
+                        fontSize: styles2.typography.headerFontSize
+                      },
+                      children: agentName || title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleNewChat,
+                        className: "p-1.5 hover:bg-gray-100 rounded transition-colors",
+                        "aria-label": "New Chat",
+                        title: "New Chat",
+                        children: /* @__PURE__ */ jsx(PlusIcon, { className: "w-4 h-4 text-gray-600" })
+                      }
+                    ),
+                    isVerifiedUser && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleToggleHistory,
+                        className: `p-1.5 hover:bg-gray-100 rounded transition-colors ${showConversationList ? "bg-gray-100" : ""}`,
+                        "aria-label": "Conversation History",
+                        title: "Conversation History",
+                        children: /* @__PURE__ */ jsx(HistoryIcon, { className: "w-4 h-4 text-gray-600" })
+                      }
+                    ),
+                    showClose && onClose && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        className: "p-1.5 hover:bg-gray-100 rounded transition-colors",
+                        "aria-label": "Close",
+                        children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-4 h-4 text-gray-600" })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
+              ConversationList,
+              {
+                conversations: conversations.conversations,
+                currentConversationId: chat.conversationId,
+                onSelect: handleSelectConversation,
+                onClose: handleCloseConversationList
+              }
+            ) }),
+            /* @__PURE__ */ jsx(MessagesContainer, { ref: messagesContainerRef, children: /* @__PURE__ */ jsx(
+              MessageList,
+              {
+                messages: chat.messages,
+                activeToolCalls: chat.activeToolCalls,
+                isLoadingHistory: conversations.isLoadingHistory,
+                isGenerating: chat.isLoading
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "p-3 border-t", style: { borderColor: styles2.colors.border }, children: [
+              styles2.branding.showPoweredBy && /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
+              /* @__PURE__ */ jsx(
+                PromptInputBox,
+                {
+                  onSend: handleSend,
+                  onStop: chat.stopGeneration,
+                  placeholder: "Ask anything...",
+                  isLoading: chat.isLoading,
+                  className: "!bg-white !border-gray-300"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function PlusIcon({ className }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    "svg",
     {
-      className: clsx(
-        "crow-flex crow-flex-col crow-h-full",
-        "crow-bg-white crow-border-gray-200",
-        position === "left" ? "crow-border-r" : "crow-border-l",
-        className
-      ),
-      style: { width: widthStyle },
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
       children: [
-        /* @__PURE__ */ jsx(
-          WidgetHeader,
-          {
-            title,
-            onNewChat: clearMessages,
-            onClose,
-            showNewChat: true,
-            showClose
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MessageList,
-          {
-            messages,
-            isLoading,
-            className: "crow-flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          PromptInput,
-          {
-            onSend: sendMessage,
-            onStop: stop,
-            isLoading,
-            placeholder: "Ask anything..."
-          }
-        )
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
       ]
     }
   );
 }
-function useIdentity({ client }) {
-  const [isIdentified, setIsIdentified] = useState(client.isIdentified());
-  const [isVerified, setIsVerified] = useState(client.isVerified());
-  useEffect(() => {
-    client.on({
-      onVerificationStatus: (verified) => {
-        setIsVerified(verified);
-      }
-    });
-    setIsIdentified(client.isIdentified());
-    setIsVerified(client.isVerified());
-  }, [client]);
-  const identify = useCallback(
-    (options) => {
-      client.identify(options);
-      setIsIdentified(true);
-    },
-    [client]
+function HistoryIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 7v5l4 2" })
+      ]
+    }
   );
-  const resetUser = useCallback(() => {
-    client.resetUser();
-    setIsIdentified(false);
-    setIsVerified(false);
-  }, [client]);
-  return {
-    isIdentified,
-    isVerified,
-    identify,
-    resetUser
-  };
 }
-function useConversations({
-  client
-}) {
-  const [conversations, setConversations] = useState([]);
-  const [isLoadingConversations, setIsLoadingConversations] = useState(false);
-  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
-  const loadConversations = useCallback(async () => {
-    setIsLoadingConversations(true);
-    try {
-      const convs = await client.getConversations();
-      setConversations(convs);
-    } finally {
-      setIsLoadingConversations(false);
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
     }
-  }, [client]);
-  const loadHistory = useCallback(
-    async (conversationId) => {
-      setIsLoadingHistory(true);
-      try {
-        return await client.loadHistory(conversationId);
-      } finally {
-        setIsLoadingHistory(false);
-      }
-    },
-    [client]
   );
-  const switchConversation = useCallback(
-    async (conversationId) => {
-      setIsLoadingHistory(true);
-      try {
-        await client.switchConversation(conversationId);
-      } finally {
-        setIsLoadingHistory(false);
-      }
-    },
-    [client]
-  );
-  const startNewConversation = useCallback(() => {
-    client.clearMessages();
+}
+var CrowContext = createContext(null);
+function CrowProvider({
+  children,
+  productId,
+  apiUrl,
+  model
+}) {
+  const clientRef = useRef(null);
+  if (!clientRef.current) {
+    clientRef.current = new CrowClient({ productId, apiUrl, model });
+  }
+  const client = clientRef.current;
+  useEffect(() => {
+    return () => {
+      client.destroy();
+    };
   }, [client]);
-  return {
-    conversations,
-    isLoadingConversations,
-    isLoadingHistory,
-    currentConversationId: client.conversationId,
-    loadConversations,
-    loadHistory,
-    switchConversation,
-    startNewConversation
-  };
+  const value = useMemo(() => ({ client }), [client]);
+  return /* @__PURE__ */ jsx(CrowContext.Provider, { value, children });
 }
 
-export { ChatBubble, CrowCopilot, CrowProvider, CrowWidget, MessageBubble, MessageList, PromptInput, WidgetHeader, useChat, useConversations, useCrowClient, useCrowClientOptional, useIdentity };
+export { AVAILABLE_MODELS, ChatBubble, ConversationList, CopilotStyleProvider, CrowCopilot, CrowProvider, CrowWidget, DEFAULT_COPILOT_STYLES, DEFAULT_MODEL, DEFAULT_WELCOME_MESSAGE, DEFAULT_WIDGET_STYLES, GlassCard, LoadingHistory, MESSAGES_CONTAINER_ID, MessageBubble, MessageList, MessagesContainer, ModelSelector, PoweredByBadge, PromptInputBox, ReasoningTrace, StreamingText, ThinkingIndicator, WidgetHeader, WidgetShell, WidgetStyleProvider, WorkflowPanel, clearStyleCache, mergeCopilotStyles, mergeWidgetStyles, stylesToCSSVariables, useChat, useConversations, useCopilotStyleContext, useCopilotStyles, useCopilotStyles2 as useCopilotStylesContext, useCrowAPI, usePreviewCopilotStyles, usePreviewWidgetStyles, useWidgetStyleContext, useWidgetStyles, useWidgetStyles2 as useWidgetStylesContext, useWorkflow };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map