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

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

@ -1,9 +1,9 @@
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;
@ -26,14 +26,11 @@ export function AssistantMessage({
showForkButton = false, showForkButton = false,
onFork, onFork,
}: AssistantMessageProps) { }: AssistantMessageProps) {
const updatedOnboarding = process.env.UPDATED_ONBOARDING === "true";
const IconComponent = updatedOnboarding ? DogIcon : Bot;
return ( return (
<Message <Message
icon={ icon={
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0 select-none"> <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" /> <DogIcon className="h-6 w-6 text-accent-foreground" />
</div> </div>
} }
actions={ actions={
@ -54,9 +51,12 @@ export function AssistantMessage({
expandedFunctionCalls={expandedFunctionCalls} expandedFunctionCalls={expandedFunctionCalls}
onToggle={onToggle} onToggle={onToggle}
/> />
<MarkdownRenderer chatMessage={content} /> <MarkdownRenderer
className="text-foreground text-sm py-1.5"
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>
); );

6
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,7 +25,7 @@ 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>