Feat/optimization typing hook #1067
Open
+459
−143
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
📝 Walkthrough## Walkthrough
本次变更主要优化了 Bubble 组件在内容变更时的打字动画行为。通过新增公共前缀比较逻辑，组件在内容更新时能够更智能地决定从何处继续打字动画，并新增了相关测试用例以覆盖这些场景。同时，演示文档和示例组件也进行了相应更新，展示了更智能的打字续写效果。
## Changes
| 文件/分组 | 变更摘要 |
|------------------------------------------------------------------|------------------------------------------------------------------|
| components/bubble/__tests__/index.test.tsx | 新增四项测试，覆盖内容变更时打字动画的公共前缀、截断、无前缀及空字符串等场景。调整了 import 顺序。 |
| components/bubble/hooks/useTypedEffect.ts | 新增 `findCommonPrefix` 辅助函数，优化内容变更时打字动画的起始逻辑，支持根据公共前缀长度调整打字起点。 |
| components/bubble/demo/typing.md | 增强文档，详细说明内容更新时打字动画如何基于公共前缀智能续写，添加中英文示例说明。 |
| components/bubble/demo/typing.tsx | 新增“智能公共前缀续写”示例，增加状态变量和按钮切换示例句，调整布局，演示更智能的打字动画效果。 |
## Estimated code review effort
🎯 2 (Simple) | ⏱️ ~8 分钟
## Poem
> 代码兔儿跳又跳，
> 气泡动画更巧妙。
> 公共前缀细分明，
> 打字续写不慌张。
> 新测试来护航，
> 兔子乐在代码旁！
> 🐇✨Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🔇 Additional comments (6)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
🧹 Nitpick comments (1)
components/bubble/hooks/useTypedEffect.ts (1)
48-61: 打字重置逻辑优化合理，建议增加边界检查新的重置逻辑很好地实现了从公共前缀差异点继续打字的功能，三种场景处理得当：
- 无公共前缀：从头开始 (index = 1)
- 有部分公共前缀：从差异点开始 (index = commonPrefixLength + 1)
- 新内容等于或短于公共前缀：直接显示全部内容
但建议添加对空字符串的边界检查以提高代码健壮性。
考虑添加空字符串检查：
) { + // Handle empty strings + if (!content || !prevContentRef.current) { + setTypingIndex(1); + return; + } + // Find the longest common prefix between new and old content const commonPrefixLength = findCommonPrefix(content, prevContentRef.current);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/bubble/__tests__/index.test.tsx(2 hunks)components/bubble/hooks/useTypedEffect.ts(2 hunks)
🔇 Additional comments (5)
components/bubble/hooks/useTypedEffect.ts (1)
9-21: 算法实现正确且高效
findCommonPrefix函数实现简洁清晰，时间复杂度为 O(min(n,m))，空间复杂度为 O(1)。算法逻辑正确，能够准确找到两个字符串的最长公共前缀长度。components/bubble/__tests__/index.test.tsx (4)
5-5: 导入语句调整合理将
Bubble组件的导入移到测试工具导入之后，保持了导入顺序的一致性。
108-123: 测试用例设计优秀，完美验证核心功能这个测试用例很好地验证了公共前缀优化的核心功能：
- 使用中文字符串 "今天天气真好" → "今天天气不好" 作为测试数据
- 正确验证了从公共前缀 "今天天气" 后继续打字的行为
- 断言逻辑准确：首先显示到差异点 "今天天气不"，然后完成全部内容
测试覆盖了最重要的使用场景，与 PR 目标完全一致。
125-137: 边界情况测试覆盖完整这个测试用例很好地处理了新内容比公共前缀短的边界情况：
- 验证了从 "你好你好你好" 更改为 "你好" 的场景
- 正确断言新内容立即完整显示，因为新内容长度不超过公共前缀
- 覆盖了
setTypingIndex(content.length)分支的逻辑
139-154: 无公共前缀场景测试完整测试用例正确验证了完全不同内容的重启行为：
- 使用 "你好" → "再见" 验证无公共前缀场景
- 正确断言打字动画从头开始 (显示 "再")
- 覆盖了
commonPrefixLength === 0的处理逻辑三个测试用例共同构成了完整的功能验证矩阵。
…t test for the bubble component
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个变动的性质是？
🔗 相关 Issue
优化 Bubble 组件在 AI 对话场景中的打字体验问题。当 AI 输出内容发生变更时（如："今天天气真好" → "今天天气不好"），原有逻辑会从头开始重新打字，导致用户体验不佳。
💡 需求背景和解决方案
要解决的具体问题：
当 AI 输出修改文本时，Bubble 组件的打字效果总是从头开始，即使新旧内容有公共前缀。例如：
解决方案：
findCommonPrefix函数，计算两个字符串的最长公共前缀useTypedEffecthook 的重置逻辑：从公共前缀差异点开始继续打字content.indexOf(prevContentRef.current) !== 0条件检查新增测试用例：
为确保功能稳定性和代码健壮性，新增了 4 个关键测试用例：
Bubble typing should continue from common prefix difference point"今天天气真好"→"今天天气不好"Bubble typing should handle shorter new content"你好你好你好"→"你好"Bubble typing should restart from beginning when no common prefix"你好"→"再见"Bubble typing should handle empty string edge cases测试覆盖率：
API 实现：
现有 API 保持不变，内部逻辑优化：
站点文档更新
文档更新文字说明：
示例更新
效果对比：
"今天天气真好"→"今天天气不好"会显示"今"→"今天"→"今天天"→"今天天气"→"今天天气不"→"今天天气不好""今天天气真好"→"今天天气不好"会显示"今天天气不"→"今天天气不好"📝 更新日志
Bubbleoptimized typing effect to continue from common prefix difference point instead of restarting from beginning when content changes, enhanced with boundary checks for improved robustnessBubble优化打字效果，内容变更时从公共前缀差异点继续打字