Skip to content

feat(web): make artifact file paths clickable in chat messages #1016

@coleam00

Description

@coleam00

Problem

When workflow output references artifact files (e.g., completion reports, PRD documents), the file paths appear as inline code in the chat view but are not clickable. Users cannot view artifact content without manually copying the path or navigating to the workflow execution view.

Current Behavior

In the chat view for "Fix GitHub Issue 11":

Artifacts
• Completion report: C:\Users\colem\.archon\workspaces\coleam00\rag-youtube-chat\artifacts\runs\788ab93...\completion-report.md
• GitHub comment: https://github.com/coleam00/rag-youtube-chat/issues/11#issuecomment-4209249926
  • The GitHub URL is a clickable link (rendered by ReactMarkdown's <a> component)
  • The artifact file path is rendered as monospace code text — NOT clickable
  • No way to view the artifact content from the chat

Meanwhile in the Workflow Execution View

The ArtifactSummary component (packages/web/src/components/workflows/ArtifactSummary.tsx) already has clickable artifact labels that open an ArtifactViewerModal — this fetches content from /api/artifacts/{runId}/{filename} and renders markdown in a modal dialog.

This capability exists but is NOT available in the chat view.

Expected Behavior

File paths that match the artifact directory pattern should be rendered as clickable links that:

  1. Open the ArtifactViewerModal for .md files (reuse existing component)
  2. Or download/open in a new tab for other file types
  3. Detect the pattern: paths containing /artifacts/runs/{uuid}/ or \artifacts\runs\{uuid}\

Technical Context

Markdown rendering pipeline (packages/web/src/components/chat/MessageBubble.tsx):

  • Uses react-markdown with remarkGfm + remarkBreaks + rehypeHighlight
  • Custom MARKDOWN_COMPONENTS override <a>, <pre>, <code>, <table>, <blockquote>
  • The <a> override (line 59-68) opens all links in new tabs — but artifact paths never become <a> tags because they're backtick-wrapped in the AI output, making them <code> elements instead

Artifact API: GET /api/artifacts/:runId/* serves artifact files — already exists and works

Existing components:

  • ArtifactViewerModal (line 71-122 in ArtifactViewerModal.tsx): Fetches and renders artifact markdown in a dialog
  • ArtifactSummary: Renders clickable artifact labels in the workflow execution view

Suggested Approach

  1. Add a custom <code> renderer in MessageBubble.tsx's MARKDOWN_COMPONENTS that detects artifact paths
  2. Pattern match: If inline code content matches artifacts/runs/{uuid}/{filename}, render as a clickable link instead of plain code
  3. Extract runId and filename from the path to construct the /api/artifacts/{runId}/{filename} URL
  4. Reuse ArtifactViewerModal for .md files, or open a new tab for other types
  5. Alternative: Add a rehype plugin that transforms artifact-path code nodes into links during markdown processing

This is lower effort than it seems since the artifact viewing infrastructure already exists — it just needs to be wired into the chat markdown renderer.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: webWeb UI (packages/web) - React frontendfeatureNew functionality (planned)uxUser experience improvements

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions