llmasaservice-ui 0.12.39 → 0.13.0

package/README.md

@@ -7,6 +7,7 @@ This library offers a pre-built panel for incorporating chat GPT style features
 Features
 - Multi-turn style chat interface
 - Open with an initial prompt (for example, after a click on a Summarize button in your application, set the initialPrompt to "Summarize the following text ..." and the panel will automatically show the summary)
+- New Conversation button to reset chat history while preserving customer information
 - Light and dark theme
 - Abort functionality
 - Markdown response display
@@ -145,6 +146,13 @@ c) use prose as the class for the markdownStyle. This example is for dark mode
 ## Customization
 You can customize the chat panel by passing props to the ChatPanel component. Refer to the library documentation for more details on available props and customization options.
 
+### Button Controls
+- `showSaveButton`: Show/hide the save conversation button (default: true)
+- `showEmailButton`: Show/hide the email conversation button (default: true)  
+- `showNewConversationButton`: Show/hide the new conversation button (default: true)
+
+The New Conversation button resets the chat history and state while preserving customer email and identification information. It requires two clicks for confirmation to prevent accidental resets - the first click changes the button to "Click to Confirm" and the second click performs the reset.
+
 See our storybook documentation showing how to theme, size and use the variaous features in this component:
 
 https://predictabilityatscale.github.io/llmasaservice-ui/?path=/docs/chatpanel--docs

package/dist/index.css

@@ -333,6 +333,37 @@
   background-color: var(--button-background-color-hover);
   color: var(--button-text-color-hover);
 }
+.llm-panel .new-conversation-button {
+  background-color: var(--prompt-background-color);
+  border-color: var(--button-border-color);
+  font-weight: 500;
+}
+.llm-panel .new-conversation-button:hover {
+  background-color: var(--button-background-color-hover);
+  color: var(--button-text-color-hover);
+  transform: translateY(-1px);
+}
+.llm-panel .new-conversation-button.confirm-state {
+  background-color: #ff6b35;
+  color: white;
+  border-color: #e55a2b;
+  animation: pulse-confirm 1s infinite;
+}
+.llm-panel .new-conversation-button.confirm-state:hover {
+  background-color: #e55a2b;
+  color: white;
+}
+@keyframes pulse-confirm {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .llm-panel .suggestion-button {
   background-color: var(--button-background-color);
   color: var(--button-text-color);

package/dist/index.d.mts

@@ -47,6 +47,7 @@ interface ChatPanelProps {
     }[];
     showSaveButton?: boolean;
     showEmailButton?: boolean;
+    showNewConversationButton?: boolean;
     followOnQuestions?: string[];
     clearFollowOnQuestionsNextPrompt?: boolean;
     followOnPrompt?: string;

package/dist/index.d.ts

@@ -47,6 +47,7 @@ interface ChatPanelProps {
     }[];
     showSaveButton?: boolean;
     showEmailButton?: boolean;
+    showNewConversationButton?: boolean;
     followOnQuestions?: string[];
     clearFollowOnQuestionsNextPrompt?: boolean;
     followOnPrompt?: string;

package/dist/index.js

@@ -189,6 +189,7 @@ var ChatPanel = ({
   actions,
   showSaveButton = true,
   showEmailButton = true,
+  showNewConversationButton = true,
   followOnQuestions = [],
   clearFollowOnQuestionsNextPrompt = false,
   followOnPrompt = "",
@@ -247,6 +248,8 @@ var ChatPanel = ({
   const [currentCustomer, setCurrentCustomer] = (0, import_react3.useState)(
     customer
   );
+  const [justReset, setJustReset] = (0, import_react3.useState)(false);
+  const [newConversationConfirm, setNewConversationConfirm] = (0, import_react3.useState)(false);
   const [allActions, setAllActions] = (0, import_react3.useState)([]);
   const [pendingToolRequests, setPendingToolRequests] = (0, import_react3.useState)([]);
   const [followOnQuestionsState, setFollowOnQuestionsState] = (0, import_react3.useState)(followOnQuestions);
@@ -566,7 +569,7 @@ var ChatPanel = ({
     });
     fetchAndSetTools();
   }, [mcpServers, publicAPIUrl]);
-  const { send, response, idle, stop, lastCallId } = (0, import_llmasaservice_client.useLLM)({
+  const { send, response, idle, stop, lastCallId, setResponse } = (0, import_llmasaservice_client.useLLM)({
     project_id,
     customer: currentCustomer,
     url,
@@ -2004,7 +2007,7 @@ var ChatPanel = ({
       var _a2, _b;
       const isLastEntry = index === Object.keys(history).length - 1;
       const hasToolData = !!((((_a2 = historyEntry == null ? void 0 : historyEntry.toolCalls) == null ? void 0 : _a2.length) || 0) > 0 || (((_b = historyEntry == null ? void 0 : historyEntry.toolResponses) == null ? void 0 : _b.length) || 0) > 0);
-      return /* @__PURE__ */ import_react3.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react3.default.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && (isLoading || !idle) ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "streaming-response" }, (() => {
+      return /* @__PURE__ */ import_react3.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react3.default.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && (isLoading || !idle) && !justReset ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "streaming-response" }, (() => {
         const { cleanedText } = processThinkingTags(
           response || ""
         );
@@ -2249,7 +2252,61 @@ var ChatPanel = ({
       },
       "\u270E"
     ))),
-    /* @__PURE__ */ import_react3.default.createElement("div", { className: "button-container-actions" }, showSaveButton && /* @__PURE__ */ import_react3.default.createElement(
+    /* @__PURE__ */ import_react3.default.createElement("div", { className: "button-container-actions" }, showNewConversationButton && /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        className: `save-button new-conversation-button ${newConversationConfirm ? "confirm-state" : ""}`,
+        onClick: () => {
+          if (!newConversationConfirm) {
+            setNewConversationConfirm(true);
+            setTimeout(() => {
+              setNewConversationConfirm(false);
+            }, 3e3);
+          } else {
+            setNewConversationConfirm(false);
+            if (!idle) {
+              stop(lastController);
+            }
+            setResponse("");
+            setHistory({});
+            setLastMessages([]);
+            setNextPrompt("");
+            setLastPrompt(null);
+            setLastKey(null);
+            setIsLoading(false);
+            setCurrentConversation(null);
+            setCallToActionSent(false);
+            setEmailSent(false);
+            setCTAClickedButNoEmail(false);
+            setEmailClickedButNoEmail(false);
+            setFollowOnQuestionsState(followOnQuestions);
+            setSessionApprovedTools([]);
+            setThinkingBlocks([]);
+            setCurrentThinkingIndex(0);
+            setPendingButtonAttachments([]);
+            setPendingToolRequests([]);
+            setIsEmailModalOpen(false);
+            setIsToolInfoModalOpen(false);
+            setToolInfoData(null);
+            setJustReset(true);
+            setLastController(new AbortController());
+            buttonActionRegistry.current.clear();
+            setTimeout(() => {
+              setJustReset(false);
+              const responseArea = responseAreaRef.current;
+              if (responseArea) {
+                responseArea.scrollTo({
+                  top: 0,
+                  behavior: "smooth"
+                });
+              }
+            }, 100);
+          }
+        },
+        title: newConversationConfirm ? "Click again to confirm reset" : "Start a new conversation"
+      },
+      newConversationConfirm ? "Click to Confirm" : "New Conversation"
+    ), showSaveButton && /* @__PURE__ */ import_react3.default.createElement(
       "button",
       {
         className: "save-button",

package/dist/index.mjs

@@ -161,6 +161,7 @@ var ChatPanel = ({
   actions,
   showSaveButton = true,
   showEmailButton = true,
+  showNewConversationButton = true,
   followOnQuestions = [],
   clearFollowOnQuestionsNextPrompt = false,
   followOnPrompt = "",
@@ -219,6 +220,8 @@ var ChatPanel = ({
   const [currentCustomer, setCurrentCustomer] = useState2(
     customer
   );
+  const [justReset, setJustReset] = useState2(false);
+  const [newConversationConfirm, setNewConversationConfirm] = useState2(false);
   const [allActions, setAllActions] = useState2([]);
   const [pendingToolRequests, setPendingToolRequests] = useState2([]);
   const [followOnQuestionsState, setFollowOnQuestionsState] = useState2(followOnQuestions);
@@ -538,7 +541,7 @@ var ChatPanel = ({
     });
     fetchAndSetTools();
   }, [mcpServers, publicAPIUrl]);
-  const { send, response, idle, stop, lastCallId } = useLLM({
+  const { send, response, idle, stop, lastCallId, setResponse } = useLLM({
     project_id,
     customer: currentCustomer,
     url,
@@ -1976,7 +1979,7 @@ var ChatPanel = ({
       var _a2, _b;
       const isLastEntry = index === Object.keys(history).length - 1;
       const hasToolData = !!((((_a2 = historyEntry == null ? void 0 : historyEntry.toolCalls) == null ? void 0 : _a2.length) || 0) > 0 || (((_b = historyEntry == null ? void 0 : historyEntry.toolResponses) == null ? void 0 : _b.length) || 0) > 0);
-      return /* @__PURE__ */ React3.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ React3.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ React3.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && (isLoading || !idle) ? /* @__PURE__ */ React3.createElement("div", { className: "streaming-response" }, (() => {
+      return /* @__PURE__ */ React3.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ React3.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ React3.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && (isLoading || !idle) && !justReset ? /* @__PURE__ */ React3.createElement("div", { className: "streaming-response" }, (() => {
         const { cleanedText } = processThinkingTags(
           response || ""
         );
@@ -2221,7 +2224,61 @@ var ChatPanel = ({
       },
       "\u270E"
     ))),
-    /* @__PURE__ */ React3.createElement("div", { className: "button-container-actions" }, showSaveButton && /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React3.createElement("div", { className: "button-container-actions" }, showNewConversationButton && /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        className: `save-button new-conversation-button ${newConversationConfirm ? "confirm-state" : ""}`,
+        onClick: () => {
+          if (!newConversationConfirm) {
+            setNewConversationConfirm(true);
+            setTimeout(() => {
+              setNewConversationConfirm(false);
+            }, 3e3);
+          } else {
+            setNewConversationConfirm(false);
+            if (!idle) {
+              stop(lastController);
+            }
+            setResponse("");
+            setHistory({});
+            setLastMessages([]);
+            setNextPrompt("");
+            setLastPrompt(null);
+            setLastKey(null);
+            setIsLoading(false);
+            setCurrentConversation(null);
+            setCallToActionSent(false);
+            setEmailSent(false);
+            setCTAClickedButNoEmail(false);
+            setEmailClickedButNoEmail(false);
+            setFollowOnQuestionsState(followOnQuestions);
+            setSessionApprovedTools([]);
+            setThinkingBlocks([]);
+            setCurrentThinkingIndex(0);
+            setPendingButtonAttachments([]);
+            setPendingToolRequests([]);
+            setIsEmailModalOpen(false);
+            setIsToolInfoModalOpen(false);
+            setToolInfoData(null);
+            setJustReset(true);
+            setLastController(new AbortController());
+            buttonActionRegistry.current.clear();
+            setTimeout(() => {
+              setJustReset(false);
+              const responseArea = responseAreaRef.current;
+              if (responseArea) {
+                responseArea.scrollTo({
+                  top: 0,
+                  behavior: "smooth"
+                });
+              }
+            }, 100);
+          }
+        },
+        title: newConversationConfirm ? "Click again to confirm reset" : "Start a new conversation"
+      },
+      newConversationConfirm ? "Click to Confirm" : "New Conversation"
+    ), showSaveButton && /* @__PURE__ */ React3.createElement(
       "button",
       {
         className: "save-button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llmasaservice-ui",
-  "version": "0.12.39",
+  "version": "0.13.0",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -47,7 +47,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.10.2",
     "dotenv": "^16.4.7",
-    "llmasaservice-client": "^0.10.0",
+    "llmasaservice-client": "^0.10.1",
     "process": "^0.11.10",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",

package/src/ChatPanel.css

@@ -412,6 +412,38 @@
   color: var(--button-text-color-hover);
 }
 
+/* New Conversation Button - distinct styling */
+.llm-panel .new-conversation-button {
+  background-color: var(--prompt-background-color);
+  border-color: var(--button-border-color);
+  font-weight: 500;
+}
+
+.llm-panel .new-conversation-button:hover {
+  background-color: var(--button-background-color-hover);
+  color: var(--button-text-color-hover);
+  transform: translateY(-1px);
+}
+
+/* Confirmation state styling */
+.llm-panel .new-conversation-button.confirm-state {
+  background-color: #ff6b35;
+  color: white;
+  border-color: #e55a2b;
+  animation: pulse-confirm 1s infinite;
+}
+
+.llm-panel .new-conversation-button.confirm-state:hover {
+  background-color: #e55a2b;
+  color: white;
+}
+
+@keyframes pulse-confirm {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+
 /* Suggestion Buttons */
 .llm-panel .suggestion-button {
   background-color: var(--button-background-color);

package/src/ChatPanel.tsx

@@ -59,6 +59,7 @@ export interface ChatPanelProps {
   }[];
   showSaveButton?: boolean;
   showEmailButton?: boolean;
+  showNewConversationButton?: boolean;
   followOnQuestions?: string[];
   clearFollowOnQuestionsNextPrompt?: boolean;
   followOnPrompt?: string;
@@ -117,6 +118,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   actions,
   showSaveButton = true,
   showEmailButton = true,
+  showNewConversationButton = true,
   followOnQuestions = [],
   clearFollowOnQuestionsNextPrompt = false,
   followOnPrompt = "",
@@ -179,6 +181,8 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   const [currentCustomer, setCurrentCustomer] = useState<LLMAsAServiceCustomer>(
     customer as LLMAsAServiceCustomer
   );
+  const [justReset, setJustReset] = useState(false);
+  const [newConversationConfirm, setNewConversationConfirm] = useState(false);
   const [allActions, setAllActions] = useState<
     {
       pattern: string;
@@ -658,7 +662,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     fetchAndSetTools();
   }, [mcpServers, publicAPIUrl]);
 
-  const { send, response, idle, stop, lastCallId } = useLLM({
+  const { send, response, idle, stop, lastCallId, setResponse } = useLLM({
     project_id: project_id,
     customer: currentCustomer,
     url: url,
@@ -2485,7 +2489,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                 <div className="response">
                   {/* Show streaming response with thinking blocks displayed separately */}
                   {index === Object.keys(history).length - 1 &&
-                  (isLoading || !idle) ? (
+                  (isLoading || !idle) && !justReset ? (
                     <div className="streaming-response">
                       {/* Display current thinking block or thinking message */}
                       {(() => {
@@ -2850,6 +2854,78 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           </>
         )}
         <div className="button-container-actions">
+          {showNewConversationButton && (
+            <button
+              className={`save-button new-conversation-button ${newConversationConfirm ? 'confirm-state' : ''}`}
+              onClick={() => {
+                if (!newConversationConfirm) {
+                  // First click - show confirmation state
+                  setNewConversationConfirm(true);
+                  
+                  // Auto-reset confirmation after 3 seconds
+                  setTimeout(() => {
+                    setNewConversationConfirm(false);
+                  }, 3000);
+                } else {
+                  // Second click - proceed with reset
+                  setNewConversationConfirm(false);
+                  
+                  // Stop any current request first
+                  if (!idle) {
+                    stop(lastController);
+                  }
+                  
+                  // Clear the current response from useLLM hook
+                  setResponse("");
+                  
+                  // Reset conversation state while preserving customer info
+                  setHistory({});
+                  setLastMessages([]);
+                  setNextPrompt("");
+                  setLastPrompt(null);
+                  setLastKey(null);
+                  setIsLoading(false);
+                  setCurrentConversation(null);
+                  setCallToActionSent(false);
+                  setEmailSent(false);
+                  setCTAClickedButNoEmail(false);
+                  setEmailClickedButNoEmail(false);
+                  setFollowOnQuestionsState(followOnQuestions);
+                  setSessionApprovedTools([]);
+                  setThinkingBlocks([]);
+                  setCurrentThinkingIndex(0);
+                  setPendingButtonAttachments([]);
+                  setPendingToolRequests([]);
+                  setIsEmailModalOpen(false);
+                  setIsToolInfoModalOpen(false);
+                  setToolInfoData(null);
+                  setJustReset(true);
+                  
+                  // Create a new AbortController for future requests
+                  setLastController(new AbortController());
+                  
+                  // Clear button registry for new conversation
+                  buttonActionRegistry.current.clear();
+                  
+                  // Force a small delay to ensure all state updates are processed
+                  setTimeout(() => {
+                    setJustReset(false);
+                    // Scroll to top after state updates
+                    const responseArea = responseAreaRef.current as any;
+                    if (responseArea) {
+                      responseArea.scrollTo({
+                        top: 0,
+                        behavior: "smooth",
+                      });
+                    }
+                  }, 100);
+                }
+              }}
+              title={newConversationConfirm ? "Click again to confirm reset" : "Start a new conversation"}
+            >
+              {newConversationConfirm ? "Click to Confirm" : "New Conversation"}
+            </button>
+          )}
           {showSaveButton && (
             <button
               className="save-button"

package/src/stories/ChatPanel.stories.ts

@@ -29,6 +29,34 @@ export const ChatPanelStory: Story = {
   },
 };
 
+export const ChatPanelWithNewConversationButton: Story = {
+  args: {
+    title: "Chat Panel with New Conversation Button",
+    project_id: "[get this from your control panel]",
+    initialPrompt: "Hello! How can I help you today?",
+    hideInitialPrompt: false,
+    placeholder: "Type your message here...",
+    theme: "light",
+    messages: [
+      { role: "assistant", content: "Welcome! This conversation has some history." },
+      { role: "user", content: "Tell me about the weather" },
+      { role: "assistant", content: "I'd be happy to help with weather information. However, I don't have access to real-time weather data. You might want to check a weather service like Weather.com or use a weather app on your device." }
+    ],
+    width: "400px",
+    height: "600px",
+    showNewConversationButton: true,
+    showSaveButton: true,
+    showEmailButton: true,
+    initialMessage: "Try clicking the 'New Conversation' button - it requires two clicks to confirm the reset and prevent accidental conversation clearing!",
+    initialHistory: {
+      "Hello! How can I help you today?": {
+        content: "Welcome! This is a test conversation with some existing history. The 'New Conversation' button now requires double-click confirmation to prevent accidental resets.",
+        callId: "test-call-1"
+      }
+    }
+  },
+};
+
 export const ChatPanelThumbsStory: Story = {
   args: {
     title: "Chat",