@hef2024/llmasaservice-ui 0.16.8

package/src/AgentPanel.tsx

@@ -0,0 +1,323 @@
+import React, { useEffect, useState } from "react";
+import materialDark from "react-syntax-highlighter/dist/esm/styles/prism/material-dark.js";
+import materialLight from "react-syntax-highlighter/dist/esm/styles/prism/material-light.js";
+import ChatPanel from "./ChatPanel";
+import { LLMAsAServiceCustomer } from "llmasaservice-client";
+import PrismStyle from "react-syntax-highlighter";
+
+export interface AgentPanelProps {
+  //project_id: string;
+  //initialPrompt?: string;
+  //initialMessage?: string;
+  //title?: string;
+  //placeholder?: string;
+  //hideInitialPrompt?: boolean;
+  customer?: LLMAsAServiceCustomer;
+  messages?: { role: "user" | "assistant"; content: string }[];
+  data?: { key: string; data: string }[];
+  thumbsUpClick?: (callId: string) => void;
+  thumbsDownClick?: (callId: string) => void;
+  theme?: "light" | "dark";
+  markdownClass?: string;
+  width?: string;
+  height?: string;
+  url?: string;
+  //scrollToEnd?: boolean;
+  prismStyle?: PrismStyle;
+  service?: string | null;
+  historyChangedCallback?: (history: {
+    [key: string]: { content: string; callId: string };
+  }) => void;
+  responseCompleteCallback?: (
+    callId: string,
+    prompt: string,
+    response: string
+  ) => void;
+  //promptTemplate?: string;
+  actions?: {
+    pattern: string;
+    type?: string;
+    markdown?: string;
+    callback?: (match: string, groups: any[]) => void;
+    clickCode?: string;
+    style?: string;
+  }[];
+  //showSaveButton?: boolean;
+  //showEmailButton?: boolean;
+  followOnQuestions?: string[];
+  clearFollowOnQuestionsNextPrompt?: boolean;
+  followOnPrompt?: string;
+  showPoweredBy?: boolean;
+  agent: string;
+  conversation?: string | null;
+  //showCallToAction?: boolean;
+  //callToActionButtonText?: string;
+  //callToActionEmailAddress?: string;
+  //callToActionEmailSubject?: string;
+  //ragQueryLimit?: number;
+  //ragRankLimit?: number;
+  initialHistory?: { [key: string]: { content: string; callId: string } };
+  hideRagContextInPrompt?: boolean;
+  createConversationOnFirstChat?: boolean;
+  customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
+  customerEmailCapturePlaceholder?: string;
+}
+interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
+  inline?: boolean;
+}
+
+const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
+  //project_id,
+  //initialPrompt = "",
+  //title = "Chat",
+  //placeholder = "Type a message",
+  //hideInitialPrompt = true,
+  customer = {} as LLMAsAServiceCustomer,
+  messages = [],
+  data = [],
+  thumbsUpClick,
+  thumbsDownClick,
+  theme,
+  markdownClass = null,
+  width,
+  height,
+  url = "https://chat.llmasaservice.io",
+  //url = "https://chat.llmasaservice.io/dev",
+  //scrollToEnd = false,
+  //initialMessage = "",
+  prismStyle = null,
+  service = null,
+  historyChangedCallback = undefined,
+  responseCompleteCallback = undefined,
+  //promptTemplate = "",
+  actions = [],
+  //showSaveButton = true,
+  //showEmailButton = true,
+  followOnQuestions = [],
+  clearFollowOnQuestionsNextPrompt = false,
+  followOnPrompt = "",
+  showPoweredBy = true,
+  agent,
+  conversation = null,
+  //showCallToAction = false,
+  //callToActionButtonText = "Submit",
+  //callToActionEmailAddress = "",
+  //callToActionEmailSubject = "Agent CTA submitted",
+  //ragQueryLimit = 10,
+  //ragRankLimit = 5,
+  initialHistory = {},
+  hideRagContextInPrompt = true,
+}) => {
+  const searchParams = new URLSearchParams(location.search);
+  const customer_id = searchParams.get("customer_id") || null;
+  const customer_email = searchParams.get("customer_email") || null;
+  const customer_name = searchParams.get("customer_name") || null;
+  const customer_user_id = searchParams.get("customer_user_id") || null;
+  const [agentData, setAgentData] = useState<any>(null);
+  const [mcpData, setMCPData] = useState<any>(null);
+
+  // Create customer object only with values that exist
+  const createCustomerObject = (): LLMAsAServiceCustomer | undefined => {
+    const customerData: Partial<LLMAsAServiceCustomer> = {};
+
+    // Get customer_id from props or URL
+    const finalCustomerId = customer?.customer_id || customer_id;
+    if (finalCustomerId) {
+      customerData.customer_id = finalCustomerId;
+    }
+
+    // Get customer_user_email from props or URL
+    const finalCustomerEmail = customer?.customer_user_email || customer_email;
+    if (finalCustomerEmail) {
+      customerData.customer_user_email = finalCustomerEmail;
+    }
+
+    // Get customer_user_name from props or URL
+    const finalCustomerUserName = customer?.customer_user_name || customer_name;
+    if (finalCustomerUserName) {
+      customerData.customer_user_name = finalCustomerUserName;
+    }
+
+    // Get customer_name from props or URL
+    const finalCustomerName = customer?.customer_name || customer_name;
+    if (finalCustomerName) {
+      customerData.customer_name = finalCustomerName;
+    }
+
+    // Get customer_user_id from props or URL
+    const finalCustomerUserId = customer?.customer_user_id || customer_user_id;
+    if (finalCustomerUserId) {
+      customerData.customer_user_id = finalCustomerUserId;
+    }
+
+    // Only return customer object if it has at least one property
+    return Object.keys(customerData).length > 0
+      ? (customerData as LLMAsAServiceCustomer)
+      : undefined;
+  };
+
+  useEffect(() => {
+    const fetchAgentData = async () => {
+      try {
+        const fetchUrl = url.endsWith("dev")
+          ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}`
+          : `https://api.llmasaservice.io/agents/${agent}`;
+
+        const response = await fetch(fetchUrl, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const data = await response.json();
+        if (data && data.length > 0) {
+          setAgentData(data[0]);
+
+          // get MCP servers
+          const response = await fetch(fetchUrl + "/mcp", {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
+
+          const mcpData = await response.json();
+          if (mcpData && mcpData.length > 0) {
+            // only active and NOT SERVER side mcp servers
+            setMCPData(
+              mcpData.filter(
+                (mcp: any) =>
+                  mcp.status === "active" && mcp.executionMode !== "SERVER"
+              )
+            );
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching agent data:", error);
+      }
+    };
+
+    if (agent && agent !== "") {
+      fetchAgentData();
+    }
+  }, [agent, url]);
+
+  const getActionsArraySafely = (actionsString: string) => {
+    console.log("AgentPanel getActionsArraySafely called with:", {
+      actionsString,
+      type: typeof actionsString
+    });
+    let actions: any[] = [];
+    if (actionsString && actionsString !== "") {
+      try {
+        actions = JSON.parse(actionsString);
+        if (!Array.isArray(actions)) {
+          throw new Error("Parsed actions is not an array");
+        }
+        console.log("AgentPanel parsed actions:", actions);
+      } catch (error) {
+        console.log("AgentPanel actions parsing error:", error);
+        actions = [];
+      }
+    }
+    return actions;
+  };
+
+  return (
+    <>
+      {agentData && (
+        <ChatPanel
+          project_id={agentData?.projectId}
+          service={
+            service && service !== "" ? service : agentData?.groupId || null
+          }
+          url={url}
+          title={agentData?.displayTitle ?? ""}
+          theme={
+            theme
+              ? theme
+              : agentData?.displayTheme === "light"
+              ? "light"
+              : "dark"
+          }
+          markdownClass={markdownClass ?? undefined}
+          cssUrl={agentData?.cssUrl ?? ""}
+          height={height ? height : agentData?.displayHeight ?? "100vh"}
+          width={width ? width : agentData?.displayWidth ?? "100%"}
+          promptTemplate={agentData?.displayPromptTemplate ?? "{{prompt}}"}
+          initialMessage={
+            agentData?.displayStartMessageOrPrompt === "message"
+              ? agentData?.displayInitialMessageOrPrompt ?? ""
+              : undefined
+          }
+          initialPrompt={
+            agentData?.displayStartMessageOrPrompt === "prompt"
+              ? agentData?.displayInitialMessageOrPrompt ?? ""
+              : undefined
+          }
+          followOnQuestions={
+            followOnQuestions && followOnQuestions.length > 0
+              ? followOnQuestions
+              : agentData?.displayFollowOnPrompts?.split("|") ?? []
+          }
+          clearFollowOnQuestionsNextPrompt={clearFollowOnQuestionsNextPrompt}
+          historyChangedCallback={historyChangedCallback}
+          responseCompleteCallback={responseCompleteCallback}
+          prismStyle={
+            prismStyle ??
+            (theme
+              ? ((theme === "light" ? materialLight : materialDark) as any)
+              : ((agentData?.displayTheme === "light"
+                  ? materialLight
+                  : materialDark) as any))
+          }
+          actions={[
+            ...actions,
+            ...getActionsArraySafely(agentData?.displayActions),
+          ].map((action, index) => {
+            console.log(`AgentPanel action ${index}:`, action);
+            return action;
+          })}
+          followOnPrompt={followOnPrompt}
+          agent={agent}
+          placeholder={agentData?.displayPlaceholder ?? "Type a message"}
+          hideInitialPrompt={agentData?.displayHideInitialPrompt ?? true}
+          data={[...data, { key: "data", data: agentData?.data }]}
+          showEmailButton={agentData?.displayShowEmailButton ?? true}
+          showSaveButton={agentData?.displayShowSaveButton ?? true}
+          showCallToAction={agentData?.displayShowCallToAction ?? false}
+          callToActionButtonText={
+            agentData?.displayCallToActionButtonText ?? "Submit"
+          }
+          callToActionEmailAddress={
+            agentData?.displayCallToActionEmailAddress ?? ""
+          }
+          callToActionEmailSubject={
+            agentData?.displayCallToActionEmailSubject ?? "Agent CTA Submitted"
+          }
+          {...(createCustomerObject() && { customer: createCustomerObject() })}
+          scrollToEnd={agentData?.displayScrollToEnd ?? false}
+          showPoweredBy={showPoweredBy}
+          messages={messages}
+          conversation={conversation}
+          initialHistory={initialHistory}
+          hideRagContextInPrompt={hideRagContextInPrompt}
+          createConversationOnFirstChat={
+            agentData?.createConversationOnFirstChat ?? true
+          }
+          customerEmailCaptureMode={
+            agentData?.customerEmailCaptureMode ?? "HIDE"
+          }
+          customerEmailCapturePlaceholder={
+            agentData?.customerEmailCapturePlaceholder ??
+            "Please enter your email..."
+          }
+          mcpServers={mcpData}
+        />
+      )}
+    </>
+  );
+};
+
+export default AgentPanel;