Evandro Fonseca Junior
84ea2dec19
- Added `emoji-regex` and `remove-accents` packages to improve text processing capabilities. - Implemented automatic Ollama startup in the chat page for better user experience. - Enhanced setup page to include GPU selection based on hardware specifications. - Updated chat input to support real-time validation and improved user feedback. - Refactored message handling in chat to incorporate new processing features.
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type MessageRole = "user" | "assistant";
|
|
type MessageVisualState = "normal" | "highlighted" | "selected";
|
|
|
|
interface MessageBackgroundProps extends React.ComponentProps<"div"> {
|
|
role: MessageRole;
|
|
state?: MessageVisualState;
|
|
highContrast?: boolean;
|
|
}
|
|
|
|
export function MessageBackground({
|
|
role,
|
|
state = "normal",
|
|
highContrast = false,
|
|
className,
|
|
children,
|
|
...props
|
|
}: MessageBackgroundProps) {
|
|
const base = "group flex w-full gap-4 md:gap-6 relative transition-all duration-200";
|
|
|
|
// User: Fundo sutil, alinhado à direita (se quiséssemos, mas o layout atual é lista).
|
|
// Vamos manter layout lista mas com estilo clean.
|
|
// Perplexity usa: User message apenas texto bold/destacado, Assistant texto normal.
|
|
|
|
const roleCl = role === "user"
|
|
? "bg-transparent text-foreground px-0 py-2" // Minimalista
|
|
: "bg-transparent text-foreground/90 px-0 py-2";
|
|
|
|
// Estado de seleção sutil
|
|
const stateCl = state === "selected" ? "bg-muted/30 -mx-4 px-4 rounded-lg" : "";
|
|
|
|
const hc = highContrast ? "hc:bg-message-high-contrast hc:text-foreground" : "";
|
|
|
|
return (
|
|
<div
|
|
data-selected={state === "selected"}
|
|
className={cn(base, roleCl, stateCl, hc, className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|