@gobolt/genesis 0.3.4 → 0.3.6

package/dist/index.js

@@ -74898,11 +74898,96 @@ const ThinkingIndicator = () => /* @__PURE__ */ jsxs(ThinkingDots, { children: [
   /* @__PURE__ */ jsx("div", { className: "dot dot-2" }),
   /* @__PURE__ */ jsx("div", { className: "dot dot-3" })
 ] });
-const Message$1 = ({ message: message2, handle, isThinking = false }) => {
+const DataTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+  font-size: 14px;
+`;
+styled.th`
+  background-color: #f8f9fa;
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+  font-weight: 600;
+`;
+styled.td`
+  padding: 8px;
+  border-bottom: 1px solid #ddd;
+`;
+styled.tr`
+  &:hover {
+    background-color: #f5f5f5;
+  }
+`;
+const DataContainer = styled.div`
+  margin-top: 10px;
+`;
+const Message$1 = ({
+  message: message2,
+  handle,
+  isThinking = false,
+  data
+}) => {
   const isBot = handle === "bot";
+  const renderData = () => {
+    if (!data || data.length === 0) return null;
+    const isProposalData = (item) => "title" in item && "proposal_json" in item;
+    const isOwnerCountData = (item) => "owner_email" in item && "proposal_count" in item;
+    const isMonthlyCountData = (item) => "creation_month" in item && "proposal_count" in item;
+    if (isProposalData(data[0])) {
+      return /* @__PURE__ */ jsx(DataContainer, { children: /* @__PURE__ */ jsxs(DataTable, { children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: "Title" }),
+          /* @__PURE__ */ jsx("th", { children: "Created At" }),
+          /* @__PURE__ */ jsx("th", { children: "Updated At" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.map((proposal, index2) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: proposal.title }),
+          /* @__PURE__ */ jsx("td", { children: new Date(proposal.created_at).toLocaleDateString() }),
+          /* @__PURE__ */ jsx("td", { children: new Date(proposal.updated_at).toLocaleDateString() })
+        ] }, proposal.id || index2)) })
+      ] }) });
+    }
+    if (isOwnerCountData(data[0])) {
+      return /* @__PURE__ */ jsx(DataContainer, { children: /* @__PURE__ */ jsxs(DataTable, { children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: "Owner Email" }),
+          /* @__PURE__ */ jsx("th", { children: "Number of Proposals" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.map((row2, index2) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: row2.owner_email }),
+          /* @__PURE__ */ jsx("td", { children: row2.proposal_count })
+        ] }, index2)) })
+      ] }) });
+    }
+    if (isMonthlyCountData(data[0])) {
+      return /* @__PURE__ */ jsx(DataContainer, { children: /* @__PURE__ */ jsxs(DataTable, { children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { children: "Month" }),
+          /* @__PURE__ */ jsx("th", { children: "Number of Proposals" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.map((row2, index2) => /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: new Date(2024, row2.creation_month - 1).toLocaleString(
+            "default",
+            { month: "long" }
+          ) }),
+          /* @__PURE__ */ jsx("td", { children: row2.proposal_count })
+        ] }, index2)) })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx(DataContainer, { children: /* @__PURE__ */ jsxs(DataTable, { children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: Object.keys(data[0]).map((key) => /* @__PURE__ */ jsx("th", { children: key }, key)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: data.map((row2, index2) => /* @__PURE__ */ jsx("tr", { children: Object.values(row2).map((value2, i) => /* @__PURE__ */ jsx("td", { children: JSON.stringify(value2) }, i)) }, index2)) })
+    ] }) });
+  };
   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, { children: message2 }) : /* @__PURE__ */ jsx(MessageText, { children: message2 }) })
+    /* @__PURE__ */ jsx(TextContainer, { $isBot: isBot, children: isThinking || message2 === PROCESSING_MESSAGE ? /* @__PURE__ */ jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Markdown, { children: message2 }),
+      data && renderData(),
+      message2 === PROCESSING_MESSAGE && /* @__PURE__ */ jsx(ThinkingIndicator, {})
+    ] }) : /* @__PURE__ */ jsx(MessageText, { children: message2 }) })
   ] });
 };
 const getStateColors = (colors2, type4, state) => {
@@ -75314,73 +75399,480 @@ const Typography = ({
     }
   );
 };
-const ChatContainer = styled.div`
+const getBackgroundColor = (colors2, disabled2, $variant) => {
+  if ($variant === "simple") return "#F4F4F4";
+  if (disabled2) return "#F4F4F4";
+  return "#fff";
+};
+const TriggerWrapper = styled.div`
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled }) => $disabled ? 0.4 : 1};
   position: relative;
-  width: 600px;
-  overflow: hidden;
+  box-shadow: ${({ $variant }) => $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)"};
+  transition: all 0.2s ease-in-out;
+  min-height: ${({ $variant }) => $variant === "simple" ? "32px" : "40px"};
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus {
+    box-shadow:
+      0px 1px 2px 0px rgba(0, 0, 0, 0.12),
+      0 0 0 3px
+        ${({ theme, $themeType = "primary" }) => theme.colors[$themeType].focussed.ringColor};
+  }
+
+  ${({ $variant, theme, $disabled }) => {
+  var _a;
+  return $variant === "simple" ? `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)"};
+    border: none;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
+
+    &:hover {
+      border: none;
+    }
+    ` : `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled ? theme.colors.inputs.surface.disabled : (_a = theme.colors.surface.default) == null ? void 0 : _a.backgroundColor};
+    border: 1px solid #9a9a9a;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
+
+    &:hover {
+      border-color: rgba(0, 0, 0, 0.2);
+    }
+  `;
+}}
 `;
-const HeroContainer = styled.div`
+const ValueContainer = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
-  opacity: ${({ $isVisible }) => $isVisible ? 1 : 0};
-  transition: opacity 0.3s ease;
-`;
-styled.h1`
-  font-family: "Helvetica", "Arial", sans-serif;
-  color: teal;
-  font-size: 24px;
-  text-align: center;
-`;
-const Subtitle = styled.p`
-  font-family: "Helvetica", "Arial", sans-serif;
-  color: #666;
-  font-size: 16px;
-  text-align: center;
-`;
-const ErrorMessage = styled(Subtitle)`
-  color: red;
+  gap: ${({ theme }) => theme.sizing.Size2}px;
+  flex: 1;
+  padding: 4px 8px;
 `;
-const InputContainer = styled.div`
+const ChevronContainer = styled.div`
   display: flex;
-  justify-content: center;
   align-items: center;
-  padding: 8px;
-  gap: 8px;
+  justify-content: center;
+  margin-right: ${({ $variant }) => $variant === "simple" ? "4px" : "4px"};
+  margin-left: ${({ $variant }) => $variant === "simple" ? "4px" : "0"};
 `;
-const ChatButton = styled(Button$1)`
-  display: flex;
-  justify-content: flex-end;
-  margin: 16px;
+const SelectTrigger2 = ({
+  type: type4 = "primary",
+  theme,
+  state,
+  value: value2,
+  placeholder = "Select...",
+  open,
+  onClick,
+  renderValue,
+  options = [],
+  disabled: disabled2 = false,
+  variant = "none"
+}) => {
+  const handleClick = React__default.useCallback(() => {
+    if (disabled2) return;
+    onClick == null ? void 0 : onClick();
+  }, [disabled2, onClick]);
+  const displayValue = React__default.useMemo(() => {
+    if (!value2) return null;
+    if (renderValue) return renderValue(value2);
+    if (Array.isArray(value2)) {
+      if (value2.length === 0) return null;
+      const selectedLabels = value2.map(String).map((v) => {
+        var _a;
+        return (_a = options.find((opt) => opt.value === v)) == null ? void 0 : _a.label;
+      }).filter(Boolean);
+      return selectedLabels.length > 0 ? selectedLabels.join(", ") : `${value2.length} selected`;
+    }
+    const selectedOption = options.find((opt) => opt.value === String(value2));
+    return (selectedOption == null ? void 0 : selectedOption.label) || value2.toString();
+  }, [value2, renderValue, options]);
+  return /* @__PURE__ */ jsxs(
+    TriggerWrapper,
+    {
+      $themeType: type4,
+      $state: state,
+      onClick: handleClick,
+      tabIndex: disabled2 ? -1 : 0,
+      role: "button",
+      $disabled: disabled2,
+      $variant: variant,
+      style: {
+        backgroundColor: getBackgroundColor(theme, disabled2, variant)
+      },
+      children: [
+        /* @__PURE__ */ jsx(ValueContainer, { $variant: variant, children: displayValue ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: disabled2 ? "copy-light" : "copy", children: displayValue }) : /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: disabled2 ? "copy-light" : "copy-light",
+            children: placeholder
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ChevronContainer, { $variant: variant, children: /* @__PURE__ */ jsx(DropdownChevron, {}) })
+      ]
+    }
+  );
+};
+const SelectWrapper = styled.div`
+  position: relative;
+  background-color: transparent;
+  border-radius: 8px;
+  width: auto;
+
+  ${({ $isFocused, theme, type: type4 = "primary" }) => $isFocused && `
+    background-color: transparent;
+  `}
+
+  ${({ disabled: disabled2, theme }) => disabled2 && `
+    cursor: not-allowed;
+    
+    &:hover {
+      border-color: ${theme.colors.inputs.surface.border};
+    }
+  `}
 `;
-const MessageList = styled.div`
+const SelectDropdown = styled.div`
+  padding: 0px;
+  border-radius: 0px;
+  animation-duration: ${({ theme }) => `${theme.motion.veryfast}s`};
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`}
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &.entering {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  &.entered {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  &.exiting {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+`;
+const MenuItem = styled.div`
+  padding: 8px 12px;
+  cursor: ${({ disabled: disabled2 }) => disabled2 ? "not-allowed" : "pointer"};
+  background-color: ${({ $isSelected, theme, type: type4 = "primary" }) => $isSelected ? theme.colors[type4].hover.backgroundColor : "transparent"};
+  color: ${({ $isSelected, disabled: disabled2, theme, type: type4 = "primary" }) => disabled2 ? theme.colors.inputs.onsurface.disabled : $isSelected ? theme.colors[type4].hover.color : theme.colors.onsurface.copy};
   display: flex;
-  flex-direction: column;
-  padding: 16px;
-  gap: 8px;
-  max-height: 400px;
-  overflow-y: auto;
+  justify-content: space-between;
+  align-items: center;
+  transition: all ${({ theme }) => `${theme.motion.veryfast}s`} ease-in-out;
+  opacity: ${({ disabled: disabled2 }) => disabled2 ? 0.5 : 1};
+
+  ${({ disabled: disabled2 }) => !disabled2 && `
+    &:hover {
+      background-color: ${({ $isSelected, theme, type: type4 = "primary" }) => $isSelected ? theme.colors[type4].hover.backgroundColor : "rgba(0, 0, 0, 0.04)"};
+      color: ${({ $isSelected, theme, type: type4 = "primary" }) => $isSelected ? theme.colors[type4].hover.color : theme.colors.onsurface["copy-dark"]};
+    }
+
+    &:active {
+      background-color: ${({ theme, type: type4 = "primary" }) => theme.colors[type4].hover.backgroundColor};
+      color: ${({ theme, type: type4 = "primary" }) => theme.colors[type4].hover.color};
+    }
+  `}
 `;
-const Chat = ({
-  socketUrl = "http://localhost:3000",
-  isOpen = false,
-  messageHistory = [],
-  title = null,
-  isSimulated = false,
-  authToken
+const Select = ({
+  type: type4 = TYPE.primary,
+  state,
+  variant = "none",
+  defaultValue,
+  onChange,
+  size = "normal",
+  width = "100%",
+  value: value2,
+  options = [],
+  placeholder,
+  selectDisplayMode = "count",
+  isSingleSelect = false,
+  disabled: disabled2 = false,
+  ...rest
 }) => {
-  const [isChatOpen, setIsChatOpen] = useState(isOpen);
-  const [message2, setMessage] = useState("");
-  const [messages2, setMessages] = useState(messageHistory);
-  const [serverStatus, setServerStatus] = useState("unknown");
-  const [serverError, setServerError] = useState("");
-  const socketRef = useRef(null);
-  const messageListRef = useRef(null);
+  const [isOpen, setIsOpen] = React__default.useState(false);
+  const [isFocused, setIsFocused] = React__default.useState(false);
+  const [dropdownAnimation, setDropdownAnimation] = React__default.useState("entered");
+  const selectReference = React__default.useRef(null);
+  const { theme } = useGenesis();
+  React__default.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (selectReference.current && !selectReference.current.contains(event.target)) {
+        handleClose();
+        setIsFocused(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const handleClose = () => {
+    setDropdownAnimation("exiting");
+    setTimeout(() => {
+      setIsOpen(false);
+      setDropdownAnimation("entered");
+    }, 200);
+  };
+  const handleTriggerClick = () => {
+    if (disabled2) return;
+    setIsFocused(true);
+    if (isOpen) {
+      handleClose();
+    } else {
+      setIsOpen(true);
+      setDropdownAnimation("entering");
+      setTimeout(() => {
+        setDropdownAnimation("entered");
+      }, 0);
+    }
+  };
+  const handleOptionSelect = (optionValue) => {
+    if (disabled2) return;
+    let newValue;
+    if (Array.isArray(value2)) {
+      const stringValue = value2.map(String);
+      newValue = stringValue.includes(optionValue) ? stringValue.filter((v) => v !== optionValue) : [...stringValue, optionValue];
+    } else {
+      newValue = optionValue;
+    }
+    onChange == null ? void 0 : onChange(newValue);
+    if (isSingleSelect) {
+      handleClose();
+    }
+  };
+  const getSelectModeValue = (value22) => {
+    if (Array.isArray(value22)) {
+      if (selectDisplayMode === "count") {
+        return `${value22.length} selected`;
+      }
+      return value22;
+    }
+    return value22;
+  };
+  const modeValue = getSelectModeValue(value2);
+  return /* @__PURE__ */ jsx("div", { style: { position: "relative", width }, children: /* @__PURE__ */ jsxs(
+    SelectWrapper,
+    {
+      ref: selectReference,
+      $isFocused: isFocused,
+      type: type4,
+      disabled: disabled2,
+      onFocus: () => !disabled2 && setIsFocused(true),
+      onBlur: () => !isOpen && setIsFocused(false),
+      tabIndex: disabled2 ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger2,
+          {
+            theme,
+            type: type4,
+            state,
+            value: modeValue,
+            placeholder,
+            open: isOpen,
+            onClick: handleTriggerClick,
+            options,
+            disabled: disabled2,
+            variant
+          }
+        ),
+        isOpen && !disabled2 && /* @__PURE__ */ jsx(
+          SelectDropdown,
+          {
+            type: type4,
+            state,
+            className: dropdownAnimation,
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 1e3,
+              backgroundColor: "white",
+              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+              border: "1px solid #d9d9d9",
+              transformOrigin: "top"
+            },
+            children: options.map((option) => {
+              const isSelected = Array.isArray(value2) ? value2.map(String).includes(option.value) : String(value2) === option.value;
+              return /* @__PURE__ */ jsxs(
+                MenuItem,
+                {
+                  onClick: () => handleOptionSelect(option.value),
+                  $isSelected: isSelected,
+                  type: type4,
+                  disabled: disabled2,
+                  children: [
+                    option.label,
+                    isSelected && /* @__PURE__ */ jsx("span", { style: { marginLeft: "8px" }, children: "✓" })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  ) });
+};
+const PROCESSING_MESSAGE = "Processing your query...";
+const PREDEFINED_QUERIES = [
+  "What are the most recent proposals?",
+  "How many proposals does each owner have?",
+  "Show me all proposals created in the last month",
+  "What are the top 5 most active proposal owners?",
+  "How many proposals were created in each month of this year?"
+];
+const ChatContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: "100%";
+  max-width: "800px";
+  //overflow: hidden;
+`;
+const HeroContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({ $isVisible }) => $isVisible ? 1 : 0};
+  transition: opacity 0.3s ease;
+`;
+styled.h1`
+  font-family: "Helvetica", "Arial", sans-serif;
+  color: teal;
+  font-size: 24px;
+  text-align: center;
+`;
+const Subtitle = styled.p`
+  font-family: "Helvetica", "Arial", sans-serif;
+  color: #666;
+  font-size: 16px;
+  text-align: center;
+`;
+const ErrorMessage = styled(Subtitle)`
+  color: red;
+`;
+const InputContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  gap: 8px;
+`;
+const ChatButton = styled(Button$1)`
+  display: flex;
+  justify-content: flex-end;
+  margin: 16px;
+`;
+const MessageList = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+`;
+const ToggleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+  padding: 0 16px;
+`;
+const ToggleSwitch = styled.label`
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+`;
+const ToggleInput = styled.input`
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + span {
+    background-color: teal;
+  }
+
+  &:checked + span:before {
+    transform: translateX(26px);
+  }
+`;
+const ToggleSlider = styled.span`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+`;
+const ToggleLabel = styled.span`
+  font-family: "Helvetica", "Arial", sans-serif;
+  color: #666;
+  font-size: 14px;
+`;
+styled(Select)`
+  width: 600px;
+  margin-bottom: 8px;
+  margin: 26px;
+`;
+const Chat = ({
+  socketUrl = "http://localhost:3000",
+  isOpen = false,
+  messageHistory = [],
+  title = null,
+  isSimulated = false,
+  authToken,
+  overrideStyle,
+  onChange
+}) => {
+  const [isChatOpen, setIsChatOpen] = useState(isOpen);
+  const [message2, setMessage] = useState("");
+  const [messages2, setMessages] = useState(messageHistory);
+  const [serverStatus, setServerStatus] = useState("unknown");
+  const [serverError, setServerError] = useState("");
+  const socketRef = useRef(null);
+  const messageListRef = useRef(null);
   const serverReadyRef = useRef(false);
   const handle = "user";
   const [isLocked, setIsLocked] = useState(false);
+  const [messageStartTime, setMessageStartTime] = useState(null);
+  const [currentQuestion, setCurrentQuestion] = useState("");
+  const [isDataQueryMode, setIsDataQueryMode] = useState(false);
+  const [hasReceivedResponse, setHasReceivedResponse] = useState(false);
+  const timeoutRef = useRef(null);
   useEffect(() => {
     if (isSimulated) return;
     const socketUrlToUse = window.location.hostname === "localhost" && window.location.port === "6006" ? "http://localhost:3000" : socketUrl;
@@ -75445,27 +75937,46 @@ const Chat = ({
           serverReadyRef.current = true;
         });
         socket.on("message", (newMessage) => {
+          console.log("\n=== Received Message Event ===");
+          console.log("New Message:", newMessage);
           setMessages((prev2) => {
             if (newMessage.sender === "bot") {
-              if (newMessage.content === "Processing your message...") {
+              if (newMessage.isThinking) {
                 const hasThinkingMessage = prev2.some((msg) => msg.isThinking);
                 if (hasThinkingMessage) {
+                  console.log("Already have thinking message, skipping");
                   return prev2;
                 }
+                console.log("Adding thinking message");
                 return [...prev2, { ...newMessage, isThinking: true }];
               }
               const thinkingMessage = prev2.find((msg) => msg.isThinking);
               if (thinkingMessage) {
+                console.log("Replacing thinking message with final response");
+                const updatedMessage = {
+                  ...newMessage,
+                  isThinking: false,
+                  content: newMessage.content || newMessage.response || "No response content"
+                };
                 return prev2.map(
-                  (msg) => msg.isThinking ? { ...newMessage, isThinking: false } : msg
+                  (msg) => msg.isThinking ? updatedMessage : msg
                 );
               }
-              return [...prev2, { ...newMessage, isThinking: false }];
+              console.log("Adding new bot message");
+              const messageToAdd = {
+                ...newMessage,
+                isThinking: false,
+                content: newMessage.content || newMessage.response || "No response content"
+              };
+              console.log("messageToAdd", messageToAdd);
+              return [...prev2, messageToAdd];
             }
             const lastUserMsg = [...prev2].reverse().find((msg) => msg.sender === "user");
             if (lastUserMsg && lastUserMsg.content === newMessage.content) {
+              console.log("Duplicate user message, skipping");
               return prev2;
             }
+            console.log("Adding new user message");
             return [...prev2, newMessage];
           });
           setIsLocked(false);
@@ -75496,6 +76007,44 @@ const Chat = ({
             setIsLocked(false);
           }
         }, 2e3);
+        socket.on(
+          "query_data_response",
+          (response2) => {
+            console.log("\n=== Received Query Data Response ===");
+            console.log("Response:", response2);
+            setMessages((prev2) => {
+              const thinkingMessage = prev2.find((msg) => msg.isThinking);
+              if (!thinkingMessage) {
+                console.log("No thinking message found, adding new message");
+                return [
+                  ...prev2,
+                  {
+                    id: `bot_${Date.now()}`,
+                    content: response2.error || response2.response,
+                    sender: "bot",
+                    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                    isThinking: false,
+                    data: response2.data,
+                    respondedBy: "ai"
+                  }
+                ];
+              }
+              console.log("Replacing thinking message with response");
+              return prev2.map(
+                (msg) => msg.isThinking ? {
+                  id: msg.id,
+                  content: response2.error || response2.response,
+                  sender: "bot",
+                  timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                  isThinking: false,
+                  data: response2.data,
+                  respondedBy: "ai"
+                } : msg
+              );
+            });
+            setIsLocked(false);
+          }
+        );
         return () => {
           console.log("Disconnecting socket");
           socket.disconnect();
@@ -75538,11 +76087,14 @@ const Chat = ({
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     };
     setIsLocked(true);
+    setHasReceivedResponse(false);
+    setMessageStartTime(Date.now());
+    setCurrentQuestion(message2);
     setMessages((prev2) => [...prev2, userMessage]);
     if ((_a = socketRef.current) == null ? void 0 : _a.connected) {
       const botMessageId = `bot_${timestamp}`;
       const thinkingMessage = {
-        content: "",
+        content: PROCESSING_MESSAGE,
         sender: "bot",
         id: botMessageId,
         isThinking: true,
@@ -75555,23 +76107,98 @@ const Chat = ({
       setIsLocked(false);
       return;
     }
-    socketRef.current.emit("message", userMessage);
-    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);
+    if (isDataQueryMode) {
+      socketRef.current.emit(
+        "query_data",
+        { query: message2 },
+        (response) => {
+          console.log("\n=== Query Data Callback Response ===");
+          console.log("Response:", response);
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+          }
+          setHasReceivedResponse(true);
+          setMessages((prev2) => {
+            const thinkingMessage = prev2.find((msg) => msg.isThinking);
+            if (!thinkingMessage) {
+              console.log("No thinking message found, adding new message");
+              return [
+                ...prev2,
+                {
+                  id: `bot_${Date.now()}`,
+                  content: response.error || response.response,
+                  sender: "bot",
+                  timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                  isThinking: false,
+                  data: response.data,
+                  respondedBy: "ai"
+                }
+              ];
+            }
+            console.log("Replacing thinking message with response");
+            return prev2.map(
+              (msg) => msg.isThinking ? {
+                id: msg.id,
+                content: response.error || response.response,
+                sender: "bot",
+                timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                isThinking: false,
+                data: response.data,
+                respondedBy: "ai"
+              } : msg
+            );
+          });
+          setIsLocked(false);
+        }
+      );
+      timeoutRef.current = setTimeout(() => {
+        if (!hasReceivedResponse) {
+          setMessages((prev2) => {
+            const thinkingMessage = prev2.find((msg) => msg.isThinking);
+            if (thinkingMessage) {
+              return prev2.map(
+                (msg) => msg.isThinking ? {
+                  ...msg,
+                  content: "The query is taking longer than expected. Please try again or rephrase your question.",
+                  isThinking: false,
+                  respondedBy: "ai"
+                } : msg
+              );
+            }
+            return prev2;
+          });
+          setIsLocked(false);
+        }
+      }, 9e4);
+    } else {
+      socketRef.current.emit("message", userMessage);
     }
     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);
   };
@@ -75581,40 +76208,93 @@ const Chat = ({
   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)
-  );
+  const uniqueMessages = messages2.filter((msg, index2, self2) => {
+    const duplicates = self2.filter((m) => m.id === msg.id);
+    if (duplicates.length > 1) {
+      if (msg.respondedBy === "ai" || msg.respondedBy === "search") return true;
+      if (msg.isThinking || msg.content === PROCESSING_MESSAGE) {
+        return !duplicates.some(
+          (m) => m.respondedBy === "ai" || m.respondedBy === "search"
+        );
+      }
+      return false;
+    }
+    return true;
+  });
   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 }) : null,
+  console.log("messages", messages2);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  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 }),
       /* @__PURE__ */ jsx(Subtitle, { children: "Click the Chat Icon below to begin" }),
       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 }) : null }) }),
+      /* @__PURE__ */ jsxs(ToggleContainer, { children: [
+        /* @__PURE__ */ jsxs(ToggleSwitch, { children: [
+          /* @__PURE__ */ jsx(
+            ToggleInput,
+            {
+              type: "checkbox",
+              checked: isDataQueryMode,
+              onChange: (e2) => setIsDataQueryMode(e2.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsx(ToggleSlider, {})
+        ] }),
+        /* @__PURE__ */ jsx(ToggleLabel, { children: isDataQueryMode ? "Data Query Mode" : "Regular Chat" })
+      ] }),
       /* @__PURE__ */ jsx(MessageList, { ref: messageListRef, children: uniqueMessages.map((msg) => /* @__PURE__ */ jsx(
         Message$1,
         {
           message: msg.content,
           handle: msg.sender,
-          isThinking: msg.isThinking
+          isThinking: msg.isThinking,
+          data: msg.data
         },
         msg.id
       )) }),
-      /* @__PURE__ */ jsxs(InputContainer, { children: [
-        /* @__PURE__ */ jsx(
-          Input2,
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(InputContainer, { children: [
+          /* @__PURE__ */ jsx("div", { style: { width: 600 }, children: /* @__PURE__ */ jsx(
+            Input2,
+            {
+              type: "text",
+              value: message2,
+              onChange: handleInputChange,
+              onKeyDown: handleKeyDown,
+              placeholder: isDataQueryMode ? "Ask about proposals, views, or chat questions..." : "Type a message...",
+              disabled: isLocked,
+              style: { width: 600 }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Button$1, { onClick: sendMessage, disabled: isLocked, children: "Send" })
+        ] }),
+        isDataQueryMode && /* @__PURE__ */ jsx("div", { style: { marginTop: 8, marginLeft: 8 }, children: /* @__PURE__ */ jsx(
+          Select,
           {
-            type: "text",
-            value: message2,
-            onChange: handleInputChange,
-            onKeyDown: handleKeyDown,
-            placeholder: "Type a message & press Enter or Send",
-            disabled: isLocked
+            width: 400,
+            options: PREDEFINED_QUERIES.map((query) => ({
+              label: query,
+              value: query
+            })),
+            placeholder: "Select a predefined query...",
+            onChange: (selected) => {
+              if (selected) {
+                setMessage(selected);
+              }
+            },
+            isSingleSelect: true
           }
-        ),
-        /* @__PURE__ */ jsx(Button$1, { onClick: sendMessage, disabled: isLocked, children: "Send" })
+        ) })
       ] })
     ] }) : /* @__PURE__ */ jsx(ChatButton, { onClick: toggleChat, children: "Chat" })
   ] });
@@ -78681,338 +79361,6 @@ const SegmentedControls = ({
     }
   );
 };
-const getBackgroundColor = (colors2, disabled2, $variant) => {
-  if ($variant === "simple") return "#F4F4F4";
-  if (disabled2) return "#F4F4F4";
-  return "#fff";
-};
-const TriggerWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  opacity: ${({ $disabled }) => $disabled ? 0.4 : 1};
-  position: relative;
-  box-shadow: ${({ $variant }) => $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)"};
-  transition: all 0.2s ease-in-out;
-  min-height: ${({ $variant }) => $variant === "simple" ? "32px" : "40px"};
-
-  &:focus-visible {
-    outline: none;
-  }
-
-  &:focus {
-    box-shadow:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.12),
-      0 0 0 3px
-        ${({ theme, $themeType = "primary" }) => theme.colors[$themeType].focussed.ringColor};
-  }
-
-  ${({ $variant, theme, $disabled }) => {
-  var _a;
-  return $variant === "simple" ? `
-    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
-    background: ${$disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)"};
-    border: none;
-    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
-    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
-
-    &:hover {
-      border: none;
-    }
-    ` : `
-    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
-    background: ${$disabled ? theme.colors.inputs.surface.disabled : (_a = theme.colors.surface.default) == null ? void 0 : _a.backgroundColor};
-    border: 1px solid #9a9a9a;
-    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
-    min-height: ${({ $variant: $variant2 }) => $variant2 === "simple" ? "32px" : "40px"};
-
-    &:hover {
-      border-color: rgba(0, 0, 0, 0.2);
-    }
-  `;
-}}
-`;
-const ValueContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.sizing.Size2}px;
-  flex: 1;
-  padding: 4px 8px;
-`;
-const ChevronContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${({ $variant }) => $variant === "simple" ? "4px" : "4px"};
-  margin-left: ${({ $variant }) => $variant === "simple" ? "4px" : "0"};
-`;
-const SelectTrigger2 = ({
-  type: type4 = "primary",
-  theme,
-  state,
-  value: value2,
-  placeholder = "Select...",
-  open,
-  onClick,
-  renderValue,
-  options = [],
-  disabled: disabled2 = false,
-  variant = "none"
-}) => {
-  const handleClick = React__default.useCallback(() => {
-    if (disabled2) return;
-    onClick == null ? void 0 : onClick();
-  }, [disabled2, onClick]);
-  const displayValue = React__default.useMemo(() => {
-    if (!value2) return null;
-    if (renderValue) return renderValue(value2);
-    if (Array.isArray(value2)) {
-      if (value2.length === 0) return null;
-      const selectedLabels = value2.map(String).map((v) => {
-        var _a;
-        return (_a = options.find((opt) => opt.value === v)) == null ? void 0 : _a.label;
-      }).filter(Boolean);
-      return selectedLabels.length > 0 ? selectedLabels.join(", ") : `${value2.length} selected`;
-    }
-    const selectedOption = options.find((opt) => opt.value === String(value2));
-    return (selectedOption == null ? void 0 : selectedOption.label) || value2.toString();
-  }, [value2, renderValue, options]);
-  return /* @__PURE__ */ jsxs(
-    TriggerWrapper,
-    {
-      $themeType: type4,
-      $state: state,
-      onClick: handleClick,
-      tabIndex: disabled2 ? -1 : 0,
-      role: "button",
-      $disabled: disabled2,
-      $variant: variant,
-      style: {
-        backgroundColor: getBackgroundColor(theme, disabled2, variant)
-      },
-      children: [
-        /* @__PURE__ */ jsx(ValueContainer, { $variant: variant, children: displayValue ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: disabled2 ? "copy-light" : "copy", children: displayValue }) : /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "body2",
-            color: disabled2 ? "copy-light" : "copy-light",
-            children: placeholder
-          }
-        ) }),
-        /* @__PURE__ */ jsx(ChevronContainer, { $variant: variant, children: /* @__PURE__ */ jsx(DropdownChevron, {}) })
-      ]
-    }
-  );
-};
-const SelectWrapper = styled.div`
-  position: relative;
-  background-color: transparent;
-  border-radius: 8px;
-  width: auto;
-
-  ${({ $isFocused, theme, type: type4 = "primary" }) => $isFocused && `
-    background-color: transparent;
-  `}
-
-  ${({ disabled: disabled2, theme }) => disabled2 && `
-    cursor: not-allowed;
-    
-    &:hover {
-      border-color: ${theme.colors.inputs.surface.border};
-    }
-  `}
-`;
-const SelectDropdown = styled.div`
-  padding: 0px;
-  border-radius: 0px;
-  animation-duration: ${({ theme }) => `${theme.motion.veryfast}s`};
-  transition: all ${({ theme }) => `${theme.motion.veryfast}s`}
-    cubic-bezier(0.645, 0.045, 0.355, 1);
-
-  &.entering {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-
-  &.entered {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-
-  &.exiting {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-`;
-const MenuItem = styled.div`
-  padding: 8px 12px;
-  cursor: ${({ disabled: disabled2 }) => disabled2 ? "not-allowed" : "pointer"};
-  background-color: ${({ $isSelected, theme, type: type4 = "primary" }) => $isSelected ? theme.colors[type4].hover.backgroundColor : "transparent"};
-  color: ${({ $isSelected, disabled: disabled2, theme, type: type4 = "primary" }) => disabled2 ? theme.colors.inputs.onsurface.disabled : $isSelected ? theme.colors[type4].hover.color : theme.colors.onsurface.copy};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: all ${({ theme }) => `${theme.motion.veryfast}s`} ease-in-out;
-  opacity: ${({ disabled: disabled2 }) => disabled2 ? 0.5 : 1};
-
-  ${({ disabled: disabled2 }) => !disabled2 && `
-    &:hover {
-      background-color: ${({ $isSelected, theme, type: type4 = "primary" }) => $isSelected ? theme.colors[type4].hover.backgroundColor : "rgba(0, 0, 0, 0.04)"};
-      color: ${({ $isSelected, theme, type: type4 = "primary" }) => $isSelected ? theme.colors[type4].hover.color : theme.colors.onsurface["copy-dark"]};
-    }
-
-    &:active {
-      background-color: ${({ theme, type: type4 = "primary" }) => theme.colors[type4].hover.backgroundColor};
-      color: ${({ theme, type: type4 = "primary" }) => theme.colors[type4].hover.color};
-    }
-  `}
-`;
-const Select = ({
-  type: type4 = TYPE.primary,
-  state,
-  variant = "none",
-  defaultValue,
-  onChange,
-  size = "normal",
-  width = "100%",
-  value: value2,
-  options = [],
-  placeholder,
-  selectDisplayMode = "count",
-  isSingleSelect = false,
-  disabled: disabled2 = false,
-  ...rest
-}) => {
-  const [isOpen, setIsOpen] = React__default.useState(false);
-  const [isFocused, setIsFocused] = React__default.useState(false);
-  const [dropdownAnimation, setDropdownAnimation] = React__default.useState("entered");
-  const selectReference = React__default.useRef(null);
-  const { theme } = useGenesis();
-  React__default.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (selectReference.current && !selectReference.current.contains(event.target)) {
-        handleClose();
-        setIsFocused(false);
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-  const handleClose = () => {
-    setDropdownAnimation("exiting");
-    setTimeout(() => {
-      setIsOpen(false);
-      setDropdownAnimation("entered");
-    }, 200);
-  };
-  const handleTriggerClick = () => {
-    if (disabled2) return;
-    setIsFocused(true);
-    if (isOpen) {
-      handleClose();
-    } else {
-      setIsOpen(true);
-      setDropdownAnimation("entering");
-      setTimeout(() => {
-        setDropdownAnimation("entered");
-      }, 0);
-    }
-  };
-  const handleOptionSelect = (optionValue) => {
-    if (disabled2) return;
-    let newValue;
-    if (Array.isArray(value2)) {
-      const stringValue = value2.map(String);
-      newValue = stringValue.includes(optionValue) ? stringValue.filter((v) => v !== optionValue) : [...stringValue, optionValue];
-    } else {
-      newValue = optionValue;
-    }
-    onChange == null ? void 0 : onChange(newValue);
-    if (isSingleSelect) {
-      handleClose();
-    }
-  };
-  const getSelectModeValue = (value22) => {
-    if (Array.isArray(value22)) {
-      if (selectDisplayMode === "count") {
-        return `${value22.length} selected`;
-      }
-      return value22;
-    }
-    return value22;
-  };
-  const modeValue = getSelectModeValue(value2);
-  return /* @__PURE__ */ jsx("div", { style: { position: "relative", width }, children: /* @__PURE__ */ jsxs(
-    SelectWrapper,
-    {
-      ref: selectReference,
-      $isFocused: isFocused,
-      type: type4,
-      disabled: disabled2,
-      onFocus: () => !disabled2 && setIsFocused(true),
-      onBlur: () => !isOpen && setIsFocused(false),
-      tabIndex: disabled2 ? -1 : 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          SelectTrigger2,
-          {
-            theme,
-            type: type4,
-            state,
-            value: modeValue,
-            placeholder,
-            open: isOpen,
-            onClick: handleTriggerClick,
-            options,
-            disabled: disabled2,
-            variant
-          }
-        ),
-        isOpen && !disabled2 && /* @__PURE__ */ jsx(
-          SelectDropdown,
-          {
-            type: type4,
-            state,
-            className: dropdownAnimation,
-            style: {
-              position: "absolute",
-              top: "calc(100% + 4px)",
-              left: 0,
-              right: 0,
-              zIndex: 1e3,
-              backgroundColor: "white",
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-              border: "1px solid #d9d9d9",
-              transformOrigin: "top"
-            },
-            children: options.map((option) => {
-              const isSelected = Array.isArray(value2) ? value2.map(String).includes(option.value) : String(value2) === option.value;
-              return /* @__PURE__ */ jsxs(
-                MenuItem,
-                {
-                  onClick: () => handleOptionSelect(option.value),
-                  $isSelected: isSelected,
-                  type: type4,
-                  disabled: disabled2,
-                  children: [
-                    option.label,
-                    isSelected && /* @__PURE__ */ jsx("span", { style: { marginLeft: "8px" }, children: "✓" })
-                  ]
-                },
-                option.value
-              );
-            })
-          }
-        )
-      ]
-    }
-  ) });
-};
 const Circle2 = ({ fill = "#CF3237", dataTestId }) => /* @__PURE__ */ jsx(
   "svg",
   {