apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-06-07 07:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore: enhance media preview dialog

Browse source
This commit is contained in:
Abhishek Kumar 2026-02-12 12:41:00 +05:30
parent cff9674c9e
commit 44bd4f15f6
6 changed files with 80 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

4
api/services/workflow/pipecat_engine_callbacks.py
View file

@ -116,6 +116,10 @@ def create_aggregation_correction_callback(engine: "PipecatEngine"):
if corrupted in ref or len(alnum_ref) < len(alnum_corr) or len(alnum_corr) < 10:
return corrupted
logger.debug(
f"In correct_corrupted_aggregation: ref: {ref} corrupted: {corrupted}"
)
# 2) Find where in `ref` we should start aligning.
# We take the first N (N=10) characters of `corrupted`
# and look for all their occurrences in `ref`.

7
ui/src/app/superadmin/runs/page.tsx
View file

@ -7,7 +7,7 @@ import { useCallback, useEffect, useState } from "react";
import { getWorkflowRunsApiV1SuperuserWorkflowRunsGet, setAdminCommentApiV1SuperuserWorkflowRunsRunIdCommentPost } from '@/client/sdk.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";
@ -515,12 +515,11 @@ export default function RunsPage() {
</TableCell>
<TableCell>
<div className="flex space-x-2">
<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

7
ui/src/app/usage/page.tsx
View file

@ -9,7 +9,7 @@ import { getCurrentPeriodUsageApiV1OrganizationsUsageCurrentPeriodGet, getDailyU
import type { CurrentUsageResponse, DailyUsageBreakdownResponse,UsageHistoryResponse, WorkflowRunUsageResponse } from '@/client/types.gen';
import { DailyUsageTable } from '@/components/DailyUsageTable';
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';
@ -551,12 +551,11 @@ export default function UsagePage() {
}
</TableCell>
<TableCell>
<MediaPreviewButtons
<MediaPreviewButton
recordingUrl={run.recording_url}
transcriptUrl={run.transcript_url}
runId={run.id}
onOpenAudio={mediaPreview.openAudioModal}
onOpenTranscript={mediaPreview.openTranscriptModal}
onOpenPreview={mediaPreview.openPreview}
/>
</TableCell>
</TableRow>

9
ui/src/app/workflow/[workflowId]/run/[runId]/page.tsx
View file

@ -9,7 +9,7 @@ import BrowserCall from '@/app/workflow/[workflowId]/run/[runId]/BrowserCall';
import { RealtimeFeedback, WorkflowRunLogs } from '@/app/workflow/[workflowId]/run/[runId]/components/RealtimeFeedback';
import WorkflowLayout from '@/app/workflow/WorkflowLayout';
import { getWorkflowRunApiV1WorkflowWorkflowIdRunsRunIdGet } from '@/client/sdk.gen';
import { MediaPreviewButtons, MediaPreviewDialog } from '@/components/MediaPreviewDialog';
import { MediaPreviewButton, MediaPreviewDialog } from '@/components/MediaPreviewDialog';
import { OnboardingTooltip } from '@/components/onboarding/OnboardingTooltip';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
@ -92,7 +92,7 @@ export default function WorkflowRunPage() {
}
}, [auth]);
const { openAudioModal, openTranscriptModal, dialog } = MediaPreviewDialog({ accessToken });
const { openPreview, dialog } = MediaPreviewDialog({ accessToken });
useEffect(() => {
const fetchWorkflowRun = async () => {
@ -187,12 +187,11 @@ export default function WorkflowRunPage() {
<div className="flex flex-wrap gap-4">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">Preview:</span>
<MediaPreviewButtons
<MediaPreviewButton
recordingUrl={workflowRun?.recording_url}
transcriptUrl={workflowRun?.transcript_url}
runId={Number(params.runId)}
onOpenAudio={openAudioModal}
onOpenTranscript={openTranscriptModal}
onOpenPreview={openPreview}
/>
</div>
<div className="flex items-center gap-2 border-l border-border pl-4">

138
ui/src/components/MediaPreviewDialog.tsx
View file

@ -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>
);
}

7
ui/src/components/workflow-runs/WorkflowRunsTable.tsx
View file

@ -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