@theoremjs/react 0.3.4-next.831.g934609e → 0.3.4-next.841.g5f7aa38

package/README.md

@@ -147,7 +147,7 @@ The profile, the keys, and the system prompt stay on the server. The browser rec
 | --- | --- |
 | `@theoremjs/react` | Hooks, transports, and client logic |
 | `@theoremjs/react/ui` | `TheoremChat`, `TheoremHost`, `TheoremDecision`, `TheoremEmbedding`, and their parts |
-| `@theoremjs/react/live` | `useLiveCall` and `LiveRunner`, the voice and video call and its UI |
+| `@theoremjs/react/live` | `useLiveCall`, `LiveRunner` and `LiveCallTile`, the voice and video call and its UI |
 | `@theoremjs/react/server` | `@theoremjs/web/server`: the handlers and the stores they use |
 | `@theoremjs/react/ui/theme` | `theoremTheme`, the base for your own Astryx theme |
 | `@theoremjs/react/ui/icons` | The icon set of the theme |
@@ -367,6 +367,16 @@ The call lasts as long as the component that calls `useLiveCall`. Call it above
 
 Give `LiveRunner` an `onMinimize` to show a minimize control in the call. Theorem calls it and does not navigate: your code decides where to go, and the call goes on.
 
+`LiveCallTile` draws the same call small: the camera preview, or the ink waveform when the camera is off, then the call time, mute, end, and expand. It fills the box you give it, so your code places it and sizes it. A press on the tile or its expand control calls `onExpand`.
+
+```tsx
+import { LiveCallTile } from '@theoremjs/react/live';
+
+<LiveCallTile call={call} onExpand={() => navigate('/call')} />
+```
+
+Show `LiveRunner` or `LiveCallTile` for a call, not both: the camera preview is one element, and it shows in the one that mounted last.
+
 ### The page's part in a call
 
 Three more values for `useLiveCall` come from the page. The profile declares each one; the page only supplies the value.

package/components/live/use-live-call.d.ts

@@ -22,6 +22,7 @@ export declare function useLiveCall({ iface, connection, ...options }: LiveCallI
     handle: string;
     traces: import("@theoremjs/web/client").TraceFeed;
     callStarted: boolean;
+    connectedAt: number | null;
     pastCalls: LiveCaptionTurn[][];
     captions: LiveCaptionState;
     failure: import("@theoremjs/web/client").ClientFailure | null;

package/components/live/use-live-call.js

@@ -14,6 +14,8 @@ import { useLiveSessionClient } from "./use-live-session-client.js";
 function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailable) {
     const [callStarted, setCallStarted] = useState(false);
     const [ended, setEnded] = useState(false);
+    /** When this call first connected; a reconnect keeps it, a new call clears it. */
+    const [connectedAt, setConnectedAt] = useState(null);
     const videoOnConnectRef = useRef(false);
     const startCall = useCallback((options) => {
         videoOnConnectRef.current = options.video && videoAvailable;
@@ -21,6 +23,10 @@ function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailab
         setEnded(false);
         void controls.startSession();
     }, [controls, videoAvailable]);
+    useEffect(() => {
+        if (sessionActive)
+            setConnectedAt((at) => at ?? Date.now());
+    }, [sessionActive]);
     // why: Camera capture needs a live session, so a video call turns it on once connected.
     useEffect(() => {
         if (!sessionActive || !videoOnConnectRef.current)
@@ -32,12 +38,14 @@ function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailab
         videoOnConnectRef.current = false;
         controls.teardownSession();
         setEnded(true);
+        setConnectedAt(null);
     }, [controls]);
     const [pastCalls, setPastCalls] = useState([]);
     const handleRestart = useCallback(async () => {
         const previous = captionsRef.current.turns;
         setPastCalls((calls) => stashLiveCaptionCall(calls, previous));
         setEnded(false);
+        setConnectedAt(null);
         await controls.handleRestart();
     }, [controls, captionsRef]);
     const teardownSessionRef = useRef(controls.teardownSession);
@@ -47,7 +55,7 @@ function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailab
             teardownSessionRef.current();
         };
     }, []);
-    return { callStarted, ended, pastCalls, startCall, handleEnd, handleRestart };
+    return { callStarted, connectedAt, ended, pastCalls, startCall, handleEnd, handleRestart };
 }
 /**
  * Owns a live call: its session client, state, and controls. The call lasts as
@@ -139,7 +147,7 @@ export function useLiveCall({ iface, connection, ...options }) {
         setVideoFacingMode: ui.setVideoFacingMode,
         setIsVideoOn: ui.setIsVideoOn,
     });
-    const { callStarted, ended, pastCalls, startCall, handleEnd, handleRestart } = useLiveCallLifecycle(controls, ui.captionsRef, ui.sessionActive, videoAvailable);
+    const { callStarted, connectedAt, ended, pastCalls, startCall, handleEnd, handleRestart } = useLiveCallLifecycle(controls, ui.captionsRef, ui.sessionActive, videoAvailable);
     // why: The page's context is compared by value, so a host may build it inline on each render.
     const contextJson = JSON.stringify(options.context);
     useEffect(() => {
@@ -161,6 +169,7 @@ export function useLiveCall({ iface, connection, ...options }) {
         handle: iface.identity.handle,
         traces,
         callStarted,
+        connectedAt,
         pastCalls,
         captions: ui.captions,
         failure: ui.failure,

package/live.d.ts

@@ -5,5 +5,6 @@
  */
 export type { LiveCallOptions, LiveConnection, PageTool, PageToolAnswer, PageTools, } from '@theoremjs/web/client';
 export { type LiveCall, type LiveCallInput, useLiveCall, } from './components/live/use-live-call.ts';
+export { LiveCallTile, type LiveCallTileProps } from './ui/LiveCallTile.tsx';
 export type { LiveRunnerProps } from './ui/LiveRunner.tsx';
 export { LiveRunner } from './ui/LiveRunner.tsx';

package/live.js

@@ -8,4 +8,5 @@ import '@astryxdesign/core/reset.css';
 import '@astryxdesign/core/astryx.css';
 import './ui/built/theme.css';
 export { useLiveCall, } from "./components/live/use-live-call.js";
+export { LiveCallTile } from "./ui/LiveCallTile.js";
 export { LiveRunner } from "./ui/LiveRunner.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.831.g934609e",
+  "version": "0.3.4-next.841.g5f7aa38",
   "description": "React bindings for Theorem: headless hooks + transport, an Astryx chat UI, and a Web-standard server handler.",
   "license": "MIT",
   "type": "module",
@@ -60,8 +60,8 @@
     "@stylexjs/stylex": "0.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@theoremjs/agents": "^0.3.4-next.831.g934609e",
-    "@theoremjs/web": "^0.3.4-next.831.g934609e"
+    "@theoremjs/agents": "^0.3.4-next.841.g5f7aa38",
+    "@theoremjs/web": "^0.3.4-next.841.g5f7aa38"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/LiveCallTile.d.ts

@@ -0,0 +1,24 @@
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+import type { LiveCall } from '../components/live/use-live-call.ts';
+import { type TheoremLabels } from './labels.ts';
+export type LiveCallTileProps = {
+    /** The call to draw, from `useLiveCall`: the same call `LiveRunner` draws. */
+    call: LiveCall;
+    /**
+     * Called when the person asks to open the call full size, from the tile or
+     * its expand control. The host decides what that means, such as going back
+     * to the call's page.
+     */
+    onExpand: () => void;
+    /** Astryx theme, as on `LiveRunner`. */
+    theme?: DefinedTheme;
+    mode?: 'system' | 'light' | 'dark';
+    /** Replacement lines by locale, as on `LiveRunner`. */
+    labels?: TheoremLabels;
+};
+/**
+ * A small view of a running call: the camera preview, or the ink waveform
+ * when the camera is off, then the call time, mute, end, and expand. It fills
+ * the box the host gives it; the host places it.
+ */
+export declare function LiveCallTile({ theme, mode, labels, ...props }: LiveCallTileProps): import("react").JSX.Element;

package/ui/LiveCallTile.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AspectRatio } from '@astryxdesign/core/AspectRatio';
+import { ClickableCard } from '@astryxdesign/core/ClickableCard';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Text } from '@astryxdesign/core/Text';
+import { ToggleButton } from '@astryxdesign/core/ToggleButton';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconArrowsDiagonal, IconMicrophone, IconMicrophoneOff, IconPhoneOff, } from '@tabler/icons-react';
+import { InkWaveform } from "../components/InkWaveform.js";
+import { useSecondTicker } from "../hooks/use-second-ticker.js";
+import { LiveVideoPreview } from "./LiveVideoPreview.js";
+import { liveDuration, liveStateLabel } from "./labels.js";
+import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
+import { TheoremThemeProvider } from "./theme.js";
+/**
+ * A small view of a running call: the camera preview, or the ink waveform
+ * when the camera is off, then the call time, mute, end, and expand. It fills
+ * the box the host gives it; the host places it.
+ */
+export function LiveCallTile({ theme, mode, labels, ...props }) {
+    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(LiveCallTileBody, { ...props }) }) }));
+}
+function LiveCallTileBody({ call, onExpand, }) {
+    const t = useLabels();
+    return (_jsx(ClickableCard, { label: t('@theorem.live.expand'), onClick: onExpand, padding: 0, elevation: "high", width: "100%", children: _jsxs(VStack, { children: [_jsx(TileMedia, { call: call }), _jsxs(HStack, { gap: 1, vAlign: "center", padding: 2, children: [_jsx(StackItem, { size: "fill", children: _jsx(TileTime, { call: call }) }), _jsx(TileControls, { call: call, onExpand: onExpand })] })] }) }));
+}
+/** The camera preview while the camera is on; otherwise the ink waveform. */
+function TileMedia({ call }) {
+    if (call.isVideoOn && call.videoPreview) {
+        return _jsx(LiveVideoPreview, { video: call.videoPreview, facingMode: call.videoFacingMode });
+    }
+    return (_jsx(AspectRatio, { ratio: 4 / 3, children: _jsx(VStack, { height: "100%", vAlign: "center", padding: 4, "aria-hidden": "true", children: _jsx(InkWaveform, { status: call.status, levelsRef: call.levelsRef, toolActive: call.toolActive, variant: "pill" }) }) }));
+}
+/** How long the call has run, or its state before it connects and after it ends. */
+function TileTime({ call }) {
+    const t = useLabels();
+    const since = call.sessionActive ? call.connectedAt : null;
+    const now = useSecondTicker(since !== null);
+    return (_jsx(Text, { type: "supporting", hasTabularNumbers: true, maxLines: 1, children: since === null
+            ? liveStateLabel(t, call.liveState, call.activeTool)
+            : liveDuration(t, now - since) }));
+}
+function TileControls({ call, onExpand }) {
+    const t = useLabels();
+    return (_jsxs(_Fragment, { children: [call.voiceAvailable ? (_jsx(ToggleButton, { label: t('@theorem.live.microphone'), tooltip: t(call.isMuted ? '@theorem.live.unmute' : '@theorem.live.mute'), isIconOnly: true, size: "sm", isPressed: !call.isMuted, isDisabled: !call.sessionActive, icon: _jsx(Icon, { icon: IconMicrophone }), pressedIcon: _jsx(Icon, { icon: IconMicrophoneOff }), onPressedChange: call.handleToggleMic })) : null, _jsx(IconButton, { label: t('@theorem.live.end_call'), tooltip: t('@theorem.live.end_call'), variant: "destructive", size: "sm", isDisabled: !call.sessionActive, icon: _jsx(Icon, { icon: IconPhoneOff }), onClick: call.handleEnd }), _jsx(IconButton, { label: t('@theorem.live.expand'), tooltip: t('@theorem.live.expand'), variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconArrowsDiagonal }), onClick: onExpand })] }));
+}

package/ui/LiveRunner.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AspectRatio } from '@astryxdesign/core/AspectRatio';
 import { Banner } from '@astryxdesign/core/Banner';
 import { Button } from '@astryxdesign/core/Button';
 import { Center } from '@astryxdesign/core/Center';
@@ -14,9 +13,10 @@ import { ToggleButton } from '@astryxdesign/core/ToggleButton';
 import { Toolbar } from '@astryxdesign/core/Toolbar';
 import { VStack } from '@astryxdesign/core/VStack';
 import { IconArrowsDiagonalMinimize2, IconCameraRotate, IconMessage, IconMicrophone, IconMicrophoneOff, IconPhone, IconPhoneOff, IconVideo, IconVideoOff, } from '@tabler/icons-react';
-import { Fragment, useEffect, useLayoutEffect, useRef, } from 'react';
+import { Fragment, useLayoutEffect, useRef } from 'react';
 import { InkWaveform } from "../components/InkWaveform.js";
 import { LiveCaptionsPanel } from "./LiveCaptionsPanel.js";
+import { LiveVideoPreview } from "./LiveVideoPreview.js";
 import { liveStateLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 import { PANEL_EDGE, SidePanel, SidePanelHeader, SidePanelToggle, useSidePanel, } from "./SidePanel.js";
@@ -134,35 +134,6 @@ function LiveCallButton({ call }) {
 function LiveCaptions({ call }) {
     return (_jsx(LiveCaptionsPanel, { handle: call.handle, captions: call.captions, pastCalls: call.pastCalls, draftText: call.textDraft, onDraftTextChange: call.setTextDraft, onSubmit: call.handleSendText, isDisabled: !call.sessionActive, showComposer: call.textAvailable, leading: call.videoPreview ? (_jsx(LiveVideoPreview, { video: call.videoPreview, facingMode: call.videoFacingMode })) : null }));
 }
-/**
- * The camera preview, at the top of the captions panel. The capture element comes
- * from the session client, so it is mounted imperatively; it sits one level
- * below AspectRatio, so it carries its own fill and mirror styles.
- */
-function LiveVideoPreview({ video, facingMode, }) {
-    const t = useLabels();
-    const hostRef = useRef(null);
-    useEffect(() => {
-        const host = hostRef.current;
-        if (!host)
-            return;
-        Object.assign(video.style, {
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            display: 'block',
-        });
-        host.replaceChildren(video);
-        return () => {
-            if (video.parentElement === host)
-                host.removeChild(video);
-        };
-    }, [video]);
-    useEffect(() => {
-        video.style.transform = facingMode === 'user' ? 'scaleX(-1)' : '';
-    }, [video, facingMode]);
-    return (_jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("div", { ref: hostRef, "aria-label": t('@theorem.live.camera_preview'), role: "img" }) }));
-}
 /** Room around the gate card for its shadow. */
 const GATE_DIALOG_PADDING = 4;
 const GATE_DIALOG_WIDTH = GATE_CARD_WIDTH + 2 * GATE_DIALOG_PADDING * 4;

package/ui/LiveVideoPreview.d.ts

@@ -0,0 +1,10 @@
+import type { LiveFacingMode } from '../client/live/live-video.ts';
+/**
+ * The camera preview: atop the call's captions, or in its tile. The capture element comes
+ * from the session client, so it is mounted imperatively; it sits one level
+ * below AspectRatio, so it carries its own fill and mirror styles.
+ */
+export declare function LiveVideoPreview({ video, facingMode, }: {
+    video: HTMLVideoElement;
+    facingMode: LiveFacingMode;
+}): import("react").JSX.Element;

package/ui/LiveVideoPreview.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AspectRatio } from '@astryxdesign/core/AspectRatio';
+import { useEffect, useRef } from 'react';
+import { useLabels } from "./labels-provider.js";
+/**
+ * The camera preview: atop the call's captions, or in its tile. The capture element comes
+ * from the session client, so it is mounted imperatively; it sits one level
+ * below AspectRatio, so it carries its own fill and mirror styles.
+ */
+export function LiveVideoPreview({ video, facingMode, }) {
+    const t = useLabels();
+    const hostRef = useRef(null);
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        Object.assign(video.style, {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            display: 'block',
+        });
+        host.replaceChildren(video);
+        return () => {
+            if (video.parentElement === host)
+                host.removeChild(video);
+        };
+    }, [video]);
+    useEffect(() => {
+        video.style.transform = facingMode === 'user' ? 'scaleX(-1)' : '';
+    }, [video, facingMode]);
+    return (_jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("div", { ref: hostRef, "aria-label": t('@theorem.live.camera_preview'), role: "img" }) }));
+}

package/ui/labels.d.ts

@@ -1364,6 +1364,10 @@ export declare const THEOREM_UI_CATALOG: {
         readonly defaultMessage: "End call";
         readonly description: "Hangs up.";
     };
+    readonly '@theorem.live.expand': {
+        readonly defaultMessage: "Open call";
+        readonly description: "Asks the host to show a minimized call full size.";
+    };
     readonly '@theorem.live.minimize': {
         readonly defaultMessage: "Minimize call";
         readonly description: "Asks the host to show the call small; the call goes on.";

package/ui/labels.js

@@ -1291,6 +1291,10 @@ export const THEOREM_UI_CATALOG = {
         description: 'Switches front and back camera.',
     },
     '@theorem.live.end_call': { defaultMessage: 'End call', description: 'Hangs up.' },
+    '@theorem.live.expand': {
+        defaultMessage: 'Open call',
+        description: 'Asks the host to show a minimized call full size.',
+    },
     '@theorem.live.minimize': {
         defaultMessage: 'Minimize call',
         description: 'Asks the host to show the call small; the call goes on.',