feat(bubble): add typing suffix support (#316) #380
Conversation
* feat(bubble): add typing suffix support * docs(Bubble): improve typing demo documentation
📝 Walkthrough概述演练此次更改主要扩展了 变更
可能相关的问题
可能相关的 PR
诗歌
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 a new feature to the Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @@ -101,7 +101,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r | |||
| `${prefixCls}-${placement}`, | |||
| { | |||
| [`${prefixCls}-rtl`]: direction === 'rtl', | |||
| [`${prefixCls}-typing`]: isTyping && !loading && !messageRender, | |||
| [`${prefixCls}-typing`]: isTyping && !loading && !messageRender && !typingSuffix, | |||
There was a problem hiding this comment.
Ensure that typingSuffix is correctly handled when isTyping is true. If typingSuffix is a React component, ensure it is rendered correctly and does not cause any rendering issues.
There was a problem hiding this comment.
这句话还是不太好理解，有 typingSuffix 应该也是输入中，现在的逻辑是反的。
There was a problem hiding this comment.
// 默认的打字效果：输入中 且 没有配置 typingSuffix
const isDefaultTyping = isTyping && !typingSuffix;
// css
[`${prefixCls}-typing`]: isDefaultTyping && !loading && !messageRender,改成这样：多一步解释代码，方便后人理解是不好点～
想了下 typingSuffix 确实只代表一个后缀，不代表输入中。或者有啥建议没～
There was a problem hiding this comment.
typing: { suffix: 'x' } API 这么设计的话当然就代表是输入中。
There was a problem hiding this comment.
有道理，那感觉这里先不合并，我们后续再议
There was a problem hiding this comment.
或者 typingSuffix -> customSuffix 怎么样，这样语义是正确的。
[${prefixCls}-typing]: isTyping && !loading && !messageRender && !customSuffix,
然后我在想，先合并我再提 PR 把这改了，因为 feature 是保护分支，不能直接 push
Bundle ReportChanges will decrease total bundle size by 74 bytes (-0.05%) ⬇️. This is within the configured threshold ✅ Detailed changes
|
Deploying ant-design-x with
|
| Latest commit: |
7869126
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6ef1319c.ant-design-x.pages.dev |
| Branch Preview URL: | https://feature.ant-design-x.pages.dev |
size-limit report 📦
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #380 +/- ##
==========================================
- Coverage 91.48% 91.37% -0.11%
==========================================
Files 66 66
Lines 1468 1450 -18
Branches 395 369 -26
==========================================
- Hits 1343 1325 -18
Misses 125 125 ☔ View full report in Codecov by Sentry. |
![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
🧹 Nitpick comments (4)
components/bubble/demo/typing.tsx (1)
18-22: 建议丰富示例内容当前示例展示了基本的 suffix 用法，建议添加更多样化的示例，比如：
- 使用不同类型的 suffix（文本、图标等）
- 展示不同打字速度下的 suffix 效果
- 动态切换 suffix 的场景
components/bubble/interface.ts (1)
12-15: 建议完善属性文档当前的 JSDoc 注释仅说明了默认值，建议补充以下信息：
- 属性的具体用途说明
- 可接受的值类型示例
- 使用场景建议
示例文档格式：
/** * 打字效果完成后显示的后缀内容 * @default null * @example * // 使用文本 * suffix: "✨" * // 使用 React 组件 * suffix: <Icon type="check" /> */ suffix?: React.ReactNode;components/bubble/Bubble.tsx (2)
104-104: 优化打字动画的类名逻辑类名条件判断中加入了
!typingSuffix检查，这样可以在有后缀时避免显示打字动画。建议添加注释说明这个逻辑的目的。- [`${prefixCls}-typing`]: isTyping && !loading && !messageRender && !typingSuffix, + // 当存在后缀时不显示打字动画，以避免视觉干扰 + [`${prefixCls}-typing`]: isTyping && !loading && !messageRender && !typingSuffix,
119-124: 内容渲染逻辑优化使用 Fragment 包装内容和打字后缀的实现方式很好。建议考虑以下改进：
- 为后缀添加特定的类名，便于样式定制
- 考虑为后缀添加可访问性支持
contentNode = ( <> {mergedContent as React.ReactNode} - {isTyping && typingSuffix} + {isTyping && ( + <span className={`${prefixCls}-typing-suffix`} aria-hidden="true"> + {typingSuffix} + </span> + )} </> );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/bubble/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
components/bubble/Bubble.tsx(3 hunks)components/bubble/demo/typing.tsx(2 hunks)components/bubble/hooks/useTypingConfig.ts(1 hunks)components/bubble/interface.ts(1 hunks)
🔇 Additional comments (4)
components/bubble/hooks/useTypingConfig.ts (3)
5-7: 返回类型定义清晰且完整
返回类型使用了显式的元组标签，这提高了代码的可读性和类型安全性。
9-9: 默认值处理合理
为新增的 suffix 属性设置了合适的默认值（null），并添加了清晰的注释说明。
Also applies to: 15-16
23-23: 配置合并逻辑完善
返回值中正确包含了 suffix 配置，保持了与其他配置项一致的处理方式。
components/bubble/Bubble.tsx (1)
64-64: 从 useTypingConfig 钩子中解构新增的 typingSuffix
这个改动扩展了 useTypingConfig 的返回值，新增了 typingSuffix 支持。确保 useTypingConfig 钩子的实现与此更改保持一致。
✅ Verification successful
useTypingConfig 钩子的实现已正确支持 typingSuffix
useTypingConfig 钩子的实现完全符合预期：
- 返回值类型正确定义了四个参数：
[enableTyping: boolean, step: number, interval: number, suffix: React.ReactNode] - 默认情况下返回
[false, 0, 0, null] - 当提供 typing 配置时，会返回
[true, baseConfig.step, baseConfig.interval, baseConfig.suffix] - suffix 属性已在 baseConfig 中正确初始化并处理
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 useTypingConfig 钩子的实现
ast-grep --pattern 'const useTypingConfig = ($params) => {
$$$
return [$$$, $$$, $$$, $$$]
}'
Length of output: 99
Script:
#!/bin/bash
# 搜索 useTypingConfig 的定义和实现
rg "useTypingConfig" -A 10
Length of output: 2101
Script:
#!/bin/bash
# 使用不同的 ast-grep 模式搜索
ast-grep --pattern 'function useTypingConfig($$$) {
$$$
}'
Length of output: 1642
Script:
#!/bin/bash
# 查找包含 useTypingConfig 的文件
fd useTypingConfig
Length of output: 63
feat(bubble): add typing suffix support
docs(Bubble): improve typing demo documentation
Summary by CodeRabbit
新特性
Bubble组件现在支持显示额外的typingSuffix，增强了打字效果的视觉表现。typing属性中添加了一个心形表情符号的suffix，使第二个Bubble组件的文本显示更为丰富。Bug 修复
文档
重构
useTypingConfig钩子以返回新的suffix配置选项。样式
测试
杂项