@gobolt/genesis 0.3.4 → 0.3.5

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { default as Message } from './Message';
 type Message = {
     id: string;
@@ -6,6 +5,17 @@ type Message = {
     sender: string;
     isThinking?: boolean;
     timestamp: string;
+    respondedBy?: "ai" | "search";
+};
+export type ChatHistoryRecord = {
+    visitorId: string;
+    visitorEmail: string;
+    name: string;
+    question: string;
+    response: string;
+    timeToRespond: number;
+    createdAt: string;
+    responseBy: "search" | "ai";
 };
 export interface ChatProps {
     socketUrl: string;
@@ -14,6 +24,8 @@ export interface ChatProps {
     title?: string;
     isSimulated?: boolean;
     authToken?: string;
+    overrideStyle?: React.CSSProperties;
+    onChange?: (chatHistoryRecord: ChatHistoryRecord) => void;
 }
-declare const Chat: FC<ChatProps>;
+declare const Chat: ({ socketUrl, isOpen, messageHistory, title, isSimulated, authToken, overrideStyle, onChange, }: ChatProps) => import("react/jsx-runtime").JSX.Element;
 export default Chat;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('..').ChatProps>;
+    component: ({ socketUrl, isOpen, messageHistory, title, isSimulated, authToken, overrideStyle, onChange, }: import('..').ChatProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
         docs: {

package/dist/index.cjs

@@ -75336,7 +75336,8 @@ const ChatContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 600px;
+  width: "100%";
+  max-width: "800px";
   overflow: hidden;
 `;
 const HeroContainer = styled.div`
@@ -75387,7 +75388,9 @@ const Chat = ({
   messageHistory = [],
   title = null,
   isSimulated = false,
-  authToken
+  authToken,
+  overrideStyle,
+  onChange
 }) => {
   const [isChatOpen, setIsChatOpen] = React.useState(isOpen);
   const [message2, setMessage] = React.useState("");
@@ -75399,6 +75402,8 @@ const Chat = ({
   const serverReadyRef = React.useRef(false);
   const handle = "user";
   const [isLocked, setIsLocked] = React.useState(false);
+  const [messageStartTime, setMessageStartTime] = React.useState(null);
+  const [currentQuestion, setCurrentQuestion] = React.useState("");
   React.useEffect(() => {
     if (isSimulated) return;
     const socketUrlToUse = window.location.hostname === "localhost" && window.location.port === "6006" ? "http://localhost:3000" : socketUrl;
@@ -75556,6 +75561,8 @@ const Chat = ({
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     };
     setIsLocked(true);
+    setMessageStartTime(Date.now());
+    setCurrentQuestion(message2);
     setMessages((prev2) => [...prev2, userMessage]);
     if ((_a = socketRef.current) == null ? void 0 : _a.connected) {
       const botMessageId = `bot_${timestamp}`;
@@ -75590,6 +75597,29 @@ const Chat = ({
     }
     setMessage("");
   };
+  React.useEffect(() => {
+    const lastMessage = messages2.at(-1);
+    if (!lastMessage || !messageStartTime || !currentQuestion) return;
+    if (lastMessage.sender === "bot" && !lastMessage.isThinking) {
+      const timeToRespond = Date.now() - messageStartTime;
+      const chatHistoryRecord = {
+        visitorId: "user",
+        // You might want to get this from props or context
+        visitorEmail: "",
+        // You might want to get this from props or context
+        name: handle,
+        question: currentQuestion,
+        response: lastMessage.content,
+        timeToRespond,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        responseBy: lastMessage.respondedBy || "ai"
+        // Use the respondedBy from the message, default to "ai"
+      };
+      onChange == null ? void 0 : onChange(chatHistoryRecord);
+      setMessageStartTime(null);
+      setCurrentQuestion("");
+    }
+  }, [messages2, messageStartTime, currentQuestion, onChange, handle]);
   const toggleChat = () => {
     setIsChatOpen(!isChatOpen);
   };
@@ -75603,9 +75633,9 @@ const Chat = ({
     (msg, index2, self2) => index2 === self2.findIndex((t2) => t2.id === msg.id)
   );
   console.log("uniqueMessages", uniqueMessages);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ChatContainer, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ChatContainer, { style: overrideStyle || {}, children: [
     /* @__PURE__ */ jsxRuntime.jsx(HeroContainer, { $isVisible: !isChatOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading3", children: title }) : null,
+      title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "heading3", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: "Click the Chat Icon below to begin" }),
       serverError ? /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: serverError }) : null
     ] }) }),

package/dist/index.js

@@ -75318,7 +75318,8 @@ const ChatContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 600px;
+  width: "100%";
+  max-width: "800px";
   overflow: hidden;
 `;
 const HeroContainer = styled.div`
@@ -75369,7 +75370,9 @@ const Chat = ({
   messageHistory = [],
   title = null,
   isSimulated = false,
-  authToken
+  authToken,
+  overrideStyle,
+  onChange
 }) => {
   const [isChatOpen, setIsChatOpen] = useState(isOpen);
   const [message2, setMessage] = useState("");
@@ -75381,6 +75384,8 @@ const Chat = ({
   const serverReadyRef = useRef(false);
   const handle = "user";
   const [isLocked, setIsLocked] = useState(false);
+  const [messageStartTime, setMessageStartTime] = useState(null);
+  const [currentQuestion, setCurrentQuestion] = useState("");
   useEffect(() => {
     if (isSimulated) return;
     const socketUrlToUse = window.location.hostname === "localhost" && window.location.port === "6006" ? "http://localhost:3000" : socketUrl;
@@ -75538,6 +75543,8 @@ const Chat = ({
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     };
     setIsLocked(true);
+    setMessageStartTime(Date.now());
+    setCurrentQuestion(message2);
     setMessages((prev2) => [...prev2, userMessage]);
     if ((_a = socketRef.current) == null ? void 0 : _a.connected) {
       const botMessageId = `bot_${timestamp}`;
@@ -75572,6 +75579,29 @@ const Chat = ({
     }
     setMessage("");
   };
+  useEffect(() => {
+    const lastMessage = messages2.at(-1);
+    if (!lastMessage || !messageStartTime || !currentQuestion) return;
+    if (lastMessage.sender === "bot" && !lastMessage.isThinking) {
+      const timeToRespond = Date.now() - messageStartTime;
+      const chatHistoryRecord = {
+        visitorId: "user",
+        // You might want to get this from props or context
+        visitorEmail: "",
+        // You might want to get this from props or context
+        name: handle,
+        question: currentQuestion,
+        response: lastMessage.content,
+        timeToRespond,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        responseBy: lastMessage.respondedBy || "ai"
+        // Use the respondedBy from the message, default to "ai"
+      };
+      onChange == null ? void 0 : onChange(chatHistoryRecord);
+      setMessageStartTime(null);
+      setCurrentQuestion("");
+    }
+  }, [messages2, messageStartTime, currentQuestion, onChange, handle]);
   const toggleChat = () => {
     setIsChatOpen(!isChatOpen);
   };
@@ -75585,9 +75615,9 @@ const Chat = ({
     (msg, index2, self2) => index2 === self2.findIndex((t2) => t2.id === msg.id)
   );
   console.log("uniqueMessages", uniqueMessages);
-  return /* @__PURE__ */ jsxs(ChatContainer, { children: [
+  return /* @__PURE__ */ jsxs(ChatContainer, { style: overrideStyle || {}, children: [
     /* @__PURE__ */ jsx(HeroContainer, { $isVisible: !isChatOpen, children: /* @__PURE__ */ jsxs("div", { children: [
-      title ? /* @__PURE__ */ jsx(Typography, { variant: "heading3", children: title }) : null,
+      title && /* @__PURE__ */ jsx(Typography, { variant: "heading3", children: title }),
       /* @__PURE__ */ jsx(Subtitle, { children: "Click the Chat Icon below to begin" }),
       serverError ? /* @__PURE__ */ jsx(ErrorMessage, { children: serverError }) : null
     ] }) }),

package/package.json

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