gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated user message and assistant message designs

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-20 18:07:37 -03:00 • committed by Mike Fortman
parent 26aea23b4e
commit 04e8d69556
2 changed files with 58 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
frontend/src/app/chat/components/assistant-message.tsx
View file

@ -1,63 +1,63 @@
import { Bot, GitBranch } from "lucide-react";
import { GitBranch } from "lucide-react";
import DogIcon from "@/components/logo/dog-icon";
import { MarkdownRenderer } from "@/components/markdown-renderer";
import type { FunctionCall } from "../types";
import { FunctionCalls } from "./function-calls";
import { Message } from "./message";
import type { FunctionCall } from "../types";
import DogIcon from "@/components/logo/dog-icon";
interface AssistantMessageProps {
content: string;
functionCalls?: FunctionCall[];
messageIndex?: number;
expandedFunctionCalls: Set<string>;
onToggle: (functionCallId: string) => void;
isStreaming?: boolean;
showForkButton?: boolean;
onFork?: (e: React.MouseEvent) => void;
content: string;
functionCalls?: FunctionCall[];
messageIndex?: number;
expandedFunctionCalls: Set<string>;
onToggle: (functionCallId: string) => void;
isStreaming?: boolean;
showForkButton?: boolean;
onFork?: (e: React.MouseEvent) => void;
}
export function AssistantMessage({
content,
functionCalls = [],
messageIndex,
expandedFunctionCalls,
onToggle,
isStreaming = false,
showForkButton = false,
onFork,
content,
functionCalls = [],
messageIndex,
expandedFunctionCalls,
onToggle,
isStreaming = false,
showForkButton = false,
onFork,
}: AssistantMessageProps) {
const updatedOnboarding = process.env.UPDATED_ONBOARDING === "true";
const IconComponent = updatedOnboarding ? DogIcon : Bot;
return (
<Message
icon={
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0 select-none">
<IconComponent className="h-4 w-4 text-accent-foreground" />
</div>
}
actions={
showForkButton && onFork ? (
<button
onClick={onFork}
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground"
title="Fork conversation from here"
>
<GitBranch className="h-3 w-3" />
</button>
) : undefined
}
>
<FunctionCalls
functionCalls={functionCalls}
messageIndex={messageIndex}
expandedFunctionCalls={expandedFunctionCalls}
onToggle={onToggle}
/>
<MarkdownRenderer chatMessage={content} />
{isStreaming && (
<span className="inline-block w-2 h-4 bg-blue-400 ml-1 animate-pulse"></span>
)}
</Message>
);
return (
<Message
icon={
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0 select-none">
<DogIcon className="h-6 w-6 text-accent-foreground" />
</div>
}
actions={
showForkButton && onFork ? (
<button
onClick={onFork}
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground"
title="Fork conversation from here"
>
<GitBranch className="h-3 w-3" />
</button>
) : undefined
}
>
<FunctionCalls
functionCalls={functionCalls}
messageIndex={messageIndex}
expandedFunctionCalls={expandedFunctionCalls}
onToggle={onToggle}
/>
<MarkdownRenderer
className="text-foreground text-sm py-1.5"
chatMessage={content}
/>
{isStreaming && (
<span className="inline-block w-1 h-4 bg-primary ml-1 animate-pulse" />
)}
</Message>
);
}

10
frontend/src/app/chat/components/user-message.tsx
View file

@ -13,9 +13,9 @@ export function UserMessage({ content }: UserMessageProps) {
return (
<Message
icon={
<Avatar className="w-8 h-8 flex-shrink-0 select-none">
<Avatar className="w-8 h-8 rounded-lg flex-shrink-0 select-none">
<AvatarImage draggable={false} src={user?.picture} alt={user?.name} />
<AvatarFallback className="text-sm bg-primary/20 text-primary">
<AvatarFallback className="text-sm bg-accent/20 text-primary rounded-lg">
{user?.name ? (
user.name.charAt(0).toUpperCase()
) : (
@ -25,9 +25,9 @@ export function UserMessage({ content }: UserMessageProps) {
</Avatar>
}
>
<p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
{content}
</p>
<p className="text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere">
{content}
</p>
</Message>
);
}