@optifye/dashboard-core 4.1.0 → 4.1.1

package/dist/index.js

@@ -28122,9 +28122,9 @@ var SideNavBar = React46.memo(({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-px bg-gray-200 my-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-2 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-px bg-gray-200 my-3" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: handleProfileClick,
@@ -28706,7 +28706,7 @@ var ThreadSidebar = ({
   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-full bg-gray-50 border-r border-gray-200 ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col h-screen bg-gray-50 border-r border-gray-200 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 p-4 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -28718,7 +28718,7 @@ var ThreadSidebar = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner_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(
+    /* @__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(LoadingSpinner_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),
@@ -28761,10 +28761,13 @@ var AIAgentView = () => {
   const [lastError, setLastError] = React46.useState(null);
   const [copiedMessageId, setCopiedMessageId] = React46.useState(null);
   const [activeThreadId, setActiveThreadId] = React46.useState(void 0);
-  const [isSidebarOpen, setIsSidebarOpen] = React46.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React46.useState(false);
   const [streamingStates, setStreamingStates] = React46.useState(/* @__PURE__ */ new Map());
   const [userId, setUserId] = React46.useState(null);
   const [pendingThreadId, setPendingThreadId] = React46.useState(null);
+  const [isTransitioning, setIsTransitioning] = React46.useState(false);
+  const [typedText, setTypedText] = React46.useState("");
+  const [newChatCount, setNewChatCount] = React46.useState(0);
   const isThreadLoading = (threadId) => {
     return threadId ? loadingThreads.has(threadId) : false;
   };
@@ -28792,6 +28795,20 @@ var AIAgentView = () => {
   const lineId = getLineIdFromPath();
   const { shiftId } = getCurrentShift(dateTimeConfig.defaultTimezone || "Asia/Kolkata", shiftConfig);
   const companyId = entityConfig.companyId || "default-company-id";
+  const ACTIVE_THREAD_STORAGE_KEY = `ai-agent-active-thread-${lineId}`;
+  React46.useEffect(() => {
+    const savedThreadId = localStorage.getItem(ACTIVE_THREAD_STORAGE_KEY);
+    if (savedThreadId && savedThreadId !== "undefined") {
+      setActiveThreadId(savedThreadId);
+    }
+  }, [ACTIVE_THREAD_STORAGE_KEY]);
+  React46.useEffect(() => {
+    if (activeThreadId) {
+      localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+    } else {
+      localStorage.removeItem(ACTIVE_THREAD_STORAGE_KEY);
+    }
+  }, [activeThreadId, ACTIVE_THREAD_STORAGE_KEY]);
   React46.useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
@@ -28806,6 +28823,27 @@ var AIAgentView = () => {
       setTimeout(scrollToBottom, 100);
     }
   }, [activeThreadId]);
+  React46.useEffect(() => {
+    if (messages.length === 0 && !isTransitioning) {
+      const fullText = "Hi, I'm Axel - Your AI Supervisor";
+      let index = 0;
+      setTypedText("");
+      const typeInterval = setInterval(() => {
+        if (index < fullText.length) {
+          setTypedText(fullText.substring(0, index + 1));
+          index++;
+        } else {
+          clearInterval(typeInterval);
+        }
+      }, 50);
+      return () => clearInterval(typeInterval);
+    }
+  }, [messages.length, isTransitioning]);
+  React46.useEffect(() => {
+    if (isSidebarOpen) {
+      setNewChatCount(0);
+    }
+  }, [isSidebarOpen]);
   const copyToClipboard = async (text, messageId) => {
     try {
       await navigator.clipboard.writeText(text);
@@ -28820,6 +28858,8 @@ var AIAgentView = () => {
     setMessages([]);
     setInputValue("");
     setPendingThreadId(null);
+    setTypedText("");
+    localStorage.removeItem(ACTIVE_THREAD_STORAGE_KEY);
     textareaRef.current?.focus();
   };
   React46.useEffect(() => {
@@ -28852,6 +28892,12 @@ var AIAgentView = () => {
     let currentThreadId = activeThreadId || `temp-${Date.now()}`;
     if (isThreadLoading(currentThreadId)) return;
     const userMessage = inputValue.trim();
+    if (displayMessages.length === 0) {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setIsTransitioning(false);
+      }, 800);
+    }
     setInputValue("");
     setLoadingThreads((prev) => new Set(prev).add(currentThreadId));
     setLastError(null);
@@ -28895,6 +28941,9 @@ var AIAgentView = () => {
               currentThreadId = threadId;
               setActiveThreadId(threadId);
               setPendingThreadId(null);
+              if (!isSidebarOpen) {
+                setNewChatCount((prev) => prev + 1);
+              }
               setLoadingThreads((prev) => {
                 const newSet = new Set(prev);
                 if (newSet.has(oldThreadId)) {
@@ -28993,7 +29042,9 @@ var AIAgentView = () => {
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      handleSubmit(e);
+      if (!isCurrentThreadLoading) {
+        handleSubmit(e);
+      }
     }
   };
   const formatMessage = (content) => {
@@ -29002,7 +29053,81 @@ var AIAgentView = () => {
       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 lines = content.split("\n");
+    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">';
+        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++) {
@@ -29016,6 +29141,18 @@ var AIAgentView = () => {
         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>");
@@ -29099,71 +29236,185 @@ var AIAgentView = () => {
       position: messages.length
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen bg-white", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${isSidebarOpen ? "w-80" : "w-0"} transition-all duration-300 overflow-hidden flex-shrink-0`, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ThreadSidebar,
+  const renderAssistantContent = (content) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        activeThreadId,
-        onSelectThread: setActiveThreadId,
-        onNewThread: handleNewThread,
-        className: "h-full"
+        className: "formatted-content",
+        dangerouslySetInnerHTML: { __html: formatMessage(content) }
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex-shrink-0 bg-white border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => setIsSidebarOpen(!isSidebarOpen),
-              className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
-              "aria-label": "Toggle sidebar",
-              children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5" })
+    );
+  };
+  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;
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: () => navigate("/"),
-              className: "flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
-              "aria-label": "Go back",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Back" })
-              ]
+            100% {
+              transform: translateY(0);
+              opacity: 1;
             }
-          )
-        ] }),
+          }
+        `
+    } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex-shrink-0 bg-white border-b border-gray-200 sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => navigate("/"),
+            className: "flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
+            "aria-label": "Go back",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Back" })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl sm:text-2xl md:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: "Axel - AI Manufacturing Expert" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl sm:text-2xl md:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: "Chat with Axel" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-blue-500 animate-pulse ring-2 ring-blue-500/30" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center mt-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setIsSidebarOpen(!isSidebarOpen),
+            className: "relative p-2 hover:bg-gray-100 rounded-lg transition-colors",
+            "aria-label": "Toggle sidebar",
+            children: [
+              isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5" }),
+              !isSidebarOpen && newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-medium", children: newChatCount })
+            ]
+          }
+        ) })
       ] }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "main",
         {
           ref: containerRef,
-          className: "flex-1 overflow-y-auto bg-gray-50/50 min-h-0",
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto p-4 sm:p-6 md:p-8", children: [
-            displayMessages.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 bg-white border border-gray-200/80 shadow-sm rounded-2xl p-6 sm:p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-xl overflow-hidden shadow-sm flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
+          className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
+          children: displayMessages.length === 0 && !isTransitioning ? (
+            /* Centered welcome and input for new chat */
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl mx-auto px-4 sm:px-6 flex flex-col items-center justify-center space-y-12 -mt-16", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-24 rounded-xl overflow-hidden shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: axelProfilePng,
+                    alt: "Axel - AI Manufacturing Expert",
+                    className: "w-full h-full object-cover"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-3xl font-semibold text-gray-900", children: [
+                  typedText,
+                  typedText.length < "Hi, I'm Axel - Your AI Supervisor".length && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-pulse", children: "|" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-2xl", children: [
+                activeThreadId && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: handleNewThread,
+                    className: "inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-3.5 h-3.5" }),
+                      "New conversation"
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative bg-white 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", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        ref: textareaRef,
+                        value: inputValue,
+                        onChange: (e) => setInputValue(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        placeholder: "Ask me about production optimization, quality metrics, or any manufacturing challenge...",
+                        className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
+                        rows: 1,
+                        style: { minHeight: "24px", maxHeight: "120px" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 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 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 items-center justify-center mt-2 text-xs text-gray-400", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { 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 ml-4", 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-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+              displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
                 {
-                  src: axelProfilePng,
-                  alt: "Axel - AI Manufacturing Expert",
-                  className: "w-full h-full object-cover"
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Hi, I'm Axel - Your AI Supervisor" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 leading-relaxed", children: "Ask me anything about your shop-floor. I'll remember our conversation and help you optimize your manufacturing processes." })
+                  className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
+                  children: [
+                    message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-xl overflow-hidden shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: axelProfilePng,
+                        alt: "Axel",
+                        className: "w-full h-full object-cover"
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white 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" ? 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-${currentStreaming.message.length}` : `${message.id}-${index}`
+              )),
+              /* @__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 overflow-hidden shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: axelProfilePng,
+                    alt: "Axel",
+                    className: "w-full h-full object-cover"
+                  }
+                ) }) }),
+                /* @__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.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.1s" } }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.2s" } })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 text-sm", children: "Axel is thinking..." })
+                ] }) })
               ] })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+            ] }) })
+          ) : (
+            /* Regular chat view with messages */
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
               displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
@@ -29177,22 +29428,14 @@ var AIAgentView = () => {
                         className: "w-full h-full object-cover"
                       }
                     ) }) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `max-w-[75%] group ${message.role === "user" ? "order-1" : ""}`, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
-                          className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white" : "bg-white border border-gray-200/80"}`,
+                          className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white 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" ? /* @__PURE__ */ jsxRuntime.jsx(
-                                "div",
-                                {
-                                  className: "formatted-content",
-                                  dangerouslySetInnerHTML: {
-                                    __html: formatMessage(message.content)
-                                  }
-                                }
-                              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap leading-relaxed", children: message.content }),
+                              message.role === "assistant" ? 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(
@@ -29218,15 +29461,14 @@ var AIAgentView = () => {
                           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Axel" })
                         ] })
                       ] })
-                    ] }),
-                    message.role === "user" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 bg-gray-700 text-white rounded-xl flex items-center justify-center text-sm font-semibold", children: entityConfig.companyId?.charAt(0).toUpperCase() || "U" }) })
+                    ] })
                   ]
                 },
                 message.id === -1 ? `streaming-${currentStreaming.message.length}` : `${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-[75%]", children: [
+                /* @__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",
@@ -29247,21 +29489,21 @@ var AIAgentView = () => {
                     className: "w-full h-full object-cover"
                   }
                 ) }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-[75%]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__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.jsxs("div", { className: "flex items-center gap-3", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-1", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce" }),
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.1s" } }),
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.2s" } })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 text-sm", children: "Axel is analyzing your request..." })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 text-sm", children: "Axel is thinking..." })
                 ] }) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
-            ] })
-          ] })
+            ] }) })
+          )
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "flex-shrink-0 border-t border-gray-200 bg-white sticky bottom-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto p-4 sm:p-6", children: [
+      (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-50/50 to-transparent pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto p-4 sm:p-6 pointer-events-auto", children: [
         activeThreadId && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -29273,48 +29515,59 @@ var AIAgentView = () => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 items-end", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "textarea",
-                {
-                  ref: textareaRef,
-                  value: inputValue,
-                  onChange: (e) => setInputValue(e.target.value),
-                  onKeyDown: handleKeyDown,
-                  placeholder: "Ask me about production optimization, quality metrics, or any manufacturing challenge...",
-                  className: "w-full resize-none rounded-xl border border-gray-300 px-4 py-3.5 pr-16 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 bg-white placeholder-gray-500 text-gray-900 text-sm leading-relaxed shadow-sm transition-all duration-200",
-                  rows: 1,
-                  disabled: isCurrentThreadLoading,
-                  style: { minHeight: "48px", maxHeight: "120px" }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 right-3 flex items-center gap-2", children: inputValue.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 font-mono", children: inputValue.length }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "submit",
-                disabled: !inputValue.trim() || isCurrentThreadLoading,
-                className: "inline-flex items-center justify-center gap-2 h-12 px-5 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all duration-200 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:ring-offset-2 shadow-sm hover:shadow-md disabled:hover:shadow-sm",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Send" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs text-gray-400", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Press Enter to send \u2022 Shift+Enter for new line" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-green-500 rounded-full" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Connected" })
-            ] }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `relative bg-white rounded-3xl shadow-lg border border-gray-200 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-2 p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "textarea",
+                  {
+                    ref: textareaRef,
+                    value: inputValue,
+                    onChange: (e) => setInputValue(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Ask me about production optimization, quality metrics, or any manufacturing challenge...",
+                    className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
+                    rows: 1,
+                    style: { minHeight: "24px", maxHeight: "120px" }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 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 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 items-center justify-center mt-2 text-xs text-gray-400", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { 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 ml-4", 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: `${isSidebarOpen ? "w-80" : "w-0"} transition-all duration-300 overflow-hidden flex-shrink-0 border-l border-gray-200 h-screen fixed right-0 top-0 z-20`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ThreadSidebar,
+      {
+        activeThreadId,
+        onSelectThread: setActiveThreadId,
+        onNewThread: handleNewThread,
+        className: "h-full"
+      }
+    ) })
   ] });
 };
 var AIAgentView_default = AIAgentView;