feat(bubble): add typing suffix support #312
Conversation
- Add suffix option to typing configuration - Display suffix while typing is in progress - Update demo and tests to showcase typing suffix feature - Set default suffix to empty string - Add type assertions in test utils to pass lint check
📝 WalkthroughWalkthrough此次更改涉及对 Changes
Possibly related issues
Possibly related PRs
Suggested reviewers
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 (
|
|
|
![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 and nitpick comments (3)
components/bubble/hooks/useTypingConfig.ts (1)
15-16: 建议完善默认值注释当前注释 "set default suffix is empty" 可以更加专业和详细。
建议修改为：
- // set default suffix is empty + // 默认后缀为空字符串，用于保持向后兼容性components/bubble/interface.ts (1)
12-15: 建议增强属性文档说明虽然已添加了默认值说明，但建议补充更多使用说明和示例。
建议修改为：
/** - * @default "" + * 打字动画过程中显示的后缀内容 + * @default "" + * @example + * ```tsx + * suffix: <>💗</> // 显示心形图标 + * suffix: "..." // 显示省略号 + * ``` */components/bubble/Bubble.tsx (1)
119-124: 建议增加对 typingSuffix 的空值处理当前实现在
isTyping为 true 时直接渲染typingSuffix，建议添加空值检查以提高代码健壮性。建议修改如下：
contentNode = ( <> {mergedContent as React.ReactNode} - {isTyping && typingSuffix} + {isTyping && typingSuffix != null && typingSuffix} </> );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ 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 (5)
components/bubble/Bubble.tsx(2 hunks)components/bubble/demo/typing.tsx(2 hunks)components/bubble/hooks/useTypingConfig.ts(1 hunks)components/bubble/interface.ts(1 hunks)tests/utils.tsx(2 hunks)
🔇 Additional comments (7)
tests/utils.tsx (2)
1-1: 导入语句的改进符合最佳实践
导入语句的组织更加清晰，并且添加了必要的类型导入。这些改变提高了代码的类型安全性。
Also applies to: 6-6
32-33: 函数签名的类型注解改进
为 customRender 函数添加了明确的返回类型注解，这是一个很好的改进：
- 提高了代码的类型安全性
- 改善了 IDE 的类型提示支持
- 使函数接口更加清晰
让我们验证一下这个类型改动是否与测试文件中的使用方式一致：
✅ Verification successful
类型注解改动验证完成
根据代码分析，customRender 函数的返回类型注解是合适的：
- 在
renderHook函数中使用customRender时，没有直接使用其返回值 customRender作为render的别名被导出，其类型与@testing-library/react的RenderResult保持一致- 类型定义与实际实现相符，不会引起类型不匹配的问题
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 customRender 的使用情况，确保返回值的使用符合新的类型定义
# 搜索测试文件中使用 customRender 返回值的情况
rg -t tsx -t ts "const \w+ = .*customRender\(" -A 2
Length of output: 81
Script:
#!/bin/bash
# 搜索所有包含 customRender 的文件
rg "customRender" --type js --type jsx --type ts --type typescript
# 查看测试文件中的具体使用情况
rg "customRender" -B 2 -A 2 --type js --type jsx --type ts --type typescript
Length of output: 199
Script:
#!/bin/bash
# 使用 fd 查找所有可能的测试文件
fd "\.(test|spec)\.(ts|tsx|js|jsx)$"
# 使用 ast-grep 查找 customRender 的使用情况
ast-grep --pattern 'customRender($$$)'
# 直接查看 utils.tsx 文件的完整内容
cat tests/utils.tsx
Length of output: 5228
components/bubble/demo/typing.tsx (1)
15-15: 代码示例实现得当！
示例中使用表情符号作为打字后缀的方式直观且易于理解，很好地展示了新功能的使用方法。
components/bubble/hooks/useTypingConfig.ts (2)
5-7: 类型定义清晰完整！
返回元组的类型定义准确且易于理解，很好地支持了新增的suffix功能。
23-23: 返回值处理恰当！
返回元组包含了所有必要的配置项，且保持了良好的代码结构。
components/bubble/Bubble.tsx (2)
64-64: 钩子返回值解构符合预期！
useTypingConfig 钩子的返回值扩展符合组件需求，保持了代码的一致性和可读性。
Line range hint 64-124: 确认实现符合需求规范
实现完全满足 PR 目标：
- 成功添加了 typing suffix 支持
- 保持了向后兼容性
- 实现方式简洁且符合组件设计模式
建议在合并前验证以下场景：
Bundle ReportChanges will decrease total bundle size by 262.65kB (-62.78%) ⬇️. This is within the configured threshold ✅ Detailed changes
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #312 +/- ##
==========================================
+ Coverage 91.36% 91.37% +0.01%
==========================================
Files 66 66
Lines 1447 1449 +2
Branches 368 369 +1
==========================================
+ Hits 1322 1324 +2
Misses 125 125 ☔ View full report in Codecov by Sentry. |
似乎只有通过 我试了下，使用 对于这个问题，你的解决方案是可以的。 |
|
对于实现后的效果，我之前没有在 issues 里描述清楚，抱歉～ 期望是：替换原有的 typing 效果，现在看起来是在原有基础上额外添加了一个后缀：
举一个期望的效果的示例（该效果可以参考现在 ChatGPT 的交互）
|
这是我的问题，抱歉～已添加 |
|
那我先把这个 pr 关掉？提一个 pnpm lint fix 到 main，一个 typing suffix 到 feature 🤔 |
PR introduce
test pass
new behavior
Bubble Component Enhancements
suffixoption to typing configuration, allowing dynamic content display during typing animationTest Utilities Improvements
When I lint, I encounter a problem
I solved it in the following way
Example Usage
I want to move the PR to the
featurebranch, just like the contribution document says, but I found that the project does not have afeaturebranch, so I moved it to themainbranch.Summary by CodeRabbit
新功能
文档
测试