@llmnative/react 1.33.0 → 1.35.0

package/dist/types/src/I18n.d.ts

@@ -327,6 +327,31 @@ export interface I18nDict {
     breadcrumbs: {
         label: string;
     };
+    /** CR-109 — ChatReasoning and ChatQuestions (code blocks of ChatMarkdown use `code`). */
+    chat: {
+        reasoning: string;
+        reasoningStreaming: string;
+        reasoningFor: string;
+        durationSeconds: string;
+        durationMinutes: string;
+        questions: string;
+        questionTab: string;
+        review: string;
+        reviewHint: string;
+        other: string;
+        otherPlaceholder: string;
+        recommended: string;
+        chooseOne: string;
+        chooseMany: string;
+        keyboardHint: string;
+        /** CR-110 — hint while typing the free-text answer (Enter adds a line). */
+        textKeyboardHint: string;
+        next: string;
+        back: string;
+        submit: string;
+        noAnswer: string;
+        answered: string;
+    };
 }
 type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];

package/dist/types/src/components/index.d.ts

@@ -74,6 +74,13 @@ export { default as MarkdownReader } from './widgets/MarkdownReader';
 export type { MarkdownReaderProps } from './widgets/MarkdownReader';
 export * from './widgets/Prompt';
 export * from './widgets/Chatbot';
+export { default as ChatMarkdown } from './widgets/chat/ChatMarkdown';
+export type { ChatMarkdownProps, ChatMarkdownClassNames } from './widgets/chat/ChatMarkdown';
+export { default as ChatReasoning } from './widgets/chat/ChatReasoning';
+export type { ChatReasoningProps, ChatReasoningClassNames } from './widgets/chat/ChatReasoning';
+export { default as ChatQuestions } from './widgets/chat/ChatQuestions';
+export type { ChatQuestion, ChatQuestionOption, ChatQuestionAnswer, ChatQuestionsNumbering, ChatQuestionsProps, ChatQuestionsClassNames } from './widgets/chat/ChatQuestions';
+export { repairStreamingMarkdown } from '../libs/streamingMarkdown';
 export { default as TabDynamic } from './widgets/TabDynamic';
 export { default as Component } from './Component';
 export { ComponentBlock } from './Component';

package/dist/types/src/components/ui/Code.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { UIProps } from '../..';
-declare const LANGUAGES: Record<string, () => Promise<unknown>>;
 declare const THEMES: {
     prism: string;
     dark: string;
@@ -11,7 +10,7 @@ declare const THEMES: {
     tomorrow: string;
     twilight: string;
 };
-type PrismLanguage = keyof typeof LANGUAGES;
+type PrismLanguage = string;
 type PrismTheme = keyof typeof THEMES;
 export type PrismBackground = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'white' | 'black' | 'transparent' | 'default';
 interface CodeProps extends UIProps {

package/dist/types/src/components/widgets/chat/ChatMarkdown.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { type Components } from 'react-markdown';
+/** Classes for the parts of a `ChatMarkdown`, added to the defaults. */
+export interface ChatMarkdownClassNames {
+    root?: string;
+    paragraph?: string;
+    heading?: string;
+    list?: string;
+    blockquote?: string;
+    /** The scrolling box around a table. */
+    tableWrapper?: string;
+    table?: string;
+    th?: string;
+    td?: string;
+    codeBlock?: string;
+    codeHeader?: string;
+    code?: string;
+    inlineCode?: string;
+    link?: string;
+}
+export interface ChatMarkdownProps {
+    /** GitHub-flavoured Markdown of the message. */
+    content: string;
+    /**
+     * The text is still arriving: what its end left open (a code fence, a table header, `**bold`,
+     * a link) is closed before rendering, so the layout does not jump. Leave it off for a finished message.
+     */
+    streaming?: boolean;
+    /** `muted` for secondary text, such as the reasoning of the model. */
+    tone?: 'default' | 'muted';
+    /** Syntax highlighting of fenced code (Prism, loaded on demand). Default `true`. */
+    highlight?: boolean;
+    /** Called on a link to a route of the app (not an address, not `#anchor`); it prevents the navigation. */
+    onLinkClick?: (href: string, event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** Overrides of single elements, as in `react-markdown`. */
+    components?: Components;
+    className?: string;
+    classNames?: ChatMarkdownClassNames;
+}
+/**
+ * CR-109 — Markdown of a chat message: GFM (tables, task lists, strikethrough, autolinks), compact
+ * spacing, tables that scroll inside themselves, code with highlighting and a copy button, links to
+ * addresses in a new tab. Sanitized (`rehype-sanitize`): raw HTML and `javascript:` links are dropped.
+ * With `streaming` the end of the text is repaired as it arrives.
+ */
+export default function ChatMarkdown({ content, streaming, tone, highlight, onLinkClick, components, className, classNames, }: ChatMarkdownProps): React.JSX.Element;

package/dist/types/src/components/widgets/chat/ChatQuestions.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+/** A choice of a question. */
+export interface ChatQuestionOption {
+    /** What the answer says; it is the value returned when chosen. */
+    label: string;
+    /** A line under the label. */
+    description?: string;
+}
+/**
+ * A question of the model, in the shape of the `question` tool of opencode and of MCP elicitation.
+ */
+export interface ChatQuestion {
+    /** Returned with the answer, to match it to the question. */
+    id?: string;
+    /** Short title: the label of its tab. */
+    header?: string;
+    question: string;
+    /** The choices. Without them the question takes a free-text answer. */
+    options?: ChatQuestionOption[];
+    /** More than one choice. */
+    multiple?: boolean;
+    /**
+     * The choice the model recommends: its index (from 0) or its label. A label ending with
+     * "(Recommended)" is recognised too.
+     */
+    recommended?: number | string;
+    /** Offers "Other" with a free-text answer. Default: `allowOther` of the component. */
+    custom?: boolean;
+}
+/** The answer to one question: the chosen labels and/or the free text. */
+export interface ChatQuestionAnswer {
+    id?: string;
+    header?: string;
+    values: string[];
+}
+/** How the choices are numbered: 1-2-3 or A-B-C. */
+export type ChatQuestionsNumbering = 'numeric' | 'alpha';
+/** Classes for the parts of a `ChatQuestions`, added to the defaults. */
+export interface ChatQuestionsClassNames {
+    root?: string;
+    tabs?: string;
+    tab?: string;
+    panel?: string;
+    question?: string;
+    option?: string;
+    /** Added to a chosen option. */
+    optionSelected?: string;
+    footer?: string;
+    /** The answered state. */
+    summary?: string;
+}
+export interface ChatQuestionsProps {
+    questions: ChatQuestion[];
+    /**
+     * All the answers, in the order of the questions. May return a promise: the form waits for it and
+     * shows the answered state when it resolves (it stays open when it rejects).
+     */
+    onSubmit?: (answers: ChatQuestionAnswer[]) => void | Promise<unknown>;
+    /** Numbering of the choices. Default: as the labels are written ("A) …", "1. …"), else numeric. */
+    numbering?: ChatQuestionsNumbering;
+    /** "Other" with a free-text answer on every question (a question can override it with `custom`). Default `true`. */
+    allowOther?: boolean;
+    /** Answers already given: the component shows them, read-only, instead of the form. */
+    answers?: ChatQuestionAnswer[];
+    /** Shows the form without letting it change or be sent. */
+    disabled?: boolean;
+    /** Puts the focus on the first choice when it appears, so the number keys work at once. */
+    autoFocus?: boolean;
+    /** Text of the submit button. */
+    submitLabel?: string;
+    className?: string;
+    classNames?: ChatQuestionsClassNames;
+}
+/**
+ * CR-109 — Questions of the model the user answers with a click: one tab per question, numbered
+ * choices (the recommended one stands out), single or multiple choice, "Other" with free text, a
+ * review and one submit for all the answers. Keyboard: number (or letter) keys choose, arrows move
+ * between tabs and choices, Enter continues. With `answers` it shows a set already answered.
+ *
+ * CR-110 — The free text ("Other", or a question without options) is a textarea that grows with
+ * the text (two lines, then up to a height and it scrolls; resizable vertically): Enter adds a
+ * line, Ctrl/Cmd+Enter continues or sends.
+ */
+export default function ChatQuestions({ questions, onSubmit, numbering, allowOther, answers, disabled, autoFocus, submitLabel, className, classNames, }: ChatQuestionsProps): React.JSX.Element | null;

package/dist/types/src/components/widgets/chat/ChatReasoning.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type I18nDict } from '../../../I18n';
+/** Classes for the parts of a `ChatReasoning`, added to the defaults. */
+export interface ChatReasoningClassNames {
+    root?: string;
+    /** The summary line that opens and closes the block. */
+    trigger?: string;
+    content?: string;
+}
+export interface ChatReasoningProps {
+    /** The reasoning of the model, as Markdown. */
+    content: string;
+    /** The reasoning is still arriving: the block is open (unless the user closed it) and its end is repaired. */
+    streaming?: boolean;
+    /** How long the model reasoned, in seconds: the summary says "Reasoned for 12 s". */
+    duration?: number;
+    /** Open when it is not streaming. Default `false`. */
+    defaultOpen?: boolean;
+    /** Controlled open state; with it, the block opens and closes only through `onOpenChange`. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Replaces the summary text. */
+    label?: React.ReactNode;
+    /** Icon of the summary line. Default `brain`. */
+    icon?: string;
+    className?: string;
+    classNames?: ChatReasoningClassNames;
+}
+/** `12` → "12 s", `75` → "1 min 15 s", in the words of the dictionary. */
+export declare function formatReasoningDuration(seconds: number, dict: I18nDict['chat']): string;
+/**
+ * CR-109 — The reasoning of the model, in a block of its own: closed by default behind a summary line
+ * ("Reasoning", "Reasoned for 12 s"), open while it streams, its Markdown in a muted tone.
+ */
+export default function ChatReasoning({ content, streaming, duration, defaultOpen, open, onOpenChange, label, icon, className, classNames, }: ChatReasoningProps): React.JSX.Element;

package/dist/types/src/libs/prism.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Prism loaded on demand, shared by `Code` and `ChatMarkdown`.
+ *
+ * The core and each language pack are imported lazily the first time they are needed, so the root
+ * bundle does not carry the grammars.
+ */
+export declare const PRISM_LANGUAGES: Record<string, () => Promise<unknown>>;
+/** The Prism grammar name for a fence language, or `undefined` when Prism has no grammar for it. */
+export declare function resolvePrismLanguage(language: string | undefined): string | undefined;
+export declare function loadPrismLanguage(language: string, loaded?: Set<string>): Promise<void>;
+/** Minimal shape of the Prism object used by the framework. */
+export interface PrismLike {
+    languages: Record<string, unknown>;
+    highlight: (code: string, grammar: unknown, language: string) => string;
+    highlightElement: (element: Element) => void;
+}
+/** Loads the Prism core (once), with the global the language packs extend. */
+export declare function loadPrism(): Promise<PrismLike>;
+/** Loads the scoped Prism themes of `Code` (lazy, once). */
+export declare function ensurePrismStyles(): Promise<void>;
+/**
+ * Highlights `code` as HTML (Prism escapes the text), or `null` when the language has no grammar or
+ * Prism cannot load.
+ */
+export declare function highlightCode(code: string, language: string | undefined): Promise<string | null>;

package/dist/types/src/libs/streamingMarkdown.d.ts

@@ -0,0 +1,15 @@
+/**
+ * CR-109 — Markdown that is still arriving.
+ *
+ * A model streams Markdown a few characters at a time, so the text on screen is often cut in the
+ * middle of a construct: a code fence not yet closed, a table with only its header, `**bold` without
+ * its closing marks, a link without `)`. Rendered as is, the rest of the message turns into code, the
+ * table shows as a line of pipes until its delimiter row arrives, and markers flash as text.
+ *
+ * `repairStreamingMarkdown` closes what the tail of the text left open, so each partial text renders
+ * as close as possible to its final form. It only looks at the end of the text, never changes what is
+ * already complete, and is meant for text that is still streaming: a finished message is rendered
+ * as written.
+ */
+/** Closes the constructs the end of a streaming Markdown text left open (see the module comment). */
+export declare function repairStreamingMarkdown(text: string): string;