mirror of
https://github.com/dograh-hq/dograh.git
synced 2026-06-25 08:48:13 +02:00
fix: changes to update pipecat version to 0.0.100 (#122)
* feat: add stt evals * add smart turn as provider * chore: remove deprecations * chore: format files * fix: remove deprecated UserIdleProcessor * fix: remove deprecated TranscriptProcessor * chore: update pipecat submodule * feat: add evals visualisation * fix: trigger llm generation on client connected and pipeline started * chore: update pipecat * chore: update pipecat submodule * Add tests * fix: slow loading of workflow page * chore: update pipecat submodule * Show version after release * Fixes #99 * fix: provider check for websocket connection * Fixes #107 * Fix #96 * chore: fix documentation * fix: cloudonix campaign call error --------- Co-authored-by: Sabiha Khan <sabihak89@gmail.com>
This commit is contained in:
Abhishek
GitHub
parent
a4367bd83b
commit
911c5ed416
104 changed files with 16919 additions and 597 deletions
145
evals/visualizer/src/components/AudioPlayer.tsx
Normal file
145
evals/visualizer/src/components/AudioPlayer.tsx
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
"use client";
|
||||
|
||||
import { useRef, useEffect, useState, useCallback } from "react";
|
||||
|
||||
interface AudioPlayerProps {
|
||||
audioUrl: string;
|
||||
duration: number;
|
||||
currentTime: number;
|
||||
onTimeUpdate: (time: number) => void;
|
||||
onPlayingChange: (playing: boolean) => void;
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export default function AudioPlayer({
|
||||
audioUrl,
|
||||
duration,
|
||||
currentTime,
|
||||
onTimeUpdate,
|
||||
onPlayingChange,
|
||||
}: AudioPlayerProps) {
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [internalTime, setInternalTime] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
setInternalTime(audio.currentTime);
|
||||
onTimeUpdate(audio.currentTime);
|
||||
};
|
||||
|
||||
const handlePlay = () => {
|
||||
setIsPlaying(true);
|
||||
onPlayingChange(true);
|
||||
};
|
||||
|
||||
const handlePause = () => {
|
||||
setIsPlaying(false);
|
||||
onPlayingChange(false);
|
||||
};
|
||||
|
||||
const handleEnded = () => {
|
||||
setIsPlaying(false);
|
||||
onPlayingChange(false);
|
||||
};
|
||||
|
||||
audio.addEventListener("timeupdate", handleTimeUpdate);
|
||||
audio.addEventListener("play", handlePlay);
|
||||
audio.addEventListener("pause", handlePause);
|
||||
audio.addEventListener("ended", handleEnded);
|
||||
|
||||
return () => {
|
||||
audio.removeEventListener("timeupdate", handleTimeUpdate);
|
||||
audio.removeEventListener("play", handlePlay);
|
||||
audio.removeEventListener("pause", handlePause);
|
||||
audio.removeEventListener("ended", handleEnded);
|
||||
};
|
||||
}, [onTimeUpdate, onPlayingChange]);
|
||||
|
||||
// Seek to currentTime when it changes externally
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
// Only seek if the difference is significant (user clicked timeline)
|
||||
if (Math.abs(audio.currentTime - currentTime) > 0.5) {
|
||||
audio.currentTime = currentTime;
|
||||
}
|
||||
}, [currentTime]);
|
||||
|
||||
const togglePlay = useCallback(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
if (isPlaying) {
|
||||
audio.pause();
|
||||
} else {
|
||||
audio.play();
|
||||
}
|
||||
}, [isPlaying]);
|
||||
|
||||
const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
const newTime = parseFloat(e.target.value);
|
||||
audio.currentTime = newTime;
|
||||
setInternalTime(newTime);
|
||||
onTimeUpdate(newTime);
|
||||
}, [onTimeUpdate]);
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-900 rounded-lg p-4 space-y-3">
|
||||
<audio ref={audioRef} src={audioUrl} preload="metadata" />
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={togglePlay}
|
||||
className="w-12 h-12 rounded-full bg-white text-black flex items-center justify-center hover:bg-zinc-200 transition-colors"
|
||||
>
|
||||
{isPlaying ? (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex-1 space-y-1">
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={duration}
|
||||
step={0.1}
|
||||
value={internalTime}
|
||||
onChange={handleSeek}
|
||||
className="w-full h-2 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-white"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-zinc-400">
|
||||
<span>{formatTime(internalTime)}</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
141
evals/visualizer/src/components/EventList.tsx
Normal file
141
evals/visualizer/src/components/EventList.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useRef, useMemo, useState } from "react";
|
||||
import { CapturedEvent } from "@/types";
|
||||
import { DeepgramEventItem, FluxEventItem, SpeechmaticsEventItem } from "./events";
|
||||
|
||||
interface EventListProps {
|
||||
events: CapturedEvent[];
|
||||
currentTime: number;
|
||||
onSeek: (time: number) => void;
|
||||
provider: string;
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
const ms = Math.floor((seconds % 1) * 100);
|
||||
return `${mins}:${secs.toString().padStart(2, "0")}.${ms.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function getEventItemComponent(provider: string) {
|
||||
if (provider === "deepgram-flux") {
|
||||
return FluxEventItem;
|
||||
}
|
||||
if (provider === "speechmatics") {
|
||||
return SpeechmaticsEventItem;
|
||||
}
|
||||
// Default to Deepgram Nova
|
||||
return DeepgramEventItem;
|
||||
}
|
||||
|
||||
export default function EventList({
|
||||
events,
|
||||
currentTime,
|
||||
onSeek,
|
||||
provider,
|
||||
}: EventListProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [expandedEvents, setExpandedEvents] = useState<Set<number>>(new Set());
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
|
||||
const EventItemComponent = getEventItemComponent(provider);
|
||||
|
||||
// Find the current event index based on time
|
||||
const currentEventIndex = useMemo(() => {
|
||||
for (let i = events.length - 1; i >= 0; i--) {
|
||||
if (events[i].timestamp <= currentTime) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}, [events, currentTime]);
|
||||
|
||||
// Auto-scroll to current event
|
||||
useEffect(() => {
|
||||
if (!autoScroll || currentEventIndex < 0) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const eventElement = container.querySelector(`[data-index="${currentEventIndex}"]`);
|
||||
if (eventElement) {
|
||||
eventElement.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
}, [currentEventIndex, autoScroll]);
|
||||
|
||||
const toggleExpand = (index: number) => {
|
||||
setExpandedEvents((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(index)) {
|
||||
next.delete(index);
|
||||
} else {
|
||||
next.add(index);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-800 rounded-lg flex flex-col h-full">
|
||||
<div className="flex justify-between items-center px-4 py-2 border-b border-zinc-700">
|
||||
<div className="text-sm text-zinc-400 font-medium">
|
||||
Events ({events.length})
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-xs text-zinc-500 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoScroll}
|
||||
onChange={(e) => setAutoScroll(e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
Auto-scroll
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="flex-1 overflow-y-auto divide-y divide-zinc-700/50"
|
||||
>
|
||||
{events.map((event, index) => {
|
||||
const isCurrent = index === currentEventIndex;
|
||||
const isExpanded = expandedEvents.has(index);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
data-index={index}
|
||||
className={`p-3 cursor-pointer transition-colors ${
|
||||
isCurrent ? "bg-zinc-700/50" : "hover:bg-zinc-700/30"
|
||||
}`}
|
||||
onClick={() => onSeek(event.timestamp)}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
{/* Current indicator */}
|
||||
<div className="pt-1">
|
||||
{isCurrent ? (
|
||||
<div className="w-2 h-2 rounded-full bg-white" />
|
||||
) : (
|
||||
<div className="w-2 h-2 rounded-full bg-zinc-600" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Timestamp */}
|
||||
<span className="text-xs text-zinc-500 font-mono pt-0.5">
|
||||
{formatTime(event.timestamp)}
|
||||
</span>
|
||||
|
||||
{/* Provider-specific event item */}
|
||||
<EventItemComponent
|
||||
event={event}
|
||||
isExpanded={isExpanded}
|
||||
onToggleExpand={() => toggleExpand(index)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
evals/visualizer/src/components/EventTimeline.tsx
Normal file
119
evals/visualizer/src/components/EventTimeline.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { CapturedEvent } from "@/types";
|
||||
|
||||
interface EventTimelineProps {
|
||||
events: CapturedEvent[];
|
||||
duration: number;
|
||||
currentTime: number;
|
||||
onSeek: (time: number) => void;
|
||||
}
|
||||
|
||||
const EVENT_COLORS: Record<string, string> = {
|
||||
Results: "bg-blue-500",
|
||||
TurnInfo: "bg-green-500",
|
||||
AddTranscript: "bg-purple-500",
|
||||
Connected: "bg-yellow-500",
|
||||
RecognitionStarted: "bg-yellow-500",
|
||||
EndOfTranscript: "bg-red-500",
|
||||
Metadata: "bg-gray-500",
|
||||
Error: "bg-red-600",
|
||||
default: "bg-zinc-400",
|
||||
};
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export default function EventTimeline({
|
||||
events,
|
||||
duration,
|
||||
currentTime,
|
||||
onSeek,
|
||||
}: EventTimelineProps) {
|
||||
const timeMarkers = useMemo(() => {
|
||||
const markers: number[] = [];
|
||||
const interval = Math.ceil(duration / 6);
|
||||
for (let i = 0; i <= duration; i += interval) {
|
||||
markers.push(i);
|
||||
}
|
||||
if (markers[markers.length - 1] !== Math.floor(duration)) {
|
||||
markers.push(Math.floor(duration));
|
||||
}
|
||||
return markers;
|
||||
}, [duration]);
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const percent = x / rect.width;
|
||||
const time = percent * duration;
|
||||
onSeek(Math.max(0, Math.min(time, duration)));
|
||||
};
|
||||
|
||||
const progressPercent = (currentTime / duration) * 100;
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-800 rounded-lg p-4 space-y-2">
|
||||
<div className="text-sm text-zinc-400 font-medium">Event Timeline</div>
|
||||
|
||||
<div
|
||||
className="relative h-16 bg-zinc-900 rounded cursor-pointer overflow-hidden"
|
||||
onClick={handleClick}
|
||||
>
|
||||
{/* Progress indicator */}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 bg-zinc-700/50 pointer-events-none"
|
||||
style={{ width: `${Math.min(progressPercent, 100)}%` }}
|
||||
/>
|
||||
|
||||
{/* Current time indicator */}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 w-0.5 bg-white z-10 pointer-events-none"
|
||||
style={{ left: `${Math.min(progressPercent, 100)}%` }}
|
||||
/>
|
||||
|
||||
{/* Event markers */}
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
{events.map((event, index) => {
|
||||
const leftPercent = Math.min((event.timestamp / duration) * 100, 100);
|
||||
const colorClass =
|
||||
EVENT_COLORS[event.event_type] || EVENT_COLORS.default;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`absolute w-2 h-8 rounded-sm ${colorClass} opacity-80 hover:opacity-100 transition-opacity`}
|
||||
style={{ left: `${leftPercent}%`, transform: "translateX(-50%)" }}
|
||||
title={`${formatTime(event.timestamp)} - ${event.event_type}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Time markers */}
|
||||
<div className="flex justify-between text-xs text-zinc-500">
|
||||
{timeMarkers.map((time, index) => (
|
||||
<span key={index}>{formatTime(time)}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex flex-wrap gap-3 pt-2">
|
||||
{Object.entries(EVENT_COLORS)
|
||||
.filter(([key]) => key !== "default")
|
||||
.slice(0, 6)
|
||||
.map(([eventType, colorClass]) => (
|
||||
<div key={eventType} className="flex items-center gap-1 text-xs text-zinc-400">
|
||||
<div className={`w-2 h-2 rounded-sm ${colorClass}`} />
|
||||
<span>{eventType}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
98
evals/visualizer/src/components/events/DeepgramEventItem.tsx
Normal file
98
evals/visualizer/src/components/events/DeepgramEventItem.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
"use client";
|
||||
|
||||
import { CapturedEvent } from "@/types";
|
||||
|
||||
interface DeepgramEventItemProps {
|
||||
event: CapturedEvent;
|
||||
isExpanded: boolean;
|
||||
onToggleExpand: () => void;
|
||||
}
|
||||
|
||||
const EVENT_COLORS: Record<string, string> = {
|
||||
Results: "text-blue-400 bg-blue-500/10",
|
||||
SpeechStarted: "text-yellow-400 bg-yellow-500/10",
|
||||
Metadata: "text-gray-400 bg-gray-500/10",
|
||||
UtteranceEnd: "text-red-500 bg-red-600/10",
|
||||
default: "text-zinc-400 bg-zinc-500/10",
|
||||
};
|
||||
|
||||
function getTranscript(event: CapturedEvent): string {
|
||||
const data = event.data;
|
||||
const channel = data.channel as Record<string, unknown> | undefined;
|
||||
if (channel) {
|
||||
const alternatives = channel.alternatives as Array<{ transcript?: string }> | undefined;
|
||||
if (alternatives?.[0]?.transcript) {
|
||||
return alternatives[0].transcript;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
export default function DeepgramEventItem({
|
||||
event,
|
||||
isExpanded,
|
||||
onToggleExpand,
|
||||
}: DeepgramEventItemProps) {
|
||||
const colorClass = EVENT_COLORS[event.event_type] || EVENT_COLORS.default;
|
||||
const data = event.data;
|
||||
|
||||
const transcript = getTranscript(event);
|
||||
const isFinal = data.is_final as boolean | undefined;
|
||||
const speechFinal = data.speech_final as boolean | undefined;
|
||||
|
||||
// For non-Results events
|
||||
const isConnection = event.event_type === "Connected";
|
||||
const isMetadata = event.event_type === "Metadata";
|
||||
|
||||
return (
|
||||
<div className="flex-1 min-w-0 space-y-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${colorClass}`}>
|
||||
{event.event_type}
|
||||
</span>
|
||||
|
||||
{/* Final/Partial indicator for Results */}
|
||||
{isFinal !== undefined && (
|
||||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded ${isFinal
|
||||
? "text-emerald-400 bg-emerald-500/10"
|
||||
: "text-amber-400 bg-amber-500/10"
|
||||
}`}
|
||||
>
|
||||
{isFinal ? "Final" : "Partial"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Speech Final indicator */}
|
||||
{speechFinal && (
|
||||
<span className="text-xs px-2 py-0.5 rounded text-cyan-400 bg-cyan-500/10">
|
||||
Speech Final
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Transcript or status message */}
|
||||
<div className="text-sm text-zinc-300 truncate">
|
||||
{transcript}
|
||||
</div>
|
||||
|
||||
{/* Expand/collapse button */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleExpand();
|
||||
}}
|
||||
className="text-xs text-zinc-500 hover:text-zinc-300"
|
||||
>
|
||||
{isExpanded ? "Hide details" : "Show details"}
|
||||
</button>
|
||||
|
||||
{/* Expanded JSON view */}
|
||||
{isExpanded && (
|
||||
<pre className="mt-2 p-2 bg-zinc-900 rounded text-xs text-zinc-400 overflow-x-auto max-h-64">
|
||||
{JSON.stringify(event.data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
evals/visualizer/src/components/events/FluxEventItem.tsx
Normal file
115
evals/visualizer/src/components/events/FluxEventItem.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
"use client";
|
||||
|
||||
import { CapturedEvent } from "@/types";
|
||||
|
||||
interface FluxEventItemProps {
|
||||
event: CapturedEvent;
|
||||
isExpanded: boolean;
|
||||
onToggleExpand: () => void;
|
||||
}
|
||||
|
||||
const EVENT_COLORS: Record<string, string> = {
|
||||
TurnInfo: "text-green-400 bg-green-500/10",
|
||||
Connected: "text-yellow-400 bg-yellow-500/10",
|
||||
Error: "text-red-500 bg-red-600/10",
|
||||
default: "text-zinc-400 bg-zinc-500/10",
|
||||
};
|
||||
|
||||
const FLUX_EVENT_COLORS: Record<string, string> = {
|
||||
Update: "text-amber-300 bg-amber-500/20",
|
||||
EndOfTurn: "text-emerald-300 bg-emerald-500/20",
|
||||
EagerEndOfTurn: "text-cyan-300 bg-cyan-500/20",
|
||||
StartOfTurn: "text-blue-300 bg-blue-500/20",
|
||||
TurnResumed: "text-purple-300 bg-purple-500/20",
|
||||
default: "text-zinc-300 bg-zinc-500/20",
|
||||
};
|
||||
|
||||
export default function FluxEventItem({
|
||||
event,
|
||||
isExpanded,
|
||||
onToggleExpand,
|
||||
}: FluxEventItemProps) {
|
||||
const colorClass = EVENT_COLORS[event.event_type] || EVENT_COLORS.default;
|
||||
const data = event.data;
|
||||
|
||||
// Flux TurnInfo fields
|
||||
const fluxEvent = data.event as string | undefined;
|
||||
const transcript = data.transcript as string | undefined;
|
||||
const endOfTurnConfidence = data.end_of_turn_confidence as number | undefined;
|
||||
const turnIndex = data.turn_index as number | undefined;
|
||||
|
||||
const isFinal = fluxEvent === "EndOfTurn";
|
||||
const fluxEventColor = fluxEvent
|
||||
? FLUX_EVENT_COLORS[fluxEvent] || FLUX_EVENT_COLORS.default
|
||||
: "";
|
||||
|
||||
// For non-TurnInfo events
|
||||
const isConnection = event.event_type === "Connected";
|
||||
|
||||
return (
|
||||
<div className="flex-1 min-w-0 space-y-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${colorClass}`}>
|
||||
{event.event_type}
|
||||
</span>
|
||||
|
||||
{/* Flux sub-event type */}
|
||||
{fluxEvent && (
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${fluxEventColor}`}>
|
||||
{fluxEvent}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Final/Partial indicator */}
|
||||
{fluxEvent && (
|
||||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded ${
|
||||
isFinal
|
||||
? "text-emerald-400 bg-emerald-500/10"
|
||||
: "text-amber-400 bg-amber-500/10"
|
||||
}`}
|
||||
>
|
||||
{isFinal ? "Final" : "Partial"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Turn index */}
|
||||
{turnIndex !== undefined && (
|
||||
<span className="text-xs text-zinc-500">
|
||||
Turn {turnIndex}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* EOT confidence */}
|
||||
{endOfTurnConfidence !== undefined && (
|
||||
<span className="text-xs text-zinc-500 font-mono">
|
||||
EOT: {(endOfTurnConfidence * 100).toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Transcript or status message */}
|
||||
<div className="text-sm text-zinc-300 truncate">
|
||||
{transcript || (isConnection ? "[Connected]" : `[${fluxEvent || event.event_type}]`)}
|
||||
</div>
|
||||
|
||||
{/* Expand/collapse button */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleExpand();
|
||||
}}
|
||||
className="text-xs text-zinc-500 hover:text-zinc-300"
|
||||
>
|
||||
{isExpanded ? "Hide details" : "Show details"}
|
||||
</button>
|
||||
|
||||
{/* Expanded JSON view */}
|
||||
{isExpanded && (
|
||||
<pre className="mt-2 p-2 bg-zinc-900 rounded text-xs text-zinc-400 overflow-x-auto max-h-64">
|
||||
{JSON.stringify(event.data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
101
evals/visualizer/src/components/events/SpeechmaticsEventItem.tsx
Normal file
101
evals/visualizer/src/components/events/SpeechmaticsEventItem.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
"use client";
|
||||
|
||||
import { CapturedEvent } from "@/types";
|
||||
|
||||
interface SpeechmaticsEventItemProps {
|
||||
event: CapturedEvent;
|
||||
isExpanded: boolean;
|
||||
onToggleExpand: () => void;
|
||||
}
|
||||
|
||||
const EVENT_COLORS: Record<string, string> = {
|
||||
AddTranscript: "text-purple-400 bg-purple-500/10",
|
||||
RecognitionStarted: "text-yellow-400 bg-yellow-500/10",
|
||||
EndOfTranscript: "text-red-400 bg-red-500/10",
|
||||
Warning: "text-orange-400 bg-orange-500/10",
|
||||
Error: "text-red-500 bg-red-600/10",
|
||||
default: "text-zinc-400 bg-zinc-500/10",
|
||||
};
|
||||
|
||||
function getTranscript(event: CapturedEvent): string {
|
||||
const data = event.data;
|
||||
const results = data.results as Array<{
|
||||
type?: string;
|
||||
alternatives?: Array<{ content?: string }>;
|
||||
}> | undefined;
|
||||
|
||||
if (results) {
|
||||
const words = results
|
||||
.filter((r) => r.type === "word" && r.alternatives?.[0]?.content)
|
||||
.map((r) => r.alternatives![0].content)
|
||||
.join(" ");
|
||||
return words;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
export default function SpeechmaticsEventItem({
|
||||
event,
|
||||
isExpanded,
|
||||
onToggleExpand,
|
||||
}: SpeechmaticsEventItemProps) {
|
||||
const colorClass = EVENT_COLORS[event.event_type] || EVENT_COLORS.default;
|
||||
const data = event.data;
|
||||
|
||||
const transcript = getTranscript(event);
|
||||
|
||||
// Status events
|
||||
const isRecognitionStarted = event.event_type === "RecognitionStarted";
|
||||
const isEndOfTranscript = event.event_type === "EndOfTranscript";
|
||||
const isWarning = event.event_type === "Warning";
|
||||
|
||||
// Warning reason
|
||||
const warningReason = isWarning ? (data.reason as string | undefined) : undefined;
|
||||
|
||||
return (
|
||||
<div className="flex-1 min-w-0 space-y-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${colorClass}`}>
|
||||
{event.event_type}
|
||||
</span>
|
||||
|
||||
{/* AddTranscript is always final in Speechmatics */}
|
||||
{event.event_type === "AddTranscript" && (
|
||||
<span className="text-xs px-2 py-0.5 rounded text-emerald-400 bg-emerald-500/10">
|
||||
Final
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Transcript or status message */}
|
||||
<div className="text-sm text-zinc-300 truncate">
|
||||
{transcript ||
|
||||
(isRecognitionStarted
|
||||
? "[Recognition Started]"
|
||||
: isEndOfTranscript
|
||||
? "[End of Transcript]"
|
||||
: isWarning
|
||||
? `[Warning: ${warningReason || "unknown"}]`
|
||||
: `[${event.event_type}]`)}
|
||||
</div>
|
||||
|
||||
{/* Expand/collapse button */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleExpand();
|
||||
}}
|
||||
className="text-xs text-zinc-500 hover:text-zinc-300"
|
||||
>
|
||||
{isExpanded ? "Hide details" : "Show details"}
|
||||
</button>
|
||||
|
||||
{/* Expanded JSON view */}
|
||||
{isExpanded && (
|
||||
<pre className="mt-2 p-2 bg-zinc-900 rounded text-xs text-zinc-400 overflow-x-auto max-h-64">
|
||||
{JSON.stringify(event.data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
3
evals/visualizer/src/components/events/index.ts
Normal file
3
evals/visualizer/src/components/events/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export { default as DeepgramEventItem } from "./DeepgramEventItem";
|
||||
export { default as FluxEventItem } from "./FluxEventItem";
|
||||
export { default as SpeechmaticsEventItem } from "./SpeechmaticsEventItem";
|
||||
Loading…
Add table
Add a link
Reference in a new issue