apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-06-13 08:15:21 +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

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