llmasaservice-ui 0.8.21 → 0.9.1

package/dist/index.js

@@ -229,6 +229,7 @@ var ChatPanel = ({
   );
   const handleSendEmail = (to, from) => {
     sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
+    interactionClicked(lastCallId, "email", to);
   };
   const responseAreaRef = (0, import_react3.useRef)(null);
   let publicAPIUrl = "https://api.llmasaservice.io";
@@ -345,6 +346,7 @@ var ChatPanel = ({
                       try {
                         const func = new Function("match", action.clickCode);
                         func(match);
+                        interactionClicked(lastCallId, "action");
                       } catch (error) {
                         console.error("Error executing clickCode:", error);
                       }
@@ -371,22 +373,24 @@ var ChatPanel = ({
     if (initialPrompt && initialPrompt !== "") {
       if (initialPrompt !== lastPrompt) {
         setIsLoading(true);
-        if (lastController) stop(lastController);
-        const controller = new AbortController();
-        send(
-          initialPrompt,
-          messages,
-          data,
-          true,
-          true,
-          service,
-          currentConversation,
-          controller
-        );
-        setLastPrompt(initialPrompt);
-        setLastKey(initialPrompt);
-        setLastController(controller);
-        setHistory({});
+        ensureConversation().then((convId) => {
+          if (lastController) stop(lastController);
+          const controller = new AbortController();
+          send(
+            initialPrompt,
+            messages,
+            data,
+            true,
+            true,
+            service,
+            convId,
+            controller
+          );
+          setLastPrompt(initialPrompt);
+          setLastKey(initialPrompt);
+          setLastController(controller);
+          setHistory({});
+        });
       }
     }
   }, [initialPrompt]);
@@ -427,36 +431,36 @@ var ChatPanel = ({
       continueChat(followOnPrompt);
     }
   }, [followOnPrompt]);
+  const ensureConversation = () => {
+    var _a, _b;
+    if ((!currentConversation || currentConversation === "") && createConversationOnFirstChat) {
+      return fetch(`${publicAPIUrl}/conversations`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          project_id: project_id != null ? project_id : "",
+          agentId: agent,
+          customerId: (_a = customer == null ? void 0 : customer.customer_id) != null ? _a : null,
+          customerEmail: (_b = customer == null ? void 0 : customer.customer_name) != null ? _b : null
+        })
+      }).then((res) => res.json()).then((newConvo) => {
+        if (newConvo == null ? void 0 : newConvo.id) {
+          console.log("new conversation created", newConvo.id);
+          setCurrentConversation(newConvo.id);
+          return newConvo.id;
+        }
+        return "";
+      }).catch((error) => {
+        console.error("Error creating new conversation", error);
+        return "";
+      });
+    }
+    return Promise.resolve(currentConversation);
+  };
   const continueChat = (suggestion) => {
     console.log("continueChat", suggestion);
-    const ensureConversation = () => {
-      var _a, _b;
-      if ((!currentConversation || currentConversation === "") && createConversationOnFirstChat) {
-        return fetch(`${publicAPIUrl}/conversations`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({
-            project_id: project_id != null ? project_id : "",
-            agentId: agent,
-            customerId: (_a = customer == null ? void 0 : customer.customer_id) != null ? _a : null,
-            customerEmail: (_b = customer == null ? void 0 : customer.customer_name) != null ? _b : null
-          })
-        }).then((res) => res.json()).then((newConvo) => {
-          if (newConvo == null ? void 0 : newConvo.id) {
-            console.log("new conversation created", newConvo.id);
-            setCurrentConversation(newConvo.id);
-            return newConvo.id;
-          }
-          return "";
-        }).catch((error) => {
-          console.error("Error creating new conversation", error);
-          return "";
-        });
-      }
-      return Promise.resolve(currentConversation);
-    };
     ensureConversation().then((convId) => {
       var _a, _b, _c, _d;
       if (!idle) {
@@ -553,6 +557,7 @@ var ChatPanel = ({
   };
   function copyToClipboard(text) {
     navigator.clipboard.writeText(text);
+    interactionClicked(lastCallId, "copy");
   }
   const scrollToBottom = () => {
     var _a;
@@ -729,6 +734,7 @@ var ChatPanel = ({
   };
   const handleSuggestionClick = (suggestion) => {
     continueChat(suggestion);
+    interactionClicked(lastCallId, "suggestion");
   };
   const sendConversationsViaEmail = (to, subject = `Conversation History from ${title}`, from = "") => {
     fetch(`${publicAPIUrl}/share/email`, {
@@ -747,6 +753,7 @@ var ChatPanel = ({
         title
       })
     });
+    interactionClicked(lastCallId, "email", from);
   };
   const sendCallToActionEmail = (from) => __async(void 0, null, function* () {
     const r = yield fetch(`${publicAPIUrl}/share/email`, {
@@ -768,33 +775,24 @@ var ChatPanel = ({
     if (r.ok) {
       setHasSentCallToActionEmail(true);
     }
+    interactionClicked(lastCallId, "cta", from);
   });
-  const defaultThumbsUpClick = (callId) => {
-    console.log("thumbs up", callId);
-    fetch(`${publicAPIUrl}/feedback/${callId}/thumbsup`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        comment: "",
-        project_id: project_id != null ? project_id : ""
-      })
-    });
-  };
-  const defaultThumbsDownClick = (callId) => {
-    console.log("thumbs down", callId);
-    fetch(`${publicAPIUrl}/feedback/${callId}/thumbsdown`, {
+  const interactionClicked = (callId, action, emailaddress = "", comment = "") => __async(void 0, null, function* () {
+    console.log(`Interaction clicked: ${action} for callId: ${callId}`);
+    if (!callId || callId === "") return;
+    fetch(`${publicAPIUrl}/feedback/${callId}/${action}`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
-        comment: "",
-        project_id: project_id != null ? project_id : ""
+        project_id: project_id != null ? project_id : "",
+        conversation_id: currentConversation != null ? currentConversation : "",
+        emailaddress,
+        comment
       })
     });
-  };
+  });
   const formatPromptForDisplay = (prompt) => {
     if (!prompt) {
       return "";
@@ -841,7 +839,10 @@ var ChatPanel = ({
       "button",
       {
         className: "copy-button",
-        onClick: () => copyToClipboard(response2.content)
+        onClick: () => {
+          copyToClipboard(response2.content);
+          interactionClicked(response2.callId, "copy");
+        }
       },
       /* @__PURE__ */ import_react3.default.createElement(
         "svg",
@@ -870,7 +871,10 @@ var ChatPanel = ({
       "button",
       {
         className: "thumbs-button",
-        onClick: () => thumbsUpClick ? thumbsUpClick(response2.callId) : defaultThumbsUpClick(response2.callId)
+        onClick: () => {
+          if (thumbsUpClick) thumbsUpClick(response2.callId);
+          interactionClicked(response2.callId, "thumbsup");
+        }
       },
       /* @__PURE__ */ import_react3.default.createElement(
         "svg",
@@ -886,7 +890,10 @@ var ChatPanel = ({
       "button",
       {
         className: "thumbs-button",
-        onClick: () => thumbsDownClick ? thumbsDownClick(response2.callId) : defaultThumbsDownClick(response2.callId)
+        onClick: () => {
+          if (thumbsDownClick) thumbsDownClick(response2.callId);
+          interactionClicked(response2.callId, "thumbsdown");
+        }
       },
       /* @__PURE__ */ import_react3.default.createElement(
         "svg",
@@ -912,10 +919,13 @@ var ChatPanel = ({
       "button",
       {
         className: "save-button",
-        onClick: () => saveHTMLToFile(
-          convertHistoryToHTML(history),
-          `conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
-        )
+        onClick: () => {
+          saveHTMLToFile(
+            convertHistoryToHTML(history),
+            `conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
+          );
+          interactionClicked(lastCallId, "save");
+        }
       },
       "Save Conversation"
     ), showEmailButton && /* @__PURE__ */ import_react3.default.createElement(

package/dist/index.mjs

@@ -195,6 +195,7 @@ var ChatPanel = ({
   );
   const handleSendEmail = (to, from) => {
     sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
+    interactionClicked(lastCallId, "email", to);
   };
   const responseAreaRef = useRef(null);
   let publicAPIUrl = "https://api.llmasaservice.io";
@@ -311,6 +312,7 @@ var ChatPanel = ({
                       try {
                         const func = new Function("match", action.clickCode);
                         func(match);
+                        interactionClicked(lastCallId, "action");
                       } catch (error) {
                         console.error("Error executing clickCode:", error);
                       }
@@ -337,22 +339,24 @@ var ChatPanel = ({
     if (initialPrompt && initialPrompt !== "") {
       if (initialPrompt !== lastPrompt) {
         setIsLoading(true);
-        if (lastController) stop(lastController);
-        const controller = new AbortController();
-        send(
-          initialPrompt,
-          messages,
-          data,
-          true,
-          true,
-          service,
-          currentConversation,
-          controller
-        );
-        setLastPrompt(initialPrompt);
-        setLastKey(initialPrompt);
-        setLastController(controller);
-        setHistory({});
+        ensureConversation().then((convId) => {
+          if (lastController) stop(lastController);
+          const controller = new AbortController();
+          send(
+            initialPrompt,
+            messages,
+            data,
+            true,
+            true,
+            service,
+            convId,
+            controller
+          );
+          setLastPrompt(initialPrompt);
+          setLastKey(initialPrompt);
+          setLastController(controller);
+          setHistory({});
+        });
       }
     }
   }, [initialPrompt]);
@@ -393,36 +397,36 @@ var ChatPanel = ({
       continueChat(followOnPrompt);
     }
   }, [followOnPrompt]);
+  const ensureConversation = () => {
+    var _a, _b;
+    if ((!currentConversation || currentConversation === "") && createConversationOnFirstChat) {
+      return fetch(`${publicAPIUrl}/conversations`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          project_id: project_id != null ? project_id : "",
+          agentId: agent,
+          customerId: (_a = customer == null ? void 0 : customer.customer_id) != null ? _a : null,
+          customerEmail: (_b = customer == null ? void 0 : customer.customer_name) != null ? _b : null
+        })
+      }).then((res) => res.json()).then((newConvo) => {
+        if (newConvo == null ? void 0 : newConvo.id) {
+          console.log("new conversation created", newConvo.id);
+          setCurrentConversation(newConvo.id);
+          return newConvo.id;
+        }
+        return "";
+      }).catch((error) => {
+        console.error("Error creating new conversation", error);
+        return "";
+      });
+    }
+    return Promise.resolve(currentConversation);
+  };
   const continueChat = (suggestion) => {
     console.log("continueChat", suggestion);
-    const ensureConversation = () => {
-      var _a, _b;
-      if ((!currentConversation || currentConversation === "") && createConversationOnFirstChat) {
-        return fetch(`${publicAPIUrl}/conversations`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({
-            project_id: project_id != null ? project_id : "",
-            agentId: agent,
-            customerId: (_a = customer == null ? void 0 : customer.customer_id) != null ? _a : null,
-            customerEmail: (_b = customer == null ? void 0 : customer.customer_name) != null ? _b : null
-          })
-        }).then((res) => res.json()).then((newConvo) => {
-          if (newConvo == null ? void 0 : newConvo.id) {
-            console.log("new conversation created", newConvo.id);
-            setCurrentConversation(newConvo.id);
-            return newConvo.id;
-          }
-          return "";
-        }).catch((error) => {
-          console.error("Error creating new conversation", error);
-          return "";
-        });
-      }
-      return Promise.resolve(currentConversation);
-    };
     ensureConversation().then((convId) => {
       var _a, _b, _c, _d;
       if (!idle) {
@@ -519,6 +523,7 @@ var ChatPanel = ({
   };
   function copyToClipboard(text) {
     navigator.clipboard.writeText(text);
+    interactionClicked(lastCallId, "copy");
   }
   const scrollToBottom = () => {
     var _a;
@@ -695,6 +700,7 @@ var ChatPanel = ({
   };
   const handleSuggestionClick = (suggestion) => {
     continueChat(suggestion);
+    interactionClicked(lastCallId, "suggestion");
   };
   const sendConversationsViaEmail = (to, subject = `Conversation History from ${title}`, from = "") => {
     fetch(`${publicAPIUrl}/share/email`, {
@@ -713,6 +719,7 @@ var ChatPanel = ({
         title
       })
     });
+    interactionClicked(lastCallId, "email", from);
   };
   const sendCallToActionEmail = (from) => __async(void 0, null, function* () {
     const r = yield fetch(`${publicAPIUrl}/share/email`, {
@@ -734,33 +741,24 @@ var ChatPanel = ({
     if (r.ok) {
       setHasSentCallToActionEmail(true);
     }
+    interactionClicked(lastCallId, "cta", from);
   });
-  const defaultThumbsUpClick = (callId) => {
-    console.log("thumbs up", callId);
-    fetch(`${publicAPIUrl}/feedback/${callId}/thumbsup`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        comment: "",
-        project_id: project_id != null ? project_id : ""
-      })
-    });
-  };
-  const defaultThumbsDownClick = (callId) => {
-    console.log("thumbs down", callId);
-    fetch(`${publicAPIUrl}/feedback/${callId}/thumbsdown`, {
+  const interactionClicked = (callId, action, emailaddress = "", comment = "") => __async(void 0, null, function* () {
+    console.log(`Interaction clicked: ${action} for callId: ${callId}`);
+    if (!callId || callId === "") return;
+    fetch(`${publicAPIUrl}/feedback/${callId}/${action}`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
-        comment: "",
-        project_id: project_id != null ? project_id : ""
+        project_id: project_id != null ? project_id : "",
+        conversation_id: currentConversation != null ? currentConversation : "",
+        emailaddress,
+        comment
       })
     });
-  };
+  });
   const formatPromptForDisplay = (prompt) => {
     if (!prompt) {
       return "";
@@ -807,7 +805,10 @@ var ChatPanel = ({
       "button",
       {
         className: "copy-button",
-        onClick: () => copyToClipboard(response2.content)
+        onClick: () => {
+          copyToClipboard(response2.content);
+          interactionClicked(response2.callId, "copy");
+        }
       },
       /* @__PURE__ */ React3.createElement(
         "svg",
@@ -836,7 +837,10 @@ var ChatPanel = ({
       "button",
       {
         className: "thumbs-button",
-        onClick: () => thumbsUpClick ? thumbsUpClick(response2.callId) : defaultThumbsUpClick(response2.callId)
+        onClick: () => {
+          if (thumbsUpClick) thumbsUpClick(response2.callId);
+          interactionClicked(response2.callId, "thumbsup");
+        }
       },
       /* @__PURE__ */ React3.createElement(
         "svg",
@@ -852,7 +856,10 @@ var ChatPanel = ({
       "button",
       {
         className: "thumbs-button",
-        onClick: () => thumbsDownClick ? thumbsDownClick(response2.callId) : defaultThumbsDownClick(response2.callId)
+        onClick: () => {
+          if (thumbsDownClick) thumbsDownClick(response2.callId);
+          interactionClicked(response2.callId, "thumbsdown");
+        }
       },
       /* @__PURE__ */ React3.createElement(
         "svg",
@@ -878,10 +885,13 @@ var ChatPanel = ({
       "button",
       {
         className: "save-button",
-        onClick: () => saveHTMLToFile(
-          convertHistoryToHTML(history),
-          `conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
-        )
+        onClick: () => {
+          saveHTMLToFile(
+            convertHistoryToHTML(history),
+            `conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
+          );
+          interactionClicked(lastCallId, "save");
+        }
       },
       "Save Conversation"
     ), showEmailButton && /* @__PURE__ */ React3.createElement(

package/package.json

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

package/src/ChatPanel.tsx

@@ -147,6 +147,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
   const handleSendEmail = (to: string, from: string) => {
     sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
+    interactionClicked(lastCallId, "email", to);
   };
 
   const responseAreaRef = useRef(null);
@@ -292,6 +293,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                       try {
                         const func = new Function("match", action.clickCode);
                         func(match);
+                        interactionClicked(lastCallId, "action");
                       } catch (error) {
                         console.error("Error executing clickCode:", error);
                       }
@@ -325,23 +327,25 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
       if (initialPrompt !== lastPrompt) {
         setIsLoading(true);
 
-        if (lastController) stop(lastController);
-        const controller = new AbortController();
-
-        send(
-          initialPrompt,
-          messages,
-          data,
-          true,
-          true,
-          service,
-          currentConversation,
-          controller
-        );
-        setLastPrompt(initialPrompt);
-        setLastKey(initialPrompt);
-        setLastController(controller);
-        setHistory({});
+        ensureConversation().then((convId) => {
+          if (lastController) stop(lastController);
+          const controller = new AbortController();
+
+          send(
+            initialPrompt,
+            messages,
+            data,
+            true,
+            true,
+            service,
+            convId,
+            controller
+          );
+          setLastPrompt(initialPrompt);
+          setLastKey(initialPrompt);
+          setLastController(controller);
+          setHistory({});
+        });
       }
     }
   }, [initialPrompt]);
@@ -388,44 +392,44 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     }
   }, [followOnPrompt]);
 
+  const ensureConversation = () => {
+    if (
+      (!currentConversation || currentConversation === "") &&
+      createConversationOnFirstChat
+    ) {
+      return fetch(`${publicAPIUrl}/conversations`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          project_id: project_id ?? "",
+          agentId: agent,
+          customerId: customer?.customer_id ?? null,
+          customerEmail: customer?.customer_name ?? null,
+        }),
+      })
+        .then((res) => res.json())
+        .then((newConvo) => {
+          if (newConvo?.id) {
+            console.log("new conversation created", newConvo.id);
+            setCurrentConversation(newConvo.id);
+            return newConvo.id;
+          }
+          return "";
+        })
+        .catch((error) => {
+          console.error("Error creating new conversation", error);
+          return "";
+        });
+    }
+    // If a currentConversation exists, return it in a resolved Promise.
+    return Promise.resolve(currentConversation);
+  };
+
   const continueChat = (suggestion?: string) => {
     console.log("continueChat", suggestion);
 
-    const ensureConversation = () => {
-      if (
-        (!currentConversation || currentConversation === "") &&
-        createConversationOnFirstChat
-      ) {
-        return fetch(`${publicAPIUrl}/conversations`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            project_id: project_id ?? "",
-            agentId: agent,
-            customerId: customer?.customer_id ?? null,
-            customerEmail: customer?.customer_name ?? null,
-          }),
-        })
-          .then((res) => res.json())
-          .then((newConvo) => {
-            if (newConvo?.id) {
-              console.log("new conversation created", newConvo.id);
-              setCurrentConversation(newConvo.id);
-              return newConvo.id;
-            }
-            return "";
-          })
-          .catch((error) => {
-            console.error("Error creating new conversation", error);
-            return "";
-          });
-      }
-      // If a currentConversation exists, return it in a resolved Promise.
-      return Promise.resolve(currentConversation);
-    };
-
     // wait till new conversation created....
     ensureConversation().then((convId) => {
       if (!idle) {
@@ -558,6 +562,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
   function copyToClipboard(text: string) {
     navigator.clipboard.writeText(text);
+    interactionClicked(lastCallId, "copy");
   }
 
   const scrollToBottom = () => {
@@ -749,6 +754,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
   const handleSuggestionClick = (suggestion: string) => {
     continueChat(suggestion);
+    interactionClicked(lastCallId, "suggestion");
   };
 
   const sendConversationsViaEmail = (
@@ -772,6 +778,8 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         title: title,
       }),
     });
+
+    interactionClicked(lastCallId, "email", from);
   };
 
   const sendCallToActionEmail = async (from: string) => {
@@ -795,32 +803,30 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     if (r.ok) {
       setHasSentCallToActionEmail(true);
     }
-  };
 
-  const defaultThumbsUpClick = (callId: string) => {
-    console.log("thumbs up", callId);
-    fetch(`${publicAPIUrl}/feedback/${callId}/thumbsup`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        comment: "",
-        project_id: project_id ?? "",
-      }),
-    });
+    interactionClicked(lastCallId, "cta", from);
   };
 
-  const defaultThumbsDownClick = (callId: string) => {
-    console.log("thumbs down", callId);
-    fetch(`${publicAPIUrl}/feedback/${callId}/thumbsdown`, {
+  const interactionClicked = async (
+    callId: string,
+    action: string,
+    emailaddress: string = "",
+    comment: string = ""
+  ) => {
+    console.log(`Interaction clicked: ${action} for callId: ${callId}`);
+
+    if (!callId || callId === "") return;
+
+    fetch(`${publicAPIUrl}/feedback/${callId}/${action}`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        comment: "",
         project_id: project_id ?? "",
+        conversation_id: currentConversation ?? "",
+        emailaddress: emailaddress,
+        comment: comment,
       }),
     });
   };
@@ -891,7 +897,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                 <div className="button-container">
                   <button
                     className="copy-button"
-                    onClick={() => copyToClipboard(response.content)}
+                    onClick={() => {
+                      copyToClipboard(response.content);
+                      interactionClicked(response.callId, "copy");
+                    }}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -915,11 +924,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
                   <button
                     className="thumbs-button"
-                    onClick={() =>
-                      thumbsUpClick
-                        ? thumbsUpClick(response.callId)
-                        : defaultThumbsUpClick(response.callId)
-                    }
+                    onClick={() => {
+                      if (thumbsUpClick) thumbsUpClick(response.callId);
+                      interactionClicked(response.callId, "thumbsup");
+                    }}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -933,11 +941,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
                   <button
                     className="thumbs-button"
-                    onClick={() =>
-                      thumbsDownClick
-                        ? thumbsDownClick(response.callId)
-                        : defaultThumbsDownClick(response.callId)
-                    }
+                    onClick={() => {
+                      if (thumbsDownClick) thumbsDownClick(response.callId);
+                      interactionClicked(response.callId, "thumbsdown");
+                    }}
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -980,12 +987,13 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           {showSaveButton && (
             <button
               className="save-button"
-              onClick={() =>
+              onClick={() => {
                 saveHTMLToFile(
                   convertHistoryToHTML(history),
                   `conversation-${new Date().toISOString()}.html`
-                )
-              }
+                );
+                interactionClicked(lastCallId, "save");
+              }}
             >
               Save Conversation
             </button>