feat(ui): introduce each teacher with an individual welcome bubble

src/pages/Chat/TeacherCompanion.tsx

@@ -1,5 +1,5 @@
 import { ArrowUpRight, Loader2, RefreshCw, X } from 'lucide-react';
-import { useState, type Ref } from 'react';
+import { useState, type CSSProperties, type Ref } from 'react';
 import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
 import { TeacherAvatar } from './TeacherAvatar';
 import { TeacherIntroduction } from './TeacherIntroduction';
@@ -14,7 +14,7 @@ export function TeacherCompanion({ companion, open, onOpen, onToggle, bubbleRef,
   bubbleRef?: Ref<HTMLDivElement>;
   introductionRef?: Ref<HTMLDivElement>;
 }) {
-  const { definition, invitation, welcome, loading, enabled, checking, error } = companion;
+  const { definition, invitation, welcome, welcomes, loading, enabled, checking, error } = companion;
   const [introductionId, setIntroductionId] = useState<string | null>(null);
   const introductionProps = (id: string) => ({
     open: introductionId === id,
@@ -25,6 +25,7 @@ export function TeacherCompanion({ companion, open, onOpen, onToggle, bubbleRef,
   const agents = companion.selectedAgent && !companion.agents.some((item) => item.teacher_id === activeId)
     ? [...companion.agents, companion.selectedAgent] : companion.agents;
   const viewConversation = () => { companion.dismiss(); onOpen(); };
+  const meetTeacher = (agentId: string) => { setIntroductionId(null); companion.dismissWelcome(agentId); onOpen(agentId); };
   const status = loading ? '正在连接智能体…'
     : checking ? '智能体在看看你最近的进展…'
     : error || (!enabled ? '智能体暂未开放，仍可查看以往讨论' : open ? '我们慢慢聊，想到什么都可以说' : '点我聊聊，想到什么都可以说');
@@ -60,6 +61,29 @@ export function TeacherCompanion({ companion, open, onOpen, onToggle, bubbleRef,
         <span>{companion.refreshing ? '刷新中' : companion.refreshStatus === 'error' ? '刷新失败' : companion.refreshStatus === 'success' ? '已更新' : '刷新'}</span>
       </button>
       <span className="sr-only" role="status" aria-live="polite">{refreshMessage}</span>
+      {!invitation && welcomes.length > 0 && <div ref={bubbleRef} className="teacher-welcome-presence" data-testid="teacher-welcomes" aria-label="认识这里的老师">
+        <div className="teacher-welcome-heading"><span>来认识一下</span>
+          <button type="button" onClick={companion.dismissWelcomes}>先自己试试</button>
+        </div>
+        <div className="teacher-welcome-list">
+          {welcomes.map((item, index) => <article key={item.agentId} className="teacher-welcome-card" data-agent-id={item.agentId}
+            data-tone={item.tone} style={{ '--welcome-delay': `${Math.min(index, 4) * 180}ms` } as CSSProperties}>
+            <button type="button" className="teacher-welcome-avatar" aria-label={`认识${item.definition.name}`} onClick={() => meetTeacher(item.agentId)}>
+              <TeacherAvatar definition={item.definition} />
+            </button>
+            <div className="teacher-welcome-bubble">
+              <button type="button" className="teacher-welcome-open" aria-label={`和${item.definition.name}聊聊`} onClick={() => meetTeacher(item.agentId)}>
+                <span className="teacher-welcome-name">{item.definition.name}</span>
+                <span className="teacher-welcome-text" title={item.text}>{item.text}</span>
+                <span className="teacher-welcome-action">和我聊聊 <ArrowUpRight aria-hidden="true" className="h-3 w-3" /></span>
+              </button>
+              <button type="button" className="teacher-welcome-dismiss" aria-label={`收起${item.definition.name}的介绍`} onClick={() => companion.dismissWelcome(item.agentId)}>
+                <X className="h-3.5 w-3.5" aria-hidden="true" />
+              </button>
+            </div>
+          </article>)}
+        </div>
+      </div>}
       {(invitation || welcome) && <div ref={bubbleRef} className="teacher-companion-presence" data-testid="teacher-presence">
         <div className="teacher-companion-bubble" data-testid="teacher-invitation" data-bubble-kind={invitation ? 'check-in' : 'welcome'}>
           <div className="teacher-companion-bubble-heading">