@usetheo/ui 0.5.1-next.0 → 0.6.0-next.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/CHANGELOG.md +107 -0
- package/NOTICE +38 -0
- package/README.md +18 -18
- package/dist/index.d.ts +324 -31
- package/dist/index.js +991 -56
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/registry/index.json +1 -1
- package/registry/r/agent-stream.json +1 -1
- package/registry/r/chat-message.json +112 -4
- package/registry/r/chat-types.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,113 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.6.0-next.0] - 2026-05-23
|
|
11
|
+
|
|
12
|
+
Minor — `<ChatMessage>` rewritten on top of the Vercel AI SDK `UIMessage`
|
|
13
|
+
shape with full markdown rendering, syntax-highlighted code blocks, math,
|
|
14
|
+
mermaid diagrams, tool calls, reasoning panels, file/source citations,
|
|
15
|
+
branching navigation, and a streaming-safe markdown preprocess.
|
|
16
|
+
|
|
17
|
+
### Added
|
|
18
|
+
|
|
19
|
+
- **`<ChatMessage>` v2 (RFC 0009)** — promoted from primitive to composite
|
|
20
|
+
(`src/components/composites/chat-message/`). Two consumption shapes:
|
|
21
|
+
(a) convenience `<ChatMessage message={uiMessage} />` auto-dispatches
|
|
22
|
+
every part to its built-in renderer; (b) composable
|
|
23
|
+
`<ChatMessage.Root from="assistant"><ChatMessage.Content>…</…></…>` for
|
|
24
|
+
full control. Forks structural shell from `vercel/ai-elements`
|
|
25
|
+
(Apache-2.0, see `NOTICE`). Renders 11 part types:
|
|
26
|
+
`text`, `reasoning`, `tool-${name}`, `dynamic-tool`, `file`,
|
|
27
|
+
`reasoning-file`, `source-url`, `source-document`, `step-start`,
|
|
28
|
+
`custom`, `data-${name}`. (#TBD)
|
|
29
|
+
- **Branching navigation** — `<ChatMessageBranch>` + content / selector /
|
|
30
|
+
previous / next / page sub-components for cycling through alternate
|
|
31
|
+
responses on a single turn. (#TBD)
|
|
32
|
+
- **Markdown engine (`src/lib/markdown/`)** — `parseMarkdownToReact()` +
|
|
33
|
+
`parseMarkdownToReactSafe()` build a mdast → hast → React pipeline
|
|
34
|
+
via the existing optional peer-deps (`mdast-util-from-markdown`,
|
|
35
|
+
`mdast-util-gfm`, `mdast-util-to-hast`, `hast-util-sanitize`,
|
|
36
|
+
`hast-util-to-jsx-runtime`). Sanitize schema allows
|
|
37
|
+
`language-*` classes on `<code>`/`<pre>` so syntax highlight survives.
|
|
38
|
+
GFM tables, task lists, strikethrough, autolinks all render. (#TBD)
|
|
39
|
+
- **Streaming-safe preprocessor** — `preprocessStreaming()` auto-closes
|
|
40
|
+
trailing `**bold`, `_italic`, `` `code ``, `[link](url`, `$math$`,
|
|
41
|
+
`$$blockmath$$`, and `` ```fence `` so token-by-token streaming output
|
|
42
|
+
never flashes raw markdown chars. Re-implemented (NOT
|
|
43
|
+
`streamdown`-dep) so we don't take a runtime dependency on a Vercel
|
|
44
|
+
package we compete with. (#TBD)
|
|
45
|
+
- **`<CodeBlock>` + `<InlineCode>` (`src/lib/markdown/`)** — fenced code
|
|
46
|
+
ships Shiki SSR-friendly highlight (lazy `import("shiki")` — peer-dep
|
|
47
|
+
optional, graceful plain-`<pre>` fallback), language label header,
|
|
48
|
+
Copy → Check 2s button per `shadcn.io` AI code-block pattern. Inline
|
|
49
|
+
`<code>` is styled distinct from blocks. (#TBD)
|
|
50
|
+
- **`<MathInline>` + `<MathBlock>`** — lazy-load KaTeX, render to safe
|
|
51
|
+
HTML, fall back to `<code>` / `<pre>` plain when peer-dep missing. (#TBD)
|
|
52
|
+
- **`<MermaidDiagram>`** — lazy-load Mermaid with `securityLevel:
|
|
53
|
+
"strict"`, render to SVG. Failed parse or missing peer falls back to
|
|
54
|
+
a labeled `<pre>` block. (#TBD)
|
|
55
|
+
- **11 Vercel-compat UIMessagePart types** + 10 type guards in
|
|
56
|
+
`src/types/chat.ts` (`UIMessage`, `UIMessagePart`, `TextUIPart`,
|
|
57
|
+
`ReasoningUIPart`, `ToolUIPart`, `DataUIPart`, `FileUIPart`,
|
|
58
|
+
`ReasoningFileUIPart`, `SourceUrlUIPart`, `SourceDocumentUIPart`,
|
|
59
|
+
`StepStartUIPart`, `CustomContentUIPart`, `ProviderMetadata`,
|
|
60
|
+
`ToolInvocationState`, `MessageRole`). Field-for-field compatible
|
|
61
|
+
with `useChat()` from `@ai-sdk/react` — zero-adapter interop. (#TBD)
|
|
62
|
+
|
|
63
|
+
### Changed
|
|
64
|
+
|
|
65
|
+
- **Taxonomy**: `ChatMessage` moves from `primitives/` → `composites/`.
|
|
66
|
+
Composite layer is the correct home — internal deps on `<Button>`,
|
|
67
|
+
native `<details>`, our `<Card>` patterns. README catalog counts
|
|
68
|
+
adjust automatically via the structure gate (`pnpm sync:readme`). (#TBD)
|
|
69
|
+
- **`registry/chat-message.json`** — descriptor now lists 12 source
|
|
70
|
+
files + 6 lib files, declares `lucide-react` + `safe-href` + `button`
|
|
71
|
+
registry-deps. (#TBD)
|
|
72
|
+
|
|
73
|
+
### Breaking changes
|
|
74
|
+
|
|
75
|
+
- **`Message` type removed.** `import type { Message } from "@usetheo/ui"`
|
|
76
|
+
now fails — use `UIMessage` instead. TypeScript will hint
|
|
77
|
+
`Did you mean 'UIMessage'?`.
|
|
78
|
+
- **`message.content` removed.** Replace every callsite:
|
|
79
|
+
|
|
80
|
+
```diff
|
|
81
|
+
- { id, role: "user", content: "hello", timestamp: "10:00" }
|
|
82
|
+
+ { id, role: "user", parts: [{ type: "text", text: "hello" }] }
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Internal callsites already migrated: `agent-stream`,
|
|
86
|
+
`chat-thread.stories`, `theo-code-shell.data`, `task-running.stories`,
|
|
87
|
+
`task-starting.stories`, `task-completed.stories`. For mockup data
|
|
88
|
+
with arbitrary JSX content, use the composable form:
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
<ChatMessage.Root from="assistant">
|
|
92
|
+
<ChatMessage.Content variant="contained">
|
|
93
|
+
<div>any JSX here</div>
|
|
94
|
+
</ChatMessage.Content>
|
|
95
|
+
</ChatMessage.Root>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
- **`message.model` / `message.timestamp` no longer rendered** by
|
|
99
|
+
`<ChatMessage>` — fold them into custom UI under the message body, or
|
|
100
|
+
attach via `metadata?: unknown` (consumer-typed) and read from there.
|
|
101
|
+
- **`./components/primitives/chat-message/`** deleted. Imports must move
|
|
102
|
+
to `./components/composites/chat-message/` (the public `@usetheo/ui`
|
|
103
|
+
barrel handles this; only relative imports inside the repo need
|
|
104
|
+
updating).
|
|
105
|
+
|
|
106
|
+
### Notes
|
|
107
|
+
|
|
108
|
+
- **License attribution**: a `NOTICE` file ships at the package root
|
|
109
|
+
with Apache-2.0 attribution to `vercel/ai-elements` for the
|
|
110
|
+
structural-shell components forked, and to `vercel/ai` for the
|
|
111
|
+
`UIMessage` shape mirrored. Both upstream and TheoUI are Apache-2.0
|
|
112
|
+
— compatible.
|
|
113
|
+
- **Reference clones** of `vercel/ai-elements` and `vercel/ai` live in
|
|
114
|
+
`referencia/` (read-only). Not shipped in the npm tarball (excluded
|
|
115
|
+
via the `files` field).
|
|
116
|
+
|
|
10
117
|
## [0.5.1-next.0] - 2026-05-22
|
|
11
118
|
|
|
12
119
|
Patch — RFC 0008 follow-up. The 0.5.0-next.0 release declared `tailwindcss@^4`
|
package/NOTICE
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
@usetheo/ui
|
|
2
|
+
Copyright 2026 usetheo.dev
|
|
3
|
+
|
|
4
|
+
This product includes software developed at Vercel, Inc.
|
|
5
|
+
(https://vercel.com).
|
|
6
|
+
|
|
7
|
+
The `<ChatMessage>` composite's structural shell (Message, MessageContent,
|
|
8
|
+
MessageActions, MessageAction, MessageBranch*, MessageResponse,
|
|
9
|
+
MessageToolbar) was adapted from Vercel's `ai-elements` package, available
|
|
10
|
+
at https://github.com/vercel/ai-elements, licensed under the Apache License,
|
|
11
|
+
Version 2.0. The original code lives in `packages/elements/src/message.tsx`.
|
|
12
|
+
|
|
13
|
+
The `UIMessage` + `UIMessagePart` type surface in `src/types/chat.ts` mirrors
|
|
14
|
+
the canonical shape declared in `vercel/ai` `packages/ai/src/ui/ui-messages.ts`
|
|
15
|
+
(also Apache-2.0) so consumers using `useChat()` from `@ai-sdk/react` get
|
|
16
|
+
zero-adapter interop with `<ChatMessage>`.
|
|
17
|
+
|
|
18
|
+
`@usetheo/ui` itself is licensed under the Apache License, Version 2.0, the
|
|
19
|
+
same terms — see LICENSE.
|
|
20
|
+
|
|
21
|
+
This product also bundles or peer-depends on the following third-party
|
|
22
|
+
libraries, distributed under their own licenses:
|
|
23
|
+
|
|
24
|
+
- lucide-react (ISC, https://lucide.dev/)
|
|
25
|
+
- class-variance-authority (Apache-2.0)
|
|
26
|
+
- clsx (MIT)
|
|
27
|
+
- cmdk (MIT)
|
|
28
|
+
- tailwind-merge (MIT)
|
|
29
|
+
- tailwindcss-animate (MIT)
|
|
30
|
+
- radix-ui/* (MIT)
|
|
31
|
+
- zod (MIT)
|
|
32
|
+
- mdast-util-from-markdown / mdast-util-gfm / mdast-util-to-hast / hast-util-sanitize / hast-util-to-jsx-runtime / micromark-extension-gfm (MIT, optional peer-deps)
|
|
33
|
+
- shiki (MIT, optional peer-dep)
|
|
34
|
+
- katex (MIT, optional peer-dep)
|
|
35
|
+
- mermaid (MIT, optional peer-dep)
|
|
36
|
+
- roughjs (MIT, optional peer-dep)
|
|
37
|
+
- perfect-freehand (MIT, optional peer-dep)
|
|
38
|
+
- geist (font) (SIL OFL 1.1, self-hosted)
|
package/README.md
CHANGED
|
@@ -13,8 +13,8 @@ A React component library built for AI agent surfaces and cloud dashboards. **10
|
|
|
13
13
|
<!-- BEGIN:counts -->
|
|
14
14
|
[](./LICENSE)
|
|
15
15
|
[](https://react.dev)
|
|
16
|
-
[](#quality-gates)
|
|
17
|
+
[](#component-catalog)
|
|
18
18
|
[](https://ui.shadcn.com/docs/registry)
|
|
19
19
|
<!-- END:counts -->
|
|
20
20
|
|
|
@@ -133,31 +133,31 @@ import { ThemeProvider, ThemeScript } from "@usetheo/ui";
|
|
|
133
133
|
## Component catalog
|
|
134
134
|
|
|
135
135
|
<!-- BEGIN:component-catalog-intro -->
|
|
136
|
-
**
|
|
136
|
+
**120 components**, organized by mechanical rule: a *primitive* imports no other `@usetheo/ui` component; a *composite* does.
|
|
137
137
|
<!-- END:component-catalog-intro -->
|
|
138
138
|
|
|
139
139
|
<details>
|
|
140
140
|
<summary>
|
|
141
141
|
<!-- BEGIN:primitives-count -->
|
|
142
|
-
**Primitives** (
|
|
142
|
+
**Primitives** (79) — building blocks
|
|
143
143
|
<!-- END:primitives-count -->
|
|
144
144
|
</summary>
|
|
145
145
|
|
|
146
146
|
<!-- BEGIN:primitives -->
|
|
147
147
|
`AgentErrorCard` · `AgentEvent` · `AgentHandoff` · `AgentProfile` · `AgentStartingState` · `AgentStreaming`
|
|
148
148
|
`ArtifactPreview` · `AttachmentChip` · `AuditLogEntry` · `AutoCompactNotice` · `Avatar` · `Badge`
|
|
149
|
-
`BrowserControls` · `BuildLogStream` · `Button` · `CapabilityIndicator` · `Card` · `
|
|
150
|
-
`
|
|
151
|
-
`
|
|
152
|
-
`
|
|
153
|
-
`
|
|
154
|
-
`
|
|
155
|
-
`
|
|
156
|
-
`
|
|
157
|
-
`
|
|
158
|
-
`
|
|
159
|
-
`
|
|
160
|
-
`
|
|
149
|
+
`BrowserControls` · `BuildLogStream` · `Button` · `CapabilityIndicator` · `Card` · `ChatThread`
|
|
150
|
+
`Checkbox` · `ContextCard` · `ContextWindowBar` · `CostMeter` · `CreatedFilesCard` · `CronJobCard`
|
|
151
|
+
`Dialog` · `DiffViewer` · `EmptyState` · `FolderContextCard` · `FolderSelector` · `FormField`
|
|
152
|
+
`HookConfig` · `HookEventLog` · `Input` · `IntentSelector` · `Label` · `LaneBoard`
|
|
153
|
+
`LoginSplit` · `MCPServerCard` · `MemoryEditor` · `MentionMenu` · `MetricsPanel` · `ModelCard`
|
|
154
|
+
`ModelSelector` · `PermissionMatrix` · `ProgressChecklist` · `ProjectSwitcher` · `QuickActionChips` · `RadioGroup`
|
|
155
|
+
`RecentFoldersList` · `RuleCard` · `RunStats` · `RunningTasksPanel` · `ScrollArea` · `Select`
|
|
156
|
+
`SessionListItem` · `SessionTimeline` · `Sheet` · `Sidebar` · `Skeleton` · `SkillCard`
|
|
157
|
+
`SocialAuthRow` · `StepsRail` · `SubAgentDispatch` · `Switch` · `SystemPromptEditor` · `Tabs`
|
|
158
|
+
`TaskNode` · `TaskPlan` · `TerminalPanel` · `Textarea` · `Toast` · `Toaster`
|
|
159
|
+
`TokenUsageChart` · `ToolCall` · `ToolCallCard` · `ToolResult` · `ToolsList` · `Tooltip`
|
|
160
|
+
`TopNav`
|
|
161
161
|
<!-- END:primitives -->
|
|
162
162
|
|
|
163
163
|
</details>
|
|
@@ -165,12 +165,12 @@ import { ThemeProvider, ThemeScript } from "@usetheo/ui";
|
|
|
165
165
|
<details>
|
|
166
166
|
<summary>
|
|
167
167
|
<!-- BEGIN:composites-count -->
|
|
168
|
-
**Composites** (
|
|
168
|
+
**Composites** (41) — assembled flows
|
|
169
169
|
<!-- END:composites-count -->
|
|
170
170
|
</summary>
|
|
171
171
|
|
|
172
172
|
<!-- BEGIN:composites -->
|
|
173
|
-
`AgentComposer` · `AgentEditor` · `AgentStream` · `AgentTimeline` · `ApprovalCard` · `ChatComposer` · `CommandPalette` · `CronJobsList` · `DeploymentRow` · `DomainConfig` · `EnvVarEditor` · `MCPServerList` · `PermissionModal` · `PreviewEnvCard` · `PreviewPanel` · `ProjectCard` · `RollbackUI` · `RuleEditor` · `SkillEditor` · `SkillsList` · `TaskHeader`
|
|
173
|
+
`AgentComposer` · `AgentEditor` · `AgentStream` · `AgentTimeline` · `ApprovalCard` · `ChatComposer` · `ChatMessage` · `ChatMessageAction` · `ChatMessageActions` · `ChatMessageBranch` · `ChatMessageBranchContent` · `ChatMessageBranchNext` · `ChatMessageBranchPage` · `ChatMessageBranchPrevious` · `ChatMessageBranchSelector` · `ChatMessageContent` · `ChatMessageResponse` · `ChatMessageRoot` · `ChatMessageToolbar` · `CommandPalette` · `CronJobsList` · `DataPart` · `DeploymentRow` · `DomainConfig` · `EnvVarEditor` · `FilePart` · `MCPServerList` · `PermissionModal` · `PreviewEnvCard` · `PreviewPanel` · `ProjectCard` · `ReasoningPart` · `RollbackUI` · `RuleEditor` · `SkillEditor` · `SkillsList` · `SourceDocumentPart` · `SourceUrlPart` · `TaskHeader` · `TextPart` · `ToolCallPart`
|
|
174
174
|
<!-- END:composites -->
|
|
175
175
|
|
|
176
176
|
</details>
|