llmasaservice-ui 0.1.2 → 0.1.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 (8) hide show
  1. package/dist/index.css +8 -0
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +9 -5
  5. package/dist/index.mjs +9 -5
  6. package/package.json +1 -1
  7. package/src/ChatPanel.css +10 -0
  8. package/src/ChatPanel.tsx +9 -2
package/dist/index.css CHANGED
@@ -83,6 +83,10 @@
83
83
  width: 30px;
84
84
  height: 30px;
85
85
  }
86
+ .side-panel .icon-svg {
87
+ width: 18px;
88
+ height: 18px;
89
+ }
86
90
  .side-panel .copy-button:hover {
87
91
  border: 1px solid #007bff;
88
92
  border-radius: 3px;
@@ -184,6 +188,10 @@
184
188
  width: 30px;
185
189
  height: 30px;
186
190
  }
191
+ .side-panel-dark .icon-svg {
192
+ width: 18px;
193
+ height: 18px;
194
+ }
187
195
  .side-panel-dark .copy-button:hover {
188
196
  border: 1px solid #aaa;
189
197
  border-radius: 3px;
package/dist/index.d.mts CHANGED
@@ -15,6 +15,7 @@ interface ChatPanelProps {
15
15
  thumbsUpClick?: () => void;
16
16
  thumbsDownClick?: () => void;
17
17
  theme?: "light" | "dark";
18
+ markdownClass?: string;
18
19
  }
19
20
  declare const ChatPanel: React.FC<ChatPanelProps>;
20
21
 
package/dist/index.d.ts CHANGED
@@ -15,6 +15,7 @@ interface ChatPanelProps {
15
15
  thumbsUpClick?: () => void;
16
16
  thumbsDownClick?: () => void;
17
17
  theme?: "light" | "dark";
18
+ markdownClass?: string;
18
19
  }
19
20
  declare const ChatPanel: React.FC<ChatPanelProps>;
20
21
 
package/dist/index.js CHANGED
@@ -65,7 +65,8 @@ var ChatPanel = ({
65
65
  messages = [],
66
66
  thumbsUpClick,
67
67
  thumbsDownClick,
68
- theme = "light"
68
+ theme = "light",
69
+ markdownClass = null
69
70
  }) => {
70
71
  const { send, response, idle, stop } = (0, import_llmasaservice_client.useLLM)({
71
72
  project_id,
@@ -131,7 +132,7 @@ var ChatPanel = ({
131
132
  function copyToClipboard(text) {
132
133
  navigator.clipboard.writeText(text);
133
134
  }
134
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "side-panel" + (theme === "light" ? "" : "-dark") }, /* @__PURE__ */ import_react.default.createElement("div", { className: "title" }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: "responseArea" }, 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, null, response2), /* @__PURE__ */ import_react.default.createElement(
135
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "side-panel" + (theme === "light" ? "" : "-dark") }, /* @__PURE__ */ import_react.default.createElement("div", { className: "title" }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: "responseArea" }, 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(
135
136
  "button",
136
137
  {
137
138
  className: "copy-button",
@@ -142,7 +143,8 @@ var ChatPanel = ({
142
143
  {
143
144
  xmlns: "http://www.w3.org/2000/svg",
144
145
  viewBox: "0 0 320 320",
145
- fill: "currentColor"
146
+ fill: "currentColor",
147
+ className: "icon-svg"
146
148
  },
147
149
  /* @__PURE__ */ import_react.default.createElement(
148
150
  "path",
@@ -164,7 +166,8 @@ var ChatPanel = ({
164
166
  {
165
167
  xmlns: "http://www.w3.org/2000/svg",
166
168
  viewBox: "0 0 20 20",
167
- fill: "currentColor"
169
+ fill: "currentColor",
170
+ className: "icon-svg"
168
171
  },
169
172
  /* @__PURE__ */ import_react.default.createElement("path", { d: "M20.22 9.55C19.79 9.04 19.17 8.75 18.5 8.75H14.47V6C14.47 4.48 13.24 3.25 11.64 3.25C10.94 3.25 10.31 3.67 10.03 4.32L7.49 10.25H5.62C4.31 10.25 3.25 11.31 3.25 12.62V18.39C3.25 19.69 4.32 20.75 5.62 20.75H17.18C18.27 20.75 19.2 19.97 19.39 18.89L20.71 11.39C20.82 10.73 20.64 10.06 20.21 9.55H20.22ZM5.62 19.25C5.14 19.25 4.75 18.86 4.75 18.39V12.62C4.75 12.14 5.14 11.75 5.62 11.75H7.23V19.25H5.62ZM17.92 18.63C17.86 18.99 17.55 19.25 17.18 19.25H8.74V11.15L11.41 4.9C11.45 4.81 11.54 4.74 11.73 4.74C12.42 4.74 12.97 5.3 12.97 5.99V10.24H18.5C18.73 10.24 18.93 10.33 19.07 10.5C19.21 10.67 19.27 10.89 19.23 11.12L17.91 18.62L17.92 18.63Z" })
170
173
  )) : null, thumbsDownClick ? /* @__PURE__ */ import_react.default.createElement("button", { className: "thumbs-button", onClick: thumbsDownClick }, /* @__PURE__ */ import_react.default.createElement(
@@ -172,7 +175,8 @@ var ChatPanel = ({
172
175
  {
173
176
  xmlns: "http://www.w3.org/2000/svg",
174
177
  viewBox: "0 0 20 20",
175
- fill: "currentColor"
178
+ fill: "currentColor",
179
+ className: "icon-svg"
176
180
  },
177
181
  /* @__PURE__ */ import_react.default.createElement("path", { d: "M18.38 3.25H6.81C5.72 3.25 4.79 4.03 4.6 5.11L3.29 12.61C3.18 13.27 3.36 13.94 3.78 14.45C4.21 14.96 4.83 15.25 5.5 15.25H9.53V18C9.53 19.52 10.76 20.75 12.36 20.75C13.06 20.75 13.69 20.33 13.97 19.68L16.51 13.75H18.39C19.7 13.75 20.76 12.69 20.76 11.38V5.61C20.76 4.31 19.7 3.25 18.39 3.25H18.38ZM15.26 12.85L12.59 19.1C12.55 19.19 12.46 19.26 12.27 19.26C11.58 19.26 11.03 18.7 11.03 18.01V13.76H5.5C5.27 13.76 5.07 13.67 4.93 13.5C4.78 13.33 4.73 13.11 4.77 12.88L6.08 5.38C6.14 5.02 6.45001 4.76 6.82 4.76H15.26V12.85ZM19.25 11.38C19.25 11.86 18.86 12.25 18.38 12.25H16.77V4.75H18.38C18.86 4.75 19.25 5.14 19.25 5.61V11.38Z" })
178
182
  )) : null))), /* @__PURE__ */ import_react.default.createElement("div", { ref: bottomRef })), /* @__PURE__ */ import_react.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react.default.createElement(
package/dist/index.mjs CHANGED
@@ -32,7 +32,8 @@ var ChatPanel = ({
32
32
  messages = [],
33
33
  thumbsUpClick,
34
34
  thumbsDownClick,
35
- theme = "light"
35
+ theme = "light",
36
+ markdownClass = null
36
37
  }) => {
37
38
  const { send, response, idle, stop } = useLLM({
38
39
  project_id,
@@ -98,7 +99,7 @@ var ChatPanel = ({
98
99
  function copyToClipboard(text) {
99
100
  navigator.clipboard.writeText(text);
100
101
  }
101
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "side-panel" + (theme === "light" ? "" : "-dark") }, /* @__PURE__ */ React.createElement("div", { className: "title" }, title), /* @__PURE__ */ React.createElement("div", { className: "responseArea" }, 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, null, response2), /* @__PURE__ */ React.createElement(
102
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "side-panel" + (theme === "light" ? "" : "-dark") }, /* @__PURE__ */ React.createElement("div", { className: "title" }, title), /* @__PURE__ */ React.createElement("div", { className: "responseArea" }, 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(
102
103
  "button",
103
104
  {
104
105
  className: "copy-button",
@@ -109,7 +110,8 @@ var ChatPanel = ({
109
110
  {
110
111
  xmlns: "http://www.w3.org/2000/svg",
111
112
  viewBox: "0 0 320 320",
112
- fill: "currentColor"
113
+ fill: "currentColor",
114
+ className: "icon-svg"
113
115
  },
114
116
  /* @__PURE__ */ React.createElement(
115
117
  "path",
@@ -131,7 +133,8 @@ var ChatPanel = ({
131
133
  {
132
134
  xmlns: "http://www.w3.org/2000/svg",
133
135
  viewBox: "0 0 20 20",
134
- fill: "currentColor"
136
+ fill: "currentColor",
137
+ className: "icon-svg"
135
138
  },
136
139
  /* @__PURE__ */ React.createElement("path", { d: "M20.22 9.55C19.79 9.04 19.17 8.75 18.5 8.75H14.47V6C14.47 4.48 13.24 3.25 11.64 3.25C10.94 3.25 10.31 3.67 10.03 4.32L7.49 10.25H5.62C4.31 10.25 3.25 11.31 3.25 12.62V18.39C3.25 19.69 4.32 20.75 5.62 20.75H17.18C18.27 20.75 19.2 19.97 19.39 18.89L20.71 11.39C20.82 10.73 20.64 10.06 20.21 9.55H20.22ZM5.62 19.25C5.14 19.25 4.75 18.86 4.75 18.39V12.62C4.75 12.14 5.14 11.75 5.62 11.75H7.23V19.25H5.62ZM17.92 18.63C17.86 18.99 17.55 19.25 17.18 19.25H8.74V11.15L11.41 4.9C11.45 4.81 11.54 4.74 11.73 4.74C12.42 4.74 12.97 5.3 12.97 5.99V10.24H18.5C18.73 10.24 18.93 10.33 19.07 10.5C19.21 10.67 19.27 10.89 19.23 11.12L17.91 18.62L17.92 18.63Z" })
137
140
  )) : null, thumbsDownClick ? /* @__PURE__ */ React.createElement("button", { className: "thumbs-button", onClick: thumbsDownClick }, /* @__PURE__ */ React.createElement(
@@ -139,7 +142,8 @@ var ChatPanel = ({
139
142
  {
140
143
  xmlns: "http://www.w3.org/2000/svg",
141
144
  viewBox: "0 0 20 20",
142
- fill: "currentColor"
145
+ fill: "currentColor",
146
+ className: "icon-svg"
143
147
  },
144
148
  /* @__PURE__ */ React.createElement("path", { d: "M18.38 3.25H6.81C5.72 3.25 4.79 4.03 4.6 5.11L3.29 12.61C3.18 13.27 3.36 13.94 3.78 14.45C4.21 14.96 4.83 15.25 5.5 15.25H9.53V18C9.53 19.52 10.76 20.75 12.36 20.75C13.06 20.75 13.69 20.33 13.97 19.68L16.51 13.75H18.39C19.7 13.75 20.76 12.69 20.76 11.38V5.61C20.76 4.31 19.7 3.25 18.39 3.25H18.38ZM15.26 12.85L12.59 19.1C12.55 19.19 12.46 19.26 12.27 19.26C11.58 19.26 11.03 18.7 11.03 18.01V13.76H5.5C5.27 13.76 5.07 13.67 4.93 13.5C4.78 13.33 4.73 13.11 4.77 12.88L6.08 5.38C6.14 5.02 6.45001 4.76 6.82 4.76H15.26V12.85ZM19.25 11.38C19.25 11.86 18.86 12.25 18.38 12.25H16.77V4.75H18.38C18.86 4.75 19.25 5.14 19.25 5.61V11.38Z" })
145
149
  )) : null))), /* @__PURE__ */ React.createElement("div", { ref: bottomRef })), /* @__PURE__ */ React.createElement("div", { className: "input-container" }, /* @__PURE__ */ React.createElement(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.1.2",
3
+ "version": "0.1.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.css CHANGED
@@ -90,6 +90,11 @@
90
90
  height: 30px;
91
91
  }
92
92
 
93
+ .side-panel .icon-svg {
94
+ width: 18px;
95
+ height: 18px;
96
+ }
97
+
93
98
  .side-panel .copy-button:hover {
94
99
  border: 1px solid #007bff;
95
100
  border-radius: 3px;
@@ -202,6 +207,11 @@
202
207
  height: 30px;
203
208
  }
204
209
 
210
+ .side-panel-dark .icon-svg {
211
+ width: 18px;
212
+ height: 18px;
213
+ }
214
+
205
215
  .side-panel-dark .copy-button:hover {
206
216
  border: 1px solid #aaa;
207
217
  border-radius: 3px;
package/src/ChatPanel.tsx CHANGED
@@ -14,6 +14,7 @@ export interface ChatPanelProps {
14
14
  thumbsUpClick?: () => void;
15
15
  thumbsDownClick?: () => void;
16
16
  theme?: "light" | "dark";
17
+ markdownClass?: string;
17
18
  }
18
19
 
19
20
  const ChatPanel: React.FC<ChatPanelProps> = ({
@@ -26,7 +27,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
26
27
  messages = [],
27
28
  thumbsUpClick,
28
29
  thumbsDownClick,
29
- theme = "light"
30
+ theme = "light",
31
+ markdownClass = null,
30
32
  }) => {
31
33
  const { send, response, idle, stop } = useLLM({
32
34
  project_id: project_id,
@@ -124,7 +126,9 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
124
126
  <div className="prompt">{prompt}</div>
125
127
  )}
126
128
  <div className="response">
127
- <ReactMarkdown>{response}</ReactMarkdown>
129
+ <ReactMarkdown className={markdownClass}>
130
+ {response}
131
+ </ReactMarkdown>
128
132
  <button
129
133
  className="copy-button"
130
134
  onClick={() => copyToClipboard(response)}
@@ -133,6 +137,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
133
137
  xmlns="http://www.w3.org/2000/svg"
134
138
  viewBox="0 0 320 320"
135
139
  fill="currentColor"
140
+ className="icon-svg"
136
141
  >
137
142
  <path
138
143
  d="M35,270h45v45c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-45V15
@@ -154,6 +159,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
154
159
  xmlns="http://www.w3.org/2000/svg"
155
160
  viewBox="0 0 20 20"
156
161
  fill="currentColor"
162
+ className="icon-svg"
157
163
  >
158
164
  <path d="M20.22 9.55C19.79 9.04 19.17 8.75 18.5 8.75H14.47V6C14.47 4.48 13.24 3.25 11.64 3.25C10.94 3.25 10.31 3.67 10.03 4.32L7.49 10.25H5.62C4.31 10.25 3.25 11.31 3.25 12.62V18.39C3.25 19.69 4.32 20.75 5.62 20.75H17.18C18.27 20.75 19.2 19.97 19.39 18.89L20.71 11.39C20.82 10.73 20.64 10.06 20.21 9.55H20.22ZM5.62 19.25C5.14 19.25 4.75 18.86 4.75 18.39V12.62C4.75 12.14 5.14 11.75 5.62 11.75H7.23V19.25H5.62ZM17.92 18.63C17.86 18.99 17.55 19.25 17.18 19.25H8.74V11.15L11.41 4.9C11.45 4.81 11.54 4.74 11.73 4.74C12.42 4.74 12.97 5.3 12.97 5.99V10.24H18.5C18.73 10.24 18.93 10.33 19.07 10.5C19.21 10.67 19.27 10.89 19.23 11.12L17.91 18.62L17.92 18.63Z" />
159
165
  </svg>
@@ -166,6 +172,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
166
172
  xmlns="http://www.w3.org/2000/svg"
167
173
  viewBox="0 0 20 20"
168
174
  fill="currentColor"
175
+ className="icon-svg"
169
176
  >
170
177
  <path d="M18.38 3.25H6.81C5.72 3.25 4.79 4.03 4.6 5.11L3.29 12.61C3.18 13.27 3.36 13.94 3.78 14.45C4.21 14.96 4.83 15.25 5.5 15.25H9.53V18C9.53 19.52 10.76 20.75 12.36 20.75C13.06 20.75 13.69 20.33 13.97 19.68L16.51 13.75H18.39C19.7 13.75 20.76 12.69 20.76 11.38V5.61C20.76 4.31 19.7 3.25 18.39 3.25H18.38ZM15.26 12.85L12.59 19.1C12.55 19.19 12.46 19.26 12.27 19.26C11.58 19.26 11.03 18.7 11.03 18.01V13.76H5.5C5.27 13.76 5.07 13.67 4.93 13.5C4.78 13.33 4.73 13.11 4.77 12.88L6.08 5.38C6.14 5.02 6.45001 4.76 6.82 4.76H15.26V12.85ZM19.25 11.38C19.25 11.86 18.86 12.25 18.38 12.25H16.77V4.75H18.38C18.86 4.75 19.25 5.14 19.25 5.61V11.38Z" />
171
178
  </svg>