### Chat UI 设计风格规范（chatUI）

本规范用于统一前端聊天相关组件（如 `ChatWindow`, `ContactOnlyWindow`, `Message*`, `InteractiveMessage`, `ContactForm` 等）的视觉与交互风格。所有样式以 Tailwind CSS 实现为主，必要时使用行内 style 注入主题色（`config.primaryColor`）。

#### 1. 颜色与主题
- **主色（Primary）**: 使用 `config.primaryColor`；未提供时使用 Tailwind 扩展色 `primary-500 (#3b82f6)`。
- **强调/描边**: 容器顶部使用 `border-t-4`，颜色由 `style={{ borderTopColor: config.primaryColor }}` 控制。
- **Header 背景**: 使用主色的浅色透明背景：`style={{ backgroundColor: config.primaryColor ? `${config.primaryColor}10` : undefined }}`。
- **AI 气泡**: `bg-gray-100 text-gray-800`
- **用户气泡**: `bg-primary-500 text-white`，并通过行内 style 注入主色（以确保品牌一致）。

#### 2. 布局与容器
- **窗口容器**: `ai-cs-chat-window is-open bg-white rounded-lg shadow-xl border border-gray-200 animate-slide-up flex-col border-t-4`。
- **尺寸**: `w-80 sm:w-96 h-96 sm:h-[28rem]`。
- **定位**:
  - 非全局模式：`fixed z-40` + 位置类（见下）
  - 全局模式：`absolute` + 位置类（见下）
- **位置类（与 `ChatWindow` 保持一致）**：
  - `bottom-right`: `bottom-20 right-6`
  - `bottom-left`: `bottom-20 left-6`
  - `top-right`: `top-20 right-6`
  - `top-left`: `top-20 left-6`
  - `middle-right`: `top-1/2 right-6 transform -translate-y-1/2`
  - `middle-left`: `top-1/2 left-6 transform -translate-y-1/2`
  - `center`: `top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`
- **响应式可见性**: 根据 `config.showOnMobile`, `config.showOnDesktop` 切换 `hidden md:flex` / `md:hidden` / `flex`。

#### 3. Header（统一到 ChatWindow 风格）
- 外层：`flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg`。
- 头像：
  - 有图片：`<img className="w-8 h-8 rounded-full object-cover" />`
  - 无图片：用主色背景的圆：`<div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-medium" style={{ backgroundColor: config.primaryColor || '#3b82f6' }}>AI</div>`
- 标题与状态：
  - 标题：`text-sm font-semibold text-gray-900`，文案 `config.showName || 'AI Assistant'`
  - 状态：`text-xs text-gray-500`，文案 `Typing...`/`Online`
- 关闭按钮：`text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-full hover:bg-gray-100`

#### 4. 消息列表与滚动
- 列表容器：`h-full overflow-y-auto p-4 space-y-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100`
- 自动滚动：使用 `requestAnimationFrame` + `scrollIntoView` 的健壮滚动到底实现（参考 `MessageList`）。

#### 5. 消息气泡
- **AI 气泡**：
  - 外层：`flex justify-start mb-4`
  - 头像行：同 Header 头像缩小版（`w-6 h-6`）+ 名称 `text-xs text-gray-500`
  - 气泡：`bg-gray-100 text-gray-800 rounded-lg px-3 py-2 break-words text-sm`
  - 时间：`text-xs text-gray-400 mt-1 text-left`
- **用户气泡**：
  - 外层：`flex justify-end mb-4`
  - 气泡：`text-white rounded-lg px-3 py-2 break-words text-sm` + `style={{ backgroundColor: config.primaryColor }}`
  - 时间：`text-xs text-gray-400 mt-1 text-right`

#### 6. 交互消息与联系人按钮
- 按钮统一为圆形：`w-10 h-10 rounded-full flex items-center justify-center shadow hover:shadow-md transition`
- 图标：优先使用 `dashicons`，白色前景；或使用自定义图片 `object-cover rounded-full`。
- 邮件按钮背景：主色（`config.primaryColor || '#3b82f6'`）。
- 按钮容器：`flex flex-wrap gap-2`
- 辅助文案：`text-xs text-gray-600`

#### 7. 表单（如 `ContactForm`）
- 轻量、紧凑（在气泡区内可使用 `variant="compact"`）：边距小、控件圆角一致，按钮使用主色。

#### 8. 阴影与圆角
- 容器：`rounded-lg shadow-xl border border-gray-200`
- 按钮：`shadow hover:shadow-md`
- 气泡：`rounded-lg`

#### 9. 动效
- 进入动效：`animate-slide-up`
- 微交互：按钮 `hover:` 态提升阴影；无其它夸张动效。

#### 10. 无内联 <style> CSS
- 组件中不再保留内联 `<style>` 大段 CSS。统一通过 Tailwind 类与少量行内 `style` 注入主题色实现。

#### 11. 无关项
- 移除所有渐变头部、非 chatUI 风格的自定义定位与字体设置；统一使用 `index.css` 与 Tailwind 主题。

按照以上规范，将所有聊天相关组件对齐到 `ChatWindow` 的风格基线，避免重复样式与视觉偏差。



### 设计令牌与主题映射（ChatUI Design Tokens）

- 参考来源： [Colors](https://chatui.io/design/colors) · [Font](https://chatui.io/design/font) · [Space](https://chatui.io/design/space) · [Radius](https://chatui.io/design/radius)

#### 1. 颜色（Colors）
- 语义令牌（Tailwind 主题 + CSS 变量）：
  - 文本：`text.primary|secondary|tertiary|disabled` → `--ai-text-primary|secondary|tertiary|disabled`
  - 背景：`bg.base|layer|overlay|accent|muted` → `--ai-bg-base|layer|overlay|accent|muted`
  - 边框：`border.subtle|strong|focus` → `--ai-border-subtle|strong|focus`
  - 状态：`state.success|warning|danger|info.{bg,text,border}` → 对应 `--ai-*` 变量
  - 品牌主色：`primary.50–900` + 行内 `style={{ backgroundColor: config.primaryColor }}` 保持品牌一致性

#### 2. 字体（Font）
- 字体族：`theme.extend.fontFamily.sans` 使用系统字体栈；字号层级：`caption(12)`, `body-sm(14)`, `body(16)`, `subtitle(18)`, `title(20)`, `heading(28)`（行高按指南设置）

#### 3. 间距（Space）
- 采用 4/8pt 栅格；组件建议：
  - 气泡：`px-3 py-2`（≈ 12/8）；气泡间距 `space-y-2`；分组间距 `mt-3/4`。
  - 容器：`p-4` 起步；窗口留白≥ `p-4`。

#### 4. 圆角（Radius）
- 刻度：`rounded-lg`（8）为聊天窗口/气泡基线；按钮/头像使用 `rounded-full`。

#### 5. 运行时主题（Runtime Theme）
- 在 `src/index.css` 定义 CSS 变量（RGB 分量形式），供 Tailwind 配置通过 `withOpacity('--var')` 映射以支持透明度：

```css
:root {
  --ai-text-primary: 17 24 39; /* #111827 */
  --ai-bg-base: 255 255 255; /* #ffffff */
  --ai-border-subtle: 229 231 235; /* #E5E7EB */
  /* ... 其余变量详见文件 */
}
```

#### 6. 组件落地示例
- AI 气泡：`bg.bg.layer` + `text.text.primary` + `rounded-lg px-3 py-2 text-sm`
- 用户气泡：`bg-primary-500 text-white` + 行内品牌色覆盖 `style={{ backgroundColor: config.primaryColor }}`
- 输入框聚焦：`focus:ring-2 focus:ring-primary-500 focus:border-transparent`
- 主按钮：`bg-primary-500 hover:bg-primary-600 text-white` + `focus:ring-primary-300 focus:ring-offset-2`

以上映射保证：
- 在不改动组件结构的前提下，支持通过 CSS 变量进行品牌换肤；
- 同步满足官方 ChatUI 颜色/字体/间距/圆角的设计基线。