PAI Agent UI

Reusable React components for rendering PAI Agent chat widgets.

The package is UI-only. It does not own authentication, GraphQL clients, routing, query cache, or toast systems. Consumers provide those through AgentWidgetAdapter.

Exports

• AgentChatPanel: full chat panel with message area, active AgentRun display, widgets, and composer.
• ChatComposer: chat input with @ entity completion.
• AgentWidgetRenderer: renders Agent widget payloads by widget type.
• EntityTreeEditor: tree editor for PACE JSON files and patch previews.
• JobStatusLine: worker job status/progress display.

Adapter Boundary

import { AgentChatPanel, type AgentWidgetAdapter } from '@pai_platform/pai-agent-ui';

const adapter: AgentWidgetAdapter = {
  selectedProjectId,
  fieldTerms,
  getWorkers,
  submitExecution,
  submitAgentRunWidget,
  patchPaceFiles,
  getJob,
  onDataChanged,
  notify,
};

fieldTerms should come from the backend PACE standard schema, not from a frontend-maintained field table. The built-in frontend derives it from paceStandardSchema(name).

<AgentChatPanel
  agentMode="agent-v2"
  messages={messages}
  runs={agentRuns}
  isWaiting={isWaiting}
  widgetAdapter={adapter}
  messageRoleLabels={{ user: '', assistant: '导演助理Agent', 'agent-v2': '导演助理Agent' }}
  suggestions={entitySuggestions}
  composerDisabled={!canSend}
  composerSending={sending}
  onSend={sendMessage}
/>

The official frontend should map these callbacks to its own GraphQL client and cache invalidation. Do not put app-specific stores or session handling inside this package.

Styles

Import the package stylesheet once:

import '@pai_platform/pai-agent-ui/styles.css';

The product frontend can import the scoped product skin instead. The app only needs to wrap the panel with .agent-v2-panel; package class hooks stay owned by this package:

import '@pai_platform/pai-agent-ui/product.css';