components/bubble/hooks/useListData.ts (1)

12-14: 新增参数 index 的逻辑检查

这里为 getRoleBubbleProps 新增 index 参数，并在内部调用 roles(bubble, index)。此改动符合需求，允许在外部根据气泡所在位置进行更多自定义操作。建议在测试用例中补充基于索引的用例，以确保逻辑正确性。

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

components/bubble/index.zh-CN.md (1)

64-64: 文档更新正确，建议添加示例说明

roles 属性的类型定义更新准确反映了新增的 index 参数。为了帮助用户更好地理解如何使用这个新参数，建议添加一个使用示例。

建议在文档中添加如下示例代码：

<Bubble.List
  items={messages}
  roles={(bubble, index) => ({
    // 根据索引自定义气泡样式
    variant: index % 2 === 0 ? 'filled' : 'outlined',
    // 其他属性...
  })}
/>

components/bubble/index.en-US.md (1)

63-63: 建议补充 index 参数的说明

roles 属性的文档已更新以包含新的 index 参数，但缺少对该参数的具体说明。建议在描述中添加 index 参数的用途说明，以帮助用户更好地理解和使用这个新功能。

示例说明文本：

-| roles | Set the default properties of the bubble. The `role` in `items` will be automatically matched. | Record<string, BubbleProps> \| (bubble, index) => BubbleProps | - |  |
+| roles | Set the default properties of the bubble. The `role` in `items` will be automatically matched. The `index` parameter represents the position of the bubble in the list. | Record<string, BubbleProps> \| (bubble, index) => BubbleProps | - |  |

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

components/bubble/demo/debug.tsx (3)

82-113: 建议增强类型安全性

建议对 placement 类型使用更严格的类型定义，避免使用 as const 类型断言：

- placement: 'start' as const,
+ placement: 'start',

同时可以考虑将通用的类型提取为接口：

interface RoleConfig {
  placement: 'start' | 'end';
  typing?: {
    step: number;
    interval: number;
  };
  style?: React.CSSProperties;
}

---

161-187: 建议优化用户体验和可访问性

1. 建议为按钮添加 aria-label 属性以提升可访问性
2. 建议添加加载状态处理，避免在滚动操作时出现重复点击

 <Button
+ aria-label="添加新的对话气泡"
+ loading={isScrolling}
  onClick={() => {
    setCount((i) => i + 1);
  }}
>
  Add Bubble
</Button>

---

188-204: 建议优化列表性能

对于大量数据的情况，建议：

1. 考虑使用虚拟滚动优化性能
2. 使用 React.memo 包装列表项组件
3. 添加错误边界处理异常情况

const MemoizedBubbleList = React.memo(({ items, roles }) => {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <VirtualList
        data={items}
        renderItem={(item) => (
          <Bubble.List
            key={item.key}
            roles={roles}
            items={[item]}
          />
        )}
      />
    </ErrorBoundary>
  );
});

components/bubble/demo/list.tsx (2)

23-51: 建议优化 rolesAsFunction 的实现

当前实现有以下几点可以改进：

1. switch 语句可以使用对象映射来简化
2. 重复的 messageRender 逻辑可以提取出来

建议按如下方式重构：

 const rolesAsFunction = (bubbleData: BubbleProps, index: number) => {
   const RenderIndex: BubbleProps['messageRender'] = (content) => (
     <Flex>
       #{index}: {content}
     </Flex>
   );
-  switch (bubbleData.role) {
-    case 'ai':
-      return {
-        placement: 'start' as const,
-        avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
-        typing: { step: 5, interval: 20 },
-        style: {
-          maxWidth: 600,
-        },
-        messageRender: RenderIndex,
-      };
-    case 'user':
-      return {
-        placement: 'end' as const,
-        avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
-        messageRender: RenderIndex,
-      };
-    default:
-      return {
-        messageRender: RenderIndex,
-      };
-  }
+  const roleConfigs = {
+    ai: {
+      placement: 'start' as const,
+      avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
+      typing: { step: 5, interval: 20 },
+      style: {
+        maxWidth: 600,
+      },
+    },
+    user: {
+      placement: 'end' as const,
+      avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
+    },
+  };
+  
+  return {
+    ...(roleConfigs[bubbleData.role as keyof typeof roleConfigs] ?? {}),
+    messageRender: RenderIndex,
+  };
 };

---

61-67: 建议增加无障碍支持

Switch 组件缺少必要的无障碍属性，建议添加 aria-label 来提高可访问性。

 <Switch
   checked={useRolesAsFunction}
   onChange={(checked) => setUseRolesAsFunction(checked)}
   checkedChildren="Function"
   unCheckedChildren="Object"
   style={{ alignSelf: 'center' }}
+  aria-label="切换角色配置模式"
 />

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro