@cadraos/sdk 0.1.2

package/dist/chat/index.js

@@ -0,0 +1,2277 @@
+import { createContext, useMemo, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+// src/chat/adapters/default-adapter.ts
+function createDefaultAdapter(config) {
+  const fetchFn = config.fetch ?? fetch;
+  const headers = () => {
+    const h = {
+      "Content-Type": "application/json"
+    };
+    if (config.apiKey) {
+      h["Authorization"] = `Bearer ${config.apiKey}`;
+    }
+    if (config.orgId) {
+      h["X-Org-Id"] = String(config.orgId);
+    }
+    return h;
+  };
+  async function request(method, path, body) {
+    const url = `${config.baseUrl}${path}`;
+    const response = await fetchFn(url, {
+      method,
+      headers: headers(),
+      body: body ? JSON.stringify(body) : void 0
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+      try {
+        const errorData = JSON.parse(errorText);
+        if (errorData.message) {
+          errorMessage = errorData.message;
+        }
+      } catch {
+        if (errorText) {
+          errorMessage = errorText;
+        }
+      }
+      throw new Error(errorMessage);
+    }
+    const text = await response.text();
+    if (!text) {
+      return void 0;
+    }
+    return JSON.parse(text);
+  }
+  return {
+    // -------------------------------------------------------------------------
+    // Execution Methods
+    // -------------------------------------------------------------------------
+    async startExecution(input) {
+      return request("POST", `/agents/${input.agentId}/execute`, {
+        sessionId: input.sessionId,
+        input: input.content,
+        attachmentUuids: input.attachmentUuids
+      });
+    },
+    async sendMessage(input) {
+      return request("POST", `/sessions/${input.sessionId}/messages`, {
+        content: input.content,
+        attachmentUuids: input.attachmentUuids
+      });
+    },
+    async cancelExecution(uuid) {
+      await request("POST", `/executions/${uuid}/cancel`);
+    },
+    async getExecution(uuid) {
+      return request("GET", `/executions/${uuid}`);
+    },
+    // -------------------------------------------------------------------------
+    // Attachment Methods
+    // -------------------------------------------------------------------------
+    async getUploadUrl(input) {
+      return request("POST", `/attachments/upload-url`, {
+        sessionId: input.sessionId,
+        filename: input.filename,
+        mimeType: input.mimeType,
+        size: input.size
+      });
+    },
+    async confirmUpload(uuid) {
+      await request("POST", `/attachments/${uuid}/confirm`);
+    },
+    async getDownloadUrl(uuid) {
+      const result = await request("GET", `/attachments/${uuid}/download-url`);
+      return result.url;
+    },
+    // -------------------------------------------------------------------------
+    // Artifact Methods
+    // -------------------------------------------------------------------------
+    async getSessionArtifacts(sessionId) {
+      const result = await request("GET", `/sessions/${sessionId}/artifacts`);
+      return result.data ?? [];
+    },
+    // -------------------------------------------------------------------------
+    // Session History Methods
+    // -------------------------------------------------------------------------
+    async getSessionHistory(sessionId) {
+      return request("GET", `/sessions/${sessionId}`);
+    },
+    // -------------------------------------------------------------------------
+    // SSE Stream URL
+    // -------------------------------------------------------------------------
+    getStreamUrl(executionId) {
+      const url = new URL(`${config.baseUrl}/executions/${executionId}/stream`);
+      if (config.apiKey) {
+        url.searchParams.set("apiKey", config.apiKey);
+      }
+      if (config.orgId) {
+        url.searchParams.set("orgId", String(config.orgId));
+      }
+      return url.toString();
+    }
+  };
+}
+var ChatConfigContext = createContext(null);
+function ChatConfigProvider({ config, children }) {
+  const adapter = useMemo(
+    () => createDefaultAdapter(config),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [config.baseUrl, config.apiKey, config.orgId]
+  );
+  const value = useMemo(() => ({ adapter }), [adapter]);
+  return /* @__PURE__ */ jsx(ChatConfigContext.Provider, { value, children });
+}
+function useChatConfig() {
+  const context = useContext(ChatConfigContext);
+  if (!context) {
+    throw new Error(
+      "useChatConfig must be used within ChatConfigProvider or provide adapter prop to AgentChat"
+    );
+  }
+  return context;
+}
+function useChatConfigOptional() {
+  return useContext(ChatConfigContext);
+}
+var STREAM_CONFIG = {
+  /** Maximum reconnection attempts before falling back to polling */
+  maxReconnectAttempts: 5,
+  /** Base reconnection delay in milliseconds (uses exponential backoff) */
+  baseReconnectDelayMs: 1e3,
+  /** Maximum reconnection delay in milliseconds */
+  maxReconnectDelayMs: 1e4,
+  /** Client-side activity timeout - should be 3x keepalive interval */
+  clientActivityTimeoutMs: 45e3
+};
+function useExecutionStream(options) {
+  const {
+    executionId,
+    getStreamUrl,
+    enabled = true,
+    onEvent,
+    onLog,
+    onToolCall,
+    onToolResult,
+    onProgress,
+    onComplete,
+    onError,
+    onClarification,
+    onConnectionChange
+  } = options;
+  const [isConnected, setIsConnected] = useState(false);
+  const [isUsingFallback, setIsUsingFallback] = useState(false);
+  const [connectionError, setConnectionError] = useState(null);
+  const eventSourceRef = useRef(null);
+  const reconnectTimeoutRef = useRef(null);
+  const activityTimeoutRef = useRef(null);
+  const reconnectAttemptsRef = useRef(0);
+  const seenEventIdsRef = useRef(/* @__PURE__ */ new Set());
+  const isTerminatedRef = useRef(false);
+  const cleanup = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (activityTimeoutRef.current) {
+      clearTimeout(activityTimeoutRef.current);
+      activityTimeoutRef.current = null;
+    }
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    seenEventIdsRef.current.clear();
+    setIsConnected(false);
+  }, []);
+  const resetActivityTimeout = useCallback(() => {
+    if (activityTimeoutRef.current) {
+      clearTimeout(activityTimeoutRef.current);
+    }
+    if (isTerminatedRef.current) return;
+    activityTimeoutRef.current = setTimeout(() => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+        setIsConnected(false);
+      }
+    }, STREAM_CONFIG.clientActivityTimeoutMs);
+  }, []);
+  const handleEvent = useCallback(
+    (event) => {
+      console.log("[useExecutionStream] Event received:", event.type, event.data);
+      try {
+        resetActivityTimeout();
+        const parsed = JSON.parse(event.data);
+        console.log("[useExecutionStream] Parsed event:", parsed.type, parsed);
+        if (parsed.id && seenEventIdsRef.current.has(parsed.id)) {
+          return;
+        }
+        if (parsed.id) {
+          seenEventIdsRef.current.add(parsed.id);
+          if (seenEventIdsRef.current.size > 1e3) {
+            const idsArray = Array.from(seenEventIdsRef.current);
+            seenEventIdsRef.current = new Set(idsArray.slice(-500));
+          }
+        }
+        onEvent?.(parsed);
+        const eventType = parsed.type;
+        const data = parsed.data;
+        switch (eventType) {
+          case "log":
+            if (data.log) {
+              onLog?.(data.log);
+              if (data.log.logType === "tool_call") {
+                const toolName = data.log.metadata?.toolName;
+                const args = data.log.metadata?.inputs;
+                if (toolName) {
+                  onToolCall?.(toolName, args);
+                }
+              } else if (data.log.logType === "tool_result") {
+                const toolName = data.log.metadata?.toolName;
+                const result = data.log.metadata?.output;
+                const durationMs = data.log.durationMs ?? 0;
+                if (toolName) {
+                  onToolResult?.(toolName, result, durationMs);
+                }
+              }
+            }
+            break;
+          case "step":
+            onProgress?.({
+              iteration: data.iteration,
+              tokenUsage: data.tokenUsage,
+              cost: data.cost
+            });
+            break;
+          case "tool_call":
+            if (data.toolName) {
+              onToolCall?.(data.toolName, data.args);
+            }
+            break;
+          case "complete":
+            isTerminatedRef.current = true;
+            if (activityTimeoutRef.current) {
+              clearTimeout(activityTimeoutRef.current);
+              activityTimeoutRef.current = null;
+            }
+            onComplete?.();
+            break;
+          case "error":
+            const errorMsg = data.error || "Unknown error";
+            isTerminatedRef.current = true;
+            if (activityTimeoutRef.current) {
+              clearTimeout(activityTimeoutRef.current);
+              activityTimeoutRef.current = null;
+            }
+            onError?.(errorMsg);
+            break;
+          case "timeout":
+            if (data.retryable && reconnectAttemptsRef.current < STREAM_CONFIG.maxReconnectAttempts) {
+              reconnectAttemptsRef.current++;
+              const delay = Math.min(
+                STREAM_CONFIG.baseReconnectDelayMs * Math.pow(2, reconnectAttemptsRef.current),
+                STREAM_CONFIG.maxReconnectDelayMs
+              );
+              setConnectionError("Stream timeout, reconnecting...");
+              reconnectTimeoutRef.current = setTimeout(() => {
+                setConnectionError(null);
+              }, delay);
+            } else {
+              setConnectionError("Stream timeout, using polling");
+              setIsUsingFallback(true);
+              onConnectionChange?.(false, true);
+              onError?.("Stream connection timed out. Updates will continue via polling.");
+            }
+            break;
+          case "info":
+            if (data.fallback === "polling") {
+              setIsUsingFallback(true);
+              onConnectionChange?.(true, true);
+            }
+            break;
+          case "connected":
+          case "subscribed":
+            setIsConnected(true);
+            setIsUsingFallback(data.redisAvailable === false);
+            onConnectionChange?.(true, data.redisAvailable === false);
+            break;
+          case "clarification":
+            if (data.question) {
+              onClarification?.({
+                question: data.question,
+                reason: data.reason,
+                suggestedOptions: data.suggestedOptions
+              });
+            }
+            break;
+        }
+      } catch {
+      }
+    },
+    [
+      onEvent,
+      onLog,
+      onToolCall,
+      onToolResult,
+      onProgress,
+      onComplete,
+      onError,
+      onClarification,
+      onConnectionChange,
+      resetActivityTimeout
+    ]
+  );
+  const connect = useCallback(() => {
+    console.log("[useExecutionStream] connect called", { executionId, enabled });
+    if (!executionId || !enabled) {
+      console.log("[useExecutionStream] Skipping - executionId or enabled is falsy");
+      return;
+    }
+    cleanup();
+    isTerminatedRef.current = false;
+    const url = getStreamUrl(executionId);
+    console.log("[useExecutionStream] Connecting to:", url);
+    try {
+      const eventSource = new EventSource(url, {
+        withCredentials: true
+      });
+      console.log("[useExecutionStream] EventSource created");
+      eventSource.onopen = () => {
+        console.log("[useExecutionStream] EventSource onopen");
+        reconnectAttemptsRef.current = 0;
+        setConnectionError(null);
+        resetActivityTimeout();
+      };
+      eventSource.onerror = (err) => {
+        console.log("[useExecutionStream] EventSource onerror", { readyState: eventSource.readyState, err });
+        if (eventSource.readyState === EventSource.CLOSED) {
+          setIsConnected(false);
+          if (reconnectAttemptsRef.current < STREAM_CONFIG.maxReconnectAttempts) {
+            reconnectAttemptsRef.current++;
+            const delay = Math.min(
+              STREAM_CONFIG.baseReconnectDelayMs * Math.pow(2, reconnectAttemptsRef.current),
+              STREAM_CONFIG.maxReconnectDelayMs
+            );
+            reconnectTimeoutRef.current = setTimeout(() => {
+              connect();
+            }, delay);
+          } else {
+            setConnectionError("Connection failed, using polling");
+            setIsUsingFallback(true);
+            onConnectionChange?.(false, true);
+          }
+        }
+      };
+      const eventTypes = [
+        "connected",
+        "subscribed",
+        "log",
+        "step",
+        "tool_call",
+        "complete",
+        "error",
+        "info",
+        "timeout",
+        "clarification"
+      ];
+      for (const eventType of eventTypes) {
+        eventSource.addEventListener(eventType, handleEvent);
+      }
+      eventSource.onmessage = handleEvent;
+      eventSourceRef.current = eventSource;
+    } catch {
+      setConnectionError("Failed to connect to stream");
+      setIsUsingFallback(true);
+      onConnectionChange?.(false, true);
+    }
+  }, [executionId, enabled, getStreamUrl, cleanup, handleEvent, onConnectionChange, resetActivityTimeout]);
+  const disconnect = useCallback(() => {
+    cleanup();
+  }, [cleanup]);
+  const reconnect = useCallback(() => {
+    reconnectAttemptsRef.current = 0;
+    isTerminatedRef.current = false;
+    setConnectionError(null);
+    setIsUsingFallback(false);
+    connect();
+  }, [connect]);
+  useEffect(() => {
+    console.log("[useExecutionStream] useEffect triggered", { executionId, enabled });
+    if (executionId && enabled) {
+      console.log("[useExecutionStream] Calling connect()");
+      connect();
+    }
+    return () => {
+      cleanup();
+    };
+  }, [executionId, enabled, connect, cleanup]);
+  return {
+    isConnected,
+    isUsingFallback,
+    connectionError,
+    disconnect,
+    reconnect
+  };
+}
+
+// src/chat/hooks/useAgentChat.ts
+function generateId() {
+  return `msg-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function historyToMessage(historyMsg) {
+  return {
+    id: historyMsg.uuid,
+    role: historyMsg.role,
+    content: historyMsg.content,
+    timestamp: new Date(historyMsg.timestamp),
+    attachments: historyMsg.attachments?.map((a) => ({
+      uuid: a.uuid,
+      filename: a.filename,
+      mimeType: a.mimeType,
+      size: a.size,
+      category: a.category,
+      previewUrl: a.previewUrl,
+      thumbnailUrl: a.thumbnailUrl,
+      status: "ready"
+    })),
+    toolCalls: historyMsg.toolCalls?.map((tc) => ({
+      id: tc.id,
+      name: tc.name,
+      args: tc.args,
+      result: tc.result,
+      status: tc.status,
+      durationMs: tc.durationMs
+    }))
+  };
+}
+function useAgentChat(options) {
+  const {
+    agentId,
+    sessionId: initialSessionId,
+    adapter: propsAdapter,
+    initialMessages = [],
+    onMessage,
+    onError,
+    onSessionCreated,
+    onSessionStart,
+    // Deprecated, but still supported
+    onToolCall,
+    onClarification
+  } = options;
+  const contextConfig = useChatConfigOptional();
+  const adapter = propsAdapter ?? contextConfig?.adapter;
+  if (!adapter) {
+    throw new Error(
+      "No adapter provided. Use ChatConfigProvider or pass adapter prop to AgentChat."
+    );
+  }
+  const [messages, setMessages] = useState(initialMessages);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const [error, setError] = useState(null);
+  const [currentSessionId, setCurrentSessionId] = useState(initialSessionId ?? null);
+  const [currentExecutionId, setCurrentExecutionId] = useState(null);
+  const [clarification, setClarification] = useState(null);
+  const hasLoadedInitialSession = useRef(false);
+  const streamingContentRef = useRef("");
+  const streamingMessageIdRef = useRef(null);
+  const pendingToolCallsRef = useRef(/* @__PURE__ */ new Map());
+  const lastMessageContentRef = useRef("");
+  const updateStreamingMessage = useCallback((content) => {
+    if (!streamingMessageIdRef.current) return;
+    setMessages(
+      (prev) => prev.map(
+        (msg) => msg.id === streamingMessageIdRef.current ? { ...msg, content, isStreaming: true } : msg
+      )
+    );
+  }, []);
+  const updateToolCall = useCallback((toolCall) => {
+    if (!streamingMessageIdRef.current) return;
+    setMessages(
+      (prev) => prev.map((msg) => {
+        if (msg.id !== streamingMessageIdRef.current) return msg;
+        const existingIndex = msg.toolCalls?.findIndex((tc) => tc.id === toolCall.id) ?? -1;
+        if (existingIndex >= 0) {
+          const newToolCalls = [...msg.toolCalls ?? []];
+          newToolCalls[existingIndex] = toolCall;
+          return { ...msg, toolCalls: newToolCalls };
+        } else {
+          return {
+            ...msg,
+            toolCalls: [...msg.toolCalls ?? [], toolCall]
+          };
+        }
+      })
+    );
+  }, []);
+  const finalizeStreamingMessage = useCallback(() => {
+    if (!streamingMessageIdRef.current) return;
+    setMessages(
+      (prev) => prev.map(
+        (msg) => msg.id === streamingMessageIdRef.current ? { ...msg, isStreaming: false } : msg
+      )
+    );
+    streamingMessageIdRef.current = null;
+    streamingContentRef.current = "";
+    pendingToolCallsRef.current.clear();
+  }, []);
+  const handleStreamLog = useCallback(
+    (log) => {
+      console.log("[useAgentChat] handleStreamLog:", log.logType, log.metadata);
+      switch (log.logType) {
+        // Primary handlers for ai-saas-api worker log types
+        case "llm_response": {
+          const llmText = log.metadata?.text || log.message || "";
+          if (llmText) {
+            streamingContentRef.current = llmText;
+            updateStreamingMessage(llmText);
+          }
+          break;
+        }
+        case "message": {
+          const role = log.metadata?.role;
+          const content = log.metadata?.content;
+          if (role === "assistant" && content) {
+            streamingContentRef.current = content;
+            updateStreamingMessage(content);
+          }
+          break;
+        }
+        case "info":
+        case "system":
+          console.log("[useAgentChat] Status:", log.logType, log.message);
+          break;
+        // Legacy/fallback handlers
+        case "response_text":
+        case "text_chunk": {
+          const text = log.metadata?.text || log.message || "";
+          streamingContentRef.current += text;
+          updateStreamingMessage(streamingContentRef.current);
+          break;
+        }
+        case "tool_call": {
+          const toolName = log.metadata?.toolName;
+          const toolCallId = log.metadata?.toolCallId || `tool-${Date.now()}`;
+          const args = log.metadata?.inputs;
+          const newToolCall = {
+            id: toolCallId,
+            name: toolName,
+            args,
+            status: "running"
+          };
+          pendingToolCallsRef.current.set(toolCallId, newToolCall);
+          updateToolCall(newToolCall);
+          onToolCall?.(toolName, args);
+          break;
+        }
+        case "tool_result": {
+          const resultToolName = log.metadata?.toolName;
+          const resultToolCallId = log.metadata?.toolCallId;
+          const result = log.metadata?.output;
+          const durationMs = log.durationMs;
+          let matchedToolCall = resultToolCallId ? pendingToolCallsRef.current.get(resultToolCallId) : void 0;
+          if (!matchedToolCall) {
+            for (const [, tc] of pendingToolCallsRef.current) {
+              if (tc.name === resultToolName && tc.status === "running") {
+                matchedToolCall = tc;
+                break;
+              }
+            }
+          }
+          if (matchedToolCall) {
+            const completedToolCall = {
+              ...matchedToolCall,
+              result,
+              status: "completed",
+              durationMs
+            };
+            updateToolCall(completedToolCall);
+            pendingToolCallsRef.current.delete(matchedToolCall.id);
+          }
+          break;
+        }
+        case "final_response": {
+          const finalText = log.metadata?.response || log.message || "";
+          if (finalText && finalText !== streamingContentRef.current) {
+            streamingContentRef.current = finalText;
+            updateStreamingMessage(finalText);
+          }
+          break;
+        }
+        default:
+          console.log("[useAgentChat] Unknown log type:", log.logType, log);
+      }
+    },
+    [updateStreamingMessage, updateToolCall, onToolCall]
+  );
+  const handleClarification = useCallback(
+    (data) => {
+      setClarification(data);
+      onClarification?.(data);
+    },
+    [onClarification]
+  );
+  const handleComplete = useCallback(() => {
+    console.log("[useAgentChat] handleComplete called");
+    setIsLoading(false);
+    finalizeStreamingMessage();
+    setCurrentExecutionId(null);
+  }, [finalizeStreamingMessage]);
+  const handleError = useCallback(
+    (errorMsg) => {
+      console.log("[useAgentChat] handleError called:", errorMsg);
+      const chatError = {
+        code: "EXECUTION_ERROR",
+        message: errorMsg,
+        retryable: true
+      };
+      setError(chatError);
+      setIsLoading(false);
+      finalizeStreamingMessage();
+      setCurrentExecutionId(null);
+      onError?.(chatError);
+    },
+    [finalizeStreamingMessage, onError]
+  );
+  const { isConnected, disconnect } = useExecutionStream({
+    executionId: currentExecutionId ?? void 0,
+    getStreamUrl: adapter.getStreamUrl,
+    enabled: !!currentExecutionId,
+    onLog: handleStreamLog,
+    onClarification: handleClarification,
+    onComplete: handleComplete,
+    onError: handleError
+  });
+  const sendMessage = useCallback(
+    async (content) => {
+      if (!content.trim()) return;
+      lastMessageContentRef.current = content;
+      setIsLoading(true);
+      setError(null);
+      setClarification(null);
+      const userMessage = {
+        id: generateId(),
+        role: "user",
+        content: content.trim(),
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, userMessage]);
+      onMessage?.(userMessage);
+      const assistantMessageId = generateId();
+      const assistantMessage = {
+        id: assistantMessageId,
+        role: "assistant",
+        content: "",
+        timestamp: /* @__PURE__ */ new Date(),
+        isStreaming: true,
+        toolCalls: []
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+      streamingMessageIdRef.current = assistantMessageId;
+      streamingContentRef.current = "";
+      try {
+        console.log("[useAgentChat] Starting execution...", { agentId, sessionId: currentSessionId });
+        const result = await adapter.startExecution({
+          agentId,
+          sessionId: currentSessionId ?? void 0,
+          content: content.trim()
+        });
+        console.log("[useAgentChat] Execution started:", result);
+        if (!currentSessionId && result.sessionId) {
+          setCurrentSessionId(result.sessionId);
+          onSessionCreated?.(result.sessionId);
+          onSessionStart?.(result.sessionId);
+        }
+        console.log("[useAgentChat] Setting executionId:", result.executionId);
+        setCurrentExecutionId(result.executionId);
+      } catch (err) {
+        console.error("[useAgentChat] Error starting execution:", err);
+        const errorMessage = err instanceof Error ? err.message : "Failed to send message";
+        handleError(errorMessage);
+      }
+    },
+    [
+      agentId,
+      currentSessionId,
+      adapter,
+      onMessage,
+      onSessionCreated,
+      onSessionStart,
+      handleError
+    ]
+  );
+  const respondToClarification = useCallback(
+    async (response) => {
+      if (!clarification) return;
+      setClarification(null);
+      await sendMessage(response);
+    },
+    [clarification, sendMessage]
+  );
+  const cancel = useCallback(async () => {
+    if (currentExecutionId) {
+      try {
+        await adapter.cancelExecution(currentExecutionId);
+      } catch {
+      }
+      disconnect();
+      setIsLoading(false);
+      finalizeStreamingMessage();
+      setCurrentExecutionId(null);
+    }
+  }, [currentExecutionId, adapter, disconnect, finalizeStreamingMessage]);
+  const retry = useCallback(() => {
+    if (lastMessageContentRef.current && error) {
+      setError(null);
+      sendMessage(lastMessageContentRef.current);
+    }
+  }, [error, sendMessage]);
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setCurrentSessionId(null);
+    hasLoadedInitialSession.current = false;
+  }, []);
+  const loadSession = useCallback(
+    async (sessionId) => {
+      if (!adapter.getSessionHistory) {
+        const loadError = {
+          code: "UNSUPPORTED_OPERATION",
+          message: "Session history loading is not supported by this adapter",
+          retryable: false
+        };
+        setError(loadError);
+        onError?.(loadError);
+        return;
+      }
+      setIsLoadingHistory(true);
+      setError(null);
+      try {
+        const history = await adapter.getSessionHistory(sessionId);
+        const loadedMessages = history.messages.map(historyToMessage);
+        setMessages(loadedMessages);
+        setCurrentSessionId(sessionId);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to load session history";
+        const loadError = {
+          code: "LOAD_HISTORY_ERROR",
+          message: errorMessage,
+          retryable: true
+        };
+        setError(loadError);
+        onError?.(loadError);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+    },
+    [adapter, onError]
+  );
+  useEffect(() => {
+    if (initialSessionId && !hasLoadedInitialSession.current) {
+      hasLoadedInitialSession.current = true;
+      loadSession(initialSessionId);
+    }
+  }, [initialSessionId, loadSession]);
+  const isStreaming = useMemo(
+    () => !!currentExecutionId && isConnected,
+    [currentExecutionId, isConnected]
+  );
+  return {
+    messages,
+    isLoading,
+    isStreaming,
+    isLoadingHistory,
+    error,
+    sessionId: currentSessionId,
+    clarification,
+    sendMessage,
+    respondToClarification,
+    cancel,
+    retry,
+    clearError,
+    clearMessages,
+    loadSession
+  };
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function SendIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" })
+    }
+  );
+}
+function MessageCircleIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })
+    }
+  );
+}
+function PaperclipIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+    }
+  );
+}
+function XIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+    }
+  );
+}
+function CheckIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function CheckCircleIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+      ]
+    }
+  );
+}
+function CopyIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+}
+function ChevronDownIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function ChevronRightIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+    }
+  );
+}
+function ChevronLeftIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+    }
+  );
+}
+function LoadingSpinner({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("animate-spin", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeOpacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 12a8 8 0 0 1 8-8",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function AlertCircleIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ]
+    }
+  );
+}
+function CircleIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" })
+    }
+  );
+}
+function StopCircleIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6" })
+      ]
+    }
+  );
+}
+function ImageIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
+      ]
+    }
+  );
+}
+function ImagesIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 22H4a2 2 0 0 1-2-2V6" }),
+        /* @__PURE__ */ jsx("path", { d: "m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "2" }),
+        /* @__PURE__ */ jsx("rect", { x: "6", y: "2", width: "16", height: "16", rx: "2" })
+      ]
+    }
+  );
+}
+function FileIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+      ]
+    }
+  );
+}
+function FileTextIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+        /* @__PURE__ */ jsx("polyline", { points: "10 9 9 9 8 9" })
+      ]
+    }
+  );
+}
+function CodeIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
+        /* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
+      ]
+    }
+  );
+}
+function ZoomInIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+        /* @__PURE__ */ jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+      ]
+    }
+  );
+}
+function ZoomOutIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+      ]
+    }
+  );
+}
+function DownloadIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+      ]
+    }
+  );
+}
+function ExternalLinkIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+      ]
+    }
+  );
+}
+function Minimize2Icon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "4 14 10 14 10 20" }),
+        /* @__PURE__ */ jsx("polyline", { points: "20 10 14 10 14 4" }),
+        /* @__PURE__ */ jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
+function Maximize2Icon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
+function BotIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 7v4" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", y1: "16", x2: "8", y2: "16" }),
+        /* @__PURE__ */ jsx("line", { x1: "16", y1: "16", x2: "16", y2: "16" })
+      ]
+    }
+  );
+}
+function UserIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+      ]
+    }
+  );
+}
+function SparklesIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 19l.5 1.5L7 21l-1.5.5L5 23l-.5-1.5L3 21l1.5-.5L5 19z" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 5l.5 1.5L21 7l-1.5.5L19 9l-.5-1.5L17 7l1.5-.5L19 5z" })
+      ]
+    }
+  );
+}
+function ListTodoIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsx("path", { d: "m3 17 2 2 4-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M13 6h8" }),
+        /* @__PURE__ */ jsx("path", { d: "M13 12h8" }),
+        /* @__PURE__ */ jsx("path", { d: "M13 18h8" })
+      ]
+    }
+  );
+}
+function HelpCircleIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  );
+}
+function DatabaseIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })
+      ]
+    }
+  );
+}
+function ClockIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+      ]
+    }
+  );
+}
+function cn2(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function ChatContainer({
+  children,
+  maxHeight = "600px",
+  className,
+  theme = "system"
+}) {
+  const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn2(
+        "flex flex-col bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden",
+        className
+      ),
+      style: { maxHeight: maxHeightValue },
+      "data-theme": theme,
+      children
+    }
+  );
+}
+function cn3(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function ChatInput({
+  onSend,
+  onStop,
+  placeholder = "Type a message...",
+  disabled = false,
+  isLoading = false,
+  enableAttachments = false,
+  className
+}) {
+  const [content, setContent] = 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`;
+    }
+  }, [content]);
+  const handleSubmit = useCallback(async () => {
+    const trimmedContent = content.trim();
+    if (!trimmedContent || disabled || isLoading) return;
+    setContent("");
+    await onSend(trimmedContent);
+  }, [content, disabled, isLoading, onSend]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleStopClick = useCallback(() => {
+    onStop?.();
+  }, [onStop]);
+  const canSend = content.trim().length > 0 && !disabled && !isLoading;
+  const showStopButton = isLoading && onStop;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn3(
+        "border-t border-gray-200 dark:border-gray-700 p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 relative", children: /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: content,
+              onChange: (e) => setContent(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              rows: 1,
+              className: cn3(
+                "w-full resize-none rounded-lg border px-4 py-3 text-sm",
+                "border-gray-300 dark:border-gray-600",
+                "bg-white dark:bg-gray-800",
+                "text-gray-900 dark:text-gray-100",
+                "placeholder-gray-500 dark:placeholder-gray-400",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              ),
+              style: { minHeight: "44px", maxHeight: "200px" }
+            }
+          ) }),
+          showStopButton ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleStopClick,
+              className: cn3(
+                "flex-shrink-0 p-3 rounded-lg transition-colors",
+                "bg-red-500 text-white hover:bg-red-600",
+                "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+              ),
+              "aria-label": "Stop generation",
+              children: /* @__PURE__ */ jsx(StopCircleIcon, { className: "h-5 w-5" })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleSubmit,
+              disabled: !canSend,
+              className: cn3(
+                "flex-shrink-0 p-3 rounded-lg transition-colors",
+                canSend ? "bg-blue-500 text-white hover:bg-blue-600" : "bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500",
+                "disabled:cursor-not-allowed",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              ),
+              "aria-label": "Send message",
+              children: isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(SendIcon, { className: "h-5 w-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: "Press Enter to send, Shift+Enter for new line" })
+      ]
+    }
+  );
+}
+function cn4(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function AskUserPrompt({
+  question,
+  options,
+  onSubmit,
+  required = true,
+  disabled = false,
+  status = "waiting",
+  className
+}) {
+  const [response, setResponse] = useState("");
+  const [selectedOption, setSelectedOption] = useState(null);
+  const handleSubmit = useCallback(() => {
+    const finalResponse = selectedOption || response.trim();
+    if (required && !finalResponse) return;
+    onSubmit(finalResponse);
+  }, [selectedOption, response, required, onSubmit]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleOptionSelect = useCallback((option) => {
+    setSelectedOption((prev) => prev === option ? null : option);
+    setResponse("");
+  }, []);
+  const isSubmitDisabled = disabled || status !== "waiting" || required && !response.trim() && !selectedOption;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn4(
+        "rounded-lg border p-4 space-y-3",
+        status === "waiting" ? "border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-950/20" : "border-green-200 bg-green-50/50 dark:border-green-800 dark:bg-green-950/20",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(MessageCircleIcon, { className: "h-5 w-5 text-blue-600 dark:text-blue-400" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-blue-900 dark:text-blue-100", children: "Agent needs your input" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn4(
+                "ml-auto text-xs px-2 py-1 rounded-full font-medium",
+                status === "waiting" ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300" : "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
+              ),
+              children: status === "waiting" ? "Waiting" : status === "submitted" ? "Submitted" : "Processing"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap", children: question }),
+        options && options.length > 0 && status === "waiting" && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: options.map((option, idx) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleOptionSelect(option),
+            disabled,
+            className: cn4(
+              "px-3 py-1.5 text-sm rounded-md border transition-all",
+              selectedOption === option ? "bg-blue-600 text-white border-blue-600 hover:bg-blue-700" : "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300",
+              disabled && "opacity-50 cursor-not-allowed"
+            ),
+            children: option
+          },
+          idx
+        )) }),
+        status === "waiting" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: response,
+              onChange: (e) => {
+                setResponse(e.target.value);
+                setSelectedOption(null);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder: options?.length ? "Or type a custom response..." : "Type your response...",
+              className: cn4(
+                "flex-1 min-h-[60px] px-3 py-2 text-sm resize-none rounded-md border",
+                "border-gray-300 dark:border-gray-600",
+                "bg-white dark:bg-gray-800",
+                "text-gray-900 dark:text-gray-100",
+                "placeholder-gray-500 dark:placeholder-gray-400",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                disabled && "opacity-50 cursor-not-allowed"
+              ),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleSubmit,
+              disabled: isSubmitDisabled,
+              className: cn4(
+                "self-end px-4 py-2 rounded-md text-white transition-colors",
+                "bg-blue-600 hover:bg-blue-700",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              ),
+              children: /* @__PURE__ */ jsx(SendIcon, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        status !== "waiting" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-green-700 dark:text-green-400", children: [
+          /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Response submitted:",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedOption || response })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function cn5(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function MarkdownContent({ content, className }) {
+  const components = useMemo(
+    () => ({
+      // Headers
+      h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-4 mb-2 first:mt-0", children }),
+      h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-4 mb-2 first:mt-0", children }),
+      h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mt-3 mb-1 first:mt-0", children }),
+      h4: ({ children }) => /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold mt-2 mb-1 first:mt-0", children }),
+      // Paragraphs
+      p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-2 last:mb-0 leading-relaxed", children }),
+      // Lists
+      ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside mb-2 space-y-1", children }),
+      ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal list-inside mb-2 space-y-1", children }),
+      li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "leading-relaxed", children }),
+      // Links
+      a: ({ href, children }) => /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline",
+          children
+        }
+      ),
+      // Tables
+      table: ({ children }) => /* @__PURE__ */ jsx("div", { className: "overflow-x-auto my-2", children: /* @__PURE__ */ jsx("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg", children }) }),
+      thead: ({ children }) => /* @__PURE__ */ jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children }),
+      tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children }),
+      tr: ({ children }) => /* @__PURE__ */ jsx("tr", { children }),
+      th: ({ children }) => /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children }),
+      td: ({ children }) => /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap", children }),
+      // Blockquotes
+      blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { className: "border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-2", children }),
+      // Horizontal rule
+      hr: () => /* @__PURE__ */ jsx("hr", { className: "my-4 border-gray-200 dark:border-gray-700" }),
+      // Strong and emphasis
+      strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }),
+      em: ({ children }) => /* @__PURE__ */ jsx("em", { className: "italic", children }),
+      // Strikethrough (GFM)
+      del: ({ children }) => /* @__PURE__ */ jsx("del", { className: "line-through text-gray-500 dark:text-gray-400", children }),
+      // Code - inline and blocks
+      code: ({ className: codeClassName, children, ...props }) => {
+        const isCodeBlock = /language-(\w+)/.exec(codeClassName || "");
+        const language = isCodeBlock ? isCodeBlock[1] : null;
+        if (isCodeBlock) {
+          return /* @__PURE__ */ jsxs("div", { className: "relative my-2", children: [
+            language && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 px-2 py-1 text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-bl rounded-tr border-b border-l border-gray-200 dark:border-gray-700", children: language }),
+            /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm", children: /* @__PURE__ */ jsx("code", { className: cn5("font-mono", codeClassName), ...props, children }) })
+          ] });
+        }
+        return /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono",
+            ...props,
+            children
+          }
+        );
+      },
+      // Pre element (for code blocks)
+      pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+      // Images
+      img: ({ src, alt }) => /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          className: "max-w-full h-auto rounded-lg my-2",
+          loading: "lazy"
+        }
+      ),
+      // Task lists (GFM)
+      input: ({ type, checked, disabled }) => {
+        if (type === "checkbox") {
+          return /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked,
+              disabled,
+              readOnly: true,
+              className: "mr-2 rounded border-gray-300 dark:border-gray-600"
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx("input", { type });
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn5("prose prose-sm dark:prose-invert max-w-none", className), children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children: content }) });
+}
+function cn6(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function formatToolName(toolName) {
+  if (!toolName) return toolName;
+  const prefixesToRemove = [
+    "skills_api_",
+    "tools_api_",
+    "tools_management_api_",
+    "browse_web_browse_web_",
+    "browse_web_browse_",
+    "browse_web_",
+    "notion_api_",
+    "google_api_",
+    "slack_api_",
+    "github_api_",
+    "search_api_",
+    "file_system_",
+    "code_execution_",
+    "data_analysis_",
+    "knowledge_base_",
+    "memory_api_",
+    "database_api_",
+    "email_api_",
+    "calendar_api_",
+    "storage_api_",
+    "api_"
+  ];
+  let cleanName = toolName;
+  let foundPrefix = true;
+  while (foundPrefix) {
+    foundPrefix = false;
+    for (const prefix of prefixesToRemove) {
+      if (cleanName.toLowerCase().startsWith(prefix)) {
+        cleanName = cleanName.slice(prefix.length);
+        foundPrefix = true;
+        break;
+      }
+    }
+  }
+  const words = cleanName.split("_");
+  const uniqueWords = [];
+  for (const word of words) {
+    if (uniqueWords.length === 0 || uniqueWords[uniqueWords.length - 1]?.toLowerCase() !== word.toLowerCase()) {
+      uniqueWords.push(word);
+    }
+  }
+  return uniqueWords.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function formatDuration(ms) {
+  if (ms < 1e3) {
+    return `${ms}ms`;
+  }
+  const seconds = (ms / 1e3).toFixed(1);
+  return `${seconds}s`;
+}
+function formatJsonPreview(data, maxLength = 100) {
+  if (data === void 0 || data === null) {
+    return String(data);
+  }
+  try {
+    const str = JSON.stringify(data, null, 2);
+    if (str.length > maxLength) {
+      return str.slice(0, maxLength) + "...";
+    }
+    return str;
+  } catch {
+    return String(data);
+  }
+}
+function ToolCallEntry({
+  toolCall,
+  className,
+  showFullJson = true
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const formattedName = useMemo(
+    () => formatToolName(toolCall.name),
+    [toolCall.name]
+  );
+  const statusIcon = useMemo(() => {
+    switch (toolCall.status) {
+      case "pending":
+        return /* @__PURE__ */ jsx(ClockIcon, { className: "h-4 w-4 text-gray-400" });
+      case "running":
+        return /* @__PURE__ */ jsx(LoadingSpinner, { className: "h-4 w-4 text-blue-500" });
+      case "completed":
+        return /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 text-green-500" });
+      case "failed":
+        return /* @__PURE__ */ jsx(AlertCircleIcon, { className: "h-4 w-4 text-red-500" });
+      default:
+        return null;
+    }
+  }, [toolCall.status]);
+  const statusColor = useMemo(() => {
+    switch (toolCall.status) {
+      case "pending":
+        return "border-gray-200 dark:border-gray-700";
+      case "running":
+        return "border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/20";
+      case "completed":
+        return "border-green-200 dark:border-green-800";
+      case "failed":
+        return "border-red-200 dark:border-red-800 bg-red-50/50 dark:bg-red-950/20";
+      default:
+        return "border-gray-200 dark:border-gray-700";
+    }
+  }, [toolCall.status]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn6(
+        "rounded-lg border text-sm",
+        statusColor,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsExpanded(!isExpanded),
+            className: "w-full flex items-center gap-2 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors rounded-lg",
+            children: [
+              isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-400 flex-shrink-0" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-gray-400 flex-shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: statusIcon }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-gray-100 truncate", children: formattedName }),
+              toolCall.status === "completed" && toolCall.durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-gray-500 dark:text-gray-400 flex-shrink-0", children: formatDuration(toolCall.durationMs) }),
+              toolCall.status === "failed" && toolCall.error && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-red-600 dark:text-red-400 truncate max-w-[150px]", children: toolCall.error })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 px-3 py-2 space-y-2", children: [
+          toolCall.args && Object.keys(toolCall.args).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 mb-1", children: "Input" }),
+            /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded p-2 text-xs overflow-x-auto font-mono text-gray-700 dark:text-gray-300", children: showFullJson ? JSON.stringify(toolCall.args, null, 2) : formatJsonPreview(toolCall.args, 200) })
+          ] }),
+          toolCall.status === "completed" && toolCall.result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 mb-1", children: "Output" }),
+            /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded p-2 text-xs overflow-x-auto font-mono text-gray-700 dark:text-gray-300 max-h-[200px]", children: showFullJson ? JSON.stringify(toolCall.result, null, 2) : formatJsonPreview(toolCall.result, 500) })
+          ] }),
+          toolCall.status === "failed" && toolCall.error && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-red-600 dark:text-red-400 mb-1", children: "Error" }),
+            /* @__PURE__ */ jsx("pre", { className: "bg-red-50 dark:bg-red-950/30 rounded p-2 text-xs overflow-x-auto font-mono text-red-700 dark:text-red-300", children: toolCall.error })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function cn7(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function ChatMessage({
+  message,
+  enableMarkdown = true,
+  showToolCalls = true,
+  className
+}) {
+  const isUser = message.role === "user";
+  const isAssistant = message.role === "assistant";
+  const formattedTime = useMemo(() => {
+    const date = message.timestamp instanceof Date ? message.timestamp : new Date(message.timestamp);
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }, [message.timestamp]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn7(
+        "flex gap-3 p-4",
+        isUser ? "flex-row-reverse" : "flex-row",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn7(
+              "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+              isUser ? "bg-blue-500 text-white" : "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
+            ),
+            children: isUser ? /* @__PURE__ */ jsx(UserIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(BotIcon, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn7(
+              "flex-1 min-w-0 space-y-2",
+              isUser ? "text-right" : "text-left"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn7(
+                    "flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400",
+                    isUser ? "justify-end" : "justify-start"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: isUser ? "You" : "Assistant" }),
+                    /* @__PURE__ */ jsx("span", { children: formattedTime }),
+                    message.isStreaming && /* @__PURE__ */ jsx(LoadingSpinner, { className: "h-3 w-3" })
+                  ]
+                }
+              ),
+              message.thinkingBlocks && message.thinkingBlocks.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: message.thinkingBlocks.map((block) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "bg-purple-50 dark:bg-purple-950/30 border border-purple-200 dark:border-purple-800 rounded-lg p-3 text-sm text-purple-800 dark:text-purple-200",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-purple-600 dark:text-purple-400 mb-1", children: "Thinking..." }),
+                    /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: block.content })
+                  ]
+                },
+                block.id
+              )) }),
+              message.content && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn7(
+                    "rounded-lg p-3",
+                    isUser ? "bg-blue-500 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                  ),
+                  children: isAssistant && enableMarkdown ? /* @__PURE__ */ jsx(MarkdownContent, { content: message.content }) : /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: message.content })
+                }
+              ),
+              showToolCalls && message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsx(
+                ToolCallEntry,
+                {
+                  toolCall
+                },
+                toolCall.id
+              )) }),
+              message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: message.attachments.map((attachment) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex items-center gap-2 bg-gray-100 dark:bg-gray-800 rounded-lg px-3 py-2 text-sm",
+                  children: /* @__PURE__ */ jsx("span", { className: "truncate max-w-[150px]", children: attachment.filename })
+                },
+                attachment.uuid
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function cn8(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function MessageList({
+  messages,
+  welcomeMessage = "Hello! How can I help you today?",
+  isLoading = false,
+  isStreaming = false,
+  isLoadingHistory = false,
+  enableMarkdown = true,
+  showToolCalls = true,
+  className
+}) {
+  const scrollRef = useRef(null);
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, isStreaming]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: scrollRef,
+      className: cn8(
+        "flex-1 overflow-y-auto",
+        className
+      ),
+      children: [
+        isLoadingHistory && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center text-gray-500 dark:text-gray-400", children: [
+          /* @__PURE__ */ jsx(LoadingSpinner, { className: "h-6 w-6 mx-auto mb-2" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Loading conversation..." })
+        ] }) }),
+        messages.length === 0 && !isLoading && !isLoadingHistory && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full p-8", children: /* @__PURE__ */ jsx("div", { className: "text-center text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx("p", { className: "text-lg", children: welcomeMessage }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: messages.map((message) => /* @__PURE__ */ jsx(
+          ChatMessage,
+          {
+            message,
+            enableMarkdown,
+            showToolCalls
+          },
+          message.id
+        )) }),
+        isLoading && !isStreaming && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center", children: /* @__PURE__ */ jsx(LoadingSpinner, { className: "h-4 w-4 text-gray-600 dark:text-gray-300" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Thinking..." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+      ]
+    }
+  );
+}
+function ErrorBanner({ error, onRetry, onDismiss }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3 bg-red-50 dark:bg-red-950/30 border-t border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(AlertCircleIcon, { className: "h-4 w-4 flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: error.message })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+      error.retryable && onRetry && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onRetry,
+          className: "text-red-600 dark:text-red-400 hover:underline font-medium",
+          children: "Retry"
+        }
+      ),
+      onDismiss && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onDismiss,
+          className: "p-1 hover:bg-red-100 dark:hover:bg-red-900/30 rounded",
+          "aria-label": "Dismiss error",
+          children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+function AgentChat({
+  agentId,
+  sessionId,
+  adapter,
+  onMessage,
+  onError,
+  onSessionCreated,
+  onSessionStart,
+  onToolCall,
+  onClarification,
+  initialMessages = [],
+  placeholder = "Type a message...",
+  welcomeMessage = "Hello! How can I help you today?",
+  maxHeight = "600px",
+  className,
+  theme = "system",
+  enableAttachments = false,
+  enableMarkdown = true,
+  showToolCalls = true
+}) {
+  const {
+    messages,
+    isLoading,
+    isStreaming,
+    isLoadingHistory,
+    error,
+    clarification,
+    sendMessage,
+    respondToClarification,
+    cancel,
+    retry,
+    clearError
+  } = useAgentChat({
+    agentId,
+    sessionId,
+    adapter,
+    initialMessages,
+    onMessage,
+    onError,
+    onSessionCreated,
+    onSessionStart,
+    onToolCall,
+    onClarification
+  });
+  return /* @__PURE__ */ jsxs(ChatContainer, { maxHeight, className, theme, children: [
+    /* @__PURE__ */ jsx(
+      MessageList,
+      {
+        messages,
+        welcomeMessage,
+        isLoading,
+        isStreaming,
+        isLoadingHistory,
+        enableMarkdown,
+        showToolCalls
+      }
+    ),
+    clarification && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-4", children: /* @__PURE__ */ jsx(
+      AskUserPrompt,
+      {
+        question: clarification.question,
+        options: clarification.suggestedOptions,
+        onSubmit: respondToClarification
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx(ErrorBanner, { error, onRetry: retry, onDismiss: clearError }),
+    /* @__PURE__ */ jsx(
+      ChatInput,
+      {
+        onSend: sendMessage,
+        onStop: isStreaming ? cancel : void 0,
+        placeholder,
+        disabled: !!clarification || isLoadingHistory,
+        isLoading,
+        enableAttachments
+      }
+    )
+  ] });
+}
+function cn9(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function TodoList({
+  todos,
+  collapsible = true,
+  defaultCollapsed = false,
+  title = "Task Progress",
+  className
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const stats = useMemo(() => {
+    const total = todos.length;
+    const completed = todos.filter((t) => t.status === "completed").length;
+    const inProgress = todos.filter((t) => t.status === "in_progress").length;
+    const pending = todos.filter((t) => t.status === "pending").length;
+    const progress = total > 0 ? completed / total * 100 : 0;
+    return { total, completed, inProgress, pending, progress };
+  }, [todos]);
+  const currentTask = useMemo(
+    () => todos.find((t) => t.status === "in_progress"),
+    [todos]
+  );
+  if (todos.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn9(
+        "rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn9(
+              "flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800/50",
+              collapsible && "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+            ),
+            onClick: collapsible ? () => setIsCollapsed(!isCollapsed) : void 0,
+            children: [
+              collapsible && (isCollapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-gray-500" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-500" })),
+              /* @__PURE__ */ jsx(ListTodoIcon, { className: "h-4 w-4 text-gray-600 dark:text-gray-400" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: title }),
+              /* @__PURE__ */ jsxs("span", { className: "ml-auto text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium", children: [
+                stats.completed,
+                "/",
+                stats.total
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "h-1 bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full bg-blue-500 transition-all duration-300",
+            style: { width: `${stats.progress}%` }
+          }
+        ) }),
+        currentTask && isCollapsed && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex items-center gap-2 text-sm border-t border-gray-100 dark:border-gray-700", children: [
+          /* @__PURE__ */ jsx(LoadingSpinner, { className: "h-3.5 w-3.5 text-blue-500" }),
+          /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400 truncate", children: currentTask.activeForm })
+        ] }),
+        !isCollapsed && /* @__PURE__ */ jsx("ul", { className: "divide-y divide-gray-100 dark:divide-gray-700", children: todos.map((todo, idx) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn9(
+              "px-3 py-2 flex items-start gap-2 text-sm",
+              todo.status === "in_progress" && "bg-blue-50/50 dark:bg-blue-950/20",
+              todo.status === "completed" && "opacity-60"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex-shrink-0", children: todo.status === "completed" ? /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600 dark:text-green-500" }) : todo.status === "in_progress" ? /* @__PURE__ */ jsx(LoadingSpinner, { className: "h-4 w-4 text-blue-500" }) : /* @__PURE__ */ jsx(CircleIcon, { className: "h-4 w-4 text-gray-300 dark:text-gray-600" }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn9(
+                    "text-gray-700 dark:text-gray-300",
+                    todo.status === "completed" && "line-through"
+                  ),
+                  children: todo.status === "in_progress" ? todo.activeForm : todo.content
+                }
+              ) }),
+              todo.status === "in_progress" && /* @__PURE__ */ jsx("span", { className: "text-xs px-2 py-0.5 rounded-full bg-blue-500 text-white font-medium flex-shrink-0", children: "Active" })
+            ]
+          },
+          idx
+        )) })
+      ]
+    }
+  );
+}
+
+export { AgentChat, AlertCircleIcon, AskUserPrompt, BotIcon, ChatConfigProvider, ChatContainer, ChatInput, ChatMessage, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleIcon, ClockIcon, CodeIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, FileIcon, FileTextIcon, HelpCircleIcon, ImageIcon, ImagesIcon, ListTodoIcon, LoadingSpinner, MarkdownContent, Maximize2Icon, MessageCircleIcon, MessageList, Minimize2Icon, PaperclipIcon, SendIcon, SparklesIcon, StopCircleIcon, TodoList, ToolCallEntry, UserIcon, XIcon, ZoomInIcon, ZoomOutIcon, createDefaultAdapter, useAgentChat, useChatConfig, useChatConfigOptional, useExecutionStream };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map