@green-on-grey/ui-kit 1.0.1 → 1.1.0

package/dist/chat/AgentMenu.d.ts

@@ -6,6 +6,28 @@ export interface AgentOption {
     label: string;
     icon: IconName;
 }
+/** A model the user may choose for the agent (FTR.NAB.CHAT-0001 R16, design §3.3). */
+export interface AgentModelOption {
+    key: string;
+    label: string;
+    /** The connection or the default model, grey under the name. */
+    sub?: string;
+    /** The capabilities: images, reasoning, the window. */
+    badges?: {
+        icon?: IconName;
+        text: string;
+    }[];
+    /** Under the row of the chosen model: the context will be compacted. */
+    warn?: ReactNode;
+}
+/** The block «Model» of the menu: one model is shown without a choice; none — the text of the product. */
+export interface AgentModels {
+    label: ReactNode;
+    options: AgentModelOption[];
+    value: string;
+    onPick: (key: string) => void;
+    empty?: ReactNode;
+}
 /** The round button of the agent: its icon, and the menu behind it. */
 export declare function AgentButton({ icon, label, title, expanded, small, disabled, onClick }: {
     icon: IconName;
@@ -19,7 +41,7 @@ export declare function AgentButton({ icon, label, title, expanded, small, disab
 /** The menu of the agent (FTR.NAB.CMN-0005 R15, design §6.6): its name and a
  * choice among the options of the product, as tiles with icons. The name is
  * saved on Enter and on leaving the field; a pick is saved at once. */
-export declare function AgentMenu({ label, name, options, value, optionsLabel, hint, narrow, onRename, onPick, onClose }: {
+export declare function AgentMenu({ label, name, options, value, optionsLabel, hint, narrow, models, onRename, onPick, onClose }: {
     /** The name of the dialog for a screen reader. */
     label: string;
     name: string;
@@ -29,6 +51,8 @@ export declare function AgentMenu({ label, name, options, value, optionsLabel, h
     hint?: ReactNode;
     /** A narrow place — a side panel: the options go in one column. */
     narrow?: boolean;
+    /** The choice of the model after the options. */
+    models?: AgentModels;
     onRename: (name: string) => void;
     onPick: (key: string) => void;
     /** Must keep its identity between renders. */

package/dist/chat/Chat.d.ts

@@ -1,5 +1,6 @@
 import type { ChatProps } from "./types";
 /** The conversation: the messages and the composer (FTR.NAB.CMN-0005 R11–R13,
- * design §6). The behaviour is the one of the chat of Nabu. A control exists
- * only when the product gave its handler: no `onCancel` — no cancel button. */
+ * design §6; FTR.NAB.CHAT-0001 design §3.1). The behaviour is the one of the
+ * chat of Nabu. A control exists only when the product gave its handler: no
+ * `onCancel` — no cancel button, no `commands` — no palette. */
 export declare function Chat(props: ChatProps): import("react").JSX.Element;

package/dist/chat/CommandPalette.d.ts

@@ -0,0 +1,12 @@
+import type { ChatCommand } from "./types";
+/** The items of the palette that match what is typed after "/". */
+export declare function matchCommands(commands: ChatCommand[], query: string): ChatCommand[];
+/** The palette of commands and skills over the composer (FTR.NAB.CHAT-0001 R4,
+ * design §3.1). The composer owns the keys: arrows move `active`, Enter and Tab
+ * pick it, Esc closes. */
+export declare function CommandPalette({ items, active, onPick, onHover }: {
+    items: ChatCommand[];
+    active: number;
+    onPick: (c: ChatCommand) => void;
+    onHover: (i: number) => void;
+}): import("react").JSX.Element;

package/dist/chat/ContextMeter.d.ts

@@ -0,0 +1,11 @@
+import type { ChatContext } from "./types";
+/** A number of tokens shortly: 42K, 1.2M in the language of the interface. */
+export declare function tokens(n: number, lng: string): string;
+/** The fill of the context window by a ring next to the send button
+ * (FTR.NAB.CHAT-0001 R3, design §3.1): grey, amber from 70 %, red from 90 %.
+ * A click shows the numbers; a full context offers to compact or to reset. */
+export declare function ContextMeter({ context, onCompact, onReset }: {
+    context: ChatContext;
+    onCompact?: () => void;
+    onReset?: () => void;
+}): import("react").JSX.Element;

package/dist/chat/index.d.ts

@@ -1,5 +1,8 @@
 export { Chat } from "./Chat";
 export { ChatLayout, ConversationList, NewTopicModal } from "./ConversationList";
-export { AgentButton, AgentMenu, type AgentOption } from "./AgentMenu";
+export { AgentButton, AgentMenu, type AgentModelOption, type AgentModels, type AgentOption } from "./AgentMenu";
+export { CommandPalette } from "./CommandPalette";
+export { ContextMeter, tokens } from "./ContextMeter";
+export { MessageView } from "./MessageView";
 export { useRecorder } from "./useRecorder";
-export type { ChatAttachment, ChatConfirmation, ChatConversation, ChatMark, ChatMessage, ChatProps, ChatStep, ChatUpload, ChatWait, ConversationListProps, } from "./types";
+export type { ChatAttachment, ChatCommand, ChatConfirmation, ChatContext, ChatConversation, ChatEvent, ChatMark, ChatMessage, ChatProps, ChatStep, ChatUpload, ChatWait, ConversationListProps, } from "./types";

package/dist/chat/types.d.ts

@@ -34,10 +34,20 @@ export type ChatWait = {
     state: "queued";
     position: number;
 };
+/** An event of the conversation shown as a divider (FTR.NAB.CHAT-0001 design §3.2):
+ * a reset of the context, a compaction, a change of the model. */
+export interface ChatEvent {
+    icon: IconName;
+    text: string;
+    /** Unfolded by a click: the summary of a compaction. */
+    details?: string;
+}
 export interface ChatMessage {
     id: string;
-    /** `note` is a line of the system without a bubble: the outcome of a confirmation, a cancelled turn. */
-    role: "user" | "assistant" | "note";
+    /** `note` is a line of the system without a bubble: the outcome of a confirmation, a cancelled turn.
+     * `event` is a divider of the conversation (`event` is set). */
+    role: "user" | "assistant" | "note" | "event";
+    event?: ChatEvent;
     text: string;
     /** ISO time. */
     createdAt: string;
@@ -52,12 +62,31 @@ export interface ChatMessage {
     };
     /** The content of the product inside the message: a mail card, a digest. */
     content?: ReactNode;
+    /** The tooltip of the bubble: the model of an answer (FTR.NAB.CHAT-0001 R18). */
+    hint?: string;
 }
 export interface ChatConfirmation {
     id: string;
     summary: string;
     preview?: string;
 }
+/** An item of the palette of commands (FTR.NAB.CHAT-0001 R4): a command of the
+ * conversation or a skill. */
+export interface ChatCommand {
+    kind: "command" | "skill";
+    /** What is typed after "/": `new`, `compact`; the name of a skill. */
+    name: string;
+    description?: string;
+    /** The source of a skill: the item of the catalog. */
+    source?: string;
+    /** A command that takes a text after it (`/compact <what to keep>`). */
+    takesText?: boolean;
+}
+/** The fill of the context window of the conversation (R3). */
+export interface ChatContext {
+    tokens: number;
+    window: number;
+}
 /** Give the chat a `key` of the conversation: its composer and its scroll belong to one conversation. */
 export interface ChatProps {
     agentName: string;
@@ -81,14 +110,27 @@ export interface ChatProps {
         maxBytes: number;
         accept?: string;
     };
-    /** Resolves when the message is accepted (the composer is cleared); rejects to keep the text. */
-    onSend(text: string, attachmentIds: string[], voice: boolean): Promise<void>;
+    /** The palette of "/": commands and skills; without it "/" is plain text. */
+    commands?: ChatCommand[];
+    /** Runs a command of the palette or one typed in full; rejects to keep the text. */
+    onCommand?(name: string, text: string): Promise<void>;
+    /** The fill of the context; with `onCompact` and `onReset` a full context offers them. */
+    context?: ChatContext;
+    onCompact?(): void;
+    onReset?(): void;
+    /** The longest recording in seconds (the recording stops by itself). */
+    voiceMaxSeconds?: number;
+    /** Resolves when the message is accepted (the composer is cleared); rejects to keep the text.
+     * `skill` is the skill the user picked in the palette. */
+    onSend(text: string, attachmentIds: string[], voice: boolean, skill?: string): Promise<void>;
     onLoadOlder?(): void;
     onRetry?(messageId: string): void;
     onCancel?(): void;
     onConfirm?(id: string, approve: boolean): void;
     /** `null`: the upload failed and the product has told the user. */
     onUpload?(file: File): Promise<ChatUpload | null>;
+    /** The files attached to the message being written, after every change. */
+    onPendingChange?(uploads: ChatUpload[]): void;
     /** The text of a recording; `null`: it failed and the product has told the user. */
     onTranscribe?(recording: Blob): Promise<string | null>;
 }

package/dist/chat/useRecorder.d.ts

@@ -1,9 +1,15 @@
-/** Push-to-talk recording with MediaRecorder. */
-export declare function useRecorder(): {
+/** Recording with MediaRecorder (FTR.NAB.CHAT-0001 R20): started and stopped
+ * by the user, stopped by itself at `maxSeconds`; the level of the voice is
+ * sampled for the bar of the recording. */
+export declare function useRecorder(maxSeconds?: number, onLimit?: () => void): {
     supported: boolean;
     recording: boolean;
-    seconds: string;
+    seconds: number;
+    level: number;
     error: boolean;
     start: () => Promise<void>;
     stop: () => Promise<Blob | null>;
+    cancel: () => void;
 };
+/** m:ss of a number of seconds. */
+export declare function clock(seconds: number): string;