llmasaservice-ui 0.7.1 → 0.7.2

package/dist/index.d.mts

@@ -58,9 +58,48 @@ interface ChatPanelProps {
     ragQueryLimit?: number;
     ragRankLimit?: number;
 }
+interface ExtraProps$1 extends React.HTMLAttributes<HTMLElement> {
+    inline?: boolean;
+}
+declare const ChatPanel: React.FC<ChatPanelProps & ExtraProps$1>;
+
+interface AgentPanelProps {
+    project_id: string;
+    customer?: LLMAsAServiceCustomer;
+    messages?: {
+        role: "user" | "assistant";
+        content: string;
+    }[];
+    data?: {
+        key: string;
+        data: string;
+    }[];
+    thumbsUpClick?: (callId: string) => void;
+    thumbsDownClick?: (callId: string) => void;
+    url?: string;
+    prismStyle?: PrismStyle;
+    service?: string | null;
+    historyChangedCallback?: (history: {
+        [key: string]: {
+            content: string;
+            callId: string;
+        };
+    }) => void;
+    actions?: {
+        pattern: string;
+        type?: string;
+        markdown?: string;
+        callback?: (match: string, groups: any[]) => void;
+        clickCode?: string;
+    }[];
+    followOnPrompt?: string;
+    showPoweredBy?: boolean;
+    agent: string;
+    conversation?: string | null;
+}
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;
 }
-declare const ChatPanel: React.FC<ChatPanelProps & ExtraProps>;
+declare const AgentPanel: React.FC<AgentPanelProps & ExtraProps>;
 
-export { ChatPanel, type ChatPanelProps };
+export { AgentPanel, type AgentPanelProps, ChatPanel, type ChatPanelProps };

package/dist/index.d.ts

@@ -58,9 +58,48 @@ interface ChatPanelProps {
     ragQueryLimit?: number;
     ragRankLimit?: number;
 }
+interface ExtraProps$1 extends React.HTMLAttributes<HTMLElement> {
+    inline?: boolean;
+}
+declare const ChatPanel: React.FC<ChatPanelProps & ExtraProps$1>;
+
+interface AgentPanelProps {
+    project_id: string;
+    customer?: LLMAsAServiceCustomer;
+    messages?: {
+        role: "user" | "assistant";
+        content: string;
+    }[];
+    data?: {
+        key: string;
+        data: string;
+    }[];
+    thumbsUpClick?: (callId: string) => void;
+    thumbsDownClick?: (callId: string) => void;
+    url?: string;
+    prismStyle?: PrismStyle;
+    service?: string | null;
+    historyChangedCallback?: (history: {
+        [key: string]: {
+            content: string;
+            callId: string;
+        };
+    }) => void;
+    actions?: {
+        pattern: string;
+        type?: string;
+        markdown?: string;
+        callback?: (match: string, groups: any[]) => void;
+        clickCode?: string;
+    }[];
+    followOnPrompt?: string;
+    showPoweredBy?: boolean;
+    agent: string;
+    conversation?: string | null;
+}
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;
 }
-declare const ChatPanel: React.FC<ChatPanelProps & ExtraProps>;
+declare const AgentPanel: React.FC<AgentPanelProps & ExtraProps>;
 
-export { ChatPanel, type ChatPanelProps };
+export { AgentPanel, type AgentPanelProps, ChatPanel, type ChatPanelProps };

package/dist/index.js

@@ -79,6 +79,7 @@ var __async = (__this, __arguments, generator) => {
 // index.ts
 var llmasaservice_ui_exports = {};
 __export(llmasaservice_ui_exports, {
+  AgentPanel: () => AgentPanel_default,
   ChatPanel: () => ChatPanel_default
 });
 module.exports = __toCommonJS(llmasaservice_ui_exports);
@@ -1078,7 +1079,145 @@ var ChatPanel = ({
   ), /* @__PURE__ */ import_react3.default.createElement("div", { ref: bottomPanelRef }));
 };
 var ChatPanel_default = ChatPanel;
+
+// src/AgentPanel.tsx
+var import_react4 = __toESM(require("react"));
+var import_prism = require("react-syntax-highlighter/dist/esm/styles/prism");
+var AgentPanel = ({
+  project_id,
+  //initialPrompt = "",
+  //title = "Chat",
+  //placeholder = "Type a message",
+  //hideInitialPrompt = true,
+  customer = {},
+  messages = [],
+  data = [],
+  thumbsUpClick,
+  thumbsDownClick,
+  //theme = "light",
+  //markdownClass = null,
+  //width = "300px",
+  //height = "100vh",
+  url = "https://chat.llmasaservice.io/",
+  //scrollToEnd = false,
+  //initialMessage = "",
+  //prismStyle = theme === "light" ? materialLight : materialDark,
+  service = null,
+  historyChangedCallback = null,
+  //promptTemplate = "",
+  actions = [],
+  //showSaveButton = true,
+  //showEmailButton = true,
+  //followOnQuestions = [],
+  //clearFollowOnQuestionsNextPrompt = false,
+  //followOnPrompt = "",
+  showPoweredBy = true,
+  agent,
+  conversation = null
+  //showCallToAction = false,
+  //callToActionButtonText = "Submit",
+  //callToActionEmailAddress = "",
+  //callToActionEmailSubject = "Agent CTA submitted",
+  //callToActionMustSendEmail = false,
+  //ragQueryLimit = 10,
+  //ragRankLimit = 5,
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  const [followOnPrompt, setFollowOnPrompt] = (0, import_react4.useState)("");
+  const [followOnQuestions, setFollowOnQuestions] = (0, import_react4.useState)(
+    null
+  );
+  const searchParams = new URLSearchParams(location.search);
+  const customer_id = searchParams.get("customer_id") || "";
+  const customer_email = searchParams.get("customer_email") || "";
+  const [agentData, setAgentData] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    const fetchAgentData = () => __async(void 0, null, function* () {
+      try {
+        const response = yield fetch(
+          `https://api.llmasaservice.io/agents/${agent}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json"
+            }
+          }
+        );
+        const data2 = yield response.json();
+        if (data2 && data2.length > 0) {
+          setAgentData(data2[0]);
+        }
+      } catch (error) {
+        console.error("Error fetching agent data:", error);
+      }
+    });
+    if (agent && agent !== "") {
+      fetchAgentData();
+    }
+  }, [agent]);
+  const getActionsArraySafely = (actionsString) => {
+    let actions2 = [];
+    if (actionsString && actionsString !== "") {
+      try {
+        actions2 = JSON.parse(actionsString);
+        if (!Array.isArray(actions2)) {
+          throw new Error("Parsed actions is not an array");
+        }
+      } catch (error) {
+        actions2 = [];
+      }
+    }
+    return actions2;
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
+    ChatPanel_default,
+    {
+      project_id: agentData == null ? void 0 : agentData.projectId,
+      service: (agentData == null ? void 0 : agentData.groupId) || null,
+      url,
+      title: (_a = agentData == null ? void 0 : agentData.displayTitle) != null ? _a : "Chat Agent",
+      theme: (agentData == null ? void 0 : agentData.displayTheme) === "light" ? "light" : "dark",
+      height: (_b = agentData == null ? void 0 : agentData.displayHeight) != null ? _b : "75vh",
+      width: (_c = agentData == null ? void 0 : agentData.displayWidth) != null ? _c : "100%",
+      promptTemplate: (_d = agentData == null ? void 0 : agentData.displayPromptTemplate) != null ? _d : "{{prompt}}",
+      initialMessage: (agentData == null ? void 0 : agentData.displayStartMessageOrPrompt) === "message" ? (_e = agentData == null ? void 0 : agentData.displayInitialMessageOrPrompt) != null ? _e : "" : void 0,
+      initialPrompt: (agentData == null ? void 0 : agentData.displayStartMessageOrPrompt) === "prompt" ? (_f = agentData == null ? void 0 : agentData.displayInitialMessageOrPrompt) != null ? _f : "" : void 0,
+      followOnQuestions: followOnQuestions ? followOnQuestions : (_h = (_g = agentData == null ? void 0 : agentData.displayFollowOnPrompts) == null ? void 0 : _g.split("|")) != null ? _h : [],
+      historyChangedCallback: (history) => {
+        if (history) {
+          setFollowOnPrompt("");
+        }
+      },
+      prismStyle: (agentData == null ? void 0 : agentData.displayTheme) === "light" ? import_prism.materialLight : import_prism.materialDark,
+      actions: [
+        ...actions,
+        ...getActionsArraySafely(agentData == null ? void 0 : agentData.displayActions)
+      ],
+      followOnPrompt,
+      agent,
+      placeholder: (_i = agentData == null ? void 0 : agentData.displayPlaceholder) != null ? _i : "Type a message",
+      hideInitialPrompt: (_j = agentData == null ? void 0 : agentData.displayHideInitialPrompt) != null ? _j : true,
+      data: [...data, { key: "data", data: agentData == null ? void 0 : agentData.data }],
+      showEmailButton: (_k = agentData == null ? void 0 : agentData.displayShowEmailButton) != null ? _k : true,
+      showSaveButton: (_l = agentData == null ? void 0 : agentData.displayShowSaveButton) != null ? _l : true,
+      showCallToAction: (_m = agentData == null ? void 0 : agentData.displayShowCallToAction) != null ? _m : false,
+      callToActionButtonText: (_n = agentData == null ? void 0 : agentData.displayCallToActionButtonText) != null ? _n : "Submit",
+      callToActionEmailAddress: (_o = agentData == null ? void 0 : agentData.displayCallToActionEmailAddress) != null ? _o : "",
+      callToActionEmailSubject: (_p = agentData == null ? void 0 : agentData.displayCallToActionEmailSubject) != null ? _p : "Agent CTA Submitted",
+      callToActionMustSendEmail: (_q = agentData == null ? void 0 : agentData.displayCallToActionMustSendEmail) != null ? _q : false,
+      customer: {
+        customer_id: customer_id != null ? customer_id : "default",
+        customer_user_email: customer_email != null ? customer_email : ""
+      },
+      scrollToEnd: (_r = agentData == null ? void 0 : agentData.displayScrollToEnd) != null ? _r : false,
+      ragQueryLimit: (_s = agentData == null ? void 0 : agentData.ragQueryLimit) != null ? _s : 10,
+      ragRankLimit: (_t = agentData == null ? void 0 : agentData.ragRankLimit) != null ? _t : 5
+    }
+  ));
+};
+var AgentPanel_default = AgentPanel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AgentPanel,
   ChatPanel
 });

package/dist/index.mjs

@@ -1045,6 +1045,147 @@ var ChatPanel = ({
   ), /* @__PURE__ */ React3.createElement("div", { ref: bottomPanelRef }));
 };
 var ChatPanel_default = ChatPanel;
+
+// src/AgentPanel.tsx
+import React4, { useEffect as useEffect2, useState as useState4 } from "react";
+import {
+  materialDark as materialDark2,
+  materialLight as materialLight2
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+var AgentPanel = ({
+  project_id,
+  //initialPrompt = "",
+  //title = "Chat",
+  //placeholder = "Type a message",
+  //hideInitialPrompt = true,
+  customer = {},
+  messages = [],
+  data = [],
+  thumbsUpClick,
+  thumbsDownClick,
+  //theme = "light",
+  //markdownClass = null,
+  //width = "300px",
+  //height = "100vh",
+  url = "https://chat.llmasaservice.io/",
+  //scrollToEnd = false,
+  //initialMessage = "",
+  //prismStyle = theme === "light" ? materialLight : materialDark,
+  service = null,
+  historyChangedCallback = null,
+  //promptTemplate = "",
+  actions = [],
+  //showSaveButton = true,
+  //showEmailButton = true,
+  //followOnQuestions = [],
+  //clearFollowOnQuestionsNextPrompt = false,
+  //followOnPrompt = "",
+  showPoweredBy = true,
+  agent,
+  conversation = null
+  //showCallToAction = false,
+  //callToActionButtonText = "Submit",
+  //callToActionEmailAddress = "",
+  //callToActionEmailSubject = "Agent CTA submitted",
+  //callToActionMustSendEmail = false,
+  //ragQueryLimit = 10,
+  //ragRankLimit = 5,
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  const [followOnPrompt, setFollowOnPrompt] = useState4("");
+  const [followOnQuestions, setFollowOnQuestions] = useState4(
+    null
+  );
+  const searchParams = new URLSearchParams(location.search);
+  const customer_id = searchParams.get("customer_id") || "";
+  const customer_email = searchParams.get("customer_email") || "";
+  const [agentData, setAgentData] = useState4(null);
+  useEffect2(() => {
+    const fetchAgentData = () => __async(void 0, null, function* () {
+      try {
+        const response = yield fetch(
+          `https://api.llmasaservice.io/agents/${agent}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json"
+            }
+          }
+        );
+        const data2 = yield response.json();
+        if (data2 && data2.length > 0) {
+          setAgentData(data2[0]);
+        }
+      } catch (error) {
+        console.error("Error fetching agent data:", error);
+      }
+    });
+    if (agent && agent !== "") {
+      fetchAgentData();
+    }
+  }, [agent]);
+  const getActionsArraySafely = (actionsString) => {
+    let actions2 = [];
+    if (actionsString && actionsString !== "") {
+      try {
+        actions2 = JSON.parse(actionsString);
+        if (!Array.isArray(actions2)) {
+          throw new Error("Parsed actions is not an array");
+        }
+      } catch (error) {
+        actions2 = [];
+      }
+    }
+    return actions2;
+  };
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    ChatPanel_default,
+    {
+      project_id: agentData == null ? void 0 : agentData.projectId,
+      service: (agentData == null ? void 0 : agentData.groupId) || null,
+      url,
+      title: (_a = agentData == null ? void 0 : agentData.displayTitle) != null ? _a : "Chat Agent",
+      theme: (agentData == null ? void 0 : agentData.displayTheme) === "light" ? "light" : "dark",
+      height: (_b = agentData == null ? void 0 : agentData.displayHeight) != null ? _b : "75vh",
+      width: (_c = agentData == null ? void 0 : agentData.displayWidth) != null ? _c : "100%",
+      promptTemplate: (_d = agentData == null ? void 0 : agentData.displayPromptTemplate) != null ? _d : "{{prompt}}",
+      initialMessage: (agentData == null ? void 0 : agentData.displayStartMessageOrPrompt) === "message" ? (_e = agentData == null ? void 0 : agentData.displayInitialMessageOrPrompt) != null ? _e : "" : void 0,
+      initialPrompt: (agentData == null ? void 0 : agentData.displayStartMessageOrPrompt) === "prompt" ? (_f = agentData == null ? void 0 : agentData.displayInitialMessageOrPrompt) != null ? _f : "" : void 0,
+      followOnQuestions: followOnQuestions ? followOnQuestions : (_h = (_g = agentData == null ? void 0 : agentData.displayFollowOnPrompts) == null ? void 0 : _g.split("|")) != null ? _h : [],
+      historyChangedCallback: (history) => {
+        if (history) {
+          setFollowOnPrompt("");
+        }
+      },
+      prismStyle: (agentData == null ? void 0 : agentData.displayTheme) === "light" ? materialLight2 : materialDark2,
+      actions: [
+        ...actions,
+        ...getActionsArraySafely(agentData == null ? void 0 : agentData.displayActions)
+      ],
+      followOnPrompt,
+      agent,
+      placeholder: (_i = agentData == null ? void 0 : agentData.displayPlaceholder) != null ? _i : "Type a message",
+      hideInitialPrompt: (_j = agentData == null ? void 0 : agentData.displayHideInitialPrompt) != null ? _j : true,
+      data: [...data, { key: "data", data: agentData == null ? void 0 : agentData.data }],
+      showEmailButton: (_k = agentData == null ? void 0 : agentData.displayShowEmailButton) != null ? _k : true,
+      showSaveButton: (_l = agentData == null ? void 0 : agentData.displayShowSaveButton) != null ? _l : true,
+      showCallToAction: (_m = agentData == null ? void 0 : agentData.displayShowCallToAction) != null ? _m : false,
+      callToActionButtonText: (_n = agentData == null ? void 0 : agentData.displayCallToActionButtonText) != null ? _n : "Submit",
+      callToActionEmailAddress: (_o = agentData == null ? void 0 : agentData.displayCallToActionEmailAddress) != null ? _o : "",
+      callToActionEmailSubject: (_p = agentData == null ? void 0 : agentData.displayCallToActionEmailSubject) != null ? _p : "Agent CTA Submitted",
+      callToActionMustSendEmail: (_q = agentData == null ? void 0 : agentData.displayCallToActionMustSendEmail) != null ? _q : false,
+      customer: {
+        customer_id: customer_id != null ? customer_id : "default",
+        customer_user_email: customer_email != null ? customer_email : ""
+      },
+      scrollToEnd: (_r = agentData == null ? void 0 : agentData.displayScrollToEnd) != null ? _r : false,
+      ragQueryLimit: (_s = agentData == null ? void 0 : agentData.ragQueryLimit) != null ? _s : 10,
+      ragRankLimit: (_t = agentData == null ? void 0 : agentData.ragRankLimit) != null ? _t : 5
+    }
+  ));
+};
+var AgentPanel_default = AgentPanel;
 export {
+  AgentPanel_default as AgentPanel,
   ChatPanel_default as ChatPanel
 };

package/index.ts

@@ -2,4 +2,7 @@
 import ChatPanel, { ChatPanelProps } from './src/ChatPanel';
 
 // Export the ChatPanel component and its props
-export { ChatPanel, ChatPanelProps };
+export { ChatPanel, ChatPanelProps };
+
+import AgentPanel, { AgentPanelProps } from './src/AgentPanel';
+export { AgentPanel, AgentPanelProps };

package/package.json

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