@gobolt/genesis 0.3.2 → 0.3.4

package/dist/components/Chat/Chat.d.ts

@@ -13,6 +13,7 @@ export interface ChatProps {
     messageHistory: Array<Message>;
     title?: string;
     isSimulated?: boolean;
+    authToken?: string;
 }
 declare const Chat: FC<ChatProps>;
 export default Chat;

package/dist/components/Chat/Message.d.ts

@@ -3,6 +3,7 @@ interface MessageProps {
     message: string;
     handle: string;
     isThinking?: boolean;
+    id?: string;
 }
 declare const Message: FC<MessageProps>;
 export default Message;

package/dist/components/Chat/__stories__/Chat.stories.d.ts

@@ -14,6 +14,8 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const local: Story;
+export declare const remote: Story;
 export declare const WithMessageHistory: Story;
 export declare const WithTitle: Story;
+export declare const Remote: Story;

package/dist/index.cjs

@@ -74920,20 +74920,7 @@ const Message$1 = ({ message: message2, handle, isThinking = false }) => {
   const isBot = handle === "bot";
   return /* @__PURE__ */ jsxRuntime.jsxs(MessageContainer, { $isBot: isBot, children: [
     /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { children: isBot ? /* @__PURE__ */ jsxRuntime.jsx(BotIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsxRuntime.jsx(
-      Markdown,
-      {
-        components: {
-          p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 last:mb-0", children }),
-          ul: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc pl-4 mb-2", children }),
-          ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-decimal pl-4 mb-2", children }),
-          li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "mb-1", children }),
-          code: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-gray-200 rounded px-1 py-0.5", children }),
-          pre: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-200 rounded p-2 mb-2 overflow-x-auto", children })
-        },
-        children: message2
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(MessageText, { children: message2 }) })
+    /* @__PURE__ */ jsxRuntime.jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: message2 }) : /* @__PURE__ */ jsxRuntime.jsx(MessageText, { children: message2 }) })
   ] });
 };
 const getStateColors = (colors2, type4, state) => {
@@ -75349,7 +75336,7 @@ const ChatContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 540px;
+  width: 600px;
   overflow: hidden;
 `;
 const HeroContainer = styled.div`
@@ -75399,7 +75386,8 @@ const Chat = ({
   isOpen = false,
   messageHistory = [],
   title = null,
-  isSimulated = false
+  isSimulated = false,
+  authToken
 }) => {
   const [isChatOpen, setIsChatOpen] = React.useState(isOpen);
   const [message2, setMessage] = React.useState("");
@@ -75413,80 +75401,133 @@ const Chat = ({
   const [isLocked, setIsLocked] = React.useState(false);
   React.useEffect(() => {
     if (isSimulated) return;
-    console.log("Connecting to socket server at:", socketUrl);
-    socketRef.current = lookup(socketUrl, {
-      extraHeaders: {
-        "Access-Control-Allow-Origin": "*"
-      }
-    });
-    const socket = socketRef.current;
-    socket.on("connect", () => {
-      console.log("Socket connected successfully");
-    });
-    socket.on("connect_error", (error2) => {
-      console.error("Socket connection error:", error2);
-      setServerError("Failed to connect to server");
-      setServerStatus("error");
-      serverReadyRef.current = false;
-    });
-    socket.on("new connection", () => {
-      console.log("New connection established");
-    });
-    socket.on("server-ready", () => {
-      console.log("Server is ready");
-      setServerError("");
-      setServerStatus("ready");
-      serverReadyRef.current = true;
-    });
-    socket.on("message", (newMessage) => {
-      setMessages((prev2) => {
-        if (newMessage.sender === "bot") {
-          let replaced = false;
-          const updated = prev2.map((msg) => {
-            if (msg.isThinking && !replaced) {
-              replaced = true;
-              return { ...newMessage, isThinking: false };
+    const socketUrlToUse = window.location.hostname === "localhost" && window.location.port === "6006" ? "http://localhost:3000" : socketUrl;
+    console.log("Connecting to socket server at:", socketUrlToUse);
+    const validateToken = async () => {
+      try {
+        const response = await fetch(
+          "https://www.googleapis.com/oauth2/v2/userinfo",
+          {
+            headers: {
+              Authorization: `Bearer ${authToken}`
             }
-            return msg;
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Invalid token");
+        }
+        socketRef.current = lookup(socketUrlToUse, {
+          transports: ["polling", "websocket"],
+          reconnection: true,
+          reconnectionAttempts: 5,
+          reconnectionDelay: 1e3,
+          withCredentials: true,
+          forceNew: true,
+          autoConnect: true,
+          timeout: 1e4,
+          auth: {
+            token: authToken,
+            type: "Bearer"
+          }
+        });
+        const socket = socketRef.current;
+        socket.on("connect", () => {
+          console.log("Socket connected successfully");
+          setServerError("");
+          setServerStatus("ready");
+          serverReadyRef.current = true;
+        });
+        socket.on("connect_error", (error2) => {
+          console.error("Socket connection error:", error2);
+          setServerError(`Connection error: ${error2.message}`);
+          setServerStatus("error");
+          serverReadyRef.current = false;
+          setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+          setIsLocked(false);
+        });
+        socket.on("disconnect", (reason) => {
+          console.log("Socket disconnected:", reason);
+          setServerError(`Disconnected: ${reason}`);
+          setServerStatus("error");
+          serverReadyRef.current = false;
+          setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+          setIsLocked(false);
+        });
+        socket.on("new connection", () => {
+          console.log("New connection established");
+        });
+        socket.on("server-ready", () => {
+          console.log("Server is ready");
+          setServerError("");
+          setServerStatus("ready");
+          serverReadyRef.current = true;
+        });
+        socket.on("message", (newMessage) => {
+          setMessages((prev2) => {
+            if (newMessage.sender === "bot") {
+              if (newMessage.content === "Processing your message...") {
+                const hasThinkingMessage = prev2.some((msg) => msg.isThinking);
+                if (hasThinkingMessage) {
+                  return prev2;
+                }
+                return [...prev2, { ...newMessage, isThinking: true }];
+              }
+              const thinkingMessage = prev2.find((msg) => msg.isThinking);
+              if (thinkingMessage) {
+                return prev2.map(
+                  (msg) => msg.isThinking ? { ...newMessage, isThinking: false } : msg
+                );
+              }
+              return [...prev2, { ...newMessage, isThinking: false }];
+            }
+            const lastUserMsg = [...prev2].reverse().find((msg) => msg.sender === "user");
+            if (lastUserMsg && lastUserMsg.content === newMessage.content) {
+              return prev2;
+            }
+            return [...prev2, newMessage];
           });
           setIsLocked(false);
-          return replaced ? updated : [...prev2, newMessage];
-        }
-        const lastUserMsg = [...prev2].reverse().find((msg) => msg.sender === "user");
-        if (lastUserMsg && lastUserMsg.content === newMessage.content) {
-          return prev2;
-        }
-        return [...prev2, newMessage];
-      });
-    });
-    socket.on("update-bot-message", (updatedData) => {
-      console.log("Received bot message update:", updatedData);
-      setMessages(
-        (prev2) => prev2.map(
-          (message22) => message22.id === updatedData.id ? { ...updatedData } : message22
-        )
-      );
-    });
-    socket.on("error", (error2) => {
-      console.error("Socket error:", error2);
-      setServerError("Server error occurred");
-    });
-    socket.onAny((eventName, ...args) => {
-      console.log(`Socket event received: ${eventName}`, args);
-    });
-    const timeoutId = setTimeout(() => {
-      if (!serverReadyRef.current) {
-        console.log("Server status check failed");
-        setServerError("Please check the server");
+        });
+        socket.on("update-bot-message", (updatedData) => {
+          console.log("Received bot message update:", updatedData);
+          setMessages(
+            (prev2) => prev2.map(
+              (message22) => message22.id === updatedData.id ? { ...updatedData } : message22
+            )
+          );
+        });
+        socket.on("error", (error2) => {
+          console.error("Socket error:", error2);
+          setServerError("Server error occurred");
+        });
+        socket.onAny((eventName, ...args) => {
+          console.log(`Socket event received: ${eventName}`, args);
+        });
+        const timeoutId = setTimeout(() => {
+          if (!serverReadyRef.current) {
+            console.log("Server status check failed");
+            setServerError(
+              "Server status check failed - please check the server"
+            );
+            setServerStatus("error");
+            setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+            setIsLocked(false);
+          }
+        }, 2e3);
+        return () => {
+          console.log("Disconnecting socket");
+          socket.disconnect();
+          clearTimeout(timeoutId);
+        };
+      } catch (error2) {
+        console.error("Token validation error:", error2);
+        setServerError("Authentication error: Invalid token");
         setServerStatus("error");
+        serverReadyRef.current = false;
       }
-    }, 2e3);
-    return () => {
-      console.log("Disconnecting socket");
-      socket.disconnect();
-      clearTimeout(timeoutId);
     };
-  }, [isSimulated, socketUrl]);
+    validateToken();
+  }, [isSimulated, socketUrl, authToken]);
   React.useEffect(() => {
     if (messageListRef.current) {
       messageListRef.current.scrollTo({
@@ -75505,41 +75546,48 @@ const Chat = ({
     }
   };
   const sendMessage = () => {
-    var _a;
+    var _a, _b;
     if (!message2.trim() || isLocked) return;
+    const timestamp = Date.now();
     const userMessage = {
       content: message2,
       sender: handle,
-      id: `id_${Date.now()}`,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    };
-    const thinkingMessage = {
-      content: "",
-      sender: "bot",
-      id: `id_${Date.now()}_thinking`,
-      isThinking: true,
+      id: `user_${timestamp}_${Math.random().toString(36).substr(2, 9)}`,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     };
     setIsLocked(true);
-    setMessages((prev2) => [...prev2, thinkingMessage]);
-    if (!((_a = socketRef.current) == null ? void 0 : _a.connected)) {
+    setMessages((prev2) => [...prev2, userMessage]);
+    if ((_a = socketRef.current) == null ? void 0 : _a.connected) {
+      const botMessageId = `bot_${timestamp}`;
+      const thinkingMessage = {
+        content: "",
+        sender: "bot",
+        id: botMessageId,
+        isThinking: true,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev2) => [...prev2, thinkingMessage]);
+    }
+    if (!((_b = socketRef.current) == null ? void 0 : _b.connected)) {
       setServerError("Not connected to server");
       setIsLocked(false);
       return;
     }
     socketRef.current.emit("message", userMessage);
-    setTimeout(() => {
-      setMessages(
-        (prev2) => prev2.map(
-          (msg) => msg.isThinking ? { ...msg, content: "Processing your message..." } : msg
-        )
-      );
-    }, 300);
-    setTimeout(() => {
-      setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
-      setServerError("No response from server");
-      setIsLocked(false);
-    }, 1e4);
+    if (socketRef.current.connected) {
+      setTimeout(() => {
+        setMessages(
+          (prev2) => prev2.map(
+            (msg) => msg.isThinking ? { ...msg, content: "Processing your message..." } : msg
+          )
+        );
+      }, 300);
+      setTimeout(() => {
+        setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+        setServerError("No response from server");
+        setIsLocked(false);
+      }, 1e4);
+    }
     setMessage("");
   };
   const toggleChat = () => {
@@ -75548,15 +75596,22 @@ const Chat = ({
   const handleInputChange = (e2) => {
     setMessage(e2.payload.value);
   };
+  if (serverStatus === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: "Network error" });
+  }
+  const uniqueMessages = messages2.filter(
+    (msg, index2, self2) => index2 === self2.findIndex((t2) => t2.id === msg.id)
+  );
+  console.log("uniqueMessages", uniqueMessages);
   return /* @__PURE__ */ jsxRuntime.jsxs(ChatContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(HeroContainer, { $isVisible: !isChatOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading3", children: title }),
+      title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading3", children: title }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: "Click the Chat Icon below to begin" }),
-      serverError && /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: serverError })
+      serverError ? /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: serverError }) : null
     ] }) }),
     isChatOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(HeroContainer, { $isVisible: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading2", children: title }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(MessageList, { ref: messageListRef, children: messages2.map((msg) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(HeroContainer, { $isVisible: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading2", children: title }) : null }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(MessageList, { ref: messageListRef, children: uniqueMessages.map((msg) => /* @__PURE__ */ jsxRuntime.jsx(
         Message$1,
         {
           message: msg.content,

package/dist/index.js

@@ -74902,20 +74902,7 @@ const Message$1 = ({ message: message2, handle, isThinking = false }) => {
   const isBot = handle === "bot";
   return /* @__PURE__ */ jsxs(MessageContainer, { $isBot: isBot, children: [
     /* @__PURE__ */ jsx(IconContainer, { children: isBot ? /* @__PURE__ */ jsx(BotIcon, {}) : /* @__PURE__ */ jsx(UserIcon, {}) }),
-    /* @__PURE__ */ jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsx(
-      Markdown,
-      {
-        components: {
-          p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-2 last:mb-0", children }),
-          ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "list-disc pl-4 mb-2", children }),
-          ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal pl-4 mb-2", children }),
-          li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "mb-1", children }),
-          code: ({ children }) => /* @__PURE__ */ jsx("code", { className: "bg-gray-200 rounded px-1 py-0.5", children }),
-          pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "bg-gray-200 rounded p-2 mb-2 overflow-x-auto", children })
-        },
-        children: message2
-      }
-    ) : /* @__PURE__ */ jsx(MessageText, { children: message2 }) })
+    /* @__PURE__ */ jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsx(Markdown, { children: message2 }) : /* @__PURE__ */ jsx(MessageText, { children: message2 }) })
   ] });
 };
 const getStateColors = (colors2, type4, state) => {
@@ -75331,7 +75318,7 @@ const ChatContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 540px;
+  width: 600px;
   overflow: hidden;
 `;
 const HeroContainer = styled.div`
@@ -75381,7 +75368,8 @@ const Chat = ({
   isOpen = false,
   messageHistory = [],
   title = null,
-  isSimulated = false
+  isSimulated = false,
+  authToken
 }) => {
   const [isChatOpen, setIsChatOpen] = useState(isOpen);
   const [message2, setMessage] = useState("");
@@ -75395,80 +75383,133 @@ const Chat = ({
   const [isLocked, setIsLocked] = useState(false);
   useEffect(() => {
     if (isSimulated) return;
-    console.log("Connecting to socket server at:", socketUrl);
-    socketRef.current = lookup(socketUrl, {
-      extraHeaders: {
-        "Access-Control-Allow-Origin": "*"
-      }
-    });
-    const socket = socketRef.current;
-    socket.on("connect", () => {
-      console.log("Socket connected successfully");
-    });
-    socket.on("connect_error", (error2) => {
-      console.error("Socket connection error:", error2);
-      setServerError("Failed to connect to server");
-      setServerStatus("error");
-      serverReadyRef.current = false;
-    });
-    socket.on("new connection", () => {
-      console.log("New connection established");
-    });
-    socket.on("server-ready", () => {
-      console.log("Server is ready");
-      setServerError("");
-      setServerStatus("ready");
-      serverReadyRef.current = true;
-    });
-    socket.on("message", (newMessage) => {
-      setMessages((prev2) => {
-        if (newMessage.sender === "bot") {
-          let replaced = false;
-          const updated = prev2.map((msg) => {
-            if (msg.isThinking && !replaced) {
-              replaced = true;
-              return { ...newMessage, isThinking: false };
+    const socketUrlToUse = window.location.hostname === "localhost" && window.location.port === "6006" ? "http://localhost:3000" : socketUrl;
+    console.log("Connecting to socket server at:", socketUrlToUse);
+    const validateToken = async () => {
+      try {
+        const response = await fetch(
+          "https://www.googleapis.com/oauth2/v2/userinfo",
+          {
+            headers: {
+              Authorization: `Bearer ${authToken}`
             }
-            return msg;
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Invalid token");
+        }
+        socketRef.current = lookup(socketUrlToUse, {
+          transports: ["polling", "websocket"],
+          reconnection: true,
+          reconnectionAttempts: 5,
+          reconnectionDelay: 1e3,
+          withCredentials: true,
+          forceNew: true,
+          autoConnect: true,
+          timeout: 1e4,
+          auth: {
+            token: authToken,
+            type: "Bearer"
+          }
+        });
+        const socket = socketRef.current;
+        socket.on("connect", () => {
+          console.log("Socket connected successfully");
+          setServerError("");
+          setServerStatus("ready");
+          serverReadyRef.current = true;
+        });
+        socket.on("connect_error", (error2) => {
+          console.error("Socket connection error:", error2);
+          setServerError(`Connection error: ${error2.message}`);
+          setServerStatus("error");
+          serverReadyRef.current = false;
+          setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+          setIsLocked(false);
+        });
+        socket.on("disconnect", (reason) => {
+          console.log("Socket disconnected:", reason);
+          setServerError(`Disconnected: ${reason}`);
+          setServerStatus("error");
+          serverReadyRef.current = false;
+          setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+          setIsLocked(false);
+        });
+        socket.on("new connection", () => {
+          console.log("New connection established");
+        });
+        socket.on("server-ready", () => {
+          console.log("Server is ready");
+          setServerError("");
+          setServerStatus("ready");
+          serverReadyRef.current = true;
+        });
+        socket.on("message", (newMessage) => {
+          setMessages((prev2) => {
+            if (newMessage.sender === "bot") {
+              if (newMessage.content === "Processing your message...") {
+                const hasThinkingMessage = prev2.some((msg) => msg.isThinking);
+                if (hasThinkingMessage) {
+                  return prev2;
+                }
+                return [...prev2, { ...newMessage, isThinking: true }];
+              }
+              const thinkingMessage = prev2.find((msg) => msg.isThinking);
+              if (thinkingMessage) {
+                return prev2.map(
+                  (msg) => msg.isThinking ? { ...newMessage, isThinking: false } : msg
+                );
+              }
+              return [...prev2, { ...newMessage, isThinking: false }];
+            }
+            const lastUserMsg = [...prev2].reverse().find((msg) => msg.sender === "user");
+            if (lastUserMsg && lastUserMsg.content === newMessage.content) {
+              return prev2;
+            }
+            return [...prev2, newMessage];
           });
           setIsLocked(false);
-          return replaced ? updated : [...prev2, newMessage];
-        }
-        const lastUserMsg = [...prev2].reverse().find((msg) => msg.sender === "user");
-        if (lastUserMsg && lastUserMsg.content === newMessage.content) {
-          return prev2;
-        }
-        return [...prev2, newMessage];
-      });
-    });
-    socket.on("update-bot-message", (updatedData) => {
-      console.log("Received bot message update:", updatedData);
-      setMessages(
-        (prev2) => prev2.map(
-          (message22) => message22.id === updatedData.id ? { ...updatedData } : message22
-        )
-      );
-    });
-    socket.on("error", (error2) => {
-      console.error("Socket error:", error2);
-      setServerError("Server error occurred");
-    });
-    socket.onAny((eventName, ...args) => {
-      console.log(`Socket event received: ${eventName}`, args);
-    });
-    const timeoutId = setTimeout(() => {
-      if (!serverReadyRef.current) {
-        console.log("Server status check failed");
-        setServerError("Please check the server");
+        });
+        socket.on("update-bot-message", (updatedData) => {
+          console.log("Received bot message update:", updatedData);
+          setMessages(
+            (prev2) => prev2.map(
+              (message22) => message22.id === updatedData.id ? { ...updatedData } : message22
+            )
+          );
+        });
+        socket.on("error", (error2) => {
+          console.error("Socket error:", error2);
+          setServerError("Server error occurred");
+        });
+        socket.onAny((eventName, ...args) => {
+          console.log(`Socket event received: ${eventName}`, args);
+        });
+        const timeoutId = setTimeout(() => {
+          if (!serverReadyRef.current) {
+            console.log("Server status check failed");
+            setServerError(
+              "Server status check failed - please check the server"
+            );
+            setServerStatus("error");
+            setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+            setIsLocked(false);
+          }
+        }, 2e3);
+        return () => {
+          console.log("Disconnecting socket");
+          socket.disconnect();
+          clearTimeout(timeoutId);
+        };
+      } catch (error2) {
+        console.error("Token validation error:", error2);
+        setServerError("Authentication error: Invalid token");
         setServerStatus("error");
+        serverReadyRef.current = false;
       }
-    }, 2e3);
-    return () => {
-      console.log("Disconnecting socket");
-      socket.disconnect();
-      clearTimeout(timeoutId);
     };
-  }, [isSimulated, socketUrl]);
+    validateToken();
+  }, [isSimulated, socketUrl, authToken]);
   useEffect(() => {
     if (messageListRef.current) {
       messageListRef.current.scrollTo({
@@ -75487,41 +75528,48 @@ const Chat = ({
     }
   };
   const sendMessage = () => {
-    var _a;
+    var _a, _b;
     if (!message2.trim() || isLocked) return;
+    const timestamp = Date.now();
     const userMessage = {
       content: message2,
       sender: handle,
-      id: `id_${Date.now()}`,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    };
-    const thinkingMessage = {
-      content: "",
-      sender: "bot",
-      id: `id_${Date.now()}_thinking`,
-      isThinking: true,
+      id: `user_${timestamp}_${Math.random().toString(36).substr(2, 9)}`,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     };
     setIsLocked(true);
-    setMessages((prev2) => [...prev2, thinkingMessage]);
-    if (!((_a = socketRef.current) == null ? void 0 : _a.connected)) {
+    setMessages((prev2) => [...prev2, userMessage]);
+    if ((_a = socketRef.current) == null ? void 0 : _a.connected) {
+      const botMessageId = `bot_${timestamp}`;
+      const thinkingMessage = {
+        content: "",
+        sender: "bot",
+        id: botMessageId,
+        isThinking: true,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev2) => [...prev2, thinkingMessage]);
+    }
+    if (!((_b = socketRef.current) == null ? void 0 : _b.connected)) {
       setServerError("Not connected to server");
       setIsLocked(false);
       return;
     }
     socketRef.current.emit("message", userMessage);
-    setTimeout(() => {
-      setMessages(
-        (prev2) => prev2.map(
-          (msg) => msg.isThinking ? { ...msg, content: "Processing your message..." } : msg
-        )
-      );
-    }, 300);
-    setTimeout(() => {
-      setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
-      setServerError("No response from server");
-      setIsLocked(false);
-    }, 1e4);
+    if (socketRef.current.connected) {
+      setTimeout(() => {
+        setMessages(
+          (prev2) => prev2.map(
+            (msg) => msg.isThinking ? { ...msg, content: "Processing your message..." } : msg
+          )
+        );
+      }, 300);
+      setTimeout(() => {
+        setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+        setServerError("No response from server");
+        setIsLocked(false);
+      }, 1e4);
+    }
     setMessage("");
   };
   const toggleChat = () => {
@@ -75530,15 +75578,22 @@ const Chat = ({
   const handleInputChange = (e2) => {
     setMessage(e2.payload.value);
   };
+  if (serverStatus === "error") {
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: "Network error" });
+  }
+  const uniqueMessages = messages2.filter(
+    (msg, index2, self2) => index2 === self2.findIndex((t2) => t2.id === msg.id)
+  );
+  console.log("uniqueMessages", uniqueMessages);
   return /* @__PURE__ */ jsxs(ChatContainer, { children: [
     /* @__PURE__ */ jsx(HeroContainer, { $isVisible: !isChatOpen, children: /* @__PURE__ */ jsxs("div", { children: [
-      title && /* @__PURE__ */ jsx(Typography, { variant: "heading3", children: title }),
+      title ? /* @__PURE__ */ jsx(Typography, { variant: "heading3", children: title }) : null,
       /* @__PURE__ */ jsx(Subtitle, { children: "Click the Chat Icon below to begin" }),
-      serverError && /* @__PURE__ */ jsx(ErrorMessage, { children: serverError })
+      serverError ? /* @__PURE__ */ jsx(ErrorMessage, { children: serverError }) : null
     ] }) }),
     isChatOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(HeroContainer, { $isVisible: true, children: /* @__PURE__ */ jsx("div", { children: title && /* @__PURE__ */ jsx(Typography, { variant: "heading2", children: title }) }) }),
-      /* @__PURE__ */ jsx(MessageList, { ref: messageListRef, children: messages2.map((msg) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(HeroContainer, { $isVisible: true, children: /* @__PURE__ */ jsx("div", { children: title ? /* @__PURE__ */ jsx(Typography, { variant: "heading2", children: title }) : null }) }),
+      /* @__PURE__ */ jsx(MessageList, { ref: messageListRef, children: uniqueMessages.map((msg) => /* @__PURE__ */ jsx(
         Message$1,
         {
           message: msg.content,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",