llmasaservice-ui 0.7.9 → 0.7.10

package/dist/index.d.mts

@@ -21,6 +21,7 @@ interface ChatPanelProps {
     thumbsUpClick?: (callId: string) => void;
     thumbsDownClick?: (callId: string) => void;
     theme?: "light" | "dark";
+    cssUrl?: string;
     markdownClass?: string;
     width?: string;
     height?: string;
@@ -65,7 +66,6 @@ interface ExtraProps$1 extends React.HTMLAttributes<HTMLElement> {
 declare const ChatPanel: React.FC<ChatPanelProps & ExtraProps$1>;
 
 interface AgentPanelProps {
-    project_id: string;
     customer?: LLMAsAServiceCustomer;
     messages?: {
         role: "user" | "assistant";
@@ -77,6 +77,9 @@ interface AgentPanelProps {
     }[];
     thumbsUpClick?: (callId: string) => void;
     thumbsDownClick?: (callId: string) => void;
+    theme?: "light" | "dark";
+    width?: string;
+    height?: string;
     url?: string;
     prismStyle?: PrismStyle;
     service?: string | null;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ interface ChatPanelProps {
     thumbsUpClick?: (callId: string) => void;
     thumbsDownClick?: (callId: string) => void;
     theme?: "light" | "dark";
+    cssUrl?: string;
     markdownClass?: string;
     width?: string;
     height?: string;
@@ -65,7 +66,6 @@ interface ExtraProps$1 extends React.HTMLAttributes<HTMLElement> {
 declare const ChatPanel: React.FC<ChatPanelProps & ExtraProps$1>;
 
 interface AgentPanelProps {
-    project_id: string;
     customer?: LLMAsAServiceCustomer;
     messages?: {
         role: "user" | "assistant";
@@ -77,6 +77,9 @@ interface AgentPanelProps {
     }[];
     thumbsUpClick?: (callId: string) => void;
     thumbsDownClick?: (callId: string) => void;
+    theme?: "light" | "dark";
+    width?: string;
+    height?: string;
     url?: string;
     prismStyle?: PrismStyle;
     service?: string | null;

package/dist/index.js

@@ -175,6 +175,7 @@ var ChatPanel = ({
   thumbsUpClick,
   thumbsDownClick,
   theme = "light",
+  cssUrl = "",
   markdownClass = null,
   width = "300px",
   height = "100vh",
@@ -240,6 +241,15 @@ var ChatPanel = ({
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
   }, []);
+  (0, import_react3.useEffect)(() => {
+    if (cssUrl && cssUrl !== "") {
+      const link = document.createElement("link");
+      link.href = cssUrl;
+      link.rel = "stylesheet";
+      document.head.appendChild(link);
+      console.log("Added css link", link);
+    }
+  }, [cssUrl]);
   (0, import_react3.useEffect)(() => {
     if (response && response.length > 0) {
       setIsLoading(false);
@@ -1085,7 +1095,7 @@ var import_react4 = __toESM(require("react"));
 var import_material_dark2 = __toESM(require("react-syntax-highlighter/dist/esm/styles/prism/material-dark.js"));
 var import_material_light2 = __toESM(require("react-syntax-highlighter/dist/esm/styles/prism/material-light.js"));
 var AgentPanel = ({
-  project_id,
+  //project_id,
   //initialPrompt = "",
   //title = "Chat",
   //placeholder = "Type a message",
@@ -1095,16 +1105,16 @@ var AgentPanel = ({
   data = [],
   thumbsUpClick,
   thumbsDownClick,
-  //theme = "light",
+  theme,
   //markdownClass = null,
-  //width = "300px",
-  //height = "100vh",
+  width,
+  height,
   url = "https://chat.llmasaservice.io/",
   //scrollToEnd = false,
   //initialMessage = "",
   //prismStyle = theme === "light" ? materialLight : materialDark,
   service = null,
-  historyChangedCallback = null,
+  historyChangedCallback = void 0,
   //promptTemplate = "",
   actions = [],
   //showSaveButton = true,
@@ -1123,7 +1133,7 @@ var AgentPanel = ({
   //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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const [followOnPrompt, setFollowOnPrompt] = (0, import_react4.useState)("");
   const searchParams = new URLSearchParams(location.search);
   const customer_id = searchParams.get("customer_id") || "";
@@ -1143,13 +1153,6 @@ var AgentPanel = ({
         );
         const data2 = yield response.json();
         if (data2 && data2.length > 0) {
-          if (data2 && data2[0].cssUrl && data2[0].cssUrl !== "") {
-            const link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.href = data2[0].cssUrl;
-            document.head.appendChild(link);
-            console.log("Added css link", link);
-          }
           setAgentData(data2[0]);
         }
       } catch (error) {
@@ -1181,19 +1184,16 @@ var AgentPanel = ({
       service: (agentData == null ? void 0 : agentData.groupId) || null,
       url,
       title: (_a = agentData == null ? void 0 : agentData.displayTitle) != null ? _a : "",
-      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 : [],
+      theme: theme ? theme : (agentData == null ? void 0 : agentData.displayTheme) === "light" ? "light" : "dark",
+      cssUrl: (_b = agentData == null ? void 0 : agentData.cssUrl) != null ? _b : "",
+      height: height ? height : (_c = agentData == null ? void 0 : agentData.displayHeight) != null ? _c : "100vh",
+      width: width ? width : (_d = agentData == null ? void 0 : agentData.displayWidth) != null ? _d : "100%",
+      promptTemplate: (_e = agentData == null ? void 0 : agentData.displayPromptTemplate) != null ? _e : "{{prompt}}",
+      initialMessage: (agentData == null ? void 0 : agentData.displayStartMessageOrPrompt) === "message" ? (_f = agentData == null ? void 0 : agentData.displayInitialMessageOrPrompt) != null ? _f : "" : void 0,
+      initialPrompt: (agentData == null ? void 0 : agentData.displayStartMessageOrPrompt) === "prompt" ? (_g = agentData == null ? void 0 : agentData.displayInitialMessageOrPrompt) != null ? _g : "" : void 0,
+      followOnQuestions: followOnQuestions ? followOnQuestions : (_i = (_h = agentData == null ? void 0 : agentData.displayFollowOnPrompts) == null ? void 0 : _h.split("|")) != null ? _i : [],
       clearFollowOnQuestionsNextPrompt,
-      historyChangedCallback: (history) => {
-        if (history) {
-          setFollowOnPrompt("");
-        }
-      },
+      historyChangedCallback,
       prismStyle: (agentData == null ? void 0 : agentData.displayTheme) === "light" ? import_material_light2.default : import_material_dark2.default,
       actions: [
         ...actions,
@@ -1201,23 +1201,25 @@ var AgentPanel = ({
       ],
       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,
+      placeholder: (_j = agentData == null ? void 0 : agentData.displayPlaceholder) != null ? _j : "Type a message",
+      hideInitialPrompt: (_k = agentData == null ? void 0 : agentData.displayHideInitialPrompt) != null ? _k : 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,
+      showEmailButton: (_l = agentData == null ? void 0 : agentData.displayShowEmailButton) != null ? _l : true,
+      showSaveButton: (_m = agentData == null ? void 0 : agentData.displayShowSaveButton) != null ? _m : true,
+      showCallToAction: (_n = agentData == null ? void 0 : agentData.displayShowCallToAction) != null ? _n : false,
+      callToActionButtonText: (_o = agentData == null ? void 0 : agentData.displayCallToActionButtonText) != null ? _o : "Submit",
+      callToActionEmailAddress: (_p = agentData == null ? void 0 : agentData.displayCallToActionEmailAddress) != null ? _p : "",
+      callToActionEmailSubject: (_q = agentData == null ? void 0 : agentData.displayCallToActionEmailSubject) != null ? _q : "Agent CTA Submitted",
+      callToActionMustSendEmail: (_r = agentData == null ? void 0 : agentData.displayCallToActionMustSendEmail) != null ? _r : false,
       customer: {
-        customer_id: customer_id != null ? customer_id : "default",
-        customer_user_email: customer_email != null ? customer_email : ""
+        customer_id: customer ? customer.customer_id : customer_id != null ? customer_id : "",
+        customer_user_email: customer ? customer.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
+      scrollToEnd: (_s = agentData == null ? void 0 : agentData.displayScrollToEnd) != null ? _s : false,
+      ragQueryLimit: (_t = agentData == null ? void 0 : agentData.ragQueryLimit) != null ? _t : 10,
+      ragRankLimit: (_u = agentData == null ? void 0 : agentData.ragRankLimit) != null ? _u : 5,
+      showPoweredBy,
+      messages
     }
   ));
 };

package/dist/index.mjs

@@ -141,6 +141,7 @@ var ChatPanel = ({
   thumbsUpClick,
   thumbsDownClick,
   theme = "light",
+  cssUrl = "",
   markdownClass = null,
   width = "300px",
   height = "100vh",
@@ -206,6 +207,15 @@ var ChatPanel = ({
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
   }, []);
+  useEffect(() => {
+    if (cssUrl && cssUrl !== "") {
+      const link = document.createElement("link");
+      link.href = cssUrl;
+      link.rel = "stylesheet";
+      document.head.appendChild(link);
+      console.log("Added css link", link);
+    }
+  }, [cssUrl]);
   useEffect(() => {
     if (response && response.length > 0) {
       setIsLoading(false);
@@ -1051,7 +1061,7 @@ import React4, { useEffect as useEffect2, useState as useState4 } from "react";
 import materialDark2 from "react-syntax-highlighter/dist/esm/styles/prism/material-dark.js";
 import materialLight2 from "react-syntax-highlighter/dist/esm/styles/prism/material-light.js";
 var AgentPanel = ({
-  project_id,
+  //project_id,
   //initialPrompt = "",
   //title = "Chat",
   //placeholder = "Type a message",
@@ -1061,16 +1071,16 @@ var AgentPanel = ({
   data = [],
   thumbsUpClick,
   thumbsDownClick,
-  //theme = "light",
+  theme,
   //markdownClass = null,
-  //width = "300px",
-  //height = "100vh",
+  width,
+  height,
   url = "https://chat.llmasaservice.io/",
   //scrollToEnd = false,
   //initialMessage = "",
   //prismStyle = theme === "light" ? materialLight : materialDark,
   service = null,
-  historyChangedCallback = null,
+  historyChangedCallback = void 0,
   //promptTemplate = "",
   actions = [],
   //showSaveButton = true,
@@ -1089,7 +1099,7 @@ var AgentPanel = ({
   //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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const [followOnPrompt, setFollowOnPrompt] = useState4("");
   const searchParams = new URLSearchParams(location.search);
   const customer_id = searchParams.get("customer_id") || "";
@@ -1109,13 +1119,6 @@ var AgentPanel = ({
         );
         const data2 = yield response.json();
         if (data2 && data2.length > 0) {
-          if (data2 && data2[0].cssUrl && data2[0].cssUrl !== "") {
-            const link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.href = data2[0].cssUrl;
-            document.head.appendChild(link);
-            console.log("Added css link", link);
-          }
           setAgentData(data2[0]);
         }
       } catch (error) {
@@ -1147,19 +1150,16 @@ var AgentPanel = ({
       service: (agentData == null ? void 0 : agentData.groupId) || null,
       url,
       title: (_a = agentData == null ? void 0 : agentData.displayTitle) != null ? _a : "",
-      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 : [],
+      theme: theme ? theme : (agentData == null ? void 0 : agentData.displayTheme) === "light" ? "light" : "dark",
+      cssUrl: (_b = agentData == null ? void 0 : agentData.cssUrl) != null ? _b : "",
+      height: height ? height : (_c = agentData == null ? void 0 : agentData.displayHeight) != null ? _c : "100vh",
+      width: width ? width : (_d = agentData == null ? void 0 : agentData.displayWidth) != null ? _d : "100%",
+      promptTemplate: (_e = agentData == null ? void 0 : agentData.displayPromptTemplate) != null ? _e : "{{prompt}}",
+      initialMessage: (agentData == null ? void 0 : agentData.displayStartMessageOrPrompt) === "message" ? (_f = agentData == null ? void 0 : agentData.displayInitialMessageOrPrompt) != null ? _f : "" : void 0,
+      initialPrompt: (agentData == null ? void 0 : agentData.displayStartMessageOrPrompt) === "prompt" ? (_g = agentData == null ? void 0 : agentData.displayInitialMessageOrPrompt) != null ? _g : "" : void 0,
+      followOnQuestions: followOnQuestions ? followOnQuestions : (_i = (_h = agentData == null ? void 0 : agentData.displayFollowOnPrompts) == null ? void 0 : _h.split("|")) != null ? _i : [],
       clearFollowOnQuestionsNextPrompt,
-      historyChangedCallback: (history) => {
-        if (history) {
-          setFollowOnPrompt("");
-        }
-      },
+      historyChangedCallback,
       prismStyle: (agentData == null ? void 0 : agentData.displayTheme) === "light" ? materialLight2 : materialDark2,
       actions: [
         ...actions,
@@ -1167,23 +1167,25 @@ var AgentPanel = ({
       ],
       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,
+      placeholder: (_j = agentData == null ? void 0 : agentData.displayPlaceholder) != null ? _j : "Type a message",
+      hideInitialPrompt: (_k = agentData == null ? void 0 : agentData.displayHideInitialPrompt) != null ? _k : 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,
+      showEmailButton: (_l = agentData == null ? void 0 : agentData.displayShowEmailButton) != null ? _l : true,
+      showSaveButton: (_m = agentData == null ? void 0 : agentData.displayShowSaveButton) != null ? _m : true,
+      showCallToAction: (_n = agentData == null ? void 0 : agentData.displayShowCallToAction) != null ? _n : false,
+      callToActionButtonText: (_o = agentData == null ? void 0 : agentData.displayCallToActionButtonText) != null ? _o : "Submit",
+      callToActionEmailAddress: (_p = agentData == null ? void 0 : agentData.displayCallToActionEmailAddress) != null ? _p : "",
+      callToActionEmailSubject: (_q = agentData == null ? void 0 : agentData.displayCallToActionEmailSubject) != null ? _q : "Agent CTA Submitted",
+      callToActionMustSendEmail: (_r = agentData == null ? void 0 : agentData.displayCallToActionMustSendEmail) != null ? _r : false,
       customer: {
-        customer_id: customer_id != null ? customer_id : "default",
-        customer_user_email: customer_email != null ? customer_email : ""
+        customer_id: customer ? customer.customer_id : customer_id != null ? customer_id : "",
+        customer_user_email: customer ? customer.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
+      scrollToEnd: (_s = agentData == null ? void 0 : agentData.displayScrollToEnd) != null ? _s : false,
+      ragQueryLimit: (_t = agentData == null ? void 0 : agentData.ragQueryLimit) != null ? _t : 10,
+      ragRankLimit: (_u = agentData == null ? void 0 : agentData.ragRankLimit) != null ? _u : 5,
+      showPoweredBy,
+      messages
     }
   ));
 };

package/package.json

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

package/src/AgentPanel.tsx

@@ -6,7 +6,7 @@ import { LLMAsAServiceCustomer } from "llmasaservice-client";
 import PrismStyle from "react-syntax-highlighter";
 
 export interface AgentPanelProps {
-  project_id: string;
+  //project_id: string;
   //initialPrompt?: string;
   //initialMessage?: string;
   //title?: string;
@@ -17,10 +17,10 @@ export interface AgentPanelProps {
   data?: { key: string; data: string }[];
   thumbsUpClick?: (callId: string) => void;
   thumbsDownClick?: (callId: string) => void;
-  //theme?: "light" | "dark";
+  theme?: "light" | "dark";
   //markdownClass?: string;
-  //width?: string;
-  //height?: string;
+  width?: string;
+  height?: string;
   url?: string;
   //scrollToEnd?: boolean;
   prismStyle?: PrismStyle;
@@ -58,7 +58,7 @@ interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
 }
 
 const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
-  project_id,
+  //project_id,
   //initialPrompt = "",
   //title = "Chat",
   //placeholder = "Type a message",
@@ -68,16 +68,16 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
   data = [],
   thumbsUpClick,
   thumbsDownClick,
-  //theme = "light",
+  theme,
   //markdownClass = null,
-  //width = "300px",
-  //height = "100vh",
+  width,
+  height,
   url = "https://chat.llmasaservice.io/",
   //scrollToEnd = false,
   //initialMessage = "",
   //prismStyle = theme === "light" ? materialLight : materialDark,
   service = null,
-  historyChangedCallback = null,
+  historyChangedCallback = undefined,
   //promptTemplate = "",
   actions = [],
   //showSaveButton = true,
@@ -119,15 +119,6 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
 
         const data = await response.json();
         if (data && data.length > 0) {
-          //console.log("data", data);
-          if (data && data[0].cssUrl && data[0].cssUrl !== "") {
-            const link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.href = data[0].cssUrl; // "https://dev.llmasaservice.io/themes/simple.css";
-            document.head.appendChild(link);
-            console.log("Added css link", link);
-          }
-
           setAgentData(data[0]);
         }
       } catch (error) {
@@ -167,9 +158,10 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
           service={agentData?.groupId || null}
           url={url}
           title={agentData?.displayTitle ?? ""}
-          theme={agentData?.displayTheme === "light" ? "light" : "dark"}
-          height={agentData?.displayHeight ?? "75vh"}
-          width={agentData?.displayWidth ?? "100%"}
+          theme={theme ? theme : agentData?.displayTheme === "light" ? "light" : "dark"}
+          cssUrl={agentData?.cssUrl ?? ""}
+          height={height ? height : agentData?.displayHeight ?? "100vh"}
+          width={width ? width : agentData?.displayWidth ?? "100%"}
           promptTemplate={agentData?.displayPromptTemplate ?? "{{prompt}}"}
           initialMessage={
             agentData?.displayStartMessageOrPrompt === "message"
@@ -187,11 +179,7 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
               : agentData?.displayFollowOnPrompts?.split("|") ?? []
           }
           clearFollowOnQuestionsNextPrompt={clearFollowOnQuestionsNextPrompt}
-          historyChangedCallback={(history) => {
-            if (history) {
-              setFollowOnPrompt("");
-            }
-          }}
+          historyChangedCallback={historyChangedCallback}
           prismStyle={
             (agentData?.displayTheme === "light"
               ? materialLight
@@ -222,12 +210,16 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
             agentData?.displayCallToActionMustSendEmail ?? false
           }
           customer={{
-            customer_id: customer_id ?? "default",
-            customer_user_email: customer_email ?? "",
+            customer_id: customer ? customer.customer_id : customer_id ?? "",
+            customer_user_email: customer
+              ? customer.customer_user_email
+              : customer_email ?? "",
           }}
           scrollToEnd={agentData?.displayScrollToEnd ?? false}
           ragQueryLimit={agentData?.ragQueryLimit ?? 10}
           ragRankLimit={agentData?.ragRankLimit ?? 5}
+          showPoweredBy={showPoweredBy}
+          messages={messages}
         />
       )}
     </>

package/src/ChatPanel.tsx

@@ -26,6 +26,7 @@ export interface ChatPanelProps {
   thumbsUpClick?: (callId: string) => void;
   thumbsDownClick?: (callId: string) => void;
   theme?: "light" | "dark";
+  cssUrl?: string;
   markdownClass?: string;
   width?: string;
   height?: string;
@@ -78,6 +79,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   thumbsUpClick,
   thumbsDownClick,
   theme = "light",
+  cssUrl = "",
   markdownClass = null,
   width = "300px",
   height = "100vh",
@@ -159,6 +161,16 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (cssUrl && cssUrl !== "") {
+      const link = document.createElement("link");
+      link.href = cssUrl;
+      link.rel = "stylesheet";
+      document.head.appendChild(link);
+      console.log("Added css link", link);
+    }
+  }, [cssUrl]);
+
   // response change. Update the history
   useEffect(() => {
     if (response && response.length > 0) {

package/src/stories/AgentPanel.stories.ts

@@ -17,7 +17,6 @@ type Story = StoryObj<typeof meta>;
 export const AgentPanelStory: Story = {
   args: {
     title: "Test Title",
-    project_id: "[get this from your  control panel]",
     agent: "[your agent id]"
   },
 };