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

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

@ -13,9 +13,9 @@ export function UserMessage({ content }: UserMessageProps) {
return ( return (
<Message <Message
icon={ 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} /> <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 ? (
user.name.charAt(0).toUpperCase() user.name.charAt(0).toUpperCase()
) : ( ) : (
@ -25,9 +25,9 @@ export function UserMessage({ content }: UserMessageProps) {
</Avatar> </Avatar>
} }
> >
<p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere"> <p className="text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere">
{content} {content}
</p> </p>
</Message> </Message>
); );
} }