@adecore/agents-react 0.26.2 → 0.26.3

package/dist/chat/ui/Markdown.js

@@ -112,6 +112,36 @@ function MarkdownLink({ href, children }) {
 function ExternalLink({ href, children }) {
     return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", children: children }));
 }
+/*
+ * The path on the host's machine an image target names, or null for a URL and for a relative path
+ * nobody gave a folder for. react-markdown has already emptied a target of a scheme it distrusts.
+ */
+function localImagePath(src, cwd) {
+    if (src === '' || /^[a-z][a-z0-9+.-]*:/i.test(src)) {
+        return null;
+    }
+    const target = hrefPath(src);
+    if (target.startsWith('/')) {
+        return target;
+    }
+    if (cwd === null) {
+        return null;
+    }
+    return `${cwd.replace(/\/+$/, '')}/${target.replace(/^\.\//, '')}`;
+}
+/* A markdown image, which only the host can read when it names a file on its machine. */
+function MarkdownImage({ src, alt }) {
+    const { MarkdownImage: HostImage } = useChatHost();
+    const cwd = useFileLinkCwd();
+    const path = typeof src === 'string' ? localImagePath(src, cwd) : null;
+    if (HostImage === undefined || path === null) {
+        return _jsx("img", { src: src, alt: alt });
+    }
+    return _jsx(HostImage, { path: path, alt: alt ?? '' });
+}
+function PlainImage({ src, alt }) {
+    return _jsx("img", { src: src, alt: alt });
+}
 /* A ```mermaid fence, which draws what it says. */
 function Diagram({ code }) {
     const { t } = useTranslation('agent-chat');
@@ -135,6 +165,7 @@ const components = {
     a({ href, children }) {
         return _jsx(MarkdownLink, { href: href, children: children });
     },
+    img: MarkdownImage,
     table({ children }) {
         // A table wider than the column scrolls on its own instead of pushing the thread sideways.
         return (_jsx("div", { className: "chat-table", children: _jsx("table", { children: children }) }));
@@ -146,7 +177,8 @@ const plainComponents = {
     code({ className, children }) {
         return (_jsx(MarkdownCode, { className: className, plain: true, children: children }));
     },
-    a: ExternalLink
+    a: ExternalLink,
+    img: PlainImage
 };
 // A reply sits under the heading of its message, an `h3`, so its own headings start one level below
 // that. Only `aria-level` moves. The tag stays, since the styles and a copy of the thread read it.

package/dist/host.d.ts

@@ -195,6 +195,10 @@ export interface ChatHost {
     ReadImage: ComponentType<{
         path: string;
     }> | null;
+    MarkdownImage?: ComponentType<{
+        path: string;
+        alt: string;
+    }>;
     code: {
         useMode(): 'light' | 'dark';
         useThemes(): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.26.2",
+  "version": "0.26.3",
   "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.26.2",
-    "@adecore/editor": "0.26.2",
-    "@adecore/editor-react": "0.26.2",
-    "@adecore/intelligent-ui": "0.26.2",
-    "@adecore/merge": "0.26.2",
+    "@adecore/agent-contracts": "0.26.3",
+    "@adecore/editor": "0.26.3",
+    "@adecore/editor-react": "0.26.3",
+    "@adecore/intelligent-ui": "0.26.3",
+    "@adecore/merge": "0.26.3",
     "@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.26.2",
+    "@adecore/ui": "^0.26.3",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.26.2",
+    "@adecore/ui": "0.26.3",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/Markdown.tsx

@@ -161,6 +161,39 @@ function ExternalLink({ href, children }: { href?: string; children?: ReactNode
     );
 }
 
+/*
+ * The path on the host's machine an image target names, or null for a URL and for a relative path
+ * nobody gave a folder for. react-markdown has already emptied a target of a scheme it distrusts.
+ */
+function localImagePath(src: string, cwd: string | null): string | null {
+    if (src === '' || /^[a-z][a-z0-9+.-]*:/i.test(src)) {
+        return null;
+    }
+    const target = hrefPath(src);
+    if (target.startsWith('/')) {
+        return target;
+    }
+    if (cwd === null) {
+        return null;
+    }
+    return `${cwd.replace(/\/+$/, '')}/${target.replace(/^\.\//, '')}`;
+}
+
+/* A markdown image, which only the host can read when it names a file on its machine. */
+function MarkdownImage({ src, alt }: { src?: string; alt?: string }) {
+    const { MarkdownImage: HostImage } = useChatHost();
+    const cwd = useFileLinkCwd();
+    const path = typeof src === 'string' ? localImagePath(src, cwd) : null;
+    if (HostImage === undefined || path === null) {
+        return <img src={src} alt={alt} />;
+    }
+    return <HostImage path={path} alt={alt ?? ''} />;
+}
+
+function PlainImage({ src, alt }: { src?: string; alt?: string }) {
+    return <img src={src} alt={alt} />;
+}
+
 /* A ```mermaid fence, which draws what it says. */
 function Diagram({ code }: { code: string }) {
     const { t } = useTranslation('agent-chat');
@@ -190,6 +223,7 @@ const components = {
     a({ href, children }: { href?: string; children?: ReactNode }) {
         return <MarkdownLink href={href}>{children}</MarkdownLink>;
     },
+    img: MarkdownImage,
     table({ children }: { children?: ReactNode }) {
         // A table wider than the column scrolls on its own instead of pushing the thread sideways.
         return (
@@ -210,7 +244,8 @@ const plainComponents = {
             </MarkdownCode>
         );
     },
-    a: ExternalLink
+    a: ExternalLink,
+    img: PlainImage
 };
 
 // A reply sits under the heading of its message, an `h3`, so its own headings start one level below

package/src/host.ts

@@ -313,6 +313,8 @@ export interface ChatHost {
     };
     /* The image a tool read, drawn under its row; null draws none. */
     ReadImage: ComponentType<{ path: string }> | null;
+    /* 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: {
         useMode(): 'light' | 'dark';
         /* The Shiki theme ids code is drawn in, one per mode. */