@iota-uz/sdk 0.1.1 → 0.3.0

package/dist/bichat/index.mjs

@@ -1,13 +1,14 @@
+import React, { createContext, memo, lazy, forwardRef, useState, useRef, useImperativeHandle, useEffect, isValidElement, cloneElement, useMemo, useContext, useCallback, useId, Suspense, Component, Children } from 'react';
+import { X, Paperclip, PaperPlaneRight, CircleNotch, MagnifyingGlass, FileXls, CaretLeft, CaretRight, Copy, PencilSimple, Download, Question, ArrowsClockwise, ArrowDown, ChartBar, FileText, Lightbulb, WarningCircle, ArrowClockwise, Check, Warning, Info, XCircle, CheckCircle } from '@phosphor-icons/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Prism } from 'react-syntax-highlighter';
+import { vscDarkPlus, vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import rehypeSanitize from 'rehype-sanitize';
-import { Prism } from 'react-syntax-highlighter';
-import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, lazy, forwardRef, useState, useRef, useImperativeHandle, useEffect, memo, useContext, useCallback, Suspense, useMemo } from 'react';
-import { X, Paperclip, PaperPlaneRight, CircleNotch, MagnifyingGlass, CaretLeft, CaretRight, Copy, PencilSimple, ArrowsClockwise, ArrowDown, ChartBar, FileText, Lightbulb } from '@phosphor-icons/react';
 import { formatDistanceToNow } from 'date-fns';
-import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Area, PieChart, Pie, Cell, LineChart, Line, BarChart, Bar } from 'recharts';
+import { createPortal } from 'react-dom';
+import ReactApexChart from 'react-apexcharts';
+import ApexCharts from 'apexcharts';
 import { motion, AnimatePresence } from 'framer-motion';
 
 var __defProp = Object.defineProperty;
@@ -20,50 +21,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"() {
+  }
+});
+var TableExportButton;
+var init_TableExportButton = __esm({
+  "ui/src/bichat/components/TableExportButton.tsx"() {
+    TableExportButton = memo(function TableExportButton2({
+      onClick,
+      disabled = false,
+      label = "Export",
+      disabledTooltip = "Please wait..."
+    }) {
+      return /* @__PURE__ */ 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__ */ jsx(FileXls, { size: 16, weight: "fill" }),
+            /* @__PURE__ */ jsx("span", { children: label })
+          ]
+        }
+      );
+    });
+  }
+});
+var DEFAULT_EXPORT_MESSAGE, TableWithExport;
+var init_TableWithExport = __esm({
+  "ui/src/bichat/components/TableWithExport.tsx"() {
+    init_TableExportButton();
+    DEFAULT_EXPORT_MESSAGE = "Export the table above to Excel";
+    TableWithExport = memo(function TableWithExport2({
+      children,
+      sendMessage,
+      disabled = false,
+      exportMessage = DEFAULT_EXPORT_MESSAGE,
+      exportLabel = "Export"
+    }) {
+      const handleExport = useCallback(() => {
+        sendMessage?.(exportMessage);
+      }, [sendMessage, exportMessage]);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "markdown-table-wrapper overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: "markdown-table w-full border-collapse", children }) }),
+        sendMessage && /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-1", children: /* @__PURE__ */ jsx(TableExportButton, { onClick: handleExport, disabled, label: exportLabel }) })
+      ] });
+    });
+  }
+});
+
+// ui/src/bichat/components/CodeBlock.tsx
+var CodeBlock_exports = {};
+__export(CodeBlock_exports, {
+  CodeBlock: () => MemoizedCodeBlock,
+  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] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(getInitialDarkMode);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const copyTimeoutRef = useRef(null);
+  const normalizedLanguage = normalizeLanguage(language);
+  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();
+  }, []);
+  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__ */ 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__ */ 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__ */ jsx("code", { className: "text-gray-700 dark:text-gray-300 text-sm font-mono", children: value }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative group my-4 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-700", children: [
+    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400 font-medium uppercase", children: normalizedLanguage }),
+      /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Check, { size: 16, className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx("span", { children: copiedLabel })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Copy, { size: 16, className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx("span", { children: copyLabel })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Prism,
+      {
+        language: normalizedLanguage,
+        style: isDarkMode ? vscDarkPlus : 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, MemoizedCodeBlock, 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"
+    };
+    MemoizedCodeBlock = memo(CodeBlock);
+    MemoizedCodeBlock.displayName = "CodeBlock";
+    CodeBlock_default = MemoizedCodeBlock;
+  }
+});
+
 // ui/src/bichat/components/MarkdownRenderer.tsx
 var MarkdownRenderer_exports = {};
 __export(MarkdownRenderer_exports, {
-  MarkdownRenderer: () => MarkdownRenderer
+  MarkdownRenderer: () => MemoizedMarkdownRenderer,
+  default: () => MarkdownRenderer_default
 });
-function MarkdownRenderer({ content }) {
-  return /* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none", children: /* @__PURE__ */ jsx(
-    ReactMarkdown,
-    {
-      remarkPlugins: [remarkGfm],
-      rehypePlugins: [rehypeSanitize],
-      components: {
-        code({ className, children, ...props }) {
-          const match = /language-(\w+)/.exec(className || "");
-          const isInline = !match;
-          return !isInline && match ? /* @__PURE__ */ jsx(
-            Prism,
+function MarkdownRenderer({
+  content,
+  citations,
+  sendMessage,
+  sendDisabled = false,
+  copyLabel = "Copy",
+  copiedLabel = "Copied!",
+  exportLabel = "Export"
+}) {
+  const processed = useMemo(() => {
+    return processCitations(content, citations);
+  }, [content, citations]);
+  const components = {
+    // Remove <pre> wrapper for code blocks - CodeBlock provides its own container
+    pre: ({ children }) => /* @__PURE__ */ jsx(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__ */ 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__ */ jsx(
+        Suspense,
+        {
+          fallback: /* @__PURE__ */ jsx("pre", { className: "bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto my-4", children: /* @__PURE__ */ jsx("code", { className: "text-sm font-mono", children: value }) }),
+          children: /* @__PURE__ */ jsx(
+            CodeBlock2,
             {
-              style: tomorrow,
-              language: match[1],
-              PreTag: "div",
-              children: String(children).replace(/\n$/, "")
+              language,
+              value,
+              inline: false,
+              copyLabel,
+              copiedLabel
             }
-          ) : /* @__PURE__ */ jsx("code", { className, ...props, children });
+          )
         }
-      },
-      children: content
-    }
-  ) });
+      );
+    },
+    p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "markdown-p my-2", children }),
+    a: ({ href, children }) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "markdown-link text-[var(--bichat-primary)] hover:underline",
+        children
+      }
+    ),
+    h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: "markdown-h1 text-2xl font-bold mt-6 mb-3", children }),
+    h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: "markdown-h2 text-xl font-bold mt-5 mb-2", children }),
+    h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: "markdown-h3 text-lg font-semibold mt-4 mb-2", children }),
+    h4: ({ children }) => /* @__PURE__ */ jsx("h4", { className: "markdown-h4 text-base font-semibold mt-3 mb-1", children }),
+    h5: ({ children }) => /* @__PURE__ */ jsx("h5", { className: "markdown-h5 text-sm font-semibold mt-2 mb-1", children }),
+    h6: ({ children }) => /* @__PURE__ */ jsx("h6", { className: "markdown-h6 text-sm font-medium mt-2 mb-1", children }),
+    ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "markdown-ul list-disc list-inside my-2 space-y-1", children }),
+    ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "markdown-ol list-decimal list-inside my-2 space-y-1", children }),
+    li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "markdown-li", children }),
+    blockquote: ({ children }) => /* @__PURE__ */ 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__ */ jsx(
+      TableWithExport,
+      {
+        sendMessage,
+        disabled: sendDisabled,
+        exportLabel,
+        children
+      }
+    ),
+    thead: ({ children }) => /* @__PURE__ */ jsx("thead", { className: "markdown-thead bg-gray-100 dark:bg-gray-800", children }),
+    tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { className: "markdown-tbody", children }),
+    tr: ({ children }) => /* @__PURE__ */ jsx("tr", { className: "markdown-tr border-b border-gray-200 dark:border-gray-700", children }),
+    th: ({ children }) => /* @__PURE__ */ 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__ */ jsx("td", { className: "markdown-td px-3 py-2 text-sm text-gray-600 dark:text-gray-400", children }),
+    hr: () => /* @__PURE__ */ jsx("hr", { className: "markdown-hr my-4 border-gray-200 dark:border-gray-700" }),
+    strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "markdown-strong font-semibold", children }),
+    em: ({ children }) => /* @__PURE__ */ jsx("em", { className: "markdown-em italic", children })
+  };
+  return /* @__PURE__ */ jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children: processed.content }) });
 }
+var CodeBlock2, MemoizedMarkdownRenderer, MarkdownRenderer_default;
 var init_MarkdownRenderer = __esm({
   "ui/src/bichat/components/MarkdownRenderer.tsx"() {
+    init_citationProcessor();
+    init_TableWithExport();
+    CodeBlock2 = lazy(() => Promise.resolve().then(() => (init_CodeBlock(), CodeBlock_exports)).then((module) => ({ default: module.CodeBlock })));
+    MemoizedMarkdownRenderer = memo(MarkdownRenderer);
+    MemoizedMarkdownRenderer.displayName = "MarkdownRenderer";
+    MarkdownRenderer_default = MemoizedMarkdownRenderer;
   }
 });
 
-// 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) {
@@ -111,6 +395,24 @@ var DEFAULT_RATE_LIMIT_CONFIG = {
   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,
@@ -118,7 +420,7 @@ function ChatSessionProvider({
   children
 }) {
   const [message, setMessage] = useState("");
-  const [messages, setMessages] = useState([]);
+  const [turns, setTurns] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [currentSessionId, setCurrentSessionId] = useState(sessionId);
@@ -139,7 +441,7 @@ function ChatSessionProvider({
   useEffect(() => {
     if (!currentSessionId || currentSessionId === "new") {
       setSession(null);
-      setMessages([]);
+      setTurns([]);
       setPendingQuestion(null);
       setFetching(false);
       return;
@@ -151,7 +453,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");
@@ -184,14 +486,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;
@@ -229,7 +525,7 @@ function ChatSessionProvider({
               const state = await dataSource.fetchSession(finalSessionId);
               if (state) {
                 setSession(state.session);
-                setMessages(state.messages);
+                setTurns(state.turns);
                 setPendingQuestion(state.pendingQuestion || null);
               }
             }
@@ -246,7 +542,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);
@@ -295,32 +591,29 @@ function ChatSessionProvider({
     };
   }, [messageQueue]);
   const handleRegenerate = useCallback(
-    async (messageId) => {
+    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 = useCallback(
-    async (messageId, newContent) => {
+    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);
@@ -356,7 +649,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);
@@ -400,7 +693,7 @@ function ChatSessionProvider({
   const value = {
     // State
     message,
-    messages,
+    turns,
     loading,
     error,
     currentSessionId,
@@ -594,7 +887,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__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
     }
@@ -676,25 +969,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 = 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__ */ 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__ */ jsxs("div", { className: `space-y-2 ${className}`, children: [
+    showCount && /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
+      displayedAttachments.length,
+      " image",
+      displayedAttachments.length !== 1 ? "s" : "",
+      " attached"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2", children: displayedAttachments.map((attachment, index) => /* @__PURE__ */ jsx(
+      MemoizedAttachmentItem,
+      {
+        attachment,
+        index,
+        onRemove: isEditable ? onRemove : void 0,
+        onView: isViewable ? onView : void 0
+      },
+      `${attachment.filename}-${index}`
+    )) }),
+    maxDisplay && attachments.length > maxDisplay && /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+      "+",
+      attachments.length - maxDisplay,
+      " more"
+    ] }),
+    isAtMaxCapacity && isEditable && /* @__PURE__ */ 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__ */ jsx("div", { className: `grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 ${className}`, children: attachments.map((attachment, index) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
     /* @__PURE__ */ 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);
           }
         }
       }
@@ -705,203 +1043,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__ */ jsx(X, { size: 16, weight: "bold" })
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "mt-1 px-1", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "text-xs text-gray-500 dark:text-gray-500", children: formatFileSize(attachment.sizeBytes) })
     ] })
-  ] }, index)) });
+  ] });
+}
+var MemoizedAttachmentItem = React.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.memo(AttachmentGrid);
+MemoizedAttachmentGrid.displayName = "AttachmentGrid";
+var AttachmentGrid_default = MemoizedAttachmentGrid;
+function useModalLock(isOpen) {
+  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) {
+  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 ImageModal({ images, initialIndex, onClose }) {
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const handlePrevious = () => {
-    setCurrentIndex((prev) => prev > 0 ? prev - 1 : images.length - 1);
+function SpinnerLoader({
+  size = "md",
+  message
+}) {
+  const sizeMap = {
+    sm: 16,
+    md: 32,
+    lg: 48
   };
-  const handleNext = () => {
-    setCurrentIndex((prev) => prev < images.length - 1 ? prev + 1 : 0);
+  const sizeClasses5 = {
+    sm: "h-4 w-4",
+    md: "h-8 w-8",
+    lg: "h-12 w-12"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx(
+      CircleNotch,
+      {
+        size: sizeMap[size],
+        className: `${sizeClasses5[size]} animate-spin text-[var(--bichat-primary)]`
+      }
+    ),
+    message && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: message })
+  ] });
+}
+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 gapClasses2 = {
+    sm: "gap-0.5",
+    md: "gap-1",
+    lg: "gap-1.5"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx("div", { className: `flex ${gapClasses2[size]}`, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${dotSizeClasses[size]} bg-[var(--bichat-primary)] rounded-full animate-bounce`,
+        style: { animationDelay: `${index * 0.15}s` }
+      },
+      index
+    )) }),
+    message && /* @__PURE__ */ 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"
   };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx("div", { className: `${sizeClasses5[size]} bg-[var(--bichat-primary)] rounded-full animate-pulse` }),
+    message && /* @__PURE__ */ 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__ */ jsx(DotsLoader, { size, message });
+    case "pulse":
+      return /* @__PURE__ */ jsx(PulseLoader, { size, message });
+    case "spinner":
+    default:
+      return /* @__PURE__ */ jsx(SpinnerLoader, { size, message });
+  }
+}
+var MemoizedLoadingSpinner = memo(LoadingSpinner);
+MemoizedLoadingSpinner.displayName = "LoadingSpinner";
+var LoadingSpinner_default = MemoizedLoadingSpinner;
+function ImageModal({
+  isOpen,
+  onClose,
+  attachment,
+  allAttachments,
+  currentIndex = 0,
+  onNavigate
+}) {
+  const modalRef = useRef(null);
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+  const [imageError, setImageError] = 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);
   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]);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, onNavigate, canNavigatePrev, canNavigateNext]);
   useEffect(() => {
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, []);
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx(X, { size: 24, weight: "bold" })
-          }
-        ),
-        images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ 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__ */ jsx(CaretLeft, { size: 32, weight: "bold" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
+    setIsImageLoaded(false);
+    setImageError(false);
+  }, [attachment]);
+  if (!isOpen) return null;
+  const previewUrl = attachment.preview || createDataUrl(attachment.base64Data, attachment.mimeType);
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/90 transition-opacity duration-200 z-40",
+          onClick: onClose,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ 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__ */ 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__ */ jsx(CaretRight, { size: 32, weight: "bold" })
+              ref: modalRef,
+              className: "relative flex flex-col items-center justify-center w-full h-full",
+              children: [
+                /* @__PURE__ */ 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__ */ jsx(X, { size: 24, weight: "bold" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center w-full h-full max-w-4xl", children: [
+                  !isImageLoaded && !imageError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(LoadingSpinner_default, {}) }),
+                  imageError && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-white", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-lg font-medium mb-2", children: "Failed to load image" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300", children: attachment.filename })
+                  ] }),
+                  /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { id: "modal-image-title", className: "text-lg font-medium", children: attachment.filename }),
+                  /* @__PURE__ */ jsxs("div", { id: "modal-image-description", className: "text-sm text-gray-300 space-x-2", children: [
+                    /* @__PURE__ */ jsx("span", { children: formatFileSize(attachment.sizeBytes) }),
+                    /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+                    /* @__PURE__ */ jsx("span", { children: attachment.mimeType })
+                  ] })
+                ] }),
+                hasMultipleImages && /* @__PURE__ */ 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__ */ jsx(CaretLeft, { size: 28, weight: "bold" })
+                  }
+                ),
+                hasMultipleImages && /* @__PURE__ */ 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__ */ jsx(CaretRight, { size: 28, weight: "bold" })
+                  }
+                ),
+                hasMultipleImages && /* @__PURE__ */ 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__ */ jsx(
-          "img",
-          {
-            src: images[currentIndex].preview,
-            alt: images[currentIndex].filename,
-            className: "max-w-[90vw] max-h-[90vh] object-contain",
-            onClick: (e) => e.stopPropagation()
-          }
-        ),
-        /* @__PURE__ */ 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__ */ jsx("div", { className: "text-center font-medium mb-1", children: images[currentIndex].filename }),
-              images.length > 1 && /* @__PURE__ */ jsxs("div", { className: "text-center text-xs opacity-80", children: [
-                currentIndex + 1,
-                " / ",
-                images.length
-              ] })
-            ]
-          }
-        )
-      ]
-    }
+        }
+      )
+    ] }),
+    document.body
   );
 }
-function UserTurnView({ message }) {
-  const { handleEdit, handleCopy } = useChat();
+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] = useState(null);
-  const handleCopyClick = async () => {
-    if (handleCopy) {
-      await handleCopy(message.content);
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftContent, setDraftContent] = 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 = 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 = useCallback(() => {
+    if (onEdit && turnId) {
+      setDraftContent(turn.content);
+      setIsEditing(true);
+    }
+  }, [onEdit, turnId, turn.content]);
+  const handleEditCancel = useCallback(() => {
+    setIsEditing(false);
+    setDraftContent("");
+  }, []);
+  const handleEditSave = 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 = 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 = 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__ */ jsxs("div", { className: "flex gap-3 justify-end group", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-end max-w-[75%]", children: [
-      message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 w-full", children: /* @__PURE__ */ jsx(
-        AttachmentGrid,
-        {
-          attachments: message.attachments,
-          onView: (index) => setSelectedImageIndex(index)
-        }
-      ) }),
-      message.content && /* @__PURE__ */ jsx("div", { className: "bg-primary-600 text-white rounded-2xl rounded-br-sm px-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "text-[15px] whitespace-pre-wrap break-words leading-relaxed", children: message.content }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-150", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 mr-1", children: formatDistanceToNow(new Date(message.createdAt), { addSuffix: true }) }),
+  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__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.wrapper, children: [
+      imageAttachments.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.attachments, children: renderSlot(
+        slots?.attachments,
+        attachmentsSlotProps,
         /* @__PURE__ */ jsx(
-          "button",
+          AttachmentGrid_default,
           {
-            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__ */ jsx(Copy, { size: 14, weight: "regular" })
+            attachments: imageAttachments,
+            onView: (index) => setSelectedImageIndex(index)
           }
-        ),
-        handleEdit && /* @__PURE__ */ jsx(
-          "button",
+        )
+      ) }),
+      turn.content && /* @__PURE__ */ jsx("div", { className: classes.bubble, children: /* @__PURE__ */ jsx("div", { className: classes.content, children: isEditing ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
           {
-            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__ */ jsx(PencilSimple, { 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"
           }
-        )
-      ] })
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: classes.actions, children: renderSlot(
+        slots?.actions,
+        actionsSlotProps,
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          !hideTimestamp && /* @__PURE__ */ jsx("span", { className: classes.timestamp, children: timestamp }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleCopyClick,
+              className: classes.actionButton,
+              "aria-label": "Copy message",
+              title: "Copy",
+              children: /* @__PURE__ */ jsx(Copy, { size: 14, weight: "regular" })
+            }
+          ),
+          onEdit && turnId && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleEditClick,
+              className: classes.actionButton,
+              "aria-label": "Edit message",
+              title: "Edit",
+              disabled: isEditing,
+              children: /* @__PURE__ */ jsx(PencilSimple, { size: 14, weight: "regular" })
+            }
+          )
+        ] })
+      ) })
     ] }),
-    /* @__PURE__ */ 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__ */ jsx(
-      ImageModal,
+    !hideAvatar && /* @__PURE__ */ jsx("div", { className: classes.avatar, children: renderSlot(slots?.avatar, avatarSlotProps, initials) }),
+    currentAttachment && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Code Output" }),
     /* @__PURE__ */ jsx("div", { className: "space-y-2", children: outputs.map((output, index) => /* @__PURE__ */ jsxs("div", { children: [
-      output.type === "image" && /* @__PURE__ */ 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__ */ 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__ */ jsx("code", { className: "text-gray-900 dark:text-gray-100", children: output.content }) }),
-      output.type === "error" && /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between text-white text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: output.filename }),
+          output.sizeBytes && /* @__PURE__ */ jsx("span", { className: "text-gray-300", children: formatFileSize(output.sizeBytes) })
+        ] }) })
+      ] }),
+      output.type === "text" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ 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__ */ jsx("code", { className: "text-gray-900 dark:text-gray-100", children: output.content }) }),
+        output.filename && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs", children: [
+          /* @__PURE__ */ 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__ */ jsx(Download, { size: 12, weight: "bold" }),
+                output.filename
+              ]
+            }
+          ),
+          output.sizeBytes && /* @__PURE__ */ jsxs("span", { className: "text-gray-500 dark:text-gray-400", children: [
+            "(",
+            formatFileSize(output.sizeBytes),
+            ")"
+          ] })
+        ] })
+      ] }),
+      output.type === "error" && /* @__PURE__ */ 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__ */ jsx("div", { className: "font-semibold mb-1", children: "Error" }),
+        /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: output.content })
+      ] })
     ] }, index)) })
   ] });
 }
+var CodeOutputsPanel_default = CodeOutputsPanel;
 function StreamingCursor() {
   return /* @__PURE__ */ jsx(
     "span",
@@ -911,63 +1646,97 @@ 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__ */ jsxs(BarChart, { data, children: [
-          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-          /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
-          /* @__PURE__ */ jsx(YAxis, {}),
-          /* @__PURE__ */ jsx(Tooltip, {}),
-          /* @__PURE__ */ jsx(Legend, {}),
-          /* @__PURE__ */ jsx(Bar, { dataKey: yAxisKey, fill: "#3b82f6" })
-        ] });
-      case "line":
-        return /* @__PURE__ */ jsxs(LineChart, { data, children: [
-          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-          /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
-          /* @__PURE__ */ jsx(YAxis, {}),
-          /* @__PURE__ */ jsx(Tooltip, {}),
-          /* @__PURE__ */ jsx(Legend, {}),
-          /* @__PURE__ */ jsx(Line, { type: "monotone", dataKey: yAxisKey, stroke: "#3b82f6" })
-        ] });
-      case "pie":
-        return /* @__PURE__ */ jsxs(PieChart, { children: [
-          /* @__PURE__ */ jsx(
-            Pie,
-            {
-              data,
-              dataKey: yAxisKey,
-              nameKey: xAxisKey,
-              cx: "50%",
-              cy: "50%",
-              outerRadius: 80,
-              label: true,
-              children: data.map((_entry, index) => /* @__PURE__ */ jsx(Cell, { fill: COLORS[index % COLORS.length] }, `cell-${index}`))
-            }
-          ),
-          /* @__PURE__ */ jsx(Tooltip, {}),
-          /* @__PURE__ */ jsx(Legend, {})
-        ] });
-      case "area":
-        return /* @__PURE__ */ jsxs(AreaChart, { data, children: [
-          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-          /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey }),
-          /* @__PURE__ */ jsx(YAxis, {}),
-          /* @__PURE__ */ jsx(Tooltip, {}),
-          /* @__PURE__ */ jsx(Legend, {}),
-          /* @__PURE__ */ jsx(Area, { type: "monotone", dataKey: yAxisKey, stroke: "#3b82f6", fill: "#3b82f6" })
-        ] });
-      default:
-        return /* @__PURE__ */ jsx("div", { children: "Unsupported chart type" });
+  const chartId = useId().replace(/:/g, "_");
+  const [isExporting, setIsExporting] = 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__ */ 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__ */ jsxs("p", { className: "text-gray-500 dark:text-gray-400 text-sm", children: [
+      title && /* @__PURE__ */ 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.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__ */ jsxs("div", { className: "border border-[var(--bichat-border)] rounded-lg p-4 bg-white", children: [
-    title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 300, children: renderChart() })
+  const chartWidth = 600;
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: "w-full min-w-0", children: /* @__PURE__ */ jsx(
+      ReactApexChart,
+      {
+        options,
+        series: apexSeries,
+        type: chartType,
+        width: chartWidth,
+        height
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ 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__ */ jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Download, { className: "w-4 h-4" }),
+          "Download PNG"
+        ] })
+      }
+    ) })
   ] });
 }
 function SourcesPanel({ citations }) {
@@ -981,13 +1750,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__ */ 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",
@@ -1013,22 +1782,22 @@ function SourcesPanel({ citations }) {
     expanded && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: citations.map((citation, index) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: citation.source }),
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 dark:text-gray-100", children: citation.title || citation.source }),
             citation.url && /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-1 text-gray-600 italic", children: [
+            citation.excerpt && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-gray-600 dark:text-gray-400 italic", children: [
               '"',
               citation.excerpt,
               '"'
@@ -1098,218 +1867,516 @@ function DownloadCard({ artifact }) {
   );
 }
 function InlineQuestionForm({ pendingQuestion }) {
-  const { handleSubmitQuestionAnswers, handleCancelPendingQuestion } = useChat();
+  const { handleSubmitQuestionAnswers, handleCancelPendingQuestion, loading } = useChat();
+  const [currentStep, setCurrentStep] = useState(0);
   const [answers, setAnswers] = useState({});
-  const [textInput, setTextInput] = useState("");
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (pendingQuestion.type === "MULTIPLE_CHOICE" && !answers.choice) {
-      return;
+  const [otherTexts, setOtherTexts] = 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 = 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 = 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__ */ jsx("div", { className: "border border-[var(--bichat-border)] rounded-lg p-4 bg-yellow-50", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("form", { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 mb-4", children: [
       /* @__PURE__ */ jsx(
-        "svg",
+        Question,
         {
-          className: "w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5",
-          fill: "currentColor",
-          viewBox: "0 0 20 20",
-          children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsx("h4", { className: "font-medium text-gray-900 mb-2", children: "Question from AI" }),
-        /* @__PURE__ */ jsx("p", { className: "text-gray-700", children: pendingQuestion.question })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-medium text-gray-900 dark:text-gray-100", children: "Question from AI" }),
+          totalSteps > 1 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+            currentStep + 1,
+            " of ",
+            totalSteps
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-gray-700 dark:text-gray-300", children: currentQuestion.text })
       ] })
     ] }),
-    pendingQuestion.type === "MULTIPLE_CHOICE" && pendingQuestion.options && /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4", children: pendingQuestion.options.map((option, index) => /* @__PURE__ */ jsxs(
-      "label",
+    totalSteps > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-1 mb-4", children: questions.map((_, index) => /* @__PURE__ */ jsx(
+      "div",
       {
-        className: "flex items-center gap-2 p-2 hover:bg-yellow-100 rounded cursor-pointer",
-        children: [
-          /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "button",
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 mb-4", children: [
+      options.map((option) => /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "text-gray-900 dark:text-gray-100", children: option.label })
+          ]
+        },
+        option.id
+      )),
+      /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "text-gray-900 dark:text-gray-100", children: "Other" })
+      ] }),
+      isOtherSelected && /* @__PURE__ */ jsx("div", { className: "ml-6", children: /* @__PURE__ */ 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__ */ jsx(
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: !isFirstStep && /* @__PURE__ */ 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__ */ jsx(CaretLeft, { size: 16, weight: "bold" }),
+            "Back"
+          ]
         }
-      )
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsx(CaretRight, { size: 16, weight: "bold" })
+            ]
+          }
+        )
+      ] })
     ] })
   ] }) });
 }
 var MarkdownRenderer2 = lazy(
   () => Promise.resolve().then(() => (init_MarkdownRenderer(), MarkdownRenderer_exports)).then((module) => ({ default: module.MarkdownRenderer }))
 );
-function AssistantTurnView({ message }) {
-  const { handleCopy, handleRegenerate, pendingQuestion } = useChat();
+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] = 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);
+  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 = 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 = useCallback(async () => {
+    if (onRegenerate && turnId) {
+      await onRegenerate(turnId);
     }
+  }, [onRegenerate, turnId]);
+  const timestamp = formatDistanceToNow(new Date(turn.createdAt), { addSuffix: true });
+  const avatarSlotProps = { text: "AI" };
+  const contentSlotProps = {
+    content: turn.content,
+    citations: turn.citations,
+    isStreaming
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 group", children: [
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 flex flex-col gap-3 max-w-[85%]", children: [
-      message.codeOutputs && message.codeOutputs.length > 0 && /* @__PURE__ */ jsx(CodeOutputsPanel, { outputs: message.codeOutputs }),
-      message.chartData && /* @__PURE__ */ jsx("div", { className: "mb-1 w-full", children: /* @__PURE__ */ jsx(ChartCard, { chartData: message.chartData }) }),
-      message.artifacts && message.artifacts.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-1 flex flex-wrap gap-2", children: message.artifacts.map((artifact, index) => /* @__PURE__ */ jsx(DownloadCard, { artifact }, `${artifact.filename}-${index}`)) }),
-      hasContent && /* @__PURE__ */ 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__ */ jsx(
-          Suspense,
-          {
-            fallback: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500", children: [
-              /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: classes.root, children: [
+    !hideAvatar && /* @__PURE__ */ jsx("div", { className: classes.avatar, children: renderSlot(slots?.avatar, avatarSlotProps, "AI") }),
+    /* @__PURE__ */ jsxs("div", { className: classes.wrapper, children: [
+      turn.codeOutputs && turn.codeOutputs.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.codeOutputs, children: renderSlot(
+        slots?.codeOutputs,
+        codeOutputsSlotProps,
+        /* @__PURE__ */ jsx(CodeOutputsPanel_default, { outputs: turn.codeOutputs })
+      ) }),
+      turn.chartData && /* @__PURE__ */ jsx("div", { className: classes.charts, children: renderSlot(slots?.charts, chartsSlotProps, /* @__PURE__ */ jsx(ChartCard, { chartData: turn.chartData })) }),
+      turn.artifacts && turn.artifacts.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.artifacts, children: renderSlot(
+        slots?.artifacts,
+        artifactsSlotProps,
+        turn.artifacts.map((artifact, index) => /* @__PURE__ */ jsx(DownloadCard, { artifact }, `${artifact.filename}-${index}`))
+      ) }),
+      hasContent && /* @__PURE__ */ jsxs("div", { className: classes.bubble, children: [
+        renderSlot(
+          slots?.content,
+          contentSlotProps,
+          /* @__PURE__ */ jsx(
+            Suspense,
+            {
+              fallback: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500", children: [
+                /* @__PURE__ */ 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__ */ jsx(
+                MarkdownRenderer2,
+                {
+                  content: turn.content,
+                  citations: turn.citations,
+                  sendMessage: onSendMessage,
+                  sendDisabled: sendDisabled || isStreaming
+                }
+              )
+            }
+          )
         ),
-        message.isStreaming && /* @__PURE__ */ jsx(StreamingCursor, {}),
-        message.citations && message.citations.length > 0 && /* @__PURE__ */ jsx(SourcesPanel, { citations: message.citations }),
-        hasExplanation && /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-gray-100 dark:border-gray-700 pt-4", children: [
-          /* @__PURE__ */ jsxs(
+        isStreaming && /* @__PURE__ */ jsx(StreamingCursor_default, {}),
+        turn.citations && turn.citations.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.sources, children: renderSlot(
+          slots?.sources,
+          sourcesSlotProps,
+          /* @__PURE__ */ jsx(SourcesPanel, { citations: turn.citations })
+        ) }),
+        hasExplanation && /* @__PURE__ */ jsx("div", { className: classes.explanation, children: renderSlot(
+          slots?.explanation,
+          explanationSlotProps,
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M9 5l7 7-7 7"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: "How I arrived at this" })
+                ]
+              }
+            ),
+            explanationExpanded && /* @__PURE__ */ jsx("div", { className: "pt-3 text-sm text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(MarkdownRenderer2, { content: turn.explanation }) }) })
+          ] })
+        ) })
+      ] }),
+      hasPendingQuestion && pendingQuestion && /* @__PURE__ */ jsx(InlineQuestionForm, { pendingQuestion }),
+      hasContent && !hideActions && /* @__PURE__ */ jsx("div", { className: classes.actions, children: renderSlot(
+        slots?.actions,
+        actionsSlotProps,
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          !hideTimestamp && /* @__PURE__ */ jsx("span", { className: classes.timestamp, children: timestamp }),
+          /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M9 5l7 7-7 7"
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "font-medium", children: "How I arrived at this" })
-              ]
+              onClick: handleCopyClick,
+              className: classes.actionButton,
+              "aria-label": "Copy message",
+              title: "Copy",
+              children: /* @__PURE__ */ jsx(Copy, { size: 14, weight: "regular" })
             }
           ),
-          explanationExpanded && /* @__PURE__ */ jsx("div", { className: "pt-3 text-sm text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(MarkdownRenderer2, { content: message.explanation }) }) })
+          onRegenerate && turnId && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleRegenerateClick,
+              className: classes.actionButton,
+              "aria-label": "Regenerate response",
+              title: "Regenerate",
+              children: /* @__PURE__ */ jsx(ArrowsClockwise, { size: 14, weight: "regular" })
+            }
+          )
         ] })
-      ] }),
-      hasPendingQuestion && /* @__PURE__ */ jsx(InlineQuestionForm, { pendingQuestion }),
-      hasContent && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 mr-1", children: formatDistanceToNow(new Date(message.createdAt), { addSuffix: true }) }),
-        /* @__PURE__ */ 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__ */ jsx(Copy, { size: 14, weight: "regular" })
-          }
-        ),
-        handleRegenerate && /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(Fragment, { children: renderUserMessage(message) });
-    }
-    return /* @__PURE__ */ jsx(UserTurnView, { message });
-  }
-  if (message.role === "assistant" /* Assistant */) {
-    if (renderAssistantMessage) {
-      return /* @__PURE__ */ jsx(Fragment, { children: renderAssistantMessage(message) });
+  const { handleCopy, handleRegenerate, pendingQuestion, sendMessage, loading } = useChat();
+  const assistantTurn = turn.assistantTurn;
+  if (!assistantTurn) return null;
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: classes.root, "data-turn-id": turn.id, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.userTurn, children: renderUserTurn ? renderUserTurn(turn) : /* @__PURE__ */ jsx(
+      UserTurnView,
+      {
+        turn,
+        slots: userMessageSlots,
+        classNames: userMessageClassNames,
+        ...userTurnProps
+      }
+    ) }),
+    turn.assistantTurn && /* @__PURE__ */ jsx("div", { className: classes.assistantTurn, children: renderAssistantTurn ? renderAssistantTurn(turn) : /* @__PURE__ */ jsx(
+      AssistantTurnView,
+      {
+        turn,
+        isStreaming,
+        slots: assistantMessageSlots,
+        classNames: assistantMessageClassNames,
+        ...assistantTurnProps
+      }
+    ) })
+  ] });
 }
 function ScrollToBottomButton({
   show,
@@ -1324,7 +2391,7 @@ 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__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx(ArrowDown, { size: 20, weight: "bold", className: "text-gray-700 dark:text-gray-300" }),
@@ -1333,14 +2400,15 @@ function ScrollToBottomButton({
     }
   ) });
 }
-function MessageList({ renderUserMessage, renderAssistantMessage }) {
-  const { messages, streamingContent, isStreaming } = useChat();
+var ScrollToBottomButton_default = ScrollToBottomButton;
+function MessageList({ renderUserTurn, renderAssistantTurn }) {
+  const { turns, streamingContent, isStreaming } = useChat();
   const messagesEndRef = useRef(null);
   const containerRef = useRef(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages.length, streamingContent]);
+  }, [turns.length, streamingContent]);
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
@@ -1357,14 +2425,14 @@ function MessageList({ renderUserMessage, renderAssistantMessage }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0", children: [
     /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full overflow-y-auto px-4 py-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto space-y-6", children: [
-      messages.map((message) => /* @__PURE__ */ jsx(
+      turns.map((turn) => /* @__PURE__ */ jsx(
         TurnBubble,
         {
-          message,
-          renderUserMessage,
-          renderAssistantMessage
+          turn,
+          renderUserTurn,
+          renderAssistantTurn
         },
-        message.id
+        turn.id
       )),
       isStreaming && streamingContent && /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
         /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white", children: "AI" }),
@@ -1375,7 +2443,7 @@ function MessageList({ renderUserMessage, renderAssistantMessage }) {
       ] }),
       /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
     ] }) }),
-    /* @__PURE__ */ jsx(ScrollToBottomButton, { show: showScrollButton, onClick: scrollToBottom })
+    /* @__PURE__ */ jsx(ScrollToBottomButton_default, { show: showScrollButton, onClick: scrollToBottom })
   ] });
 }
 var MAX_FILES_DEFAULT = 10;
@@ -1524,7 +2592,7 @@ var MessageInput = forwardRef(
             )
           ] }),
           messageQueue.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3 text-xs text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(AttachmentGrid, { attachments, onRemove: handleRemoveAttachment }) }),
+          attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(AttachmentGrid_default, { attachments, onRemove: handleRemoveAttachment }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1540,7 +2608,7 @@ var MessageInput = forwardRef(
                 /* @__PURE__ */ 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__ */ jsx(
                         "button",
@@ -1657,9 +2725,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__ */ jsxs(
@@ -1688,26 +2756,26 @@ function WelcomeContent({
         ),
         /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, children: [
           /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide mb-4", children: "Try asking" }),
-          /* @__PURE__ */ jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: EXAMPLE_PROMPTS.map((prompt2, index) => /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: EXAMPLE_PROMPTS.map((prompt, index) => /* @__PURE__ */ jsxs(
             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__ */ 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__ */ jsx(
-                  prompt2.icon,
+                /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500 mb-1.5", children: prompt2.category }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 dark:text-gray-200 leading-relaxed", children: prompt2.text })
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-400 dark:text-gray-500 mb-1.5", children: prompt.category }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 dark:text-gray-200 leading-relaxed", children: prompt.text })
               ]
             },
             index
@@ -1717,10 +2785,11 @@ function WelcomeContent({
     }
   );
 }
+var WelcomeContent_default = WelcomeContent;
 function ChatSessionCore({
   isReadOnly,
-  renderUserMessage,
-  renderAssistantMessage,
+  renderUserTurn,
+  renderAssistantTurn,
   className = "",
   headerSlot,
   welcomeSlot,
@@ -1731,7 +2800,7 @@ function ChatSessionCore({
   const { t } = useTranslation();
   const {
     session,
-    messages,
+    turns,
     fetching,
     error,
     message,
@@ -1751,9 +2820,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__ */ jsxs(
     "main",
@@ -1761,11 +2830,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__ */ jsx(ChatHeader, { session, onBack, logoSlot, actionsSlot }),
-        showWelcome ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center overflow-auto", children: welcomeSlot || /* @__PURE__ */ jsx(WelcomeContent, { onPromptSelect: handlePromptSelect, disabled: loading }) }) : /* @__PURE__ */ jsx(
+        showWelcome ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center overflow-auto", children: welcomeSlot || /* @__PURE__ */ jsx(WelcomeContent_default, { onPromptSelect: handlePromptSelect, disabled: loading }) }) : /* @__PURE__ */ jsx(
           MessageList,
           {
-            renderUserMessage,
-            renderAssistantMessage
+            renderUserTurn,
+            renderAssistantTurn
           }
         ),
         !isReadOnly && /* @__PURE__ */ jsx(
@@ -2059,7 +3128,8 @@ function EmptyState({
     }
   );
 }
-var EmptyState_default = memo(EmptyState);
+var MemoizedEmptyState = memo(EmptyState);
+MemoizedEmptyState.displayName = "EmptyState";
 var sizeClasses2 = {
   sm: "text-sm",
   md: "text-base",
@@ -2181,7 +3251,7 @@ var EditableText = forwardRef(
   }
 );
 EditableText.displayName = "EditableText";
-var EditableText_default = memo(EditableText);
+var MemoizedEditableText = memo(EditableText);
 var sizeClasses3 = {
   sm: {
     container: "py-1.5 pl-8 pr-8 text-xs",
@@ -2272,7 +3342,8 @@ function SearchInput({
     )
   ] });
 }
-var SearchInput_default = memo(SearchInput);
+var MemoizedSearchInput = memo(SearchInput);
+MemoizedSearchInput.displayName = "SearchInput";
 var variantClasses = {
   text: "rounded",
   circular: "rounded-full",
@@ -2366,60 +3437,698 @@ function ListItemSkeleton({ className = "" }) {
     /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: 16, className: "flex-1" })
   ] });
 }
-var Skeleton_default = memo(Skeleton);
-var ConfigContext = 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 = 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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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";
+  useEffect(() => {
+    const timer = setTimeout(() => onDismiss(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, onDismiss]);
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx("p", { className: "flex-1 text-sm font-medium", children: message }),
+        /* @__PURE__ */ 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__ */ jsx(X, { size: 16, className: "w-4 h-4", weight: "bold" })
+          }
+        )
+      ]
     }
+  );
+}
+function ToastContainer({ toasts, onDismiss, dismissLabel }) {
+  return /* @__PURE__ */ jsx("div", { className: "fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none", children: /* @__PURE__ */ jsx(AnimatePresence, { children: toasts.map((toast) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(Toast, { ...toast, onDismiss, dismissLabel }) }, toast.id)) }) });
+}
+function ConfirmModalBase({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  isDanger = false
+}) {
+  const modalRef = useRef(null);
+  const confirmButtonRef = useRef(null);
+  useFocusTrap(modalRef, isOpen);
+  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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+          "div",
+          {
+            ref: modalRef,
+            className: "bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-sm w-full mx-4",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id: "confirm-modal-title",
+                  className: "text-lg font-semibold text-gray-900 dark:text-white",
+                  children: title
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx("p", { id: "confirm-modal-description", className: "text-gray-600 dark:text-gray-300", children: message }) }),
+              /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3", children: [
+                /* @__PURE__ */ 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__ */ 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 = 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 /* @__PURE__ */ jsx(ConfigContext.Provider, { value: resolvedConfig, children });
+  return Math.abs(hash);
 }
-function useConfig() {
-  return useContext(ConfigContext);
+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__ */ 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
+    }
+  );
 }
-function useRequiredConfig() {
-  const config = useContext(ConfigContext);
-  if (!config) {
-    throw new Error(
-      "BiChat configuration not found. Wrap your app with <ConfigProvider config={...}> or use useGlobalConfig={true}."
+var MemoizedUserAvatar = memo(UserAvatar);
+MemoizedUserAvatar.displayName = "UserAvatar";
+function PermissionGuard({
+  permissions,
+  mode = "all",
+  hasPermission: hasPermission3,
+  fallback = null,
+  children
+}) {
+  if (permissions.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const permitted = mode === "all" ? permissions.every((p) => hasPermission3(p)) : permissions.some((p) => hasPermission3(p));
+  return permitted ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
+}
+function DefaultErrorContent({
+  error,
+  onReset,
+  resetLabel = "Try Again",
+  errorTitle = "Something went wrong"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-8 text-center min-h-[200px]", children: [
+    /* @__PURE__ */ jsx(WarningCircle, { size: 48, className: "text-red-500 mb-4", weight: "fill" }),
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: errorTitle }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsx(ArrowClockwise, { size: 16, weight: "bold" }),
+          resetLabel
+        ]
+      }
+    )
+  ] });
+}
+var ErrorBoundary = class extends 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__ */ 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__ */ jsxs("div", { className: `flex ${config.gap}`, role: "status", "aria-live": "polite", children: [
+    [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${config.dot} bg-gray-400 dark:bg-gray-500 rounded-full animate-bounce`,
+        style: { animationDelay: `${index * 0.15}s` }
+      },
+      index
+    )),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+  ] });
+}
+function PulseIndicator({ size = "md" }) {
+  const config = sizeConfig[size];
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx("div", { className: `${config.dot} bg-primary-500 rounded-full animate-pulse` }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+  ] });
+}
+function TextIndicator({
+  messages = DEFAULT_MESSAGES,
+  rotationInterval = 3e3,
+  size = "md"
+}) {
+  const config = sizeConfig[size];
+  const [message, setMessage] = useState(() => messages[Math.floor(Math.random() * messages.length)]);
+  useEffect(() => {
+    if (prefersReducedMotion2()) return;
+    const interval = setInterval(() => {
+      setMessage((prev) => getRandomMessage(messages, prev));
+    }, rotationInterval);
+    return () => clearInterval(interval);
+  }, [messages, rotationInterval]);
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "overflow-hidden h-6 relative", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+    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__ */ jsxs("div", { className: `flex items-center ${className}`, children: [
+    variant === "dots" && /* @__PURE__ */ jsx(DotsIndicator, { size }),
+    variant === "pulse" && /* @__PURE__ */ jsx(PulseIndicator, { size }),
+    variant === "text" && /* @__PURE__ */ jsx(TextIndicator, { messages, rotationInterval, size })
+  ] });
+}
+var MemoizedTypingIndicator = 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 = forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  if (!isValidElement(children)) {
+    return null;
+  }
+  const childrenRef = children.ref;
+  return 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 Children.toArray(children).filter(isValidElement);
+}
+var TurnContext = createContext(void 0);
+function useTurnContext() {
+  const context = useContext(TurnContext);
+  if (!context) {
+    throw new Error("Turn components must be used within Turn.Root");
+  }
+  return context;
+}
+var TurnRoot = forwardRef((props, ref) => {
+  const { asChild, turnId, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(TurnContext.Provider, { value: { turnId }, children: /* @__PURE__ */ jsx(Comp, { ref, "data-turn-id": turnId, ...domProps, children }) });
+});
+TurnRoot.displayName = "Turn.Root";
+var TurnUser = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { ref, "data-turn-role": "user", ...domProps, children });
+});
+TurnUser.displayName = "Turn.User";
+var TurnAssistant = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ 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 = 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__ */ jsx(Comp, { ref, dateTime: isoString, ...domProps, children: children ?? formattedTime });
+});
+TurnTimestamp.displayName = "Turn.Timestamp";
+var TurnActions = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ 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 = createContext(void 0);
+function useAvatarContext() {
+  const context = useContext(AvatarContext);
+  if (!context) {
+    throw new Error("Avatar components must be used within Avatar.Root");
+  }
+  return context;
+}
+var AvatarRoot = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "span";
+  const [imageLoadingStatus, setImageLoadingStatus] = useState("idle");
+  return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { imageLoadingStatus, setImageLoadingStatus }, children: /* @__PURE__ */ jsx(Comp, { ref, ...domProps, children }) });
+});
+AvatarRoot.displayName = "Avatar.Root";
+var AvatarImage = 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__ */ jsx(
+      Comp,
+      {
+        ref,
+        src,
+        alt: alt || "",
+        onLoad: handleLoad,
+        onError: handleError,
+        ...domProps
+      }
     );
   }
-  return config;
+  return null;
+});
+AvatarImage.displayName = "Avatar.Image";
+var AvatarFallback = forwardRef((props, ref) => {
+  const { asChild, delayMs = 0, children, ...domProps } = props;
+  const { imageLoadingStatus } = useAvatarContext();
+  const Comp = asChild ? Slot : "span";
+  const [canRender, setCanRender] = useState(delayMs === 0);
+  if (delayMs > 0 && !canRender) {
+    setTimeout(() => setCanRender(true), delayMs);
+  }
+  if (imageLoadingStatus === "loaded") {
+    return null;
+  }
+  if (!canRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Comp, { ref, ...domProps, children });
+});
+AvatarFallback.displayName = "Avatar.Fallback";
+var Avatar = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+};
+var BubbleContext = createContext(void 0);
+function useBubbleContext() {
+  const context = 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 = forwardRef((props, ref) => {
+  const { asChild, variant, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(BubbleContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(Comp, { ref, "data-bubble-variant": variant, ...domProps, children }) });
+});
+BubbleRoot.displayName = "Bubble.Root";
+var BubbleContent = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { ref, "data-bubble-part": "content", ...domProps, children });
+});
+BubbleContent.displayName = "Bubble.Content";
+var BubbleHeader = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { ref, "data-bubble-part": "header", ...domProps, children });
+});
+BubbleHeader.displayName = "Bubble.Header";
+var BubbleFooter = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { ref, "data-bubble-part": "footer", ...domProps, children });
+});
+BubbleFooter.displayName = "Bubble.Footer";
+var BubbleMetadata = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ 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 = createContext(void 0);
+function useActionButtonContext() {
+  const context = 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 = forwardRef((props, ref) => {
+  const { asChild, disabled, children, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ...domProps } = props;
+  const Comp = asChild ? Slot : "button";
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPressed, setIsPressed] = 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__ */ jsx(
+    ActionButtonContext.Provider,
+    {
+      value: {
+        isHovered,
+        isFocused,
+        isPressed,
+        isDisabled: !!disabled
+      },
+      children: /* @__PURE__ */ 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 = forwardRef((props, ref) => {
+  const { asChild, children, ...domProps } = props;
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(Comp, { ref, "aria-hidden": "true", ...domProps, children });
+});
+ActionButtonIcon.displayName = "ActionButton.Icon";
+var ActionButtonLabel = 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__ */ jsx(Comp, { ref, className: [srOnlyClass, className].filter(Boolean).join(" "), ...domProps, children });
+});
+ActionButtonLabel.displayName = "ActionButton.Label";
+var ActionButtonTooltip = 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__ */ 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] = useState("");
   const [isStreaming, setIsStreaming] = useState(false);
@@ -2493,6 +4202,572 @@ function useStreaming(options = {}) {
     reset
   };
 }
+function generateId() {
+  return Math.random().toString(36).substring(7);
+}
+function useToast() {
+  const [toasts, setToasts] = useState([]);
+  const showToast = useCallback(
+    (type, message, duration) => {
+      const id = generateId();
+      setToasts((prev) => [...prev, { id, type, message, duration }]);
+    },
+    []
+  );
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const dismissAll = 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] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [images, setImages] = useState(initialImages);
+  const currentImage = useMemo(() => images[currentIndex], [images, currentIndex]);
+  const hasPrev = useMemo(() => {
+    if (wrap) return images.length > 1;
+    return currentIndex > 0;
+  }, [currentIndex, images.length, wrap]);
+  const hasNext = useMemo(() => {
+    if (wrap) return images.length > 1;
+    return currentIndex < images.length - 1;
+  }, [currentIndex, images.length, wrap]);
+  const open = 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 = useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const prev = 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 = 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 = useCallback(
+    (index) => {
+      const safeIndex = Math.max(0, Math.min(index, images.length - 1));
+      setCurrentIndex(safeIndex);
+    },
+    [images.length]
+  );
+  const setImagesHandler = 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 = useRef(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+  const checkIsAtBottom = useCallback(
+    (container) => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      return scrollHeight - scrollTop - clientHeight <= threshold;
+    },
+    [threshold]
+  );
+  const handleScroll = useCallback(
+    (e) => {
+      const container = e.currentTarget;
+      const atBottom = checkIsAtBottom(container);
+      setIsAtBottom(atBottom);
+      setShouldAutoScroll(atBottom);
+      onScroll?.(atBottom);
+    },
+    [checkIsAtBottom, onScroll]
+  );
+  const scrollToBottom = 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 = useCallback((enabled) => {
+    setShouldAutoScroll(enabled);
+    if (enabled) {
+      const container = containerRef.current;
+      if (container) {
+        container.scrollTo({
+          top: container.scrollHeight,
+          behavior: "auto"
+        });
+        setIsAtBottom(true);
+      }
+    }
+  }, []);
+  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] = useState(false);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const copiedTimeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (copiedTimeoutRef.current) {
+        clearTimeout(copiedTimeoutRef.current);
+        copiedTimeoutRef.current = null;
+      }
+    };
+  }, []);
+  const copy = 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 = useCallback(async () => {
+    if (!onRegenerate) return;
+    if (isRegenerating) return;
+    setIsRegenerating(true);
+    try {
+      await onRegenerate();
+    } finally {
+      setIsRegenerating(false);
+    }
+  }, [onRegenerate, isRegenerating]);
+  const edit = useCallback(
+    async (content) => {
+      if (!onEdit) return;
+      if (isEditing) return;
+      setIsEditing(true);
+      try {
+        await onEdit(content);
+      } finally {
+        setIsEditing(false);
+      }
+    },
+    [onEdit, isEditing]
+  );
+  const reset = 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] = useState([]);
+  const [errors, setErrors] = useState([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const removedRef = useRef(null);
+  const isMaxReached = useMemo(() => files.length >= maxFiles, [files.length, maxFiles]);
+  const remainingSlots = useMemo(() => Math.max(0, maxFiles - files.length), [files.length, maxFiles]);
+  const validateFile = 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 = 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 = 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 = useCallback(() => {
+    setFiles([]);
+    setErrors([]);
+  }, []);
+  const clearErrors = useCallback(() => {
+    setErrors([]);
+  }, []);
+  const setFilesHandler = 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] = useState(/* @__PURE__ */ new Map());
+  const timeoutsRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    return () => {
+      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+      timeoutsRef.current.clear();
+    };
+  }, []);
+  const isCopied = useCallback(
+    (blockId) => {
+      return copiedStates.get(blockId) ?? false;
+    },
+    [copiedStates]
+  );
+  const copy = 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 = 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 = useCallback(() => {
+    setCopiedStates(/* @__PURE__ */ new Map());
+    timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+    timeoutsRef.current.clear();
+  }, []);
+  return {
+    copiedStates,
+    isCopied,
+    copy,
+    reset,
+    resetAll
+  };
+}
+var ConfigContext = 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__ */ jsx(ConfigContext.Provider, { value: resolvedConfig, children });
+}
+function useConfig() {
+  return useContext(ConfigContext);
+}
+function useRequiredConfig() {
+  const config = 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 = {
@@ -2725,7 +5000,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 = `
@@ -2739,46 +5014,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
           }
         }
@@ -2954,6 +5262,18 @@ function createHttpDataSource(config) {
   return new HttpDataSource(config);
 }
 
-export { AssistantTurnView, AttachmentGrid, ChartCard, ChatHeader, ChatSession, ChatSessionProvider, CodeOutputsPanel, ConfigProvider, DownloadCard, EditableText_default as EditableText, EmptyState_default as EmptyState, HttpDataSource, ImageModal, InlineQuestionForm, IotaContextProvider, ListItemSkeleton, MarkdownRenderer, MessageInput, MessageList, MessageRole, RateLimiter, ScrollToBottomButton, SearchInput_default as SearchInput, Skeleton_default as Skeleton, SkeletonAvatar, SkeletonCard, SkeletonGroup, SkeletonText, SourcesPanel, StreamingCursor, ThemeProvider, TurnBubble, UserTurnView, WelcomeContent, addCSRFHeader, backdropVariants, buttonVariants, convertToBase64, createDataUrl, createHeadersWithCSRF, createHttpDataSource, darkTheme, dropdownVariants, fadeInUpVariants, fadeInVariants, floatingButtonVariants, formatFileSize, getCSRFToken, hasPermission2 as hasConfigPermission, hasPermission, lightTheme, listItemVariants, messageContainerVariants, messageVariants, scaleFadeVariants, staggerContainerVariants, toastVariants, typingDotVariants, useChat, useConfig, useIotaContext, useRequiredConfig, useStreaming, useTheme, useTranslation, validateFileCount, validateImageFile };
+// 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 || {});
+
+export { ActionButton, AssistantMessage, AssistantTurnView, MemoizedAttachmentGrid as AttachmentGrid, Avatar, Bubble, ChartCard, ChatHeader, ChatSession, ChatSessionProvider, MemoizedCodeBlock as CodeBlock, CodeOutputsPanel, ConfigProvider, ConfirmModal, DefaultErrorContent, DownloadCard, MemoizedEditableText as EditableText, MemoizedEmptyState as EmptyState, ErrorBoundary, HttpDataSource, ImageModal, InlineQuestionForm, IotaContextProvider, ListItemSkeleton, MemoizedLoadingSpinner as LoadingSpinner, MemoizedMarkdownRenderer as MarkdownRenderer, MessageInput, MessageList, MessageRole, PermissionGuard, RateLimiter, ScrollToBottomButton, MemoizedSearchInput as SearchInput, MemoizedSkeleton as Skeleton, SkeletonAvatar, SkeletonCard, SkeletonGroup, SkeletonText, Slot, SourcesPanel, StreamingCursor, TableExportButton, TableWithExport, ThemeProvider, Toast, ToastContainer, Turn, TurnBubble, MemoizedTypingIndicator as TypingIndicator, MemoizedUserAvatar as UserAvatar, UserMessage, UserTurnView, WelcomeContent, addCSRFHeader, backdropVariants, buttonVariants, convertToBase64, createDataUrl, createHeadersWithCSRF, createHttpDataSource, darkTheme, dropdownVariants, fadeInUpVariants, fadeInVariants, floatingButtonVariants, formatFileSize, getCSRFToken, getValidChildren, hasPermission2 as hasConfigPermission, hasPermission, lightTheme, listItemVariants, messageContainerVariants, messageVariants, processCitations, scaleFadeVariants, staggerContainerVariants, toastVariants, typingDotVariants, useActionButtonContext, useAttachments, useAutoScroll, useAvatarContext, useBubbleContext, useChat, useConfig, useFocusTrap, useImageGallery, useIotaContext, useMarkdownCopy, useMessageActions, useModalLock, useRequiredConfig, useStreaming, useTheme, useToast, useTranslation, useTurnContext, validateFileCount, validateImageFile };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map