@optifye/dashboard-core 6.10.17 → 6.10.18

package/dist/index.js

@@ -58070,6 +58070,2056 @@ var ImprovementCenterView = () => {
   ] });
 };
 var ImprovementCenterView_default = ImprovementCenterView;
+var ThreadSidebar = ({
+  activeThreadId,
+  onSelectThread,
+  onNewThread,
+  className = ""
+}) => {
+  const { threads, isLoading, error, deleteThread: deleteThread2 } = useThreads();
+  const [deletingId, setDeletingId] = React24.useState(null);
+  const handleDelete = async (e, threadId) => {
+    e.stopPropagation();
+    if (confirm("Are you sure you want to delete this conversation?")) {
+      setDeletingId(threadId);
+      try {
+        await deleteThread2(threadId);
+        if (activeThreadId === threadId) {
+          onNewThread();
+        }
+      } catch (error2) {
+        console.error("Error deleting thread:", error2);
+        alert("Failed to delete conversation. Please try again.");
+      } finally {
+        setDeletingId(null);
+      }
+    }
+  };
+  const formatDate2 = (dateString) => {
+    const date = new Date(dateString);
+    const now2 = /* @__PURE__ */ new Date();
+    const diffMs = now2.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+    if (diffDays === 0) {
+      return "Today";
+    } else if (diffDays === 1) {
+      return "Yesterday";
+    } else if (diffDays < 7) {
+      return date.toLocaleDateString("en-US", { weekday: "short" });
+    } else {
+      return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    }
+  };
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-4 text-red-600 text-sm ${className}`, children: "Failed to load conversations" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col h-screen bg-gray-50 border-r border-gray-200 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 p-4 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Chat History" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Your previous conversations" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm" }) }) : threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-gray-500 text-sm", children: "No conversations yet" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: threads.map((thread) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onClick: () => onSelectThread(thread.id),
+        className: `group relative flex items-start gap-3 px-4 py-3 cursor-pointer transition-all ${activeThreadId === thread.id ? "bg-blue-50 border-l-4 border-blue-600 hover:bg-blue-100" : "hover:bg-gray-100 border-l-4 border-transparent"}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: `w-4 h-4 mt-0.5 flex-shrink-0 ${activeThreadId === thread.id ? "text-blue-600" : "text-gray-400"}` }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: `text-sm font-medium truncate ${activeThreadId === thread.id ? "text-blue-900" : "text-gray-900"}`, children: thread.title || "Untitled Chat" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-xs mt-0.5 ${activeThreadId === thread.id ? "text-blue-700" : "text-gray-500"}`, children: formatDate2(thread.created_at) })
+          ] }),
+          deletingId === thread.id ? /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e) => handleDelete(e, thread.id),
+              className: "flex-shrink-0 opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-200 rounded transition-all",
+              title: "Delete conversation",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-3.5 h-3.5 text-gray-500" })
+            }
+          )
+        ]
+      },
+      thread.id
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 p-4 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 text-center", children: [
+      threads.length,
+      " conversation",
+      threads.length !== 1 ? "s" : ""
+    ] }) })
+  ] });
+};
+var ProfilePicture = React24__namespace.default.memo(({
+  alt = "Axel",
+  className = "",
+  size = "md",
+  animate = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(AxelOrb, { size, animate }) });
+});
+ProfilePicture.displayName = "ProfilePicture";
+var GREETING_MESSAGES = [
+  "How can I help you today?",
+  "What would you like to know?",
+  "Ready to optimize your operations?",
+  "How can I assist you today?"
+];
+var getDailyGreeting = () => {
+  const now2 = /* @__PURE__ */ new Date();
+  const startOfYear = new Date(now2.getFullYear(), 0, 0);
+  const diff = now2.getTime() - startOfYear.getTime();
+  const oneDay = 1e3 * 60 * 60 * 24;
+  const dayOfYear = Math.floor(diff / oneDay);
+  const index = dayOfYear % GREETING_MESSAGES.length;
+  return GREETING_MESSAGES[index];
+};
+var AIAgentView = () => {
+  const { navigate, pathname } = useNavigation();
+  const config = useDashboardConfig();
+  const entityConfig = useEntityConfig();
+  const dateTimeConfig = useDateTimeConfig();
+  const shiftConfig = useShiftConfig();
+  const { formatNumber } = useFormatNumber();
+  const [inputValue, setInputValue] = React24.useState("");
+  const [loadingThreads, setLoadingThreads] = React24.useState(/* @__PURE__ */ new Set());
+  const [lastError, setLastError] = React24.useState(null);
+  const [copiedMessageId, setCopiedMessageId] = React24.useState(null);
+  const [activeThreadId, setActiveThreadId] = React24.useState(void 0);
+  const [isSidebarOpen, setIsSidebarOpen] = React24.useState(false);
+  const [streamingStates, setStreamingStates] = React24.useState(/* @__PURE__ */ new Map());
+  const [userId, setUserId] = React24.useState(null);
+  const [pendingThreadId, setPendingThreadId] = React24.useState(null);
+  const [isTransitioning, setIsTransitioning] = React24.useState(false);
+  const [typedText, setTypedText] = React24.useState("");
+  const [newChatCount, setNewChatCount] = React24.useState(0);
+  const [greetingReset, setGreetingReset] = React24.useState(0);
+  const [hasStartedTyping, setHasStartedTyping] = React24.useState(false);
+  const [typingStartTime, setTypingStartTime] = React24.useState(null);
+  const [lastTypingTime, setLastTypingTime] = React24.useState(null);
+  const [characterCount, setCharacterCount] = React24.useState(0);
+  const typingTimeoutRef = React24.useRef(null);
+  const currentGreeting = React24.useMemo(() => getDailyGreeting(), [greetingReset]);
+  const isThreadLoading = (threadId) => {
+    return threadId ? loadingThreads.has(threadId) : false;
+  };
+  const getStreamingState = (threadId) => {
+    return threadId ? streamingStates.get(threadId) || { message: "", reasoning: "" } : { message: "", reasoning: "" };
+  };
+  const trackTypingStart = () => {
+    if (!hasStartedTyping) {
+      const now2 = Date.now();
+      setHasStartedTyping(true);
+      setTypingStartTime(now2);
+      setLastTypingTime(now2);
+      trackCoreEvent("AI Agent Input Started", {
+        line_id: lineId,
+        company_id: companyId,
+        shift_id: shiftId,
+        active_thread_id: activeThreadId,
+        has_existing_messages: messages.length > 0,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    }
+  };
+  const trackTypingProgress = (newValue) => {
+    const now2 = Date.now();
+    setLastTypingTime(now2);
+    setCharacterCount(newValue.length);
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      if (hasStartedTyping && typingStartTime && newValue.length > 0) {
+        const typingDuration = now2 - typingStartTime;
+        trackCoreEvent("AI Agent Input Typing Progress", {
+          line_id: lineId,
+          company_id: companyId,
+          shift_id: shiftId,
+          active_thread_id: activeThreadId,
+          character_count: newValue.length,
+          typing_duration_ms: typingDuration,
+          has_existing_messages: messages.length > 0,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        });
+      }
+    }, 2e3);
+  };
+  const trackMessageSent = (messageContent) => {
+    if (hasStartedTyping && typingStartTime) {
+      const now2 = Date.now();
+      const totalTypingDuration = now2 - typingStartTime;
+      trackCoreEvent("AI Agent Message Sent", {
+        line_id: lineId,
+        company_id: companyId,
+        shift_id: shiftId,
+        active_thread_id: activeThreadId,
+        message_length: messageContent.length,
+        character_count: messageContent.length,
+        typing_duration_ms: totalTypingDuration,
+        has_existing_messages: messages.length > 0,
+        is_new_conversation: !activeThreadId,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    }
+    resetTypingState();
+  };
+  const resetTypingState = () => {
+    setHasStartedTyping(false);
+    setTypingStartTime(null);
+    setLastTypingTime(null);
+    setCharacterCount(0);
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = null;
+    }
+  };
+  const textareaRef = React24.useRef(null);
+  const messagesEndRef = React24.useRef(null);
+  const containerRef = React24.useRef(null);
+  const renderedContentCache = React24.useRef(/* @__PURE__ */ new Map());
+  const { createThread, mutate: mutateThreads } = useThreads();
+  const { messages, addMessage, setMessages } = useMessages(activeThreadId);
+  const agnoApiUrl = config.endpoints?.agnoApiUrl || "https://fastapi-production-111f9.up.railway.app";
+  const sseClient = React24.useMemo(() => {
+    console.log("[AIAgentView] Using AGNO API URL:", agnoApiUrl);
+    return new SSEChatClient(agnoApiUrl);
+  }, [agnoApiUrl]);
+  const getLineIdFromPath = () => {
+    const pathParts = pathname.split("/");
+    const lineIdIndex = pathParts.findIndex((part) => part === "ai-agent") + 1;
+    if (lineIdIndex > 0 && lineIdIndex < pathParts.length) {
+      return pathParts[lineIdIndex];
+    }
+    return entityConfig.defaultLineId || LINE_1_UUID;
+  };
+  const lineId = getLineIdFromPath();
+  const { shiftId } = getCurrentShift(dateTimeConfig.defaultTimezone || "Asia/Kolkata", shiftConfig);
+  const companyId = entityConfig.companyId || "default-company-id";
+  const configuredLineIds = getConfiguredLineIds(entityConfig);
+  const lineDisplayNames = getAllLineDisplayNames(entityConfig);
+  const allLines = configuredLineIds.map((id3) => ({
+    id: id3,
+    name: lineDisplayNames[id3] || `Line ${id3.substring(0, 8)}`
+  }));
+  const ACTIVE_THREAD_STORAGE_KEY = `ai-agent-active-thread-${lineId}`;
+  React24.useLayoutEffect(() => {
+    const savedThreadId = localStorage.getItem(ACTIVE_THREAD_STORAGE_KEY);
+    if (savedThreadId && savedThreadId !== "undefined") {
+      setActiveThreadId(savedThreadId);
+    }
+  }, [ACTIVE_THREAD_STORAGE_KEY]);
+  React24.useEffect(() => {
+    if (activeThreadId) {
+      localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+    } else {
+      localStorage.removeItem(ACTIVE_THREAD_STORAGE_KEY);
+    }
+  }, [activeThreadId, ACTIVE_THREAD_STORAGE_KEY]);
+  React24.useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden" && activeThreadId) {
+        localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+      }
+    };
+    const handleBeforeUnload = () => {
+      if (activeThreadId) {
+        localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      if (activeThreadId) {
+        localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+      }
+    };
+  }, [activeThreadId, ACTIVE_THREAD_STORAGE_KEY]);
+  React24.useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`;
+    }
+  }, [inputValue]);
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  React24.useEffect(() => {
+    if (activeThreadId && messages.length > 0) {
+      setTimeout(scrollToBottom, 100);
+    }
+  }, [activeThreadId]);
+  React24.useEffect(() => {
+    if (messages.length === 0 && !isTransitioning) {
+      let index = 0;
+      setTypedText("");
+      const typeInterval = setInterval(() => {
+        if (index < currentGreeting.length) {
+          setTypedText(currentGreeting.substring(0, index + 1));
+          index++;
+        } else {
+          clearInterval(typeInterval);
+        }
+      }, 50);
+      return () => clearInterval(typeInterval);
+    }
+  }, [messages.length, isTransitioning, greetingReset, currentGreeting]);
+  React24.useEffect(() => {
+    if (isSidebarOpen) {
+      setNewChatCount(0);
+    }
+  }, [isSidebarOpen]);
+  const copyToClipboard = async (text, messageId) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedMessageId(messageId);
+      setTimeout(() => setCopiedMessageId(null), 2e3);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+  const handleNewThread = () => {
+    setActiveThreadId(void 0);
+    setMessages([]);
+    setInputValue("");
+    setPendingThreadId(null);
+    setTypedText("");
+    setGreetingReset((prev) => prev + 1);
+    resetTypingState();
+    localStorage.removeItem(ACTIVE_THREAD_STORAGE_KEY);
+    textareaRef.current?.focus();
+  };
+  React24.useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
+  React24.useEffect(() => {
+    const checkAuth = async () => {
+      const supabase2 = _getSupabaseInstance();
+      const { data: { session } } = await supabase2.auth.getSession();
+      if (session?.user) {
+        setUserId(session.user.id);
+        console.log("[AIAgentView] User authenticated:", session.user.id);
+      } else {
+        console.log("[AIAgentView] No authenticated session found");
+      }
+    };
+    checkAuth();
+    const supabase = _getSupabaseInstance();
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
+      if (session?.user) {
+        setUserId(session.user.id);
+      } else {
+        setUserId(null);
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!inputValue.trim() || !userId) return;
+    let currentThreadId = activeThreadId || `temp-${Date.now()}`;
+    if (isThreadLoading(currentThreadId)) return;
+    const userMessage = inputValue.trim();
+    trackMessageSent(userMessage);
+    if (displayMessages.length === 0) {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setIsTransitioning(false);
+      }, 800);
+    }
+    setInputValue("");
+    setLoadingThreads((prev) => new Set(prev).add(currentThreadId));
+    setLastError(null);
+    if (!activeThreadId) {
+      setPendingThreadId(currentThreadId);
+    }
+    setStreamingStates((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(currentThreadId, { message: "", reasoning: "" });
+      return newMap;
+    });
+    const tempUserMessage = {
+      id: Date.now(),
+      // Temporary ID
+      thread_id: activeThreadId || "",
+      role: "user",
+      content: userMessage,
+      reasoning: null,
+      model_id: null,
+      token_usage: null,
+      metadata: null,
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      position: messages.length
+    };
+    setMessages((prev) => [...prev, tempUserMessage]);
+    setTimeout(scrollToBottom, 100);
+    try {
+      await sseClient.sendMessage(
+        userMessage,
+        userId,
+        activeThreadId || null,
+        {
+          companyId,
+          lineId,
+          shiftId,
+          allLines
+        },
+        {
+          onThreadCreated: (threadId) => {
+            if (!activeThreadId) {
+              const oldThreadId = currentThreadId;
+              currentThreadId = threadId;
+              setActiveThreadId(threadId);
+              setPendingThreadId(null);
+              if (!isSidebarOpen) {
+                setNewChatCount((prev) => prev + 1);
+              }
+              setLoadingThreads((prev) => {
+                const newSet = new Set(prev);
+                if (newSet.has(oldThreadId)) {
+                  newSet.delete(oldThreadId);
+                  newSet.add(threadId);
+                }
+                return newSet;
+              });
+              setStreamingStates((prev) => {
+                const newMap = new Map(prev);
+                const streamingState = newMap.get(oldThreadId);
+                if (streamingState) {
+                  newMap.delete(oldThreadId);
+                  newMap.set(threadId, streamingState);
+                }
+                return newMap;
+              });
+              mutateThreads();
+            }
+          },
+          onMessage: (text) => {
+            setStreamingStates((prev) => {
+              const newMap = new Map(prev);
+              const current = newMap.get(currentThreadId) || { message: "", reasoning: "" };
+              newMap.set(currentThreadId, { ...current, message: current.message + text });
+              return newMap;
+            });
+          },
+          onComplete: async (messageId) => {
+            if (currentThreadId && !currentThreadId.startsWith("temp-")) {
+              const updatedMessages = await getAllThreadMessages(currentThreadId);
+              setMessages(updatedMessages);
+            }
+            setStreamingStates((prev) => {
+              const newMap = new Map(prev);
+              newMap.delete(currentThreadId);
+              return newMap;
+            });
+            setLoadingThreads((prev) => {
+              const newSet = new Set(prev);
+              newSet.delete(currentThreadId);
+              return newSet;
+            });
+            if (!activeThreadId) {
+              setPendingThreadId(null);
+            }
+          },
+          onError: (error) => {
+            console.error("Chat error:", error);
+            setLastError(error);
+            setLoadingThreads((prev) => {
+              const newSet = new Set(prev);
+              newSet.delete(currentThreadId);
+              return newSet;
+            });
+            setStreamingStates((prev) => {
+              const newMap = new Map(prev);
+              newMap.delete(currentThreadId);
+              return newMap;
+            });
+            if (!activeThreadId) {
+              setPendingThreadId(null);
+            }
+            setMessages((prev) => prev.slice(0, -1));
+          }
+        }
+      );
+    } catch (error) {
+      console.error("[AIAgentView] Error in chat:", error);
+      const errorMessage = error instanceof Error ? error.message : "An unexpected error occurred";
+      setLastError(errorMessage);
+      setLoadingThreads((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(currentThreadId);
+        return newSet;
+      });
+      setStreamingStates((prev) => {
+        const newMap = new Map(prev);
+        newMap.delete(currentThreadId);
+        return newMap;
+      });
+      if (!activeThreadId) {
+        setPendingThreadId(null);
+      }
+      setMessages((prev) => prev.slice(0, -1));
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (!isCurrentThreadLoading) {
+        handleSubmit(e);
+      }
+    }
+  };
+  const formatMessage = (content) => {
+    const processInlineFormatting = (text) => {
+      text = text.replace(/\*\*(.*?)\*\*/g, '<strong class="font-semibold text-gray-900">$1</strong>');
+      text = text.replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800">$1</code>');
+      return text;
+    };
+    const parseTableFromText = (lines2, startIndex) => {
+      const tableLines = [];
+      let i = startIndex;
+      while (i < lines2.length) {
+        const line = lines2[i].trim();
+        if (!line) {
+          i++;
+          break;
+        }
+        if (line.includes("|") || line.match(/^[-|=\s]+$/)) {
+          tableLines.push(line);
+          i++;
+        } else {
+          break;
+        }
+      }
+      if (tableLines.length === 0) return { html: "", endIndex: startIndex };
+      const dataLines = tableLines.filter((line) => !line.match(/^[-|=\s]+$/));
+      if (dataLines.length === 0) return { html: "", endIndex: i };
+      let headerRow = [];
+      let dataRows = [];
+      const firstLine = dataLines[0];
+      if (firstLine.includes("|")) {
+        const cells = firstLine.split("|").map((cell) => cell.trim()).filter((cell) => cell.length > 0);
+        if (cells.length >= 2) {
+          headerRow = cells;
+          for (let j = 1; j < dataLines.length; j++) {
+            const row = dataLines[j];
+            if (row.includes("|")) {
+              const rowCells = row.split("|").map((cell) => cell.trim()).filter((cell) => cell.length > 0);
+              while (rowCells.length < headerRow.length) rowCells.push("");
+              if (rowCells.length > headerRow.length) rowCells.splice(headerRow.length);
+              dataRows.push(rowCells);
+            }
+          }
+        }
+      }
+      if (headerRow.length === 0) {
+        for (const line of dataLines) {
+          if (line.includes("|")) {
+            const rowCells = line.split("|").map((cell) => cell.trim()).filter((cell) => cell.length > 0);
+            if (rowCells.length >= 2) {
+              dataRows.push(rowCells);
+            }
+          }
+        }
+        if (dataRows.length > 0 && dataRows[0].length > 0) {
+          headerRow = dataRows[0].map((_, index) => `Column ${index + 1}`);
+        }
+      }
+      if (headerRow.length > 0 && dataRows.length > 0) {
+        let tableHtml = '<div class="overflow-x-auto my-4"><table class="min-w-full border-collapse border border-gray-300 rounded-lg shadow-sm">';
+        tableHtml += '<thead class="bg-gray-50">';
+        tableHtml += "<tr>";
+        headerRow.forEach((header) => {
+          tableHtml += `<th class="border border-gray-300 px-4 py-2 text-left font-semibold text-gray-900">${processInlineFormatting(header)}</th>`;
+        });
+        tableHtml += "</tr>";
+        tableHtml += "</thead>";
+        tableHtml += '<tbody class="bg-white divide-y divide-gray-200">';
+        dataRows.forEach((row, rowIndex) => {
+          tableHtml += `<tr class="${rowIndex % 2 === 0 ? "bg-white" : "bg-gray-50"}">`;
+          row.forEach((cell) => {
+            tableHtml += `<td class="border border-gray-300 px-4 py-2 text-gray-800">${processInlineFormatting(cell)}</td>`;
+          });
+          tableHtml += "</tr>";
+        });
+        tableHtml += "</tbody>";
+        tableHtml += "</table></div>";
+        return { html: tableHtml, endIndex: i };
+      }
+      return { html: "", endIndex: startIndex };
+    };
+    const processedContent = content;
+    const lines = processedContent.split("\n");
+    const formattedLines = [];
+    let inList = false;
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i];
+      const trimmedLine = line.trim();
+      if (!trimmedLine) {
+        if (inList) {
+          formattedLines.push("</ul>");
+          inList = false;
+        }
+        formattedLines.push("<br/>");
+        continue;
+      }
+      if (trimmedLine.includes("|") && (trimmedLine.match(/\|/g) || []).length >= 1) {
+        if (inList) {
+          formattedLines.push("</ul>");
+          inList = false;
+        }
+        const tableResult = parseTableFromText(lines, i);
+        if (tableResult.html) {
+          formattedLines.push(tableResult.html);
+          i = tableResult.endIndex - 1;
+          continue;
+        }
+      }
+      if (trimmedLine.startsWith("###")) {
+        if (inList) {
+          formattedLines.push("</ul>");
+          inList = false;
+        }
+        const headerText = processInlineFormatting(trimmedLine.replace(/^###\s*/, ""));
+        formattedLines.push(`<h3 class="text-lg font-semibold text-gray-900 mt-4 mb-2">${headerText}</h3>`);
+        continue;
+      } else if (trimmedLine.startsWith("##")) {
+        if (inList) {
+          formattedLines.push("</ul>");
+          inList = false;
+        }
+        const headerText = processInlineFormatting(trimmedLine.replace(/^##\s*/, ""));
+        formattedLines.push(`<h2 class="text-xl font-semibold text-gray-900 mt-4 mb-2">${headerText}</h2>`);
+        continue;
+      } else if (trimmedLine.startsWith("#")) {
+        if (inList) {
+          formattedLines.push("</ul>");
+          inList = false;
+        }
+        const headerText = processInlineFormatting(trimmedLine.replace(/^#\s*/, ""));
+        formattedLines.push(`<h1 class="text-3xl font-semibold text-gray-900 mt-4 mb-3">${headerText}</h1>`);
+        continue;
+      }
+      const listMatch = trimmedLine.match(/^([-*•]\s+|\d+\.\s+|^\s*[-*•]\s+)/);
+      if (listMatch) {
+        if (!inList) {
+          formattedLines.push('<ul class="space-y-1 mt-2 mb-2">');
+          inList = true;
+        }
+        const listContent = processInlineFormatting(trimmedLine.replace(/^([-*•]\s+|\d+\.\s+|\s*[-*•]\s+)/, ""));
+        formattedLines.push(`<li class="ml-4 text-gray-700 flex items-start"><span class="mr-2 text-gray-500">\u2022</span><span>${listContent}</span></li>`);
+        continue;
+      } else if (inList) {
+        formattedLines.push("</ul>");
+        inList = false;
+      }
+      if (trimmedLine.match(/^---+$/)) {
+        formattedLines.push('<hr class="my-4 border-gray-200"/>');
+        continue;
+      }
+      if (trimmedLine) {
+        const processedLine = processInlineFormatting(line);
+        if (trimmedLine.endsWith(":") && trimmedLine.length < 50 && !trimmedLine.includes("**")) {
+          formattedLines.push(`<h3 class="text-lg font-semibold text-gray-900 mt-4 mb-2">${processedLine}</h3>`);
+        } else {
+          formattedLines.push(`<p class="text-gray-800 leading-relaxed mb-2">${processedLine}</p>`);
+        }
+      }
+    }
+    if (inList) {
+      formattedLines.push("</ul>");
+    }
+    return formattedLines.join("");
+  };
+  const formatTime5 = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false
+    });
+  };
+  const displayMessages = [...messages];
+  const effectiveThreadId = activeThreadId || pendingThreadId || void 0;
+  const currentStreaming = getStreamingState(effectiveThreadId);
+  const isCurrentThreadLoading = isThreadLoading(effectiveThreadId);
+  if (isCurrentThreadLoading && currentStreaming.message) {
+    displayMessages.push({
+      id: -1,
+      // Use -1 for streaming message to identify it
+      thread_id: activeThreadId || "",
+      role: "assistant",
+      content: currentStreaming.message,
+      reasoning: currentStreaming.reasoning || null,
+      model_id: "gpt-4o-mini",
+      token_usage: null,
+      metadata: null,
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      position: messages.length
+    });
+  }
+  const renderAssistantContent = (content) => {
+    const cached = renderedContentCache.current.get(content);
+    if (cached) {
+      return cached;
+    }
+    const parseChartPatterns = (text) => {
+      const chartElements = [];
+      let lastIndex = 0;
+      console.log("[DEBUG] Parsing chart patterns from text:", text);
+      const chartRegex = /\[\s*(?:Calling\s+|CALL\s+)?(create_[a-z_]+)\s*\(([\s\S]*?)\)\s*\]/g;
+      let match;
+      const processedIndices = /* @__PURE__ */ new Set();
+      let matchCount = 0;
+      while ((match = chartRegex.exec(text)) !== null) {
+        matchCount++;
+        const startIndex = match.index;
+        const endIndex = startIndex + match[0].length;
+        console.log(`[DEBUG] Found chart pattern #${matchCount}:`, {
+          fullMatch: match[0],
+          chartType: match[1],
+          argsString: match[2],
+          startIndex,
+          endIndex
+        });
+        if (!processedIndices.has(startIndex)) {
+          processedIndices.add(startIndex);
+          if (startIndex > lastIndex) {
+            const beforeText = text.substring(lastIndex, startIndex);
+            chartElements.push(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  dangerouslySetInnerHTML: { __html: formatMessage(beforeText) }
+                },
+                `text-${lastIndex}`
+              )
+            );
+          }
+          const chartType = match[1];
+          const argsString = match[2];
+          try {
+            const args = parseChartArguments(argsString);
+            const chartElement = renderChart(chartType, args, startIndex);
+            if (chartElement) {
+              console.log(`[DEBUG] Successfully rendered chart: ${chartType}`);
+              chartElements.push(chartElement);
+            } else {
+              console.warn(`[DEBUG] Chart element was null for type: ${chartType}`);
+              console.warn(`[DEBUG] Args were:`, args);
+              chartElements.push(
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "text-red-500 text-sm border border-red-300 bg-red-50 p-3 rounded",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Chart Rendering Error:" }),
+                      " Failed to render ",
+                      chartType,
+                      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                      /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
+                        "Check console for details. Args: ",
+                        JSON.stringify(args, null, 2)
+                      ] })
+                    ]
+                  },
+                  `error-${startIndex}`
+                )
+              );
+            }
+          } catch (error) {
+            console.error(`Failed to parse chart ${chartType}:`, error);
+            console.error(`Args string was:`, argsString);
+            chartElements.push(
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "text-red-500 text-sm border border-red-300 bg-red-50 p-3 rounded",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Chart Parsing Error:" }),
+                    " Failed to parse ",
+                    chartType,
+                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
+                      "Error: ",
+                      error instanceof Error ? error.message : String(error)
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
+                      "Original: ",
+                      match[0]
+                    ] })
+                  ]
+                },
+                `error-${startIndex}`
+              )
+            );
+          }
+          lastIndex = endIndex;
+        }
+      }
+      console.log(`[DEBUG] Total chart patterns found: ${matchCount}`);
+      if (lastIndex < text.length) {
+        const remainingText = text.substring(lastIndex);
+        chartElements.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              dangerouslySetInnerHTML: { __html: formatMessage(remainingText) }
+            },
+            `text-${lastIndex}`
+          )
+        );
+      }
+      if (chartElements.length === 1 && lastIndex === 0) {
+        console.log("[DEBUG] No charts found in text, returning null");
+        return null;
+      }
+      console.log(`[DEBUG] Returning ${chartElements.length} chart elements`);
+      return chartElements;
+    };
+    const parseChartArguments = (argsString) => {
+      console.log("[DEBUG] Parsing chart arguments:", argsString);
+      const extractParameters = (str) => {
+        const params = {};
+        let currentPos = 0;
+        while (currentPos < str.length) {
+          while (currentPos < str.length && /\s|,/.test(str[currentPos])) {
+            currentPos++;
+          }
+          if (currentPos >= str.length) break;
+          const paramMatch = str.substring(currentPos).match(/^(\w+)\s*=/);
+          if (!paramMatch) {
+            console.warn("[DEBUG] No parameter name found at position", currentPos);
+            break;
+          }
+          const paramName = paramMatch[1];
+          currentPos += paramMatch[0].length;
+          while (currentPos < str.length && /\s/.test(str[currentPos])) {
+            currentPos++;
+          }
+          if (currentPos >= str.length) break;
+          let value;
+          let valueEnd;
+          if (str[currentPos] === "[") {
+            let bracketCount = 0;
+            let arrayStart = currentPos;
+            valueEnd = str.length;
+            for (let i = currentPos; i < str.length; i++) {
+              if (str[i] === "[") bracketCount++;
+              else if (str[i] === "]") bracketCount--;
+              if (bracketCount === 0) {
+                valueEnd = i + 1;
+                break;
+              }
+            }
+            if (bracketCount !== 0) {
+              console.error("[DEBUG] Unmatched brackets in array value");
+              break;
+            }
+            const arrayStr = str.substring(arrayStart, valueEnd);
+            console.log(`[DEBUG] Found array parameter: ${paramName} = ${arrayStr}`);
+            try {
+              value = JSON.parse(arrayStr);
+              console.log(`[DEBUG] Successfully parsed array ${paramName}:`, value);
+            } catch (e) {
+              console.error(`[DEBUG] Failed to parse array ${paramName}:`, e);
+              console.error(`Array value that failed:`, arrayStr);
+              value = arrayStr;
+            }
+          } else if (str[currentPos] === "{") {
+            let braceCount = 0;
+            let objectStart = currentPos;
+            valueEnd = str.length;
+            for (let i = currentPos; i < str.length; i++) {
+              if (str[i] === "{") braceCount++;
+              else if (str[i] === "}") braceCount--;
+              if (braceCount === 0) {
+                valueEnd = i + 1;
+                break;
+              }
+            }
+            if (braceCount !== 0) {
+              console.error("[DEBUG] Unmatched braces in object value");
+              break;
+            }
+            const objectStr = str.substring(objectStart, valueEnd);
+            console.log(`[DEBUG] Found object parameter: ${paramName} = ${objectStr}`);
+            try {
+              value = JSON.parse(objectStr);
+              console.log(`[DEBUG] Successfully parsed object ${paramName}:`, value);
+            } catch (e) {
+              console.error(`[DEBUG] Failed to parse object ${paramName}:`, e);
+              console.error(`Object value that failed:`, objectStr);
+              value = objectStr;
+            }
+          } else if (str[currentPos] === '"') {
+            let stringStart = currentPos + 1;
+            let stringEnd = stringStart;
+            while (stringEnd < str.length) {
+              if (str[stringEnd] === '"' && str[stringEnd - 1] !== "\\") {
+                break;
+              }
+              stringEnd++;
+            }
+            if (stringEnd >= str.length) {
+              console.error("[DEBUG] Unterminated string value");
+              valueEnd = str.length;
+              break;
+            }
+            value = str.substring(stringStart, stringEnd);
+            valueEnd = stringEnd + 1;
+            console.log(`[DEBUG] Found string parameter: ${paramName} = "${value}"`);
+          } else {
+            let valueStart = currentPos;
+            let valueEndPos = valueStart;
+            while (valueEndPos < str.length && str[valueEndPos] !== ",") {
+              valueEndPos++;
+            }
+            const rawValue = str.substring(valueStart, valueEndPos).trim();
+            valueEnd = valueEndPos;
+            if (rawValue === "true" || rawValue === "True") {
+              value = true;
+            } else if (rawValue === "false" || rawValue === "False") {
+              value = false;
+            } else if (rawValue === "null" || rawValue === "None") {
+              value = null;
+            } else if (!isNaN(Number(rawValue)) && rawValue !== "") {
+              value = Number(rawValue);
+            } else {
+              value = rawValue;
+            }
+            console.log(`[DEBUG] Found unquoted parameter: ${paramName} = ${rawValue} (parsed as ${typeof value})`);
+          }
+          params[paramName] = value;
+          currentPos = valueEnd;
+        }
+        return params;
+      };
+      const result = extractParameters(argsString);
+      console.log("[DEBUG] Final parsed arguments:", result);
+      return result;
+    };
+    const renderChart = (chartType, args, key) => {
+      console.log(`[DEBUG] Attempting to render chart type: ${chartType}`, args);
+      const CHART_COLORS = {
+        primary: "#3b82f6",
+        // blue-500
+        secondary: "#10b981",
+        // green-500
+        accent: "#f59e0b",
+        // amber-500
+        danger: "#ef4444",
+        // red-500
+        violet: "#8b5cf6",
+        // violet-500
+        cyan: "#06b6d4",
+        // cyan-500
+        orange: "#f97316",
+        // orange-500
+        indigo: "#6366f1"
+        // indigo-500
+      };
+      const CHART_COLOR_PALETTE = Object.values(CHART_COLORS);
+      const CHART_STYLES = {
+        grid: {
+          strokeDasharray: "3 3",
+          stroke: "#e5e7eb"
+          // gray-300
+        },
+        axis: {
+          tick: { fontSize: 12, fill: "#4b5563" },
+          // gray-600
+          stroke: "#9ca3af"
+          // gray-400
+        },
+        margin: { top: 10, right: 30, left: 20, bottom: 40 },
+        barRadius: [4, 4, 0, 0]
+        // Top corners rounded
+      };
+      const CustomTooltip4 = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 mb-1", children: label }),
+            payload.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", style: { color: entry.color }, children: [
+              entry.name,
+              ": ",
+              typeof entry.value === "number" ? formatNumber(entry.value) : entry.value,
+              args.unit || ""
+            ] }, index))
+          ] });
+        }
+        return null;
+      };
+      const DualAxisTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 mb-2", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: payload.map((entry, index) => {
+              const value = typeof entry.value === "number" ? formatNumber(entry.value) : entry.value;
+              const unit = entry.dataKey === args.left_y_field ? args.left_unit || "" : entry.dataKey === args.right_y_field ? args.right_unit || "" : "";
+              return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", style: { color: entry.color }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+                  entry.name,
+                  ":"
+                ] }),
+                " ",
+                value,
+                unit
+              ] }, index);
+            }) })
+          ] });
+        }
+        return null;
+      };
+      const formatXAxisTick = (value) => {
+        if (typeof value === "string") {
+          if (value.match(/^\d{2}\/\d{2}\s/)) {
+            return value;
+          }
+          if (value.length > 15) {
+            return value.substring(0, 12) + "...";
+          }
+        }
+        return value;
+      };
+      const ChartWrapper = ({ children, title }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900 mb-4", children: title }),
+        children
+      ] });
+      switch (chartType) {
+        case "create_gauge_chart":
+          console.log("[DEBUG] Rendering gauge chart");
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            GaugeChart,
+            {
+              value: args.value || 0,
+              min: args.min_value || 0,
+              max: args.max_value || 100,
+              target: args.target,
+              label: args.label || "",
+              unit: args.unit || "",
+              thresholds: args.thresholds,
+              className: "w-full max-w-sm"
+            }
+          ) }) }, `gauge-${key}`);
+        case "create_bar_chart":
+          console.log("[DEBUG] Rendering bar chart");
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Bar chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Bar chart data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `bar-error-${key}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-64", style: { minHeight: "200px", minWidth: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 60,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                dataKey: args.y_field,
+                fill: args.color || CHART_COLORS.primary,
+                radius: CHART_STYLES.barRadius
+              }
+            )
+          ] }) }) }) }, `bar-${key}`);
+        case "create_line_chart":
+          console.log("[DEBUG] Rendering line chart");
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Line chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Line chart data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `line-error-${key}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-64", style: { minHeight: "200px", minWidth: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 60,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                type: "monotone",
+                dataKey: args.y_field,
+                stroke: CHART_COLORS.primary,
+                strokeWidth: 2,
+                dot: { r: 4, fill: CHART_COLORS.primary },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `line-${key}`);
+        case "create_pie_chart":
+          console.log("[DEBUG] Rendering pie chart");
+          if (!args.data || !args.label_field || !args.value_field) {
+            console.error("Pie chart missing required parameters:", { data: !!args.data, label_field: !!args.label_field, value_field: !!args.value_field });
+            console.error("Available args:", Object.keys(args));
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Pie chart data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `pie-error-${key}`);
+          }
+          const pieData = args.data.map((item) => ({
+            name: item[args.label_field],
+            value: item[args.value_field]
+          }));
+          console.log("[DEBUG] Pie chart data transformed:", pieData);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full max-w-md mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+            PieChart4,
+            {
+              data: pieData,
+              showPercentages: args.show_percentages || false,
+              colors: CHART_COLOR_PALETTE
+            }
+          ) }) }, `pie-${key}`);
+        case "create_comparison_table":
+          console.log("[DEBUG] Rendering comparison table");
+          if (!args.data) {
+            console.error("Comparison table missing required data");
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Comparison table data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Table data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `table-error-${key}`);
+          }
+          const columns = args.columns || Object.keys(args.data[0] || {});
+          let sortedData = [...args.data];
+          if (args.sort_by && columns.includes(args.sort_by)) {
+            sortedData.sort((a, b) => {
+              const aVal = a[args.sort_by];
+              const bVal = b[args.sort_by];
+              const comparison = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
+              return args.sort_descending === false ? comparison : -comparison;
+            });
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: `px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
+                children: col
+              },
+              col
+            )) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                className: `px-6 py-4 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
+                children: typeof row[col] === "number" ? formatNumber(row[col]) : row[col]
+              },
+              col
+            )) }, rowIdx)) })
+          ] }) }) }, `table-${key}`);
+        case "create_multi_line_chart":
+          console.log("[DEBUG] Rendering multi-line chart");
+          if (!args.data || !args.x_field || !args.y_fields || !args.legend) {
+            console.error("Multi-line chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_fields: !!args.y_fields,
+              legend: !!args.legend
+            });
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Multi-line chart data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `multi-line-error-${key}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", style: { minHeight: "250px", minWidth: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 60,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            args.y_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                type: "monotone",
+                dataKey: field,
+                stroke: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
+                strokeWidth: 2,
+                name: args.legend[index] || field,
+                dot: { r: 4 },
+                activeDot: { r: 6 }
+              },
+              field
+            ))
+          ] }) }) }) }, `multi-line-${key}`);
+        case "create_stacked_bar_chart":
+          console.log("[DEBUG] Rendering stacked bar chart");
+          if (!args.data || !args.x_field || !args.stack_fields) {
+            console.error("Stacked bar chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              stack_fields: !!args.stack_fields
+            });
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Stacked bar chart data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `stacked-bar-error-${key}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", style: { minHeight: "250px", minWidth: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 60,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            args.stack_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                dataKey: field,
+                stackId: "stack",
+                fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
+                name: field,
+                radius: index === args.stack_fields.length - 1 ? CHART_STYLES.barRadius : void 0
+              },
+              field
+            ))
+          ] }) }) }) }, `stacked-bar-${key}`);
+        case "create_dual_axis_chart":
+          console.log("[DEBUG] Rendering dual-axis chart");
+          if (!args.data || !args.x_field || !args.left_y_field || !args.right_y_field) {
+            console.error("Dual-axis chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              left_y_field: !!args.left_y_field,
+              right_y_field: !!args.right_y_field
+            });
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Dual-axis chart data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `dual-axis-error-${key}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", style: { minHeight: "250px", minWidth: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: { ...CHART_STYLES.margin, bottom: 80 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 100,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "left",
+                orientation: "left",
+                label: {
+                  value: args.left_label || args.left_y_field,
+                  angle: -90,
+                  position: "insideLeft",
+                  style: { textAnchor: "middle", fill: "#4b5563" }
+                },
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => `${formatNumber(value)}${args.left_unit || ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                label: {
+                  value: args.right_label || args.right_y_field,
+                  angle: 90,
+                  position: "insideRight",
+                  style: { textAnchor: "middle", fill: "#4b5563" }
+                },
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => `${formatNumber(value)}${args.right_unit || ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(DualAxisTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                yAxisId: "left",
+                dataKey: args.left_y_field,
+                fill: CHART_COLORS.primary,
+                name: args.left_label || args.left_y_field,
+                radius: CHART_STYLES.barRadius
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                yAxisId: "right",
+                type: "monotone",
+                dataKey: args.right_y_field,
+                stroke: CHART_COLORS.danger,
+                strokeWidth: 3,
+                name: args.right_label || args.right_y_field,
+                dot: { r: 5, fill: CHART_COLORS.danger },
+                activeDot: { r: 7 }
+              }
+            )
+          ] }) }) }) }, `dual-axis-${key}`);
+        case "create_scatter_plot":
+          console.log("[DEBUG] Rendering scatter plot");
+          if (!args.data || !args.x_field || !args.y_field || !args.group_field) {
+            console.error("Scatter plot missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_field: !!args.y_field,
+              group_field: !!args.group_field
+            });
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Scatter plot data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `scatter-error-${key}`);
+          }
+          const groupedData = args.data.reduce((acc, item) => {
+            const group = item[args.group_field];
+            if (!acc[group]) {
+              acc[group] = [];
+            }
+            acc[group].push(item);
+            return acc;
+          }, {});
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", style: { minHeight: "250px", minWidth: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                type: "number",
+                name: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                dataKey: args.y_field,
+                type: "number",
+                name: args.y_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                cursor: { strokeDasharray: "3 3" },
+                content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Scatter,
+              {
+                name: group,
+                data,
+                fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length]
+              },
+              group
+            ))
+          ] }) }) }) }, `scatter-${key}`);
+        case "create_combo_chart":
+          console.log("[DEBUG] Rendering combo chart");
+          if (!args.data || !args.x_field || !args.bar_field || !args.line_field) {
+            console.error("Combo chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              bar_field: !!args.bar_field,
+              line_field: !!args.line_field
+            });
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Combo chart data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `combo-error-${key}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", style: { minHeight: "250px", minWidth: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: { ...CHART_STYLES.margin, bottom: 80 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 100,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "left",
+                orientation: "left",
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                yAxisId: "left",
+                dataKey: args.bar_field,
+                fill: CHART_COLORS.primary,
+                name: args.bar_field,
+                radius: CHART_STYLES.barRadius
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                yAxisId: "right",
+                type: "monotone",
+                dataKey: args.line_field,
+                stroke: CHART_COLORS.danger,
+                strokeWidth: 3,
+                name: args.line_field,
+                dot: { r: 5 },
+                activeDot: { r: 7 }
+              }
+            )
+          ] }) }) }) }, `combo-${key}`);
+        case "create_area_chart":
+          console.log("[DEBUG] Rendering area chart");
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Area chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_field: !!args.y_field
+            });
+            return null;
+          }
+          if (!Array.isArray(args.data)) {
+            console.error("Area chart data must be an array, got:", typeof args.data, args.data);
+            return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500 text-sm", children: [
+              "Error: Chart data must be an array. Received: ",
+              typeof args.data
+            ] }) }, `area-error-${key}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", style: { minHeight: "250px", minWidth: "300px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: { ...CHART_STYLES.margin, bottom: 80 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "colorGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: CHART_COLORS.primary, stopOpacity: 0.8 }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: CHART_COLORS.primary, stopOpacity: 0.1 })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 100,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Area,
+              {
+                type: "monotone",
+                dataKey: args.y_field,
+                stroke: CHART_COLORS.primary,
+                strokeWidth: 2,
+                fill: args.fill !== false ? "url(#colorGradient)" : "none",
+                name: args.y_field,
+                dot: { r: 4, fill: CHART_COLORS.primary },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `area-${key}`);
+        default:
+          console.warn(`Unknown chart type: ${chartType}`);
+          return null;
+      }
+    };
+    const chartContent = parseChartPatterns(content);
+    let finalNode;
+    if (chartContent) {
+      finalNode = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "formatted-content", children: chartContent });
+    } else {
+      finalNode = /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "formatted-content",
+          dangerouslySetInnerHTML: { __html: formatMessage(content) }
+        }
+      );
+    }
+    renderedContentCache.current.set(content, finalNode);
+    return finalNode;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: {
+      __html: `
+          @keyframes slideDown {
+            0% {
+              transform: translateY(-40vh);
+              opacity: 1;
+            }
+            100% {
+              transform: translateY(0);
+              opacity: 1;
+            }
+          }
+          
+          @keyframes waveLoad {
+            0% {
+              background-position: -200% 0;
+            }
+            100% {
+              background-position: 200% 0;
+            }
+          }
+          
+          .thinking-wave {
+            background: linear-gradient(
+              90deg,
+              #6b7280 0%,
+              #6b7280 40%,
+              #3b82f6 50%,
+              #6b7280 60%,
+              #6b7280 100%
+            );
+            background-size: 200% 100%;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: waveLoad 3s ease-in-out infinite;
+          }
+        `
+    } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "lg:mr-80 mr-0" : "mr-0"}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex-shrink-0 bg-white px-3 sm:px-6 md:px-8 py-2 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => navigate("/"),
+              className: "p-2 -ml-2 rounded-full active:bg-gray-100 transition-colors",
+              "aria-label": "Navigate back",
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-gray-700", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Chat with Axel" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleNewThread,
+                className: "p-2 rounded-full active:bg-gray-100 transition-colors",
+                "aria-label": "New chat",
+                title: "New chat",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-5 h-5 text-gray-700" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsSidebarOpen(!isSidebarOpen),
+                className: "relative p-2 -mr-2 rounded-full active:bg-gray-100 transition-colors",
+                "aria-label": "Toggle chat history",
+                title: isSidebarOpen ? "Hide history" : "Show history",
+                children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5 text-gray-700" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5 text-gray-700" }),
+                  newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1 right-1 bg-red-500 text-white text-[9px] rounded-full w-4 h-4 flex items-center justify-center font-medium", children: newChatCount })
+                ] })
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center justify-between relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            BackButtonMinimal,
+            {
+              onClick: () => navigate("/"),
+              text: "Back",
+              size: "default",
+              "aria-label": "Navigate back to dashboard"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: handleNewThread,
+                className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New Chat" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsSidebarOpen(!isSidebarOpen),
+                className: "relative flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium",
+                "aria-label": "Toggle chat history",
+                children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide History" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Chat History" }),
+                  newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
+                ] })
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "main",
+        {
+          ref: containerRef,
+          className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
+          children: !activeThreadId && displayMessages.length === 0 && !isTransitioning ? (
+            /* Centered welcome and input for new chat */
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl mx-auto px-3 sm:px-4 md:px-6 flex flex-col items-center justify-center space-y-8 sm:space-y-12 -mt-8 sm:-mt-16", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4 sm:mb-6 md:mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", size: "2xl", animate: true }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 px-2 sm:px-4", children: [
+                  typedText,
+                  typedText.length < currentGreeting.length && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-pulse", children: "|" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative bg-white rounded-2xl sm:rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "textarea",
+                    {
+                      ref: textareaRef,
+                      value: inputValue,
+                      onChange: (e) => {
+                        const newValue = e.target.value;
+                        setInputValue(newValue);
+                        if (newValue.length > 0 && !hasStartedTyping) {
+                          trackTypingStart();
+                        }
+                        if (newValue.length > 0) {
+                          trackTypingProgress(newValue);
+                        }
+                        if (newValue.length === 0) {
+                          resetTypingState();
+                        }
+                      },
+                      onKeyDown: handleKeyDown,
+                      onFocus: () => {
+                        trackCoreEvent("AI Agent Input Focused", {
+                          line_id: lineId,
+                          company_id: companyId,
+                          shift_id: shiftId,
+                          active_thread_id: activeThreadId,
+                          has_existing_messages: messages.length > 0,
+                          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+                        });
+                      },
+                      placeholder: "Ask me anything about your shop-floor",
+                      className: "w-full resize-none bg-transparent px-3 sm:px-4 py-3 sm:py-2 pr-12 sm:pr-14 focus:outline-none placeholder-gray-500 text-gray-900 text-sm sm:text-base leading-relaxed",
+                      rows: 1,
+                      style: { minHeight: "40px", maxHeight: "120px" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "submit",
+                      disabled: !inputValue.trim() || isCurrentThreadLoading,
+                      className: "inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
+                    }
+                  ) })
+                ] }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 mt-2 text-xs text-gray-400", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center", children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
+                  ] })
+                ] })
+              ] }) })
+            ] })
+          ) : isTransitioning ? (
+            /* Transition state - show user message first, then thinking */
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 pb-24 sm:pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
+              displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
+                  children: [
+                    message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: `relative px-3 sm:px-4 md:px-5 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[90%] sm:max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
+                          message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              className: "formatted-content",
+                              dangerouslySetInnerHTML: { __html: formatMessage(message.content) }
+                            }
+                          ) : renderAssistantContent(message.content) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap leading-relaxed", children: message.content }),
+                          message.id === -1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-0.5 h-4 bg-gray-400 animate-pulse ml-0.5" })
+                        ] })
+                      }
+                    ) })
+                  ]
+                },
+                message.id === -1 ? "streaming-message" : `${message.id}-${index}`
+              )),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-start", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium thinking-wave", children: "Thinking" }) }) })
+              ] })
+            ] }) })
+          ) : (
+            /* Regular chat view with messages */
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-3 sm:px-4 md:px-6 py-3 sm:py-6 pb-20 sm:pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 sm:space-y-6", children: [
+              displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
+                  children: [
+                    message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          className: `relative px-3 sm:px-4 md:px-5 py-2.5 sm:py-4 rounded-2xl sm:rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-500 sm:bg-blue-600 text-white max-w-[85%] sm:max-w-[85%] ml-auto" : "bg-gray-100 sm:bg-white sm:border sm:border-gray-200/80 max-w-full"}`,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
+                              message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  className: "formatted-content",
+                                  dangerouslySetInnerHTML: { __html: formatMessage(message.content) }
+                                }
+                              ) : renderAssistantContent(message.content) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap leading-relaxed", children: message.content }),
+                              message.id === -1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-0.5 h-4 bg-gray-400 animate-pulse ml-0.5" })
+                            ] }),
+                            message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                onClick: () => copyToClipboard(message.content, message.id.toString()),
+                                className: "absolute top-2 sm:top-3 right-2 sm:right-3 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 sm:p-1.5 hover:bg-gray-100 rounded-lg",
+                                title: "Copy message",
+                                children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-green-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500" })
+                              }
+                            ),
+                            message.reasoning && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "mt-3 pt-3 border-t border-gray-200", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-sm text-gray-600 hover:text-gray-800", children: "View reasoning" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-sm text-gray-600", children: message.reasoning })
+                            ] })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-1.5 sm:mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime5(message.created_at) }),
+                        message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Axel" })
+                        ] })
+                      ] })
+                    ] })
+                  ]
+                },
+                message.id === -1 ? "streaming-message" : `${message.id}-${index}`
+              )),
+              lastError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-start", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-6 h-6 text-red-600" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-800 text-sm", children: lastError }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setLastError(null),
+                      className: "mt-2 text-xs text-red-600 hover:text-red-800 underline",
+                      children: "Dismiss"
+                    }
+                  )
+                ] })
+              ] }),
+              isCurrentThreadLoading && !currentStreaming.message && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-start", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium thinking-wave", children: "Thinking" }) }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+            ] }) })
+          )
+        }
+      ),
+      (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: `fixed bottom-0 left-0 right-0 bg-gradient-to-t from-white via-white/95 to-transparent sm:from-gray-50/50 sm:to-transparent pointer-events-none ${isSidebarOpen ? "lg:right-80" : "right-0"}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto p-2 sm:p-4 md:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `relative bg-white rounded-xl sm:rounded-3xl shadow-md sm:shadow-lg border border-gray-200 focus-within:border-blue-400 sm:focus-within:border-gray-300 transition-all duration-200 ${isTransitioning ? "animate-slide-down" : ""}`,
+            style: isTransitioning ? {
+              animation: "slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards"
+            } : {},
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-1 sm:gap-2 p-2 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  value: inputValue,
+                  onChange: (e) => {
+                    const newValue = e.target.value;
+                    setInputValue(newValue);
+                    if (newValue.length > 0 && !hasStartedTyping) {
+                      trackTypingStart();
+                    }
+                    if (newValue.length > 0) {
+                      trackTypingProgress(newValue);
+                    }
+                    if (newValue.length === 0) {
+                      resetTypingState();
+                    }
+                  },
+                  onKeyDown: handleKeyDown,
+                  onFocus: () => {
+                    trackCoreEvent("AI Agent Input Focused", {
+                      line_id: lineId,
+                      company_id: companyId,
+                      shift_id: shiftId,
+                      active_thread_id: activeThreadId,
+                      has_existing_messages: messages.length > 0,
+                      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+                    });
+                  },
+                  placeholder: "Message Axel...",
+                  className: "w-full resize-none bg-transparent px-2 sm:px-4 py-2 sm:py-2 pr-10 sm:pr-14 focus:outline-none placeholder-gray-400 sm:placeholder-gray-500 text-gray-900 text-sm sm:text-base leading-relaxed",
+                  rows: 1,
+                  style: { minHeight: "36px", maxHeight: "120px" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-1 sm:right-3 bottom-1 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "submit",
+                  disabled: !inputValue.trim() || isCurrentThreadLoading,
+                  className: "inline-flex items-center justify-center w-7 h-7 sm:w-9 sm:h-9 bg-blue-500 sm:bg-gray-900 text-white rounded-full active:scale-95 sm:hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-400/20 sm:focus:ring-gray-500/20",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" })
+                }
+              ) })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 mt-2 text-xs text-gray-400", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center", children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
+          ] })
+        ] })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `fixed inset-0 sm:inset-auto sm:right-0 sm:top-0 z-20 h-screen transition-transform duration-300 ease-in-out ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:w-96 lg:w-80 h-full bg-white sm:border-l sm:border-gray-200 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ThreadSidebar,
+      {
+        activeThreadId,
+        onSelectThread: setActiveThreadId,
+        onNewThread: handleNewThread,
+        className: "h-full"
+      }
+    ) }) }),
+    isSidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black bg-opacity-30 z-10 lg:hidden",
+        onClick: () => setIsSidebarOpen(false)
+      }
+    )
+  ] });
+};
+var AIAgentView_default = AIAgentView;
 var S3Service = class {
   constructor(config) {
     this.s3Client = null;
@@ -58524,87 +60574,9 @@ var streamProxyConfig = {
     responseLimit: false
   }
 };
-var ThreadSidebar = ({
-  activeThreadId,
-  onSelectThread,
-  onNewThread,
-  className = ""
-}) => {
-  const { threads, isLoading, error, deleteThread: deleteThread2 } = useThreads();
-  const [deletingId, setDeletingId] = React24.useState(null);
-  const handleDelete = async (e, threadId) => {
-    e.stopPropagation();
-    if (confirm("Are you sure you want to delete this conversation?")) {
-      setDeletingId(threadId);
-      try {
-        await deleteThread2(threadId);
-        if (activeThreadId === threadId) {
-          onNewThread();
-        }
-      } catch (error2) {
-        console.error("Error deleting thread:", error2);
-        alert("Failed to delete conversation. Please try again.");
-      } finally {
-        setDeletingId(null);
-      }
-    }
-  };
-  const formatDate2 = (dateString) => {
-    const date = new Date(dateString);
-    const now2 = /* @__PURE__ */ new Date();
-    const diffMs = now2.getTime() - date.getTime();
-    const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
-    if (diffDays === 0) {
-      return "Today";
-    } else if (diffDays === 1) {
-      return "Yesterday";
-    } else if (diffDays < 7) {
-      return date.toLocaleDateString("en-US", { weekday: "short" });
-    } else {
-      return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-    }
-  };
-  if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-4 text-red-600 text-sm ${className}`, children: "Failed to load conversations" });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col h-screen bg-gray-50 border-r border-gray-200 ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 p-4 border-b border-gray-200", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Chat History" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Your previous conversations" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm" }) }) : threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-gray-500 text-sm", children: "No conversations yet" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: threads.map((thread) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        onClick: () => onSelectThread(thread.id),
-        className: `group relative flex items-start gap-3 px-4 py-3 cursor-pointer transition-all ${activeThreadId === thread.id ? "bg-blue-50 border-l-4 border-blue-600 hover:bg-blue-100" : "hover:bg-gray-100 border-l-4 border-transparent"}`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: `w-4 h-4 mt-0.5 flex-shrink-0 ${activeThreadId === thread.id ? "text-blue-600" : "text-gray-400"}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: `text-sm font-medium truncate ${activeThreadId === thread.id ? "text-blue-900" : "text-gray-900"}`, children: thread.title || "Untitled Chat" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-xs mt-0.5 ${activeThreadId === thread.id ? "text-blue-700" : "text-gray-500"}`, children: formatDate2(thread.created_at) })
-          ] }),
-          deletingId === thread.id ? /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: (e) => handleDelete(e, thread.id),
-              className: "flex-shrink-0 opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-200 rounded transition-all",
-              title: "Delete conversation",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-3.5 h-3.5 text-gray-500" })
-            }
-          )
-        ]
-      },
-      thread.id
-    )) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 p-4 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 text-center", children: [
-      threads.length,
-      " conversation",
-      threads.length !== 1 ? "s" : ""
-    ] }) })
-  ] });
-};
 
 exports.ACTION_NAMES = ACTION_NAMES;
+exports.AIAgentView = AIAgentView_default;
 exports.AcceptInvite = AcceptInvite;
 exports.AcceptInviteView = AcceptInviteView_default;
 exports.AdvancedFilterDialog = AdvancedFilterDialog;