- {children}
-
- ),
- code: ({
- children,
- className,
- ...props
- }: React.ComponentPropsWithoutRef<'code'> & { className?: string }): React.ReactElement => {
- const isBlock = className?.startsWith('language-') || className?.startsWith('hljs');
- if (isBlock) {
+// Matches artifact paths (forward- and back-slash safe); groups: [1] runId, [2] filename
+const ARTIFACT_PATH_RE = /artifacts[/\\]runs[/\\]([a-fA-F0-9-]+)[/\\](.+)/;
+
+function extractArtifactInfo(text: string): { runId: string; filename: string } | null {
+ const match = ARTIFACT_PATH_RE.exec(text);
+ if (!match) return null;
+ const filename = match[2].replace(/\\/g, '/');
+ if (filename.split('/').some(s => s === '..')) return null;
+ return {
+ runId: match[1],
+ filename,
+ };
+}
+
+function makeMarkdownComponents(
+ onArtifactClick: (runId: string, filename: string) => void
+): Components {
+ return {
+ pre: ({ children, ...props }: React.ComponentPropsWithoutRef<'pre'>): React.ReactElement => (
+
+ {children}
+
+ ),
+ code: ({
+ children,
+ className,
+ ...props
+ }: React.ComponentPropsWithoutRef<'code'> & { className?: string }): React.ReactElement => {
+ const isBlock = className?.startsWith('language-') || className?.startsWith('hljs');
+ if (isBlock) {
+ return (
+
+ {children}
+
+ );
+ }
+ if (typeof children === 'string') {
+ const artifact = extractArtifactInfo(children);
+ if (artifact) {
+ const { runId, filename } = artifact;
+ const displayName = filename.split('/').pop() ?? filename;
+ if (filename.endsWith('.md')) {
+ return (
+
+ );
+ }
+ const encodedFilename = filename.split('/').map(encodeURIComponent).join('/');
+ return (
+
+ {displayName}
+
+ );
+ }
+ }
return (
-
+
{children}
);
- }
- return (
- ): React.ReactElement => (
+
+ {children}
+
+ ),
+ blockquote: ({
+ children,
+ ...props
+ }: React.ComponentPropsWithoutRef<'blockquote'>): React.ReactElement => (
+
+ {children}
+
+ ),
+ a: ({ children, ...props }: React.ComponentPropsWithoutRef<'a'>): React.ReactElement => (
+
{children}
-
- );
- },
- table: ({ children, ...props }: React.ComponentPropsWithoutRef<'table'>): React.ReactElement => (
-
- {children}
-
- ),
- blockquote: ({
- children,
- ...props
- }: React.ComponentPropsWithoutRef<'blockquote'>): React.ReactElement => (
-
- {children}
-
- ),
- a: ({ children, ...props }: React.ComponentPropsWithoutRef<'a'>): React.ReactElement => (
-
- {children}
-
- ),
-};
+
+ ),
+ };
+}
/** Detect if a string is a complete JSON object/array */
function isJsonString(str: string): boolean {
@@ -88,6 +140,17 @@ function MessageBubbleRaw({ message }: MessageBubbleProps): React.ReactElement {
const isUser = message.role === 'user';
const isThinking = message.isStreaming && !message.content;
const [copied, setCopied] = useState(false);
+ const [artifactViewer, setArtifactViewer] = useState<{ runId: string; filename: string } | null>(
+ null
+ );
+ // setArtifactViewer is a stable React state setter — empty dep array is intentional
+ const markdownComponents = useMemo(
+ () =>
+ makeMarkdownComponents((runId, filename) => {
+ setArtifactViewer({ runId, filename });
+ }),
+ []
+ );
const copyMessage = (): void => {
void navigator.clipboard.writeText(message.content).then(() => {
@@ -99,97 +162,109 @@ function MessageBubbleRaw({ message }: MessageBubbleProps): React.ReactElement {
};
return (
-
-
- {isUser ? (
-
-
-
- {message.content}
-
-
-
- {message.files && message.files.length > 0 && (
-
- {message.files.map((file: FileAttachment) => (
-
-
+ {message.content}
+
+
- )}
- {isJsonString(message.content) ? (
-
-
-
- JSON output
-
-
-
- {JSON.stringify(JSON.parse(message.content.trim()) as unknown, null, 2)}
-
-
- ) : (
-
- {message.content}
-
- )}
- {message.isStreaming && message.content && (
-
- )}
-
- )}
+ {message.files && message.files.length > 0 && (
+
+ {message.files.map((file: FileAttachment) => (
+
+
+
+ JSON output
+
+
+
+ {JSON.stringify(JSON.parse(message.content.trim()) as unknown, null, 2)}
+
+
+ ) : (
+
+ {message.content}
+
+ )}
+ {message.isStreaming && message.content && (
+
+ )}
+
+ )}
- {!isThinking && (
-
- {new Date(message.timestamp).toLocaleTimeString()}
-
- )}
+ {!isThinking && (
+
+ {new Date(message.timestamp).toLocaleTimeString()}
+
+ )}
+
-
+ {artifactViewer && (
+ {
+ setArtifactViewer(null);
+ }}
+ runId={artifactViewer.runId}
+ filename={artifactViewer.filename}
+ />
+ )}
+
);
}
diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx
index 59a8c30298..447ad4616d 100644
--- a/packages/web/src/components/chat/MessageList.tsx
+++ b/packages/web/src/components/chat/MessageList.tsx
@@ -1,6 +1,6 @@
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { type Components } from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { ArrowDown, Sparkles, ArrowRight, MessageSquare } from 'lucide-react';
import { Button } from '@/components/ui/button';
@@ -8,22 +8,83 @@ import { MessageBubble } from './MessageBubble';
import { ToolCallCard } from './ToolCallCard';
import { ErrorCard } from './ErrorCard';
import { WorkflowProgressCard } from './WorkflowProgressCard';
+import { ArtifactViewerModal } from '@/components/workflows/ArtifactViewerModal';
import { useAutoScroll } from '@/hooks/useAutoScroll';
import type { ChatMessage } from '@/lib/types';
-// Hoisted to module scope to prevent new references on every render
-const WORKFLOW_RESULT_MARKDOWN_COMPONENTS = {
- a: ({ children, ...props }: React.ComponentPropsWithoutRef<'a'>): React.ReactElement => (
-
- {children}
-
- ),
-};
+// Matches artifact paths (forward- and back-slash safe); groups: [1] runId, [2] filename
+const ARTIFACT_PATH_RE = /artifacts[/\\]runs[/\\]([a-fA-F0-9-]+)[/\\](.+)/;
+
+function extractArtifactInfo(text: string): { runId: string; filename: string } | null {
+ const match = ARTIFACT_PATH_RE.exec(text);
+ if (!match) return null;
+ const filename = match[2].replace(/\\/g, '/');
+ if (filename.split('/').some(s => s === '..')) return null;
+ return { runId: match[1], filename };
+}
+
+function makeResultMarkdownComponents(
+ onArtifactClick: (runId: string, filename: string) => void
+): Components {
+ return {
+ a: ({ children, ...props }: React.ComponentPropsWithoutRef<'a'>): React.ReactElement => (
+
+ {children}
+
+ ),
+ code: ({
+ children,
+ className,
+ ...props
+ }: React.ComponentPropsWithoutRef<'code'> & { className?: string }): React.ReactElement => {
+ const isBlock = className?.startsWith('language-') || className?.startsWith('hljs');
+ if (isBlock) {
+ return (
+
+ {children}
+
+ );
+ }
+ if (typeof children === 'string') {
+ const artifact = extractArtifactInfo(children);
+ if (artifact) {
+ const { runId, filename } = artifact;
+ const displayName = filename.split('/').pop() ?? filename;
+ const encodedFilename = filename.split('/').map(encodeURIComponent).join('/');
+ const artifactHref = `/api/artifacts/${encodeURIComponent(runId)}/${encodedFilename}`;
+ return (
+ {
+ e.preventDefault();
+ onArtifactClick(runId, filename);
+ }
+ : undefined
+ }
+ target={filename.endsWith('.md') ? undefined : '_blank'}
+ rel={filename.endsWith('.md') ? undefined : 'noopener noreferrer'}
+ className="!text-accent-bright hover:!text-primary font-mono font-medium underline decoration-accent-bright/40 hover:decoration-accent-bright"
+ >
+ {displayName}
+
+ );
+ }
+ }
+ return (
+
+ {children}
+
+ );
+ },
+ };
+}
function WorkflowResultCard({
workflowName,
@@ -36,6 +97,19 @@ function WorkflowResultCard({
}): React.ReactElement {
const navigate = useNavigate();
const [expanded, setExpanded] = useState(false);
+ const [artifactViewer, setArtifactViewer] = useState<{
+ runId: string;
+ filename: string;
+ } | null>(null);
+
+ // setArtifactViewer is a stable React state setter — empty dep array is intentional
+ const mdComponents = useMemo(
+ () =>
+ makeResultMarkdownComponents((aRunId, filename) => {
+ setArtifactViewer({ runId: aRunId, filename });
+ }),
+ []
+ );
const lines = content.split('\n');
const isTruncatable = content.length > 500 || lines.length > 8;
@@ -47,42 +121,51 @@ function WorkflowResultCard({
const displayContent = expanded || !isTruncatable ? content : preview;
return (
-
-
- ✓
-
- Workflow complete: {workflowName}
-
-
-
-
-
-
- {displayContent}
-
-
- {isTruncatable && (
+ <>
+
+
+ ✓
+
+ Workflow complete: {workflowName}
+
- )}
+
+
+
+
+ {displayContent}
+
+
+ {isTruncatable && (
+
+ )}
+
-
+ {artifactViewer && (
+ {
+ setArtifactViewer(null);
+ }}
+ runId={artifactViewer.runId}
+ filename={artifactViewer.filename}
+ />
+ )}
+
);
}
diff --git a/packages/workflows/src/store.ts b/packages/workflows/src/store.ts
index da4e832093..9d9a85e275 100644
--- a/packages/workflows/src/store.ts
+++ b/packages/workflows/src/store.ts
@@ -26,6 +26,7 @@ export const WORKFLOW_EVENT_TYPES = [
'approval_requested',
'approval_received',
'workflow_cancelled',
+ 'workflow_artifact',
] as const;
export type WorkflowEventType = (typeof WORKFLOW_EVENT_TYPES)[number];