#Bubble 气泡组件

import {
  Bubble,
  SuggestionList,
  MessageBubbleData,
} from '@ant-design/agentic-ui';
import { Card } from 'antd';
// 创建模拟文件的辅助函数
const createMockFile = (
  name: string,
  type: string,
  size: number,
  url: string,
): AttachmentFile => ({
  name,
  type,
  size,
  url,
  lastModified: Date.now(),
  webkitRelativePath: '',
  arrayBuffer: () => Promise.resolve(new ArrayBuffer(0)),
  bytes: () => Promise.resolve(new Uint8Array(0)),
  text: () => Promise.resolve(''),
  stream: () => new ReadableStream(),
  slice: () => new Blob(),
});
const props = {
  markdownRenderConfig: {
    tableConfig: {
      pure: true,
    },
  },
  time: Date.now(),
  onLike: () => {
    message.success('点赞成功');
  },
  onDislike: () => {
    message.info('点踩成功');
  },
  // 或者使用已废弃的 onDisLike（保持向后兼容）
  // onDisLike: () => {
  //   message.info('点踩成功');
  // },
  onReply: () => {
    message.info('回复成功');
  },
  onAvatarClick: () => {
    message.info('头像点击成功');
  },
  onDoubleClick: () => {
    message.info('双击成功');
  },
};

const items = [
  {
    key: 'qwe',
    icon: '💸',
    text: '关税对消费类基金的影响',
  },
  {
    key: 'asd',
    icon: '📝',
    text: '恒生科技指数基金相关新闻',
  },
  {
    key: 'zxc',
    icon: '📊',
    text: '数据分析与可视化',
  },
];

const message: MessageBubbleData = {
  id: '1',
  content: `生成式 AI 可以用于自动化迄今只有人类能够完成的创造性任务，这样可以为个人和公司节省时间和金钱。如果你能向生成式 AI 描述你的任务，它很可能为你完成任务或者为你提供一个良好的起点。生成式 AI 可以用于自动化迄今只有人类能够完成的创造性任务，这样可以为个人和公司节省时间和金钱。如果你能向生成式 AI 描述你的任务，它很可能为你完成任务或者为你提供一个良好的起点。生成式 AI 可以用于自动化迄今只有人类能够完成的创造性任务，这样可以为个人和公司节省时间和金钱。如果你能向生成式 AI 描述你的任务，它很可能为你完成任务或者为你提供一个良好的起点。生成式 AI 可以用于自动化迄今只有人类能够完成的创造性任务，这样可以为个人和公司节省时间和金钱。如果你能向生成式 AI 描述你的任务，它很可能为你完成任务或者为你提供一个良好的起点。
`,
  createAt: Date.now(),
  updateAt: Date.now(),
  preMessage: {
    id: '2',
    content: `生成式 AI 可以用于自动化迄今只有人类能够完成的创造性任务，这样可以为个人和公司节省时间和金钱。如果你能向生成式 AI 描述你的任务，它很可能为你完成任务或者为你提供一个良好的起点。| 功能 | 描述 |
| -------- | -------- |
| 功能1 | 描述1 |
| 功能2 | 描述2 |
| 功能3 | 描述3 |
| 功能4 | 描述4 |
| 功能5 | 描述5 |`,
    createAt: Date.now(),
    updateAt: Date.now(),
  },
  time: Date.now(),
  meta: {
    avatar:
      'https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*ed7ZTbwtgIQAAAAAQOAAAAgAemuEAQ/original',
    title: 'LUI',
  },
  fileMap: new Map<string, AttachmentFile>([
    [
      'example-document.pdf',
      createMockFile(
        'example-document.pdf',
        'application/pdf',
        2048576,
        'https://example.com/example-document.pdf',
      ),
    ],
    [
      'preview-image.png',
      createMockFile(
        'preview-image.png',
        'image/png',
        1048576,
        'https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*ed7ZTbwtgIQAAAAAQOAAAAgAemuEAQ/original',
      ),
    ],
    [
      'preview.mp4',
      createMockFile(
        'preview.mp4',
        'video/mp4',
        1048576,
        'https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/90LVRoQeGdkAAAAAAAAAAAAAK4eUAQBr',
      ),
    ],
    [
      'image.png',
      createMockFile(
        'image.png',
        'image/png',
        10485700,
        'https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*rhTwTY6FkwIAAAAAAAAAAAAADml6AQ/original',
      ),
    ],
    [
      'code-example.js',
      createMockFile(
        'code-example.js',
        'application/javascript',
        512000,
        'https://example.com/code-example.js',
      ),
    ],
  ]),
};

export default () => (
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      gap: 16,
    }}
  >
    <Card title="用户消息">
      <Bubble
        style={{
          flex: 1,
        }}
        {...props}
        originData={message}
        avatar={message.meta}
        placement="right"
        markdownRenderConfig={{
          tableConfig: {
            pure: true,
          },
        }}
        quote={{
          popupDirection: 'right',
          fileName: 'utils/helper.ts',
          lineRange: '12-25',
          quoteDescription: '这是一个工具函数的引用，用于处理数据格式化',
          popupDetail: `export const formatData = (data: any) => {
            if (!data) return null;
            return {
              id: data.id,
              name: data.name,
              createdAt: new Date(data.created_at)
            };`,
        }}
      />
    </Card>
    <Card title="媒体消息">
      <Bubble
        style={{
          flex: 1,
        }}
        pure
        {...props}
        originData={message}
        avatar={message.meta}
        placement="left"
      />
      <div
        style={{
          paddingLeft: 20,
        }}
      >
        <SuggestionList items={items} onItemClick={() => alert('ask')} />
      </div>
    </Card>

    <Card title="媒体消息">
      <Bubble
        style={{
          flex: 1,
        }}
        pure
        {...props}
        originData={{
          id: '1',
          content: `有几个人\n\`\`\`agentic-ui-filemap
{
    "fileList": [
        {
            "uuid": "1775017476829",
            "name": "images_q75.webp",
            url:"https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*ed7ZTbwtgIQAAAAAQOAAAAgAemuEAQ/original",
            "size": 140528,
            "type": "image/webp",
        },
        {
            "uuid": "1775017477422.~tplv-dy-aweme-images_q75.webp",
            "name": "~tplv-dy-aweme-images_q75.webp",
            "size": 93720,
            url:"https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*ed7ZTbwtgIQAAAAAQOAAAAgAemuEAQ/original",
            "type": "image/webp",
         
        },
        {
            "uuid": "1775017477211.~tplv-dy-aweme-images_q75.webp",
            "name": "~tplv-dy-aweme-images_q75.webp",
            url:"https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*rhTwTY6FkwIAAAAAAAAAAAAADml6AQ/original",
            "size": 124462,
            "type": "image/webp",
           
        },
        {
            "uuid": "1775017477404.~tplv-dy-aweme-images_q75.webp",
            "name": "~tplv-dy-aweme-images_q75.webp",
            url:"https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*ed7ZTbwtgIQAAAAAQOAAAAgAemuEAQ/original",
            "size": 108864,
            "type": "image/webp",
           
        }
    ]
}
\`\`\``,
          createAt: Date.now(),
          updateAt: Date.now(),
          meta: { avatar: '...', title: 'AI 助手' },
        }}
        avatar={{ avatar: '...', title: 'AI 助手' }}
        placement="left"
      />
    </Card>
  </div>
);

import { BubbleList, MessageBubbleData } from '@ant-design/agentic-ui';

const messages: MessageBubbleData[] = [
  // ... 消息数据
];

export default () => (
  <BubbleList
    bubbleList={messages}
    assistantMeta={{ avatar: '...', title: 'AI 助手' }}
    userMeta={{ avatar: '...', title: '用户' }}
  />
);

import { BubbleList } from '@ant-design/agentic-ui';

<BubbleList
  markdownRenderConfig={{
    renderMode: 'markdown',
    throttleOptions: { fade: false },
  }}
  // ...
/>;

<BubbleList
  bubbleList={messages}
  styles={{ content: { lineHeight: 1.6 }, extra: { marginTop: 8 } }}
  classNames={{ content: 'message-content', extra: 'message-actions' }}
/>

import { Bubble, MessageBubbleData } from '@ant-design/agentic-ui';

// 连续的用户消息
const userMessages: MessageBubbleData[] = [
  {
    id: '1',
    role: 'user',
    content: '你好，我想了解一下产品功能',
    createAt: Date.now() - 60000,
    updateAt: Date.now() - 60000,
  },
  {
    id: '2',
    role: 'user',
    content: '能详细介绍一下吗？',
    createAt: Date.now() - 30000,
    updateAt: Date.now() - 30000,
  },
];

// 连续的助手消息
const assistantMessages: MessageBubbleData[] = [
  {
    id: '3',
    role: 'assistant',
    content: '当然可以，我们的产品具有以下特点...',
    createAt: Date.now() - 20000,
    updateAt: Date.now() - 20000,
  },
  {
    id: '4',
    role: 'assistant',
    content: `此外，还支持多种高级功能...
| 功能 | 描述 |
| -------- | -------- |
| 功能1 | 描述1 |
| 功能2 | 描述2 |
| 功能3 | 描述3 |
| 功能4 | 描述4 |
| 功能5 | 描述5 |
`,
    createAt: Date.now() - 10000,
    updateAt: Date.now() - 10000,
  },
];

const App = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* 第一条用户消息 - 显示头像和标题 */}
      <Bubble
        originData={userMessages[0]}
        avatar={{ name: '用户', avatar: 'user-avatar.jpg' }}
        placement="right"
      />

      {/* 第二条用户消息 - 隐藏头像和标题（preMessageSameRole 生效） */}
      <Bubble
        originData={userMessages[1]}
        avatar={{ name: '用户', avatar: 'user-avatar.jpg' }}
        placement="right"
        preMessage={userMessages[0]} // 传入前一条消息
      />

      {/* 第一条助手消息 - 显示头像和标题 */}
      <Bubble
        originData={assistantMessages[0]}
        avatar={{ name: 'AI助手', avatar: 'ai-avatar.jpg' }}
        placement="left"
      />

      {/* 第二条助手消息 - 隐藏头像和标题（preMessageSameRole 生效） */}
      <Bubble
        originData={assistantMessages[1]}
        avatar={{ name: 'AI助手', avatar: 'ai-avatar.jpg' }}
        placement="left"
        preMessage={assistantMessages[0]} // 传入前一条消息
      />
    </div>
  );
};

import { BubbleList } from '@ant-design/agentic-ui';

const messages: MessageBubbleData[] = [
  // 用户消息
  {
    id: '1',
    role: 'user',
    content: '你好',
    createAt: Date.now() - 60000,
    updateAt: Date.now() - 60000,
  },
  {
    id: '2',
    role: 'user',
    content: '我想咨询一个问题',
    createAt: Date.now() - 50000,
    updateAt: Date.now() - 50000,
  },

  // 助手消息
  {
    id: '3',
    role: 'assistant',
    content: '您好！很高兴为您服务',
    createAt: Date.now() - 40000,
    updateAt: Date.now() - 40000,
  },
  {
    id: '4',
    role: 'assistant',
    content: '请详细描述您的问题',
    createAt: Date.now() - 30000,
    updateAt: Date.now() - 30000,
  },

  // 用户消息
  {
    id: '5',
    role: 'user',
    content: `关于产品定价的问题
| 定价 | 描述 |
| -------- | -------- |
| 定价1 | 描述1 |
| 定价2 | 描述2 |
| 定价3 | 描述3 |
| 定价4 | 描述4 |
| 定价5 | 描述5 |
 `,
    createAt: Date.now() - 20000,
    updateAt: Date.now() - 20000,
  },
];

const App = () => (
  <BubbleList
    bubbleList={messages}
    assistantMeta={{ name: 'AI助手', avatar: 'ai-avatar.jpg' }}
    userMeta={{ name: '用户', avatar: 'user-avatar.jpg' }}
  />
);

// 1. 前一条消息未定义
<Bubble
  originData={currentMessage}
  preMessage={undefined} // 始终显示头像和标题
/>

// 2. 角色未定义的情况
<Bubble
  originData={{ ...currentMessage, role: undefined }}
  preMessage={{ ...prevMessage, role: undefined }}
  // 两个角色都为 undefined 时，视为相同角色，隐藏头像标题
/>

// 3. 右侧布局优先级
<Bubble
  originData={currentMessage}
  placement="right"
  preMessage={prevMessage}
  // 无论 preMessageSameRole 如何，右侧布局都隐藏头像标题
/>

const titleRender = (props, defaultDom) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <Badge dot color="#52c41a" />
    {defaultDom}
    <Tag color="blue">{props.originData?.model}</Tag>
  </div>
);

const contentRender = (props, defaultDom) => {
  if (props.loading) {
    return <div>🤖 AI 正在思考...</div>;
  }
  return (
    <div style={{ border: '1px solid #d9d9d9', padding: 16 }}>{defaultDom}</div>
  );
};

const avatarRender = (props) => (
  <div style={{ position: 'relative' }}>
    <Avatar src={props.originData?.meta?.avatar} />
    <Badge dot color="#52c41a" offset={[-8, 8]} />
  </div>
);

const extraRender = (props, defaultDom) => (
  <div style={{ display: 'flex', gap: 8 }}>
    <Button size="small" icon={<HeartOutlined />}>
      收藏
    </Button>
    <Button size="small" icon={<ShareAltOutlined />}>
      分享
    </Button>
    {defaultDom} {/* 保留默认操作 */}
  </div>
);

// 自定义 beforeMessageRender 函数
const customBeforeMessageRender = (props, defaultDom) => {
  const { originData } = props;

  return (
    <div
      style={{
        padding: '8px 12px',
        background: '#f6ffed',
        border: '1px solid #b7eb8f',
        borderRadius: '6px',
        marginBottom: '8px',
        fontSize: '12px',
        color: '#52c41a',
      }}
    >
      🔍 分析结果: 共找到 {originData?.extra?.searchCount || 0} 个相关结果
    </div>
  );
};

// 自定义 afterMessageRender 函数
const customAfterMessageRender = (props, defaultDom) => {
  const { originData } = props;

  return (
    <div
      style={{
        padding: '8px 12px',
        background: '#fff7e6',
        border: '1px solid #ffd591',
        borderRadius: '6px',
        marginTop: '8px',
        fontSize: '12px',
        color: '#fa8c16',
      }}
    >
      📊 生成统计: 耗时 {originData?.extra?.duration || 0}ms，使用{' '}
      {originData?.model || 'unknown'} 模型
    </div>
  );
};

// 使用配置
<Bubble
  originData={messageData}
  bubbleRenderConfig={{
    beforeMessageRender: customBeforeMessageRender, // 消息前渲染
    afterMessageRender: customAfterMessageRender, // 消息后渲染
  }}
/>;

// 自定义 beforeContentRender 和 afterContentRender 函数
const customBeforeContentRender = (props, defaultDom) => {
  return (
    <div
      style={{
        padding: '8px 12px',
        background: '#f5f5f5',
        borderRadius: '6px',
        marginBottom: '8px',
        fontSize: '12px',
        color: '#666',
      }}
    >
      📝 消息创建时间: 2023-12-21 10:30:56
    </div>
  );
};

const customAfterContentRender = (props, defaultDom) => {
  return (
    <div
      style={{
        padding: '8px 12px',
        background: '#e6f7ff',
        borderRadius: '6px',
        marginTop: '8px',
        fontSize: '12px',
        color: '#1890ff',
      }}
    >
      ✅ 消息状态: {props.originData?.isFinished ? '已完成' : '生成中...'}
    </div>
  );
};

// 使用配置
<Bubble
  originData={messageData}
  bubbleRenderConfig={{
    beforeContentRender: customBeforeContentRender, // 内容前渲染
    afterContentRender: customAfterContentRender, // 内容后渲染
  }}
/>;

// 自定义 render 函数
const customRender = (props, domsMap, defaultDom) => {
  const { avatar, title, messageContent, itemDom } = domsMap;
  const { originData, placement, loading } = props;

  // 完全自定义布局
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: placement === 'right' ? 'row-reverse' : 'row',
        gap: '12px',
        padding: '16px',
        background: placement === 'right' ? '#f0f9ff' : '#fafafa',
        borderRadius: '12px',
        border: '1px solid #e5e7eb',
      }}
    >
      {/* 头像区域 */}
      <div style={{ flexShrink: 0 }}>{avatar}</div>

      {/* 内容区域 */}
      <div style={{ flex: 1, minWidth: 0 }}>
        {/* 标题区域 */}
        <div style={{ marginBottom: '8px' }}>{title}</div>

        {/* 消息内容 */}
        <div
          style={{
            background: 'white',
            padding: '12px',
            borderRadius: '8px',
            boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
          }}
        >
          {messageContent}
        </div>

        {/* 额外信息 */}
        {originData?.extra && (
          <div
            style={{
              marginTop: '8px',
              padding: '8px',
              background: '#f8f9fa',
              borderRadius: '4px',
              fontSize: '12px',
              color: '#6c757d',
            }}
          >
            💡 提示: 这是自定义渲染的消息
          </div>
        )}
      </div>
    </div>
  );
};

// 使用配置
<Bubble
  originData={messageData}
  bubbleRenderConfig={{
    render: customRender, // 自定义整体渲染
  }}
/>;

// 自定义 extraRightRender 函数
const customExtraRightRender = (props, defaultDom) => {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      {/* 自定义操作按钮 */}
      <Button
        size="small"
        icon={<EditOutlined />}
        onClick={() => handleEdit(props.id)}
      >
        编辑
      </Button>
      <Button
        size="small"
        icon={<DeleteOutlined />}
        danger
        onClick={() => handleDelete(props.id)}
      >
        删除
      </Button>
    </div>
  );
};

// 使用配置
<Bubble
  originData={messageData}
  placement="right"
  bubbleRenderConfig={{
    extraRightRender: customExtraRightRender, // 自定义右侧额外操作
  }}
/>;

const messageWithFiles: MessageBubbleData = {
  id: '1',
  content: '这里是一些相关文件',
  fileMap: new Map([
    ['report.pdf', pdfFile],
    ['chart.png', imageFile],
  ]),
  // ... 其他属性
};

// 启用 Pure 模式
<Bubble pure originData={message} />

// 对比展示
<div style={{ display: 'flex', gap: 16 }}>
  <Bubble originData={message} />        {/* 标准模式 */}
  <Bubble pure originData={message} />   {/* Pure 模式 */}
</div>

import { Bubble, BubbleList } from '@ant-design/agentic-ui/Bubble';
import type {
  BubbleListProps,
  BubbleProps,
} from '@ant-design/agentic-ui/Bubble';

// 1. 全局样式配置
<Bubble
  styles={{
    bubbleListItemContentStyle: { borderRadius: '12px' },
    bubbleListItemTitleStyle: { fontWeight: 'bold' },
    bubbleListItemAvatarStyle: { boxShadow: '0 2px 8px rgba(0,0,0,0.1)' },
  }}
/>

// 2. 内联样式
<Bubble
  style={{ margin: '16px 0' }}
  className="custom-bubble"
/>

// 3. 通过 CSS 变量
.custom-bubble {
  --bubble-bg-color: #f0f9ff;
  --bubble-border-color: #3b82f6;
}

<Bubble
  originData={message}
  onLike={async (bubble) => {
    await api.like(bubble.id);
    message.success('点赞成功');
  }}
  onDislike={async (bubble) => {
    await api.dislike(bubble.id);
    message.info('已点踩');
  }}
  // 或者使用已废弃的 onDisLike（保持向后兼容）
  // onDisLike={async (bubble) => {
  //   await api.dislike(bubble.id);
  //   message.info('已点踩');
  // }}
  onLikeCancel={async (bubble) => {
    await api.cancelLike(bubble.id);
    message.info('已取消点赞');
  }}
  // 或者使用已废弃的 onCancelLike（保持向后兼容）
  // onCancelLike={async (bubble) => {
  //   await api.cancelLike(bubble.id);
  //   message.info('已取消点赞');
  // }}
  onReply={(content) => {
    addMessage({ role: 'user', content });
  }}
  onAvatarClick={() => {
    showUserProfile();
  }}
/>

import { Bubble } from '@ant-design/agentic-ui';
import { Button } from 'antd';
import { StarOutlined } from '@ant-design/icons';

const messageData = {
  id: '1',
  content: 'Hello, world!',
  createAt: Date.now(),
  updateAt: Date.now(),
  extra: {
    like: 0,
  },
};

// 组合使用多个 render 方法
const App = () => {
  return (
    <>
      <Bubble
        originData={messageData}
        bubbleRenderConfig={{
          // 自定义标题
          titleRender: (props) => (
            <div style={{ color: '#1890ff', fontWeight: 'bold' }}>
              {props.avatar?.title || 'AI助手'}
            </div>
          ),

          // 自定义头像
          avatarRender: (props) => (
            <div
              style={{
                width: '40px',
                height: '40px',
                borderRadius: '50%',
                background: '#52c41a',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
              }}
            >
              🤖
            </div>
          ),
          beforeMessageRender: (props) => (
            <div
              style={{
                padding: '8px',
                background: '#fff7e6',
                borderRadius: '4px',
                marginBottom: '8px',
                fontSize: '12px',
              }}
            >
              <div>💡 消息前提示</div>
            </div>
          ),
          afterMessageRender: (props) => (
            <div
              style={{
                padding: '8px',
                background: '#f6ffed',
                borderRadius: '4px',
                marginTop: '8px',
                fontSize: '12px',
              }}
            >
              <div>💡 消息后提示</div>
            </div>
          ),
          // 内容前添加提示
          contentBeforeRender: (props) => (
            <div
              style={{
                padding: '8px',
                background: '#fff7e6',
                borderRadius: '4px',
                marginBottom: '8px',
                fontSize: '12px',
              }}
            >
              💡 这是 AI 生成的回复
            </div>
          ),

          // 内容后添加统计
          contentAfterRender: (props) => (
            <div
              style={{
                padding: '8px',
                background: '#f6ffed',
                borderRadius: '4px',
                marginTop: '8px',
                fontSize: '12px',
              }}
            >
              📊 生成时间:{' '}
              {new Date(props.originData?.createAt).toLocaleTimeString()}
            </div>
          ),
          // 自定义额外操作
          extraRender: (props, defaultDom) => (
            <div
              style={{
                display: 'flex',
                gap: 8,
                alignItems: 'center',
              }}
            >
              <Button
                size="small"
                type="text"
                icon={<StarOutlined />}
                style={{
                  width: 120,
                }}
              >
                收藏
              </Button>
              {defaultDom}
            </div>
          ),
        }}
      />
    </>
  );
};
export default App;

const [currentMessage, setCurrentMessage] = useState('');

useEffect(() => {
  const stream = new EventSource('/api/chat-stream');
  stream.onmessage = (event) => {
    const chunk = JSON.parse(event.data);
    setCurrentMessage((prev) => prev + chunk.content);
  };
}, []);

const titleRender = (props, defaultDom) => (
  <div>
    {defaultDom}
    <span style={{ color: '#999', fontSize: '12px' }}>
      {formatRelativeTime(props.originData?.createAt)}
    </span>
  </div>
);

const groupedMessages = useMemo(() => {
  return messages.reduce((groups, message) => {
    const date = format(message.createAt, 'yyyy-MM-dd');
    if (!groups[date]) groups[date] = [];
    groups[date].push(message);
    return groups;
  }, {});
}, [messages]);