feat(bubble): add typing suffix support (#316) #378
Conversation
* feat(bubble): add typing suffix support * docs(Bubble): improve typing demo documentation
📝 Walkthrough概述演练此拉取请求（PR）主要修改了 变更
可能相关的问题
可能相关的 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 Bubble component by adding support for a typing suffix. It enhances the typing effect by allowing a suffix to be displayed during typing. Additionally, the documentation for the typing demo has been improved. 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 false to avoid unnecessary rendering of the suffix.
Bundle ReportBundle size has no change ✅ |
![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 (5)
components/bubble/hooks/useTypingConfig.ts (2)
5-7: 建议使用更严格的类型定义建议将返回类型定义为一个独立的类型，以提高代码的可维护性和类型安全性。
+type TypingConfigTuple = [ + enableTyping: boolean, + step: number, + interval: number, + suffix: React.ReactNode +]; function useTypingConfig(typing: BubbleProps['typing']) { return React.useMemo< - [enableTyping: boolean, step: number, interval: number, suffix: React.ReactNode] + TypingConfigTuple >(() => {
15-16: 注释格式建议建议使用更规范的 JSDoc 格式来记录默认值。
- // set default suffix is empty + /** @default null */ suffix: null,components/bubble/demo/typing.tsx (1)
18-22: 建议添加演示说明为了更好地展示新增的 suffix 功能，建议在示例代码中添加注释说明该功能的使用场景和效果。
+ {/* 使用 suffix 属性来展示打字时的额外装饰元素 */} <Bubble content={text.repeat(repeat)} typing={{ step: 2, interval: 50, suffix: <>💗</> }} avatar={{ icon: <UserOutlined /> }} />components/bubble/interface.ts (1)
12-15: 建议完善类型文档建议在 JSDoc 中添加更详细的说明，包括属性的用途和示例。
/** + * 打字效果的后缀装饰元素 + * @example + * suffix: <>💗</> * @default null */ suffix?: React.ReactNode;components/bubble/Bubble.tsx (1)
119-124: 验证打字后缀的渲染逻辑内容渲染逻辑的改动看起来合理，但建议：
- 考虑将后缀渲染逻辑抽取为一个独立的组件，以提高代码的可维护性
- 为后缀添加特定的类名，便于样式定制
建议如下重构：
- contentNode = ( - <> - {mergedContent as React.ReactNode} - {isTyping && typingSuffix} - </> - ); + const TypingSuffix = () => ( + <span className={`${prefixCls}-typing-suffix`}> + {typingSuffix} + </span> + ); + + contentNode = ( + <> + {mergedContent as React.ReactNode} + {isTyping && typingSuffix && <TypingSuffix />} + </> + );
📜 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 (3)
components/bubble/hooks/useTypingConfig.ts (1)
23-23: 代码逻辑正确
返回值包含了所有必要的配置项，且保持了与接口定义的一致性。
components/bubble/Bubble.tsx (2)
104-104: 优化类名条件判断逻辑
类名条件判断中增加了 !typingSuffix 检查，这样可以避免在使用自定义后缀时出现默认的打字动画样式。这个改动很合理。
64-64: 确认 useTypingConfig 钩子的返回值更新
从钩子函数中解构新增的 typingSuffix 值，这个改动与 PR 的目标相符。建议确保 useTypingConfig 的类型定义也已相应更新。
✅ Verification successful
useTypingConfig 钩子的类型定义已正确更新
useTypingConfig 钩子函数的返回类型已经正确定义为包含四个元素的元组：[enableTyping: boolean, step: number, interval: number, suffix: React.ReactNode]，完全符合当前的使用场景。类型定义和实现都已经包含了对 typingSuffix 的支持。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 useTypingConfig 钩子的类型定义
ast-grep --pattern 'export function useTypingConfig($_: $_): [$_]'
Length of output: 68
Script:
#!/bin/bash
# 搜索 useTypingConfig 的定义和使用
rg "useTypingConfig" -A 5
# 搜索包含 typing 的类型定义文件
fd "typing.*\.ts" --type f
Length of output: 1472
Script:
#!/bin/bash
# 检查 useTypingConfig 钩子的完整实现
cat components/bubble/hooks/useTypingConfig.ts
Length of output: 751
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #378 +/- ##
==========================================
+ Coverage 91.36% 91.74% +0.38%
==========================================
Files 66 66
Lines 1447 1550 +103
Branches 368 419 +51
==========================================
+ Hits 1322 1422 +100
- Misses 125 128 +3 ☔ View full report in Codecov by Sentry. |
size-limit report 📦
|
feat(bubble): add typing suffix support
docs(Bubble): improve typing demo documentation
Summary by CodeRabbit
新特性
Bubble组件中新增了typingSuffix功能，增强了输入时的视觉反馈。Bubble实例，支持显示心形表情作为输入后缀。文档
TypingOption接口，新增可选属性suffix。