llmasaservice-ui 0.2.1 → 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 +4 -3
  4. package/dist/index.mjs +4 -3
  5. package/package.json +1 -1
  6. package/src/ChatPanel.tsx +13 -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,
@@ -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,
@@ -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.1",
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,
@@ -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" });
@@ -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