@smarter.sh/ui-chat 0.8.0 → 0.9.0

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

@@ -26,5 +26,5 @@
 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, 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, }: SmarterChatProps): import("react").JSX.Element;
 export default SmarterChat;

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

@@ -0,0 +1,10 @@
+import type { EmbedOptions } from "./options";
+export declare const PANEL_ID = "smarter-chat-embed-panel";
+export interface EmbedAppProps {
+    options: EmbedOptions;
+    /** Whether the launcher is open. The element owns this state, so that page scripts can open and close it. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+declare function EmbedApp(props: EmbedAppProps): import("react").JSX.Element;
+export default EmbedApp;

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

@@ -0,0 +1,7 @@
+export declare const CDN_BASE_URL: string;
+/** The url of the directory of a script, or of jsDelivr's copy of the package, if it has no url. */
+export declare function scriptBaseUrl(script: Element | null | undefined): string;
+/** Remembers the directory of the running script. Called once, by index.ts, when the script first runs. */
+export declare function captureBaseUrl(script?: Element | null | undefined): string;
+/** The url of one of the embed script's files, e.g. assetUrl("mermaid/mermaid.js"). */
+export declare function assetUrl(path: string): string;

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

@@ -0,0 +1,18 @@
+/** The attribute that marks the elements that the script added, with their chatbot's url. */
+export declare const AUTO_ATTRIBUTE = "data-smarter-chat-auto";
+export type EmbedConfig = Record<string, unknown>;
+declare global {
+    interface Window {
+        SmarterChatConfig?: EmbedConfig | EmbedConfig[];
+    }
+}
+/** The configurations of the script tag's data- attributes and of window.SmarterChatConfig, as attributes. */
+export declare function configurations(script: Element | null | undefined, globalConfig: EmbedConfig | EmbedConfig[] | null | undefined): Record<string, string>[];
+/**
+ * Adds a <smarter-chat> element for a configuration, unless the page has one for its chatbot already.
+ *
+ * @returns The new element, or null if none was added.
+ */
+export declare function mountChat(attributes: Record<string, string>, doc?: Document): HTMLElement | null;
+/** Adds the configurations' elements once the page's body exists. */
+export declare function autoMount(script: Element | null | undefined, globalConfig: EmbedConfig | EmbedConfig[] | null | undefined, doc?: Document): void;

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

@@ -0,0 +1,15 @@
+export declare const ASSETS_PLACEHOLDER = "__SMARTER_CHAT_ASSETS__/";
+export declare const FONT_STYLE_ID = "smarter-chat-embed-fonts";
+/** Adds css to the embed's stylesheet. Called by the modules that the embed build generates for css imports. */
+export declare function addCss(css: string): void;
+/** The embed's css, with the urls of its own files. */
+export declare function embedCss(): string;
+/** The @font-face rules of a stylesheet. */
+export declare function fontFaceRules(css: string): string[];
+/** Adds the @font-face rules of the css to the document's head, once. */
+export declare function hoistFontFaces(css: string, doc?: Document): void;
+/**
+ * Applies the css to a shadow root: as a constructable stylesheet, shared by every chat on the page, where the
+ * browser supports them, or else as a style element.
+ */
+export declare function applyCss(root: ShadowRoot, css: string): void;

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

@@ -0,0 +1,19 @@
+import { type EmbedOptionsResult } from "./options";
+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")[];
+    /** The element's options, from its attributes. */
+    get options(): EmbedOptionsResult;
+    /** Whether the launcher is open. */
+    get isOpen(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}
+/** Defines <smarter-chat>, unless the page already has, e.g. with another copy of the embed script. */
+export declare function defineElement(registry?: CustomElementRegistry): void;

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

@@ -0,0 +1,17 @@
+import { type EmbedConfig } from "./autoMount";
+import "./styles.css";
+/** The api of window.SmarterChat. */
+export interface SmarterChatEmbedApi {
+    version: string;
+    /** Opens the launchers, or the launcher of one chatbot, by its url. */
+    open: (chatbot?: string) => void;
+    close: (chatbot?: string) => void;
+    toggle: (chatbot?: string) => void;
+    /** Adds a chat to the page, as window.SmarterChatConfig does. */
+    mount: (config: EmbedConfig) => HTMLElement | null;
+}
+declare global {
+    interface Window {
+        SmarterChat?: SmarterChatEmbedApi;
+    }
+}

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

@@ -0,0 +1,2 @@
+/** The entry point of the embed script's separate build of mermaid, embed/mermaid/mermaid.js. See vite.config.ts. */
+export { default } from "mermaid";

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

@@ -0,0 +1 @@
+export declare const importMermaid: () => Promise<typeof import("mermaid")>;

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

@@ -0,0 +1,69 @@
+export type EmbedMode = "launcher" | "inline";
+export type EmbedPosition = "bottom-right" | "bottom-left";
+export interface EmbedOptions {
+    /** The url of the deployed LLMClient, e.g. https://support.3141-5926-5359.api.example.com/ */
+    chatbot: string;
+    /** A Smarter api key, for LLMClients that require one. It is public, as is everything in a web page. */
+    apiKey: string | null;
+    /** "launcher": a button in a corner of the page that opens the chat. "inline": the chat, in the page. */
+    mode: EmbedMode;
+    /** The launcher's corner. */
+    position: EmbedPosition;
+    /** Whether the launcher starts open. */
+    open: boolean;
+    /** The launcher's accessible name, and the chat panel's. */
+    label: string;
+    /** The launcher button's background color. */
+    color: string;
+    /** The width of the inline chat, or of the launcher's panel. */
+    width: string;
+    /** The height of the inline chat, or of the launcher's panel. */
+    height: string;
+    /** The launcher's z-index. */
+    zIndex: number;
+    /** The cookie in which the chat saves its session's key. */
+    sessionCookieName: string;
+    /** The path of the chat's cookies. "/" keeps one chat session across the website. */
+    cookiePath: string;
+    /** Display a running prompt's progress. */
+    streamProgress: boolean;
+    /** Log to the browser console. */
+    debug: boolean;
+}
+/** The result of reading the options: the options, or why they can't be used. */
+export type EmbedOptionsResult = {
+    options: EmbedOptions;
+    error: null;
+} | {
+    options: null;
+    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 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. */
+export declare function booleanOption(value: string | null | undefined, defaultValue: boolean): boolean;
+/** The url, if it is an http(s) url, normalized to end with a slash, else null. */
+export declare function chatbotUrl(value: string | null | undefined): string | null;
+/**
+ * The default session cookie of a chatbot: one per chatbot host, so that two chatbots on one website keep separate
+ * chat sessions, e.g. smarter_chat_support_3141_5926_5359_api_example_com.
+ */
+export declare function defaultSessionCookieName(chatbot: string): string;
+/**
+ * The options of a <smarter-chat> element.
+ *
+ * @param get Returns the value of an attribute, by its kebab-case name, or null if it is missing.
+ * @param defaultMode The mode, if the attributes don't say: "inline" for an element in the page, and "launcher"
+ *   for the element that the script tag adds.
+ */
+export declare function parseOptions(get: (name: (typeof OPTION_ATTRIBUTES)[number]) => string | null, defaultMode?: EmbedMode): EmbedOptionsResult;
+/** A camelCase name in kebab-case, e.g. apiKey to api-key. */
+export declare function kebabCase(name: string): string;
+/**
+ * The attributes of a configuration object, e.g. window.SmarterChatConfig's, or a script tag's dataset: kebab-case
+ * names, and string values. Values that are null, undefined, objects or functions are left out.
+ */
+export declare function configAttributes(config: Record<string, unknown>): Record<string, string>;

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

@@ -1,7 +1,8 @@
 /**
  * Cookie management for Smarter Chat: the Django CSRF cookie, which it reads, and the chat
  * session and debug cookies, which it sets for the page's path, so that each LLMClient's
- * workbench has its own chat session.
+ * workbench has its own chat session, or for the path that the cookie names, e.g. "/" for a chat
+ * that follows the visitor across a website.
  */
 import type { CookieMeta } from "../types";
 /**
@@ -12,6 +13,6 @@ import type { CookieMeta } from "../types";
 export declare function inCookieDomain(hostname: string, domain: string | null | undefined): boolean;
 /** The cookie's value: its preset value, else the browser's cookie, else defaultValue. */
 export declare function getCookie(cookie: CookieMeta, defaultValue?: string | null): string | null;
-/** Sets the cookie for the page's path, or deletes it when value is empty. */
+/** Sets the cookie for its path (by default, the page's), or deletes it when value is empty. */
 export declare function setCookie(cookie: CookieMeta, value: string | boolean | null | undefined): void;
-export declare function cookieMetaFactory(name: string, expiration: number | null, domain: string | undefined, value?: string | null): CookieMeta;
+export declare function cookieMetaFactory(name: string, expiration: number | null, domain: string | undefined, value?: string | null, path?: string | null): CookieMeta;

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

@@ -0,0 +1,8 @@
+/**
+ * Imports mermaid, which lib/mermaid.ts does the first time that a message has a diagram.
+ *
+ * In the npm package and the web console, the page's bundler splits mermaid into chunks, which are downloaded only
+ * then. The embed script, a single classic script, can't be split that way, so its build replaces this module with
+ * src/embed/mermaidImport.ts, which imports a separate build of mermaid from beside the script. See vite.config.ts.
+ */
+export declare const importMermaid: () => Promise<typeof import("mermaid")>;

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

@@ -54,6 +54,8 @@ export interface CookieMeta {
     domain: string;
     /** A value to use instead of the cookie's. */
     value: string | null;
+    /** The path that Smarter Chat sets the cookie for. Empty or missing means the page's path. */
+    path?: string | null;
 }
 export interface ChatCookies {
     csrfCookie: CookieMeta;
@@ -87,6 +89,11 @@ export interface SmarterChatProps {
     /** The name of the cookie in which Smarter Chat saves the chat session's key. */
     sessionCookieName?: string;
     sessionCookieExpiration?: number;
+    /**
+     * The path of the session and debug cookies. By default, the page's path, so that each page has its own chat
+     * session. "/" keeps one chat session as the visitor moves from page to page of a website.
+     */
+    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. */

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@smarter.sh/ui-chat",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "chatbot React.js component for the https://smarter.sh declarative, plugin-based AI resource management platform.",
   "homepage": "https://smarter.sh",
   "type": "module",
   "main": "./dist/smarter-chat-library.umd.js",
   "module": "./dist/smarter-chat-library.es.js",
   "types": "./dist/types/src/index.d.ts",
+  "jsdelivr": "./dist/embed.js",
+  "unpkg": "./dist/embed.js",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -14,7 +16,9 @@
       "require": "./dist/smarter-chat-library.umd.js"
     },
     "./dist/ui-chat.css": "./dist/ui-chat.css",
-    "./style.css": "./dist/ui-chat.css"
+    "./style.css": "./dist/ui-chat.css",
+    "./embed": "./dist/embed.js",
+    "./dist/embed.js": "./dist/embed.js"
   },
   "files": [
     "dist"
@@ -61,10 +65,12 @@
     "typecheck": "tsc -b",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run build:lib",
+    "prepublishOnly": "npm run build:lib && npm run build:embed",
     "coverage": "vitest run --coverage --config vitest.coverage.config.ts",
     "format": "prettier --write .",
-    "format:check": "prettier --check ."
+    "format:check": "prettier --check .",
+    "build:embed": "vite build --mode embed && vite build --mode embed-mermaid",
+    "check:dist": "node scripts/check-dist.mjs"
   },
   "dependencies": {
     "@chatscope/chat-ui-kit-react": "^2.1.1",