@terryavg/neptune-ai-chatbot 1.0.0 → 1.0.2

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-XFSEOBLD.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";
@@ -1267,8 +1271,8 @@ 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-JQ7PSHNW.mjs"));
+var DynamicChatMessage = lazy(() => import("./chat-message-VB54UOHB.mjs"));
 var SCROLL_BOTTOM_THRESHOLD = 50;
 function ChatContent({
   conversation,
@@ -1279,7 +1283,26 @@ function ChatContent({
   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);
@@ -1433,14 +1456,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 +1479,10 @@ function ChatContent({
       role: newStreamingMessage.role,
       createdAt: newStreamingMessage.createdAt
     };
-    setStreamingMessage(newStreamingMessage);
-    setIsStreaming(true);
+    startTransition(() => {
+      setStreamingMessage(newStreamingMessage);
+      setIsStreaming(true);
+    });
   }, []);
   const handleToolExecutionStart = useCallback((toolName) => {
     setStreamingMessage((prev) => {
@@ -1541,7 +1568,6 @@ function ChatContent({
     []
   );
   const handleError = useCallback((details) => {
-    console.log("handleError called with:", details);
     setIsStreaming(false);
     setStreamingMessage(null);
     streamingMessageRef.current = null;
@@ -1549,7 +1575,6 @@ function ChatContent({
     setShowScrollToBottomButton(false);
   }, []);
   const handleStopStreaming = useCallback(() => {
-    console.log("Stop streaming requested");
     setIsStreaming(false);
     setStreamingMessage(null);
     streamingMessageRef.current = null;
@@ -1821,139 +1846,231 @@ 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,
+                                      debug,
+                                      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) => {
+                                const isCurrentlyStreaming = isStreaming && (streamingMessage == null ? void 0 : streamingMessage.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: 0, x: -20 },
+                                    animate: { opacity: 1, x: 0 },
+                                    transition: {
+                                      duration: isCurrentlyStreaming ? 0 : 0.3,
+                                      delay: isCurrentlyStreaming ? 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,
@@ -1964,18 +2081,29 @@ function ChatContent({
                             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
                           }
                         ) })
-                      }
-                    )
-                  ] }) })
-                )
+                      ] })
+                    }
+                  )
+                ] })
               ]
             }
           ),
@@ -2151,7 +2279,35 @@ 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);
@@ -2260,7 +2416,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 +2434,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) {
@@ -2318,42 +2460,15 @@ function NeptuneChatBot({
         }
         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);
@@ -2429,7 +2544,6 @@ function NeptuneChatBot({
       };
       setSelectedConversationId(tempConversation.id);
       setSelectedConversation(tempConversation);
-      setConversations((prev) => [tempConversation, ...prev]);
       setHasOpenApp(false);
     } catch (error) {
       console.error("Failed to create new conversation:", error);
@@ -2437,28 +2551,34 @@ function NeptuneChatBot({
   };
   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
-          );
+      try {
+        const updatedConv = await chatClient.conversations.get(newId);
+        startTransition2(() => {
+          setConversations((prev) => {
+            const existingIndex = prev.findIndex(
+              (conv) => conv.id === oldId || conv.id === newId
+            );
+            if (existingIndex !== -1) {
+              const updated = [...prev];
+              updated[existingIndex] = __spreadProps(__spreadValues({}, updatedConv), {
+                isTemporary: false
+              });
+              return updated;
+            } else {
+              return [
+                __spreadProps(__spreadValues({}, updatedConv), { isTemporary: false }),
+                ...prev
+              ];
+            }
+          });
+          setSelectedConversationId(newId);
           setSelectedConversation(updatedConv);
-        } catch (error) {
-          console.error(
-            "Failed to fetch updated conversation:",
-            error
-          );
-        }
+        });
+      } catch (error) {
+        console.error("Failed to fetch updated conversation:", error);
       }
     },
-    [selectedConversationId]
+    []
   );
   const deleteConversation = async (id) => {
     try {
@@ -2468,27 +2588,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,190 +2745,255 @@ 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",
           {
@@ -2847,7 +3021,26 @@ function NeptuneChatBot({
                     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