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

feat: banner if API is not reachable

Browse source
This commit is contained in:
Abhishek Kumar 2026-05-31 13:05:22 +05:30
parent ba342b66a7
commit 78ba62e185
15 changed files with 181 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

21
ui/src/components/flow/TextOrAudioInput.tsx
View file

@ -1,4 +1,4 @@
import { Check, ChevronDown, Pause, Play, Search } from "lucide-react";
import { AlertCircle, Check, ChevronDown, Pause, Play, Search } from "lucide-react";
import { useMemo, useState } from "react";
import type { RecordingResponseSchema } from "@/client/types.gen";
@ -10,6 +10,25 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { useAudioPlayback } from "@/hooks/useAudioPlayback";
import { cn } from "@/lib/utils";
/**
* Amber caveat shown next to free-text fields that are spoken aloud via TTS
* (greetings, transition speech, custom tool messages). Two warnings: the text
* is voiced verbatim (matters for multilingual flows), and realtime
* (speech-to-speech) models have no TTS stage, so static text is never spoken —
* a pre-recorded audio file should be used instead.
*/
export function StaticTextWarning() {
return (
<div className="flex items-start gap-2 rounded-md bg-amber-50 p-2 text-xs text-amber-700 border border-amber-200">
<AlertCircle className="h-3.5 w-3.5 mt-0.5 shrink-0" />
<span>
This text is spoken as-is. For multilingual workflows, choose your phrasing carefully.
Realtime (speech-to-speech) models can&apos;t play static text.
</span>
</div>
);
}
interface TextOrAudioInputProps {
type: 'text' | 'audio';
onTypeChange: (type: 'text' | 'audio') => void;

7
ui/src/components/flow/edges/CustomEdge.tsx
View file

@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
import { useWorkflow, useWorkflowOptional } from "@/app/workflow/[workflowId]/contexts/WorkflowContext";
import { useWorkflowStore } from "@/app/workflow/[workflowId]/stores/workflowStore";
import { TextOrAudioInput } from "@/components/flow/TextOrAudioInput";
import { StaticTextWarning, TextOrAudioInput } from "@/components/flow/TextOrAudioInput";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
@ -122,10 +122,7 @@ const EdgeDetailsDialog = ({ open, onOpenChange, data, onSave }: EdgeDetailsDial
recordings={recordings ?? []}
>
<>
<div className="flex items-start gap-2 rounded-md bg-amber-50 p-2 text-xs text-amber-700 border border-amber-200">
<AlertCircle className="h-3.5 w-3.5 mt-0.5 shrink-0" />
<span>This text is spoken as-is. For multilingual workflows, choose your phrasing carefully.</span>
</div>
<StaticTextWarning />
<Textarea
value={transitionSpeech}
placeholder="e.g. Let me transfer you to our billing department..."