@meetsmore-oss/use-ai-client 1.2.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/dist/bundled.js +34913 -0
- package/dist/bundled.js.map +1 -0
- package/dist/chunk-EGD4LT6R.js +46 -0
- package/dist/chunk-EGD4LT6R.js.map +1 -0
- package/dist/chunk-EGKUR4C7.js +13 -0
- package/dist/chunk-EGKUR4C7.js.map +1 -0
- package/dist/index.d.ts +1953 -0
- package/dist/index.js +4502 -0
- package/dist/index.js.map +1 -0
- package/dist/types-INERONQV.js +9 -0
- package/dist/types-INERONQV.js.map +1 -0
- package/dist/types-TVUXB3NB.js +9 -0
- package/dist/types-TVUXB3NB.js.map +1 -0
- package/package.json +58 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1953 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
export { z } from 'zod';
|
|
3
|
+
import * as _meetsmore_oss_use_ai_core from '@meetsmore-oss/use-ai-core';
|
|
4
|
+
import { ToolDefinition, WorkflowStatus, AgentInfo, McpHeadersMap, MultimodalContent, AGUIEvent, Message as Message$1, UseAIClientMessage } from '@meetsmore-oss/use-ai-core';
|
|
5
|
+
export { AgentInfo, ToolDefinition } from '@meetsmore-oss/use-ai-core';
|
|
6
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
|
+
import React$1, { ReactNode } from 'react';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Options for configuring tool behavior.
|
|
11
|
+
*/
|
|
12
|
+
interface ToolOptions {
|
|
13
|
+
/** Whether the tool asks the AI for explicit user confirmation before execution */
|
|
14
|
+
confirmationRequired?: boolean;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* JSON Schema representation type (simplified)
|
|
18
|
+
*/
|
|
19
|
+
interface JSONSchema {
|
|
20
|
+
type?: string;
|
|
21
|
+
properties?: Record<string, unknown>;
|
|
22
|
+
required?: string[];
|
|
23
|
+
additionalProperties?: boolean | Record<string, unknown>;
|
|
24
|
+
[key: string]: unknown;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* A tool definition with validation schema and execution function.
|
|
28
|
+
* Created by the `defineTool` function and used to define tools that the AI can call.
|
|
29
|
+
*
|
|
30
|
+
* @template T - The Zod schema type for validating tool input
|
|
31
|
+
*/
|
|
32
|
+
interface DefinedTool<T extends z.ZodType> {
|
|
33
|
+
/** Human-readable description of what the tool does */
|
|
34
|
+
description: string;
|
|
35
|
+
/** JSON Schema representation of the input schema */
|
|
36
|
+
_jsonSchema: JSONSchema;
|
|
37
|
+
/** Zod schema for validating input */
|
|
38
|
+
_zodSchema: T;
|
|
39
|
+
/** The function to execute when the tool is called */
|
|
40
|
+
fn: (input: z.infer<T>) => unknown | Promise<unknown>;
|
|
41
|
+
/** Configuration options for the tool */
|
|
42
|
+
_options: ToolOptions;
|
|
43
|
+
/** Converts this tool to a ToolDefinition for registration with the server */
|
|
44
|
+
_toToolDefinition: (name: string) => ToolDefinition;
|
|
45
|
+
/** Validates input and executes the tool function */
|
|
46
|
+
_execute: (input: unknown) => Promise<unknown>;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Defines a tool with no input parameters that can be called by the AI.
|
|
50
|
+
*
|
|
51
|
+
* @template TReturn - The return type of the tool function
|
|
52
|
+
* @param description - Human-readable description of what the tool does
|
|
53
|
+
* @param fn - The function to execute when the tool is called
|
|
54
|
+
* @param options - Optional configuration for the tool
|
|
55
|
+
* @returns A DefinedTool that can be registered with useAI
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```typescript
|
|
59
|
+
* const getCurrentTime = defineTool(
|
|
60
|
+
* 'Get the current time',
|
|
61
|
+
* () => new Date().toISOString()
|
|
62
|
+
* );
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
declare function defineTool<TReturn>(description: string, fn: () => TReturn | Promise<TReturn>, options?: ToolOptions): DefinedTool<z.ZodObject<{}>>;
|
|
66
|
+
/**
|
|
67
|
+
* Defines a tool with typed input parameters that can be called by the AI.
|
|
68
|
+
*
|
|
69
|
+
* @template TSchema - The Zod schema type for validating input
|
|
70
|
+
* @param description - Human-readable description of what the tool does
|
|
71
|
+
* @param schema - Zod schema defining the tool's input parameters
|
|
72
|
+
* @param fn - The function to execute when the tool is called
|
|
73
|
+
* @param options - Optional configuration for the tool
|
|
74
|
+
* @returns A DefinedTool that can be registered with useAI
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* ```typescript
|
|
78
|
+
* import { defineTool } from '@meetsmore-oss/use-ai-client';
|
|
79
|
+
* import { z } from 'zod';
|
|
80
|
+
*
|
|
81
|
+
* const addTodo = defineTool(
|
|
82
|
+
* 'Add a new todo item',
|
|
83
|
+
* z.object({ text: z.string() }),
|
|
84
|
+
* (input) => {
|
|
85
|
+
* todos.push({ id: Date.now(), text: input.text, completed: false });
|
|
86
|
+
* return { success: true };
|
|
87
|
+
* }
|
|
88
|
+
* );
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
declare function defineTool<TSchema extends z.ZodType>(description: string, schema: TSchema, fn: (input: z.infer<TSchema>) => unknown | Promise<unknown>, options?: ToolOptions): DefinedTool<TSchema>;
|
|
92
|
+
/**
|
|
93
|
+
* A collection of named tools.
|
|
94
|
+
* Used to register multiple tools with the useAI hook.
|
|
95
|
+
*/
|
|
96
|
+
type ToolsDefinition = Record<string, DefinedTool<z.ZodType>>;
|
|
97
|
+
/**
|
|
98
|
+
* Converts a ToolsDefinition to an array of ToolDefinition objects.
|
|
99
|
+
*
|
|
100
|
+
* @param tools - The tools to convert
|
|
101
|
+
* @returns Array of tool definitions suitable for server registration
|
|
102
|
+
* @internal
|
|
103
|
+
*/
|
|
104
|
+
declare function convertToolsToDefinitions(tools: ToolsDefinition): ToolDefinition[];
|
|
105
|
+
/**
|
|
106
|
+
* Executes a defined tool by name with the provided input.
|
|
107
|
+
*
|
|
108
|
+
* @param tools - The collection of available tools
|
|
109
|
+
* @param toolName - The name of the tool to execute
|
|
110
|
+
* @param input - The input parameters for the tool
|
|
111
|
+
* @returns The result of executing the tool
|
|
112
|
+
* @throws Error if the tool is not found
|
|
113
|
+
* @internal
|
|
114
|
+
*/
|
|
115
|
+
declare function executeDefinedTool(tools: ToolsDefinition, toolName: string, input: unknown): Promise<unknown>;
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Options for configuring the useAI hook.
|
|
119
|
+
*/
|
|
120
|
+
interface UseAIOptions {
|
|
121
|
+
/** Tools to make available to the AI for this component */
|
|
122
|
+
tools?: ToolsDefinition;
|
|
123
|
+
/** Callback function invoked when an error occurs */
|
|
124
|
+
onError?: (error: Error) => void;
|
|
125
|
+
/** Optional ID for namespacing tools to avoid naming conflicts */
|
|
126
|
+
id?: string;
|
|
127
|
+
/** Optional UI context or description to send to the AI */
|
|
128
|
+
prompt?: string;
|
|
129
|
+
/**
|
|
130
|
+
* Mark this component as invisible (no visual state).
|
|
131
|
+
* When true, tool responses are sent immediately without waiting for prompt changes.
|
|
132
|
+
* Use this for provider-type components that expose tools but don't render UI.
|
|
133
|
+
* @default false
|
|
134
|
+
*/
|
|
135
|
+
invisible?: boolean;
|
|
136
|
+
/**
|
|
137
|
+
* Optional array of suggestion strings to display as call-to-action prompts
|
|
138
|
+
* when the chat is empty. The chat UI will randomly select up to 4 suggestions
|
|
139
|
+
* to display to the user.
|
|
140
|
+
*/
|
|
141
|
+
suggestions?: string[];
|
|
142
|
+
/**
|
|
143
|
+
* Whether the AI features are enabled for this hook.
|
|
144
|
+
* When false, tools are not registered and the hook returns a disabled state.
|
|
145
|
+
* Useful for feature flagging AI functionality.
|
|
146
|
+
* @default true
|
|
147
|
+
*/
|
|
148
|
+
enabled?: boolean;
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Return value from the useAI hook.
|
|
152
|
+
*/
|
|
153
|
+
interface UseAIResult {
|
|
154
|
+
/** The AI's response text, or null if no response yet */
|
|
155
|
+
response: string | null;
|
|
156
|
+
/** Whether the AI is currently processing a request */
|
|
157
|
+
loading: boolean;
|
|
158
|
+
/** Error object if an error occurred, or null */
|
|
159
|
+
error: Error | null;
|
|
160
|
+
/** Function to send a prompt to the AI */
|
|
161
|
+
generate: (prompt: string) => Promise<void>;
|
|
162
|
+
/** Whether the client is connected to the server */
|
|
163
|
+
connected: boolean;
|
|
164
|
+
/** Ref to attach to the component for context extraction */
|
|
165
|
+
ref: React.RefObject<HTMLDivElement>;
|
|
166
|
+
}
|
|
167
|
+
/**
|
|
168
|
+
* React hook for integrating AI capabilities into a component.
|
|
169
|
+
* Registers tools with the AI server and provides methods to interact with the AI.
|
|
170
|
+
*/
|
|
171
|
+
declare function useAI(options?: UseAIOptions): UseAIResult;
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* TODO: We would prefer to have this in a separate package, but it creates bundling problems with shared react contexts.
|
|
175
|
+
*/
|
|
176
|
+
|
|
177
|
+
/**
|
|
178
|
+
* Progress update from a workflow execution.
|
|
179
|
+
*/
|
|
180
|
+
interface WorkflowProgress {
|
|
181
|
+
/** Current status of the workflow */
|
|
182
|
+
status: WorkflowStatus;
|
|
183
|
+
/** Text output from the workflow (if any) */
|
|
184
|
+
text?: string;
|
|
185
|
+
/** Error message (if status is 'error') */
|
|
186
|
+
error?: string;
|
|
187
|
+
/** Tool calls made during workflow execution */
|
|
188
|
+
toolCalls?: Array<{
|
|
189
|
+
toolName: string;
|
|
190
|
+
args: Record<string, unknown>;
|
|
191
|
+
result?: unknown;
|
|
192
|
+
}>;
|
|
193
|
+
}
|
|
194
|
+
/**
|
|
195
|
+
* Configuration for triggering a workflow.
|
|
196
|
+
*/
|
|
197
|
+
interface TriggerWorkflowOptions {
|
|
198
|
+
/** Input data for the workflow */
|
|
199
|
+
inputs: Record<string, any>;
|
|
200
|
+
/** Optional tools that the workflow can call */
|
|
201
|
+
tools?: ToolsDefinition;
|
|
202
|
+
/** Optional callback for progress updates */
|
|
203
|
+
onProgress?: (progress: WorkflowProgress) => void;
|
|
204
|
+
/** Optional callback when workflow completes successfully */
|
|
205
|
+
onComplete?: (result: any) => void;
|
|
206
|
+
/** Optional callback when workflow encounters an error */
|
|
207
|
+
onError?: (error: Error) => void;
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* Result from the useAIWorkflow hook.
|
|
211
|
+
*/
|
|
212
|
+
interface UseAIWorkflowResult {
|
|
213
|
+
/** Triggers a workflow execution */
|
|
214
|
+
trigger: (options: TriggerWorkflowOptions) => Promise<void>;
|
|
215
|
+
/** Current status of the workflow */
|
|
216
|
+
status: WorkflowStatus;
|
|
217
|
+
/** Accumulated text output from the workflow */
|
|
218
|
+
text: string | null;
|
|
219
|
+
/** Error if workflow failed */
|
|
220
|
+
error: Error | null;
|
|
221
|
+
/** Whether the client is connected to the server */
|
|
222
|
+
connected: boolean;
|
|
223
|
+
}
|
|
224
|
+
/**
|
|
225
|
+
* React hook for triggering headless workflows.
|
|
226
|
+
*
|
|
227
|
+
* Workflows are different from chat-based agents:
|
|
228
|
+
* - No conversation history (stateless)
|
|
229
|
+
* - No chat UI involvement
|
|
230
|
+
* - Can use external platforms (Dify, Flowise, etc.)
|
|
231
|
+
* - Still supports tool calls to frontend
|
|
232
|
+
*
|
|
233
|
+
* Use this for button-triggered operations like:
|
|
234
|
+
* - File upload processing
|
|
235
|
+
* - Data transformations
|
|
236
|
+
* - Multi-step background tasks
|
|
237
|
+
* - External workflow integrations
|
|
238
|
+
*
|
|
239
|
+
* @param runner - The runner to use (e.g., 'dify', 'flowise', 'claude')
|
|
240
|
+
* @param workflowId - The workflow identifier
|
|
241
|
+
*
|
|
242
|
+
* @example
|
|
243
|
+
* ```typescript
|
|
244
|
+
* import { useAIWorkflow } from '@meetsmore-oss/use-ai-plugin-workflows-client';
|
|
245
|
+
* import { defineTool, z } from '@meetsmore-oss/use-ai-client';
|
|
246
|
+
*
|
|
247
|
+
* function PDFUploadButton() {
|
|
248
|
+
* const { trigger, status, text } = useAIWorkflow('dify', 'pdf-processor');
|
|
249
|
+
*
|
|
250
|
+
* const insertText = defineTool(
|
|
251
|
+
* 'Insert text into the document',
|
|
252
|
+
* z.object({ text: z.string() }),
|
|
253
|
+
* (input) => {
|
|
254
|
+
* document.body.appendChild(document.createTextNode(input.text));
|
|
255
|
+
* return { success: true };
|
|
256
|
+
* }
|
|
257
|
+
* );
|
|
258
|
+
*
|
|
259
|
+
* const handleUpload = async (file: File) => {
|
|
260
|
+
* const pdfData = await file.arrayBuffer();
|
|
261
|
+
*
|
|
262
|
+
* await trigger({
|
|
263
|
+
* inputs: { file: pdfData },
|
|
264
|
+
* tools: { insertText },
|
|
265
|
+
* onProgress: (progress) => console.log('Progress:', progress),
|
|
266
|
+
* onComplete: (result) => console.log('Completed:', result),
|
|
267
|
+
* onError: (error) => console.error('Error:', error),
|
|
268
|
+
* });
|
|
269
|
+
* };
|
|
270
|
+
*
|
|
271
|
+
* return (
|
|
272
|
+
* <div>
|
|
273
|
+
* <input type="file" onChange={(e) => handleUpload(e.target.files[0])} />
|
|
274
|
+
* {status === 'running' && <p>Processing...</p>}
|
|
275
|
+
* {status === 'completed' && <p>Done! {text}</p>}
|
|
276
|
+
* </div>
|
|
277
|
+
* );
|
|
278
|
+
* }
|
|
279
|
+
* ```
|
|
280
|
+
*/
|
|
281
|
+
declare function useAIWorkflow(runner: string, workflowId: string): UseAIWorkflowResult;
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* Configuration for the UseAI client provider.
|
|
285
|
+
*/
|
|
286
|
+
interface UseAIConfig {
|
|
287
|
+
/** The WebSocket URL of the UseAI server */
|
|
288
|
+
serverUrl: string;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/**
|
|
292
|
+
* Default maximum file size (10MB)
|
|
293
|
+
*/
|
|
294
|
+
declare const DEFAULT_MAX_FILE_SIZE: number;
|
|
295
|
+
/**
|
|
296
|
+
* Persisted file metadata (lightweight, for storage).
|
|
297
|
+
* Only metadata is stored - not the actual file data.
|
|
298
|
+
*/
|
|
299
|
+
interface PersistedFileMetadata {
|
|
300
|
+
/** Original file name */
|
|
301
|
+
name: string;
|
|
302
|
+
/** File size in bytes */
|
|
303
|
+
size: number;
|
|
304
|
+
/** MIME type of the file */
|
|
305
|
+
mimeType: string;
|
|
306
|
+
}
|
|
307
|
+
/**
|
|
308
|
+
* Runtime file attachment (local File reference until send).
|
|
309
|
+
* The File object is kept in memory until the message is sent,
|
|
310
|
+
* at which point it's converted to a URL via the FileUploadBackend.
|
|
311
|
+
*/
|
|
312
|
+
interface FileAttachment {
|
|
313
|
+
/** Unique identifier for this attachment */
|
|
314
|
+
id: string;
|
|
315
|
+
/** The local File object */
|
|
316
|
+
file: File;
|
|
317
|
+
/** Data URL for image thumbnails (generated on attach for preview) */
|
|
318
|
+
preview?: string;
|
|
319
|
+
}
|
|
320
|
+
/**
|
|
321
|
+
* Abstract file upload backend interface.
|
|
322
|
+
* Converts File objects to URLs at send time.
|
|
323
|
+
*
|
|
324
|
+
* Implementations:
|
|
325
|
+
* - EmbedFileUploadBackend: Converts to base64 data URL (built-in)
|
|
326
|
+
* - S3FileUploadBackend: Uploads to S3 and returns public URL (future)
|
|
327
|
+
*/
|
|
328
|
+
interface FileUploadBackend {
|
|
329
|
+
/**
|
|
330
|
+
* Prepare file for sending to AI.
|
|
331
|
+
* Called at send time - converts File to URL.
|
|
332
|
+
*
|
|
333
|
+
* @param file - The File object to prepare
|
|
334
|
+
* @returns Promise resolving to a URL string
|
|
335
|
+
* - For embed: base64 data URL
|
|
336
|
+
* - For S3: public URL after upload
|
|
337
|
+
*/
|
|
338
|
+
prepareForSend(file: File): Promise<string>;
|
|
339
|
+
}
|
|
340
|
+
/**
|
|
341
|
+
* Configuration for file uploads in UseAIProvider.
|
|
342
|
+
*/
|
|
343
|
+
interface FileUploadConfig {
|
|
344
|
+
/**
|
|
345
|
+
* Backend for converting files to URLs at send time.
|
|
346
|
+
* Defaults to EmbedFileUploadBackend if not specified.
|
|
347
|
+
*/
|
|
348
|
+
backend?: FileUploadBackend;
|
|
349
|
+
/**
|
|
350
|
+
* Maximum file size in bytes.
|
|
351
|
+
* @default 10485760 (10MB)
|
|
352
|
+
*/
|
|
353
|
+
maxFileSize?: number;
|
|
354
|
+
/**
|
|
355
|
+
* Accepted MIME types.
|
|
356
|
+
* Supports patterns like 'image/*' or specific types like 'application/pdf'.
|
|
357
|
+
* If undefined, all types are accepted.
|
|
358
|
+
*/
|
|
359
|
+
acceptedTypes?: string[];
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
/**
|
|
363
|
+
* Display mode for chat messages.
|
|
364
|
+
* Determines the visual styling of the message bubble.
|
|
365
|
+
*/
|
|
366
|
+
type MessageDisplayMode$1 = 'default' | 'error';
|
|
367
|
+
/**
|
|
368
|
+
* Text content part for persisted messages.
|
|
369
|
+
*/
|
|
370
|
+
interface PersistedTextContent {
|
|
371
|
+
type: 'text';
|
|
372
|
+
text: string;
|
|
373
|
+
}
|
|
374
|
+
/**
|
|
375
|
+
* File content part for persisted messages.
|
|
376
|
+
* Only stores metadata, not the actual file data.
|
|
377
|
+
*/
|
|
378
|
+
interface PersistedFileContent {
|
|
379
|
+
type: 'file';
|
|
380
|
+
file: PersistedFileMetadata;
|
|
381
|
+
}
|
|
382
|
+
/**
|
|
383
|
+
* Content part for persisted messages.
|
|
384
|
+
* Can be text or file metadata.
|
|
385
|
+
*/
|
|
386
|
+
type PersistedContentPart = PersistedTextContent | PersistedFileContent;
|
|
387
|
+
/**
|
|
388
|
+
* Content that can be persisted.
|
|
389
|
+
* Simple string for text-only messages, or array for multimodal content.
|
|
390
|
+
*/
|
|
391
|
+
type PersistedMessageContent = string | PersistedContentPart[];
|
|
392
|
+
/**
|
|
393
|
+
* Message format for persisted chat history.
|
|
394
|
+
* Compatible with AI SDK's UIMessage format for future integration.
|
|
395
|
+
*/
|
|
396
|
+
interface PersistedMessage {
|
|
397
|
+
id: string;
|
|
398
|
+
role: 'user' | 'assistant' | 'tool';
|
|
399
|
+
/** Content can be a string or multimodal content array */
|
|
400
|
+
content: PersistedMessageContent;
|
|
401
|
+
createdAt: Date;
|
|
402
|
+
displayMode?: MessageDisplayMode$1;
|
|
403
|
+
}
|
|
404
|
+
/**
|
|
405
|
+
* Represents a stored chat conversation.
|
|
406
|
+
*/
|
|
407
|
+
interface Chat {
|
|
408
|
+
id: string;
|
|
409
|
+
title?: string;
|
|
410
|
+
messages: PersistedMessage[];
|
|
411
|
+
createdAt: Date;
|
|
412
|
+
updatedAt: Date;
|
|
413
|
+
}
|
|
414
|
+
/**
|
|
415
|
+
* Options for creating a new chat.
|
|
416
|
+
*/
|
|
417
|
+
interface CreateChatOptions {
|
|
418
|
+
title?: string;
|
|
419
|
+
}
|
|
420
|
+
/**
|
|
421
|
+
* Options for listing chats.
|
|
422
|
+
*/
|
|
423
|
+
interface ListChatsOptions {
|
|
424
|
+
limit?: number;
|
|
425
|
+
offset?: number;
|
|
426
|
+
}
|
|
427
|
+
/**
|
|
428
|
+
* Abstract repository interface for chat persistence.
|
|
429
|
+
* Implementations can store chats locally (localStorage, IndexedDB)
|
|
430
|
+
* or remotely (REST API, GraphQL, etc.)
|
|
431
|
+
*/
|
|
432
|
+
interface ChatRepository {
|
|
433
|
+
/**
|
|
434
|
+
* Creates a new chat and returns its ID.
|
|
435
|
+
* @param options Optional configuration for the new chat
|
|
436
|
+
* @returns Promise resolving to the new chat ID
|
|
437
|
+
*/
|
|
438
|
+
createChat(options?: CreateChatOptions): Promise<string>;
|
|
439
|
+
/**
|
|
440
|
+
* Loads a chat by ID.
|
|
441
|
+
* @param id Chat ID to load
|
|
442
|
+
* @returns Promise resolving to the chat, or null if not found
|
|
443
|
+
*/
|
|
444
|
+
loadChat(id: string): Promise<Chat | null>;
|
|
445
|
+
/**
|
|
446
|
+
* Saves or updates a chat.
|
|
447
|
+
* @param chat Chat to save
|
|
448
|
+
* @returns Promise resolving when save is complete
|
|
449
|
+
*/
|
|
450
|
+
saveChat(chat: Chat): Promise<void>;
|
|
451
|
+
/**
|
|
452
|
+
* Deletes a chat by ID.
|
|
453
|
+
* @param id Chat ID to delete
|
|
454
|
+
* @returns Promise resolving when deletion is complete
|
|
455
|
+
*/
|
|
456
|
+
deleteChat(id: string): Promise<void>;
|
|
457
|
+
/**
|
|
458
|
+
* Lists all available chats (metadata only, without full message history).
|
|
459
|
+
* @param options Optional pagination and filtering options
|
|
460
|
+
* @returns Promise resolving to array of chat metadata
|
|
461
|
+
*/
|
|
462
|
+
listChats(options?: ListChatsOptions): Promise<Array<Omit<Chat, 'messages'>>>;
|
|
463
|
+
/**
|
|
464
|
+
* Deletes all stored chats.
|
|
465
|
+
* @returns Promise resolving when all chats are deleted
|
|
466
|
+
*/
|
|
467
|
+
deleteAll(): Promise<void>;
|
|
468
|
+
}
|
|
469
|
+
/**
|
|
470
|
+
* Generates a unique chat ID.
|
|
471
|
+
*/
|
|
472
|
+
declare function generateChatId(): string;
|
|
473
|
+
/**
|
|
474
|
+
* Generates a unique message ID.
|
|
475
|
+
*/
|
|
476
|
+
declare function generateMessageId(): string;
|
|
477
|
+
|
|
478
|
+
/**
|
|
479
|
+
* A saved slash command.
|
|
480
|
+
*/
|
|
481
|
+
interface SavedCommand {
|
|
482
|
+
/** Unique identifier */
|
|
483
|
+
id: string;
|
|
484
|
+
/** Command name (without the leading slash) */
|
|
485
|
+
name: string;
|
|
486
|
+
/** The saved text */
|
|
487
|
+
text: string;
|
|
488
|
+
/** When the command was created */
|
|
489
|
+
createdAt: Date;
|
|
490
|
+
/** When the command was last used */
|
|
491
|
+
lastUsedAt?: Date;
|
|
492
|
+
}
|
|
493
|
+
/**
|
|
494
|
+
* Options for creating a command.
|
|
495
|
+
*/
|
|
496
|
+
interface CreateCommandOptions {
|
|
497
|
+
name: string;
|
|
498
|
+
text: string;
|
|
499
|
+
}
|
|
500
|
+
/**
|
|
501
|
+
* Options for listing commands.
|
|
502
|
+
*/
|
|
503
|
+
interface ListCommandsOptions {
|
|
504
|
+
/** Filter commands by name prefix */
|
|
505
|
+
namePrefix?: string;
|
|
506
|
+
/** Limit number of results */
|
|
507
|
+
limit?: number;
|
|
508
|
+
}
|
|
509
|
+
/**
|
|
510
|
+
* Abstract repository interface for command persistence.
|
|
511
|
+
*/
|
|
512
|
+
interface CommandRepository {
|
|
513
|
+
createCommand(options: CreateCommandOptions): Promise<string>;
|
|
514
|
+
loadCommand(id: string): Promise<SavedCommand | null>;
|
|
515
|
+
loadCommandByName(name: string): Promise<SavedCommand | null>;
|
|
516
|
+
updateCommand(command: SavedCommand): Promise<void>;
|
|
517
|
+
deleteCommand(id: string): Promise<void>;
|
|
518
|
+
listCommands(options?: ListCommandsOptions): Promise<SavedCommand[]>;
|
|
519
|
+
deleteAll(): Promise<void>;
|
|
520
|
+
}
|
|
521
|
+
/**
|
|
522
|
+
* Generates a unique command ID.
|
|
523
|
+
*/
|
|
524
|
+
declare function generateCommandId(): string;
|
|
525
|
+
/**
|
|
526
|
+
* Validates a command name.
|
|
527
|
+
* Commands must be kebab-case: lowercase letters, numbers, and hyphens only.
|
|
528
|
+
* Returns null if valid, or an error message if invalid.
|
|
529
|
+
*/
|
|
530
|
+
declare function validateCommandName(name: string): string | null;
|
|
531
|
+
|
|
532
|
+
/**
|
|
533
|
+
* Default text labels for the chat UI.
|
|
534
|
+
* Use for internationalization (i18n) or branding.
|
|
535
|
+
*/
|
|
536
|
+
declare const defaultStrings: {
|
|
537
|
+
header: {
|
|
538
|
+
/** Header title when no chat history feature */
|
|
539
|
+
aiAssistant: string;
|
|
540
|
+
/** Label for new chat button tooltip */
|
|
541
|
+
newChat: string;
|
|
542
|
+
/** Delete chat confirmation message */
|
|
543
|
+
deleteConfirm: string;
|
|
544
|
+
/** Delete button tooltip */
|
|
545
|
+
deleteChat: string;
|
|
546
|
+
/** Connection status: online */
|
|
547
|
+
online: string;
|
|
548
|
+
/** Connection status: offline */
|
|
549
|
+
offline: string;
|
|
550
|
+
};
|
|
551
|
+
chatHistory: {
|
|
552
|
+
/** Chat history: no chats message */
|
|
553
|
+
noChatHistory: string;
|
|
554
|
+
/** Chat history: active chat indicator */
|
|
555
|
+
active: string;
|
|
556
|
+
};
|
|
557
|
+
emptyChat: {
|
|
558
|
+
/** Empty chat welcome message */
|
|
559
|
+
startConversation: string;
|
|
560
|
+
/** Empty chat help text */
|
|
561
|
+
askMeToHelp: string;
|
|
562
|
+
};
|
|
563
|
+
input: {
|
|
564
|
+
/** Input placeholder when connected */
|
|
565
|
+
placeholder: string;
|
|
566
|
+
/** Input placeholder when connecting */
|
|
567
|
+
connectingPlaceholder: string;
|
|
568
|
+
/** Send button text */
|
|
569
|
+
send: string;
|
|
570
|
+
/** Loading indicator text */
|
|
571
|
+
thinking: string;
|
|
572
|
+
};
|
|
573
|
+
fileUpload: {
|
|
574
|
+
/** Attach files button tooltip */
|
|
575
|
+
attachFiles: string;
|
|
576
|
+
/** Drop zone text when dragging files */
|
|
577
|
+
dropFilesHere: string;
|
|
578
|
+
/** File size error (use {filename} and {maxSize} placeholders) */
|
|
579
|
+
fileSizeError: string;
|
|
580
|
+
/** File type error (use {type} placeholder) */
|
|
581
|
+
fileTypeError: string;
|
|
582
|
+
};
|
|
583
|
+
floatingButton: {
|
|
584
|
+
/** Floating button title when connected */
|
|
585
|
+
openAssistant: string;
|
|
586
|
+
/** Floating button title when connecting */
|
|
587
|
+
connectingToAssistant: string;
|
|
588
|
+
};
|
|
589
|
+
commands: {
|
|
590
|
+
/** No saved commands empty state */
|
|
591
|
+
noSavedCommands: string;
|
|
592
|
+
/** No matching commands message */
|
|
593
|
+
noMatchingCommands: string;
|
|
594
|
+
/** Delete command button tooltip */
|
|
595
|
+
deleteCommand: string;
|
|
596
|
+
/** Command name input placeholder */
|
|
597
|
+
commandNamePlaceholder: string;
|
|
598
|
+
/** Save command button tooltip */
|
|
599
|
+
saveCommand: string;
|
|
600
|
+
/** Error when command name already exists */
|
|
601
|
+
commandNameExists: string;
|
|
602
|
+
/** Error when rename is not supported */
|
|
603
|
+
renameNotSupported: string;
|
|
604
|
+
/** Error when save is not supported */
|
|
605
|
+
saveNotSupported: string;
|
|
606
|
+
/** Error when rename fails */
|
|
607
|
+
renameFailed: string;
|
|
608
|
+
/** Error when save fails */
|
|
609
|
+
saveFailed: string;
|
|
610
|
+
};
|
|
611
|
+
errors: {
|
|
612
|
+
/** Error when AI service is overloaded */
|
|
613
|
+
API_OVERLOADED: string;
|
|
614
|
+
/** Error when rate limited */
|
|
615
|
+
RATE_LIMITED: string;
|
|
616
|
+
/** Error for unknown/unexpected errors */
|
|
617
|
+
UNKNOWN_ERROR: string;
|
|
618
|
+
};
|
|
619
|
+
};
|
|
620
|
+
/**
|
|
621
|
+
* Customizable text labels for the chat UI.
|
|
622
|
+
*/
|
|
623
|
+
type UseAIStrings = typeof defaultStrings;
|
|
624
|
+
/**
|
|
625
|
+
* Hook to access the current strings.
|
|
626
|
+
* Returns the strings from UseAIProvider, or defaults if not inside a provider.
|
|
627
|
+
*
|
|
628
|
+
* @example
|
|
629
|
+
* ```tsx
|
|
630
|
+
* function MyComponent() {
|
|
631
|
+
* const strings = useStrings();
|
|
632
|
+
* return <button>{strings.input.send}</button>;
|
|
633
|
+
* }
|
|
634
|
+
* ```
|
|
635
|
+
*/
|
|
636
|
+
declare function useStrings(): UseAIStrings;
|
|
637
|
+
|
|
638
|
+
/**
|
|
639
|
+
* Default theme configuration for the chat UI.
|
|
640
|
+
* All colors support CSS color values (hex, rgb, hsl, gradients, etc.)
|
|
641
|
+
*/
|
|
642
|
+
declare const defaultTheme: {
|
|
643
|
+
/** Primary color for buttons, links, active states */
|
|
644
|
+
primaryColor: string;
|
|
645
|
+
/** Primary gradient for user messages and buttons */
|
|
646
|
+
primaryGradient: string;
|
|
647
|
+
/** Translucent primary color for overlays (e.g., drop zone) */
|
|
648
|
+
primaryColorTranslucent: string;
|
|
649
|
+
/** Panel background color */
|
|
650
|
+
backgroundColor: string;
|
|
651
|
+
/** Assistant message bubble background */
|
|
652
|
+
assistantMessageBackground: string;
|
|
653
|
+
/** Hover background for buttons and items */
|
|
654
|
+
hoverBackground: string;
|
|
655
|
+
/** Active/selected item background */
|
|
656
|
+
activeBackground: string;
|
|
657
|
+
/** Disabled button background */
|
|
658
|
+
buttonDisabledBackground: string;
|
|
659
|
+
/** Primary text color */
|
|
660
|
+
textColor: string;
|
|
661
|
+
/** Secondary/muted text color */
|
|
662
|
+
secondaryTextColor: string;
|
|
663
|
+
/** Placeholder text color */
|
|
664
|
+
placeholderTextColor: string;
|
|
665
|
+
/** Online status indicator color */
|
|
666
|
+
onlineColor: string;
|
|
667
|
+
/** Offline status indicator color */
|
|
668
|
+
offlineColor: string;
|
|
669
|
+
/** Unread notification indicator color */
|
|
670
|
+
unreadIndicatorColor: string;
|
|
671
|
+
/** Error message background */
|
|
672
|
+
errorBackground: string;
|
|
673
|
+
/** Error message text color */
|
|
674
|
+
errorTextColor: string;
|
|
675
|
+
/** Danger/destructive action color (e.g., delete) */
|
|
676
|
+
dangerColor: string;
|
|
677
|
+
/** Border color for dividers and inputs */
|
|
678
|
+
borderColor: string;
|
|
679
|
+
/** Dashed border color (e.g., file placeholder) */
|
|
680
|
+
dashedBorderColor: string;
|
|
681
|
+
/** Panel box shadow */
|
|
682
|
+
panelShadow: string;
|
|
683
|
+
/** Dropdown box shadow */
|
|
684
|
+
dropdownShadow: string;
|
|
685
|
+
/** Button box shadow */
|
|
686
|
+
buttonShadow: string;
|
|
687
|
+
/** Button hover box shadow */
|
|
688
|
+
buttonHoverShadow: string;
|
|
689
|
+
/** Font family */
|
|
690
|
+
fontFamily: string;
|
|
691
|
+
/** Modal backdrop color */
|
|
692
|
+
backdropColor: string;
|
|
693
|
+
};
|
|
694
|
+
/**
|
|
695
|
+
* Theme configuration for the chat UI.
|
|
696
|
+
*/
|
|
697
|
+
type UseAITheme = typeof defaultTheme;
|
|
698
|
+
/**
|
|
699
|
+
* Hook to access the current theme.
|
|
700
|
+
* Returns the theme from UseAIProvider, or defaults if not inside a provider.
|
|
701
|
+
*
|
|
702
|
+
* @example
|
|
703
|
+
* ```tsx
|
|
704
|
+
* function MyComponent() {
|
|
705
|
+
* const theme = useTheme();
|
|
706
|
+
* return <div style={{ color: theme.primaryColor }}>Hello</div>;
|
|
707
|
+
* }
|
|
708
|
+
* ```
|
|
709
|
+
*/
|
|
710
|
+
declare function useTheme(): UseAITheme;
|
|
711
|
+
|
|
712
|
+
type UseAIChatPanelStrings = UseAIStrings;
|
|
713
|
+
type UseAIChatPanelTheme = UseAITheme;
|
|
714
|
+
/**
|
|
715
|
+
* Display mode for chat messages.
|
|
716
|
+
*/
|
|
717
|
+
type MessageDisplayMode = 'default' | 'error';
|
|
718
|
+
/**
|
|
719
|
+
* Represents a single message in the AI conversation.
|
|
720
|
+
*/
|
|
721
|
+
interface Message {
|
|
722
|
+
/** Unique identifier for the message */
|
|
723
|
+
id: string;
|
|
724
|
+
/** The role of the message sender */
|
|
725
|
+
role: 'user' | 'assistant';
|
|
726
|
+
/** The message content - string or multimodal content */
|
|
727
|
+
content: PersistedMessageContent;
|
|
728
|
+
/** When the message was created */
|
|
729
|
+
timestamp: Date;
|
|
730
|
+
/** Display mode for styling the message bubble */
|
|
731
|
+
displayMode?: MessageDisplayMode;
|
|
732
|
+
}
|
|
733
|
+
/**
|
|
734
|
+
* Props for the chat panel component.
|
|
735
|
+
*/
|
|
736
|
+
interface UseAIChatPanelProps {
|
|
737
|
+
onSendMessage: (message: string, attachments?: FileAttachment[]) => void;
|
|
738
|
+
messages: Message[];
|
|
739
|
+
loading: boolean;
|
|
740
|
+
connected: boolean;
|
|
741
|
+
/** Currently streaming text from assistant (real-time updates) */
|
|
742
|
+
streamingText?: string;
|
|
743
|
+
currentChatId?: string | null;
|
|
744
|
+
onNewChat?: () => Promise<string | void>;
|
|
745
|
+
onLoadChat?: (chatId: string) => Promise<void>;
|
|
746
|
+
onDeleteChat?: (chatId: string) => Promise<void>;
|
|
747
|
+
onListChats?: () => Promise<Array<Omit<Chat, 'messages'>>>;
|
|
748
|
+
suggestions?: string[];
|
|
749
|
+
availableAgents?: AgentInfo[];
|
|
750
|
+
defaultAgent?: string | null;
|
|
751
|
+
selectedAgent?: string | null;
|
|
752
|
+
onAgentChange?: (agentId: string | null) => void;
|
|
753
|
+
fileUploadConfig?: FileUploadConfig;
|
|
754
|
+
commands?: SavedCommand[];
|
|
755
|
+
onSaveCommand?: (name: string, text: string) => Promise<string>;
|
|
756
|
+
onRenameCommand?: (id: string, newName: string) => Promise<void>;
|
|
757
|
+
onDeleteCommand?: (id: string) => Promise<void>;
|
|
758
|
+
/** Optional close button to render in header (for floating mode) */
|
|
759
|
+
closeButton?: React$1.ReactNode;
|
|
760
|
+
}
|
|
761
|
+
/**
|
|
762
|
+
* Chat panel content - fills its container.
|
|
763
|
+
* Use directly for embedded mode, or wrap with UseAIFloatingChatWrapper for floating mode.
|
|
764
|
+
*/
|
|
765
|
+
declare function UseAIChatPanel({ onSendMessage, messages, loading, connected, streamingText, currentChatId, onNewChat, onLoadChat, onDeleteChat, onListChats, suggestions, availableAgents, defaultAgent, selectedAgent, onAgentChange, fileUploadConfig, commands, onSaveCommand, onRenameCommand, onDeleteCommand, closeButton, }: UseAIChatPanelProps): react_jsx_runtime.JSX.Element;
|
|
766
|
+
|
|
767
|
+
/**
|
|
768
|
+
* Handler for AG-UI events from the server.
|
|
769
|
+
*/
|
|
770
|
+
type AGUIEventHandler = (event: AGUIEvent) => void;
|
|
771
|
+
/**
|
|
772
|
+
* Simplified message handler for text responses.
|
|
773
|
+
*/
|
|
774
|
+
type MessageHandler = (content: string) => void;
|
|
775
|
+
/**
|
|
776
|
+
* Tool call handler that receives the tool name, arguments, and a callback to send the result.
|
|
777
|
+
*/
|
|
778
|
+
type ToolCallHandler = (toolCallId: string, toolName: string, args: Record<string, unknown>) => void;
|
|
779
|
+
/**
|
|
780
|
+
* Socket.IO client for communicating with the UseAI server.
|
|
781
|
+
* Uses the AG-UI protocol (https://docs.ag-ui.com/), so will be compatible with other AG-UI compliant servers.
|
|
782
|
+
*
|
|
783
|
+
* Handles:
|
|
784
|
+
* - Connection management and automatic reconnection
|
|
785
|
+
* - Sending RunAgentInput messages to server
|
|
786
|
+
* - Parsing AG-UI event streams from server
|
|
787
|
+
* - Tool execution coordination
|
|
788
|
+
*
|
|
789
|
+
* You probably don't need to use this directly, instead use {@link UseAIProvider}.
|
|
790
|
+
*/
|
|
791
|
+
declare class UseAIClient {
|
|
792
|
+
private serverUrl;
|
|
793
|
+
private socket;
|
|
794
|
+
private eventHandlers;
|
|
795
|
+
private reconnectAttempts;
|
|
796
|
+
private maxReconnectAttempts;
|
|
797
|
+
private reconnectDelay;
|
|
798
|
+
private _threadId;
|
|
799
|
+
private _tools;
|
|
800
|
+
private _messages;
|
|
801
|
+
private _state;
|
|
802
|
+
private mcpHeadersProvider?;
|
|
803
|
+
private _availableAgents;
|
|
804
|
+
private _defaultAgent;
|
|
805
|
+
private _selectedAgent;
|
|
806
|
+
private agentsChangeHandlers;
|
|
807
|
+
private connectionStateHandlers;
|
|
808
|
+
private _currentMessageId;
|
|
809
|
+
private _currentMessageContent;
|
|
810
|
+
private _currentAssistantMessage;
|
|
811
|
+
private _currentAssistantToolCalls;
|
|
812
|
+
private currentToolCalls;
|
|
813
|
+
/**
|
|
814
|
+
* Creates a new UseAI client instance.
|
|
815
|
+
*
|
|
816
|
+
* @param serverUrl - The WebSocket URL of the UseAI server
|
|
817
|
+
*/
|
|
818
|
+
constructor(serverUrl: string);
|
|
819
|
+
/**
|
|
820
|
+
* Establishes a Socket.IO connection to the server.
|
|
821
|
+
* Connection state changes are notified via onConnectionStateChange().
|
|
822
|
+
* Socket.IO handles reconnection automatically.
|
|
823
|
+
*/
|
|
824
|
+
connect(): void;
|
|
825
|
+
private handleEvent;
|
|
826
|
+
/**
|
|
827
|
+
* Registers available tools and optional state with the server.
|
|
828
|
+
* This updates the session state for future agent runs.
|
|
829
|
+
*
|
|
830
|
+
* @param tools - Array of tool definitions to register
|
|
831
|
+
* @param state - Optional state object to provide to the AI.
|
|
832
|
+
*/
|
|
833
|
+
registerTools(tools: ToolDefinition[], state?: unknown): void;
|
|
834
|
+
/**
|
|
835
|
+
* Updates the state without re-registering tools.
|
|
836
|
+
* Call this before sendPrompt to ensure the AI sees the latest UI state.
|
|
837
|
+
*
|
|
838
|
+
* @param state - The current state object to provide to the AI
|
|
839
|
+
*/
|
|
840
|
+
updateState(state: unknown): void;
|
|
841
|
+
/**
|
|
842
|
+
* Sets the MCP headers provider.
|
|
843
|
+
* The provider will be called each time a message is sent to get fresh headers.
|
|
844
|
+
*
|
|
845
|
+
* @param provider - Function that returns MCP headers configuration
|
|
846
|
+
*/
|
|
847
|
+
setMcpHeadersProvider(provider: () => McpHeadersMap | Promise<McpHeadersMap>): void;
|
|
848
|
+
/**
|
|
849
|
+
* Sends a user prompt to the AI.
|
|
850
|
+
*
|
|
851
|
+
* @param prompt - The user's prompt/question (text part)
|
|
852
|
+
* @param multimodalContent - Optional multimodal content (text, images, files)
|
|
853
|
+
*/
|
|
854
|
+
sendPrompt(prompt: string, multimodalContent?: MultimodalContent[]): Promise<void>;
|
|
855
|
+
/**
|
|
856
|
+
* Sends the result of a tool execution back to the server.
|
|
857
|
+
*
|
|
858
|
+
* @param toolCallId - The ID of the tool call being responded to
|
|
859
|
+
* @param result - The result returned by the tool execution
|
|
860
|
+
* @param state - Optional updated state to send back to the AI
|
|
861
|
+
*/
|
|
862
|
+
sendToolResponse(toolCallId: string, result: unknown, state?: unknown): void;
|
|
863
|
+
/**
|
|
864
|
+
* Retrieves accumulated tool call data for a specific tool call ID.
|
|
865
|
+
* Used to get the complete tool name and arguments after they've been streamed
|
|
866
|
+
* across multiple TOOL_CALL_ARGS events.
|
|
867
|
+
*
|
|
868
|
+
* @param toolCallId - The ID of the tool call
|
|
869
|
+
* @returns Object with tool name and accumulated arguments, or undefined if not found
|
|
870
|
+
*/
|
|
871
|
+
getToolCallData(toolCallId: string): {
|
|
872
|
+
name: string;
|
|
873
|
+
args: string;
|
|
874
|
+
} | undefined;
|
|
875
|
+
/**
|
|
876
|
+
* Registers an AG-UI event handler for receiving server events.
|
|
877
|
+
*
|
|
878
|
+
* @param id - Unique identifier for this handler
|
|
879
|
+
* @param handler - Callback function to handle incoming AG-UI events
|
|
880
|
+
* @returns Cleanup function to unregister the handler
|
|
881
|
+
*/
|
|
882
|
+
onEvent(id: string, handler: AGUIEventHandler): () => void;
|
|
883
|
+
/**
|
|
884
|
+
* Helper method to listen for text message content.
|
|
885
|
+
* Aggregates TEXT_MESSAGE_CONTENT events and calls handler with complete messages.
|
|
886
|
+
*
|
|
887
|
+
* @param handler - Callback function to handle complete text messages
|
|
888
|
+
* @returns Cleanup function
|
|
889
|
+
*/
|
|
890
|
+
onTextMessage(handler: MessageHandler): () => void;
|
|
891
|
+
/**
|
|
892
|
+
* Helper method to listen for tool call requests.
|
|
893
|
+
* Aggregates TOOL_CALL_* events and calls handler with complete tool calls.
|
|
894
|
+
*
|
|
895
|
+
* @param handler - Callback function to handle tool calls
|
|
896
|
+
* @returns Cleanup function
|
|
897
|
+
*/
|
|
898
|
+
onToolCall(handler: ToolCallHandler): () => void;
|
|
899
|
+
/**
|
|
900
|
+
* Gets the current accumulated message content (useful during streaming).
|
|
901
|
+
*/
|
|
902
|
+
get currentMessageContent(): string;
|
|
903
|
+
/**
|
|
904
|
+
* Gets the current thread ID for this session.
|
|
905
|
+
* Generates a new one if not set.
|
|
906
|
+
*/
|
|
907
|
+
get threadId(): string;
|
|
908
|
+
/**
|
|
909
|
+
* Gets the current conversation messages.
|
|
910
|
+
*/
|
|
911
|
+
get messages(): Message$1[];
|
|
912
|
+
/**
|
|
913
|
+
* Gets the current state.
|
|
914
|
+
*/
|
|
915
|
+
get state(): unknown;
|
|
916
|
+
/**
|
|
917
|
+
* Gets the list of available agents from the server.
|
|
918
|
+
*/
|
|
919
|
+
get availableAgents(): AgentInfo[];
|
|
920
|
+
/**
|
|
921
|
+
* Gets the default agent ID from the server.
|
|
922
|
+
*/
|
|
923
|
+
get defaultAgent(): string | null;
|
|
924
|
+
/**
|
|
925
|
+
* Gets the currently selected agent ID.
|
|
926
|
+
* Returns null if using server default.
|
|
927
|
+
*/
|
|
928
|
+
get selectedAgent(): string | null;
|
|
929
|
+
/**
|
|
930
|
+
* Gets the effective agent ID (selected or default).
|
|
931
|
+
*/
|
|
932
|
+
get currentAgent(): string | null;
|
|
933
|
+
/**
|
|
934
|
+
* Sets the agent to use for requests.
|
|
935
|
+
* Pass null to use the server default.
|
|
936
|
+
*
|
|
937
|
+
* @param agentId - The agent ID to use, or null for server default
|
|
938
|
+
*/
|
|
939
|
+
setAgent(agentId: string | null): void;
|
|
940
|
+
/**
|
|
941
|
+
* Subscribes to agent changes (when server sends available agents).
|
|
942
|
+
*
|
|
943
|
+
* @param handler - Callback function receiving agents list and default agent
|
|
944
|
+
* @returns Cleanup function to unsubscribe
|
|
945
|
+
*/
|
|
946
|
+
onAgentsChange(handler: (agents: AgentInfo[], defaultAgent: string | null) => void): () => void;
|
|
947
|
+
/**
|
|
948
|
+
* Subscribes to connection state changes.
|
|
949
|
+
* This is called on both initial connection and reconnection.
|
|
950
|
+
*
|
|
951
|
+
* @param handler - Callback function receiving connection state (true = connected, false = disconnected)
|
|
952
|
+
* @returns Cleanup function to unsubscribe
|
|
953
|
+
*/
|
|
954
|
+
onConnectionStateChange(handler: (connected: boolean) => void): () => void;
|
|
955
|
+
/**
|
|
956
|
+
* Sets the thread ID for this session.
|
|
957
|
+
* When the thread ID changes, conversation state is cleared to prevent history bleeding.
|
|
958
|
+
* Use this when switching between different chat conversations.
|
|
959
|
+
*
|
|
960
|
+
* @param threadId - The thread/chat ID to use (typically the chatId)
|
|
961
|
+
*/
|
|
962
|
+
setThreadId(threadId: string): void;
|
|
963
|
+
/**
|
|
964
|
+
* Loads messages into the conversation history (for resuming from storage).
|
|
965
|
+
* @param messages - Array of messages to load
|
|
966
|
+
*/
|
|
967
|
+
loadMessages(messages: Message$1[]): void;
|
|
968
|
+
/**
|
|
969
|
+
* Clears the conversation history and resets the thread.
|
|
970
|
+
*/
|
|
971
|
+
clearConversation(): void;
|
|
972
|
+
send(message: UseAIClientMessage): void;
|
|
973
|
+
/**
|
|
974
|
+
* Closes the Socket.IO connection to the server.
|
|
975
|
+
*/
|
|
976
|
+
disconnect(): void;
|
|
977
|
+
/**
|
|
978
|
+
* Checks if the client is currently connected to the server.
|
|
979
|
+
*
|
|
980
|
+
* @returns true if connected, false otherwise
|
|
981
|
+
*/
|
|
982
|
+
isConnected(): boolean;
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
/**
|
|
986
|
+
* Chat management context (from useChatManagement hook).
|
|
987
|
+
*/
|
|
988
|
+
interface ChatContextValue {
|
|
989
|
+
/** The current chat ID */
|
|
990
|
+
currentId: string | null;
|
|
991
|
+
/** Creates a new chat and switches to it */
|
|
992
|
+
create: () => Promise<string>;
|
|
993
|
+
/** Loads an existing chat by ID */
|
|
994
|
+
load: (chatId: string) => Promise<void>;
|
|
995
|
+
/** Deletes a chat by ID */
|
|
996
|
+
delete: (chatId: string) => Promise<void>;
|
|
997
|
+
/** Lists all available chats */
|
|
998
|
+
list: () => Promise<Array<Omit<Chat, 'messages'>>>;
|
|
999
|
+
/** Clears the current chat messages */
|
|
1000
|
+
clear: () => Promise<void>;
|
|
1001
|
+
}
|
|
1002
|
+
/**
|
|
1003
|
+
* Agent selection context (from useAgentSelection hook).
|
|
1004
|
+
*/
|
|
1005
|
+
interface AgentContextValue {
|
|
1006
|
+
/** List of available agents from the server */
|
|
1007
|
+
available: AgentInfo[];
|
|
1008
|
+
/** The default agent ID from the server */
|
|
1009
|
+
default: string | null;
|
|
1010
|
+
/** The currently selected agent ID (null means use server default) */
|
|
1011
|
+
selected: string | null;
|
|
1012
|
+
/** Sets the agent to use for requests */
|
|
1013
|
+
set: (agentId: string | null) => void;
|
|
1014
|
+
}
|
|
1015
|
+
/**
|
|
1016
|
+
* Command management context (from useCommandManagement hook).
|
|
1017
|
+
*/
|
|
1018
|
+
interface CommandContextValue {
|
|
1019
|
+
/** List of saved slash commands */
|
|
1020
|
+
list: SavedCommand[];
|
|
1021
|
+
/** Refreshes the commands list from storage */
|
|
1022
|
+
refresh: () => Promise<void>;
|
|
1023
|
+
/** Saves a new command */
|
|
1024
|
+
save: (name: string, text: string) => Promise<string>;
|
|
1025
|
+
/** Renames an existing command */
|
|
1026
|
+
rename: (id: string, newName: string) => Promise<void>;
|
|
1027
|
+
/** Deletes a command by ID */
|
|
1028
|
+
delete: (id: string) => Promise<void>;
|
|
1029
|
+
}
|
|
1030
|
+
/**
|
|
1031
|
+
* Tool registry context (from useToolRegistry hook).
|
|
1032
|
+
*/
|
|
1033
|
+
interface ToolRegistryContextValue {
|
|
1034
|
+
/** Registers tools for a specific component */
|
|
1035
|
+
register: (id: string, tools: ToolsDefinition, options?: {
|
|
1036
|
+
invisible?: boolean;
|
|
1037
|
+
}) => void;
|
|
1038
|
+
/** Unregisters tools for a specific component */
|
|
1039
|
+
unregister: (id: string) => void;
|
|
1040
|
+
}
|
|
1041
|
+
/**
|
|
1042
|
+
* Prompt management context.
|
|
1043
|
+
*/
|
|
1044
|
+
interface PromptsContextValue {
|
|
1045
|
+
/** Updates the prompt and suggestions for a specific component */
|
|
1046
|
+
update: (id: string, prompt?: string, suggestions?: string[]) => void;
|
|
1047
|
+
/** Registers a waiter function for a component */
|
|
1048
|
+
registerWaiter: (id: string, waiter: () => Promise<void>) => void;
|
|
1049
|
+
/** Unregisters a waiter function */
|
|
1050
|
+
unregisterWaiter: (id: string) => void;
|
|
1051
|
+
}
|
|
1052
|
+
/**
|
|
1053
|
+
* Context value provided by UseAIProvider.
|
|
1054
|
+
* Contains connection state and methods for managing tools and prompts.
|
|
1055
|
+
*/
|
|
1056
|
+
interface UseAIContextValue {
|
|
1057
|
+
/** The WebSocket URL of the UseAI server */
|
|
1058
|
+
serverUrl: string;
|
|
1059
|
+
/** Whether the client is connected to the server */
|
|
1060
|
+
connected: boolean;
|
|
1061
|
+
/** The underlying WebSocket client instance */
|
|
1062
|
+
client: UseAIClient | null;
|
|
1063
|
+
/** Tool registry (from useToolRegistry hook) */
|
|
1064
|
+
tools: ToolRegistryContextValue;
|
|
1065
|
+
/** Prompt management */
|
|
1066
|
+
prompts: PromptsContextValue;
|
|
1067
|
+
/** Chat management (from useChatManagement hook) */
|
|
1068
|
+
chat: ChatContextValue;
|
|
1069
|
+
/** Agent selection (from useAgentSelection hook) */
|
|
1070
|
+
agents: AgentContextValue;
|
|
1071
|
+
/** Command management (from useCommandManagement hook) */
|
|
1072
|
+
commands: CommandContextValue;
|
|
1073
|
+
}
|
|
1074
|
+
/**
|
|
1075
|
+
* Props for custom floating button component.
|
|
1076
|
+
* Used to customize the appearance and behavior of the AI chat trigger button.
|
|
1077
|
+
*/
|
|
1078
|
+
interface FloatingButtonProps {
|
|
1079
|
+
/** Callback when the button is clicked */
|
|
1080
|
+
onClick: () => void;
|
|
1081
|
+
/** Whether the client is connected to the server */
|
|
1082
|
+
connected: boolean;
|
|
1083
|
+
/** Whether there are unread messages */
|
|
1084
|
+
hasUnread?: boolean;
|
|
1085
|
+
}
|
|
1086
|
+
/**
|
|
1087
|
+
* Props for custom chat panel component.
|
|
1088
|
+
* Used to customize the appearance and behavior of the AI chat interface.
|
|
1089
|
+
*/
|
|
1090
|
+
interface ChatPanelProps {
|
|
1091
|
+
/** Whether the chat panel is open */
|
|
1092
|
+
isOpen: boolean;
|
|
1093
|
+
/** Callback when the panel should close */
|
|
1094
|
+
onClose: () => void;
|
|
1095
|
+
/** Callback when a message is sent */
|
|
1096
|
+
onSendMessage: (message: string) => void;
|
|
1097
|
+
/** Array of messages in the conversation */
|
|
1098
|
+
messages: Message[];
|
|
1099
|
+
/** Whether the AI is currently processing */
|
|
1100
|
+
loading: boolean;
|
|
1101
|
+
/** Whether the client is connected to the server */
|
|
1102
|
+
connected: boolean;
|
|
1103
|
+
/** Optional array of suggestion strings to display when chat is empty */
|
|
1104
|
+
suggestions?: string[];
|
|
1105
|
+
/** List of available agents from the server */
|
|
1106
|
+
availableAgents?: AgentInfo[];
|
|
1107
|
+
/** The default agent ID from the server */
|
|
1108
|
+
defaultAgent?: string | null;
|
|
1109
|
+
/** The currently selected agent ID */
|
|
1110
|
+
selectedAgent?: string | null;
|
|
1111
|
+
/** Callback when agent is changed */
|
|
1112
|
+
onAgentChange?: (agentId: string | null) => void;
|
|
1113
|
+
}
|
|
1114
|
+
interface UseAIProviderProps extends UseAIConfig {
|
|
1115
|
+
children: ReactNode;
|
|
1116
|
+
systemPrompt?: string;
|
|
1117
|
+
CustomButton?: React$1.ComponentType<FloatingButtonProps> | null;
|
|
1118
|
+
CustomChat?: React$1.ComponentType<ChatPanelProps> | null;
|
|
1119
|
+
/**
|
|
1120
|
+
* Custom chat repository for message persistence.
|
|
1121
|
+
* Defaults to LocalStorageChatRepository if not provided.
|
|
1122
|
+
*/
|
|
1123
|
+
chatRepository?: ChatRepository;
|
|
1124
|
+
/**
|
|
1125
|
+
* Callback to provide HTTP headers for MCP endpoints.
|
|
1126
|
+
* Called each time AI is invoked by use-ai.
|
|
1127
|
+
* Returns a mapping of MCP endpoint patterns to header configurations.
|
|
1128
|
+
*
|
|
1129
|
+
* Patterns can be:
|
|
1130
|
+
* - Constant strings: `https://api.example.com` - Exact match
|
|
1131
|
+
* - Glob patterns: `https://*.meetsmore.com` - Wildcard matching using picomatch
|
|
1132
|
+
*
|
|
1133
|
+
* @example
|
|
1134
|
+
* ```typescript
|
|
1135
|
+
* mcpHeadersProvider={() => ({
|
|
1136
|
+
* // Exact match
|
|
1137
|
+
* 'https://api.example.com': {
|
|
1138
|
+
* headers: { 'Authorization': `Bearer ${userToken}` }
|
|
1139
|
+
* },
|
|
1140
|
+
* // Wildcard subdomain
|
|
1141
|
+
* 'https://*.meetsmore.com': {
|
|
1142
|
+
* headers: { 'X-API-Key': apiKey }
|
|
1143
|
+
* },
|
|
1144
|
+
* // Multiple wildcards
|
|
1145
|
+
* '*://*.example.com': {
|
|
1146
|
+
* headers: { 'X-Custom': 'value' }
|
|
1147
|
+
* }
|
|
1148
|
+
* })}
|
|
1149
|
+
* ```
|
|
1150
|
+
*/
|
|
1151
|
+
mcpHeadersProvider?: () => _meetsmore_oss_use_ai_core.McpHeadersMap | Promise<_meetsmore_oss_use_ai_core.McpHeadersMap>;
|
|
1152
|
+
/**
|
|
1153
|
+
* Configuration for file uploads.
|
|
1154
|
+
* File upload is enabled by default with EmbedFileUploadBackend, 10MB max size,
|
|
1155
|
+
* and accepts images and PDFs.
|
|
1156
|
+
*
|
|
1157
|
+
* Set to `false` to disable file uploads.
|
|
1158
|
+
*
|
|
1159
|
+
* @default { backend: EmbedFileUploadBackend, maxFileSize: 10MB, acceptedTypes: ['image/*', 'application/pdf'] }
|
|
1160
|
+
*
|
|
1161
|
+
* @example
|
|
1162
|
+
* ```typescript
|
|
1163
|
+
* // Custom config
|
|
1164
|
+
* fileUploadConfig={{
|
|
1165
|
+
* backend: new EmbedFileUploadBackend(),
|
|
1166
|
+
* maxFileSize: 5 * 1024 * 1024, // 5MB
|
|
1167
|
+
* acceptedTypes: ['image/*'],
|
|
1168
|
+
* }}
|
|
1169
|
+
*
|
|
1170
|
+
* // Disable file uploads
|
|
1171
|
+
* fileUploadConfig={false}
|
|
1172
|
+
* ```
|
|
1173
|
+
*/
|
|
1174
|
+
fileUploadConfig?: FileUploadConfig | false;
|
|
1175
|
+
/**
|
|
1176
|
+
* Custom command repository for slash command persistence.
|
|
1177
|
+
* Defaults to LocalStorageCommandRepository if not provided.
|
|
1178
|
+
*/
|
|
1179
|
+
commandRepository?: CommandRepository;
|
|
1180
|
+
/**
|
|
1181
|
+
* Whether to render the built-in chat UI (floating button + panel).
|
|
1182
|
+
* Set to false when using the `<UseAIChat>` component to control chat placement.
|
|
1183
|
+
* @default true
|
|
1184
|
+
*/
|
|
1185
|
+
renderChat?: boolean;
|
|
1186
|
+
/**
|
|
1187
|
+
* Custom theme for all chat UI components.
|
|
1188
|
+
* Partial allows overriding only specific values.
|
|
1189
|
+
*/
|
|
1190
|
+
theme?: Partial<UseAITheme>;
|
|
1191
|
+
/**
|
|
1192
|
+
* Custom strings for all chat UI components.
|
|
1193
|
+
* Useful for internationalization (i18n) or branding.
|
|
1194
|
+
* Partial allows overriding only specific strings.
|
|
1195
|
+
*/
|
|
1196
|
+
strings?: Partial<UseAIStrings>;
|
|
1197
|
+
/**
|
|
1198
|
+
* List of agent IDs to show in the UI.
|
|
1199
|
+
* When provided, only agents with these IDs will be shown (if they exist on the server).
|
|
1200
|
+
*
|
|
1201
|
+
* @example
|
|
1202
|
+
* ```typescript
|
|
1203
|
+
* <UseAIProvider
|
|
1204
|
+
* serverUrl="wss://your-server.com"
|
|
1205
|
+
* visibleAgentIds={['claude-sonnet', 'claude-opus']}
|
|
1206
|
+
* >
|
|
1207
|
+
* <App />
|
|
1208
|
+
* </UseAIProvider>
|
|
1209
|
+
* ```
|
|
1210
|
+
*/
|
|
1211
|
+
visibleAgentIds?: AgentInfo['id'][];
|
|
1212
|
+
}
|
|
1213
|
+
/**
|
|
1214
|
+
* Provider component that manages AI client connection and tool registration.
|
|
1215
|
+
* Must wrap all components that use the useAI hook.
|
|
1216
|
+
*
|
|
1217
|
+
* Features:
|
|
1218
|
+
* - Establishes and maintains WebSocket connection to UseAI server
|
|
1219
|
+
* - Aggregates tools from all child useAI hooks
|
|
1220
|
+
* - Handles tool execution requests from the AI
|
|
1221
|
+
* - Provides floating button and chat panel UI
|
|
1222
|
+
*
|
|
1223
|
+
* @param props - Provider configuration and children
|
|
1224
|
+
*
|
|
1225
|
+
* @example
|
|
1226
|
+
* ```typescript
|
|
1227
|
+
* import { UseAIProvider } from '@meetsmore-oss/use-ai-client';
|
|
1228
|
+
*
|
|
1229
|
+
* function App() {
|
|
1230
|
+
* return (
|
|
1231
|
+
* <UseAIProvider
|
|
1232
|
+
* serverUrl="wss://your-server.com"
|
|
1233
|
+
* systemPrompt="You are a helpful assistant for managing todos"
|
|
1234
|
+
* >
|
|
1235
|
+
* <YourApp />
|
|
1236
|
+
* </UseAIProvider>
|
|
1237
|
+
* );
|
|
1238
|
+
* }
|
|
1239
|
+
* ```
|
|
1240
|
+
*/
|
|
1241
|
+
declare function UseAIProvider({ serverUrl, children, systemPrompt, CustomButton, CustomChat, chatRepository, mcpHeadersProvider, fileUploadConfig: fileUploadConfigProp, commandRepository, renderChat, theme: customTheme, strings: customStrings, visibleAgentIds, }: UseAIProviderProps): react_jsx_runtime.JSX.Element;
|
|
1242
|
+
/**
|
|
1243
|
+
* Hook to access the UseAI context.
|
|
1244
|
+
* When used outside a UseAIProvider, returns a no-op context and logs a warning.
|
|
1245
|
+
* This allows components with useAI hooks to render even when UseAIProvider
|
|
1246
|
+
* is conditionally not rendered (e.g., feature flagged).
|
|
1247
|
+
*
|
|
1248
|
+
* @returns The UseAI context value (or no-op if provider is missing)
|
|
1249
|
+
*
|
|
1250
|
+
* @example
|
|
1251
|
+
* ```typescript
|
|
1252
|
+
* function MyComponent() {
|
|
1253
|
+
* const { connected, client } = useAIContext();
|
|
1254
|
+
* return <div>Connected: {connected}</div>;
|
|
1255
|
+
* }
|
|
1256
|
+
* ```
|
|
1257
|
+
*/
|
|
1258
|
+
declare function useAIContext(): UseAIContextValue;
|
|
1259
|
+
|
|
1260
|
+
/**
|
|
1261
|
+
* Props for the floating chat wrapper.
|
|
1262
|
+
*/
|
|
1263
|
+
interface UseAIFloatingChatWrapperProps {
|
|
1264
|
+
isOpen: boolean;
|
|
1265
|
+
onClose: () => void;
|
|
1266
|
+
children: React$1.ReactNode;
|
|
1267
|
+
}
|
|
1268
|
+
/**
|
|
1269
|
+
* Wrapper that adds floating chrome (backdrop, positioning, animations).
|
|
1270
|
+
* Wrap UseAIChatPanel with this for a floating chat experience.
|
|
1271
|
+
*/
|
|
1272
|
+
declare function UseAIFloatingChatWrapper({ isOpen, onClose, children, }: UseAIFloatingChatWrapperProps): react_jsx_runtime.JSX.Element | null;
|
|
1273
|
+
interface CloseButtonProps {
|
|
1274
|
+
onClick: () => void;
|
|
1275
|
+
}
|
|
1276
|
+
/**
|
|
1277
|
+
* Close button component for the floating chat header.
|
|
1278
|
+
*/
|
|
1279
|
+
declare function CloseButton({ onClick }: CloseButtonProps): react_jsx_runtime.JSX.Element;
|
|
1280
|
+
|
|
1281
|
+
interface UseAIFloatingButtonProps {
|
|
1282
|
+
onClick: () => void;
|
|
1283
|
+
connected: boolean;
|
|
1284
|
+
hasUnread?: boolean;
|
|
1285
|
+
}
|
|
1286
|
+
declare function UseAIFloatingButton({ onClick, connected, hasUnread, }: UseAIFloatingButtonProps): react_jsx_runtime.JSX.Element;
|
|
1287
|
+
|
|
1288
|
+
/**
|
|
1289
|
+
* Props for UseAIChat component.
|
|
1290
|
+
*/
|
|
1291
|
+
interface UseAIChatProps {
|
|
1292
|
+
/**
|
|
1293
|
+
* When true, renders as a floating panel with backdrop.
|
|
1294
|
+
* When false (default), renders inline filling its container.
|
|
1295
|
+
*/
|
|
1296
|
+
floating?: boolean;
|
|
1297
|
+
}
|
|
1298
|
+
/**
|
|
1299
|
+
* Standalone chat component that can be placed anywhere within UseAIProvider.
|
|
1300
|
+
*
|
|
1301
|
+
* Use this when you want to control where the chat UI is rendered,
|
|
1302
|
+
* such as embedding it in a sidebar or specific container.
|
|
1303
|
+
*
|
|
1304
|
+
* @example
|
|
1305
|
+
* ```tsx
|
|
1306
|
+
* // Embedded in a sidebar
|
|
1307
|
+
* <UseAIProvider serverUrl="ws://localhost:8081" renderChat={false}>
|
|
1308
|
+
* <div style={{ display: 'flex', height: '100vh' }}>
|
|
1309
|
+
* <MainContent style={{ flex: 1 }} />
|
|
1310
|
+
* <aside style={{ width: 380 }}>
|
|
1311
|
+
* <UseAIChat />
|
|
1312
|
+
* </aside>
|
|
1313
|
+
* </div>
|
|
1314
|
+
* </UseAIProvider>
|
|
1315
|
+
*
|
|
1316
|
+
* // Floating mode (manually controlled)
|
|
1317
|
+
* <UseAIProvider serverUrl="ws://localhost:8081" renderChat={false}>
|
|
1318
|
+
* <App />
|
|
1319
|
+
* <UseAIChat floating />
|
|
1320
|
+
* </UseAIProvider>
|
|
1321
|
+
* ```
|
|
1322
|
+
*/
|
|
1323
|
+
declare function UseAIChat({ floating }: UseAIChatProps): react_jsx_runtime.JSX.Element;
|
|
1324
|
+
|
|
1325
|
+
/**
|
|
1326
|
+
* LocalStorage-based implementation of ChatRepository.
|
|
1327
|
+
* Stores chats in browser `localStorage`.
|
|
1328
|
+
*
|
|
1329
|
+
* Storage structure:
|
|
1330
|
+
* - `use-ai:chat-index`: Array of chat IDs
|
|
1331
|
+
* - `use-ai:chat:{id}`: Individual chat data
|
|
1332
|
+
*
|
|
1333
|
+
* Storage limit: Only the most recent 20 chats are kept by default.
|
|
1334
|
+
* When creating a new chat, the oldest chat (by updatedAt) is automatically deleted if the limit is reached.
|
|
1335
|
+
*
|
|
1336
|
+
* @example
|
|
1337
|
+
* ```typescript
|
|
1338
|
+
* // Use default 20-chat limit
|
|
1339
|
+
* const repository = new LocalStorageChatRepository();
|
|
1340
|
+
*
|
|
1341
|
+
* // Customize max chats limit
|
|
1342
|
+
* const repository = new LocalStorageChatRepository(localStorage, 50);
|
|
1343
|
+
* ```
|
|
1344
|
+
*/
|
|
1345
|
+
declare class LocalStorageChatRepository implements ChatRepository {
|
|
1346
|
+
private storage;
|
|
1347
|
+
private maxChats;
|
|
1348
|
+
/**
|
|
1349
|
+
* Creates a new LocalStorageChatRepository.
|
|
1350
|
+
*
|
|
1351
|
+
* @param storage - Storage implementation to use (defaults to browser `localStorage`)
|
|
1352
|
+
* @param maxChats - Maximum number of chats to keep (defaults to 20). Oldest chats are automatically deleted when this limit is exceeded.
|
|
1353
|
+
*/
|
|
1354
|
+
constructor(storage?: Storage, maxChats?: number);
|
|
1355
|
+
createChat(options?: CreateChatOptions): Promise<string>;
|
|
1356
|
+
loadChat(id: string): Promise<Chat | null>;
|
|
1357
|
+
saveChat(chat: Chat): Promise<void>;
|
|
1358
|
+
deleteChat(id: string): Promise<void>;
|
|
1359
|
+
listChats(options?: ListChatsOptions): Promise<Array<Omit<Chat, 'messages'>>>;
|
|
1360
|
+
deleteAll(): Promise<void>;
|
|
1361
|
+
private getChatKey;
|
|
1362
|
+
private getIndex;
|
|
1363
|
+
private addToIndex;
|
|
1364
|
+
private removeFromIndex;
|
|
1365
|
+
private enforceMaxChatsLimit;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
/**
|
|
1369
|
+
* File upload backend that embeds files as base64 data URLs.
|
|
1370
|
+
*
|
|
1371
|
+
* This is the default backend for file uploads. It converts files
|
|
1372
|
+
* to base64 data URLs at send time, which are then embedded directly
|
|
1373
|
+
* in the message sent to the AI.
|
|
1374
|
+
*
|
|
1375
|
+
* Pros:
|
|
1376
|
+
* - No external storage required
|
|
1377
|
+
* - Simple setup
|
|
1378
|
+
*
|
|
1379
|
+
* Cons:
|
|
1380
|
+
* - Increases message size (base64 is ~33% larger than binary)
|
|
1381
|
+
* - Files are not persistent across sessions
|
|
1382
|
+
* - Not suitable for very large files
|
|
1383
|
+
*
|
|
1384
|
+
* @example
|
|
1385
|
+
* ```typescript
|
|
1386
|
+
* import { UseAIProvider, EmbedFileUploadBackend } from '@meetsmore-oss/use-ai-client';
|
|
1387
|
+
*
|
|
1388
|
+
* <UseAIProvider
|
|
1389
|
+
* serverUrl="wss://..."
|
|
1390
|
+
* fileUploadConfig={{
|
|
1391
|
+
* backend: new EmbedFileUploadBackend(),
|
|
1392
|
+
* maxFileSize: 10 * 1024 * 1024, // 10MB
|
|
1393
|
+
* }}
|
|
1394
|
+
* >
|
|
1395
|
+
* <App />
|
|
1396
|
+
* </UseAIProvider>
|
|
1397
|
+
* ```
|
|
1398
|
+
*/
|
|
1399
|
+
declare class EmbedFileUploadBackend implements FileUploadBackend {
|
|
1400
|
+
/**
|
|
1401
|
+
* Converts a File to a base64 data URL.
|
|
1402
|
+
*
|
|
1403
|
+
* @param file - The File object to convert
|
|
1404
|
+
* @returns Promise resolving to a base64 data URL (e.g., "data:image/png;base64,...")
|
|
1405
|
+
* @throws Error if file reading fails
|
|
1406
|
+
*/
|
|
1407
|
+
prepareForSend(file: File): Promise<string>;
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
/**
|
|
1411
|
+
* Props for the drop zone container element.
|
|
1412
|
+
*/
|
|
1413
|
+
interface DropZoneProps {
|
|
1414
|
+
onDragEnter: (e: React$1.DragEvent) => void;
|
|
1415
|
+
onDragOver: (e: React$1.DragEvent) => void;
|
|
1416
|
+
onDragLeave: (e: React$1.DragEvent) => void;
|
|
1417
|
+
onDrop: (e: React$1.DragEvent) => void;
|
|
1418
|
+
}
|
|
1419
|
+
interface UseFileUploadOptions {
|
|
1420
|
+
/** Configuration for file uploads. If undefined, file upload is disabled. */
|
|
1421
|
+
config?: FileUploadConfig;
|
|
1422
|
+
/** Whether file operations should be disabled (e.g., during loading) */
|
|
1423
|
+
disabled?: boolean;
|
|
1424
|
+
/** Dependency that resets attachments when changed (e.g., currentChatId) */
|
|
1425
|
+
resetDependency?: unknown;
|
|
1426
|
+
}
|
|
1427
|
+
interface UseFileUploadReturn {
|
|
1428
|
+
/** Current file attachments */
|
|
1429
|
+
attachments: FileAttachment[];
|
|
1430
|
+
/** Whether a drag operation is in progress over the drop zone */
|
|
1431
|
+
isDragging: boolean;
|
|
1432
|
+
/** Current file error message, if any */
|
|
1433
|
+
fileError: string | null;
|
|
1434
|
+
/** Whether file upload is enabled */
|
|
1435
|
+
enabled: boolean;
|
|
1436
|
+
/** Maximum file size in bytes */
|
|
1437
|
+
maxFileSize: number;
|
|
1438
|
+
/** Accepted MIME types */
|
|
1439
|
+
acceptedTypes?: string[];
|
|
1440
|
+
/** Ref to attach to hidden file input */
|
|
1441
|
+
fileInputRef: React$1.MutableRefObject<HTMLInputElement | null>;
|
|
1442
|
+
/** Validates and adds files to attachments */
|
|
1443
|
+
handleFiles: (files: FileList | File[]) => Promise<void>;
|
|
1444
|
+
/** Removes a file attachment by ID */
|
|
1445
|
+
removeAttachment: (id: string) => void;
|
|
1446
|
+
/** Clears all attachments */
|
|
1447
|
+
clearAttachments: () => void;
|
|
1448
|
+
/** Opens the file picker dialog */
|
|
1449
|
+
openFilePicker: () => void;
|
|
1450
|
+
/** Handler for file input change event */
|
|
1451
|
+
handleFileInputChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
|
|
1452
|
+
/** Handler for dragenter event (use with dragover/dragleave/drop) */
|
|
1453
|
+
handleDragEnter: (e: React$1.DragEvent) => void;
|
|
1454
|
+
/** Handler for dragover event */
|
|
1455
|
+
handleDragOver: (e: React$1.DragEvent) => void;
|
|
1456
|
+
/** Handler for dragleave event */
|
|
1457
|
+
handleDragLeave: (e: React$1.DragEvent) => void;
|
|
1458
|
+
/** Handler for drop event */
|
|
1459
|
+
handleDrop: (e: React$1.DragEvent) => void;
|
|
1460
|
+
/** Props to spread on the drop zone container element */
|
|
1461
|
+
getDropZoneProps: () => DropZoneProps;
|
|
1462
|
+
/** Overlay component to render inside the drop zone container (shows when dragging) */
|
|
1463
|
+
DropZoneOverlay: React$1.ReactNode;
|
|
1464
|
+
}
|
|
1465
|
+
/**
|
|
1466
|
+
* Hook for managing file uploads with drag-and-drop support.
|
|
1467
|
+
*
|
|
1468
|
+
* Features:
|
|
1469
|
+
* - File validation (size, type)
|
|
1470
|
+
* - Image preview generation
|
|
1471
|
+
* - Drag and drop handling
|
|
1472
|
+
* - Auto-clearing error messages
|
|
1473
|
+
* - Reset on dependency change (e.g., chat switch)
|
|
1474
|
+
*
|
|
1475
|
+
* @example
|
|
1476
|
+
* ```typescript
|
|
1477
|
+
* const {
|
|
1478
|
+
* attachments,
|
|
1479
|
+
* isDragging,
|
|
1480
|
+
* fileError,
|
|
1481
|
+
* fileInputRef,
|
|
1482
|
+
* handleDragOver,
|
|
1483
|
+
* handleDragLeave,
|
|
1484
|
+
* handleDrop,
|
|
1485
|
+
* openFilePicker,
|
|
1486
|
+
* handleFileInputChange,
|
|
1487
|
+
* removeAttachment,
|
|
1488
|
+
* } = useFileUpload({
|
|
1489
|
+
* config: fileUploadConfig,
|
|
1490
|
+
* disabled: loading,
|
|
1491
|
+
* resetDependency: currentChatId,
|
|
1492
|
+
* });
|
|
1493
|
+
* ```
|
|
1494
|
+
*/
|
|
1495
|
+
declare function useFileUpload({ config, disabled, resetDependency, }: UseFileUploadOptions): UseFileUploadReturn;
|
|
1496
|
+
|
|
1497
|
+
/**
|
|
1498
|
+
* LocalStorage-based implementation of CommandRepository.
|
|
1499
|
+
* Stores commands in browser localStorage with an index for efficient listing.
|
|
1500
|
+
*/
|
|
1501
|
+
declare class LocalStorageCommandRepository implements CommandRepository {
|
|
1502
|
+
private storage;
|
|
1503
|
+
private maxCommands;
|
|
1504
|
+
constructor(storage?: Storage, maxCommands?: number);
|
|
1505
|
+
createCommand(options: CreateCommandOptions): Promise<string>;
|
|
1506
|
+
loadCommand(id: string): Promise<SavedCommand | null>;
|
|
1507
|
+
loadCommandByName(name: string): Promise<SavedCommand | null>;
|
|
1508
|
+
updateCommand(command: SavedCommand): Promise<void>;
|
|
1509
|
+
deleteCommand(id: string): Promise<void>;
|
|
1510
|
+
listCommands(options?: ListCommandsOptions): Promise<SavedCommand[]>;
|
|
1511
|
+
deleteAll(): Promise<void>;
|
|
1512
|
+
private saveCommandToStorage;
|
|
1513
|
+
private deserializeCommand;
|
|
1514
|
+
private getIndex;
|
|
1515
|
+
private addToIndex;
|
|
1516
|
+
private removeFromIndex;
|
|
1517
|
+
private enforceMaxCommandsLimit;
|
|
1518
|
+
}
|
|
1519
|
+
|
|
1520
|
+
/**
|
|
1521
|
+
* Options for the useSlashCommands hook.
|
|
1522
|
+
*/
|
|
1523
|
+
interface UseSlashCommandsOptions {
|
|
1524
|
+
/** List of saved slash commands */
|
|
1525
|
+
commands: SavedCommand[];
|
|
1526
|
+
/** Callback when a command is selected (via click or keyboard) */
|
|
1527
|
+
onCommandSelect?: (text: string) => void;
|
|
1528
|
+
/** Callback to save a new command */
|
|
1529
|
+
onSaveCommand?: (name: string, text: string) => Promise<string>;
|
|
1530
|
+
/** Callback to rename an existing command */
|
|
1531
|
+
onRenameCommand?: (id: string, newName: string) => Promise<void>;
|
|
1532
|
+
/** Callback to delete a command */
|
|
1533
|
+
onDeleteCommand?: (id: string) => Promise<void>;
|
|
1534
|
+
}
|
|
1535
|
+
/**
|
|
1536
|
+
* Props for the inline save UI component.
|
|
1537
|
+
*/
|
|
1538
|
+
interface InlineSaveProps {
|
|
1539
|
+
/** The message ID being saved */
|
|
1540
|
+
messageId: string;
|
|
1541
|
+
/** The text content of the message */
|
|
1542
|
+
messageText: string;
|
|
1543
|
+
}
|
|
1544
|
+
/**
|
|
1545
|
+
* Return value from the useSlashCommands hook.
|
|
1546
|
+
*/
|
|
1547
|
+
interface UseSlashCommandsReturn {
|
|
1548
|
+
/** Whether the autocomplete dropdown is visible */
|
|
1549
|
+
isAutocompleteVisible: boolean;
|
|
1550
|
+
/**
|
|
1551
|
+
* Process input changes to detect slash command prefix.
|
|
1552
|
+
* Returns true if the input starts with '/' and autocomplete was triggered.
|
|
1553
|
+
*/
|
|
1554
|
+
handleInputChange: (value: string) => boolean;
|
|
1555
|
+
/**
|
|
1556
|
+
* Process keyboard events for autocomplete navigation.
|
|
1557
|
+
* Returns true if the event was handled by the hook.
|
|
1558
|
+
* When a command is selected via Enter, onCommandSelect will be called.
|
|
1559
|
+
*/
|
|
1560
|
+
handleKeyDown: (e: React$1.KeyboardEvent) => boolean;
|
|
1561
|
+
/**
|
|
1562
|
+
* Manually close the autocomplete dropdown.
|
|
1563
|
+
*/
|
|
1564
|
+
closeAutocomplete: () => void;
|
|
1565
|
+
/**
|
|
1566
|
+
* Renders the autocomplete dropdown component.
|
|
1567
|
+
* Returns null if autocomplete should not be shown.
|
|
1568
|
+
*/
|
|
1569
|
+
AutocompleteComponent: React$1.ReactNode;
|
|
1570
|
+
/**
|
|
1571
|
+
* Start saving a message as a slash command.
|
|
1572
|
+
*/
|
|
1573
|
+
startSavingCommand: (messageId: string, messageText: string) => void;
|
|
1574
|
+
/**
|
|
1575
|
+
* Check if a specific message is currently being saved as a command.
|
|
1576
|
+
*/
|
|
1577
|
+
isSavingCommand: (messageId: string) => boolean;
|
|
1578
|
+
/**
|
|
1579
|
+
* Cancel the inline save operation.
|
|
1580
|
+
*/
|
|
1581
|
+
cancelInlineSave: () => void;
|
|
1582
|
+
/**
|
|
1583
|
+
* Renders the inline save UI component for a specific message.
|
|
1584
|
+
* Returns null if not saving for this message.
|
|
1585
|
+
*/
|
|
1586
|
+
renderInlineSaveUI: (props: InlineSaveProps) => React$1.ReactNode;
|
|
1587
|
+
}
|
|
1588
|
+
/**
|
|
1589
|
+
* Composable hook for slash commands functionality.
|
|
1590
|
+
* Manages autocomplete state, keyboard navigation, and inline save operations.
|
|
1591
|
+
*
|
|
1592
|
+
* @example
|
|
1593
|
+
* ```tsx
|
|
1594
|
+
* const {
|
|
1595
|
+
* isAutocompleteVisible,
|
|
1596
|
+
* handleInputChange,
|
|
1597
|
+
* handleKeyDown,
|
|
1598
|
+
* AutocompleteComponent,
|
|
1599
|
+
* startSavingCommand,
|
|
1600
|
+
* isSavingCommand,
|
|
1601
|
+
* renderInlineSaveUI,
|
|
1602
|
+
* } = useSlashCommands({
|
|
1603
|
+
* commands,
|
|
1604
|
+
* onCommandSelect: (text) => setInput(text),
|
|
1605
|
+
* onSaveCommand,
|
|
1606
|
+
* onDeleteCommand,
|
|
1607
|
+
* });
|
|
1608
|
+
*
|
|
1609
|
+
* // In your input handler
|
|
1610
|
+
* const onInputChange = (e) => {
|
|
1611
|
+
* const value = e.target.value;
|
|
1612
|
+
* setInput(value);
|
|
1613
|
+
* handleInputChange(value);
|
|
1614
|
+
* };
|
|
1615
|
+
*
|
|
1616
|
+
* // In your keydown handler
|
|
1617
|
+
* const onKeyDown = (e) => {
|
|
1618
|
+
* if (handleKeyDown(e)) {
|
|
1619
|
+
* return; // Event was handled by slash commands
|
|
1620
|
+
* }
|
|
1621
|
+
* // Handle other key events...
|
|
1622
|
+
* };
|
|
1623
|
+
*
|
|
1624
|
+
* // Render
|
|
1625
|
+
* return (
|
|
1626
|
+
* <div style={{ position: 'relative' }}>
|
|
1627
|
+
* {AutocompleteComponent}
|
|
1628
|
+
* <textarea ... />
|
|
1629
|
+
* </div>
|
|
1630
|
+
* );
|
|
1631
|
+
* ```
|
|
1632
|
+
*/
|
|
1633
|
+
declare function useSlashCommands({ commands, onCommandSelect, onSaveCommand, onRenameCommand, onDeleteCommand, }: UseSlashCommandsOptions): UseSlashCommandsReturn;
|
|
1634
|
+
|
|
1635
|
+
interface UseChatManagementOptions {
|
|
1636
|
+
/** Chat repository for persistence */
|
|
1637
|
+
repository: ChatRepository;
|
|
1638
|
+
/** Reference to the UseAIClient (can be null during initialization) */
|
|
1639
|
+
clientRef: React.MutableRefObject<UseAIClient | null>;
|
|
1640
|
+
}
|
|
1641
|
+
interface UseChatManagementReturn {
|
|
1642
|
+
/** Current active chat ID where AI responses are saved */
|
|
1643
|
+
currentChatId: string | null;
|
|
1644
|
+
/** Chat loaded for viewing but not yet active for AI responses */
|
|
1645
|
+
pendingChatId: string | null;
|
|
1646
|
+
/** Current messages in the chat */
|
|
1647
|
+
messages: Message[];
|
|
1648
|
+
/** The displayed chat ID (pending or current) */
|
|
1649
|
+
displayedChatId: string | null;
|
|
1650
|
+
/** Creates a new chat and switches to it */
|
|
1651
|
+
createNewChat: () => Promise<string>;
|
|
1652
|
+
/** Loads an existing chat by ID */
|
|
1653
|
+
loadChat: (chatId: string) => Promise<void>;
|
|
1654
|
+
/** Deletes a chat by ID */
|
|
1655
|
+
deleteChat: (chatId: string) => Promise<void>;
|
|
1656
|
+
/** Lists all available chats */
|
|
1657
|
+
listChats: () => Promise<Array<Omit<Chat, 'messages'>>>;
|
|
1658
|
+
/** Clears the current chat messages */
|
|
1659
|
+
clearCurrentChat: () => Promise<void>;
|
|
1660
|
+
/** Activates the pending chat (called when user sends first message) */
|
|
1661
|
+
activatePendingChat: () => string | null;
|
|
1662
|
+
/** Saves a user message to storage and reloads messages */
|
|
1663
|
+
saveUserMessage: (chatId: string, content: PersistedMessageContent) => Promise<boolean>;
|
|
1664
|
+
/** Saves an AI response to storage and optionally reloads messages */
|
|
1665
|
+
saveAIResponse: (content: string, displayMode?: 'default' | 'error') => Promise<void>;
|
|
1666
|
+
/** Reloads messages from storage for the given chat ID */
|
|
1667
|
+
reloadMessages: (chatId: string) => Promise<void>;
|
|
1668
|
+
/** Snapshot refs for use in event handlers */
|
|
1669
|
+
currentChatIdSnapshot: React.MutableRefObject<string | null>;
|
|
1670
|
+
pendingChatIdSnapshot: React.MutableRefObject<string | null>;
|
|
1671
|
+
}
|
|
1672
|
+
/**
|
|
1673
|
+
* Hook for managing chat lifecycle operations.
|
|
1674
|
+
*
|
|
1675
|
+
* Features:
|
|
1676
|
+
* - Creates, loads, deletes chats
|
|
1677
|
+
* - Manages pending/active chat state machine
|
|
1678
|
+
* - Saves user messages and AI responses
|
|
1679
|
+
* - Auto-generates chat titles
|
|
1680
|
+
* - Initializes with most recent chat or creates new one
|
|
1681
|
+
*
|
|
1682
|
+
* @example
|
|
1683
|
+
* ```typescript
|
|
1684
|
+
* const {
|
|
1685
|
+
* currentChatId,
|
|
1686
|
+
* pendingChatId,
|
|
1687
|
+
* messages,
|
|
1688
|
+
* createNewChat,
|
|
1689
|
+
* loadChat,
|
|
1690
|
+
* deleteChat,
|
|
1691
|
+
* listChats,
|
|
1692
|
+
* clearCurrentChat,
|
|
1693
|
+
* activatePendingChat,
|
|
1694
|
+
* saveUserMessage,
|
|
1695
|
+
* saveAIResponse,
|
|
1696
|
+
* } = useChatManagement({
|
|
1697
|
+
* repository: chatRepository,
|
|
1698
|
+
* clientRef,
|
|
1699
|
+
* });
|
|
1700
|
+
* ```
|
|
1701
|
+
*/
|
|
1702
|
+
declare function useChatManagement({ repository, clientRef, }: UseChatManagementOptions): UseChatManagementReturn;
|
|
1703
|
+
|
|
1704
|
+
interface UseAgentSelectionOptions {
|
|
1705
|
+
/** Reference to the UseAIClient (can be null during initialization) */
|
|
1706
|
+
clientRef: React.MutableRefObject<UseAIClient | null>;
|
|
1707
|
+
/** Whether the client is connected (triggers subscription when true) */
|
|
1708
|
+
connected: boolean;
|
|
1709
|
+
/**
|
|
1710
|
+
* Optional list of agent IDs to show in the UI.
|
|
1711
|
+
* When provided, only agents with these IDs will be shown (if they exist on the server).
|
|
1712
|
+
* If the list is empty or no agents match, falls back to the default agent.
|
|
1713
|
+
*/
|
|
1714
|
+
visibleAgentIds?: AgentInfo['id'][];
|
|
1715
|
+
}
|
|
1716
|
+
interface UseAgentSelectionReturn {
|
|
1717
|
+
/** List of available agents from the server */
|
|
1718
|
+
availableAgents: AgentInfo[];
|
|
1719
|
+
/** The default agent ID from the server */
|
|
1720
|
+
defaultAgent: string | null;
|
|
1721
|
+
/** The currently selected agent ID (null means use server default) */
|
|
1722
|
+
selectedAgent: string | null;
|
|
1723
|
+
/** Sets the agent to use for requests (null to use server default) */
|
|
1724
|
+
setAgent: (agentId: string | null) => void;
|
|
1725
|
+
}
|
|
1726
|
+
/**
|
|
1727
|
+
* Hook for managing agent selection state.
|
|
1728
|
+
*
|
|
1729
|
+
* Features:
|
|
1730
|
+
* - Subscribes to agent changes from the server
|
|
1731
|
+
* - Tracks available agents, default agent, and user selection
|
|
1732
|
+
* - Syncs selection state with the WebSocket client
|
|
1733
|
+
* - Filters agents based on visibleAgentIds (list of IDs)
|
|
1734
|
+
*
|
|
1735
|
+
* @example
|
|
1736
|
+
* ```typescript
|
|
1737
|
+
* const {
|
|
1738
|
+
* availableAgents,
|
|
1739
|
+
* defaultAgent,
|
|
1740
|
+
* selectedAgent,
|
|
1741
|
+
* setAgent,
|
|
1742
|
+
* } = useAgentSelection({ clientRef, connected });
|
|
1743
|
+
*
|
|
1744
|
+
* // Select a specific agent
|
|
1745
|
+
* setAgent('claude-3-5-sonnet');
|
|
1746
|
+
*
|
|
1747
|
+
* // Reset to server default
|
|
1748
|
+
* setAgent(null);
|
|
1749
|
+
* ```
|
|
1750
|
+
*
|
|
1751
|
+
* @example
|
|
1752
|
+
* ```typescript
|
|
1753
|
+
* // With visibleAgentIds to filter agents by ID
|
|
1754
|
+
* const {
|
|
1755
|
+
* availableAgents, // Only includes agents with these IDs
|
|
1756
|
+
* } = useAgentSelection({
|
|
1757
|
+
* clientRef,
|
|
1758
|
+
* connected,
|
|
1759
|
+
* visibleAgentIds: ['claude-sonnet', 'claude-opus']
|
|
1760
|
+
* });
|
|
1761
|
+
* ```
|
|
1762
|
+
*/
|
|
1763
|
+
declare function useAgentSelection({ clientRef, connected, visibleAgentIds, }: UseAgentSelectionOptions): UseAgentSelectionReturn;
|
|
1764
|
+
|
|
1765
|
+
interface UseCommandManagementOptions {
|
|
1766
|
+
/** Custom command repository. Defaults to LocalStorageCommandRepository. */
|
|
1767
|
+
repository?: CommandRepository;
|
|
1768
|
+
}
|
|
1769
|
+
interface UseCommandManagementReturn {
|
|
1770
|
+
/** List of saved slash commands */
|
|
1771
|
+
commands: SavedCommand[];
|
|
1772
|
+
/** Refreshes the commands list from storage */
|
|
1773
|
+
refreshCommands: () => Promise<void>;
|
|
1774
|
+
/** Saves a new command */
|
|
1775
|
+
saveCommand: (name: string, text: string) => Promise<string>;
|
|
1776
|
+
/** Renames an existing command */
|
|
1777
|
+
renameCommand: (id: string, newName: string) => Promise<void>;
|
|
1778
|
+
/** Deletes a command by ID */
|
|
1779
|
+
deleteCommand: (id: string) => Promise<void>;
|
|
1780
|
+
}
|
|
1781
|
+
/**
|
|
1782
|
+
* Hook for managing slash commands persistence.
|
|
1783
|
+
*
|
|
1784
|
+
* Features:
|
|
1785
|
+
* - CRUD operations for slash commands
|
|
1786
|
+
* - Auto-loads commands on mount
|
|
1787
|
+
* - Uses LocalStorageCommandRepository by default
|
|
1788
|
+
*
|
|
1789
|
+
* @example
|
|
1790
|
+
* ```typescript
|
|
1791
|
+
* const {
|
|
1792
|
+
* commands,
|
|
1793
|
+
* refreshCommands,
|
|
1794
|
+
* saveCommand,
|
|
1795
|
+
* renameCommand,
|
|
1796
|
+
* deleteCommand,
|
|
1797
|
+
* } = useCommandManagement();
|
|
1798
|
+
*
|
|
1799
|
+
* // Save a new command
|
|
1800
|
+
* await saveCommand('greet', 'Hello, how can I help you today?');
|
|
1801
|
+
*
|
|
1802
|
+
* // Rename a command
|
|
1803
|
+
* await renameCommand(commandId, 'greeting');
|
|
1804
|
+
*
|
|
1805
|
+
* // Delete a command
|
|
1806
|
+
* await deleteCommand(commandId);
|
|
1807
|
+
* ```
|
|
1808
|
+
*/
|
|
1809
|
+
declare function useCommandManagement({ repository, }?: UseCommandManagementOptions): UseCommandManagementReturn;
|
|
1810
|
+
|
|
1811
|
+
interface RegisterToolsOptions {
|
|
1812
|
+
/** Mark component as invisible (no visual state, skip prompt wait) */
|
|
1813
|
+
invisible?: boolean;
|
|
1814
|
+
}
|
|
1815
|
+
interface UseToolRegistryReturn {
|
|
1816
|
+
/** Registers tools for a specific component */
|
|
1817
|
+
registerTools: (id: string, tools: ToolsDefinition, options?: RegisterToolsOptions) => void;
|
|
1818
|
+
/** Unregisters tools for a specific component */
|
|
1819
|
+
unregisterTools: (id: string) => void;
|
|
1820
|
+
/** Checks if a component is marked as invisible */
|
|
1821
|
+
isInvisible: (id: string) => boolean;
|
|
1822
|
+
/** All tools aggregated from registered components */
|
|
1823
|
+
aggregatedTools: ToolsDefinition;
|
|
1824
|
+
/** Whether any tools are registered */
|
|
1825
|
+
hasTools: boolean;
|
|
1826
|
+
/** Ref to current aggregated tools (for use in closures) */
|
|
1827
|
+
aggregatedToolsRef: React.MutableRefObject<ToolsDefinition>;
|
|
1828
|
+
/** Ref mapping tool names to component IDs */
|
|
1829
|
+
toolOwnershipRef: React.MutableRefObject<Map<string, string>>;
|
|
1830
|
+
}
|
|
1831
|
+
/**
|
|
1832
|
+
* Hook for managing tool registration and aggregation.
|
|
1833
|
+
*
|
|
1834
|
+
* Only handles tools - prompt management is handled separately.
|
|
1835
|
+
*/
|
|
1836
|
+
declare function useToolRegistry(): UseToolRegistryReturn;
|
|
1837
|
+
|
|
1838
|
+
interface UsePromptStateOptions {
|
|
1839
|
+
/** System prompt to include in state */
|
|
1840
|
+
systemPrompt?: string;
|
|
1841
|
+
/** Reference to the UseAIClient for state updates */
|
|
1842
|
+
clientRef: React.MutableRefObject<UseAIClient | null>;
|
|
1843
|
+
/** Whether the client is connected to the server */
|
|
1844
|
+
connected: boolean;
|
|
1845
|
+
}
|
|
1846
|
+
interface UsePromptStateReturn {
|
|
1847
|
+
/** Updates the prompt and suggestions for a specific component */
|
|
1848
|
+
updatePrompt: (id: string, prompt?: string, suggestions?: string[]) => void;
|
|
1849
|
+
/** Registers a waiter function for a component */
|
|
1850
|
+
registerWaiter: (id: string, waiter: () => Promise<void>) => void;
|
|
1851
|
+
/** Unregisters a waiter function */
|
|
1852
|
+
unregisterWaiter: (id: string) => void;
|
|
1853
|
+
/** Gets the waiter function for a component */
|
|
1854
|
+
getWaiter: (id: string) => (() => Promise<void>) | undefined;
|
|
1855
|
+
/** All suggestions aggregated from registered components */
|
|
1856
|
+
aggregatedSuggestions: string[];
|
|
1857
|
+
/** Ref mapping component IDs to prompts */
|
|
1858
|
+
promptsRef: React.MutableRefObject<Map<string, string>>;
|
|
1859
|
+
}
|
|
1860
|
+
/**
|
|
1861
|
+
* Hook for managing prompt state across multiple useAI hooks.
|
|
1862
|
+
*
|
|
1863
|
+
* Handles:
|
|
1864
|
+
* - Storing prompts and suggestions per component
|
|
1865
|
+
* - Updating client state when prompts change
|
|
1866
|
+
* - Managing waiter functions for prompt change notifications
|
|
1867
|
+
* - Aggregating suggestions from all components
|
|
1868
|
+
*/
|
|
1869
|
+
declare function usePromptState({ systemPrompt, clientRef, connected, }: UsePromptStateOptions): UsePromptStateReturn;
|
|
1870
|
+
|
|
1871
|
+
/**
|
|
1872
|
+
* Creates stable tool references that maintain fresh closures.
|
|
1873
|
+
*
|
|
1874
|
+
* This hook solves the "render loop" problem that occurs when users define tools
|
|
1875
|
+
* inline without memoization. It ensures that:
|
|
1876
|
+
*
|
|
1877
|
+
* 1. Tool object references remain stable as long as tool names don't change
|
|
1878
|
+
* 2. Handler calls are proxied through refs to always use the latest closure
|
|
1879
|
+
* 3. Metadata (description, schema, confirmationRequired) updates in-place
|
|
1880
|
+
*
|
|
1881
|
+
* @param tools - The tools definition from the user (potentially unstable references)
|
|
1882
|
+
* @returns Stabilized tools definition that won't cause effect re-runs
|
|
1883
|
+
*
|
|
1884
|
+
* @example
|
|
1885
|
+
* ```typescript
|
|
1886
|
+
* // Previously problematic - caused render loops
|
|
1887
|
+
* useAI({
|
|
1888
|
+
* tools: {
|
|
1889
|
+
* updateState: defineTool('Update state', z.object({ value: z.string() }),
|
|
1890
|
+
* (input) => setState(input.value) // Closure recreated every render
|
|
1891
|
+
* ),
|
|
1892
|
+
* },
|
|
1893
|
+
* });
|
|
1894
|
+
*
|
|
1895
|
+
* // Now works correctly - useStableTools handles stabilization internally
|
|
1896
|
+
* ```
|
|
1897
|
+
*/
|
|
1898
|
+
declare function useStableTools(tools: ToolsDefinition | undefined): ToolsDefinition | undefined;
|
|
1899
|
+
|
|
1900
|
+
/**
|
|
1901
|
+
* Return value from useDropdownState hook.
|
|
1902
|
+
*/
|
|
1903
|
+
interface UseDropdownStateReturn {
|
|
1904
|
+
/** Whether the dropdown is currently open */
|
|
1905
|
+
isOpen: boolean;
|
|
1906
|
+
/** Opens the dropdown */
|
|
1907
|
+
open: () => void;
|
|
1908
|
+
/** Closes the dropdown */
|
|
1909
|
+
close: () => void;
|
|
1910
|
+
/** Toggles the dropdown open/closed */
|
|
1911
|
+
toggle: () => void;
|
|
1912
|
+
/**
|
|
1913
|
+
* Backdrop element that closes dropdown when clicked.
|
|
1914
|
+
* Render this as a sibling to the dropdown content (both inside a container).
|
|
1915
|
+
* Returns null when dropdown is closed.
|
|
1916
|
+
*/
|
|
1917
|
+
Backdrop: React$1.ReactNode;
|
|
1918
|
+
}
|
|
1919
|
+
interface UseDropdownStateOptions {
|
|
1920
|
+
/** z-index for the backdrop (default: 1002) */
|
|
1921
|
+
backdropZIndex?: number;
|
|
1922
|
+
/** Initial open state (default: false) */
|
|
1923
|
+
initialOpen?: boolean;
|
|
1924
|
+
}
|
|
1925
|
+
/**
|
|
1926
|
+
* Hook for managing dropdown open/close state with click-outside handling.
|
|
1927
|
+
*
|
|
1928
|
+
* Provides a reusable pattern for dropdowns that:
|
|
1929
|
+
* - Track open/close state
|
|
1930
|
+
* - Close when clicking outside (via backdrop)
|
|
1931
|
+
*
|
|
1932
|
+
* @example
|
|
1933
|
+
* ```typescript
|
|
1934
|
+
* const dropdown = useDropdownState();
|
|
1935
|
+
*
|
|
1936
|
+
* return (
|
|
1937
|
+
* <div style={{ position: 'relative' }}>
|
|
1938
|
+
* <button onClick={dropdown.toggle}>Toggle</button>
|
|
1939
|
+
*
|
|
1940
|
+
* {dropdown.isOpen && (
|
|
1941
|
+
* <div className="dropdown-content">
|
|
1942
|
+
* Dropdown content here
|
|
1943
|
+
* </div>
|
|
1944
|
+
* )}
|
|
1945
|
+
*
|
|
1946
|
+
* {dropdown.Backdrop}
|
|
1947
|
+
* </div>
|
|
1948
|
+
* );
|
|
1949
|
+
* ```
|
|
1950
|
+
*/
|
|
1951
|
+
declare function useDropdownState(options?: UseDropdownStateOptions): UseDropdownStateReturn;
|
|
1952
|
+
|
|
1953
|
+
export { type AgentContextValue, type Chat, type ChatContextValue, type ChatPanelProps, type ChatRepository, CloseButton, type CommandContextValue, type CommandRepository, type CreateChatOptions, type CreateCommandOptions, DEFAULT_MAX_FILE_SIZE, type DefinedTool, type DropZoneProps, EmbedFileUploadBackend, type FileAttachment, type FileUploadBackend, type FileUploadConfig, type FloatingButtonProps, type InlineSaveProps, type ListChatsOptions, type ListCommandsOptions, LocalStorageChatRepository, LocalStorageCommandRepository, type Message, type PersistedContentPart, type PersistedFileContent, type PersistedFileMetadata, type PersistedMessage, type PersistedMessageContent, type PersistedTextContent, type PromptsContextValue, type RegisterToolsOptions, type SavedCommand, type ToolOptions, type ToolRegistryContextValue, type ToolsDefinition, type TriggerWorkflowOptions, UseAIChat, UseAIChatPanel, type UseAIChatPanelProps, type UseAIChatPanelStrings, type UseAIChatPanelTheme, type UseAIChatProps, UseAIClient, type UseAIConfig, type UseAIContextValue, UseAIFloatingButton, UseAIFloatingChatWrapper, type UseAIOptions, UseAIProvider, type UseAIProviderProps, type UseAIResult, type UseAIStrings, type UseAITheme, type UseAIWorkflowResult, type UseAgentSelectionOptions, type UseAgentSelectionReturn, type UseChatManagementOptions, type UseChatManagementReturn, type UseCommandManagementOptions, type UseCommandManagementReturn, type UseDropdownStateOptions, type UseDropdownStateReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UsePromptStateOptions, type UsePromptStateReturn, type UseSlashCommandsOptions, type UseSlashCommandsReturn, type UseToolRegistryReturn, type WorkflowProgress, convertToolsToDefinitions, defaultStrings, defaultTheme, defineTool, executeDefinedTool, generateChatId, generateCommandId, generateMessageId, useAI, useAIContext, useAIWorkflow, useAgentSelection, useChatManagement, useCommandManagement, useDropdownState, useFileUpload, usePromptState, useSlashCommands, useStableTools, useStrings, useTheme, useToolRegistry, validateCommandName };
|