@smarter.sh/ui-chat 0.10.0 → 0.16.2

package/dist/types/src/catalogs.gen.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Smarter Chat's message catalogs: generated from locale/<language>/LC_MESSAGES/smarter-chat.po by
+ * scripts/i18n.mjs. Do not edit; run `npm run i18n`. See src/lib/i18n.tsx.
+ */
+/** A language's translated messages, by msgid (context, \u0004, msgid in a context), and its plural rule. */
+export interface Catalog {
+    /** The index of the plural form for a count. */
+    plural: (n: number) => number;
+    /** A message's translation, or its plural forms' translations. */
+    messages: Record<string, string | string[]>;
+}
+export declare const CATALOGS: Record<string, Catalog>;

package/dist/types/src/components/AppTitle/Component.d.ts

@@ -1,7 +1,3 @@
-/**
- * The chat's title: the LLMClient's app name and version, with icons for whether it is valid, and
- * whether it is deployed or is still in the sandbox.
- */
 import "@/components/AppTitle/styles.css";
 interface AppTitleProps {
     title: string;

package/dist/types/src/components/ErrorBoundary/Component.d.ts

@@ -12,6 +12,6 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryS
     state: ErrorBoundaryState;
     static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 }
 export default ErrorBoundary;

package/dist/types/src/components/SmarterChat/Component.d.ts

@@ -1,30 +1,35 @@
 /**
- * SmarterChat: a chat with a Smarter LLMClient, with an optional Console beside it.
+ * SmarterChat: a chat with a Smarter LLMClient.
  *
  * It fetches the LLMClient's configuration, which includes the chat session's history, then sends
  * the chat thread to the LLMClient's prompt api with each new message, and adds the response's
- * messages to the thread. Failed prompts are displayed in the thread, as "smarter_error" messages.
+ * messages to the thread. With verbose, the configuration's diagnostic parts, e.g. the session's tool
+ * calls, are fetched too (with ?verbose=true), and again after each prompt. Failed prompts are
+ * displayed in the thread, as "smarter_error" messages.
  * While a prompt runs, its progress (e.g. its tool calls and MCP server requests) is displayed in
  * the thread, with a spinner beside its current step, and is replaced by the response's messages
  * when it finishes. Code blocks in messages
  * are syntax highlighted, and have a copy button.
  *
- * The user can resize the chat and the Console by dragging the separator between them, and can
- * hide the Console, which slides out to the right. In sandbox mode, the thread also displays
- * Smarter's system, tool and meta data messages. In production mode, it displays only the
- * conversation, as the LLMClient's users see it, and the Console and its toggle button are hidden. The Console's server logs follow the mode: DEBUG
- * and above in sandbox mode, and the server's own log level in production mode. A new chat also
- * clears the Console's server logs. Sandbox mode also has a Docs button, which opens a dialog of
- * links to the technical references for prompt engineers and software engineers.
+ * With toggleMetadata, the header has a Sandbox / Production mode switch. In sandbox mode, the
+ * thread also displays Smarter's system, tool and meta data messages. In production mode, it displays
+ * only the conversation, as the LLMClient's users see it. When the chat is narrow, the header's
+ * buttons show only their icons. See styles.css.
+ *
+ * A page that hosts the chat, e.g. the Smarter web console's Prompt Engineer's Workbench, which puts
+ * its developer Console beside it, follows it with onConfig, onNewChat and onModeChange, asks it to
+ * reload its configuration with reloadKey, and adds its own buttons to the header with headerActions.
  *
  * The LLMClient's styles (its manifest's spec.config.styles) set its logo, which is displayed in
  * the header, its avatars, its background image, its fonts and its colors. See lib/styles.ts.
  *
- * This is the component that the @smarter.sh/ui-chat npm package exports, and that the Smarter web
- * console's LLMClient prompt workbench renders. See main.tsx.
+ * The chat's own text, e.g. its buttons' labels, is in the language that the `language` prop asks for, or else the
+ * page's, or else the browser's: English, Spanish or French. See lib/i18n.tsx. The LLMClient's own text, e.g. its
+ * welcome message and its example prompts, and the messages of the conversation are displayed as they are.
+ *
  */
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 import type { SmarterChatProps } from "@/types";
 import "@/components/SmarterChat/styles.css";
-declare function SmarterChat({ apiUrl, apiKey, toggleMetadata, csrfCookieName, csrftoken, debugCookieName, debugCookieExpiration, debugMode, sessionCookieName, sessionCookieExpiration, cookiePath, showConsole, cookieDomain, smarterRequestId, logStreamUrl, streamProgress, }: SmarterChatProps): import("react").JSX.Element;
+declare function SmarterChat({ apiUrl, apiKey, toggleMetadata, csrfCookieName, csrftoken, debugCookieName, debugCookieExpiration, debugMode, sessionCookieName, sessionCookieExpiration, cookiePath, cookieDomain, smarterRequestId, streamProgress, language, verbose, reloadKey, headerActions, onConfig, onNewChat, onModeChange, }: SmarterChatProps): import("react").JSX.Element;
 export default SmarterChat;

package/dist/types/src/components/SmarterChat/HeaderButton.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
+export interface HeaderButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The button's icon, before its label. */
+    icon?: ReactNode;
+    children?: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare function HeaderButton({ className, icon, children, ...props }: HeaderButtonProps): import("react").JSX.Element;
+export default HeaderButton;

package/dist/types/src/components/SmarterChat/icons.d.ts

@@ -4,16 +4,7 @@
  */
 /** A blank sheet of paper: a new chat. (bi-file-earmark) */
 export declare function NewChatIcon(): import("react").JSX.Element;
-/**
- * A window with a panel on its right, as the Console is: filled while the Console is visible
- * (bi-layout-sidebar-inset-reverse), and empty while it is hidden (bi-layout-sidebar-reverse).
- */
-export declare function ConsoleIcon({ visible }: {
-    visible: boolean;
-}): import("react").JSX.Element;
 /** Tools: sandbox mode, which displays Smarter's system, tool and meta data messages. (bi-tools) */
 export declare function SandboxIcon(): import("react").JSX.Element;
 /** A shield: production mode, which displays the conversation only, as its users see it. (bi-shield-check) */
 export declare function ProductionIcon(): import("react").JSX.Element;
-/** An open book: the Docs dialog, which links to the technical references. (bi-book) */
-export declare function DocsIcon(): import("react").JSX.Element;

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

@@ -1,2 +1,5 @@
 import SmarterChat from "@/components/SmarterChat/Component";
+import HeaderButton from "@/components/SmarterChat/HeaderButton";
+export { HeaderButton };
+export type { HeaderButtonProps } from "@/components/SmarterChat/HeaderButton";
 export default SmarterChat;

package/dist/types/src/contract.gen.d.ts

@@ -366,7 +366,7 @@ export interface PromptChatApiConfig {
 /**
  * The LLMClient's extensions.
  *
- * The list itself is returned only in the complete configuration.
+ * The list itself is returned only in the complete configuration, with ``?verbose=true``.
  *
  * This interface was referenced by `SmarterChatAPIContract`'s JSON-Schema
  * via the `definition` "PromptChatApiExtensionList".
@@ -432,7 +432,8 @@ export interface PromptChatApiListMetaData {
 /**
  * The chat session's history, in version 2.
  *
- * Only ``chat_history`` is public.
+ * Only ``chat_history`` is public. ``prompt_tool_call_history`` is in the complete configuration with
+ * ``?verbose=true``, and the other histories are returned only to the cli.
  *
  * This interface was referenced by `SmarterChatAPIContract`'s JSON-Schema
  * via the `definition` "PromptChatApiHistory".
@@ -641,10 +642,20 @@ export interface PromptChatApiLLMClient {
 /**
  * The LLMClient's state.
  *
+ * The complete configuration, with ``?verbose=true``, adds the rest of ``LLMClientHelper.to_json()``.
+ *
  * This interface was referenced by `SmarterChatAPIContract`'s JSON-Schema
  * via the `definition` "PromptChatApiMetaData".
  */
 export interface PromptChatApiMetaData {
+    /**
+     * True if the LLMClient requires a Smarter api key, or a logged-in user.
+     */
+    is_authentication_required?: boolean | null;
+    /**
+     * True if the request's host is a custom domain.
+     */
+    is_custom_domain?: boolean | null;
     is_deployed?: boolean | null;
     is_valid?: boolean | null;
     ready?: boolean | null;
@@ -653,7 +664,7 @@ export interface PromptChatApiMetaData {
 /**
  * The LLMClient's plugins.
  *
- * The list itself is returned only in the complete configuration.
+ * The list itself is returned only in the complete configuration, with ``?verbose=true``.
  *
  * This interface was referenced by `SmarterChatAPIContract`'s JSON-Schema
  * via the `definition` "PromptChatApiPluginList".

package/dist/types/src/embed/element.d.ts

@@ -3,7 +3,7 @@ export declare const ELEMENT_NAME = "smarter-chat";
 export declare const TOGGLE_EVENT = "smarter-chat-toggle";
 export declare class SmarterChatElement extends HTMLElement {
     #private;
-    static observedAttributes: ("chatbot" | "color" | "label" | "open" | "debug" | "width" | "height" | "position" | "api-key" | "mode" | "z-index" | "session-cookie-name" | "cookie-path" | "stream-progress")[];
+    static observedAttributes: ("chatbot" | "color" | "language" | "label" | "debug" | "width" | "height" | "position" | "api-key" | "mode" | "open" | "z-index" | "session-cookie-name" | "cookie-path" | "stream-progress")[];
     /** The element's options, from its attributes. */
     get options(): EmbedOptionsResult;
     /** Whether the launcher is open. */

package/dist/types/src/embed/options.d.ts

@@ -11,8 +11,8 @@ export interface EmbedOptions {
     position: EmbedPosition;
     /** Whether the launcher starts open. */
     open: boolean;
-    /** The launcher's accessible name, and the chat panel's. */
-    label: string;
+    /** The launcher's accessible name, and the chat panel's. Null for the default, "Chat", in the chat's language. */
+    label: string | null;
     /** The launcher button's background color. */
     color: string;
     /** The width of the inline chat, or of the launcher's panel. */
@@ -29,6 +29,8 @@ export interface EmbedOptions {
     streamProgress: boolean;
     /** Log to the browser console. */
     debug: boolean;
+    /** The language of the chat's own text, e.g. "fr". Null for the page's, or else the browser's. */
+    language: string | null;
 }
 /** The result of reading the options: the options, or why they can't be used. */
 export type EmbedOptionsResult = {
@@ -39,8 +41,7 @@ export type EmbedOptionsResult = {
     error: string;
 };
 /** The attributes that a <smarter-chat> element reads, in kebab-case. */
-export declare const OPTION_ATTRIBUTES: readonly ["chatbot", "api-key", "mode", "position", "open", "label", "color", "width", "height", "z-index", "session-cookie-name", "cookie-path", "stream-progress", "debug"];
-export declare const DEFAULT_LABEL = "Chat";
+export declare const OPTION_ATTRIBUTES: readonly ["chatbot", "api-key", "mode", "position", "open", "label", "color", "width", "height", "z-index", "session-cookie-name", "cookie-path", "stream-progress", "debug", "language"];
 export declare const DEFAULT_COLOR = "#ff5733";
 export declare const DEFAULT_Z_INDEX = 2147483000;
 /** A boolean attribute: present and empty, or "true", is true. "false" is false. Missing is the default. */

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

@@ -1,11 +1,11 @@
 /**
  * @smarter.sh/ui-chat: the public api of the npm package. See vite.config.ts (--mode lib).
  *
- * The Smarter web console builds this package as an app instead. See main.tsx.
+ * The Smarter web console's Prompt Engineer's Workbench imports it too, and puts its developer Console beside the
+ * chat, with SmarterChat's verbose, reloadKey, headerActions and on* props.
  */
-export { default as SmarterChat } from "./components/SmarterChat";
-export { default as Console } from "./components/Console";
-export { MenuItems } from "./components/Console/enums";
+export { default as SmarterChat, HeaderButton } from "./components/SmarterChat";
+export type { HeaderButtonProps } from "./components/SmarterChat";
 export { MessageDirectionEnum, SenderRoleEnum, ValidMessageRolesEnum } from "./lib/enums";
 export { projectVersion as version } from "./const";
 export { CHAT_CONTRACT_V2_CAPABILITY, normalizeConfig } from "./lib/api";

package/dist/types/src/lib/api.d.ts

@@ -68,11 +68,18 @@ export declare function normalizeConfig(data: unknown): ChatConfig | null;
  * e.g. by the Console, which displays the configuration as JSON.
  */
 export declare function withLegacyChatbot(config: Contract.PromptChatApiConfig): ChatConfig;
+/** The config api's query parameter that asks for the configuration's diagnostic parts. */
+export declare const VERBOSE_PARAMETER = "verbose";
 /**
  * The LLMClient's configuration. A new chat session's key, and the debug mode, are saved in their
  * cookies, for the next page load.
+ *
+ * With verbose, the platform adds the configuration's diagnostic parts, which the Console displays:
+ * the session's tool calls, the complete meta_data, and the lists of plugins and extensions. They are
+ * costly to build, so the chat asks for them only while the Console displays them. A deployed
+ * LLMClient's own host, and an older platform, ignore it.
  */
-export declare function fetchConfig(apiUrl: string, cookies: ChatCookies, context: ClientContext): Promise<ChatConfig>;
+export declare function fetchConfig(apiUrl: string, cookies: ChatCookies, context: ClientContext, verbose?: boolean): Promise<ChatConfig>;
 /**
  * Reads a Server-Sent Events stream, and calls onEvent with each event's name and data. Comments
  * (e.g. keepalives) and retry hints are ignored.

package/dist/types/src/lib/i18n.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Translation functions for Smarter Chat.
+ *
+ * Smarter Chat is translated with gettext, the same way as the Smarter web console, and has the same
+ * languages: English, which is the source language of every message, Spanish (Latin American, under the
+ * generic "es" code), French and Brazilian Portuguese ("pt-br", whose catalog is pt_BR). Its message catalogs are its own, in locale/<language>/LC_MESSAGES/smarter-chat.po,
+ * because the chat also runs on pages that the Smarter platform didn't render: the npm library's and the embed
+ * script's. `npm run i18n` compiles them into src/catalogs.gen.ts, which every build bundles.
+ *
+ * The language is the one that SmarterChat's `language` prop asks for, or else the page's, from the lang attribute
+ * of its <html> element, which the web console sets to the console's language, or else the browser's. A language
+ * that Smarter Chat doesn't have falls back to its generic language (fr-CA to fr), or else to a regional language
+ * of the same generic language (pt and pt-PT to pt-br), and then to English.
+ * SmarterChat activates its language as it renders, so that the functions here, which every component and module
+ * calls, translate into it. A page with two chats in two languages therefore gets the language of the last one to
+ * render.
+ *
+ * Every message is English source text, and must be a string literal, so that `npm run i18n` can extract it.
+ * Interpolate values afterwards, with Python-style named placeholders, so that a translator can move them:
+ *
+ * @example
+ *   gettext("Start a new chat");
+ *   interpolate(gettext("%(assistant)s is typing"), { assistant });
+ *   interpolate(ngettext("%(count)s tool", "%(count)s tools", n), { count: n });
+ *   pgettext("button", "Code");
+ *   // a React element inside a sentence:
+ *   interpolateNodes(gettext("Delete %(name)s?"), { name: <strong>{name}</strong> });
+ *
+ * A comment that begins with "Translators:" on the line before a call is copied into the message catalogs, for the
+ * translator. Translate when the text is displayed, never in a module-level constant, which is evaluated once,
+ * before any language is activated.
+ */
+import { type ReactNode } from "react";
+/** The source language, which has no catalog. */
+export declare const DEFAULT_LANGUAGE = "en";
+/** The languages that Smarter Chat is translated into, including English, as lowercase language tags. */
+export declare const LANGUAGES: readonly string[];
+type InterpolationValues = Record<string, string | number | null | undefined>;
+/**
+ * The language of Smarter Chat that best matches a language tag, e.g. "fr" for "fr-CA", or "pt-br" for "pt" and
+ * "pt-PT", or null if it has none. The tag is case-insensitive, and may use "_" for "-", as Django's locale names do.
+ */
+export declare function matchLanguage(tag: string | null | undefined): string | null;
+/**
+ * The language to display: the requested one, if Smarter Chat has it, or else the page's (<html lang>), or else
+ * the browser's first one that it has, or else English.
+ */
+export declare function resolveLanguage(requested?: string | null): string;
+/** Translates from now on into the language that resolveLanguage() chooses for the request, and returns it. */
+export declare function activateLanguage(requested?: string | null): string;
+/** The active language. Until one is activated, the page's or the browser's. */
+export declare function currentLanguage(): string;
+/** Translates a message. */
+export declare function gettext(msgid: string): string;
+/** Translates a message that has a singular and a plural form, chosen by count. */
+export declare function ngettext(singular: string, pluralText: string, count: number): string;
+/** Translates a message in a context, which tells apart two messages with the same English text. */
+export declare function pgettext(context: string, msgid: string): string;
+/** ngettext() in a context. */
+export declare function npgettext(context: string, singular: string, pluralText: string, count: number): string;
+/**
+ * Replaces each %(name)s placeholder in a translated message with values[name].
+ * A placeholder with no value is left as it is, so that the mistake shows.
+ */
+export declare function interpolate(message: string, values: InterpolationValues): string;
+/**
+ * interpolate() for values that are React nodes, e.g. a name in <strong> inside a sentence. Returns a fragment of
+ * the message's text and the values, in the order that the (translated) message puts them.
+ */
+export declare function interpolateNodes(message: string, values: Record<string, ReactNode>): ReactNode;
+export {};

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

@@ -3,9 +3,9 @@
  *
  * The api's types are generated from the contract's JSON Schema (contract/chat-contract.schema.json,
  * which the Smarter backend generates from smarter.apps.prompt.contract.models) into contract.gen.ts.
- * They describe the fields that Smarter Chat reads. The api returns more, which the Console displays
- * as is.
+ * They describe the fields that Smarter Chat reads. The api returns more, which onConfig passes on as is.
  */
+import type { ReactNode } from "react";
 import type * as Contract from "./contract.gen";
 import type { MessageDirection, SenderRole } from "./lib/enums";
 export type { Contract };
@@ -75,7 +75,10 @@ export interface SmarterChatProps {
     apiUrl: string;
     /** An optional Smarter api key, for LLMClients that require authentication. */
     apiKey?: string | null;
-    /** Show the button that shows and hides the thread's metadata messages. */
+    /**
+     * Show the Sandbox / Production mode switch, which shows and hides the thread's metadata messages (Smarter's
+     * system, tool and meta data messages), and start in sandbox mode.
+     */
     toggleMetadata?: boolean;
     /** The name of Django's CSRF cookie. */
     csrfCookieName?: string;
@@ -96,20 +99,35 @@ export interface SmarterChatProps {
     cookiePath?: string | null;
     /** @deprecated Not used. Django's session cookie is sent with each request, as is. */
     authSessionCookieName?: string;
-    /** Show the Console, which displays the chat's configuration and history. */
-    showConsole?: boolean;
     /** The domain whose cookies Smarter Chat reads. example: platform.smarter.sh */
     cookieDomain?: string;
     /** A unique id of the page request, sent as the X-Smarter-RequestId header. */
     smarterRequestId?: string;
-    /**
-     * The url of the user's server log stream (Server-Sent Events), which the Console displays in
-     * its "Server Logs" tab. Without it, the Console has no such tab.
-     */
-    logStreamUrl?: string | null;
     /**
      * Display the progress of a running prompt, e.g. its tool calls, which the prompt api streams as
      * Server-Sent Events. Servers that don't stream answer as before.
      */
     streamProgress?: boolean;
+    /**
+     * The language of the chat's own text, e.g. its buttons' labels, as a language tag: "en", "es" or "fr", or a
+     * regional variant of one, e.g. "es-MX", which gets its generic language. By default, the page's (the lang
+     * attribute of its <html> element), or else the browser's. Other languages get English.
+     */
+    language?: string | null;
+    /**
+     * Fetch the configuration's diagnostic parts too, e.g. the chat session's tool calls, which are costly for the
+     * platform to build, and fetch them again after each prompt. The platform sends them only to a user who may read
+     * the LLMClient. onConfig receives them.
+     */
+    verbose?: boolean;
+    /** Reload the configuration when this changes, e.g. after the page changed the LLMClient's manifest. */
+    reloadKey?: number | string;
+    /** Buttons that the page adds to the chat's header, after its own. See HeaderButton. */
+    headerActions?: ReactNode;
+    /** Called with the configuration each time it loads: at the start of a chat, and with verbose, after each prompt. */
+    onConfig?: (config: ChatConfig) => void;
+    /** Called when the user starts a new chat, whose session has a new key. */
+    onNewChat?: () => void;
+    /** Called with whether the chat is in sandbox mode (true) or production mode, when it starts and when it changes. */
+    onModeChange?: (sandbox: boolean) => void;
 }