37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client";
|
||
/**
|
||
* TextBubble 文字气泡
|
||
*
|
||
*
|
||
*
|
||
* 视觉差异：
|
||
* - AI 消息：白底黑字 + 左上角尖角
|
||
* - 用户消息：渐变（primaryGradient）+ 白字 + 右上角尖角
|
||
*/
|
||
|
||
export interface TextBubbleProps {
|
||
content: string;
|
||
isFromAI: boolean;
|
||
}
|
||
|
||
const BASE_CLASS_NAME =
|
||
"w-full self-stretch whitespace-pre-wrap wrap-break-word rounded-(--radius-xxl,24px) px-(--spacing-4,16px) py-(--spacing-3,12px) text-(length:--chat-message-font-size,var(--responsive-body,16px)) leading-(--chat-message-line-height,1.5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))";
|
||
|
||
const AI_CLASS_NAME =
|
||
"rounded-tl-none bg-white text-(--color-text-foreground,#000)";
|
||
|
||
const USER_CLASS_NAME =
|
||
"rounded-tr-none bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] text-white";
|
||
|
||
export function TextBubble({ content, isFromAI }: TextBubbleProps) {
|
||
return (
|
||
<div
|
||
className={[BASE_CLASS_NAME, isFromAI ? AI_CLASS_NAME : USER_CLASS_NAME]
|
||
.filter(Boolean)
|
||
.join(" ")}
|
||
>
|
||
{content}
|
||
</div>
|
||
);
|
||
}
|