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 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;
@ -26,14 +26,11 @@ export function AssistantMessage({
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" />
<DogIcon className="h-6 w-6 text-accent-foreground" />
</div>
}
actions={
@ -54,9 +51,12 @@ export function AssistantMessage({
expandedFunctionCalls={expandedFunctionCalls}
onToggle={onToggle}
/>
<MarkdownRenderer chatMessage={content} />
<MarkdownRenderer
className="text-foreground text-sm py-1.5"
chatMessage={content}
/>
{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>
);

6
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,7 +25,7 @@ export function UserMessage({ content }: UserMessageProps) {
</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}
</p>
</Message>