@ensembleapp/client-sdk 0.0.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 +90 -0
- package/dist/index.d.ts +193 -0
- package/dist/index.js +9869 -0
- package/dist/index.js.map +1 -0
- package/dist/schemas-Esi_eGx3.d.ts +19 -0
- package/dist/schemas.d.ts +4 -0
- package/dist/schemas.js +1 -0
- package/dist/schemas.js.map +1 -0
- package/dist/widget/widget.global.js +177 -0
- package/dist/widget/widget.global.js.map +1 -0
- package/lib/components/ChatWidget.css +482 -0
- package/lib/widgets/default-widgets.css +85 -0
- package/package.json +63 -0
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# Client SDK
|
|
2
|
+
|
|
3
|
+
A simple React library for chat functionality with built-in AI SDK integration.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @repo/client-sdk
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Option 1: Use the pre-built ChatWidget
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { ChatWidget } from '@repo/client-sdk'
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<ChatWidget
|
|
21
|
+
api={{
|
|
22
|
+
baseUrl: '/api',
|
|
23
|
+
token: 'your-jwt-token',
|
|
24
|
+
}}
|
|
25
|
+
threadId="user-123"
|
|
26
|
+
agentId="agent-234"
|
|
27
|
+
onMessage={(message) => console.log('New message:', message)}
|
|
28
|
+
onError={(error) => console.error('Chat error:', error)}
|
|
29
|
+
placeholder="Ask me anything..."
|
|
30
|
+
welcomeMessage="Hello! How can I help you today?"
|
|
31
|
+
/>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Option 2: Build your own UI with the useChat hook
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { useChat } from '@repo/client-sdk'
|
|
40
|
+
|
|
41
|
+
function CustomChat() {
|
|
42
|
+
const { messages, isLoading, sendMessage } = useChat({
|
|
43
|
+
api: {
|
|
44
|
+
baseUrl: '/api',
|
|
45
|
+
token: 'your-jwt-token',
|
|
46
|
+
},
|
|
47
|
+
threadId: 'user-123',
|
|
48
|
+
agentId="agent-234",
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<div>
|
|
53
|
+
{messages.map(message => (
|
|
54
|
+
<div key={message.id}>
|
|
55
|
+
<strong>{message.role}:</strong> {message.content}
|
|
56
|
+
</div>
|
|
57
|
+
))}
|
|
58
|
+
<button onClick={() => sendMessage({ text: 'Hello!' })}>
|
|
59
|
+
Send Message
|
|
60
|
+
</button>
|
|
61
|
+
</div>
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## API Reference
|
|
67
|
+
|
|
68
|
+
### ChatWidget Props
|
|
69
|
+
|
|
70
|
+
- `api` ({ baseUrl: string; token: string; headers? }): Base URL for the chat API, required auth token (sent as `Authorization: Bearer <token>`), and optional extra headers
|
|
71
|
+
- `threadId` (string): Thread/session ID (required)
|
|
72
|
+
- `onMessage?` (function): Callback when a new message is received
|
|
73
|
+
- `onError?` (function): Callback when an error occurs
|
|
74
|
+
- `onFinish?` (function): Callback when a conversation finishes
|
|
75
|
+
- `className?` (string): Additional CSS classes
|
|
76
|
+
- `placeholder?` (string): Input placeholder text
|
|
77
|
+
- `welcomeMessage?` (string): Initial welcome message
|
|
78
|
+
|
|
79
|
+
### useChat Hook
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
const {
|
|
83
|
+
messages, // Array of chat messages
|
|
84
|
+
isLoading, // Boolean indicating if request is in progress
|
|
85
|
+
isError, // Boolean indicating if there's an error
|
|
86
|
+
sendMessage, // Function to send a message
|
|
87
|
+
stop, // Function to stop current request
|
|
88
|
+
setMessages, // Function to manually set messages
|
|
89
|
+
} = useChat(config)
|
|
90
|
+
```
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
import * as ai from 'ai';
|
|
2
|
+
import { UIMessage } from 'ai';
|
|
3
|
+
import { U as UIWidget, a as UIWidgetDefinition } from './schemas-Esi_eGx3.js';
|
|
4
|
+
export { W as WidgetDefinition, c as createWidget } from './schemas-Esi_eGx3.js';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { ClassValue } from 'clsx';
|
|
8
|
+
import 'json-schema';
|
|
9
|
+
import 'zod';
|
|
10
|
+
|
|
11
|
+
interface ApiConfig {
|
|
12
|
+
/** The base URL where /chat and /chat/messages are hosted */
|
|
13
|
+
baseUrl: string;
|
|
14
|
+
/** JWT token generated from Secret */
|
|
15
|
+
token: string;
|
|
16
|
+
headers?: Record<string, string>;
|
|
17
|
+
}
|
|
18
|
+
interface UseChatConfig {
|
|
19
|
+
/** The server API configuration */
|
|
20
|
+
api: ApiConfig;
|
|
21
|
+
/** Thread ID for keeping conversation history */
|
|
22
|
+
threadId: string;
|
|
23
|
+
/** The Agent ID that this chat connects to. Either agentId or agentExecutionId must be provided */
|
|
24
|
+
agentId?: string;
|
|
25
|
+
/** The Agent Orchestration ID that this chat connects to. Either agentId or agentExecutionId must be provided */
|
|
26
|
+
agentExecutionId?: string;
|
|
27
|
+
/** additional context (anything) that needs to be passed to the LLM */
|
|
28
|
+
dataContext?: unknown;
|
|
29
|
+
onError?: (error: Error) => void;
|
|
30
|
+
/** Called when API returns 401/unauthorized (e.g., token expiry) */
|
|
31
|
+
onAuthError?: () => void;
|
|
32
|
+
onFinish?: (message: any) => void;
|
|
33
|
+
onData?: (data: any) => void;
|
|
34
|
+
onMessage?: (message: UIMessage) => void;
|
|
35
|
+
}
|
|
36
|
+
interface ChatMessage {
|
|
37
|
+
id: string;
|
|
38
|
+
role: 'user' | 'assistant';
|
|
39
|
+
content: (string | UIWidget)[];
|
|
40
|
+
thoughts?: (string | UIWidget)[];
|
|
41
|
+
createdAt?: Date;
|
|
42
|
+
}
|
|
43
|
+
declare function useChat({ api, threadId, agentId, agentExecutionId, dataContext, onError, onAuthError, onFinish, onData, onMessage, }: UseChatConfig): {
|
|
44
|
+
messages: ChatMessage[];
|
|
45
|
+
status: ai.ChatStatus;
|
|
46
|
+
isLoadingInitial: boolean;
|
|
47
|
+
sendMessage: (message?: (Omit<UIMessage<unknown, ai.UIDataTypes, ai.UITools>, "id" | "role"> & {
|
|
48
|
+
id?: string | undefined;
|
|
49
|
+
role?: "user" | "assistant" | "system" | undefined;
|
|
50
|
+
} & {
|
|
51
|
+
text?: never;
|
|
52
|
+
files?: never;
|
|
53
|
+
messageId?: string;
|
|
54
|
+
}) | {
|
|
55
|
+
text: string;
|
|
56
|
+
files?: FileList | ai.FileUIPart[];
|
|
57
|
+
metadata?: unknown;
|
|
58
|
+
parts?: never;
|
|
59
|
+
messageId?: string;
|
|
60
|
+
} | {
|
|
61
|
+
files: FileList | ai.FileUIPart[];
|
|
62
|
+
metadata?: unknown;
|
|
63
|
+
parts?: never;
|
|
64
|
+
messageId?: string;
|
|
65
|
+
} | undefined, options?: ai.ChatRequestOptions) => Promise<void>;
|
|
66
|
+
stop: () => Promise<void>;
|
|
67
|
+
setMessages: (messages: UIMessage<unknown, ai.UIDataTypes, ai.UITools>[] | ((messages: UIMessage<unknown, ai.UIDataTypes, ai.UITools>[]) => UIMessage<unknown, ai.UIDataTypes, ai.UITools>[])) => void;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
interface ChatWidgetStyles {
|
|
71
|
+
primaryColor?: string;
|
|
72
|
+
primaryTextColor?: string;
|
|
73
|
+
backgroundColor?: string;
|
|
74
|
+
borderColor?: string;
|
|
75
|
+
headerTextColor?: string;
|
|
76
|
+
userBubbleTextColor?: string;
|
|
77
|
+
assistantBubbleBackground?: string;
|
|
78
|
+
assistantBubbleTextColor?: string;
|
|
79
|
+
fontFamily?: string;
|
|
80
|
+
borderRadius?: string;
|
|
81
|
+
inputBackground?: string;
|
|
82
|
+
inputTextColor?: string;
|
|
83
|
+
inputPlaceholderColor?: string;
|
|
84
|
+
thoughtsBorderColor?: string;
|
|
85
|
+
}
|
|
86
|
+
interface ChatWidgetVoiceOptions {
|
|
87
|
+
url: string;
|
|
88
|
+
enabled?: boolean;
|
|
89
|
+
method?: string;
|
|
90
|
+
headers?: Record<string, string>;
|
|
91
|
+
payload?: Record<string, unknown> | ((text: string) => Record<string, unknown>);
|
|
92
|
+
autoplayLatest?: boolean;
|
|
93
|
+
}
|
|
94
|
+
interface ChatWidgetSpeechToTextOptions {
|
|
95
|
+
enabled?: boolean;
|
|
96
|
+
silenceTimeout?: number;
|
|
97
|
+
language?: string;
|
|
98
|
+
onError?: (message: string) => void;
|
|
99
|
+
finalDelay?: number;
|
|
100
|
+
}
|
|
101
|
+
interface ChatWidgetConfig extends UseChatConfig {
|
|
102
|
+
/** Title for the Chat window */
|
|
103
|
+
title?: string;
|
|
104
|
+
/** Introductory message displayed at the start of the chat for brand new threads */
|
|
105
|
+
introMessage?: string;
|
|
106
|
+
/** Placeholder text for the input box */
|
|
107
|
+
inputPlaceholder?: string;
|
|
108
|
+
className?: string;
|
|
109
|
+
styles?: ChatWidgetStyles;
|
|
110
|
+
voice?: ChatWidgetVoiceOptions;
|
|
111
|
+
speechToText?: ChatWidgetSpeechToTextOptions;
|
|
112
|
+
widgets?: UIWidgetDefinition[];
|
|
113
|
+
}
|
|
114
|
+
declare function ChatWidget({ api, threadId, agentId, agentExecutionId, dataContext, onError, onAuthError, onFinish, onMessage, title, introMessage, inputPlaceholder, className, styles: styleProps, voice, speechToText, widgets, }: ChatWidgetConfig): react_jsx_runtime.JSX.Element;
|
|
115
|
+
|
|
116
|
+
interface PopupAnchorConfig {
|
|
117
|
+
enabled?: boolean;
|
|
118
|
+
label?: string;
|
|
119
|
+
position?: 'bottom-end' | 'bottom-start';
|
|
120
|
+
initiallyOpen?: boolean;
|
|
121
|
+
render?: (options: {
|
|
122
|
+
isOpen: boolean;
|
|
123
|
+
toggle: () => void;
|
|
124
|
+
}) => React.ReactNode;
|
|
125
|
+
closeButton?: PopupCloseConfig;
|
|
126
|
+
}
|
|
127
|
+
interface PopupCloseConfig {
|
|
128
|
+
render?: (options: {
|
|
129
|
+
toggle: () => void;
|
|
130
|
+
}) => React.ReactNode;
|
|
131
|
+
position?: 'top-end' | 'top-start';
|
|
132
|
+
show?: boolean;
|
|
133
|
+
}
|
|
134
|
+
interface PopupChatWidgetProps extends ChatWidgetConfig {
|
|
135
|
+
anchor?: PopupAnchorConfig;
|
|
136
|
+
closeButton?: PopupCloseConfig;
|
|
137
|
+
popupSize?: {
|
|
138
|
+
width?: string;
|
|
139
|
+
height?: string;
|
|
140
|
+
maxWidth?: string;
|
|
141
|
+
maxHeight?: string;
|
|
142
|
+
};
|
|
143
|
+
/** When provided, overrides the open/closed state */
|
|
144
|
+
openOverride?: boolean;
|
|
145
|
+
/** Callback when open state should change (used when openOverride is controlled) */
|
|
146
|
+
onToggleOpen?: (nextOpen: boolean) => void;
|
|
147
|
+
}
|
|
148
|
+
declare function PopupChatWidget({ anchor, ...props }: PopupChatWidgetProps): react_jsx_runtime.JSX.Element;
|
|
149
|
+
|
|
150
|
+
interface ChatWidgetInstance {
|
|
151
|
+
updateProps: (props: Partial<ChatWidgetConfig>) => void;
|
|
152
|
+
updateTheme: (styles: ChatWidgetStyles) => void;
|
|
153
|
+
unmount: () => void;
|
|
154
|
+
}
|
|
155
|
+
declare const createChatWidget: (target: HTMLElement, props: ChatWidgetConfig) => ChatWidgetInstance;
|
|
156
|
+
|
|
157
|
+
type RegisterChatWidgetsParams = {
|
|
158
|
+
api: ApiConfig;
|
|
159
|
+
threadId: string;
|
|
160
|
+
widgets: UIWidgetDefinition[];
|
|
161
|
+
};
|
|
162
|
+
/**
|
|
163
|
+
* Registers widget definitions for a specific thread so the server can render them.
|
|
164
|
+
*/
|
|
165
|
+
declare function registerChatWidgets({ api, threadId, widgets, }: RegisterChatWidgetsParams): Promise<void>;
|
|
166
|
+
|
|
167
|
+
/**
|
|
168
|
+
* Embeddable Chat Widget
|
|
169
|
+
*
|
|
170
|
+
* This file creates a standalone chat widget that can be embedded in any website
|
|
171
|
+
* without requiring React in the host application. Uses Shadow DOM for style isolation.
|
|
172
|
+
*/
|
|
173
|
+
interface EmbeddableChatWidgetConfig extends PopupChatWidgetProps {
|
|
174
|
+
containerId?: string;
|
|
175
|
+
}
|
|
176
|
+
declare global {
|
|
177
|
+
interface Window {
|
|
178
|
+
ChatWidget: {
|
|
179
|
+
init: (config: EmbeddableChatWidgetConfig) => Promise<void>;
|
|
180
|
+
destroy: () => void;
|
|
181
|
+
hide: () => void;
|
|
182
|
+
show: () => void;
|
|
183
|
+
updateConfig: (config: Partial<EmbeddableChatWidgetConfig>) => void;
|
|
184
|
+
updateToken: (token: string) => void;
|
|
185
|
+
};
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
declare const defaultChatWidgets: UIWidgetDefinition[];
|
|
190
|
+
|
|
191
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
192
|
+
|
|
193
|
+
export { type ApiConfig, type ChatMessage, ChatWidget, type ChatWidgetInstance, type ChatWidgetConfig as ChatWidgetProps, type ChatWidgetSpeechToTextOptions, type ChatWidgetStyles, type ChatWidgetVoiceOptions, type EmbeddableChatWidgetConfig, type PopupAnchorConfig, PopupChatWidget, type PopupChatWidgetProps, UIWidget, UIWidgetDefinition, type UseChatConfig, cn, createChatWidget, defaultChatWidgets, registerChatWidgets, useChat };
|