llmasaservice-ui 0.7.9 → 0.7.11

package/dist/index.css

@@ -6,19 +6,17 @@
     Helvetica,
     sans-serif;
   font-size: small;
-  color: #333;
-  background-color: #f8f9fa;
+  color: #1a1a1a;
+  background-color: #ffffff;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  padding: 10px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  max-height: 90%;
 }
 .side-panel .title {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: bold;
-  margin-bottom: 10px;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
   text-align: center;
   color: #007bff;
 }
@@ -57,13 +55,13 @@
   color: white;
 }
 .side-panel .history-entry {
-  background-color: #f1f3f5;
+  background-color: white;
   padding-bottom: 10px;
   border-radius: 10px;
 }
 .side-panel .responseArea {
   flex: 1;
-  background-color: #f1f3f5;
+  background-color: white;
   border-radius: 10px;
   overflow-y: auto;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -91,11 +89,7 @@
   margin-left: 5%;
   max-width: 90%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  background:
-    linear-gradient(
-      to right,
-      #e0f7fa,
-      #ffefd5);
+  background: #e0f7fa;
   color: #000;
 }
 .side-panel .copy-button {
@@ -110,20 +104,6 @@
   justify-content: center;
   align-items: center;
 }
-.side-panel .icon-svg {
-  width: 20px;
-  height: 20px;
-}
-.side-panel .icon-svg-large {
-  margin-right: 4px;
-  margin-top: 5px;
-}
-.side-panel .copy-button:hover,
-.side-panel .thumbs-button:hover {
-  color: white;
-  border-radius: 50%;
-  background-color: #0056b3;
-}
 .side-panel .thumbs-button {
   font-size: 12px;
   border: 0;
@@ -136,6 +116,20 @@
   justify-content: center;
   align-items: center;
 }
+.side-panel .copy-button:hover,
+.side-panel .thumbs-button:hover {
+  color: white;
+  border-radius: 50%;
+  background-color: #0056b3;
+}
+.side-panel .icon-svg {
+  width: 20px;
+  height: 20px;
+}
+.side-panel .icon-svg-large {
+  margin-right: 4px;
+  margin-top: 5px;
+}
 .side-panel .button-container {
   display: flex;
   margin-top: 10px;
@@ -171,10 +165,7 @@
   margin-bottom: 1em;
   border: 1px solid #777;
 }
-.side-panel th {
-  border: 1px solid #777;
-  padding: 8px;
-}
+.side-panel th,
 .side-panel td {
   border: 1px solid #777;
   padding: 8px;
@@ -384,10 +375,7 @@
   margin-bottom: 1em;
   border: 1px solid #ddd;
 }
-.side-panel-dark th {
-  border: 1px solid #ddd;
-  padding: 8px;
-}
+.side-panel-dark th,
 .side-panel-dark td {
   border: 1px solid #ddd;
   padding: 8px;

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.11",
   "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.css

@@ -1,24 +1,29 @@
+/* --------------------------------------------------------
+   SIDE PANEL (Light Theme)
+-------------------------------------------------------- */
+
+/* Base container for side panel */
 .side-panel {
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: small;
-  color: #333;
-  background-color: #f8f9fa;
+  color: #1a1a1a;
+  background-color: #ffffff;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  padding: 10px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  max-height: 90%;
 }
 
+/* Title inside side panel */
 .side-panel .title {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: bold;
-  margin-bottom: 10px;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
   text-align: center;
   color: #007bff;
 }
-  
+
+/* Input container */
 .side-panel .input-container {
   display: flex;
   flex-direction: row;
@@ -26,6 +31,7 @@
   margin-top: 5px;
 }
 
+/* Textarea styling */
 .side-panel textarea {
   flex: 1;
   padding: 10px;
@@ -39,6 +45,7 @@
   background-color: #fff;
 }
 
+/* Send button */
 .side-panel .send-button {
   background-color: lightblue;
   color: #0056b3;
@@ -57,20 +64,23 @@
   color: white;
 }
 
+/* History entry container */
 .side-panel .history-entry {
-  background-color: #f1f3f5;
+  background-color: white;
   padding-bottom: 10px;
   border-radius: 10px;
 }
 
+/* Response area (scrollable container) */
 .side-panel .responseArea {
   flex: 1;
-  background-color: #f1f3f5;
+  background-color: white;
   border-radius: 10px;
   overflow-y: auto;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+/* Chat prompt bubble */
 .side-panel .prompt {
   align-self: flex-start;
   padding: 10px;
@@ -86,6 +96,7 @@
   color: #000;
 }
 
+/* Chat response bubble */
 .side-panel .response {
   align-self: flex-end;
   padding: 10px;
@@ -95,10 +106,11 @@
   margin-left: 5%;
   max-width: 90%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  background: linear-gradient(to right, #e0f7fa, #ffefd5);
+  background: #e0f7fa;
   color: #000;
 }
 
+/* Copy button */
 .side-panel .copy-button {
   font-size: 12px;
   border: 0;
@@ -112,23 +124,7 @@
   align-items: center;
 }
 
-.side-panel .icon-svg {
-  width: 20px;
-  height: 20px;
-}
-
-.side-panel .icon-svg-large {
-  margin-right: 4px;
-  margin-top: 5px;
-}
-
-.side-panel .copy-button:hover,
-.side-panel .thumbs-button:hover {
-  color: white;
-  border-radius: 50%;
-  background-color: #0056b3;
-}
-
+/* Thumbs button (same style as copy button) */
 .side-panel .thumbs-button {
   font-size: 12px;
   border: 0;
@@ -142,11 +138,32 @@
   align-items: center;
 }
 
+/* Hover state for copy and thumbs buttons */
+.side-panel .copy-button:hover,
+.side-panel .thumbs-button:hover {
+  color: white;
+  border-radius: 50%;
+  background-color: #0056b3;
+}
+
+/* SVG icons */
+.side-panel .icon-svg {
+  width: 20px;
+  height: 20px;
+}
+
+.side-panel .icon-svg-large {
+  margin-right: 4px;
+  margin-top: 5px;
+}
+
+/* Button container for layout */
 .side-panel .button-container {
   display: flex;
   margin-top: 10px;
 }
 
+/* Button container for actions (with spacing) */
 .side-panel .button-container-actions {
   display: flex;
   margin-top: 10px;
@@ -154,6 +171,7 @@
   gap: 5px;
 }
 
+/* Scroll button (fixed at bottom center) */
 .side-panel .scroll-button {
   position: absolute;
   left: 50%;
@@ -176,22 +194,20 @@
   background-color: #0056b3;
 }
 
+/* Table styling */
 .side-panel table {
   border-collapse: collapse;
   margin-bottom: 1em;
   border: 1px solid #777;
 }
 
-.side-panel th {
-  border: 1px solid #777;
-  padding: 8px;
-}
-
+.side-panel th,
 .side-panel td {
   border: 1px solid #777;
   padding: 8px;
 }
 
+/* Save button */
 .side-panel .save-button {
   flex: 1;
   background-color: lightblue;
@@ -210,11 +226,13 @@
   color: white;
 }
 
+/* Suggestion buttons container */
 .suggestions-container {
   display: flex;
   flex-wrap: wrap;
 }
 
+/* Suggestion button */
 .side-panel .suggestion-button {
   background-color: lightblue;
   color: #0056b3;
@@ -237,6 +255,11 @@
   cursor: not-allowed;
 }
 
+/* --------------------------------------------------------
+   SIDE PANEL (Dark Theme)
+-------------------------------------------------------- */
+
+/* Base container for dark side panel */
 .side-panel-dark {
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: small;
@@ -249,18 +272,24 @@
   box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
   max-height: 90%;
 }
+
+/* Title */
 .side-panel-dark .title {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 10px;
   text-align: center;
 }
+
+/* Input container */
 .side-panel-dark .input-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 5px;
 }
+
+/* Textarea */
 .side-panel-dark textarea {
   flex: 1;
   padding: 10px;
@@ -272,6 +301,8 @@
   color: #333;
   border: 1px solid #ddd;
 }
+
+/* Send button */
 .side-panel-dark .send-button {
   background-color: #424242;
   color: white;
@@ -286,15 +317,20 @@
   box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
   transition: background-color 0.3s ease, transform 0.3s ease;
 }
+
 .side-panel-dark .send-button:hover {
   background-color: #0056b3;
   transform: scale(1.1);
 }
+
+/* History entry */
 .side-panel-dark .history-entry {
   background-color: #424242;
   padding-bottom: 10px;
   border-radius: 10px;
 }
+
+/* Response area */
 .side-panel-dark .responseArea {
   flex: 1;
   background-color: #424242;
@@ -302,6 +338,8 @@
   overflow-y: auto;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
+/* Chat prompt bubble */
 .side-panel-dark .prompt {
   align-self: flex-start;
   background-color: #303030;
@@ -315,6 +353,8 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   white-space: pre-wrap;
 }
+
+/* Chat response bubble */
 .side-panel-dark .response {
   align-self: flex-end;
   padding: 10px;
@@ -326,6 +366,8 @@
   background-color: #3a3737;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
+/* Copy button */
 .side-panel-dark .copy-button {
   font-size: 12px;
   border: 0;
@@ -338,20 +380,27 @@
   justify-content: center;
   align-items: center;
 }
+
+/* SVG icons */
 .side-panel-dark .icon-svg {
   width: 20px;
   height: 20px;
 }
+
 .side-panel-dark .icon-svg-large {
   margin-right: 4px;
   margin-top: 5px;
 }
+
+/* Hover state for copy and thumbs buttons */
 .side-panel-dark .copy-button:hover,
 .side-panel-dark .thumbs-button:hover {
   color: #0056b3;
   border-radius: 50%;
   background-color: #e2e6ea;
 }
+
+/* Thumbs button */
 .side-panel-dark .thumbs-button {
   font-size: 12px;
   border: 0;
@@ -365,6 +414,7 @@
   align-items: center;
 }
 
+/* Button containers */
 .side-panel-dark .button-container {
   display: flex;
   margin-top: 10px;
@@ -377,6 +427,7 @@
   gap: 5px;
 }
 
+/* Scroll button */
 .side-panel-dark .scroll-button {
   position: absolute;
   left: 50%;
@@ -399,22 +450,20 @@
   background-color: #0056b3;
 }
 
+/* Table styling */
 .side-panel-dark table {
   border-collapse: collapse;
   margin-bottom: 1em;
   border: 1px solid #ddd;
 }
 
-.side-panel-dark th {
-  border: 1px solid #ddd;
-  padding: 8px;
-}
-
+.side-panel-dark th,
 .side-panel-dark td {
   border: 1px solid #ddd;
   padding: 8px;
 }
 
+/* Links */
 .side-panel-dark a {
   color: #ddd;
 }
@@ -423,6 +472,7 @@
   color: #fff;
 }
 
+/* Save button */
 .side-panel-dark .save-button {
   flex: 1;
   background-color: #3a3737;
@@ -440,6 +490,7 @@
   color: white;
 }
 
+/* Suggestion button */
 .side-panel-dark .suggestion-button {
   background-color: #0056b3;
   color: white;
@@ -456,6 +507,10 @@
   color: black;
 }
 
+/* --------------------------------------------------------
+   POWERED BY / FOOTER
+-------------------------------------------------------- */
+
 .powered-by {
   margin-top: 3px;
   display: flex;
@@ -472,6 +527,11 @@
   text-decoration: underline;
 }
 
+/* --------------------------------------------------------
+   MODAL DIALOG
+-------------------------------------------------------- */
+
+/* Modal overlay (full screen dim background) */
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -484,6 +544,7 @@
   align-items: center;
 }
 
+/* Modal content container */
 .modal-content {
   background: white;
   padding: 5px;
@@ -493,16 +554,19 @@
   color: #333;
 }
 
+/* Modal text */
 .modal-text {
   color: black;
 }
 
+/* Modal buttons container */
 .modal-buttons {
   padding: 5px 10px;
   display: flex;
   justify-content: space-between;
 }
 
+/* Modal button styling */
 .modal-buttons button {
   padding: 5px 10px;
   border: none;
@@ -510,19 +574,27 @@
   cursor: pointer;
 }
 
+/* First modal button */
 .modal-buttons button:first-child {
   background: #ccc;
 }
 
+/* Second modal button */
 .modal-buttons button:last-child {
   background: #007bff;
   color: white;
 }
 
+/* --------------------------------------------------------
+   FORM ERROR STYLING
+-------------------------------------------------------- */
+
+/* Invalid field outline */
 .invalid {
   border-color: red;
 }
 
+/* Error message text */
 .error-message {
   color: red;
   font-size: 0.8em;

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]"
   },
 };