BPOS-TMP-REPO/apps/web/src/shared/ChatAvatar.tsx

/**
 * 聊天消息头像 —— 自原型 `_components/ChatAvatar.tsx` 平移(成对设计)。
 * 圆角方形 + 实心白色剪影:AI = 机器人(飞书蓝),员工 = 人像半身(浅蓝绿)。
 * `<g transform>` 校正图标在框内垂直居中。
 */
export function ChatAvatar({ who }: { who: 'ai' | 'user' }) {
  const isAi = who === 'ai';
  return (
    <div
      className={'chat-avatar ' + (isAi ? 'chat-avatar-ai' : 'chat-avatar-user')}
      aria-label={isAi ? 'AI 助手' : '员工'}
    >
      {isAi ? (
        <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
          <g transform="translate(0,2.35)">
            <circle cx="12" cy="3" r="1.1" fill="#fff" />
            <rect x="11.45" y="3.7" width="1.1" height="1.9" rx="0.55" fill="#fff" />
            <rect x="4.3" y="5.6" width="15.4" height="11.8" rx="4.3" fill="#fff" />
            <rect x="2.2" y="9.4" width="2.1" height="4.5" rx="1.05" fill="#fff" />
            <rect x="19.7" y="9.4" width="2.1" height="4.5" rx="1.05" fill="#fff" />
            <circle cx="9.4" cy="10.9" r="1.7" fill="#245bdb" />
            <circle cx="14.6" cy="10.9" r="1.7" fill="#245bdb" />
            <path
              d="M9.5 14c.65.85 1.55 1.25 2.5 1.25s1.85-.4 2.5-1.25"
              stroke="#245bdb"
              strokeWidth="1.2"
              fill="none"
              strokeLinecap="round"
              opacity="0.55"
            />
          </g>
        </svg>
      ) : (
        <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
          <g transform="translate(0,-0.5)">
            <circle cx="12" cy="8.2" r="3.7" fill="#fff" />
            <path
              d="M5.5 19.4c0-3.6 2.9-5.8 6.5-5.8s6.5 2.2 6.5 5.8c0 .6-.5 1.1-1.1 1.1H6.6c-.6 0-1.1-.5-1.1-1.1z"
              fill="#fff"
            />
          </g>
        </svg>
      )}
    </div>
  );
}