llmasaservice-ui 0.3.15 → 0.4.1

package/dist/index.css

@@ -165,6 +165,38 @@
   border: 1px solid #777;
   padding: 8px;
 }
+.side-panel .save-button {
+  background-color: #d1ecf1;
+  color: black;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 10px;
+  margin-top: 5px;
+}
+.suggestions-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.suggestion-button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 5px 10px;
+  font-size: 0.8em;
+  cursor: pointer;
+  margin: 5px 0;
+}
+.suggestion-button:hover {
+  background-color: #0056b3;
+}
+.suggestion-button:disabled {
+  background-color: #cccccc;
+  color: #666666;
+  cursor: not-allowed;
+}
 .side-panel-dark {
   font-family:
     "Roboto",
@@ -340,3 +372,25 @@
 .side-panel-dark a:hover {
   color: #fff;
 }
+.side-panel-dark .save-button {
+  background-color: #3a3737;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 10px;
+  margin-top: 5px;
+}
+.powered-by {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: lightgrey;
+  font-size: 0.8em;
+  height: 100%;
+  text-align: center;
+}
+.powered-by a {
+  color: lightgrey;
+  text-decoration: underline;
+}

package/dist/index.d.mts

@@ -42,6 +42,11 @@ interface ChatPanelProps {
         callback?: (match: string, groups: any[]) => void;
         clickCode?: string;
     }[];
+    showSaveButton?: boolean;
+    followOnQuestions?: string[];
+    clearFollowOnQuestionsNextPrompt?: boolean;
+    followOnPrompt?: string;
+    showPoweredBy?: boolean;
 }
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;

package/dist/index.d.ts

@@ -42,6 +42,11 @@ interface ChatPanelProps {
         callback?: (match: string, groups: any[]) => void;
         clickCode?: string;
     }[];
+    showSaveButton?: boolean;
+    followOnQuestions?: string[];
+    clearFollowOnQuestionsNextPrompt?: boolean;
+    followOnPrompt?: string;
+    showPoweredBy?: boolean;
 }
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;

package/dist/index.js

@@ -68,6 +68,7 @@ var import_llmasaservice_client = require("llmasaservice-client");
 var import_react = __toESM(require("react"));
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_rehype_raw = __toESM(require("rehype-raw"));
+var import_server = __toESM(require("react-dom/server"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_material_dark = __toESM(require("react-syntax-highlighter/dist/cjs/styles/prism/material-dark.js"));
@@ -94,7 +95,12 @@ var ChatPanel = ({
   service = null,
   historyChangedCallback = null,
   promptTemplate = "",
-  actions = []
+  actions = [],
+  showSaveButton = true,
+  followOnQuestions = [],
+  clearFollowOnQuestionsNextPrompt = false,
+  followOnPrompt = "",
+  showPoweredBy = true
 }) => {
   const { send, response, idle, stop, lastCallId } = (0, import_llmasaservice_client.useLLM)({
     project_id,
@@ -109,6 +115,9 @@ var ChatPanel = ({
   const [hasScroll, setHasScroll] = (0, import_react.useState)(false);
   const bottomRef = (0, import_react.useRef)(null);
   const [isAtBottom, setIsAtBottom] = (0, import_react.useState)(true);
+  const [lastFollowOnPrompt, setLastFollowOnPrompt] = (0, import_react.useState)(
+    null
+  );
   const responseAreaRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (response && response.length > 0) {
@@ -202,7 +211,13 @@ var ChatPanel = ({
       historyChangedCallback(history);
     }
   }, [history, historyChangedCallback]);
-  const continueChat = () => {
+  (0, import_react.useEffect)(() => {
+    if (followOnPrompt && followOnPrompt !== "" && (lastFollowOnPrompt != null ? lastFollowOnPrompt : "") !== followOnPrompt) {
+      continueChat(followOnPrompt);
+      setLastFollowOnPrompt(followOnPrompt);
+    }
+  }, [followOnPrompt]);
+  const continueChat = (suggestion) => {
     var _a, _b, _c;
     if (!idle) {
       stop(lastController);
@@ -216,38 +231,50 @@ var ChatPanel = ({
       });
       return;
     }
-    if (nextPrompt && nextPrompt !== "") {
+    if (clearFollowOnQuestionsNextPrompt) {
+      followOnQuestions = [];
+      const suggestionsContainer = document.querySelector(
+        ".suggestions-container"
+      );
+      if (suggestionsContainer) {
+        suggestionsContainer.innerHTML = "";
+      }
+    }
+    if (suggestion && suggestion !== "" || nextPrompt && nextPrompt !== "") {
       setIsLoading(true);
       const messagesAndHistory = messages;
       Object.entries(history).forEach(([prompt, response2]) => {
         var _a2, _b2, _c2;
-        let promptToSend2 = prompt;
+        let promptToSend = prompt;
         if (promptTemplate && promptTemplate !== "") {
-          promptToSend2 = promptTemplate.replace("{{prompt}}", promptToSend2);
+          promptToSend = promptTemplate.replace("{{prompt}}", promptToSend);
           for (let i = 0; i < data.length; i++) {
-            promptToSend2 = promptToSend2.replace(
+            promptToSend = promptToSend.replace(
               "{{" + ((_a2 = data[i]) == null ? void 0 : _a2.key) + "}}",
               (_c2 = (_b2 = data[i]) == null ? void 0 : _b2.data) != null ? _c2 : ""
             );
           }
         }
-        messagesAndHistory.push({ role: "user", content: promptToSend2 });
+        messagesAndHistory.push({ role: "user", content: promptToSend });
         messagesAndHistory.push({
           role: "assistant",
           content: response2.content
         });
       });
+      let nextPromptToSend = suggestion != null ? suggestion : nextPrompt;
       setHistory((prevHistory) => {
         return __spreadProps(__spreadValues({}, prevHistory), {
-          [nextPrompt != null ? nextPrompt : ""]: { content: "", callId: "" }
+          [nextPromptToSend != null ? nextPromptToSend : ""]: { content: "", callId: "" }
         });
       });
-      let promptToSend = nextPrompt;
       if (initialPrompt && initialPrompt !== "" && Object.keys(history).length === 1 || (!initialPrompt || initialPrompt === "") && Object.keys(history).length === 0) {
         if (promptTemplate && promptTemplate !== "") {
-          promptToSend = promptTemplate.replace("{{prompt}}", nextPrompt);
+          nextPromptToSend = promptTemplate.replace(
+            "{{prompt}}",
+            nextPromptToSend
+          );
           for (let i = 0; i < data.length; i++) {
-            promptToSend = promptToSend.replace(
+            nextPromptToSend = nextPromptToSend.replace(
               "{{" + ((_a = data[i]) == null ? void 0 : _a.key) + "}}",
               (_c = (_b = data[i]) == null ? void 0 : _b.data) != null ? _c : ""
             );
@@ -256,7 +283,7 @@ var ChatPanel = ({
       }
       const controller = new AbortController();
       send(
-        promptToSend,
+        nextPromptToSend,
         messagesAndHistory,
         data,
         true,
@@ -264,7 +291,7 @@ var ChatPanel = ({
         service,
         controller
       );
-      setLastPrompt(nextPrompt);
+      setLastPrompt(nextPromptToSend);
       setLastController(controller);
       setNextPrompt("");
     }
@@ -339,6 +366,102 @@ var ChatPanel = ({
     var _d = _c, { href, children } = _d, props = __objRest(_d, ["href", "children"]);
     return /* @__PURE__ */ import_react.default.createElement("a", __spreadValues({ href, target: "_blank", rel: "noopener noreferrer" }, props), children);
   };
+  const convertMarkdownToHTML = (markdown) => {
+    const html = import_server.default.renderToStaticMarkup(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_react_markdown.default,
+        {
+          className: markdownClass,
+          remarkPlugins: [import_remark_gfm.default],
+          rehypePlugins: [import_rehype_raw.default]
+        },
+        markdown
+      )
+    );
+    return html;
+  };
+  const convertHistoryToHTML = (history2) => {
+    const stylesheet = `
+  <style>
+    .conversation-history {
+      font-family: Arial, sans-serif;
+      line-height: 1;
+    }
+    .history-entry {
+      margin-bottom: 15px;
+      display: flex;
+      flex-direction: column;
+    }
+    .prompt-container, .response-container {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 3px;
+    }
+    .prompt {
+      background-color: #efefef;
+      padding: 5px;
+      border-radius: 5px;
+      max-width: 80%;
+      margin-left: 0;
+    }
+    .response {
+      background-color: #f0fcfd;
+      padding: 5px;
+      border-radius: 5px;
+      max-width: 80%;
+      margin-left: 25px;
+    }
+  </style>
+`;
+    let html = `
+    <html>
+      <head>
+        ${stylesheet}
+      </head>
+      <body>
+        <h1>Conversation History (${(/* @__PURE__ */ new Date()).toLocaleString()})</h1>
+        <div class="conversation-history">
+  `;
+    Object.entries(history2).forEach(([prompt, response2], index) => {
+      if (hideInitialPrompt && index === 0) {
+        return;
+      }
+      html += `
+      <div class="history-entry">
+        <div class="prompt-container">
+          <div class="prompt">${convertMarkdownToHTML(prompt)}</div>
+        </div>
+        <div class="response-container">
+          <div class="response">${convertMarkdownToHTML(response2.content)}</div>
+        </div>
+      </div>
+    `;
+    });
+    html += `
+        </div>
+      </body>
+    </html>
+  `;
+    return html;
+  };
+  const saveHTMLToFile = (html, filename) => {
+    const blob = new Blob([html], { type: "text/html" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  const shareViaEmail = (html, subject) => {
+    const mailtoLink = `mailto:?subject=${encodeURIComponent(
+      subject
+    )}&body=${encodeURIComponent(html)}`;
+    window.location.href = mailtoLink;
+  };
+  const handleSuggestionClick = (suggestion) => {
+    continueChat(suggestion);
+  };
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -413,7 +536,27 @@ var ChatPanel = ({
         className: "icon-svg"
       },
       /* @__PURE__ */ import_react.default.createElement("path", { d: "M18.38 3.25H6.81C5.72 3.25 4.79 4.03 4.6 5.11L3.29 12.61C3.18 13.27 3.36 13.94 3.78 14.45C4.21 14.96 4.83 15.25 5.5 15.25H9.53V18C9.53 19.52 10.76 20.75 12.36 20.75C13.06 20.75 13.69 20.33 13.97 19.68L16.51 13.75H18.39C19.7 13.75 20.76 12.69 20.76 11.38V5.61C20.76 4.31 19.7 3.25 18.39 3.25H18.38ZM15.26 12.85L12.59 19.1C12.55 19.19 12.46 19.26 12.27 19.26C11.58 19.26 11.03 18.7 11.03 18.01V13.76H5.5C5.27 13.76 5.07 13.67 4.93 13.5C4.78 13.33 4.73 13.11 4.77 12.88L6.08 5.38C6.14 5.02 6.45001 4.76 6.82 4.76H15.26V12.85ZM19.25 11.38C19.25 11.86 18.86 12.25 18.38 12.25H16.77V4.75H18.38C18.86 4.75 19.25 5.14 19.25 5.61V11.38Z" })
-    )) : null)))), /* @__PURE__ */ import_react.default.createElement("div", { ref: bottomRef }), hasScroll && !isAtBottom && /* @__PURE__ */ import_react.default.createElement("button", { className: "scroll-button", onClick: scrollToBottom }, "\u2193")),
+    )) : null)))), followOnQuestions && followOnQuestions.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "suggestions-container" }, followOnQuestions.map((question, index) => /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        key: index,
+        className: "suggestion-button",
+        onClick: () => handleSuggestionClick(question),
+        disabled: !idle
+      },
+      question
+    ))), /* @__PURE__ */ import_react.default.createElement("div", { ref: bottomRef }), hasScroll && !isAtBottom && /* @__PURE__ */ import_react.default.createElement("button", { className: "scroll-button", onClick: scrollToBottom }, "\u2193")),
+    showSaveButton && /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        className: "save-button",
+        onClick: () => saveHTMLToFile(
+          convertHistoryToHTML(history),
+          `conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
+        )
+      },
+      "Save Conversation"
+    ),
     /* @__PURE__ */ import_react.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react.default.createElement(
       "textarea",
       {
@@ -427,7 +570,7 @@ var ChatPanel = ({
           }
         }
       }
-    ), /* @__PURE__ */ import_react.default.createElement("button", { className: "send-button", onClick: continueChat }, idle ? /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement("button", { className: "send-button", onClick: () => continueChat() }, idle ? /* @__PURE__ */ import_react.default.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -453,6 +596,204 @@ var ChatPanel = ({
         className: "icon-svg-large"
       },
       /* @__PURE__ */ import_react.default.createElement("path", { d: "M8 8h16v16H8z" })
+    ))),
+    showPoweredBy && /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "powered-by" }, /* @__PURE__ */ import_react.default.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 72 72",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "14.0868",
+          cy: "59.2146",
+          rx: "7.8261",
+          ry: "7.7854",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "24.9013",
+          cy: "43.0776",
+          rx: "6.11858",
+          ry: "6.08676",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "45.391",
+          cy: "43.0776",
+          rx: "6.11858",
+          ry: "6.08676",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "65.8813",
+          cy: "43.0776",
+          rx: "6.11858",
+          ry: "6.08676",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "13.9444",
+          cy: "30.4795",
+          rx: "4.83795",
+          ry: "4.81279",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "34.7193",
+          cy: "30.4795",
+          rx: "4.83795",
+          ry: "4.81279",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "55.4942",
+          cy: "30.4795",
+          rx: "4.83795",
+          ry: "4.81279",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "3.27273",
+          cy: "20.4293",
+          rx: "3.27273",
+          ry: "3.25571",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "24.9011",
+          cy: "20.4293",
+          rx: "3.27273",
+          ry: "3.25571",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "45.3914",
+          cy: "20.4293",
+          rx: "3.27273",
+          ry: "3.25571",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "12.2373",
+          cy: "13.4931",
+          rx: "1.70751",
+          ry: "1.69863",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "33.0122",
+          cy: "13.4931",
+          rx: "1.70751",
+          ry: "1.69863",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "53.5019",
+          cy: "13.4931",
+          rx: "1.70751",
+          ry: "1.69863",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "19.3517",
+          cy: "6.13242",
+          rx: "1.13834",
+          ry: "1.13242",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "40.1266",
+          cy: "6.13242",
+          rx: "1.13834",
+          ry: "1.13242",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "60.901",
+          cy: "6.13242",
+          rx: "1.13834",
+          ry: "1.13242",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "34.8617",
+          cy: "59.2146",
+          rx: "7.8261",
+          ry: "7.7854",
+          fill: "#2487D8"
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "ellipse",
+        {
+          cx: "55.6366",
+          cy: "59.2146",
+          rx: "7.8261",
+          ry: "7.7854",
+          fill: "#ED7D31"
+        }
+      )
+    ), " ", "\xA0\xA0powered by\xA0", /* @__PURE__ */ import_react.default.createElement(
+      "a",
+      {
+        href: "https://llmasaservice.io",
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      "llmasaservice.io"
     )))
   ));
 };