@godspeedai/cognate-ui-astryx 0.1.1 → 0.2.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/README.md +69 -8
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,19 +1,80 @@
|
|
|
1
1
|
# @godspeedai/cognate-ui-astryx
|
|
2
2
|
|
|
3
|
-
Reference
|
|
3
|
+
Reference chat-application surfaces for Cognate, built with the [Astryx](https://www.npmjs.com/package/@astryxdesign/core) design system: an application shell, chat panel, approval cards, artifact viewer, and run/state inspectors, with light/dark theming included.
|
|
4
|
+
|
|
5
|
+
**When to use this package:** you want a working, accessible Cognate UI out of the box, or a concrete reference while composing your own. It is a renderer, not the ontology — everything here composes [`@godspeedai/cognate-react`](https://www.npmjs.com/package/@godspeedai/cognate-react) hooks and Cognate types only, so swapping the design system means replacing this package and nothing else. For bindings without components, use `@godspeedai/cognate-react` directly.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
bun add @godspeedai/cognate-ui-astryx
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Requires [Bun](https://bun.sh) >= 1.4.0 and **React 19.3.0** with **react-dom 19.3.0** (both declared as peer dependencies). Astryx itself (`@astryxdesign/core`, `@astryxdesign/theme-neutral`) is a regular dependency. The packages ship Bun-native TypeScript source; if you type-check outside Bun, add `@types/bun` and `@types/node`.
|
|
14
|
+
|
|
15
|
+
## Quick start
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { useState } from "react";
|
|
19
|
+
import { createClient } from "@godspeedai/cognate-client";
|
|
20
|
+
import { CognateProvider } from "@godspeedai/cognate-react";
|
|
21
|
+
import { Approvals, ChatPanel, CognateShell, RunInspector } from "@godspeedai/cognate-ui-astryx";
|
|
22
|
+
|
|
23
|
+
const client = createClient({ service: runtime.service, caller }); // runtime from @godspeedai/cognate-runtime-bun
|
|
24
|
+
|
|
25
|
+
function App() {
|
|
26
|
+
const [runId, setRunId] = useState<string>();
|
|
27
|
+
return (
|
|
28
|
+
<CognateProvider client={client}>
|
|
29
|
+
<CognateShell title="Support copilot">
|
|
30
|
+
<ChatPanel agent="agent.support" placeholder="Ask about a refund" onRunStarted={setRunId} />
|
|
31
|
+
<Approvals runId={runId} />
|
|
32
|
+
<RunInspector runId={runId} />
|
|
33
|
+
</CognateShell>
|
|
34
|
+
</CognateProvider>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Type a message and the panel starts a run of the agent; streamed assistant text appears as it is emitted; approval-style continuations render as Approve/Reject cards that resolve through the client; the inspector follows status, open continuations, and artifacts. The shell works under server-side rendering (`renderToString` produces the accessible markup in light and dark modes) and hydrates against a live runtime.
|
|
4
40
|
|
|
5
41
|
## Surfaces
|
|
6
42
|
|
|
7
|
-
|
|
43
|
+
| Component | Purpose |
|
|
44
|
+
| --- | --- |
|
|
45
|
+
| `CognateShell({ title, mode?, onModeChange?, children })` | Astryx theme wrapper with a header (title, light/dark toggle) and main region; stamps `data-cognate-theme` on its root |
|
|
46
|
+
| `ChatPanel({ agent, placeholder?, onRunStarted? })` | message form that starts runs via `useAgent`; shows the streamed reply |
|
|
47
|
+
| `ApprovalCard({ continuation, onResolve })` | one continuation's type and payload with Approve/Reject buttons |
|
|
48
|
+
| `Approvals({ runId })` | all open approval-style continuations of a run as cards, resolved through `useContinuations` |
|
|
49
|
+
| `ArtifactViewer({ artifactId })` | `text/*` as text, JSON objects as an accessible key/value table, anything else as a download link |
|
|
50
|
+
| `RunInspector({ runId })` | status, error, open-continuation and artifact counts |
|
|
51
|
+
| `StateInspector({ runId })` | the run's derived shared state as formatted JSON |
|
|
52
|
+
|
|
53
|
+
## Serving the stylesheets
|
|
54
|
+
|
|
55
|
+
Astryx ships pre-compiled CSS (no style build step). `stylesheetPaths()` from the `./styles` subpath resolves the absolute paths of the two stylesheets a host page must link or serve:
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
import { stylesheetPaths } from "@godspeedai/cognate-ui-astryx/styles";
|
|
59
|
+
|
|
60
|
+
for (const path of stylesheetPaths()) registerStylesheet(path); // host-app specific
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Without those stylesheets the components render and function, but not with Astryx's intended look.
|
|
8
64
|
|
|
9
|
-
##
|
|
65
|
+
## Limitations
|
|
10
66
|
|
|
11
|
-
|
|
67
|
+
- These are reference surfaces, not a component framework: there is no public theming API beyond Astryx's own `Theme`/`mode` mechanism surfaced by `CognateShell`.
|
|
68
|
+
- The chat panel covers one agent and the latest run's text; multi-run conversation views are yours to compose with `@godspeedai/cognate-react` hooks.
|
|
69
|
+
- Only text, JSON-object, and download-link artifact rendering is provided.
|
|
12
70
|
|
|
13
|
-
##
|
|
71
|
+
## Related packages
|
|
14
72
|
|
|
15
|
-
|
|
73
|
+
- [`@godspeedai/cognate-react`](https://www.npmjs.com/package/@godspeedai/cognate-react) — the hooks every surface here is built from.
|
|
74
|
+
- [`@godspeedai/cognate-client`](https://www.npmjs.com/package/@godspeedai/cognate-client) — the headless client underneath.
|
|
75
|
+
- [`@godspeedai/cognate-profile-copilot`](https://www.npmjs.com/package/@godspeedai/cognate-profile-copilot) — a composed application profile that ships these surfaces.
|
|
76
|
+
- [`@godspeedai/cognate`](https://www.npmjs.com/package/@godspeedai/cognate) — the SDK umbrella.
|
|
16
77
|
|
|
17
|
-
##
|
|
78
|
+
## License
|
|
18
79
|
|
|
19
|
-
|
|
80
|
+
Apache-2.0
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@godspeedai/cognate-ui-astryx",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Reference Astryx surfaces over @godspeedai/cognate-react: shell, chat, approvals, artifacts, run and state inspection, themes (spec §25.3). A renderer, not the ontology.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@astryxdesign/core": "0.6.3",
|
|
27
27
|
"@astryxdesign/theme-neutral": "0.6.3",
|
|
28
|
-
"@godspeedai/cognate-client": "^0.
|
|
29
|
-
"@godspeedai/cognate-events": "^0.
|
|
30
|
-
"@godspeedai/cognate-react": "^0.
|
|
31
|
-
"@godspeedai/cognate-runtime-api": "^0.
|
|
28
|
+
"@godspeedai/cognate-client": "^0.2.0",
|
|
29
|
+
"@godspeedai/cognate-events": "^0.2.0",
|
|
30
|
+
"@godspeedai/cognate-react": "^0.2.0",
|
|
31
|
+
"@godspeedai/cognate-runtime-api": "^0.2.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@godspeedai/cognate-runtime-bun": "workspace:*",
|