llmasaservice-ui 0.2.14 → 0.2.15

package/dist/index.d.mts

@@ -24,6 +24,9 @@ interface ChatPanelProps {
     scrollToEnd?: boolean;
     prismStyle?: PrismStyle;
     service?: string | null;
+    historyChangedCallback?: (history: {
+        [prompt: string]: string;
+    }) => void;
 }
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;

package/dist/index.d.ts

@@ -24,6 +24,9 @@ interface ChatPanelProps {
     scrollToEnd?: boolean;
     prismStyle?: PrismStyle;
     service?: string | null;
+    historyChangedCallback?: (history: {
+        [prompt: string]: string;
+    }) => void;
 }
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;

package/dist/index.js

@@ -71,7 +71,7 @@ var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_material_dark = __toESM(require("react-syntax-highlighter/dist/cjs/styles/prism/material-dark.js"));
 var import_material_light = __toESM(require("react-syntax-highlighter/dist/cjs/styles/prism/material-light.js"));
-var ChatPanel = (0, import_react.forwardRef)(({
+var ChatPanel = ({
   project_id,
   initialPrompt = "",
   title = "Chat",
@@ -89,17 +89,14 @@ var ChatPanel = (0, import_react.forwardRef)(({
   scrollToEnd = false,
   initialMessage = "",
   prismStyle = theme === "light" ? import_material_light.default : import_material_dark.default,
-  service = null
-}, ref) => {
+  service = null,
+  historyChangedCallback = null
+}) => {
   const { send, response, idle, stop } = (0, import_llmasaservice_client.useLLM)({
     project_id,
     customer,
     url
   });
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    getHistory: () => history,
-    setHistory: (newHistory) => setHistory(newHistory)
-  }));
   const [nextPrompt, setNextPrompt] = (0, import_react.useState)("");
   const [lastController, setLastController] = (0, import_react.useState)(new AbortController());
   const [history, setHistory] = (0, import_react.useState)({});
@@ -153,6 +150,11 @@ var ChatPanel = (0, import_react.forwardRef)(({
       }
     }
   }, [response, history]);
+  (0, import_react.useEffect)(() => {
+    if (historyChangedCallback) {
+      historyChangedCallback(history);
+    }
+  }, [history, historyChangedCallback]);
   const continueChat = () => {
     if (!idle) {
       stop(lastController);
@@ -182,6 +184,9 @@ var ChatPanel = (0, import_react.forwardRef)(({
       setNextPrompt("");
     }
   };
+  const replaceHistory = (newHistory) => {
+    setHistory(newHistory);
+  };
   function copyToClipboard(text) {
     navigator.clipboard.writeText(text);
   }
@@ -356,7 +361,7 @@ var ChatPanel = (0, import_react.forwardRef)(({
       /* @__PURE__ */ import_react.default.createElement("path", { d: "M8 8h16v16H8z" })
     )))
   ));
-});
+};
 var ChatPanel_default = ChatPanel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -32,13 +32,13 @@ var __objRest = (source, exclude) => {
 
 // src/ChatPanel.tsx
 import { useLLM } from "llmasaservice-client";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import materialDark from "react-syntax-highlighter/dist/cjs/styles/prism/material-dark.js";
 import materialLight from "react-syntax-highlighter/dist/cjs/styles/prism/material-light.js";
-var ChatPanel = forwardRef(({
+var ChatPanel = ({
   project_id,
   initialPrompt = "",
   title = "Chat",
@@ -56,17 +56,14 @@ var ChatPanel = forwardRef(({
   scrollToEnd = false,
   initialMessage = "",
   prismStyle = theme === "light" ? materialLight : materialDark,
-  service = null
-}, ref) => {
+  service = null,
+  historyChangedCallback = null
+}) => {
   const { send, response, idle, stop } = useLLM({
     project_id,
     customer,
     url
   });
-  useImperativeHandle(ref, () => ({
-    getHistory: () => history,
-    setHistory: (newHistory) => setHistory(newHistory)
-  }));
   const [nextPrompt, setNextPrompt] = useState("");
   const [lastController, setLastController] = useState(new AbortController());
   const [history, setHistory] = useState({});
@@ -120,6 +117,11 @@ var ChatPanel = forwardRef(({
       }
     }
   }, [response, history]);
+  useEffect(() => {
+    if (historyChangedCallback) {
+      historyChangedCallback(history);
+    }
+  }, [history, historyChangedCallback]);
   const continueChat = () => {
     if (!idle) {
       stop(lastController);
@@ -149,6 +151,9 @@ var ChatPanel = forwardRef(({
       setNextPrompt("");
     }
   };
+  const replaceHistory = (newHistory) => {
+    setHistory(newHistory);
+  };
   function copyToClipboard(text) {
     navigator.clipboard.writeText(text);
   }
@@ -323,7 +328,7 @@ var ChatPanel = forwardRef(({
       /* @__PURE__ */ React.createElement("path", { d: "M8 8h16v16H8z" })
     )))
   ));
-});
+};
 var ChatPanel_default = ChatPanel;
 export {
   ChatPanel_default as ChatPanel

package/package.json

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

package/src/ChatPanel.tsx

@@ -1,5 +1,5 @@
 import { LLMAsAServiceCustomer, useLLM } from "llmasaservice-client";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import "./ChatPanel.css";
 import remarkGfm from "remark-gfm";
@@ -27,13 +27,14 @@ export interface ChatPanelProps {
   scrollToEnd?: boolean;
   prismStyle?: PrismStyle;
   service?: string | null;
+  historyChangedCallback?: (history: { [prompt: string]: string }) => void;
 }
 
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
   inline?: boolean;
 }
 
-const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = forwardRef(({
+const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   project_id,
   initialPrompt = "",
   title = "Chat",
@@ -52,18 +53,14 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = forwardRef(({
   initialMessage = "",
   prismStyle = theme === "light" ? materialLight: materialDark,
   service = null,
-}, ref) => {
+  historyChangedCallback = null,
+}) => {
   const { send, response, idle, stop } = useLLM({
     project_id: project_id,
     customer: customer,
     url: url,
   });
 
-  useImperativeHandle(ref, () => ({
-    getHistory: () => history,
-    setHistory: (newHistory: { [key: string]: string }) => setHistory(newHistory),
-  }));
-
   const [nextPrompt, setNextPrompt] = useState("");
   const [lastController, setLastController] = useState(new AbortController());
   const [history, setHistory] = useState<{ [prompt: string]: string }>({});
@@ -130,6 +127,12 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = forwardRef(({
     }
   }, [response, history]);
 
+  useEffect(() => {
+    if (historyChangedCallback) {
+      historyChangedCallback(history);
+    }
+  }, [history, historyChangedCallback]);
+
   const continueChat = () => {
     if (!idle) {
       stop(lastController);
@@ -171,6 +174,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = forwardRef(({
     }
   };
 
+  const replaceHistory = (newHistory: { [prompt: string]: string }) => {
+    setHistory(newHistory);
+  }
+
   function copyToClipboard(text: string) {
     navigator.clipboard.writeText(text);
   }
@@ -379,6 +386,6 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = forwardRef(({
       </div>
     </>
   );
-});
+};
 
 export default ChatPanel;