mirror of
https://github.com/dograh-hq/dograh.git
synced 2026-06-16 08:25:18 +02:00
fix: fixes aggregation in elevenlabs TTS (#153)
* chore: enhance media preview dialog * fix: fixes elevenlabs tts service
This commit is contained in:
Abhishek
GitHub
parent
cff9674c9e
commit
e1565246fa
7 changed files with 81 additions and 93 deletions
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import { FileText, Loader2, Video } from 'lucide-react';
|
||||
import { Headphones, Loader2 } from 'lucide-react';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
|
@ -20,65 +20,56 @@ interface MediaPreviewDialogProps {
|
|||
|
||||
export function MediaPreviewDialog({ accessToken }: MediaPreviewDialogProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [mediaType, setMediaType] = useState<'audio' | 'transcript' | null>(null);
|
||||
const [mediaSignedUrl, setMediaSignedUrl] = useState<string | null>(null);
|
||||
const [audioSignedUrl, setAudioSignedUrl] = useState<string | null>(null);
|
||||
const [transcriptContent, setTranscriptContent] = useState<string | null>(null);
|
||||
const [selectedRunId, setSelectedRunId] = useState<number | null>(null);
|
||||
const [mediaDownloadKey, setMediaDownloadKey] = useState<string | null>(null);
|
||||
const [recordingKey, setRecordingKey] = useState<string | null>(null);
|
||||
const [transcriptKey, setTranscriptKey] = useState<string | null>(null);
|
||||
const [mediaLoading, setMediaLoading] = useState(false);
|
||||
|
||||
const openAudioModal = useCallback(
|
||||
async (fileKey: string | null, runId: number) => {
|
||||
if (!fileKey || !accessToken) return;
|
||||
setMediaLoading(true);
|
||||
const signed = await getSignedUrl(fileKey, accessToken);
|
||||
if (signed) {
|
||||
setMediaType('audio');
|
||||
setMediaSignedUrl(signed);
|
||||
setMediaDownloadKey(fileKey);
|
||||
setSelectedRunId(runId);
|
||||
setIsOpen(true);
|
||||
}
|
||||
setMediaLoading(false);
|
||||
},
|
||||
[accessToken],
|
||||
);
|
||||
|
||||
const openTranscriptModal = useCallback(
|
||||
async (fileKey: string | null, runId: number) => {
|
||||
if (!fileKey || !accessToken) return;
|
||||
const openPreview = useCallback(
|
||||
async (recordingUrl: string | null, transcriptUrl: string | null, runId: number) => {
|
||||
if (!accessToken || (!recordingUrl && !transcriptUrl)) return;
|
||||
setMediaLoading(true);
|
||||
setAudioSignedUrl(null);
|
||||
setTranscriptContent(null);
|
||||
const signed = await getSignedUrl(fileKey, accessToken, true);
|
||||
if (signed) {
|
||||
setMediaType('transcript');
|
||||
setMediaSignedUrl(signed);
|
||||
setMediaDownloadKey(fileKey);
|
||||
setSelectedRunId(runId);
|
||||
setIsOpen(true);
|
||||
// Fetch transcript content with proper UTF-8 encoding
|
||||
setRecordingKey(recordingUrl);
|
||||
setTranscriptKey(transcriptUrl);
|
||||
setSelectedRunId(runId);
|
||||
setIsOpen(true);
|
||||
|
||||
const [audioResult, transcriptResult] = await Promise.all([
|
||||
recordingUrl ? getSignedUrl(recordingUrl, accessToken) : null,
|
||||
transcriptUrl ? getSignedUrl(transcriptUrl, accessToken, true) : null,
|
||||
]);
|
||||
|
||||
if (audioResult) {
|
||||
setAudioSignedUrl(audioResult);
|
||||
}
|
||||
|
||||
if (transcriptResult) {
|
||||
try {
|
||||
const response = await fetch(signed);
|
||||
const response = await fetch(transcriptResult);
|
||||
const text = await response.text();
|
||||
setTranscriptContent(text);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transcript:', error);
|
||||
}
|
||||
}
|
||||
|
||||
setMediaLoading(false);
|
||||
},
|
||||
[accessToken],
|
||||
);
|
||||
|
||||
return {
|
||||
openAudioModal,
|
||||
openTranscriptModal,
|
||||
openPreview,
|
||||
dialog: (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{mediaType === 'audio' ? 'Recording Preview' : 'Transcript Preview'}
|
||||
Run Preview
|
||||
{selectedRunId && ` - Run #${selectedRunId}`}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
|
@ -90,23 +81,38 @@ export function MediaPreviewDialog({ accessToken }: MediaPreviewDialogProps) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{!mediaLoading && mediaType === 'audio' && mediaSignedUrl && (
|
||||
<audio src={mediaSignedUrl} controls autoPlay className="w-full mt-4" />
|
||||
{!mediaLoading && audioSignedUrl && (
|
||||
<audio src={audioSignedUrl} controls autoPlay className="w-full mt-4" />
|
||||
)}
|
||||
|
||||
{!mediaLoading && mediaType === 'transcript' && transcriptContent && (
|
||||
{!mediaLoading && transcriptContent && (
|
||||
<pre className="w-full h-[60vh] overflow-auto border rounded-md mt-4 p-4 bg-muted text-sm whitespace-pre-wrap font-mono">
|
||||
{transcriptContent}
|
||||
</pre>
|
||||
)}
|
||||
|
||||
{!mediaLoading && !audioSignedUrl && !transcriptContent && (
|
||||
<div className="flex items-center justify-center py-8 text-muted-foreground">
|
||||
No recording or transcript available.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter className="pt-4">
|
||||
<DialogClose asChild>
|
||||
<Button variant="secondary">Close</Button>
|
||||
</DialogClose>
|
||||
{mediaDownloadKey && accessToken && (
|
||||
<Button onClick={() => downloadFile(mediaDownloadKey, accessToken)}>Download</Button>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
{recordingKey && accessToken && (
|
||||
<Button variant="outline" onClick={() => downloadFile(recordingKey, accessToken)}>
|
||||
Download Recording
|
||||
</Button>
|
||||
)}
|
||||
{transcriptKey && accessToken && (
|
||||
<Button variant="outline" onClick={() => downloadFile(transcriptKey, accessToken)}>
|
||||
Download Transcript
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
|
@ -114,53 +120,35 @@ export function MediaPreviewDialog({ accessToken }: MediaPreviewDialogProps) {
|
|||
};
|
||||
}
|
||||
|
||||
interface MediaPreviewButtonsProps {
|
||||
interface MediaPreviewButtonProps {
|
||||
recordingUrl: string | null | undefined;
|
||||
transcriptUrl: string | null | undefined;
|
||||
runId: number;
|
||||
onOpenAudio: (fileKey: string | null, runId: number) => void;
|
||||
onOpenTranscript: (fileKey: string | null, runId: number) => void;
|
||||
onOpenPreview: (recordingUrl: string | null, transcriptUrl: string | null, runId: number) => void;
|
||||
onSelect?: (runId: number) => void;
|
||||
}
|
||||
|
||||
export function MediaPreviewButtons({
|
||||
export function MediaPreviewButton({
|
||||
recordingUrl,
|
||||
transcriptUrl,
|
||||
runId,
|
||||
onOpenAudio,
|
||||
onOpenTranscript,
|
||||
onOpenPreview,
|
||||
onSelect,
|
||||
}: MediaPreviewButtonsProps) {
|
||||
const handleOpenAudio = () => {
|
||||
onSelect?.(runId);
|
||||
onOpenAudio(recordingUrl ?? null, runId);
|
||||
};
|
||||
}: MediaPreviewButtonProps) {
|
||||
if (!recordingUrl && !transcriptUrl) return null;
|
||||
|
||||
const handleOpenTranscript = () => {
|
||||
const handleOpen = () => {
|
||||
onSelect?.(runId);
|
||||
onOpenTranscript(transcriptUrl ?? null, runId);
|
||||
onOpenPreview(recordingUrl ?? null, transcriptUrl ?? null, runId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex space-x-2">
|
||||
{recordingUrl && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleOpenAudio}
|
||||
>
|
||||
<Video className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{transcriptUrl && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleOpenTranscript}
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<Headphones className="h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useState } from "react";
|
|||
|
||||
import { WorkflowRunResponseSchema } from "@/client/types.gen";
|
||||
import { FilterBuilder } from "@/components/filters/FilterBuilder";
|
||||
import { MediaPreviewButtons, MediaPreviewDialog } from "@/components/MediaPreviewDialog";
|
||||
import { MediaPreviewButton, MediaPreviewDialog } from "@/components/MediaPreviewDialog";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
|
@ -211,12 +211,11 @@ export function WorkflowRunsTable({
|
|||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex space-x-2" onClick={(e) => e.stopPropagation()}>
|
||||
<MediaPreviewButtons
|
||||
<MediaPreviewButton
|
||||
recordingUrl={run.recording_url}
|
||||
transcriptUrl={run.transcript_url}
|
||||
runId={run.id}
|
||||
onOpenAudio={mediaPreview.openAudioModal}
|
||||
onOpenTranscript={mediaPreview.openTranscriptModal}
|
||||
onOpenPreview={mediaPreview.openPreview}
|
||||
onSelect={setSelectedRowId}
|
||||
/>
|
||||
<Button
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue