@adecore/agents-react 0.27.5 → 0.28.0

package/dist/chat/ui/intelligent-ui/registry.js

@@ -1,6 +1,6 @@
 import { ChartRenderer } from './renderers/chart.js';
 import { ChoiceRenderer, ChoicesRenderer } from './renderers/choices.js';
-import { CodeBlockRenderer, CompareRenderer, GalleryRenderer, ImageRenderer, SourceRenderer, SourcesRenderer } from './renderers/content.js';
+import { CodeBlockRenderer, CompareRenderer, GalleryRenderer, ImageRenderer, ModelRenderer, SourceRenderer, SourcesRenderer } from './renderers/content.js';
 import { EntityListRenderer, EntryRenderer, StatRenderer, StatsRenderer, TableRenderer } from './renderers/data.js';
 import { ButtonRenderer, ChecklistRenderer, ItemRenderer, SegmentedRenderer, SelectRenderer, SliderRenderer, SwitchRenderer, TextFieldRenderer } from './renderers/inputs.js';
 import { CommitRenderer, DiffRenderer, FileRenderer, NodeRenderer } from './renderers/links.js';
@@ -37,6 +37,7 @@ export const UI_RENDERERS = {
     Image: ImageRenderer,
     Gallery: GalleryRenderer,
     Compare: CompareRenderer,
+    Model: ModelRenderer,
     Map: MapRenderer,
     Place: null,
     Sources: SourcesRenderer,

package/dist/chat/ui/intelligent-ui/renderers/content.d.ts

@@ -4,6 +4,7 @@ export declare function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'Cod
 export declare function ImageRenderer({ node, children, context }: UiRendererProps<UiProps<'Image'>>): import("react").JSX.Element;
 export declare function GalleryRenderer({ node, children }: UiRendererProps<UiProps<'Gallery'>>): import("react").JSX.Element;
 export declare function CompareRenderer({ node, children, context }: UiRendererProps<UiProps<'Compare'>>): import("react").JSX.Element;
+export declare function ModelRenderer({ node, children, context }: UiRendererProps<UiProps<'Model'>>): import("react").JSX.Element;
 export declare function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>): import("react").JSX.Element;
 export interface UiSourceCitationProps {
     number: number;

package/dist/chat/ui/intelligent-ui/renderers/content.js

@@ -2,7 +2,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import clsx from 'clsx';
 import { createContext, useContext, useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
+import { Box } from 'lucide-react';
+import { ErrorBoundary, Icon, Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { useChatHost } from '../../../../host.js';
 import { CodeBlock } from '../../CodeBlock.js';
@@ -95,6 +96,31 @@ export function CompareRenderer({ node, children, context }) {
 function CompareChip({ side, label }) {
     return (_jsx("span", { className: clsx('pointer-events-none absolute top-2 z-20 max-w-2/5 truncate rounded-md bg-surface-raised', side === 'left' ? 'left-2' : 'right-2'), children: _jsx(Pill, { shape: "tag", size: "sm", tone: "muted", children: label }) }));
 }
+/*
+ * The host draws the model, since the chat knows no 3D format. The frame has a fixed height in the reply column,
+ * so a view that loads late never moves the thread. Without a view of the host, or without the bytes, the model
+ * stays a quiet row that names it.
+ */
+export function ModelRenderer({ node, children, context }) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const { attachment, alt } = node.props;
+    const source = host.attachments.useUrl(context.scopeId, context.chatId, attachment);
+    const caption = uiNodeLabel(node);
+    const label = alt ?? (caption === '' ? t('blocks.model.label') : caption);
+    const View = host.ModelView;
+    let body;
+    if (View !== undefined && source.url !== null) {
+        body = (_jsx("div", { role: "group", "aria-label": label, className: "relative h-80 w-full overflow-hidden rounded-lg border border-border bg-surface-sunken", children: _jsx(ErrorBoundary, { label: t('blocks.model.crashed'), resetKeys: [attachment, source.url], compact: true, children: _jsx(View, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, url: source.url, label: label, alt: alt, caption: caption }) }) }));
+    }
+    else if (View !== undefined && source.failure === null) {
+        body = _jsx("div", { "aria-busy": "true", "aria-label": label, className: "h-80 w-full rounded-lg border border-border bg-surface-sunken" });
+    }
+    else {
+        body = (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs", children: [_jsx(Icon, { icon: Box, size: 14, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate text-text", children: alt ?? attachment }), _jsx("span", { className: "ml-auto shrink-0 text-text-faint", children: source.failure === null ? t('blocks.model.label') : t('blocks.model.unavailable') })] }));
+    }
+    return (_jsxs("figure", { className: "flex flex-col items-start gap-1.5 px-2", children: [body, caption !== '' && _jsx("figcaption", { className: "text-xs text-text-muted", children: children })] }));
+}
 export function SourcesRenderer({ node, children }) {
     const { t } = useTranslation('agent-chat');
     const headingId = useId();

package/dist/host.d.ts

@@ -162,6 +162,15 @@ export type UiMapSource = {
     state: 'off';
     reason: 'disabled' | 'signed-out' | 'unavailable';
 };
+export interface UiModelViewProps {
+    scopeId: string;
+    chatId: string;
+    attachmentId: string;
+    url: string;
+    label: string;
+    alt?: string;
+    caption: string;
+}
 export interface ChatHost {
     intelligentUi?: {
         subscribe?(scopeId: string, chatId: string, changed: () => void): () => void;
@@ -195,6 +204,7 @@ export interface ChatHost {
     ReadImage: ComponentType<{
         path: string;
     }> | null;
+    ModelView?: ComponentType<UiModelViewProps>;
     MarkdownImage?: ComponentType<{
         path: string;
         alt: string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type ReplyAuthor, type ChatHost, type UiMapSource, type CommandLook, type CommandLookMatch, type CommandName, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
+export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type ReplyAuthor, type ChatHost, type UiMapSource, type UiModelViewProps, type CommandLook, type CommandLookMatch, type CommandName, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
 export { type ChatScope, ChatScopeContext, useChatScope } from './scope.js';
 export { type ChatRequestMap, type ChatEventMap, type ChatTransportStatus, type ChatTransport, ChatTransportError, errorCode, isConnectionError } from './transport.js';
 export { portTransport, type PortTransport } from './port-transport.js';

package/dist/locales/en/agent-chat.d.ts

@@ -621,6 +621,11 @@ declare const _default: {
             label: string;
             unavailable: string;
         };
+        model: {
+            label: string;
+            unavailable: string;
+            crashed: string;
+        };
         sources: string;
         citation: string;
         outsideProject: string;

package/dist/locales/en/agent-chat.js

@@ -621,6 +621,11 @@ export default {
             label: 'Image',
             unavailable: 'The image is not available'
         },
+        model: {
+            label: '3D model',
+            unavailable: 'The model is not available',
+            crashed: 'This model failed to render'
+        },
         sources: 'Sources',
         citation: 'Source {{number}}: {{title}}',
         outsideProject: 'Outside the project, shown as text',

package/dist/locales/nl/agent-chat.d.ts

@@ -621,6 +621,11 @@ declare const _default: {
             label: string;
             unavailable: string;
         };
+        model: {
+            label: string;
+            unavailable: string;
+            crashed: string;
+        };
         sources: string;
         citation: string;
         outsideProject: string;

package/dist/locales/nl/agent-chat.js

@@ -621,6 +621,11 @@ export default {
             label: 'Afbeelding',
             unavailable: 'De afbeelding is niet beschikbaar'
         },
+        model: {
+            label: '3D-model',
+            unavailable: 'Het model is niet beschikbaar',
+            crashed: 'Dit model kon niet worden getekend'
+        },
         sources: 'Bronnen',
         citation: 'Bron {{number}}: {{title}}',
         outsideProject: 'Buiten het project, als tekst getoond',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.27.5",
+  "version": "0.28.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.27.5",
-    "@adecore/editor": "0.27.5",
-    "@adecore/editor-react": "0.27.5",
-    "@adecore/intelligent-ui": "0.27.5",
-    "@adecore/merge": "0.27.5",
+    "@adecore/agent-contracts": "0.28.0",
+    "@adecore/editor": "0.28.0",
+    "@adecore/editor-react": "0.28.0",
+    "@adecore/intelligent-ui": "0.28.0",
+    "@adecore/merge": "0.28.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.27.5",
+    "@adecore/ui": "^0.28.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.27.5",
+    "@adecore/ui": "0.28.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/intelligent-ui/registry.ts

@@ -1,7 +1,7 @@
 import type { UiRenderers } from './render-context';
 import { ChartRenderer } from './renderers/chart';
 import { ChoiceRenderer, ChoicesRenderer } from './renderers/choices';
-import { CodeBlockRenderer, CompareRenderer, GalleryRenderer, ImageRenderer, SourceRenderer, SourcesRenderer } from './renderers/content';
+import { CodeBlockRenderer, CompareRenderer, GalleryRenderer, ImageRenderer, ModelRenderer, SourceRenderer, SourcesRenderer } from './renderers/content';
 import { EntityListRenderer, EntryRenderer, StatRenderer, StatsRenderer, TableRenderer } from './renderers/data';
 import {
     ButtonRenderer,
@@ -57,6 +57,7 @@ export const UI_RENDERERS: UiRenderers = {
     Image: ImageRenderer,
     Gallery: GalleryRenderer,
     Compare: CompareRenderer,
+    Model: ModelRenderer,
     Map: MapRenderer,
     Place: null,
     Sources: SourcesRenderer,

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -1,8 +1,9 @@
 import clsx from 'clsx';
 import { createContext, useContext, useId, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Box } from 'lucide-react';
 import type { UiProps } from '@adecore/intelligent-ui';
-import { Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
+import { ErrorBoundary, Icon, Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { useChatHost } from '../../../../host';
 import { CodeBlock } from '../../CodeBlock';
@@ -187,6 +188,55 @@ function CompareChip({ side, label }: { side: 'left' | 'right'; label: string })
     );
 }
 
+/*
+ * The host draws the model, since the chat knows no 3D format. The frame has a fixed height in the reply column,
+ * so a view that loads late never moves the thread. Without a view of the host, or without the bytes, the model
+ * stays a quiet row that names it.
+ */
+export function ModelRenderer({ node, children, context }: UiRendererProps<UiProps<'Model'>>) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const { attachment, alt } = node.props;
+    const source = host.attachments.useUrl(context.scopeId, context.chatId, attachment);
+    const caption = uiNodeLabel(node);
+    const label = alt ?? (caption === '' ? t('blocks.model.label') : caption);
+    const View = host.ModelView;
+    let body: ReactNode;
+    if (View !== undefined && source.url !== null) {
+        body = (
+            <div role="group" aria-label={label} className="relative h-80 w-full overflow-hidden rounded-lg border border-border bg-surface-sunken">
+                <ErrorBoundary label={t('blocks.model.crashed')} resetKeys={[attachment, source.url]} compact>
+                    <View
+                        scopeId={context.scopeId}
+                        chatId={context.chatId}
+                        attachmentId={attachment}
+                        url={source.url}
+                        label={label}
+                        alt={alt}
+                        caption={caption}
+                    />
+                </ErrorBoundary>
+            </div>
+        );
+    } else if (View !== undefined && source.failure === null) {
+        body = <div aria-busy="true" aria-label={label} className="h-80 w-full rounded-lg border border-border bg-surface-sunken" />;
+    } else {
+        body = (
+            <div className="flex w-full min-w-0 items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs">
+                <Icon icon={Box} size={14} className="shrink-0 text-text-muted" />
+                <span className="min-w-0 truncate text-text">{alt ?? attachment}</span>
+                <span className="ml-auto shrink-0 text-text-faint">{source.failure === null ? t('blocks.model.label') : t('blocks.model.unavailable')}</span>
+            </div>
+        );
+    }
+    return (
+        <figure className="flex flex-col items-start gap-1.5 px-2">
+            {body}
+            {caption !== '' && <figcaption className="text-xs text-text-muted">{children}</figcaption>}
+        </figure>
+    );
+}
+
 export function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>) {
     const { t } = useTranslation('agent-chat');
     const headingId = useId();

package/src/host.ts

@@ -260,6 +260,23 @@ export type UiMapSource =
       }
     | { state: 'off'; reason: 'disabled' | 'signed-out' | 'unavailable' };
 
+/*
+ * What the host's view of a Model block gets. It is drawn only once the attachment has a URL, inside a frame
+ * of fixed height that the block sizes and captions itself, so the view fills its parent and draws no caption.
+ */
+export interface UiModelViewProps {
+    scopeId: string;
+    chatId: string;
+    attachmentId: string;
+    /* The attachment's bytes, as `attachments.useUrl` resolved them. */
+    url: string;
+    /* What the model shows, for a screen reader: the block's alt, its caption, or a word for a 3D model. */
+    label: string;
+    alt?: string;
+    /* The caption as plain text, empty without one. */
+    caption: string;
+}
+
 /*
  * What the app around the chat decides and the chat cannot, handed to the views by a `ChatHostProvider`.
  * Whatever an app leaves out keeps the default here, which is the chat without that part. One host may
@@ -313,6 +330,8 @@ export interface ChatHost {
     };
     /* The image a tool read, drawn under its row; null draws none. */
     ReadImage: ComponentType<{ path: string }> | null;
+    /* The 3D view of a Model block; left out, a model shows as a row with its name and caption. */
+    ModelView?: ComponentType<UiModelViewProps>;
     /* An image a reply's markdown names by a path on the host's machine, absolute or under the chat's cwd; left out, the `<img>` stays as written. */
     MarkdownImage?: ComponentType<{ path: string; alt: string }>;
     code: {

package/src/index.ts

@@ -15,6 +15,7 @@ export {
     type ReplyAuthor,
     type ChatHost,
     type UiMapSource,
+    type UiModelViewProps,
     type CommandLook,
     type CommandLookMatch,
     type CommandName,

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

@@ -621,6 +621,11 @@ export default {
             label: 'Image',
             unavailable: 'The image is not available'
         },
+        model: {
+            label: '3D model',
+            unavailable: 'The model is not available',
+            crashed: 'This model failed to render'
+        },
         sources: 'Sources',
         citation: 'Source {{number}}: {{title}}',
         outsideProject: 'Outside the project, shown as text',

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

@@ -621,6 +621,11 @@ export default {
             label: 'Afbeelding',
             unavailable: 'De afbeelding is niet beschikbaar'
         },
+        model: {
+            label: '3D-model',
+            unavailable: 'Het model is niet beschikbaar',
+            crashed: 'Dit model kon niet worden getekend'
+        },
         sources: 'Bronnen',
         citation: 'Bron {{number}}: {{title}}',
         outsideProject: 'Buiten het project, als tekst getoond',