fix(stories): show the source filename on imported clips

Imports were rendering as "Imported Audio" everywhere because every
import points at the singleton voice profile. The filename was already
being stored on the generation row (in the `text` field), so the chat
item title and the timeline clip label now read from `text` when
`engine === 'import'` and fall back to the profile name otherwise. The
chat item also drops the language pill (always "en" on imports — not
informative) and skips the transcript textarea since imports have no
spoken text to show.
This commit is contained in:
Jamie Pine
2026-04-25 02:09:45 -07:00
parent 4e7f8f9bda
commit d526a9e337
2 changed files with 15 additions and 9 deletions
@@ -106,18 +106,24 @@ export function StoryChatItem({
{/* Content */} {/* Content */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className="font-medium text-sm">{item.profile_name}</span> <span className="font-medium text-sm truncate">
<span className="text-xs text-muted-foreground">{item.language}</span> {item.engine === 'import' ? item.text : item.profile_name}
</span>
{item.engine !== 'import' && (
<span className="text-xs text-muted-foreground">{item.language}</span>
)}
<span className="text-xs text-muted-foreground tabular-nums ml-auto"> <span className="text-xs text-muted-foreground tabular-nums ml-auto">
{formatTime(itemStartMs)} {formatTime(itemStartMs)}
</span> </span>
</div> </div>
<Textarea {item.engine === 'import' ? null : (
value={item.text} <Textarea
className="flex-1 resize-none text-sm text-muted-foreground select-text bg-card cursor-text" value={item.text}
readOnly className="flex-1 resize-none text-sm text-muted-foreground select-text bg-card cursor-text"
onDoubleClick={handlePlay} readOnly
/> onDoubleClick={handlePlay}
/>
)}
</div> </div>
{/* Actions */} {/* Actions */}
@@ -1270,7 +1270,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
{/* Clip label */} {/* Clip label */}
<div className="absolute top-0 left-1 right-1 z-10"> <div className="absolute top-0 left-1 right-1 z-10">
<p className="text-[9px] font-medium text-accent-foreground truncate"> <p className="text-[9px] font-medium text-accent-foreground truncate">
{item.profile_name} {item.engine === 'import' ? item.text : item.profile_name}
</p> </p>
</div> </div>
{/* Waveform */} {/* Waveform */}