## Summary
Add comprehensive UI components and hooks for displaying call recording
summaries and transcripts on calendar event pages. This includes
markdown parsing for summaries, diarized transcript rendering, and data
fetching hooks integrated with the Twenty SDK.
## Key Changes
### New Hooks
- `useCalendarEventSummary`: Fetches and manages summary markdown for a
calendar event's call recordings
- `useCalendarEventTranscript`: Fetches and manages transcript data for
a calendar event's call recordings
### Summary Components
- `CalendarEventSummary`: Top-level component that displays summary for
selected calendar event
- `CalendarEventSummaryContent`: Container with header and content frame
- `CalendarEventSummaryBody`: Handles loading, error, and empty states
- `SummaryMarkdown`: Renders parsed markdown with support for headings,
lists, and paragraphs
- `SummaryInlineSegments`: Renders inline text with bold formatting
support
### Transcript Components
- `CalendarEventTranscript`: Top-level component that displays
transcript for selected calendar event
- `CalendarEventTranscriptContent`: Container with header and scrollable
content frame
- `CalendarEventTranscriptBody`: Handles loading, error, and empty
states
- `TranscriptEntryList`: Renders list of transcript entries
- `TranscriptEntryListItem`: Individual transcript entry with speaker
avatar, timestamp, and text
- `TranscriptErrorBox`: Styled error state display
### Utilities
- `parseSummaryMarkdownBlocks`: Parses markdown into structured blocks
(headings, lists, paragraphs)
- `parseSummaryInlineSegments`: Parses inline markdown for bold text
formatting
- `parseTranscriptEntries`: Parses diarized transcript format into
structured entries with speaker info and timestamps
- `formatSecondsAsClockTimestamp`: Formats seconds into HH:MM:SS or
MM:SS format
- `asRecord`: Type guard utility for converting values to records
### Page Layout Configuration
- `calendar-event-summary-tab.ts`: Defines Summary tab for calendar
event page layout
- `calendar-event-transcript-tab.ts`: Defines Transcript tab for
calendar event page layout
- Front component definitions for both summary and transcript
### Types
- `TranscriptEntry` and `TranscriptWord`: Structured transcript data
types
- `SummaryMarkdownBlock`: Block-level markdown structure
- `SummaryInlineSegment`: Inline text segment with formatting
## Implementation Details
- Uses `CoreApiClient` from Twenty SDK to query call recordings filtered
by calendar event ID
- Implements proper cleanup with cancellation tokens to prevent state
updates on unmounted components
- Supports both loading and error states with user-friendly messaging
- Markdown parser handles headings (h1-h6), bullet lists, and paragraphs
with inline bold formatting
- Transcript parser validates diarized format and gracefully handles
malformed entries
- Styled with emotion and theme constants from twenty-ui for consistent
design
- Integrates with `useSelectedRecordIds` hook to track selected calendar
event
https://github.com/user-attachments/assets/0bd63590-bb1e-4f89-8b96-e3fbb659473e
<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22667?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
nitin
545de99476
