@frankieai/react 0.2.8 → 0.2.9

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties, ButtonHTMLAttributes, HTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ReactNode, CSSProperties, MutableRefObject, ButtonHTMLAttributes, HTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { PublicWidgetConfig, CreateSessionResponse, ChatAttachment, FrankieServerEvent, WidgetTheme, LoadedSkill, ApiToolInventory } from '@frankieai/core';
 export { FrankieServerEvent, PublicWidgetConfig, WidgetTheme } from '@frankieai/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -265,8 +265,10 @@ interface ComposerProps {
     attachments?: ComposerAttachmentsConfig;
     /** Enables a model dropdown when provided with at least one model. */
     modelPicker?: ComposerModelPicker;
+    /** Populated with a function that focuses the input, so a "type your own" choice can jump here. */
+    focusHandleRef?: MutableRefObject<(() => void) | null>;
 }
-declare function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker }: ComposerProps): react.JSX.Element;
+declare function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker, focusHandleRef }: ComposerProps): react.JSX.Element;
 
 interface MessageBubbleProps {
     message: ChatMessage;
@@ -274,22 +276,47 @@ interface MessageBubbleProps {
     avatarUrl?: string;
     showToolActivity: boolean;
     renderTool?: (tool: ToolActivity) => ReactNode;
+    /** Send a picked choice as the next message. Omitted when the host renders its own. */
+    onChoose?: (choice: string) => void;
+    /** Focus the composer so the user can type their own answer instead of picking. */
+    onRequestInput?: () => void;
+    /** True only for the newest message, so stale choices from earlier turns aren't clickable. */
+    active?: boolean;
+    /** A turn is in flight, so choices should be disabled. */
+    busy?: boolean;
 }
-declare function MessageBubble({ message, assistantName, avatarUrl, showToolActivity, renderTool, }: MessageBubbleProps): react.JSX.Element;
+declare const MessageBubble: react.NamedExoticComponent<MessageBubbleProps>;
 declare function TypingDots(): react.JSX.Element;
 
 /**
- * A deliberately small Markdown subset — paragraphs, lists, fenced code, bold,
- * italic, inline code and links.
+ * A deliberately small Markdown subset — headings, paragraphs, lists, fenced
+ * code, bold, italic, inline code and links.
  *
  * Everything is rendered as React elements; nothing goes through
  * `dangerouslySetInnerHTML`. Model output lands in someone else's production
  * page, so it is never trusted as markup.
+ *
+ * Memoized on `text`: while a reply streams, the parent re-renders every frame,
+ * but the block tree is only recomputed when the text actually grows — the
+ * settled messages above never re-parse at all.
  */
-declare function Markdown({ text, className }: {
+declare const Markdown: react.NamedExoticComponent<{
     text: string;
     className?: string;
-}): react.JSX.Element;
+}>;
+
+/**
+ * Clickable answer options the agent offered via a `frankie:choices` block.
+ * Picking one sends it as the next message. A trailing "Something else" row
+ * doesn't send — it moves the caret to the composer so the user can type their
+ * own answer, while the offered options stay put in case they change their mind.
+ */
+declare function Choices({ options, onPick, onSomethingElse, disabled, }: {
+    options: string[];
+    onPick: (choice: string) => void;
+    onSomethingElse?: () => void;
+    disabled?: boolean;
+}): react.JSX.Element | null;
 
 declare function SuggestedPrompts({ prompts, onPick, disabled, }: {
     prompts: string[];
@@ -351,6 +378,31 @@ declare function Separator({ className }: {
 /** `forwardRef` rather than React 19's ref-as-prop, so React 18 hosts work too. */
 declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * Interactive choice blocks.
+ *
+ * The agent can end a reply with a fenced block to offer the user a small set
+ * of discrete answers:
+ *
+ *     ```frankie:choices
+ *     British
+ *     Indian
+ *     Australian
+ *     ```
+ *
+ * The SDK lifts that block out of the prose and renders it as clickable options
+ * (the composer stays open, so the user can always type their own answer). The
+ * block is a plain fenced code block, so a host that doesn't understand it just
+ * shows a harmless code listing instead — never broken markup.
+ */
+interface ExtractedChoices {
+    /** The reply text with the choices block removed. */
+    body: string;
+    /** The offered options, or null when there is no complete block. */
+    options: string[] | null;
+}
+declare function extractChoices(text: string): ExtractedChoices;
+
 /**
  * Map a theme to the CSS custom properties the widget's styles read.
  *
@@ -365,4 +417,4 @@ declare function resolveMode(mode: WidgetTheme["mode"]): "light" | "dark";
 /** shadcn/ui's class helper: conditional classes with Tailwind conflict resolution. */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Composer, 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, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };
+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, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, extractChoices, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties, ButtonHTMLAttributes, HTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ReactNode, CSSProperties, MutableRefObject, ButtonHTMLAttributes, HTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { PublicWidgetConfig, CreateSessionResponse, ChatAttachment, FrankieServerEvent, WidgetTheme, LoadedSkill, ApiToolInventory } from '@frankieai/core';
 export { FrankieServerEvent, PublicWidgetConfig, WidgetTheme } from '@frankieai/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -265,8 +265,10 @@ interface ComposerProps {
     attachments?: ComposerAttachmentsConfig;
     /** Enables a model dropdown when provided with at least one model. */
     modelPicker?: ComposerModelPicker;
+    /** Populated with a function that focuses the input, so a "type your own" choice can jump here. */
+    focusHandleRef?: MutableRefObject<(() => void) | null>;
 }
-declare function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker }: ComposerProps): react.JSX.Element;
+declare function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker, focusHandleRef }: ComposerProps): react.JSX.Element;
 
 interface MessageBubbleProps {
     message: ChatMessage;
@@ -274,22 +276,47 @@ interface MessageBubbleProps {
     avatarUrl?: string;
     showToolActivity: boolean;
     renderTool?: (tool: ToolActivity) => ReactNode;
+    /** Send a picked choice as the next message. Omitted when the host renders its own. */
+    onChoose?: (choice: string) => void;
+    /** Focus the composer so the user can type their own answer instead of picking. */
+    onRequestInput?: () => void;
+    /** True only for the newest message, so stale choices from earlier turns aren't clickable. */
+    active?: boolean;
+    /** A turn is in flight, so choices should be disabled. */
+    busy?: boolean;
 }
-declare function MessageBubble({ message, assistantName, avatarUrl, showToolActivity, renderTool, }: MessageBubbleProps): react.JSX.Element;
+declare const MessageBubble: react.NamedExoticComponent<MessageBubbleProps>;
 declare function TypingDots(): react.JSX.Element;
 
 /**
- * A deliberately small Markdown subset — paragraphs, lists, fenced code, bold,
- * italic, inline code and links.
+ * A deliberately small Markdown subset — headings, paragraphs, lists, fenced
+ * code, bold, italic, inline code and links.
  *
  * Everything is rendered as React elements; nothing goes through
  * `dangerouslySetInnerHTML`. Model output lands in someone else's production
  * page, so it is never trusted as markup.
+ *
+ * Memoized on `text`: while a reply streams, the parent re-renders every frame,
+ * but the block tree is only recomputed when the text actually grows — the
+ * settled messages above never re-parse at all.
  */
-declare function Markdown({ text, className }: {
+declare const Markdown: react.NamedExoticComponent<{
     text: string;
     className?: string;
-}): react.JSX.Element;
+}>;
+
+/**
+ * Clickable answer options the agent offered via a `frankie:choices` block.
+ * Picking one sends it as the next message. A trailing "Something else" row
+ * doesn't send — it moves the caret to the composer so the user can type their
+ * own answer, while the offered options stay put in case they change their mind.
+ */
+declare function Choices({ options, onPick, onSomethingElse, disabled, }: {
+    options: string[];
+    onPick: (choice: string) => void;
+    onSomethingElse?: () => void;
+    disabled?: boolean;
+}): react.JSX.Element | null;
 
 declare function SuggestedPrompts({ prompts, onPick, disabled, }: {
     prompts: string[];
@@ -351,6 +378,31 @@ declare function Separator({ className }: {
 /** `forwardRef` rather than React 19's ref-as-prop, so React 18 hosts work too. */
 declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * Interactive choice blocks.
+ *
+ * The agent can end a reply with a fenced block to offer the user a small set
+ * of discrete answers:
+ *
+ *     ```frankie:choices
+ *     British
+ *     Indian
+ *     Australian
+ *     ```
+ *
+ * The SDK lifts that block out of the prose and renders it as clickable options
+ * (the composer stays open, so the user can always type their own answer). The
+ * block is a plain fenced code block, so a host that doesn't understand it just
+ * shows a harmless code listing instead — never broken markup.
+ */
+interface ExtractedChoices {
+    /** The reply text with the choices block removed. */
+    body: string;
+    /** The offered options, or null when there is no complete block. */
+    options: string[] | null;
+}
+declare function extractChoices(text: string): ExtractedChoices;
+
 /**
  * Map a theme to the CSS custom properties the widget's styles read.
  *
@@ -365,4 +417,4 @@ declare function resolveMode(mode: WidgetTheme["mode"]): "light" | "dark";
 /** shadcn/ui's class helper: conditional classes with Tailwind conflict resolution. */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Composer, 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, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };
+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, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, extractChoices, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };