@kat-ai/react 0.1.0 → 0.1.1
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 +89 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# @kat-ai/react
|
|
2
|
+
|
|
3
|
+
React UI components for KAT chat experiences.
|
|
4
|
+
|
|
5
|
+
This package exports presentation components for citations and follow-up choices. It is designed to sit on top of your own API route or server integration built with `@kat-ai/sdk`.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @kat-ai/sdk @kat-ai/react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Peer dependencies:
|
|
14
|
+
|
|
15
|
+
- `react >= 18`
|
|
16
|
+
- `react-dom >= 18`
|
|
17
|
+
|
|
18
|
+
## Components
|
|
19
|
+
|
|
20
|
+
- `CitationDisplay`: renders clickable citation chips for assistant answers
|
|
21
|
+
- `CitationDialog`: shows source content, metadata, and PDF pages in a modal
|
|
22
|
+
- `MultiChoiceWidget`: renders follow-up options with an "Other" free-text path
|
|
23
|
+
|
|
24
|
+
## Quick Start
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { useState } from 'react';
|
|
28
|
+
import type { Citation, MultiChoiceOption } from '@kat-ai/sdk';
|
|
29
|
+
import {
|
|
30
|
+
CitationDialog,
|
|
31
|
+
CitationDisplay,
|
|
32
|
+
MultiChoiceWidget,
|
|
33
|
+
} from '@kat-ai/react';
|
|
34
|
+
|
|
35
|
+
export function AnswerCard({
|
|
36
|
+
answer,
|
|
37
|
+
citations,
|
|
38
|
+
options,
|
|
39
|
+
onSelect,
|
|
40
|
+
}: {
|
|
41
|
+
answer: string;
|
|
42
|
+
citations: Citation[];
|
|
43
|
+
options?: MultiChoiceOption[];
|
|
44
|
+
onSelect: (value: string) => void;
|
|
45
|
+
}) {
|
|
46
|
+
const [selected, setSelected] = useState<Citation | null>(null);
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<div>
|
|
50
|
+
<p>{answer}</p>
|
|
51
|
+
|
|
52
|
+
<CitationDisplay
|
|
53
|
+
citations={citations}
|
|
54
|
+
onCitationClick={setSelected}
|
|
55
|
+
/>
|
|
56
|
+
|
|
57
|
+
<CitationDialog
|
|
58
|
+
citation={selected ?? undefined}
|
|
59
|
+
url={selected?.reference?.file?.signedUrl ?? null}
|
|
60
|
+
isOpen={!!selected}
|
|
61
|
+
onClose={() => setSelected(null)}
|
|
62
|
+
/>
|
|
63
|
+
|
|
64
|
+
{options && options.length > 0 ? (
|
|
65
|
+
<MultiChoiceWidget options={options} onSelect={onSelect} />
|
|
66
|
+
) : null}
|
|
67
|
+
</div>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Integration Model
|
|
73
|
+
|
|
74
|
+
`@kat-ai/react` does not ship a chat hook or data-fetching client. The normal pattern is:
|
|
75
|
+
|
|
76
|
+
1. Call `runAgent()` or `runAgentStreaming()` in your server code with `@kat-ai/sdk`.
|
|
77
|
+
2. Return `toChatResponse(result)` or a streaming adapter response from your API route.
|
|
78
|
+
3. Render `CitationDisplay`, `CitationDialog`, and `MultiChoiceWidget` in your React UI.
|
|
79
|
+
|
|
80
|
+
## Related Packages
|
|
81
|
+
|
|
82
|
+
- `@kat-ai/sdk`: runtime, response adapters, and shared types
|
|
83
|
+
- `@kat-ai/cli`: app generation and manifest workflows
|
|
84
|
+
- `@kat-ai/eval`: evaluation utilities for KAT applications
|
|
85
|
+
|
|
86
|
+
## Docs
|
|
87
|
+
|
|
88
|
+
- Repository: [github.com/pinecone-io/KAT](https://github.com/pinecone-io/KAT)
|
|
89
|
+
- React docs: [docs-site/docs/api/react-components.md](https://github.com/pinecone-io/KAT/blob/main/docs-site/docs/api/react-components.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kat-ai/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React components and hooks for KAT agent experiences",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"react-markdown": "^9.0.0",
|
|
26
26
|
"rehype-katex": "^7.0.0",
|
|
27
27
|
"remark-math": "^6.0.0",
|
|
28
|
-
"@kat-ai/sdk": "0.1.
|
|
28
|
+
"@kat-ai/sdk": "0.1.1"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/react": "^18.2.0",
|