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: minor UI fixes

Browse source
This commit is contained in:
Abhishek Kumar 2026-05-21 17:20:21 +05:30
parent 332754a809
commit 3da439207c
14 changed files with 92 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

4
sdk/python/src/dograh_sdk/_generated_models.py
View file

@ -1,6 +1,6 @@
# generated by datamodel-codegen:
# filename: dograh-openapi-XXXXXX.json.4p15PiTCyh
# timestamp: 2026-05-21T07:00:16+00:00
# filename: dograh-openapi-XXXXXX.json.kmLQzhjuKC
# timestamp: 2026-05-21T11:50:06+00:00
from __future__ import annotations

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

@ -1,6 +1,6 @@
"use client";
import { ArrowDownLeft, ArrowUpRight, ChevronLeft, ChevronRight, Download, Globe, MessageSquare, Phone } from 'lucide-react';
import { ChevronLeft, ChevronRight, Download, Globe } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useCallback, useEffect, useId, useState } from 'react';
import TimezoneSelect, { type ITimezoneOption } from 'react-timezone-select';
@ -8,6 +8,7 @@ import { toast } from 'sonner';
import { downloadUsageRunsReportApiV1OrganizationsUsageRunsReportGet, getDailyUsageBreakdownApiV1OrganizationsUsageDailyBreakdownGet, getMpsCreditsApiV1OrganizationsUsageMpsCreditsGet, getUsageHistoryApiV1OrganizationsUsageRunsGet } from '@/client/sdk.gen';
import type { DailyUsageBreakdownResponse, MpsCreditsResponse, UsageHistoryResponse, WorkflowRunUsageResponse } from '@/client/types.gen';
import { CallTypeCell } from '@/components/CallTypeCell';
import { DailyUsageTable } from '@/components/DailyUsageTable';
import { FilterBuilder } from '@/components/filters/FilterBuilder';
import { MediaPreviewButton, MediaPreviewDialog } from '@/components/MediaPreviewDialog';
@ -23,7 +24,6 @@ import {
TableHeader,
TableRow,
} from '@/components/ui/table';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useUserConfig } from '@/context/UserConfigContext';
import { useAuth } from '@/lib/auth';
import { usageFilterAttributes } from '@/lib/filterAttributes';
@ -33,53 +33,6 @@ import { ActiveFilter, DateRangeValue } from '@/types/filters';
// Get local timezone
const getLocalTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
// Collapse a run's `mode` (from WorkflowRunMode in api/enums.py) into a coarse
// channel. Telephony providers (twilio, plivo, telnyx, vonage, vobiz, cloudonix,
// ari, ...) are phone calls; webrtc/smallwebrtc are browser web calls; textchat
// is a text conversation. Anything unknown falls back to "phone".
const WEB_CALL_MODES = new Set(['webrtc', 'smallwebrtc']);
const TEXT_CHAT_MODES = new Set(['textchat']);
const getCallChannel = (mode?: string | null): 'phone' | 'web' | 'chat' => {
if (mode && TEXT_CHAT_MODES.has(mode)) return 'chat';
if (mode && WEB_CALL_MODES.has(mode)) return 'web';
return 'phone';
};
// Render the call's channel (mode) and direction (call_type) as two compact
// icons in a single cell, with a tooltip spelling out the full label. The
// channel icon shows medium/how (phone / web / chat); the colored arrow shows
// direction (inbound = incoming/emerald, outbound = outgoing/blue).
const CallTypeCell = ({ mode, callType }: { mode?: string | null; callType?: string | null }) => {
if (!mode && !callType) {
return <span className="text-sm text-muted-foreground">-</span>;
}
const channel = getCallChannel(mode);
const ChannelIcon = channel === 'chat' ? MessageSquare : channel === 'web' ? Globe : Phone;
const channelLabel = channel === 'chat' ? 'Text chat' : channel === 'web' ? 'Web call' : 'Phone call';
const isInbound = callType === 'inbound';
const DirectionIcon = isInbound ? ArrowDownLeft : ArrowUpRight;
const directionLabel = isInbound ? 'Inbound' : 'Outbound';
return (
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex items-center gap-1">
<ChannelIcon className="h-4 w-4 text-muted-foreground" />
<DirectionIcon
className={`h-3.5 w-3.5 ${isInbound ? 'text-emerald-600' : 'text-blue-600'}`}
/>
</span>
</TooltipTrigger>
<TooltipContent sideOffset={4}>
{directionLabel} · {channelLabel}
</TooltipContent>
</Tooltip>
);
};
export default function UsagePage() {
const router = useRouter();
const searchParams = useSearchParams();
@ -677,4 +630,3 @@ export default function UsagePage() {
</div>
);
}

16
ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx
View file

@ -25,7 +25,7 @@ import CustomEdge from "../../../components/flow/edges/CustomEdge";
import { GenericNode } from "../../../components/flow/nodes/GenericNode";
import { PhoneCallDialog } from './components/PhoneCallDialog';
import { VersionHistoryPanel, WorkflowVersion } from './components/VersionHistoryPanel';
import type { WorkflowRuntimeFocusMode, WorkflowRuntimeNodeTransition } from './components/workflow-tester/types';
import type { WorkflowRuntimeNodeTransition } from './components/workflow-tester/types';
import { WorkflowEditorHeader } from "./components/WorkflowEditorHeader";
import { WorkflowTesterPanel } from './components/WorkflowTesterPanel';
import { WorkflowProvider } from "./contexts/WorkflowContext";
@ -94,9 +94,7 @@ function RenderWorkflow({
const [documents, setDocuments] = useState<DocumentResponseSchema[] | undefined>(undefined);
const [tools, setTools] = useState<ToolResponse[] | undefined>(undefined);
const [recordings, setRecordings] = useState<RecordingResponseSchema[]>([]);
const [runtimeFocusMode, setRuntimeFocusMode] = useState<WorkflowRuntimeFocusMode>("follow");
const [activeRuntimeNodeId, setActiveRuntimeNodeId] = useState<string | null>(null);
const [runtimePulseNonce, setRuntimePulseNonce] = useState(0);
const {
rfInstance,
@ -387,12 +385,11 @@ function RenderWorkflow({
data: {
...node.data,
runtime_active: true,
runtime_pulse_nonce: runtimePulseNonce,
},
}
: node,
),
[activeRuntimeNodeId, nodes, runtimePulseNonce],
[activeRuntimeNodeId, nodes],
);
const handleRuntimeNodeTransition = useCallback(
@ -404,9 +401,8 @@ function RenderWorkflow({
}
setActiveRuntimeNodeId(nodeId);
setRuntimePulseNonce((value) => value + 1);
if (runtimeFocusMode !== "follow" || !instance.viewportInitialized) {
if (!instance.viewportInitialized) {
return;
}
@ -417,7 +413,7 @@ function RenderWorkflow({
maxZoom: 0.9,
});
},
[rfInstance, runtimeFocusMode],
[rfInstance],
);
// Guard saveWorkflow so it's a no-op when viewing a historical version.
@ -669,8 +665,6 @@ function RenderWorkflow({
showWebCallOnboarding={shouldShowWebCallOnboarding}
isVisible={isDesktopViewport}
onClose={() => setIsTesterRailOpen(false)}
runtimeFocusMode={runtimeFocusMode}
onRuntimeFocusModeChange={setRuntimeFocusMode}
onRuntimeNodeTransition={handleRuntimeNodeTransition}
/>
</aside>
@ -686,8 +680,6 @@ function RenderWorkflow({
disabledReason={testerDisabledReason}
showWebCallOnboarding={shouldShowWebCallOnboarding}
isVisible={isTesterSheetOpen}
runtimeFocusMode={runtimeFocusMode}
onRuntimeFocusModeChange={setRuntimeFocusMode}
onRuntimeNodeTransition={handleRuntimeNodeTransition}
/>
</SheetContent>

15
ui/src/app/workflow/[workflowId]/components/WorkflowTesterPanel.tsx
View file

@ -19,8 +19,8 @@ import { cn, getRandomId } from "@/lib/utils";
import { AiSimulatorPlaceholder } from "./workflow-tester/AiSimulatorPlaceholder";
import { EmbeddedVoiceTester } from "./workflow-tester/EmbeddedVoiceTester";
import { ManualTextChatPanel } from "./workflow-tester/ManualTextChatPanel";
import { ChatModeToggle, DisabledNotice, EmptyState, RuntimeFocusToggle } from "./workflow-tester/shared";
import type { WorkflowRuntimeFocusMode, WorkflowRuntimeNodeTransition } from "./workflow-tester/types";
import { ChatModeToggle, DisabledNotice, EmptyState } from "./workflow-tester/shared";
import type { WorkflowRuntimeNodeTransition } from "./workflow-tester/types";
import { extractSdkErrorMessage, getErrorMessage } from "./workflow-tester/utils";
interface WorkflowTesterPanelProps {
@ -32,8 +32,6 @@ interface WorkflowTesterPanelProps {
isVisible?: boolean;
className?: string;
onClose?: () => void;
runtimeFocusMode: WorkflowRuntimeFocusMode;
onRuntimeFocusModeChange: (mode: WorkflowRuntimeFocusMode) => void;
onRuntimeNodeTransition?: (transition: WorkflowRuntimeNodeTransition) => void;
}
@ -46,8 +44,6 @@ export function WorkflowTesterPanel({
isVisible = true,
className,
onClose,
runtimeFocusMode,
onRuntimeFocusModeChange,
onRuntimeNodeTransition,
}: WorkflowTesterPanelProps) {
const auth = useAuth();
@ -178,13 +174,6 @@ export function WorkflowTesterPanel({
</Button>
) : null}
</div>
<div className="mt-3 flex items-center justify-between gap-3">
<p className="text-xs text-muted-foreground">Canvas sync</p>
<RuntimeFocusToggle
value={runtimeFocusMode}
onChange={onRuntimeFocusModeChange}
/>
</div>
</div>
<TabsContent value="audio" className="min-h-0 flex-1 px-4 py-4">

36
ui/src/app/workflow/[workflowId]/components/workflow-tester/shared.tsx
View file

@ -81,42 +81,6 @@ export function ChatModeToggle({
);
}
export function RuntimeFocusToggle({
value,
onChange,
}: {
value: "pulse" | "follow";
onChange: (next: "pulse" | "follow") => void;
}) {
const options: Array<{ id: "pulse" | "follow"; label: string }> = [
{ id: "pulse", label: "Pulse" },
{ id: "follow", label: "Follow" },
];
return (
<div className="inline-flex items-center gap-0.5 rounded-md border border-border/70 bg-muted/40 p-0.5">
{options.map((option) => {
const active = option.id === value;
return (
<button
key={option.id}
type="button"
onClick={() => onChange(option.id)}
className={cn(
"rounded-[5px] px-2.5 py-1 text-xs font-medium transition",
active
? "bg-background text-foreground shadow-xs"
: "text-muted-foreground hover:text-foreground",
)}
>
{option.label}
</button>
);
})}
</div>
);
}
export function TypingIndicator() {
return (
<div className="flex justify-start">

2
ui/src/app/workflow/[workflowId]/components/workflow-tester/types.ts
View file

@ -47,8 +47,6 @@ export interface TurnActionState {
type: "rewind" | "edit";
}
export type WorkflowRuntimeFocusMode = "pulse" | "follow";
export type WorkflowRuntimeNodeTransition = ConversationNodeTransitionItem;
export const EMPTY_TEXT_CHAT_TURNS: TextChatTurn[] = [];

50
ui/src/components/CallTypeCell.tsx Normal file
View file

@ -0,0 +1,50 @@
"use client";
import { ArrowDownLeft, ArrowUpRight, Globe, MessageSquare, Phone } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
const WEB_CALL_MODES = new Set(["webrtc", "smallwebrtc"]);
const TEXT_CHAT_MODES = new Set(["textchat"]);
const getCallChannel = (mode?: string | null): "phone" | "web" | "chat" => {
if (mode && TEXT_CHAT_MODES.has(mode)) return "chat";
if (mode && WEB_CALL_MODES.has(mode)) return "web";
return "phone";
};
export function CallTypeCell({
mode,
callType,
}: {
mode?: string | null;
callType?: string | null;
}) {
if (!mode && !callType) {
return <span className="text-sm text-muted-foreground">-</span>;
}
const channel = getCallChannel(mode);
const ChannelIcon = channel === "chat" ? MessageSquare : channel === "web" ? Globe : Phone;
const channelLabel = channel === "chat" ? "Text chat" : channel === "web" ? "Web call" : "Phone call";
const isInbound = callType === "inbound";
const DirectionIcon = isInbound ? ArrowDownLeft : ArrowUpRight;
const directionLabel = isInbound ? "Inbound" : "Outbound";
return (
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex items-center gap-1">
<ChannelIcon className="h-4 w-4 text-muted-foreground" />
<DirectionIcon
className={`h-3.5 w-3.5 ${isInbound ? "text-emerald-600" : "text-blue-600"}`}
/>
</span>
</TooltipTrigger>
<TooltipContent sideOffset={4}>
{directionLabel} · {channelLabel}
</TooltipContent>
</Tooltip>
);
}

11
ui/src/components/flow/nodes/BaseNode.tsx
View file

@ -10,9 +10,8 @@ export const BaseNode = forwardRef<
selected_through_edge?: boolean;
hovered_through_edge?: boolean;
runtimeActive?: boolean;
runtimePulseNonce?: number;
}
>(({ children, className, selected, invalid, selected_through_edge, hovered_through_edge, runtimeActive, runtimePulseNonce, ...props }, ref) => (
>(({ children, className, selected, invalid, selected_through_edge, hovered_through_edge, runtimeActive, ...props }, ref) => (
<div
ref={ref}
className={cn(
@ -34,14 +33,6 @@ export const BaseNode = forwardRef<
tabIndex={0}
{...props}
>
{runtimeActive ? (
<span
key={`runtime-pulse-${runtimePulseNonce ?? 0}`}
className="pointer-events-none absolute -inset-2 rounded-[18px] border-2 border-sky-400/55"
aria-hidden="true"
style={{ animation: "ping 900ms ease-out 2" }}
/>
) : null}
{children}
</div>
));

1
ui/src/components/flow/nodes/GenericNode.tsx
View file

@ -609,7 +609,6 @@ export const GenericNode = memo(({ data, selected, id, type }: GenericNodeProps)
selected_through_edge={data.selected_through_edge}
hovered_through_edge={data.hovered_through_edge}
runtimeActive={data.runtime_active}
runtimePulseNonce={data.runtime_pulse_nonce}
title={data.name || fallbackTitle}
icon={<Icon />}
badgeLabel={badge.label}

3
ui/src/components/flow/nodes/common/NodeContent.tsx
View file

@ -11,7 +11,6 @@ interface NodeContentProps {
selected_through_edge?: boolean;
hovered_through_edge?: boolean;
runtimeActive?: boolean;
runtimePulseNonce?: number;
title: string;
icon: ReactNode;
badgeLabel?: string;
@ -34,7 +33,6 @@ export const NodeContent = ({
selected_through_edge,
hovered_through_edge,
runtimeActive,
runtimePulseNonce,
title,
icon,
badgeLabel,
@ -59,7 +57,6 @@ export const NodeContent = ({
selected_through_edge={selected_through_edge}
hovered_through_edge={hovered_through_edge}
runtimeActive={runtimeActive}
runtimePulseNonce={runtimePulseNonce}
className={`p-0 ${className}`}
onDoubleClick={onDoubleClick}
>

1
ui/src/components/flow/types.ts
View file

@ -18,7 +18,6 @@ export type FlowNodeData = {
selected_through_edge?: boolean;
hovered_through_edge?: boolean;
runtime_active?: boolean;
runtime_pulse_nonce?: number;
allow_interrupt?: boolean;
extraction_enabled?: boolean;
extraction_prompt?: string;

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

@ -4,6 +4,7 @@ import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, ExternalLin
import { useState } from "react";
import { WorkflowRunResponseSchema } from "@/client/types.gen";
import { CallTypeCell } from "@/components/CallTypeCell";
import { FilterBuilder } from "@/components/filters/FilterBuilder";
import { MediaPreviewButton, MediaPreviewDialog } from "@/components/MediaPreviewDialog";
import { Badge } from "@/components/ui/badge";
@ -189,9 +190,7 @@ export function WorkflowRunsTable({
</TableCell>
<TableCell className="text-sm">{formatDate(run.created_at)}</TableCell>
<TableCell>
<Badge variant={run.call_type === 'inbound' ? "secondary" : "default"}>
{run.call_type === 'inbound' ? 'Inbound' : 'Outbound'}
</Badge>
<CallTypeCell mode={run.mode} callType={run.call_type} />
</TableCell>
<TableCell className="text-sm">
{typeof run.cost_info?.call_duration_seconds === 'number'

33
ui/src/components/workflow/conversation/ConversationItemView.tsx
View file

@ -15,15 +15,34 @@ interface ConversationItemViewProps {
export function ConversationItemView({ item, actions }: ConversationItemViewProps) {
if (item.kind === "message") {
const isUser = item.role === "user";
const bubble = (
<MessageBubble
role={item.role}
text={item.text}
final={item.final}
tone={item.tone}
reasoningDurationMs={item.reasoningDurationMs}
containerClassName={isUser && actions ? "min-w-0 flex-1 justify-end" : undefined}
/>
);
if (isUser && actions) {
return (
<div className="group flex w-full justify-end">
<div className="flex w-full items-end justify-end gap-2">
<div className="flex shrink-0 items-center gap-1 rounded-lg border border-border/60 bg-background/95 px-1 py-0.5 shadow-sm">
{actions}
</div>
{bubble}
</div>
</div>
);
}
return (
<div className="group space-y-1">
<MessageBubble
role={item.role}
text={item.text}
final={item.final}
tone={item.tone}
reasoningDurationMs={item.reasoningDurationMs}
/>
{bubble}
{actions ? (
<div className="flex h-5 items-center justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
{actions}

4
ui/src/components/workflow/conversation/MessageBubble.tsx
View file

@ -10,6 +10,7 @@ interface MessageBubbleProps {
final?: boolean;
tone?: "default" | "muted";
reasoningDurationMs?: number;
containerClassName?: string;
}
export function MessageBubble({
@ -18,12 +19,13 @@ export function MessageBubble({
final = true,
tone = "default",
reasoningDurationMs,
containerClassName,
}: MessageBubbleProps) {
const isUser = role === "user";
const isMuted = tone === "muted";
return (
<div className={cn("flex", isUser ? "justify-end" : "justify-start")}>
<div className={cn("flex", isUser ? "justify-end" : "justify-start", containerClassName)}>
<div className="flex max-w-[85%] flex-col gap-1">
{!isUser && reasoningDurationMs !== undefined ? (
<div className="flex items-center gap-1.5 px-1 text-xs text-muted-foreground">