@axiom-lattice/react-sdk 2.1.50 → 2.1.51

package/dist/index.mjs

@@ -82,8 +82,8 @@ var AuthProvider = ({
       onLoginSuccess?.(userData, tenantList || []);
       return { requiresTenantSelection, hasTenants };
     } catch (err) {
-      const message18 = err instanceof Error ? err.message : "Login failed";
-      setError(message18);
+      const message19 = err instanceof Error ? err.message : "Login failed";
+      setError(message19);
       throw err;
     } finally {
       setIsLoading(false);
@@ -107,8 +107,8 @@ var AuthProvider = ({
       }
       return { message: data.message || "Registration successful!", token: data.data?.token };
     } catch (err) {
-      const message18 = err instanceof Error ? err.message : "Registration failed";
-      setError(message18);
+      const message19 = err instanceof Error ? err.message : "Registration failed";
+      setError(message19);
       throw err;
     } finally {
       setIsLoading(false);
@@ -155,8 +155,8 @@ var AuthProvider = ({
       }
       onTenantSelected?.(tenantData);
     } catch (err) {
-      const message18 = err instanceof Error ? err.message : "Failed to select tenant";
-      setError(message18);
+      const message19 = err instanceof Error ? err.message : "Failed to select tenant";
+      setError(message19);
       throw err;
     } finally {
       setIsLoading(false);
@@ -195,8 +195,8 @@ var AuthProvider = ({
       setTenants(tenantList);
       sessionStorage.setItem("lattice_tenants", JSON.stringify(tenantList));
     } catch (err) {
-      const message18 = err instanceof Error ? err.message : "Failed to fetch tenants";
-      setError(message18);
+      const message19 = err instanceof Error ? err.message : "Failed to fetch tenants";
+      setError(message19);
     } finally {
       setIsLoading(false);
     }
@@ -226,8 +226,8 @@ var AuthProvider = ({
       setUser(data);
       sessionStorage.setItem("lattice_user", JSON.stringify(data));
     } catch (err) {
-      const message18 = err instanceof Error ? err.message : "Failed to refresh user";
-      setError(message18);
+      const message19 = err instanceof Error ? err.message : "Failed to refresh user";
+      setError(message19);
     } finally {
       setIsLoading(false);
     }
@@ -430,7 +430,7 @@ function useChat(threadId, assistantId, options = {}) {
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message18, files, ...rest } = input || {};
+      const { message: message19, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -439,7 +439,7 @@ function useChat(threadId, assistantId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message18 || command?.resume?.message || "",
+        content: message19 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -1154,6 +1154,22 @@ var DEFAULT_MIDDLEWARE_TYPES = [
     tools: [
       { id: "ask_user_to_clarify", name: "Ask User To Clarify", description: "Ask user clarifying questions with options" }
     ]
+  },
+  {
+    type: "widget",
+    name: "Widget",
+    description: "Enables the agent to render interactive HTML widgets and visualizations",
+    schema: {
+      type: "object",
+      title: "Widget Configuration",
+      description: "Configure widget rendering capabilities (zero configuration required)",
+      properties: {}
+    },
+    defaultConfig: {},
+    tools: [
+      { id: "load_guidelines", name: "Load Guidelines", description: "Load widget development guidelines for specific modules" },
+      { id: "show_widget", name: "Show Widget", description: "Render interactive HTML widgets or SVG diagrams" }
+    ]
   }
 ];
 var DEFAULT_CONFIG = {
@@ -1316,8 +1332,8 @@ function convertThreadToConversationThread(thread, label) {
 function getThreadMetadata(label) {
   return label ? { label } : {};
 }
-function generateLabelFromMessage(message18) {
-  const cleanMessage = message18.replace(/```attachments[\s\S]*?```/g, "").trim();
+function generateLabelFromMessage(message19) {
+  const cleanMessage = message19.replace(/```attachments[\s\S]*?```/g, "").trim();
   if (!cleanMessage) {
     return "";
   }
@@ -1731,7 +1747,7 @@ function AgentThreadProvider({
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message18, files, ...rest } = input || {};
+      const { message: message19, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -1740,7 +1756,7 @@ function AgentThreadProvider({
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message18 || command?.resume?.message || "",
+        content: message19 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -1756,8 +1772,8 @@ function AgentThreadProvider({
         messages: chunkMessageMerger.current.getMessages()
       }));
       const isFirstMessage = messageCountRef.current === 0;
-      if (isFirstMessage && message18 && conversationContext) {
-        const label = generateLabelFromMessage(message18);
+      if (isFirstMessage && message19 && conversationContext) {
+        const label = generateLabelFromMessage(message19);
         if (label) {
           conversationContext.updateThread({
             id: threadId,
@@ -3201,8 +3217,8 @@ function useTenants(options) {
       const { data } = await response.json();
       setTenants(data || []);
     } catch (err) {
-      const message18 = err instanceof Error ? err.message : "Failed to fetch tenants";
-      setError(message18);
+      const message19 = err instanceof Error ? err.message : "Failed to fetch tenants";
+      setError(message19);
     } finally {
       setIsLoading(false);
     }
@@ -3244,8 +3260,8 @@ function useUsers(options) {
       const { data } = await response.json();
       setUsers(data || []);
     } catch (err) {
-      const message18 = err instanceof Error ? err.message : "Failed to fetch users";
-      setError(message18);
+      const message19 = err instanceof Error ? err.message : "Failed to fetch users";
+      setError(message19);
     } finally {
       setIsLoading(false);
     }
@@ -3502,7 +3518,7 @@ var useStyle = createStyles2(({ token, css }) => {
     `,
     chat: css`
       width: 100%;
-      max-width: 1000px;
+      max-width: 1400px;
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
@@ -4210,7 +4226,7 @@ import { DownloadOutlined, ExpandAltOutlined } from "@ant-design/icons";
 import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var { Text: Text3 } = Typography3;
 var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = true }) => {
-  const { dataSource, message: message18 } = data ?? {};
+  const { dataSource, message: message19 } = data ?? {};
   const [expandedRowKeys, setExpandedRowKeys] = useState15([]);
   const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
@@ -4309,7 +4325,7 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
       type: "text/csv;charset=utf-8;"
     });
     const link = document.createElement("a");
-    const filename = `${message18 || "data"}_${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    const filename = `${message19 || "data"}_${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
     link.href = URL.createObjectURL(blob);
     link.download = filename;
     document.body.appendChild(link);
@@ -4330,7 +4346,7 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
           tableLayout: "fixed",
           style: { width: "100% !important" },
           title: () => /* @__PURE__ */ jsxs5(Flex, { justify: "space-between", align: "center", children: [
-            /* @__PURE__ */ jsx13(Space2, { children: /* @__PURE__ */ jsx13(Text3, { strong: true, style: { fontSize: 16 }, children: message18 || "" }) }),
+            /* @__PURE__ */ jsx13(Space2, { children: /* @__PURE__ */ jsx13(Text3, { strong: true, style: { fontSize: 16 }, children: message19 || "" }) }),
             /* @__PURE__ */ jsxs5(Space2, { children: [
               /* @__PURE__ */ jsx13(
                 Button4,
@@ -4352,8 +4368,8 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
                   onClick: () => {
                     openSideApp({
                       component_key: "generic_data_table",
-                      message: message18 || "",
-                      data: { dataSource, message: message18 }
+                      message: message19 || "",
+                      data: { dataSource, message: message19 }
                     });
                   },
                   children: /* @__PURE__ */ jsx13(ExpandAltOutlined, {})
@@ -5789,11 +5805,11 @@ var ConfirmFeedback = ({
   data,
   interactive = true
 }) => {
-  const { message: message18, type, config, feedback, options } = data ?? {};
+  const { message: message19, type, config, feedback, options } = data ?? {};
   const { sendMessage } = useAgentChat();
   const [clicked, setClicked] = useState20(false);
   return /* @__PURE__ */ jsxs10(Space3, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx23(MDResponse, { content: message18 }),
+    /* @__PURE__ */ jsx23(MDResponse, { content: message19 }),
     options ? /* @__PURE__ */ jsx23(Space3, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx23(
       Button8,
       {
@@ -7882,7 +7898,7 @@ import {
 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var LazyBubble = ({
-  message: message18,
+  message: message19,
   renderContent,
   autoLoadRightPanel
 }) => {
@@ -7913,10 +7929,10 @@ var LazyBubble = ({
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
-    const estimatedHeight = message18.content ? Math.min(100, message18.content.length / 5) : 100;
+    const estimatedHeight = message19.content ? Math.min(100, message19.content.length / 5) : 100;
     return /* @__PURE__ */ jsx41("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ jsx41(ErrorBoundary, { children: /* @__PURE__ */ jsx41("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message18) : getPlaceholder() }) });
+  return /* @__PURE__ */ jsx41(ErrorBoundary, { children: /* @__PURE__ */ jsx41("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message19) : getPlaceholder() }) });
 };
 var MemoizedBubbleList = memo(
   ({
@@ -7947,8 +7963,8 @@ var MessageList = ({
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = useCallback16((message18) => {
-    const { content } = message18;
+  const renderContent = useCallback16((message19) => {
+    const { content } = message19;
     try {
       const json = JSON.parse(content);
       if (json.action && json.message) {
@@ -7956,7 +7972,7 @@ var MessageList = ({
       }
     } catch (error) {
     }
-    const tool_calls_md = message18.tool_calls?.map((tool_call) => {
+    const tool_calls_md = message19.tool_calls?.map((tool_call) => {
       return `\`\`\`tool_call
 ${JSON.stringify(tool_call)}
 \`\`\``;
@@ -7965,17 +7981,17 @@ ${JSON.stringify(tool_call)}
     return /* @__PURE__ */ jsx41(Space12, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx41(MDResponse, { content: content_md }) });
   }, []);
   const items = useMemo9(
-    () => messages.map((message18, index) => ({
-      key: message18.id,
-      role: message18.role,
+    () => messages.map((message19, index) => ({
+      key: message19.id,
+      role: message19.role,
       typing: false,
       content: /* @__PURE__ */ jsx41(
         LazyBubble,
         {
-          message: message18,
+          message: message19,
           renderContent,
           autoLoadRightPanel: () => {
-            const { content, role: role2 } = message18;
+            const { content, role: role2 } = message19;
             const isNewAddedMessage = messageLengthRef.current > 1 && messageLengthRef.current + 1 === messages.length;
             if (index === messages.length - 1 && isNewAddedMessage && role2 === "ai") {
               try {
@@ -22517,12 +22533,12 @@ var formatDate3 = (timestamp) => {
   });
 };
 var MailboxDetailModal = ({
-  message: message18,
+  message: message19,
   visible,
   onClose
 }) => {
   const { styles } = useStyles14();
-  if (!message18) return null;
+  if (!message19) return null;
   return /* @__PURE__ */ jsx90(
     Modal15,
     {
@@ -22545,12 +22561,12 @@ var MailboxDetailModal = ({
       children: /* @__PURE__ */ jsxs63("div", { className: styles.modalContent, children: [
         /* @__PURE__ */ jsxs63("div", { className: styles.header, children: [
           /* @__PURE__ */ jsx90("div", { className: styles.messageIcon, children: /* @__PURE__ */ jsx90(Mail2, { size: 20 }) }),
-          /* @__PURE__ */ jsx90(Text35, { className: styles.messageId, children: message18.id }),
-          !message18.read && /* @__PURE__ */ jsx90(Tag20, { color: "red", children: "Unread" })
+          /* @__PURE__ */ jsx90(Text35, { className: styles.messageId, children: message19.id }),
+          !message19.read && /* @__PURE__ */ jsx90(Tag20, { color: "red", children: "Unread" })
         ] }),
         /* @__PURE__ */ jsxs63(Title11, { level: 4, className: styles.title, children: [
           "Message from ",
-          message18.from
+          message19.from
         ] }),
         /* @__PURE__ */ jsxs63("div", { className: styles.metaSection, children: [
           /* @__PURE__ */ jsxs63("div", { className: styles.metaItem, children: [
@@ -22560,11 +22576,11 @@ var MailboxDetailModal = ({
                 "div",
                 {
                   className: styles.avatar,
-                  style: { background: getAvatarColor7(message18.from) },
-                  children: getInitials7(message18.from)
+                  style: { background: getAvatarColor7(message19.from) },
+                  children: getInitials7(message19.from)
                 }
               ),
-              /* @__PURE__ */ jsx90("span", { children: message18.from })
+              /* @__PURE__ */ jsx90("span", { children: message19.from })
             ] })
           ] }),
           /* @__PURE__ */ jsxs63("div", { className: styles.metaItem, children: [
@@ -22574,29 +22590,29 @@ var MailboxDetailModal = ({
                 "div",
                 {
                   className: styles.avatar,
-                  style: { background: getAvatarColor7(message18.to) },
-                  children: getInitials7(message18.to)
+                  style: { background: getAvatarColor7(message19.to) },
+                  children: getInitials7(message19.to)
                 }
               ),
-              /* @__PURE__ */ jsx90("span", { children: message18.to })
+              /* @__PURE__ */ jsx90("span", { children: message19.to })
             ] })
           ] }),
           /* @__PURE__ */ jsxs63("div", { className: styles.metaItem, children: [
             /* @__PURE__ */ jsx90(Text35, { className: styles.metaLabel, children: "Time" }),
             /* @__PURE__ */ jsxs63("div", { className: styles.metaValue, children: [
               /* @__PURE__ */ jsx90(Calendar2, { size: 14 }),
-              /* @__PURE__ */ jsx90("span", { children: formatDate3(message18.timestamp) })
+              /* @__PURE__ */ jsx90("span", { children: formatDate3(message19.timestamp) })
             ] })
           ] }),
           /* @__PURE__ */ jsxs63("div", { className: styles.metaItem, children: [
             /* @__PURE__ */ jsx90(Text35, { className: styles.metaLabel, children: "Type" }),
-            /* @__PURE__ */ jsx90("div", { className: styles.metaValue, children: /* @__PURE__ */ jsx90(Tag20, { color: message18.type === "broadcast" ? "blue" : "default", children: message18.type }) })
+            /* @__PURE__ */ jsx90("div", { className: styles.metaValue, children: /* @__PURE__ */ jsx90(Tag20, { color: message19.type === "broadcast" ? "blue" : "default", children: message19.type }) })
           ] })
         ] }),
         /* @__PURE__ */ jsx90(Divider8, {}),
         /* @__PURE__ */ jsxs63("div", { className: styles.contentSection, children: [
           /* @__PURE__ */ jsx90(Text35, { className: styles.contentLabel, children: "Message Content" }),
-          /* @__PURE__ */ jsx90("div", { className: styles.contentBox, children: /* @__PURE__ */ jsx90(Paragraph2, { className: styles.messageContent, children: message18.content }) })
+          /* @__PURE__ */ jsx90("div", { className: styles.contentBox, children: /* @__PURE__ */ jsx90(Paragraph2, { className: styles.messageContent, children: message19.content }) })
         ] })
       ] })
     }
@@ -22825,26 +22841,26 @@ var MessageGroupComponent = ({ group, styles, defaultExpanded = true, onMessageC
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx91("div", { className: styles.listGroupContent, children: group.messages.map((message18) => /* @__PURE__ */ jsxs64(
+    isExpanded && /* @__PURE__ */ jsx91("div", { className: styles.listGroupContent, children: group.messages.map((message19) => /* @__PURE__ */ jsxs64(
       "div",
       {
-        className: `${styles.listItem} ${!message18.read ? styles.listItemUnread : ""}`,
-        onClick: () => onMessageClick(message18),
+        className: `${styles.listItem} ${!message19.read ? styles.listItemUnread : ""}`,
+        onClick: () => onMessageClick(message19),
         children: [
-          /* @__PURE__ */ jsx91("div", { className: styles.listItemIcon, children: !message18.read ? /* @__PURE__ */ jsx91("div", { className: styles.unreadBadge }) : /* @__PURE__ */ jsx91(Circle2, { size: 8, style: { color: "#d9d9d9" } }) }),
+          /* @__PURE__ */ jsx91("div", { className: styles.listItemIcon, children: !message19.read ? /* @__PURE__ */ jsx91("div", { className: styles.unreadBadge }) : /* @__PURE__ */ jsx91(Circle2, { size: 8, style: { color: "#d9d9d9" } }) }),
           /* @__PURE__ */ jsxs64("div", { className: styles.listItemContent, children: [
-            /* @__PURE__ */ jsx91("span", { className: styles.listItemPreview, children: getMessagePreview(message18.content) }),
+            /* @__PURE__ */ jsx91("span", { className: styles.listItemPreview, children: getMessagePreview(message19.content) }),
             /* @__PURE__ */ jsxs64("span", { className: styles.listItemMeta, children: [
               "To: ",
-              message18.to,
+              message19.to,
               " \u2022 ",
-              message18.type
+              message19.type
             ] })
           ] }),
-          /* @__PURE__ */ jsx91("div", { className: styles.listItemRight, children: /* @__PURE__ */ jsx91("span", { className: styles.listItemDate, children: formatDate4(message18.timestamp) }) })
+          /* @__PURE__ */ jsx91("div", { className: styles.listItemRight, children: /* @__PURE__ */ jsx91("span", { className: styles.listItemDate, children: formatDate4(message19.timestamp) }) })
         ]
       },
-      message18.id
+      message19.id
     )) })
   ] });
 };
@@ -22855,12 +22871,12 @@ var MailboxPanel = ({ data }) => {
   const { teamMailbox = [] } = data || {};
   const messageGroups = useMemo22(() => {
     const groupsMap = /* @__PURE__ */ new Map();
-    teamMailbox.forEach((message18) => {
-      const sender = message18.from;
+    teamMailbox.forEach((message19) => {
+      const sender = message19.from;
       if (!groupsMap.has(sender)) {
         groupsMap.set(sender, []);
       }
-      groupsMap.get(sender).push(message18);
+      groupsMap.get(sender).push(message19);
     });
     const groups = Array.from(groupsMap.entries()).map(([sender, messages]) => ({
       sender,
@@ -22877,8 +22893,8 @@ var MailboxPanel = ({ data }) => {
     return groups;
   }, [teamMailbox]);
   const totalUnread = teamMailbox.filter((m) => !m.read).length;
-  const handleMessageClick = (message18) => {
-    setSelectedMessage(message18);
+  const handleMessageClick = (message19) => {
+    setSelectedMessage(message19);
     setModalVisible(true);
   };
   const handleCloseModal = () => {
@@ -23928,6 +23944,1099 @@ var TeamChat = ({ data }) => {
   ] });
 };
 
+// src/components/GenUI/elements/ShowWidget.tsx
+import { useCallback as useCallback27 } from "react";
+import { Button as Button44, Typography as Typography46 } from "antd";
+import { ExpandOutlined as ExpandOutlined2 } from "@ant-design/icons";
+
+// src/streaming-html/StreamingHTMLRenderer.tsx
+import React50, { useEffect as useEffect37, useRef as useRef22, useCallback as useCallback26, useState as useState59 } from "react";
+
+// src/streaming-html/show-widget-css-generator.ts
+function generateShowWidgetCSS(tokens) {
+  const { colors: colors3, radius: radius4, typography: typography3 } = tokens;
+  return `
+:root {
+  /* ============================================
+     Background Colors (from Axiom tokens)
+     ============================================ */
+  
+  --color-background-primary: ${colors3.light.surface};
+  --color-background-secondary: ${colors3.light.surfaceHover};
+  --color-background-tertiary: ${colors3.light.bg};
+  
+  /* Semantic backgrounds - derived from functional colors */
+  --color-background-info: ${colors3.info}1a;
+  --color-background-danger: ${colors3.error}1a;
+  --color-background-success: ${colors3.success}1a;
+  --color-background-warning: ${colors3.warning}1a;
+
+  /* ============================================
+     Text Colors (from Axiom tokens)
+     ============================================ */
+  
+  --color-text-primary: ${colors3.light.text};
+  --color-text-secondary: ${colors3.light.textSecondary};
+  --color-text-tertiary: ${colors3.light.textMuted};
+  
+  /* Semantic text - from functional colors */
+  --color-text-info: ${colors3.info};
+  --color-text-danger: ${colors3.error};
+  --color-text-success: ${colors3.success};
+  --color-text-warning: ${colors3.warning};
+
+  /* ============================================
+     Border Colors (derived from Axiom tokens)
+     ============================================ */
+  
+  --color-border-tertiary: ${colors3.light.border}99;
+  --color-border-secondary: ${colors3.light.borderHover}b3;
+  --color-border-primary: ${colors3.light.textMuted}cc;
+  
+  /* Semantic borders */
+  --color-border-info: ${colors3.info}80;
+  --color-border-danger: ${colors3.error}80;
+  --color-border-success: ${colors3.success}80;
+  --color-border-warning: ${colors3.warning}80;
+
+  /* ============================================
+     Typography (from Axiom tokens)
+     ============================================ */
+  
+  --font-sans: ${typography3.fontFamily};
+  --font-serif: Georgia, 'Times New Roman', serif;
+  --font-mono: 'Fira Code', 'Monaco', 'Consolas', monospace;
+
+  /* ============================================
+     Border Radius (from Axiom tokens, adjusted)
+     ============================================ */
+  
+  --border-radius-md: ${radius4.md};
+  --border-radius-lg: ${radius4.lg};
+  --border-radius-xl: ${radius4.xl};
+
+  /* ============================================
+     Color Ramps (9 ramps x 7 stops)
+     Derived from Axiom primary and functional colors
+     ============================================ */
+  
+  /* Purple - from Axiom primary indigo */
+  --color-purple-50: ${colors3.primary[50]};
+  --color-purple-100: ${colors3.primary[100]};
+  --color-purple-200: ${colors3.primary[200]};
+  --color-purple-400: ${colors3.primary[400]};
+  --color-purple-600: ${colors3.primary[600]};
+  --color-purple-800: ${colors3.primary[800]};
+  --color-purple-900: ${colors3.primary[900]};
+
+  /* Teal - cool accent (complementary to primary) */
+  --color-teal-50: #e1f5ee;
+  --color-teal-100: #9fe1cb;
+  --color-teal-200: #5dcaa5;
+  --color-teal-400: #1d9e75;
+  --color-teal-600: #0f6e56;
+  --color-teal-800: #085041;
+  --color-teal-900: #04342c;
+
+  /* Coral - warm accent */
+  --color-coral-50: #faece7;
+  --color-coral-100: #f5c4b3;
+  --color-coral-200: #f0997b;
+  --color-coral-400: #d85a30;
+  --color-coral-600: #993c1d;
+  --color-coral-800: #712b13;
+  --color-coral-900: #4a1b0c;
+
+  /* Pink - soft accent */
+  --color-pink-50: #fbeaf0;
+  --color-pink-100: #f4c0d1;
+  --color-pink-200: #ed93b1;
+  --color-pink-400: #d4537e;
+  --color-pink-600: #993556;
+  --color-pink-800: #72243e;
+  --color-pink-900: #4b1528;
+
+  /* Gray - neutral scale (derived from text colors) */
+  --color-gray-50: #f1efe8;
+  --color-gray-100: #d3d1c7;
+  --color-gray-200: #b4b2a9;
+  --color-gray-400: #888780;
+  --color-gray-600: #5f5e5a;
+  --color-gray-800: #444441;
+  --color-gray-900: #2c2c2a;
+
+  /* Blue - from Axiom info color */
+  --color-blue-50: #e6f1fb;
+  --color-blue-100: #b5d4f4;
+  --color-blue-200: #85b7eb;
+  --color-blue-400: ${colors3.info};
+  --color-blue-600: #185fa5;
+  --color-blue-800: #0c447c;
+  --color-blue-900: #042c53;
+
+  /* Green - from Axiom success color */
+  --color-green-50: #eaf3de;
+  --color-green-100: #c0dd97;
+  --color-green-200: #97c459;
+  --color-green-400: ${colors3.success};
+  --color-green-600: #3b6d11;
+  --color-green-800: #27500a;
+  --color-green-900: #173404;
+
+  /* Amber - from Axiom warning color */
+  --color-amber-50: #faeeda;
+  --color-amber-100: #fac775;
+  --color-amber-200: #ef9f27;
+  --color-amber-400: ${colors3.warning};
+  --color-amber-600: #854f0b;
+  --color-amber-800: #633806;
+  --color-amber-900: #412402;
+
+  /* Red - from Axiom error color */
+  --color-red-50: #fcebeb;
+  --color-red-100: #f7c1c1;
+  --color-red-200: #f09595;
+  --color-red-400: ${colors3.error};
+  --color-red-600: #a32d2d;
+  --color-red-800: #791f1f;
+  --color-red-900: #501313;
+
+  /* Short Aliases */
+  --p: var(--color-text-primary);
+  --s: var(--color-text-secondary);
+  --t: var(--color-text-tertiary);
+  --bg2: var(--color-background-secondary);
+  --b: var(--color-border-tertiary);
+}
+
+/* Dark Mode - using Axiom dark tokens */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background-primary: ${colors3.dark.surface};
+    --color-background-secondary: ${colors3.dark.surfaceHover};
+    --color-background-tertiary: ${colors3.dark.bg};
+    
+    --color-background-info: ${colors3.info}26;
+    --color-background-danger: ${colors3.error}26;
+    --color-background-success: ${colors3.success}26;
+    --color-background-warning: ${colors3.warning}26;
+
+    --color-text-primary: ${colors3.dark.text};
+    --color-text-secondary: ${colors3.dark.textSecondary};
+    --color-text-tertiary: ${colors3.dark.textMuted};
+
+    --color-border-tertiary: ${colors3.dark.border}99;
+    --color-border-secondary: ${colors3.dark.borderHover}b3;
+    --color-border-primary: ${colors3.dark.textMuted}cc;
+    --color-border-info: ${colors3.info}66;
+    --color-border-danger: ${colors3.error}66;
+    --color-border-success: ${colors3.success}66;
+    --color-border-warning: ${colors3.warning}66;
+  }
+}
+
+/* Base Styles */
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-sans);
+  color: var(--color-text-primary);
+  background: transparent;
+  overflow: hidden;
+  width: fit-content;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+#root {
+  overflow: hidden;
+  width: fit-content;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+
+#root img, #root video, #root canvas, #root svg {
+  max-width: 100%;
+  height: 100%;
+}
+
+/* SVG Text Classes */
+.t {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 400;
+  fill: var(--color-text-primary);
+}
+
+.ts {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 400;
+  fill: var(--color-text-secondary);
+}
+
+.th {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 500;
+  fill: var(--color-text-primary);
+}
+
+/* Box & Node Classes */
+.box {
+  fill: var(--color-background-secondary);
+  stroke: var(--color-border-tertiary);
+  stroke-width: 0.5px;
+}
+
+.node {
+  cursor: pointer;
+}
+
+.node:hover {
+  opacity: 0.85;
+}
+
+/* Arrow & Leader Lines */
+.arr {
+  stroke: var(--color-text-tertiary);
+  stroke-width: 1.5px;
+  fill: none;
+}
+
+.leader {
+  stroke: var(--color-text-tertiary);
+  stroke-width: 0.5px;
+  stroke-dasharray: 4 2;
+  fill: none;
+}
+
+/* Color Ramp Classes for SVG */
+.c-purple { fill: var(--color-purple-200); stroke: var(--color-purple-600); }
+.c-purple .t, .c-purple .th { fill: var(--color-purple-800); }
+.c-purple .ts { fill: var(--color-purple-600); }
+
+.c-teal { fill: var(--color-teal-200); stroke: var(--color-teal-600); }
+.c-teal .t, .c-teal .th { fill: var(--color-teal-800); }
+.c-teal .ts { fill: var(--color-teal-600); }
+
+.c-coral { fill: var(--color-coral-200); stroke: var(--color-coral-600); }
+.c-coral .t, .c-coral .th { fill: var(--color-coral-800); }
+.c-coral .ts { fill: var(--color-coral-600); }
+
+.c-pink { fill: var(--color-pink-200); stroke: var(--color-pink-600); }
+.c-pink .t, .c-pink .th { fill: var(--color-pink-800); }
+.c-pink .ts { fill: var(--color-pink-600); }
+
+.c-gray { fill: var(--color-gray-200); stroke: var(--color-gray-600); }
+.c-gray .t, .c-gray .th { fill: var(--color-gray-800); }
+.c-gray .ts { fill: var(--color-gray-600); }
+
+.c-blue { fill: var(--color-blue-200); stroke: var(--color-blue-600); }
+.c-blue .t, .c-blue .th { fill: var(--color-blue-800); }
+.c-blue .ts { fill: var(--color-blue-600); }
+
+.c-green { fill: var(--color-green-200); stroke: var(--color-green-600); }
+.c-green .t, .c-green .th { fill: var(--color-green-800); }
+.c-green .ts { fill: var(--color-green-600); }
+
+.c-amber { fill: var(--color-amber-200); stroke: var(--color-amber-600); }
+.c-amber .t, .c-amber .th { fill: var(--color-amber-800); }
+.c-amber .ts { fill: var(--color-amber-600); }
+
+.c-red { fill: var(--color-red-200); stroke: var(--color-red-600); }
+.c-red .t, .c-red .th { fill: var(--color-red-800); }
+.c-red .ts { fill: var(--color-red-600); }
+
+/* Dark Mode Color Ramps */
+@media (prefers-color-scheme: dark) {
+  .c-purple { fill: var(--color-purple-800); stroke: var(--color-purple-200); }
+  .c-purple .t, .c-purple .th { fill: var(--color-purple-100); }
+  .c-purple .ts { fill: var(--color-purple-200); }
+  
+  .c-teal { fill: var(--color-teal-800); stroke: var(--color-teal-200); }
+  .c-teal .t, .c-teal .th { fill: var(--color-teal-100); }
+  .c-teal .ts { fill: var(--color-teal-200); }
+  
+  .c-coral { fill: var(--color-coral-800); stroke: var(--color-coral-200); }
+  .c-coral .t, .c-coral .th { fill: var(--color-coral-100); }
+  .c-coral .ts { fill: var(--color-coral-200); }
+  
+  .c-pink { fill: var(--color-pink-800); stroke: var(--color-pink-200); }
+  .c-pink .t, .c-pink .th { fill: var(--color-pink-100); }
+  .c-pink .ts { fill: var(--color-pink-200); }
+  
+  .c-gray { fill: var(--color-gray-800); stroke: var(--color-gray-200); }
+  .c-gray .t, .c-gray .th { fill: var(--color-gray-100); }
+  .c-gray .ts { fill: var(--color-gray-200); }
+  
+  .c-blue { fill: var(--color-blue-800); stroke: var(--color-blue-200); }
+  .c-blue .t, .c-blue .th { fill: var(--color-blue-100); }
+  .c-blue .ts { fill: var(--color-blue-200); }
+  
+  .c-green { fill: var(--color-green-800); stroke: var(--color-green-200); }
+  .c-green .t, .c-green .th { fill: var(--color-green-100); }
+  .c-green .ts { fill: var(--color-green-200); }
+  
+  .c-amber { fill: var(--color-amber-800); stroke: var(--color-amber-200); }
+  .c-amber .t, .c-amber .th { fill: var(--color-amber-100); }
+  .c-amber .ts { fill: var(--color-amber-200); }
+  
+  .c-red { fill: var(--color-red-800); stroke: var(--color-red-200); }
+  .c-red .t, .c-red .th { fill: var(--color-red-100); }
+  .c-red .ts { fill: var(--color-red-200); }
+}
+/* Pre-styled form elements */
+button {
+  background: transparent;
+  border: 0.5px solid var(--color-border-secondary);
+  border-radius: var(--border-radius-md);
+  color: var(--color-text-primary);
+  padding: 6px 14px;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+button:hover { background: var(--color-background-secondary); }
+button:active { transform: scale(0.98); }
+
+input[type="range"] {
+  -webkit-appearance: none;
+  height: 4px;
+  background: var(--color-border-secondary);
+  border-radius: 2px;
+  outline: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-text-primary);
+  cursor: pointer;
+}
+
+input[type="text"], input[type="number"], textarea, select {
+  height: 36px;
+  background: var(--color-background-primary);
+  border: 0.5px solid var(--color-border-tertiary);
+  border-radius: var(--border-radius-md);
+  color: var(--color-text-primary);
+  padding: 0 10px;
+  font-size: 14px;
+  font-family: var(--font-sans);
+  outline: none;
+}
+input[type="text"]:hover, input[type="number"]:hover, textarea:hover, select:hover {
+  border-color: var(--color-border-secondary);
+}
+input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
+  border-color: var(--color-border-primary);
+  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
+}
+`;
+}
+var showWidgetCSS = generateShowWidgetCSS(axiomTokens);
+
+// src/streaming-html/IframeHTMLBridge.ts
+function generateIframeSrcdoc() {
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+  *{box-sizing:border-box}
+body{margin:0;padding:1rem;font-family:system-ui,-apple-system,sans-serif;}
+svg { height:100%}
+@keyframes _fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
+
+  ${showWidgetCSS}
+  </style>
+  <script>
+    // Load morphdom from CDN with fallback
+    (function() {
+      if (typeof morphdom === 'undefined') {
+        var script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/morphdom@2.7.4/dist/morphdom-umd.min.js';
+        script.onload = function() {
+          window.parent.postMessage({ type: 'iframe-ready' }, '*');
+        };
+        script.onerror = function() {
+          window.parent.postMessage({ type: 'iframe-error', error: 'Failed to load morphdom' }, '*');
+        };
+        document.head.appendChild(script);
+      }
+    })();
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    class TagBalancer {
+      constructor() {
+        this.voidElements = new Set([
+          'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+          'link', 'meta', 'param', 'source', 'track', 'wbr'
+        ]);
+        this.openTags = [];
+        this.accumulatedHTML = '';
+      }
+
+      parseChunk(chunk) {
+        this.accumulatedHTML += chunk;
+        
+        // Parse tags from chunk
+        const tagRegex = /<\\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*?>/g;
+        let match;
+        
+        while ((match = tagRegex.exec(chunk)) !== null) {
+          const fullTag = match[0];
+          const tagName = match[1].toLowerCase();
+          const isClosing = fullTag.startsWith('</');
+          const isSelfClosing = fullTag.endsWith('/>') || this.voidElements.has(tagName);
+          
+          if (isSelfClosing) {
+            // Void elements don't affect stack
+            continue;
+          }
+          
+          if (isClosing) {
+            // Remove matching open tag if present
+            const idx = this.openTags.lastIndexOf(tagName);
+            if (idx !== -1) {
+              this.openTags.splice(idx, 1);
+            }
+          } else {
+            // Opening tag - add to stack
+            this.openTags.push(tagName);
+          }
+        }
+      }
+
+      getAccumulatedHTML() {
+        return this.accumulatedHTML;
+      }
+
+      getStack() {
+        return [...this.openTags];
+      }
+    }
+
+    const tagBalancer = new TagBalancer();
+    const root = document.getElementById('root');
+    let renderTimeout = null;
+
+    function preserveInputValues() {
+      const inputs = document.querySelectorAll('input, textarea');
+      const values = new Map();
+      inputs.forEach((input, index) => {
+        const key = input.tagName + '-' + index + '-' + (input.name || input.id || '');
+        values.set(key, input.value);
+      });
+      return values;
+    }
+
+    function restoreInputValues(values) {
+      const inputs = document.querySelectorAll('input, textarea');
+      inputs.forEach((input, index) => {
+        const key = input.tagName + '-' + index + '-' + (input.name || input.id || '');
+        if (values.has(key)) {
+          input.value = values.get(key);
+        }
+      });
+    }
+
+    function render() {
+      try {
+        const preservedValues = preserveInputValues();
+        
+        // Build complete HTML with auto-closing tags
+        const openTags = tagBalancer.getStack();
+        const closingTags = openTags
+          .slice()
+          .reverse()
+          .map(tag => '</' + tag + '>')
+          .join('');
+        const balancedHTML = tagBalancer.getAccumulatedHTML() + closingTags;
+        
+        // Use morphdom to update DOM
+        if (root) {
+          const temp = document.createElement('div');
+          temp.innerHTML = balancedHTML;
+          
+          if (!root.firstChild) {
+            root.innerHTML = balancedHTML;
+          } else if (temp.firstChild) {
+            morphdom(root, temp, {
+              childrenOnly: true,
+              onBeforeElUpdated: function(fromEl, toEl) {
+                // Preserve input/textarea values
+                if (fromEl.tagName === 'INPUT' || fromEl.tagName === 'TEXTAREA') {
+                  toEl.value = fromEl.value;
+                }
+                return true;
+              },
+              onNodeAdded: function(node) {
+                // Add fade-in animation to newly added elements
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                  node.style.animation = '_fadeIn 0.3s ease-out';
+                }
+                return node;
+              }
+            });
+          }
+        }
+        
+        restoreInputValues(preservedValues);
+      } catch (error) {
+        console.error('[iframe] Render error:', error);
+        parent.postMessage({ type: 'iframe-error', error: error.message }, '*');
+      }
+    }
+
+    function scheduleRender() {
+      if (renderTimeout) {
+        clearTimeout(renderTimeout);
+      }
+      renderTimeout = setTimeout(render, 50);
+    }
+
+    function notifyHeight() {
+      try {
+        const height = document.body.scrollHeight;
+        parent.postMessage({ type: 'iframe-height', height }, '*');
+      } catch (error) {
+        console.error('[iframe] Failed to notify height:', error);
+      }
+    }
+
+    function notifyWidth() {
+      try {
+        const width = document.body.scrollWidth;
+        parent.postMessage({ type: 'iframe-width', width }, '*');
+      } catch (error) {
+        console.error('[iframe] Failed to notify width:', error);
+      }
+    }
+
+    function notifySize() {
+      notifyHeight();
+      notifyWidth();
+    }
+
+    // Observe size changes
+    const resizeObserver = new ResizeObserver(() => {
+      notifySize();
+    });
+    
+    if (root) {
+      resizeObserver.observe(root);
+    }
+    
+    // Also notify on initial load
+    window.addEventListener('load', notifySize);
+
+    function executeScripts() {
+      try {
+        const scripts = root.querySelectorAll('script');
+        const executedScripts = new Set();
+        
+        scripts.forEach((oldScript) => {
+          // \u901A\u8FC7\u5185\u5BB9\u54C8\u5E0C\u907F\u514D\u91CD\u590D\u6267\u884C\u76F8\u540C\u811A\u672C
+          const scriptKey = oldScript.src || oldScript.textContent;
+          if (executedScripts.has(scriptKey)) {
+            oldScript.remove();
+            return;
+          }
+          executedScripts.add(scriptKey);
+          
+          const newScript = document.createElement('script');
+          
+          // Copy attributes
+          Array.from(oldScript.attributes).forEach(attr => {
+            newScript.setAttribute(attr.name, attr.value);
+          });
+          
+          // Copy content
+          if (oldScript.src) {
+            newScript.src = oldScript.src;
+          } else {
+            newScript.textContent = oldScript.textContent;
+          }
+          
+          // Replace old script with new one to execute it
+          oldScript.parentNode.replaceChild(newScript, oldScript);
+        });
+      } catch (error) {
+        console.error('[iframe] Script execution error:', error);
+        parent.postMessage({ type: 'iframe-error', error: error.message }, '*');
+      }
+    }
+
+    // Listen for messages from parent
+    window.addEventListener('message', function(event) {
+      try {
+        const message = event.data;
+        
+        if (!message || typeof message !== 'object') {
+          return;
+        }
+
+        switch (message.type) {
+          case 'stream-chunk':
+            if (message.chunk) {
+              tagBalancer.parseChunk(message.chunk);
+              scheduleRender();
+            }
+            break;
+            
+          case 'execute-scripts':
+            // \u5EF6\u8FDF\u6267\u884C\u811A\u672C\uFF0C\u786E\u4FDD render \u5DF2\u5B8C\u6210
+            setTimeout(() => {
+              executeScripts();
+            }, 100);
+            break;
+        }
+      } catch (error) {
+        parent.postMessage({ type: 'iframe-error', error: error.message }, '*');
+      }
+    });
+
+    // Global sendPrompt function for widgets to communicate with parent
+    window.sendPrompt = function(text) {
+      if (typeof text !== 'string') {
+        console.error('[iframe] sendPrompt requires a string argument');
+        return;
+      }
+      parent.postMessage({ type: 'widget-prompt', text: text }, '*');
+    };
+
+    // Also expose openLink for opening URLs
+    window.openLink = function(url) {
+      if (typeof url !== 'string') {
+        console.error('[iframe] openLink requires a string argument');
+        return;
+      }
+      parent.postMessage({ type: 'widget-open-link', url: url }, '*');
+    };
+
+    // Signal that iframe is ready (only if morphdom was already loaded)
+    if (typeof morphdom !== 'undefined') {
+      parent.postMessage({ type: 'iframe-ready' }, '*');
+    }
+  </script>
+</body>
+</html>`;
+}
+
+// src/streaming-html/StreamingHTMLRenderer.tsx
+import { jsx as jsx96, jsxs as jsxs69 } from "react/jsx-runtime";
+var StreamingHTMLRenderer = ({
+  html,
+  className = "",
+  isComplete = false,
+  onError,
+  onPrompt,
+  title,
+  loadingMessages
+}) => {
+  const iframeRef = useRef22(null);
+  const containerRef = useRef22(null);
+  const resizeObserverRef = useRef22(null);
+  const prevHTMLRef = useRef22("");
+  const isReadyRef = useRef22(false);
+  const pendingChunksRef = useRef22([]);
+  const isCompleteRef = useRef22(isComplete);
+  const isScriptExecuted = useRef22(false);
+  const [iframeHeight, setIframeHeight] = React50.useState(0);
+  const [iframeWidth, setIframeWidth] = React50.useState(void 0);
+  const [currentMessageIndex, setCurrentMessageIndex] = useState59(0);
+  const [showLoading, setShowLoading] = useState59(true);
+  useEffect37(() => {
+    isCompleteRef.current = isComplete;
+  }, [isComplete]);
+  useEffect37(() => {
+    if (iframeHeight > 0) {
+      setShowLoading(false);
+      return;
+    }
+    if (!loadingMessages || loadingMessages.length === 0) {
+      setShowLoading(false);
+      return;
+    }
+    setShowLoading(true);
+    if (loadingMessages.length === 1) {
+      setCurrentMessageIndex(0);
+      return;
+    }
+    const interval = setInterval(() => {
+      setCurrentMessageIndex((prev) => {
+        if (prev >= loadingMessages.length - 1) {
+          clearInterval(interval);
+          return prev;
+        }
+        return prev + 1;
+      });
+    }, 1500);
+    return () => clearInterval(interval);
+  }, [iframeHeight, loadingMessages]);
+  const executeScripts = useCallback26(() => {
+    if (isScriptExecuted.current) {
+      console.log("[StreamingHTMLRenderer]  scripts is executed");
+      return;
+    }
+    console.log("[StreamingHTMLRenderer] Executing scripts...");
+    const iframe = iframeRef.current;
+    if (!iframe || !iframe.contentWindow) {
+      console.log("[StreamingHTMLRenderer] No iframe or contentWindow");
+      return;
+    }
+    try {
+      console.log("[StreamingHTMLRenderer] Sending execute-scripts message");
+      isScriptExecuted.current = true;
+      iframe.contentWindow.postMessage(
+        { type: "execute-scripts" },
+        "*"
+      );
+    } catch (error) {
+      console.error("[StreamingHTMLRenderer] Failed to execute scripts:", error);
+      const streamingError = {
+        type: "POSTMESSAGE_ERROR",
+        message: error instanceof Error ? error.message : "Failed to execute scripts in iframe"
+      };
+      onError?.(streamingError);
+    }
+  }, [onError]);
+  const sendChunk = useCallback26((chunk) => {
+    const iframe = iframeRef.current;
+    if (!iframe || !iframe.contentWindow) {
+      return;
+    }
+    if (!isReadyRef.current) {
+      console.log("[StreamingHTMLRenderer] Iframe not ready, queueing chunk");
+      pendingChunksRef.current.push(chunk);
+      return;
+    }
+    try {
+      iframe.contentWindow.postMessage(
+        { type: "stream-chunk", chunk },
+        "*"
+      );
+    } catch (error) {
+      console.error("[StreamingHTMLRenderer] Failed to send chunk:", error);
+      const streamingError = {
+        type: "POSTMESSAGE_ERROR",
+        message: error instanceof Error ? error.message : "Failed to send chunk to iframe"
+      };
+      onError?.(streamingError);
+    }
+  }, [onError]);
+  useEffect37(() => {
+    const handleMessage = (event) => {
+      const iframe = iframeRef.current;
+      if (!iframe || event.source !== iframe.contentWindow) {
+        return;
+      }
+      const message19 = event.data;
+      if (!message19 || typeof message19 !== "object") {
+        return;
+      }
+      switch (message19.type) {
+        case "iframe-ready":
+          console.log("[StreamingHTMLRenderer] Iframe ready");
+          isReadyRef.current = true;
+          while (pendingChunksRef.current.length > 0) {
+            const chunk = pendingChunksRef.current.shift();
+            if (chunk) {
+              sendChunk(chunk);
+            }
+          }
+          if (isCompleteRef.current) {
+            executeScripts();
+          }
+          break;
+        case "iframe-height":
+          if (typeof message19.height === "number" && message19.height > 0) {
+            setIframeHeight(message19.height);
+          }
+          break;
+        case "iframe-error":
+          const streamingError = {
+            type: "RENDER_ERROR",
+            message: message19.error || "Unknown iframe error"
+          };
+          onError?.(streamingError);
+          break;
+        case "widget-prompt":
+          if (typeof message19.text === "string") {
+            onPrompt?.(message19.text);
+          }
+          break;
+        case "widget-open-link":
+          if (typeof message19.url === "string") {
+            window.open(message19.url, "_blank", "noopener,noreferrer");
+          }
+          break;
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [onError, onPrompt, sendChunk, executeScripts]);
+  useEffect37(() => {
+    if (html === prevHTMLRef.current) {
+      return;
+    }
+    const prevLength = prevHTMLRef.current.length;
+    const newChunk = html.slice(prevLength);
+    prevHTMLRef.current = html;
+    if (newChunk) {
+      sendChunk(newChunk);
+    }
+  }, [html, sendChunk]);
+  useEffect37(() => {
+    if (isComplete && isReadyRef.current) {
+      executeScripts();
+    }
+  }, [isComplete, executeScripts]);
+  useEffect37(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const antBubble = container.closest(".ant-bubble");
+    if (!antBubble) {
+      console.warn("[StreamingHTMLRenderer] .ant-bubble ancestor not found");
+      return;
+    }
+    resizeObserverRef.current = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        if (width > 0) {
+          setIframeWidth(width);
+        }
+      }
+    });
+    resizeObserverRef.current.observe(antBubble);
+    const initialWidth = antBubble.getBoundingClientRect().width;
+    if (initialWidth > 0) {
+      setIframeWidth(initialWidth);
+    }
+    return () => {
+      resizeObserverRef.current?.disconnect();
+      resizeObserverRef.current = null;
+    };
+  }, []);
+  useEffect37(() => {
+    return () => {
+      isReadyRef.current = false;
+      pendingChunksRef.current = [];
+      prevHTMLRef.current = "";
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs69(
+    "div",
+    {
+      ref: containerRef,
+      className: `streaming-html-renderer ${className}`,
+      style: { minHeight: "100px", position: "relative" },
+      children: [
+        showLoading && /* @__PURE__ */ jsxs69(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: radius.lg,
+              background: `linear-gradient(90deg, ${colors.light.surfaceHover} 25%, ${colors.light.surface} 50%, ${colors.light.surfaceHover} 75%)`,
+              backgroundSize: "200% 100%",
+              animation: "shimmer 1.5s infinite",
+              zIndex: 10
+            },
+            children: [
+              /* @__PURE__ */ jsx96("style", { children: `
+            @keyframes shimmer {
+              0% { background-position: -200% 0; }
+              100% { background-position: 200% 0; }
+            }
+          ` }),
+              /* @__PURE__ */ jsx96(
+                "span",
+                {
+                  style: {
+                    fontSize: "14px",
+                    color: colors.light.textSecondary,
+                    textAlign: "center",
+                    padding: "0 16px"
+                  },
+                  children: loadingMessages?.[currentMessageIndex] || "Loading..."
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx96(
+          "iframe",
+          {
+            ref: iframeRef,
+            srcDoc: generateIframeSrcdoc(),
+            sandbox: "allow-scripts",
+            style: {
+              width: iframeWidth ? `${iframeWidth}px` : "100%",
+              height: iframeHeight > 0 ? `${iframeHeight}px` : "100px",
+              border: "none",
+              display: "block",
+              overflow: "hidden"
+            },
+            title
+          }
+        )
+      ]
+    }
+  );
+};
+var StreamingHTMLRenderer_default = StreamingHTMLRenderer;
+
+// src/components/GenUI/elements/ShowWidget.tsx
+import { jsx as jsx97, jsxs as jsxs70 } from "react/jsx-runtime";
+var ShowWidget = ({
+  data,
+  component_key,
+  interactive = true
+}) => {
+  const toolCallData = data;
+  const { title, loading_messages, widget_code } = toolCallData?.args || {};
+  const { openSideApp } = useChatUIContext();
+  const { sendMessage } = useAgentChat();
+  if (!toolCallData) {
+    return null;
+  }
+  let isComplete = false;
+  let finalHTML = widget_code || "";
+  if (toolCallData?.response) {
+    try {
+      const responseObj = JSON.parse(toolCallData.response);
+      if (toolCallData.status === "success") {
+        isComplete = true;
+        finalHTML = responseObj.widget_code || widget_code || "";
+      }
+    } catch (e) {
+      console.warn("Failed to parse tool response:", e);
+    }
+  }
+  const sendPrompt = useCallback27((text) => {
+    sendMessage({
+      input: {
+        message: text
+      }
+    });
+  }, [sendMessage]);
+  const handleOpenInSideApp = useCallback27(() => {
+    openSideApp({
+      component_key: "show_widget",
+      data: {
+        widget_code: finalHTML,
+        title: title || "Widget"
+      },
+      message: title || "Widget"
+    });
+  }, [openSideApp, finalHTML, title]);
+  return /* @__PURE__ */ jsxs70("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: radius.lg,
+    overflow: "hidden"
+  }, children: [
+    isComplete && /* @__PURE__ */ jsxs70(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "8px 12px",
+          position: "relative"
+        },
+        children: [
+          /* @__PURE__ */ jsx97(
+            Typography46.Text,
+            {
+              strong: true,
+              style: {
+                fontSize: "14px",
+                color: colors.light.text
+              },
+              children: title || "Widget"
+            }
+          ),
+          /* @__PURE__ */ jsx97(
+            Button44,
+            {
+              type: "text",
+              size: "small",
+              icon: /* @__PURE__ */ jsx97(ExpandOutlined2, {}),
+              onClick: handleOpenInSideApp,
+              style: {
+                position: "absolute",
+                right: 8
+              },
+              title: "Open in side app"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx97("div", { style: { position: "relative", flex: 1 }, children: /* @__PURE__ */ jsx97(
+      StreamingHTMLRenderer_default,
+      {
+        html: finalHTML,
+        isComplete,
+        onError: (err) => console.error("Widget render error:", err),
+        onPrompt: sendPrompt,
+        loadingMessages: loading_messages
+      }
+    ) })
+  ] });
+};
+
+// src/components/GenUI/elements/ShowWidgetApp.tsx
+import { useCallback as useCallback28 } from "react";
+import { jsx as jsx98 } from "react/jsx-runtime";
+var ShowWidgetApp = ({
+  data
+}) => {
+  const { widget_code, title } = data || {};
+  const { sendMessage } = useAgentChat();
+  const sendPrompt = useCallback28(
+    (text) => {
+      sendMessage({
+        input: {
+          message: text
+        }
+      });
+    },
+    [sendMessage]
+  );
+  if (!widget_code) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx98("div", { style: { padding: 24 }, children: /* @__PURE__ */ jsx98(
+    StreamingHTMLRenderer_default,
+    {
+      html: widget_code,
+      isComplete: true,
+      onError: (err) => console.error("Widget render error:", err),
+      onPrompt: sendPrompt
+    }
+  ) });
+};
+
 // src/components/GenUI/elements/builtIns.tsx
 var elements = {
   action_show_attachments_uploader: {
@@ -24008,6 +25117,10 @@ var elements = {
   mailbox: {
     card_view: TeamChat,
     side_app_view: MailboxPanel
+  },
+  show_widget: {
+    card_view: ShowWidget,
+    side_app_view: ShowWidgetApp
   }
 };
 
@@ -24027,8 +25140,8 @@ var regsiterElement = (language, ElementMeta) => {
 // src/components/Chat/SideAppViewBrowser.tsx
 import { Dropdown as Dropdown2, Tooltip as Tooltip22 } from "antd";
 import { createStyles as createStyles28 } from "antd-style";
-import { useEffect as useEffect37, useState as useState59 } from "react";
-import { Fragment as Fragment21, jsx as jsx96, jsxs as jsxs69 } from "react/jsx-runtime";
+import { useEffect as useEffect38, useState as useState60 } from "react";
+import { Fragment as Fragment21, jsx as jsx99, jsxs as jsxs71 } from "react/jsx-runtime";
 var useStyle12 = createStyles28(({ token, css }) => {
   return {
     container: css`
@@ -24205,15 +25318,15 @@ var useStyle12 = createStyles28(({ token, css }) => {
 });
 var EmptySideAppView = ({ component_key, data }) => {
   if (data?.component) {
-    return /* @__PURE__ */ jsx96(Fragment21, { children: data.component });
+    return /* @__PURE__ */ jsx99(Fragment21, { children: data.component });
   }
-  return /* @__PURE__ */ jsxs69("div", { children: [
-    /* @__PURE__ */ jsx96("p", { children: "Component view not found" }),
-    /* @__PURE__ */ jsx96("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ jsxs71("div", { children: [
+    /* @__PURE__ */ jsx99("p", { children: "Component view not found" }),
+    /* @__PURE__ */ jsx99("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
 var getTabIcon = (componentKey) => {
-  return /* @__PURE__ */ jsx96(AppstoreOutlined, { style: { fontSize: 12, opacity: 0.6 } });
+  return /* @__PURE__ */ jsx99(AppstoreOutlined, { style: { fontSize: 12, opacity: 0.6 } });
 };
 var SideAppViewBrowser = ({ region = "side" }) => {
   const { styles } = useStyle12();
@@ -24225,11 +25338,11 @@ var SideAppViewBrowser = ({ region = "side" }) => {
   } = useChatUIContext();
   const selectedCard = region === "side" ? sideAppSelectedCard : contextAppSelectedCard;
   const closeApp = region === "side" ? closeSideApp : closeContentApp;
-  const [activeKey, setActiveKey] = useState59(
+  const [activeKey, setActiveKey] = useState60(
     JSON.stringify(selectedCard)
   );
-  const [hoveredTab, setHoveredTab] = useState59(null);
-  const [items, setItems] = useState59([]);
+  const [hoveredTab, setHoveredTab] = useState60(null);
+  const [items, setItems] = useState60([]);
   const add = (key, label, children, componentKey) => {
     const newPanes = [...items, { label, children, key, componentKey }];
     setItems(newPanes);
@@ -24256,7 +25369,7 @@ var SideAppViewBrowser = ({ region = "side" }) => {
   const switchTab = (key) => {
     setActiveKey(key);
   };
-  useEffect37(() => {
+  useEffect38(() => {
     if (!selectedCard) return;
     const key = JSON.stringify(selectedCard);
     if (items.find((item) => item.key === key)) {
@@ -24271,7 +25384,7 @@ var SideAppViewBrowser = ({ region = "side" }) => {
     add(
       key,
       selectedCard?.message || selectedCard?.data?.message || "Unnamed",
-      /* @__PURE__ */ jsx96(
+      /* @__PURE__ */ jsx99(
         SideAppView,
         {
           component_key: selectedCard?.component_key || "",
@@ -24285,7 +25398,7 @@ var SideAppViewBrowser = ({ region = "side" }) => {
   const activeItem = items.find((item) => item.key === activeKey);
   const dropdownItems = items.map((item) => ({
     key: item.key,
-    label: /* @__PURE__ */ jsxs69(
+    label: /* @__PURE__ */ jsxs71(
       "div",
       {
         style: {
@@ -24296,8 +25409,8 @@ var SideAppViewBrowser = ({ region = "side" }) => {
         },
         children: [
           getTabIcon(item.componentKey),
-          /* @__PURE__ */ jsx96("span", { style: { flex: 1 }, children: item.label }),
-          /* @__PURE__ */ jsx96(
+          /* @__PURE__ */ jsx99("span", { style: { flex: 1 }, children: item.label }),
+          /* @__PURE__ */ jsx99(
             CloseOutlined2,
             {
               style: { fontSize: 10, opacity: 0.5 },
@@ -24312,9 +25425,9 @@ var SideAppViewBrowser = ({ region = "side" }) => {
     ),
     onClick: () => switchTab(item.key)
   }));
-  return /* @__PURE__ */ jsxs69("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsxs69("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsx96("div", { className: styles.tabsStrip, children: items.map((item) => /* @__PURE__ */ jsx96(Tooltip22, { title: item.label, placement: "bottom", children: /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsxs71("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxs71("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx99("div", { className: styles.tabsStrip, children: items.map((item) => /* @__PURE__ */ jsx99(Tooltip22, { title: item.label, placement: "bottom", children: /* @__PURE__ */ jsxs71(
         "div",
         {
           "data-tab-key": item.key,
@@ -24324,8 +25437,8 @@ var SideAppViewBrowser = ({ region = "side" }) => {
           onMouseLeave: () => setHoveredTab(null),
           children: [
             getTabIcon(item.componentKey),
-            /* @__PURE__ */ jsx96("span", { className: styles.tabLabel, children: item.label }),
-            /* @__PURE__ */ jsx96(
+            /* @__PURE__ */ jsx99("span", { className: styles.tabLabel, children: item.label }),
+            /* @__PURE__ */ jsx99(
               "span",
               {
                 className: `${styles.closeIndicator} ${hoveredTab === item.key || item.key === activeKey ? "always-visible" : ""}`,
@@ -24333,39 +25446,39 @@ var SideAppViewBrowser = ({ region = "side" }) => {
                   e.stopPropagation();
                   remove(item.key);
                 },
-                children: /* @__PURE__ */ jsx96(CloseOutlined2, { style: { fontSize: 10 } })
+                children: /* @__PURE__ */ jsx99(CloseOutlined2, { style: { fontSize: 10 } })
               }
             )
           ]
         }
       ) }, item.key)) }),
-      /* @__PURE__ */ jsxs69("div", { className: styles.actions, children: [
-        items.length > 0 && /* @__PURE__ */ jsx96("div", { className: styles.tabCounter, children: items.length }),
-        items.length > 1 && /* @__PURE__ */ jsx96(
+      /* @__PURE__ */ jsxs71("div", { className: styles.actions, children: [
+        items.length > 0 && /* @__PURE__ */ jsx99("div", { className: styles.tabCounter, children: items.length }),
+        items.length > 1 && /* @__PURE__ */ jsx99(
           Dropdown2,
           {
             menu: { items: dropdownItems },
             placement: "bottomRight",
             trigger: ["click"],
-            children: /* @__PURE__ */ jsx96("button", { className: styles.actionBtn, title: "All tabs", children: /* @__PURE__ */ jsx96(MoreOutlined3, {}) })
+            children: /* @__PURE__ */ jsx99("button", { className: styles.actionBtn, title: "All tabs", children: /* @__PURE__ */ jsx99(MoreOutlined3, {}) })
           }
         ),
-        /* @__PURE__ */ jsx96(Tooltip22, { title: "Close", children: /* @__PURE__ */ jsx96("button", { className: styles.actionBtn, onClick: closeApp, children: /* @__PURE__ */ jsx96(CloseOutlined2, {}) }) })
+        /* @__PURE__ */ jsx99(Tooltip22, { title: "Close", children: /* @__PURE__ */ jsx99("button", { className: styles.actionBtn, onClick: closeApp, children: /* @__PURE__ */ jsx99(CloseOutlined2, {}) }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx96("div", { className: styles.content, children: activeItem ? /* @__PURE__ */ jsx96("div", { className: styles.contentWrapper, children: activeItem.children }, activeItem.key) : /* @__PURE__ */ jsxs69("div", { className: styles.emptyState, children: [
-      /* @__PURE__ */ jsx96(AppstoreOutlined, { className: "icon" }),
-      /* @__PURE__ */ jsx96("span", { children: "Select an app to start" })
+    /* @__PURE__ */ jsx99("div", { className: styles.content, children: activeItem ? /* @__PURE__ */ jsx99("div", { className: styles.contentWrapper, children: activeItem.children }, activeItem.key) : /* @__PURE__ */ jsxs71("div", { className: styles.emptyState, children: [
+      /* @__PURE__ */ jsx99(AppstoreOutlined, { className: "icon" }),
+      /* @__PURE__ */ jsx99("span", { children: "Select an app to start" })
     ] }) })
   ] });
 };
 
 // src/components/Chat/ProjectSelector.tsx
-import { useState as useState60, useCallback as useCallback26, useMemo as useMemo26, useRef as useRef22 } from "react";
-import { Modal as Modal16, Input as Input12, Button as Button44, message as message14 } from "antd";
+import { useState as useState61, useCallback as useCallback29, useMemo as useMemo26, useRef as useRef23 } from "react";
+import { Modal as Modal16, Input as Input12, Button as Button45, message as message15 } from "antd";
 import { createStyles as createStyles29 } from "antd-style";
 import { Folder, ChevronDown as ChevronDown4, Building2 as Building24 } from "lucide-react";
-import { Fragment as Fragment22, jsx as jsx97, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx100, jsxs as jsxs72 } from "react/jsx-runtime";
 var PROJECT_NAME_MAX_LENGTH = 50;
 var useStyles17 = createStyles29(({ token, css }) => ({
   container: css`
@@ -24595,34 +25708,34 @@ var ProjectSelector = () => {
     setProject,
     createProject
   } = useWorkspaceContext();
-  const [isWorkspaceListOpen, setIsWorkspaceListOpen] = useState60(false);
-  const workspaceDropdownRef = useRef22(null);
-  const [isProjectListOpen, setIsProjectListOpen] = useState60(false);
-  const [isModalOpen, setIsModalOpen] = useState60(false);
-  const [projectName, setProjectName] = useState60("");
-  const [validationError, setValidationError] = useState60(null);
-  const [isCreating, setIsCreating] = useState60(false);
-  const projectNameInputRef = useRef22(null);
+  const [isWorkspaceListOpen, setIsWorkspaceListOpen] = useState61(false);
+  const workspaceDropdownRef = useRef23(null);
+  const [isProjectListOpen, setIsProjectListOpen] = useState61(false);
+  const [isModalOpen, setIsModalOpen] = useState61(false);
+  const [projectName, setProjectName] = useState61("");
+  const [validationError, setValidationError] = useState61(null);
+  const [isCreating, setIsCreating] = useState61(false);
+  const projectNameInputRef = useRef23(null);
   const currentProject = useMemo26(() => {
     return projects.find((p) => p.id === projectId);
   }, [projects, projectId]);
   const currentWorkspace = useMemo26(() => {
     return workspaces.find((w) => w.id === workspaceId);
   }, [workspaces, workspaceId]);
-  const handleSelectProject = useCallback26((selectedProjectId) => {
+  const handleSelectProject = useCallback29((selectedProjectId) => {
     setProject(selectedProjectId);
     setIsProjectListOpen(false);
   }, [setProject]);
-  const handleWorkspaceClick = useCallback26(() => {
+  const handleWorkspaceClick = useCallback29(() => {
     setProject(null);
   }, [setProject]);
-  const toggleProjectList = useCallback26(() => {
+  const toggleProjectList = useCallback29(() => {
     setIsProjectListOpen((prev) => !prev);
   }, []);
-  const toggleWorkspaceList = useCallback26(() => {
+  const toggleWorkspaceList = useCallback29(() => {
     setIsWorkspaceListOpen((prev) => !prev);
   }, []);
-  const validateProjectName = useCallback26((name) => {
+  const validateProjectName = useCallback29((name) => {
     const trimmed = name.trim();
     if (!trimmed) return "Project name is required";
     if (trimmed.length > PROJECT_NAME_MAX_LENGTH) {
@@ -24630,10 +25743,10 @@ var ProjectSelector = () => {
     }
     return null;
   }, []);
-  const handleOpenModal = useCallback26((e) => {
+  const handleOpenModal = useCallback29((e) => {
     e.stopPropagation();
     if (!workspaceId) {
-      message14.warning("Please select a workspace first");
+      message15.warning("Please select a workspace first");
       return;
     }
     setProjectName("");
@@ -24641,7 +25754,7 @@ var ProjectSelector = () => {
     setIsModalOpen(true);
     setTimeout(() => projectNameInputRef.current?.input?.focus(), 100);
   }, [workspaceId]);
-  const handleCloseModal = useCallback26(() => {
+  const handleCloseModal = useCallback29(() => {
     setIsModalOpen(false);
     setProjectName("");
     setValidationError(null);
@@ -24651,7 +25764,7 @@ var ProjectSelector = () => {
     setProjectName(value);
     setValidationError(validateProjectName(value));
   };
-  const handleCreateProject = useCallback26(async () => {
+  const handleCreateProject = useCallback29(async () => {
     if (!workspaceId) return;
     const trimmed = projectName.trim();
     const error = validateProjectName(trimmed);
@@ -24667,7 +25780,7 @@ var ProjectSelector = () => {
       setProjectName("");
       setValidationError(null);
       setProject(project.id);
-      message14.success(`Project "${project.name}" created`);
+      message15.success(`Project "${project.name}" created`);
     } catch (err) {
       const errMsg = err instanceof Error ? err.message : "Failed to create project";
       setValidationError(errMsg);
@@ -24683,40 +25796,40 @@ var ProjectSelector = () => {
     }
   };
   const isProjectNameValid = !validateProjectName(projectName.trim());
-  return /* @__PURE__ */ jsxs70(Fragment22, { children: [
-    /* @__PURE__ */ jsx97("div", { className: styles.container, children: /* @__PURE__ */ jsxs70("div", { className: styles.selectorWrapper, children: [
-      /* @__PURE__ */ jsx97("div", { style: { position: "relative" }, ref: workspaceDropdownRef, children: /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsxs72(Fragment22, { children: [
+    /* @__PURE__ */ jsx100("div", { className: styles.container, children: /* @__PURE__ */ jsxs72("div", { className: styles.selectorWrapper, children: [
+      /* @__PURE__ */ jsx100("div", { style: { position: "relative" }, ref: workspaceDropdownRef, children: /* @__PURE__ */ jsx100(
         "button",
         {
           className: styles.workspaceButton,
           onClick: handleWorkspaceClick,
           title: currentWorkspace?.name || "Select Workspace",
-          children: /* @__PURE__ */ jsx97("div", { className: styles.workspaceButtonIcon, children: /* @__PURE__ */ jsx97(Building24, { size: 16 }) })
+          children: /* @__PURE__ */ jsx100("div", { className: styles.workspaceButtonIcon, children: /* @__PURE__ */ jsx100(Building24, { size: 16 }) })
         }
       ) }),
-      /* @__PURE__ */ jsx97("span", { className: styles.divider, children: "/" }),
-      /* @__PURE__ */ jsxs70("div", { className: styles.projectTrigger, onClick: toggleProjectList, children: [
-        /* @__PURE__ */ jsx97("div", { className: styles.projectTriggerIcon, children: /* @__PURE__ */ jsx97(Folder, { size: 16 }) }),
-        /* @__PURE__ */ jsx97("div", { className: styles.projectTriggerInfo, children: /* @__PURE__ */ jsx97("div", { className: styles.projectTriggerName, children: currentProject?.name || "Select Project" }) }),
-        /* @__PURE__ */ jsx97("div", { className: `${styles.projectTriggerArrow} ${isProjectListOpen ? "expanded" : ""}`, children: /* @__PURE__ */ jsx97(ChevronDown4, { size: 14 }) })
+      /* @__PURE__ */ jsx100("span", { className: styles.divider, children: "/" }),
+      /* @__PURE__ */ jsxs72("div", { className: styles.projectTrigger, onClick: toggleProjectList, children: [
+        /* @__PURE__ */ jsx100("div", { className: styles.projectTriggerIcon, children: /* @__PURE__ */ jsx100(Folder, { size: 16 }) }),
+        /* @__PURE__ */ jsx100("div", { className: styles.projectTriggerInfo, children: /* @__PURE__ */ jsx100("div", { className: styles.projectTriggerName, children: currentProject?.name || "Select Project" }) }),
+        /* @__PURE__ */ jsx100("div", { className: `${styles.projectTriggerArrow} ${isProjectListOpen ? "expanded" : ""}`, children: /* @__PURE__ */ jsx100(ChevronDown4, { size: 14 }) })
       ] }),
-      isProjectListOpen && /* @__PURE__ */ jsxs70("div", { className: styles.projectDropdown, children: [
-        projects.map((project) => /* @__PURE__ */ jsxs70(
+      isProjectListOpen && /* @__PURE__ */ jsxs72("div", { className: styles.projectDropdown, children: [
+        projects.map((project) => /* @__PURE__ */ jsxs72(
           "div",
           {
             className: `${styles.projectDropdownItem} ${project.id === projectId ? "active" : ""}`,
             onClick: () => handleSelectProject(project.id),
             children: [
-              /* @__PURE__ */ jsx97("div", { className: styles.projectDropdownItemIcon, children: /* @__PURE__ */ jsx97(Folder, { size: 14 }) }),
-              /* @__PURE__ */ jsx97("div", { className: project.id === projectId ? styles.projectDropdownItemNameActive : styles.projectDropdownItemName, children: project.name })
+              /* @__PURE__ */ jsx100("div", { className: styles.projectDropdownItemIcon, children: /* @__PURE__ */ jsx100(Folder, { size: 14 }) }),
+              /* @__PURE__ */ jsx100("div", { className: project.id === projectId ? styles.projectDropdownItemNameActive : styles.projectDropdownItemName, children: project.name })
             ]
           },
           project.id
         )),
-        projects.length === 0 && /* @__PURE__ */ jsx97("div", { className: styles.emptyState, children: "No projects" })
+        projects.length === 0 && /* @__PURE__ */ jsx100("div", { className: styles.emptyState, children: "No projects" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs70(
+    /* @__PURE__ */ jsxs72(
       Modal16,
       {
         title: "Create New Project",
@@ -24728,10 +25841,10 @@ var ProjectSelector = () => {
         maskClosable: !isCreating,
         keyboard: true,
         closable: true,
-        footer: /* @__PURE__ */ jsxs70("div", { className: styles.modalFooter, children: [
-          /* @__PURE__ */ jsx97(Button44, { onClick: handleCloseModal, disabled: isCreating, children: "Cancel" }),
-          /* @__PURE__ */ jsx97(
-            Button44,
+        footer: /* @__PURE__ */ jsxs72("div", { className: styles.modalFooter, children: [
+          /* @__PURE__ */ jsx100(Button45, { onClick: handleCloseModal, disabled: isCreating, children: "Cancel" }),
+          /* @__PURE__ */ jsx100(
+            Button45,
             {
               type: "primary",
               onClick: handleCreateProject,
@@ -24742,7 +25855,7 @@ var ProjectSelector = () => {
           )
         ] }),
         children: [
-          /* @__PURE__ */ jsx97(
+          /* @__PURE__ */ jsx100(
             Input12,
             {
               ref: projectNameInputRef,
@@ -24754,7 +25867,7 @@ var ProjectSelector = () => {
               status: validationError ? "error" : void 0
             }
           ),
-          validationError && /* @__PURE__ */ jsx97("div", { style: { color: "#ff4d4f", fontSize: "12px", marginTop: "4px" }, children: validationError })
+          validationError && /* @__PURE__ */ jsx100("div", { style: { color: "#ff4d4f", fontSize: "12px", marginTop: "4px" }, children: validationError })
         ]
       }
     )
@@ -24762,13 +25875,13 @@ var ProjectSelector = () => {
 };
 
 // src/components/Chat/LatticeChat.tsx
-import { jsx as jsx98, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs73 } from "react/jsx-runtime";
 var LatticeChat = (props) => {
   const { assistant_id, thread_id = "", menu, header, ...chatingProps } = props;
   const { config } = useLatticeChatShellContext();
   const showWorkspaceSelector = config.enableWorkspace;
-  const leftTop = showWorkspaceSelector ? /* @__PURE__ */ jsx98(ProjectSelector, {}) : null;
-  return /* @__PURE__ */ jsx98(
+  const leftTop = showWorkspaceSelector ? /* @__PURE__ */ jsx101(ProjectSelector, {}) : null;
+  return /* @__PURE__ */ jsx101(
     AgentThreadProvider,
     {
       assistantId: assistant_id,
@@ -24778,7 +25891,7 @@ var LatticeChat = (props) => {
         enableReturnStateWhenStreamCompleted: true,
         enableResumeStream: true
       },
-      children: /* @__PURE__ */ jsx98(ChatUIContextProvider, { children: /* @__PURE__ */ jsxs71(
+      children: /* @__PURE__ */ jsx101(ChatUIContextProvider, { children: /* @__PURE__ */ jsxs73(
         "div",
         {
           style: {
@@ -24789,13 +25902,13 @@ var LatticeChat = (props) => {
           },
           children: [
             header,
-            /* @__PURE__ */ jsx98(
+            /* @__PURE__ */ jsx101(
               ColumnLayout,
               {
                 menu,
                 header: leftTop,
-                left: thread_id ? /* @__PURE__ */ jsx98(Chating, { ...chatingProps }) : /* @__PURE__ */ jsx98("div", { children: "Please create a conversation first" }),
-                right: /* @__PURE__ */ jsx98(SideAppViewBrowser, {})
+                left: thread_id ? /* @__PURE__ */ jsx101(Chating, { ...chatingProps }) : /* @__PURE__ */ jsx101("div", { children: "Please create a conversation first" }),
+                right: /* @__PURE__ */ jsx101(SideAppViewBrowser, {})
               }
             )
           ]
@@ -24809,7 +25922,7 @@ var LatticeChat = (props) => {
 import { Conversations } from "@ant-design/x";
 import { theme as theme14 } from "antd";
 import { useMemo as useMemo27 } from "react";
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 var AgentConversations = ({
   enableThreadCreation = true,
   enableThreadList = true
@@ -24848,7 +25961,7 @@ var AgentConversations = ({
   const creation = enableThreadCreation ? {
     onClick: newChatClick
   } : void 0;
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx102(
     Conversations,
     {
       creation,
@@ -24867,7 +25980,7 @@ var AgentConversations = ({
 import { useContext as useContext11 } from "react";
 
 // src/components/Chat/ChatSidebar.tsx
-import { useState as useState62, useMemo as useMemo29, useCallback as useCallback29 } from "react";
+import { useState as useState63, useMemo as useMemo29, useCallback as useCallback32 } from "react";
 import { Drawer as Drawer2 } from "antd";
 import {
   History,
@@ -24878,11 +25991,11 @@ import {
 } from "lucide-react";
 
 // src/components/Chat/ProjectsMenuContent.tsx
-import { useState as useState61, useEffect as useEffect38, useCallback as useCallback27, useMemo as useMemo28, useRef as useRef23 } from "react";
-import { Spin as Spin15, Modal as Modal17, Input as Input13, Button as Button45, message as message15 } from "antd";
+import { useState as useState62, useEffect as useEffect39, useCallback as useCallback30, useMemo as useMemo28, useRef as useRef24 } from "react";
+import { Spin as Spin15, Modal as Modal17, Input as Input13, Button as Button46, message as message16 } from "antd";
 import { createStyles as createStyles30 } from "antd-style";
 import { Upload } from "lucide-react";
-import { Fragment as Fragment23, jsx as jsx100, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx103, jsxs as jsxs74 } from "react/jsx-runtime";
 var PROJECT_NAME_MAX_LENGTH2 = 50;
 var useStyles18 = createStyles30(({ token, css }) => ({
   container: css`
@@ -25251,22 +26364,22 @@ var ProjectsMenuContent = () => {
     getFileViewUrl,
     uploadFileToFolder
   } = useWorkspaceContext();
-  const [folderAssets, setFolderAssets] = useState61({});
-  const [folderLoading, setFolderLoading] = useState61({});
-  const [isProjectListOpen, setIsProjectListOpen] = useState61(false);
-  const [uploadingFolder, setUploadingFolder] = useState61(null);
-  const [isModalOpen, setIsModalOpen] = useState61(false);
-  const [projectName, setProjectName] = useState61("");
-  const [validationError, setValidationError] = useState61(null);
-  const [isCreating, setIsCreating] = useState61(false);
-  const projectNameInputRef = useRef23(null);
+  const [folderAssets, setFolderAssets] = useState62({});
+  const [folderLoading, setFolderLoading] = useState62({});
+  const [isProjectListOpen, setIsProjectListOpen] = useState62(false);
+  const [uploadingFolder, setUploadingFolder] = useState62(null);
+  const [isModalOpen, setIsModalOpen] = useState62(false);
+  const [projectName, setProjectName] = useState62("");
+  const [validationError, setValidationError] = useState62(null);
+  const [isCreating, setIsCreating] = useState62(false);
+  const projectNameInputRef = useRef24(null);
   const resourceFolders = useMemo28(() => {
     return config.resourceFolders && config.resourceFolders.length > 0 ? config.resourceFolders : [{ name: "/", displayName: "Project Assets", allowUpload: true }];
   }, [config.resourceFolders]);
   const currentProject = useMemo28(() => {
     return projects.find((p) => p.id === projectId);
   }, [projects, projectId]);
-  const loadAssetsForFolder = useCallback27(async (folder) => {
+  const loadAssetsForFolder = useCallback30(async (folder) => {
     if (!workspaceId || !projectId) {
       setFolderAssets((prev) => ({ ...prev, [folder.name]: [] }));
       return;
@@ -25282,19 +26395,19 @@ var ProjectsMenuContent = () => {
       setFolderLoading((prev) => ({ ...prev, [folder.name]: false }));
     }
   }, [workspaceId, projectId, listPathByFolder]);
-  useEffect38(() => {
+  useEffect39(() => {
     resourceFolders.forEach((folder) => {
       loadAssetsForFolder(folder);
     });
   }, [workspaceId, projectId, loadAssetsForFolder, resourceFolders]);
-  const handleSelectProject = useCallback27((selectedProjectId) => {
+  const handleSelectProject = useCallback30((selectedProjectId) => {
     setProject(selectedProjectId);
     setIsProjectListOpen(false);
   }, [setProject]);
-  const toggleProjectList = useCallback27(() => {
+  const toggleProjectList = useCallback30(() => {
     setIsProjectListOpen((prev) => !prev);
   }, []);
-  const validateProjectName = useCallback27((name) => {
+  const validateProjectName = useCallback30((name) => {
     const trimmed = name.trim();
     if (!trimmed) return "Project name is required";
     if (trimmed.length > PROJECT_NAME_MAX_LENGTH2) {
@@ -25302,9 +26415,9 @@ var ProjectsMenuContent = () => {
     }
     return null;
   }, []);
-  const handleOpenModal = useCallback27(() => {
+  const handleOpenModal = useCallback30(() => {
     if (!workspaceId) {
-      message15.warning("Please select a workspace first");
+      message16.warning("Please select a workspace first");
       return;
     }
     setProjectName("");
@@ -25312,7 +26425,7 @@ var ProjectsMenuContent = () => {
     setIsModalOpen(true);
     setTimeout(() => projectNameInputRef.current?.input?.focus(), 100);
   }, [workspaceId]);
-  const handleCloseModal = useCallback27(() => {
+  const handleCloseModal = useCallback30(() => {
     setIsModalOpen(false);
     setProjectName("");
     setValidationError(null);
@@ -25322,7 +26435,7 @@ var ProjectsMenuContent = () => {
     setProjectName(value);
     setValidationError(validateProjectName(value));
   };
-  const handleCreateProject = useCallback27(async () => {
+  const handleCreateProject = useCallback30(async () => {
     if (!workspaceId) return;
     const trimmed = projectName.trim();
     const error = validateProjectName(trimmed);
@@ -25338,7 +26451,7 @@ var ProjectsMenuContent = () => {
       setProjectName("");
       setValidationError(null);
       setProject(project.id);
-      message15.success(`Project "${project.name}" created`);
+      message16.success(`Project "${project.name}" created`);
     } catch (err) {
       const errMsg = err instanceof Error ? err.message : "Failed to create project";
       setValidationError(errMsg);
@@ -25356,7 +26469,7 @@ var ProjectsMenuContent = () => {
   const isProjectNameValid = !validateProjectName(projectName.trim());
   const handleUploadClick = async (folderName) => {
     if (!workspaceId || !projectId) {
-      message15.warning("Please select a workspace and project before uploading.");
+      message16.warning("Please select a workspace and project before uploading.");
       return;
     }
     const input = document.createElement("input");
@@ -25370,14 +26483,14 @@ var ProjectsMenuContent = () => {
       setUploadingFolder(folderName);
       try {
         await uploadFileToFolder(folderName, file);
-        message15.success(`Uploaded "${file.name}" successfully`);
+        message16.success(`Uploaded "${file.name}" successfully`);
         const folder = resourceFolders.find((f) => f.name === folderName);
         if (folder) {
           await loadAssetsForFolder(folder);
         }
       } catch (error) {
         const errMsg = error instanceof Error ? error.message : "Failed to upload file";
-        message15.error(errMsg);
+        message16.error(errMsg);
       } finally {
         setUploadingFolder(null);
         input.remove();
@@ -25388,7 +26501,7 @@ var ProjectsMenuContent = () => {
   const handleAssetClick = (asset) => {
     const fileUrl = getFileViewUrl(asset.path);
     if (!fileUrl) {
-      message15.warning("Please select a workspace and project first.");
+      message16.warning("Please select a workspace and project first.");
       return;
     }
     openSideApp({
@@ -25411,13 +26524,13 @@ var ProjectsMenuContent = () => {
     const parts = path.split(/[/\\]/);
     return parts[parts.length - 1];
   };
-  return /* @__PURE__ */ jsxs72("div", { className: styles.container, children: [
+  return /* @__PURE__ */ jsxs74("div", { className: styles.container, children: [
     resourceFolders.map((folder) => {
       const assets = folderAssets[folder.name] || [];
       const isLoading = folderLoading[folder.name] || false;
-      return /* @__PURE__ */ jsxs72("div", { className: styles.section, children: [
-        /* @__PURE__ */ jsxs72("div", { className: styles.sectionHeader, children: [
-          /* @__PURE__ */ jsx100(
+      return /* @__PURE__ */ jsxs74("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsxs74("div", { className: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsx103(
             "span",
             {
               className: styles.sectionTitle,
@@ -25426,46 +26539,46 @@ var ProjectsMenuContent = () => {
               children: folder.displayName || folder.name
             }
           ),
-          /* @__PURE__ */ jsx100("span", { className: styles.badge, children: assets.length })
+          /* @__PURE__ */ jsx103("span", { className: styles.badge, children: assets.length })
         ] }),
-        isLoading ? /* @__PURE__ */ jsx100("div", { className: styles.loading, children: /* @__PURE__ */ jsx100(Spin15, { size: "small" }) }) : /* @__PURE__ */ jsxs72("div", { className: styles.assetList, children: [
-          assets.map((asset) => /* @__PURE__ */ jsxs72(
+        isLoading ? /* @__PURE__ */ jsx103("div", { className: styles.loading, children: /* @__PURE__ */ jsx103(Spin15, { size: "small" }) }) : /* @__PURE__ */ jsxs74("div", { className: styles.assetList, children: [
+          assets.map((asset) => /* @__PURE__ */ jsxs74(
             "div",
             {
               className: styles.assetItem,
               onClick: () => handleAssetClick(asset),
               title: getFileName(asset.name || asset.path),
               children: [
-                /* @__PURE__ */ jsx100("div", { className: styles.assetIcon, children: getFileIcon2(getFileName(asset.name || asset.path)) }),
-                /* @__PURE__ */ jsxs72("div", { className: styles.assetInfo, children: [
-                  /* @__PURE__ */ jsx100("div", { className: styles.assetName, children: getFileName(asset.name || asset.path) }),
-                  /* @__PURE__ */ jsx100("div", { className: styles.assetMeta, children: formatDate5(asset.modified_at) })
+                /* @__PURE__ */ jsx103("div", { className: styles.assetIcon, children: getFileIcon2(getFileName(asset.name || asset.path)) }),
+                /* @__PURE__ */ jsxs74("div", { className: styles.assetInfo, children: [
+                  /* @__PURE__ */ jsx103("div", { className: styles.assetName, children: getFileName(asset.name || asset.path) }),
+                  /* @__PURE__ */ jsx103("div", { className: styles.assetMeta, children: formatDate5(asset.modified_at) })
                 ] })
               ]
             },
             asset.path
           )),
-          assets.length === 0 && /* @__PURE__ */ jsx100("div", { className: styles.emptyState, children: "No files in this folder" }),
-          folder.allowUpload && /* @__PURE__ */ jsx100(
+          assets.length === 0 && /* @__PURE__ */ jsx103("div", { className: styles.emptyState, children: "No files in this folder" }),
+          folder.allowUpload && /* @__PURE__ */ jsx103(
             "button",
             {
               type: "button",
               className: styles.uploadBtn,
               onClick: () => handleUploadClick(folder.name),
               disabled: !workspaceId || !projectId || uploadingFolder === folder.name,
-              children: uploadingFolder === folder.name ? /* @__PURE__ */ jsxs72(Fragment23, { children: [
-                /* @__PURE__ */ jsx100(Spin15, { size: "small" }),
-                /* @__PURE__ */ jsx100("span", { children: "Uploading..." })
-              ] }) : /* @__PURE__ */ jsxs72(Fragment23, { children: [
-                /* @__PURE__ */ jsx100(Upload, { size: 14 }),
-                /* @__PURE__ */ jsx100("span", { children: "Upload" })
+              children: uploadingFolder === folder.name ? /* @__PURE__ */ jsxs74(Fragment23, { children: [
+                /* @__PURE__ */ jsx103(Spin15, { size: "small" }),
+                /* @__PURE__ */ jsx103("span", { children: "Uploading..." })
+              ] }) : /* @__PURE__ */ jsxs74(Fragment23, { children: [
+                /* @__PURE__ */ jsx103(Upload, { size: 14 }),
+                /* @__PURE__ */ jsx103("span", { children: "Upload" })
               ] })
             }
           )
         ] })
       ] }, folder.name);
     }),
-    /* @__PURE__ */ jsxs72(
+    /* @__PURE__ */ jsxs74(
       Modal17,
       {
         title: "Create New Project",
@@ -25477,10 +26590,10 @@ var ProjectsMenuContent = () => {
         maskClosable: !isCreating,
         keyboard: true,
         closable: true,
-        footer: /* @__PURE__ */ jsxs72("div", { className: styles.modalFooter, children: [
-          /* @__PURE__ */ jsx100(Button45, { onClick: handleCloseModal, disabled: isCreating, children: "Cancel" }),
-          /* @__PURE__ */ jsx100(
-            Button45,
+        footer: /* @__PURE__ */ jsxs74("div", { className: styles.modalFooter, children: [
+          /* @__PURE__ */ jsx103(Button46, { onClick: handleCloseModal, disabled: isCreating, children: "Cancel" }),
+          /* @__PURE__ */ jsx103(
+            Button46,
             {
               type: "primary",
               onClick: handleCreateProject,
@@ -25491,8 +26604,8 @@ var ProjectsMenuContent = () => {
           )
         ] }),
         children: [
-          /* @__PURE__ */ jsx100("label", { className: styles.formLabel, htmlFor: "project-name", children: "Project Name" }),
-          /* @__PURE__ */ jsx100(
+          /* @__PURE__ */ jsx103("label", { className: styles.formLabel, htmlFor: "project-name", children: "Project Name" }),
+          /* @__PURE__ */ jsx103(
             Input13,
             {
               id: "project-name",
@@ -25507,7 +26620,7 @@ var ProjectsMenuContent = () => {
               disabled: isCreating
             }
           ),
-          validationError && /* @__PURE__ */ jsx100("div", { className: styles.formError, role: "alert", children: validationError })
+          validationError && /* @__PURE__ */ jsx103("div", { className: styles.formError, role: "alert", children: validationError })
         ]
       }
     )
@@ -25515,11 +26628,11 @@ var ProjectsMenuContent = () => {
 };
 
 // src/components/Chat/ThreadHistoryMenuContent.tsx
-import React54, { useCallback as useCallback28 } from "react";
+import React57, { useCallback as useCallback31 } from "react";
 import { createStyles as createStyles31 } from "antd-style";
 import { MessageSquare as MessageSquare2, Trash2 as Trash24 } from "lucide-react";
-import { message as message16, Modal as Modal18 } from "antd";
-import { jsx as jsx101, jsxs as jsxs73 } from "react/jsx-runtime";
+import { message as message17, Modal as Modal18 } from "antd";
+import { jsx as jsx104, jsxs as jsxs75 } from "react/jsx-runtime";
 var useStyles19 = createStyles31(({ token, css }) => ({
   container: css`
     padding: 4px;
@@ -25629,7 +26742,7 @@ var ThreadHistoryMenuContent = () => {
     deleteThread,
     isLoading
   } = useConversationContext();
-  const handleDeleteThread = useCallback28(
+  const handleDeleteThread = useCallback31(
     async (e, threadIdToDelete) => {
       e.stopPropagation();
       Modal18.confirm({
@@ -25641,16 +26754,16 @@ var ThreadHistoryMenuContent = () => {
         onOk: async () => {
           try {
             await deleteThread(threadIdToDelete);
-            message16.success("Conversation deleted");
+            message17.success("Conversation deleted");
           } catch (error) {
-            message16.error("Failed to delete conversation");
+            message17.error("Failed to delete conversation");
           }
         }
       });
     },
     [deleteThread]
   );
-  const sortedThreads = React54.useMemo(() => {
+  const sortedThreads = React57.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
       const dateB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
@@ -25658,30 +26771,30 @@ var ThreadHistoryMenuContent = () => {
     });
   }, [threads]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx101("div", { className: styles.container, children: /* @__PURE__ */ jsx101("div", { className: styles.loading, children: "Loading conversations..." }) });
+    return /* @__PURE__ */ jsx104("div", { className: styles.container, children: /* @__PURE__ */ jsx104("div", { className: styles.loading, children: "Loading conversations..." }) });
   }
-  return /* @__PURE__ */ jsx101("div", { className: styles.container, children: sortedThreads.length === 0 ? /* @__PURE__ */ jsx101("div", { className: styles.emptyState, children: "No conversations yet" }) : /* @__PURE__ */ jsx101("div", { className: styles.threadList, children: sortedThreads.map((thread) => /* @__PURE__ */ jsxs73(
+  return /* @__PURE__ */ jsx104("div", { className: styles.container, children: sortedThreads.length === 0 ? /* @__PURE__ */ jsx104("div", { className: styles.emptyState, children: "No conversations yet" }) : /* @__PURE__ */ jsx104("div", { className: styles.threadList, children: sortedThreads.map((thread) => /* @__PURE__ */ jsxs75(
     "div",
     {
       className: `${styles.threadItem} ${thread.id === threadId ? "active" : ""}`,
       onClick: () => selectThread(thread.id),
       title: thread.label,
       children: [
-        /* @__PURE__ */ jsx101("div", { className: styles.threadIcon, children: /* @__PURE__ */ jsx101(MessageSquare2, { size: 14 }) }),
-        /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsx104("div", { className: styles.threadIcon, children: /* @__PURE__ */ jsx104(MessageSquare2, { size: 14 }) }),
+        /* @__PURE__ */ jsx104(
           "div",
           {
             className: thread.id === threadId ? styles.threadNameActive : styles.threadName,
             children: thread.label
           }
         ),
-        /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             className: styles.deleteBtn,
             onClick: (e) => handleDeleteThread(e, thread.id),
             title: "Delete conversation",
-            children: /* @__PURE__ */ jsx101(Trash24, { size: 12 })
+            children: /* @__PURE__ */ jsx104(Trash24, { size: 12 })
           }
         )
       ]
@@ -25691,7 +26804,7 @@ var ThreadHistoryMenuContent = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
-import { Fragment as Fragment24, jsx as jsx102, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx105, jsxs as jsxs76 } from "react/jsx-runtime";
 var DRAWER_STYLES2 = {
   wrapper: {
     background: "transparent",
@@ -25717,7 +26830,7 @@ var DEFAULT_MENU_ITEMS = [
     builtin: "new-analysis",
     type: "action",
     name: "New Analysis",
-    icon: /* @__PURE__ */ jsx102(PlusCircle, { size: 20 }),
+    icon: /* @__PURE__ */ jsx105(PlusCircle, { size: 20 }),
     order: 0
   },
   // Second: Thread History (inline drawer)
@@ -25726,13 +26839,13 @@ var DEFAULT_MENU_ITEMS = [
     builtin: "thread-history",
     type: "drawer",
     name: "History",
-    icon: /* @__PURE__ */ jsx102(History, { size: 20 }),
+    icon: /* @__PURE__ */ jsx105(History, { size: 20 }),
     order: 1,
     title: "Conversation History",
     width: 320,
     inline: true,
     inlineDefaultExpanded: false,
-    content: /* @__PURE__ */ jsx102(ThreadHistoryMenuContent, {})
+    content: /* @__PURE__ */ jsx105(ThreadHistoryMenuContent, {})
   },
   // Third: Projects (inline drawer)
   {
@@ -25740,13 +26853,13 @@ var DEFAULT_MENU_ITEMS = [
     builtin: "projects",
     type: "drawer",
     name: "Project Files",
-    icon: /* @__PURE__ */ jsx102(FolderOpen4, {}),
+    icon: /* @__PURE__ */ jsx105(FolderOpen4, {}),
     order: 2,
     title: "Project Files",
     width: 320,
     inline: true,
     inlineDefaultExpanded: true,
-    content: /* @__PURE__ */ jsx102(ProjectsMenuContent, {})
+    content: /* @__PURE__ */ jsx105(ProjectsMenuContent, {})
   },
   // Logout action
   {
@@ -25754,7 +26867,7 @@ var DEFAULT_MENU_ITEMS = [
     builtin: "logout",
     type: "action",
     name: "Logout",
-    icon: /* @__PURE__ */ jsx102(LogOut4, { size: 20 }),
+    icon: /* @__PURE__ */ jsx105(LogOut4, { size: 20 }),
     order: 1e3,
     group: "Account"
   }
@@ -25768,7 +26881,7 @@ var ChatSidebar = ({
   const { sideAppVisible, menuCollapsed, setMenuCollapsed } = useChatUIContext();
   const { logout } = useAuth();
   const { createThread } = useConversationContext();
-  const [drawerStates, setDrawerStates] = useState62({});
+  const [drawerStates, setDrawerStates] = useState63({});
   const {
     sidebarMode,
     sidebarShowToggle,
@@ -25784,7 +26897,7 @@ var ChatSidebar = ({
     }
     return items.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
   }, [customMenuItems]);
-  const handleMenuClick = useCallback29(async (item) => {
+  const handleMenuClick = useCallback32(async (item) => {
     if (item.builtin === "settings") {
       setSettingsModalOpen(true);
       onSettingsClick?.();
@@ -25809,28 +26922,28 @@ var ChatSidebar = ({
       }
     }
   }, [onSettingsClick, setSettingsModalOpen, createThread, logout]);
-  const handleCloseDrawer = useCallback29((itemId) => {
+  const handleCloseDrawer = useCallback32((itemId) => {
     setDrawerStates((prev) => ({ ...prev, [itemId]: false }));
   }, []);
-  const handleNewAnalysis = useCallback29(async () => {
+  const handleNewAnalysis = useCallback32(async () => {
     try {
       await createThread("New Analysis");
     } catch (error) {
       console.error("Failed to create new thread:", error);
     }
   }, [createThread]);
-  const renderDrawerContent = useCallback29((item) => {
+  const renderDrawerContent = useCallback32((item) => {
     switch (item.builtin) {
       case "projects":
-        return /* @__PURE__ */ jsx102(ProjectsMenuContent, {});
+        return /* @__PURE__ */ jsx105(ProjectsMenuContent, {});
       case "thread-history":
-        return /* @__PURE__ */ jsx102(ThreadHistoryMenuContent, {});
+        return /* @__PURE__ */ jsx105(ThreadHistoryMenuContent, {});
       default:
         return item.content;
     }
   }, []);
-  return /* @__PURE__ */ jsxs74(Fragment24, { children: [
-    /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsxs76(Fragment24, { children: [
+    /* @__PURE__ */ jsx105(
       Menu,
       {
         items: menuItems,
@@ -25846,12 +26959,12 @@ var ChatSidebar = ({
         onCollapsedChange: setMenuCollapsed
       }
     ),
-    menuItems.filter((item) => item.type === "drawer" && !item.inline).map((item) => /* @__PURE__ */ jsx102(
+    menuItems.filter((item) => item.type === "drawer" && !item.inline).map((item) => /* @__PURE__ */ jsx105(
       Drawer2,
       {
-        title: /* @__PURE__ */ jsxs74("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
-          /* @__PURE__ */ jsx102("span", { style: { fontSize: 16, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.5 }, children: item.title || item.name }),
-          /* @__PURE__ */ jsx102(
+        title: /* @__PURE__ */ jsxs76("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+          /* @__PURE__ */ jsx105("span", { style: { fontSize: 16, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.5 }, children: item.title || item.name }),
+          /* @__PURE__ */ jsx105(
             "button",
             {
               onClick: () => handleCloseDrawer(item.id),
@@ -25866,7 +26979,7 @@ var ChatSidebar = ({
                 background: "rgba(255, 255, 255, 0.5)",
                 cursor: "pointer"
               },
-              children: /* @__PURE__ */ jsx102(PanelLeftClose2, { size: 24 })
+              children: /* @__PURE__ */ jsx105(PanelLeftClose2, { size: 24 })
             }
           )
         ] }),
@@ -25897,7 +27010,7 @@ var ChatSidebar = ({
 };
 
 // src/components/Chat/LatticeChatView.tsx
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
 var LatticeChatView = (props) => {
   const shellContext = useContext11(LatticeChatShellContext);
   const { showSideMenu, sideMenuItems } = shellContext.config;
@@ -25906,7 +27019,7 @@ var LatticeChatView = (props) => {
   const {
     config: { baseURL }
   } = useLatticeChatShellContext();
-  return assistantId && thread ? /* @__PURE__ */ jsx103(
+  return assistantId && thread ? /* @__PURE__ */ jsx106(
     AxiomLatticeProvider,
     {
       config: {
@@ -25915,14 +27028,14 @@ var LatticeChatView = (props) => {
         assistantId,
         transport: "sse"
       },
-      children: /* @__PURE__ */ jsx103(
+      children: /* @__PURE__ */ jsx106(
         LatticeChat,
         {
           thread_id: thread?.id,
           assistant_id: assistantId,
           name: currentAssistant?.name,
           description: currentAssistant?.description,
-          menu: showSideMenu ? /* @__PURE__ */ jsx103(ChatSidebar, { customMenuItems: sideMenuItems }) : void 0
+          menu: showSideMenu ? /* @__PURE__ */ jsx106(ChatSidebar, { customMenuItems: sideMenuItems }) : void 0
         }
       )
     }
@@ -25930,18 +27043,18 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-import { useState as useState63, useEffect as useEffect39, useRef as useRef24 } from "react";
+import { useState as useState64, useEffect as useEffect40, useRef as useRef25 } from "react";
 import {
   Modal as Modal19,
   Input as Input14,
-  Button as Button46,
-  message as message17,
+  Button as Button47,
+  message as message18,
   notification as notification5,
-  Typography as Typography46,
+  Typography as Typography47,
   Alert as Alert8,
   Select as Select6,
   Switch as Switch3,
-  Space as Space35,
+  Space as Space36,
   Tabs as Tabs3
 } from "antd";
 import {
@@ -25957,8 +27070,8 @@ import {
   CloudServerOutlined
 } from "@ant-design/icons";
 import { createStyles as createStyles32 } from "antd-style";
-import { Fragment as Fragment25, jsx as jsx104, jsxs as jsxs75 } from "react/jsx-runtime";
-var { Text: Text37, Title: Title13 } = Typography46;
+import { Fragment as Fragment25, jsx as jsx107, jsxs as jsxs77 } from "react/jsx-runtime";
+var { Text: Text37, Title: Title13 } = Typography47;
 var { TextArea: TextArea8 } = Input14;
 var useStyles20 = createStyles32(({ token, css }) => ({
   //   settingsModal: css`
@@ -26305,12 +27418,12 @@ var SETTINGS_MENU_ITEMS = [
   {
     key: "environment",
     label: "Environment Variables",
-    icon: /* @__PURE__ */ jsx104(EnvironmentOutlined, {})
+    icon: /* @__PURE__ */ jsx107(EnvironmentOutlined, {})
   },
   {
     key: "models",
     label: "Model Configuration",
-    icon: /* @__PURE__ */ jsx104(ApiOutlined, {})
+    icon: /* @__PURE__ */ jsx107(ApiOutlined, {})
   }
 ];
 var SettingsModal = ({
@@ -26319,7 +27432,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles20();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = useState63(() => {
+  const [connections, setConnections] = useState64(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -26342,21 +27455,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = useState63({});
-  const connectionsRef = useRef24(connections);
-  useEffect39(() => {
+  const [serverConfigs, setServerConfigs] = useState64({});
+  const connectionsRef = useRef25(connections);
+  useEffect40(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = useState63(
+  const [activeTabKey, setActiveTabKey] = useState64(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = useState63("environment");
-  const [loading, setLoading] = useState63(false);
-  const [showAddServerModal, setShowAddServerModal] = useState63(false);
-  const [newServerUrl, setNewServerUrl] = useState63("");
-  const [newServerName, setNewServerName] = useState63("");
-  const [newServerApiKey, setNewServerApiKey] = useState63("");
-  const [addingServer, setAddingServer] = useState63(false);
+  const [activeMenu, setActiveMenu] = useState64("environment");
+  const [loading, setLoading] = useState64(false);
+  const [showAddServerModal, setShowAddServerModal] = useState64(false);
+  const [newServerUrl, setNewServerUrl] = useState64("");
+  const [newServerName, setNewServerName] = useState64("");
+  const [newServerApiKey, setNewServerApiKey] = useState64("");
+  const [addingServer, setAddingServer] = useState64(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {
@@ -26495,7 +27608,7 @@ var SettingsModal = ({
       }
     } catch (error) {
       console.error("Failed to load configuration:", error);
-      message17.error("Failed to load current configuration");
+      message18.error("Failed to load current configuration");
     }
   };
   const loadModelsConfig = async (serverId) => {
@@ -26546,7 +27659,7 @@ var SettingsModal = ({
       console.error("Failed to load models configuration:", error);
     }
   };
-  useEffect39(() => {
+  useEffect40(() => {
     if (open && activeTabKey) {
       initializeServerConfig(activeTabKey);
       const connection = connections.find((c) => c.id === activeTabKey);
@@ -26555,7 +27668,7 @@ var SettingsModal = ({
       }
     }
   }, [open, activeTabKey]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (open && activeTabKey) {
       const connection = connections.find((c) => c.id === activeTabKey);
       if (connection?.connected) {
@@ -26569,7 +27682,7 @@ var SettingsModal = ({
   }, [open, activeTabKey, activeMenu]);
   const handleAddServer = async () => {
     if (!newServerUrl.trim()) {
-      message17.error("Please enter a server URL");
+      message18.error("Please enter a server URL");
       return;
     }
     let normalizedUrl = newServerUrl.trim();
@@ -26632,12 +27745,12 @@ var SettingsModal = ({
   const handleSave = async () => {
     const connection = connections.find((c) => c.id === activeTabKey);
     if (!connection || !connection.connected) {
-      message17.error("Please connect to a server first");
+      message18.error("Please connect to a server first");
       return;
     }
     const url = connection.url;
     if (!url) {
-      message17.error("Please connect to a server first");
+      message18.error("Please connect to a server first");
       return;
     }
     try {
@@ -26701,7 +27814,7 @@ var SettingsModal = ({
         const data = await response.json();
         if (response.ok && data.success) {
           if (data.requiresRestart && data.requiresRestart.length > 0) {
-            message17.warning(
+            message18.warning(
               `Configuration saved. Please restart the server for ${data.requiresRestart.join(
                 ", "
               )} to take effect.`,
@@ -26715,12 +27828,12 @@ var SettingsModal = ({
           }
           if (data.warnings && data.warnings.length > 0) {
             data.warnings.forEach((warning) => {
-              message17.warning(warning, 5);
+              message18.warning(warning, 5);
             });
           }
           onClose();
         } else {
-          message17.error(data.error || "Failed to save configuration");
+          message18.error(data.error || "Failed to save configuration");
         }
       } else if (activeMenu === "models") {
         const validModels = config.models.filter(
@@ -26745,12 +27858,12 @@ var SettingsModal = ({
           });
           onClose();
         } else {
-          message17.error(data.error || "Failed to save model configuration");
+          message18.error(data.error || "Failed to save model configuration");
         }
       }
     } catch (error) {
       console.error("Failed to save configuration:", error);
-      message17.error(error.message || "Failed to save configuration");
+      message18.error(error.message || "Failed to save configuration");
     } finally {
       setLoading(false);
     }
@@ -26766,25 +27879,25 @@ var SettingsModal = ({
         }
       }));
     };
-    return /* @__PURE__ */ jsxs75("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx104(
+    return /* @__PURE__ */ jsxs77("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx107(
         Alert8,
         {
           message: "Configuration Effect",
-          description: /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsxs75("div", { style: { marginBottom: 8 }, children: [
-              /* @__PURE__ */ jsx104(
+          description: /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsxs77("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsx107(
                 CheckCircleOutlined8,
                 {
                   style: { color: "#52c41a", marginRight: 8 }
                 }
               ),
-              /* @__PURE__ */ jsx104("strong", { children: "Immediately effective:" }),
+              /* @__PURE__ */ jsx107("strong", { children: "Immediately effective:" }),
               " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
             ] }),
-            /* @__PURE__ */ jsxs75("div", { children: [
-              /* @__PURE__ */ jsx104(ReloadOutlined4, { style: { color: "#faad14", marginRight: 8 } }),
-              /* @__PURE__ */ jsx104("strong", { children: "Requires restart:" }),
+            /* @__PURE__ */ jsxs77("div", { children: [
+              /* @__PURE__ */ jsx107(ReloadOutlined4, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ jsx107("strong", { children: "Requires restart:" }),
               " PORT (server must be restarted to change port)"
             ] })
           ] }),
@@ -26793,8 +27906,8 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ jsx104("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx104(Text37, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure environment variables in .env format (key=value). One variable per line. Leave password fields empty to keep current values." }) }),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx107("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx107(Text37, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure environment variables in .env format (key=value). One variable per line. Leave password fields empty to keep current values." }) }),
+      /* @__PURE__ */ jsx107(
         TextArea8,
         {
           value: config.envText,
@@ -26871,10 +27984,10 @@ QUEUE_NAME=tasks`,
         }));
       }
     };
-    return /* @__PURE__ */ jsxs75("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx104("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx104(Text37, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure model lattices. Each model will be registered with the provided key and can be used by agents." }) }),
-      config.models.map((model, index) => /* @__PURE__ */ jsxs75("div", { className: styles.card, children: [
-        /* @__PURE__ */ jsxs75(
+    return /* @__PURE__ */ jsxs77("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx107("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx107(Text37, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure model lattices. Each model will be registered with the provided key and can be used by agents." }) }),
+      config.models.map((model, index) => /* @__PURE__ */ jsxs77("div", { className: styles.card, children: [
+        /* @__PURE__ */ jsxs77(
           "div",
           {
             style: {
@@ -26886,12 +27999,12 @@ QUEUE_NAME=tasks`,
               borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
             },
             children: [
-              /* @__PURE__ */ jsxs75("div", { children: [
-                /* @__PURE__ */ jsxs75(Text37, { strong: true, style: { fontSize: 16 }, children: [
+              /* @__PURE__ */ jsxs77("div", { children: [
+                /* @__PURE__ */ jsxs77(Text37, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
-                model.key && /* @__PURE__ */ jsxs75(
+                model.key && /* @__PURE__ */ jsxs77(
                   Text37,
                   {
                     type: "secondary",
@@ -26904,8 +28017,8 @@ QUEUE_NAME=tasks`,
                   }
                 )
               ] }),
-              config.models.length > 1 && /* @__PURE__ */ jsx104(
-                Button46,
+              config.models.length > 1 && /* @__PURE__ */ jsx107(
+                Button47,
                 {
                   type: "text",
                   danger: true,
@@ -26921,10 +28034,10 @@ QUEUE_NAME=tasks`,
             ]
           }
         ),
-        /* @__PURE__ */ jsxs75(Space35, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx104(Text37, { className: styles.formLabel, children: "Key *" }),
-            /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsxs77(Space36, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx107(Text37, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ jsx107(
               Input14,
               {
                 placeholder: "e.g., default, gpt-4, claude",
@@ -26933,11 +28046,11 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx104(Text37, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ jsx107(Text37, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
-          /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx104(Text37, { className: styles.formLabel, children: "Provider *" }),
-            /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx107(Text37, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ jsx107(
               Select6,
               {
                 style: { width: "100%", height: 40 },
@@ -26953,9 +28066,9 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx104(Text37, { className: styles.formLabel, children: "Model Name *" }),
-            /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx107(Text37, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ jsx107(
               Input14,
               {
                 placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
@@ -26965,9 +28078,9 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx104(Text37, { className: styles.formLabel, children: "API Key" }),
-            /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx107(Text37, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ jsx107(
               Input14.Password,
               {
                 placeholder: "Enter your API key",
@@ -26976,11 +28089,11 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx104(Text37, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ jsx107(Text37, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
-          /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx104(Text37, { className: styles.formLabel, children: "Base URL" }),
-            /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx107(Text37, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ jsx107(
               Input14,
               {
                 placeholder: "e.g., https://api.openai.com/v1",
@@ -26989,22 +28102,22 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx104(Text37, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ jsx107(Text37, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
-          /* @__PURE__ */ jsx104("div", { children: /* @__PURE__ */ jsxs75(Space35, { children: [
-            /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsx107("div", { children: /* @__PURE__ */ jsxs77(Space36, { children: [
+            /* @__PURE__ */ jsx107(
               Switch3,
               {
                 checked: model.streaming,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ jsx104(Text37, { children: "Enable Streaming" })
+            /* @__PURE__ */ jsx107(Text37, { children: "Enable Streaming" })
           ] }) }),
-          /* @__PURE__ */ jsxs75("div", { style: { display: "flex", gap: 20 }, children: [
-            /* @__PURE__ */ jsxs75("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx104(Text37, { className: styles.formLabel, children: "Max Tokens" }),
-              /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsxs77("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ jsxs77("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx107(Text37, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ jsx107(
                 Input14,
                 {
                   type: "number",
@@ -27019,9 +28132,9 @@ QUEUE_NAME=tasks`,
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs75("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx104(Text37, { className: styles.formLabel, children: "Temperature" }),
-              /* @__PURE__ */ jsx104(
+            /* @__PURE__ */ jsxs77("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx107(Text37, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ jsx107(
                 Input14,
                 {
                   type: "number",
@@ -27040,8 +28153,8 @@ QUEUE_NAME=tasks`,
           ] })
         ] })
       ] }, index)),
-      /* @__PURE__ */ jsx104(
-        Button46,
+      /* @__PURE__ */ jsx107(
+        Button47,
         {
           type: "dashed",
           onClick: handleAddModel,
@@ -27068,8 +28181,8 @@ QUEUE_NAME=tasks`,
   );
   const currentConnection = connections.find((c) => c.id === activeTabKey);
   const renderTabLabel = (connection) => {
-    return /* @__PURE__ */ jsxs75("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx104(
+    return /* @__PURE__ */ jsxs77("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx107(
         CloudServerOutlined,
         {
           style: {
@@ -27078,14 +28191,14 @@ QUEUE_NAME=tasks`,
           }
         }
       ),
-      /* @__PURE__ */ jsx104("span", { children: connection.name }),
-      connection.connected && /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx107("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ jsx107(
         CheckCircleFilled,
         {
           style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
         }
       ),
-      connection.error && !connection.connecting && /* @__PURE__ */ jsx104(
+      connection.error && !connection.connecting && /* @__PURE__ */ jsx107(
         CloseCircleFilled,
         {
           style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
@@ -27096,35 +28209,35 @@ QUEUE_NAME=tasks`,
   const tabItems = connections.map((connection) => ({
     key: connection.id,
     label: renderTabLabel(connection),
-    children: /* @__PURE__ */ jsx104("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx104(Fragment25, { children: /* @__PURE__ */ jsxs75("div", { style: { display: "flex", height: "100%" }, children: [
-      /* @__PURE__ */ jsx104("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs75(
+    children: /* @__PURE__ */ jsx107("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx107(Fragment25, { children: /* @__PURE__ */ jsxs77("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ jsx107("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs77(
         "div",
         {
           className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
           onClick: () => setActiveMenu(item.key),
           children: [
-            /* @__PURE__ */ jsx104("span", { className: styles.menuItemIcon, children: item.icon }),
-            /* @__PURE__ */ jsx104("span", { className: styles.menuItemText, children: item.label })
+            /* @__PURE__ */ jsx107("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ jsx107("span", { className: styles.menuItemText, children: item.label })
           ]
         },
         item.key
       )) }),
-      /* @__PURE__ */ jsxs75("div", { className: styles.content, children: [
-        /* @__PURE__ */ jsxs75("div", { className: styles.contentHeader, children: [
-          /* @__PURE__ */ jsxs75("div", { className: styles.contentHeaderLeft, children: [
-            /* @__PURE__ */ jsx104(Title13, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ jsxs75(Text37, { className: styles.contentDescription, children: [
+      /* @__PURE__ */ jsxs77("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs77("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ jsxs77("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ jsx107(Title13, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ jsxs77(Text37, { className: styles.contentDescription, children: [
               activeMenu === "environment" && "Manage environment variables for the gateway server",
               activeMenu === "models" && "Configure and register model lattices for use by agents"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs75("div", { className: styles.contentHeaderRight, children: [
-            /* @__PURE__ */ jsx104(Button46, { onClick: onClose, children: "Cancel" }),
-            /* @__PURE__ */ jsx104(
-              Button46,
+          /* @__PURE__ */ jsxs77("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ jsx107(Button47, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx107(
+              Button47,
               {
                 type: "primary",
-                icon: /* @__PURE__ */ jsx104(SaveOutlined2, {}),
+                icon: /* @__PURE__ */ jsx107(SaveOutlined2, {}),
                 onClick: handleSave,
                 loading,
                 children: "Save Configuration"
@@ -27132,9 +28245,9 @@ QUEUE_NAME=tasks`,
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx104("div", { className: styles.contentBody, children: renderContent(connection.id) })
+        /* @__PURE__ */ jsx107("div", { className: styles.contentBody, children: renderContent(connection.id) })
       ] })
-    ] }) }) : /* @__PURE__ */ jsx104(
+    ] }) }) : /* @__PURE__ */ jsx107(
       "div",
       {
         style: {
@@ -27146,17 +28259,17 @@ QUEUE_NAME=tasks`,
           gap: 16,
           padding: 48
         },
-        children: connection.connecting ? /* @__PURE__ */ jsxs75(Fragment25, { children: [
-          /* @__PURE__ */ jsx104(LinkOutlined2, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
-          /* @__PURE__ */ jsx104(Title13, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ jsxs75(Text37, { type: "secondary", style: { textAlign: "center" }, children: [
+        children: connection.connecting ? /* @__PURE__ */ jsxs77(Fragment25, { children: [
+          /* @__PURE__ */ jsx107(LinkOutlined2, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ jsx107(Title13, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ jsxs77(Text37, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
-        ] }) : /* @__PURE__ */ jsxs75(Fragment25, { children: [
-          /* @__PURE__ */ jsx104(LinkOutlined2, { style: { fontSize: 64, color: "#d9d9d9" } }),
-          /* @__PURE__ */ jsx104(Title13, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
-          /* @__PURE__ */ jsx104(
+        ] }) : /* @__PURE__ */ jsxs77(Fragment25, { children: [
+          /* @__PURE__ */ jsx107(LinkOutlined2, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ jsx107(Title13, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ jsx107(
             Text37,
             {
               type: "secondary",
@@ -27164,11 +28277,11 @@ QUEUE_NAME=tasks`,
               children: connection.error ? `Failed to connect to ${connection.url}. Please check the server URL and try again.` : `Click "Reconnect" to connect to ${connection.url}`
             }
           ),
-          /* @__PURE__ */ jsx104(
-            Button46,
+          /* @__PURE__ */ jsx107(
+            Button47,
             {
               type: "primary",
-              icon: /* @__PURE__ */ jsx104(LinkOutlined2, {}),
+              icon: /* @__PURE__ */ jsx107(LinkOutlined2, {}),
               onClick: () => checkConnection(connection.id),
               loading: connection.connecting,
               style: { marginTop: 16 },
@@ -27180,8 +28293,8 @@ QUEUE_NAME=tasks`,
     ) }),
     closable: connections.length > 1
   }));
-  return /* @__PURE__ */ jsxs75(Fragment25, { children: [
-    /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsxs77(Fragment25, { children: [
+    /* @__PURE__ */ jsx107(
       Modal19,
       {
         open,
@@ -27190,7 +28303,7 @@ QUEUE_NAME=tasks`,
         width: "80%",
         footer: null,
         title: "Settings",
-        children: /* @__PURE__ */ jsx104("div", { children: /* @__PURE__ */ jsx104(
+        children: /* @__PURE__ */ jsx107("div", { children: /* @__PURE__ */ jsx107(
           Tabs3,
           {
             activeKey: activeTabKey,
@@ -27204,7 +28317,7 @@ QUEUE_NAME=tasks`,
               }
             },
             items: tabItems,
-            addIcon: /* @__PURE__ */ jsxs75(
+            addIcon: /* @__PURE__ */ jsxs77(
               "div",
               {
                 style: {
@@ -27214,8 +28327,8 @@ QUEUE_NAME=tasks`,
                   padding: "4px 8px"
                 },
                 children: [
-                  /* @__PURE__ */ jsx104(PlusOutlined7, {}),
-                  /* @__PURE__ */ jsx104("span", { children: "Add Server" })
+                  /* @__PURE__ */ jsx107(PlusOutlined7, {}),
+                  /* @__PURE__ */ jsx107("span", { children: "Add Server" })
                 ]
               }
             )
@@ -27223,7 +28336,7 @@ QUEUE_NAME=tasks`,
         ) })
       }
     ),
-    /* @__PURE__ */ jsx104(
+    /* @__PURE__ */ jsx107(
       Modal19,
       {
         title: "Add New Server",
@@ -27237,10 +28350,10 @@ QUEUE_NAME=tasks`,
         },
         confirmLoading: addingServer,
         className: styles.addServerModal,
-        children: /* @__PURE__ */ jsxs75(Space35, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx104(Text37, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
-            /* @__PURE__ */ jsx104(
+        children: /* @__PURE__ */ jsxs77(Space36, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx107(Text37, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ jsx107(
               Input14,
               {
                 placeholder: "e.g., Production Server",
@@ -27249,11 +28362,11 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx104(Text37, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ jsx107(Text37, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
-          /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx104(Text37, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
-            /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx107(Text37, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ jsx107(
               Input14,
               {
                 placeholder: "e.g., http://localhost:4001",
@@ -27262,11 +28375,11 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx104(Text37, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ jsx107(Text37, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
-          /* @__PURE__ */ jsxs75("div", { children: [
-            /* @__PURE__ */ jsx104(Text37, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
-            /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsxs77("div", { children: [
+            /* @__PURE__ */ jsx107(Text37, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ jsx107(
               Input14.Password,
               {
                 placeholder: "Optional: Enter API key for authentication",
@@ -27275,7 +28388,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx104(Text37, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ jsx107(Text37, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }
@@ -27284,10 +28397,10 @@ QUEUE_NAME=tasks`,
 };
 
 // src/components/Chat/AgentServerSetting.tsx
-import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var AgentServerSetting = () => {
   const { settingsModalOpen, setSettingsModalOpen } = useLatticeChatShellContext();
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx108(
     SettingsModal,
     {
       open: settingsModalOpen,
@@ -27297,24 +28410,24 @@ var AgentServerSetting = () => {
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-import { Fragment as Fragment26, jsx as jsx106, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx109, jsxs as jsxs78 } from "react/jsx-runtime";
 var ShellContent = ({
   initialAssistantId,
   enableWorkspace
 }) => {
   const { currentTenant } = useAuth();
-  return /* @__PURE__ */ jsx106(Fragment26, { children: enableWorkspace ? /* @__PURE__ */ jsxs76(WorkspaceContextProvider, { children: [
-    /* @__PURE__ */ jsx106(AssistantContextProvider, { autoLoad: true, initialAssistantId, children: /* @__PURE__ */ jsx106(ConversationContextProvider, { children: /* @__PURE__ */ jsx106(LatticeChatView, {}) }) }),
-    /* @__PURE__ */ jsx106(AgentServerSetting, {})
-  ] }) : /* @__PURE__ */ jsxs76(Fragment26, { children: [
-    /* @__PURE__ */ jsx106(AssistantContextProvider, { autoLoad: true, initialAssistantId, children: /* @__PURE__ */ jsx106(ConversationContextProvider, { children: /* @__PURE__ */ jsx106(LatticeChatView, {}) }) }),
-    /* @__PURE__ */ jsx106(AgentServerSetting, {})
+  return /* @__PURE__ */ jsx109(Fragment26, { children: enableWorkspace ? /* @__PURE__ */ jsxs78(WorkspaceContextProvider, { children: [
+    /* @__PURE__ */ jsx109(AssistantContextProvider, { autoLoad: true, initialAssistantId, children: /* @__PURE__ */ jsx109(ConversationContextProvider, { children: /* @__PURE__ */ jsx109(LatticeChatView, {}) }) }),
+    /* @__PURE__ */ jsx109(AgentServerSetting, {})
+  ] }) : /* @__PURE__ */ jsxs78(Fragment26, { children: [
+    /* @__PURE__ */ jsx109(AssistantContextProvider, { autoLoad: true, initialAssistantId, children: /* @__PURE__ */ jsx109(ConversationContextProvider, { children: /* @__PURE__ */ jsx109(LatticeChatView, {}) }) }),
+    /* @__PURE__ */ jsx109(AgentServerSetting, {})
   ] }) });
 };
 var LatticeChatShell = (props) => {
   const { enableAssistantCreation, enableAssistantEditing, enableWorkspace: enableWorkspaceProp, ...restProps } = props;
   const enableWorkspace = enableWorkspaceProp ?? restProps.initialConfig?.enableWorkspace ?? false;
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx109(
     LatticeChatShellContextProvider,
     {
       initialConfig: {
@@ -27323,7 +28436,7 @@ var LatticeChatShell = (props) => {
         enableWorkspace,
         ...restProps.initialConfig
       },
-      children: /* @__PURE__ */ jsx106(
+      children: /* @__PURE__ */ jsx109(
         ShellContent,
         {
           initialAssistantId: restProps.initialConfig?.assistantId,
@@ -27366,6 +28479,7 @@ export {
   SkillCategoryPrompts_default as SkillCategoryPrompts,
   SkillFlow_default as SkillFlow,
   SkillNode_default as SkillNode,
+  StreamingHTMLRenderer,
   TenantSelector,
   UserProfile,
   WorkspaceResourceManager,
@@ -27375,6 +28489,7 @@ export {
   axiomAntdThemeDark,
   axiomTokens,
   colors,
+  generateIframeSrcdoc,
   generateLabelFromMessage,
   getAxiomAntdTheme,
   getElement,