# Bubble 组件使用示例

以下为片段，实际页面请自行布局。

---

## 基础用法

```tsx
import { Bubble } from '@alipay/agentic-design-mobile';

const assistant = {
  role: 'assistant' as const,
  name: 'AI助手',
  avatar: 'https://mdn.alipayobjects.com/huamei_ptjqan/afts/img/A*ObqVQoMht3oAAAAARuAAAAgAekN6AQ/fmt.webp',
};

export function BubbleBasic() {
  return (
    <Bubble
      {...assistant}
      content="这是一个回答气泡示例"
      time="2025-01-01 12:00:00"
      shape="top-left"
    />
  );
}
```

---

## 消息列表

```tsx
import { Bubble } from '@alipay/agentic-design-mobile';

const roles = [
  { role: 'user' as const, name: '用户', avatar: 'https://mdn.alipayobjects.com/huamei_ptjqan/afts/img/A*ObqVQoMht3oAAAAARuAAAAgAekN6AQ/fmt.webp' },
  { role: 'assistant' as const, name: 'AI助手', avatar: 'https://mdn.alipayobjects.com/huamei_ptjqan/afts/img/A*ObqVQoMht3oAAAAARuAAAAgAekN6AQ/fmt.webp' },
];

const messages = [
  { role: 'user' as const, content: '你好', time: '12:00' },
  { role: 'assistant' as const, content: '你好，有什么可以帮你？', time: '12:01' },
];

export function BubbleList() {
  return (
    <Bubble.List roles={roles} messages={messages}>
      {(item) => (
        <Bubble
          {...item}
          variant={item.role === 'user' ? 'filled' : 'shadow'}
          shape={item.role === 'user' ? 'bottom-right' : 'top-left'}
        />
      )}
    </Bubble.List>
  );
}
```

---

## 底部插槽

```tsx
import { Actions, Bubble } from '@alipay/agentic-design-mobile';

const assistant = {
  role: 'assistant' as const,
  avatar: 'https://mdn.alipayobjects.com/huamei_ptjqan/afts/img/A*ObqVQoMht3oAAAAARuAAAAgAekN6AQ/fmt.webp',
};

const actions = [
  { text: '复制', icon: 'Copy' as const },
  { text: '刷新', icon: 'RefreshCcw' as const },
];

export function BubbleFooter() {
  const extra = <div style={{ borderRadius: 18, padding: '4px 8px' }}>额外</div>;
  return (
    <>
      <Bubble
        {...assistant}
        content="footer 在气泡内"
        footer={() => <Actions actions={actions} extra={extra} />}
        footerPlacement="inner"
      />
      <Bubble
        {...assistant}
        content="footer 在气泡外"
        footer={() => <Actions actions={actions} />}
        footerPlacement="outside"
      />
    </>
  );
}
```

---

## 变体样式

```tsx
import { Bubble } from '@alipay/agentic-design-mobile';

const user = { role: 'user' as const, avatar: '' };
const bot = { role: 'assistant' as const, avatar: '' };

export function BubbleVariants() {
  return (
    <>
      <Bubble {...user} content="filled" variant="filled" shape="bottom-right" />
      <Bubble {...bot} content="shadow" variant="shadow" shape="top-left" />
      <Bubble {...user} content="outlined" variant="outlined" shape="bottom-left" />
    </>
  );
}
```

---

## 展示头部

```tsx
import { Bubble } from '@alipay/agentic-design-mobile';

export function BubbleHeader() {
  return (
    <>
      <Bubble
        role="user"
        name="用户"
        avatar="https://mdn.alipayobjects.com/huamei_ptjqan/afts/img/A*ObqVQoMht3oAAAAARuAAAAgAekN6AQ/fmt.webp"
        content="带头部"
        showHeader
        variant="filled"
      />
    </>
  );
}
```

---

## 重试

```tsx
import { useState } from 'react';
import { Bubble } from '@alipay/agentic-design-mobile';

export function BubbleRetry() {
  const [status, setStatus] = useState<'error' | 'pending' | 'success'>('error');
  return (
    <Bubble
      role="user"
      content="发送失败时可重试"
      shape="top-left"
      variant="filled"
      status={status}
      onRefresh={() => {
        setStatus('pending');
        setTimeout(() => setStatus('error'), 2000);
      }}
    />
  );
}
```