"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>
  );
}