@terryavg/neptune-ai-chatbot 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import {
-  chatClient,
-  configureChatClient
-} from "./chunk-5VL3YPMQ.mjs";
 import {
   ToolExecutionIndicator,
   ToolExecutionWidget
-} from "./chunk-C2VGAYER.mjs";
+} from "./chunk-2RXQ2EZ2.mjs";
+import {
+  chatClient,
+  configureChatClient
+} from "./chunk-VONUV37R.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -17,7 +17,8 @@ import {
   useEffect as useEffect4,
   useRef as useRef2,
   useLayoutEffect,
-  useCallback as useCallback2
+  useCallback as useCallback2,
+  startTransition as startTransition2
 } from "react";
 import {
   Trash2,
@@ -29,6 +30,7 @@ import {
   PanelRightOpen,
   MoreHorizontal
 } from "lucide-react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // app/components/chat-content.tsx
 import {
@@ -38,9 +40,11 @@ import {
   useMemo as useMemo2,
   useCallback,
   lazy,
-  Suspense
+  Suspense,
+  startTransition
 } from "react";
 import { X as X2, ArrowDownCircle } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
 
 // app/components/analytics-panel.tsx
 import { useState, useMemo, useEffect } from "react";
@@ -64,8 +68,7 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AnalyticsPanel({
   name,
-  csvData,
-  theme
+  csvData
 }) {
   const { headers, data } = useMemo(() => {
     var _a;
@@ -1267,19 +1270,35 @@ function AnalyticsPanel({
 
 // app/components/chat-content.tsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ChatInput = lazy(() => import("./chat-input-L5LIF4NP.mjs"));
-var DynamicChatMessage = lazy(() => import("./chat-message-FTACCRMO.mjs"));
+var ChatInput = lazy(() => import("./chat-input-ZAFYBUO7.mjs"));
+var DynamicChatMessage = lazy(() => import("./chat-message-NZNZX6VS.mjs"));
 var SCROLL_BOTTOM_THRESHOLD = 50;
 function ChatContent({
   conversation,
   agentId,
-  debug = false,
-  onConversationUpdate,
   theme,
-  onAppStateChange,
   onSidebarToggle,
   isReadOnly = false,
-  onThreadCreated
+  onThreadCreated,
+  messageBubbleColor,
+  accentColor,
+  scrollButtonColor = "#6366F1",
+  streamingText = "NAIA is working on it...",
+  streamingTextColor = "#2563EB",
+  welcomeMessagePrimary = "How can I help you today?",
+  welcomeMessageSecondary = "Feel free to ask any question you like \u2014 just be precise, as if you're speaking to a real person.",
+  welcomeIcon,
+  welcomeIconSize = "4rem",
+  streaming = true,
+  inputBackgroundColor = "#ffffff",
+  inputBackgroundColorDark = "#303030",
+  vectorColor,
+  vectorColorDark,
+  onToolStart,
+  onToolInput,
+  onToolFinish,
+  onChunk,
+  onFinish
 }) {
   const messagesEndRef = useRef(null);
   const scrollContainerRef = useRef(null);
@@ -1291,10 +1310,10 @@ function ChatContent({
     null
   );
   const streamingMessageRef = useRef(null);
+  const previousConversationIdRef = useRef(conversation.id);
   const [errorDialog, setErrorDialog] = useState2(null);
   const [showScrollToBottomButton, setShowScrollToBottomButton] = useState2(false);
   const [userHasScrolledUp, setUserHasScrolledUp] = useState2(false);
-  const [openApp, setOpenApp] = useState2(null);
   const [openAnalytic, setOpenAnalytic] = useState2(null);
   const [chatWidth, setChatWidth] = useState2(30);
   const [isResizingChatApp, setIsResizingChatApp] = useState2(false);
@@ -1303,7 +1322,7 @@ function ChatContent({
   const minChatWidth = 20;
   const maxChatWidth = 80;
   const hasMessages = messages.length > 0 || !!streamingMessage;
-  const hasOpenPanel = !!openApp || !!openAnalytic;
+  const hasOpenPanel = !!openAnalytic;
   const isWaitingForInput = useMemo2(() => {
     return conversation.waiting === true || messages.some((message) => message.waiting === true);
   }, [conversation.waiting, messages]);
@@ -1387,16 +1406,61 @@ function ChatContent({
     return () => clearTimeout(timeoutId);
   }, [conversation.id, scrollToBottom]);
   useEffect2(() => {
-    setMessages(conversation.messages || []);
-  }, [conversation.id, conversation.messages]);
-  useEffect2(() => {
-    if (openApp) {
-      setOpenApp(null);
+    const conversationMessages = conversation.messages || [];
+    const previousId = previousConversationIdRef.current;
+    const currentId = conversation.id;
+    const isTempToRealTransition = (previousId == null ? void 0 : previousId.startsWith("temp-")) && !currentId.startsWith("temp-") && isStreaming;
+    if (previousId !== currentId && !isTempToRealTransition) {
+      setMessages(conversationMessages);
+      previousConversationIdRef.current = currentId;
+      return;
+    }
+    if (isTempToRealTransition) {
+      previousConversationIdRef.current = currentId;
+    }
+    if (isStreaming && !isTempToRealTransition) {
+      return;
+    }
+    if (conversationMessages.length > 0 || isTempToRealTransition) {
+      setMessages((prevMessages) => {
+        if (prevMessages.length === 0) {
+          return conversationMessages;
+        }
+        const filteredLocalMessages = prevMessages.filter((localMsg) => {
+          if (localMsg.role === "assistant") {
+            return true;
+          }
+          const localTime = new Date(localMsg.createdAt).getTime();
+          const isLocalMessage = localMsg.id.startsWith("local-");
+          if (isLocalMessage) {
+            const hasBackendVersion = conversationMessages.some((backendMsg) => {
+              const backendTime = new Date(backendMsg.createdAt).getTime();
+              const timeDiff = Math.abs(backendTime - localTime);
+              return backendMsg.role === localMsg.role && timeDiff < 5e3;
+            });
+            return !hasBackendVersion;
+          }
+          return true;
+        });
+        const combined = [...filteredLocalMessages, ...conversationMessages];
+        const seen = /* @__PURE__ */ new Set();
+        const deduplicated = combined.filter((msg) => {
+          if (seen.has(msg.id)) {
+            return false;
+          }
+          seen.add(msg.id);
+          return true;
+        });
+        return deduplicated.sort((a, b) => {
+          return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+        });
+      });
     }
+  }, [conversation.id, conversation.messages, isStreaming]);
+  useEffect2(() => {
     if (openAnalytic) {
       setOpenAnalytic(null);
     }
-    onAppStateChange == null ? void 0 : onAppStateChange(false);
   }, [conversation.id]);
   useEffect2(() => {
     if (messages.length > 0 && !userHasScrolledUp) {
@@ -1433,14 +1497,16 @@ function ChatContent({
   }, []);
   const handleAddUserMessage = useCallback(
     (message) => {
-      setMessages((prev) => [...prev, message]);
-      setUserHasScrolledUp(false);
-      setShowScrollToBottomButton(false);
+      startTransition(() => {
+        setMessages((prev) => [...prev, message]);
+        setUserHasScrolledUp(false);
+        setShowScrollToBottomButton(false);
+      });
       setTimeout(() => {
-        scrollToBottom("smooth");
-      }, 50);
+        scrollToBottom(messages.length === 0 ? "instant" : "smooth");
+      }, messages.length === 0 ? 600 : 50);
     },
-    [scrollToBottom]
+    [messages.length, scrollToBottom]
   );
   const handleStreamStart = useCallback(() => {
     const newStreamingMessage = {
@@ -1454,8 +1520,10 @@ function ChatContent({
       role: newStreamingMessage.role,
       createdAt: newStreamingMessage.createdAt
     };
-    setStreamingMessage(newStreamingMessage);
-    setIsStreaming(true);
+    startTransition(() => {
+      setStreamingMessage(newStreamingMessage);
+      setIsStreaming(true);
+    });
   }, []);
   const handleToolExecutionStart = useCallback((toolName) => {
     setStreamingMessage((prev) => {
@@ -1527,21 +1595,30 @@ function ChatContent({
         }), metadata && {
           metadata: {
             logId: metadata.logId,
-            steps: metadata.steps
+            steps: metadata.steps,
+            vectors: metadata.vectors
           }
         });
       }
       if (messageToAdd) {
         setMessages((prev) => [...prev, messageToAdd]);
+        streamingMessageRef.current = {
+          id: messageToAdd.id,
+          role: messageToAdd.role,
+          createdAt: messageToAdd.createdAt
+        };
+        setTimeout(() => {
+          streamingMessageRef.current = null;
+        }, 1e3);
+      } else {
+        streamingMessageRef.current = null;
       }
       setIsStreaming(false);
       setStreamingMessage(null);
-      streamingMessageRef.current = null;
     },
     []
   );
   const handleError = useCallback((details) => {
-    console.log("handleError called with:", details);
     setIsStreaming(false);
     setStreamingMessage(null);
     streamingMessageRef.current = null;
@@ -1549,191 +1626,20 @@ function ChatContent({
     setShowScrollToBottomButton(false);
   }, []);
   const handleStopStreaming = useCallback(() => {
-    console.log("Stop streaming requested");
     setIsStreaming(false);
     setStreamingMessage(null);
     streamingMessageRef.current = null;
   }, []);
-  const handleAppOpen = useCallback(
-    (name, url) => {
-      setOpenAnalytic(null);
-      setOpenApp({ name, url });
-      onAppStateChange == null ? void 0 : onAppStateChange(true);
-    },
-    [onAppStateChange]
-  );
   const handleAnalyticOpen = useCallback(
     (name, data) => {
-      setOpenApp(null);
       setOpenAnalytic({ name, data });
-      onAppStateChange == null ? void 0 : onAppStateChange(true);
       onSidebarToggle == null ? void 0 : onSidebarToggle();
     },
-    [onAppStateChange, onSidebarToggle]
+    [onSidebarToggle]
   );
   const handlePanelClose = useCallback(() => {
-    setOpenApp(null);
     setOpenAnalytic(null);
-    onAppStateChange == null ? void 0 : onAppStateChange(false);
-  }, [onAppStateChange]);
-  const handleWidgetSubmit = useCallback(
-    async (data, actionId, messageId, widgetId) => {
-      try {
-        setMessages(
-          (prev) => prev.map(
-            (message) => message.id === messageId ? __spreadProps(__spreadValues({}, message), { waiting: false }) : message
-          )
-        );
-        if (conversation.waiting === true) {
-        }
-        const stepData = {
-          action: actionId,
-          data,
-          id: widgetId,
-          // Use the actual widget ID passed from the form
-          messageId
-          // Backend will use this to update message.waiting = false
-        };
-        if (agentId) {
-          handleStreamStart();
-          const { stream } = await chatClient.messages.sendMessage(
-            agentId,
-            conversation.id,
-            "",
-            //`Processing form submission...`, // Simple processing message
-            messages,
-            new AbortController().signal,
-            debug,
-            stepData,
-            conversation.isTemporary
-            // Pass isTemporary flag
-          );
-          const reader = stream.getReader();
-          const decoder = new TextDecoder();
-          let done = false;
-          let accumulatedResponse = "";
-          while (!done) {
-            const { value, done: readerDone } = await reader.read();
-            done = readerDone;
-            if (value) {
-              const chunk = decoder.decode(value, {
-                stream: !done
-              });
-              if (chunk) {
-                accumulatedResponse += chunk;
-                handleStreamUpdate(chunk);
-              }
-            }
-          }
-          handleStreamEnd(accumulatedResponse);
-          if (onConversationUpdate) {
-            try {
-              await onConversationUpdate();
-            } catch (error) {
-              console.error(
-                "Failed to refresh conversation after form submission:",
-                error
-              );
-            }
-          }
-        }
-      } catch (error) {
-        console.error("Error submitting form:", error);
-        handleError({
-          title: "Form Submission Error",
-          message: "Failed to submit form data. Please try again."
-        });
-      }
-    },
-    [
-      agentId,
-      conversation.id,
-      messages,
-      debug,
-      handleStreamStart,
-      handleStreamUpdate,
-      handleStreamEnd,
-      handleError
-    ]
-  );
-  const handleWidgetCancel = useCallback(
-    async (messageId, widgetId) => {
-      try {
-        setMessages(
-          (prev) => prev.map(
-            (message) => message.id === messageId ? __spreadProps(__spreadValues({}, message), { waiting: false }) : message
-          )
-        );
-        const stepData = {
-          action: "cancel",
-          data: null,
-          // No form data for cancellation
-          id: widgetId,
-          messageId
-        };
-        if (agentId) {
-          handleStreamStart();
-          const { stream } = await chatClient.messages.sendMessage(
-            agentId,
-            conversation.id,
-            "",
-            //cancelMessage.content,
-            messages,
-            new AbortController().signal,
-            debug,
-            stepData,
-            conversation.isTemporary
-            // Pass isTemporary flag
-          );
-          const reader = stream.getReader();
-          const decoder = new TextDecoder();
-          let done = false;
-          let accumulatedResponse = "";
-          while (!done) {
-            const { value, done: readerDone } = await reader.read();
-            done = readerDone;
-            if (value) {
-              const chunk = decoder.decode(value, {
-                stream: !done
-              });
-              if (chunk) {
-                accumulatedResponse += chunk;
-                handleStreamUpdate(chunk);
-              }
-            }
-          }
-          handleStreamEnd(accumulatedResponse);
-          if (onConversationUpdate) {
-            try {
-              await onConversationUpdate();
-            } catch (error) {
-              console.error(
-                "Failed to refresh conversation after form cancellation:",
-                error
-              );
-            }
-          }
-        }
-      } catch (error) {
-        console.error("Error cancelling form:", error);
-        handleError({
-          title: "Form Cancellation Error",
-          message: "Failed to cancel form. Please try again."
-        });
-      }
-    },
-    [
-      agentId,
-      conversation.id,
-      messages,
-      debug,
-      handleStreamStart,
-      handleStreamUpdate,
-      handleStreamEnd,
-      handleError,
-      onConversationUpdate
-    ]
-  );
+  }, []);
   const startResizingChatApp = useCallback(
     (e) => {
       e.preventDefault();
@@ -1821,161 +1727,264 @@ function ChatContent({
               style: hasOpenPanel ? { width: `${chatWidth}%` } : {},
               children: [
                 isResizingChatApp && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 z-40 bg-transparent cursor-col-resize" }),
-                hasMessages ? (
-                  // Standard layout with messages and input at bottom
-                  /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                    /* @__PURE__ */ jsx2(
-                      "div",
-                      {
-                        ref: scrollContainerRef,
-                        className: `flex-1 overflow-y-auto py-6 relative ${hasOpenPanel ? "px-2 sm:px-4" : "px-4 sm:px-8"}`,
-                        "data-ref": "scrollContainerRef",
-                        "data-main-chat-scroll": "true",
-                        children: /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-                          allMessages.map((message, index) => {
-                            const isCurrentlyStreaming = isStreaming && (streamingMessage == null ? void 0 : streamingMessage.id) === message.id;
-                            return (
-                              // @ts-ignore - Typescript doesn't recognize dynamic imports properly
+                /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      ref: scrollContainerRef,
+                      className: `flex-1 overflow-y-auto py-6 relative ${hasOpenPanel ? "px-2 sm:px-4" : "px-4 sm:px-8"} ${!hasMessages ? "flex flex-col items-center justify-center" : ""}`,
+                      "data-ref": "scrollContainerRef",
+                      "data-main-chat-scroll": "true",
+                      children: [
+                        /* @__PURE__ */ jsx2(AnimatePresence, { mode: "wait", children: !hasMessages && !isReadOnly && /* @__PURE__ */ jsxs2(
+                          motion.div,
+                          {
+                            initial: { opacity: 0, y: 20 },
+                            animate: { opacity: 1, y: 0 },
+                            exit: { opacity: 0, y: -20 },
+                            transition: { duration: 0.6, type: "spring", bounce: 0.15 },
+                            className: "flex flex-col items-center w-full max-w-4xl mx-auto",
+                            children: [
+                              welcomeIcon && /* @__PURE__ */ jsx2(
+                                motion.div,
+                                {
+                                  initial: { scale: 0.8, opacity: 0 },
+                                  animate: { scale: 1, opacity: 1 },
+                                  transition: { delay: 0.1, duration: 0.5 },
+                                  className: "mb-4",
+                                  children: /* @__PURE__ */ jsx2(
+                                    "img",
+                                    {
+                                      src: welcomeIcon,
+                                      alt: "Welcome icon",
+                                      style: {
+                                        width: welcomeIconSize,
+                                        height: welcomeIconSize
+                                      },
+                                      className: "object-contain"
+                                    }
+                                  )
+                                }
+                              ),
                               /* @__PURE__ */ jsx2(
-                                DynamicChatMessage,
+                                motion.h2,
                                 {
-                                  message,
-                                  isStreaming: isCurrentlyStreaming,
-                                  theme,
-                                  onAppOpen: handleAppOpen,
-                                  onAnalyticOpen: handleAnalyticOpen,
-                                  onWidgetSubmit: handleWidgetSubmit,
-                                  onWidgetCancel: handleWidgetCancel
-                                },
-                                message.id || index
+                                  initial: { opacity: 0, y: 10 },
+                                  animate: { opacity: 1, y: 0 },
+                                  transition: { delay: 0.2, duration: 0.5 },
+                                  className: `mb-2 font-bold ${hasOpenPanel ? "text-lg" : "text-2xl"}`,
+                                  children: welcomeMessagePrimary
+                                }
+                              ),
+                              /* @__PURE__ */ jsx2(
+                                motion.p,
+                                {
+                                  initial: { opacity: 0, y: 10 },
+                                  animate: { opacity: 1, y: 0 },
+                                  transition: { delay: 0.3, duration: 0.5 },
+                                  className: `text-center text-gray-500 mb-8 ${hasOpenPanel ? "text-sm max-w-xs" : "max-w-md"}`,
+                                  children: welcomeMessageSecondary
+                                }
+                              ),
+                              /* @__PURE__ */ jsx2(
+                                motion.div,
+                                {
+                                  initial: { opacity: 0, y: 10 },
+                                  animate: { opacity: 1, y: 0 },
+                                  transition: { delay: 0.4, duration: 0.5 },
+                                  className: `w-full ${hasOpenPanel ? "max-w-xs" : "max-w-xl"}`,
+                                  children: /* @__PURE__ */ jsx2(Suspense, { fallback: null, children: /* @__PURE__ */ jsx2(
+                                    ChatInput,
+                                    {
+                                      conversationId: conversation.id,
+                                      agentId,
+                                      onAddUserMessage: handleAddUserMessage,
+                                      onStreamStart: handleStreamStart,
+                                      onStreamUpdate: handleStreamUpdate,
+                                      onStreamEnd: handleStreamEnd,
+                                      onError: handleError,
+                                      messages: [],
+                                      isStreaming,
+                                      onStopStreaming: handleStopStreaming,
+                                      disabled: isWaitingForInput,
+                                      onThreadCreated,
+                                      onToolExecutionStart: handleToolExecutionStart,
+                                      onToolExecutionEnd: handleToolExecutionEnd,
+                                      onToolStart,
+                                      onToolInput,
+                                      onToolFinish,
+                                      onChunk,
+                                      onFinish,
+                                      accentColor,
+                                      streaming,
+                                      theme,
+                                      inputBackgroundColor,
+                                      inputBackgroundColorDark
+                                    }
+                                  ) })
+                                }
                               )
-                            );
-                          }),
-                          /* @__PURE__ */ jsx2(
-                            "div",
-                            {
-                              ref: messagesEndRef,
-                              "data-ref": "messagesEndRef"
-                            }
-                          )
-                        ] })
-                      }
-                    ),
-                    !isReadOnly && /* @__PURE__ */ jsxs2(
-                      "div",
-                      {
-                        className: `border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 ${hasOpenPanel ? "p-2 sm:p-3" : "p-4 sm:p-6"}`,
-                        children: [
-                          isWaitingForInput && /* @__PURE__ */ jsxs2("div", { className: "mb-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg", children: [
-                            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-                              /* @__PURE__ */ jsxs2("div", { className: "flex space-x-1", children: [
-                                /* @__PURE__ */ jsx2("div", { className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse" }),
-                                /* @__PURE__ */ jsx2(
-                                  "div",
+                            ]
+                          },
+                          "welcome-state"
+                        ) }),
+                        !hasMessages && isReadOnly && /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+                          /* @__PURE__ */ jsx2("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: "Log View" }),
+                          /* @__PURE__ */ jsx2("p", { className: "text-gray-500 dark:text-gray-400", children: "This log contains no messages." })
+                        ] }),
+                        hasMessages && /* @__PURE__ */ jsxs2(
+                          motion.div,
+                          {
+                            initial: { opacity: 0, y: 20 },
+                            animate: { opacity: 1, y: 0 },
+                            exit: { opacity: 0, y: -20 },
+                            transition: { duration: 0.4, ease: "easeOut" },
+                            className: "space-y-2",
+                            children: [
+                              allMessages.map((message, index) => {
+                                var _a;
+                                const isCurrentlyStreaming = isStreaming && (streamingMessage == null ? void 0 : streamingMessage.id) === message.id;
+                                const wasJustStreamed = ((_a = streamingMessageRef.current) == null ? void 0 : _a.id) === message.id;
+                                return /* @__PURE__ */ jsx2(
+                                  motion.div,
                                   {
-                                    className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse",
-                                    style: {
-                                      animationDelay: "0.2s"
-                                    }
+                                    initial: { opacity: wasJustStreamed ? 1 : 0, x: wasJustStreamed ? 0 : -20 },
+                                    animate: { opacity: 1, x: 0 },
+                                    transition: {
+                                      duration: isCurrentlyStreaming || wasJustStreamed ? 0 : 0.3,
+                                      delay: isCurrentlyStreaming || wasJustStreamed ? 0 : index * 0.05,
+                                      ease: "easeOut"
+                                    },
+                                    children: /* @__PURE__ */ jsx2(
+                                      DynamicChatMessage,
+                                      {
+                                        message,
+                                        isStreaming: isCurrentlyStreaming,
+                                        theme,
+                                        onAnalyticOpen: handleAnalyticOpen,
+                                        messageBubbleColor,
+                                        streamingText,
+                                        streamingTextColor,
+                                        vectorColor,
+                                        vectorColorDark,
+                                        agentId,
+                                        onFeedbackChange: (messageId, feedbackPositive) => {
+                                          setMessages((prev) => prev.map(
+                                            (msg) => msg.id === messageId ? __spreadProps(__spreadValues({}, msg), {
+                                              metadata: __spreadProps(__spreadValues({}, msg.metadata), {
+                                                feedbackPositive
+                                              })
+                                            }) : msg
+                                          ));
+                                        }
+                                      }
+                                    )
+                                  },
+                                  message.id || index
+                                );
+                              }),
+                              /* @__PURE__ */ jsx2(
+                                "div",
+                                {
+                                  ref: messagesEndRef,
+                                  "data-ref": "messagesEndRef"
+                                }
+                              )
+                            ]
+                          },
+                          conversation.id
+                        )
+                      ]
+                    }
+                  ),
+                  !isReadOnly && hasMessages && /* @__PURE__ */ jsx2(
+                    motion.div,
+                    {
+                      layout: true,
+                      initial: false,
+                      transition: {
+                        layout: { duration: 0.6, type: "spring", bounce: 0.15 }
+                      },
+                      className: "relative border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 z-20",
+                      children: /* @__PURE__ */ jsxs2("div", { className: hasOpenPanel ? "p-2 sm:p-3 w-full" : "p-4 sm:p-6 w-full max-w-4xl mx-auto", children: [
+                        isWaitingForInput && /* @__PURE__ */ jsxs2("div", { className: "mb-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg", children: [
+                          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsxs2("div", { className: "flex space-x-1", children: [
+                              /* @__PURE__ */ jsx2("div", { className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse" }),
+                              /* @__PURE__ */ jsx2(
+                                "div",
+                                {
+                                  className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse",
+                                  style: {
+                                    animationDelay: "0.2s"
                                   }
-                                ),
-                                /* @__PURE__ */ jsx2(
-                                  "div",
-                                  {
-                                    className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse",
-                                    style: {
-                                      animationDelay: "0.4s"
-                                    }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx2(
+                                "div",
+                                {
+                                  className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse",
+                                  style: {
+                                    animationDelay: "0.4s"
                                   }
-                                )
-                              ] }),
-                              /* @__PURE__ */ jsx2("p", { className: "text-sm text-amber-800 dark:text-amber-200 font-medium", children: "Waiting for form input..." })
+                                }
+                              )
                             ] }),
-                            /* @__PURE__ */ jsx2("p", { className: "text-xs text-amber-700 dark:text-amber-300 mt-1", children: "Complete the form above or click Cancel to continue without data capture." })
+                            /* @__PURE__ */ jsx2("p", { className: "text-sm text-amber-800 dark:text-amber-200 font-medium", children: "Waiting for form input..." })
                           ] }),
-                          showScrollToBottomButton && /* @__PURE__ */ jsx2("div", { className: "absolute bottom-22 left-1/2 transform -translate-x-1/2 z-10", children: /* @__PURE__ */ jsx2(
-                            "button",
-                            {
-                              onClick: () => scrollToBottom("smooth"),
-                              className: "bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-3 shadow-lg transition-opacity duration-200 ease-in-out animate-bounce",
-                              title: "Scroll to bottom",
-                              children: /* @__PURE__ */ jsx2(ArrowDownCircle, { size: 24 })
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsx2(Suspense, { fallback: null, children: /* @__PURE__ */ jsx2(
-                            ChatInput,
-                            {
-                              conversationId: conversation.id,
-                              agentId,
-                              debug,
-                              onAddUserMessage: handleAddUserMessage,
-                              onStreamStart: handleStreamStart,
-                              onStreamUpdate: handleStreamUpdate,
-                              onStreamEnd: handleStreamEnd,
-                              onError: handleError,
-                              messages,
-                              isStreaming,
-                              onStopStreaming: handleStopStreaming,
-                              disabled: isWaitingForInput,
-                              onThreadCreated,
-                              onToolExecutionStart: handleToolExecutionStart,
-                              onToolExecutionEnd: handleToolExecutionEnd
-                            }
-                          ) })
-                        ]
-                      }
-                    )
-                  ] })
-                ) : (
-                  // Empty state with centered input - or read-only message for log mode
-                  /* @__PURE__ */ jsx2("div", { className: "flex h-full flex-col items-center justify-center p-4", children: isReadOnly ? /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
-                    /* @__PURE__ */ jsx2("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: "Log View" }),
-                    /* @__PURE__ */ jsx2("p", { className: "text-gray-500 dark:text-gray-400", children: "This log contains no messages." })
-                  ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-                    /* @__PURE__ */ jsxs2("div", { className: "mb-8 flex flex-col items-center", children: [
-                      /* @__PURE__ */ jsx2("div", { className: "mb-4 text-gray-500" }),
-                      /* @__PURE__ */ jsx2(
-                        "h2",
-                        {
-                          className: `mb-2 font-bold ${hasOpenPanel ? "text-lg" : "text-2xl"}`,
-                          children: "How can I help you today?"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx2(
-                        "p",
-                        {
-                          className: `text-center text-gray-500 ${hasOpenPanel ? "text-sm max-w-xs" : "max-w-md"}`,
-                          children: "Feel free to ask any question you like \u2014 just be precise, as if you're speaking to a real person."
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx2(
-                      "div",
-                      {
-                        className: `w-full ${hasOpenPanel ? "max-w-sm" : "max-w-2xl"} px-4`,
-                        children: /* @__PURE__ */ jsx2(Suspense, { fallback: null, children: /* @__PURE__ */ jsx2(
+                          /* @__PURE__ */ jsx2("p", { className: "text-xs text-amber-700 dark:text-amber-300 mt-1", children: "Complete the form above or click Cancel to continue without data capture." })
+                        ] }),
+                        showScrollToBottomButton && /* @__PURE__ */ jsx2("div", { className: "absolute bottom-22 left-1/2 transform -translate-x-1/2 z-10", children: /* @__PURE__ */ jsx2(
+                          "button",
+                          {
+                            onClick: () => scrollToBottom("smooth"),
+                            className: "text-white rounded-full p-3 shadow-lg transition-all duration-200 ease-in-out animate-bounce",
+                            style: {
+                              backgroundColor: scrollButtonColor
+                            },
+                            onMouseEnter: (e) => {
+                              e.currentTarget.style.filter = "brightness(0.85)";
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.filter = "brightness(1)";
+                            },
+                            title: "Scroll to bottom",
+                            children: /* @__PURE__ */ jsx2(ArrowDownCircle, { size: 24 })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx2(Suspense, { fallback: null, children: /* @__PURE__ */ jsx2(
                           ChatInput,
                           {
                             conversationId: conversation.id,
                             agentId,
-                            debug,
                             onAddUserMessage: handleAddUserMessage,
                             onStreamStart: handleStreamStart,
                             onStreamUpdate: handleStreamUpdate,
                             onStreamEnd: handleStreamEnd,
                             onError: handleError,
-                            messages: [],
+                            messages,
                             isStreaming,
                             onStopStreaming: handleStopStreaming,
+                            disabled: isWaitingForInput,
                             onThreadCreated,
                             onToolExecutionStart: handleToolExecutionStart,
-                            onToolExecutionEnd: handleToolExecutionEnd
+                            onToolExecutionEnd: handleToolExecutionEnd,
+                            onToolStart,
+                            onToolInput,
+                            onToolFinish,
+                            onChunk,
+                            onFinish,
+                            accentColor,
+                            streaming,
+                            theme,
+                            inputBackgroundColor,
+                            inputBackgroundColorDark
                           }
                         ) })
-                      }
-                    )
-                  ] }) })
-                )
+                      ] })
+                    }
+                  )
+                ] })
               ]
             }
           ),
@@ -1999,8 +2008,8 @@ function ChatContent({
                 /* @__PURE__ */ jsx2(
                   "div",
                   {
-                    className: `w-8 h-8 rounded-lg flex items-center justify-center ${openApp ? "bg-blue-500" : "bg-emerald-500"}`,
-                    children: openApp ? /* @__PURE__ */ jsx2(
+                    className: `w-8 h-8 rounded-lg flex items-center justify-center ${false ? "bg-blue-500" : "bg-emerald-500"}`,
+                    children: false ? /* @__PURE__ */ jsx2(
                       "svg",
                       {
                         className: "w-5 h-5 text-white",
@@ -2040,7 +2049,7 @@ function ChatContent({
                   }
                 ),
                 /* @__PURE__ */ jsxs2("div", { children: [
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-800 dark:text-gray-200", children: openApp ? openApp.name : "Analytics Dashboard" }),
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-800 dark:text-gray-200", children: false ? "openApp" : "Analytics Dashboard" }),
                   openAnalytic && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: openAnalytic.name })
                 ] })
               ] }),
@@ -2062,12 +2071,10 @@ function ChatContent({
             ] }),
             /* @__PURE__ */ jsxs2("div", { className: "flex-1 relative h-full", children: [
               isResizingChatApp && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 z-50 bg-transparent cursor-col-resize" }),
-              openApp ? /* @__PURE__ */ jsx2(
+              false ? /* @__PURE__ */ jsx2(
                 "iframe",
                 {
-                  src: openApp.url,
                   className: "w-full h-full border-0",
-                  title: openApp.name,
                   allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
                   sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation-by-user-activation"
                 }
@@ -2149,9 +2156,36 @@ import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-run
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect4;
 function NeptuneChatBot({
   agentId: propAgentId,
-  debug: propDebug = false,
   theme: propTheme = "light",
-  localDebug: propLocalDebug
+  localDebug: propLocalDebug,
+  title: propTitle = "Naia",
+  messageBubbleColor = "#E5E3F8",
+  messageBubbleColorDark = "rgba(168, 140, 250, 0.3)",
+  accentColor = "#8B7FD9",
+  accentColorDark = "#A88CFA",
+  scrollButtonColor = "#6366F1",
+  scrollButtonColorDark = "#818CF8",
+  streamingText = "NAIA is working on it...",
+  streamingTextColor = "#2563EB",
+  streamingTextColorDark = "#60A5FA",
+  welcomeMessagePrimary = "How can I help you today?",
+  welcomeMessageSecondary = "Feel free to ask any question you like \u2014 just be precise, as if you're speaking to a real person.",
+  welcomeIcon,
+  welcomeIconSize = "4rem",
+  streaming = true,
+  sidebarBackgroundColor = "#f9f9f9",
+  onToolStart,
+  onToolInput,
+  onToolFinish,
+  onChunk,
+  onFinish,
+  sidebarBackgroundColorDark = "#171717",
+  inputBackgroundColor = "#ffffff",
+  inputBackgroundColorDark = "#303030",
+  headerBackgroundColor = "#ffffff",
+  headerBackgroundColorDark = "#171717",
+  vectorColor = "#9333EA",
+  vectorColorDark = "#A855F7"
 }) {
   const [conversations, setConversations] = useState4([]);
   const [selectedConversationId, setSelectedConversationId] = useState4(null);
@@ -2167,14 +2201,12 @@ function NeptuneChatBot({
   const [conversationToRename, setConversationToRename] = useState4(null);
   const [theme, setTheme] = useState4(propTheme);
   const [agentId] = useState4(propAgentId);
-  const [debug] = useState4(propDebug);
   const [initialAssistantIdChecked] = useState4(true);
   const [initialLoadComplete, setInitialLoadComplete] = useState4(false);
   const [openMenuId, setOpenMenuId] = useState4(null);
   const [isCreatingConversation, setIsCreatingConversation] = useState4(false);
   const [sidebarWidth, setSidebarWidth] = useState4(250);
   const [isResizing, setIsResizing] = useState4(false);
-  const [hasOpenApp, setHasOpenApp] = useState4(false);
   const titleInputRef = useRef2(null);
   const resizeHandleRef = useRef2(null);
   const hasFetchedRef = useRef2(false);
@@ -2196,9 +2228,6 @@ function NeptuneChatBot({
   useEffect4(() => {
     applyTheme(theme);
   }, [theme, applyTheme]);
-  const handleAppStateChange = useCallback2((hasApp) => {
-    setHasOpenApp(hasApp);
-  }, []);
   const toggleTheme = () => {
     const newTheme = theme === "dark" ? "light" : "dark";
     setTheme(newTheme);
@@ -2260,7 +2289,7 @@ function NeptuneChatBot({
       };
       conversations2.forEach((conversation) => {
         try {
-          const convDate = new Date(parseInt(conversation.updatedAt));
+          const convDate = new Date(conversation.updatedAt);
           if (convDate >= today) {
             groups["Today"].push(conversation);
           } else if (convDate >= yesterday) {
@@ -2278,27 +2307,13 @@ function NeptuneChatBot({
       });
       Object.keys(groups).forEach((key) => {
         groups[key].sort(
-          (a, b) => new Date(parseInt(b.updatedAt)).getTime() - new Date(parseInt(a.updatedAt)).getTime()
+          (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
         );
       });
       return groups;
     },
     []
   );
-  const isJson = useCallback2((content) => {
-    if (typeof content === "object" && content !== null) {
-      return Array.isArray(content) || Object.prototype.toString.call(content) === "[object Object]";
-    }
-    if (typeof content === "string") {
-      try {
-        const parsed = JSON.parse(content);
-        return typeof parsed === "object" && parsed !== null;
-      } catch (e) {
-        return false;
-      }
-    }
-    return false;
-  }, []);
   useEffect4(() => {
     const fetchConversations = async () => {
       if (!initialAssistantIdChecked || hasFetchedRef.current) {
@@ -2317,44 +2332,15 @@ function NeptuneChatBot({
           return;
         }
         setConversations(data);
-        if (data.length > 0) {
-          const validConversations = data.filter(
-            (conv) => conv && conv.updatedAt
-          );
-          if (validConversations.length > 0) {
-            try {
-              const mostRecent = [...validConversations].sort(
-                (a, b) => new Date(parseInt(b.updatedAt)).getTime() - new Date(parseInt(a.updatedAt)).getTime()
-              )[0];
-              selectConversation(mostRecent.id);
-            } catch (sortError) {
-              console.error(
-                "Error sorting conversations:",
-                sortError
-              );
-              selectConversation(validConversations[0].id);
-            }
-          }
-        } else {
-          if (agentId && !isCreatingConversation) {
-            try {
-              setIsCreatingConversation(true);
-              const newConversation = await chatClient.conversations.create(
-                "New Chat",
-                agentId
-              );
-              setConversations([newConversation]);
-              selectConversation(newConversation.id);
-            } catch (createError) {
-            } finally {
-              setIsCreatingConversation(false);
-            }
-          } else {
-            console.warn(
-              "Cannot create conversation: agentId not available or already creating"
-            );
-          }
-        }
+        const tempConversation = {
+          id: `temp-${Date.now()}`,
+          title: "New Chat",
+          messages: [],
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+          isTemporary: true
+        };
+        setSelectedConversation(tempConversation);
       } catch (error) {
         console.error("Failed to fetch conversations:", error);
       } finally {
@@ -2407,7 +2393,6 @@ function NeptuneChatBot({
     } else {
       loadConversationData(id);
     }
-    setHasOpenApp(false);
   }, []);
   const createNewConversation = async () => {
     try {
@@ -2429,36 +2414,51 @@ function NeptuneChatBot({
       };
       setSelectedConversationId(tempConversation.id);
       setSelectedConversation(tempConversation);
-      setConversations((prev) => [tempConversation, ...prev]);
-      setHasOpenApp(false);
     } catch (error) {
       console.error("Failed to create new conversation:", error);
     }
   };
   const handleThreadCreated = useCallback2(
-    async (oldId, newId) => {
-      console.log(`Thread created: ${oldId} -> ${newId}`);
-      setConversations(
-        (prev) => prev.map(
-          (conv) => conv.id === oldId ? __spreadProps(__spreadValues({}, conv), { id: newId, isTemporary: false }) : conv
-        )
-      );
-      if (selectedConversationId === oldId) {
-        setSelectedConversationId(newId);
-        try {
-          const updatedConv = await chatClient.conversations.get(
-            newId
-          );
+    async (oldId, newId, backendConversation) => {
+      startTransition2(() => {
+        if (backendConversation) {
+          const updatedConv = __spreadProps(__spreadValues({}, backendConversation), {
+            isTemporary: false
+          });
+          setConversations((prev) => {
+            const filtered = prev.filter((conv) => conv.id !== oldId);
+            return [updatedConv, ...filtered];
+          });
+          setSelectedConversationId(newId);
           setSelectedConversation(updatedConv);
-        } catch (error) {
-          console.error(
-            "Failed to fetch updated conversation:",
-            error
-          );
+        } else {
+          setSelectedConversation((currentSelected) => {
+            if (currentSelected && currentSelected.id === oldId) {
+              const updatedConv = __spreadProps(__spreadValues({}, currentSelected), {
+                id: newId,
+                isTemporary: false
+              });
+              setConversations((prev) => {
+                const existingIndex = prev.findIndex(
+                  (conv) => conv.id === oldId || conv.id === newId
+                );
+                if (existingIndex !== -1) {
+                  const updated = [...prev];
+                  updated[existingIndex] = updatedConv;
+                  return updated;
+                } else {
+                  return [updatedConv, ...prev];
+                }
+              });
+              setSelectedConversationId(newId);
+              return updatedConv;
+            }
+            return currentSelected;
+          });
         }
-      }
+      });
     },
-    [selectedConversationId]
+    []
   );
   const deleteConversation = async (id) => {
     try {
@@ -2468,27 +2468,16 @@ function NeptuneChatBot({
       );
       setConversations(updatedConversations);
       if (selectedConversationId === id) {
-        if (updatedConversations.length > 0) {
-          selectConversation(updatedConversations[0].id);
-        } else {
-          setSelectedConversationId(null);
-          setSelectedConversation(null);
-          if (agentId) {
-            try {
-              const newConversation = await chatClient.conversations.create(
-                "New Chat",
-                agentId
-              );
-              setConversations([newConversation]);
-              selectConversation(newConversation.id);
-            } catch (error) {
-              console.error(
-                "Failed to create new conversation after deletion:",
-                error
-              );
-            }
-          }
-        }
+        const tempConversation = {
+          id: `temp-${Date.now()}`,
+          title: "New Chat",
+          messages: [],
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+          isTemporary: true
+        };
+        setSelectedConversationId(tempConversation.id);
+        setSelectedConversation(tempConversation);
       }
     } catch (error) {
       console.error("Failed to delete conversation:", error);
@@ -2636,198 +2625,263 @@ function NeptuneChatBot({
           )
         ] })
       ] }) }),
-      sidebarOpen && /* @__PURE__ */ jsx4(
-        "div",
+      /* @__PURE__ */ jsx4(AnimatePresence2, { children: sidebarOpen && /* @__PURE__ */ jsx4(
+        motion2.div,
         {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.3 },
           className: "lg:hidden fixed inset-0 bg-black bg-opacity-50 z-10",
           onClick: () => setSidebarOpen(false),
           "aria-hidden": "true"
         }
-      ),
-      /* @__PURE__ */ jsx4(
-        "div",
+      ) }),
+      /* @__PURE__ */ jsx4(AnimatePresence2, { children: sidebarOpen && /* @__PURE__ */ jsx4(
+        motion2.div,
         {
-          className: `bg-[#f9f9f9] dark:bg-gray-900 dark:!bg-gray-900 border-r border-gray-200 dark:border-gray-700 h-full relative z-20 ${sidebarOpen ? "block" : "hidden"}`,
-          style: {
-            width: sidebarOpen ? `${sidebarWidth}px` : "0"
+          initial: { width: 0, opacity: 0 },
+          animate: { width: sidebarWidth, opacity: 1 },
+          exit: { width: 0, opacity: 0 },
+          transition: {
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1]
           },
-          children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col h-full", children: /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto p-2 bg-[#f9f9f9] dark:bg-[#171717]", children: /* @__PURE__ */ jsx4("div", { className: "flex-1", children: isLoading ? /* @__PURE__ */ jsx4("div", { className: "space-y-4" }) : conversations.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "space-y-0", children: (() => {
-            const groupedConversations = categorizeConversationsByDate(
-              conversations
-            );
-            return Object.entries(
-              groupedConversations
-            ).map(
-              ([
-                groupName,
-                groupConversations
-              ]) => {
-                if (groupConversations.length === 0)
-                  return null;
-                return /* @__PURE__ */ jsxs4(
-                  "div",
-                  {
-                    className: "mb-4",
-                    children: [
-                      /* @__PURE__ */ jsx4("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 px-2 py-2 uppercase tracking-wide", children: groupName }),
-                      /* @__PURE__ */ jsx4("div", { className: "space-y-0", children: groupConversations.map(
-                        (conversation) => {
-                          var _a;
-                          const hasWaitingMessages = conversation.waiting === true || ((_a = conversation.messages) == null ? void 0 : _a.some(
-                            (message) => message.waiting === true
-                          )) || false;
-                          return /* @__PURE__ */ jsxs4(
-                            "div",
-                            {
-                              onClick: () => {
-                                selectConversation(
-                                  conversation.id
-                                );
-                                if (window.innerWidth < 1024) {
-                                  setSidebarOpen(
-                                    false
-                                  );
-                                }
-                              },
-                              className: `flex items-center w-full pl-4 pr-2 py-2 mb-1 rounded-xl text-left group cursor-pointer ${selectedConversationId === conversation.id ? "bg-naia-200 text-gray-800 dark:text-gray-200" : "text-gray-800 dark:text-gray-100 conversation-item-background"}`,
-                              children: [
-                                /* @__PURE__ */ jsx4("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-                                  /* @__PURE__ */ jsx4("div", { className: "font-medium overflow-hidden text-ellipsis whitespace-nowrap", children: conversation.title || "New Chat" }),
-                                  hasWaitingMessages && /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx4(
-                                    "div",
-                                    {
-                                      className: "w-2 h-2 bg-amber-500 dark:bg-amber-400 rounded-full animate-pulse",
-                                      title: "Waiting for input"
+          className: "bg-[#f9f9f9] dark:bg-gray-900 dark:!bg-gray-900 border-r border-gray-200 dark:border-gray-700 h-full relative z-20 overflow-hidden",
+          children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col h-full", children: /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "flex-1 overflow-y-auto p-2",
+              style: {
+                backgroundColor: theme === "dark" ? sidebarBackgroundColorDark : sidebarBackgroundColor
+              },
+              children: /* @__PURE__ */ jsx4("div", { className: "flex-1", children: isLoading ? /* @__PURE__ */ jsx4("div", { className: "space-y-4" }) : conversations.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "space-y-0", children: (() => {
+                const groupedConversations = categorizeConversationsByDate(
+                  conversations
+                );
+                return Object.entries(
+                  groupedConversations
+                ).map(
+                  ([
+                    groupName,
+                    groupConversations
+                  ]) => {
+                    if (groupConversations.length === 0)
+                      return null;
+                    return /* @__PURE__ */ jsxs4(
+                      "div",
+                      {
+                        className: "mb-4",
+                        children: [
+                          /* @__PURE__ */ jsx4("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 px-2 py-2 uppercase tracking-wide", children: groupName }),
+                          /* @__PURE__ */ jsx4("div", { className: "space-y-0", children: groupConversations.map(
+                            (conversation) => {
+                              var _a;
+                              const hasWaitingMessages = conversation.waiting === true || ((_a = conversation.messages) == null ? void 0 : _a.some(
+                                (message) => message.waiting === true
+                              )) || false;
+                              return /* @__PURE__ */ jsxs4(
+                                "div",
+                                {
+                                  onClick: () => {
+                                    selectConversation(
+                                      conversation.id
+                                    );
+                                    if (window.innerWidth < 1024) {
+                                      setSidebarOpen(
+                                        false
+                                      );
                                     }
-                                  ) })
-                                ] }) }),
-                                !conversation.isTemporary && /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
-                                  /* @__PURE__ */ jsx4(
-                                    "button",
-                                    {
-                                      onClick: (e) => toggleConversationMenu(
-                                        e,
-                                        conversation.id
-                                      ),
-                                      className: "p-1.5 cursor-pointer rounded-full text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 opacity-0 hover:bg-gray-300 dark:hover:bg-gray-700 group-hover:opacity-100 transition-opacity",
-                                      "aria-label": "More options",
-                                      children: /* @__PURE__ */ jsx4(
-                                        MoreHorizontal,
+                                  },
+                                  className: `flex items-center w-full pl-4 pr-2 py-2 mb-1 rounded-xl text-left group cursor-pointer ${selectedConversationId === conversation.id ? "text-gray-800 dark:text-gray-200" : "text-gray-800 dark:text-gray-100 conversation-item-background"}`,
+                                  style: selectedConversationId === conversation.id ? {
+                                    backgroundColor: theme === "dark" ? messageBubbleColorDark : messageBubbleColor
+                                  } : void 0,
+                                  children: [
+                                    /* @__PURE__ */ jsx4("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                                      /* @__PURE__ */ jsx4("div", { className: "font-medium overflow-hidden text-ellipsis whitespace-nowrap", children: conversation.title || "New Chat" }),
+                                      hasWaitingMessages && /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx4(
+                                        "div",
                                         {
-                                          size: 16
+                                          className: "w-2 h-2 bg-amber-500 dark:bg-amber-400 rounded-full animate-pulse",
+                                          title: "Waiting for input"
                                         }
-                                      )
-                                    }
-                                  ),
-                                  openMenuId === conversation.id && /* @__PURE__ */ jsxs4("div", { className: "absolute right-0 top-10 w-40 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-50 p-2", children: [
-                                    /* @__PURE__ */ jsxs4(
-                                      "button",
-                                      {
-                                        onClick: (e) => handleRenameClick(
-                                          e,
-                                          conversation
-                                        ),
-                                        className: "w-full text-left px-3 py-2 text-md flex cursor-pointer items-center gap-2 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md",
-                                        children: [
-                                          /* @__PURE__ */ jsx4(
-                                            Edit,
-                                            {
-                                              size: 14
-                                            }
+                                      ) })
+                                    ] }) }),
+                                    !conversation.isTemporary && /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+                                      /* @__PURE__ */ jsx4(
+                                        "button",
+                                        {
+                                          onClick: (e) => toggleConversationMenu(
+                                            e,
+                                            conversation.id
                                           ),
-                                          "Rename"
-                                        ]
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsxs4(
-                                      "button",
-                                      {
-                                        onClick: (e) => handleDeleteClick(
-                                          e,
-                                          conversation.id
-                                        ),
-                                        className: "w-full text-left px-3 py-2 text-md text-red-600 cursor-pointer flex items-center gap-2 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md",
-                                        children: [
-                                          /* @__PURE__ */ jsx4(
-                                            Trash2,
+                                          className: "p-1.5 cursor-pointer rounded-full text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 opacity-0 hover:bg-gray-300 dark:hover:bg-gray-700 group-hover:opacity-100 transition-opacity",
+                                          "aria-label": "More options",
+                                          children: /* @__PURE__ */ jsx4(
+                                            MoreHorizontal,
                                             {
-                                              size: 14
+                                              size: 16
                                             }
-                                          ),
-                                          "Delete"
-                                        ]
-                                      }
-                                    )
-                                  ] })
-                                ] })
-                              ]
-                            },
-                            conversation.id
-                          );
-                        }
-                      ) })
-                    ]
-                  },
-                  groupName
-                );
-              }
-            ).filter(Boolean);
-          })() }) : /* @__PURE__ */ jsx4("div", { className: "text-center py-8 text-gray-500", children: "No conversations yet" }) }) }) })
+                                          )
+                                        }
+                                      ),
+                                      openMenuId === conversation.id && /* @__PURE__ */ jsxs4("div", { className: "absolute right-0 top-10 w-40 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-50 p-2", children: [
+                                        /* @__PURE__ */ jsxs4(
+                                          "button",
+                                          {
+                                            onClick: (e) => handleRenameClick(
+                                              e,
+                                              conversation
+                                            ),
+                                            className: "w-full text-left px-3 py-2 text-md flex cursor-pointer items-center gap-2 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md",
+                                            children: [
+                                              /* @__PURE__ */ jsx4(
+                                                Edit,
+                                                {
+                                                  size: 14
+                                                }
+                                              ),
+                                              "Rename"
+                                            ]
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsxs4(
+                                          "button",
+                                          {
+                                            onClick: (e) => handleDeleteClick(
+                                              e,
+                                              conversation.id
+                                            ),
+                                            className: "w-full text-left px-3 py-2 text-md text-red-600 cursor-pointer flex items-center gap-2 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-md",
+                                            children: [
+                                              /* @__PURE__ */ jsx4(
+                                                Trash2,
+                                                {
+                                                  size: 14
+                                                }
+                                              ),
+                                              "Delete"
+                                            ]
+                                          }
+                                        )
+                                      ] })
+                                    ] })
+                                  ]
+                                },
+                                conversation.id
+                              );
+                            }
+                          ) })
+                        ]
+                      },
+                      groupName
+                    );
+                  }
+                ).filter(Boolean);
+              })() }) : /* @__PURE__ */ jsx4("div", { className: "text-center py-8 text-gray-500", children: "No conversations yet" }) })
+            }
+          ) })
         }
-      ),
-      sidebarOpen && /* @__PURE__ */ jsx4(
-        "div",
+      ) }),
+      /* @__PURE__ */ jsx4(AnimatePresence2, { children: sidebarOpen && /* @__PURE__ */ jsx4(
+        motion2.div,
         {
-          ref: resizeHandleRef,
-          onMouseDown: startResizing,
-          className: "w-1 hover:w-2 bg-gray-300 dark:bg-gray-700 h-full cursor-col-resize transition-all hover:bg-indigo-500 dark:hover:bg-indigo-400 z-30 relative",
-          title: "Drag to resize"
-        }
-      ),
-      /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsxs4("header", { className: "h-14 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-4 bg-white dark:bg-gray-900", children: [
-          /* @__PURE__ */ jsx4("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs4(Fragment3, { children: [
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                onClick: () => setSidebarOpen(!sidebarOpen),
-                className: "p-2 cursor-pointer rounded-lg text-gray-500 hover:bg-naia-hover disabled:opacity-50 transition-colors",
-                title: "Toggle Sidebar",
-                "aria-label": "Toggle Sidebar",
-                children: sidebarOpen ? /* @__PURE__ */ jsx4(PanelRightOpen, { size: 20 }) : /* @__PURE__ */ jsx4(PanelRightClose, { size: 20 })
-              }
-            ),
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                onClick: createNewConversation,
-                className: "p-2 cursor-pointer rounded-lg text-gray-500 hover:bg-naia-hover disabled:opacity-50 transition-colors",
-                title: "New Chat",
-                "aria-label": "New Chat",
-                children: /* @__PURE__ */ jsx4(MessageCirclePlus, { size: 20 })
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx4("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx4("span", { className: "text-2xl font-bold mr-1", children: "Naia" }) }) }),
-          /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx4(
-            "button",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.3 },
+          children: /* @__PURE__ */ jsx4(
+            "div",
             {
-              onClick: toggleTheme,
-              className: "p-2 cursor-pointer rounded-lg text-gray-500 hover:bg-naia-hover transition-colors",
-              title: `Switch to ${theme === "dark" ? "light" : "dark"} mode`,
-              "aria-label": `Switch to ${theme === "dark" ? "light" : "dark"} mode`,
-              children: theme === "dark" ? /* @__PURE__ */ jsx4(Sun, { size: 20 }) : /* @__PURE__ */ jsx4(Moon, { size: 20 })
+              ref: resizeHandleRef,
+              onMouseDown: startResizing,
+              className: "w-1 hover:w-2 bg-gray-300 dark:bg-gray-700 h-full cursor-col-resize transition-all hover:bg-indigo-500 dark:hover:bg-indigo-400 z-30 relative",
+              title: "Drag to resize"
             }
-          ) })
-        ] }),
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsxs4(
+          "header",
+          {
+            className: "h-14 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between px-4",
+            style: {
+              backgroundColor: theme === "dark" ? headerBackgroundColorDark : headerBackgroundColor
+            },
+            children: [
+              /* @__PURE__ */ jsx4("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    onClick: () => setSidebarOpen(!sidebarOpen),
+                    className: "p-2 cursor-pointer rounded-lg text-gray-500 disabled:opacity-50 transition-colors",
+                    style: {
+                      backgroundColor: "transparent"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = theme === "dark" ? messageBubbleColorDark : messageBubbleColor;
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    title: "Toggle Sidebar",
+                    "aria-label": "Toggle Sidebar",
+                    children: sidebarOpen ? /* @__PURE__ */ jsx4(PanelRightOpen, { size: 20 }) : /* @__PURE__ */ jsx4(PanelRightClose, { size: 20 })
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    onClick: createNewConversation,
+                    className: "p-2 cursor-pointer rounded-lg text-gray-500 disabled:opacity-50 transition-colors",
+                    style: {
+                      backgroundColor: "transparent"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = theme === "dark" ? messageBubbleColorDark : messageBubbleColor;
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    },
+                    title: "New Chat",
+                    "aria-label": "New Chat",
+                    children: /* @__PURE__ */ jsx4(MessageCirclePlus, { size: 20 })
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx4("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx4("span", { className: "text-2xl font-bold mr-1", children: propTitle }) }) }),
+              /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: toggleTheme,
+                  className: "p-2 cursor-pointer rounded-lg text-gray-500 transition-colors",
+                  style: {
+                    backgroundColor: "transparent"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = theme === "dark" ? messageBubbleColorDark : messageBubbleColor;
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  },
+                  title: `Switch to ${theme === "dark" ? "light" : "dark"} mode`,
+                  "aria-label": `Switch to ${theme === "dark" ? "light" : "dark"} mode`,
+                  children: theme === "dark" ? /* @__PURE__ */ jsx4(Sun, { size: 20 }) : /* @__PURE__ */ jsx4(Moon, { size: 20 })
+                }
+              ) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx4(
           "div",
           {
-            className: `flex-1 overflow-hidden bg-white dark:bg-gray-900 text-lg transition-all duration-300 ${hasOpenApp ? "flex" : "flex justify-center"}`,
+            className: `flex-1 overflow-hidden bg-white dark:bg-gray-900 text-lg transition-all duration-300 ${false ? "flex" : "flex justify-center"}`,
             children: /* @__PURE__ */ jsx4(
               "div",
               {
-                className: `flex flex-col transition-all duration-300 ${hasOpenApp ? "w-full" : "w-full max-w-6xl"}`,
+                className: `flex flex-col transition-all duration-300 ${false ? "w-full" : "w-full max-w-6xl"}`,
                 children: isLoading || !initialAssistantIdChecked ? /* @__PURE__ */ jsx4("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx4("div", { className: "animate-pulse text-gray-500", children: isLoading ? "Loading conversations..." : "Initializing Assistant..." }) }) : !agentId ? /* @__PURE__ */ jsxs4("div", { className: "flex h-full flex-col items-center justify-center p-4 text-center", children: [
                   /* @__PURE__ */ jsx4("h2", { className: "text-xl font-semibold text-red-600 dark:text-red-400 mb-2", children: "Agent Not Configured" }),
                   /* @__PURE__ */ jsxs4("p", { className: "text-gray-700 dark:text-gray-300 max-w-md", children: [
@@ -2842,12 +2896,29 @@ function NeptuneChatBot({
                   {
                     conversation: selectedConversation,
                     agentId,
-                    debug,
                     onConversationUpdate: refreshSelectedConversation,
                     theme,
-                    onAppStateChange: handleAppStateChange,
                     onSidebarToggle: () => setSidebarOpen(false),
-                    onThreadCreated: handleThreadCreated
+                    onThreadCreated: handleThreadCreated,
+                    messageBubbleColor: theme === "dark" ? messageBubbleColorDark : messageBubbleColor,
+                    accentColor: theme === "dark" ? accentColorDark : accentColor,
+                    scrollButtonColor: theme === "dark" ? scrollButtonColorDark : scrollButtonColor,
+                    streamingText,
+                    streamingTextColor: theme === "dark" ? streamingTextColorDark : streamingTextColor,
+                    welcomeMessagePrimary,
+                    welcomeMessageSecondary,
+                    welcomeIcon,
+                    welcomeIconSize,
+                    streaming,
+                    inputBackgroundColor,
+                    inputBackgroundColorDark,
+                    vectorColor,
+                    vectorColorDark,
+                    onToolStart,
+                    onToolInput,
+                    onToolFinish,
+                    onChunk,
+                    onFinish
                   }
                 ) : (
                   // Show loading while the useEffect handles conversation creation