✨ feat: Transition animation switch #7981
Conversation
|
@Wxh16144 is attempting to deploy a commit to the LobeHub OSS Team on Vercel. A member of the Team first needs to authorize it. |
dosubot
bot
added
the
size:L
|
Thank you for raising your pull request and contributing to our Community |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR implements a user-configurable animation toggle for chat messages, allowing users to switch between smooth transitions and typing effects.
- Added
bubbleTransitionsetting inUserGeneralConfigwith options 'smooth' (default) and 'typing' - Implemented visual selector in ChatAppearance settings with preview images for both animation modes
- Modified
ThinkingandChatItemcomponents to respect the animation preference - Updated SSE fetch logic to properly handle text smoothing based on selected animation mode
- Integrated animation toggle across markdown elements and reasoning components for consistent behavior
💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!
11 file(s) reviewed, 7 comment(s)
Edit PR Review Bot Settings | Greptile
src/components/Thinking/index.tsx
Outdated
| transition={{ | ||
| duration: 0.2, | ||
| ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数 | ||
| }} |
There was a problem hiding this comment.
style: Chinese comment in English codebase. Keep comments consistent in English.
src/app/[variants]/(main)/settings/common/features/ChatAppearance/index.tsx
Outdated
Show resolved
Hide resolved
src/app/[variants]/(main)/settings/common/features/ChatAppearance/index.tsx
Outdated
Show resolved
Hide resolved
| @@ -23,9 +25,18 @@ const Render = memo<MarkdownElementProps>(({ children, id }) => { | |||
| return message?.search?.citations; | |||
| }); | |||
|
|
|||
| const bubbleTransition = useUserStore(userGeneralSettingsSelectors.bubbleTransition); | |||
|
|
|||
| if (!isGenerating && !children) return; | |||
There was a problem hiding this comment.
style: missing explicit return type (undefined) - could cause unexpected rendering behavior
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7981 +/- ##
==========================================
+ Coverage 88.45% 95.67% +7.21%
==========================================
Files 822 14 -808
Lines 60394 2519 -57875
Branches 4008 444 -3564
==========================================
- Hits 53424 2410 -51014
+ Misses 6970 109 -6861
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
先 review 一下吧，看看字段名和逻辑是否符合要求。之后再进行翻译，否则太阻碍 review 了 |
Review first and see if the field name and logic meet the requirements. Translate it later, otherwise it will be too hindered from review |
Wxh16144
changed the title
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
感觉可以考虑加一个 无动画 选项做个对比？🤔 |
I feel like you can consider adding an animation-free option to compare it? 🤔 |
怎么理解这句话呢？无动画是一个啥状态，在旁边再加一个选项么？ |
How do you understand this sentence? What is the state of no animation? Will there be another option next to it? |
- branch: wuxh/feat-bubble-2 - date: 2025-05-28 18:13:36 - commit: 06abda1 ---------- original commit message ---------- fix: update transitionMode type and refactor fetchSSE handling
Review SummarySkipped posting 1 drafted comments based on your review threshold. Feel free to update them here. Draft Commentssrc/utils/fetch/__tests__/fetchSSE.test.ts:125-338Scores:
Reason for filtering: The comment identifies a potential correctness issue in a test that was previously skipped and may not be correctly validating smoothing behavior Analysis: This comment identifies a test that might not be correctly validating smoothing behavior. While this is a test issue rather than production code, incorrect tests can allow bugs to slip through. The fix direction is somewhat vague, requiring investigation into how smoothing should be properly tested. The urgency is medium as incorrect tests can lead to future issues but won't immediately break anything. |
WalkthroughThis PR introduces user-configurable chat message transition modes ('smooth' and 'stream') to enhance chat appearance customization. It adds an animated chat preview component, updates settings and localization to support the new feature, and refactors chat rendering logic to respect user preferences for animation. Smoothing options are now more flexible and integrated into the chat completion flow, with corresponding updates to selectors, types, and tests to ensure consistency and coverage. Changes
Sequence DiagramThis diagram shows the interactions between components: sequenceDiagram
title AnimatedChatPreview Component Interactions
participant User
participant AnimatedChatPreview
participant useState
participant useEffect
participant ChatItem
participant ActionIconGroup
User->>AnimatedChatPreview: Render component
AnimatedChatPreview->>useState: Initialize streamedContent (empty string)
AnimatedChatPreview->>useState: Initialize isStreaming (true)
AnimatedChatPreview->>useEffect: Setup streaming effect
Note over useEffect: Effect runs when component mounts<br/>or when isStreaming changes
alt isStreaming is true
useEffect->>useEffect: Set up interval timer (25ms)
loop Until text is fully streamed
useEffect->>useEffect: Calculate next chunk size
useEffect->>useState: Update streamedContent
useState-->>ChatItem: Render updated content
alt Current position >= data length
useEffect->>useEffect: Clear interval
useEffect->>useState: Set isStreaming to false
end
end
end
AnimatedChatPreview->>ChatItem: Render with current streamedContent
AnimatedChatPreview->>ActionIconGroup: Create reset button
User->>ActionIconGroup: Click reset button
ActionIconGroup->>AnimatedChatPreview: Call handleReset()
AnimatedChatPreview->>useState: Set streamedContent to empty string
AnimatedChatPreview->>useState: Set isStreaming to true
Note over useEffect: Effect re-triggers due to<br/>isStreaming dependency change
useState-->>ChatItem: Re-render with empty content
useEffect-->>ChatItem: Begin streaming text again
Note for WindsurfPlease change the default marketplace provider to the following in the windsurf settings:Marketplace Extension Gallery Service URL: https://marketplace.visualstudio.com/_apis/public/gallery Marketplace Gallery Item URL: https://marketplace.visualstudio.com/items Entelligence.ai can learn from your feedback. Simply add 👍 / 👎 emojis to teach it your preferences. More shortcuts belowEmoji Descriptions:
Interact with the Bot:
Also you can trigger various commands with the bot by doing The current supported commands are
More commands to be added soon. |
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
背景: #7885
📝 补充信息 | Additional Information
Kapture.2025-05-27.at.13.39.15.mp4