@smarter.sh/ui-chat 0.11.0 → 0.36.0-alpha.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.
- package/README.md +78 -64
- package/dist/embed.js +56 -66
- package/dist/embed.js.map +1 -1
- package/dist/smarter-chat-library.es.js +4509 -10334
- package/dist/smarter-chat-library.es.js.map +1 -1
- package/dist/smarter-chat-library.umd.js +50 -60
- package/dist/smarter-chat-library.umd.js.map +1 -1
- package/dist/types/src/components/SmarterChat/Component.d.ts +13 -13
- 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/index.d.ts +4 -4
- package/dist/types/src/lib/api.d.ts +8 -1
- package/dist/types/src/lib/i18n.d.ts +6 -5
- package/dist/types/src/types.d.ts +22 -10
- package/dist/ui-chat.css +1 -1
- package/package.json +8 -5
- package/LICENSE +0 -671
- 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,11 +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.
|
|
124
|
-
- **Translated.** Its own text is in English, Spanish or
|
|
125
|
-
LLMClient's welcome message, example prompts and responses are displayed as they are.
|
|
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.
|
|
126
127
|
- **Typed.** It's written in TypeScript, and its types are generated from Smarter's api contract.
|
|
127
128
|
|
|
128
129
|
See [Features](https://docs.smarter.sh/smarter-framework/smarter-chat/features.html) for details.
|
|
@@ -158,7 +159,6 @@ createRoot(document.getElementById("chat")!).render(
|
|
|
158
159
|
<SmarterChat
|
|
159
160
|
apiUrl="https://stackademy.3141-5926-5359.api.example.com/"
|
|
160
161
|
apiKey={import.meta.env.VITE_SMARTER_API_KEY} // only if the LLMClient has an api key
|
|
161
|
-
showConsole={false}
|
|
162
162
|
/>
|
|
163
163
|
</div>,
|
|
164
164
|
);
|
|
@@ -197,22 +197,22 @@ the `<smarter-chat>` element, wherever the script is loaded:
|
|
|
197
197
|
The element's attributes, the script tag's `data-` attributes and the properties of `window.SmarterChatConfig` (in
|
|
198
198
|
camelCase, e.g. `apiKey`) are the same options. Only `chatbot` is required.
|
|
199
199
|
|
|
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` or `
|
|
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
216
|
|
|
217
217
|
| `target` | | Script tag and `SmarterChatConfig` only: a css selector to render the chat inline in. |
|
|
218
218
|
|
|
@@ -289,7 +289,7 @@ LLM, what the chat displays, and who may use it.
|
|
|
289
289
|
| Setting | Effect in the chat |
|
|
290
290
|
| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
291
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". |
|
|
292
|
-
| `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. |
|
|
293
293
|
| `defaultTemperature`, `defaultMaxTokens` | Sent to the LLM with each prompt. |
|
|
294
294
|
| `appName` | The title in the header, followed by the manifest's `metadata.version`. |
|
|
295
295
|
| `appAssistant` | The sender name on the assistant's messages. The default is "Assistant". |
|
|
@@ -380,24 +380,22 @@ prefer setting it there, so that it applies everywhere the LLMClient is embedded
|
|
|
380
380
|
|
|
381
381
|
Only `apiUrl` is required.
|
|
382
382
|
|
|
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
|
-
| `
|
|
388
|
-
| `
|
|
389
|
-
| `
|
|
390
|
-
| `
|
|
391
|
-
| `
|
|
392
|
-
| `
|
|
393
|
-
| `
|
|
394
|
-
| `
|
|
395
|
-
| `
|
|
396
|
-
| `
|
|
397
|
-
| `
|
|
398
|
-
| `
|
|
399
|
-
| `logStreamUrl` | `string \| null` | `null` | The url of a server log stream (Server-Sent Events), for the Console's Server Logs tab. |
|
|
400
|
-
| `language` | `string \| null` | `null` | The language of the chat's own text: `en`, `es` or `fr`, or a regional variant, e.g. `es-MX`. By default, the page's `<html lang>`, or else the browser's. |
|
|
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. |
|
|
401
399
|
|
|
402
400
|
The props control where and how the chat runs on your page. Its content and look come from the manifest, so there is
|
|
403
401
|
no prop for the welcome message, the colors or the model.
|
|
@@ -414,7 +412,7 @@ function ChatWidget({ apiKey }: { apiKey: string }) {
|
|
|
414
412
|
<button onClick={() => setOpen(!open)}>Chat with us</button>
|
|
415
413
|
{open && (
|
|
416
414
|
<div style={{ position: "fixed", right: 24, bottom: 80, width: 400, height: 600 }}>
|
|
417
|
-
<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} />
|
|
418
416
|
</div>
|
|
419
417
|
)}
|
|
420
418
|
</>
|
|
@@ -440,43 +438,59 @@ export default function Chat() {
|
|
|
440
438
|
<SmarterChat
|
|
441
439
|
apiUrl="https://stackademy.3141-5926-5359.api.example.com/"
|
|
442
440
|
apiKey={process.env.NEXT_PUBLIC_SMARTER_API_KEY}
|
|
443
|
-
showConsole={false}
|
|
444
441
|
/>
|
|
445
442
|
</div>
|
|
446
443
|
);
|
|
447
444
|
}
|
|
448
445
|
```
|
|
449
446
|
|
|
450
|
-
### A
|
|
447
|
+
### A page that hosts the chat
|
|
451
448
|
|
|
452
|
-
|
|
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. |
|
|
453
460
|
|
|
454
461
|
```tsx
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
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
|
+
}
|
|
462
476
|
```
|
|
463
477
|
|
|
464
478
|
## TypeScript
|
|
465
479
|
|
|
466
480
|
Type declarations are included. Besides the components, the package exports:
|
|
467
481
|
|
|
468
|
-
| Export
|
|
469
|
-
|
|
|
470
|
-
| `SmarterChat`
|
|
471
|
-
| `
|
|
472
|
-
| `SmarterChatProps`
|
|
473
|
-
| `ChatConfig`, `LLMClientConfig`, `ChatHistory`, `ChatMetaData`
|
|
474
|
-
| `Contract`
|
|
475
|
-
| `normalizeConfig`, `CHAT_CONTRACT_V2_CAPABILITY`
|
|
476
|
-
| `ApiMessage`, `ChatMessage`
|
|
477
|
-
| `PromptProgressEvent`
|
|
478
|
-
| `MessageDirectionEnum`, `SenderRoleEnum`, `ValidMessageRolesEnum
|
|
479
|
-
| `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. |
|
|
480
494
|
|
|
481
495
|
## The api contract
|
|
482
496
|
|