@smarter.sh/ui-chat 0.10.0 → 0.16.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.
- package/README.md +80 -61
- package/dist/embed.js +31 -41
- package/dist/embed.js.map +1 -1
- package/dist/smarter-chat-library.es.js +3902 -9458
- package/dist/smarter-chat-library.es.js.map +1 -1
- package/dist/smarter-chat-library.umd.js +51 -61
- package/dist/smarter-chat-library.umd.js.map +1 -1
- package/dist/types/src/catalogs.gen.d.ts +12 -0
- package/dist/types/src/components/AppTitle/Component.d.ts +0 -4
- package/dist/types/src/components/ErrorBoundary/Component.d.ts +1 -1
- package/dist/types/src/components/SmarterChat/Component.d.ts +17 -12
- package/dist/types/src/components/SmarterChat/HeaderButton.d.ts +9 -0
- package/dist/types/src/components/SmarterChat/icons.d.ts +0 -9
- package/dist/types/src/components/SmarterChat/index.d.ts +3 -0
- package/dist/types/src/contract.gen.d.ts +14 -3
- package/dist/types/src/embed/element.d.ts +1 -1
- package/dist/types/src/embed/options.d.ts +5 -4
- package/dist/types/src/index.d.ts +4 -4
- package/dist/types/src/lib/api.d.ts +8 -1
- package/dist/types/src/lib/i18n.d.ts +71 -0
- package/dist/types/src/types.d.ts +28 -10
- package/dist/ui-chat.css +1 -1
- package/package.json +3 -3
- package/dist/types/src/components/Console/Component.d.ts +0 -17
- package/dist/types/src/components/Console/ServerLogs.d.ts +0 -8
- package/dist/types/src/components/Console/data.d.ts +0 -7
- package/dist/types/src/components/Console/enums.d.ts +0 -9
- package/dist/types/src/components/Console/index.d.ts +0 -2
- package/dist/types/src/components/DocsDialog/Component.d.ts +0 -8
- package/dist/types/src/components/DocsDialog/data.d.ts +0 -18
- package/dist/types/src/components/DocsDialog/index.d.ts +0 -2
- package/dist/types/src/lib/ansi.d.ts +0 -33
- package/dist/types/src/lib/layout.d.ts +0 -42
- package/dist/types/src/lib/logStream.d.ts +0 -30
package/README.md
CHANGED
|
@@ -95,7 +95,7 @@ spec:
|
|
|
95
95
|
```
|
|
96
96
|
|
|
97
97
|
```tsx
|
|
98
|
-
<SmarterChat apiUrl="https://support.3141-5926-5359.api.example.com/"
|
|
98
|
+
<SmarterChat apiUrl="https://support.3141-5926-5359.api.example.com/" />
|
|
99
99
|
```
|
|
100
100
|
|
|
101
101
|
## Features
|
|
@@ -118,9 +118,12 @@ spec:
|
|
|
118
118
|
[DOMPurify](https://github.com/cure53/DOMPurify).
|
|
119
119
|
- **Lightweight where it counts.** React is a peer dependency. Mermaid is loaded only when a message first has a
|
|
120
120
|
diagram, and KaTeX's fonts are downloaded only when an equation uses them.
|
|
121
|
-
- **
|
|
122
|
-
configuration
|
|
121
|
+
- **Made to be hosted.** A page can follow the chat (`onConfig`, `onNewChat`, `onModeChange`), ask it for the
|
|
122
|
+
configuration's diagnostic parts (`verbose`) or to reload it (`reloadKey`), and add its own buttons to the chat's
|
|
123
|
+
header (`headerActions`). The Smarter web console's workbench puts its developer Console beside the chat this way.
|
|
123
124
|
- **Accessible.** It has labeled regions and controls, keyboard-resizable panels, and MathML for screen readers.
|
|
125
|
+
- **Translated.** Its own text is in English, Spanish, French or Brazilian Portuguese: the page's language, or the one
|
|
126
|
+
you ask for. The LLMClient's welcome message, example prompts and responses are displayed as they are.
|
|
124
127
|
- **Typed.** It's written in TypeScript, and its types are generated from Smarter's api contract.
|
|
125
128
|
|
|
126
129
|
See [Features](https://docs.smarter.sh/smarter-framework/smarter-chat/features.html) for details.
|
|
@@ -156,7 +159,6 @@ createRoot(document.getElementById("chat")!).render(
|
|
|
156
159
|
<SmarterChat
|
|
157
160
|
apiUrl="https://stackademy.3141-5926-5359.api.example.com/"
|
|
158
161
|
apiKey={import.meta.env.VITE_SMARTER_API_KEY} // only if the LLMClient has an api key
|
|
159
|
-
showConsole={false}
|
|
160
162
|
/>
|
|
161
163
|
</div>,
|
|
162
164
|
);
|
|
@@ -195,22 +197,24 @@ the `<smarter-chat>` element, wherever the script is loaded:
|
|
|
195
197
|
The element's attributes, the script tag's `data-` attributes and the properties of `window.SmarterChatConfig` (in
|
|
196
198
|
camelCase, e.g. `apiKey`) are the same options. Only `chatbot` is required.
|
|
197
199
|
|
|
198
|
-
| Option | Default | Description
|
|
199
|
-
| --------------------- | --------------------- |
|
|
200
|
-
| `chatbot` | (required) | The deployed LLMClient's url.
|
|
201
|
-
| `api-key` | | A Smarter api key, for LLMClients that require one. It's public in the page.
|
|
202
|
-
| `mode` | `launcher` / `inline` | `launcher` (the script tag's default) or `inline` (the element's default).
|
|
203
|
-
| `position` | `bottom-right` | The launcher's corner: `bottom-right` or `bottom-left`.
|
|
204
|
-
| `open` | `false` | Start with the launcher open.
|
|
205
|
-
| `label` | `Chat` | The launcher's accessible name.
|
|
206
|
-
| `color` | `#ff5733` | The launcher button's color.
|
|
207
|
-
| `width`, `height` | `400px`, `600px` | The launcher's panel, or the inline chat (`100%`, `600px`). Any css length.
|
|
208
|
-
| `z-index` | `2147483000` | The launcher's stacking order.
|
|
209
|
-
| `session-cookie-name` | one per chatbot host | The cookie that keeps the chat session.
|
|
210
|
-
| `cookie-path` | `/` | The session cookie's path. `/` keeps one conversation across the whole site.
|
|
211
|
-
| `stream-progress` | `true` | Show a running prompt's steps, e.g. its tool calls.
|
|
212
|
-
| `debug` | `false` | Log to the browser console.
|
|
213
|
-
| `
|
|
200
|
+
| Option | Default | Description |
|
|
201
|
+
| --------------------- | --------------------- | ------------------------------------------------------------------------------------------ |
|
|
202
|
+
| `chatbot` | (required) | The deployed LLMClient's url. |
|
|
203
|
+
| `api-key` | | A Smarter api key, for LLMClients that require one. It's public in the page. |
|
|
204
|
+
| `mode` | `launcher` / `inline` | `launcher` (the script tag's default) or `inline` (the element's default). |
|
|
205
|
+
| `position` | `bottom-right` | The launcher's corner: `bottom-right` or `bottom-left`. |
|
|
206
|
+
| `open` | `false` | Start with the launcher open. |
|
|
207
|
+
| `label` | `Chat` | The launcher's accessible name. |
|
|
208
|
+
| `color` | `#ff5733` | The launcher button's color. |
|
|
209
|
+
| `width`, `height` | `400px`, `600px` | The launcher's panel, or the inline chat (`100%`, `600px`). Any css length. |
|
|
210
|
+
| `z-index` | `2147483000` | The launcher's stacking order. |
|
|
211
|
+
| `session-cookie-name` | one per chatbot host | The cookie that keeps the chat session. |
|
|
212
|
+
| `cookie-path` | `/` | The session cookie's path. `/` keeps one conversation across the whole site. |
|
|
213
|
+
| `stream-progress` | `true` | Show a running prompt's steps, e.g. its tool calls. |
|
|
214
|
+
| `debug` | `false` | Log to the browser console. |
|
|
215
|
+
| `language` | the page's | The chat's own language: `en`, `es`, `fr` or `pt-br`, or a regional variant, e.g. `es-MX`. |
|
|
216
|
+
|
|
217
|
+
| `target` | | Script tag and `SmarterChatConfig` only: a css selector to render the chat inline in. |
|
|
214
218
|
|
|
215
219
|
Where you can't set a script tag's attributes, as in Google Tag Manager, set `window.SmarterChatConfig` (an object, or
|
|
216
220
|
an array of them) before the script runs:
|
|
@@ -285,7 +289,7 @@ LLM, what the chat displays, and who may use it.
|
|
|
285
289
|
| Setting | Effect in the chat |
|
|
286
290
|
| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
287
291
|
| `provider`, `defaultModel` | The LLM that answers. They're also shown under the name in the header, as in "openai gpt-4o-mini with 2 additional plugins". |
|
|
288
|
-
| `defaultSystemRole` | The system prompt that starts every new session. It's visible in sandbox mode
|
|
292
|
+
| `defaultSystemRole` | The system prompt that starts every new session. It's visible in the workbench's sandbox mode. |
|
|
289
293
|
| `defaultTemperature`, `defaultMaxTokens` | Sent to the LLM with each prompt. |
|
|
290
294
|
| `appName` | The title in the header, followed by the manifest's `metadata.version`. |
|
|
291
295
|
| `appAssistant` | The sender name on the assistant's messages. The default is "Assistant". |
|
|
@@ -376,23 +380,22 @@ prefer setting it there, so that it applies everywhere the LLMClient is embedded
|
|
|
376
380
|
|
|
377
381
|
Only `apiUrl` is required.
|
|
378
382
|
|
|
379
|
-
| Prop | Type | Default | Description
|
|
380
|
-
| ------------------------- | ---------------- | --------------- |
|
|
381
|
-
| `apiUrl` | `string` | (required) | The LLMClient's api url. The chat appends `config/` to it for its configuration.
|
|
382
|
-
| `apiKey` | `string \| null` | `null` | A Smarter api key, sent as `Authorization: Token <apiKey>`, for LLMClients that require authentication.
|
|
383
|
-
| `
|
|
384
|
-
| `
|
|
385
|
-
| `
|
|
386
|
-
| `
|
|
387
|
-
| `
|
|
388
|
-
| `
|
|
389
|
-
| `
|
|
390
|
-
| `
|
|
391
|
-
| `
|
|
392
|
-
| `
|
|
393
|
-
| `
|
|
394
|
-
| `
|
|
395
|
-
| `logStreamUrl` | `string \| null` | `null` | The url of a server log stream (Server-Sent Events), for the Console's Server Logs tab. |
|
|
383
|
+
| Prop | Type | Default | Description |
|
|
384
|
+
| ------------------------- | ---------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
385
|
+
| `apiUrl` | `string` | (required) | The LLMClient's api url. The chat appends `config/` to it for its configuration. |
|
|
386
|
+
| `apiKey` | `string \| null` | `null` | A Smarter api key, sent as `Authorization: Token <apiKey>`, for LLMClients that require authentication. |
|
|
387
|
+
| `streamProgress` | `boolean` | `true` | Display a running prompt's progress, which the prompt api streams as Server-Sent Events. |
|
|
388
|
+
| `debugMode` | `boolean` | `false` | Log to the browser console. |
|
|
389
|
+
| `cookieDomain` | `string` | `""` | The domain whose cookies the chat reads. Empty means the page's own domain. |
|
|
390
|
+
| `sessionCookieName` | `string` | `"session_key"` | The cookie in which the chat saves its session's key, for the page's path. |
|
|
391
|
+
| `sessionCookieExpiration` | `number` | one day | The session cookie's lifetime, in milliseconds. |
|
|
392
|
+
| `csrfCookieName` | `string` | `"csrftoken"` | The name of Django's CSRF cookie, whose value is sent as the `X-CSRFToken` header. |
|
|
393
|
+
| `csrftoken` | `string \| null` | `null` | The CSRF token, when the page cannot read the CSRF cookie. |
|
|
394
|
+
| `debugCookieName` | `string` | `"debug"` | The cookie in which the chat saves the LLMClient's debug mode. |
|
|
395
|
+
| `debugCookieExpiration` | `number` | one day | The debug cookie's lifetime, in milliseconds. |
|
|
396
|
+
| `smarterRequestId` | `string` | `""` | A unique id of the page request, sent as the `X-Smarter-RequestId` header, for tracing. |
|
|
397
|
+
| `language` | `string \| null` | `null` | The language of the chat's own text: `en`, `es`, `fr` or `pt-br`, or a regional variant, e.g. `es-MX`. By default, the page's `<html lang>`, or else the browser's. |
|
|
398
|
+
| `toggleMetadata` | `boolean` | `false` | Show the Sandbox / Production mode switch, and start in sandbox mode, in which the thread also shows Smarter's system, tool and meta data messages. |
|
|
396
399
|
|
|
397
400
|
The props control where and how the chat runs on your page. Its content and look come from the manifest, so there is
|
|
398
401
|
no prop for the welcome message, the colors or the model.
|
|
@@ -409,7 +412,7 @@ function ChatWidget({ apiKey }: { apiKey: string }) {
|
|
|
409
412
|
<button onClick={() => setOpen(!open)}>Chat with us</button>
|
|
410
413
|
{open && (
|
|
411
414
|
<div style={{ position: "fixed", right: 24, bottom: 80, width: 400, height: 600 }}>
|
|
412
|
-
<SmarterChat apiUrl="https://support.3141-5926-5359.api.example.com/" apiKey={apiKey}
|
|
415
|
+
<SmarterChat apiUrl="https://support.3141-5926-5359.api.example.com/" apiKey={apiKey} />
|
|
413
416
|
</div>
|
|
414
417
|
)}
|
|
415
418
|
</>
|
|
@@ -435,43 +438,59 @@ export default function Chat() {
|
|
|
435
438
|
<SmarterChat
|
|
436
439
|
apiUrl="https://stackademy.3141-5926-5359.api.example.com/"
|
|
437
440
|
apiKey={process.env.NEXT_PUBLIC_SMARTER_API_KEY}
|
|
438
|
-
showConsole={false}
|
|
439
441
|
/>
|
|
440
442
|
</div>
|
|
441
443
|
);
|
|
442
444
|
}
|
|
443
445
|
```
|
|
444
446
|
|
|
445
|
-
### A
|
|
447
|
+
### A page that hosts the chat
|
|
446
448
|
|
|
447
|
-
|
|
449
|
+
These props let a page follow the chat, and add to it. The Smarter web console's prompt engineering workbench, which
|
|
450
|
+
imports this package, puts its developer Console beside the chat with them.
|
|
451
|
+
|
|
452
|
+
| Prop | Type | Description |
|
|
453
|
+
| --------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
|
|
454
|
+
| `verbose` | `boolean` | Fetch the configuration's diagnostic parts too, e.g. the session's tool calls, and again after each prompt. |
|
|
455
|
+
| `onConfig` | `(config: ChatConfig) => void` | Called with the configuration each time it loads. |
|
|
456
|
+
| `onNewChat` | `() => void` | Called when the user starts a new chat. |
|
|
457
|
+
| `onModeChange` | `(sandbox: boolean) => void` | Called with whether the chat is in sandbox mode, when it starts and when the user switches. |
|
|
458
|
+
| `reloadKey` | `number \| string` | Reload the configuration when it changes, e.g. after the page changed the LLMClient's manifest. |
|
|
459
|
+
| `headerActions` | `ReactNode` | Buttons that the page adds to the chat's header, after its own. `HeaderButton` looks like the chat's own buttons. |
|
|
448
460
|
|
|
449
461
|
```tsx
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
462
|
+
import { HeaderButton, SmarterChat, type ChatConfig } from "@smarter.sh/ui-chat";
|
|
463
|
+
|
|
464
|
+
function HostedChat() {
|
|
465
|
+
const [config, setConfig] = useState<ChatConfig | null>(null);
|
|
466
|
+
const [reloadKey, setReloadKey] = useState(0);
|
|
467
|
+
return (
|
|
468
|
+
<SmarterChat
|
|
469
|
+
apiUrl="https://stackademy.3141-5926-5359.api.example.com/"
|
|
470
|
+
onConfig={setConfig}
|
|
471
|
+
reloadKey={reloadKey}
|
|
472
|
+
headerActions={<HeaderButton onClick={() => setReloadKey((key) => key + 1)}>Reload</HeaderButton>}
|
|
473
|
+
/>
|
|
474
|
+
);
|
|
475
|
+
}
|
|
457
476
|
```
|
|
458
477
|
|
|
459
478
|
## TypeScript
|
|
460
479
|
|
|
461
480
|
Type declarations are included. Besides the components, the package exports:
|
|
462
481
|
|
|
463
|
-
| Export
|
|
464
|
-
|
|
|
465
|
-
| `SmarterChat`
|
|
466
|
-
| `
|
|
467
|
-
| `SmarterChatProps`
|
|
468
|
-
| `ChatConfig`, `LLMClientConfig`, `ChatHistory`, `ChatMetaData`
|
|
469
|
-
| `Contract`
|
|
470
|
-
| `normalizeConfig`, `CHAT_CONTRACT_V2_CAPABILITY`
|
|
471
|
-
| `ApiMessage`, `ChatMessage`
|
|
472
|
-
| `PromptProgressEvent`
|
|
473
|
-
| `MessageDirectionEnum`, `SenderRoleEnum`, `ValidMessageRolesEnum
|
|
474
|
-
| `version`
|
|
482
|
+
| Export | What it is |
|
|
483
|
+
| ----------------------------------------------------------------- | ------------------------------------------------------------------ |
|
|
484
|
+
| `SmarterChat` | The chat component. |
|
|
485
|
+
| `HeaderButton`, `HeaderButtonProps` | A button of the chat's header, for `headerActions`. |
|
|
486
|
+
| `SmarterChatProps` | The chat's props. |
|
|
487
|
+
| `ChatConfig`, `LLMClientConfig`, `ChatHistory`, `ChatMetaData` | The LLMClient configuration that the Smarter config api returns. |
|
|
488
|
+
| `Contract` | Every type of the api contract, generated from its JSON Schema. |
|
|
489
|
+
| `normalizeConfig`, `CHAT_CONTRACT_V2_CAPABILITY` | Converts an older platform's configuration to the current version. |
|
|
490
|
+
| `ApiMessage`, `ChatMessage` | A message as the api sends it, and as the chat thread holds it. |
|
|
491
|
+
| `PromptProgressEvent` | A step of a running prompt, as the prompt api streams it. |
|
|
492
|
+
| `MessageDirectionEnum`, `SenderRoleEnum`, `ValidMessageRolesEnum` | Message directions and roles. |
|
|
493
|
+
| `version` | The package's version. |
|
|
475
494
|
|
|
476
495
|
## The api contract
|
|
477
496
|
|