Contact Activity Panel

Backend wiring

ContactActivityPanel is presentational — it renders the timeline and emits callbacks, but owns no network I/O. For Docyrus-backed apps, drive it with useDocyrusContactActivity, which merges the record's audit log, threaded comments, related events, tasks, and status updates into one feed and returns a panelProps bag you spread straight onto the panel:

const activity = useDocyrusContactActivity({ client, appSlug, dataSourceSlug, recordId, relationSlug: 'contact' });

<ContactActivityPanel {...activity.panelProps} />

The barrel also re-exports the hook and its types from @docyrus/ui/components/contact-activity-panel. To compose a timeline and a "log activity" composer on the same record, pair it with LogActivityForm (wired via useDocyrusLogActivity).

Installation

pnpm dlx @docyrus/cli add @docyrus/ui-contact-activity-panel

npx shadcn@latest add avatar button dialog dropdown-menu popover scroller skeleton

Usage

import {
  ContactActivityPanel
} from "@docyrus/ui/components/contact-activity-panel";
import type {
  ContactActivity,
  ContactActivityPanelProps,
  ActivityType,
  ActivityCategory,
  UpcomingActivity,
  RelationshipSummary,
  ContactActivityContact,
  AddActivityAction,
  ChatUser,
  ChatPost,
  PostAttachment,
  PostReaction,
  CreatePostPayload,
  ActivityTypeConfig
} from "@docyrus/ui/components/contact-activity-panel";

<ContactActivityPanel
  contact={{ name: "John Smith", org: "Acme Corp" }}
  activities={activities}
  upcoming={upcoming}
  relationshipSummary={{ lastContactedAt, nextActivityAt, openTaskCount: 1 }}
  width="panel"
  iconStyle="color"
  addActions={addActions}
  onAddActivity={(type) => openComposer(type)}
  renderAddForm={({ type, close }) => <MyQuickAddForm type={type} onDone={close} />}
  renderAiAssistant={({ open, onOpenChange }) => <MyDocyDialog open={open} onOpenChange={onOpenChange} />}
/>

Redesign (v2)

The panel is a typed activity timeline: primary rows (calls, meetings, emails, chats, notes, comments) render as clickable cards that open a detail modal; secondary rows (status changes, files, form submissions, record updates, workflow traces) render as compact one-liners on a shared rail. A category tab bar (All / Communication / Tasks / Updates) plus a grouped type-filter popover scope the feed. Optional regions — a contact header, a relationship-summary + Add + Ask Docy row, and a collapsible Upcoming list — light up when their props are supplied. Ask Docy and the Add menu are slots/emit-only: the panel owns no AI wiring and never opens a composer itself — supply renderAiAssistant / onAddActivity, or hand the "+" a form with renderAddForm. View controls (width, iconStyle, showHeader) are props; dark mode comes from the global DocyThemeProvider.

Quick-add form

onAddActivity only announces the picked type. Pass renderAddForm as well and the panel opens your form in a popover under the "+" — the entry is created where the user clicked instead of in a separate region. The slot receives { type, close }; call close() after a successful submit. With exactly one addActions entry the trigger skips the menu and opens the form directly. useDocyrusLogActivity's logActivityProps drop straight into it (<LogActivityForm {...logActivityProps} activityTypes={[type]} activeType={type} />).

Timestamps

Timeline timestamps count up while the event is recent and become a date once it isn't: now → 5m → 3h → 2d → 3w → 21 Sep → 21 Sep 2025. The units are translation keys (ui.contactActivity.time.*), the absolute form uses the runtime locale, and the full date + time is always on the element's title.

Day groups

The timeline buckets entries by calendar boundaries, not rolling windows — Today, Yesterday, This week, Last week, This month, Last month, Earlier this year, Last year, Older. Empty groups never render. weekStartsOn (default 1, Monday) decides where a week begins.

Documents

An activity's attachments show as a paperclip marker on its row (with the size when there is exactly one) and as document cards in the detail modal — image thumbnails, a per-type icon and a download link for everything else. The Docyrus hook fills them from the record's files and from comment attachments.

Components

Type Exports

Type Reference

ContactActivity

ContactActivityPanelProps

ActivityRelatedEntity

ActivityType

"call" \| "meeting" \| "email" \| "chat" \| "sms" \| "whatsapp" \| "linkedin" \| "note" \| "comment" \| "task" \| "status_update" \| "status" \| "file" \| "form" \| "record" \| "trace" \| "record_create" \| "record_update"

ActivityRelatedEntity

ActivityTypeConfig