Skip to content

AgentAttachedDocuments

AgentAttachedDocuments renders the canonical documents attached to the agent's grounding context. Each document is displayed with a MIME type icon, file name, file size, and a source badge indicating where the document originated (e.g., knowledge base, SharePoint, upload).

Import

import { AgentAttachedDocuments } from "@modernpath/agent-ui-react";

Props

Name Type Required Default Description
data any Yes -- Agent response data object. The component reads data.groundingContext.canonicalDocuments to extract attached document metadata.

Expected Data Path

The component accesses data.groundingContext.canonicalDocuments, which conforms to the GroundingContextCanonicalDocuments type:

interface GroundingContextCanonicalDocuments {
  /** Array of canonical documents */
  documents: Array<{
    /** Document display name */
    name: string;
    /** MIME type (e.g., "application/pdf", "text/plain") */
    mimeType: string;
    /** File size in bytes */
    sizeBytes?: number;
    /** Source identifier */
    source: string;
    /** Source type badge label */
    sourceType?: "knowledge-base" | "sharepoint" | "upload" | "url";
    /** Document URI or download link */
    uri?: string;
  }>;
}

Features

MIME Type Icons

Documents display an icon based on their MIME type:

MIME Type Icon
application/pdf PDF icon
text/plain Text file icon
text/html HTML icon
application/vnd.openxmlformats-officedocument.* Office icon
image/* Image icon
Other Generic file icon

File Size Formatting

File sizes are formatted in human-readable units (e.g., 1.2 MB, 340 KB, 15 B).

Source Badges

Each document shows a colored badge indicating its source:

Source Type Badge Color Label
knowledge-base Blue KB
sharepoint Purple SharePoint
upload Green Upload
url Orange URL

Empty State

If data.groundingContext.canonicalDocuments is null, undefined, or contains no documents, the component renders nothing.

Usage

Basic Attached Documents Display

import { AgentAttachedDocuments } from "@modernpath/agent-ui-react";

const responseData = {
  groundingContext: {
    canonicalDocuments: {
      documents: [
        {
          name: "HVAC Troubleshooting Guide v3.pdf",
          mimeType: "application/pdf",
          sizeBytes: 2_450_000,
          source: "knowledge-base-hvac",
          sourceType: "knowledge-base" as const,
          uri: "gs://kb-bucket/hvac-troubleshooting-v3.pdf",
        },
        {
          name: "Building 42 Floor Plan.png",
          mimeType: "image/png",
          sizeBytes: 890_000,
          source: "sharepoint-facilities",
          sourceType: "sharepoint" as const,
        },
      ],
    },
  },
};

function DocumentsView() {
  return <AgentAttachedDocuments data={responseData} />;
}

Combined with Other Grounding Components

import {
  AgentRetrievedSources,
  AgentAttachedDocuments,
  AgentGroundingPolicy,
} from "@modernpath/agent-ui-react";

function GroundingPanel({ data }: { data: any }) {
  return (
    <div>
      <AgentGroundingPolicy data={data} />
      <h4>Canonical Documents</h4>
      <AgentAttachedDocuments data={data} />
      <h4>Retrieved Chunks</h4>
      <AgentRetrievedSources data={data} />
    </div>
  );
}