@nonoun/native-chat 0.5.17 → 0.5.21
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 +47 -0
- package/dist/{adapter-mock-0s0RPkdx.js → adapter-mock-DQ_CxuNu.js} +336 -286
- package/dist/chat-input-element.d.ts +1 -0
- package/dist/chat-input-element.d.ts.map +1 -1
- package/dist/{chat-input-structured-element-A3nMG2WR.js → chat-input-structured-element-Xm4nCA2K.js} +236 -118
- package/dist/chat-panel-element.d.ts +6 -0
- package/dist/chat-panel-element.d.ts.map +1 -1
- package/dist/feed/chat-feed-element.d.ts.map +1 -1
- package/dist/gateway/adapter-chatgpt.d.ts +2 -3
- package/dist/gateway/adapter-chatgpt.d.ts.map +1 -1
- package/dist/gateway/adapter-claude.d.ts +2 -3
- package/dist/gateway/adapter-claude.d.ts.map +1 -1
- package/dist/gateway/controller.d.ts +0 -4
- package/dist/gateway/controller.d.ts.map +1 -1
- package/dist/gateway/index.d.ts +4 -3
- package/dist/gateway/index.d.ts.map +1 -1
- package/dist/gateway/runtime.d.ts +10 -0
- package/dist/gateway/runtime.d.ts.map +1 -1
- package/dist/gateway.js +4 -6
- package/dist/message/chat-input-structured-element.d.ts.map +1 -1
- package/dist/message/chat-message-activity-element.d.ts.map +1 -1
- package/dist/message/chat-message-element.d.ts.map +1 -1
- package/dist/message/chat-message-genui-element.d.ts.map +1 -1
- package/dist/message/chat-message-text-element.d.ts.map +1 -1
- package/dist/message/chat-messages-element.d.ts.map +1 -1
- package/dist/native-chat.css +89 -43
- package/dist/native-chat.js +1 -1
- package/dist/register.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,6 +24,53 @@ npm install @nonoun/native-chat @nonoun/native-ui
|
|
|
24
24
|
</native-chat-panel>
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
+
## Architecture
|
|
28
|
+
|
|
29
|
+
Components follow three patterns:
|
|
30
|
+
|
|
31
|
+
| Pattern | Elements | Description |
|
|
32
|
+
|---------|----------|-------------|
|
|
33
|
+
| **Orchestrator** | `native-chat-panel`, `n-chat-input` | Stamp their own children (header, feed, composer) and manage lifecycle. Host writes a single tag; JS builds the tree. |
|
|
34
|
+
| **Container** | `n-chat-feed`, `n-chat-messages`, `n-chat-message` | Arrange author-provided or panel-stamped children. CSS layout works without JS; JS adds auto-scroll, MutationObserver routing, action toolbars. |
|
|
35
|
+
| **Renderer** | `n-chat-message-text`, `n-chat-message-activity`, `n-chat-message-seed`, `n-chat-message-genui`, `n-chat-input-structured`, `n-chat-avatar` | Transform data (markdown, JSON, schema) into DOM. JS-essential — content is dynamic and stream-driven. |
|
|
36
|
+
|
|
37
|
+
Chat is a **real-time, stream-driven UI** — JavaScript is fundamental, not optional. See `docs/PRINCIPLES.md` for the exception clause covering interactive components.
|
|
38
|
+
|
|
39
|
+
## Gateway Mode (Claude + ChatGPT)
|
|
40
|
+
|
|
41
|
+
`native-chat-panel` can run fully managed send/stream behavior when `gateway` and `gateway-url` are set. All configuration is attribute-driven — no JavaScript required:
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<native-chat-panel
|
|
45
|
+
gateway="claude"
|
|
46
|
+
gateway-url="/api/anthropic"
|
|
47
|
+
model="claude-haiku-4-5-20251001"
|
|
48
|
+
models="claude-haiku-4-5-20251001,claude-sonnet-4-6-20250514,gpt-4.1-mini,gpt-4.1"
|
|
49
|
+
gateway-urls='{"claude":"/api/anthropic","gpt":"/api/openai"}'
|
|
50
|
+
open
|
|
51
|
+
></native-chat-panel>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
The `models` attribute accepts a comma-separated list of model IDs. The `gateway-urls` attribute is a JSON map of provider prefixes to URLs — when the user selects a model, the panel auto-resolves the correct gateway and URL from the prefix (e.g., `gpt-4.1` matches the `gpt` prefix → switches to `/api/openai`).
|
|
55
|
+
|
|
56
|
+
For advanced configuration, use JS properties:
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
const panel = document.querySelector('native-chat-panel');
|
|
60
|
+
panel.gatewayConfig = { maxTokens: 1024 };
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Required server routes
|
|
64
|
+
|
|
65
|
+
Use first-party backend routes in production (do not call providers directly from browser):
|
|
66
|
+
|
|
67
|
+
- `POST /api/anthropic/messages`
|
|
68
|
+
- `GET /api/anthropic/models`
|
|
69
|
+
- `POST /api/openai/chat/completions`
|
|
70
|
+
- `GET /api/openai/models`
|
|
71
|
+
|
|
72
|
+
Provider keys must stay server-side.
|
|
73
|
+
|
|
27
74
|
## Components
|
|
28
75
|
|
|
29
76
|
| Element | Description |
|