@smarter.sh/ui-chat 0.10.0 → 0.11.0

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/DocsDialog/data.d.ts

@@ -11,8 +11,8 @@ export interface DocSection {
     links: DocLink[];
 }
 /** The technical references for prompt engineers, who build LLMClients in the sandbox. */
-export declare const PROMPT_ENGINEER_LINKS: DocLink[];
+export declare function promptEngineerLinks(): DocLink[];
 /** The technical references for software engineers, who build the applications that host them. */
-export declare const SOFTWARE_ENGINEER_LINKS: DocLink[];
+export declare function softwareEngineerLinks(): DocLink[];
 /** The tabs of the Docs dialog, from left to right. The first one is selected when it opens. */
-export declare const DOC_SECTIONS: DocSection[];
+export declare function docSections(): DocSection[];

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

@@ -20,11 +20,16 @@
  * 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.
  *
+ * 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.
+ *
+
  * 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.
  */
 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, showConsole, cookieDomain, smarterRequestId, logStreamUrl, streamProgress, language, }: SmarterChatProps): import("react").JSX.Element;
 export default SmarterChat;

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" | "label" | "open" | "debug" | "language" | "width" | "height" | "position" | "api-key" | "mode" | "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/lib/i18n.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 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) and French. 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), 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. */
+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 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

@@ -112,4 +112,10 @@ export interface SmarterChatProps {
      * 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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smarter.sh/ui-chat",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "chatbot React.js component for the https://smarter.sh declarative, plugin-based AI resource management platform.",
   "homepage": "https://smarter.sh",
   "type": "module",
@@ -58,6 +58,7 @@
     "build": "tsc -b && vite build",
     "build:lib": "vite build --mode lib && tsc -p tsconfig.lib.json",
     "contract:types": "node scripts/contract-types.mjs",
+    "i18n": "node scripts/i18n.mjs",
     "lint": "eslint --max-warnings=0 .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",