llmasaservice-ui 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +9 -3
  4. package/dist/index.mjs +9 -3
  5. package/package.json +1 -1
  6. package/src/ChatPanel.tsx +21 -10
  7. package/src/stories/ChatPanel.stories.ts +1 -0
package/dist/index.d.mts CHANGED
@@ -3,7 +3,8 @@ import React from 'react';
3
3
 
4
4
  interface ChatPanelProps {
5
5
  project_id: string;
6
- initialPrompt: string;
6
+ initialPrompt?: string;
7
+ initialMessage?: string;
7
8
  title?: string;
8
9
  placeholder?: string;
9
10
  hideInitialPrompt?: boolean;
package/dist/index.d.ts CHANGED
@@ -3,7 +3,8 @@ import React from 'react';
3
3
 
4
4
  interface ChatPanelProps {
5
5
  project_id: string;
6
- initialPrompt: string;
6
+ initialPrompt?: string;
7
+ initialMessage?: string;
7
8
  title?: string;
8
9
  placeholder?: string;
9
10
  hideInitialPrompt?: boolean;
package/dist/index.js CHANGED
@@ -57,7 +57,7 @@ var import_react = __toESM(require("react"));
57
57
  var import_react_markdown = __toESM(require("react-markdown"));
58
58
  var ChatPanel = ({
59
59
  project_id,
60
- initialPrompt,
60
+ initialPrompt = "",
61
61
  title = "Chat",
62
62
  placeholder = "Type a message",
63
63
  hideInitialPrompt = true,
@@ -70,7 +70,8 @@ var ChatPanel = ({
70
70
  width = "300px",
71
71
  height = "100vh",
72
72
  url = null,
73
- scrollToEnd = false
73
+ scrollToEnd = false,
74
+ initialMessage = ""
74
75
  }) => {
75
76
  const { send, response, idle, stop } = (0, import_llmasaservice_client.useLLM)({
76
77
  project_id,
@@ -147,6 +148,11 @@ var ChatPanel = ({
147
148
  messagesAndHistory.push({ role: "user", content: prompt });
148
149
  messagesAndHistory.push({ role: "assistant", content: response2 });
149
150
  });
151
+ setHistory((prevHistory) => {
152
+ return __spreadProps(__spreadValues({}, prevHistory), {
153
+ [nextPrompt != null ? nextPrompt : ""]: ""
154
+ });
155
+ });
150
156
  const controller = new AbortController();
151
157
  send(nextPrompt, messagesAndHistory, true, true, null, controller);
152
158
  setLastPrompt(nextPrompt);
@@ -168,7 +174,7 @@ var ChatPanel = ({
168
174
  className: "side-panel" + (theme === "light" ? "" : "-dark")
169
175
  },
170
176
  /* @__PURE__ */ import_react.default.createElement("div", { className: "title" }, title),
171
- /* @__PURE__ */ import_react.default.createElement("div", { className: "responseArea", ref: responseAreaRef }, isLoading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "loading-text" }, "loading...") : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ import_react.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "prompt" }, prompt), /* @__PURE__ */ import_react.default.createElement("div", { className: "response" }, /* @__PURE__ */ import_react.default.createElement(import_react_markdown.default, { className: markdownClass }, response2), /* @__PURE__ */ import_react.default.createElement("div", { className: "button-container" }, /* @__PURE__ */ import_react.default.createElement(
177
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "responseArea", ref: responseAreaRef }, isLoading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "loading-text" }, "loading...") : null, initialMessage && initialMessage !== "" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "history-entry" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "response" }, /* @__PURE__ */ import_react.default.createElement(import_react_markdown.default, { className: markdownClass }, initialMessage))) : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ import_react.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react.default.createElement("div", { className: "prompt" }, prompt), /* @__PURE__ */ import_react.default.createElement("div", { className: "response" }, /* @__PURE__ */ import_react.default.createElement(import_react_markdown.default, { className: markdownClass }, response2), /* @__PURE__ */ import_react.default.createElement("div", { className: "button-container" }, /* @__PURE__ */ import_react.default.createElement(
172
178
  "button",
173
179
  {
174
180
  className: "copy-button",
package/dist/index.mjs CHANGED
@@ -24,7 +24,7 @@ import React, { useEffect, useRef, useState } from "react";
24
24
  import ReactMarkdown from "react-markdown";
25
25
  var ChatPanel = ({
26
26
  project_id,
27
- initialPrompt,
27
+ initialPrompt = "",
28
28
  title = "Chat",
29
29
  placeholder = "Type a message",
30
30
  hideInitialPrompt = true,
@@ -37,7 +37,8 @@ var ChatPanel = ({
37
37
  width = "300px",
38
38
  height = "100vh",
39
39
  url = null,
40
- scrollToEnd = false
40
+ scrollToEnd = false,
41
+ initialMessage = ""
41
42
  }) => {
42
43
  const { send, response, idle, stop } = useLLM({
43
44
  project_id,
@@ -114,6 +115,11 @@ var ChatPanel = ({
114
115
  messagesAndHistory.push({ role: "user", content: prompt });
115
116
  messagesAndHistory.push({ role: "assistant", content: response2 });
116
117
  });
118
+ setHistory((prevHistory) => {
119
+ return __spreadProps(__spreadValues({}, prevHistory), {
120
+ [nextPrompt != null ? nextPrompt : ""]: ""
121
+ });
122
+ });
117
123
  const controller = new AbortController();
118
124
  send(nextPrompt, messagesAndHistory, true, true, null, controller);
119
125
  setLastPrompt(nextPrompt);
@@ -135,7 +141,7 @@ var ChatPanel = ({
135
141
  className: "side-panel" + (theme === "light" ? "" : "-dark")
136
142
  },
137
143
  /* @__PURE__ */ React.createElement("div", { className: "title" }, title),
138
- /* @__PURE__ */ React.createElement("div", { className: "responseArea", ref: responseAreaRef }, isLoading ? /* @__PURE__ */ React.createElement("div", { className: "loading-text" }, "loading...") : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ React.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ React.createElement("div", { className: "prompt" }, prompt), /* @__PURE__ */ React.createElement("div", { className: "response" }, /* @__PURE__ */ React.createElement(ReactMarkdown, { className: markdownClass }, response2), /* @__PURE__ */ React.createElement("div", { className: "button-container" }, /* @__PURE__ */ React.createElement(
144
+ /* @__PURE__ */ React.createElement("div", { className: "responseArea", ref: responseAreaRef }, isLoading ? /* @__PURE__ */ React.createElement("div", { className: "loading-text" }, "loading...") : null, initialMessage && initialMessage !== "" ? /* @__PURE__ */ React.createElement("div", { className: "history-entry" }, /* @__PURE__ */ React.createElement("div", { className: "response" }, /* @__PURE__ */ React.createElement(ReactMarkdown, { className: markdownClass }, initialMessage))) : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ React.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ React.createElement("div", { className: "prompt" }, prompt), /* @__PURE__ */ React.createElement("div", { className: "response" }, /* @__PURE__ */ React.createElement(ReactMarkdown, { className: markdownClass }, response2), /* @__PURE__ */ React.createElement("div", { className: "button-container" }, /* @__PURE__ */ React.createElement(
139
145
  "button",
140
146
  {
141
147
  className: "copy-button",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "description": "Prebuilt UI components for LLMAsAService.io",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/src/ChatPanel.tsx CHANGED
@@ -5,7 +5,8 @@ import "./ChatPanel.css";
5
5
 
6
6
  export interface ChatPanelProps {
7
7
  project_id: string;
8
- initialPrompt: string;
8
+ initialPrompt?: string;
9
+ initialMessage?: string;
9
10
  title?: string;
10
11
  placeholder?: string;
11
12
  hideInitialPrompt?: boolean;
@@ -23,7 +24,7 @@ export interface ChatPanelProps {
23
24
 
24
25
  const ChatPanel: React.FC<ChatPanelProps> = ({
25
26
  project_id,
26
- initialPrompt,
27
+ initialPrompt = "",
27
28
  title = "Chat",
28
29
  placeholder = "Type a message",
29
30
  hideInitialPrompt = true,
@@ -37,6 +38,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
37
38
  height = "100vh",
38
39
  url = null,
39
40
  scrollToEnd = false,
41
+ initialMessage = "",
40
42
  }) => {
41
43
  const { send, response, idle, stop } = useLLM({
42
44
  project_id: project_id,
@@ -90,14 +92,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
90
92
  }
91
93
  }, [initialPrompt]);
92
94
 
93
- /*
94
- useEffect(() => {
95
- if (scrollToEnd) bottomRef.current?.scrollIntoView({ behavior: "smooth" });
96
- if (responseAreaRef.current) {
97
- setHasScroll(hasVerticalScrollbar(responseAreaRef.current));
98
- }
99
- }, [history]);
100
- */
101
95
  useEffect(() => {
102
96
  if (scrollToEnd) {
103
97
  bottomRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -142,6 +136,14 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
142
136
  messagesAndHistory.push({ role: "assistant", content: response });
143
137
  });
144
138
 
139
+ // set the history prompt with the about to be sent prompt
140
+ setHistory((prevHistory) => {
141
+ return {
142
+ ...prevHistory,
143
+ [nextPrompt ?? ""]: "",
144
+ };
145
+ });
146
+
145
147
  const controller = new AbortController();
146
148
  send(nextPrompt, messagesAndHistory, true, true, null, controller);
147
149
 
@@ -168,6 +170,15 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
168
170
  <div className="title">{title}</div>
169
171
  <div className="responseArea" ref={responseAreaRef}>
170
172
  {isLoading ? <div className="loading-text">loading...</div> : null}
173
+ {initialMessage && initialMessage !== "" ? (
174
+ <div className="history-entry">
175
+ <div className="response">
176
+ <ReactMarkdown className={markdownClass}>
177
+ {initialMessage}
178
+ </ReactMarkdown>
179
+ </div>
180
+ </div>
181
+ ) : null}
171
182
  {Object.entries(history).map(([prompt, response], index) => (
172
183
  <div className="history-entry" key={index}>
173
184
  {hideInitialPrompt && index === 0 ? null : (
package/src/stories/ChatPanel.stories.ts CHANGED
@@ -25,6 +25,7 @@ export const ChatPanelStory: Story = {
25
25
  messages: [],
26
26
  width:"300px",
27
27
  height:"100vh",
28
+ initialMessage: "This is a initial message."
28
29
  },
29
30
  };
30
31