@optifye/dashboard-core 4.0.2 → 4.1.1

package/dist/index.js

@@ -7,6 +7,7 @@ var dateFns = require('date-fns');
 var dateFnsTz = require('date-fns-tz');
 var supabaseJs = require('@supabase/supabase-js');
 var mixpanel = require('mixpanel-browser');
+var useSWR = require('swr');
 var Hls2 = require('hls.js');
 var motionUtils = require('motion-utils');
 var motionDom = require('motion-dom');
@@ -19,7 +20,6 @@ var jsPDF = require('jspdf');
 var clientS3 = require('@aws-sdk/client-s3');
 var outline = require('@heroicons/react/24/outline');
 var SelectPrimitive = require('@radix-ui/react-select');
-var useSWR = require('swr');
 var sonner = require('sonner');
 var s3RequestPresigner = require('@aws-sdk/s3-request-presigner');
 var stream = require('stream');
@@ -46,11 +46,11 @@ function _interopNamespace(e) {
 
 var React46__namespace = /*#__PURE__*/_interopNamespace(React46);
 var mixpanel__default = /*#__PURE__*/_interopDefault(mixpanel);
+var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var Hls2__default = /*#__PURE__*/_interopDefault(Hls2);
 var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
 var jsPDF__default = /*#__PURE__*/_interopDefault(jsPDF);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
-var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -5641,7 +5641,9 @@ var DEFAULT_DATE_TIME_CONFIG = {
   }
 };
 var DEFAULT_ENDPOINTS_CONFIG = {
-  whatsapp: "/api/send-whatsapp-direct"
+  whatsapp: "/api/send-whatsapp-direct",
+  agnoApiUrl: process.env.NEXT_PUBLIC_AGNO_URL || "https://optifye-agent-production.up.railway.app"
+  // Default AGNO API URL
 };
 var DEFAULT_THEME_CONFIG = {
   // Sensible defaults for theme can be added here
@@ -8235,6 +8237,210 @@ var resetCoreMixpanel = () => {
   mixpanel__default.default.reset();
 };
 
+// src/lib/services/sseClient.ts
+var SSEChatClient = class {
+  constructor(baseUrl) {
+    this.controllers = /* @__PURE__ */ new Map();
+    this.baseUrl = baseUrl || "";
+  }
+  async sendMessage(message, userId, threadId, context, callbacks) {
+    const connectionId = `${threadId || "new"}-${Date.now()}`;
+    if (threadId) {
+      for (const [id3, controller2] of this.controllers.entries()) {
+        if (id3.startsWith(threadId)) {
+          controller2.abort();
+          this.controllers.delete(id3);
+        }
+      }
+    }
+    const controller = new AbortController();
+    this.controllers.set(connectionId, controller);
+    console.log("[SSEClient] Sending message:", {
+      message,
+      thread_id: threadId,
+      user_id: userId,
+      context
+    });
+    const agnoApiUrl = this.baseUrl || "https://optifye-agent-production.up.railway.app";
+    const endpoint = `${agnoApiUrl}/api/chat`;
+    console.log("[SSEClient] Posting directly to AGNO:", endpoint);
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "text/event-stream"
+      },
+      body: JSON.stringify({
+        message,
+        thread_id: threadId,
+        user_id: userId,
+        company_id: context.companyId,
+        line_id: context.lineId,
+        shift_id: context.shiftId
+      }),
+      signal: controller.signal,
+      // Don't include credentials since the API returns Access-Control-Allow-Origin: *
+      // credentials: 'include', // Include cookies for CORS
+      mode: "cors"
+      // Explicitly set CORS mode
+    });
+    console.log("[SSEClient] Response status:", response.status);
+    console.log("[SSEClient] Response headers:", Object.fromEntries(response.headers.entries()));
+    if (!response.ok) {
+      let errorMessage = `Chat request failed with status ${response.status}`;
+      try {
+        const error = await response.json();
+        errorMessage = error.detail || error.message || errorMessage;
+      } catch (e) {
+        try {
+          const text = await response.text();
+          if (text) errorMessage = text;
+        } catch (textError) {
+        }
+      }
+      console.error("[SSEClient] Error response:", errorMessage);
+      throw new Error(errorMessage);
+    }
+    const contentType = response.headers.get("content-type");
+    if (!contentType?.includes("text/event-stream")) {
+      console.warn("[SSEClient] Unexpected content-type:", contentType);
+    }
+    try {
+      await this.handleSSEStream(response, callbacks);
+    } finally {
+      this.controllers.delete(connectionId);
+    }
+  }
+  async handleSSEStream(response, callbacks) {
+    if (!response.body) {
+      console.error("[SSEClient] Response body is null");
+      throw new Error("No response body available for streaming");
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    try {
+      console.log("[SSEClient] Starting to read stream...");
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          console.log("[SSEClient] Stream ended");
+          break;
+        }
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (let i = 0; i < lines.length; i++) {
+          const line = lines[i].trim();
+          if (!line) continue;
+          console.log("[SSEClient] Processing line:", line);
+          if (line.startsWith("event:")) {
+            const event = line.slice(6).trim();
+            console.log("[SSEClient] Event type:", event);
+            const nextLine = lines[i + 1];
+            if (nextLine?.startsWith("data:")) {
+              const dataStr = nextLine.slice(5).trim();
+              console.log("[SSEClient] Event data:", dataStr);
+              try {
+                const data = JSON.parse(dataStr);
+                switch (event) {
+                  case "thread":
+                    callbacks.onThreadCreated?.(data.thread_id);
+                    break;
+                  case "message":
+                    callbacks.onMessage?.(data.text);
+                    break;
+                  case "reasoning":
+                    callbacks.onReasoning?.(data.text);
+                    break;
+                  case "complete":
+                    callbacks.onComplete?.(data.message_id);
+                    break;
+                  case "error":
+                    callbacks.onError?.(data.error);
+                    break;
+                }
+              } catch (e) {
+                console.error("[SSEClient] Failed to parse data:", dataStr, e);
+              }
+              i++;
+            }
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  }
+  abort(threadId) {
+    if (threadId) {
+      for (const [id3, controller] of this.controllers.entries()) {
+        if (id3.startsWith(threadId)) {
+          controller.abort();
+          this.controllers.delete(id3);
+        }
+      }
+    } else {
+      for (const [id3, controller] of this.controllers.entries()) {
+        controller.abort();
+      }
+      this.controllers.clear();
+    }
+  }
+};
+
+// src/lib/services/chatService.ts
+async function getUserThreads(userId, limit = 20) {
+  const supabase = _getSupabaseInstance();
+  const { data, error } = await supabase.schema("ai").from("chat_threads").select("*").eq("user_id", userId).order("updated_at", { ascending: false }).limit(limit);
+  if (error) throw error;
+  return data;
+}
+async function getUserThreadsPaginated(userId, page = 1, pageSize = 20) {
+  const supabase = _getSupabaseInstance();
+  const from = (page - 1) * pageSize;
+  const to = from + pageSize - 1;
+  const { data, error, count } = await supabase.schema("ai").from("chat_threads").select("*", { count: "exact" }).eq("user_id", userId).order("updated_at", { ascending: false }).range(from, to);
+  if (error) throw error;
+  return {
+    threads: data,
+    totalCount: count || 0,
+    totalPages: Math.ceil((count || 0) / pageSize),
+    currentPage: page
+  };
+}
+async function getThreadMessages(threadId, limit = 50, beforePosition) {
+  const supabase = _getSupabaseInstance();
+  let query = supabase.schema("ai").from("chat_messages").select("*").eq("thread_id", threadId).order("position", { ascending: true });
+  if (beforePosition !== void 0) {
+    query = query.lt("position", beforePosition);
+  }
+  const { data, error } = await query.limit(limit);
+  if (error) throw error;
+  return data;
+}
+async function getAllThreadMessages(threadId) {
+  const supabase = _getSupabaseInstance();
+  const { data, error } = await supabase.schema("ai").from("chat_messages").select("*").eq("thread_id", threadId).order("position", { ascending: true });
+  if (error) throw error;
+  return data;
+}
+async function updateThreadTitle(threadId, newTitle) {
+  const supabase = _getSupabaseInstance();
+  const { data, error } = await supabase.schema("ai").from("chat_threads").update({
+    title: newTitle,
+    auto_title: false,
+    updated_at: (/* @__PURE__ */ new Date()).toISOString()
+  }).eq("id", threadId).select().single();
+  if (error) throw error;
+  return data;
+}
+async function deleteThread(threadId) {
+  const supabase = _getSupabaseInstance();
+  const { error } = await supabase.schema("ai").from("chat_threads").delete().eq("id", threadId);
+  if (error) throw error;
+}
+
 // src/lib/hooks/useLineDetailedMetrics.ts
 var useLineDetailedMetrics = (lineIdFromProp) => {
   const entityConfig = useEntityConfig();
@@ -9355,6 +9561,122 @@ var useWorkspaceOperators = (workspaceId, options) => {
     refetch: fetchData
   };
 };
+function useThreads() {
+  const supabase = _getSupabaseInstance();
+  const fetcher = async (key) => {
+    const { data: { session } } = await supabase.auth.getSession();
+    if (!session) {
+      console.log("[useThreads] No session found");
+      return [];
+    }
+    const user = session.user;
+    if (!user) {
+      console.log("[useThreads] No user in session");
+      return [];
+    }
+    console.log("[useThreads] Fetching threads for user:", user.id);
+    try {
+      const { data, error: error2 } = await supabase.schema("ai").from("chat_threads").select("*").eq("user_id", user.id).order("updated_at", { ascending: false });
+      if (error2) {
+        console.error("[useThreads] Error fetching threads:", error2);
+        throw error2;
+      }
+      console.log("[useThreads] Fetched threads:", data?.length || 0);
+      return data || [];
+    } catch (err) {
+      console.error("[useThreads] Unexpected error:", err);
+      throw err;
+    }
+  };
+  const { data: threads = [], error, isLoading, mutate } = useSWR__default.default("chat_threads", fetcher, {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: true
+  });
+  const createThread = React46.useCallback(async (title) => {
+    const { data: { session } } = await supabase.auth.getSession();
+    if (!session?.user) throw new Error("Not authenticated");
+    const user = session.user;
+    console.log("[useThreads] Creating thread for user:", user.id);
+    const { data, error: error2 } = await supabase.schema("ai").from("chat_threads").insert([{
+      user_id: user.id,
+      title: title || `Chat ${(/* @__PURE__ */ new Date()).toLocaleDateString()}`,
+      auto_title: !title,
+      model_id: "gpt-4o-mini",
+      has_reasoning: false,
+      last_message: null,
+      message_count: 0
+    }]).select().single();
+    if (error2) {
+      console.error("[useThreads] Error creating thread:", error2);
+      throw error2;
+    }
+    console.log("[useThreads] Created thread:", data?.id);
+    mutate([data, ...threads], false);
+    return data;
+  }, [supabase, threads, mutate]);
+  const deleteThread2 = React46.useCallback(async (threadId) => {
+    const { error: error2 } = await supabase.schema("ai").from("chat_threads").delete().eq("id", threadId);
+    if (error2) throw error2;
+    mutate(threads.filter((t) => t.id !== threadId), false);
+  }, [supabase, threads, mutate]);
+  return {
+    threads,
+    isLoading,
+    error,
+    mutate,
+    createThread,
+    deleteThread: deleteThread2
+  };
+}
+function useMessages(threadId) {
+  const supabase = _getSupabaseInstance();
+  const [messages, setMessages] = React46.useState([]);
+  const [isLoading, setIsLoading] = React46.useState(true);
+  const [error, setError] = React46.useState(null);
+  React46.useEffect(() => {
+    if (!threadId) {
+      setMessages([]);
+      setIsLoading(false);
+      return;
+    }
+    const loadMessages = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const { data, error: fetchError } = await supabase.schema("ai").from("chat_messages").select("*").eq("thread_id", threadId).order("position", { ascending: true });
+        if (fetchError) throw fetchError;
+        setMessages(data);
+      } catch (err) {
+        setError(err);
+        console.error("Error loading messages:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadMessages();
+  }, [threadId, supabase]);
+  const addMessage = React46.useCallback(async (message) => {
+    const maxPosition = messages.reduce((max, msg) => Math.max(max, msg.position), -1);
+    const { data, error: insertError } = await supabase.schema("ai").from("chat_messages").insert([{
+      ...message,
+      position: maxPosition + 1
+    }]).select().single();
+    if (insertError) throw insertError;
+    return data;
+  }, [supabase, messages]);
+  const updateMessage = React46.useCallback(async (id3, content) => {
+    const { error: updateError } = await supabase.schema("ai").from("chat_messages").update({ content }).eq("id", id3);
+    if (updateError) throw updateError;
+  }, [supabase]);
+  return {
+    messages,
+    setMessages,
+    isLoading,
+    error,
+    addMessage,
+    updateMessage
+  };
+}
 var DEFAULT_FACTORY_OVERVIEW_TABLE_NAME = "factory_daily_summary";
 var useFactoryOverviewMetrics = (options) => {
   const { companyId, factoryId: entityFactoryId } = useEntityConfig();
@@ -13066,6 +13388,15 @@ var createSupabaseClient = (url, key) => supabaseJs.createClient(url, key, {
     persistSession: true,
     detectSessionInUrl: true,
     flowType: "pkce"
+  },
+  db: {
+    schema: "public"
+    // Default schema, we'll use .schema('ai') in queries
+  },
+  global: {
+    headers: {
+      "x-application-name": "optifye-dashboard"
+    }
   }
 });
 var getAnonClient = () => {
@@ -21682,6 +22013,22 @@ var HourlyOutputChart = ({
     // Keep original data for labels
     color: (animatedData[i] || 0) >= Math.round(pphThreshold) ? "#00AB45" : "#E34329"
   }));
+  const maxYValue = Math.ceil(pphThreshold * 1.5);
+  const generateYAxisTicks = () => {
+    const targetValue = Math.round(pphThreshold);
+    const ticks = [0];
+    if (targetValue > 0) {
+      ticks.push(targetValue);
+    }
+    const step = Math.ceil((maxYValue - targetValue) / 2);
+    if (step > 5) {
+      for (let i = targetValue + step; i < maxYValue; i += step) {
+        ticks.push(i);
+      }
+    }
+    ticks.push(maxYValue);
+    return [...new Set(ticks)].sort((a, b) => a - b);
+  };
   const renderLegend = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 absolute -bottom-1 left-0 right-0 bg-white py-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-t-2 border-[#E34329] border-dashed" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -21721,7 +22068,8 @@ var HourlyOutputChart = ({
             {
               tickMargin: 8,
               width: 35,
-              ticks: [0, Math.round(pphThreshold), ...Array.from({ length: 4 }, (_, i) => (i + 1) * 50)].sort((a, b) => a - b),
+              domain: [0, maxYValue],
+              ticks: generateYAxisTicks(),
               tickFormatter: (value) => value,
               tick: (props) => {
                 const { x, y, payload } = props;
@@ -27774,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,
@@ -28315,146 +28663,127 @@ var SingleVideoStream = ({
   );
 };
 var SingleVideoStream_default = SingleVideoStream;
-
-// src/lib/api/optifye-agent.ts
-var OPTIFYE_API_URL = "https://optifye-agent-production.up.railway.app";
-var OptifyeAgentClient = class {
-  constructor(apiUrl = OPTIFYE_API_URL) {
-    this.apiUrl = apiUrl;
-  }
-  /**
-   * Call Optifye Agent for manufacturing analysis
-   */
-  async getManufacturingInsights(userQuestion, lineId, shiftId, companyId, context) {
-    try {
-      const requestData = {
-        prompt: userQuestion,
-        line_id: lineId,
-        shift_id: shiftId,
-        company_id: companyId
-      };
-      if (context) {
-        requestData.context = context;
-      }
-      console.log("[OptifyeAgent] Sending request:", requestData);
-      const response = await fetch(`${this.apiUrl}/api/custom-analysis`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(requestData),
-        signal: AbortSignal.timeout(6e4)
-        // 60 second timeout
-      });
-      const responseText = await response.text();
-      console.log("[OptifyeAgent] Response status:", response.status);
-      console.log("[OptifyeAgent] Response text:", responseText);
-      let result;
+var ThreadSidebar = ({
+  activeThreadId,
+  onSelectThread,
+  onNewThread,
+  className = ""
+}) => {
+  const { threads, isLoading, error, deleteThread: deleteThread2 } = useThreads();
+  const [deletingId, setDeletingId] = React46.useState(null);
+  const handleDelete = async (e, threadId) => {
+    e.stopPropagation();
+    if (confirm("Are you sure you want to delete this conversation?")) {
+      setDeletingId(threadId);
       try {
-        result = JSON.parse(responseText);
-      } catch (parseError) {
-        console.error("[OptifyeAgent] Failed to parse response as JSON:", parseError);
-        if (responseText.includes("'Agent' object has no attribute")) {
-          return {
-            success: false,
-            error: "Server error: The AI agent service is experiencing issues. Please try again later or contact support."
-          };
-        }
-        return {
-          success: false,
-          error: `Invalid response format from server: ${responseText.substring(0, 200)}`
-        };
-      }
-      if (response.ok) {
-        return {
-          success: result.success ?? true,
-          analysis: result.analysis || result.response || result.message || result.data,
-          timestamp: result.timestamp,
-          error: result.error
-        };
-      } else {
-        const errorMsg = result.error || result.message || `API request failed: ${response.status}`;
-        console.error("[OptifyeAgent] API error:", errorMsg);
-        if (errorMsg.includes("'Agent' object has no attribute")) {
-          return {
-            success: false,
-            error: "The AI service is currently being updated. Please try again in a few moments."
-          };
+        await deleteThread2(threadId);
+        if (activeThreadId === threadId) {
+          onNewThread();
         }
-        return {
-          success: false,
-          error: errorMsg
-        };
-      }
-    } catch (error) {
-      const errorMsg = error instanceof Error ? `Failed to connect to Optifye Agent: ${error.message}` : "Failed to connect to Optifye Agent";
-      console.error("[OptifyeAgent] Request failed:", error);
-      if (error instanceof Error && error.name === "AbortError") {
-        return {
-          success: false,
-          error: "Request timed out. The AI agent is taking too long to respond. Please try again."
-        };
+      } catch (error2) {
+        console.error("Error deleting thread:", error2);
+        alert("Failed to delete conversation. Please try again.");
+      } finally {
+        setDeletingId(null);
       }
-      return {
-        success: false,
-        error: errorMsg
-      };
     }
-  }
-  /**
-   * Check if Optifye Agent API is healthy
-   */
-  async checkHealth() {
-    try {
-      const response = await fetch(`${this.apiUrl}/health`, {
-        signal: AbortSignal.timeout(1e4)
-        // 10 second timeout
-      });
-      if (response.ok) {
-        const healthData = await response.json();
-        return healthData.status === "healthy";
-      }
-      return false;
-    } catch (error) {
-      console.error("[OptifyeAgent] Health check failed:", error);
-      return false;
+  };
+  const formatDate = (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.jsx("div", { className: "flex-shrink-0 p-4 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onNewThread,
+        className: "w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4" }),
+          "New Chat"
+        ]
+      }
+    ) }),
+    /* @__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),
+        className: `group relative flex items-start gap-3 px-4 py-3 hover:bg-gray-100 cursor-pointer transition-colors ${activeThreadId === thread.id ? "bg-gray-100" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-gray-900 truncate", children: thread.title || "Untitled Chat" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: formatDate(thread.created_at) })
+          ] }),
+          deletingId === thread.id ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner_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 optifyeAgentClient = new OptifyeAgentClient();
-async function getManufacturingInsights(userQuestion, lineId, shiftId, companyId, context) {
-  if (!userQuestion || !userQuestion.trim()) {
-    return {
-      success: false,
-      error: "Please provide a question"
-    };
-  }
-  if (!lineId || !companyId) {
-    console.warn("[OptifyeAgent] Missing required IDs:", { lineId, companyId });
-  }
-  return optifyeAgentClient.getManufacturingInsights(
-    userQuestion,
-    lineId,
-    shiftId,
-    companyId,
-    context
-  );
-}
 var axelProfilePng = "/axel-profile.png";
 var AIAgentView = () => {
   const { navigate, pathname } = useNavigation();
+  const config = useDashboardConfig();
   const entityConfig = useEntityConfig();
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
   const [inputValue, setInputValue] = React46.useState("");
-  const [messages, setMessages] = React46.useState([]);
-  const [isLoading, setIsLoading] = React46.useState(false);
+  const [loadingThreads, setLoadingThreads] = React46.useState(/* @__PURE__ */ new Set());
   const [lastError, setLastError] = React46.useState(null);
   const [copiedMessageId, setCopiedMessageId] = React46.useState(null);
-  const [isTyping, setIsTyping] = React46.useState(false);
+  const [activeThreadId, setActiveThreadId] = React46.useState(void 0);
+  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;
+  };
+  const getStreamingState = (threadId) => {
+    return threadId ? streamingStates.get(threadId) || { message: "", reasoning: "" } : { message: "", reasoning: "" };
+  };
   const textareaRef = React46.useRef(null);
   const messagesEndRef = React46.useRef(null);
   const containerRef = React46.useRef(null);
+  const { createThread, mutate: mutateThreads } = useThreads();
+  const { messages, addMessage, setMessages } = useMessages(activeThreadId);
+  const agnoApiUrl = config.endpoints?.agnoApiUrl || "https://optifye-agent-production.up.railway.app";
+  const sseClient = React46.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;
@@ -28466,17 +28795,55 @@ 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";
       textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`;
     }
   }, [inputValue]);
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
   React46.useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.scrollTop = 0;
+    if (activeThreadId && messages.length > 0) {
+      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);
@@ -28486,311 +28853,721 @@ var AIAgentView = () => {
       console.error("Failed to copy text: ", err);
     }
   };
+  const handleNewThread = () => {
+    setActiveThreadId(void 0);
+    setMessages([]);
+    setInputValue("");
+    setPendingThreadId(null);
+    setTypedText("");
+    localStorage.removeItem(ACTIVE_THREAD_STORAGE_KEY);
+    textareaRef.current?.focus();
+  };
+  React46.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() || isLoading) return;
+    if (!inputValue.trim() || !userId) return;
+    let currentThreadId = activeThreadId || `temp-${Date.now()}`;
+    if (isThreadLoading(currentThreadId)) return;
     const userMessage = inputValue.trim();
-    const messageId = Date.now().toString();
-    const newUserMessage = {
-      id: messageId,
+    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,
-      timestamp: /* @__PURE__ */ new Date()
+      reasoning: null,
+      model_id: null,
+      token_usage: null,
+      metadata: null,
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      position: messages.length
     };
-    setMessages((prev) => [...prev, newUserMessage]);
-    setInputValue("");
-    setIsLoading(true);
-    setIsTyping(true);
-    setLastError(null);
+    setMessages((prev) => [...prev, tempUserMessage]);
+    setTimeout(scrollToBottom, 100);
     try {
-      const conversationHistory = messages.slice(-10).map((msg) => ({
-        role: msg.role,
-        content: msg.content
-      }));
-      const context = {
-        timeframe: "flexible",
-        focus: "conversational",
-        conversation_style: "friendly_expert",
-        system_prompt: `You are Axel, a friendly and knowledgeable manufacturing expert. 
-        
-        Your personality:
-        - Warm, approachable, and professional
-        - You respond naturally to greetings and casual conversation
-        - You're passionate about manufacturing and love sharing your expertise
-        - You can discuss any manufacturing topic across any timeframe
-        
-        Guidelines:
-        - Respond to greetings warmly (e.g., "Hi" \u2192 "Hi there! How can I help you with your manufacturing needs today?")
-        - For manufacturing questions, provide detailed, actionable insights
-        - You can analyze past data, current performance, or future projections
-        - Always maintain a conversational tone while being informative
-        - If asked about non-manufacturing topics, politely redirect to your expertise
-        
-        Remember: You're not just an AI, you're Axel - a trusted manufacturing advisor who builds relationships with clients.`,
-        conversation_history: conversationHistory,
-        allow_any_timeframe: true,
-        personality_traits: ["friendly", "expert", "conversational", "helpful"]
-      };
-      console.log("[AIAgentView] Submitting message:", {
-        message: userMessage,
-        lineId,
-        shiftId,
-        companyId,
-        context
-      });
-      const result = await getManufacturingInsights(
+      await sseClient.sendMessage(
         userMessage,
-        lineId,
-        shiftId,
-        companyId,
-        context
+        userId,
+        activeThreadId || null,
+        {
+          companyId,
+          lineId,
+          shiftId
+        },
+        {
+          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;
+            });
+          },
+          onReasoning: (text) => {
+            setStreamingStates((prev) => {
+              const newMap = new Map(prev);
+              const current = newMap.get(currentThreadId) || { message: "", reasoning: "" };
+              newMap.set(currentThreadId, { ...current, reasoning: current.reasoning + 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));
+          }
+        }
       );
-      if (result.success && result.analysis) {
-        const assistantMessage = {
-          id: Date.now().toString(),
-          role: "assistant",
-          content: result.analysis,
-          timestamp: /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => [...prev, assistantMessage]);
-      } else {
-        const errorMessage = result.error || "Sorry, I encountered an error processing your request. Please try again.";
-        const errorAssistantMessage = {
-          id: Date.now().toString(),
-          role: "assistant",
-          content: errorMessage,
-          timestamp: /* @__PURE__ */ new Date(),
-          error: true
-        };
-        setMessages((prev) => [...prev, errorAssistantMessage]);
-        setLastError(errorMessage);
-        console.error("[AIAgentView] API returned error:", errorMessage);
-      }
     } catch (error) {
-      console.error("[AIAgentView] Error calling Optifye Agent:", error);
-      const errorMessage = "I apologize, but I encountered an unexpected error. Please try again or contact support if the issue persists.";
-      const errorAssistantMessage = {
-        id: Date.now().toString(),
-        role: "assistant",
-        content: errorMessage,
-        timestamp: /* @__PURE__ */ new Date(),
-        error: true
-      };
-      setMessages((prev) => [...prev, errorAssistantMessage]);
+      console.error("[AIAgentView] Error in chat:", error);
+      const errorMessage = error instanceof Error ? error.message : "An unexpected error occurred";
       setLastError(errorMessage);
-    } finally {
-      setIsLoading(false);
-      setIsTyping(false);
+      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();
-      handleSubmit(e);
+      if (!isCurrentThreadLoading) {
+        handleSubmit(e);
+      }
     }
   };
   const formatMessage = (content) => {
-    return content.split("\n").map((line, i) => {
-      line = line.replace(/\*\*(.*?)\*\*/g, '<strong class="font-semibold text-gray-900">$1</strong>');
-      if (line.startsWith("\u2022")) {
-        line = `<li class="ml-4 mb-1 text-gray-700">${line.substring(1).trim()}</li>`;
+    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 (/^\d+\./.test(line)) {
-        line = `<li class="ml-4 mb-1 text-gray-700">${line}</li>`;
+      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);
+            }
+          }
+        }
       }
-      line = line.replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800">$1</code>');
-      return line;
-    }).join("<br/>");
-  };
-  const clearConversation = () => {
-    setMessages([]);
-    setLastError(null);
-    textareaRef.current?.focus();
+      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++) {
+      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-2xl font-bold 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 formatTime2 = (timestamp) => {
-    return timestamp.toLocaleTimeString([], {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString([], {
       hour: "2-digit",
       minute: "2-digit",
       hour12: false
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-screen bg-white", 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 relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: () => navigate("/"),
-          className: "absolute left-0 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-1 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("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: "absolute right-0 w-24" })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "main",
+  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) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        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: [
-          messages.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",
-              {
-                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." })
+        className: "formatted-content",
+        dangerouslySetInnerHTML: { __html: formatMessage(content) }
+      }
+    );
+  };
+  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;
+            }
+          }
+        `
+    } }),
+    /* @__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: "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: "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 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" })
+                    ] })
+                  ] })
+                ] })
+              ] })
             ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-            messages.map((message) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                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.jsxs("div", { className: `max-w-[75%] group ${message.role === "user" ? "order-1" : ""}`, children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
+          ) : 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",
+                {
+                  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" : message.error ? "bg-red-50 border border-red-200" : "bg-white border border-gray-200/80"}`,
-                        children: [
-                          message.error && message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-3 pb-3 border-b border-red-200", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-4 h-4 text-red-500 flex-shrink-0" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-red-700", children: "Error Processing Request" })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              className: `prose prose-sm max-w-none ${message.role === "user" ? "text-white prose-headings:text-white prose-strong:text-white" : "text-gray-800 prose-headings:text-gray-900 prose-strong:text-gray-900"}`,
-                              dangerouslySetInnerHTML: {
-                                __html: message.role === "assistant" ? formatMessage(message.content) : message.content
-                              }
-                            }
-                          ),
-                          message.role === "assistant" && !message.error && /* @__PURE__ */ jsxRuntime.jsx(
-                            "button",
-                            {
-                              onClick: () => copyToClipboard(message.content, message.id),
-                              className: "absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1.5 hover:bg-gray-100 rounded-lg",
-                              title: "Copy message",
-                              children: copiedMessageId === message.id ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4 text-gray-500" })
-                            }
-                          )
-                        ]
+                        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" })
+                        ] })
                       }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `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: formatTime2(message.timestamp) }),
-                      message.role === "assistant" && !message.error && /* @__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-${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..." })
+                ] }) })
+              ] })
+            ] }) })
+          ) : (
+            /* 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",
+                {
+                  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.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 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.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                onClick: () => copyToClipboard(message.content, message.id.toString()),
+                                className: "absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1.5 hover:bg-gray-100 rounded-lg",
+                                title: "Copy message",
+                                children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 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-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime2(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-${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-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("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" } })
                   ] }),
-                  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
-            )),
-            isLoading && /* @__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-[75%]", 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("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: [
-      messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: clearConversation,
-          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" }),
-            "Clear conversation"
-          ]
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 text-sm", children: "Axel is thinking..." })
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+            ] }) })
+          )
         }
-      ) }),
-      /* @__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: isLoading,
-                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",
+      ),
+      (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",
+          {
+            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",
             {
-              type: "submit",
-              disabled: !inputValue.trim() || isLoading,
-              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: [
-                isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: isLoading ? "Sending..." : "Send" })
-              ]
+              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-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("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;
@@ -31239,10 +32016,7 @@ var ShiftsView = ({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 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: "Shift Management" }),
-          /* @__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", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl sm:text-2xl md:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: "Shift Management" }) }),
         /* @__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: "absolute right-0 w-24" })
@@ -33543,6 +34317,131 @@ var S3Service = class {
     }
   }
 };
+
+// src/lib/api/optifye-agent.ts
+var OPTIFYE_API_URL = "https://optifye-agent-production.up.railway.app";
+var OptifyeAgentClient = class {
+  constructor(apiUrl = OPTIFYE_API_URL) {
+    this.apiUrl = apiUrl;
+  }
+  /**
+   * Call Optifye Agent for manufacturing analysis
+   */
+  async getManufacturingInsights(userQuestion, lineId, shiftId, companyId, context) {
+    try {
+      const requestData = {
+        prompt: userQuestion,
+        line_id: lineId,
+        shift_id: shiftId,
+        company_id: companyId
+      };
+      if (context) {
+        requestData.context = context;
+      }
+      console.log("[OptifyeAgent] Sending request:", requestData);
+      const response = await fetch(`${this.apiUrl}/api/custom-analysis`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(requestData),
+        signal: AbortSignal.timeout(6e4)
+        // 60 second timeout
+      });
+      const responseText = await response.text();
+      console.log("[OptifyeAgent] Response status:", response.status);
+      console.log("[OptifyeAgent] Response text:", responseText);
+      let result;
+      try {
+        result = JSON.parse(responseText);
+      } catch (parseError) {
+        console.error("[OptifyeAgent] Failed to parse response as JSON:", parseError);
+        if (responseText.includes("'Agent' object has no attribute")) {
+          return {
+            success: false,
+            error: "Server error: The AI agent service is experiencing issues. Please try again later or contact support."
+          };
+        }
+        return {
+          success: false,
+          error: `Invalid response format from server: ${responseText.substring(0, 200)}`
+        };
+      }
+      if (response.ok) {
+        return {
+          success: result.success ?? true,
+          analysis: result.analysis || result.response || result.message || result.data,
+          timestamp: result.timestamp,
+          error: result.error
+        };
+      } else {
+        const errorMsg = result.error || result.message || `API request failed: ${response.status}`;
+        console.error("[OptifyeAgent] API error:", errorMsg);
+        if (errorMsg.includes("'Agent' object has no attribute")) {
+          return {
+            success: false,
+            error: "The AI service is currently being updated. Please try again in a few moments."
+          };
+        }
+        return {
+          success: false,
+          error: errorMsg
+        };
+      }
+    } catch (error) {
+      const errorMsg = error instanceof Error ? `Failed to connect to Optifye Agent: ${error.message}` : "Failed to connect to Optifye Agent";
+      console.error("[OptifyeAgent] Request failed:", error);
+      if (error instanceof Error && error.name === "AbortError") {
+        return {
+          success: false,
+          error: "Request timed out. The AI agent is taking too long to respond. Please try again."
+        };
+      }
+      return {
+        success: false,
+        error: errorMsg
+      };
+    }
+  }
+  /**
+   * Check if Optifye Agent API is healthy
+   */
+  async checkHealth() {
+    try {
+      const response = await fetch(`${this.apiUrl}/health`, {
+        signal: AbortSignal.timeout(1e4)
+        // 10 second timeout
+      });
+      if (response.ok) {
+        const healthData = await response.json();
+        return healthData.status === "healthy";
+      }
+      return false;
+    } catch (error) {
+      console.error("[OptifyeAgent] Health check failed:", error);
+      return false;
+    }
+  }
+};
+var optifyeAgentClient = new OptifyeAgentClient();
+async function getManufacturingInsights(userQuestion, lineId, shiftId, companyId, context) {
+  if (!userQuestion || !userQuestion.trim()) {
+    return {
+      success: false,
+      error: "Please provide a question"
+    };
+  }
+  if (!lineId || !companyId) {
+    console.warn("[OptifyeAgent] Missing required IDs:", { lineId, companyId });
+  }
+  return optifyeAgentClient.getManufacturingInsights(
+    userQuestion,
+    lineId,
+    shiftId,
+    companyId,
+    context
+  );
+}
 function createStreamProxyHandler(config) {
   const cloudFrontDomain = config?.cloudFrontDomain || "https://d1eiob0chi5jw.cloudfront.net";
   return async function handler(req, res) {
@@ -33726,6 +34625,7 @@ exports.ProfileView = ProfileView_default;
 exports.RegistryProvider = RegistryProvider;
 exports.S3Service = S3Service;
 exports.SOPComplianceChart = SOPComplianceChart;
+exports.SSEChatClient = SSEChatClient;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -33744,6 +34644,7 @@ exports.Skeleton = Skeleton;
 exports.SupabaseProvider = SupabaseProvider;
 exports.TargetWorkspaceGrid = TargetWorkspaceGrid;
 exports.TargetsView = TargetsView_default;
+exports.ThreadSidebar = ThreadSidebar;
 exports.TimeDisplay = TimeDisplay_default;
 exports.VideoCard = VideoCard;
 exports.VideoGridView = VideoGridView;
@@ -33777,12 +34678,14 @@ exports.createStreamProxyHandler = createStreamProxyHandler;
 exports.createSupabaseClient = createSupabaseClient;
 exports.createThrottledReload = createThrottledReload;
 exports.dashboardService = dashboardService;
+exports.deleteThread = deleteThread;
 exports.formatDateInZone = formatDateInZone;
 exports.formatDateTimeInZone = formatDateTimeInZone;
 exports.formatISTDate = formatISTDate;
 exports.formatIdleTime = formatIdleTime;
 exports.formatTimeInZone = formatTimeInZone;
 exports.fromUrlFriendlyName = fromUrlFriendlyName;
+exports.getAllThreadMessages = getAllThreadMessages;
 exports.getAllWorkspaceDisplayNamesAsync = getAllWorkspaceDisplayNamesAsync;
 exports.getAnonClient = getAnonClient;
 exports.getCameraNumber = getCameraNumber;
@@ -33803,6 +34706,9 @@ exports.getS3VideoSrc = getS3VideoSrc;
 exports.getShortWorkspaceDisplayName = getShortWorkspaceDisplayName;
 exports.getShortWorkspaceDisplayNameAsync = getShortWorkspaceDisplayNameAsync;
 exports.getStoredWorkspaceMappings = getStoredWorkspaceMappings;
+exports.getThreadMessages = getThreadMessages;
+exports.getUserThreads = getUserThreads;
+exports.getUserThreadsPaginated = getUserThreadsPaginated;
 exports.getWorkspaceDisplayName = getWorkspaceDisplayName;
 exports.getWorkspaceDisplayNameAsync = getWorkspaceDisplayNameAsync;
 exports.getWorkspaceDisplayNamesMap = getWorkspaceDisplayNamesMap;
@@ -33834,6 +34740,7 @@ exports.throttledReloadDashboard = throttledReloadDashboard;
 exports.toUrlFriendlyName = toUrlFriendlyName;
 exports.trackCoreEvent = trackCoreEvent;
 exports.trackCorePageView = trackCorePageView;
+exports.updateThreadTitle = updateThreadTitle;
 exports.useAnalyticsConfig = useAnalyticsConfig;
 exports.useAuth = useAuth;
 exports.useAuthConfig = useAuthConfig;
@@ -33857,6 +34764,7 @@ exports.useLineDetailedMetrics = useLineDetailedMetrics;
 exports.useLineKPIs = useLineKPIs;
 exports.useLineMetrics = useLineMetrics;
 exports.useLineWorkspaceMetrics = useLineWorkspaceMetrics;
+exports.useMessages = useMessages;
 exports.useMetrics = useMetrics;
 exports.useNavigation = useNavigation;
 exports.useOverrides = useOverrides;
@@ -33870,6 +34778,7 @@ exports.useSupabaseClient = useSupabaseClient;
 exports.useTargets = useTargets;
 exports.useTheme = useTheme;
 exports.useThemeConfig = useThemeConfig;
+exports.useThreads = useThreads;
 exports.useWorkspaceConfig = useWorkspaceConfig;
 exports.useWorkspaceDetailedMetrics = useWorkspaceDetailedMetrics;
 exports.useWorkspaceDisplayName = useWorkspaceDisplayName;