@hef2024/llmasaservice-ui 0.18.0 → 0.19.1

package/dist/index.css

@@ -1031,8 +1031,10 @@ button[data-pending=true]::after {
 .ai-agent-panel {
   display: flex;
   flex-direction: row;
+  flex-wrap: nowrap;
   align-self: stretch;
   height: 100%;
+  min-height: 400px;
   max-height: 100%;
   background-color: var(--ai-sidebar-bg);
   border-left: 1px solid var(--ai-sidebar-border);
@@ -1055,7 +1057,7 @@ button[data-pending=true]::after {
   border-right: 1px solid var(--ai-sidebar-border);
 }
 .ai-agent-panel--sidebar-left {
-  flex-direction: row;
+  flex-direction: row !important;
 }
 .ai-agent-panel--sidebar-left .ai-agent-panel__sidebar {
   order: 1;
@@ -1979,6 +1981,18 @@ button[data-pending=true]::after {
   flex: 1;
   border: none;
 }
+.ai-agent-panel__chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px;
+  background-color: var(--ai-header-bg);
+  border-bottom: 1px solid var(--ai-header-border);
+  flex-shrink: 0;
+}
+.ai-agent-panel__chat-header-spacer {
+  flex: 1;
+}
 .ai-agent-panel__context-notification {
   position: absolute;
   bottom: 70px;

package/dist/index.d.mts

@@ -195,6 +195,7 @@ interface AIAgentPanelProps {
         data: string;
     }[];
     theme?: 'light' | 'dark';
+    collapsible?: boolean;
     defaultCollapsed?: boolean;
     defaultWidth?: number;
     minWidth?: number;

package/dist/index.d.ts

@@ -195,6 +195,7 @@ interface AIAgentPanelProps {
         data: string;
     }[];
     theme?: 'light' | 'dark';
+    collapsible?: boolean;
     defaultCollapsed?: boolean;
     defaultWidth?: number;
     minWidth?: number;

package/dist/index.js

@@ -1670,6 +1670,7 @@ var ChatPanel = ({
   const continueChat = (suggestion) => {
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
+    setResponse("");
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
       const newId = (currentCustomer == null ? void 0 : currentCustomer.customer_id) && currentCustomer.customer_id !== "" && currentCustomer.customer_id !== (currentCustomer == null ? void 0 : currentCustomer.customer_user_email) ? currentCustomer.customer_id : emailInput;
       setEmailInputSet(true);
@@ -3898,6 +3899,7 @@ var AIChatPanel = ({
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
     setUserHasScrolled(false);
+    setResponse("");
     if (!idle) {
       stop(lastController);
       setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
@@ -3994,7 +3996,8 @@ ${followOnPrompt}`;
     ensureConversation,
     dataWithExtras,
     scrollToBottom,
-    onConversationCreated
+    onConversationCreated,
+    setResponse
   ]);
   const handleSuggestionClick = (0, import_react11.useCallback)((question) => {
     continueChat(question);
@@ -4242,8 +4245,8 @@ ${followOnPrompt}`;
     ))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-thinking__content" }, cleanContentForDisplay(currentBlock.content)));
   }, [thinkingBlocks, currentThinkingIndex, cleanContentForDisplay]);
   const panelClasses = ["ai-chat-panel", theme === "dark" ? "dark-theme" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ import_react11.default.createElement("div", { className: panelClasses }, title && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-panel__title" }, title), /* @__PURE__ */ import_react11.default.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message__content" }, /* @__PURE__ */ import_react11.default.createElement(import_react_markdown2.default, { remarkPlugins: [import_remark_gfm2.default], rehypePlugins: [import_rehype_raw2.default] }, initialMessage))), Object.entries(history).map(([prompt, entry], index) => {
-    const isLastEntry = index === Object.keys(history).length - 1;
+  return /* @__PURE__ */ import_react11.default.createElement("div", { className: panelClasses }, title && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-panel__title" }, title), /* @__PURE__ */ import_react11.default.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message__content" }, /* @__PURE__ */ import_react11.default.createElement(import_react_markdown2.default, { remarkPlugins: [import_remark_gfm2.default], rehypePlugins: [import_rehype_raw2.default] }, initialMessage))), Object.entries(history).map(([prompt, entry], index, entries) => {
+    const isLastEntry = index === entries.length - 1;
     const isSystemMessage = prompt.startsWith("__system__:");
     const { cleanedText } = processThinkingTags(entry.content);
     const processedContent = processActions(cleanedText);
@@ -4768,6 +4771,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
   maxContextTokens = 8e3,
   data = [],
   theme = "light",
+  collapsible = true,
   defaultCollapsed = false,
   defaultWidth = 720,
   minWidth = 520,
@@ -4796,7 +4800,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
   showConversationHistory = true
 }, ref) => {
   var _a, _b, _c, _d;
-  const [isCollapsed, setIsCollapsed] = (0, import_react13.useState)(defaultCollapsed);
+  const [isCollapsed, setIsCollapsed] = (0, import_react13.useState)(collapsible && defaultCollapsed);
   const [isHistoryCollapsed, setIsHistoryCollapsed] = (0, import_react13.useState)(() => {
     if (typeof window !== "undefined") {
       const saved = localStorage.getItem("ai-agent-panel-history-collapsed");
@@ -5561,8 +5565,9 @@ var AIAgentPanel = import_react13.default.forwardRef(({
     }
   }, [onConversationChange]);
   const toggleCollapse = (0, import_react13.useCallback)(() => {
+    if (!collapsible) return;
     setIsCollapsed((prev) => !prev);
-  }, []);
+  }, [collapsible]);
   const toggleHistoryCollapse = (0, import_react13.useCallback)(() => {
     setIsHistoryCollapsed((prev) => {
       const next = !prev;
@@ -5578,7 +5583,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
     sidebarPosition === "right" ? "ai-agent-panel--sidebar-right" : "ai-agent-panel--sidebar-left",
     !showConversationHistory ? "ai-agent-panel--no-history" : ""
   ].filter(Boolean).join(" ");
-  if (isCollapsed) {
+  if (collapsible && isCollapsed) {
     return /* @__PURE__ */ import_react13.default.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ import_react13.default.createElement(
       "div",
       {
@@ -5801,7 +5806,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
         onClick: handleNewConversation
       },
       /* @__PURE__ */ import_react13.default.createElement(PlusIcon, null)
-    ))), /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ import_react13.default.createElement(SidebarIcon, null))), /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react13.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react13.default.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ import_react13.default.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ import_react13.default.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
+    ))), /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ import_react13.default.createElement(SidebarIcon, null))), collapsible && /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react13.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react13.default.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ import_react13.default.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ import_react13.default.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
       "div",
       {
         key: activeConv.stableKey,
@@ -5843,7 +5848,7 @@ var AIAgentPanel = import_react13.default.forwardRef(({
         /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ import_react13.default.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
       );
     }))))))),
-    /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat" }, showContextNotification && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ import_react13.default.createElement(SparkleIcon, null), /* @__PURE__ */ import_react13.default.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
+    /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react13.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react13.default.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ import_react13.default.createElement(SparkleIcon, null), /* @__PURE__ */ import_react13.default.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
       ChatPanelWrapper,
       {
         key: `${activeConv.stableKey}-${activeConv.agentId}`,

package/dist/index.mjs

@@ -1631,6 +1631,7 @@ var ChatPanel = ({
   const continueChat = (suggestion) => {
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
+    setResponse("");
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
       const newId = (currentCustomer == null ? void 0 : currentCustomer.customer_id) && currentCustomer.customer_id !== "" && currentCustomer.customer_id !== (currentCustomer == null ? void 0 : currentCustomer.customer_user_email) ? currentCustomer.customer_id : emailInput;
       setEmailInputSet(true);
@@ -3865,6 +3866,7 @@ var AIChatPanel = ({
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
     setUserHasScrolled(false);
+    setResponse("");
     if (!idle) {
       stop(lastController);
       setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
@@ -3961,7 +3963,8 @@ ${followOnPrompt}`;
     ensureConversation,
     dataWithExtras,
     scrollToBottom,
-    onConversationCreated
+    onConversationCreated,
+    setResponse
   ]);
   const handleSuggestionClick = useCallback2((question) => {
     continueChat(question);
@@ -4209,8 +4212,8 @@ ${followOnPrompt}`;
     ))), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-thinking__content" }, cleanContentForDisplay(currentBlock.content)));
   }, [thinkingBlocks, currentThinkingIndex, cleanContentForDisplay]);
   const panelClasses = ["ai-chat-panel", theme === "dark" ? "dark-theme" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React11.createElement("div", { className: panelClasses }, title && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__title" }, title), /* @__PURE__ */ React11.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__content" }, /* @__PURE__ */ React11.createElement(ReactMarkdown2, { remarkPlugins: [remarkGfm2], rehypePlugins: [rehypeRaw2] }, initialMessage))), Object.entries(history).map(([prompt, entry], index) => {
-    const isLastEntry = index === Object.keys(history).length - 1;
+  return /* @__PURE__ */ React11.createElement("div", { className: panelClasses }, title && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__title" }, title), /* @__PURE__ */ React11.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__content" }, /* @__PURE__ */ React11.createElement(ReactMarkdown2, { remarkPlugins: [remarkGfm2], rehypePlugins: [rehypeRaw2] }, initialMessage))), Object.entries(history).map(([prompt, entry], index, entries) => {
+    const isLastEntry = index === entries.length - 1;
     const isSystemMessage = prompt.startsWith("__system__:");
     const { cleanedText } = processThinkingTags(entry.content);
     const processedContent = processActions(cleanedText);
@@ -4735,6 +4738,7 @@ var AIAgentPanel = React12.forwardRef(({
   maxContextTokens = 8e3,
   data = [],
   theme = "light",
+  collapsible = true,
   defaultCollapsed = false,
   defaultWidth = 720,
   minWidth = 520,
@@ -4763,7 +4767,7 @@ var AIAgentPanel = React12.forwardRef(({
   showConversationHistory = true
 }, ref) => {
   var _a, _b, _c, _d;
-  const [isCollapsed, setIsCollapsed] = useState8(defaultCollapsed);
+  const [isCollapsed, setIsCollapsed] = useState8(collapsible && defaultCollapsed);
   const [isHistoryCollapsed, setIsHistoryCollapsed] = useState8(() => {
     if (typeof window !== "undefined") {
       const saved = localStorage.getItem("ai-agent-panel-history-collapsed");
@@ -5528,8 +5532,9 @@ var AIAgentPanel = React12.forwardRef(({
     }
   }, [onConversationChange]);
   const toggleCollapse = useCallback4(() => {
+    if (!collapsible) return;
     setIsCollapsed((prev) => !prev);
-  }, []);
+  }, [collapsible]);
   const toggleHistoryCollapse = useCallback4(() => {
     setIsHistoryCollapsed((prev) => {
       const next = !prev;
@@ -5545,7 +5550,7 @@ var AIAgentPanel = React12.forwardRef(({
     sidebarPosition === "right" ? "ai-agent-panel--sidebar-right" : "ai-agent-panel--sidebar-left",
     !showConversationHistory ? "ai-agent-panel--no-history" : ""
   ].filter(Boolean).join(" ");
-  if (isCollapsed) {
+  if (collapsible && isCollapsed) {
     return /* @__PURE__ */ React12.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ React12.createElement(
       "div",
       {
@@ -5768,7 +5773,7 @@ var AIAgentPanel = React12.forwardRef(({
         onClick: handleNewConversation
       },
       /* @__PURE__ */ React12.createElement(PlusIcon, null)
-    ))), /* @__PURE__ */ React12.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ React12.createElement(SidebarIcon, null))), /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ React12.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ React12.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
+    ))), /* @__PURE__ */ React12.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ React12.createElement(SidebarIcon, null))), collapsible && /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ React12.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ React12.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
       "div",
       {
         key: activeConv.stableKey,
@@ -5810,7 +5815,7 @@ var AIAgentPanel = React12.forwardRef(({
         /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ React12.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
       );
     }))))))),
-    /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat" }, showContextNotification && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ React12.createElement(SparkleIcon, null), /* @__PURE__ */ React12.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ React12.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ React12.createElement(SparkleIcon, null), /* @__PURE__ */ React12.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
       ChatPanelWrapper,
       {
         key: `${activeConv.stableKey}-${activeConv.agentId}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIChatPanel.tsx

@@ -1042,6 +1042,11 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Reset scroll tracking for new message - enable auto-scroll
     setUserHasScrolled(false);
     
+    // IMPORTANT: Clear the response BEFORE setting new lastKey
+    // This prevents the old response from being written to the new history entry
+    // when the history update effect runs
+    setResponse('');
+    
     // Handle stop if not idle (matches ChatPanel)
     if (!idle) {
       stop(lastController);
@@ -1174,6 +1179,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     dataWithExtras,
     scrollToBottom,
     onConversationCreated,
+    setResponse,
   ]);
 
   // Handle suggestion click - directly sends like ChatPanel does
@@ -1635,8 +1641,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         )}
         
         {/* History */}
-        {Object.entries(history).map(([prompt, entry], index) => {
-          const isLastEntry = index === Object.keys(history).length - 1;
+        {Object.entries(history).map(([prompt, entry], index, entries) => {
+          const isLastEntry = index === entries.length - 1;
           // Check if this is a system message (injected by page context, etc.)
           const isSystemMessage = prompt.startsWith('__system__:');
           // Process thinking tags first, then apply actions at render time

package/src/ChatPanel.tsx

@@ -2154,6 +2154,11 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
 
+    // IMPORTANT: Clear the response BEFORE setting new lastKey
+    // This prevents the old response from being written to the new history entry
+    // when the history update effect runs
+    setResponse("");
+
     // Auto-set email if valid before proceeding
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
       const newId =