A reusable React wrapper around `AIEnrichSection` that provides a standardized UI for video transcription and summarization workflows across `CustomerInterview` and `ProductRelease` entities. ## Key Components ### `TranscribeSummarizeSection` The primary export — a client-side React component that delegates rendering to `AIEnrichSection` with transcription-specific defaults. ### `TranscribeSummarizeSectionProps` Full TypeScript interface exposing all configurable props: | Prop | Type | Default | Description | |------|------|---------|-------------| | `onTranscribe` | `() => void` | — | Triggers transcription processing | | `isProcessing` | `boolean` | — | Controls loading state | | `canEnrich` | `boolean` | — | Enables/disables the action button | | `requiredFields` | `AIRequiredField[]` | — | Fields displayed as prerequisites | | `hasResult` | `boolean` | `false` | Switches button label to "Regenerate" | | `disabledMessage` | `string` | `"Upload a video first"` | Shown when button is disabled | | `title` | `string` | `"Transcribe & Summarize"` | Section heading | | `description` | `string` | `"Generate transcript..."` | Section subtext | | `loadingLabel` | `string` | `"Processing..."` | Label during active processing | | `showCancel` | `boolean` | `true` | Toggles cancel button visibility | ## Usage Example ```typescript import { TranscribeSummarizeSection } from './transcribe-summarize-section'; function CustomerInterviewPanel() { const [isProcessing, setIsProcessing] = React.useState(false); return ( setIsProcessing(true)} isProcessing={isProcessing} canEnrich={true} requiredFields={[{ key: 'videoUrl', label: 'Video URL' }]} hasResult={false} onCancel={() => setIsProcessing(false)} status="loading" statusMessage="Transcribing video..." /> ); } ``` The button label automatically toggles between `"Generate"` and `"Regenerate"` based on the `hasResult` prop, or can be fully overridden via `buttonLabel`.