@frankieai/react 0.2.18 → 0.2.19
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 +210 -37
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +31 -3
- package/dist/index.d.ts +31 -3
- package/dist/index.js +205 -32
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/bottom-bars.test.tsx +67 -0
- package/src/components/chat/FrankieChatPage.tsx +12 -2
- package/src/components/chat/FrankieWidget.tsx +67 -4
- package/src/components/chat/MessageBubble.tsx +7 -5
- package/src/generated/css-content.ts +1 -1
- package/src/hooks/useFrankieChat.ts +59 -8
- package/src/lib/bottom-bars.ts +43 -0
- package/src/lib/client.ts +21 -3
- package/src/lib/viewport-fill.ts +39 -0
- package/src/styles/frankie.css +6 -3
- package/src/turn-follow.test.tsx +111 -0
package/dist/index.d.cts
CHANGED
|
@@ -92,9 +92,18 @@ declare class FrankieClient {
|
|
|
92
92
|
getConfig(signal?: AbortSignal): Promise<PublicWidgetConfig>;
|
|
93
93
|
ensureSession(context?: PageContext): Promise<CreateSessionResponse>;
|
|
94
94
|
listConversations(): Promise<ChatConversation[]>;
|
|
95
|
+
/** Whether a conversation can be reloaded from the server (a signed-in user and a conversation id). */
|
|
96
|
+
get canResume(): boolean;
|
|
97
|
+
/**
|
|
98
|
+
* Ask the server to stop the running turn. Closing the stream no longer
|
|
99
|
+
* stops it (a closed tab shouldn't lose the reply), so Stop says so
|
|
100
|
+
* explicitly. Best effort: the stream is closed right after either way.
|
|
101
|
+
*/
|
|
102
|
+
stopTurn(): Promise<void>;
|
|
95
103
|
resumeConversation(id?: string | undefined): Promise<{
|
|
96
104
|
messages: unknown[];
|
|
97
105
|
title: string;
|
|
106
|
+
busy: boolean;
|
|
98
107
|
} | undefined>;
|
|
99
108
|
syncConversation(messages: unknown[], title?: string): Promise<void>;
|
|
100
109
|
deleteConversation(id: string): Promise<void>;
|
|
@@ -256,6 +265,17 @@ interface FrankieWidgetProps extends ChatPanelProps {
|
|
|
256
265
|
toggle: () => void;
|
|
257
266
|
label: string;
|
|
258
267
|
}) => React.ReactNode;
|
|
268
|
+
/**
|
|
269
|
+
* `false` hides the floating button, for apps with their own entry point:
|
|
270
|
+
* give any element `data-frankie-open` (a nav tab, a "Help" link) and a
|
|
271
|
+
* click on it opens the chat. Defaults to `true`.
|
|
272
|
+
*/
|
|
273
|
+
launcher?: boolean;
|
|
274
|
+
/**
|
|
275
|
+
* Sit above fixed bars along the bottom of the page (a mobile tab bar, a
|
|
276
|
+
* cookie banner) instead of underneath them. Defaults to `true`.
|
|
277
|
+
*/
|
|
278
|
+
avoidBottomBars?: boolean;
|
|
259
279
|
}
|
|
260
280
|
/**
|
|
261
281
|
* The drop-in embed: a floating launcher plus the chat panel.
|
|
@@ -263,7 +283,7 @@ interface FrankieWidgetProps extends ChatPanelProps {
|
|
|
263
283
|
* Renders `position: fixed` at the document level, so it does not care what
|
|
264
284
|
* layout the host page uses.
|
|
265
285
|
*/
|
|
266
|
-
declare function FrankieWidget({ position, offset, defaultOpen, zIndex, open: controlledOpen, onOpenChange, renderLauncher, ...panelProps }: FrankieWidgetProps): react.JSX.Element;
|
|
286
|
+
declare function FrankieWidget({ position, offset, defaultOpen, zIndex, open: controlledOpen, onOpenChange, renderLauncher, launcher, avoidBottomBars, ...panelProps }: FrankieWidgetProps): react.JSX.Element;
|
|
267
287
|
|
|
268
288
|
interface FrankieInlineProps extends ChatPanelProps {
|
|
269
289
|
/** Extra styles on the filling wrapper — e.g. a `maxWidth` to centre the column. */
|
|
@@ -287,9 +307,15 @@ interface FrankieChatPageProps extends Omit<FrankieProviderProps, "children">, P
|
|
|
287
307
|
showHistory?: boolean;
|
|
288
308
|
/** Optional host navigation, e.g. a Back to dashboard link. */
|
|
289
309
|
navigation?: React.ReactNode;
|
|
310
|
+
/**
|
|
311
|
+
* Grow to fill the screen from where the chat starts down to the bottom
|
|
312
|
+
* edge, or to the top of a fixed bottom bar. Defaults to true; set false
|
|
313
|
+
* when a sized parent should decide the height.
|
|
314
|
+
*/
|
|
315
|
+
fillViewport?: boolean;
|
|
290
316
|
}
|
|
291
317
|
/** Reusable product chat with one shared conversation state and scoped styling. */
|
|
292
|
-
declare function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory, navigation, ...provider }: FrankieChatPageProps): react.JSX.Element;
|
|
318
|
+
declare function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory, navigation, fillViewport, ...provider }: FrankieChatPageProps): react.JSX.Element;
|
|
293
319
|
|
|
294
320
|
interface ComposerAttachmentsConfig {
|
|
295
321
|
enabled: boolean;
|
|
@@ -347,7 +373,9 @@ declare function TypingDots(): react.JSX.Element;
|
|
|
347
373
|
* the first words, or during the pause after a tool result while the model
|
|
348
374
|
* composes its answer — so those gaps read as "loading" rather than frozen.
|
|
349
375
|
*/
|
|
350
|
-
declare function Thinking(
|
|
376
|
+
declare function Thinking({ delayed }: {
|
|
377
|
+
delayed?: boolean;
|
|
378
|
+
}): react.JSX.Element;
|
|
351
379
|
|
|
352
380
|
/**
|
|
353
381
|
* A deliberately small Markdown subset — headings, paragraphs, lists, fenced
|
package/dist/index.d.ts
CHANGED
|
@@ -92,9 +92,18 @@ declare class FrankieClient {
|
|
|
92
92
|
getConfig(signal?: AbortSignal): Promise<PublicWidgetConfig>;
|
|
93
93
|
ensureSession(context?: PageContext): Promise<CreateSessionResponse>;
|
|
94
94
|
listConversations(): Promise<ChatConversation[]>;
|
|
95
|
+
/** Whether a conversation can be reloaded from the server (a signed-in user and a conversation id). */
|
|
96
|
+
get canResume(): boolean;
|
|
97
|
+
/**
|
|
98
|
+
* Ask the server to stop the running turn. Closing the stream no longer
|
|
99
|
+
* stops it (a closed tab shouldn't lose the reply), so Stop says so
|
|
100
|
+
* explicitly. Best effort: the stream is closed right after either way.
|
|
101
|
+
*/
|
|
102
|
+
stopTurn(): Promise<void>;
|
|
95
103
|
resumeConversation(id?: string | undefined): Promise<{
|
|
96
104
|
messages: unknown[];
|
|
97
105
|
title: string;
|
|
106
|
+
busy: boolean;
|
|
98
107
|
} | undefined>;
|
|
99
108
|
syncConversation(messages: unknown[], title?: string): Promise<void>;
|
|
100
109
|
deleteConversation(id: string): Promise<void>;
|
|
@@ -256,6 +265,17 @@ interface FrankieWidgetProps extends ChatPanelProps {
|
|
|
256
265
|
toggle: () => void;
|
|
257
266
|
label: string;
|
|
258
267
|
}) => React.ReactNode;
|
|
268
|
+
/**
|
|
269
|
+
* `false` hides the floating button, for apps with their own entry point:
|
|
270
|
+
* give any element `data-frankie-open` (a nav tab, a "Help" link) and a
|
|
271
|
+
* click on it opens the chat. Defaults to `true`.
|
|
272
|
+
*/
|
|
273
|
+
launcher?: boolean;
|
|
274
|
+
/**
|
|
275
|
+
* Sit above fixed bars along the bottom of the page (a mobile tab bar, a
|
|
276
|
+
* cookie banner) instead of underneath them. Defaults to `true`.
|
|
277
|
+
*/
|
|
278
|
+
avoidBottomBars?: boolean;
|
|
259
279
|
}
|
|
260
280
|
/**
|
|
261
281
|
* The drop-in embed: a floating launcher plus the chat panel.
|
|
@@ -263,7 +283,7 @@ interface FrankieWidgetProps extends ChatPanelProps {
|
|
|
263
283
|
* Renders `position: fixed` at the document level, so it does not care what
|
|
264
284
|
* layout the host page uses.
|
|
265
285
|
*/
|
|
266
|
-
declare function FrankieWidget({ position, offset, defaultOpen, zIndex, open: controlledOpen, onOpenChange, renderLauncher, ...panelProps }: FrankieWidgetProps): react.JSX.Element;
|
|
286
|
+
declare function FrankieWidget({ position, offset, defaultOpen, zIndex, open: controlledOpen, onOpenChange, renderLauncher, launcher, avoidBottomBars, ...panelProps }: FrankieWidgetProps): react.JSX.Element;
|
|
267
287
|
|
|
268
288
|
interface FrankieInlineProps extends ChatPanelProps {
|
|
269
289
|
/** Extra styles on the filling wrapper — e.g. a `maxWidth` to centre the column. */
|
|
@@ -287,9 +307,15 @@ interface FrankieChatPageProps extends Omit<FrankieProviderProps, "children">, P
|
|
|
287
307
|
showHistory?: boolean;
|
|
288
308
|
/** Optional host navigation, e.g. a Back to dashboard link. */
|
|
289
309
|
navigation?: React.ReactNode;
|
|
310
|
+
/**
|
|
311
|
+
* Grow to fill the screen from where the chat starts down to the bottom
|
|
312
|
+
* edge, or to the top of a fixed bottom bar. Defaults to true; set false
|
|
313
|
+
* when a sized parent should decide the height.
|
|
314
|
+
*/
|
|
315
|
+
fillViewport?: boolean;
|
|
290
316
|
}
|
|
291
317
|
/** Reusable product chat with one shared conversation state and scoped styling. */
|
|
292
|
-
declare function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory, navigation, ...provider }: FrankieChatPageProps): react.JSX.Element;
|
|
318
|
+
declare function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory, navigation, fillViewport, ...provider }: FrankieChatPageProps): react.JSX.Element;
|
|
293
319
|
|
|
294
320
|
interface ComposerAttachmentsConfig {
|
|
295
321
|
enabled: boolean;
|
|
@@ -347,7 +373,9 @@ declare function TypingDots(): react.JSX.Element;
|
|
|
347
373
|
* the first words, or during the pause after a tool result while the model
|
|
348
374
|
* composes its answer — so those gaps read as "loading" rather than frozen.
|
|
349
375
|
*/
|
|
350
|
-
declare function Thinking(
|
|
376
|
+
declare function Thinking({ delayed }: {
|
|
377
|
+
delayed?: boolean;
|
|
378
|
+
}): react.JSX.Element;
|
|
351
379
|
|
|
352
380
|
/**
|
|
353
381
|
* A deliberately small Markdown subset — headings, paragraphs, lists, fenced
|