29 lines
903 B
TypeScript
29 lines
903 B
TypeScript
"use client";
|
||
/**
|
||
* LottieMessageBubble 动画消息气泡
|
||
*
|
||
* 原始 Dart: lib/ui/chat/widgets/lottie_message_bubble.dart（51 行）
|
||
*
|
||
* 原始实现：使用 lottie SDK 渲染"打字指示器"动画
|
||
* 本轮实现：使用 CSS keyframes 模拟（无 lottie 依赖）
|
||
* - 3 个跳动的圆点（左右 + 中间）
|
||
* - 1.4s 周期，stagger 动画延迟
|
||
*
|
||
* 行为一致（视觉类似 lottie 的"三点跳跃"动画）
|
||
*/
|
||
import { MessageAvatar } from "./message-avatar";
|
||
import styles from "./lottie-message-bubble.module.css";
|
||
|
||
export function LottieMessageBubble() {
|
||
return (
|
||
<div className={styles.bubbleRow} role="status" aria-label="AI typing">
|
||
<MessageAvatar isFromAI={true} />
|
||
<div className={styles.bubble}>
|
||
<span className={styles.dot} />
|
||
<span className={styles.dot} />
|
||
<span className={styles.dot} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|