@adecore/agents-react 0.37.3 → 0.39.0

package/src/chat/ui/rows/GeneratedImageRow.tsx

@@ -13,6 +13,7 @@ import { attachmentAspect, generatedImageView, type GeneratedImageFailure } from
 import { toolStartedAt } from '../../logic/tools';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from '../chips';
 import { useFileLinkCwd, useOpenFileLink } from '../file-links';
+import { HostMenuItems } from '../HostMenuItems';
 import { ImageThumb } from '../ImageView';
 import { ROW_GUTTER } from '../icons';
 import { RunningFor, WorkRow } from './WorkRows';
@@ -104,6 +105,7 @@ function ReadyImage({ chatId, attachment, prompt, transparent }: { chatId: strin
     const missing = source.failure !== null;
     const aspect = attachmentAspect(attachment);
     const { open, saveToProject } = attachments;
+    const extra = attachments.actions?.(scopeId, chatId, attachment) ?? [];
 
     const detail = [
         attachment.width !== undefined && attachment.height !== undefined
@@ -171,13 +173,16 @@ function ReadyImage({ chatId, attachment, prompt, transparent }: { chatId: strin
                         >
                             <ButtonGroup>
                                 <IconButton icon={Maximize2} size="sm" label={t('generatedImage.openLarge')} onClick={() => setLightbox(true)} />
-                                {prompt !== null && (
+                                {(prompt !== null || extra.length > 0) && (
                                     <Menu.Root>
                                         <IconButton icon={Ellipsis} size="sm" label={t('generatedImage.more')} render={<Menu.Trigger />} />
                                         <Menu.Popup align="end">
-                                            <Menu.Item onClick={() => copyText(prompt)}>
-                                                <Icon icon={Copy} size={14} /> {t('generatedImage.copyPrompt')}
-                                            </Menu.Item>
+                                            {prompt !== null && (
+                                                <Menu.Item onClick={() => copyText(prompt)}>
+                                                    <Icon icon={Copy} size={14} /> {t('generatedImage.copyPrompt')}
+                                                </Menu.Item>
+                                            )}
+                                            <HostMenuItems actions={extra} />
                                         </Menu.Popup>
                                     </Menu.Root>
                                 )}

package/src/chat/ui/rows/VisualRow.tsx

@@ -5,6 +5,7 @@ import { ButtonGroup, ErrorBoundary, Icon, IconButton, Menu, Surface } from '@ad
 import { useChatHost } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useVisualDialog } from '../../visuals';
+import { HostMenuItems } from '../HostMenuItems';
 import { VisualFrame } from '../VisualFrame';
 
 /*
@@ -16,10 +17,11 @@ import { VisualFrame } from '../VisualFrame';
 export function VisualRow({ chatId, visual }: { chatId: string; visual: ChatVisual }) {
     const host = useChatHost();
     const { t } = useTranslation('agent-chat');
-    const { keyOf } = useChatScope();
+    const { id: scopeId, keyOf } = useChatScope();
     if (host.visuals === null) {
         return null;
     }
+    const extra = host.visuals.actions?.(scopeId, chatId, visual) ?? [];
     const open = (kind: 'expand' | 'remove'): void => useVisualDialog.getState().open(keyOf(chatId), visual.id, kind);
     return (
         <ErrorBoundary label={t('visuals.renderFailed')} resetKeys={[visual]} compact className="relative rounded-lg">
@@ -35,6 +37,8 @@ export function VisualRow({ chatId, visual }: { chatId: string; visual: ChatVisu
                         <Menu.Root>
                             <IconButton icon={Ellipsis} size="sm" label={t('visuals.more')} render={<Menu.Trigger />} />
                             <Menu.Popup align="end">
+                                <HostMenuItems actions={extra} />
+                                {extra.length > 0 && <Menu.Separator />}
                                 <Menu.Item onClick={() => open('remove')}>
                                     <Icon icon={Trash2} size={14} /> {t('visuals.remove')}
                                 </Menu.Item>

package/src/chat/ui/rows/row-rhythm.ts

@@ -7,13 +7,15 @@ export const FOLLOW_THRESHOLD_PX = 40;
 
 /*
  * The gaps a row wears for where it sits: a question is followed by its answer gap, and a seam where
- * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A visual has no
- * margin of its own like prose does, so the row under one takes the block gap too. A question
- * already carries the gap before it, and the row after one is the answer, so neither takes a seam.
+ * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A visual and an
+ * app's card have no margin of their own like prose does, so the row under one takes the block gap
+ * too. A question already carries the gap before it, and the row after one is the answer, so neither
+ * takes a seam.
  */
 export function rowRhythm(row: TimelineRow, previous: TimelineRow | null): string {
     const question = row.kind === 'user';
-    const seam = !question && previous !== null && previous.kind !== 'user' && (isBlock(row) !== isBlock(previous) || previous.kind === 'visual');
+    const bare = previous?.kind === 'visual' || previous?.kind === 'app-card';
+    const seam = !question && previous !== null && previous.kind !== 'user' && (isBlock(row) !== isBlock(previous) || bare);
     return clsx(question && 'pb-(--chat-answer-gap)', seam && 'pt-(--chat-block-gap)');
 }
 

package/src/host-hooks.ts

@@ -7,7 +7,7 @@
  */
 import type { ProviderPlatform } from '@adecore/agent-contracts';
 import { referablesOfChats, type Referables } from './chat/chat-references';
-import { useChatHost, type ChatHost, type CommandLook } from './host';
+import { useChatHost, type ChatHost, type CommandLook, type ComposerSendAction } from './host';
 
 export function useHostCodeMode(): 'light' | 'dark' {
     return useChatHost().code.useMode();
@@ -101,6 +101,14 @@ export function useHostComposerPlaceholder(...args: Parameters<ChatHost['useComp
     return useChatHost().useComposerPlaceholder(...args);
 }
 
+const NO_SEND_ACTIONS: readonly ComposerSendAction[] = [];
+const noSendActions = (): readonly ComposerSendAction[] => NO_SEND_ACTIONS;
+
+export function useHostComposerSendActions(scopeId: string, chatId: string): readonly ComposerSendAction[] {
+    const useSendActions = useChatHost().useComposerSendActions ?? noSendActions;
+    return useSendActions(scopeId, chatId);
+}
+
 export function useHostThreadCards(...args: Parameters<ChatHost['useThreadCards']>): ReturnType<ChatHost['useThreadCards']> {
     return useChatHost().useThreadCards(...args);
 }

package/src/host.ts

@@ -2,9 +2,11 @@ import { createContext, createElement, useContext, useState, type ComponentProps
 import type { Extension } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
 import type { Highlighter, ThemeRegistration } from 'shiki';
+import type { LucideIcon } from 'lucide-react';
 import type { EditorEngine } from '@adecore/editor';
 import type {
     AgentKind,
+    ChatAttachment,
     ChatCheckpointDiff,
     ChatConfigurePayload,
     ChatGoalAction,
@@ -15,7 +17,10 @@ import type {
     ChatUiQueryReading,
     ChatUiLinkPayload,
     ChatUiLinkReading,
-    ProviderPlatform
+    ChatVisual,
+    ModelSelection,
+    ProviderPlatform,
+    RuntimeMode
 } from '@adecore/agent-contracts';
 import { isApplePlatform } from '@adecore/ui';
 import type { Referables } from './chat/chat-references';
@@ -165,6 +170,28 @@ export interface ComposerSlotProps {
     insert(text: string): void;
 }
 
+/* What a send action of the app's gets: the message as it stands when a person picks the action. */
+export interface ComposerSendDraft {
+    scopeId: string;
+    chatId: string;
+    /* The draft as Send would send it, trimmed and with its quote; empty when nothing is written. */
+    text: string;
+    provider: AgentKind;
+    selection: ModelSelection;
+    runtimeMode: RuntimeMode;
+}
+
+/* An action of the app's own in the menu beside the composer's send button, such as sending the draft later. */
+export interface ComposerSendAction {
+    /* Unique among the actions of one composer. */
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    disabled?: boolean;
+    /* Runs once a person picks it; the draft stays in the box, and the host shows a failure itself. */
+    run(draft: ComposerSendDraft): void;
+}
+
 /* What an app's own chips for a chat's sub-agents get, in place of the one flyout over the composer. */
 export interface SubagentSlotProps {
     chatId: string;
@@ -188,6 +215,19 @@ export interface VisualHost {
     frameUrl: string;
     /* Opens an http or https link a person followed in a visual, outside the app. */
     openLink(url: string): void;
+    /* Actions of the app's own in a visual's menu, above Remove; left out, the menu holds Remove alone. */
+    actions?(scopeId: string, chatId: string, visual: ChatVisual): readonly HostMenuAction[];
+}
+
+/* An action of the app's own in the menu of something a chat made, such as keeping a copy somewhere of the app's. */
+export interface HostMenuAction {
+    /* Unique among the actions of one menu. */
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    disabled?: boolean;
+    /* Runs once a person picks it; the host shows a failure itself. */
+    run(): void;
 }
 
 /* Who writes a chat's replies, as the header over each one names them. */
@@ -329,6 +369,8 @@ export interface ChatHost {
          * Resolves with the path as a file link opens it, or null when the person cancels; left out, a generated image offers no Save.
          */
         saveToProject?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): Promise<string | null>;
+        /* Actions of the app's own in a generated image's menu, after the chat's own; left out, the menu holds those alone. */
+        actions?(scopeId: string, chatId: string, attachment: ChatAttachment): readonly HostMenuAction[];
     };
     /* The image a tool read, drawn under its row; null draws none. */
     ReadImage: ComponentType<{ path: string }> | null;
@@ -435,6 +477,8 @@ export interface ChatHost {
     useComposerPlaceholder(scopeId: string, chatId: string): string | null;
     /* The app's own control in the composer's row, after the pickers; null draws none. */
     ComposerSlot: ComponentType<ComposerSlotProps> | null;
+    /* Actions of the app's own behind a chevron on the send button, in the order given; left out, or none, Send stands alone. */
+    useComposerSendActions?(scopeId: string, chatId: string): readonly ComposerSendAction[];
     /* The app's own chips for a chat's sub-agents over the composer; null draws the one flyout. */
     SubagentSlot: ComponentType<SubagentSlotProps> | null;
     /* Cards of the app's own in a thread, in any order. Hand back the same array while none changed, or the thread lays out its rows again on every render. */

package/src/index.ts

@@ -9,9 +9,12 @@ export {
     type TimelineFind,
     type ComposerDictationProps,
     type ComposerSlotProps,
+    type ComposerSendAction,
+    type ComposerSendDraft,
     type SubagentSlotProps,
     type ThreadCard,
     type VisualHost,
+    type HostMenuAction,
     type ReplyAuthor,
     type ChatHost,
     type UiMapSource,

package/src/locales/en/agent-chat.ts

@@ -391,6 +391,7 @@ export default {
         continue: 'Continue',
         continueHint: 'Continue the stopped turn',
         send: 'Send',
+        sendActions: 'More send options',
         clear: {
             title: 'Clear thread?',
             description: 'A turn is running.',

package/src/locales/nl/agent-chat.ts

@@ -391,6 +391,7 @@ export default {
         continue: 'Doorgaan',
         continueHint: 'Ga verder met de gestopte beurt',
         send: 'Versturen',
+        sendActions: 'Meer verzendopties',
         clear: {
             title: 'Thread wissen?',
             description: 'Er loopt een turn.',

package/src/providers/index.ts

@@ -1,6 +1,7 @@
 // Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
 export { AccountDot } from '../agents/AccountDot';
 export { AgentIcon } from '../agents/AgentIcon';
+export { AgentModelLabel } from '../agents/AgentModelLabel';
 export { ModelOptionControl } from '../agents/ModelOptionControl';
 export { ProviderLogo } from '../agents/ProviderLogo';
 export { type AccountEntry, accountsOfKind, ACCOUNT_TONE_CLASSES, accountStatusLine, canContinueOn, type AccountTone } from '../agents/accounts';

package/src/theme.css

@@ -288,6 +288,9 @@
 .composer-input .cm-editor .cm-scroller .cm-content { padding: 18px 14px 6px 20px; caret-color: var(--text); }
 .composer-input .cm-scroller .cm-content .cm-line { padding: 0; }
 .composer-input .cm-scroller .cm-content .cm-placeholder { color: var(--text-faint); }
+/* The same editor as a form field (`PromptEditor`): the field's inset, and room for a few lines before it scrolls. */
+.composer-input.prompt-editor .cm-editor { max-height: 240px; }
+.composer-input.prompt-editor .cm-editor .cm-scroller .cm-content { min-height: 80px; padding: 6px 10px; }
 .composer-hints, .composer-hints-extra { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
 /* The joiner starts with its own comma, so it sits against the lead without the gap. */
 .composer-hints-extra { margin-left: -8px; }