@datalayer/agent-runtimes 1.3.83 → 1.3.85

package/lib/loop/apps/AppRenderer.js

@@ -33,6 +33,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   address and embedded;
  * - its **frame**, when the host asks (`frame`): the `window-frame` plugin's
  *   window, its title the application's face and name;
+ * - its **language** (LOOP P-26): what a person reads of it — its name,
+ *   welcome, starters, settings, commands, modes and profiles — in the first
+ *   language they prefer that its Appspec is translated into (`language`,
+ *   else the browser's), its own words otherwise (`translatedAppspec`);
+ *   what it does is the same in every language;
  * - its **sidebar**, when the host asks (`sidebar`, R-01b): its rules and
  *   the approvals waiting for the person (`app-rules`), what it did
  *   (`app-activity`), and its computer, live (`app-computer`, R-23), beside
@@ -52,14 +57,18 @@ import { CANVAS_BLOCK_PLUGINS, canvasBlocksPluginName, } from '../plugins/canvas
 import { LoopEmbed } from '../embed/LoopEmbed';
 import { dumpAppspec } from './appspec';
 import { defineAppActivityPlugin } from '../plugins/app-activity';
+import { AppElementsPlugin } from '../plugins/app-elements';
+import { defineAppComponentsPlugin, hasCustomComponents, } from '../plugins/app-components';
 import { defineAppComputerPlugin } from '../plugins/app-computer';
 import { defineAppRulesPlugin } from '../plugins/app-rules';
-import { defineAppComposerPlugin } from './AppComposer';
+import { defineAppComposerPlugin, needsAppComposer, startersAsOpeners, } from './AppComposer';
 import { modeEffect } from './composer';
+import { preferredLanguages, translatedAppspec } from './language';
 import { defineAppFeedbackPlugin } from './AppFeedback';
 import { defineAppKeptPlugin } from './AppKept';
 import { keepsFeedback } from './feedback';
 import { keptBeforeFirstMessage } from './kept';
+import { ChatLanguage } from '../../chat/ChatLanguage';
 /** The id of an agent or a Cog, without its version. */
 export const agentIdOf = (app) => {
     const reference = app.agent || app.team;
@@ -80,14 +89,16 @@ export const agentIdOf = (app) => {
  * An application run by a team is not supported in the workspace yet: a team
  * is not an agent spec, and is refused here rather than launched as one.
  */
-export function defineAppPlugin(app) {
+export function defineAppPlugin(app, shown = app) {
     if (!app.agent) {
         throw new Error(`“${app.name}” is run by a team, which the workspace does not run as an application yet.`);
     }
     return defineAgentCapacityPlugin({
         key: `app-${app.id}`,
-        displayName: app.name,
-        description: app.description || `The ${app.name} application`,
+        // What a person reads is in their language (P-26); what it is created
+        // with is its own Appspec.
+        displayName: shown.name,
+        description: shown.description || `The ${shown.name} application`,
         specId: agentIdOf(app),
         emoji: app.emoji,
         createPayload: {
@@ -98,21 +109,21 @@ export function defineAppPlugin(app) {
             enable_codemode: Boolean(app.permissions?.computer?.shell),
             ...(app.model ? { model: app.model } : {}),
         },
-        suggestions: app.interface.starters.map(starter => ({
-            text: starter.label,
-            message: starter.message,
-        })),
+        // Its starters, each under its category (P-20); with profiles, the
+        // composer offers the profile's in their place.
+        suggestions: startersAsOpeners(shown.interface.starters),
         // In the page, the agent is told what a runtime tells it: its own
         // spec's prompt, then the application's instructions; on the
         // application's model when it names one (`loop/apps/agent`).
         instructions: app.instructions,
         model: app.model,
-        // Its modes (LOOP P-19), as the session API applies them: the
-        // instructions of the options chosen and the model one names, for the
-        // run they are sent with.
-        ...((app.interface.modes ?? []).length > 0
+        // Its modes and its profiles (LOOP P-19, P-20), as the session API
+        // applies them: the profile's instructions and those of the options
+        // chosen, and the model one names, for the run they are sent with.
+        ...((app.interface.modes ?? []).length > 0 ||
+            (app.interface.profiles ?? []).length > 0
             ? {
-                modeEffect: (chosen) => modeEffect(app, chosen),
+                modeEffect: (chosen, profile) => modeEffect(app, chosen, profile),
             }
             : {}),
     });
@@ -157,7 +168,9 @@ export function appLayoutOptions(app) {
  *   but those of the UI plugins its organization turned off (`pluginsOff`),
  *   whose contributions are the blocks it may draw (R-01b); a thumb and a
  *   comment on each answer when its record keeps feedback (V-18); its
- *   commands in the composer's `/` menu and its modes beside it (P-19); what it
+ *   commands in the composer's `/` menu and its modes beside it (P-19); the
+ *   side panel and the pages its code opens (`app-elements`, P-18); the
+ *   components its developer wrote (`app-components`, P-17); what it
  *   keeps and for how long, under its prompt before the first message, when
  *   `kept` says it (R-31); with
  *   `sidebar`, its rules and approvals card, its activity feed and its
@@ -185,19 +198,21 @@ export function appPreset(app, options = {}) {
         };
     }
     const withPage = hasAppPage(app);
+    const shown = options.shown ?? app;
     // The blocks its Canvas offers: those of the UI plugins not turned off.
     const off = new Set((options.pluginsOff ?? []).map(canvasBlocksPluginName));
     const blocks = CANVAS_BLOCK_PLUGINS.filter(plugin => !off.has(plugin.name));
     return {
         plugins: [
-            defineAppPlugin(app),
-            ...(withPage ? [defineAppPagePlugin(app), ...blocks] : []),
-            // Its commands in the composer's `/` menu and its modes beside the
-            // composer (LOOP P-19): only for an application that has some.
-            ...((app.interface.commands ?? []).length > 0 ||
-                (app.interface.modes ?? []).length > 0
-                ? [defineAppComposerPlugin(app)]
-                : []),
+            defineAppPlugin(app, shown),
+            ...(withPage ? [defineAppPagePlugin(shown), ...blocks] : []),
+            // The components its developer wrote (LOOP P-17): blocks of its page
+            // and renderers of its page, its elements and its answers — its own.
+            ...(hasCustomComponents(app) ? [defineAppComponentsPlugin(app)] : []),
+            // Its commands in the composer's `/` menu, its modes and its profiles
+            // beside the composer (LOOP P-19, P-20) and what a person may attach
+            // there (P-21): only for an application that has some.
+            ...(needsAppComposer(app) ? [defineAppComposerPlugin(shown)] : []),
             // A thumb and a comment on each answer, kept in its record (LOOP
             // V-18): only for an application whose record keeps feedback.
             ...(keepsFeedback(app) ? [defineAppFeedbackPlugin(app)] : []),
@@ -217,6 +232,9 @@ export function appPreset(app, options = {}) {
                 : options.computer
                     ? [defineAppComputerPlugin(app)]
                     : []),
+            // What its code opens beside the conversation (LOOP P-18): a side
+            // panel, a page of its own; nothing drawn while nothing is open.
+            AppElementsPlugin,
         ],
         workspace: appLayoutOptions(app),
     };
@@ -281,7 +299,7 @@ export function appThemeOverrides(app, variant) {
         }
         : undefined;
 }
-export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, onSaying, paused = false, sidebar = false, computer = false, frame = false, page, pluginsOff, ...embed }) {
+export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, onSaying, paused = false, sidebar = false, computer = false, frame = false, page, pluginsOff, language, ...embed }) {
     /*
      * The kind's plugins, made once per application. `LoopEmbed` rebuilds its
      * whole reactor when its plugins change, so a new plugin on every render
@@ -290,6 +308,14 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
      */
     const source = JSON.stringify(dumpAppspec(app));
     const off = [...(pluginsOff ?? [])].sort().join(',');
+    /*
+     * What the person reads, in their language (P-26): the host's, else the
+     * browser's. Read once per language: a new one is a new workspace.
+     */
+    const preferred = (language ? [language] : preferredLanguages()).join(',');
+    const shown = useMemo(() => translatedAppspec(app, preferred.split(',').filter(Boolean)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [source, preferred]);
     /*
      * What it keeps, said before the first message (R-31): run as a
      * deployment — at its address, embedded — and not in its builder's
@@ -305,6 +331,7 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
                 sidebar,
                 computer,
                 appUid: instance?.appUid,
+                shown,
                 ...(deployed ? { kept: { visitor } } : {}),
             });
         }
@@ -315,7 +342,17 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [source, page, off, sidebar, computer, instance?.appUid, deployed, visitor]);
+    [
+        source,
+        shown,
+        page,
+        off,
+        sidebar,
+        computer,
+        instance?.appUid,
+        deployed,
+        visitor,
+    ]);
     const allPlugins = useMemo(() => ('problem' in preset ? plugins : [...preset.plugins, ...plugins]), [preset, plugins]);
     /*
      * On Datalayer, the application runs on a runtime: allocated with a plain
@@ -354,31 +391,34 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
     if ('problem' in preset) {
         return (_jsx("div", { role: "status", style: { padding: 16 }, children: preset.problem }));
     }
-    return (_jsx(LoopEmbed
-    // The application's own agent: created under its id, so that its
-    // spec is applied to an agent of its own, never to the one it extends.
-    , { 
+    return (
+    // The chat's own words in the person's language too (P-26): the host's,
+    // else the browser's.
+    _jsx(ChatLanguage, { language: language, children: _jsx(LoopEmbed
         // The application's own agent: created under its id, so that its
         // spec is applied to an agent of its own, never to the one it extends.
-        agentId: app.id, ...preset.workspace, ...(frame
-            ? {
-                frameTitle: [app.emoji, app.name].filter(Boolean).join(' '),
-            }
-            : {}), 
-        // Its rules, activity and computer on a rail, one at a time (T-07).
-        sidebarRail: sidebar || computer, teamPicker: false, showAgentVariants: false, graph: false, pluginsPanel: false, datalayerAgentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC, 
-        // Where an application runs is decided by its host — the Studio's
-        // Preview, the hosted page — not offered to its user.
-        targetFixed: true, ...(named ? { themeVariant: named.variant } : {}), ...(namedMode ? { colorMode: namedMode } : {}), themeOverrides: themeOverrides, 
-        // Its own face, name and welcome in the chat (T-08); no counters: a
-        // person using an application is not asking about tokens.
-        presence: {
-            name: app.name,
-            face: app.emoji,
-            welcome: app.interface.welcome || app.description,
-            paused,
-            onPresence,
-            onSaying,
-        }, showTokenUsage: false, datalayerCreatePayload: datalayerCreatePayload, ...embed, plugins: allPlugins }));
+        , { 
+            // The application's own agent: created under its id, so that its
+            // spec is applied to an agent of its own, never to the one it extends.
+            agentId: app.id, ...preset.workspace, ...(frame
+                ? {
+                    frameTitle: [app.emoji, shown.name].filter(Boolean).join(' '),
+                }
+                : {}), 
+            // Its rules, activity and computer on a rail, one at a time (T-07).
+            sidebarRail: sidebar || computer, teamPicker: false, showAgentVariants: false, graph: false, pluginsPanel: false, datalayerAgentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC, 
+            // Where an application runs is decided by its host — the Studio's
+            // Preview, the hosted page — not offered to its user.
+            targetFixed: true, ...(named ? { themeVariant: named.variant } : {}), ...(namedMode ? { colorMode: namedMode } : {}), themeOverrides: themeOverrides, 
+            // Its own face, name and welcome in the chat (T-08); no counters: a
+            // person using an application is not asking about tokens.
+            presence: {
+                name: shown.name,
+                face: app.emoji,
+                welcome: shown.interface.welcome || shown.description,
+                paused,
+                onPresence,
+                onSaying,
+            }, showTokenUsage: false, datalayerCreatePayload: datalayerCreatePayload, ...embed, plugins: allPlugins }) }));
 }
 export default AppRenderer;

package/lib/loop/apps/appspec.d.ts

@@ -24,9 +24,11 @@
  *
  * @module loop/apps/appspec
  */
-import type { AppAccent, AppThemeMode, AppThemeVariant, AppAssistantCharacter, AppEmbedMode, AppVoiceSpec, AppKind, AppLayout, AppSpec } from '../../types/agentspecs';
+import type { AppAccent, AppThemeMode, AppThemeVariant, AppAssistantCharacter, AppEmbedMode, AppCustomComponentSpec, AppVoiceSpec, AppKind, AppLayout, AppPageOutputComponent, AppSpec } from '../../types/agentspecs';
 /** The version of the spec itself. */
 export declare const APP_SCHEMA = "loop.app/v1";
+/** The language an application's own words are in, unless it says (LOOP P-26). */
+export declare const DEFAULT_LANGUAGE = "en";
 /** The face of an application that has not chosen one. */
 export declare const DEFAULT_EMOJI = "\uD83D\uDC40";
 export declare const APP_KINDS: AppKind[];
@@ -60,6 +62,16 @@ export declare function retentionDays(keepFor: string): number;
 export declare function emptyAppspec(kind?: AppKind): AppSpec;
 /** An application's voice (VOICE.md VO-41): off unless said. */
 export declare const DEFAULT_VOICE: AppVoiceSpec;
+/** What a page's output may be drawn with (LOOP P-05), and the property of each that shows its value. */
+export declare const PAGE_OUTPUT_SHOWS: Record<AppPageOutputComponent, string>;
+/** The height of a component its developer wrote (P-17), unless it says. */
+export declare const DEFAULT_CUSTOM_HEIGHT = 240;
+/**
+ * The property a page's output fills with its value (P-05): a catalog
+ * component's (`PAGE_OUTPUT_SHOWS`), or what a component of the
+ * application's own shows first (P-17). Undefined for any other.
+ */
+export declare function pageOutputShows(component: string, own?: readonly AppCustomComponentSpec[]): string | undefined;
 /** What reading a document gives: the application, and what the document got wrong. */
 export interface ParsedAppspec {
     app: AppSpec;