selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2026-02-04 09:56:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

transcription UI

Browse Source
This commit is contained in:
Igor Loskutov
2026-01-13 18:36:28 -05:00
parent 807b954340
commit 13a3ec6148
2 changed files with 45 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
www/app/(app)/transcripts/[transcriptId]/page.tsx
View File

@@ -272,13 +272,34 @@ export default function TranscriptDetails(details: TranscriptDetails) {
onTopicClick={handleTopicClick}
/>
{/* Transcript with colored gutter (bottom section - normal document flow) */}
{/* Transcript with colored gutter (bottom section - scrollable container) */}
{topics.topics && topics.topics.length > 0 && (
<TranscriptWithGutter
topics={topics.topics}
getSpeakerName={getSpeakerName}
onGutterClick={handleGutterClick}
/>
<Box
overflowY="auto"
maxH="600px"
pr={2}
css={{
"&::-webkit-scrollbar": {
width: "8px",
},
"&::-webkit-scrollbar-track": {
background: "transparent",
},
"&::-webkit-scrollbar-thumb": {
background: "#CBD5E0",
borderRadius: "4px",
},
"&::-webkit-scrollbar-thumb:hover": {
background: "#A0AEC0",
},
}}
>
<TranscriptWithGutter
topics={topics.topics}
getSpeakerName={getSpeakerName}
onGutterClick={handleGutterClick}
/>
</Box>
)}
{/* Final Summary (at bottom) */}

18
www/app/lib/topicColors.ts Normal file
View File

@@ -0,0 +1,18 @@
// Predefined color palette for topics
// Colors chosen for good contrast and visual distinction
export const TOPIC_COLORS = [
"#3B82F6", // blue
"#10B981", // green
"#F59E0B", // amber
"#EF4444", // red
"#8B5CF6", // violet
"#EC4899", // pink
"#14B8A6", // teal
"#F97316", // orange
"#6366F1", // indigo
"#84CC16", // lime
] as const;
export function getTopicColor(topicIndex: number): string {
return TOPIC_COLORS[topicIndex % TOPIC_COLORS.length];
}