@gobolt/genesis 0.3.2 → 0.3.3

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/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`
@@ -75413,21 +75400,40 @@ 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 socketUrlToUse = window.location.hostname === "localhost" && window.location.port === "6006" ? "http://localhost:3000" : socketUrl;
+    console.log("Connecting to socket server at:", socketUrlToUse);
+    socketRef.current = lookup(socketUrlToUse, {
+      transports: ["polling", "websocket"],
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1e3,
+      withCredentials: true,
+      forceNew: true,
+      autoConnect: true,
+      timeout: 1e4
     });
     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("Failed to connect to server");
+      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");
@@ -75441,16 +75447,20 @@ const Chat = ({
     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 };
+          if (newMessage.content === "Processing your message...") {
+            const hasThinkingMessage = prev2.some((msg) => msg.isThinking);
+            if (hasThinkingMessage) {
+              return prev2;
             }
-            return msg;
-          });
-          setIsLocked(false);
-          return replaced ? updated : [...prev2, newMessage];
+            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) {
@@ -75458,6 +75468,7 @@ const Chat = ({
         }
         return [...prev2, newMessage];
       });
+      setIsLocked(false);
     });
     socket.on("update-bot-message", (updatedData) => {
       console.log("Received bot message update:", updatedData);
@@ -75477,8 +75488,10 @@ const Chat = ({
     const timeoutId = setTimeout(() => {
       if (!serverReadyRef.current) {
         console.log("Server status check failed");
-        setServerError("Please check the server");
+        setServerError("Server status check failed - please check the server");
         setServerStatus("error");
+        setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+        setIsLocked(false);
       }
     }, 2e3);
     return () => {
@@ -75505,41 +75518,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 +75568,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`
@@ -75395,21 +75382,40 @@ 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 socketUrlToUse = window.location.hostname === "localhost" && window.location.port === "6006" ? "http://localhost:3000" : socketUrl;
+    console.log("Connecting to socket server at:", socketUrlToUse);
+    socketRef.current = lookup(socketUrlToUse, {
+      transports: ["polling", "websocket"],
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1e3,
+      withCredentials: true,
+      forceNew: true,
+      autoConnect: true,
+      timeout: 1e4
     });
     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("Failed to connect to server");
+      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");
@@ -75423,16 +75429,20 @@ const Chat = ({
     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 };
+          if (newMessage.content === "Processing your message...") {
+            const hasThinkingMessage = prev2.some((msg) => msg.isThinking);
+            if (hasThinkingMessage) {
+              return prev2;
             }
-            return msg;
-          });
-          setIsLocked(false);
-          return replaced ? updated : [...prev2, newMessage];
+            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) {
@@ -75440,6 +75450,7 @@ const Chat = ({
         }
         return [...prev2, newMessage];
       });
+      setIsLocked(false);
     });
     socket.on("update-bot-message", (updatedData) => {
       console.log("Received bot message update:", updatedData);
@@ -75459,8 +75470,10 @@ const Chat = ({
     const timeoutId = setTimeout(() => {
       if (!serverReadyRef.current) {
         console.log("Server status check failed");
-        setServerError("Please check the server");
+        setServerError("Server status check failed - please check the server");
         setServerStatus("error");
+        setMessages((prev2) => prev2.filter((msg) => !msg.isThinking));
+        setIsLocked(false);
       }
     }, 2e3);
     return () => {
@@ -75487,41 +75500,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 +75550,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.3",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",