@theoremjs/react 0.0.0-stage → 0.3.0

package/ui/ChatComposerBar.js

@@ -0,0 +1,251 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '@astryxdesign/core/Badge';
+import { Button } from '@astryxdesign/core/Button';
+import { ChatComposer, ChatComposerDrawer, ChatComposerInput, ChatSendButton, } from '@astryxdesign/core/Chat';
+import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
+import { HStack } from '@astryxdesign/core/HStack';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Kbd } from '@astryxdesign/core/Kbd';
+import { Selector } from '@astryxdesign/core/Selector';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Text } from '@astryxdesign/core/Text';
+import { Thumbnail } from '@astryxdesign/core/Thumbnail';
+import { Token } from '@astryxdesign/core/Token';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconArrowDown, IconArrowUp, IconBrain, IconCornerDownLeft, IconInputAi, IconMicrophone, IconPaperclip, IconPencil, IconPlayerRecordFilled, IconSend, IconStack2, IconX, } from '@tabler/icons-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { attachmentIssueText } from '@theoremjs/agents';
+import { composerPendingPreview, effortSelectEnabled, interfaceEffortOptions, interfaceModelOptions, modelSelectEnabled, } from '@theoremjs/agents/interface';
+import { stageComposerFiles } from "../client/composer-attachments.js";
+import { composerActionState } from "../client/composer-primary.js";
+import { composerDrawerSummary } from "../client/composer-drawer.js";
+import { isStashShortcut, resolveComposerHint, STASH_SHORTCUT, } from "../client/composer-hints.js";
+import { useComposerVoice } from "../components/use-composer-voice.js";
+import { composerDrawerLabel } from "./labels.js";
+import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
+import { VoiceNote } from "./VoiceNote.js";
+import { useEditorSelection } from "../components/use-editor-selection.js";
+export const NO_FOCUS_RING = { '--focus-outline-width': '0px' };
+const isImage = (file) => file.type.startsWith('image/');
+const anyFile = () => true;
+/** Object URLs for the files `keep` (a module-level predicate) accepts, revoked when the files change. */
+function useObjectUrls(files, keep) {
+    const urls = useMemo(() => files.map((file) => (keep(file) ? URL.createObjectURL(file) : undefined)), [files, keep]);
+    useEffect(() => () => {
+        for (const url of urls)
+            if (url)
+                URL.revokeObjectURL(url);
+    }, [urls]);
+    return urls;
+}
+function PendingRow(props) {
+    const { message } = props;
+    const t = useLabels();
+    const icon = (Glyph) => _jsx(Glyph, { size: 14 });
+    const edit = t('@theorem.composer.pending.edit');
+    const queue = t('@theorem.composer.pending.queue_action');
+    const sendNow = t('@theorem.composer.pending.send_now');
+    const moveUp = t('@theorem.composer.pending.move_up');
+    const moveDown = t('@theorem.composer.pending.move_down');
+    const remove = t('@theorem.composer.pending.remove');
+    return (_jsxs(HStack, { gap: 1, align: "center", width: "100%", children: [_jsx(Badge, { variant: message.kind === 'steer' ? 'info' : 'neutral', label: t(`@theorem.composer.pending.${message.kind}`) }), _jsx(StackItem, { size: "fill", children: _jsx(Text, { size: "sm", maxLines: 1, hasTruncateTooltip: true, children: composerPendingPreview(message) }) }), _jsxs(HStack, { gap: 0.5, children: [_jsx(IconButton, { label: edit, tooltip: edit, size: "sm", variant: "ghost", icon: icon(IconPencil), onClick: () => props.onRestore(message.id) }), message.kind === 'stash' ? (_jsx(IconButton, { label: queue, tooltip: queue, size: "sm", variant: "ghost", icon: icon(IconCornerDownLeft), onClick: () => props.onQueue(message.id) })) : null, _jsx(IconButton, { label: sendNow, tooltip: sendNow, size: "sm", variant: "ghost", icon: icon(IconSend), onClick: () => props.onSendNow(message.id) }), _jsx(IconButton, { label: moveUp, tooltip: moveUp, size: "sm", variant: "ghost", icon: icon(IconArrowUp), onClick: () => props.onMove(message.id, 'up') }), _jsx(IconButton, { label: moveDown, tooltip: moveDown, size: "sm", variant: "ghost", icon: icon(IconArrowDown), onClick: () => props.onMove(message.id, 'down') }), _jsx(IconButton, { label: remove, tooltip: remove, size: "sm", variant: "ghost", icon: icon(IconX), onClick: () => props.onRemove(message.id) })] })] }));
+}
+/** The model and effort choices this profile offers; efforts only for a chosen model. */
+function generationOptions(iface, selectedModel) {
+    const models = modelSelectEnabled(iface) ? interfaceModelOptions(iface) : [];
+    const efforts = selectedModel && effortSelectEnabled(iface, selectedModel) ? interfaceEffortOptions(iface, selectedModel) : [];
+    return { models, efforts };
+}
+function ModelSelector(props) {
+    const t = useLabels();
+    if (props.models.length === 0)
+        return null;
+    return (_jsx(Selector, { label: t('@theorem.composer.model'), isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconInputAi, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.models.map((m) => ({ value: m.id, label: m.id, description: m.label !== m.id ? m.label : undefined })), onChange: props.onChange }));
+}
+function EffortSelector(props) {
+    const t = useLabels();
+    if (props.efforts.length === 0)
+        return null;
+    return (_jsx(Selector, { label: t('@theorem.composer.effort'), isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconBrain, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.efforts.map((e) => ({ value: e.alias, label: e.alias, description: e.level })), onChange: props.onChange }));
+}
+function GenerationSelect(props) {
+    const { models, efforts } = generationOptions(props.iface, props.selectedModel);
+    if (models.length + efforts.length === 0)
+        return null;
+    return (_jsxs(HStack, { gap: 1, children: [_jsx(ModelSelector, { models: models, value: props.selectedModel, isDisabled: props.isDisabled, onChange: (modelId) => props.onChange({ modelId }) }), _jsx(EffortSelector, { efforts: efforts, value: props.selectedEffort, isDisabled: props.isDisabled, onChange: (effort) => {
+                    if (props.selectedModel)
+                        props.onChange({ modelId: props.selectedModel, effort });
+                } })] }));
+}
+function composerStatus(args) {
+    if (args.failure)
+        return { type: 'error', message: args.failure.error };
+    const warning = [
+        ...args.issues.map((issue) => attachmentIssueText(issue, args.lexicon)),
+        args.voiceFailure?.error,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return warning ? { type: 'warning', message: warning } : undefined;
+}
+/** Pending messages, then two uniform rows: 64px tiles (images, voice notes), then file tokens. */
+function PendingDrawer(props) {
+    const t = useLabels();
+    return (_jsx(ChatComposerDrawer, { count: props.summary.count, label: composerDrawerLabel(t, props.summary), children: _jsxs(VStack, { gap: 2, width: "100%", children: [props.messages.map((message) => (_jsx(PendingRow, { message: message, ...props.pendingActions }, message.id))), props.imageFiles.length + props.voiceFiles.length > 0 ? (_jsxs(HStack, { gap: 2, wrap: "wrap", vAlign: "center", children: [props.imageFiles.map(({ file, index, preview }) => (_jsx(Thumbnail, { src: preview, alt: file.name, label: file.name, onRemove: () => props.onAttachmentRemove(index) }, `${file.name}:${String(index)}`))), props.voiceFiles.map((file, index) => (_jsx(VoiceNote, { src: props.voiceUrls[index] ?? '', mimeType: file.type || undefined, onRemove: props.onVoiceRemove }, `voice:${file.name}`)))] })) : null, props.otherFiles.length > 0 ? (_jsx(HStack, { gap: 2, wrap: "wrap", children: props.otherFiles.map(({ file, index }) => (_jsx(Token, { label: file.name, onRemove: () => props.onAttachmentRemove(index) }, `${file.name}:${String(index)}`))) })) : null] }) }));
+}
+/** A hidden file input behind the paperclip button. */
+function AttachFilesButton({ accept, onFiles }) {
+    const t = useLabels();
+    const label = t('@theorem.composer.attach');
+    const fileInputRef = useRef(null);
+    function handleChange(event) {
+        const input = event.currentTarget;
+        const incoming = input.files ? [...input.files] : [];
+        input.value = '';
+        if (incoming.length > 0)
+            onFiles(incoming);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, accept: accept, onChange: handleChange }), _jsx(IconButton, { label: label, tooltip: label, size: "sm", variant: "ghost", icon: _jsx(IconPaperclip, { size: 16 }), onClick: () => fileInputRef.current?.click() })] }));
+}
+function SendMenu({ actions, onAction }) {
+    const t = useLabels();
+    if (actions.length === 0)
+        return null;
+    return (_jsx(DropdownMenu, { button: {
+            label: t('@theorem.composer.send_options'),
+            isIconOnly: true,
+            icon: _jsx(IconStack2, { size: 16 }),
+            variant: 'ghost',
+        }, hasChevron: false, placement: "above", items: actions.map((action) => ({
+            id: action,
+            label: t(`@theorem.composer.menu.${action}`),
+            description: t(`@theorem.composer.menu.${action}.description`),
+            ...(action === 'stash' ? { endContent: _jsx(Kbd, { keys: STASH_SHORTCUT }) } : {}),
+            onClick: () => onAction(action),
+        })) }));
+}
+function RecordButton({ recording, onToggle }) {
+    const t = useLabels();
+    const label = t(recording ? '@theorem.composer.stop_recording' : '@theorem.composer.record');
+    return (_jsx(IconButton, { label: label, tooltip: label, size: "md", variant: recording ? 'destructive' : 'ghost', icon: recording ? _jsx(IconPlayerRecordFilled, { size: 16 }) : _jsx(IconMicrophone, { size: 16 }), onClick: onToggle }));
+}
+/** Astryx's slot for contextual info (header, right side). */
+function ComposerHint({ hint, onAction }) {
+    const t = useLabels();
+    return (_jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(Text, { size: "sm", color: "secondary", children: t(`@theorem.composer.hint.${hint.id}.message`) }), _jsx(Button, { label: t(`@theorem.composer.hint.${hint.id}.action`), size: "sm", variant: "ghost", onClick: onAction }), _jsx(Kbd, { keys: hint.shortcut })] }));
+}
+/** Staged files split into image tiles and file tokens, with object URLs for previews and voice notes. */
+function useStagedFiles(pendingFiles, pendingVoice) {
+    const previews = useObjectUrls(pendingFiles, isImage);
+    const voiceUrls = useObjectUrls(pendingVoice, anyFile);
+    const staged = pendingFiles.map((file, index) => ({ file, index, preview: previews[index] }));
+    return {
+        imageFiles: staged.filter((entry) => entry.preview !== undefined),
+        otherFiles: staged.filter((entry) => entry.preview === undefined),
+        voiceUrls,
+    };
+}
+/** Stages picked files beside the ones already waiting, and keeps what could not be staged. */
+function useFileStaging(pendingFiles, maxFiles, props) {
+    const [stagingIssues, setStagingIssues] = useState([]);
+    function stageFiles(incoming) {
+        const staged = stageComposerFiles({ existing: pendingFiles, incoming, maxFiles, voiceCount: props.pendingVoice.length });
+        const added = staged.files.slice(pendingFiles.length);
+        if (added.length > 0)
+            props.onFilesSelected(added);
+        setStagingIssues(staged.issues);
+    }
+    return { stageFiles, stagingIssues };
+}
+/** The record button, when the profile takes voice. */
+function ComposerRecordButton({ hasVoice, voice }) {
+    if (!hasVoice)
+        return null;
+    return _jsx(RecordButton, { recording: voice.recording, onToggle: () => void voice.toggleRecording() });
+}
+/** The drawer of messages and files waiting to send; absent while nothing waits. */
+function composerDrawer(props, stagedFiles, onVoiceRemove) {
+    const summary = composerDrawerSummary({
+        pendingMessages: props.pendingMessages,
+        attachmentCount: props.pendingFiles.length + props.pendingVoice.length,
+    });
+    if (!summary)
+        return undefined;
+    return (_jsx(PendingDrawer, { summary: summary, messages: props.pendingMessages, ...stagedFiles, voiceFiles: props.pendingVoice, pendingActions: {
+            onMove: props.onPendingMove,
+            onRemove: props.onPendingRemove,
+            onQueue: props.onPendingQueue,
+            onRestore: props.onPendingRestore,
+            onSendNow: props.onPendingSendNow,
+        }, onAttachmentRemove: props.onAttachmentRemove, onVoiceRemove: onVoiceRemove }));
+}
+/** The text field, with Seance's stash shortcut while it has focus; `onStash` is absent when there is nothing to stash. */
+function ComposerTextInput({ editorRef, handleRef, onStash, }) {
+    return (_jsx(ChatComposerInput, { ref: editorRef, handleRef: handleRef, onKeyDown: (event) => {
+            if (!isStashShortcut(event))
+                return;
+            event.preventDefault();
+            onStash?.();
+        } }));
+}
+/** Astryx composer wired to Theorem's send / stop / queue / steer / stash matrix. */
+export function ChatComposerBar(props) {
+    return (_jsx(TheoremLabelsProvider, { children: _jsx(ChatComposerBarBody, { ...props }) }));
+}
+function ChatComposerBarBody(props) {
+    const { iface, phase } = props;
+    const t = useLabels();
+    const inputs = iface.inputs;
+    const pendingFiles = useMemo(() => [...props.pendingFiles], [props.pendingFiles]);
+    const voice = useComposerVoice({
+        inputs,
+        lexicon: iface.lexicon,
+        pendingFiles,
+        onVoiceStaged: props.onVoiceStaged,
+        onVoiceClear: props.onVoiceClear,
+    });
+    const stagedFiles = useStagedFiles(props.pendingFiles, props.pendingVoice);
+    useEffect(() => () => voice.disposeRecorder(), [voice.disposeRecorder]);
+    const { primary, menuActions, primaryDisabled } = composerActionState({
+        iface,
+        phase,
+        draftText: props.draftText,
+        pendingFiles: props.pendingFiles,
+        pendingVoice: props.pendingVoice,
+        recording: voice.recording,
+    });
+    const canStash = menuActions.includes('stash');
+    const editorRef = useRef(null);
+    const hint = resolveComposerHint({
+        draftText: props.draftText,
+        selectedText: useEditorSelection(editorRef),
+        canStash,
+    });
+    function runPrimary() {
+        if (primaryDisabled)
+            return;
+        if (primary === 'stop')
+            props.onStop();
+        else
+            props.onSubmit();
+    }
+    const { stageFiles, stagingIssues } = useFileStaging(pendingFiles, inputs.maxFiles, props);
+    return (_jsx(ChatComposer
+    // No keyboard focus ring on the composer (product choice): zero Astryx's
+    // focus-outline token for this subtree. The editor still shows its caret.
+    , { 
+        // No keyboard focus ring on the composer (product choice): zero Astryx's
+        // focus-outline token for this subtree. The editor still shows its caret.
+        style: NO_FOCUS_RING, value: props.draftText, onChange: props.onDraftTextChange, onSubmit: runPrimary, onStop: props.onStop, isStopShown: primary === 'stop', placeholder: voice.recording
+            ? t('@theorem.composer.listening')
+            : (props.placeholder ?? t('@theorem.composer.placeholder', { handle: iface.identity.handle })), 
+        // A profile that takes no text has no text field (false, not null: null gets Astryx's default one).
+        input: inputs.text && (_jsx(ComposerTextInput, { editorRef: editorRef, handleRef: props.inputRef, onStash: canStash ? () => props.onMenuAction('stash') : undefined })), drawer: composerDrawer(props, stagedFiles, () => voice.discardRecordingOrVoice()), headerActions: inputs.attachments ? _jsx(AttachFilesButton, { accept: inputs.attachments.acceptAttr, onFiles: stageFiles }) : undefined, headerContext: hint ? _jsx(ComposerHint, { hint: hint, onAction: () => props.onMenuAction('stash') }) : undefined, footerActions: _jsx(GenerationSelect, { iface: iface, selectedModel: props.selectedModel, selectedEffort: props.selectedEffort, isDisabled: phase === 'streaming', onChange: props.onGenerationChange }), 
+        // Astryx: sendActions render to the left of the send button, at size="md".
+        sendActions: _jsxs(_Fragment, { children: [_jsx(SendMenu, { actions: menuActions, onAction: props.onMenuAction }), _jsx(ComposerRecordButton, { hasVoice: Boolean(inputs.voice), voice: voice })] }), sendButton: _jsx(ChatSendButton, { isStopShown: primary === 'stop', isDisabled: primaryDisabled, onSend: runPrimary, onStop: props.onStop }), status: composerStatus({
+            failure: props.failure,
+            issues: [...props.issues, ...stagingIssues],
+            voiceFailure: voice.failure,
+            lexicon: iface.lexicon,
+        }) }));
+}

package/ui/ChatTranscript.d.ts

@@ -0,0 +1,30 @@
+import { type ChatMessageStatus } from '@astryxdesign/core/Chat';
+import { type ReactNode } from 'react';
+import type { TranscriptBlock } from '@theoremjs/agents/interface';
+import type { AnsweringGate } from '../client/tool-resume.ts';
+import { type ToolDecision } from './ToolGateCard.tsx';
+export type ChatTranscriptProps = {
+    blocks: readonly TranscriptBlock[];
+    /** Assistant display name (profile handle). */
+    handle: string;
+    streaming?: boolean;
+    /** How far the latest message has got; shown on it unless its turn failed. */
+    delivery?: Exclude<ChatMessageStatus, 'error'> | null;
+    onToolDecision?: (index: number, action: ToolDecision) => void;
+    /** The answer on its way to a gate (`useTheoremChat().answering`). */
+    answering?: AnsweringGate | null;
+    /** Signed in at a gate: `secret` is a key the user typed; after an OAuth callback there is none. */
+    onAuthenticated?: (index: number, secret?: string) => void;
+    emptyState?: ReactNode;
+    /**
+     * Set for image profiles: generated images show large, framed to their own
+     * aspect ratio, with a matching skeleton while one generates.
+     */
+    imageOutput?: ImageOutput;
+};
+/** Image-profile display: `ratio` is the profile's pinned aspect ratio, if any. */
+export type ImageOutput = {
+    ratio?: number;
+};
+/** Theorem transcript blocks rendered as Astryx chat messages. */
+export declare function ChatTranscript(props: ChatTranscriptProps): import("react").JSX.Element;