feat: Add custom actions for conversations #616
Conversation
change codesandbox link of AntDesignX
docs: 更新Attachments文档
📝 WalkthroughWalkthrough本次 PR 更新了附件卡片组件中 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户 as 用户
participant 附件卡片 as FileCard
participant 回调 as onRemove
用户->>附件卡片: 点击移除文件按钮
附件卡片->>回调: 调用 onRemove(item)
alt 返回 false 或 Promise 未通过
回调-->>附件卡片: 返回 false / reject
附件卡片-->>用户: 阻止文件移除
else 返回 true 或 Promise resolve
回调-->>附件卡片: 返回 true
附件卡片-->>用户: 完成文件移除
end
sequenceDiagram
participant 会话组件 as Conversations
participant 会话项 as Item
participant 操作 as Actions
会话组件->>会话项: 传递 actions 属性
alt actions 存在
会话项->>操作: 判断类型并处理
alt actions 为函数
操作-->>会话项: 返回自定义操作节点
else
操作-->>会话项: 直接渲染操作节点
end
else
会话项->>会话项: 渲染默认菜单
end
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
WalkthroughThis pull request introduces custom actions for conversation items, allowing developers to define specific actions through the Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
Bundle ReportBundle size has no change ✅ |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #616 +/- ##
==========================================
- Coverage 91.81% 91.72% -0.09%
==========================================
Files 67 67
Lines 1466 1475 +9
Branches 388 375 -13
==========================================
+ Hits 1346 1353 +7
- Misses 120 122 +2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
components/conversations/Item.tsx (1)
60-64:⚠️ Potential issue修复 onOpenChange 处理逻辑的问题
当前
onOpenChange函数的逻辑可能存在问题。当open为true时，设置opened为!open（即false），这可能不是预期行为。通常，我们期望opened的状态与open保持一致。建议修改为：
const onOpenChange = (open: boolean) => { - if (open) { - setOpened(!open); - } + setOpened(open); };
🧹 Nitpick comments (8)
components/attachments/index.en-US.md (1)
64-64: 表格标题行与数据行的列数不一致
目前表头定义了 5 列（Property、Description、Type、Default、Version），但在 onRemove 属性那一行却包含了 6 个单元格。请统一表格格式，确保各行列数一致。建议修改方案：
-| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | +| Property | Description | Type | Default | Version | Note | +| --- | --- | --- | --- | --- | --- |components/attachments/index.zh-CN.md (1)
66-66: 表格标题行的列数不匹配
当前表头定义为 5 列（属性、说明、类型、默认值、版本），但 onRemove 的数据行包含了 6 个单元格，建议统一格式以便读者理解。建议修改方案：
-| 属性 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | +| 属性 | 说明 | 类型 | 默认值 | 版本 | 备注 | +| --- | --- | --- | --- | --- | --- |components/conversations/demo/action.md (1)
5-7: 英文内容与中文表述有细微差异英文版本描述的是"customize the behavior"（自定义行为），而中文版本描述的是"自定义操作按钮"。为保持一致性，建议修改为：
-Customize the behavior of the conversations's item through the `actions` property. +Customize the action buttons through the `actions` property.另外，英文版本中有一个多余的's（conversations's应为conversations）。
components/conversations/index.zh-CN.md (1)
43-43: API文档中新增的actions属性描述合理新增的
actions属性在API表格中的描述清晰，类型定义详细，符合组件文档规范。但建议在类型定义中的函数参数
oriNode明确其类型：-| actions | 自定义操作按钮 | ReactNode \| (oriNode, info: { components:{ menuNode: ReactNode}, value : Conversation }) => ReactNode | - | - | +| actions | 自定义操作按钮 | ReactNode \| (oriNode: ReactNode, info: { components:{ menuNode: ReactNode}, value : Conversation }) => ReactNode | - | - |components/conversations/index.en-US.md (1)
43-43: API文档中新增的actions属性描述需要改进
actions属性在英文API表格中的描述简明扼要，但类型定义与中文文档保持了一致。有两点建议:
- 与中文文档一样，建议在类型定义中明确
oriNode的类型- API表格中的属性顺序与中文文档不同 - 英文文档中
actions在menu属性之后，而中文文档中actions在menu属性之前。建议保持两种语言文档的一致性。-| actions | Custom actions | ReactNode \| (oriNode, info: { components:{ menuNode: ReactNode}, value : Conversation }) => ReactNode | - | - | +| actions | Custom actions | ReactNode \| (oriNode: ReactNode, info: { components:{ menuNode: ReactNode}, value : Conversation }) => ReactNode | - | - |components/conversations/index.tsx (1)
53-53: 缺少属性文档注释所有其他属性都有详细的中英文 JSDoc 注释，但新增的
actions属性缺少相应的文档注释。建议添加与其他属性一致的@desc和@descEN说明，以保持代码文档的一致性。+ /** + * @desc 自定义会话操作节点 + * @descEN Custom action nodes for conversations + */ actions?: React.ReactNode | ActionsRender;components/conversations/Item.tsx (2)
17-17: 缺少属性文档注释新增的
actions属性缺少 JSDoc 注释。建议添加相应的文档注释，以保持代码文档的一致性。+ /** + * 自定义会话操作节点 + */ actions?: React.ReactNode | ActionsRender;
115-116: 更新渲染逻辑以支持自定义操作修改了渲染逻辑以优先展示自定义操作节点，只有在没有自定义操作且提供了菜单时才展示原菜单。
考虑使用更明确的条件表达式以提高代码可读性：
- {actions && !disabled && actionNode} - {menu && !actions && !disabled && menuNode} + {!disabled && ( + actions + ? actionNode + : (menu ? menuNode : null) + )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
components/conversations/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/conversations/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (9)
components/attachments/index.en-US.md(1 hunks)components/attachments/index.zh-CN.md(1 hunks)components/conversations/Item.tsx(4 hunks)components/conversations/demo/action.md(1 hunks)components/conversations/demo/action.tsx(1 hunks)components/conversations/index.en-US.md(2 hunks)components/conversations/index.tsx(4 hunks)components/conversations/index.zh-CN.md(2 hunks)components/conversations/interface.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
components/conversations/demo/action.tsx (1)
components/conversations/index.tsx (1) (1)
ConversationsProps(22:83)
🔇 Additional comments (19)
components/attachments/index.en-US.md (1)
69-69: 更新 onRemove 属性的描述和类型
onRemove 属性现已更新为：(item: Attachment) => boolean，默认值改为 Promise，并在描述中详细说明了当返回 false 或 Promise 解析/拒绝为 false 时阻止删除事件。请确认文档描述与实际组件逻辑保持一致。components/attachments/index.zh-CN.md (1)
72-72: 更新 onRemove 属性描述的修改
onRemove 属性描述现已明确：点击移除文件时会调用该回调，返回 false（或返回 Promise resolve(false) 或 reject）时取消文件移除，同时类型更新为 (item: Attachment) => boolean，默认值为 Promise。请确认这部分文档内容与组件实现相符。components/conversations/demo/action.md (1)
1-3: 文档中的中文内容表述清晰中文部分的描述简洁明了，清晰地解释了
actions属性的功能。components/conversations/index.zh-CN.md (1)
25-25: 新增的自定义操作示例链接正确新增的示例"自定义操作"正确引用了
./demo/action.tsx文件，与其他示例代码保持了一致的格式。components/conversations/interface.ts (1)
74-82: ActionsRender类型定义完善新增的
ActionsRender类型定义清晰，包含了必要的参数和返回类型，很好地支持了自定义操作的功能。参数命名和类型结构符合TypeScript最佳实践。特别是使用了
readonly修饰value参数，防止在渲染函数中意外修改会话数据，这是一个良好的设计决策。components/conversations/index.en-US.md (1)
24-24: 新增的Custom actions示例链接正确英文文档中新增的"Custom actions"示例正确引用了
./demo/action.tsx文件，与其他示例保持了一致的格式。components/conversations/index.tsx (3)
16-16: 导入类型定义更新导入了新的
ActionsRender类型，这与下面新增的actions属性相匹配，保持了类型的完整性。
94-94: 正确解构新添加的 actions 属性从 props 中正确解构了
actions属性，以便在组件中使用。
171-171: 将 actions 属性传递给子组件将
actions属性正确地传递给ConversationsItem组件，实现了自定义操作功能的传递。components/conversations/Item.tsx (4)
9-9: 类型导入更新正确导入了
ActionsRender类型，用于支持新添加的actions属性。
27-28: 正确解构新添加的 actions 属性从 props 中正确解构了
actions属性，以便在组件中使用。
66-81: 将菜单逻辑重构为单独的节点将原来直接渲染的 Dropdown 菜单重构为一个变量
menuNode，这样可以在新增的actions处理逻辑中复用。这种重构使代码更加模块化，便于维护。
83-95: 新增自定义 actions 处理逻辑添加了处理
actions属性的逻辑，支持函数式和组件式两种用法：
- 当
actions是函数时，传入menuNode和包含components和value的上下文对象- 当
actions是组件时，直接使用该组件这种实现方式既灵活又强大，同时保持了 API 的一致性。
components/conversations/demo/action.tsx (6)
1-6: 正确导入必要的组件和类型导入了所需的图标、组件和类型，包括 Ant Design 的基础组件和
@ant-design/x中的Conversations组件。
7-11: 创建示例数据创建了符合类型要求的示例数据，包括禁用状态的项目，这有助于测试组件在不同状态下的行为。
13-22: 设置 Demo 组件基础结构使用
App.useApp()和theme.useToken()获取消息提示和主题变量，并定义了组件样式。代码结构清晰，遵循了 Ant Design 的最佳实践。
23-46: 创建菜单配置创建了包含多种操作类型（编辑、禁用、危险）的菜单配置，并实现了点击事件处理。菜单配置全面展示了不同类型的菜单项，有助于用户理解如何配置菜单。
48-65: 实现 Conversations 组件与自定义操作示例展示了如何使用新增的
actions属性来自定义操作节点，同时保留了原有的菜单功能。这个实现很好地展示了如何组合使用actions和menu属性，为用户提供了清晰的使用指导。
68-72: 导出并包装 Demo 组件将 Demo 组件包装在 App 组件中导出，确保消息提示功能正常工作。符合 Ant Design 的实践规范。
| @@ -22,6 +22,7 @@ demo: | |||
| <!-- prettier-ignore --> | |||
| <code src="./demo/basic.tsx" background="grey">基本</code> | |||
| <code src="./demo/with-menu.tsx" background="grey">会话操作</code> | |||
| <code src="./demo/action.tsx" background="grey">自定义操作</code> | |||
There was a problem hiding this comment.
| <code src="./demo/action.tsx" background="grey">自定义操作</code> | |
| <code src="./demo/actions.tsx" background="grey">自定义操作</code> |
| @@ -39,6 +40,7 @@ demo: | |||
| | defaultActiveKey | 默认选中值 | string | - | - | | |||
| | items | 会话列表数据源 | `Conversation`[] | - | - | | |||
| | onActiveChange | 选中变更回调 | (value: string) => void | - | - | | |||
| | actions | 自定义操作按钮 | ReactNode \| (oriNode, info: { components:{ menuNode: ReactNode}, value : Conversation }) => ReactNode | - | - | | |||
|
覆盖率掉了。 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
components/attachments/index.en-US.md (2)
64-70: 关于 onRemove 属性描述的建议当前 “onRemove” 属性描述中说明“remove event will be prevented when the return value is false or a Promise which resolve(false) or reject”不够明确，建议补充说明：
- 当回调返回 false时，文件移除操作将被阻止
- 当回调返回的 Promise resolve 为 false或 reject时，同样阻止移除操作
此外，请核实默认值是否确实应为 “Promise”（而非当前表格中显示的 “-”），以确保与预期行为一致。
70-70: 检查 imageProps 属性的表格格式在 “imageProps” 属性这一行，类型列与后续列间可能存在格式对齐问题（例如类型列为空而“ImageProps”出现在下一个列）。建议检查并调整 Markdown 表格格式，确保每一列数据都准确对应。
components/attachments/index.zh-CN.md (1)
64-73: 建议改进 onRemove 属性的描述中文文档中 “onRemove” 属性的描述虽然已明确指出“返回值为 false 时不移除”以及“支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除”，但建议进一步强调：
- 当回调返回 false时，移除动作将被阻止
- 当返回的 Promise resolve 为 false 或 reject时，同样阻止移除操作
另外，请确认“默认值”是否应与英文文档保持一致（例如更改为 “Promise”），以避免用户混淆。
components/conversations/demo/actions.tsx (3)
7-11: 考虑将静态数据移到组件外部这个静态的
items数组定义在组件内部会导致每次渲染时都重新创建。建议将其移动到组件外部，以避免不必要的重新创建。- const Demo = () => { - const { message } = App.useApp(); - const { token } = theme.useToken(); - - const style = { - width: 256, - background: token.colorBgContainer, - borderRadius: token.borderRadius, - }; + const Demo = () => { + const { message } = App.useApp(); + const { token } = theme.useToken(); + + const style = { + width: 256, + background: token.colorBgContainer, + borderRadius: token.borderRadius, + };
17-21: 考虑使用 useMemo 优化样式对象
style对象在每次渲染时都会重新创建。可以使用useMemo来优化性能，特别是当token变化不频繁时。- const style = { - width: 256, - background: token.colorBgContainer, - borderRadius: token.borderRadius, - }; + const style = React.useMemo(() => ({ + width: 256, + background: token.colorBgContainer, + borderRadius: token.borderRadius, + }), [token.colorBgContainer, token.borderRadius]);
51-60: 建议添加类型注解并添加注释
actions属性是此演示的关键部分，但缺少类型注解和说明性注释。建议添加参数类型并解释此功能的用途。此外，未使用的第一个参数（用 _ 表示）应考虑添加更具描述性的命名或注释说明为何不使用。- actions={(_, { components: { menuNode }, value }) => { + // 自定义操作渲染函数：添加分享图标和默认菜单 + actions={(item, { components: { menuNode }, value }) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
components/attachments/index.en-US.md(1 hunks)components/attachments/index.zh-CN.md(1 hunks)components/conversations/demo/actions.md(1 hunks)components/conversations/demo/actions.tsx(1 hunks)components/conversations/index.en-US.md(2 hunks)components/conversations/index.zh-CN.md(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- components/conversations/demo/actions.md
🚧 Files skipped from review as they are similar to previous changes (2)
- components/conversations/index.zh-CN.md
- components/conversations/index.en-US.md
🔇 Additional comments (4)
components/conversations/demo/actions.tsx (4)
1-6: 导入部分看起来完善导入了必要的图标、组件和类型，包括 Ant Design 的基础组件和
@ant-design/x中的Conversations组件。
23-46: 菜单配置逻辑清晰菜单配置函数
menuConfig提供了三种操作：编辑、停止（已禁用）和删除（标记为危险）。点击处理程序展示了适当的消息反馈。
68-72: 导出逻辑清晰默认导出包装了
App组件，为演示提供了必要的上下文环境，符合 Ant Design 的最佳实践。
1-73: 建议增加单元测试以提高覆盖率根据 PR 评论 "覆盖率掉了"，建议为新增的
actions功能添加单元测试，确保功能的稳定性和可靠性。测试应覆盖不同的用例，例如自定义操作、默认渲染和边缘情况处理。是否需要我帮助编写相应的单元测试用例？
Add custom actions for conversations.
The snapshot is as follows:
Summary by CodeRabbit
新功能
文档