agentic-chat-ui-components 0.0.2-testing.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 +85 -0
- package/dist/index.es.js +26966 -0
- package/dist/index.es.js.map +1 -0
- package/dist/styles.css +1 -0
- package/dist/vite.svg +1 -0
- package/package.json +80 -0
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# Agentic Chat Components
|
|
2
|
+
|
|
3
|
+
A React component library for building AI chat interfaces with LangChain/LangGraph integration.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **Pre-styled chat UI components** - Sidebar, message bubbles, input fields, markdown rendering
|
|
8
|
+
- 🔄 **Streaming support** - Real-time AI response streaming
|
|
9
|
+
- 📎 **File uploads** - Built-in file handling and metadata
|
|
10
|
+
- 🎭 **Custom components** - Inject your own React components into chat messages
|
|
11
|
+
- 🧩 **Provider-based architecture** - Flexible state management with React Context
|
|
12
|
+
- 📝 **TypeScript** - Full type definitions included
|
|
13
|
+
- 🎨 **Tailwind CSS** - Pre-built styles, easy to customize
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install agentic-chat-components
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
**Peer dependencies** (install these separately):
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install react react-dom @langchain/core @langchain/langgraph @langchain/langgraph-sdk framer-motion lucide-react react-markdown react-spinners rehype-highlight remark-gfm sonner @radix-ui/react-label
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import {
|
|
31
|
+
Sidebar,
|
|
32
|
+
ChatProvider,
|
|
33
|
+
ChatRuntimeProvider,
|
|
34
|
+
ThreadProvider,
|
|
35
|
+
StreamProvider
|
|
36
|
+
} from '@karthik_maganahalli_prakash/chat-components';
|
|
37
|
+
import '@karthik_maganahalli_prakash/chat-components/styles.css';
|
|
38
|
+
|
|
39
|
+
function App() {
|
|
40
|
+
return (
|
|
41
|
+
<ChatProvider>
|
|
42
|
+
<ChatRuntimeProvider>
|
|
43
|
+
<ThreadProvider>
|
|
44
|
+
<StreamProvider>
|
|
45
|
+
<Sidebar />
|
|
46
|
+
</StreamProvider>
|
|
47
|
+
</ThreadProvider>
|
|
48
|
+
</ChatRuntimeProvider>
|
|
49
|
+
</ChatProvider>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Exported Components
|
|
55
|
+
|
|
56
|
+
- `Sidebar` - Main chat UI with sidebar navigation
|
|
57
|
+
|
|
58
|
+
## Exported Providers
|
|
59
|
+
|
|
60
|
+
- `ChatProvider` - Core chat state management
|
|
61
|
+
- `ChatRuntimeProvider` - Runtime configuration
|
|
62
|
+
- `ThreadProvider` - Conversation thread management
|
|
63
|
+
- `StreamProvider` - AI streaming responses
|
|
64
|
+
- `FileProvider` - File upload handling
|
|
65
|
+
- `CustomComponentProvider` - Custom component rendering
|
|
66
|
+
|
|
67
|
+
## Exported Hooks
|
|
68
|
+
|
|
69
|
+
- `useThread()` - Access thread state
|
|
70
|
+
- `useStreamContext()` - Access streaming state
|
|
71
|
+
- `useChatRuntime()` - Access runtime config
|
|
72
|
+
- `useFileProvider()` - Access file state
|
|
73
|
+
- `useCustomComponents()` - Register custom components
|
|
74
|
+
|
|
75
|
+
## Types
|
|
76
|
+
|
|
77
|
+
Full TypeScript definitions available for:
|
|
78
|
+
- `ChatIdentity`
|
|
79
|
+
- `ChatRuntimeContextValue`
|
|
80
|
+
- `FileInfo`
|
|
81
|
+
- `Metadata`
|
|
82
|
+
|
|
83
|
+
## Development Notes
|
|
84
|
+
|
|
85
|
+
This library is designed to work with LangChain/LangGraph for AI agent interactions. All heavy dependencies are peer dependencies to keep the bundle size small (~50-200 KB).
|