@slexkit/assistant-ui 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) SlexKit contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,117 @@
+# @slexkit/assistant-ui
+
+assistant-ui Streamdown text renderer for SlexKit fenced artifact blocks.
+
+Use this package when assistant-ui message text already renders through
+`@assistant-ui/react-streamdown`. It replaces explicit `slex` fenced code blocks
+inside assistant message text; threads, messages, composer, runtime, and tool UI
+stay with assistant-ui.
+
+## Install
+
+```sh
+npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown @slexkit/assistant-ui @assistant-ui/react @assistant-ui/react-streamdown streamdown react react-dom
+```
+
+Import styles once in the app:
+
+```ts
+import "@slexkit/theme-shadcn/style.css";
+import "@slexkit/assistant-ui/style.css";
+```
+
+## Minimal Usage
+
+Use the component where assistant-ui renders message text parts:
+
+```tsx
+import { MessagePrimitive } from "@assistant-ui/react";
+import { SlexKitAssistantStreamdownText } from "@slexkit/assistant-ui";
+
+export function AssistantMessage() {
+  return (
+    <MessagePrimitive.Root>
+      <MessagePrimitive.Parts>
+        {({ part }) =>
+          part.type === "text" ? (
+            <SlexKitAssistantStreamdownText
+              artifactId="message-1"
+              runtime="secure"
+              secureFrame={{ runtimeUrl: "/slexkit.runtime.js" }}
+            />
+          ) : null
+        }
+      </MessagePrimitive.Parts>
+    </MessagePrimitive.Root>
+  );
+}
+```
+
+For app-authored, reviewed content, trusted mode can be enabled:
+
+```tsx
+<SlexKitAssistantStreamdownText artifactId="message-1" runtime="trusted" />
+```
+
+## Existing StreamdownTextPrimitive
+
+For an existing `StreamdownTextPrimitive` wrapper, merge only the SlexKit
+language override:
+
+```tsx
+import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
+import { createSlexKitAssistantStreamdownComponents } from "@slexkit/assistant-ui";
+
+const componentsByLanguage = createSlexKitAssistantStreamdownComponents({
+  artifactId: "message-1",
+  runtime: "secure",
+  secureFrame: { runtimeUrl: "/slexkit.runtime.js" },
+});
+
+export function MarkdownText() {
+  return <StreamdownTextPrimitive componentsByLanguage={componentsByLanguage} />;
+}
+```
+
+## Model Output
+
+Ask the model to emit Slex only in explicit `slex` fenced blocks. Ordinary
+Markdown and non-`slex` code blocks stay with assistant-ui's Streamdown renderer.
+
+````md
+```slex
+{
+  namespace: "status_demo",
+  g: {},
+  layout: {
+    "text:status": { text: "3/4 checks complete" }
+  }
+}
+```
+
+**Status:** 3/4 checks complete
+````
+
+## Trust Boundary
+
+The default runtime is `secure`, because assistant messages often contain direct
+model output. Secure mode requires a public SlexKit runtime module:
+
+```sh
+npx -y slexkit copy-runtime public/slexkit.runtime.js
+```
+
+Serve that file with:
+
+```http
+Access-Control-Allow-Origin: *
+Content-Type: text/javascript
+```
+
+Use `runtime="trusted"` only for content authored or reviewed by the application.
+
+## ToolHost
+
+This package handles message text only. assistant-ui tool calls, approvals, and
+form submissions need their own integration. Use ToolHost for structured
+user-return flows.

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentsByLanguage, StreamdownTextPrimitiveProps, SyntaxHighlighterProps } from "@assistant-ui/react-streamdown";
+import type { SlexKitRendererOptions } from "@slexkit/streamdown";
+export type SlexKitAssistantRendererOptions = Omit<SlexKitRendererOptions, "className" | "domain" | "languages"> & {
+    artifactId?: string;
+    className?: string;
+    domain?: string;
+};
+export type SlexKitAssistantStreamdownTextProps = Omit<StreamdownTextPrimitiveProps, "componentsByLanguage"> & SlexKitAssistantRendererOptions & {
+    componentsByLanguage?: ComponentsByLanguage;
+    slexkit?: SlexKitAssistantRendererOptions;
+};
+export declare function createSlexKitAssistantStreamdownComponents(options?: SlexKitAssistantRendererOptions, componentsByLanguage?: ComponentsByLanguage): ComponentsByLanguage;
+export declare function SlexKitAssistantStreamdownText({ artifactId, className, componentsByLanguage, domain, hostAdapter, onError, placeholder, playgroundUrl, renderMode, runtime, runtimeHost, secureFrame, securePolicy, showChrome, showSource, slexkit, streaming, useGlobalRuntimeHost, ...streamdownProps }: SlexKitAssistantStreamdownTextProps): import("react").FunctionComponentElement<Omit<import("streamdown").StreamdownProps, "children" | "components" | "plugins" | "caret" | "controls" | "linkSafety" | "remend" | "mermaid" | "BlockComponent" | "parseMarkdownIntoBlocksFn"> & {
+    components?: import("@assistant-ui/react-streamdown").StreamdownTextComponents | undefined;
+    componentsByLanguage?: ComponentsByLanguage | undefined;
+    plugins?: import("@assistant-ui/react-streamdown").PluginConfig | undefined;
+    preprocess?: ((text: string) => string) | undefined;
+    defer?: boolean | undefined;
+    smooth?: boolean | import("@assistant-ui/react").SmoothOptions | undefined;
+    containerProps?: Omit<import("react").ComponentPropsWithoutRef<"div">, "children"> | undefined;
+    containerClassName?: string | undefined;
+    caret?: import("@assistant-ui/react-streamdown").CaretStyle | undefined;
+    controls?: import("@assistant-ui/react-streamdown").ControlsConfig | undefined;
+    linkSafety?: import("@assistant-ui/react-streamdown").LinkSafetyConfig | undefined;
+    remend?: import("@assistant-ui/react-streamdown").RemendConfig | undefined;
+    mermaid?: import("streamdown").MermaidOptions | undefined;
+    parseIncompleteMarkdown?: boolean | undefined;
+    allowedTags?: import("@assistant-ui/react-streamdown").AllowedTags | undefined;
+    remarkRehypeOptions?: import("@assistant-ui/react-streamdown").Options | undefined;
+    security?: import("@assistant-ui/react-streamdown").SecurityConfig | undefined;
+    BlockComponent?: import("streamdown").StreamdownProps["BlockComponent"] | undefined;
+    parseMarkdownIntoBlocksFn?: ((markdown: string) => string[]) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type { ComponentsByLanguage, StreamdownTextPrimitiveProps, SyntaxHighlighterProps, };

package/dist/index.js

@@ -0,0 +1,79 @@
+import { StreamdownTextPrimitive } from "@assistant-ui/react-streamdown";
+import { SlexKitRenderer } from "@slexkit/streamdown";
+import { createElement, useId, useMemo } from "react";
+function normalizeSlexKitOptions(options = {}) {
+    const { artifactId, domain, runtime, showChrome, ...rest } = options;
+    return {
+        ...rest,
+        domain: domain ?? artifactId,
+        runtime: runtime ?? "secure",
+        showChrome: showChrome ?? false,
+    };
+}
+function createSlexKitSyntaxHighlighter(options = {}) {
+    const rendererOptions = normalizeSlexKitOptions(options);
+    return function SlexKitAssistantSyntaxHighlighter({ code, language, }) {
+        return createElement(SlexKitRenderer, {
+            ...rendererOptions,
+            code,
+            isIncomplete: false,
+            language: language || "slex",
+        });
+    };
+}
+export function createSlexKitAssistantStreamdownComponents(options = {}, componentsByLanguage = {}) {
+    return {
+        ...componentsByLanguage,
+        slex: {
+            ...componentsByLanguage.slex,
+            CodeHeader: componentsByLanguage.slex?.CodeHeader ?? (() => null),
+            SyntaxHighlighter: createSlexKitSyntaxHighlighter(options),
+        },
+    };
+}
+export function SlexKitAssistantStreamdownText({ artifactId, className, componentsByLanguage, domain, hostAdapter, onError, placeholder, playgroundUrl, renderMode, runtime, runtimeHost, secureFrame, securePolicy, showChrome, showSource, slexkit, streaming, useGlobalRuntimeHost, ...streamdownProps }) {
+    const generatedId = useId();
+    const resolvedArtifactId = artifactId ?? domain ?? `slexkit-assistant-${generatedId}`;
+    const resolvedComponentsByLanguage = useMemo(() => createSlexKitAssistantStreamdownComponents({
+        artifactId: resolvedArtifactId,
+        className,
+        domain,
+        hostAdapter,
+        onError,
+        placeholder,
+        playgroundUrl,
+        renderMode,
+        runtime,
+        runtimeHost,
+        secureFrame,
+        securePolicy,
+        showChrome,
+        showSource,
+        streaming,
+        useGlobalRuntimeHost,
+        ...slexkit,
+    }, componentsByLanguage), [
+        className,
+        componentsByLanguage,
+        domain,
+        hostAdapter,
+        onError,
+        placeholder,
+        playgroundUrl,
+        renderMode,
+        resolvedArtifactId,
+        runtime,
+        runtimeHost,
+        secureFrame,
+        securePolicy,
+        showChrome,
+        showSource,
+        slexkit,
+        streaming,
+        useGlobalRuntimeHost,
+    ]);
+    return createElement(StreamdownTextPrimitive, {
+        ...streamdownProps,
+        componentsByLanguage: resolvedComponentsByLanguage,
+    });
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@slexkit/assistant-ui",
+  "version": "0.4.0",
+  "description": "assistant-ui Streamdown text renderer for SlexKit fenced artifact blocks.",
+  "author": "SlexKit contributors",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/slexkit/slexkit.git",
+    "directory": "packages/assistant-ui"
+  },
+  "homepage": "https://github.com/slexkit/slexkit/tree/main/packages/assistant-ui#readme",
+  "bugs": {
+    "url": "https://github.com/slexkit/slexkit/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./style.css"
+  },
+  "files": [
+    "dist/",
+    "style.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./style.css"
+  ],
+  "scripts": {
+    "build": "bun run scripts/build.ts"
+  },
+  "keywords": [
+    "slexkit",
+    "assistant-ui",
+    "react",
+    "streamdown",
+    "markdown",
+    "renderer"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@assistant-ui/react": "^0.14.23",
+    "@assistant-ui/react-streamdown": "^0.3.4",
+    "@slexkit/streamdown": "^0.4.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "slexkit": "^0.4.0",
+    "streamdown": "^2.5.0"
+  },
+  "peerDependenciesMeta": {
+    "slexkit": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@assistant-ui/react": "^0.14.23",
+    "@assistant-ui/react-streamdown": "^0.3.4",
+    "@slexkit/streamdown": "workspace:*",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "streamdown": "^2.5.0"
+  }
+}

package/style.css

@@ -0,0 +1 @@
+@import "@slexkit/streamdown/style.css";