@smarter.sh/ui-chat 0.7.1 → 0.8.0
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.
- package/README.md +47 -21
- package/dist/smarter-chat-library.es.js +1839 -1516
- package/dist/smarter-chat-library.es.js.map +1 -1
- package/dist/smarter-chat-library.umd.js +33 -33
- package/dist/smarter-chat-library.umd.js.map +1 -1
- package/dist/types/src/components/DocsDialog/Component.d.ts +8 -0
- package/dist/types/src/components/DocsDialog/data.d.ts +18 -0
- package/dist/types/src/components/DocsDialog/index.d.ts +2 -0
- package/dist/types/src/components/SmarterChat/Component.d.ts +6 -2
- package/dist/types/src/components/SmarterChat/icons.d.ts +2 -0
- package/dist/types/src/contract.gen.d.ts +56 -0
- package/dist/types/src/lib/styles.d.ts +40 -0
- package/dist/ui-chat.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,10 +3,12 @@
|
|
|
3
3
|
> A drop-in React chat component for [Smarter](https://smarter.sh) LLMClients: streaming tool-call progress, GitHub
|
|
4
4
|
> flavored markdown, syntax-highlighted code, LaTeX math and Mermaid diagrams, out of the box.
|
|
5
5
|
|
|
6
|
+
[](https://github.com/smarter-sh/smarter-chat)
|
|
6
7
|
[](https://www.npmjs.com/package/@smarter.sh/ui-chat)
|
|
7
8
|
[](https://www.npmjs.com/package/@smarter.sh/ui-chat)
|
|
8
9
|
[](https://github.com/smarter-sh/smarter-chat/actions/workflows/test.yml)
|
|
9
|
-
[](https://docs.smarter.sh/smarter-framework/smarter-chat.html)
|
|
11
|
+
[](https://app.codecov.io/gh/smarter-sh/smarter-chat)
|
|
10
12
|
[](#typescript)
|
|
11
13
|
[](https://react.dev)
|
|
12
14
|
[](https://github.com/smarter-sh/smarter-chat/blob/main/LICENSE)
|
|
@@ -108,9 +110,10 @@ The component talks directly to the Smarter platform from your visitors' browser
|
|
|
108
110
|
```yaml
|
|
109
111
|
spec:
|
|
110
112
|
config:
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
113
|
+
prompt:
|
|
114
|
+
allowedOrigins:
|
|
115
|
+
- https://www.example.com
|
|
116
|
+
- http://localhost:5173
|
|
114
117
|
```
|
|
115
118
|
|
|
116
119
|
3. **The browser can authenticate, if the LLMClient requires it.** A deployed LLMClient without api keys is public:
|
|
@@ -128,23 +131,23 @@ details, including troubleshooting.
|
|
|
128
131
|
|
|
129
132
|
Only `apiUrl` is required.
|
|
130
133
|
|
|
131
|
-
| Prop | Type | Default | Description
|
|
132
|
-
| ------------------------- | ---------------- | --------------- |
|
|
133
|
-
| `apiUrl` | `string` | (required) | The LLMClient's api url. The chat appends `config/` to it for its configuration.
|
|
134
|
-
| `apiKey` | `string \| null` | `null` | A Smarter api key, sent as `Authorization: Token <apiKey>`, for LLMClients that require authentication.
|
|
135
|
-
| `showConsole` | `boolean` | `true` | Show the developer Console beside the chat. It needs a wide container; set it to `false` for end-user pages.
|
|
136
|
-
| `toggleMetadata` | `boolean` | `false` | Show the Sandbox mode / Production mode button, which shows and hides the backend's own messages (system prompt, tool results, Smarter's), and start in sandbox mode. Without it, the chat is in production mode. |
|
|
137
|
-
| `streamProgress` | `boolean` | `true` | Display a running prompt's progress, which the prompt api streams as Server-Sent Events.
|
|
138
|
-
| `debugMode` | `boolean` | `false` | Log to the browser console.
|
|
139
|
-
| `cookieDomain` | `string` | `""` | The domain whose cookies the chat reads. Empty means the page's own domain.
|
|
140
|
-
| `sessionCookieName` | `string` | `"session_key"` | The cookie in which the chat saves its session's key, for the page's path.
|
|
141
|
-
| `sessionCookieExpiration` | `number` | one day | The session cookie's lifetime, in milliseconds.
|
|
142
|
-
| `csrfCookieName` | `string` | `"csrftoken"` | The name of Django's CSRF cookie, whose value is sent as the `X-CSRFToken` header.
|
|
143
|
-
| `csrftoken` | `string \| null` | `null` | The CSRF token, when the page cannot read the CSRF cookie.
|
|
144
|
-
| `debugCookieName` | `string` | `"debug"` | The cookie in which the chat saves the LLMClient's debug mode.
|
|
145
|
-
| `debugCookieExpiration` | `number` | one day | The debug cookie's lifetime, in milliseconds.
|
|
146
|
-
| `smarterRequestId` | `string` | `""` | A unique id of the page request, sent as the `X-Smarter-RequestId` header, for tracing.
|
|
147
|
-
| `logStreamUrl` | `string \| null` | `null` | The url of a server log stream (Server-Sent Events), for the Console's Server Logs tab.
|
|
134
|
+
| Prop | Type | Default | Description |
|
|
135
|
+
| ------------------------- | ---------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
136
|
+
| `apiUrl` | `string` | (required) | The LLMClient's api url. The chat appends `config/` to it for its configuration. |
|
|
137
|
+
| `apiKey` | `string \| null` | `null` | A Smarter api key, sent as `Authorization: Token <apiKey>`, for LLMClients that require authentication. |
|
|
138
|
+
| `showConsole` | `boolean` | `true` | Show the developer Console beside the chat. It needs a wide container; set it to `false` for end-user pages. |
|
|
139
|
+
| `toggleMetadata` | `boolean` | `false` | Show the Sandbox mode / Production mode button, which shows and hides the backend's own messages (system prompt, tool results, Smarter's), and start in sandbox mode. Sandbox mode also shows the Docs button, a dialog of technical references. Without it, the chat is in production mode. |
|
|
140
|
+
| `streamProgress` | `boolean` | `true` | Display a running prompt's progress, which the prompt api streams as Server-Sent Events. |
|
|
141
|
+
| `debugMode` | `boolean` | `false` | Log to the browser console. |
|
|
142
|
+
| `cookieDomain` | `string` | `""` | The domain whose cookies the chat reads. Empty means the page's own domain. |
|
|
143
|
+
| `sessionCookieName` | `string` | `"session_key"` | The cookie in which the chat saves its session's key, for the page's path. |
|
|
144
|
+
| `sessionCookieExpiration` | `number` | one day | The session cookie's lifetime, in milliseconds. |
|
|
145
|
+
| `csrfCookieName` | `string` | `"csrftoken"` | The name of Django's CSRF cookie, whose value is sent as the `X-CSRFToken` header. |
|
|
146
|
+
| `csrftoken` | `string \| null` | `null` | The CSRF token, when the page cannot read the CSRF cookie. |
|
|
147
|
+
| `debugCookieName` | `string` | `"debug"` | The cookie in which the chat saves the LLMClient's debug mode. |
|
|
148
|
+
| `debugCookieExpiration` | `number` | one day | The debug cookie's lifetime, in milliseconds. |
|
|
149
|
+
| `smarterRequestId` | `string` | `""` | A unique id of the page request, sent as the `X-Smarter-RequestId` header, for tracing. |
|
|
150
|
+
| `logStreamUrl` | `string \| null` | `null` | The url of a server log stream (Server-Sent Events), for the Console's Server Logs tab. |
|
|
148
151
|
|
|
149
152
|
## Examples
|
|
150
153
|
|
|
@@ -219,6 +222,29 @@ import "katex/dist/katex.min.css";
|
|
|
219
222
|
- **`katex/dist/katex.min.css`** is the stylesheet of math in responses. It's left out of `ui-chat.css` so that pages
|
|
220
223
|
without math don't pay for KaTeX's fonts. Without it, math is displayed twice: as text, and as unstyled MathML.
|
|
221
224
|
|
|
225
|
+
### The LLMClient's styles
|
|
226
|
+
|
|
227
|
+
The chat takes its look from the LLMClient's manifest, so most pages need no css of their own. Its
|
|
228
|
+
`spec.config.styles` sets the logo in the header, avatars beside the messages, a background image, a Google font, and
|
|
229
|
+
the colors of each part of the chat, which are chatscope's components:
|
|
230
|
+
|
|
231
|
+
```yaml
|
|
232
|
+
spec:
|
|
233
|
+
config:
|
|
234
|
+
styles:
|
|
235
|
+
appLogoUrl: https://cdn.example.com/logo.png
|
|
236
|
+
googleFont: Nunito
|
|
237
|
+
conversationHeader: { backgroundColor: "#14213d", color: "#ffffff" }
|
|
238
|
+
outgoingMessage: { backgroundColor: "#fca311", color: "#14213d" }
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
The chat sets them as css custom properties on its root `.SmarterChat` element, e.g. `--smarter-chat-header-bg` and
|
|
242
|
+
`--smarter-chat-outgoing-bg`, whose fallbacks are chatscope's own colors. Your stylesheet can set the same properties.
|
|
243
|
+
See [Styling Your LLMClient's Chat](https://docs.smarter.sh/en/latest/smarter-resources/llmclient/styles.html) for every
|
|
244
|
+
setting.
|
|
245
|
+
|
|
246
|
+
### Your own css
|
|
247
|
+
|
|
222
248
|
The component's elements have stable class names, prefixed `smarter-chat-` (for example `.smarter-chat-message-list`,
|
|
223
249
|
`.smarter-chat-code`, `.smarter-chat-image`), under a root `.SmarterChat` element, so you can override their styles
|
|
224
250
|
from your own stylesheet.
|