@frankieai/react 0.2.20 → 0.2.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/frankie.css +1 -1
- package/dist/index.cjs +260 -156
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +44 -5
- package/dist/index.d.ts +44 -5
- package/dist/index.js +259 -156
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/chat/ActionConfirm.tsx +85 -0
- package/src/components/chat/ChatPanel.tsx +3 -2
- package/src/components/chat/Markdown.tsx +2 -1
- package/src/components/chat/MessageBubble.tsx +12 -0
- package/src/generated/css-content.ts +1 -1
- package/src/hooks/useFrankieChat.ts +26 -2
- package/src/index.ts +2 -1
- package/src/lib/client.ts +14 -4
- package/src/lib/messages.ts +21 -1
- package/src/lib/theme-inherit.test.ts +10 -0
- package/src/lib/theme-inherit.ts +7 -1
- package/src/styles/frankie.css +38 -0
- package/src/widget.test.tsx +52 -3
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, CSSProperties, MutableRefObject, ButtonHTMLAttributes, HTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
|
-
import { PublicWidgetConfig, CreateSessionResponse, ChatAttachment, FrankieServerEvent, WidgetTheme, LoadedSkill, ApiToolInventory } from '@frankieai/core';
|
|
3
|
+
import { PublicWidgetConfig, CreateSessionResponse, ChatAttachment, ActionDecision, FrankieServerEvent, WidgetTheme, ActionPreview, LoadedSkill, ApiToolInventory } from '@frankieai/core';
|
|
4
4
|
export { FrankieServerEvent, PublicWidgetConfig, WidgetTheme } from '@frankieai/core';
|
|
5
5
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
6
6
|
import { VariantProps } from 'class-variance-authority';
|
|
@@ -46,9 +46,9 @@ interface FrankieClientOptions {
|
|
|
46
46
|
fetchImpl?: typeof fetch;
|
|
47
47
|
/**
|
|
48
48
|
* Reaches the host's own API for `execution: "client"` tool calls (see
|
|
49
|
-
* `HostApiClientOptions`).
|
|
50
|
-
*
|
|
51
|
-
*
|
|
49
|
+
* `HostApiClientOptions`). Defaults to the site the user is on, with the
|
|
50
|
+
* page's own cookies (`credentials: "same-origin"`): set it when your API
|
|
51
|
+
* lives on another origin or signs requests with a token.
|
|
52
52
|
*/
|
|
53
53
|
api?: HostApiClientOptions;
|
|
54
54
|
/**
|
|
@@ -80,6 +80,8 @@ declare class FrankieClient {
|
|
|
80
80
|
private session?;
|
|
81
81
|
/** Identity (JWT `sub`, else the raw token) the cached session was issued for. */
|
|
82
82
|
private sessionUserKey?;
|
|
83
|
+
/** The host token fetched for the latest turn; sent with it so tools get a live one. */
|
|
84
|
+
private latestUserToken?;
|
|
83
85
|
constructor(options: FrankieClientOptions);
|
|
84
86
|
get sessionId(): string | undefined;
|
|
85
87
|
get conversationId(): string | undefined;
|
|
@@ -114,6 +116,8 @@ declare class FrankieClient {
|
|
|
114
116
|
context?: PageContext;
|
|
115
117
|
model?: string;
|
|
116
118
|
attachments?: ChatAttachment[];
|
|
119
|
+
/** The user's answer to the action the last reply paused for approval. */
|
|
120
|
+
confirm?: ActionDecision;
|
|
117
121
|
signal?: AbortSignal;
|
|
118
122
|
}, onEvent: (event: FrankieServerEvent) => void): Promise<void>;
|
|
119
123
|
/**
|
|
@@ -184,6 +188,17 @@ interface UserChatMessage {
|
|
|
184
188
|
attachments?: MessageAttachment[];
|
|
185
189
|
createdAt: number;
|
|
186
190
|
}
|
|
191
|
+
/**
|
|
192
|
+
* An action that changes data, paused until the user approves it. `pending`
|
|
193
|
+
* shows Approve and Cancel; the other states record the answer.
|
|
194
|
+
*/
|
|
195
|
+
interface ActionRequest {
|
|
196
|
+
toolUseId: string;
|
|
197
|
+
name: string;
|
|
198
|
+
label: string;
|
|
199
|
+
preview: ActionPreview;
|
|
200
|
+
state: "pending" | "approved" | "cancelled";
|
|
201
|
+
}
|
|
187
202
|
interface AssistantChatMessage {
|
|
188
203
|
id: string;
|
|
189
204
|
role: "assistant";
|
|
@@ -193,6 +208,8 @@ interface AssistantChatMessage {
|
|
|
193
208
|
status: "streaming" | "done" | "error";
|
|
194
209
|
error?: string;
|
|
195
210
|
createdAt: number;
|
|
211
|
+
/** An action this reply is waiting on the user to approve. */
|
|
212
|
+
action?: ActionRequest;
|
|
196
213
|
}
|
|
197
214
|
type ChatMessage = UserChatMessage | AssistantChatMessage;
|
|
198
215
|
/**
|
|
@@ -209,6 +226,8 @@ declare function newUserMessage(id: string, text: string, attachments?: MessageA
|
|
|
209
226
|
interface SendOptions {
|
|
210
227
|
attachments?: ChatAttachment[];
|
|
211
228
|
model?: string;
|
|
229
|
+
/** Answer the action the last reply paused for approval. */
|
|
230
|
+
confirm?: ActionDecision;
|
|
212
231
|
}
|
|
213
232
|
interface UseFrankieChatResult {
|
|
214
233
|
loadedSkills: LoadedSkill[] | null;
|
|
@@ -221,6 +240,11 @@ interface UseFrankieChatResult {
|
|
|
221
240
|
/** Set when the turn failed outright (network, auth, rate limit). */
|
|
222
241
|
error?: string;
|
|
223
242
|
send: (text: string, opts?: SendOptions) => Promise<void>;
|
|
243
|
+
/**
|
|
244
|
+
* Approve or cancel the action a reply paused (`message.action`). Approving
|
|
245
|
+
* runs exactly what the card shows; either way the assistant then replies.
|
|
246
|
+
*/
|
|
247
|
+
answerAction: (toolUseId: string, approved: boolean) => Promise<void>;
|
|
224
248
|
/** Abort the in-flight turn. The partial answer stays in the transcript. */
|
|
225
249
|
stop: () => void;
|
|
226
250
|
/** Clear the transcript and start a brand-new server session. */
|
|
@@ -371,6 +395,8 @@ interface MessageBubbleProps {
|
|
|
371
395
|
active?: boolean;
|
|
372
396
|
/** A turn is in flight, so choices should be disabled. */
|
|
373
397
|
busy?: boolean;
|
|
398
|
+
/** Approve or cancel an action this reply paused. */
|
|
399
|
+
onAction?: (toolUseId: string, approved: boolean) => void;
|
|
374
400
|
}
|
|
375
401
|
declare const MessageBubble: react.NamedExoticComponent<MessageBubbleProps>;
|
|
376
402
|
declare function TypingDots(): react.JSX.Element;
|
|
@@ -413,6 +439,19 @@ declare function Choices({ options, onPick, onSomethingElse, disabled, }: {
|
|
|
413
439
|
disabled?: boolean;
|
|
414
440
|
}): react.JSX.Element | null;
|
|
415
441
|
|
|
442
|
+
/**
|
|
443
|
+
* An action that changes data, shown before it runs. Nothing happens until
|
|
444
|
+
* the user presses Approve, and then exactly what is shown here runs — the
|
|
445
|
+
* assistant can't change the inputs in between.
|
|
446
|
+
*/
|
|
447
|
+
declare function ActionConfirm({ action, onAnswer, disabled, live, }: {
|
|
448
|
+
action: ActionRequest;
|
|
449
|
+
onAnswer?: (toolUseId: string, approved: boolean) => void;
|
|
450
|
+
disabled?: boolean;
|
|
451
|
+
/** False once the conversation has moved on without an answer. */
|
|
452
|
+
live: boolean;
|
|
453
|
+
}): react.JSX.Element;
|
|
454
|
+
|
|
416
455
|
declare function SuggestedPrompts({ prompts, onPick, disabled, }: {
|
|
417
456
|
prompts: string[];
|
|
418
457
|
onPick: (prompt: string) => void;
|
|
@@ -520,4 +559,4 @@ declare function useResolvedMode(mode: WidgetTheme["mode"]): "light" | "dark";
|
|
|
520
559
|
/** shadcn/ui's class helper: conditional classes with Tailwind conflict resolution. */
|
|
521
560
|
declare function cn(...inputs: ClassValue[]): string;
|
|
522
561
|
|
|
523
|
-
export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Choices, Composer, type ExtractedChoices, FRANKIE_CLOUD_URL, FrankieApiError, FrankieChatPage, type FrankieChatPageProps, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, Thinking, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, extractChoices, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme, useResolvedMode };
|
|
562
|
+
export { ActionConfirm, type ActionRequest, type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Choices, Composer, type ExtractedChoices, FRANKIE_CLOUD_URL, FrankieApiError, FrankieChatPage, type FrankieChatPageProps, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, Thinking, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, extractChoices, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme, useResolvedMode };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, CSSProperties, MutableRefObject, ButtonHTMLAttributes, HTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
|
-
import { PublicWidgetConfig, CreateSessionResponse, ChatAttachment, FrankieServerEvent, WidgetTheme, LoadedSkill, ApiToolInventory } from '@frankieai/core';
|
|
3
|
+
import { PublicWidgetConfig, CreateSessionResponse, ChatAttachment, ActionDecision, FrankieServerEvent, WidgetTheme, ActionPreview, LoadedSkill, ApiToolInventory } from '@frankieai/core';
|
|
4
4
|
export { FrankieServerEvent, PublicWidgetConfig, WidgetTheme } from '@frankieai/core';
|
|
5
5
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
6
6
|
import { VariantProps } from 'class-variance-authority';
|
|
@@ -46,9 +46,9 @@ interface FrankieClientOptions {
|
|
|
46
46
|
fetchImpl?: typeof fetch;
|
|
47
47
|
/**
|
|
48
48
|
* Reaches the host's own API for `execution: "client"` tool calls (see
|
|
49
|
-
* `HostApiClientOptions`).
|
|
50
|
-
*
|
|
51
|
-
*
|
|
49
|
+
* `HostApiClientOptions`). Defaults to the site the user is on, with the
|
|
50
|
+
* page's own cookies (`credentials: "same-origin"`): set it when your API
|
|
51
|
+
* lives on another origin or signs requests with a token.
|
|
52
52
|
*/
|
|
53
53
|
api?: HostApiClientOptions;
|
|
54
54
|
/**
|
|
@@ -80,6 +80,8 @@ declare class FrankieClient {
|
|
|
80
80
|
private session?;
|
|
81
81
|
/** Identity (JWT `sub`, else the raw token) the cached session was issued for. */
|
|
82
82
|
private sessionUserKey?;
|
|
83
|
+
/** The host token fetched for the latest turn; sent with it so tools get a live one. */
|
|
84
|
+
private latestUserToken?;
|
|
83
85
|
constructor(options: FrankieClientOptions);
|
|
84
86
|
get sessionId(): string | undefined;
|
|
85
87
|
get conversationId(): string | undefined;
|
|
@@ -114,6 +116,8 @@ declare class FrankieClient {
|
|
|
114
116
|
context?: PageContext;
|
|
115
117
|
model?: string;
|
|
116
118
|
attachments?: ChatAttachment[];
|
|
119
|
+
/** The user's answer to the action the last reply paused for approval. */
|
|
120
|
+
confirm?: ActionDecision;
|
|
117
121
|
signal?: AbortSignal;
|
|
118
122
|
}, onEvent: (event: FrankieServerEvent) => void): Promise<void>;
|
|
119
123
|
/**
|
|
@@ -184,6 +188,17 @@ interface UserChatMessage {
|
|
|
184
188
|
attachments?: MessageAttachment[];
|
|
185
189
|
createdAt: number;
|
|
186
190
|
}
|
|
191
|
+
/**
|
|
192
|
+
* An action that changes data, paused until the user approves it. `pending`
|
|
193
|
+
* shows Approve and Cancel; the other states record the answer.
|
|
194
|
+
*/
|
|
195
|
+
interface ActionRequest {
|
|
196
|
+
toolUseId: string;
|
|
197
|
+
name: string;
|
|
198
|
+
label: string;
|
|
199
|
+
preview: ActionPreview;
|
|
200
|
+
state: "pending" | "approved" | "cancelled";
|
|
201
|
+
}
|
|
187
202
|
interface AssistantChatMessage {
|
|
188
203
|
id: string;
|
|
189
204
|
role: "assistant";
|
|
@@ -193,6 +208,8 @@ interface AssistantChatMessage {
|
|
|
193
208
|
status: "streaming" | "done" | "error";
|
|
194
209
|
error?: string;
|
|
195
210
|
createdAt: number;
|
|
211
|
+
/** An action this reply is waiting on the user to approve. */
|
|
212
|
+
action?: ActionRequest;
|
|
196
213
|
}
|
|
197
214
|
type ChatMessage = UserChatMessage | AssistantChatMessage;
|
|
198
215
|
/**
|
|
@@ -209,6 +226,8 @@ declare function newUserMessage(id: string, text: string, attachments?: MessageA
|
|
|
209
226
|
interface SendOptions {
|
|
210
227
|
attachments?: ChatAttachment[];
|
|
211
228
|
model?: string;
|
|
229
|
+
/** Answer the action the last reply paused for approval. */
|
|
230
|
+
confirm?: ActionDecision;
|
|
212
231
|
}
|
|
213
232
|
interface UseFrankieChatResult {
|
|
214
233
|
loadedSkills: LoadedSkill[] | null;
|
|
@@ -221,6 +240,11 @@ interface UseFrankieChatResult {
|
|
|
221
240
|
/** Set when the turn failed outright (network, auth, rate limit). */
|
|
222
241
|
error?: string;
|
|
223
242
|
send: (text: string, opts?: SendOptions) => Promise<void>;
|
|
243
|
+
/**
|
|
244
|
+
* Approve or cancel the action a reply paused (`message.action`). Approving
|
|
245
|
+
* runs exactly what the card shows; either way the assistant then replies.
|
|
246
|
+
*/
|
|
247
|
+
answerAction: (toolUseId: string, approved: boolean) => Promise<void>;
|
|
224
248
|
/** Abort the in-flight turn. The partial answer stays in the transcript. */
|
|
225
249
|
stop: () => void;
|
|
226
250
|
/** Clear the transcript and start a brand-new server session. */
|
|
@@ -371,6 +395,8 @@ interface MessageBubbleProps {
|
|
|
371
395
|
active?: boolean;
|
|
372
396
|
/** A turn is in flight, so choices should be disabled. */
|
|
373
397
|
busy?: boolean;
|
|
398
|
+
/** Approve or cancel an action this reply paused. */
|
|
399
|
+
onAction?: (toolUseId: string, approved: boolean) => void;
|
|
374
400
|
}
|
|
375
401
|
declare const MessageBubble: react.NamedExoticComponent<MessageBubbleProps>;
|
|
376
402
|
declare function TypingDots(): react.JSX.Element;
|
|
@@ -413,6 +439,19 @@ declare function Choices({ options, onPick, onSomethingElse, disabled, }: {
|
|
|
413
439
|
disabled?: boolean;
|
|
414
440
|
}): react.JSX.Element | null;
|
|
415
441
|
|
|
442
|
+
/**
|
|
443
|
+
* An action that changes data, shown before it runs. Nothing happens until
|
|
444
|
+
* the user presses Approve, and then exactly what is shown here runs — the
|
|
445
|
+
* assistant can't change the inputs in between.
|
|
446
|
+
*/
|
|
447
|
+
declare function ActionConfirm({ action, onAnswer, disabled, live, }: {
|
|
448
|
+
action: ActionRequest;
|
|
449
|
+
onAnswer?: (toolUseId: string, approved: boolean) => void;
|
|
450
|
+
disabled?: boolean;
|
|
451
|
+
/** False once the conversation has moved on without an answer. */
|
|
452
|
+
live: boolean;
|
|
453
|
+
}): react.JSX.Element;
|
|
454
|
+
|
|
416
455
|
declare function SuggestedPrompts({ prompts, onPick, disabled, }: {
|
|
417
456
|
prompts: string[];
|
|
418
457
|
onPick: (prompt: string) => void;
|
|
@@ -520,4 +559,4 @@ declare function useResolvedMode(mode: WidgetTheme["mode"]): "light" | "dark";
|
|
|
520
559
|
/** shadcn/ui's class helper: conditional classes with Tailwind conflict resolution. */
|
|
521
560
|
declare function cn(...inputs: ClassValue[]): string;
|
|
522
561
|
|
|
523
|
-
export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Choices, Composer, type ExtractedChoices, FRANKIE_CLOUD_URL, FrankieApiError, FrankieChatPage, type FrankieChatPageProps, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, Thinking, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, extractChoices, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme, useResolvedMode };
|
|
562
|
+
export { ActionConfirm, type ActionRequest, type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Choices, Composer, type ExtractedChoices, FRANKIE_CLOUD_URL, FrankieApiError, FrankieChatPage, type FrankieChatPageProps, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, Thinking, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, extractChoices, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme, useResolvedMode };
|