llmasaservice-ui 0.3.0 → 0.3.2

package/dist/index.js

@@ -91,7 +91,8 @@ var ChatPanel = ({
   initialMessage = "",
   prismStyle = theme === "light" ? import_material_light.default : import_material_dark.default,
   service = null,
-  historyChangedCallback = null
+  historyChangedCallback = null,
+  promptTemplate = ""
 }) => {
   const { send, response, idle, stop, lastCallId } = (0, import_llmasaservice_client.useLLM)({
     project_id,
@@ -157,6 +158,7 @@ var ChatPanel = ({
     }
   }, [history, historyChangedCallback]);
   const continueChat = () => {
+    var _a, _b, _c;
     if (!idle) {
       stop(lastController);
       setHistory((prevHistory) => {
@@ -173,7 +175,18 @@ var ChatPanel = ({
       setIsLoading(true);
       const messagesAndHistory = messages;
       Object.entries(history).forEach(([prompt, response2]) => {
-        messagesAndHistory.push({ role: "user", content: prompt });
+        var _a2, _b2, _c2;
+        let promptToSend2 = prompt;
+        if (promptTemplate && promptTemplate !== "") {
+          promptToSend2 = promptTemplate.replace("{{prompt}}", promptToSend2);
+          for (let i = 0; i < data.length; i++) {
+            promptToSend2 = promptToSend2.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: "assistant",
           content: response2.content
@@ -184,8 +197,26 @@ var ChatPanel = ({
           [nextPrompt != null ? nextPrompt : ""]: { content: "", callId: "" }
         });
       });
+      let promptToSend = nextPrompt;
+      if (Object.keys(history).length === 0 && promptTemplate && promptTemplate !== "") {
+        promptToSend = promptTemplate.replace("{{prompt}}", nextPrompt);
+        for (let i = 0; i < data.length; i++) {
+          promptToSend = promptToSend.replace(
+            "{{" + ((_a = data[i]) == null ? void 0 : _a.key) + "}}",
+            (_c = (_b = data[i]) == null ? void 0 : _b.data) != null ? _c : ""
+          );
+        }
+      }
       const controller = new AbortController();
-      send(nextPrompt, messagesAndHistory, data, true, true, service, controller);
+      send(
+        promptToSend,
+        messagesAndHistory,
+        data,
+        true,
+        true,
+        service,
+        controller
+      );
       setLastPrompt(nextPrompt);
       setLastController(controller);
       setNextPrompt("");

package/dist/index.mjs

@@ -58,7 +58,8 @@ var ChatPanel = ({
   initialMessage = "",
   prismStyle = theme === "light" ? materialLight : materialDark,
   service = null,
-  historyChangedCallback = null
+  historyChangedCallback = null,
+  promptTemplate = ""
 }) => {
   const { send, response, idle, stop, lastCallId } = useLLM({
     project_id,
@@ -124,6 +125,7 @@ var ChatPanel = ({
     }
   }, [history, historyChangedCallback]);
   const continueChat = () => {
+    var _a, _b, _c;
     if (!idle) {
       stop(lastController);
       setHistory((prevHistory) => {
@@ -140,7 +142,18 @@ var ChatPanel = ({
       setIsLoading(true);
       const messagesAndHistory = messages;
       Object.entries(history).forEach(([prompt, response2]) => {
-        messagesAndHistory.push({ role: "user", content: prompt });
+        var _a2, _b2, _c2;
+        let promptToSend2 = prompt;
+        if (promptTemplate && promptTemplate !== "") {
+          promptToSend2 = promptTemplate.replace("{{prompt}}", promptToSend2);
+          for (let i = 0; i < data.length; i++) {
+            promptToSend2 = promptToSend2.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: "assistant",
           content: response2.content
@@ -151,8 +164,26 @@ var ChatPanel = ({
           [nextPrompt != null ? nextPrompt : ""]: { content: "", callId: "" }
         });
       });
+      let promptToSend = nextPrompt;
+      if (Object.keys(history).length === 0 && promptTemplate && promptTemplate !== "") {
+        promptToSend = promptTemplate.replace("{{prompt}}", nextPrompt);
+        for (let i = 0; i < data.length; i++) {
+          promptToSend = promptToSend.replace(
+            "{{" + ((_a = data[i]) == null ? void 0 : _a.key) + "}}",
+            (_c = (_b = data[i]) == null ? void 0 : _b.data) != null ? _c : ""
+          );
+        }
+      }
       const controller = new AbortController();
-      send(nextPrompt, messagesAndHistory, data, true, true, service, controller);
+      send(
+        promptToSend,
+        messagesAndHistory,
+        data,
+        true,
+        true,
+        service,
+        controller
+      );
       setLastPrompt(nextPrompt);
       setLastController(controller);
       setNextPrompt("");

package/package.json

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

package/src/ChatPanel.tsx

@@ -17,7 +17,7 @@ export interface ChatPanelProps {
   hideInitialPrompt?: boolean;
   customer?: LLMAsAServiceCustomer;
   messages?: { role: "user" | "assistant"; content: string }[];
-  data? : {key : string, data: string}[];
+  data?: { key: string; data: string }[];
   thumbsUpClick?: () => void;
   thumbsDownClick?: () => void;
   theme?: "light" | "dark";
@@ -59,6 +59,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   prismStyle = theme === "light" ? materialLight : materialDark,
   service = null,
   historyChangedCallback = null,
+  promptTemplate = "",
 }) => {
   const { send, response, idle, stop, lastCallId } = useLLM({
     project_id: project_id,
@@ -163,7 +164,18 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
       // build the chat input from history
       const messagesAndHistory = messages;
       Object.entries(history).forEach(([prompt, response]) => {
-        messagesAndHistory.push({ role: "user", content: prompt });
+        let promptToSend = prompt;
+        if (promptTemplate && promptTemplate !== "") {
+          promptToSend = promptTemplate.replace("{{prompt}}", promptToSend);
+          for (let i = 0; i < data.length; i++) {
+            promptToSend = promptToSend.replace(
+              "{{" + data[i]?.key + "}}",
+              data[i]?.data ?? ""
+            );
+          }
+        }
+
+        messagesAndHistory.push({ role: "user", content: promptToSend });
         messagesAndHistory.push({
           role: "assistant",
           content: response.content,
@@ -178,8 +190,33 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         };
       });
 
+      let promptToSend = nextPrompt;
+
+      // if this is the first user message, use the template. otherwise it is a follow-on question(s)
+      if (
+        Object.keys(history).length === 0 &&
+        promptTemplate &&
+        promptTemplate !== ""
+      ) {
+        promptToSend = promptTemplate.replace("{{prompt}}", nextPrompt);
+        for (let i = 0; i < data.length; i++) {
+          promptToSend = promptToSend.replace(
+            "{{" + data[i]?.key + "}}",
+            data[i]?.data ?? ""
+          );
+        }
+      }
+
       const controller = new AbortController();
-      send(nextPrompt, messagesAndHistory, data, true, true, service, controller);
+      send(
+        promptToSend,
+        messagesAndHistory,
+        data,
+        true,
+        true,
+        service,
+        controller
+      );
 
       setLastPrompt(nextPrompt);
       setLastController(controller);