@slexkit/assistant-ui 0.4.0 → 0.5.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.
Files changed (3) hide show
  1. package/README.md +35 -117
  2. package/dist/index.js +3 -4
  3. package/package.json +74 -74
package/README.md CHANGED
@@ -1,117 +1,35 @@
1
- # @slexkit/assistant-ui
2
-
3
- assistant-ui Streamdown text renderer for SlexKit fenced artifact blocks.
4
-
5
- Use this package when assistant-ui message text already renders through
6
- `@assistant-ui/react-streamdown`. It replaces explicit `slex` fenced code blocks
7
- inside assistant message text; threads, messages, composer, runtime, and tool UI
8
- stay with assistant-ui.
9
-
10
- ## Install
11
-
12
- ```sh
13
- npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown @slexkit/assistant-ui @assistant-ui/react @assistant-ui/react-streamdown streamdown react react-dom
14
- ```
15
-
16
- Import styles once in the app:
17
-
18
- ```ts
19
- import "@slexkit/theme-shadcn/style.css";
20
- import "@slexkit/assistant-ui/style.css";
21
- ```
22
-
23
- ## Minimal Usage
24
-
25
- Use the component where assistant-ui renders message text parts:
26
-
27
- ```tsx
28
- import { MessagePrimitive } from "@assistant-ui/react";
29
- import { SlexKitAssistantStreamdownText } from "@slexkit/assistant-ui";
30
-
31
- export function AssistantMessage() {
32
- return (
33
- <MessagePrimitive.Root>
34
- <MessagePrimitive.Parts>
35
- {({ part }) =>
36
- part.type === "text" ? (
37
- <SlexKitAssistantStreamdownText
38
- artifactId="message-1"
39
- runtime="secure"
40
- secureFrame={{ runtimeUrl: "/slexkit.runtime.js" }}
41
- />
42
- ) : null
43
- }
44
- </MessagePrimitive.Parts>
45
- </MessagePrimitive.Root>
46
- );
47
- }
48
- ```
49
-
50
- For app-authored, reviewed content, trusted mode can be enabled:
51
-
52
- ```tsx
53
- <SlexKitAssistantStreamdownText artifactId="message-1" runtime="trusted" />
54
- ```
55
-
56
- ## Existing StreamdownTextPrimitive
57
-
58
- For an existing `StreamdownTextPrimitive` wrapper, merge only the SlexKit
59
- language override:
60
-
61
- ```tsx
62
- import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
63
- import { createSlexKitAssistantStreamdownComponents } from "@slexkit/assistant-ui";
64
-
65
- const componentsByLanguage = createSlexKitAssistantStreamdownComponents({
66
- artifactId: "message-1",
67
- runtime: "secure",
68
- secureFrame: { runtimeUrl: "/slexkit.runtime.js" },
69
- });
70
-
71
- export function MarkdownText() {
72
- return <StreamdownTextPrimitive componentsByLanguage={componentsByLanguage} />;
73
- }
74
- ```
75
-
76
- ## Model Output
77
-
78
- Ask the model to emit Slex only in explicit `slex` fenced blocks. Ordinary
79
- Markdown and non-`slex` code blocks stay with assistant-ui's Streamdown renderer.
80
-
81
- ````md
82
- ```slex
83
- {
84
- namespace: "status_demo",
85
- g: {},
86
- layout: {
87
- "text:status": { text: "3/4 checks complete" }
88
- }
89
- }
90
- ```
91
-
92
- **Status:** 3/4 checks complete
93
- ````
94
-
95
- ## Trust Boundary
96
-
97
- The default runtime is `secure`, because assistant messages often contain direct
98
- model output. Secure mode requires a public SlexKit runtime module:
99
-
100
- ```sh
101
- npx -y slexkit copy-runtime public/slexkit.runtime.js
102
- ```
103
-
104
- Serve that file with:
105
-
106
- ```http
107
- Access-Control-Allow-Origin: *
108
- Content-Type: text/javascript
109
- ```
110
-
111
- Use `runtime="trusted"` only for content authored or reviewed by the application.
112
-
113
- ## ToolHost
114
-
115
- This package handles message text only. assistant-ui tool calls, approvals, and
116
- form submissions need their own integration. Use ToolHost for structured
117
- user-return flows.
1
+ # @slexkit/assistant-ui
2
+
3
+ Official assistant-ui bridge for HTML-first SlexKit fences.
4
+
5
+ ```tsx
6
+ import { SlexKitAssistantStreamdownText } from "@slexkit/assistant-ui";
7
+ import "@slexkit/assistant-ui/style.css";
8
+
9
+ export function AssistantText() {
10
+ return <SlexKitAssistantStreamdownText
11
+ artifactId="message-1"
12
+ secureFrame={{ runtimeUrl: "/assets/slexkit.runtime.js" }}
13
+ />;
14
+ }
15
+ ```
16
+
17
+ The bridge keeps assistant-ui and Streamdown's ordinary Markdown behavior, and
18
+ claims only the `slex` language renderer. Fence bodies are HTML strings:
19
+
20
+ ````md
21
+ ```slex
22
+ <slex-card title="Answer" data-key="answer">
23
+ <slex-text text="Ready"></slex-text>
24
+ </slex-card>
25
+ ```
26
+ ````
27
+
28
+ `createSlexKitAssistantStreamdownComponents(options, existing)` merges language
29
+ components while ensuring `slex` remains owned by SlexKit. Options are forwarded
30
+ to `@slexkit/streamdown`; use a stable `artifactId`/`domain` for each message and
31
+ an explicit self-contained `secureFrame.runtimeUrl`. Every fence is isolated.
32
+ Runtime load failure is visible and never falls back to host-realm execution.
33
+
34
+ Exports also include `SlexKitAssistantStreamdownText` and the assistant-ui type
35
+ aliases used by custom integrations.
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
2
- import { SlexKitRenderer } from "@slexkit/streamdown";
2
+ import { createSlexKitRenderer } from "@slexkit/streamdown";
3
3
  import { createElement, useId, useMemo } from "react";
4
4
  function normalizeSlexKitOptions(options = {}) {
5
5
  const { artifactId, domain, runtime, showChrome, ...rest } = options;
@@ -11,10 +11,9 @@ function normalizeSlexKitOptions(options = {}) {
11
11
  };
12
12
  }
13
13
  function createSlexKitSyntaxHighlighter(options = {}) {
14
- const rendererOptions = normalizeSlexKitOptions(options);
14
+ const renderer = createSlexKitRenderer(normalizeSlexKitOptions(options));
15
15
  return function SlexKitAssistantSyntaxHighlighter({ code, language, }) {
16
- return createElement(SlexKitRenderer, {
17
- ...rendererOptions,
16
+ return createElement(renderer.component, {
18
17
  code,
19
18
  isIncomplete: false,
20
19
  language: language || "slex",
package/package.json CHANGED
@@ -1,74 +1,74 @@
1
- {
2
- "name": "@slexkit/assistant-ui",
3
- "version": "0.4.0",
4
- "description": "assistant-ui Streamdown text renderer for SlexKit fenced artifact blocks.",
5
- "author": "SlexKit contributors",
6
- "type": "module",
7
- "repository": {
8
- "type": "git",
9
- "url": "git+https://github.com/slexkit/slexkit.git",
10
- "directory": "packages/assistant-ui"
11
- },
12
- "homepage": "https://github.com/slexkit/slexkit/tree/main/packages/assistant-ui#readme",
13
- "bugs": {
14
- "url": "https://github.com/slexkit/slexkit/issues"
15
- },
16
- "main": "./dist/index.js",
17
- "module": "./dist/index.js",
18
- "types": "./dist/index.d.ts",
19
- "exports": {
20
- ".": {
21
- "types": "./dist/index.d.ts",
22
- "import": "./dist/index.js"
23
- },
24
- "./style.css": "./style.css"
25
- },
26
- "files": [
27
- "dist/",
28
- "style.css",
29
- "README.md",
30
- "LICENSE"
31
- ],
32
- "sideEffects": [
33
- "./style.css"
34
- ],
35
- "scripts": {
36
- "build": "bun run scripts/build.ts"
37
- },
38
- "keywords": [
39
- "slexkit",
40
- "assistant-ui",
41
- "react",
42
- "streamdown",
43
- "markdown",
44
- "renderer"
45
- ],
46
- "license": "MIT",
47
- "publishConfig": {
48
- "access": "public"
49
- },
50
- "peerDependencies": {
51
- "@assistant-ui/react": "^0.14.23",
52
- "@assistant-ui/react-streamdown": "^0.3.4",
53
- "@slexkit/streamdown": "^0.4.0",
54
- "react": "^18.0.0 || ^19.0.0",
55
- "react-dom": "^18.0.0 || ^19.0.0",
56
- "slexkit": "^0.4.0",
57
- "streamdown": "^2.5.0"
58
- },
59
- "peerDependenciesMeta": {
60
- "slexkit": {
61
- "optional": true
62
- }
63
- },
64
- "devDependencies": {
65
- "@assistant-ui/react": "^0.14.23",
66
- "@assistant-ui/react-streamdown": "^0.3.4",
67
- "@slexkit/streamdown": "workspace:*",
68
- "@types/react": "^19.2.7",
69
- "@types/react-dom": "^19.2.3",
70
- "react": "^19.2.6",
71
- "react-dom": "^19.2.6",
72
- "streamdown": "^2.5.0"
73
- }
74
- }
1
+ {
2
+ "name": "@slexkit/assistant-ui",
3
+ "version": "0.5.0",
4
+ "description": "assistant-ui Streamdown text renderer for SlexKit fenced artifact blocks.",
5
+ "author": "SlexKit contributors",
6
+ "type": "module",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/slexkit/slexkit.git",
10
+ "directory": "packages/assistant-ui"
11
+ },
12
+ "homepage": "https://github.com/slexkit/slexkit/tree/main/packages/assistant-ui#readme",
13
+ "bugs": {
14
+ "url": "https://github.com/slexkit/slexkit/issues"
15
+ },
16
+ "main": "./dist/index.js",
17
+ "module": "./dist/index.js",
18
+ "types": "./dist/index.d.ts",
19
+ "exports": {
20
+ ".": {
21
+ "types": "./dist/index.d.ts",
22
+ "import": "./dist/index.js"
23
+ },
24
+ "./style.css": "./style.css"
25
+ },
26
+ "files": [
27
+ "dist/",
28
+ "style.css",
29
+ "README.md",
30
+ "LICENSE"
31
+ ],
32
+ "sideEffects": [
33
+ "./style.css"
34
+ ],
35
+ "scripts": {
36
+ "build": "bun run scripts/build.ts"
37
+ },
38
+ "keywords": [
39
+ "slexkit",
40
+ "assistant-ui",
41
+ "react",
42
+ "streamdown",
43
+ "markdown",
44
+ "renderer"
45
+ ],
46
+ "license": "MIT",
47
+ "publishConfig": {
48
+ "access": "public"
49
+ },
50
+ "peerDependencies": {
51
+ "@assistant-ui/react": "^0.14.23",
52
+ "@assistant-ui/react-streamdown": "^0.3.4",
53
+ "@slexkit/streamdown": "^0.5.0",
54
+ "react": "^18.0.0 || ^19.0.0",
55
+ "react-dom": "^18.0.0 || ^19.0.0",
56
+ "slexkit": "^0.5.0",
57
+ "streamdown": "^2.5.0"
58
+ },
59
+ "peerDependenciesMeta": {
60
+ "slexkit": {
61
+ "optional": true
62
+ }
63
+ },
64
+ "devDependencies": {
65
+ "@assistant-ui/react": "^0.14.23",
66
+ "@assistant-ui/react-streamdown": "^0.3.4",
67
+ "@slexkit/streamdown": "workspace:*",
68
+ "@types/react": "^19.2.7",
69
+ "@types/react-dom": "^19.2.3",
70
+ "react": "^19.2.6",
71
+ "react-dom": "^19.2.6",
72
+ "streamdown": "^2.5.0"
73
+ }
74
+ }