llmasaservice-ui 0.2.13 → 0.2.14

package/dist/index.d.mts

@@ -23,6 +23,7 @@ interface ChatPanelProps {
     url?: string | null;
     scrollToEnd?: boolean;
     prismStyle?: PrismStyle;
+    service?: string | null;
 }
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;

package/dist/index.d.ts

@@ -23,6 +23,7 @@ interface ChatPanelProps {
     url?: string | null;
     scrollToEnd?: boolean;
     prismStyle?: PrismStyle;
+    service?: string | null;
 }
 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 = ({
+var ChatPanel = (0, import_react.forwardRef)(({
   project_id,
   initialPrompt = "",
   title = "Chat",
@@ -88,13 +88,18 @@ var ChatPanel = ({
   url = null,
   scrollToEnd = false,
   initialMessage = "",
-  prismStyle = theme === "light" ? import_material_light.default : import_material_dark.default
-}) => {
+  prismStyle = theme === "light" ? import_material_light.default : import_material_dark.default,
+  service = null
+}, ref) => {
   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)({});
@@ -123,7 +128,7 @@ var ChatPanel = ({
         setIsLoading(true);
         if (lastController) stop(lastController);
         const controller = new AbortController();
-        send(initialPrompt, messages, true, true, null, controller);
+        send(initialPrompt, messages, true, true, service, controller);
         setLastPrompt(initialPrompt);
         setLastController(controller);
         setHistory({});
@@ -171,7 +176,7 @@ var ChatPanel = ({
         });
       });
       const controller = new AbortController();
-      send(nextPrompt, messagesAndHistory, true, true, null, controller);
+      send(nextPrompt, messagesAndHistory, true, true, service, controller);
       setLastPrompt(nextPrompt);
       setLastController(controller);
       setNextPrompt("");
@@ -351,7 +356,7 @@ var ChatPanel = ({
       /* @__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, { useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, 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 = ({
+var ChatPanel = forwardRef(({
   project_id,
   initialPrompt = "",
   title = "Chat",
@@ -55,13 +55,18 @@ var ChatPanel = ({
   url = null,
   scrollToEnd = false,
   initialMessage = "",
-  prismStyle = theme === "light" ? materialLight : materialDark
-}) => {
+  prismStyle = theme === "light" ? materialLight : materialDark,
+  service = null
+}, ref) => {
   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({});
@@ -90,7 +95,7 @@ var ChatPanel = ({
         setIsLoading(true);
         if (lastController) stop(lastController);
         const controller = new AbortController();
-        send(initialPrompt, messages, true, true, null, controller);
+        send(initialPrompt, messages, true, true, service, controller);
         setLastPrompt(initialPrompt);
         setLastController(controller);
         setHistory({});
@@ -138,7 +143,7 @@ var ChatPanel = ({
         });
       });
       const controller = new AbortController();
-      send(nextPrompt, messagesAndHistory, true, true, null, controller);
+      send(nextPrompt, messagesAndHistory, true, true, service, controller);
       setLastPrompt(nextPrompt);
       setLastController(controller);
       setNextPrompt("");
@@ -318,7 +323,7 @@ var ChatPanel = ({
       /* @__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.13",
+  "version": "0.2.14",
   "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, { useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import "./ChatPanel.css";
 import remarkGfm from "remark-gfm";
@@ -26,13 +26,14 @@ export interface ChatPanelProps {
   url?: string | null;
   scrollToEnd?: boolean;
   prismStyle?: PrismStyle;
+  service?: string | null;
 }
 
 interface ExtraProps extends React.HTMLAttributes<HTMLElement> {
   inline?: boolean;
 }
 
-const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
+const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = forwardRef(({
   project_id,
   initialPrompt = "",
   title = "Chat",
@@ -50,13 +51,19 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   scrollToEnd = false,
   initialMessage = "",
   prismStyle = theme === "light" ? materialLight: materialDark,
-}) => {
+  service = null,
+}, ref) => {
   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 }>({});
@@ -95,7 +102,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         if (lastController) stop(lastController);
         const controller = new AbortController();
 
-        send(initialPrompt, messages, true, true, null, controller);
+        send(initialPrompt, messages, true, true, service, controller);
         setLastPrompt(initialPrompt);
         setLastController(controller);
         setHistory({});
@@ -156,7 +163,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
       });
 
       const controller = new AbortController();
-      send(nextPrompt, messagesAndHistory, true, true, null, controller);
+      send(nextPrompt, messagesAndHistory, true, true, service, controller);
 
       setLastPrompt(nextPrompt);
       setLastController(controller);
@@ -372,6 +379,6 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
       </div>
     </>
   );
-};
+});
 
 export default ChatPanel;