@anvia/react-ui 1.1.6 → 1.1.8

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 (2) hide show
  1. package/README.md +33 -103
  2. package/package.json +22 -22
package/README.md CHANGED
@@ -1,6 +1,20 @@
1
1
  # @anvia/react-ui
2
2
 
3
- Composable, headless React UI primitives for Anvia applications.
3
+ Compose AI chat interfaces with headless React primitives. Bring your own design system for threads,
4
+ messages, rich composition, attachments, approvals, and questions.
5
+
6
+ ## Install
7
+
8
+ ```sh
9
+ pnpm add @anvia/react-ui @anvia/react @anvia/client @anvia/core react react-dom
10
+ ```
11
+
12
+ Requires React and React DOM 18 or newer. For editable, styled components, use
13
+ `pnpm dlx @anvia/cli ui add chat` in an application configured with shadcn.
14
+
15
+ ## Quickstart
16
+
17
+ Connect a chat controller to your application's Anvia streaming endpoint:
4
18
 
5
19
  ```tsx
6
20
  import { createHttpClientTransport } from "@anvia/client";
@@ -12,24 +26,15 @@ import {
12
26
  ThreadPrimitive,
13
27
  } from "@anvia/react-ui";
14
28
 
15
- export function SupportChat() {
16
- const chat = useChat({
17
- transport: createHttpClientTransport({ endpoint: "/api/chat" }),
18
- });
19
- const triggers = [
20
- {
21
- id: "people",
22
- char: "@",
23
- items: [{ id: "user_ada", label: "Ada Lovelace", data: { type: "user" } }],
24
- },
25
- ];
29
+ const transport = createHttpClientTransport({ endpoint: "/api/chat" });
26
30
 
31
+ export function SupportChat() {
32
+ const chat = useChat({ transport });
27
33
  return (
28
34
  <ChatProvider controller={chat}>
29
35
  <ThreadPrimitive.Root>
30
36
  <ThreadPrimitive.Viewport>
31
37
  <ThreadPrimitive.Empty>Start a conversation.</ThreadPrimitive.Empty>
32
- <ThreadPrimitive.Suggestions />
33
38
  <ThreadPrimitive.Messages>
34
39
  <MessagePrimitive.Root>
35
40
  <MessagePrimitive.Content>
@@ -39,13 +44,9 @@ export function SupportChat() {
39
44
  </MessagePrimitive.Root>
40
45
  </ThreadPrimitive.Messages>
41
46
  <ThreadPrimitive.Error />
42
- <ThreadPrimitive.ScrollToBottom>Jump to latest</ThreadPrimitive.ScrollToBottom>
43
47
  </ThreadPrimitive.Viewport>
44
- <ComposerPrimitive.Root triggers={triggers}>
45
- <ComposerPrimitive.Attachments />
46
- <ComposerPrimitive.AddAttachment>Attach</ComposerPrimitive.AddAttachment>
47
- <ComposerPrimitive.Input maxRows={6} placeholder="Send a message..." />
48
- <ComposerPrimitive.TriggerMenu />
48
+ <ComposerPrimitive.Root>
49
+ <ComposerPrimitive.Input placeholder="Send a message..." />
49
50
  <ComposerPrimitive.Stop>Stop</ComposerPrimitive.Stop>
50
51
  <ComposerPrimitive.Submit>Send</ComposerPrimitive.Submit>
51
52
  </ComposerPrimitive.Root>
@@ -55,91 +56,20 @@ export function SupportChat() {
55
56
  }
56
57
  ```
57
58
 
58
- The primitives are headless: pass `className` or `asChild` for design-system integration. Their
59
- small semantic DOM contract consists of ARIA attributes, `data-state`, and `data-role`; there is no
60
- package stylesheet. For editable, styled application components, run
61
- `pnpm dlx @anvia/cli add chat`.
62
-
63
- Control `ComposerPrimitive.Root` with `input`/`attachments` props when needed, and use
64
- `submitMessage` for custom composer payloads. Use `keepMounted` on optional collections when empty
65
- wrappers are useful for layout.
59
+ Style primitives with `className`, or use `asChild` to compose your own elements. The package ships
60
+ semantic attributes and behavior; it has no package stylesheet.
66
61
 
67
- `ComposerPrimitive.Input` is a Tiptap-backed rich composer. Configure `ComposerPrimitive.Root` with `triggers` to
68
- support inline `@`, `/`, `$`, or other entity chips; selected entities are submitted under
69
- `metadata.composer.entities`. Entity `data` must be finite strict JSON; class instances, sparse or
70
- custom-prototype arrays, accessors, symbols, cycles, `undefined`, and non-finite numbers are
71
- rejected. Use `ComposerPrimitive.TextareaInput` when you need the previous native textarea behavior.
62
+ ## Capabilities
72
63
 
73
- Streaming smoothing is opt-in and display-only. Keep `useChat` as the owner of transport and
74
- `UIMessage[]` state. Keep the lifecycle mounted after streaming stops so its buffered tail drains;
75
- `MessagePrimitive.Parts` also keeps later tool parts behind text that has not been revealed yet:
76
-
77
- ```tsx
78
- <MessagePrimitive.Parts
79
- stream={{
80
- isStreaming:
81
- chat.status === "streaming" &&
82
- message.role === "assistant" &&
83
- chat.messages.at(-1)?.id === message.id,
84
- resetKey: message.id,
85
- flushImmediately: chat.status === "error",
86
- }}
87
- >
88
- {(part) => (part.type === "text" ? <MessagePrimitive.Markdown /> : <MessagePrimitive.Part />)}
89
- </MessagePrimitive.Parts>
90
- ```
91
-
92
- For app-owned text state, `StreamMarkdown` is available from `@anvia/react-ui/stream`. It is a
93
- context-free renderer: pass the already displayed text as `content` and set `live` only for its
94
- growing tail. Style `[data-state="revealing"]` in the owning application; `@anvia/cli` installs this
95
- animation with its `markdown`, `message`, `thread`, and `chat` items.
96
-
97
- ## Graph explorer
98
-
99
- `@anvia/react/graph-explorer` owns graph exploration behavior without choosing a layout or rendering
100
- library. `@anvia/react-ui/graph-explorer` supplies optional headless composition primitives. Provide
101
- a browser-safe `explore` callback, normally backed by an application HTTP route, then render the
102
- controller's nodes and relationships with React Flow, Sigma.js, SVG, canvas, or any other renderer:
103
-
104
- ```tsx
105
- import type { GraphExplorer } from "@anvia/graph";
106
- import { useGraphExplorer } from "@anvia/react/graph-explorer";
107
- import {
108
- GraphExplorerNodePrimitive,
109
- GraphExplorerPrimitive,
110
- GraphExplorerProvider,
111
- } from "@anvia/react-ui/graph-explorer";
112
-
113
- export function KnowledgeGraph({ explore }: { explore: GraphExplorer["explore"] }) {
114
- const controller = useGraphExplorer({ explore });
115
- return (
116
- <GraphExplorerProvider controller={controller}>
117
- <GraphExplorerPrimitive.Root>
118
- <GraphExplorerPrimitive.Search />
119
- <GraphExplorerPrimitive.Viewport>
120
- {controller.nodes.map((node) => (
121
- <GraphExplorerNodePrimitive.Root key={node.id} nodeId={node.id} asChild>
122
- {/* This can instead be an element supplied to a renderer such as React Flow. */}
123
- <article>{node.type}</article>
124
- </GraphExplorerNodePrimitive.Root>
125
- ))}
126
- </GraphExplorerPrimitive.Viewport>
127
- <GraphExplorerPrimitive.Empty />
128
- <GraphExplorerPrimitive.Status />
129
- </GraphExplorerPrimitive.Root>
130
- </GraphExplorerProvider>
131
- );
132
- }
133
- ```
64
+ - Threads, message parts, Markdown, attachments, and message actions.
65
+ - Rich text composition with inline entity triggers and an optional native textarea.
66
+ - Approval and question controls, completion UI, thread lists, and context meters.
67
+ - Images, selection toolbars, and optional streaming presentation smoothing.
68
+ - Graph exploration primitives through `@anvia/react-ui/graph-explorer`; install `@anvia/graph`
69
+ when using that integration.
134
70
 
135
- Call `controller.explore({ mode: "overview" })` to load an initial view. Overview results replace the
136
- current graph; expansion results merge by opaque node and relationship IDs. Starting a request
137
- aborts the previous request, while `refresh()` repeats the latest overview with a fresh signal.
138
- Expansions inherit filters and limits from the latest successful overview unless explicitly
139
- overridden. `matchedNodeIds` lets renderers dim, hide, or highlight local search results without
140
- prescribing one visual behavior. Validate data returned by an HTTP route before resolving the
141
- `explore` callback; the headless controller intentionally trusts its typed boundary. Renderers that
142
- do not expose React elements for individual nodes can consume the controller directly without the
143
- node primitives.
71
+ ## Learn more
144
72
 
145
- `MessagePrimitive.Actions` displays its action group only for the final assistant message in each user exchange, after streaming completes. Earlier completed replies retain their actions. Use `MessagePrimitive.Copy` or `MessagePrimitive.Regenerate` directly when composing custom action visibility.
73
+ - [UI composition guide](https://github.com/anvia-hq/anvia/blob/main/docs/packages/react-ui.md)
74
+ - [React controllers](https://github.com/anvia-hq/anvia/tree/main/packages/react#readme)
75
+ - [Editable components CLI](https://github.com/anvia-hq/anvia/tree/main/packages/cli#readme)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anvia/react-ui",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "description": "Composable, headless React UI primitives for Anvia applications.",
5
5
  "author": "anvia",
6
6
  "license": "MIT",
@@ -69,27 +69,27 @@
69
69
  }
70
70
  },
71
71
  "dependencies": {
72
- "@radix-ui/react-slot": "^1.3.3",
73
- "@tiptap/core": "^3.31.3",
74
- "@tiptap/extension-document": "^3.31.3",
75
- "@tiptap/extension-hard-break": "^3.31.3",
76
- "@tiptap/extension-mention": "^3.31.3",
77
- "@tiptap/extension-paragraph": "^3.31.3",
78
- "@tiptap/extension-placeholder": "^3.31.3",
79
- "@tiptap/extension-text": "^3.31.3",
80
- "@tiptap/pm": "^3.31.3",
81
- "@tiptap/react": "^3.31.3",
82
- "@tiptap/suggestion": "^3.31.3",
83
- "marked": "^18.0.14",
72
+ "@radix-ui/react-slot": "^1.5.0",
73
+ "@tiptap/core": "^3.32.0",
74
+ "@tiptap/extension-document": "^3.32.0",
75
+ "@tiptap/extension-hard-break": "^3.32.0",
76
+ "@tiptap/extension-mention": "^3.32.0",
77
+ "@tiptap/extension-paragraph": "^3.32.0",
78
+ "@tiptap/extension-placeholder": "^3.32.0",
79
+ "@tiptap/extension-text": "^3.32.0",
80
+ "@tiptap/pm": "^3.32.0",
81
+ "@tiptap/react": "^3.32.0",
82
+ "@tiptap/suggestion": "^3.32.0",
83
+ "marked": "^18.1.1",
84
84
  "react-markdown": "^10.1.0",
85
85
  "remark-gfm": "^4.0.1"
86
86
  },
87
87
  "peerDependencies": {
88
88
  "react": ">=18",
89
89
  "react-dom": ">=18",
90
- "@anvia/graph": "^1.1.4",
91
- "@anvia/client": "^1.2.0",
92
- "@anvia/react": "^1.1.3"
90
+ "@anvia/client": "^1.4.4",
91
+ "@anvia/graph": "^1.1.5",
92
+ "@anvia/react": "^1.1.4"
93
93
  },
94
94
  "peerDependenciesMeta": {
95
95
  "@anvia/graph": {
@@ -97,10 +97,10 @@
97
97
  }
98
98
  },
99
99
  "devDependencies": {
100
- "@testing-library/react": "^16.3.2",
100
+ "@testing-library/react": "^16.3.3",
101
101
  "@types/node": "^24.9.1",
102
- "@types/react": "^19.2.14",
103
- "@types/react-dom": "^19.2.3",
102
+ "@types/react": "^19.3.0",
103
+ "@types/react-dom": "^19.3.0",
104
104
  "@vitest/coverage-v8": "4.1.11",
105
105
  "happy-dom": "20.9.0",
106
106
  "react": "19.3.0",
@@ -108,9 +108,9 @@
108
108
  "tsup": "^8.5.0",
109
109
  "typescript": "^5.9.3",
110
110
  "vitest": "^4.1.11",
111
- "@anvia/client": "1.2.0",
112
- "@anvia/react": "1.1.3",
113
- "@anvia/graph": "1.1.4"
111
+ "@anvia/client": "1.4.4",
112
+ "@anvia/graph": "1.1.5",
113
+ "@anvia/react": "1.1.4"
114
114
  },
115
115
  "scripts": {
116
116
  "build": "tsup src/index.ts src/attachment/index.ts src/chat/index.ts src/completion/index.ts src/graph-explorer/index.ts src/human-input/index.ts src/image/index.ts src/message/index.ts src/selection-toolbar/index.ts src/shared.ts src/stream/index.ts src/thread-list/index.ts --format esm --dts --sourcemap --clean --external react --external react-dom",