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

Merge branch 'main' into feat/call-tags

Browse source
This commit is contained in:
Abhishek Kumar 2026-02-16 13:07:23 +05:30
commit ea0967fd9c
41 changed files with 480 additions and 317 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ui/package.json
View file

@ -1,6 +1,6 @@
{
"name": "ui",
"version": "1.12.0",
"version": "1.13.0",
"private": true,
"scripts": {
"dev": "NODE_OPTIONS='--enable-source-maps' next dev --turbopack",

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

134
ui/src/components/ServiceConfiguration.tsx
View file

@ -21,6 +21,7 @@ interface SchemaProperty {
default?: string | number | boolean;
enum?: string[];
examples?: string[];
model_options?: Record<string, string[]>;
$ref?: string;
description?: string;
format?: string;
@ -46,38 +47,89 @@ const TAB_CONFIG: { key: ServiceSegment; label: string }[] = [
// Display names for language codes (Deepgram + Sarvam)
const LANGUAGE_DISPLAY_NAMES: Record<string, string> = {
// Deepgram languages
"multi": "Multilingual (Auto-detect)",
// Arabic
"ar": "Arabic",
"ar-AE": "Arabic (UAE)",
"ar-SA": "Arabic (Saudi Arabia)",
"ar-QA": "Arabic (Qatar)",
"ar-KW": "Arabic (Kuwait)",
"ar-SY": "Arabic (Syria)",
"ar-LB": "Arabic (Lebanon)",
"ar-PS": "Arabic (Palestine)",
"ar-JO": "Arabic (Jordan)",
"ar-EG": "Arabic (Egypt)",
"ar-SD": "Arabic (Sudan)",
"ar-TD": "Arabic (Chad)",
"ar-MA": "Arabic (Morocco)",
"ar-DZ": "Arabic (Algeria)",
"ar-TN": "Arabic (Tunisia)",
"ar-IQ": "Arabic (Iraq)",
"ar-IR": "Arabic (Iran)",
// Other languages
"be": "Belarusian",
"bn": "Bengali",
"bs": "Bosnian",
"bg": "Bulgarian",
"ca": "Catalan",
"cs": "Czech",
"da": "Danish",
"da-DK": "Danish (Denmark)",
"de": "German",
"de-CH": "German (Switzerland)",
"el": "Greek",
"en": "English",
"en-US": "English (US)",
"en-GB": "English (UK)",
"en-AU": "English (Australia)",
"en-GB": "English (UK)",
"en-IN": "English (India)",
"en-NZ": "English (New Zealand)",
"es": "Spanish",
"es-419": "Spanish (Latin America)",
"et": "Estonian",
"fa": "Persian",
"fi": "Finnish",
"fr": "French",
"fr-CA": "French (Canada)",
"de": "German",
"he": "Hebrew",
"hi": "Hindi",
"hr": "Croatian",
"hu": "Hungarian",
"id": "Indonesian",
"it": "Italian",
"ja": "Japanese",
"kn": "Kannada",
"ko": "Korean",
"ko-KR": "Korean (South Korea)",
"lt": "Lithuanian",
"lv": "Latvian",
"mk": "Macedonian",
"mr": "Marathi",
"ms": "Malay",
"nl": "Dutch",
"nl-BE": "Flemish",
"no": "Norwegian",
"pl": "Polish",
"pt": "Portuguese",
"pt-BR": "Portuguese (Brazil)",
"nl": "Dutch",
"hi": "Hindi",
"ja": "Japanese",
"ko": "Korean",
"zh-CN": "Chinese (Simplified)",
"zh-TW": "Chinese (Traditional)",
"pt-PT": "Portuguese (Portugal)",
"ro": "Romanian",
"ru": "Russian",
"pl": "Polish",
"sk": "Slovak",
"sl": "Slovenian",
"sr": "Serbian",
"sv": "Swedish",
"sv-SE": "Swedish (Sweden)",
"ta": "Tamil",
"te": "Telugu",
"th": "Thai",
"tl": "Tagalog",
"tr": "Turkish",
"uk": "Ukrainian",
"ur": "Urdu",
"vi": "Vietnamese",
"sv": "Swedish",
"da": "Danish",
"no": "Norwegian",
"fi": "Finnish",
"id": "Indonesian",
"th": "Thai",
"zh-CN": "Chinese (Simplified)",
"zh-TW": "Chinese (Traditional)",
// Sarvam Indian languages
"bn-IN": "Bengali",
"gu-IN": "Gujarati",
@ -212,6 +264,34 @@ export default function ServiceConfiguration() {
}
}, [schemas, serviceProviders.llm, userConfig?.llm?.model, hasCheckedManualMode]);
// Reset voice when TTS model changes if the provider has model-dependent voice options
const ttsModel = watch("tts_model");
useEffect(() => {
const voiceSchema = schemas?.tts?.[serviceProviders.tts]?.properties?.voice;
const modelOptions = voiceSchema?.model_options;
if (!modelOptions || !ttsModel) return;
const validVoices = modelOptions[ttsModel as string];
const currentVoice = getValues("tts_voice") as string;
if (validVoices && currentVoice && !validVoices.includes(currentVoice)) {
setValue("tts_voice", validVoices[0], { shouldDirty: true });
}
}, [ttsModel, serviceProviders.tts, setValue, getValues, schemas]);
// Reset language when STT model changes if the provider has model-dependent language options
const sttModel = watch("stt_model");
useEffect(() => {
const languageSchema = schemas?.stt?.[serviceProviders.stt]?.properties?.language;
const modelOptions = languageSchema?.model_options;
if (!modelOptions || !sttModel) return;
const validLanguages = modelOptions[sttModel as string];
const currentLanguage = getValues("stt_language") as string;
if (validLanguages && currentLanguage && !validLanguages.includes(currentLanguage)) {
setValue("stt_language", validLanguages[0], { shouldDirty: true });
}
}, [sttModel, serviceProviders.stt, setValue, getValues, schemas]);
const handleProviderChange = (service: ServiceSegment, providerName: string) => {
if (!providerName) {
return;
@ -325,15 +405,6 @@ export default function ServiceConfiguration() {
field => field !== "provider" && field !== "api_key"
);
// For Deepgram STT, hide language field when flux-general-en model is selected
// Flux model is English-only and doesn't support language selection
if (service === "stt" && currentProvider === "deepgram") {
const currentModel = watch("stt_model") as string;
if (currentModel === "flux-general-en") {
return fields.filter(field => field !== "language");
}
}
return fields;
};
@ -516,7 +587,16 @@ export default function ServiceConfiguration() {
}
// Handle fields with enum or examples (dropdown options)
const dropdownOptions = actualSchema?.enum || actualSchema?.examples;
let dropdownOptions = actualSchema?.enum || actualSchema?.examples;
// Use model-dependent options when available (e.g., Sarvam voices per model)
if (actualSchema?.model_options) {
const modelValue = watch(`${service}_model`) as string;
if (modelValue && actualSchema.model_options[modelValue]) {
dropdownOptions = actualSchema.model_options[modelValue];
}
}
if (dropdownOptions && dropdownOptions.length > 0) {
// Use friendly display names for language and voice fields
const getDisplayName = (value: string) => {
@ -524,7 +604,7 @@ export default function ServiceConfiguration() {
return LANGUAGE_DISPLAY_NAMES[value] || value;
}
if (field === "voice") {
return VOICE_DISPLAY_NAMES[value] || value;
return VOICE_DISPLAY_NAMES[value] || value.charAt(0).toUpperCase() + value.slice(1);
}
return value;
};

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