[PR #6760] [MERGED] feat: AI chat UI improvements #7564

New issue

Closed

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

mirror commented

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

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/6760
Author: @richardshiue
Created: 11/11/2024
Status: ✅ Merged
Merged: 11/14/2024
Merged by: @richardshiue

Base: main ← Head: feat/desktop-ai-chat-improvements

📝 Commits (10+)

8b9fa7d chore: fix typo
64320a6 chore: redundant check for cloud and use guard clause
c566db3 feat: improve ai prompt input ui
c1ba351 feat: improve ai chat welcome page
aafe6b6 feat: improve loading status indicator
539479d feat: improve chat bubble avatars
c89a289 chore: clean up chat theme
c208348 feat: improve sizing, padding and text styles
2437d2e feat: improve sugested follow up question style
b381d32 feat: improve error message style

📊 Changes

93 files changed (+3107 additions, -2660 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/mobile/presentation/home/tab/ai_bubble_button.dart (+12 -9)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/ai_prompt_input_bloc.dart (+87 -75)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_ai_message_bloc.dart (+2 -4)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_bloc.dart (+32 -16)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_entity.dart (+0 -26)
➖ frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_bloc.dart (+0 -87)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_file_bloc.dart (+1 -6)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_member_bloc.dart (+0 -2)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_message_service.dart (+2 -2)
➕ frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_side_panel_bloc.dart (+75 -0)
➖ frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_side_pannel_bloc.dart (+0 -85)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart (+268 -374)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_avatar.dart (+65 -119)
➕ frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_editor_style.dart (+143 -0)
➕ frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/ai_prompt_buttons.dart (+123 -0)
➖ frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_at_button.dart (+0 -30)
➖ frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input.dart (+0 -451)
➖ frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input_attachment.dart (+0 -30)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input_file.dart (+102 -65)
📝 frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input_span.dart (+1 -3)

...and 73 more files

📄 Description

please don't merge before launch review is passed.

launch review fixes (all visual, no tests required):

too little padding between messages from the same user (changed to 8px between message)
too little padding when the window is constrained on desktop (changed to 32px on either side)
no margins for related questions on mobile (now use 16px on either side)
no text overflow for related questions
text misalignment in sources found segment (use 12px font size as per figma)
user message bubble too narrow (now use 1:5 flex)
additional padding at beginning of mobile input text field (6px)

https://github.com/user-attachments/assets/62f7c8d8-a786-4a42-9aa2-af9dd490ed00

Feature Preview

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.

_{🔄 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/6760 **Author:** [@richardshiue](https://github.com/richardshiue) **Created:** 11/11/2024 **Status:** ✅ Merged **Merged:** 11/14/2024 **Merged by:** [@richardshiue](https://github.com/richardshiue) **Base:** `main` ← **Head:** `feat/desktop-ai-chat-improvements` --- ### 📝 Commits (10+) - [`8b9fa7d`](https://github.com/AppFlowy-IO/AppFlowy/commit/8b9fa7db8975f96c399908dccee2df1951443525) chore: fix typo - [`64320a6`](https://github.com/AppFlowy-IO/AppFlowy/commit/64320a6a59d7c37e6815f35608a8b67d64b7bfa4) chore: redundant check for cloud and use guard clause - [`c566db3`](https://github.com/AppFlowy-IO/AppFlowy/commit/c566db3e79c81bbfe7a7decafa2d24044940bc34) feat: improve ai prompt input ui - [`c1ba351`](https://github.com/AppFlowy-IO/AppFlowy/commit/c1ba351d6571a64888cda408209ebbeb5e2e8cf6) feat: improve ai chat welcome page - [`aafe6b6`](https://github.com/AppFlowy-IO/AppFlowy/commit/aafe6b63a96a21b495d914bbd82bbd3587c6eecb) feat: improve loading status indicator - [`539479d`](https://github.com/AppFlowy-IO/AppFlowy/commit/539479dcb56b6d3adc62ac094db54769ed765729) feat: improve chat bubble avatars - [`c89a289`](https://github.com/AppFlowy-IO/AppFlowy/commit/c89a2895b7d4e9bc1da563b09de664a7facf3691) chore: clean up chat theme - [`c208348`](https://github.com/AppFlowy-IO/AppFlowy/commit/c208348d171c15566472d1eb3ac720771a2ef876) feat: improve sizing, padding and text styles - [`2437d2e`](https://github.com/AppFlowy-IO/AppFlowy/commit/2437d2e77d248fadf970778edcef0ea51d0866ec) feat: improve sugested follow up question style - [`b381d32`](https://github.com/AppFlowy-IO/AppFlowy/commit/b381d32b9d47878aef3ef0c7bde5238293a7b4eb) feat: improve error message style ### 📊 Changes **93 files changed** (+3107 additions, -2660 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/mobile/presentation/home/tab/ai_bubble_button.dart` (+12 -9) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/ai_prompt_input_bloc.dart` (+87 -75) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_ai_message_bloc.dart` (+2 -4) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_bloc.dart` (+32 -16) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_entity.dart` (+0 -26) ➖ `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_bloc.dart` (+0 -87) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_file_bloc.dart` (+1 -6) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_member_bloc.dart` (+0 -2) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_message_service.dart` (+2 -2) ➕ `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_side_panel_bloc.dart` (+75 -0) ➖ `frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_side_pannel_bloc.dart` (+0 -85) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart` (+268 -374) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_avatar.dart` (+65 -119) ➕ `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_editor_style.dart` (+143 -0) ➕ `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/ai_prompt_buttons.dart` (+123 -0) ➖ `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_at_button.dart` (+0 -30) ➖ `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input.dart` (+0 -451) ➖ `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input_attachment.dart` (+0 -30) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input_file.dart` (+102 -65) 📝 `frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input_span.dart` (+1 -3) _...and 73 more files_ </details> ### 📄 Description please don't merge before launch review is passed. launch review fixes (all visual, no tests required): - too little padding between messages from the same user (changed to 8px between message) - too little padding when the window is constrained on desktop (changed to 32px on either side) - no margins for related questions on mobile (now use 16px on either side) - no text overflow for related questions - text misalignment in sources found segment (use 12px font size as per figma) - user message bubble too narrow (now use 1:5 flex) - additional padding at beginning of mobile input text field (6px) https://github.com/user-attachments/assets/62f7c8d8-a786-4a42-9aa2-af9dd490ed00 ### Feature Preview  ---  #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [ ] 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. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>