[PR #7990] [MERGED] feat: optimize chat animation #8257

New issue

Closed

opened 2026-03-23 23:23:20 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:23:20 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/7990
Author: @LucasXu0
Created: 5/27/2025
Status: ✅ Merged
Merged: 5/27/2025
Merged by: @LucasXu0

Base: main ← Head: chat_animation_v2

📝 Commits (6)

f42c2b9 feat: optimize chat animation
cf355e3 feat: optimize ai chat animation
cdcca06 chore: move calculate min height logic to manager
13903e1 chore: remove unused code
a9477c7 chore: adjust the animation on mobile
5ce982c Merge branch 'main' into chat_animation_v2

📊 Changes

10 files changed (+517 additions, -146 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_bloc.dart (+17 -3)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_entity.dart (+3 -0)
➕ frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_message_height_manager.dart (+160 -0)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart (+1 -3)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/animated_chat_list.dart (+80 -58)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_page/chat_footer.dart (+1 -2)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_page/text_message_widget.dart (+33 -15)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/ai_markdown_text.dart (+4 -1)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/ai_text_message.dart (+92 -64)
➕ frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/widgets/message_height_calculator.dart (+126 -0)

📄 Description

Feature Preview

Use the MessageHeightCalculator to dynamically calculate the minHeight and padding for the AI message:

If the message height is smaller than the screen height, add extra dynamic padding. This ”padding“ will reduce as the message becomes longer.
If the message height is larger than the screen height, there is no need to add extra “padding”.

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

Summary by Sourcery

Optimize chat animations by adding a message-height measurement and caching system that ensures AI response bubbles maintain a consistent minimum height based on screen space and previous message sizes, and refactoring the animated chat list implementation for cleaner state management.

New Features:

Introduce MessageHeightCalculator widget to measure and report rendered message heights.
Add ChatMessageHeightManager singleton to cache heights and compute minimum heights for AI answer messages.
Apply dynamic minimum-height constraints to the last AI chat message based on screen height and cached measurements.

Enhancements:

Refactor ChatAnimatedList state class and rename private fields for consistency and clarity.
Remove unused spacing import and replace custom VSpace with SizedBox.shrink for layout.
Clear cached message heights on list disposal and remove individual heights when messages are deleted.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/7990 **Author:** [@LucasXu0](https://github.com/LucasXu0) **Created:** 5/27/2025 **Status:** ✅ Merged **Merged:** 5/27/2025 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `chat_animation_v2` --- ### 📝 Commits (6) - [`f42c2b9`](https://github.com/AppFlowy-IO/AppFlowy/commit/f42c2b95e8d76c86d181980ffc5b9dfca1c04a4d) feat: optimize chat animation - [`cf355e3`](https://github.com/AppFlowy-IO/AppFlowy/commit/cf355e339e4195f691e656947039a7fa49ecef4f) feat: optimize ai chat animation - [`cdcca06`](https://github.com/AppFlowy-IO/AppFlowy/commit/cdcca06fee2aa8bba3c12766347f469d146e12d5) chore: move calculate min height logic to manager - [`13903e1`](https://github.com/AppFlowy-IO/AppFlowy/commit/13903e11eca58b095934ad6840db5475ead5216d) chore: remove unused code - [`a9477c7`](https://github.com/AppFlowy-IO/AppFlowy/commit/a9477c7b805f7f1668a4b5358c3a35316d3764be) chore: adjust the animation on mobile - [`5ce982c`](https://github.com/AppFlowy-IO/AppFlowy/commit/5ce982ca9a80bf2761071b8b62dfe34ebd5695f4) Merge branch 'main' into chat_animation_v2 ### 📊 Changes **10 files changed** (+517 additions, -146 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_bloc.dart` (+17 -3) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_entity.dart` (+3 -0) ➕ `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_message_height_manager.dart` (+160 -0) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart` (+1 -3) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/animated_chat_list.dart` (+80 -58) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_page/chat_footer.dart` (+1 -2) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_page/text_message_widget.dart` (+33 -15) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/ai_markdown_text.dart` (+4 -1) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/ai_text_message.dart` (+92 -64) ➕ `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/widgets/message_height_calculator.dart` (+126 -0) </details> ### 📄 Description   ### Feature Preview Use the `MessageHeightCalculator` to dynamically calculate the minHeight and padding for the AI message: 1. If the message height is smaller than the screen height, add extra dynamic padding. This ”padding“ will reduce as the message becomes longer. 2. If the message height is larger than the screen height, there is no need to add extra “padding”.  ---  #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [x] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [x] All existing tests are passing. ## Summary by Sourcery Optimize chat animations by adding a message-height measurement and caching system that ensures AI response bubbles maintain a consistent minimum height based on screen space and previous message sizes, and refactoring the animated chat list implementation for cleaner state management. New Features: - Introduce MessageHeightCalculator widget to measure and report rendered message heights. - Add ChatMessageHeightManager singleton to cache heights and compute minimum heights for AI answer messages. - Apply dynamic minimum-height constraints to the last AI chat message based on screen height and cached measurements. Enhancements: - Refactor ChatAnimatedList state class and rename private fields for consistency and clarity. - Remove unused spacing import and replace custom VSpace with SizedBox.shrink for layout. - Clear cached message heights on list disposal and remove individual heights when messages are deleted. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>