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

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