llmasaservice-ui 0.2.0 → 0.2.2

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 +6 -5
  4. package/dist/index.mjs +6 -5
  5. package/package.json +1 -1
  6. package/src/ChatPanel.tsx +15 -12
  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,
@@ -105,7 +106,7 @@ var ChatPanel = ({
105
106
  setIsLoading(true);
106
107
  if (lastController) stop(lastController);
107
108
  const controller = new AbortController();
108
- send(initialPrompt, messages, true, true, controller);
109
+ send(initialPrompt, messages, true, true, null, controller);
109
110
  setLastPrompt(initialPrompt);
110
111
  setLastController(controller);
111
112
  setHistory({});
@@ -148,7 +149,7 @@ var ChatPanel = ({
148
149
  messagesAndHistory.push({ role: "assistant", content: response2 });
149
150
  });
150
151
  const controller = new AbortController();
151
- send(nextPrompt, messagesAndHistory, true, true, controller);
152
+ send(nextPrompt, messagesAndHistory, true, true, null, controller);
152
153
  setLastPrompt(nextPrompt);
153
154
  setLastController(controller);
154
155
  setNextPrompt("");
@@ -168,7 +169,7 @@ var ChatPanel = ({
168
169
  className: "side-panel" + (theme === "light" ? "" : "-dark")
169
170
  },
170
171
  /* @__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(
172
+ /* @__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
173
  "button",
173
174
  {
174
175
  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,
@@ -72,7 +73,7 @@ var ChatPanel = ({
72
73
  setIsLoading(true);
73
74
  if (lastController) stop(lastController);
74
75
  const controller = new AbortController();
75
- send(initialPrompt, messages, true, true, controller);
76
+ send(initialPrompt, messages, true, true, null, controller);
76
77
  setLastPrompt(initialPrompt);
77
78
  setLastController(controller);
78
79
  setHistory({});
@@ -115,7 +116,7 @@ var ChatPanel = ({
115
116
  messagesAndHistory.push({ role: "assistant", content: response2 });
116
117
  });
117
118
  const controller = new AbortController();
118
- send(nextPrompt, messagesAndHistory, true, true, controller);
119
+ send(nextPrompt, messagesAndHistory, true, true, null, controller);
119
120
  setLastPrompt(nextPrompt);
120
121
  setLastController(controller);
121
122
  setNextPrompt("");
@@ -135,7 +136,7 @@ var ChatPanel = ({
135
136
  className: "side-panel" + (theme === "light" ? "" : "-dark")
136
137
  },
137
138
  /* @__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(
139
+ /* @__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
140
  "button",
140
141
  {
141
142
  className: "copy-button",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
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,
@@ -82,7 +84,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
82
84
  if (lastController) stop(lastController);
83
85
  const controller = new AbortController();
84
86
 
85
- send(initialPrompt, messages, true, true, controller);
87
+ send(initialPrompt, messages, true, true, null, controller);
86
88
  setLastPrompt(initialPrompt);
87
89
  setLastController(controller);
88
90
  setHistory({});
@@ -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" });
@@ -143,7 +137,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
143
137
  });
144
138
 
145
139
  const controller = new AbortController();
146
- send(nextPrompt, messagesAndHistory, true, true, controller);
140
+ send(nextPrompt, messagesAndHistory, true, true, null, controller);
147
141
 
148
142
  setLastPrompt(nextPrompt);
149
143
  setLastController(controller);
@@ -168,6 +162,15 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
168
162
  <div className="title">{title}</div>
169
163
  <div className="responseArea" ref={responseAreaRef}>
170
164
  {isLoading ? <div className="loading-text">loading...</div> : null}
165
+ {initialMessage && initialMessage !== "" ? (
166
+ <div className="history-entry">
167
+ <div className="response">
168
+ <ReactMarkdown className={markdownClass}>
169
+ {initialMessage}
170
+ </ReactMarkdown>
171
+ </div>
172
+ </div>
173
+ ) : null}
171
174
  {Object.entries(history).map(([prompt, response], index) => (
172
175
  <div className="history-entry" key={index}>
173
176
  {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