@llmnative/react 1.33.0 → 1.34.0

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

@@ -327,6 +327,29 @@ 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;
+        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,80 @@
+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.
+ */
+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;

package/llms-full.txt

@@ -71,7 +71,9 @@ inclusi): un testo si cambia con `i18n.translations`, non nel codice. Namespace
 `<I18nProvider>`, come l'`ErrorBoundary` radice di `<App>`, resta in inglese), `themeSwitcher`,
 `imageField` (anche i dialoghi immagine di `RichText`), `richText`, `tabDynamic` (`addTab`),
 `breadcrumbs` (`label`, l'`aria-label` del `nav`), `grid` (`tableView`, `galleryView`, `columns`,
-`fields`), `prompt` (anche `Chatbot`: `role`, `language`, `voice`, `style`, `temperature`, `stop`).
+`fields`), `prompt` (anche `Chatbot`: `role`, `language`, `voice`, `style`, `temperature`, `stop`),
+`chat` (`ChatReasoning` e `ChatQuestions`: `reasoning`, `reasoningFor`, `other`, `review`, `submit`, …;
+il codice di `ChatMarkdown` usa `code`).
 
 ```tsx
 <App i18n={{ locale: 'it', translations: { it: { notifications: { emptyHint: 'Niente di nuovo' } } } }} />
@@ -991,6 +993,48 @@ e lasciano il menu aperto salvo `closeOnClick`.
 />
 ```
 
+### Messaggi di chat: ChatMarkdown, ChatReasoning, ChatQuestions (CR-109)
+
+Parti di un messaggio di un modello, da comporre nel proprio thread (anche accanto a `Chatbot`).
+
+```tsx
+// Markdown GFM del messaggio: tabelle (scorrono dentro di sé in un pannello stretto), elenchi,
+// titoli, citazioni, task list, codice con evidenziazione (Prism, lazy) e pulsante Copia, link a
+// indirizzi in una nuova scheda (noopener). Sanitizzato: niente HTML grezzo, niente javascript:.
+// streaming: chiude ciò che la fine del testo lascia aperto (fence, intestazione di tabella,
+// **grassetto**, `codice`, link) così il layout non salta mentre arriva. Off per un messaggio finito.
+<ChatMarkdown content={text} streaming={running} onLinkClick={(href) => navigate(href)} />
+// tone="muted", highlight={false}, components (come react-markdown), className,
+// classNames={{ root, paragraph, heading, list, blockquote, tableWrapper, table, th, td, codeBlock, codeHeader, code, inlineCode, link }}
+// repairStreamingMarkdown(text) è la stessa riparazione, pura.
+
+// Ragionamento: chiuso dietro "Ragionamento" / "Ha ragionato per 12 s"; aperto mentre arriva
+// (se l'utente non lo chiude) e richiuso alla fine. Contenuto con ChatMarkdown, tono attenuato.
+<ChatReasoning content={reasoning} streaming={thinking} duration={12} />
+// defaultOpen, open + onOpenChange (controllato), label, icon ('brain'), className, classNames={{ root, trigger, content }}
+
+// Domande interattive (formato dello strumento `question` di opencode / elicitation MCP):
+<ChatQuestions
+  questions={[
+    { id: 'db', header: 'Database', question: 'Quale database?', recommended: 0,
+      options: [{ label: 'Postgres', description: 'Relazionale' }, { label: 'SQLite' }] },
+    { id: 'features', header: 'Funzioni', question: 'Quali funzioni?', multiple: true,
+      options: [{ label: 'Auth' }, { label: 'Ricerca' }] },
+  ]}
+  onSubmit={async (answers) => send(answers)}   // [{ id, header, values: string[] }] in ordine
+/>
+// Una scheda per domanda (header) + Riepilogo e un solo Invia; opzioni numerate 1-2-3 o A-B-C
+// (numbering, altrimenti dedotto da etichette "A) …" / "1. …", che vengono tolte); consigliata
+// (recommended: indice da 0 o etichetta; anche il suffisso "(Recommended)"); multiple; "Altro" con
+// testo libero (allowOther, default true; per domanda `custom`); senza options è a testo libero.
+// Tastiera: numeri (o lettere con A-B-C) scelgono, frecce sinistra/destra tra le schede, su/giù tra
+// le opzioni, Spazio seleziona, Invio prosegue o invia (su una scelta singola prima la sceglie).
+// Ruoli tablist/tab/tabpanel, radiogroup/radio o group/checkbox.
+// Scelta singola: il click sceglie e passa alla domanda dopo. onSubmit che rifiuta lascia il form.
+// answers={[…]} mostra un insieme già risposto (sola lettura); disabled, autoFocus, submitLabel,
+// classNames={{ root, tabs, tab, panel, question, option, optionSelected, footer, summary }}
+```
+
 ### ImageEditor
 ```tsx
 <ImageEditor src="..." onSave={(dataUrl) => save(dataUrl)} />

package/llms.txt

@@ -66,7 +66,7 @@ import '@llmnative/react/dist/index.css'  // necessario una volta sola
 ui/        → primitivi stateless: Alert, Badge, Button, Card, DescriptionList, Image, Modal, Table, Gallery, Tab, Repeat, Icon, LocaleSwitcher, ThemeSwitcher, ProviderSwitcher, LayoutBuilder, ContextMenu
 ui/fields/ → campi form: Input, Select, UploadImage, UploadDocument, UploadCSV, CodeEditor, ImageField, RichText, Prompt, Crop, ContextMenu
 blocks/    → composizioni: Menu, Breadcrumbs, Notifications, Search, Carousel, Dropdown, Toolbar, SideNav, ListCard, AuthButton
-widgets/   → smart (hanno stato e provider): Grid, Form, MarkdownReader, ImageEditor, TabDynamic
+widgets/   → smart (hanno stato e provider): Grid, Form, MarkdownReader, ImageEditor, TabDynamic, Chatbot, ChatMarkdown, ChatReasoning, ChatQuestions
 ```
 
 Tutti gli import da `'@llmnative/react'` — mai da sottodirectory.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",