@iota-uz/sdk 0.1.2 → 0.3.0

package/dist/bichat/index.cjs

@@ -1,22 +1,25 @@
 'use strict';
 
-var ReactMarkdown = require('react-markdown');
-var remarkGfm = require('remark-gfm');
-var rehypeSanitize = require('rehype-sanitize');
+var React = require('react');
+var react = require('@phosphor-icons/react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
 var prism = require('react-syntax-highlighter/dist/esm/styles/prism');
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var react$1 = require('@phosphor-icons/react');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
 var dateFns = require('date-fns');
-var recharts = require('recharts');
+var reactDom = require('react-dom');
+var ReactApexChart = require('react-apexcharts');
+var ApexCharts = require('apexcharts');
 var framerMotion = require('framer-motion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefault(React);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
-var rehypeSanitize__default = /*#__PURE__*/_interopDefault(rehypeSanitize);
+var ReactApexChart__default = /*#__PURE__*/_interopDefault(ReactApexChart);
+var ApexCharts__default = /*#__PURE__*/_interopDefault(ApexCharts);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -28,50 +31,333 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// ui/src/bichat/utils/citationProcessor.ts
+function processCitations(content, citations) {
+  if (!citations || citations.length === 0) {
+    return { content, citations: [] };
+  }
+  const sortedCitations = [...citations].sort((a, b) => b.startIndex - a.startIndex);
+  let processedContent = content;
+  const processedCitations = [];
+  sortedCitations.forEach((citation, index) => {
+    const { startIndex, endIndex } = citation;
+    if (startIndex < 0 || endIndex > processedContent.length || startIndex >= endIndex) {
+      console.warn("[citationProcessor] Invalid citation indices:", {
+        startIndex,
+        endIndex,
+        contentLength: processedContent.length
+      });
+      return;
+    }
+    const displayIndex = citations.length - index;
+    const before = processedContent.slice(0, startIndex);
+    const after = processedContent.slice(endIndex);
+    processedContent = `${before}[${displayIndex}]${after}`;
+    processedCitations.unshift({
+      ...citation,
+      displayIndex
+    });
+  });
+  return {
+    content: processedContent,
+    citations: processedCitations
+  };
+}
+var init_citationProcessor = __esm({
+  "ui/src/bichat/utils/citationProcessor.ts"() {
+  }
+});
+exports.TableExportButton = void 0;
+var init_TableExportButton = __esm({
+  "ui/src/bichat/components/TableExportButton.tsx"() {
+    exports.TableExportButton = React.memo(function TableExportButton2({
+      onClick,
+      disabled = false,
+      label = "Export",
+      disabledTooltip = "Please wait..."
+    }) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick,
+          disabled,
+          className: "inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-green-600 dark:text-green-500 opacity-60 hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity",
+          "aria-label": label,
+          title: disabled ? disabledTooltip : label,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.FileXls, { size: 16, weight: "fill" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+          ]
+        }
+      );
+    });
+  }
+});
+var DEFAULT_EXPORT_MESSAGE; exports.TableWithExport = void 0;
+var init_TableWithExport = __esm({
+  "ui/src/bichat/components/TableWithExport.tsx"() {
+    init_TableExportButton();
+    DEFAULT_EXPORT_MESSAGE = "Export the table above to Excel";
+    exports.TableWithExport = React.memo(function TableWithExport2({
+      children,
+      sendMessage,
+      disabled = false,
+      exportMessage = DEFAULT_EXPORT_MESSAGE,
+      exportLabel = "Export"
+    }) {
+      const handleExport = React.useCallback(() => {
+        sendMessage?.(exportMessage);
+      }, [sendMessage, exportMessage]);
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "markdown-table-wrapper overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "markdown-table w-full border-collapse", children }) }),
+        sendMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(exports.TableExportButton, { onClick: handleExport, disabled, label: exportLabel }) })
+      ] });
+    });
+  }
+});
+
+// ui/src/bichat/components/CodeBlock.tsx
+var CodeBlock_exports = {};
+__export(CodeBlock_exports, {
+  CodeBlock: () => exports.CodeBlock,
+  default: () => CodeBlock_default
+});
+function normalizeLanguage(lang) {
+  if (!lang) return "text";
+  return languageMap[lang.toLowerCase()] || lang.toLowerCase();
+}
+function CodeBlock({
+  language,
+  value,
+  inline,
+  copyLabel = "Copy",
+  copiedLabel = "Copied!"
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const [isDarkMode, setIsDarkMode] = React.useState(getInitialDarkMode);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const copyTimeoutRef = React.useRef(null);
+  const normalizedLanguage = normalizeLanguage(language);
+  React.useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
+    setIsLoaded(true);
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current !== null) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      if (copyTimeoutRef.current !== null) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+        copyTimeoutRef.current = null;
+      }, 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  if (inline) {
+    return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 text-red-600 dark:text-red-400 rounded text-sm font-mono", children: value });
+  }
+  if (!isLoaded) {
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto my-4 border border-gray-300 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-gray-700 dark:text-gray-300 text-sm font-mono", children: value }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group my-4 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-700", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-gray-200 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400 font-medium uppercase", children: normalizedLanguage }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center gap-1.5",
+          title: copyLabel,
+          "aria-live": "polite",
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Check, { size: 16, className: "w-4 h-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: copiedLabel })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Copy, { size: 16, className: "w-4 h-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: copyLabel })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactSyntaxHighlighter.Prism,
+      {
+        language: normalizedLanguage,
+        style: isDarkMode ? prism.vscDarkPlus : prism.vs,
+        customStyle: {
+          margin: 0,
+          borderRadius: 0,
+          fontSize: "0.875rem",
+          lineHeight: "1.5",
+          padding: "1rem"
+        },
+        showLineNumbers: false,
+        wrapLines: true,
+        codeTagProps: {
+          style: {
+            fontFamily: '"JetBrains Mono", "Fira Code", "Menlo", monospace'
+          }
+        },
+        children: value
+      }
+    )
+  ] });
+}
+var getInitialDarkMode, languageMap; exports.CodeBlock = void 0; var CodeBlock_default;
+var init_CodeBlock = __esm({
+  "ui/src/bichat/components/CodeBlock.tsx"() {
+    getInitialDarkMode = () => {
+      if (typeof document === "undefined") return false;
+      return document.documentElement.classList.contains("dark");
+    };
+    languageMap = {
+      js: "javascript",
+      ts: "typescript",
+      jsx: "jsx",
+      tsx: "tsx",
+      py: "python",
+      rb: "ruby",
+      yml: "yaml",
+      yaml: "yaml",
+      sh: "bash",
+      bash: "bash",
+      json: "json",
+      xml: "xml",
+      html: "html",
+      css: "css",
+      sql: "sql",
+      go: "go",
+      java: "java",
+      cpp: "cpp",
+      c: "c",
+      csharp: "csharp",
+      php: "php"
+    };
+    exports.CodeBlock = React.memo(CodeBlock);
+    exports.CodeBlock.displayName = "CodeBlock";
+    CodeBlock_default = exports.CodeBlock;
+  }
+});
+
 // ui/src/bichat/components/MarkdownRenderer.tsx
 var MarkdownRenderer_exports = {};
 __export(MarkdownRenderer_exports, {
-  MarkdownRenderer: () => MarkdownRenderer
+  MarkdownRenderer: () => exports.MarkdownRenderer,
+  default: () => MarkdownRenderer_default
 });
-function MarkdownRenderer({ content }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-sm max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx(
-    ReactMarkdown__default.default,
-    {
-      remarkPlugins: [remarkGfm__default.default],
-      rehypePlugins: [rehypeSanitize__default.default],
-      components: {
-        code({ className, children, ...props }) {
-          const match = /language-(\w+)/.exec(className || "");
-          const isInline = !match;
-          return !isInline && match ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactSyntaxHighlighter.Prism,
+function MarkdownRenderer({
+  content,
+  citations,
+  sendMessage,
+  sendDisabled = false,
+  copyLabel = "Copy",
+  copiedLabel = "Copied!",
+  exportLabel = "Export"
+}) {
+  const processed = React.useMemo(() => {
+    return processCitations(content, citations);
+  }, [content, citations]);
+  const components = {
+    // Remove <pre> wrapper for code blocks - CodeBlock provides its own container
+    pre: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }),
+    code({ inline, className, children }) {
+      const match = /language-(\w+)/.exec(className || "");
+      const language = match ? match[1] : "";
+      const value = String(children).replace(/\n$/, "");
+      const isInline = inline === true;
+      if (isInline) {
+        return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 text-red-600 dark:text-red-400 rounded text-sm font-mono", children: value });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        React.Suspense,
+        {
+          fallback: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto my-4", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-sm font-mono", children: value }) }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            CodeBlock2,
             {
-              style: prism.tomorrow,
-              language: match[1],
-              PreTag: "div",
-              children: String(children).replace(/\n$/, "")
+              language,
+              value,
+              inline: false,
+              copyLabel,
+              copiedLabel
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("code", { className, ...props, children });
+          )
         }
-      },
-      children: content
-    }
-  ) });
+      );
+    },
+    p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "markdown-p my-2", children }),
+    a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "markdown-link text-[var(--bichat-primary)] hover:underline",
+        children
+      }
+    ),
+    h1: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "markdown-h1 text-2xl font-bold mt-6 mb-3", children }),
+    h2: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "markdown-h2 text-xl font-bold mt-5 mb-2", children }),
+    h3: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "markdown-h3 text-lg font-semibold mt-4 mb-2", children }),
+    h4: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "markdown-h4 text-base font-semibold mt-3 mb-1", children }),
+    h5: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "markdown-h5 text-sm font-semibold mt-2 mb-1", children }),
+    h6: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("h6", { className: "markdown-h6 text-sm font-medium mt-2 mb-1", children }),
+    ul: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "markdown-ul list-disc list-inside my-2 space-y-1", children }),
+    ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "markdown-ol list-decimal list-inside my-2 space-y-1", children }),
+    li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "markdown-li", children }),
+    blockquote: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "markdown-blockquote border-l-4 border-gray-300 dark:border-gray-600 pl-4 my-2 italic text-gray-600 dark:text-gray-400", children }),
+    table: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
+      exports.TableWithExport,
+      {
+        sendMessage,
+        disabled: sendDisabled,
+        exportLabel,
+        children
+      }
+    ),
+    thead: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "markdown-thead bg-gray-100 dark:bg-gray-800", children }),
+    tbody: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "markdown-tbody", children }),
+    tr: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "markdown-tr border-b border-gray-200 dark:border-gray-700", children }),
+    th: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "markdown-th px-3 py-2 text-left text-sm font-semibold text-gray-700 dark:text-gray-300", children }),
+    td: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "markdown-td px-3 py-2 text-sm text-gray-600 dark:text-gray-400", children }),
+    hr: () => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "markdown-hr my-4 border-gray-200 dark:border-gray-700" }),
+    strong: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "markdown-strong font-semibold", children }),
+    em: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("em", { className: "markdown-em italic", children })
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { remarkPlugins: [remarkGfm__default.default], components, children: processed.content }) });
 }
+var CodeBlock2; exports.MarkdownRenderer = void 0; var MarkdownRenderer_default;
 var init_MarkdownRenderer = __esm({
   "ui/src/bichat/components/MarkdownRenderer.tsx"() {
+    init_citationProcessor();
+    init_TableWithExport();
+    CodeBlock2 = React.lazy(() => Promise.resolve().then(() => (init_CodeBlock(), CodeBlock_exports)).then((module) => ({ default: module.CodeBlock })));
+    exports.MarkdownRenderer = React.memo(MarkdownRenderer);
+    exports.MarkdownRenderer.displayName = "MarkdownRenderer";
+    MarkdownRenderer_default = exports.MarkdownRenderer;
   }
 });
 
-// ui/src/bichat/types/index.ts
-var MessageRole = /* @__PURE__ */ ((MessageRole2) => {
-  MessageRole2["User"] = "user";
-  MessageRole2["Assistant"] = "assistant";
-  MessageRole2["System"] = "system";
-  MessageRole2["Tool"] = "tool";
-  return MessageRole2;
-})(MessageRole || {});
-
 // ui/src/bichat/utils/RateLimiter.ts
 var RateLimiter = class {
   constructor(config) {
@@ -113,41 +399,59 @@ var RateLimiter = class {
     this.timestamps = [];
   }
 };
-var ChatSessionContext = react.createContext(null);
+var ChatSessionContext = React.createContext(null);
 var DEFAULT_RATE_LIMIT_CONFIG = {
   maxRequests: 20,
   windowMs: 6e4
   // 1 minute
 };
+function generateTempId(prefix) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+function createPendingTurn(sessionId, content, attachments = []) {
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  return {
+    id: generateTempId("turn"),
+    sessionId,
+    userTurn: {
+      id: generateTempId("user"),
+      content,
+      attachments,
+      createdAt: now
+    },
+    // No assistantTurn yet - it will be added when streaming completes
+    createdAt: now
+  };
+}
 function ChatSessionProvider({
   dataSource,
   sessionId,
   rateLimiter: externalRateLimiter,
   children
 }) {
-  const [message, setMessage] = react.useState("");
-  const [messages, setMessages] = react.useState([]);
-  const [loading, setLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [currentSessionId, setCurrentSessionId] = react.useState(sessionId);
-  const [session, setSession] = react.useState(null);
-  const [fetching, setFetching] = react.useState(false);
-  const [pendingQuestion, setPendingQuestion] = react.useState(null);
-  const [streamingContent, setStreamingContent] = react.useState("");
-  const [isStreaming, setIsStreaming] = react.useState(false);
-  const abortControllerRef = react.useRef(null);
-  const [messageQueue, setMessageQueue] = react.useState([]);
-  const [codeOutputs, setCodeOutputs] = react.useState([]);
-  const rateLimiterRef = react.useRef(
+  const [message, setMessage] = React.useState("");
+  const [turns, setTurns] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [currentSessionId, setCurrentSessionId] = React.useState(sessionId);
+  const [session, setSession] = React.useState(null);
+  const [fetching, setFetching] = React.useState(false);
+  const [pendingQuestion, setPendingQuestion] = React.useState(null);
+  const [streamingContent, setStreamingContent] = React.useState("");
+  const [isStreaming, setIsStreaming] = React.useState(false);
+  const abortControllerRef = React.useRef(null);
+  const [messageQueue, setMessageQueue] = React.useState([]);
+  const [codeOutputs, setCodeOutputs] = React.useState([]);
+  const rateLimiterRef = React.useRef(
     externalRateLimiter || new RateLimiter(DEFAULT_RATE_LIMIT_CONFIG)
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     setCurrentSessionId(sessionId);
   }, [sessionId]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!currentSessionId || currentSessionId === "new") {
       setSession(null);
-      setMessages([]);
+      setTurns([]);
       setPendingQuestion(null);
       setFetching(false);
       return;
@@ -159,7 +463,7 @@ function ChatSessionProvider({
       if (cancelled) return;
       if (state) {
         setSession(state.session);
-        setMessages(state.messages);
+        setTurns(state.turns);
         setPendingQuestion(state.pendingQuestion || null);
       } else {
         setError("Session not found");
@@ -174,10 +478,10 @@ function ChatSessionProvider({
       cancelled = true;
     };
   }, [dataSource, currentSessionId]);
-  const handleCopy = react.useCallback(async (text) => {
+  const handleCopy = React.useCallback(async (text) => {
     await navigator.clipboard.writeText(text);
   }, []);
-  const sendMessageDirect = react.useCallback(
+  const sendMessageDirect = React.useCallback(
     async (content, attachments = []) => {
       if (!content.trim() || loading) return;
       if (!rateLimiterRef.current.canMakeRequest()) {
@@ -192,14 +496,8 @@ function ChatSessionProvider({
       setError(null);
       setStreamingContent("");
       abortControllerRef.current = new AbortController();
-      const tempUserMessage = {
-        id: `temp-user-${Date.now()}`,
-        sessionId: currentSessionId || "new",
-        role: "user" /* User */,
-        content,
-        createdAt: (/* @__PURE__ */ new Date()).toISOString()
-      };
-      setMessages((prev) => [...prev, tempUserMessage]);
+      const tempTurn = createPendingTurn(currentSessionId || "new", content, attachments);
+      setTurns((prev) => [...prev, tempTurn]);
       try {
         let activeSessionId = currentSessionId;
         let shouldNavigateAfter = false;
@@ -237,7 +535,7 @@ function ChatSessionProvider({
               const state = await dataSource.fetchSession(finalSessionId);
               if (state) {
                 setSession(state.session);
-                setMessages(state.messages);
+                setTurns(state.turns);
                 setPendingQuestion(state.pendingQuestion || null);
               }
             }
@@ -254,7 +552,7 @@ function ChatSessionProvider({
           setMessage(content);
           return;
         }
-        setMessages((prev) => prev.filter((m) => m.id !== tempUserMessage.id));
+        setTurns((prev) => prev.filter((t) => t.id !== tempTurn.id));
         const errorMessage = err instanceof Error ? err.message : "Failed to send message";
         setError(errorMessage);
         console.error("Send message error:", err);
@@ -267,7 +565,7 @@ function ChatSessionProvider({
     },
     [currentSessionId, loading, dataSource]
   );
-  const cancelStream = react.useCallback(() => {
+  const cancelStream = React.useCallback(() => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
       abortControllerRef.current = null;
@@ -275,7 +573,7 @@ function ChatSessionProvider({
       setLoading(false);
     }
   }, []);
-  const handleSubmit = react.useCallback(
+  const handleSubmit = React.useCallback(
     (e, attachments = []) => {
       e.preventDefault();
       if (!message.trim() && attachments.length === 0) return;
@@ -291,7 +589,7 @@ function ChatSessionProvider({
     },
     [message, sendMessageDirect]
   );
-  const handleUnqueue = react.useCallback(() => {
+  const handleUnqueue = React.useCallback(() => {
     if (messageQueue.length === 0) {
       return null;
     }
@@ -302,33 +600,30 @@ function ChatSessionProvider({
       attachments: lastQueued.attachments
     };
   }, [messageQueue]);
-  const handleRegenerate = react.useCallback(
-    async (messageId) => {
+  const handleRegenerate = React.useCallback(
+    async (turnId) => {
       if (!currentSessionId || currentSessionId === "new") return;
-      const messageIndex = messages.findIndex((m) => m.id === messageId);
-      if (messageIndex <= 0) return;
+      const turn = turns.find((t) => t.id === turnId);
+      if (!turn) return;
       setLoading(true);
       setError(null);
       try {
-        const userMessage = messages[messageIndex - 1];
-        if (userMessage && userMessage.role === "user" /* User */) {
-          await sendMessageDirect(userMessage.content, []);
-        }
+        await sendMessageDirect(turn.userTurn.content, turn.userTurn.attachments);
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Failed to regenerate message";
+        const errorMessage = err instanceof Error ? err.message : "Failed to regenerate response";
         setError(errorMessage);
         console.error("Regenerate error:", err);
       } finally {
         setLoading(false);
       }
     },
-    [messages, currentSessionId, sendMessageDirect]
+    [turns, currentSessionId, sendMessageDirect]
   );
-  const handleEdit = react.useCallback(
-    async (messageId, newContent) => {
+  const handleEdit = React.useCallback(
+    async (turnId, newContent) => {
       if (!currentSessionId || currentSessionId === "new") {
         setMessage(newContent);
-        setMessages((prev) => prev.filter((m) => m.id !== messageId));
+        setTurns((prev) => prev.filter((t) => t.id !== turnId));
         return;
       }
       setLoading(true);
@@ -345,7 +640,7 @@ function ChatSessionProvider({
     },
     [currentSessionId, sendMessageDirect]
   );
-  const handleSubmitQuestionAnswers = react.useCallback(
+  const handleSubmitQuestionAnswers = React.useCallback(
     (answers) => {
       if (!currentSessionId || !pendingQuestion) return;
       setLoading(true);
@@ -364,7 +659,7 @@ function ChatSessionProvider({
               try {
                 const state = await dataSource.fetchSession(currentSessionId);
                 if (state) {
-                  setMessages(state.messages);
+                  setTurns(state.turns);
                   setPendingQuestion(state.pendingQuestion || null);
                 } else {
                   setPendingQuestion(previousPendingQuestion);
@@ -391,7 +686,7 @@ function ChatSessionProvider({
     },
     [currentSessionId, pendingQuestion, dataSource]
   );
-  const handleCancelPendingQuestion = react.useCallback(async () => {
+  const handleCancelPendingQuestion = React.useCallback(async () => {
     if (!currentSessionId || !pendingQuestion) return;
     try {
       const result = await dataSource.cancelPendingQuestion(pendingQuestion.id);
@@ -408,7 +703,7 @@ function ChatSessionProvider({
   const value = {
     // State
     message,
-    messages,
+    turns,
     loading,
     error,
     currentSessionId,
@@ -437,13 +732,13 @@ function ChatSessionProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(ChatSessionContext.Provider, { value, children });
 }
 function useChat() {
-  const context = react.useContext(ChatSessionContext);
+  const context = React.useContext(ChatSessionContext);
   if (!context) {
     throw new Error("useChat must be used within ChatSessionProvider");
   }
   return context;
 }
-var IotaContext = react.createContext(null);
+var IotaContext = React.createContext(null);
 function IotaContextProvider({ children }) {
   const initialContext = window.__BICHAT_CONTEXT__;
   if (!initialContext) {
@@ -452,7 +747,7 @@ function IotaContextProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(IotaContext.Provider, { value: initialContext, children });
 }
 function useIotaContext() {
-  const context = react.useContext(IotaContext);
+  const context = React.useContext(IotaContext);
   if (!context) {
     throw new Error("useIotaContext must be used within IotaContextProvider");
   }
@@ -573,7 +868,7 @@ var defaultExamplePrompts = [
 function useBranding() {
   const context = useIotaContext();
   const { t } = useTranslation();
-  const branding = react.useMemo(() => {
+  const branding = React.useMemo(() => {
     const customBranding = context.extensions?.branding || {};
     let examplePrompts = customBranding.welcome?.examplePrompts;
     if (!examplePrompts || examplePrompts.length === 0) {
@@ -602,7 +897,7 @@ function ChatHeader({ session, onBack, logoSlot, actionsSlot }) {
     "button",
     {
       onClick: onBack,
-      className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+      className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 active:bg-gray-200 dark:active:bg-gray-600 rounded-lg transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50",
       "aria-label": t("chat.goBack"),
       children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
     }
@@ -684,25 +979,70 @@ function AttachmentGrid({
   attachments,
   onRemove,
   onView,
-  className = ""
+  className = "",
+  readonly = false,
+  maxDisplay,
+  maxCapacity = 10,
+  emptyMessage = "No images attached",
+  showCount = false
 }) {
-  if (attachments.length === 0) return null;
+  const displayedAttachments = React.useMemo(
+    () => maxDisplay && attachments.length > maxDisplay ? attachments.slice(0, maxDisplay) : attachments,
+    [attachments, maxDisplay]
+  );
+  const isAtMaxCapacity = attachments.length >= maxCapacity;
+  if (displayedAttachments.length === 0) {
+    if (!showCount) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-gray-500 dark:text-gray-400 py-4", children: emptyMessage });
+  }
+  const isEditable = !readonly && !!onRemove;
+  const isViewable = !readonly && !!onView;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-2 ${className}`, children: [
+    showCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
+      displayedAttachments.length,
+      " image",
+      displayedAttachments.length !== 1 ? "s" : "",
+      " attached"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2", children: displayedAttachments.map((attachment, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      MemoizedAttachmentItem,
+      {
+        attachment,
+        index,
+        onRemove: isEditable ? onRemove : void 0,
+        onView: isViewable ? onView : void 0
+      },
+      `${attachment.filename}-${index}`
+    )) }),
+    maxDisplay && attachments.length > maxDisplay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+      "+",
+      attachments.length - maxDisplay,
+      " more"
+    ] }),
+    isAtMaxCapacity && isEditable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-amber-600 dark:text-amber-400", children: [
+      "Maximum ",
+      maxCapacity,
+      " images"
+    ] })
+  ] });
+}
+function AttachmentItem({ attachment, index, onRemove, onView }) {
   const isEditable = !!onRemove;
   const isViewable = !!onView;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 ${className}`, children: attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         src: attachment.preview,
         alt: attachment.filename,
-        className: `w-full h-24 object-cover rounded-lg border border-gray-200 dark:border-gray-700 ${isViewable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
-        onClick: () => isViewable && onView(index),
+        className: `w-full h-24 object-cover rounded-lg border border-gray-200 dark:border-gray-700 ${isViewable ? "cursor-pointer hover:opacity-80 transition-opacity duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900" : ""}`,
+        onClick: () => isViewable && onView?.(index),
         role: isViewable ? "button" : void 0,
         tabIndex: isViewable ? 0 : void 0,
         onKeyDown: (e) => {
           if (isViewable && (e.key === "Enter" || e.key === " ")) {
             e.preventDefault();
-            onView(index);
+            onView?.(index);
           }
         }
       }
@@ -713,203 +1053,600 @@ function AttachmentGrid({
         type: "button",
         onClick: (e) => {
           e.stopPropagation();
-          onRemove(index);
+          onRemove?.(index);
         },
-        className: "absolute top-1 right-1 p-1 bg-red-500 hover:bg-red-600 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-md",
+        className: "absolute top-1 right-1 p-1 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all duration-150 shadow-md focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
         "aria-label": `Remove ${attachment.filename}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.X, { size: 16, weight: "bold" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 16, weight: "bold" })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 px-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400 truncate", title: attachment.filename, children: attachment.filename.length > 20 ? `${attachment.filename.substring(0, 20)}...` : attachment.filename }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "text-xs text-gray-600 dark:text-gray-400 truncate",
+          title: attachment.filename,
+          children: attachment.filename.length > 20 ? `${attachment.filename.substring(0, 20)}...` : attachment.filename
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-500", children: formatFileSize(attachment.sizeBytes) })
     ] })
-  ] }, index)) });
+  ] });
+}
+var MemoizedAttachmentItem = React__default.default.memo(
+  AttachmentItem,
+  (prevProps, nextProps) => {
+    return prevProps.attachment.base64Data === nextProps.attachment.base64Data && prevProps.attachment.filename === nextProps.attachment.filename && prevProps.attachment.preview === nextProps.attachment.preview && prevProps.index === nextProps.index && prevProps.onRemove === nextProps.onRemove && prevProps.onView === nextProps.onView;
+  }
+);
+var MemoizedAttachmentGrid = React__default.default.memo(AttachmentGrid);
+MemoizedAttachmentGrid.displayName = "AttachmentGrid";
+var AttachmentGrid_default = MemoizedAttachmentGrid;
+function useModalLock(isOpen) {
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen]);
+}
+function useFocusTrap(containerRef, isActive, restoreFocusOnDeactivate) {
+  React.useEffect(() => {
+    if (!isActive || !containerRef.current) return;
+    const container = containerRef.current;
+    const previouslyFocused = document.activeElement;
+    const getFocusableElements = () => {
+      const selector = [
+        "button:not([disabled])",
+        "[href]",
+        "input:not([disabled])",
+        "select:not([disabled])",
+        "textarea:not([disabled])",
+        '[tabindex]:not([tabindex="-1"])'
+      ].join(", ");
+      return Array.from(container.querySelectorAll(selector));
+    };
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+    const handleTabKey = (e) => {
+      if (e.key !== "Tab") return;
+      const focusableElements2 = getFocusableElements();
+      if (focusableElements2.length === 0) return;
+      const firstElement = focusableElements2[0];
+      const lastElement = focusableElements2[focusableElements2.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    };
+    container.addEventListener("keydown", handleTabKey);
+    return () => {
+      container.removeEventListener("keydown", handleTabKey);
+      if (restoreFocusOnDeactivate) {
+        restoreFocusOnDeactivate.focus();
+      } else if (previouslyFocused instanceof HTMLElement) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [containerRef, isActive, restoreFocusOnDeactivate]);
+}
+function SpinnerLoader({
+  size = "md",
+  message
+}) {
+  const sizeMap = {
+    sm: 16,
+    md: 32,
+    lg: 48
+  };
+  const sizeClasses5 = {
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    lg: "h-12 w-12"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.CircleNotch,
+      {
+        size: sizeMap[size],
+        className: `${sizeClasses5[size]} animate-spin text-[var(--bichat-primary)]`
+      }
+    ),
+    message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: message })
+  ] });
 }
-function ImageModal({ images, initialIndex, onClose }) {
-  const [currentIndex, setCurrentIndex] = react.useState(initialIndex);
-  const handlePrevious = () => {
-    setCurrentIndex((prev) => prev > 0 ? prev - 1 : images.length - 1);
+function DotsLoader({
+  size = "md",
+  message
+}) {
+  const dotSizeClasses = {
+    sm: "w-1.5 h-1.5",
+    md: "w-2 h-2",
+    lg: "w-3 h-3"
   };
-  const handleNext = () => {
-    setCurrentIndex((prev) => prev < images.length - 1 ? prev + 1 : 0);
+  const gapClasses2 = {
+    sm: "gap-0.5",
+    md: "gap-1",
+    lg: "gap-1.5"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex ${gapClasses2[size]}`, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${dotSizeClasses[size]} bg-[var(--bichat-primary)] rounded-full animate-bounce`,
+        style: { animationDelay: `${index * 0.15}s` }
+      },
+      index
+    )) }),
+    message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-gray-600 dark:text-gray-400", children: message })
+  ] });
+}
+function PulseLoader({
+  size = "md",
+  message
+}) {
+  const sizeClasses5 = {
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    lg: "h-12 w-12"
   };
-  react.useEffect(() => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${sizeClasses5[size]} bg-[var(--bichat-primary)] rounded-full animate-pulse` }),
+    message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: message })
+  ] });
+}
+function LoadingSpinner({ variant = "spinner", size = "md", message }) {
+  switch (variant) {
+    case "dots":
+      return /* @__PURE__ */ jsxRuntime.jsx(DotsLoader, { size, message });
+    case "pulse":
+      return /* @__PURE__ */ jsxRuntime.jsx(PulseLoader, { size, message });
+    case "spinner":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(SpinnerLoader, { size, message });
+  }
+}
+var MemoizedLoadingSpinner = React.memo(LoadingSpinner);
+MemoizedLoadingSpinner.displayName = "LoadingSpinner";
+var LoadingSpinner_default = MemoizedLoadingSpinner;
+function ImageModal({
+  isOpen,
+  onClose,
+  attachment,
+  allAttachments,
+  currentIndex = 0,
+  onNavigate
+}) {
+  const modalRef = React.useRef(null);
+  const [isImageLoaded, setIsImageLoaded] = React.useState(false);
+  const [imageError, setImageError] = React.useState(false);
+  const hasMultipleImages = allAttachments && allAttachments.length > 1;
+  const canNavigatePrev = hasMultipleImages && currentIndex > 0;
+  const canNavigateNext = hasMultipleImages && currentIndex < (allAttachments?.length || 1) - 1;
+  useModalLock(isOpen);
+  useFocusTrap(modalRef, isOpen);
+  React.useEffect(() => {
+    if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         onClose();
-      } else if (e.key === "ArrowLeft") {
-        handlePrevious();
-      } else if (e.key === "ArrowRight") {
-        handleNext();
+      } else if (e.key === "ArrowLeft" && onNavigate && canNavigatePrev) {
+        onNavigate("prev");
+      } else if (e.key === "ArrowRight" && onNavigate && canNavigateNext) {
+        onNavigate("next");
       }
     };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
-  react.useEffect(() => {
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "fixed inset-0 z-50 bg-black/90 flex items-center justify-center",
-      onClick: onClose,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Image viewer",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: onClose,
-            className: "absolute top-4 right-4 p-2 text-white hover:bg-white/10 rounded-lg transition-colors",
-            "aria-label": "Close image viewer",
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.X, { size: 24, weight: "bold" })
-          }
-        ),
-        images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                handlePrevious();
-              },
-              className: "absolute left-4 p-2 text-white hover:bg-white/10 rounded-lg transition-colors",
-              "aria-label": "Previous image",
-              children: /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretLeft, { size: 32, weight: "bold" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, onNavigate, canNavigatePrev, canNavigateNext]);
+  React.useEffect(() => {
+    setIsImageLoaded(false);
+    setImageError(false);
+  }, [attachment]);
+  if (!isOpen) return null;
+  const previewUrl = attachment.preview || createDataUrl(attachment.base64Data, attachment.mimeType);
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/90 transition-opacity duration-200 z-40",
+          onClick: onClose,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 flex items-center justify-center z-50 p-4",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "modal-image-title",
+          "aria-describedby": "modal-image-description",
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              onClick: (e) => {
-                e.stopPropagation();
-                handleNext();
-              },
-              className: "absolute right-4 p-2 text-white hover:bg-white/10 rounded-lg transition-colors",
-              "aria-label": "Next image",
-              children: /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretRight, { size: 32, weight: "bold" })
+              ref: modalRef,
+              className: "relative flex flex-col items-center justify-center w-full h-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "absolute top-4 right-4 z-50 flex items-center justify-center w-10 h-10 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors duration-200",
+                    "aria-label": "Close modal",
+                    type: "button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 24, weight: "bold" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center w-full h-full max-w-4xl", children: [
+                  !isImageLoaded && !imageError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner_default, {}) }),
+                  imageError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center text-white", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium mb-2", children: "Failed to load image" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-300", children: attachment.filename })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: previewUrl,
+                      alt: attachment.filename,
+                      className: `
+                max-w-4xl max-h-screen object-contain
+                transition-opacity duration-200
+                ${isImageLoaded ? "opacity-100" : "opacity-0"}
+              `,
+                      onLoad: () => setIsImageLoaded(true),
+                      onError: () => setImageError(true),
+                      loading: "lazy"
+                    }
+                  )
+                ] }),
+                isImageLoaded && !imageError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 flex flex-col items-center text-white text-center pb-4 bg-gradient-to-t from-black/50 to-transparent pt-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { id: "modal-image-title", className: "text-lg font-medium", children: attachment.filename }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { id: "modal-image-description", className: "text-sm text-gray-300 space-x-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatFileSize(attachment.sizeBytes) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: attachment.mimeType })
+                  ] })
+                ] }),
+                hasMultipleImages && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => onNavigate?.("prev"),
+                    disabled: !canNavigatePrev,
+                    className: `
+                absolute left-4 z-40 flex items-center justify-center w-12 h-12
+                rounded-full transition-all duration-200
+                ${canNavigatePrev ? "bg-white/10 hover:bg-white/20 text-white cursor-pointer" : "bg-white/5 text-white/30 cursor-not-allowed"}
+              `,
+                    "aria-label": "Previous image",
+                    type: "button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 28, weight: "bold" })
+                  }
+                ),
+                hasMultipleImages && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => onNavigate?.("next"),
+                    disabled: !canNavigateNext,
+                    className: `
+                absolute right-4 z-40 flex items-center justify-center w-12 h-12
+                rounded-full transition-all duration-200
+                ${canNavigateNext ? "bg-white/10 hover:bg-white/20 text-white cursor-pointer" : "bg-white/5 text-white/30 cursor-not-allowed"}
+              `,
+                    "aria-label": "Next image",
+                    type: "button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 28, weight: "bold" })
+                  }
+                ),
+                hasMultipleImages && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 left-4 bg-white/10 text-white px-3 py-1 rounded-full text-sm", children: [
+                  currentIndex + 1,
+                  " / ",
+                  allAttachments?.length
+                ] })
+              ]
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: images[currentIndex].preview,
-            alt: images[currentIndex].filename,
-            className: "max-w-[90vw] max-h-[90vh] object-contain",
-            onClick: (e) => e.stopPropagation()
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 text-white text-sm bg-black/50 px-4 py-2 rounded-lg backdrop-blur",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center font-medium mb-1", children: images[currentIndex].filename }),
-              images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-xs opacity-80", children: [
-                currentIndex + 1,
-                " / ",
-                images.length
-              ] })
-            ]
-          }
-        )
-      ]
-    }
+        }
+      )
+    ] }),
+    document.body
   );
 }
-function UserTurnView({ message }) {
-  const { handleEdit, handleCopy } = useChat();
-  const [selectedImageIndex, setSelectedImageIndex] = react.useState(null);
-  const handleCopyClick = async () => {
-    if (handleCopy) {
-      await handleCopy(message.content);
+var ImageModal_default = ImageModal;
+var defaultClassNames = {
+  root: "flex gap-3 justify-end group",
+  wrapper: "flex-1 flex flex-col items-end max-w-[75%]",
+  avatar: "flex-shrink-0 w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white font-medium text-sm",
+  bubble: "bg-primary-600 text-white rounded-2xl rounded-br-sm px-4 py-3",
+  content: "text-[15px] whitespace-pre-wrap break-words leading-relaxed",
+  attachments: "mb-2 w-full",
+  actions: "flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
+  actionButton: "p-1.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 rounded-md transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50",
+  timestamp: "text-xs text-gray-400 dark:text-gray-500 mr-1"
+};
+function mergeClassNames(defaults, overrides) {
+  if (!overrides) return defaults;
+  return {
+    root: overrides.root ?? defaults.root,
+    wrapper: overrides.wrapper ?? defaults.wrapper,
+    avatar: overrides.avatar ?? defaults.avatar,
+    bubble: overrides.bubble ?? defaults.bubble,
+    content: overrides.content ?? defaults.content,
+    attachments: overrides.attachments ?? defaults.attachments,
+    actions: overrides.actions ?? defaults.actions,
+    actionButton: overrides.actionButton ?? defaults.actionButton,
+    timestamp: overrides.timestamp ?? defaults.timestamp
+  };
+}
+function UserMessage({
+  turn,
+  turnId,
+  initials = "U",
+  slots,
+  classNames: classNameOverrides,
+  onCopy,
+  onEdit,
+  hideAvatar = false,
+  hideActions = false,
+  hideTimestamp = false
+}) {
+  const [selectedImageIndex, setSelectedImageIndex] = React.useState(null);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [draftContent, setDraftContent] = React.useState("");
+  const classes = mergeClassNames(defaultClassNames, classNameOverrides);
+  const imageAttachments = turn.attachments.filter((a) => a.mimeType.startsWith("image/")).map((a) => ({
+    filename: a.filename,
+    mimeType: a.mimeType,
+    sizeBytes: a.sizeBytes,
+    base64Data: a.base64Data || "",
+    preview: a.base64Data ? `data:${a.mimeType};base64,${a.base64Data}` : ""
+  }));
+  const handleCopyClick = React.useCallback(async () => {
+    if (onCopy) {
+      await onCopy(turn.content);
     } else {
       try {
-        await navigator.clipboard.writeText(message.content);
+        await navigator.clipboard.writeText(turn.content);
       } catch (err) {
         console.error("Failed to copy:", err);
       }
     }
-  };
-  const handleEditClick = () => {
-    if (handleEdit) {
-      const newContent = prompt("Edit message:", message.content);
-      if (newContent && newContent !== message.content) {
-        handleEdit(message.id, newContent);
-      }
+  }, [onCopy, turn.content]);
+  const handleEditClick = React.useCallback(() => {
+    if (onEdit && turnId) {
+      setDraftContent(turn.content);
+      setIsEditing(true);
     }
+  }, [onEdit, turnId, turn.content]);
+  const handleEditCancel = React.useCallback(() => {
+    setIsEditing(false);
+    setDraftContent("");
+  }, []);
+  const handleEditSave = React.useCallback(() => {
+    if (!onEdit || !turnId) return;
+    const newContent = draftContent;
+    if (!newContent.trim()) return;
+    if (newContent === turn.content) {
+      setIsEditing(false);
+      return;
+    }
+    onEdit(turnId, newContent);
+    setIsEditing(false);
+  }, [onEdit, turnId, draftContent, turn.content]);
+  const handleNavigate = React.useCallback(
+    (direction) => {
+      if (selectedImageIndex === null) return;
+      if (direction === "prev" && selectedImageIndex > 0) {
+        setSelectedImageIndex(selectedImageIndex - 1);
+      } else if (direction === "next" && selectedImageIndex < imageAttachments.length - 1) {
+        setSelectedImageIndex(selectedImageIndex + 1);
+      }
+    },
+    [selectedImageIndex, imageAttachments.length]
+  );
+  const currentAttachment = selectedImageIndex !== null ? imageAttachments[selectedImageIndex] : null;
+  const timestamp = dateFns.formatDistanceToNow(new Date(turn.createdAt), { addSuffix: true });
+  const avatarSlotProps = { initials };
+  const contentSlotProps = { content: turn.content };
+  const attachmentsSlotProps = {
+    attachments: imageAttachments,
+    onView: (index) => setSelectedImageIndex(index)
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end group", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-end max-w-[75%]", children: [
-      message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-        AttachmentGrid,
-        {
-          attachments: message.attachments,
-          onView: (index) => setSelectedImageIndex(index)
-        }
+  const actionsSlotProps = {
+    onCopy: handleCopyClick,
+    onEdit: onEdit && turnId ? handleEditClick : void 0,
+    timestamp,
+    canCopy: true,
+    canEdit: !!onEdit && !!turnId
+  };
+  const renderSlot = (slot, props, defaultContent) => {
+    if (slot === void 0) return defaultContent;
+    if (typeof slot === "function") return slot(props);
+    return slot;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.wrapper, children: [
+      imageAttachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.attachments, children: renderSlot(
+        slots?.attachments,
+        attachmentsSlotProps,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AttachmentGrid_default,
+          {
+            attachments: imageAttachments,
+            onView: (index) => setSelectedImageIndex(index)
+          }
+        )
       ) }),
-      message.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary-600 text-white rounded-2xl rounded-br-sm px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[15px] whitespace-pre-wrap break-words leading-relaxed", children: message.content }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 mr-1", children: dateFns.formatDistanceToNow(new Date(message.createdAt), { addSuffix: true }) }),
+      turn.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.bubble, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.content, children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          "textarea",
           {
-            onClick: handleCopyClick,
-            className: "p-1.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-150",
-            "aria-label": "Copy message",
-            title: "Copy",
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Copy, { size: 14, weight: "regular" })
+            value: draftContent,
+            onChange: (e) => setDraftContent(e.target.value),
+            className: "w-full min-h-[80px] resize-y rounded-lg px-3 py-2 bg-white/10 text-white placeholder-white/70 outline-none focus:ring-2 focus:ring-white/30",
+            "aria-label": "Edit message"
           }
         ),
-        handleEdit && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleEditClick,
-            className: "p-1.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-150",
-            "aria-label": "Edit message",
-            title: "Edit",
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.PencilSimple, { size: 14, weight: "regular" })
-          }
-        )
-      ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleEditCancel,
+              className: "px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/15 transition-colors text-sm font-medium",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleEditSave,
+              className: "px-3 py-1.5 rounded-lg bg-white/20 hover:bg-white/25 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed",
+              disabled: !draftContent.trim() || draftContent === turn.content,
+              children: "Save"
+            }
+          )
+        ] })
+      ] }) : renderSlot(slots?.content, contentSlotProps, turn.content) }) }),
+      !hideActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: renderSlot(
+        slots?.actions,
+        actionsSlotProps,
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          !hideTimestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.timestamp, children: timestamp }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleCopyClick,
+              className: classes.actionButton,
+              "aria-label": "Copy message",
+              title: "Copy",
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.Copy, { size: 14, weight: "regular" })
+            }
+          ),
+          onEdit && turnId && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleEditClick,
+              className: classes.actionButton,
+              "aria-label": "Edit message",
+              title: "Edit",
+              disabled: isEditing,
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.PencilSimple, { size: 14, weight: "regular" })
+            }
+          )
+        ] })
+      ) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white font-medium text-sm", children: "U" }),
-    selectedImageIndex !== null && message.attachments && /* @__PURE__ */ jsxRuntime.jsx(
-      ImageModal,
+    !hideAvatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.avatar, children: renderSlot(slots?.avatar, avatarSlotProps, initials) }),
+    currentAttachment && /* @__PURE__ */ jsxRuntime.jsx(
+      ImageModal_default,
       {
-        images: message.attachments,
-        initialIndex: selectedImageIndex,
-        onClose: () => setSelectedImageIndex(null)
+        isOpen: selectedImageIndex !== null,
+        onClose: () => setSelectedImageIndex(null),
+        attachment: currentAttachment,
+        allAttachments: imageAttachments,
+        currentIndex: selectedImageIndex ?? 0,
+        onNavigate: handleNavigate
       }
     )
   ] });
 }
+function UserTurnView({
+  turn,
+  slots,
+  classNames,
+  initials = "U",
+  hideAvatar,
+  hideActions,
+  hideTimestamp
+}) {
+  const { handleEdit, handleCopy } = useChat();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UserMessage,
+    {
+      turn: turn.userTurn,
+      turnId: turn.id,
+      initials,
+      slots,
+      classNames,
+      onCopy: handleCopy,
+      onEdit: handleEdit,
+      hideAvatar,
+      hideActions,
+      hideTimestamp
+    }
+  );
+}
+function toBase64(str) {
+  const bytes = new TextEncoder().encode(str);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
 function CodeOutputsPanel({ outputs }) {
   if (!outputs || outputs.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Code Output" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: outputs.map((output, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      output.type === "image" && /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: output.content.preview,
-          alt: "Code output",
-          className: "max-w-full rounded border border-gray-300 dark:border-gray-600"
-        }
-      ),
-      output.type === "text" && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs bg-white dark:bg-gray-800 p-2 rounded overflow-x-auto border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-gray-900 dark:text-gray-100", children: output.content }) }),
-      output.type === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-2 rounded border border-red-200 dark:border-red-800", children: output.content })
+      output.type === "image" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: output.content.startsWith("data:") ? output.content : `data:${output.mimeType || "image/png"};base64,${output.content}`,
+            alt: output.filename || "Code output",
+            className: "max-w-full rounded border border-gray-300 dark:border-gray-600"
+          }
+        ),
+        output.filename && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-white text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: output.filename }),
+          output.sizeBytes && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300", children: formatFileSize(output.sizeBytes) })
+        ] }) })
+      ] }),
+      output.type === "text" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs bg-white dark:bg-gray-800 p-2 rounded overflow-x-auto border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-gray-900 dark:text-gray-100", children: output.content }) }),
+        output.filename && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: `data:${output.mimeType || "text/plain"};base64,${toBase64(output.content)}`,
+              download: output.filename,
+              className: "flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(react.Download, { size: 12, weight: "bold" }),
+                output.filename
+              ]
+            }
+          ),
+          output.sizeBytes && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-500 dark:text-gray-400", children: [
+            "(",
+            formatFileSize(output.sizeBytes),
+            ")"
+          ] })
+        ] })
+      ] }),
+      output.type === "error" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-2 rounded border border-red-200 dark:border-red-800", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: output.content })
+      ] })
     ] }, index)) })
   ] });
 }
+var CodeOutputsPanel_default = CodeOutputsPanel;
 function StreamingCursor() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -919,67 +1656,101 @@ function StreamingCursor() {
     }
   );
 }
-var COLORS = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
+var StreamingCursor_default = StreamingCursor;
+var DEFAULT_COLORS = ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"];
 function ChartCard({ chartData }) {
-  const { type, title, data, xAxisKey = "name", yAxisKey = "value" } = chartData;
-  const renderChart = () => {
-    switch (type) {
-      case "bar":
-        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey }),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: yAxisKey, fill: "#3b82f6" })
-        ] });
-      case "line":
-        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey }),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { type: "monotone", dataKey: yAxisKey, stroke: "#3b82f6" })
-        ] });
-      case "pie":
-        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.Pie,
-            {
-              data,
-              dataKey: yAxisKey,
-              nameKey: xAxisKey,
-              cx: "50%",
-              cy: "50%",
-              outerRadius: 80,
-              label: true,
-              children: data.map((_entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: COLORS[index % COLORS.length] }, `cell-${index}`))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
-        ] });
-      case "area":
-        return /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xAxisKey }),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Area, { type: "monotone", dataKey: yAxisKey, stroke: "#3b82f6", fill: "#3b82f6" })
-        ] });
-      default:
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Unsupported chart type" });
+  const chartId = React.useId().replace(/:/g, "_");
+  const [isExporting, setIsExporting] = React.useState(false);
+  const { chartType, title, series, labels, colors, height = 350 } = chartData;
+  const hasValidData = series && series.length > 0 && series.some((s) => s.data && s.data.length > 0);
+  if (!hasValidData) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white dark:bg-gray-800 rounded-lg border border-[var(--bichat-border)] p-4 my-2 shadow-sm w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-gray-500 dark:text-gray-400 text-sm", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+        title,
+        ": "
+      ] }),
+      "No data available for chart visualization."
+    ] }) });
+  }
+  const apexSeries = chartType === "pie" || chartType === "donut" ? series[0]?.data ?? [] : series.map((s) => ({ name: s.name, data: s.data }));
+  const xaxisConfig = chartType !== "pie" && chartType !== "donut" ? { categories: (labels ?? []).filter((l) => l !== null) } : {};
+  const labelsConfig = chartType === "pie" || chartType === "donut" ? (labels ?? []).filter((l) => l !== null) : [];
+  const options = {
+    chart: {
+      id: chartId,
+      type: chartType,
+      toolbar: { show: false },
+      animations: { enabled: false }
+    },
+    title: {
+      text: title,
+      align: "left",
+      style: { fontSize: "14px", fontWeight: 600 }
+    },
+    colors: colors?.length ? colors : DEFAULT_COLORS,
+    xaxis: xaxisConfig,
+    labels: labelsConfig,
+    legend: { position: "bottom", horizontalAlign: "center" },
+    dataLabels: { enabled: chartType === "pie" || chartType === "donut" },
+    stroke: {
+      curve: "smooth",
+      width: chartType === "line" || chartType === "area" ? 2 : 0
+    },
+    fill: { opacity: chartType === "area" ? 0.4 : 1 }
+  };
+  const handleExportPNG = async () => {
+    setIsExporting(true);
+    try {
+      const chart = ApexCharts__default.default.getChartByID(chartId);
+      if (!chart) {
+        console.error("Chart instance not available");
+        setIsExporting(false);
+        return;
+      }
+      const result = await chart.dataURI({ scale: 2 });
+      if (!("imgURI" in result)) {
+        console.error("Unexpected dataURI result format");
+        return;
+      }
+      const link = document.createElement("a");
+      link.href = result.imgURI;
+      link.download = `${title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_chart.png`;
+      link.click();
+    } catch (error) {
+      console.error("Failed to export chart:", error);
+    } finally {
+      setIsExporting(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-[var(--bichat-border)] rounded-lg p-4 bg-white", children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 300, children: renderChart() })
+  const chartWidth = 600;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg border border-[var(--bichat-border)] p-4 my-2 shadow-sm w-full max-w-[632px] min-w-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ReactApexChart__default.default,
+      {
+        options,
+        series: apexSeries,
+        type: chartType,
+        width: chartWidth,
+        height
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: handleExportPNG,
+        disabled: isExporting,
+        className: "text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 flex items-center gap-1 transition-colors",
+        title: "Download chart as PNG",
+        children: isExporting ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Download, { className: "w-4 h-4" }),
+          "Download PNG"
+        ] })
+      }
+    ) })
   ] });
 }
 function SourcesPanel({ citations }) {
-  const [expanded, setExpanded] = react.useState(false);
+  const [expanded, setExpanded] = React.useState(false);
   if (!citations || citations.length === 0) {
     return null;
   }
@@ -989,13 +1760,13 @@ function SourcesPanel({ citations }) {
       {
         type: "button",
         onClick: () => setExpanded(!expanded),
-        className: "flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors",
+        className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 rounded-md p-1 -m-1",
         "aria-expanded": expanded,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
-              className: `w-4 h-4 transition-transform ${expanded ? "rotate-90" : ""}`,
+              className: `w-4 h-4 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`,
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -1021,22 +1792,22 @@ function SourcesPanel({ citations }) {
     expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-2", children: citations.map((citation, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "p-3 bg-gray-50 rounded-lg text-sm",
+        className: "p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg text-sm",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 w-5 h-5 bg-[var(--bichat-primary)] text-white rounded-full flex items-center justify-center text-xs", children: index + 1 }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900", children: citation.source }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 dark:text-gray-100", children: citation.title || citation.source }),
             citation.url && /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
                 href: citation.url,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: "text-[var(--bichat-primary)] hover:underline",
+                className: "text-[var(--bichat-primary)] hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 rounded",
                 children: citation.url
               }
             ),
-            citation.excerpt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-gray-600 italic", children: [
+            citation.excerpt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-gray-600 dark:text-gray-400 italic", children: [
               '"',
               citation.excerpt,
               '"'
@@ -1106,218 +1877,516 @@ function DownloadCard({ artifact }) {
   );
 }
 function InlineQuestionForm({ pendingQuestion }) {
-  const { handleSubmitQuestionAnswers, handleCancelPendingQuestion } = useChat();
-  const [answers, setAnswers] = react.useState({});
-  const [textInput, setTextInput] = react.useState("");
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (pendingQuestion.type === "MULTIPLE_CHOICE" && !answers.choice) {
-      return;
+  const { handleSubmitQuestionAnswers, handleCancelPendingQuestion, loading } = useChat();
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const [answers, setAnswers] = React.useState({});
+  const [otherTexts, setOtherTexts] = React.useState({});
+  const questions = pendingQuestion.questions;
+  const currentQuestion = questions[currentStep];
+  const isLastStep = currentStep === questions.length - 1;
+  const isFirstStep = currentStep === 0;
+  const totalSteps = questions.length;
+  const currentAnswer = answers[currentQuestion?.id];
+  const currentOtherText = otherTexts[currentQuestion?.id] || "";
+  const handleOptionChange = React.useCallback(
+    (optionLabel, checked) => {
+      if (!currentQuestion) return;
+      const questionId = currentQuestion.id;
+      const existingAnswer = answers[questionId] || { options: [] };
+      const isOtherOption = optionLabel === "__other__";
+      const isMultiSelect2 = currentQuestion.type === "MULTIPLE_CHOICE";
+      if (isOtherOption) {
+        setAnswers({
+          ...answers,
+          [questionId]: {
+            options: [],
+            customText: checked ? currentOtherText : void 0
+          }
+        });
+        return;
+      }
+      let newOptions;
+      if (isMultiSelect2) {
+        if (!checked) {
+          newOptions = existingAnswer.options.filter((o) => o !== optionLabel);
+        } else if (existingAnswer.options.includes(optionLabel)) {
+          newOptions = existingAnswer.options;
+        } else {
+          newOptions = [...existingAnswer.options, optionLabel];
+        }
+      } else {
+        newOptions = checked ? [optionLabel] : [];
+      }
+      setAnswers({
+        ...answers,
+        [questionId]: {
+          options: newOptions,
+          customText: void 0
+        }
+      });
+    },
+    [currentQuestion, answers, currentOtherText]
+  );
+  const handleOtherTextChange = React.useCallback(
+    (text) => {
+      if (!currentQuestion) return;
+      const questionId = currentQuestion.id;
+      setOtherTexts({ ...otherTexts, [questionId]: text });
+      setAnswers({
+        ...answers,
+        [questionId]: {
+          options: [],
+          customText: text
+        }
+      });
+    },
+    [currentQuestion, answers, otherTexts]
+  );
+  const isCurrentAnswerValid = () => {
+    if (!currentQuestion) return false;
+    const answer = answers[currentQuestion.id];
+    const required = currentQuestion.required ?? true;
+    if (!answer) return !required;
+    const hasOptionSelection = answer.options.length > 0;
+    const hasOtherSelected = answer.customText !== void 0;
+    const hasOtherText = (answer.customText?.trim().length ?? 0) > 0;
+    if (!hasOptionSelection && !hasOtherSelected) {
+      return !required;
     }
-    if (pendingQuestion.type === "FREE_TEXT" && !textInput.trim()) {
-      return;
+    if (hasOptionSelection) {
+      return true;
+    }
+    return !required || hasOtherText;
+  };
+  const handleNext = () => {
+    if (!isCurrentAnswerValid()) return;
+    if (isLastStep) {
+      handleSubmitQuestionAnswers(answers);
+    } else {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+  const handleBack = () => {
+    if (!isFirstStep) {
+      setCurrentStep(currentStep - 1);
     }
-    const finalAnswers = pendingQuestion.type === "MULTIPLE_CHOICE" ? answers : { answer: textInput };
-    handleSubmitQuestionAnswers(finalAnswers);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-[var(--bichat-border)] rounded-lg p-4 bg-yellow-50", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    handleNext();
+  };
+  if (!currentQuestion) return null;
+  const isMultiSelect = currentQuestion.type === "MULTIPLE_CHOICE";
+  const options = currentQuestion.options || [];
+  const isOtherSelected = currentAnswer?.customText !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-amber-200 dark:border-amber-800 rounded-lg p-4 bg-amber-50 dark:bg-amber-900/20", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 mb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
+        react.Question,
         {
-          className: "w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5",
-          fill: "currentColor",
-          viewBox: "0 0 20 20",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              fillRule: "evenodd",
-              d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z",
-              clipRule: "evenodd"
-            }
-          )
+          className: "w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5",
+          weight: "fill"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-gray-900 mb-2", children: "Question from AI" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-700", children: pendingQuestion.question })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-gray-900 dark:text-gray-100", children: "Question from AI" }),
+          totalSteps > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+            currentStep + 1,
+            " of ",
+            totalSteps
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: currentQuestion.text })
       ] })
     ] }),
-    pendingQuestion.type === "MULTIPLE_CHOICE" && pendingQuestion.options && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mb-4", children: pendingQuestion.options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
+    totalSteps > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 mb-4", children: questions.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        className: "flex items-center gap-2 p-2 hover:bg-yellow-100 rounded cursor-pointer",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "radio",
-              name: "choice",
-              value: option,
-              checked: answers.choice === option,
-              onChange: (e) => setAnswers({ ...answers, choice: e.target.value }),
-              className: "w-4 h-4 text-[var(--bichat-primary)]"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900", children: option })
-        ]
+        className: `h-1 flex-1 rounded-full transition-colors ${index <= currentStep ? "bg-amber-500 dark:bg-amber-400" : "bg-gray-200 dark:bg-gray-700"}`
       },
       index
     )) }),
-    pendingQuestion.type === "FREE_TEXT" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        value: textInput,
-        onChange: (e) => setTextInput(e.target.value),
-        placeholder: "Type your answer...",
-        className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[var(--bichat-primary)] focus:border-transparent resize-none",
-        rows: 3
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mb-4", children: [
+      options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          className: "flex items-center gap-2 p-2 hover:bg-amber-100 dark:hover:bg-amber-900/30 rounded cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: isMultiSelect ? "checkbox" : "radio",
+                name: `question-${currentQuestion.id}`,
+                value: option.value,
+                checked: currentAnswer?.options.includes(option.label) || false,
+                onChange: (e) => handleOptionChange(option.label, e.target.checked),
+                className: "w-4 h-4 text-amber-600 focus:ring-amber-500"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900 dark:text-gray-100", children: option.label })
+          ]
+        },
+        option.id
+      )),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 p-2 hover:bg-amber-100 dark:hover:bg-amber-900/30 rounded cursor-pointer", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: isMultiSelect ? "checkbox" : "radio",
+            name: `question-${currentQuestion.id}`,
+            value: "__other__",
+            checked: isOtherSelected,
+            onChange: (e) => handleOptionChange("__other__", e.target.checked),
+            className: "w-4 h-4 text-amber-600 focus:ring-amber-500"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900 dark:text-gray-100", children: "Other" })
+      ] }),
+      isOtherSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
         {
-          type: "submit",
-          className: "px-4 py-2 bg-[var(--bichat-primary)] text-white rounded-lg hover:opacity-90 transition-opacity",
-          children: "Submit Answer"
+          type: "text",
+          value: currentOtherText,
+          onChange: (e) => handleOtherTextChange(e.target.value),
+          placeholder: "Please specify...",
+          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-amber-500 focus:border-transparent"
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: !isFirstStep && /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
-          onClick: handleCancelPendingQuestion,
-          className: "px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors",
-          children: "Cancel"
+          onClick: handleBack,
+          className: "flex items-center gap-1 px-3 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeft, { size: 16, weight: "bold" }),
+            "Back"
+          ]
         }
-      )
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleCancelPendingQuestion,
+            disabled: loading,
+            className: "px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "submit",
+            disabled: loading || !isCurrentAnswerValid(),
+            className: "flex items-center gap-1 px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+            children: [
+              isLastStep ? "Submit" : "Next",
+              !isLastStep && /* @__PURE__ */ jsxRuntime.jsx(react.CaretRight, { size: 16, weight: "bold" })
+            ]
+          }
+        )
+      ] })
     ] })
   ] }) });
 }
-var MarkdownRenderer2 = react.lazy(
+var MarkdownRenderer2 = React.lazy(
   () => Promise.resolve().then(() => (init_MarkdownRenderer(), MarkdownRenderer_exports)).then((module) => ({ default: module.MarkdownRenderer }))
 );
-function AssistantTurnView({ message }) {
-  const { handleCopy, handleRegenerate, pendingQuestion } = useChat();
-  const [explanationExpanded, setExplanationExpanded] = react.useState(false);
-  const hasContent = message.content?.trim().length > 0;
-  const hasExplanation = !!message.explanation?.trim();
-  const hasPendingQuestion = !!pendingQuestion && pendingQuestion.status === "PENDING" && pendingQuestion.turnId === message.id;
-  const handleCopyClick = async () => {
-    if (handleCopy) {
-      await handleCopy(message.content);
+var defaultClassNames2 = {
+  root: "flex gap-3 group",
+  wrapper: "flex-1 flex flex-col gap-3 max-w-[85%]",
+  avatar: "flex-shrink-0 w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white font-medium text-xs",
+  bubble: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl rounded-bl-sm px-4 py-3",
+  codeOutputs: "",
+  charts: "mb-1 w-full",
+  artifacts: "mb-1 flex flex-wrap gap-2",
+  sources: "",
+  explanation: "mt-4 border-t border-gray-100 dark:border-gray-700 pt-4",
+  actions: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
+  actionButton: "p-1.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 rounded-md transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50",
+  timestamp: "text-xs text-gray-400 dark:text-gray-500 mr-1"
+};
+function mergeClassNames2(defaults, overrides) {
+  if (!overrides) return defaults;
+  return {
+    root: overrides.root ?? defaults.root,
+    wrapper: overrides.wrapper ?? defaults.wrapper,
+    avatar: overrides.avatar ?? defaults.avatar,
+    bubble: overrides.bubble ?? defaults.bubble,
+    codeOutputs: overrides.codeOutputs ?? defaults.codeOutputs,
+    charts: overrides.charts ?? defaults.charts,
+    artifacts: overrides.artifacts ?? defaults.artifacts,
+    sources: overrides.sources ?? defaults.sources,
+    explanation: overrides.explanation ?? defaults.explanation,
+    actions: overrides.actions ?? defaults.actions,
+    actionButton: overrides.actionButton ?? defaults.actionButton,
+    timestamp: overrides.timestamp ?? defaults.timestamp
+  };
+}
+function AssistantMessage({
+  turn,
+  turnId,
+  isStreaming = false,
+  pendingQuestion,
+  slots,
+  classNames: classNameOverrides,
+  onCopy,
+  onRegenerate,
+  onSendMessage,
+  sendDisabled = false,
+  hideAvatar = false,
+  hideActions = false,
+  hideTimestamp = false
+}) {
+  const [explanationExpanded, setExplanationExpanded] = React.useState(false);
+  const classes = mergeClassNames2(defaultClassNames2, classNameOverrides);
+  const hasContent = turn.content?.trim().length > 0;
+  const hasExplanation = !!turn.explanation?.trim();
+  const hasPendingQuestion = !!pendingQuestion && pendingQuestion.status === "PENDING" && pendingQuestion.turnId === turnId;
+  const handleCopyClick = React.useCallback(async () => {
+    if (onCopy) {
+      await onCopy(turn.content);
     } else {
       try {
-        await navigator.clipboard.writeText(message.content);
+        await navigator.clipboard.writeText(turn.content);
       } catch (err) {
         console.error("Failed to copy:", err);
       }
     }
-  };
-  const handleRegenerateClick = async () => {
-    if (handleRegenerate) {
-      await handleRegenerate(message.id);
+  }, [onCopy, turn.content]);
+  const handleRegenerateClick = React.useCallback(async () => {
+    if (onRegenerate && turnId) {
+      await onRegenerate(turnId);
     }
+  }, [onRegenerate, turnId]);
+  const timestamp = dateFns.formatDistanceToNow(new Date(turn.createdAt), { addSuffix: true });
+  const avatarSlotProps = { text: "AI" };
+  const contentSlotProps = {
+    content: turn.content,
+    citations: turn.citations,
+    isStreaming
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 group", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white font-medium text-xs", children: "AI" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3 max-w-[85%]", children: [
-      message.codeOutputs && message.codeOutputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(CodeOutputsPanel, { outputs: message.codeOutputs }),
-      message.chartData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(ChartCard, { chartData: message.chartData }) }),
-      message.artifacts && message.artifacts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex flex-wrap gap-2", children: message.artifacts.map((artifact, index) => /* @__PURE__ */ jsxRuntime.jsx(DownloadCard, { artifact }, `${artifact.filename}-${index}`)) }),
-      hasContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl rounded-bl-sm px-4 py-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.Suspense,
-          {
-            fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 border-2 border-gray-300 dark:border-gray-600 border-t-transparent rounded-full animate-spin" }),
-              "Loading..."
-            ] }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer2, { content: message.content, citations: message.citations })
-          }
+  const sourcesSlotProps = {
+    citations: turn.citations || []
+  };
+  const chartsSlotProps = {
+    chartData: turn.chartData
+  };
+  const codeOutputsSlotProps = {
+    outputs: turn.codeOutputs || []
+  };
+  const artifactsSlotProps = {
+    artifacts: turn.artifacts || []
+  };
+  const actionsSlotProps = {
+    onCopy: handleCopyClick,
+    onRegenerate: onRegenerate && turnId ? handleRegenerateClick : void 0,
+    timestamp,
+    canCopy: hasContent,
+    canRegenerate: !!onRegenerate && !!turnId
+  };
+  const explanationSlotProps = {
+    explanation: turn.explanation || "",
+    isExpanded: explanationExpanded,
+    onToggle: () => setExplanationExpanded(!explanationExpanded)
+  };
+  const renderSlot = (slot, props, defaultContent) => {
+    if (slot === void 0) return defaultContent;
+    if (typeof slot === "function") return slot(props);
+    return slot;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    !hideAvatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.avatar, children: renderSlot(slots?.avatar, avatarSlotProps, "AI") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.wrapper, children: [
+      turn.codeOutputs && turn.codeOutputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.codeOutputs, children: renderSlot(
+        slots?.codeOutputs,
+        codeOutputsSlotProps,
+        /* @__PURE__ */ jsxRuntime.jsx(CodeOutputsPanel_default, { outputs: turn.codeOutputs })
+      ) }),
+      turn.chartData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.charts, children: renderSlot(slots?.charts, chartsSlotProps, /* @__PURE__ */ jsxRuntime.jsx(ChartCard, { chartData: turn.chartData })) }),
+      turn.artifacts && turn.artifacts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.artifacts, children: renderSlot(
+        slots?.artifacts,
+        artifactsSlotProps,
+        turn.artifacts.map((artifact, index) => /* @__PURE__ */ jsxRuntime.jsx(DownloadCard, { artifact }, `${artifact.filename}-${index}`))
+      ) }),
+      hasContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.bubble, children: [
+        renderSlot(
+          slots?.content,
+          contentSlotProps,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            React.Suspense,
+            {
+              fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 border-2 border-gray-300 dark:border-gray-600 border-t-transparent rounded-full animate-spin" }),
+                "Loading..."
+              ] }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                MarkdownRenderer2,
+                {
+                  content: turn.content,
+                  citations: turn.citations,
+                  sendMessage: onSendMessage,
+                  sendDisabled: sendDisabled || isStreaming
+                }
+              )
+            }
+          )
         ),
-        message.isStreaming && /* @__PURE__ */ jsxRuntime.jsx(StreamingCursor, {}),
-        message.citations && message.citations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SourcesPanel, { citations: message.citations }),
-        hasExplanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 border-t border-gray-100 dark:border-gray-700 pt-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+        isStreaming && /* @__PURE__ */ jsxRuntime.jsx(StreamingCursor_default, {}),
+        turn.citations && turn.citations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.sources, children: renderSlot(
+          slots?.sources,
+          sourcesSlotProps,
+          /* @__PURE__ */ jsxRuntime.jsx(SourcesPanel, { citations: turn.citations })
+        ) }),
+        hasExplanation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.explanation, children: renderSlot(
+          slots?.explanation,
+          explanationSlotProps,
+          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setExplanationExpanded(!explanationExpanded),
+                className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 rounded-md p-1 -m-1",
+                "aria-expanded": explanationExpanded,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      className: `w-4 h-4 transition-transform duration-150 ${explanationExpanded ? "rotate-90" : ""}`,
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M9 5l7 7-7 7"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "How I arrived at this" })
+                ]
+              }
+            ),
+            explanationExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-3 text-sm text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer2, { content: turn.explanation }) }) })
+          ] })
+        ) })
+      ] }),
+      hasPendingQuestion && pendingQuestion && /* @__PURE__ */ jsxRuntime.jsx(InlineQuestionForm, { pendingQuestion }),
+      hasContent && !hideActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: renderSlot(
+        slots?.actions,
+        actionsSlotProps,
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          !hideTimestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.timestamp, children: timestamp }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
-              type: "button",
-              onClick: () => setExplanationExpanded(!explanationExpanded),
-              className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors",
-              "aria-expanded": explanationExpanded,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    className: `w-4 h-4 transition-transform duration-150 ${explanationExpanded ? "rotate-90" : ""}`,
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M9 5l7 7-7 7"
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "How I arrived at this" })
-              ]
+              onClick: handleCopyClick,
+              className: classes.actionButton,
+              "aria-label": "Copy message",
+              title: "Copy",
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.Copy, { size: 14, weight: "regular" })
             }
           ),
-          explanationExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-3 text-sm text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer2, { content: message.explanation }) }) })
+          onRegenerate && turnId && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleRegenerateClick,
+              className: classes.actionButton,
+              "aria-label": "Regenerate response",
+              title: "Regenerate",
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.ArrowsClockwise, { size: 14, weight: "regular" })
+            }
+          )
         ] })
-      ] }),
-      hasPendingQuestion && /* @__PURE__ */ jsxRuntime.jsx(InlineQuestionForm, { pendingQuestion }),
-      hasContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 mr-1", children: dateFns.formatDistanceToNow(new Date(message.createdAt), { addSuffix: true }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleCopyClick,
-            className: "p-1.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-150",
-            "aria-label": "Copy message",
-            title: "Copy",
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Copy, { size: 14, weight: "regular" })
-          }
-        ),
-        handleRegenerate && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleRegenerateClick,
-            className: "p-1.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors duration-150",
-            "aria-label": "Regenerate message",
-            title: "Regenerate",
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowsClockwise, { size: 14, weight: "regular" })
-          }
-        )
-      ] })
+      ) })
     ] })
   ] });
 }
-function TurnBubble({
-  message,
-  renderUserMessage,
-  renderAssistantMessage
+function AssistantTurnView({
+  turn,
+  isStreaming = false,
+  slots,
+  classNames,
+  hideAvatar,
+  hideActions,
+  hideTimestamp
 }) {
-  if (message.role === "user" /* User */) {
-    if (renderUserMessage) {
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderUserMessage(message) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(UserTurnView, { message });
-  }
-  if (message.role === "assistant" /* Assistant */) {
-    if (renderAssistantMessage) {
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderAssistantMessage(message) });
+  const { handleCopy, handleRegenerate, pendingQuestion, sendMessage, loading } = useChat();
+  const assistantTurn = turn.assistantTurn;
+  if (!assistantTurn) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AssistantMessage,
+    {
+      turn: assistantTurn,
+      turnId: turn.id,
+      isStreaming,
+      pendingQuestion,
+      slots,
+      classNames,
+      onCopy: handleCopy,
+      onRegenerate: handleRegenerate,
+      onSendMessage: sendMessage,
+      sendDisabled: loading || isStreaming,
+      hideAvatar,
+      hideActions,
+      hideTimestamp
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(AssistantTurnView, { message });
-  }
-  return null;
+  );
+}
+var defaultClassNames3 = {
+  root: "space-y-4",
+  userTurn: "",
+  assistantTurn: ""
+};
+function TurnBubble({
+  turn,
+  renderUserTurn,
+  renderAssistantTurn,
+  userTurnProps,
+  assistantTurnProps,
+  userMessageSlots,
+  assistantMessageSlots,
+  userMessageClassNames,
+  assistantMessageClassNames,
+  classNames,
+  isStreaming = false
+}) {
+  const classes = {
+    root: classNames?.root ?? defaultClassNames3.root,
+    userTurn: classNames?.userTurn ?? defaultClassNames3.userTurn,
+    assistantTurn: classNames?.assistantTurn ?? defaultClassNames3.assistantTurn
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, "data-turn-id": turn.id, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.userTurn, children: renderUserTurn ? renderUserTurn(turn) : /* @__PURE__ */ jsxRuntime.jsx(
+      UserTurnView,
+      {
+        turn,
+        slots: userMessageSlots,
+        classNames: userMessageClassNames,
+        ...userTurnProps
+      }
+    ) }),
+    turn.assistantTurn && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.assistantTurn, children: renderAssistantTurn ? renderAssistantTurn(turn) : /* @__PURE__ */ jsxRuntime.jsx(
+      AssistantTurnView,
+      {
+        turn,
+        isStreaming,
+        slots: assistantMessageSlots,
+        classNames: assistantMessageClassNames,
+        ...assistantTurnProps
+      }
+    ) })
+  ] });
 }
 function ScrollToBottomButton({
   show,
@@ -1332,24 +2401,25 @@ function ScrollToBottomButton({
       exit: { opacity: 0, y: 10 },
       transition: { duration: 0.2 },
       onClick,
-      className: "absolute bottom-24 right-8 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors z-10",
+      className: "absolute bottom-24 right-8 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 active:bg-gray-100 dark:active:bg-gray-600 transition-colors duration-150 z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900",
       "aria-label": "Scroll to bottom",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowDown, { size: 20, weight: "bold", className: "text-gray-700 dark:text-gray-300" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.ArrowDown, { size: 20, weight: "bold", className: "text-gray-700 dark:text-gray-300" }),
         unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-2 -right-2 min-w-[18px] h-[18px] bg-primary-600 dark:bg-primary-500 text-white text-xs font-semibold rounded-full flex items-center justify-center px-1", children: unreadCount > 99 ? "99+" : unreadCount })
       ] })
     }
   ) });
 }
-function MessageList({ renderUserMessage, renderAssistantMessage }) {
-  const { messages, streamingContent, isStreaming } = useChat();
-  const messagesEndRef = react.useRef(null);
-  const containerRef = react.useRef(null);
-  const [showScrollButton, setShowScrollButton] = react.useState(false);
-  react.useEffect(() => {
+var ScrollToBottomButton_default = ScrollToBottomButton;
+function MessageList({ renderUserTurn, renderAssistantTurn }) {
+  const { turns, streamingContent, isStreaming } = useChat();
+  const messagesEndRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const [showScrollButton, setShowScrollButton] = React.useState(false);
+  React.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages.length, streamingContent]);
-  react.useEffect(() => {
+  }, [turns.length, streamingContent]);
+  React.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleScroll = () => {
@@ -1365,14 +2435,14 @@ function MessageList({ renderUserMessage, renderAssistantMessage }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-h-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full overflow-y-auto px-4 py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto space-y-6", children: [
-      messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
+      turns.map((turn) => /* @__PURE__ */ jsxRuntime.jsx(
         TurnBubble,
         {
-          message,
-          renderUserMessage,
-          renderAssistantMessage
+          turn,
+          renderUserTurn,
+          renderAssistantTurn
         },
-        message.id
+        turn.id
       )),
       isStreaming && streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white", children: "AI" }),
@@ -1383,13 +2453,13 @@ function MessageList({ renderUserMessage, renderAssistantMessage }) {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ScrollToBottomButton, { show: showScrollButton, onClick: scrollToBottom })
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollToBottomButton_default, { show: showScrollButton, onClick: scrollToBottom })
   ] });
 }
 var MAX_FILES_DEFAULT = 10;
 var MAX_FILE_SIZE_DEFAULT = 20 * 1024 * 1024;
 var MAX_HEIGHT = 192;
-var MessageInput = react.forwardRef(
+var MessageInput = React.forwardRef(
   ({
     message,
     loading,
@@ -1405,15 +2475,15 @@ var MessageInput = react.forwardRef(
     containerClassName
   }, ref) => {
     const { t } = useTranslation();
-    const [attachments, setAttachments] = react.useState([]);
-    const [isDragging, setIsDragging] = react.useState(false);
-    const [error, setError] = react.useState(null);
-    const [isFocused, setIsFocused] = react.useState(false);
+    const [attachments, setAttachments] = React.useState([]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [isFocused, setIsFocused] = React.useState(false);
     const placeholder = placeholderOverride || t("input.placeholder");
-    const textareaRef = react.useRef(null);
-    const fileInputRef = react.useRef(null);
-    const containerRef = react.useRef(null);
-    react.useImperativeHandle(ref, () => ({
+    const textareaRef = React.useRef(null);
+    const fileInputRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
       focus: () => textareaRef.current?.focus(),
       clear: () => {
         onMessageChange("");
@@ -1421,14 +2491,14 @@ var MessageInput = react.forwardRef(
         setError(null);
       }
     }));
-    react.useEffect(() => {
+    React.useEffect(() => {
       const textarea = textareaRef.current;
       if (!textarea) return;
       textarea.style.height = "auto";
       const newHeight = Math.min(textarea.scrollHeight, MAX_HEIGHT);
       textarea.style.height = `${newHeight}px`;
     }, [message]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!error) return;
       const timer = setTimeout(() => setError(null), 5e3);
       return () => clearTimeout(timer);
@@ -1527,12 +2597,12 @@ var MessageInput = react.forwardRef(
                 onClick: () => setError(null),
                 className: "ml-2 p-1 hover:bg-red-100 dark:hover:bg-red-800 rounded transition-colors",
                 "aria-label": t("input.dismissError"),
-                children: /* @__PURE__ */ jsxRuntime.jsx(react$1.X, { size: 14 })
+                children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 14 })
               }
             )
           ] }),
           messageQueue.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xs text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2.5 py-1 bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded font-medium", children: t("input.messagesQueued", { count: messageQueue.length }) }) }),
-          attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentGrid, { attachments, onRemove: handleRemoveAttachment }) }),
+          attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentGrid_default, { attachments, onRemove: handleRemoveAttachment }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -1542,13 +2612,13 @@ var MessageInput = react.forwardRef(
               onDrop: handleDrop,
               children: [
                 isDragging && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 bg-primary-50/95 dark:bg-primary-900/90 border-2 border-dashed border-primary-400 rounded-2xl flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Paperclip, { size: 20, className: "text-primary-600 dark:text-primary-400" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(react.Paperclip, { size: 20, className: "text-primary-600 dark:text-primary-400" }) }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-primary-700 dark:text-primary-300 font-medium", children: t("input.dropImages") })
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: `flex items-center gap-2 rounded-2xl p-2.5 bg-white dark:bg-gray-800 border shadow-sm transition-all duration-150 ${isFocused ? "border-primary-400 dark:border-primary-500 ring-3 ring-primary-500/10 dark:ring-primary-500/15" : "border-gray-200 dark:border-gray-700"}`,
+                    className: `flex items-center gap-2 rounded-2xl p-2.5 bg-white dark:bg-gray-800 border shadow-sm transition-all duration-150 ${isFocused ? "border-primary-400 dark:border-primary-500 ring-2 ring-primary-500/15 dark:ring-primary-500/20" : "border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"}`,
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "button",
@@ -1559,7 +2629,7 @@ var MessageInput = react.forwardRef(
                           className: "flex-shrink-0 self-center p-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
                           "aria-label": t("input.attachFiles"),
                           title: t("input.attachImages"),
-                          children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Paperclip, { size: 18 })
+                          children: /* @__PURE__ */ jsxRuntime.jsx(react.Paperclip, { size: 18 })
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1598,7 +2668,7 @@ var MessageInput = react.forwardRef(
                           disabled: !canSubmit,
                           className: "flex-shrink-0 self-center p-2 rounded-lg bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white shadow-sm transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-primary-600",
                           "aria-label": t("input.sendMessage"),
-                          children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] border-2 border-white/60 border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(react$1.PaperPlaneRight, { size: 18, weight: "fill" })
+                          children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[18px] h-[18px] border-2 border-white/60 border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(react.PaperPlaneRight, { size: 18, weight: "fill" })
                         }
                       )
                     ]
@@ -1624,17 +2694,17 @@ MessageInput.displayName = "MessageInput";
 var EXAMPLE_PROMPTS = [
   {
     category: "Data Analysis",
-    icon: react$1.ChartBar,
+    icon: react.ChartBar,
     text: "Show me sales trends for the last quarter"
   },
   {
     category: "Reports",
-    icon: react$1.FileText,
+    icon: react.FileText,
     text: "Generate a summary of customer feedback"
   },
   {
     category: "Insights",
-    icon: react$1.Lightbulb,
+    icon: react.Lightbulb,
     text: "What are the top performing products?"
   }
 ];
@@ -1665,9 +2735,9 @@ function WelcomeContent({
   description = "Your intelligent business analytics assistant. Ask questions about your data, generate reports, or explore insights.",
   disabled = false
 }) {
-  const handlePromptClick = (prompt2) => {
+  const handlePromptClick = (prompt) => {
     if (onPromptSelect && !disabled) {
-      onPromptSelect(prompt2);
+      onPromptSelect(prompt);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1696,26 +2766,26 @@ function WelcomeContent({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { variants: itemVariants, children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide mb-4", children: "Try asking" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: EXAMPLE_PROMPTS.map((prompt2, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: EXAMPLE_PROMPTS.map((prompt, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             framerMotion.motion.button,
             {
-              onClick: () => handlePromptClick(prompt2.text),
+              onClick: () => handlePromptClick(prompt.text),
               disabled,
               className: "group flex flex-col items-start text-left p-5 rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed",
               variants: itemVariants,
-              whileHover: disabled ? {} : { y: -2 },
+              whileHover: disabled ? {} : { y: -2, scale: 1.01 },
               whileTap: disabled ? {} : { scale: 0.98 },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  prompt2.icon,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-700 group-hover:bg-primary-50 dark:group-hover:bg-primary-900/30 flex items-center justify-center mb-3 transition-colors duration-200", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  prompt.icon,
                   {
                     size: 18,
                     weight: "regular",
-                    className: "text-gray-600 dark:text-gray-300"
+                    className: "text-gray-600 dark:text-gray-300 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors duration-200"
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500 mb-1.5", children: prompt2.category }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-200 leading-relaxed", children: prompt2.text })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500 mb-1.5", children: prompt.category }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-200 leading-relaxed", children: prompt.text })
               ]
             },
             index
@@ -1725,10 +2795,11 @@ function WelcomeContent({
     }
   );
 }
+var WelcomeContent_default = WelcomeContent;
 function ChatSessionCore({
   isReadOnly,
-  renderUserMessage,
-  renderAssistantMessage,
+  renderUserTurn,
+  renderAssistantTurn,
   className = "",
   headerSlot,
   welcomeSlot,
@@ -1739,7 +2810,7 @@ function ChatSessionCore({
   const { t } = useTranslation();
   const {
     session,
-    messages,
+    turns,
     fetching,
     error,
     message,
@@ -1759,9 +2830,9 @@ function ChatSessionCore({
       error
     ] }) });
   }
-  const showWelcome = !session && messages.length === 0;
-  const handlePromptSelect = (prompt2) => {
-    setMessage(prompt2);
+  const showWelcome = !session && turns.length === 0;
+  const handlePromptSelect = (prompt) => {
+    setMessage(prompt);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "main",
@@ -1769,11 +2840,11 @@ function ChatSessionCore({
       className: `flex-1 flex flex-col overflow-hidden min-h-0 bg-gray-50 dark:bg-gray-900 ${className}`,
       children: [
         headerSlot || /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { session, onBack, logoSlot, actionsSlot }),
-        showWelcome ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center overflow-auto", children: welcomeSlot || /* @__PURE__ */ jsxRuntime.jsx(WelcomeContent, { onPromptSelect: handlePromptSelect, disabled: loading }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        showWelcome ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center overflow-auto", children: welcomeSlot || /* @__PURE__ */ jsxRuntime.jsx(WelcomeContent_default, { onPromptSelect: handlePromptSelect, disabled: loading }) }) : /* @__PURE__ */ jsxRuntime.jsx(
           MessageList,
           {
-            renderUserMessage,
-            renderAssistantMessage
+            renderUserTurn,
+            renderAssistantTurn
           }
         ),
         !isReadOnly && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2067,13 +3138,14 @@ function EmptyState({
     }
   );
 }
-var EmptyState_default = react.memo(EmptyState);
+var MemoizedEmptyState = React.memo(EmptyState);
+MemoizedEmptyState.displayName = "EmptyState";
 var sizeClasses2 = {
   sm: "text-sm",
   md: "text-base",
   lg: "text-lg"
 };
-var EditableText = react.forwardRef(
+var EditableText = React.forwardRef(
   ({
     value,
     onSave,
@@ -2084,10 +3156,10 @@ var EditableText = react.forwardRef(
     inputClassName = "",
     size = "sm"
   }, ref) => {
-    const [isEditing, setIsEditing] = react.useState(false);
-    const [editValue, setEditValue] = react.useState(value);
-    const inputRef = react.useRef(null);
-    react.useImperativeHandle(ref, () => ({
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [editValue, setEditValue] = React.useState(value);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
       startEditing: () => {
         if (!isLoading) {
           setIsEditing(true);
@@ -2098,10 +3170,10 @@ var EditableText = react.forwardRef(
         setIsEditing(false);
       }
     }));
-    react.useEffect(() => {
+    React.useEffect(() => {
       setEditValue(value);
     }, [value]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (isEditing && inputRef.current) {
         inputRef.current.focus();
         inputRef.current.select();
@@ -2181,7 +3253,7 @@ var EditableText = react.forwardRef(
           }
         },
         children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 text-gray-400 dark:text-gray-500", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.CircleNotch, { size: 12, className: "animate-spin" }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotch, { size: 12, className: "animate-spin" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic", children: displayValue })
         ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: !value ? "text-gray-400 dark:text-gray-500 italic" : "", children: displayValue })
       }
@@ -2189,7 +3261,7 @@ var EditableText = react.forwardRef(
   }
 );
 EditableText.displayName = "EditableText";
-var EditableText_default = react.memo(EditableText);
+var MemoizedEditableText = React.memo(EditableText);
 var sizeClasses3 = {
   sm: {
     container: "py-1.5 pl-8 pr-8 text-xs",
@@ -2219,9 +3291,9 @@ function SearchInput({
   disabled = false,
   ariaLabel = "Search"
 }) {
-  const inputRef = react.useRef(null);
+  const inputRef = React.useRef(null);
   const sizes = sizeClasses3[size];
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
@@ -2245,7 +3317,7 @@ function SearchInput({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full ${className}`, role: "search", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.MagnifyingGlass,
+      react.MagnifyingGlass,
       {
         size: sizes.icon,
         weight: "bold",
@@ -2275,12 +3347,13 @@ function SearchInput({
         className: `absolute inset-y-0 right-2 flex items-center ${sizes.clearBtn} rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-all duration-200 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300`,
         "aria-label": "Clear search",
         title: "Clear search",
-        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.X, { size: sizes.icon - 2, weight: "bold" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: sizes.icon - 2, weight: "bold" })
       }
     )
   ] });
 }
-var SearchInput_default = react.memo(SearchInput);
+var MemoizedSearchInput = React.memo(SearchInput);
+MemoizedSearchInput.displayName = "SearchInput";
 var variantClasses = {
   text: "rounded",
   circular: "rounded-full",
@@ -2374,66 +3447,704 @@ function ListItemSkeleton({ className = "" }) {
     /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "text", height: 16, className: "flex-1" })
   ] });
 }
-var Skeleton_default = react.memo(Skeleton);
-var ConfigContext = react.createContext(null);
-function ConfigProvider({ config, useGlobalConfig = false, children }) {
-  let resolvedConfig = null;
-  if (config) {
-    resolvedConfig = config;
-  } else if (useGlobalConfig && typeof window !== "undefined") {
-    const globalContext = window.__BICHAT_CONTEXT__;
-    const globalCSRF = window.__CSRF_TOKEN__;
-    if (globalContext) {
-      resolvedConfig = {
-        user: {
-          id: String(globalContext.user?.id || ""),
-          email: globalContext.user?.email || "",
-          firstName: globalContext.user?.firstName || "",
-          lastName: globalContext.user?.lastName || "",
-          permissions: globalContext.user?.permissions || []
-        },
-        tenant: {
-          id: globalContext.tenant?.id || "",
-          name: globalContext.tenant?.name || ""
-        },
-        locale: {
-          language: globalContext.locale?.language || "en",
-          translations: globalContext.locale?.translations || {}
-        },
-        endpoints: {
-          graphQL: globalContext.config?.graphQLEndpoint || "/graphql",
-          stream: globalContext.config?.streamEndpoint || "/stream"
-        },
-        csrfToken: globalCSRF
-      };
+var MemoizedSkeleton = React.memo(Skeleton);
+MemoizedSkeleton.displayName = "Skeleton";
+
+// ui/src/bichat/index.ts
+init_CodeBlock();
+init_TableExportButton();
+init_TableWithExport();
+var typeConfig = {
+  success: {
+    bgColor: "bg-green-500",
+    darkBgColor: "dark:bg-green-600",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(react.CheckCircle, { size: 20, className: "w-5 h-5 flex-shrink-0", weight: "fill" })
+  },
+  error: {
+    bgColor: "bg-red-500",
+    darkBgColor: "dark:bg-red-600",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(react.XCircle, { size: 20, className: "w-5 h-5 flex-shrink-0", weight: "fill" })
+  },
+  info: {
+    bgColor: "bg-blue-500",
+    darkBgColor: "dark:bg-blue-600",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(react.Info, { size: 20, className: "w-5 h-5 flex-shrink-0", weight: "fill" })
+  },
+  warning: {
+    bgColor: "bg-yellow-500",
+    darkBgColor: "dark:bg-yellow-600",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(react.Warning, { size: 20, className: "w-5 h-5 flex-shrink-0", weight: "fill" })
+  }
+};
+function Toast({
+  id,
+  type,
+  message,
+  duration = 5e3,
+  onDismiss,
+  dismissLabel = "Dismiss"
+}) {
+  const config = typeConfig[type];
+  const ariaLive = type === "error" ? "assertive" : "polite";
+  const role = type === "error" || type === "warning" ? "alert" : "status";
+  React.useEffect(() => {
+    const timer = setTimeout(() => onDismiss(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, onDismiss]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      initial: { opacity: 0, y: -50, scale: 0.95 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 },
+      transition: { duration: 0.2 },
+      className: `flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg backdrop-blur-sm min-w-[300px] max-w-[400px] text-white ${config.bgColor} ${config.darkBgColor}`,
+      role,
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      children: [
+        config.icon,
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 text-sm font-medium", children: message }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onDismiss(id),
+            className: "ml-2 text-white hover:bg-white/20 p-1 rounded transition-colors flex-shrink-0",
+            "aria-label": dismissLabel,
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 16, className: "w-4 h-4", weight: "bold" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastContainer({ toasts, onDismiss, dismissLabel }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onDismiss, dismissLabel }) }, toast.id)) }) });
+}
+function ConfirmModalBase({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  isDanger = false
+}) {
+  const modalRef = React.useRef(null);
+  const confirmButtonRef = React.useRef(null);
+  useFocusTrap(modalRef, isOpen);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onCancel();
+      } else if (e.key === "Enter") {
+        if (document.activeElement === confirmButtonRef.current) {
+          e.preventDefault();
+          onConfirm();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onConfirm, onCancel, confirmButtonRef]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-sm transition-opacity z-40",
+        onClick: onCancel,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 flex items-center justify-center z-50",
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": "confirm-modal-title",
+        "aria-describedby": "confirm-modal-description",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: modalRef,
+            className: "bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-sm w-full mx-4",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  id: "confirm-modal-title",
+                  className: "text-lg font-semibold text-gray-900 dark:text-white",
+                  children: title
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { id: "confirm-modal-description", className: "text-gray-600 dark:text-gray-300", children: message }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onCancel,
+                    className: "px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors font-medium",
+                    "aria-label": `Cancel ${title.toLowerCase()}`,
+                    "data-testid": "confirm-modal-cancel",
+                    children: cancelText
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    ref: confirmButtonRef,
+                    onClick: onConfirm,
+                    className: `px-4 py-2 rounded-lg text-white font-medium transition-colors ${isDanger ? "bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-800" : "bg-primary-600 dark:bg-primary-700 hover:bg-primary-700 dark:hover:bg-primary-800"}`,
+                    "aria-label": `Confirm ${title.toLowerCase()}`,
+                    "data-testid": "confirm-modal-confirm",
+                    children: confirmText
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+var ConfirmModal = React.memo(ConfirmModalBase);
+ConfirmModal.displayName = "ConfirmModal";
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+var colorPalette = [
+  { bg: "bg-blue-500", text: "text-white" },
+  { bg: "bg-green-500", text: "text-white" },
+  { bg: "bg-purple-500", text: "text-white" },
+  { bg: "bg-pink-500", text: "text-white" },
+  { bg: "bg-indigo-500", text: "text-white" },
+  { bg: "bg-teal-500", text: "text-white" },
+  { bg: "bg-orange-500", text: "text-white" },
+  { bg: "bg-cyan-500", text: "text-white" },
+  { bg: "bg-amber-500", text: "text-white" },
+  { bg: "bg-lime-500", text: "text-white" }
+];
+var sizeClasses4 = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-10 h-10 text-sm",
+  lg: "w-12 h-12 text-base"
+};
+function UserAvatar({
+  firstName,
+  lastName,
+  initials: providedInitials,
+  size = "md",
+  className = ""
+}) {
+  const derivedInitials = (() => {
+    const firstChar = firstName?.trim()?.charAt(0) || "";
+    const lastChar = lastName?.trim()?.charAt(0) || "";
+    const combined = `${firstChar}${lastChar}`.trim();
+    return combined || "U";
+  })();
+  const initials = (providedInitials?.trim() || derivedInitials).toUpperCase();
+  const fullName = `${firstName}${lastName}`;
+  const colorIndex = hashString(fullName) % colorPalette.length;
+  const colors = colorPalette[colorIndex];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `
+        ${sizeClasses4[size]}
+        ${colors.bg}
+        ${colors.text}
+        ${className}
+        rounded-full
+        flex
+        items-center
+        justify-center
+        font-semibold
+        flex-shrink-0
+        select-none
+      `,
+      "aria-label": `${firstName} ${lastName}`,
+      title: `${firstName} ${lastName}`,
+      children: initials
     }
+  );
+}
+var MemoizedUserAvatar = React.memo(UserAvatar);
+MemoizedUserAvatar.displayName = "UserAvatar";
+function PermissionGuard({
+  permissions,
+  mode = "all",
+  hasPermission: hasPermission3,
+  fallback = null,
+  children
+}) {
+  if (permissions.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ConfigContext.Provider, { value: resolvedConfig, children });
+  const permitted = mode === "all" ? permissions.every((p) => hasPermission3(p)) : permissions.some((p) => hasPermission3(p));
+  return permitted ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
 }
-function useConfig() {
-  return react.useContext(ConfigContext);
+function DefaultErrorContent({
+  error,
+  onReset,
+  resetLabel = "Try Again",
+  errorTitle = "Something went wrong"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center min-h-[200px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.WarningCircle, { size: 48, className: "text-red-500 mb-4", weight: "fill" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: errorTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4 max-w-md", children: error?.message || "An unexpected error occurred. Please try again." }),
+    onReset && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onReset,
+        className: "flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.ArrowClockwise, { size: 16, weight: "bold" }),
+          resetLabel
+        ]
+      }
+    )
+  ] });
 }
-function useRequiredConfig() {
-  const config = react.useContext(ConfigContext);
-  if (!config) {
-    throw new Error(
-      "BiChat configuration not found. Wrap your app with <ConfigProvider config={...}> or use useGlobalConfig={true}."
+var ErrorBoundary = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleReset = () => {
+      this.setState({ hasError: false, error: null });
+    };
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("React Error Boundary caught an error:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        if (typeof this.props.fallback === "function") {
+          return this.props.fallback(this.state.error, this.handleReset);
+        }
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(DefaultErrorContent, { error: this.state.error, onReset: this.handleReset });
+    }
+    return this.props.children;
+  }
+};
+var DEFAULT_MESSAGES = [
+  "Thinking...",
+  "Processing...",
+  "Analyzing...",
+  "Computing...",
+  "Working on it..."
+];
+var prefersReducedMotion2 = () => {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+var getRandomMessage = (messages, current) => {
+  const available = messages.filter((m) => m !== current);
+  if (available.length === 0) {
+    return current || messages[0] || "Thinking...";
+  }
+  return available[Math.floor(Math.random() * available.length)];
+};
+var sizeConfig = {
+  sm: { dot: "w-1.5 h-1.5", gap: "gap-1", text: "text-sm" },
+  md: { dot: "w-2 h-2", gap: "gap-1.5", text: "text-base" },
+  lg: { dot: "w-2.5 h-2.5", gap: "gap-2", text: "text-lg" }
+};
+function DotsIndicator({ size = "md" }) {
+  const config = sizeConfig[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${config.gap}`, role: "status", "aria-live": "polite", children: [
+    [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${config.dot} bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce`,
+        style: { animationDelay: `${index * 0.15}s` }
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
+  ] });
+}
+function PulseIndicator({ size = "md" }) {
+  const config = sizeConfig[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${config.dot} bg-primary-500 rounded-full animate-pulse` }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
+  ] });
+}
+function TextIndicator({
+  messages = DEFAULT_MESSAGES,
+  rotationInterval = 3e3,
+  size = "md"
+}) {
+  const config = sizeConfig[size];
+  const [message, setMessage] = React.useState(() => messages[Math.floor(Math.random() * messages.length)]);
+  React.useEffect(() => {
+    if (prefersReducedMotion2()) return;
+    const interval = setInterval(() => {
+      setMessage((prev) => getRandomMessage(messages, prev));
+    }, rotationInterval);
+    return () => clearInterval(interval);
+  }, [messages, rotationInterval]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", className: "overflow-hidden h-6 relative", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.span,
+    {
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+      transition: { duration: 0.2 },
+      className: `${config.text} text-gray-500 dark:text-gray-400 block`,
+      children: message
+    },
+    message
+  ) }) });
+}
+function TypingIndicator({
+  variant = "dots",
+  messages = DEFAULT_MESSAGES,
+  rotationInterval = 3e3,
+  size = "md",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${className}`, children: [
+    variant === "dots" && /* @__PURE__ */ jsxRuntime.jsx(DotsIndicator, { size }),
+    variant === "pulse" && /* @__PURE__ */ jsxRuntime.jsx(PulseIndicator, { size }),
+    variant === "text" && /* @__PURE__ */ jsxRuntime.jsx(TextIndicator, { messages, rotationInterval, size })
+  ] });
+}
+var MemoizedTypingIndicator = React.memo(TypingIndicator);
+MemoizedTypingIndicator.displayName = "TypingIndicator";
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+var Slot = React.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  if (!React.isValidElement(children)) {
+    return null;
+  }
+  const childrenRef = children.ref;
+  return React.cloneElement(children, {
+    ...mergeProps(slotProps, children.props),
+    ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
+  });
+});
+Slot.displayName = "Slot";
+function composeRefs(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref != null) {
+        ref.current = node;
+      }
+    });
+  };
+}
+function getValidChildren(children) {
+  return React.Children.toArray(children).filter(React.isValidElement);
+}
+var TurnContext = React.createContext(void 0);
+function useTurnContext() {
+  const context = React.useContext(TurnContext);
+  if (!context) {
+    throw new Error("Turn components must be used within Turn.Root");
+  }
+  return context;
+}
+var TurnRoot = React.forwardRef((props, ref) => {
+  const { asChild, turnId, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(TurnContext.Provider, { value: { turnId }, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "data-turn-id": turnId, ...domProps, children }) });
+});
+TurnRoot.displayName = "Turn.Root";
+var TurnUser = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "data-turn-role": "user", ...domProps, children });
+});
+TurnUser.displayName = "Turn.User";
+var TurnAssistant = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "data-turn-role": "assistant", ...domProps, children });
+});
+TurnAssistant.displayName = "Turn.Assistant";
+var defaultFormatter = (date) => date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+var TurnTimestamp = React.forwardRef((props, ref) => {
+  const { asChild, date, formatter = defaultFormatter, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "time";
+  const dateObj = date ? typeof date === "string" ? new Date(date) : date : null;
+  const formattedTime = dateObj ? formatter(dateObj) : "";
+  const isoString = dateObj?.toISOString();
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, dateTime: isoString, ...domProps, children: children ?? formattedTime });
+});
+TurnTimestamp.displayName = "Turn.Timestamp";
+var TurnActions = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, role: "group", "aria-label": "Message actions", ...domProps, children });
+});
+TurnActions.displayName = "Turn.Actions";
+var Turn = {
+  Root: TurnRoot,
+  User: TurnUser,
+  Assistant: TurnAssistant,
+  Timestamp: TurnTimestamp,
+  Actions: TurnActions
+};
+var AvatarContext = React.createContext(void 0);
+function useAvatarContext() {
+  const context = React.useContext(AvatarContext);
+  if (!context) {
+    throw new Error("Avatar components must be used within Avatar.Root");
+  }
+  return context;
+}
+var AvatarRoot = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "span";
+  const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
+  return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: { imageLoadingStatus, setImageLoadingStatus }, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, ...domProps, children }) });
+});
+AvatarRoot.displayName = "Avatar.Root";
+var AvatarImage = React.forwardRef((props, ref) => {
+  const { asChild, src, alt, onLoadingStatusChange, onLoad, onError, ...domProps } = props;
+  const { setImageLoadingStatus } = useAvatarContext();
+  const Comp = asChild ? Slot : "img";
+  const handleLoad = (e) => {
+    setImageLoadingStatus("loaded");
+    onLoadingStatusChange?.("loaded");
+    onLoad?.(e);
+  };
+  const handleError = (e) => {
+    setImageLoadingStatus("error");
+    onLoadingStatusChange?.("error");
+    onError?.(e);
+  };
+  if (src) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        src,
+        alt: alt || "",
+        onLoad: handleLoad,
+        onError: handleError,
+        ...domProps
+      }
     );
   }
-  return config;
+  return null;
+});
+AvatarImage.displayName = "Avatar.Image";
+var AvatarFallback = React.forwardRef((props, ref) => {
+  const { asChild, delayMs = 0, children, ...domProps } = props;
+  const { imageLoadingStatus } = useAvatarContext();
+  const Comp = asChild ? Slot : "span";
+  const [canRender, setCanRender] = React.useState(delayMs === 0);
+  if (delayMs > 0 && !canRender) {
+    setTimeout(() => setCanRender(true), delayMs);
+  }
+  if (imageLoadingStatus === "loaded") {
+    return null;
+  }
+  if (!canRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, ...domProps, children });
+});
+AvatarFallback.displayName = "Avatar.Fallback";
+var Avatar = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+};
+var BubbleContext = React.createContext(void 0);
+function useBubbleContext() {
+  const context = React.useContext(BubbleContext);
+  if (!context) {
+    throw new Error("Bubble components must be used within Bubble.Root");
+  }
+  return context;
 }
-function hasPermission2(config, permission) {
-  if (!config) {
-    return false;
+var BubbleRoot = React.forwardRef((props, ref) => {
+  const { asChild, variant, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(BubbleContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "data-bubble-variant": variant, ...domProps, children }) });
+});
+BubbleRoot.displayName = "Bubble.Root";
+var BubbleContent = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "data-bubble-part": "content", ...domProps, children });
+});
+BubbleContent.displayName = "Bubble.Content";
+var BubbleHeader = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "data-bubble-part": "header", ...domProps, children });
+});
+BubbleHeader.displayName = "Bubble.Header";
+var BubbleFooter = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "data-bubble-part": "footer", ...domProps, children });
+});
+BubbleFooter.displayName = "Bubble.Footer";
+var BubbleMetadata = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "data-bubble-part": "metadata", ...domProps, children });
+});
+BubbleMetadata.displayName = "Bubble.Metadata";
+var Bubble = {
+  Root: BubbleRoot,
+  Content: BubbleContent,
+  Header: BubbleHeader,
+  Footer: BubbleFooter,
+  Metadata: BubbleMetadata
+};
+var ActionButtonContext = React.createContext(void 0);
+function useActionButtonContext() {
+  const context = React.useContext(ActionButtonContext);
+  if (!context) {
+    throw new Error("ActionButton components must be used within ActionButton.Root");
   }
-  return config.user.permissions.includes(permission);
+  return context;
 }
+var ActionButtonRoot = React.forwardRef((props, ref) => {
+  const { asChild, disabled, children, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ...domProps } = props;
+  const Comp = asChild ? Slot : "button";
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isPressed, setIsPressed] = React.useState(false);
+  const handleMouseEnter = (e) => {
+    setIsHovered(true);
+    onMouseEnter?.(e);
+  };
+  const handleMouseLeave = (e) => {
+    setIsHovered(false);
+    setIsPressed(false);
+    onMouseLeave?.(e);
+  };
+  const handleFocus = (e) => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+  const handleMouseDown = (e) => {
+    setIsPressed(true);
+    onMouseDown?.(e);
+  };
+  const handleMouseUp = (e) => {
+    setIsPressed(false);
+    onMouseUp?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ActionButtonContext.Provider,
+    {
+      value: {
+        isHovered,
+        isFocused,
+        isPressed,
+        isDisabled: !!disabled
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Comp,
+        {
+          ref,
+          type: "button",
+          disabled,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onMouseDown: handleMouseDown,
+          onMouseUp: handleMouseUp,
+          ...domProps,
+          children
+        }
+      )
+    }
+  );
+});
+ActionButtonRoot.displayName = "ActionButton.Root";
+var ActionButtonIcon = React.forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, "aria-hidden": "true", ...domProps, children });
+});
+ActionButtonIcon.displayName = "ActionButton.Icon";
+var ActionButtonLabel = React.forwardRef((props, ref) => {
+  const { asChild, srOnly = false, children, className, ...domProps } = props;
+  const Comp = asChild ? Slot : "span";
+  const srOnlyClass = srOnly ? "absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, className: [srOnlyClass, className].filter(Boolean).join(" "), ...domProps, children });
+});
+ActionButtonLabel.displayName = "ActionButton.Label";
+var ActionButtonTooltip = React.forwardRef((props, ref) => {
+  const { asChild, position = "top", showOnHover = true, children, ...domProps } = props;
+  const context = useActionButtonContext();
+  const Comp = asChild ? Slot : "span";
+  if (showOnHover && !context.isHovered && !context.isFocused) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, role: "tooltip", "data-tooltip-position": position, ...domProps, children });
+});
+ActionButtonTooltip.displayName = "ActionButton.Tooltip";
+var ActionButton = {
+  Root: ActionButtonRoot,
+  Icon: ActionButtonIcon,
+  Label: ActionButtonLabel,
+  Tooltip: ActionButtonTooltip
+};
 function useStreaming(options = {}) {
-  const [content, setContent] = react.useState("");
-  const [isStreaming, setIsStreaming] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const abortControllerRef = react.useRef(null);
-  const processStream = react.useCallback(
+  const [content, setContent] = React.useState("");
+  const [isStreaming, setIsStreaming] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const abortControllerRef = React.useRef(null);
+  const processStream = React.useCallback(
     async (stream, signal) => {
       setIsStreaming(true);
       setError(null);
@@ -2480,14 +4191,14 @@ function useStreaming(options = {}) {
     },
     [options]
   );
-  const cancel = react.useCallback(() => {
+  const cancel = React.useCallback(() => {
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
       abortControllerRef.current = null;
       setIsStreaming(false);
     }
   }, []);
-  const reset = react.useCallback(() => {
+  const reset = React.useCallback(() => {
     setContent("");
     setError(null);
     setIsStreaming(false);
@@ -2501,6 +4212,572 @@ function useStreaming(options = {}) {
     reset
   };
 }
+function generateId() {
+  return Math.random().toString(36).substring(7);
+}
+function useToast() {
+  const [toasts, setToasts] = React.useState([]);
+  const showToast = React.useCallback(
+    (type, message, duration) => {
+      const id = generateId();
+      setToasts((prev) => [...prev, { id, type, message, duration }]);
+    },
+    []
+  );
+  const dismiss = React.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const dismissAll = React.useCallback(() => {
+    setToasts([]);
+  }, []);
+  return {
+    toasts,
+    success: (msg, duration) => showToast("success", msg, duration),
+    error: (msg, duration) => showToast("error", msg, duration),
+    info: (msg, duration) => showToast("info", msg, duration),
+    warning: (msg, duration) => showToast("warning", msg, duration),
+    dismiss,
+    dismissAll
+  };
+}
+function useImageGallery(options = {}) {
+  const { images: initialImages = [], wrap = false, onOpen, onClose, onNavigate } = options;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const [images, setImages] = React.useState(initialImages);
+  const currentImage = React.useMemo(() => images[currentIndex], [images, currentIndex]);
+  const hasPrev = React.useMemo(() => {
+    if (wrap) return images.length > 1;
+    return currentIndex > 0;
+  }, [currentIndex, images.length, wrap]);
+  const hasNext = React.useMemo(() => {
+    if (wrap) return images.length > 1;
+    return currentIndex < images.length - 1;
+  }, [currentIndex, images.length, wrap]);
+  const open = React.useCallback(
+    (index, newImages) => {
+      if (newImages) {
+        setImages(newImages);
+      }
+      const targetImages = newImages || images;
+      if (targetImages.length === 0) {
+        setCurrentIndex(0);
+        setIsOpen(true);
+        return;
+      }
+      const safeIndex = Math.max(0, Math.min(index, targetImages.length - 1));
+      setCurrentIndex(safeIndex);
+      setIsOpen(true);
+      onOpen?.(safeIndex);
+    },
+    [images, onOpen]
+  );
+  const close = React.useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const prev = React.useCallback(() => {
+    if (images.length < 2) return;
+    if (!hasPrev && !wrap) return;
+    setCurrentIndex((current) => {
+      const newIndex = wrap ? (current - 1 + images.length) % images.length : Math.max(0, current - 1);
+      onNavigate?.(newIndex, "prev");
+      return newIndex;
+    });
+  }, [hasPrev, wrap, images.length, onNavigate]);
+  const next = React.useCallback(() => {
+    if (images.length < 2) return;
+    if (!hasNext && !wrap) return;
+    setCurrentIndex((current) => {
+      const newIndex = wrap ? (current + 1) % images.length : Math.min(images.length - 1, current + 1);
+      onNavigate?.(newIndex, "next");
+      return newIndex;
+    });
+  }, [hasNext, wrap, images.length, onNavigate]);
+  const goTo = React.useCallback(
+    (index) => {
+      const safeIndex = Math.max(0, Math.min(index, images.length - 1));
+      setCurrentIndex(safeIndex);
+    },
+    [images.length]
+  );
+  const setImagesHandler = React.useCallback((newImages) => {
+    setImages(newImages);
+    if (newImages.length === 0) {
+      setCurrentIndex(0);
+    } else {
+      setCurrentIndex((current) => Math.min(current, newImages.length - 1));
+    }
+  }, []);
+  return {
+    isOpen,
+    currentIndex,
+    currentImage,
+    images,
+    hasPrev,
+    hasNext,
+    open,
+    close,
+    prev,
+    next,
+    goTo,
+    setImages: setImagesHandler
+  };
+}
+function useAutoScroll(options = {}) {
+  const { threshold = 100, smooth = true, onScroll } = options;
+  const containerRef = React.useRef(null);
+  const [isAtBottom, setIsAtBottom] = React.useState(true);
+  const [shouldAutoScroll, setShouldAutoScroll] = React.useState(true);
+  const checkIsAtBottom = React.useCallback(
+    (container) => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      return scrollHeight - scrollTop - clientHeight <= threshold;
+    },
+    [threshold]
+  );
+  const handleScroll = React.useCallback(
+    (e) => {
+      const container = e.currentTarget;
+      const atBottom = checkIsAtBottom(container);
+      setIsAtBottom(atBottom);
+      setShouldAutoScroll(atBottom);
+      onScroll?.(atBottom);
+    },
+    [checkIsAtBottom, onScroll]
+  );
+  const scrollToBottom = React.useCallback(
+    (useSmooth) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const shouldSmooth = useSmooth ?? smooth;
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: shouldSmooth ? "smooth" : "auto"
+      });
+      setIsAtBottom(true);
+      setShouldAutoScroll(true);
+    },
+    [smooth]
+  );
+  const setAutoScroll = React.useCallback((enabled) => {
+    setShouldAutoScroll(enabled);
+    if (enabled) {
+      const container = containerRef.current;
+      if (container) {
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: "auto"
+        });
+        setIsAtBottom(true);
+      }
+    }
+  }, []);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let rafId = null;
+    const observer = new MutationObserver(() => {
+      if (shouldAutoScroll) {
+        if (rafId === null) {
+          rafId = requestAnimationFrame(() => {
+            container.scrollTo({
+              top: container.scrollHeight,
+              behavior: "instant"
+            });
+            rafId = null;
+          });
+        }
+      }
+    });
+    observer.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      observer.disconnect();
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [shouldAutoScroll]);
+  return {
+    containerRef,
+    isAtBottom,
+    shouldAutoScroll,
+    scrollToBottom,
+    setAutoScroll,
+    handleScroll
+  };
+}
+function useMessageActions(options = {}) {
+  const { onCopy, onCopyError, onRegenerate, onEdit, copiedDuration = 2e3 } = options;
+  const [isCopied, setIsCopied] = React.useState(false);
+  const [isRegenerating, setIsRegenerating] = React.useState(false);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const copiedTimeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (copiedTimeoutRef.current) {
+        clearTimeout(copiedTimeoutRef.current);
+        copiedTimeoutRef.current = null;
+      }
+    };
+  }, []);
+  const copy = React.useCallback(
+    async (content) => {
+      try {
+        await navigator.clipboard.writeText(content);
+        setIsCopied(true);
+        onCopy?.(content);
+        if (copiedTimeoutRef.current) {
+          clearTimeout(copiedTimeoutRef.current);
+        }
+        copiedTimeoutRef.current = setTimeout(() => {
+          setIsCopied(false);
+          copiedTimeoutRef.current = null;
+        }, copiedDuration);
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error("Failed to copy");
+        onCopyError?.(err);
+        throw err;
+      }
+    },
+    [onCopy, onCopyError, copiedDuration]
+  );
+  const regenerate = React.useCallback(async () => {
+    if (!onRegenerate) return;
+    if (isRegenerating) return;
+    setIsRegenerating(true);
+    try {
+      await onRegenerate();
+    } finally {
+      setIsRegenerating(false);
+    }
+  }, [onRegenerate, isRegenerating]);
+  const edit = React.useCallback(
+    async (content) => {
+      if (!onEdit) return;
+      if (isEditing) return;
+      setIsEditing(true);
+      try {
+        await onEdit(content);
+      } finally {
+        setIsEditing(false);
+      }
+    },
+    [onEdit, isEditing]
+  );
+  const reset = React.useCallback(() => {
+    setIsCopied(false);
+    setIsRegenerating(false);
+    setIsEditing(false);
+    if (copiedTimeoutRef.current) {
+      clearTimeout(copiedTimeoutRef.current);
+      copiedTimeoutRef.current = null;
+    }
+  }, []);
+  return {
+    isCopied,
+    isRegenerating,
+    isEditing,
+    copy,
+    regenerate,
+    edit,
+    reset
+  };
+}
+var DEFAULT_MAX_FILES = 10;
+var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
+var DEFAULT_ALLOWED_TYPES = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+function generateId2() {
+  return `attachment-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+}
+function isImageFile(file) {
+  return file.type.startsWith("image/");
+}
+async function createImagePreview(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
+function useAttachments(options = {}) {
+  const {
+    maxFiles = DEFAULT_MAX_FILES,
+    maxFileSize = DEFAULT_MAX_FILE_SIZE,
+    allowedTypes = DEFAULT_ALLOWED_TYPES,
+    validate,
+    onAdd,
+    onRemove,
+    onError
+  } = options;
+  const [files, setFiles] = React.useState([]);
+  const [errors, setErrors] = React.useState([]);
+  const [isProcessing, setIsProcessing] = React.useState(false);
+  const removedRef = React.useRef(null);
+  const isMaxReached = React.useMemo(() => files.length >= maxFiles, [files.length, maxFiles]);
+  const remainingSlots = React.useMemo(() => Math.max(0, maxFiles - files.length), [files.length, maxFiles]);
+  const validateFile = React.useCallback(
+    (file, currentCount) => {
+      if (currentCount >= maxFiles) {
+        return {
+          file,
+          reason: "count",
+          message: `Maximum ${maxFiles} files allowed`
+        };
+      }
+      if (file.size > maxFileSize) {
+        const maxSizeMB = (maxFileSize / (1024 * 1024)).toFixed(1);
+        return {
+          file,
+          reason: "size",
+          message: `File "${file.name}" exceeds ${maxSizeMB}MB limit`
+        };
+      }
+      if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
+        return {
+          file,
+          reason: "type",
+          message: `File type "${file.type || "unknown"}" not allowed`
+        };
+      }
+      if (validate) {
+        const customError = validate(file);
+        if (customError) {
+          return {
+            file,
+            reason: "custom",
+            message: customError
+          };
+        }
+      }
+      return null;
+    },
+    [maxFiles, maxFileSize, allowedTypes, validate]
+  );
+  const add = React.useCallback(
+    async (newFiles) => {
+      if (isProcessing) {
+        const fileArray2 = Array.from(newFiles);
+        if (fileArray2.length > 0) {
+          const processingErrors = fileArray2.map((file) => ({
+            file,
+            reason: "custom",
+            message: "Please wait for the current files to finish processing."
+          }));
+          setErrors(processingErrors);
+          onError?.(processingErrors);
+        }
+        return;
+      }
+      setIsProcessing(true);
+      const fileArray = Array.from(newFiles);
+      const validationErrors = [];
+      const validFiles = [];
+      let currentCount = files.length;
+      for (const file of fileArray) {
+        const error = validateFile(file, currentCount);
+        if (error) {
+          validationErrors.push(error);
+          continue;
+        }
+        const attachment = {
+          id: generateId2(),
+          filename: file.name,
+          mimeType: file.type,
+          sizeBytes: file.size
+        };
+        if (isImageFile(file)) {
+          try {
+            const preview = await createImagePreview(file);
+            attachment.base64Data = preview;
+          } catch {
+          }
+        }
+        validFiles.push(attachment);
+        currentCount++;
+      }
+      if (validationErrors.length > 0) {
+        setErrors(validationErrors);
+        onError?.(validationErrors);
+      }
+      if (validFiles.length > 0) {
+        setFiles((prev) => [...prev, ...validFiles]);
+        onAdd?.(validFiles);
+      }
+      setIsProcessing(false);
+    },
+    [files.length, validateFile, onAdd, onError, isProcessing]
+  );
+  const remove = React.useCallback(
+    (fileOrId) => {
+      const id = typeof fileOrId === "string" ? fileOrId : fileOrId.id;
+      setFiles((prev) => {
+        const removed2 = prev.find((f) => f.id === id) ?? null;
+        const next = prev.filter((f) => f.id !== id);
+        removedRef.current = removed2;
+        return next;
+      });
+      const removed = removedRef.current;
+      if (removed) {
+        onRemove?.(removed);
+        removedRef.current = null;
+      }
+    },
+    [onRemove]
+  );
+  const clear = React.useCallback(() => {
+    setFiles([]);
+    setErrors([]);
+  }, []);
+  const clearErrors = React.useCallback(() => {
+    setErrors([]);
+  }, []);
+  const setFilesHandler = React.useCallback((newFiles) => {
+    setFiles(newFiles);
+  }, []);
+  return {
+    files,
+    errors,
+    isProcessing,
+    isMaxReached,
+    remainingSlots,
+    add,
+    remove,
+    clear,
+    clearErrors,
+    setFiles: setFilesHandler
+  };
+}
+function useMarkdownCopy(options = {}) {
+  const { copiedDuration = 2e3, onCopy, onError } = options;
+  const [copiedStates, setCopiedStates] = React.useState(/* @__PURE__ */ new Map());
+  const timeoutsRef = React.useRef(/* @__PURE__ */ new Map());
+  React.useEffect(() => {
+    return () => {
+      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+      timeoutsRef.current.clear();
+    };
+  }, []);
+  const isCopied = React.useCallback(
+    (blockId) => {
+      return copiedStates.get(blockId) ?? false;
+    },
+    [copiedStates]
+  );
+  const copy = React.useCallback(
+    async (blockId, content, language) => {
+      try {
+        await navigator.clipboard.writeText(content);
+        setCopiedStates((prev) => {
+          const next = new Map(prev);
+          next.set(blockId, true);
+          return next;
+        });
+        onCopy?.(content, language);
+        const existingTimeout = timeoutsRef.current.get(blockId);
+        if (existingTimeout) {
+          clearTimeout(existingTimeout);
+        }
+        const timeout = setTimeout(() => {
+          setCopiedStates((prev) => {
+            const next = new Map(prev);
+            next.set(blockId, false);
+            return next;
+          });
+          timeoutsRef.current.delete(blockId);
+        }, copiedDuration);
+        timeoutsRef.current.set(blockId, timeout);
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error("Failed to copy");
+        onError?.(err);
+        throw err;
+      }
+    },
+    [copiedDuration, onCopy, onError]
+  );
+  const reset = React.useCallback((blockId) => {
+    setCopiedStates((prev) => {
+      const next = new Map(prev);
+      next.set(blockId, false);
+      return next;
+    });
+    const timeout = timeoutsRef.current.get(blockId);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutsRef.current.delete(blockId);
+    }
+  }, []);
+  const resetAll = React.useCallback(() => {
+    setCopiedStates(/* @__PURE__ */ new Map());
+    timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+    timeoutsRef.current.clear();
+  }, []);
+  return {
+    copiedStates,
+    isCopied,
+    copy,
+    reset,
+    resetAll
+  };
+}
+var ConfigContext = React.createContext(null);
+function ConfigProvider({ config, useGlobalConfig = false, children }) {
+  let resolvedConfig = null;
+  if (config) {
+    resolvedConfig = config;
+  } else if (useGlobalConfig && typeof window !== "undefined") {
+    const globalContext = window.__BICHAT_CONTEXT__;
+    const globalCSRF = window.__CSRF_TOKEN__;
+    if (globalContext) {
+      resolvedConfig = {
+        user: {
+          id: String(globalContext.user?.id || ""),
+          email: globalContext.user?.email || "",
+          firstName: globalContext.user?.firstName || "",
+          lastName: globalContext.user?.lastName || "",
+          permissions: globalContext.user?.permissions || []
+        },
+        tenant: {
+          id: globalContext.tenant?.id || "",
+          name: globalContext.tenant?.name || ""
+        },
+        locale: {
+          language: globalContext.locale?.language || "en",
+          translations: globalContext.locale?.translations || {}
+        },
+        endpoints: {
+          graphQL: globalContext.config?.graphQLEndpoint || "/graphql",
+          stream: globalContext.config?.streamEndpoint || "/stream"
+        },
+        csrfToken: globalCSRF
+      };
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ConfigContext.Provider, { value: resolvedConfig, children });
+}
+function useConfig() {
+  return React.useContext(ConfigContext);
+}
+function useRequiredConfig() {
+  const config = React.useContext(ConfigContext);
+  if (!config) {
+    throw new Error(
+      "BiChat configuration not found. Wrap your app with <ConfigProvider config={...}> or use useGlobalConfig={true}."
+    );
+  }
+  return config;
+}
+function hasPermission2(config, permission) {
+  if (!config) {
+    return false;
+  }
+  return config.user.permissions.includes(permission);
+}
 
 // ui/src/bichat/theme/themes.ts
 var lightTheme = {
@@ -2567,7 +4844,7 @@ var darkTheme = {
     full: "9999px"
   }
 };
-var ThemeContext = react.createContext(null);
+var ThemeContext = React.createContext(null);
 function getSystemTheme() {
   if (typeof window === "undefined") {
     return lightTheme;
@@ -2606,11 +4883,11 @@ function applyThemeVariables(theme) {
   });
 }
 function ThemeProvider({ theme = "system", children }) {
-  const resolvedTheme = react.useMemo(() => resolveTheme(theme), [theme]);
-  react.useEffect(() => {
+  const resolvedTheme = React.useMemo(() => resolveTheme(theme), [theme]);
+  React.useEffect(() => {
     applyThemeVariables(resolvedTheme);
   }, [resolvedTheme]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (theme !== "system") {
       return;
     }
@@ -2630,7 +4907,7 @@ function ThemeProvider({ theme = "system", children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  const context = react.useContext(ThemeContext);
+  const context = React.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeProvider");
   }
@@ -2733,7 +5010,7 @@ var HttpDataSource = class {
     return data.createChatSession;
   }
   /**
-   * Fetch an existing session with messages
+   * Fetch an existing session with turns (turn-based architecture)
    */
   async fetchSession(id) {
     const query = `
@@ -2747,46 +5024,79 @@ var HttpDataSource = class {
             createdAt
             updatedAt
           }
-          messages {
+          turns {
             id
             sessionId
-            role
-            content
             createdAt
-            toolCalls {
+            userTurn {
               id
-              name
-              arguments
+              content
+              attachments {
+                id
+                filename
+                mimeType
+                sizeBytes
+                base64Data
+              }
+              createdAt
             }
-            citations {
+            assistantTurn {
               id
-              source
-              url
-              excerpt
-            }
-            chartData {
-              type
-              title
-              data
-              xAxisKey
-              yAxisKey
-            }
-            artifacts {
-              type
-              filename
-              url
-              sizeReadable
-              rowCount
-              description
+              content
+              explanation
+              citations {
+                id
+                type
+                title
+                url
+                startIndex
+                endIndex
+                excerpt
+                source
+              }
+              chartData {
+                chartType
+                title
+                series {
+                  name
+                  data
+                }
+                labels
+                colors
+                height
+              }
+              artifacts {
+                type
+                filename
+                url
+                sizeReadable
+                rowCount
+                description
+              }
+              codeOutputs {
+                type
+                content
+                filename
+                mimeType
+                sizeBytes
+              }
+              createdAt
             }
-            explanation
           }
           pendingQuestion {
             id
             turnId
-            question
-            type
-            options
+            questions {
+              id
+              text
+              type
+              options {
+                id
+                label
+                value
+              }
+              required
+            }
             status
           }
         }
@@ -2962,38 +5272,65 @@ function createHttpDataSource(config) {
   return new HttpDataSource(config);
 }
 
+// ui/src/bichat/index.ts
+init_citationProcessor();
+
+// ui/src/bichat/types/index.ts
+var MessageRole = /* @__PURE__ */ ((MessageRole2) => {
+  MessageRole2["User"] = "user";
+  MessageRole2["Assistant"] = "assistant";
+  MessageRole2["System"] = "system";
+  MessageRole2["Tool"] = "tool";
+  return MessageRole2;
+})(MessageRole || {});
+
+exports.ActionButton = ActionButton;
+exports.AssistantMessage = AssistantMessage;
 exports.AssistantTurnView = AssistantTurnView;
-exports.AttachmentGrid = AttachmentGrid;
+exports.AttachmentGrid = MemoizedAttachmentGrid;
+exports.Avatar = Avatar;
+exports.Bubble = Bubble;
 exports.ChartCard = ChartCard;
 exports.ChatHeader = ChatHeader;
 exports.ChatSession = ChatSession;
 exports.ChatSessionProvider = ChatSessionProvider;
 exports.CodeOutputsPanel = CodeOutputsPanel;
 exports.ConfigProvider = ConfigProvider;
+exports.ConfirmModal = ConfirmModal;
+exports.DefaultErrorContent = DefaultErrorContent;
 exports.DownloadCard = DownloadCard;
-exports.EditableText = EditableText_default;
-exports.EmptyState = EmptyState_default;
+exports.EditableText = MemoizedEditableText;
+exports.EmptyState = MemoizedEmptyState;
+exports.ErrorBoundary = ErrorBoundary;
 exports.HttpDataSource = HttpDataSource;
 exports.ImageModal = ImageModal;
 exports.InlineQuestionForm = InlineQuestionForm;
 exports.IotaContextProvider = IotaContextProvider;
 exports.ListItemSkeleton = ListItemSkeleton;
-exports.MarkdownRenderer = MarkdownRenderer;
+exports.LoadingSpinner = MemoizedLoadingSpinner;
 exports.MessageInput = MessageInput;
 exports.MessageList = MessageList;
 exports.MessageRole = MessageRole;
+exports.PermissionGuard = PermissionGuard;
 exports.RateLimiter = RateLimiter;
 exports.ScrollToBottomButton = ScrollToBottomButton;
-exports.SearchInput = SearchInput_default;
-exports.Skeleton = Skeleton_default;
+exports.SearchInput = MemoizedSearchInput;
+exports.Skeleton = MemoizedSkeleton;
 exports.SkeletonAvatar = SkeletonAvatar;
 exports.SkeletonCard = SkeletonCard;
 exports.SkeletonGroup = SkeletonGroup;
 exports.SkeletonText = SkeletonText;
+exports.Slot = Slot;
 exports.SourcesPanel = SourcesPanel;
 exports.StreamingCursor = StreamingCursor;
 exports.ThemeProvider = ThemeProvider;
+exports.Toast = Toast;
+exports.ToastContainer = ToastContainer;
+exports.Turn = Turn;
 exports.TurnBubble = TurnBubble;
+exports.TypingIndicator = MemoizedTypingIndicator;
+exports.UserAvatar = MemoizedUserAvatar;
+exports.UserMessage = UserMessage;
 exports.UserTurnView = UserTurnView;
 exports.WelcomeContent = WelcomeContent;
 exports.addCSRFHeader = addCSRFHeader;
@@ -3010,23 +5347,37 @@ exports.fadeInVariants = fadeInVariants;
 exports.floatingButtonVariants = floatingButtonVariants;
 exports.formatFileSize = formatFileSize;
 exports.getCSRFToken = getCSRFToken;
+exports.getValidChildren = getValidChildren;
 exports.hasConfigPermission = hasPermission2;
 exports.hasPermission = hasPermission;
 exports.lightTheme = lightTheme;
 exports.listItemVariants = listItemVariants;
 exports.messageContainerVariants = messageContainerVariants;
 exports.messageVariants = messageVariants;
+exports.processCitations = processCitations;
 exports.scaleFadeVariants = scaleFadeVariants;
 exports.staggerContainerVariants = staggerContainerVariants;
 exports.toastVariants = toastVariants;
 exports.typingDotVariants = typingDotVariants;
+exports.useActionButtonContext = useActionButtonContext;
+exports.useAttachments = useAttachments;
+exports.useAutoScroll = useAutoScroll;
+exports.useAvatarContext = useAvatarContext;
+exports.useBubbleContext = useBubbleContext;
 exports.useChat = useChat;
 exports.useConfig = useConfig;
+exports.useFocusTrap = useFocusTrap;
+exports.useImageGallery = useImageGallery;
 exports.useIotaContext = useIotaContext;
+exports.useMarkdownCopy = useMarkdownCopy;
+exports.useMessageActions = useMessageActions;
+exports.useModalLock = useModalLock;
 exports.useRequiredConfig = useRequiredConfig;
 exports.useStreaming = useStreaming;
 exports.useTheme = useTheme;
+exports.useToast = useToast;
 exports.useTranslation = useTranslation;
+exports.useTurnContext = useTurnContext;
 exports.validateFileCount = validateFileCount;
 exports.validateImageFile = validateImageFile;
 //# sourceMappingURL=index.cjs.map