# Think 组件使用示例

以下为片段，实际页面请自行布局。正文内容由业务侧流式拼接后传入 `children`。

---

## 基础用法

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

const text =
  '您好，我是您的AI助手。当前为 Think 组件示例，用于展示可折叠的思考过程。';

export function ThinkBasic() {
  return <Think title="深度思考">{text}</Think>;
}
```

---

## 默认展开

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

export function ThinkDefaultExpanded() {
  return (
    <Think title="深度思考" defaultExpanded>
      默认展开时的思考内容。
    </Think>
  );
}
```

---

## 引用样式

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

export function ThinkQuote() {
  return (
    <Think title="深度思考" defaultExpanded quote>
      带左侧引用线的样式。
    </Think>
  );
}
```

---

## 加载状态

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

export function ThinkLoading() {
  return (
    <Think title="深度思考" loading blink defaultExpanded quote>
      思考内容仍在生成中……
    </Think>
  );
}
```

---

## 受控展开

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

export function ThinkControlled() {
  const [expanded, setExpanded] = useState(false);
  return (
    <Think title="深度思考" expanded={expanded} onExpand={setExpanded}>
      点击标题可切换展开（由外部 state 控制）。
    </Think>
  );
}
```