@datalayer/agent-runtimes 1.3.80 → 1.3.82

package/lib/loop/embed/AppEmbed.d.ts

@@ -1,9 +1,15 @@
 import type { CSSProperties, JSX, ReactNode } from 'react';
 import type { PluginRef } from '@datalayer/reactor';
-import type { AppAccent, AppEmbedMode, AppSpec } from '../../types/agentspecs';
-import { type AppInstance } from '../apps/AppRenderer';
+import type { AppAccent, AppEmbedMode, AppSpec, AppThemeVariant } from '../../types/agentspecs';
+import type { ResumedThread, ThemeOverrides } from '../../types/chat';
+import type { AssistantCharacter } from '../../chat/assistant/characters';
+import type { AssistantCharacterData } from '../../chat/assistant/formats/types';
+import type { PresenceState } from '../../chat/presence/presenceStatus';
+import { type AppInstance, type AppRendererProps } from '../apps/AppRenderer';
+import type { ChatSaid } from '../plugins/chat';
 import { type AssistantCharacterChosen } from '../plugins/assistant-characters';
 import { type EmbedColorMode } from './embedConfig';
+import { type AppEmbedHost } from './hostBridge';
 export type AppEmbedProps = {
     /** The application. */
     app: AppSpec;
@@ -11,7 +17,10 @@ export type AppEmbedProps = {
     mode?: AppEmbedMode;
     /** The host's accent; the application's own by default. */
     accent?: AppAccent;
-    /** Light, dark, or the visitor's system. */
+    /**
+     * Light, dark, or the visitor's system: the host's, else the one the
+     * Appspec names (`interface.theme.mode`, T-30), else the system's.
+     */
     colorMode?: EmbedColorMode;
     /** The host's face, a CSS font family; the theme's by default. */
     font?: string;
@@ -44,6 +53,54 @@ export type AppEmbedProps = {
      * element passes none.
      */
     plugins?: PluginRef[];
+    /**
+     * What the page gives the application (LOOP D-10): the values it passes,
+     * its functions, and what it is told — read for the names the Appspec
+     * gives under `deployment.embedded.host`.
+     */
+    host?: AppEmbedHost;
+    /**
+     * Keep the visit's session in the host's storage, and pick it up again
+     * after the page reloads (LOOP D-13); on by default. Off, the session
+     * lasts as long as the page.
+     */
+    resume?: boolean;
+};
+/** What `useEmbedSession` gives the conversation. */
+export type EmbedSession = {
+    /** Whether the kept session was asked for: nothing is drawn before. */
+    ready: boolean;
+    /** The thread the chat goes on with; none where no session is kept. */
+    thread?: ResumedThread;
+    /** Said once, when the session kept is gone: a new one started. */
+    said?: string;
+};
+/**
+ * The visit's session, kept and picked up again (LOOP D-13): on the host's
+ * server with an embed token that names its visit, the session the chat
+ * opens is kept under the application and the visit — in the host's
+ * storage unless `resume` is off, in memory always — and, when the
+ * application is drawn again (the page reloaded, or a token renewed for the
+ * visit), its conversation is asked for and drawn again. One that is gone
+ * or refused is forgotten, said once, and a new one starts. Elsewhere —
+ * on a Datalayer runtime, without a token — nothing is kept.
+ */
+export declare function useEmbedSession({ app, serverUrl, embedToken, resume, }: {
+    app: Pick<AppSpec, 'id' | 'name'>;
+    serverUrl?: string;
+    embedToken?: string;
+    resume?: boolean;
+}): EmbedSession;
+/**
+ * The page and the application talking (LOOP D-10): the tools of the host
+ * the Appspec names, given to its agent through a chat-extras plugin made
+ * once — the page's newest values and functions read at each call — and
+ * `message` said to the page when an answer is done.
+ */
+export declare function useHostBridge(app: AppSpec, host: AppEmbedHost | undefined): {
+    plugins: PluginRef[];
+    onPresence: (state: PresenceState) => void;
+    onSaying: (said: ChatSaid) => void;
 };
 /**
  * The character the assistant mode draws (T-24, D-07): the application's own
@@ -54,13 +111,50 @@ export type AppEmbedProps = {
 export declare function embedAssistantCharacter(app: AppSpec, plugins?: PluginRef[]): AssistantCharacterChosen;
 /** What a floating application says to a visitor Datalayer does not know. */
 export declare const signedOutSentence: (app: Pick<AppSpec, "name">) => string;
-/** The `loop` theme, with the application's (or the host's) accent and face. */
-export declare function EmbedThemed({ accent, colorMode, font, children, style, }: {
+export type AppFloatingProps = {
+    app: AppSpec;
+    view: 'floating-small' | 'panel' | 'assistant';
+    colorMode: 'light' | 'dark';
+    /** The theme it is drawn in (T-30); the page's when unsaid. */
+    themeVariant?: AppThemeVariant;
+    /** The accent and face inside the conversation. */
+    themeOverrides: ThemeOverrides;
+    /** The assistant's character, in the assistant mode. */
+    character?: AssistantCharacter | AssistantCharacterData;
+    /** The host's agent-runtimes server, when it names one. */
+    serverUrl?: string;
+    instance?: AppInstance;
+    /** The visit's embed token, on the host's server (R-20). */
+    embedToken?: string;
+    /**
+     * What else the host gives the application's `AppRenderer`: Datalayer's
+     * own page at an application's address (T-21) passes the UI plugins its
+     * organization turned off, the visitors' runtime and the one kept on.
+     */
+    renderer?: Partial<Pick<AppRendererProps, 'pluginsOff' | 'datalayerVisitors' | 'datalayerKept'>>;
+    /** What the page gives the application (D-10). */
+    host?: AppEmbedHost;
+    /** The visit's session, picked up again after a reload (D-13). */
+    session?: EmbedSession;
+};
+/**
+ * The bubble, the panel and the assistant: `ChatFloating`'s chrome in that
+ * mode — the button, its blink and its balloon, the panel at the edge, the
+ * character dragged about and sent away — holding the application as
+ * `AppRenderer` draws it inline (R-01): its kind's preset, its layout, its
+ * agent created with its spec and spoken to at its session endpoint (R-04).
+ * The workspace tells the chrome what the application is doing and what it
+ * last said (`onPresence`, `onSaying`).
+ */
+export declare function AppFloating({ app, view, colorMode, themeVariant, themeOverrides, character, serverUrl, instance, embedToken, renderer, host, session, }: AppFloatingProps): JSX.Element;
+/** The application's theme (`loop` unless it names one), with its (or the host's) accent and face. */
+export declare function EmbedThemed({ accent, colorMode, font, variant, children, style, }: {
     accent: AppAccent;
     colorMode: 'light' | 'dark';
     font?: string;
+    variant: AppThemeVariant;
     children: ReactNode;
     style?: CSSProperties;
 }): JSX.Element;
-export declare function AppEmbed({ app, mode, accent, colorMode, font, serverUrl, instance, embedToken, height, ownPortal, plugins, }: AppEmbedProps): JSX.Element;
+export declare function AppEmbed({ app, mode, accent, colorMode, font, serverUrl, instance, embedToken, height, ownPortal, plugins, host, resume, }: AppEmbedProps): JSX.Element;
 export default AppEmbed;

package/lib/loop/embed/AppEmbed.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
@@ -33,18 +33,145 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * host may override with the face and the mode (D-11) — around the
  * conversation and inside it, where the chat sets its theme again.
  *
+ * On the host's server with the visit's embed token, its session is kept
+ * in the host's storage and picked up again after the page reloads (D-13,
+ * `useEmbedSession`): its conversation drawn again, and gone on with.
+ *
  * @module loop/embed/AppEmbed
  */
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { Text, registerPortalRoot } from '@primer/react';
 import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
 import { FluentEmoji } from '@datalayer/core/lib/components/emoji';
-import { DatalayerThemeProvider, loopTheme } from '@datalayer/primer-addons';
+import { DatalayerThemeProvider, getThemeConfig, } from '@datalayer/primer-addons';
+import { generateMessageId } from '../../types/messages';
 import { ChatFloating } from '../../chat/ChatFloating';
-import { AppRenderer } from '../apps/AppRenderer';
+import { AppRenderer, } from '../apps/AppRenderer';
 import { AssistantCharactersPlugin, assistantCharacterFor, assistantCharactersFrom, } from '../plugins/assistant-characters';
 import { floatingViewOf } from './embedConfig';
+import { createChatExtrasPlugin } from '../plugins/chat-extras';
+import { hostFrontendTools } from './hostBridge';
 import { embedThemeOverrides, embedThemeStyles } from './embedTheme';
+import { embedSessionKey, reattachSession, sessionGoneSentence, sessionKeeper, visitOfToken, } from './embedSession';
+/**
+ * The visit's session, kept and picked up again (LOOP D-13): on the host's
+ * server with an embed token that names its visit, the session the chat
+ * opens is kept under the application and the visit — in the host's
+ * storage unless `resume` is off, in memory always — and, when the
+ * application is drawn again (the page reloaded, or a token renewed for the
+ * visit), its conversation is asked for and drawn again. One that is gone
+ * or refused is forgotten, said once, and a new one starts. Elsewhere —
+ * on a Datalayer runtime, without a token — nothing is kept.
+ */
+export function useEmbedSession({ app, serverUrl, embedToken, resume = true, }) {
+    const visit = serverUrl && embedToken ? visitOfToken(embedToken) : undefined;
+    const key = visit ? embedSessionKey(app.id, visit) : undefined;
+    const keeper = useMemo(() => sessionKeeper({ persist: resume }), [resume]);
+    // What was found, for the token it was found with: a renewed token asks again.
+    const [found, setFound] = useState();
+    useEffect(() => {
+        if (!key || !serverUrl || !embedToken) {
+            return undefined;
+        }
+        let cancelled = false;
+        const onStarted = (uid) => {
+            keeper.keep(key, uid);
+            setFound(before => before?.said ? { ...before, said: undefined } : before);
+        };
+        const fresh = (said) => setFound({
+            token: embedToken,
+            thread: { id: generateMessageId(), messages: [], onStarted },
+            ...(said ? { said } : {}),
+        });
+        const kept = keeper.read(key);
+        if (!kept) {
+            fresh();
+            return undefined;
+        }
+        void reattachSession({ serverUrl, uid: kept, token: embedToken }).then(reattached => {
+            if (cancelled) {
+                return;
+            }
+            if (reattached.kind === 'resumed') {
+                setFound({
+                    token: embedToken,
+                    thread: { id: kept, messages: reattached.messages, onStarted },
+                });
+                return;
+            }
+            keeper.forget(key);
+            fresh(sessionGoneSentence(app.name));
+        });
+        return () => {
+            cancelled = true;
+        };
+        // The application's name is only said.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, serverUrl, embedToken, keeper]);
+    if (!key) {
+        return { ready: true };
+    }
+    if (!found || found.token !== embedToken) {
+        return { ready: false };
+    }
+    return {
+        ready: true,
+        thread: found.thread,
+        ...(found.said ? { said: found.said } : {}),
+    };
+}
+/** What the embed says once of its session, above the conversation. */
+function SessionSaid({ said }) {
+    return said ? (_jsx(Text, { as: "p", role: "status", sx: { px: 3, py: 2, m: 0, fontSize: 1 }, children: said })) : null;
+}
+/** No plugins for the renderer: one array, so that it never reads as a change. */
+const NO_HOST_PLUGINS = [];
+/**
+ * The page and the application talking (LOOP D-10): the tools of the host
+ * the Appspec names, given to its agent through a chat-extras plugin made
+ * once — the page's newest values and functions read at each call — and
+ * `message` said to the page when an answer is done.
+ */
+export function useHostBridge(app, host) {
+    const hostRef = useRef(host);
+    hostRef.current = host;
+    const handle = useMemo(() => createChatExtrasPlugin(), []);
+    const bridge = app.deployment.embedded?.host;
+    const key = JSON.stringify([bridge ?? null, app.rules, app.connections]);
+    useEffect(() => {
+        handle.setExtras({
+            frontendTools: hostFrontendTools(app, () => hostRef.current ?? {}),
+        });
+        // The tools change with what the Appspec names, and the rules that decide them.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handle, key]);
+    const plugins = useMemo(() => (bridge ? [handle.plugin] : NO_HOST_PLUGINS), [bridge, handle]);
+    const said = useRef({ answering: false });
+    const before = useRef('idle');
+    const told = useRef('');
+    const onSaying = useCallback((next) => {
+        said.current = next;
+    }, []);
+    const onPresence = useCallback((state) => {
+        const was = before.current;
+        before.current = state;
+        const done = state === 'idle' || state === 'waiting';
+        const saying = said.current.saying;
+        if (done &&
+            was !== 'idle' &&
+            was !== 'waiting' &&
+            said.current.answering &&
+            saying &&
+            saying.id !== told.current) {
+            told.current = saying.id;
+            hostRef.current?.onEvent?.({
+                type: 'message',
+                detail: { id: saying.id, text: saying.markdown || saying.text },
+            });
+        }
+    }, []);
+    return { plugins, onPresence, onSaying };
+}
 /** No host plugins: one array, so that it never reads as a change. */
 const NO_PLUGINS = [];
 /**
@@ -72,25 +199,35 @@ function Face({ emoji }) {
  * The workspace tells the chrome what the application is doing and what it
  * last said (`onPresence`, `onSaying`).
  */
-function FloatingApp({ app, view, colorMode, themeOverrides, character, serverUrl, instance, embedToken, }) {
+export function AppFloating({ app, view, colorMode, themeVariant, themeOverrides, character, serverUrl, instance, embedToken, renderer, host, session, }) {
     const [presence, setPresence] = useState('idle');
     const [said, setSaid] = useState({ answering: false });
+    const bridge = useHostBridge(app, host);
+    const onPresence = useCallback((state) => {
+        setPresence(state);
+        bridge.onPresence(state);
+    }, [bridge.onPresence]);
+    const onSaying = useCallback((next) => {
+        setSaid(next);
+        bridge.onSaying(next);
+    }, [bridge.onSaying]);
     const welcome = app.interface.welcome || app.description;
     // A runtime is somebody's to pay for: on Datalayer, only for a visitor
     // Datalayer knows — said, and nothing launched, for one it does not.
     const token = useIAMStore(state => state.token);
-    const signedOut = !serverUrl && !token;
+    // Signed out on the visitors' runtime (R-30) is somebody's too.
+    const signedOut = !serverUrl && !token && !renderer?.datalayerVisitors;
     return (_jsx(ChatFloating, { defaultViewMode: view, ...(character ? { assistantCharacter: character } : {}), ...(app.interface.balloon
             ? { balloonDisplay: app.interface.balloon }
             : {}), title: app.name, description: welcome, brandIcon: _jsx(Face, { emoji: app.emoji }), buttonIcon: _jsx(Face, { emoji: app.emoji }), buttonTooltip: `Talk to ${app.name}`, colorMode: colorMode, useStore: false, conversation: {
-            body: signedOut ? (_jsx(Text, { as: "p", role: "status", sx: { p: 3, m: 0, fontSize: 1 }, children: signedOutSentence(app) })) : (_jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), ...(serverUrl && embedToken ? { embedToken } : {}), instance: instance, 
-                // The host's accent and face over the application's own, inside
-                // its conversation too, in the embed's mode.
-                themeOverrides: themeOverrides, colorMode: colorMode, 
-                // The window draws its face, its name and close.
-                hideChatHeader: true, 
-                // Mounted closed: the caret goes in when the window opens.
-                autoFocusPrompt: false, onPresence: setPresence, onSaying: setSaid })),
+            body: signedOut ? (_jsx(Text, { as: "p", role: "status", sx: { p: 3, m: 0, fontSize: 1 }, children: signedOutSentence(app) })) : session && !session.ready ? null : (_jsxs(_Fragment, { children: [_jsx(SessionSaid, { said: session?.said }), _jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), ...(serverUrl && embedToken ? { embedToken } : {}), instance: instance, 
+                        // The host's accent and face over the application's own, inside
+                        // its conversation too, in the embed's mode.
+                        themeOverrides: themeOverrides, colorMode: colorMode, ...(themeVariant ? { themeVariant } : {}), 
+                        // The window draws its face, its name and close.
+                        hideChatHeader: true, 
+                        // Mounted closed: the caret goes in when the window opens.
+                        autoFocusPrompt: false, onPresence: onPresence, onSaying: onSaying, plugins: bridge.plugins, ...(session?.thread ? { thread: session.thread } : {}), ...renderer })] })),
             presence,
             saying: said.saying,
             answering: said.answering,
@@ -127,9 +264,9 @@ function useSystemMode() {
     }, [query]);
     return dark ? 'dark' : 'light';
 }
-/** The `loop` theme, with the application's (or the host's) accent and face. */
-export function EmbedThemed({ accent, colorMode, font, children, style, }) {
-    const themeStyles = useMemo(() => embedThemeStyles({ accent, font }), [accent, font]);
+/** The application's theme (`loop` unless it names one), with its (or the host's) accent and face. */
+export function EmbedThemed({ accent, colorMode, font, variant, children, style, }) {
+    const themeStyles = useMemo(() => embedThemeStyles({ accent, font, variant }), [accent, font, variant]);
     return (
     /*
      * Marked as themed above the provider, so that the provider counts
@@ -137,15 +274,21 @@ export function EmbedThemed({ accent, colorMode, font, children, style, }) {
      * alone: it would otherwise write the theme's tokens, colour and face on
      * the host's page (T-13). A wrapper of no box.
      */
-    _jsx("div", { "data-color-mode": colorMode, style: { display: 'contents' }, children: _jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: loopTheme, themeStyles: themeStyles, baseStyles: style, children: children }) }));
+    _jsx("div", { "data-color-mode": colorMode, style: { display: 'contents' }, children: _jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: getThemeConfig(variant).primerTheme, themeStyles: themeStyles, baseStyles: style, children: children }) }));
 }
-export function AppEmbed({ app, mode, accent, colorMode = 'auto', font, serverUrl, instance, embedToken, height = 640, ownPortal = false, plugins = NO_PLUGINS, }) {
+export function AppEmbed({ app, mode, accent, colorMode, font, serverUrl, instance, embedToken, height = 640, ownPortal = false, plugins = NO_PLUGINS, host, resume = true, }) {
+    const bridge = useHostBridge(app, host);
+    const session = useEmbedSession({ app, serverUrl, embedToken, resume });
     const system = useSystemMode();
-    const resolvedMode = colorMode === 'auto' ? system : colorMode;
+    // The theme the application names (T-30), `loop` when none; its mode
+    // the host's, else the application's, else the visitor's system's.
+    const variant = app.interface.theme?.variant ?? 'loop';
+    const asked = colorMode ?? app.interface.theme?.mode ?? 'auto';
+    const resolvedMode = asked === 'auto' ? system : asked;
     const shownAs = mode ?? app.deployment.embedded?.mode ?? 'inline';
     const view = floatingViewOf(shownAs);
     const worn = accent ?? app.interface.accent;
-    const themeOverrides = useMemo(() => embedThemeOverrides({ accent: worn, font }), [worn, font]);
+    const themeOverrides = useMemo(() => embedThemeOverrides({ accent: worn, font, variant }), [worn, font, variant]);
     const named = app.interface.assistant;
     const assistant = useMemo(() => view === 'assistant' ? embedAssistantCharacter(app, plugins) : undefined, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -154,13 +297,15 @@ export function AppEmbed({ app, mode, accent, colorMode = 'auto', font, serverUr
         return (_jsx("p", { role: "status", className: "datalayer-app-said", children: assistant.problem }));
     }
     const character = assistant?.character;
-    return (_jsxs(EmbedThemed, { accent: worn, colorMode: resolvedMode, font: font, style: view
+    return (_jsxs(EmbedThemed, { accent: worn, colorMode: resolvedMode, font: font, variant: variant, style: view
             ? // Floating: nothing in the page's flow, nothing painted behind.
                 { backgroundColor: 'transparent' }
-            : { height, display: 'flex', flexDirection: 'column' }, children: [ownPortal ? _jsx(OwnPortalRoot, {}) : null, view ? (_jsx(FloatingApp, { app: app, view: view, serverUrl: serverUrl, instance: instance, embedToken: embedToken, colorMode: resolvedMode, themeOverrides: themeOverrides, character: character })) : (_jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), ...(serverUrl && embedToken ? { embedToken } : {}), instance: instance, 
-                // The host's accent and face over the application's own, inside
-                // its conversation too, in the embed's mode: the host's or its
-                // visitor's system's, not a Datalayer setting.
-                themeOverrides: themeOverrides, colorMode: resolvedMode }))] }));
+            : { height, display: 'flex', flexDirection: 'column' }, children: [ownPortal ? _jsx(OwnPortalRoot, {}) : null, view ? (_jsx(AppFloating, { app: app, view: view, serverUrl: serverUrl, instance: instance, embedToken: embedToken, colorMode: resolvedMode, themeVariant: variant, themeOverrides: themeOverrides, character: character, host: host, session: session })) : !session.ready ? null : (_jsxs(_Fragment, { children: [_jsx(SessionSaid, { said: session.said }), _jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), ...(serverUrl && embedToken ? { embedToken } : {}), instance: instance, 
+                        // The host's accent and face over the application's own, inside
+                        // its conversation too, in the embed's mode: the host's or its
+                        // visitor's system's, not a Datalayer setting.
+                        themeOverrides: themeOverrides, colorMode: resolvedMode, themeVariant: variant, 
+                        // What the page gives it, and what it tells the page (D-10).
+                        plugins: bridge.plugins, onPresence: bridge.onPresence, onSaying: bridge.onSaying, ...(session.thread ? { thread: session.thread } : {}) })] }))] }));
 }
 export default AppEmbed;

package/lib/loop/embed/LoopEmbed.js

@@ -74,6 +74,8 @@ export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions,
         preset.presence?.welcome,
         preset.presence?.paused,
         preset.showTokenUsage,
+        // The thread a reloaded embed goes on with, by its id (D-13).
+        preset.thread?.id,
         // By its content: an application's spec written inline is a new object each render.
         JSON.stringify(preset.datalayerCreatePayload ?? null),
         JSON.stringify(preset.datalayerVisitors ?? null),

package/lib/loop/embed/element.js

@@ -29,16 +29,32 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * drawn in it, so nothing of the application's styles reaches the page and
  * nothing of the page's reaches the application.
  *
+ * The page and the application talk (LOOP D-10), for the names its Appspec
+ * gives under `deployment.embedded.host`: the page sets `element.context`
+ * (`{ user, page, …its own }`), which its agent reads with `host_context`,
+ * and `element.functions` (`{ open_ticket: async args => … }`), which its
+ * agent calls as `host_open_ticket`, each as the rule naming it decides; the
+ * element raises `message` when the application has answered and `action`
+ * when it called a function of the page, beside `decision` and
+ * `token-expired`.
+ *
+ * On the host's server (`server`) with the visit's embed token, the
+ * session the application opens is kept in the page's `localStorage`, under
+ * the application and the visit its token names, and picked up again after
+ * the page reloads — its conversation drawn again (LOOP D-13); a token
+ * renewed for the visit redraws the application on the same session.
+ * `resume="false"` keeps nothing in the page's storage.
+ *
  * @module loop/embed/element
  */
 import { createRoot } from 'react-dom/client';
 import { StyleSheetManager } from 'styled-components';
-import { loopThemeStyles } from '@datalayer/primer-addons';
+import { getThemeConfig } from '@datalayer/primer-addons';
 import { coreStore } from '@datalayer/core/lib/state/substates/CoreState';
 import { parseAppspec } from '../apps/appspec';
 import { readAppspecYaml } from '../apps/yaml';
 import { AppEmbed, embedAssistantCharacter } from './AppEmbed';
-import { EMBED_HOST_VARIABLES, EMBED_OBSERVED_ATTRIBUTES, EMBED_TAG, EmbedAttributeError, embedLookOf, inlineHeightOf, } from './embedConfig';
+import { EMBED_HOST_VARIABLES, EMBED_OBSERVED_ATTRIBUTES, EMBED_TAG, EmbedAttributeError, embedLookOf, inlineHeightOf, resumeOf, } from './embedConfig';
 import { embedShadowCss } from './embedTheme';
 /** What the framed run page and the element say to each other. */
 export const EMBED_MESSAGES = {
@@ -174,6 +190,36 @@ export function defineDatalayerAppElement(options = {}) {
         frame = null;
         source = null;
         loading = 0;
+        passed = {};
+        /** One object, its functions replaced in place: the host below holds it. */
+        offered = {};
+        /** What the page gives the application, read at each call (D-10). */
+        host = {
+            context: () => this.passed,
+            functions: this.offered,
+            onEvent: event => this.dispatchEvent(new CustomEvent(event.type, {
+                detail: event.detail,
+                bubbles: true,
+                composed: true,
+            })),
+        };
+        /** The values the page passes: `user`, `page`, its own (D-10). */
+        get context() {
+            return this.passed;
+        }
+        set context(value) {
+            this.passed = { ...(value ?? {}) };
+        }
+        /** The page's functions the application may call, by name (D-10). */
+        get functions() {
+            return this.offered;
+        }
+        set functions(value) {
+            for (const name of Object.keys(this.offered)) {
+                delete this.offered[name];
+            }
+            Object.assign(this.offered, value ?? {});
+        }
         constructor() {
             super();
             this.attachShadow({ mode: 'open' });
@@ -210,7 +256,7 @@ export function defineDatalayerAppElement(options = {}) {
                 return;
             }
             // How it looks is drawn again; what it is, read again.
-            if (['mode', 'accent', 'theme', 'font', 'height'].includes(name)) {
+            if (['mode', 'accent', 'theme', 'font', 'height', 'resume'].includes(name)) {
                 this.draw();
                 return;
             }
@@ -355,8 +401,10 @@ export function defineDatalayerAppElement(options = {}) {
                 return;
             }
             let look;
+            let resume;
             try {
                 look = embedLookOf(this.inputs(), source.app);
+                resume = resumeOf(this.getAttribute('resume'));
             }
             catch (error) {
                 this.say(error.message);
@@ -372,13 +420,18 @@ export function defineDatalayerAppElement(options = {}) {
                 }
             }
             this.setAttribute('data-embed-mode', look.mode);
-            const shadow = this.skeleton(loopThemeStyles.css);
+            // The theme's own stylesheet: `loop`'s, or the one the application
+            // names (T-30).
+            const shadow = this.skeleton(getThemeConfig(look.variant).themeStyles.css);
             const mount = document.createElement('div');
             mount.className = 'datalayer-app-root';
             shadow.appendChild(mount);
             this.root = createRoot(mount);
             const server = this.getAttribute('server') || undefined;
-            this.root.render(_jsx(StyleSheetManager, { target: shadow, children: _jsx(AppEmbed, { app: source.app, mode: look.mode, accent: look.accent, colorMode: look.colorMode, font: look.font, serverUrl: server, ...(server && this.token ? { embedToken: this.token } : {}), height: inlineHeightOf(this.getAttribute('height')), ownPortal: true }) }));
+            this.root.render(_jsx(StyleSheetManager, { target: shadow, children: _jsx(AppEmbed, { app: source.app, mode: look.mode, accent: look.accent, colorMode: look.colorMode, font: look.font, serverUrl: server, ...(server && this.token ? { embedToken: this.token } : {}), height: inlineHeightOf(this.getAttribute('height')), ownPortal: true, host: this.host, 
+                    // The visit's session kept in the page's storage, and picked
+                    // up again after a reload, unless the host says not (D-13).
+                    resume: resume }) }));
         }
         onMessage(event) {
             if (!this.frame || event.source !== this.frame.contentWindow) {

package/lib/loop/embed/embedConfig.d.ts

@@ -11,7 +11,7 @@
  *
  * @module loop/embed/embedConfig
  */
-import type { AppAccent, AppEmbedMode, AppSpec } from '../../types/agentspecs';
+import type { AppAccent, AppEmbedMode, AppSpec, AppThemeVariant } from '../../types/agentspecs';
 /** The element's name: the one a host writes. */
 export declare const EMBED_TAG = "datalayer-app";
 /** Where the script is served on a Datalayer origin; the stylesheet beside it. */
@@ -33,6 +33,7 @@ export declare const EMBED_ATTRIBUTES: {
     readonly server: "An agent-runtimes server the application’s agent runs on; a Datalayer runtime by default.";
     readonly api: "Datalayer’s API, where an application is read with its token; the platform’s by default.";
     readonly height: "The height of an inline application, in pixels; 640 by default.";
+    readonly resume: "true or false: whether a visit’s conversation is picked up again after the page reloads, kept in the page’s storage; true by default.";
 };
 export type EmbedAttribute = keyof typeof EMBED_ATTRIBUTES;
 /** Every attribute the element watches. */
@@ -86,6 +87,8 @@ export type EmbedLook = {
     colorMode: EmbedColorMode;
     /** The host's face; empty for the theme's own. */
     font: string;
+    /** The theme the application names (T-30); `loop` when it names none. */
+    variant: AppThemeVariant;
 };
 /**
  * What the element shows and how, from what the host wrote and what the
@@ -94,6 +97,12 @@ export type EmbedLook = {
  * sentence (`EmbedAttributeError`), never quietly replaced.
  */
 export declare function embedLookOf(inputs: EmbedInputs, app?: Pick<AppSpec, 'interface' | 'deployment'>): EmbedLook;
+/**
+ * Whether a visit's conversation is picked up again after a reload (LOOP
+ * D-13): on unless the host writes `resume="false"`. Anything else is
+ * refused in a sentence.
+ */
+export declare function resumeOf(value: string | null | undefined): boolean;
 /** The height of an inline application, in pixels. */
 export declare function inlineHeightOf(value: string | null | undefined): number;
 /** What a snippet says beside the application's id. */

package/lib/loop/embed/embedConfig.js

@@ -24,6 +24,7 @@ export const EMBED_ATTRIBUTES = {
     server: 'An agent-runtimes server the application’s agent runs on; a Datalayer runtime by default.',
     api: 'Datalayer’s API, where an application is read with its token; the platform’s by default.',
     height: 'The height of an inline application, in pixels; 640 by default.',
+    resume: 'true or false: whether a visit’s conversation is picked up again after the page reloads, kept in the page’s storage; true by default.',
 };
 /** Every attribute the element watches. */
 export const EMBED_OBSERVED_ATTRIBUTES = Object.keys(EMBED_ATTRIBUTES);
@@ -105,9 +106,19 @@ export function embedLookOf(inputs, app) {
         'green';
     const colorMode = oneOf(attributes.theme, EMBED_COLOR_MODES, 'a theme') ??
         oneOf(variables.theme, EMBED_COLOR_MODES, 'a theme') ??
+        app?.interface?.theme?.mode ??
         'auto';
     const font = checkedFont(attributes.font) || checkedFont(variables.font);
-    return { mode, accent, colorMode, font };
+    const variant = app?.interface?.theme?.variant ?? 'loop';
+    return { mode, accent, colorMode, font, variant };
+}
+/**
+ * Whether a visit's conversation is picked up again after a reload (LOOP
+ * D-13): on unless the host writes `resume="false"`. Anything else is
+ * refused in a sentence.
+ */
+export function resumeOf(value) {
+    return (oneOf(value, ['true', 'false'], 'a value of resume') !== 'false');
 }
 /** The height of an inline application, in pixels. */
 export function inlineHeightOf(value) {