chore: fetch rag only on open chat

* chore: use --locked to install cargo-make

* chore: upgrade to macos 13

.github/workflows/android_ci.yaml.bak

@@ -152,7 +152,7 @@ jobs:
           rustup target install aarch64-linux-android
           rustup target install x86_64-linux-android
           rustup target add armv7-linux-androideabi
-          cargo install --force duckscript_cli
+          cargo install --force --locked duckscript_cli
           cargo install cargo-ndk
           if [ "$RUNNER_OS" == "Linux" ]; then
             sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub

.github/workflows/docker_ci.yml

@@ -2,9 +2,9 @@ name: Docker-CI
 
 on:
   push:
-    branches: ["main", "release/*"]
+    branches: [ "main", "release/*" ]
   pull_request:
-    branches: ["main", "release/*"]
+    branches: [ "main", "release/*" ]
   workflow_dispatch:
 
 concurrency:

.github/workflows/ios_ci.yaml

@@ -85,7 +85,7 @@ jobs:
         working-directory: frontend
         run: |
           rustup target install aarch64-apple-ios-sim
-          cargo install --force duckscript_cli
+          cargo install --force --locked duckscript_cli
           cargo install cargo-lipo
           cargo make appflowy-flutter-deps-tools
         shell: bash

.github/workflows/release.yml

@@ -7,7 +7,7 @@ on:
 
 env:
   FLUTTER_VERSION: "3.22.0"
-  RUST_TOOLCHAIN: "1.77.2"
+  RUST_TOOLCHAIN: "1.80.1"
 
 jobs:
   create-release:
@@ -73,8 +73,8 @@ jobs:
         working-directory: frontend
         run: |
           vcpkg integrate install
-          cargo install --force cargo-make
-          cargo install --force duckscript_cli
+          cargo install --force --locked cargo-make
+          cargo install --force --locked duckscript_cli
 
       - name: Build Windows app
         working-directory: frontend
@@ -135,7 +135,7 @@ jobs:
       fail-fast: false
       matrix:
         job:
-          - { target: x86_64-apple-darwin, os: macos-12, extra-build-args: "" }
+          - { target: x86_64-apple-darwin, os: macos-13, extra-build-args: "" }
     steps:
       - name: Checkout source code
         uses: actions/checkout@v4
@@ -158,8 +158,8 @@ jobs:
       - name: Install prerequisites
         working-directory: frontend
         run: |
-          cargo install --force cargo-make
-          cargo install --force duckscript_cli
+          cargo install --force --locked cargo-make
+          cargo install --force --locked duckscript_cli
 
       - name: Build AppFlowy
         working-directory: frontend
@@ -256,8 +256,8 @@ jobs:
       - name: Install prerequisites
         working-directory: frontend
         run: |
-          cargo install --force cargo-make
-          cargo install --force duckscript_cli
+          cargo install --force --locked cargo-make
+          cargo install --force --locked duckscript_cli
 
       - name: Build AppFlowy
         working-directory: frontend
@@ -370,8 +370,8 @@ jobs:
           sudo apt-get install keybinder-3.0
           sudo apt-get install -y alien libnotify-dev
           source $HOME/.cargo/env
-          cargo install --force cargo-make
-          cargo install --force duckscript_cli
+          cargo install --force --locked cargo-make
+          cargo install --force --locked duckscript_cli
           rustup target add ${{ matrix.job.target }}
 
       - name: Install gcc-aarch64-linux-gnu

.github/workflows/rust_ci.yaml

@@ -18,81 +18,11 @@ on:
 
 env:
   CARGO_TERM_COLOR: always
-  CLOUD_VERSION: 0.7.6-amd64
-  RUST_TOOLCHAIN: "1.77.2"
+  CLOUD_VERSION: 0.8.3-amd64
+  RUST_TOOLCHAIN: "1.80.1"
 
 jobs:
-  self-hosted-job:
-    if: github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: self-hosted
-    steps:
-      - name: Checkout source code
-        uses: actions/checkout@v4
-
-      - name: Checkout Appflowy Cloud
-        uses: actions/checkout@v4
-        with:
-          repository: AppFlowy-IO/AppFlowy-Cloud
-          path: AppFlowy-Cloud
-
-      - name: Prepare Appflowy Cloud env
-        working-directory: AppFlowy-Cloud
-        run: |
-          cp deploy.env .env
-          sed -i '' 's|RUST_LOG=.*|RUST_LOG=trace|' .env
-          sed -i '' 's|API_EXTERNAL_URL=.*|API_EXTERNAL_URL=http://localhost|' .env
-          sed -i '' 's|APPFLOWY_AI_OPENAI_API_KEY=.*|APPFLOWY_AI_OPENAI_API_KEY=${{ secrets.CI_OPENAI_API_KEY }}|' .env
-
-      - name: Ensure AppFlowy-Cloud is Running with Correct Version
-        working-directory: AppFlowy-Cloud
-        env:
-          APPFLOWY_CLOUD_VERSION: ${{ env.CLOUD_VERSION }}
-          APPFLOWY_HISTORY_VERSION: ${{ env.CLOUD_VERSION }}
-          APPFLOWY_WORKER_VERSION: ${{ env.CLOUD_VERSION }}
-        run: |
-          container_id=$(docker ps --filter name=appflowy-cloud-appflowy_cloud-1 -q)
-          if [ -z "$container_id" ]; then
-            echo "AppFlowy-Cloud container is not running. Pulling and starting the container..."
-            docker compose pull
-            docker compose up -d
-            echo "Waiting for the container to be ready..."
-            sleep 10
-          else
-            running_image=$(docker inspect --format='{{index .Config.Image}}' "$container_id")
-            if [ "$running_image" != "appflowy-cloud:$APPFLOWY_CLOUD_VERSION" ]; then
-              echo "AppFlowy-Cloud is running with an incorrect version. Pulling the correct version..."
-              docker compose pull
-              docker compose up -d
-              echo "Waiting for the container to be ready..."
-              sleep 10
-              docker ps -a
-              docker compose logs
-            else
-              echo "AppFlowy-Cloud is running with the correct version."
-            fi
-          fi
-
-      - name: Run rust-lib tests
-        working-directory: frontend/rust-lib
-        env:
-          RUST_LOG: info
-          RUST_BACKTRACE: 1
-          af_cloud_test_base_url: http://localhost
-          af_cloud_test_ws_url: ws://localhost/ws/v1
-          af_cloud_test_gotrue_url: http://localhost/gotrue
-        run: |
-          DISABLE_CI_TEST_LOG="true" cargo test --no-default-features --features="dart"
-
-      - name: rustfmt rust-lib
-        run: cargo fmt --all -- --check
-        working-directory: frontend/rust-lib/
-
-      - name: clippy rust-lib
-        run: cargo clippy --all-targets -- -D warnings
-        working-directory: frontend/rust-lib
-
   ubuntu-job:
-    if: github.event.pull_request.head.repo.full_name != github.repository
     runs-on: ubuntu-latest
     steps:
       - name: Set timezone for action

.github/workflows/rust_coverage.yml

@@ -11,7 +11,7 @@ on:
 env:
   CARGO_TERM_COLOR: always
   FLUTTER_VERSION: "3.22.0"
-  RUST_TOOLCHAIN: "1.77.2"
+  RUST_TOOLCHAIN: "1.80.1"
 
 jobs:
   tests:
@@ -40,8 +40,8 @@ jobs:
       - name: Install prerequisites
         working-directory: frontend
         run: |
-          cargo install --force cargo-make
-          cargo install --force duckscript_cli
+          cargo install --force --locked cargo-make
+          cargo install --force --locked duckscript_cli
 
       - uses: Swatinem/rust-cache@v2
         with:

.github/workflows/tauri2_ci.yaml

@@ -5,13 +5,14 @@ on:
     paths:
       - ".github/workflows/tauri2_ci.yaml"
       - "frontend/rust-lib/**"
+    paths-ignore:
       - "frontend/appflowy_web_app/**"
       - "frontend/resources/**"
 
 env:
   NODE_VERSION: "18.16.0"
   PNPM_VERSION: "8.5.0"
-  RUST_TOOLCHAIN: "1.77.2"
+  RUST_TOOLCHAIN: "1.80.1"
   CARGO_MAKE_VERSION: "0.36.6"
   CI: true
 
@@ -20,34 +21,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  #  tauri-build-self-hosted:
-  #    if: github.event.pull_request.head.repo.full_name == github.repository
-  #    runs-on: self-hosted
-  #
-  #    steps:
-  #      - uses: actions/checkout@v4
-  #      - name: install frontend dependencies
-  #        working-directory: frontend/appflowy_web_app
-  #        run: |
-  #          mkdir dist
-  #          pnpm install
-  #          cd src-tauri && cargo build
-  #
-  #      - name: test and lint
-  #        working-directory: frontend/appflowy_web_app
-  #        run: |
-  #          pnpm run lint:tauri
-  #
-  #      - uses: tauri-apps/tauri-action@v0
-  #        env:
-  #          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  #        with:
-  #          tauriScript: pnpm tauri
-  #          projectPath: frontend/appflowy_web_app
-  #          args: "--debug"
-
   tauri-build-ubuntu:
-    #if: github.event.pull_request.head.repo.full_name != github.repository
     runs-on: ubuntu-20.04
 
     steps:
@@ -121,4 +95,4 @@ jobs:
         with:
           tauriScript: pnpm tauri
           projectPath: frontend/appflowy_web_app
-          args: "--debug"
+          args: "--debug"

.github/workflows/tauri_ci.yaml

@@ -7,7 +7,7 @@ on:
 env:
   NODE_VERSION: "18.16.0"
   PNPM_VERSION: "8.5.0"
-  RUST_TOOLCHAIN: "1.77.2"
+  RUST_TOOLCHAIN: "1.80.1"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -19,7 +19,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform: [ ubuntu-20.04 ]
+        platform: [ubuntu-20.04]
 
     runs-on: ${{ matrix.platform }}
 
@@ -73,7 +73,7 @@ jobs:
         if: matrix.platform == 'windows-latest'
         working-directory: frontend
         run: |
-          cargo install --force duckscript_cli
+          cargo install --force --locked duckscript_cli
           vcpkg integrate install
 
       - name: install dependencies (ubuntu only)
@@ -86,7 +86,7 @@ jobs:
       - name: install cargo-make
         working-directory: frontend
         run: |
-          cargo install --force cargo-make
+          cargo install --force --locked cargo-make
           cargo make appflowy-tauri-deps-tools
 
       - name: install frontend dependencies
@@ -108,4 +108,4 @@ jobs:
         with:
           tauriScript: pnpm tauri
           projectPath: frontend/appflowy_tauri
-          args: "--debug"
+          args: "--debug"

.github/workflows/tauri_release.yml

@@ -4,20 +4,19 @@ on:
   workflow_dispatch:
     inputs:
       branch:
-        description: 'The branch to release'
+        description: "The branch to release"
         required: true
-        default: 'main'
+        default: "main"
       version:
-        description: 'The version to release'
+        description: "The version to release"
         required: true
-        default: '0.0.0'
+        default: "0.0.0"
 env:
   NODE_VERSION: "18.16.0"
   PNPM_VERSION: "8.5.0"
-  RUST_TOOLCHAIN: "1.77.2"
+  RUST_TOOLCHAIN: "1.80.1"
 
 jobs:
-
   publish-tauri:
     permissions:
       contents: write
@@ -84,7 +83,7 @@ jobs:
         if: matrix.settings.platform == 'windows-latest'
         working-directory: frontend
         run: |
-          cargo install --force duckscript_cli
+          cargo install --force --locked duckscript_cli
           vcpkg integrate install
 
       - name: install dependencies (ubuntu only)
@@ -97,7 +96,7 @@ jobs:
       - name: install cargo-make
         working-directory: frontend
         run: |
-          cargo install --force cargo-make
+          cargo install --force --locked cargo-make
           cargo make appflowy-tauri-deps-tools
 
       - name: install frontend dependencies

CHANGELOG.md

@@ -1,5 +1,56 @@
 # Release Notes
-# Release Notes
+## Version 0.7.9 - 25/12/2024
+### New Features
+
+### Bug Fixes
+
+## Version 0.7.8 - 18/12/2024
+### New Features
+<img width="1068" alt="image" src="https://github.com/user-attachments/assets/cf8bd287-f370-4291-8638-76e2bbf4aaac" />
+
+- Meet Simple Table 2.0:
+   - Insert a list into a table cell
+   - Insert images, quotes, callouts, and code blocks into a table cell
+   - Drag to move rows or columns
+   - Toggle header rows or columns on/off
+   - Distribute columns evenly
+   - Adjust to page width
+- Enjoy a new UI/UX for a seamless experience
+- Revamped mention page interactions in AI Chat
+- Improved AppFlowy AI service
+
+### Bug Fixes
+- Fixed an error when opening files in the database in local mode
+- Fixed arrow up/down navigation not working for selecting a language in Code Block
+- Fixed an issue where deleting multiple blocks using the drag button on the document page didn’t work
+  
+## Version 0.7.7 - 09/12/2024
+### Bug Fixes
+- Fixed sidebar menu resize regression
+- Fixed AI chat loading issues
+- Fixed inability to open local files in database
+- Fixed mentions remaining in notifications after removal from document
+- Fixed event card closing when clicking on empty space
+- Fixed keyboard shortcut issues
+
+## Version 0.7.6 - 03/12/2024
+### New Features
+- Revamped the simple table UI
+- Added support for capturing images from camera on mobile
+### Bug Fixes
+- Improved markdown rendering capabilities in AI writer
+- Fixed an issue where pressing Enter on a collapsed toggle list would add an unnecessary new line
+- Fixed an issue where creating a document from slash menu could insert content at incorrect position
+
+## Version 0.7.5 - 25/11/2024
+### Bug Fixes
+- Improved chat response parsing
+- Fixed toggle list icon direction for RTL mode
+- Fixed cross blocks formatting not reflecting in float toolbar
+- Fixed unable to click inside the toggle list to create a new paragraph
+- Fixed open file error 50 on macOS
+- Fixed upload file exceed limit error
+
 ## Version 0.7.4 - 19/11/2024
 ### New Features
 - Support uploading WebP and BMP images
@@ -931,4 +982,4 @@ Bug fixes and improvements
 - Increased height of action
 - CPU performance issue
 - Fix potential data parser error
-- More foundation work for online collaboration
+- More foundation work for online collaboration

README.md

@@ -42,10 +42,12 @@ AppFlowy is the AI workspace where you achieve more without losing control of yo
 ## User Installation
 
 - [Download AppFlowy Desktop (macOS, Windows, and Linux)](https://github.com/AppFlowy-IO/AppFlowy/releases)
-- Other channels: [FlatHub](https://flathub.org/apps/io.appflowy.AppFlowy), [Snapcraft](https://snapcraft.io/appflowy), [Sourceforge](https://sourceforge.net/projects/appflowy/)
+- Other
+  channels: [FlatHub](https://flathub.org/apps/io.appflowy.AppFlowy), [Snapcraft](https://snapcraft.io/appflowy), [Sourceforge](https://sourceforge.net/projects/appflowy/)
 - Available on
-  - [App Store](https://apps.apple.com/app/appflowy/id6457261352): iPhone
-  - [Play Store](https://play.google.com/store/apps/details?id=io.appflowy.appflowy): Android 10 or above; ARMv7 is not supported
+    - [App Store](https://apps.apple.com/app/appflowy/id6457261352): iPhone
+    - [Play Store](https://play.google.com/store/apps/details?id=io.appflowy.appflowy): Android 10 or above; ARMv7 is
+      not supported
 - [Self-hosting AppFlowy](https://docs.appflowy.io/docs/guides/appflowy/self-hosting-appflowy)
 - [Source](https://docs.appflowy.io/docs/documentation/appflowy/from-source)
 
@@ -61,15 +63,18 @@ AppFlowy is the AI workspace where you achieve more without losing control of yo
 
 ## Getting Started with development
 
-Please view the [documentation](https://docs.appflowy.io/docs/documentation/appflowy/from-source) for OS specific development instructions
+Please view the [documentation](https://docs.appflowy.io/docs/documentation/appflowy/from-source) for OS specific
+development instructions
 
 ## Roadmap
 
 - [AppFlowy Roadmap ReadMe](https://docs.appflowy.io/docs/appflowy/roadmap)
 - [AppFlowy Public Roadmap](https://github.com/orgs/AppFlowy-IO/projects/5/views/12)
 
-If you'd like to propose a feature, submit a feature request [here](https://github.com/AppFlowy-IO/AppFlowy/issues/new?assignees=&labels=&template=feature_request.yaml&title=%5BFR%5D+) <br/>
-If you'd like to report a bug, submit a bug report [here](https://github.com/AppFlowy-IO/AppFlowy/issues/new?assignees=&labels=&template=bug_report.yaml&title=%5BBug%5D+)
+If you'd like to propose a feature, submit a feature
+request [here](https://github.com/AppFlowy-IO/AppFlowy/issues/new?assignees=&labels=&template=feature_request.yaml&title=%5BFR%5D+) <br/>
+If you'd like to report a bug, submit a bug
+report [here](https://github.com/AppFlowy-IO/AppFlowy/issues/new?assignees=&labels=&template=bug_report.yaml&title=%5BBug%5D+)
 
 ## **Releases**
 
@@ -77,16 +82,24 @@ Please see the [changelog](https://www.appflowy.io/whatsnew) for more details ab
 
 ## Contributing
 
-Contributions make the open-source community a fantastic place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. Please look at [Contributing to AppFlowy](https://docs.appflowy.io/docs/documentation/software-contributions/contributing-to-appflowy) for details.
+Contributions make the open-source community a fantastic place to learn, inspire, and create. Any contributions you make
+are **greatly appreciated**. Please look
+at [Contributing to AppFlowy](https://docs.appflowy.io/docs/documentation/software-contributions/contributing-to-appflowy)
+for details.
 
-If your Pull Request is accepted as it fixes a bug, adds functionality, or makes AppFlowy's codebase significantly easier to use or understand, **Congratulations!** If your administrative and managerial work behind the scenes sustains the community, **Congratulations!** You are now an official contributor to AppFlowy. Get in touch with us ([link](https://tally.so/r/mKP5z3)) to receive the very special Contributor T-shirt!
+If your Pull Request is accepted as it fixes a bug, adds functionality, or makes AppFlowy's codebase significantly
+easier to use or understand, **Congratulations!** If your administrative and managerial work behind the scenes sustains
+the community, **Congratulations!** You are now an official contributor to AppFlowy. Get in touch with
+us ([link](https://tally.so/r/mKP5z3)) to receive the very special Contributor T-shirt!
 Proudly wear your T-shirt and show it to us by tagging [@appflowy](https://twitter.com/appflowy) on Twitter.
 
 ## Translations 🌎🗺
 
 [![translation badge](https://inlang.com/badge?url=github.com/AppFlowy-IO/AppFlowy)](https://inlang.com/editor/github.com/AppFlowy-IO/AppFlowy?ref=badge)
 
-To add translations, you can manually edit the JSON translation files in `/frontend/resources/translations`, use the [inlang online editor](https://inlang.com/editor/github.com/AppFlowy-IO/AppFlowy), or run `npx inlang machine translate` to add missing translations.
+To add translations, you can manually edit the JSON translation files in `/frontend/resources/translations`, use
+the [inlang online editor](https://inlang.com/editor/github.com/AppFlowy-IO/AppFlowy), or
+run `npx inlang machine translate` to add missing translations.
 
 ## Join the community to build AppFlowy together
 
@@ -96,16 +109,30 @@ To add translations, you can manually edit the JSON translation files in `/front
 
 ## Why Are We Building This?
 
-Notion has been our favourite project and knowledge management tool in recent years because of its aesthetic appeal and functionality. Our team uses it daily, and we are on its paid plan. However, as we all know, Notion has its limitations. These include weak data security and poor compatibility with mobile devices. Likewise, alternative collaborative workplace management tools also have their constraints.
+Notion has been our favourite project and knowledge management tool in recent years because of its aesthetic appeal and
+functionality. Our team uses it daily, and we are on its paid plan. However, as we all know, Notion has its limitations.
+These include weak data security and poor compatibility with mobile devices. Likewise, alternative collaborative
+workplace management tools also have their constraints.
 
-The limitations we encountered using these tools and our past work experience with collaborative productivity tools have led to our firm belief that there is a glass ceiling on what's possible for these tools in the future. This emanates from the fact that these tools will probably struggle to scale horizontally at some point and be forced to prioritize a proportion of customers whose needs differ from the rest. While decision-makers want a workplace OS, it is impossible to come up with a one-size fits all solution in such a fragmented market.
+The limitations we encountered using these tools and our past work experience with collaborative productivity tools have
+led to our firm belief that there is a glass ceiling on what's possible for these tools in the future. This emanates
+from the fact that these tools will probably struggle to scale horizontally at some point and be forced to prioritize a
+proportion of customers whose needs differ from the rest. While decision-makers want a workplace OS, it is impossible to
+come up with a one-size fits all solution in such a fragmented market.
 
-When a customer's evolving core needs are not satisfied, they either switch to another or build one from the ground up, in-house. Consequently, they either go under another ceiling or buy an expensive ticket to learn a hard lesson. This is a requirement for many resources and expertise, building a reliable and easy-to-use collaborative tool, not to mention the speed and native experience. The same may apply to individual users as well.
+When a customer's evolving core needs are not satisfied, they either switch to another or build one from the ground up,
+in-house. Consequently, they either go under another ceiling or buy an expensive ticket to learn a hard lesson. This is
+a requirement for many resources and expertise, building a reliable and easy-to-use collaborative tool, not to mention
+the speed and native experience. The same may apply to individual users as well.
 
-All these restrictions necessitate our mission - to make it possible for anyone to create apps that suit their needs well.
+All these restrictions necessitate our mission - to make it possible for anyone to create apps that suit their needs
+well.
 
 - To individuals, we would like to offer Notion's functionality, data security, and cross-platform native experience.
-- To enterprises and hackers, AppFlowy is dedicated to offering building blocks and collaboration infra services to enable you to make apps on your own. Moreover, you have 100% control of your data. You can design and modify AppFlowy your way, with a single codebase written in Flutter and Rust supporting multiple platforms armed with long-term maintainability.
+- To enterprises and hackers, AppFlowy is dedicated to offering building blocks and collaboration infra services to
+  enable you to make apps on your own. Moreover, you have 100% control of your data. You can design and modify AppFlowy
+  your way, with a single codebase written in Flutter and Rust supporting multiple platforms armed with long-term
+  maintainability.
 
 We decided to achieve this mission by upholding the three most fundamental values:
 
@@ -113,16 +140,20 @@ We decided to achieve this mission by upholding the three most fundamental value
 - Reliable native experience
 - Community-driven extensibility
 
-We do not claim to outperform Notion in terms of functionality and design, at least for now. Besides, our priority doesn't lie in more functionality at the moment. Instead, we would like to cultivate a community to democratize the knowledge and wheels of making complex workplace management tools while enabling people and businesses to create beautiful things on their own by equipping them with a versatile toolbox of building blocks.
+We do not claim to outperform Notion in terms of functionality and design, at least for now. Besides, our priority
+doesn't lie in more functionality at the moment. Instead, we would like to cultivate a community to democratize the
+knowledge and wheels of making complex workplace management tools while enabling people and businesses to create
+beautiful things on their own by equipping them with a versatile toolbox of building blocks.
 
 ## License
 
-Distributed under the AGPLv3 License. See [`LICENSE.md`](https://github.com/AppFlowy-IO/AppFlowy/blob/main/LICENSE) for more information.
+Distributed under the AGPLv3 License. See [`LICENSE.md`](https://github.com/AppFlowy-IO/AppFlowy/blob/main/LICENSE) for
+more information.
 
 ## Acknowledgments
 
 Special thanks to these amazing projects which help power AppFlowy.IO:
 
-- [flutter-quill](https://github.com/singerdmx/flutter-quill)
 - [cargo-make](https://github.com/sagiegurari/cargo-make)
 - [contrib.rocks](https://contrib.rocks)
+- [flutter_chat_ui](https://pub.dev/packages/flutter_chat_ui)

codemagic.yaml

@@ -20,7 +20,7 @@ workflows:
 
           rustup target install aarch64-apple-ios-sim
           cargo install --force cargo-make
-          cargo install --force duckscript_cli
+          cargo install --force --locked duckscript_cli
           cargo install --force cargo-lipo
 
           cargo make appflowy-flutter-deps-tools

frontend/Makefile.toml

@@ -26,7 +26,7 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CRATE_FS_NAME = "dart_ffi"
 CARGO_MAKE_CRATE_NAME = "dart-ffi"
 LIB_NAME = "dart_ffi"
-APPFLOWY_VERSION = "0.7.4"
+APPFLOWY_VERSION = "0.7.9"
 FLUTTER_DESKTOP_FEATURES = "dart"
 PRODUCT_NAME = "AppFlowy"
 MACOSX_DEPLOYMENT_TARGET = "11.0"

frontend/appflowy_flutter/android/app/src/main/AndroidManifest.xml

@@ -36,7 +36,6 @@
         <data android:scheme="http" />
         <data android:scheme="https" />
         <data android:scheme="appflowy-flutter" />
-        <!-- <data android:host="login-callback" /> -->
       </intent-filter>
     </activity>
     <!--
@@ -50,7 +49,8 @@
   <!-- Permission to read files from external storage (outside application container).
   As of Android 12 this permission no longer has any effect. Instead use the
   READ_MEDIA_IMAGES, READ_MEDIA_VIDEO or READM_MEDIA_AUDIO permissions. -->
-  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
+    android:maxSdkVersion="32" />
   <!-- Permissions to read media files. -->
   <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
   <queries>
@@ -65,4 +65,5 @@
   -->
   <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
   <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
+  <uses-permission android:name="android.permission.CAMERA" />
 </manifest>

frontend/appflowy_flutter/integration_test/desktop/cloud/cloud_runner.dart

@@ -1,16 +1,19 @@
+import 'data_migration/data_migration_test_runner.dart'
+    as data_migration_test_runner;
 import 'document/document_test_runner.dart' as document_test_runner;
+import 'set_env.dart' as preset_af_cloud_env_test;
 import 'sidebar/sidebar_move_page_test.dart' as sidebar_move_page_test;
+import 'sidebar/sidebar_rename_untitled_test.dart'
+    as sidebar_rename_untitled_test;
 import 'uncategorized/uncategorized_test_runner.dart'
     as uncategorized_test_runner;
 import 'workspace/workspace_test_runner.dart' as workspace_test_runner;
-import 'data_migration/data_migration_test_runner.dart'
-    as data_migration_test_runner;
-import 'set_env.dart' as preset_af_cloud_env_test;
 
 Future<void> main() async {
   preset_af_cloud_env_test.main();
 
   data_migration_test_runner.main();
+
   // uncategorized
   uncategorized_test_runner.main();
 
@@ -22,4 +25,5 @@ Future<void> main() async {
 
   // sidebar
   sidebar_move_page_test.main();
+  sidebar_rename_untitled_test.main();
 }

frontend/appflowy_flutter/integration_test/desktop/cloud/document/document_ai_writer_test.dart

@@ -0,0 +1,47 @@
+import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../../shared/constants.dart';
+import '../../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('AI Writer:', () {
+    testWidgets('the ai writer transaction should only apply in memory',
+        (tester) async {
+      await tester.initializeAppFlowy(
+        cloudType: AuthenticatorType.appflowyCloudSelfHost,
+      );
+      await tester.tapGoogleLoginInButton();
+      await tester.expectToSeeHomePageWithGetStartedPage();
+
+      const pageName = 'Document';
+      await tester.createNewPageInSpace(
+        spaceName: Constants.generalSpaceName,
+        layout: ViewLayoutPB.Document,
+        pageName: pageName,
+      );
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName(
+        LocaleKeys.document_slashMenu_name_aiWriter.tr(),
+      );
+      expect(find.byType(AIWriterBlockComponent), findsOneWidget);
+
+      // switch to another page
+      await tester.openPage(Constants.gettingStartedPageName);
+      // switch back to the page
+      await tester.openPage(pageName);
+
+      // expect the ai writer block is not in the document
+      expect(find.byType(AIWriterBlockComponent), findsNothing);
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/cloud/document/document_test_runner.dart

@@ -1,5 +1,6 @@
 import 'package:integration_test/integration_test.dart';
 
+import 'document_ai_writer_test.dart' as document_ai_writer_test;
 import 'document_copy_link_to_block_test.dart'
     as document_copy_link_to_block_test;
 import 'document_option_actions_test.dart' as document_option_actions_test;
@@ -11,4 +12,5 @@ void main() {
   document_option_actions_test.main();
   document_copy_link_to_block_test.main();
   document_publish_test.main();
+  document_ai_writer_test.main();
 }

frontend/appflowy_flutter/integration_test/desktop/cloud/sidebar/sidebar_rename_untitled_test.dart

@@ -0,0 +1,55 @@
+import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pbenum.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/style_widget/text_input.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../../shared/constants.dart';
+import '../../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  testWidgets('Rename empty name view (untitled)', (tester) async {
+    await tester.initializeAppFlowy(
+      cloudType: AuthenticatorType.appflowyCloudSelfHost,
+    );
+    await tester.tapGoogleLoginInButton();
+    await tester.expectToSeeHomePageWithGetStartedPage();
+
+    await tester.createNewPageInSpace(
+      spaceName: Constants.generalSpaceName,
+      layout: ViewLayoutPB.Document,
+    );
+
+    // click the ... button and open rename dialog
+    await tester.hoverOnPageName(
+      ViewLayoutPB.Document.defaultName,
+      onHover: () async {
+        await tester.tapPageOptionButton();
+        await tester.tapButtonWithName(
+          LocaleKeys.disclosureAction_rename.tr(),
+        );
+      },
+    );
+    await tester.pumpAndSettle();
+
+    expect(find.byType(NavigatorTextFieldDialog), findsOneWidget);
+
+    final textField = tester.widget<FlowyFormTextInput>(
+      find.descendant(
+        of: find.byType(NavigatorTextFieldDialog),
+        matching: find.byType(FlowyFormTextInput),
+      ),
+    );
+
+    expect(
+      textField.controller!.text,
+      LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+    );
+  });
+}

frontend/appflowy_flutter/integration_test/desktop/database/database_calendar_test.dart

@@ -301,6 +301,7 @@ void main() {
       await tester.createOption(name: "qwer");
       await tester.selectOption(name: "asdf");
       await tester.dismissCellEditor();
+      await tester.dismissCellEditor();
 
       await tester.tapDatabaseFilterButton();
       await tester.tapCreateFilterByFieldType(FieldType.MultiSelect, "Tags");
@@ -332,6 +333,7 @@ void main() {
       await tester.tapButton(finderForFieldType(FieldType.MultiSelect));
       await tester.selectOption(name: "asdf");
       await tester.dismissCellEditor();
+      await tester.dismissCellEditor();
 
       tester.assertNumberOfEventsInCalendar(0);
 

frontend/appflowy_flutter/integration_test/desktop/database/database_field_test.dart

@@ -538,8 +538,8 @@ void main() {
 
       // edit the first date cell
       await tester.tapCellInGrid(rowIndex: 0, fieldType: FieldType.DateTime);
-      await tester.toggleIncludeTime();
       final now = DateTime.now();
+      await tester.toggleIncludeTime();
       await tester.selectDay(content: now.day);
 
       await tester.dismissCellEditor();

frontend/appflowy_flutter/integration_test/desktop/database/database_row_cover_test.dart

@@ -4,12 +4,10 @@ import 'package:appflowy/core/config/kv.dart';
 import 'package:appflowy/core/config/kv_keys.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/widgets/card/card.dart';
-import 'package:appflowy/plugins/database/widgets/cell_editor/media_cell_editor.dart';
 import 'package:appflowy/plugins/database/widgets/row/row_banner.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/shared/af_image.dart';
 import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pbenum.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/services.dart';
@@ -26,61 +24,6 @@ void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   group('database row cover', () {
-    testWidgets('add image to media field and check if cover is set (grid)',
-        (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapAnonymousSignInButton();
-
-      await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Grid);
-
-      // Invoke the field editor
-      await tester.tapGridFieldWithName('Type');
-      await tester.tapEditFieldButton();
-
-      // Change to media type
-      await tester.tapSwitchFieldTypeButton();
-      await tester.selectFieldType(FieldType.Media);
-      await tester.dismissFieldEditor();
-
-      // Prepare file for upload from local
-      final image = await rootBundle.load('assets/test/images/sample.jpeg');
-      final tempDirectory = await getTemporaryDirectory();
-
-      final imagePath = p.join(tempDirectory.path, 'sample.jpeg');
-      final file = File(imagePath)
-        ..writeAsBytesSync(image.buffer.asUint8List());
-
-      mockPickFilePaths(paths: [imagePath]);
-      await getIt<KeyValueStorage>().set(KVKeys.kCloudType, '0');
-
-      // Open media cell editor
-      await tester.tapCellInGrid(rowIndex: 0, fieldType: FieldType.Media);
-      await tester.findMediaCellEditor(findsOneWidget);
-
-      // Click on add file button in the Media Cell Editor
-      await tester.tap(find.text(LocaleKeys.grid_media_addFileOrImage.tr()));
-      await tester.pumpAndSettle();
-
-      // Tap on the upload interaction
-      await tester.tapFileUploadHint();
-
-      // Expect one file
-      expect(find.byType(RenderMedia), findsOneWidget);
-
-      // Close cell editor
-      await tester.dismissCellEditor();
-
-      // Open first row in row detail view
-      await tester.openFirstRowDetailPage();
-      await tester.pumpAndSettle();
-
-      // Expect a cover to be shown
-      expect(find.byType(RowCover), findsOneWidget);
-
-      // Remove the temp file
-      await Future.wait([file.delete()]);
-    });
-
     testWidgets('add and remove cover from Row Detail Card', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();

frontend/appflowy_flutter/integration_test/desktop/database/database_row_page_test.dart

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/database/widgets/cell_editor/checklist_cell_edi
 import 'package:appflowy/plugins/database/widgets/row/row_detail.dart';
 import 'package:appflowy/plugins/document/document_page.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
@@ -21,7 +22,14 @@ import '../../shared/emoji.dart';
 import '../../shared/util.dart';
 
 void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  setUpAll(() {
+    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+    RecentIcons.enable = false;
+  });
+
+  tearDownAll(() {
+    RecentIcons.enable = true;
+  });
 
   group('grid row detail page:', () {
     testWidgets('opens', (tester) async {
@@ -386,11 +394,16 @@ void main() {
         isChecked: false,
       );
       tester.assertPhantomChecklistItemAtIndex(index: 1);
+      tester.assertPhantomChecklistItemContent("");
 
       await tester.enterText(find.byType(PhantomChecklistItem), 'task 2');
       await tester.pumpAndSettle();
-      await tester.simulateKeyEvent(LogicalKeyboardKey.enter);
-      await tester.pumpAndSettle(const Duration(milliseconds: 500));
+      await tester.hoverOnWidget(
+        find.byType(ChecklistRowDetailCell),
+        onHover: () async {
+          await tester.tapButton(find.byType(ChecklistItemControl));
+        },
+      );
 
       tester.assertChecklistTaskInEditor(
         index: 1,
@@ -398,6 +411,7 @@ void main() {
         isChecked: false,
       );
       tester.assertPhantomChecklistItemAtIndex(index: 2);
+      tester.assertPhantomChecklistItemContent("");
 
       await tester.simulateKeyEvent(LogicalKeyboardKey.escape);
       await tester.pumpAndSettle();

frontend/appflowy_flutter/integration_test/desktop/document/document_copy_and_paste_test.dart

@@ -1,7 +1,5 @@
 import 'dart:io';
 
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/block_menu/block_menu_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
@@ -11,6 +9,7 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:universal_platform/universal_platform.dart';
@@ -27,10 +26,13 @@ void main() {
       await tester.pasteContent(
         plainText: List.generate(lines, (index) => 'line $index').join('\n'),
         (editorState) {
-          expect(editorState.document.root.children.length, 3);
+          expect(editorState.document.root.children.length, 1);
+          final text =
+              editorState.document.root.children.first.delta!.toPlainText();
+          final textLines = text.split('\n');
           for (var i = 0; i < lines; i++) {
             expect(
-              editorState.getNodeAtPath([i])!.delta!.toPlainText(),
+              textLines[i],
               'line $i',
             );
           }
@@ -467,6 +469,44 @@ void main() {
       expect(node.attributes[ImageBlockKeys.url], isNotEmpty);
     });
   });
+
+  const testMarkdownText = '''
+# I'm h1
+## I'm h2
+### I'm h3
+#### I'm h4
+##### I'm h5
+###### I'm h6''';
+
+  testWidgets('paste markdowns', (tester) async {
+    await tester.pasteContent(
+      plainText: testMarkdownText,
+      (editorState) {
+        final children = editorState.document.root.children;
+        expect(children.length, 6);
+        for (int i = 1; i <= children.length; i++) {
+          final text = children[i - 1].delta!.toPlainText();
+          expect(text, 'I\'m h$i');
+        }
+      },
+    );
+  });
+
+  testWidgets('paste markdowns as plain', (tester) async {
+    await tester.pasteContent(
+      plainText: testMarkdownText,
+      pasteAsPlain: true,
+      (editorState) {
+        final children = editorState.document.root.children;
+        expect(children.length, 6);
+        for (int i = 1; i <= children.length; i++) {
+          final text = children[i - 1].delta!.toPlainText();
+          final expectText = '${'#' * i} I\'m h$i';
+          expect(text, expectText);
+        }
+      },
+    );
+  });
 }
 
 extension on WidgetTester {
@@ -476,6 +516,7 @@ extension on WidgetTester {
     String? plainText,
     String? html,
     String? inAppJson,
+    bool pasteAsPlain = false,
     (String, Uint8List?)? image,
   }) async {
     await initializeAppFlowy();
@@ -502,6 +543,7 @@ extension on WidgetTester {
     await simulateKeyEvent(
       LogicalKeyboardKey.keyV,
       isControlPressed: Platform.isLinux || Platform.isWindows,
+      isShiftPressed: pasteAsPlain,
       isMetaPressed: Platform.isMacOS,
     );
     await pumpAndSettle();

frontend/appflowy_flutter/integration_test/desktop/document/document_find_menu_test.dart

@@ -37,12 +37,12 @@ void main() {
 
       // set clipboard data
       final data = [
-        "123456\n",
-        ...List.generate(100, (_) => "${generateRandomString(50)}\n"),
-        "1234567\n",
-        ...List.generate(100, (_) => "${generateRandomString(50)}\n"),
-        "12345678\n",
-        ...List.generate(100, (_) => "${generateRandomString(50)}\n"),
+        "123456\n\n",
+        ...List.generate(100, (_) => "${generateRandomString(50)}\n\n"),
+        "1234567\n\n",
+        ...List.generate(100, (_) => "${generateRandomString(50)}\n\n"),
+        "12345678\n\n",
+        ...List.generate(100, (_) => "${generateRandomString(50)}\n\n"),
       ].join();
       await getIt<ClipboardService>().setData(
         ClipboardServiceData(
@@ -139,6 +139,22 @@ void main() {
         ),
         findsOneWidget,
       );
+
+      /// press cmd/ctrl+F to display the find menu
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyF,
+        isControlPressed:
+            UniversalPlatform.isLinux || UniversalPlatform.isWindows,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(FindAndReplaceMenuWidget), findsOneWidget);
+
+      /// press esc to dismiss the find menu
+      await tester.simulateKeyEvent(LogicalKeyboardKey.escape);
+      await tester.pumpAndSettle();
+      expect(find.byType(FindAndReplaceMenuWidget), findsNothing);
     },
   );
 }

frontend/appflowy_flutter/integration_test/desktop/document/document_inline_sub_page_test.dart

@@ -2,12 +2,12 @@ import 'dart:io';
 
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_menu.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_action_type.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/services.dart';
-
-import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -330,6 +330,23 @@ void main() {
       expect(find.text("$_createdPageName (copy)"), findsNWidgets(2));
       expect(find.text("$_createdPageName (copy) (copy)"), findsOneWidget);
     });
+
+    testWidgets('Cancel inline page reference menu by space', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createOpenRenameDocumentUnderParent(name: _firstDocName);
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showPlusMenu();
+
+      // Cancel by space
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.space,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(InlineActionsMenu), findsNothing);
+    });
   });
 }
 

frontend/appflowy_flutter/integration_test/desktop/document/document_test_runner_4.dart

@@ -11,6 +11,8 @@ import 'document_with_file_test.dart' as document_with_file_test;
 import 'document_with_image_block_test.dart' as document_with_image_block_test;
 import 'document_with_multi_image_block_test.dart'
     as document_with_multi_image_block_test;
+import 'document_with_simple_table_test.dart'
+    as document_with_simple_table_test;
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -25,4 +27,5 @@ void main() {
   document_block_option_test.main();
   document_find_menu_test.main();
   document_toolbar_test.main();
+  document_with_simple_table_test.main();
 }

frontend/appflowy_flutter/integration_test/desktop/document/document_with_cover_image_test.dart

@@ -1,5 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -11,7 +13,14 @@ import '../../shared/emoji.dart';
 import '../../shared/util.dart';
 
 void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  setUpAll(() {
+    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+    RecentIcons.enable = false;
+  });
+
+  tearDownAll(() {
+    RecentIcons.enable = true;
+  });
 
   group('cover image:', () {
     testWidgets('document cover tests', (tester) async {
@@ -147,7 +156,7 @@ void main() {
       tester.expectViewHasIcon(
         gettingStarted,
         ViewLayoutPB.Document,
-        punch,
+        EmojiIconData.emoji(punch),
       );
     });
   });

frontend/appflowy_flutter/integration_test/desktop/document/document_with_database_test.dart

@@ -1,12 +1,15 @@
 import 'package:appflowy/plugins/database/board/presentation/board_page.dart';
 import 'package:appflowy/plugins/database/calendar/presentation/calendar_page.dart';
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/footer/grid_footer.dart';
+import 'package:appflowy/plugins/database/grid/presentation/widgets/row/row.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/text.dart';
 import 'package:appflowy/plugins/inline_actions/widgets/inline_actions_handler.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra/uuid.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -174,9 +177,110 @@ void main() {
         findsOneWidget,
       );
     });
+
+    testWidgets('insert a referenced grid with many rows (load more option)',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await insertLinkedDatabase(tester, ViewLayoutPB.Grid);
+
+      // validate the referenced grid is inserted
+      expect(
+        find.descendant(
+          of: find.byType(AppFlowyEditor),
+          matching: find.byType(GridPage),
+        ),
+        findsOneWidget,
+      );
+
+      // https://github.com/AppFlowy-IO/AppFlowy/issues/3533
+      // test: the selection of editor should be clear when editing the grid
+      await tester.editor.updateSelection(
+        Selection.collapsed(
+          Position(path: [1]),
+        ),
+      );
+      final gridTextCell = find.byType(EditableTextCell).first;
+      await tester.tapButton(gridTextCell);
+
+      expect(tester.editor.getCurrentEditorState().selection, isNull);
+
+      final editorScrollable = find
+          .descendant(
+            of: find.byType(AppFlowyEditor),
+            matching: find.byWidgetPredicate(
+              (w) => w is Scrollable && w.axis == Axis.vertical,
+            ),
+          )
+          .first;
+
+      // Add 100 Rows to the linked database
+      final addRowFinder = find.byType(GridAddRowButton);
+      for (var i = 0; i < 100; i++) {
+        await tester.scrollUntilVisible(
+          addRowFinder,
+          100,
+          scrollable: editorScrollable,
+        );
+        await tester.tapButton(addRowFinder);
+        await tester.pumpAndSettle();
+      }
+
+      // Since all rows visible are those we added, we should see all of them
+      expect(find.byType(GridRow), findsNWidgets(103));
+
+      // Navigate to getting started
+      await tester.openPage(gettingStarted);
+
+      // Navigate back to the document
+      await tester.openPage('insert_a_reference_${ViewLayoutPB.Grid.name}');
+
+      // We see only 25 Grid Rows
+      expect(find.byType(GridRow), findsNWidgets(25));
+
+      // We see Add row and load more button
+      expect(find.byType(GridAddRowButton), findsOneWidget);
+      expect(find.byType(GridRowLoadMoreButton), findsOneWidget);
+
+      // Load more rows, expect 50 visible
+      await _loadMoreRows(tester, editorScrollable, 50);
+
+      // Load more rows, expect 75 visible
+      await _loadMoreRows(tester, editorScrollable, 75);
+
+      // Load more rows, expect 100 visible
+      await _loadMoreRows(tester, editorScrollable, 100);
+
+      // Load more rows, expect 103 visible
+      await _loadMoreRows(tester, editorScrollable, 103);
+
+      // We no longer see load more option
+      expect(find.byType(GridRowLoadMoreButton), findsNothing);
+    });
   });
 }
 
+Future<void> _loadMoreRows(
+  WidgetTester tester,
+  Finder scrollable, [
+  int? expectedRows,
+]) async {
+  await tester.scrollUntilVisible(
+    find.byType(GridRowLoadMoreButton),
+    100,
+    scrollable: scrollable,
+  );
+  await tester.pumpAndSettle();
+
+  await tester.tap(find.byType(GridRowLoadMoreButton));
+  await tester.pumpAndSettle();
+
+  if (expectedRows != null) {
+    expect(find.byType(GridRow), findsNWidgets(expectedRows));
+  }
+}
+
 /// Insert a referenced database of [layout] into the document
 Future<void> insertLinkedDatabase(
   WidgetTester tester,

frontend/appflowy_flutter/integration_test/desktop/document/document_with_date_reminder_test.dart

@@ -1,14 +1,21 @@
+import 'dart:io';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_date_block.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/settings/date_time/date_format_ext.dart';
 import 'package:appflowy/workspace/presentation/widgets/date_picker/desktop_date_picker.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
+import 'package:table_calendar/table_calendar.dart';
 
 import '../../shared/util.dart';
 
@@ -18,7 +25,7 @@ void main() {
     TestWidgetsFlutterBinding.ensureInitialized();
   });
 
-  group('date or reminder block in document', () {
+  group('date or reminder block in document:', () {
     testWidgets("insert date with time block", (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapAnonymousSignInButton();
@@ -121,5 +128,339 @@ void main() {
       expect(find.text('@$formattedDate'), findsOneWidget);
       expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsOneWidget);
     });
+
+    testWidgets("copy, cut and paste a date mention", (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(
+        name: 'copy, cut and paste a date mention',
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName(
+        LocaleKeys.document_slashMenu_name_dateOrReminder.tr(),
+      );
+
+      final dateTimeSettings = DateTimeSettingsPB(
+        dateFormat: UserDateFormatPB.Friendly,
+        timeFormat: UserTimeFormatPB.TwentyFourHour,
+      );
+      final DateTime currentDateTime = DateTime.now();
+      final String formattedDate =
+          dateTimeSettings.dateFormat.formatDate(currentDateTime, false);
+
+      // get current date in editor
+      expect(find.byType(MentionDateBlock), findsOneWidget);
+      expect(find.text('@$formattedDate'), findsOneWidget);
+
+      // update selection and copy
+      await tester.editor.updateSelection(
+        Selection(
+          start: Position(path: [0]),
+          end: Position(path: [0], offset: 1),
+        ),
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyC,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      // update selection and paste
+      await tester.editor.updateSelection(
+        Selection.collapsed(Position(path: [0], offset: 1)),
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(MentionDateBlock), findsNWidgets(2));
+      expect(find.text('@$formattedDate'), findsNWidgets(2));
+
+      // update selection and cut
+      await tester.editor.updateSelection(
+        Selection(
+          start: Position(path: [0], offset: 1),
+          end: Position(path: [0], offset: 2),
+        ),
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyX,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(MentionDateBlock), findsOneWidget);
+      expect(find.text('@$formattedDate'), findsOneWidget);
+
+      // update selection and paste
+      await tester.editor.updateSelection(
+        Selection.collapsed(Position(path: [0], offset: 1)),
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(MentionDateBlock), findsNWidgets(2));
+      expect(find.text('@$formattedDate'), findsNWidgets(2));
+    });
+
+    testWidgets("copy, cut and paste a reminder mention", (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(
+        name: 'copy, cut and paste a reminder mention',
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName(
+        LocaleKeys.document_slashMenu_name_dateOrReminder.tr(),
+      );
+
+      // trigger popup
+      await tester.tapButton(find.byType(MentionDateBlock));
+      await tester.pumpAndSettle();
+
+      // set date to be fifteenth of the next month
+      await tester.tap(
+        find.descendant(
+          of: find.byType(DesktopAppFlowyDatePicker),
+          matching: find.byFlowySvg(FlowySvgs.arrow_right_s),
+        ),
+      );
+      await tester.pumpAndSettle();
+      await tester.tap(
+        find.descendant(
+          of: find.byType(TableCalendar),
+          matching: find.text(15.toString()),
+        ),
+      );
+      await tester.pumpAndSettle();
+      await tester.simulateKeyEvent(LogicalKeyboardKey.escape);
+      await tester.pumpAndSettle();
+
+      // add a reminder
+      await tester.tap(find.byType(MentionDateBlock));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text(LocaleKeys.datePicker_reminderLabel.tr()));
+      await tester.pumpAndSettle();
+      await tester.tap(
+        find.textContaining(
+          LocaleKeys.datePicker_reminderOptions_oneDayBefore.tr(),
+        ),
+      );
+      await tester.pumpAndSettle();
+      await tester.simulateKeyEvent(LogicalKeyboardKey.escape);
+      await tester.pumpAndSettle();
+
+      // verify
+      final dateTimeSettings = DateTimeSettingsPB(
+        dateFormat: UserDateFormatPB.Friendly,
+        timeFormat: UserTimeFormatPB.TwentyFourHour,
+      );
+      final now = DateTime.now();
+      final fifteenthOfNextMonth = DateTime(now.year, now.month + 1, 15);
+      final formattedDate =
+          dateTimeSettings.dateFormat.formatDate(fifteenthOfNextMonth, false);
+
+      expect(find.byType(MentionDateBlock), findsOneWidget);
+      expect(find.text('@$formattedDate'), findsOneWidget);
+      expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsOneWidget);
+      expect(getIt<ReminderBloc>().state.reminders.map((e) => e.id).length, 1);
+
+      // update selection and copy
+      await tester.editor.updateSelection(
+        Selection(
+          start: Position(path: [0]),
+          end: Position(path: [0], offset: 1),
+        ),
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyC,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      // update selection and paste
+      await tester.editor.updateSelection(
+        Selection.collapsed(Position(path: [0], offset: 1)),
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(MentionDateBlock), findsNWidgets(2));
+      expect(find.text('@$formattedDate'), findsNWidgets(2));
+      expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsNWidgets(2));
+      expect(
+        getIt<ReminderBloc>().state.reminders.map((e) => e.id).toSet().length,
+        2,
+      );
+
+      // update selection and cut
+      await tester.editor.updateSelection(
+        Selection(
+          start: Position(path: [0], offset: 1),
+          end: Position(path: [0], offset: 2),
+        ),
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyX,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(MentionDateBlock), findsOneWidget);
+      expect(find.text('@$formattedDate'), findsOneWidget);
+      expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsOneWidget);
+      expect(getIt<ReminderBloc>().state.reminders.map((e) => e.id).length, 1);
+
+      // update selection and paste
+      await tester.editor.updateSelection(
+        Selection.collapsed(Position(path: [0], offset: 1)),
+      );
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyV,
+        isControlPressed: Platform.isLinux || Platform.isWindows,
+        isMetaPressed: Platform.isMacOS,
+      );
+      await tester.pumpAndSettle();
+
+      expect(find.byType(MentionDateBlock), findsNWidgets(2));
+      expect(find.text('@$formattedDate'), findsNWidgets(2));
+      expect(find.byType(MentionDateBlock), findsNWidgets(2));
+      expect(find.text('@$formattedDate'), findsNWidgets(2));
+      expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsNWidgets(2));
+      expect(
+        getIt<ReminderBloc>().state.reminders.map((e) => e.id).toSet().length,
+        2,
+      );
+    });
+
+    testWidgets("delete, undo and redo a reminder mention", (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(
+        name: 'delete, undo and redo a reminder mention',
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName(
+        LocaleKeys.document_slashMenu_name_dateOrReminder.tr(),
+      );
+
+      // trigger popup
+      await tester.tapButton(find.byType(MentionDateBlock));
+      await tester.pumpAndSettle();
+
+      // set date to be fifteenth of the next month
+      await tester.tap(
+        find.descendant(
+          of: find.byType(DesktopAppFlowyDatePicker),
+          matching: find.byFlowySvg(FlowySvgs.arrow_right_s),
+        ),
+      );
+      await tester.pumpAndSettle();
+      await tester.tap(
+        find.descendant(
+          of: find.byType(TableCalendar),
+          matching: find.text(15.toString()),
+        ),
+      );
+      await tester.pumpAndSettle();
+      await tester.simulateKeyEvent(LogicalKeyboardKey.escape);
+      await tester.pumpAndSettle();
+
+      // add a reminder
+      await tester.tap(find.byType(MentionDateBlock));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text(LocaleKeys.datePicker_reminderLabel.tr()));
+      await tester.pumpAndSettle();
+      await tester.tap(
+        find.textContaining(
+          LocaleKeys.datePicker_reminderOptions_oneDayBefore.tr(),
+        ),
+      );
+      await tester.pumpAndSettle();
+      await tester.simulateKeyEvent(LogicalKeyboardKey.escape);
+      await tester.pumpAndSettle();
+
+      // verify
+      final dateTimeSettings = DateTimeSettingsPB(
+        dateFormat: UserDateFormatPB.Friendly,
+        timeFormat: UserTimeFormatPB.TwentyFourHour,
+      );
+      final now = DateTime.now();
+      final fifteenthOfNextMonth = DateTime(now.year, now.month + 1, 15);
+      final formattedDate =
+          dateTimeSettings.dateFormat.formatDate(fifteenthOfNextMonth, false);
+
+      expect(find.byType(MentionDateBlock), findsOneWidget);
+      expect(find.text('@$formattedDate'), findsOneWidget);
+      expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsOneWidget);
+      expect(getIt<ReminderBloc>().state.reminders.map((e) => e.id).length, 1);
+
+      // update selection and backspace to delete the mention
+      await tester.editor.updateSelection(
+        Selection.collapsed(Position(path: [0], offset: 1)),
+      );
+      await tester.simulateKeyEvent(LogicalKeyboardKey.backspace);
+      await tester.pumpAndSettle();
+
+      expect(find.byType(MentionDateBlock), findsNothing);
+      expect(find.text('@$formattedDate'), findsNothing);
+      expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsNothing);
+      expect(getIt<ReminderBloc>().state.reminders.isEmpty, isTrue);
+
+      // undo
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isControlPressed: Platform.isWindows || Platform.isLinux,
+        isMetaPressed: Platform.isMacOS,
+      );
+
+      expect(find.byType(MentionDateBlock), findsOneWidget);
+      expect(find.text('@$formattedDate'), findsOneWidget);
+      expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsOneWidget);
+      expect(getIt<ReminderBloc>().state.reminders.map((e) => e.id).length, 1);
+
+      // redo
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyZ,
+        isControlPressed: Platform.isWindows || Platform.isLinux,
+        isMetaPressed: Platform.isMacOS,
+        isShiftPressed: true,
+      );
+
+      expect(find.byType(MentionDateBlock), findsNothing);
+      expect(find.text('@$formattedDate'), findsNothing);
+      expect(find.byFlowySvg(FlowySvgs.reminder_clock_s), findsNothing);
+      expect(getIt<ReminderBloc>().state.reminders.isEmpty, isTrue);
+    });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/document/document_with_image_block_test.dart

@@ -24,14 +24,6 @@ import 'package:run_with_network_images/run_with_network_images.dart';
 import '../../shared/mock/mock_file_picker.dart';
 import '../../shared/util.dart';
 
-const _testImageUrls = [
-  'https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=david-marcu-78A265wPiO4-unsplash.jpg&w=640',
-  'https://mathiasbynens.be/demo/animated-webp-supported.webp',
-  'https://www.easygifanimator.net/images/samples/eglite.gif',
-  'https://people.math.sc.edu/Burkardt/data/bmp/snail.bmp',
-  'https://file-examples.com/storage/fe9566cb7d67345489a5a97/2017/10/file_example_JPG_100kB.jpg',
-];
-
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
   TestWidgetsFlutterBinding.ensureInitialized();
@@ -139,11 +131,12 @@ void main() {
       file.deleteSync();
     });
 
-    for (final url in _testImageUrls) {
-      testWidgets('insert an image from network: $url', (tester) async {
-        await testEmbedImage(tester, url);
-      });
-    }
+    testWidgets('insert a gif image from network', (tester) async {
+      await testEmbedImage(
+        tester,
+        'https://www.easygifanimator.net/images/samples/sparkles.gif',
+      );
+    });
 
     testWidgets('insert an image from unsplash', (tester) async {
       await runWithNetworkImages(() async {

frontend/appflowy_flutter/integration_test/desktop/document/document_with_inline_math_equation_test.dart

@@ -113,5 +113,55 @@ void main() {
 
       tester.expectToSeeText(formula);
     });
+
+    testWidgets('insert a inline math equation and type something after it',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      // create a new document
+      await tester.createNewPageWithNameUnderParent(
+        name: 'math equation',
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      // insert a inline page
+      const formula = 'E = MC ^ 2';
+      await tester.ime.insertText(formula);
+      await tester.editor.updateSelection(
+        Selection.single(path: [0], startOffset: 0, endOffset: formula.length),
+      );
+
+      // tap the inline math equation button
+      final inlineMathEquationButton = find.findFlowyTooltip(
+        LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+      );
+      await tester.tapButton(inlineMathEquationButton);
+
+      // expect to see the math equation block
+      final inlineMathEquation = find.byType(InlineMathEquation);
+      expect(inlineMathEquation, findsOneWidget);
+
+      await tester.editor.tapLineOfEditorAt(0);
+      const text = 'Hello World';
+      await tester.ime.insertText(text);
+
+      final inlineText = find.textContaining(text, findRichText: true);
+      expect(inlineText, findsOneWidget);
+
+      // the text should be in the same line with the math equation
+      final inlineMathEquationPosition = tester.getRect(inlineMathEquation);
+      final textPosition = tester.getRect(inlineText);
+      // allow 5px difference
+      expect(
+        (textPosition.top - inlineMathEquationPosition.top).abs(),
+        lessThan(5),
+      );
+      expect(
+        (textPosition.bottom - inlineMathEquationPosition.bottom).abs(),
+        lessThan(5),
+      );
+    });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/document/document_with_inline_page_test.dart

@@ -94,6 +94,20 @@ void main() {
       await tester.tapButton(finder);
       expect(find.byType(GridPage), findsOneWidget);
     });
+
+    testWidgets('insert a inline page and type something after the page',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await insertInlinePage(tester, ViewLayoutPB.Grid);
+
+      await tester.editor.tapLineOfEditorAt(0);
+      const text = 'Hello World';
+      await tester.ime.insertText(text);
+
+      expect(find.textContaining(text, findRichText: true), findsOneWidget);
+    });
   });
 }
 

frontend/appflowy_flutter/integration_test/desktop/document/document_with_multi_image_block_test.dart

@@ -48,7 +48,7 @@ void main() {
       await tester.editor.showSlashMenu();
       await tester.editor.tapSlashMenuItemWithName(
         LocaleKeys.document_slashMenu_name_photoGallery.tr(),
-        offset: 100,
+        offset: 80,
       );
       expect(find.byType(MultiImageBlockComponent), findsOneWidget);
       expect(find.byType(MultiImagePlaceholder), findsOneWidget);
@@ -146,7 +146,7 @@ void main() {
       await tester.editor.showSlashMenu();
       await tester.editor.tapSlashMenuItemWithName(
         LocaleKeys.document_slashMenu_name_photoGallery.tr(),
-        offset: 100,
+        offset: 80,
       );
       expect(find.byType(MultiImageBlockComponent), findsOneWidget);
       expect(find.byType(MultiImagePlaceholder), findsOneWidget);

frontend/appflowy_flutter/integration_test/desktop/document/document_with_simple_table_test.dart

@@ -0,0 +1,783 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:universal_platform/universal_platform.dart';
+
+import '../../shared/util.dart';
+
+const String heading1 = "Heading 1";
+const String heading2 = "Heading 2";
+const String heading3 = "Heading 3";
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('simple table block test:', () {
+    testWidgets('insert a simple table block', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(
+        name: 'simple_table_test',
+      );
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.insertTableInDocument();
+
+      // validate the table is inserted
+      expect(find.byType(SimpleTableBlockWidget), findsOneWidget);
+
+      final editorState = tester.editor.getCurrentEditorState();
+      expect(
+        editorState.selection,
+        // table -> row -> cell -> paragraph
+        Selection.collapsed(Position(path: [0, 0, 0, 0])),
+      );
+
+      final firstCell = find.byType(SimpleTableCellBlockWidget).first;
+      expect(
+        tester
+            .state<SimpleTableCellBlockWidgetState>(firstCell)
+            .isEditingCellNotifier
+            .value,
+        isTrue,
+      );
+    });
+
+    testWidgets('select all in table cell', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(
+        name: 'simple_table_test',
+      );
+
+      const cell1Content = 'Cell 1';
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.ime.insertText('New Table');
+      await tester.simulateKeyEvent(LogicalKeyboardKey.enter);
+      await tester.pumpAndSettle();
+      await tester.editor.tapLineOfEditorAt(1);
+      await tester.insertTableInDocument();
+      await tester.ime.insertText(cell1Content);
+      await tester.pumpAndSettle();
+      // Select all in the cell
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyA,
+        isControlPressed: !UniversalPlatform.isMacOS,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+
+      expect(
+        tester.editor.getCurrentEditorState().selection,
+        Selection(
+          start: Position(path: [1, 0, 0, 0]),
+          end: Position(path: [1, 0, 0, 0], offset: cell1Content.length),
+        ),
+      );
+
+      // Press select all again, the selection should be the entire document
+      await tester.simulateKeyEvent(
+        LogicalKeyboardKey.keyA,
+        isControlPressed: !UniversalPlatform.isMacOS,
+        isMetaPressed: UniversalPlatform.isMacOS,
+      );
+
+      expect(
+        tester.editor.getCurrentEditorState().selection,
+        Selection(
+          start: Position(path: [0]),
+          end: Position(path: [1, 1, 1, 0]),
+        ),
+      );
+    });
+
+    testWidgets('''
+1. hover on the table
+  1.1 click the add row button
+  1.2 click the add column button
+  1.3 click the add row and column button
+2. validate the table is updated
+3. delete the last column
+4. delete the last row
+5. validate the table is updated
+''', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(
+        name: 'simple_table_test',
+      );
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.insertTableInDocument();
+
+      // add a new row
+      final row = find.byWidgetPredicate((w) {
+        return w is SimpleTableRowBlockWidget && w.node.rowIndex == 1;
+      });
+      await tester.hoverOnWidget(
+        row,
+        onHover: () async {
+          final addRowButton = find.byType(SimpleTableAddRowButton).first;
+          await tester.tap(addRowButton);
+        },
+      );
+      await tester.pumpAndSettle();
+
+      // add a new column
+      final column = find.byWidgetPredicate((w) {
+        return w is SimpleTableCellBlockWidget && w.node.columnIndex == 1;
+      }).first;
+      await tester.hoverOnWidget(
+        column,
+        onHover: () async {
+          final addColumnButton = find.byType(SimpleTableAddColumnButton).first;
+          await tester.tap(addColumnButton);
+        },
+      );
+      await tester.pumpAndSettle();
+
+      // add a new row and a new column
+      final row2 = find.byWidgetPredicate((w) {
+        return w is SimpleTableCellBlockWidget &&
+            w.node.rowIndex == 2 &&
+            w.node.columnIndex == 2;
+      }).first;
+      await tester.hoverOnWidget(
+        row2,
+        onHover: () async {
+          // click the add row and column button
+          final addRowAndColumnButton =
+              find.byType(SimpleTableAddColumnAndRowButton).first;
+          await tester.tap(addRowAndColumnButton);
+        },
+      );
+      await tester.pumpAndSettle();
+
+      final tableNode =
+          tester.editor.getCurrentEditorState().document.nodeAtPath([0])!;
+      expect(tableNode.columnLength, 4);
+      expect(tableNode.rowLength, 4);
+
+      // delete the last row
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.row,
+        index: tableNode.rowLength - 1,
+        action: SimpleTableMoreAction.delete,
+      );
+      await tester.pumpAndSettle();
+      expect(tableNode.rowLength, 3);
+      expect(tableNode.columnLength, 4);
+
+      // delete the last column
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.column,
+        index: tableNode.columnLength - 1,
+        action: SimpleTableMoreAction.delete,
+      );
+      await tester.pumpAndSettle();
+
+      expect(tableNode.columnLength, 3);
+      expect(tableNode.rowLength, 3);
+    });
+
+    testWidgets('enable header column and header row', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(
+        name: 'simple_table_test',
+      );
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.insertTableInDocument();
+
+      // enable the header row
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.row,
+        index: 0,
+        action: SimpleTableMoreAction.enableHeaderRow,
+      );
+      await tester.pumpAndSettle();
+      // enable the header column
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.column,
+        index: 0,
+        action: SimpleTableMoreAction.enableHeaderColumn,
+      );
+      await tester.pumpAndSettle();
+
+      final tableNode =
+          tester.editor.getCurrentEditorState().document.nodeAtPath([0])!;
+
+      expect(tableNode.isHeaderColumnEnabled, isTrue);
+      expect(tableNode.isHeaderRowEnabled, isTrue);
+
+      // disable the header row
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.row,
+        index: 0,
+        action: SimpleTableMoreAction.enableHeaderRow,
+      );
+      await tester.pumpAndSettle();
+      expect(tableNode.isHeaderColumnEnabled, isTrue);
+      expect(tableNode.isHeaderRowEnabled, isFalse);
+
+      // disable the header column
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.column,
+        index: 0,
+        action: SimpleTableMoreAction.enableHeaderColumn,
+      );
+      await tester.pumpAndSettle();
+      expect(tableNode.isHeaderColumnEnabled, isFalse);
+      expect(tableNode.isHeaderRowEnabled, isFalse);
+    });
+
+    testWidgets('duplicate a column / row', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(
+        name: 'simple_table_test',
+      );
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.insertTableInDocument();
+
+      // duplicate the row
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.row,
+        index: 0,
+        action: SimpleTableMoreAction.duplicate,
+      );
+      await tester.pumpAndSettle();
+
+      // duplicate the column
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.column,
+        index: 0,
+        action: SimpleTableMoreAction.duplicate,
+      );
+      await tester.pumpAndSettle();
+
+      final tableNode =
+          tester.editor.getCurrentEditorState().document.nodeAtPath([0])!;
+      expect(tableNode.columnLength, 3);
+      expect(tableNode.rowLength, 3);
+    });
+
+    testWidgets('insert left / insert right', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(
+        name: 'simple_table_test',
+      );
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.insertTableInDocument();
+
+      // insert left
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.column,
+        index: 0,
+        action: SimpleTableMoreAction.insertLeft,
+      );
+      await tester.pumpAndSettle();
+
+      // insert right
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.column,
+        index: 0,
+        action: SimpleTableMoreAction.insertRight,
+      );
+      await tester.pumpAndSettle();
+
+      final tableNode =
+          tester.editor.getCurrentEditorState().document.nodeAtPath([0])!;
+      expect(tableNode.columnLength, 4);
+      expect(tableNode.rowLength, 2);
+    });
+
+    testWidgets('insert above / insert below', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+      await tester.createNewPageWithNameUnderParent(
+        name: 'simple_table_test',
+      );
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.insertTableInDocument();
+
+      // insert above
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.row,
+        index: 0,
+        action: SimpleTableMoreAction.insertAbove,
+      );
+      await tester.pumpAndSettle();
+
+      // insert below
+      await tester.clickMoreActionItemInTableMenu(
+        type: SimpleTableMoreActionType.row,
+        index: 0,
+        action: SimpleTableMoreAction.insertBelow,
+      );
+      await tester.pumpAndSettle();
+
+      final tableNode =
+          tester.editor.getCurrentEditorState().document.nodeAtPath([0])!;
+      expect(tableNode.rowLength, 4);
+      expect(tableNode.columnLength, 2);
+    });
+  });
+
+  testWidgets('set column width to page width (1)', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+
+    final tableNode = tester.editor.getNodeAtPath([0]);
+    final beforeWidth = tableNode.width;
+
+    // set the column width to page width
+    await tester.clickMoreActionItemInTableMenu(
+      type: SimpleTableMoreActionType.column,
+      index: 0,
+      action: SimpleTableMoreAction.setToPageWidth,
+    );
+    await tester.pumpAndSettle();
+
+    final afterWidth = tableNode.width;
+    expect(afterWidth, greaterThan(beforeWidth));
+  });
+
+  testWidgets('set column width to page width (2)', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+
+    final tableNode = tester.editor.getNodeAtPath([0]);
+    final beforeWidth = tableNode.width;
+
+    // set the column width to page width
+    await tester.clickMoreActionItemInTableMenu(
+      type: SimpleTableMoreActionType.row,
+      index: 0,
+      action: SimpleTableMoreAction.setToPageWidth,
+    );
+    await tester.pumpAndSettle();
+
+    final afterWidth = tableNode.width;
+    expect(afterWidth, greaterThan(beforeWidth));
+  });
+
+  testWidgets('distribute columns evenly (1)', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+
+    final tableNode = tester.editor.getNodeAtPath([0]);
+    final beforeWidth = tableNode.width;
+
+    // set the column width to page width
+    await tester.clickMoreActionItemInTableMenu(
+      type: SimpleTableMoreActionType.row,
+      index: 0,
+      action: SimpleTableMoreAction.distributeColumnsEvenly,
+    );
+    await tester.pumpAndSettle();
+
+    final afterWidth = tableNode.width;
+    expect(afterWidth, equals(beforeWidth));
+
+    final distributeColumnWidthsEvenly =
+        tableNode.attributes[SimpleTableBlockKeys.distributeColumnWidthsEvenly];
+    expect(distributeColumnWidthsEvenly, isTrue);
+  });
+
+  testWidgets('distribute columns evenly (2)', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+
+    final tableNode = tester.editor.getNodeAtPath([0]);
+    final beforeWidth = tableNode.width;
+
+    // set the column width to page width
+    await tester.clickMoreActionItemInTableMenu(
+      type: SimpleTableMoreActionType.column,
+      index: 0,
+      action: SimpleTableMoreAction.distributeColumnsEvenly,
+    );
+    await tester.pumpAndSettle();
+
+    final afterWidth = tableNode.width;
+    expect(afterWidth, equals(beforeWidth));
+
+    final distributeColumnWidthsEvenly =
+        tableNode.attributes[SimpleTableBlockKeys.distributeColumnWidthsEvenly];
+    expect(distributeColumnWidthsEvenly, isTrue);
+  });
+
+  testWidgets('using option menu to set column width', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+    await tester.editor.hoverAndClickOptionMenuButton([0]);
+
+    final editorState = tester.editor.getCurrentEditorState();
+    final beforeWidth = editorState.document.nodeAtPath([0])!.width;
+
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_simpleTable_moreActions_setToPageWidth.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final afterWidth = editorState.document.nodeAtPath([0])!.width;
+    expect(afterWidth, greaterThan(beforeWidth));
+
+    await tester.editor.hoverAndClickOptionMenuButton([0]);
+    await tester.tapButton(
+      find.text(
+        LocaleKeys
+            .document_plugins_simpleTable_moreActions_distributeColumnsWidth
+            .tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final afterWidth2 = editorState.document.nodeAtPath([0])!.width;
+    expect(afterWidth2, equals(afterWidth));
+  });
+
+  testWidgets('insert a table and use select all the delete it',
+      (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+
+    await tester.editor.tapLineOfEditorAt(1);
+    await tester.ime.insertText('Hello World');
+
+    // select all
+    await tester.simulateKeyEvent(
+      LogicalKeyboardKey.keyA,
+      isMetaPressed: UniversalPlatform.isMacOS,
+      isControlPressed: !UniversalPlatform.isMacOS,
+    );
+
+    await tester.simulateKeyEvent(LogicalKeyboardKey.backspace);
+    await tester.pumpAndSettle();
+
+    final editorState = tester.editor.getCurrentEditorState();
+    // only one paragraph left
+    expect(editorState.document.root.children.length, 1);
+    final paragraphNode = editorState.document.nodeAtPath([0])!;
+    expect(paragraphNode.delta, isNull);
+  });
+
+  testWidgets('use tab or shift+tab to navigate in table', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+
+    await tester.simulateKeyEvent(LogicalKeyboardKey.tab);
+    await tester.pumpAndSettle();
+
+    final editorState = tester.editor.getCurrentEditorState();
+    final selection = editorState.selection;
+    expect(selection, isNotNull);
+    expect(selection!.start.path, [0, 0, 1, 0]);
+    expect(selection.end.path, [0, 0, 1, 0]);
+
+    await tester.simulateKeyEvent(
+      LogicalKeyboardKey.tab,
+      isShiftPressed: true,
+    );
+    await tester.pumpAndSettle();
+
+    final selection2 = editorState.selection;
+    expect(selection2, isNotNull);
+    expect(selection2!.start.path, [0, 0, 0, 0]);
+    expect(selection2.end.path, [0, 0, 0, 0]);
+  });
+
+  testWidgets('shift+enter to insert a new line in table', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+
+    await tester.simulateKeyEvent(
+      LogicalKeyboardKey.enter,
+      isShiftPressed: true,
+    );
+    await tester.pumpAndSettle();
+
+    final editorState = tester.editor.getCurrentEditorState();
+    final node = editorState.document.nodeAtPath([0, 0, 0])!;
+    expect(node.children.length, 1);
+  });
+
+  testWidgets('using option menu to set table align', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+    await tester.editor.hoverAndClickOptionMenuButton([0]);
+
+    final editorState = tester.editor.getCurrentEditorState();
+    final beforeAlign = editorState.document.nodeAtPath([0])!.tableAlign;
+    expect(beforeAlign, TableAlign.left);
+
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_simpleTable_moreActions_align.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_optionAction_center.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final afterAlign = editorState.document.nodeAtPath([0])!.tableAlign;
+    expect(afterAlign, TableAlign.center);
+
+    await tester.editor.hoverAndClickOptionMenuButton([0]);
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_simpleTable_moreActions_align.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_optionAction_right.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final afterAlign2 = editorState.document.nodeAtPath([0])!.tableAlign;
+    expect(afterAlign2, TableAlign.right);
+
+    await tester.editor.hoverAndClickOptionMenuButton([0]);
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_simpleTable_moreActions_align.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_optionAction_left.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final afterAlign3 = editorState.document.nodeAtPath([0])!.tableAlign;
+    expect(afterAlign3, TableAlign.left);
+  });
+
+  testWidgets('using option menu to set table align', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+    await tester.editor.hoverAndClickOptionMenuButton([0]);
+
+    final editorState = tester.editor.getCurrentEditorState();
+    final beforeAlign = editorState.document.nodeAtPath([0])!.tableAlign;
+    expect(beforeAlign, TableAlign.left);
+
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_simpleTable_moreActions_align.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_optionAction_center.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final afterAlign = editorState.document.nodeAtPath([0])!.tableAlign;
+    expect(afterAlign, TableAlign.center);
+
+    await tester.editor.hoverAndClickOptionMenuButton([0]);
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_simpleTable_moreActions_align.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_optionAction_right.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final afterAlign2 = editorState.document.nodeAtPath([0])!.tableAlign;
+    expect(afterAlign2, TableAlign.right);
+
+    await tester.editor.hoverAndClickOptionMenuButton([0]);
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_simpleTable_moreActions_align.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+    await tester.tapButton(
+      find.text(
+        LocaleKeys.document_plugins_optionAction_left.tr(),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    final afterAlign3 = editorState.document.nodeAtPath([0])!.tableAlign;
+    expect(afterAlign3, TableAlign.left);
+  });
+
+  testWidgets('support slash menu in table', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    await tester.createNewPageWithNameUnderParent(
+      name: 'simple_table_test',
+    );
+
+    final editorState = tester.editor.getCurrentEditorState();
+
+    await tester.editor.tapLineOfEditorAt(0);
+    await tester.insertTableInDocument();
+
+    final path = [0, 0, 0, 0];
+    final selection = Selection.collapsed(Position(path: path));
+    editorState.selection = selection;
+    await tester.editor.showSlashMenu();
+    await tester.pumpAndSettle();
+
+    final paragraphItem = find.byWidgetPredicate((w) {
+      return w is SelectionMenuItemWidget &&
+          w.item.name == LocaleKeys.document_slashMenu_name_text.tr();
+    });
+    expect(paragraphItem, findsOneWidget);
+
+    await tester.tap(paragraphItem);
+    await tester.pumpAndSettle();
+
+    final paragraphNode = editorState.document.nodeAtPath(path)!;
+    expect(paragraphNode.type, equals(ParagraphBlockKeys.type));
+  });
+}
+
+extension on WidgetTester {
+  /// Insert a table in the document
+  Future<void> insertTableInDocument() async {
+    // open the actions menu and insert the outline block
+    await editor.showSlashMenu();
+    await editor.tapSlashMenuItemWithName(
+      LocaleKeys.document_slashMenu_name_table.tr(),
+    );
+    await pumpAndSettle();
+  }
+
+  Future<void> clickMoreActionItemInTableMenu({
+    required SimpleTableMoreActionType type,
+    required int index,
+    required SimpleTableMoreAction action,
+  }) async {
+    if (type == SimpleTableMoreActionType.row) {
+      final row = find.byWidgetPredicate((w) {
+        return w is SimpleTableRowBlockWidget && w.node.rowIndex == index;
+      });
+      await hoverOnWidget(
+        row,
+        onHover: () async {
+          final moreActionButton = find.byWidgetPredicate((w) {
+            return w is SimpleTableMoreActionMenu &&
+                w.type == SimpleTableMoreActionType.row &&
+                w.index == index;
+          });
+          await tapButton(moreActionButton);
+          await tapButton(find.text(action.name));
+        },
+      );
+      await pumpAndSettle();
+    } else if (type == SimpleTableMoreActionType.column) {
+      final column = find.byWidgetPredicate((w) {
+        return w is SimpleTableCellBlockWidget && w.node.columnIndex == index;
+      }).first;
+      await hoverOnWidget(
+        column,
+        onHover: () async {
+          final moreActionButton = find.byWidgetPredicate((w) {
+            return w is SimpleTableMoreActionMenu &&
+                w.type == SimpleTableMoreActionType.column &&
+                w.index == index;
+          });
+          await tapButton(moreActionButton);
+          await tapButton(find.text(action.name));
+        },
+      );
+      await pumpAndSettle();
+    }
+
+    await tapAt(Offset.zero);
+  }
+}

frontend/appflowy_flutter/integration_test/desktop/document/document_with_toggle_list_test.dart

@@ -1,7 +1,9 @@
 import 'dart:io';
 
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -263,5 +265,24 @@ void main() {
       expect(node.attributes[ToggleListBlockKeys.level], 3);
       expect(node.delta!.toPlainText(), 'Hello');
     });
+
+    testWidgets('click the toggle list to create a new paragraph',
+        (tester) async {
+      await prepareToggleHeadingBlock(tester, '> # Hello');
+      final emptyHintText = find.text(
+        LocaleKeys.document_plugins_emptyToggleHeading.tr(
+          args: ['1'],
+        ),
+      );
+      expect(emptyHintText, findsOneWidget);
+
+      await tester.tapButton(emptyHintText);
+      await tester.pumpAndSettle();
+
+      // check the new paragraph is created
+      final editorState = tester.editor.getCurrentEditorState();
+      final node = editorState.getNodeAtPath([0, 0])!;
+      expect(node.type, ParagraphBlockKeys.type);
+    });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/settings/sign_in_page_settings_test.dart

@@ -82,7 +82,7 @@ void main() {
       // reset to appflowy cloud
       await tester.tapButton(
         findServerType(AuthenticatorType.appflowyCloudSelfHost),
-      );    
+      );
       // change the server type to appflowy cloud
       await tester.tapButton(
         findServerType(AuthenticatorType.appflowyCloud),

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_icon_test.dart

@@ -1,83 +1,229 @@
+import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_icon_popup.dart';
+import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:flowy_infra_ui/style_widget/text_field.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
 import '../../shared/base.dart';
 import '../../shared/common_operations.dart';
+import '../../shared/emoji.dart';
 import '../../shared/expectation.dart';
 
 void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  final emoji = EmojiIconData.emoji('😁');
 
-  const emoji = '😁';
+  setUpAll(() {
+    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+    RecentIcons.enable = false;
+  });
 
-  group('Icon:', () {
-    testWidgets('Update page icon in sidebar', (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapAnonymousSignInButton();
+  tearDownAll(() {
+    RecentIcons.enable = true;
+  });
 
-      // create document, board, grid and calendar views
-      for (final value in ViewLayoutPB.values) {
-        if (value == ViewLayoutPB.Chat) {
-          continue;
-        }
-        await tester.createNewPageWithNameUnderParent(
-          name: value.name,
-          parentName: gettingStarted,
-          layout: value,
-        );
+  Future<EmojiIconData> loadIcon() async {
+    await loadIconGroups();
+    final groups = kIconGroups!;
+    final firstGroup = groups.first;
+    final firstIcon = firstGroup.icons.first;
+    return EmojiIconData.icon(
+      IconsData(
+        firstGroup.name,
+        firstIcon.content,
+        firstIcon.name,
+        builtInSpaceColors.first,
+      ),
+    );
+  }
 
-        // update its icon
-        await tester.updatePageIconInSidebarByName(
-          name: value.name,
-          parentName: gettingStarted,
-          layout: value,
-          icon: emoji,
-        );
+  testWidgets('Update page emoji in sidebar', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
 
-        tester.expectViewHasIcon(
-          value.name,
-          value,
-          emoji,
-        );
+    // create document, board, grid and calendar views
+    for (final value in ViewLayoutPB.values) {
+      if (value == ViewLayoutPB.Chat) {
+        continue;
       }
-    });
+      await tester.createNewPageWithNameUnderParent(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+      );
 
-    testWidgets('Update page icon in title bar', (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapAnonymousSignInButton();
+      // update its emoji
+      await tester.updatePageIconInSidebarByName(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+        icon: emoji,
+      );
 
-      // create document, board, grid and calendar views
-      for (final value in ViewLayoutPB.values) {
-        if (value == ViewLayoutPB.Chat) {
-          continue;
-        }
+      tester.expectViewHasIcon(
+        value.name,
+        value,
+        emoji,
+      );
+    }
+  });
 
-        await tester.createNewPageWithNameUnderParent(
-          name: value.name,
-          parentName: gettingStarted,
-          layout: value,
-        );
+  testWidgets('Update page emoji in title bar', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
 
-        // update its icon
-        await tester.updatePageIconInTitleBarByName(
-          name: value.name,
-          layout: value,
-          icon: emoji,
-        );
-
-        tester.expectViewHasIcon(
-          value.name,
-          value,
-          emoji,
-        );
-
-        tester.expectViewTitleHasIcon(
-          value.name,
-          value,
-          emoji,
-        );
+    // create document, board, grid and calendar views
+    for (final value in ViewLayoutPB.values) {
+      if (value == ViewLayoutPB.Chat) {
+        continue;
       }
-    });
+
+      await tester.createNewPageWithNameUnderParent(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+      );
+
+      // update its emoji
+      await tester.updatePageIconInTitleBarByName(
+        name: value.name,
+        layout: value,
+        icon: emoji,
+      );
+
+      tester.expectViewHasIcon(
+        value.name,
+        value,
+        emoji,
+      );
+
+      tester.expectViewTitleHasIcon(
+        value.name,
+        value,
+        emoji,
+      );
+    }
+  });
+
+  testWidgets('Emoji Search Bar Get Focus', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+
+    // create document, board, grid and calendar views
+    for (final value in ViewLayoutPB.values) {
+      if (value == ViewLayoutPB.Chat) {
+        continue;
+      }
+
+      await tester.createNewPageWithNameUnderParent(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+      );
+
+      await tester.openPage(
+        value.name,
+        layout: value,
+      );
+      final title = find.descendant(
+        of: find.byType(ViewTitleBar),
+        matching: find.text(value.name),
+      );
+      await tester.tapButton(title);
+      await tester.tapButton(find.byType(EmojiPickerButton));
+
+      final emojiPicker = find.byType(FlowyEmojiPicker);
+      expect(emojiPicker, findsOneWidget);
+      final textField = find.descendant(
+        of: emojiPicker,
+        matching: find.byType(FlowyTextField),
+      );
+      expect(textField, findsOneWidget);
+      final textFieldWidget =
+          textField.evaluate().first.widget as FlowyTextField;
+      assert(textFieldWidget.focusNode!.hasFocus);
+      await tester.tapEmoji(emoji.emoji);
+      await tester.pumpAndSettle();
+      tester.expectViewHasIcon(
+        value.name,
+        value,
+        emoji,
+      );
+    }
+  });
+
+  testWidgets('Update page icon in sidebar', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    final iconData = await loadIcon();
+
+    // create document, board, grid and calendar views
+    for (final value in ViewLayoutPB.values) {
+      if (value == ViewLayoutPB.Chat) {
+        continue;
+      }
+      await tester.createNewPageWithNameUnderParent(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+      );
+
+      // update its icon
+      await tester.updatePageIconInSidebarByName(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+        icon: iconData,
+      );
+
+      tester.expectViewHasIcon(
+        value.name,
+        value,
+        iconData,
+      );
+    }
+  });
+
+  testWidgets('Update page icon in title bar', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+    final iconData = await loadIcon();
+
+    // create document, board, grid and calendar views
+    for (final value in ViewLayoutPB.values) {
+      if (value == ViewLayoutPB.Chat) {
+        continue;
+      }
+
+      await tester.createNewPageWithNameUnderParent(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+      );
+
+      // update its icon
+      await tester.updatePageIconInTitleBarByName(
+        name: value.name,
+        layout: value,
+        icon: iconData,
+      );
+
+      tester.expectViewHasIcon(
+        value.name,
+        value,
+        iconData,
+      );
+
+      tester.expectViewTitleHasIcon(
+        value.name,
+        value,
+        iconData,
+      );
+    }
   });
 }

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_view_item_test.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -38,7 +39,11 @@ void main() {
       await tester.tapEmoji(emoji);
       await tester.pumpAndSettle();
 
-      tester.expectViewHasIcon(gettingStarted, ViewLayoutPB.Document, emoji);
+      tester.expectViewHasIcon(
+        gettingStarted,
+        ViewLayoutPB.Document,
+        EmojiIconData.emoji(emoji),
+      );
     });
   });
 }

frontend/appflowy_flutter/integration_test/desktop/uncategorized/code_block_language_selector_test.dart

@@ -0,0 +1,91 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/code_block/code_block_language_selector.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/base.dart';
+import '../../shared/common_operations.dart';
+import '../../shared/document_test_operations.dart';
+import '../document/document_codeblock_paste_test.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  testWidgets('Code Block Language Selector Test', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+
+    /// create a new document
+    await tester.createNewPageWithNameUnderParent();
+
+    /// tap editor to get focus
+    await tester.tapButton(find.byType(AppFlowyEditor));
+
+    expect(find.byType(CodeBlockLanguageSelector), findsNothing);
+    await insertCodeBlockInDocument(tester);
+
+    ///tap button
+    await tester.hoverOnWidget(find.byType(CodeBlockComponentWidget));
+    await tester
+        .tapButtonWithName(LocaleKeys.document_codeBlock_language_auto.tr());
+    expect(find.byType(CodeBlockLanguageSelector), findsOneWidget);
+
+    for (var i = 0; i < 3; ++i) {
+      await onKey(tester, LogicalKeyboardKey.arrowDown);
+    }
+    for (var i = 0; i < 2; ++i) {
+      await onKey(tester, LogicalKeyboardKey.arrowUp);
+    }
+
+    await onKey(tester, LogicalKeyboardKey.enter);
+
+    final editorState = tester.editor.getCurrentEditorState();
+    String language = editorState
+        .getNodeAtPath([0])!
+        .attributes[CodeBlockKeys.language]
+        .toString();
+    expect(
+      language.toLowerCase(),
+      defaultCodeBlockSupportedLanguages.first.toLowerCase(),
+    );
+
+    await tester.hoverOnWidget(find.byType(CodeBlockComponentWidget));
+    await tester.tapButtonWithName(language);
+
+    await onKey(tester, LogicalKeyboardKey.arrowUp);
+    await onKey(tester, LogicalKeyboardKey.enter);
+
+    language = editorState
+        .getNodeAtPath([0])!
+        .attributes[CodeBlockKeys.language]
+        .toString();
+    expect(
+      language.toLowerCase(),
+      defaultCodeBlockSupportedLanguages.last.toLowerCase(),
+    );
+
+    await tester.hoverOnWidget(find.byType(CodeBlockComponentWidget));
+    await tester.tapButtonWithName(language);
+    tester.testTextInput.enterText("rust");
+    await onKey(tester, LogicalKeyboardKey.delete);
+    await onKey(tester, LogicalKeyboardKey.delete);
+    await onKey(tester, LogicalKeyboardKey.arrowDown);
+    tester.testTextInput.enterText("st");
+    await onKey(tester, LogicalKeyboardKey.arrowDown);
+    await onKey(tester, LogicalKeyboardKey.enter);
+    language = editorState
+        .getNodeAtPath([0])!
+        .attributes[CodeBlockKeys.language]
+        .toString();
+    expect(language.toLowerCase(), 'rust');
+  });
+}
+
+Future<void> onKey(WidgetTester tester, LogicalKeyboardKey key) async {
+  await tester.simulateKeyEvent(key);
+  await tester.pumpAndSettle();
+}

frontend/appflowy_flutter/integration_test/desktop/uncategorized/import_files_test.dart

@@ -1,5 +1,6 @@
 import 'dart:io';
 
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -87,7 +88,7 @@ void main() {
       );
       expect(
         importedPageEditorState.getNodeAtPath([2])!.type,
-        TableBlockKeys.type,
+        SimpleTableBlockKeys.type,
       );
     });
   });

frontend/appflowy_flutter/integration_test/desktop/uncategorized/tabs_test.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/workspace/presentation/home/tabs/flowy_tab.dart';
 import 'package:appflowy/workspace/presentation/home/tabs/tabs_manager.dart';
+import 'package:appflowy/workspace/presentation/widgets/tab_bar_item.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/gestures.dart';
@@ -145,5 +146,189 @@ void main() {
       //  and in this case view name in sidebar)
       expect(find.text(gettingStarted), findsNWidgets(3));
     });
+
+    testWidgets('cannot close pinned tabs', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      expect(
+        find.descendant(
+          of: find.byType(TabsManager),
+          matching: find.byType(TabBar),
+        ),
+        findsNothing,
+      );
+
+      await tester.createNewPageWithNameUnderParent(name: _documentName);
+      await tester.createNewPageWithNameUnderParent(name: _documentTwoName);
+
+      // Open second menu item in a new tab
+      await tester.openAppInNewTab(gettingStarted, ViewLayoutPB.Document);
+
+      // Open third menu item in a new tab
+      await tester.openAppInNewTab(_documentName, ViewLayoutPB.Document);
+
+      expect(
+        find.descendant(
+          of: find.byType(TabsManager),
+          matching: find.byType(FlowyTab),
+        ),
+        findsNWidgets(3),
+      );
+
+      const firstTab = _documentTwoName;
+      const secondTab = gettingStarted;
+      const thirdTab = _documentName;
+
+      expect(tester.isTabAtIndex(firstTab, 0), isTrue);
+      expect(tester.isTabAtIndex(secondTab, 1), isTrue);
+      expect(tester.isTabAtIndex(thirdTab, 2), isTrue);
+
+      expect(tester.isTabPinned(gettingStarted), isFalse);
+
+      // Right click on second tab
+      await tester.openTabMenu(gettingStarted);
+      expect(find.byType(TabMenu), findsOneWidget);
+
+      // Pin second tab
+      await tester.tap(find.text(LocaleKeys.tabMenu_pinTab.tr()));
+      await tester.pumpAndSettle();
+
+      expect(tester.isTabPinned(gettingStarted), isTrue);
+
+      /// Right click on first unpinned tab (second tab)
+      await tester.openTabMenu(_documentTwoName);
+
+      // Close others
+      await tester.tap(find.text(LocaleKeys.tabMenu_closeOthers.tr()));
+      await tester.pumpAndSettle();
+
+      // We expect to find 2 tabs, the first pinned tab and the second tab
+      expect(find.byType(FlowyTab), findsNWidgets(2));
+      expect(tester.isTabAtIndex(gettingStarted, 0), isTrue);
+      expect(tester.isTabAtIndex(_documentTwoName, 1), isTrue);
+    });
+
+    testWidgets('pin/unpin tabs proper order', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      expect(
+        find.descendant(
+          of: find.byType(TabsManager),
+          matching: find.byType(TabBar),
+        ),
+        findsNothing,
+      );
+
+      await tester.createNewPageWithNameUnderParent(name: _documentName);
+      await tester.createNewPageWithNameUnderParent(name: _documentTwoName);
+
+      // Open second menu item in a new tab
+      await tester.openAppInNewTab(gettingStarted, ViewLayoutPB.Document);
+
+      // Open third menu item in a new tab
+      await tester.openAppInNewTab(_documentName, ViewLayoutPB.Document);
+
+      expect(
+        find.descendant(
+          of: find.byType(TabsManager),
+          matching: find.byType(FlowyTab),
+        ),
+        findsNWidgets(3),
+      );
+
+      const firstTabName = _documentTwoName;
+      const secondTabName = gettingStarted;
+      const thirdTabName = _documentName;
+
+      // Expect correct order
+      expect(tester.isTabAtIndex(firstTabName, 0), isTrue);
+      expect(tester.isTabAtIndex(secondTabName, 1), isTrue);
+      expect(tester.isTabAtIndex(thirdTabName, 2), isTrue);
+
+      // Pin second tab
+      await tester.openTabMenu(secondTabName);
+      await tester.tap(find.text(LocaleKeys.tabMenu_pinTab.tr()));
+      await tester.pumpAndSettle();
+
+      expect(tester.isTabPinned(secondTabName), isTrue);
+
+      // Expect correct order
+      expect(tester.isTabAtIndex(secondTabName, 0), isTrue);
+      expect(tester.isTabAtIndex(firstTabName, 1), isTrue);
+      expect(tester.isTabAtIndex(thirdTabName, 2), isTrue);
+
+      // Pin new second tab (first tab)
+      await tester.openTabMenu(firstTabName);
+      await tester.tap(find.text(LocaleKeys.tabMenu_pinTab.tr()));
+      await tester.pumpAndSettle();
+
+      expect(tester.isTabPinned(firstTabName), isTrue);
+      expect(tester.isTabPinned(secondTabName), isTrue);
+      expect(tester.isTabPinned(thirdTabName), isFalse);
+
+      expect(tester.isTabAtIndex(secondTabName, 0), isTrue);
+      expect(tester.isTabAtIndex(firstTabName, 1), isTrue);
+      expect(tester.isTabAtIndex(thirdTabName, 2), isTrue);
+
+      // Unpin second tab
+      await tester.openTabMenu(secondTabName);
+      await tester.tap(find.text(LocaleKeys.tabMenu_unpinTab.tr()));
+      await tester.pumpAndSettle();
+
+      expect(tester.isTabPinned(firstTabName), isTrue);
+      expect(tester.isTabPinned(secondTabName), isFalse);
+      expect(tester.isTabPinned(thirdTabName), isFalse);
+
+      expect(tester.isTabAtIndex(firstTabName, 0), isTrue);
+      expect(tester.isTabAtIndex(secondTabName, 1), isTrue);
+      expect(tester.isTabAtIndex(thirdTabName, 2), isTrue);
+    });
   });
 }
+
+extension _TabsTester on WidgetTester {
+  bool isTabPinned(String tabName) {
+    final tabFinder = find.ancestor(
+      of: find.byWidgetPredicate(
+        (w) => w is ViewTabBarItem && w.view.name == tabName,
+      ),
+      matching: find.byType(FlowyTab),
+    );
+
+    final FlowyTab tabWidget = widget(tabFinder);
+    return tabWidget.pageManager.isPinned;
+  }
+
+  bool isTabAtIndex(String tabName, int index) {
+    final tabFinder = find.ancestor(
+      of: find.byWidgetPredicate(
+        (w) => w is ViewTabBarItem && w.view.name == tabName,
+      ),
+      matching: find.byType(FlowyTab),
+    );
+
+    final pluginId = (widget(tabFinder) as FlowyTab).pageManager.plugin.id;
+
+    final pluginIds = find
+        .byType(FlowyTab)
+        .evaluate()
+        .map((e) => (e.widget as FlowyTab).pageManager.plugin.id);
+
+    return pluginIds.elementAt(index) == pluginId;
+  }
+
+  Future<void> openTabMenu(String tabName) async {
+    await tap(
+      buttons: kSecondaryButton,
+      find.ancestor(
+        of: find.byWidgetPredicate(
+          (w) => w is ViewTabBarItem && w.view.name == tabName,
+        ),
+        matching: find.byType(FlowyTab),
+      ),
+    );
+    await pumpAndSettle();
+  }
+}

frontend/appflowy_flutter/integration_test/desktop_runner_9.dart

@@ -1,6 +1,8 @@
 import 'package:integration_test/integration_test.dart';
 
 import 'desktop/uncategorized/tabs_test.dart' as tabs_test;
+import 'desktop/uncategorized/code_block_language_selector_test.dart'
+    as code_language_selector;
 import 'desktop/first_test/first_test.dart' as first_test;
 
 Future<void> main() async {
@@ -11,6 +13,6 @@ Future<void> runIntegration9OnDesktop() async {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   first_test.main();
-
   tabs_test.main();
+  code_language_selector.main();
 }

frontend/appflowy_flutter/integration_test/mobile/document/document_test_runner.dart

@@ -2,6 +2,7 @@ import 'package:integration_test/integration_test.dart';
 
 import 'page_style_test.dart' as page_style_test;
 import 'plus_menu_test.dart' as plus_menu_test;
+import 'simple_table_test.dart' as simple_table_test;
 import 'title_test.dart' as title_test;
 
 void main() {
@@ -11,4 +12,5 @@ void main() {
   title_test.main();
   page_style_test.main();
   plus_menu_test.main();
+  simple_table_test.main();
 }

frontend/appflowy_flutter/integration_test/mobile/document/simple_table_test.dart

@@ -0,0 +1,440 @@
+import 'dart:async';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('simple table:', () {
+    testWidgets('''
+1. insert a simple table via + menu
+2. insert a row above the table
+3. insert a row below the table
+4. insert a column left to the table
+5. insert a column right to the table
+6. delete the first row
+7. delete the first column
+''', (tester) async {
+      await tester.launchInAnonymousMode();
+      await tester.createNewDocumentOnMobile('simple table');
+
+      final editorState = tester.editor.getCurrentEditorState();
+      // focus on the editor
+      unawaited(
+        editorState.updateSelectionWithReason(
+          Selection.collapsed(Position(path: [0])),
+          reason: SelectionUpdateReason.uiEvent,
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final firstParagraphPath = [0, 0, 0, 0];
+
+      // open the plus menu and select the table block
+      {
+        await tester.openPlusMenuAndClickButton(
+          LocaleKeys.document_slashMenu_name_table.tr(),
+        );
+
+        // check the block is inserted
+        final table = editorState.getNodeAtPath([0])!;
+        expect(table.type, equals(SimpleTableBlockKeys.type));
+        expect(table.rowLength, equals(2));
+        expect(table.columnLength, equals(2));
+
+        // focus on the first cell
+
+        final selection = editorState.selection!;
+        expect(selection.isCollapsed, isTrue);
+        expect(selection.start.path, equals(firstParagraphPath));
+      }
+
+      // insert left and insert right
+      {
+        // click the column menu button
+        await tester.clickColumnMenuButton(0);
+
+        // insert left, insert right
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys.document_plugins_simpleTable_moreActions_insertLeft.tr(),
+          ),
+        );
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys.document_plugins_simpleTable_moreActions_insertRight
+                .tr(),
+          ),
+        );
+
+        await tester.cancelTableActionMenu();
+
+        // check the table is updated
+        final table = editorState.getNodeAtPath([0])!;
+        expect(table.type, equals(SimpleTableBlockKeys.type));
+        expect(table.rowLength, equals(2));
+        expect(table.columnLength, equals(4));
+      }
+
+      // insert above and insert below
+      {
+        // focus on the first cell
+        unawaited(
+          editorState.updateSelectionWithReason(
+            Selection.collapsed(Position(path: firstParagraphPath)),
+            reason: SelectionUpdateReason.uiEvent,
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        // click the row menu button
+        await tester.clickRowMenuButton(0);
+
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys.document_plugins_simpleTable_moreActions_insertAbove
+                .tr(),
+          ),
+        );
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys.document_plugins_simpleTable_moreActions_insertBelow
+                .tr(),
+          ),
+        );
+        await tester.cancelTableActionMenu();
+
+        // check the table is updated
+        final table = editorState.getNodeAtPath([0])!;
+        expect(table.rowLength, equals(4));
+        expect(table.columnLength, equals(4));
+      }
+
+      // delete the first row
+      {
+        // focus on the first cell
+        unawaited(
+          editorState.updateSelectionWithReason(
+            Selection.collapsed(Position(path: firstParagraphPath)),
+            reason: SelectionUpdateReason.uiEvent,
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        // delete the first row
+        await tester.clickRowMenuButton(0);
+        await tester.clickSimpleTableQuickAction(SimpleTableMoreAction.delete);
+        await tester.cancelTableActionMenu();
+
+        // check the table is updated
+        final table = editorState.getNodeAtPath([0])!;
+        expect(table.rowLength, equals(3));
+        expect(table.columnLength, equals(4));
+      }
+
+      // delete the first column
+      {
+        unawaited(
+          editorState.updateSelectionWithReason(
+            Selection.collapsed(Position(path: firstParagraphPath)),
+            reason: SelectionUpdateReason.uiEvent,
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        await tester.clickColumnMenuButton(0);
+        await tester.clickSimpleTableQuickAction(SimpleTableMoreAction.delete);
+        await tester.cancelTableActionMenu();
+
+        // check the table is updated
+        final table = editorState.getNodeAtPath([0])!;
+        expect(table.rowLength, equals(3));
+        expect(table.columnLength, equals(3));
+      }
+    });
+
+    testWidgets('''
+1. insert a simple table via + menu
+2. enable header column
+3. enable header row
+4. set to page width
+5. distribute columns evenly
+''', (tester) async {
+      await tester.launchInAnonymousMode();
+      await tester.createNewDocumentOnMobile('simple table');
+
+      final editorState = tester.editor.getCurrentEditorState();
+      // focus on the editor
+      unawaited(
+        editorState.updateSelectionWithReason(
+          Selection.collapsed(Position(path: [0])),
+          reason: SelectionUpdateReason.uiEvent,
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final firstParagraphPath = [0, 0, 0, 0];
+
+      // open the plus menu and select the table block
+      {
+        await tester.openPlusMenuAndClickButton(
+          LocaleKeys.document_slashMenu_name_table.tr(),
+        );
+
+        // check the block is inserted
+        final table = editorState.getNodeAtPath([0])!;
+        expect(table.type, equals(SimpleTableBlockKeys.type));
+        expect(table.rowLength, equals(2));
+        expect(table.columnLength, equals(2));
+
+        // focus on the first cell
+
+        final selection = editorState.selection!;
+        expect(selection.isCollapsed, isTrue);
+        expect(selection.start.path, equals(firstParagraphPath));
+      }
+
+      // enable header column
+      {
+        // click the column menu button
+        await tester.clickColumnMenuButton(0);
+
+        // enable header column
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys.document_plugins_simpleTable_moreActions_headerColumn
+                .tr(),
+          ),
+        );
+      }
+
+      // enable header row
+      {
+        // focus on the first cell
+        unawaited(
+          editorState.updateSelectionWithReason(
+            Selection.collapsed(Position(path: firstParagraphPath)),
+            reason: SelectionUpdateReason.uiEvent,
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        // click the row menu button
+        await tester.clickRowMenuButton(0);
+
+        // enable header column
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys.document_plugins_simpleTable_moreActions_headerRow.tr(),
+          ),
+        );
+      }
+
+      // check the table is updated
+      final table = editorState.getNodeAtPath([0])!;
+      expect(table.type, equals(SimpleTableBlockKeys.type));
+      expect(table.isHeaderColumnEnabled, isTrue);
+      expect(table.isHeaderRowEnabled, isTrue);
+
+      // set to page width
+      {
+        final table = editorState.getNodeAtPath([0])!;
+        final beforeWidth = table.width;
+        // focus on the first cell
+        unawaited(
+          editorState.updateSelectionWithReason(
+            Selection.collapsed(Position(path: firstParagraphPath)),
+            reason: SelectionUpdateReason.uiEvent,
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        // click the row menu button
+        await tester.clickRowMenuButton(0);
+
+        // enable header column
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys.document_plugins_simpleTable_moreActions_setToPageWidth
+                .tr(),
+          ),
+        );
+
+        // check the table is updated
+        expect(table.width, greaterThan(beforeWidth));
+      }
+
+      // distribute columns evenly
+      {
+        final table = editorState.getNodeAtPath([0])!;
+        final beforeWidth = table.width;
+
+        // focus on the first cell
+        unawaited(
+          editorState.updateSelectionWithReason(
+            Selection.collapsed(Position(path: firstParagraphPath)),
+            reason: SelectionUpdateReason.uiEvent,
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        // click the column menu button
+        await tester.clickColumnMenuButton(0);
+
+        // distribute columns evenly
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys
+                .document_plugins_simpleTable_moreActions_distributeColumnsWidth
+                .tr(),
+          ),
+        );
+
+        // check the table is updated
+        expect(table.width, equals(beforeWidth));
+      }
+    });
+
+    testWidgets('''
+1. insert a simple table via + menu
+2. bold
+3. clear content
+''', (tester) async {
+      await tester.launchInAnonymousMode();
+      await tester.createNewDocumentOnMobile('simple table');
+
+      final editorState = tester.editor.getCurrentEditorState();
+      // focus on the editor
+      unawaited(
+        editorState.updateSelectionWithReason(
+          Selection.collapsed(Position(path: [0])),
+          reason: SelectionUpdateReason.uiEvent,
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final firstParagraphPath = [0, 0, 0, 0];
+
+      // open the plus menu and select the table block
+      {
+        await tester.openPlusMenuAndClickButton(
+          LocaleKeys.document_slashMenu_name_table.tr(),
+        );
+
+        // check the block is inserted
+        final table = editorState.getNodeAtPath([0])!;
+        expect(table.type, equals(SimpleTableBlockKeys.type));
+        expect(table.rowLength, equals(2));
+        expect(table.columnLength, equals(2));
+
+        // focus on the first cell
+
+        final selection = editorState.selection!;
+        expect(selection.isCollapsed, isTrue);
+        expect(selection.start.path, equals(firstParagraphPath));
+      }
+
+      await tester.ime.insertText('Hello');
+
+      // enable bold
+      {
+        // click the column menu button
+        await tester.clickColumnMenuButton(0);
+
+        // enable bold
+        await tester.clickSimpleTableBoldContentAction();
+        await tester.cancelTableActionMenu();
+
+        // check the first cell is bold
+        final paragraph = editorState.getNodeAtPath(firstParagraphPath)!;
+        expect(paragraph.isInBoldColumn, isTrue);
+      }
+
+      // clear content
+      {
+        // focus on the first cell
+        unawaited(
+          editorState.updateSelectionWithReason(
+            Selection.collapsed(Position(path: firstParagraphPath)),
+            reason: SelectionUpdateReason.uiEvent,
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        // click the column menu button
+        await tester.clickColumnMenuButton(0);
+
+        // clear content
+        await tester.tapButton(
+          find.findTextInFlowyText(
+            LocaleKeys.document_plugins_simpleTable_moreActions_clearContents
+                .tr(),
+          ),
+        );
+        await tester.cancelTableActionMenu();
+
+        // check the first cell is empty
+        final paragraph = editorState.getNodeAtPath(firstParagraphPath)!;
+        expect(paragraph.delta!, isEmpty);
+      }
+    });
+
+    testWidgets('''
+1. insert a simple table via + menu
+2. insert a heading block in table cell
+''', (tester) async {
+      await tester.launchInAnonymousMode();
+      await tester.createNewDocumentOnMobile('simple table');
+
+      final editorState = tester.editor.getCurrentEditorState();
+      // focus on the editor
+      unawaited(
+        editorState.updateSelectionWithReason(
+          Selection.collapsed(Position(path: [0])),
+          reason: SelectionUpdateReason.uiEvent,
+        ),
+      );
+      await tester.pumpAndSettle();
+
+      final firstParagraphPath = [0, 0, 0, 0];
+
+      // open the plus menu and select the table block
+      {
+        await tester.openPlusMenuAndClickButton(
+          LocaleKeys.document_slashMenu_name_table.tr(),
+        );
+
+        // check the block is inserted
+        final table = editorState.getNodeAtPath([0])!;
+        expect(table.type, equals(SimpleTableBlockKeys.type));
+        expect(table.rowLength, equals(2));
+        expect(table.columnLength, equals(2));
+
+        // focus on the first cell
+
+        final selection = editorState.selection!;
+        expect(selection.isCollapsed, isTrue);
+        expect(selection.start.path, equals(firstParagraphPath));
+      }
+
+      // open the plus menu and select the heading block
+      {
+        await tester.openPlusMenuAndClickButton(
+          LocaleKeys.editor_toggleHeading1ShortForm.tr(),
+        );
+
+        // check the heading block is inserted
+        final heading = editorState.getNodeAtPath([0, 0, 0, 0])!;
+        expect(heading.type, equals(HeadingBlockKeys.type));
+        expect(heading.level, equals(1));
+      }
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/shared/common_operations.dart

@@ -8,8 +8,11 @@ import 'package:appflowy/mobile/presentation/base/type_option_menu_item.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_table/simple_table_widgets/_simple_table_bottom_sheet_actions.dart';
 import 'package:appflowy/plugins/shared/share/share_button.dart';
 import 'package:appflowy/shared/feature_flags.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/shared/text_field/text_filed_with_metric_lines.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/presentation/screens/screens.dart';
@@ -449,11 +452,8 @@ extension CommonOperations on WidgetTester {
 
     // open the page after created
     if (openAfterCreated) {
-      await openPage(
-        // if the name is null, use the default name
-        pageName ?? LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
-        layout: layout,
-      );
+      // if the name is null, use empty string
+      await openPage(pageName ?? '', layout: layout);
       await pumpAndSettle();
     }
   }
@@ -611,7 +611,7 @@ extension CommonOperations on WidgetTester {
     required String name,
     required String parentName,
     required ViewLayoutPB layout,
-    required String icon,
+    required EmojiIconData icon,
   }) async {
     final iconButton = find.descendant(
       of: findPageName(
@@ -623,7 +623,11 @@ extension CommonOperations on WidgetTester {
           find.byTooltip(LocaleKeys.document_plugins_cover_changeIcon.tr()),
     );
     await tapButton(iconButton);
-    await tapEmoji(icon);
+    if (icon.type == FlowyIconType.emoji) {
+      await tapEmoji(icon.emoji);
+    } else if (icon.type == FlowyIconType.icon) {
+      await tapIcon(icon);
+    }
     await pumpAndSettle();
   }
 
@@ -631,7 +635,7 @@ extension CommonOperations on WidgetTester {
   Future<void> updatePageIconInTitleBarByName({
     required String name,
     required ViewLayoutPB layout,
-    required String icon,
+    required EmojiIconData icon,
   }) async {
     await openPage(
       name,
@@ -643,7 +647,11 @@ extension CommonOperations on WidgetTester {
     );
     await tapButton(title);
     await tapButton(find.byType(EmojiPickerButton));
-    await tapEmoji(icon);
+    if (icon.type == FlowyIconType.emoji) {
+      await tapEmoji(icon.emoji);
+    } else if (icon.type == FlowyIconType.icon) {
+      await tapIcon(icon);
+    }
     await pumpAndSettle();
   }
 
@@ -841,6 +849,55 @@ extension CommonOperations on WidgetTester {
     await tapButton(toggleHeading1);
     await pumpUntilNotFound(addMenuItem);
   }
+
+  /// Click the column menu button in the simple table
+  Future<void> clickColumnMenuButton(int index) async {
+    final columnMenuButton = find.byWidgetPredicate(
+      (w) =>
+          w is SimpleTableMobileReorderButton &&
+          w.index == index &&
+          w.type == SimpleTableMoreActionType.column,
+    );
+    await tapButton(columnMenuButton);
+    await pumpUntilFound(find.byType(SimpleTableCellBottomSheet));
+  }
+
+  /// Click the row menu button in the simple table
+  Future<void> clickRowMenuButton(int index) async {
+    final rowMenuButton = find.byWidgetPredicate(
+      (w) =>
+          w is SimpleTableMobileReorderButton &&
+          w.index == index &&
+          w.type == SimpleTableMoreActionType.row,
+    );
+    await tapButton(rowMenuButton);
+    await pumpUntilFound(find.byType(SimpleTableCellBottomSheet));
+  }
+
+  /// Click the SimpleTableQuickAction
+  Future<void> clickSimpleTableQuickAction(SimpleTableMoreAction action) async {
+    final button = find.byWidgetPredicate(
+      (widget) => widget is SimpleTableQuickAction && widget.type == action,
+    );
+    await tapButton(button);
+  }
+
+  /// Click the SimpleTableContentAction
+  Future<void> clickSimpleTableBoldContentAction() async {
+    final button = find.byType(SimpleTableContentBoldAction);
+    await tapButton(button);
+  }
+
+  /// Cancel the table action menu
+  Future<void> cancelTableActionMenu() async {
+    final finder = find.byType(SimpleTableCellBottomSheet);
+    if (finder.evaluate().isEmpty) {
+      return;
+    }
+
+    await tapAt(Offset.zero);
+    await pumpUntilNotFound(finder);
+  }
 }
 
 extension SettingsFinder on CommonFinders {

frontend/appflowy_flutter/integration_test/shared/database_test_op.dart

@@ -567,6 +567,12 @@ extension AppFlowyDatabaseTest on WidgetTester {
     expect(phantom is PhantomChecklistItem, true);
   }
 
+  void assertPhantomChecklistItemContent(String content) {
+    final phantom = find.byType(PhantomChecklistItem);
+    final text = find.text(content);
+    expect(find.descendant(of: phantom, matching: text), findsOneWidget);
+  }
+
   Future<void> openFirstRowDetailPage() async {
     await hoverOnFirstRowOfGrid();
 

frontend/appflowy_flutter/integration_test/shared/emoji.dart

@@ -1,3 +1,12 @@
+import 'dart:convert';
+
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/icon_color_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/tab.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_icon_popup.dart';
+import 'package:flowy_svg/flowy_svg.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
 import 'package:flutter_test/flutter_test.dart';
 
@@ -11,4 +20,46 @@ extension EmojiTestExtension on WidgetTester {
     );
     await tapButton(emojiWidget);
   }
+
+  Future<void> tapIcon(EmojiIconData icon) async {
+    final iconsData = IconsData.fromJson(jsonDecode(icon.emoji));
+    final pickTab = find.byType(PickerTab);
+    expect(pickTab, findsOneWidget);
+    await pumpAndSettle();
+    final iconTab = find.descendant(
+      of: pickTab,
+      matching: find.text(PickerTabType.icon.tr),
+    );
+    expect(iconTab, findsOneWidget);
+    expect(find.byType(FlowyIconPicker), findsNothing);
+    await tap(iconTab);
+    await pumpAndSettle();
+    expect(find.byType(FlowyIconPicker), findsOneWidget);
+    final selectedSvg = find.descendant(
+      of: find.byType(FlowyIconPicker),
+      matching: find.byWidgetPredicate(
+        (w) => w is FlowySvg && w.svgString == iconsData.iconContent,
+      ),
+    );
+    expect(find.byType(IconColorPicker), findsNothing);
+    await tapButton(selectedSvg);
+    final colorPicker = find.byType(IconColorPicker);
+    expect(colorPicker, findsOneWidget);
+    final selectedColor = find.descendant(
+      of: colorPicker,
+      matching: find.byWidgetPredicate((w) {
+        if (w is Container) {
+          final d = w.decoration;
+          if (d is ShapeDecoration) {
+            if (d.color ==
+                Color(int.parse(iconsData.color ?? builtInSpaceColors.first))) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }),
+    );
+    await tapButton(selectedColor);
+  }
 }

frontend/appflowy_flutter/integration_test/shared/expectation.dart

@@ -1,3 +1,5 @@
+import 'dart:convert';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/page_item/mobile_view_item.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
@@ -5,6 +7,8 @@ import 'package:appflowy/plugins/database/widgets/row/row_detail.dart';
 import 'package:appflowy/plugins/document/presentation/banner.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
@@ -14,6 +18,7 @@ import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_svg/flowy_svg.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:universal_platform/universal_platform.dart';
@@ -117,7 +122,7 @@ extension Expectation on WidgetTester {
       return;
     }
     final iconWidget = find.byWidgetPredicate(
-      (widget) => widget is EmojiIconWidget && widget.emoji == emoji,
+      (widget) => widget is EmojiIconWidget && widget.emoji.emoji == emoji,
     );
     expect(iconWidget, findsOneWidget);
   }
@@ -223,24 +228,52 @@ extension Expectation on WidgetTester {
     );
   }
 
-  void expectViewHasIcon(String name, ViewLayoutPB layout, String emoji) {
+  void expectViewHasIcon(String name, ViewLayoutPB layout, EmojiIconData data) {
     final pageName = findPageName(
       name,
       layout: layout,
     );
-    final icon = find.descendant(
-      of: pageName,
-      matching: find.text(emoji),
-    );
-    expect(icon, findsOneWidget);
+    final type = data.type;
+    if (type == FlowyIconType.emoji) {
+      final icon = find.descendant(
+        of: pageName,
+        matching: find.text(data.emoji),
+      );
+      expect(icon, findsOneWidget);
+    } else if (type == FlowyIconType.icon) {
+      final iconsData = IconsData.fromJson(jsonDecode(data.emoji));
+      final icon = find.descendant(
+        of: pageName,
+        matching: find.byWidgetPredicate(
+          (w) => w is FlowySvg && w.svgString == iconsData.iconContent,
+        ),
+      );
+      expect(icon, findsOneWidget);
+    }
   }
 
-  void expectViewTitleHasIcon(String name, ViewLayoutPB layout, String emoji) {
-    final icon = find.descendant(
-      of: find.byType(ViewTitleBar),
-      matching: find.text(emoji),
-    );
-    expect(icon, findsOneWidget);
+  void expectViewTitleHasIcon(
+    String name,
+    ViewLayoutPB layout,
+    EmojiIconData data,
+  ) {
+    final type = data.type;
+    if (type == FlowyIconType.emoji) {
+      final icon = find.descendant(
+        of: find.byType(ViewTitleBar),
+        matching: find.text(data.emoji),
+      );
+      expect(icon, findsOneWidget);
+    } else if (type == FlowyIconType.icon) {
+      final iconsData = IconsData.fromJson(jsonDecode(data.emoji));
+      final icon = find.descendant(
+        of: find.byType(ViewTitleBar),
+        matching: find.byWidgetPredicate(
+          (w) => w is FlowySvg && w.svgString == iconsData.iconContent,
+        ),
+      );
+      expect(icon, findsOneWidget);
+    }
   }
 
   void expectSelectedReminder(ReminderOption option) {

frontend/appflowy_flutter/ios/Podfile.lock

@@ -88,6 +88,8 @@ PODS:
   - Toast (4.0.0)
   - url_launcher_ios (0.0.1):
     - Flutter
+  - webview_flutter_wkwebview (0.0.1):
+    - Flutter
 
 DEPENDENCIES:
   - app_links (from `.symlinks/plugins/app_links/ios`)
@@ -112,6 +114,7 @@ DEPENDENCIES:
   - sqflite (from `.symlinks/plugins/sqflite/darwin`)
   - super_native_extensions (from `.symlinks/plugins/super_native_extensions/ios`)
   - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
+  - webview_flutter_wkwebview (from `.symlinks/plugins/webview_flutter_wkwebview/ios`)
 
 SPEC REPOS:
   trunk:
@@ -168,6 +171,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/super_native_extensions/ios"
   url_launcher_ios:
     :path: ".symlinks/plugins/url_launcher_ios/ios"
+  webview_flutter_wkwebview:
+    :path: ".symlinks/plugins/webview_flutter_wkwebview/ios"
 
 SPEC CHECKSUMS:
   app_links: e70ca16b4b0f88253b3b3660200d4a10b4ea9795
@@ -199,6 +204,7 @@ SPEC CHECKSUMS:
   SwiftyGif: 6c3eafd0ce693cad58bb63d2b2fb9bacb8552780
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
   url_launcher_ios: 5334b05cef931de560670eeae103fd3e431ac3fe
+  webview_flutter_wkwebview: 2a23822e9039b7b1bc52e5add778e5d89ad488d1
 
 PODFILE CHECKSUM: d0d9b4ff572d8695c38eb3f9b490f55cdfc57eca
 

frontend/appflowy_flutter/ios/Runner/Info.plist

@@ -50,6 +50,8 @@
 	<string>AppFlowy needs access to your photos to let you add images to your documents</string>
 	<key>UIApplicationSupportsIndirectInputEvents</key>
 	<true/>
+	<key>NSCameraUsageDescription</key>
+	<string>AppFlowy needs access to your camera to let you add images to your documents from camera</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
@@ -65,9 +67,9 @@
 		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
 	<key>UISupportsDocumentBrowser</key>
 	<true/>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
 </dict>
 </plist>

frontend/appflowy_flutter/ios/Runner/Runner.entitlements

@@ -8,5 +8,12 @@
 	<array>
 		<string>Default</string>
 	</array>
+	<key>com.apple.developer.associated-domains</key>
+	<array>
+		<string>applinks:appflowy.com</string>
+		<string>applinks:appflowy.io</string>
+		<string>applinks:test.appflowy.com</string>
+		<string>applinks:test.appflowy.io</string>
+	</array>
 </dict>
 </plist>

frontend/appflowy_flutter/lib/core/config/kv_keys.dart

@@ -49,6 +49,7 @@ class KVKeys {
   ///  {'SidebarFolderCategoryType.value': true}
   static const String expandedFolders = 'expandedFolders';
 
+  /// @deprecated in version 0.7.6
   /// The key for saving if showing the rename dialog when creating a new file
   ///
   /// The value is a boolean string.
@@ -57,6 +58,7 @@ class KVKeys {
 
   static const String kCloudType = 'kCloudType';
   static const String kAppflowyCloudBaseURL = 'kAppFlowyCloudBaseURL';
+  static const String kAppFlowyEnableSyncTrace = 'kAppFlowyEnableSyncTrace';
 
   /// The key for saving the text scale factor.
   ///
@@ -107,4 +109,9 @@ class KVKeys {
   ///
   /// The value is a boolean string
   static const String hasUpgradedSpace = 'hasUpgradedSpace060';
+
+  /// The key for saving the recent icons
+  ///
+  /// The value is a json string of [RecentIcons]
+  static const String recentIcons = 'kRecentIcons';
 }

frontend/appflowy_flutter/lib/core/helpers/url_launcher.dart

@@ -1,16 +1,24 @@
-import 'package:flutter/services.dart';
-import 'package:flutter/widgets.dart';
+import 'dart:io';
 
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/shared/patterns/common_patterns.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter/widgets.dart';
+import 'package:open_filex/open_filex.dart';
 import 'package:string_validator/string_validator.dart';
 import 'package:url_launcher/url_launcher.dart' as launcher;
 
 typedef OnFailureCallback = void Function(Uri uri);
 
-Future<bool> afLaunchUrl(
+/// Launch the uri
+///
+/// If the uri is a local file path, it will be opened with the OpenFilex.
+/// Otherwise, it will be launched with the url_launcher.
+Future<bool> afLaunchUri(
   Uri uri, {
   BuildContext? context,
   OnFailureCallback? onFailure,
@@ -18,6 +26,18 @@ Future<bool> afLaunchUrl(
   String? webOnlyWindowName,
   bool addingHttpSchemeWhenFailed = false,
 }) async {
+  final url = uri.toString();
+  final decodedUrl = Uri.decodeComponent(url);
+
+  // check if the uri is the local file path
+  if (localPathRegex.hasMatch(decodedUrl)) {
+    return _afLaunchLocalUri(
+      uri,
+      context: context,
+      onFailure: onFailure,
+    );
+  }
+
   // try to launch the uri directly
   bool result;
   try {
@@ -32,7 +52,7 @@ Future<bool> afLaunchUrl(
   }
 
   // if the uri is not a valid url, try to launch it with http scheme
-  final url = uri.toString();
+
   if (addingHttpSchemeWhenFailed &&
       !result &&
       !isURL(url, {'require_protocol': true})) {
@@ -54,9 +74,14 @@ Future<bool> afLaunchUrl(
   return result;
 }
 
+/// Launch the url string
+///
+/// See [afLaunchUri] for more details.
 Future<bool> afLaunchUrlString(
   String url, {
   bool addingHttpSchemeWhenFailed = false,
+  BuildContext? context,
+  OnFailureCallback? onFailure,
 }) async {
   final Uri uri;
   try {
@@ -67,12 +92,56 @@ Future<bool> afLaunchUrlString(
   }
 
   // try to launch the uri directly
-  return afLaunchUrl(
+  return afLaunchUri(
     uri,
     addingHttpSchemeWhenFailed: addingHttpSchemeWhenFailed,
+    context: context,
+    onFailure: onFailure,
   );
 }
 
+/// Launch the local uri
+///
+/// See [afLaunchUri] for more details.
+Future<bool> _afLaunchLocalUri(
+  Uri uri, {
+  BuildContext? context,
+  OnFailureCallback? onFailure,
+}) async {
+  final decodedUrl = Uri.decodeComponent(uri.toString());
+  // open the file with the OpenfileX
+  var result = await OpenFilex.open(decodedUrl);
+  if (result.type != ResultType.done) {
+    // For the file cant be opened, fallback to open the folder
+    final parentFolder = Directory(decodedUrl).parent.path;
+    result = await OpenFilex.open(parentFolder);
+  }
+  // show the toast if the file is not found
+  final message = switch (result.type) {
+    ResultType.done => LocaleKeys.openFileMessage_success.tr(),
+    ResultType.fileNotFound => LocaleKeys.openFileMessage_fileNotFound.tr(),
+    ResultType.noAppToOpen => LocaleKeys.openFileMessage_noAppToOpenFile.tr(),
+    ResultType.permissionDenied =>
+      LocaleKeys.openFileMessage_permissionDenied.tr(),
+    ResultType.error => LocaleKeys.failedToOpenUrl.tr(),
+  };
+  if (context != null && context.mounted) {
+    showToastNotification(
+      context,
+      message: message,
+      type: result.type == ResultType.done
+          ? ToastificationType.success
+          : ToastificationType.error,
+    );
+  }
+  final openFileSuccess = result.type == ResultType.done;
+  if (!openFileSuccess && onFailure != null) {
+    onFailure(uri);
+    Log.error('Failed to open file: $result.message');
+  }
+  return openFileSuccess;
+}
+
 void _errorHandler(
   Uri uri, {
   BuildContext? context,

frontend/appflowy_flutter/lib/env/backend_env.dart

@@ -39,6 +39,7 @@ class AppFlowyCloudConfiguration {
     required this.base_url,
     required this.ws_base_url,
     required this.gotrue_url,
+    required this.enable_sync_trace,
   });
 
   factory AppFlowyCloudConfiguration.fromJson(Map<String, dynamic> json) =>
@@ -47,6 +48,7 @@ class AppFlowyCloudConfiguration {
   final String base_url;
   final String ws_base_url;
   final String gotrue_url;
+  final bool enable_sync_trace;
 
   Map<String, dynamic> toJson() => _$AppFlowyCloudConfigurationToJson(this);
 
@@ -55,6 +57,7 @@ class AppFlowyCloudConfiguration {
       base_url: '',
       ws_base_url: '',
       gotrue_url: '',
+      enable_sync_trace: false,
     );
   }
 

frontend/appflowy_flutter/lib/env/cloud_env.dart

@@ -212,6 +212,7 @@ class AppFlowyCloudSharedEnv {
         base_url: Env.afCloudUrl,
         ws_base_url: await _getAppFlowyCloudWSUrl(Env.afCloudUrl),
         gotrue_url: await _getAppFlowyCloudGotrueUrl(Env.afCloudUrl),
+        enable_sync_trace: false,
       );
 
       return AppFlowyCloudSharedEnv(
@@ -241,12 +242,14 @@ Future<AppFlowyCloudConfiguration> configurationFromUri(
       base_url: "$baseUrl:8000",
       ws_base_url: "ws://${baseUri.host}:8000/ws/v1",
       gotrue_url: "$baseUrl:9999",
+      enable_sync_trace: true,
     );
   } else {
     return AppFlowyCloudConfiguration(
       base_url: baseUrl,
       ws_base_url: await _getAppFlowyCloudWSUrl(baseUrl),
       gotrue_url: await _getAppFlowyCloudGotrueUrl(baseUrl),
+      enable_sync_trace: await getSyncLogEnabled(),
     );
   }
 }
@@ -271,6 +274,24 @@ Future<String> getAppFlowyCloudUrl() async {
   return result ?? kAppflowyCloudUrl;
 }
 
+Future<bool> getSyncLogEnabled() async {
+  final result =
+      await getIt<KeyValueStorage>().get(KVKeys.kAppFlowyEnableSyncTrace);
+
+  if (result == null) {
+    return false;
+  }
+
+  return result.toLowerCase() == "true";
+}
+
+Future<void> setSyncLogEnabled(bool enable) async {
+  await getIt<KeyValueStorage>().set(
+    KVKeys.kAppFlowyEnableSyncTrace,
+    enable.toString().toLowerCase(),
+  );
+}
+
 Future<String> _getAppFlowyCloudWSUrl(String baseURL) async {
   try {
     final uri = Uri.parse(baseURL);

frontend/appflowy_flutter/lib/mobile/application/page_style/document_page_style_bloc.dart

@@ -6,7 +6,6 @@ import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy/workspace/application/view/view_service.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
-import 'package:appflowy_result/appflowy_result.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -26,11 +25,13 @@ class DocumentPageStyleBloc
               if (view.id.isEmpty) {
                 return;
               }
-              final layoutObject =
-                  await ViewBackendService.getView(view.id).fold(
-                (s) => jsonDecode(s.extra),
-                (f) => {},
-              );
+              Map layoutObject = {};
+              final data = await ViewBackendService.getView(view.id);
+              data.onSuccess((s) {
+                if (s.extra.isNotEmpty) {
+                  layoutObject = jsonDecode(s.extra);
+                }
+              });
               final fontLayout = _getSelectedFontLayout(layoutObject);
               final lineHeightLayout = _getSelectedLineHeightLayout(
                 layoutObject,

frontend/appflowy_flutter/lib/mobile/application/recent/recent_view_bloc.dart

@@ -7,6 +7,8 @@ import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 
+import '../../../shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+
 part 'recent_view_bloc.freezed.dart';
 
 class RecentViewBloc extends Bloc<RecentViewEvent, RecentViewState> {
@@ -39,7 +41,7 @@ class RecentViewBloc extends Bloc<RecentViewEvent, RecentViewState> {
                 add(
                   RecentViewEvent.updateNameOrIcon(
                     view.name,
-                    view.icon.value,
+                    view.icon.toEmojiIconData(),
                   ),
                 );
 
@@ -61,7 +63,7 @@ class RecentViewBloc extends Bloc<RecentViewEvent, RecentViewState> {
               emit(
                 state.copyWith(
                   name: view.name,
-                  icon: view.icon.value,
+                  icon: view.icon.toEmojiIconData(),
                 ),
               );
             }
@@ -72,7 +74,7 @@ class RecentViewBloc extends Bloc<RecentViewEvent, RecentViewState> {
               emit(
                 state.copyWith(
                   name: view.name,
-                  icon: view.icon.value,
+                  icon: view.icon.toEmojiIconData(),
                   coverTypeV2: cover.type,
                   coverValue: cover.value,
                 ),
@@ -82,7 +84,7 @@ class RecentViewBloc extends Bloc<RecentViewEvent, RecentViewState> {
               emit(
                 state.copyWith(
                   name: view.name,
-                  icon: view.icon.value,
+                  icon: view.icon.toEmojiIconData(),
                   coverTypeV1: coverTypeV1,
                   coverValue: coverValue,
                 ),
@@ -135,14 +137,17 @@ class RecentViewBloc extends Bloc<RecentViewEvent, RecentViewState> {
 @freezed
 class RecentViewEvent with _$RecentViewEvent {
   const factory RecentViewEvent.initial() = Initial;
+
   const factory RecentViewEvent.updateCover(
-    CoverType coverTypeV1, // for the version under 0.5.5, including 0.5.5
+    CoverType coverTypeV1,
+    // for the version under 0.5.5, including 0.5.5
     PageStyleCoverImageType? coverTypeV2, // for the version above 0.5.5
     String? coverValue,
   ) = UpdateCover;
+
   const factory RecentViewEvent.updateNameOrIcon(
     String name,
-    String icon,
+    EmojiIconData icon,
   ) = UpdateNameOrIcon;
 }
 
@@ -150,12 +155,12 @@ class RecentViewEvent with _$RecentViewEvent {
 class RecentViewState with _$RecentViewState {
   const factory RecentViewState({
     required String name,
-    required String icon,
+    required EmojiIconData icon,
     @Default(CoverType.none) CoverType coverTypeV1,
     PageStyleCoverImageType? coverTypeV2,
     @Default(null) String? coverValue,
   }) = _RecentViewState;
 
   factory RecentViewState.initial() =>
-      const RecentViewState(name: '', icon: '');
+      RecentViewState(name: '', icon: EmojiIconData.none());
 }

frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart

@@ -7,11 +7,14 @@ import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_state_container.dart';
 import 'package:appflowy/plugins/document/application/prelude.dart';
 import 'package:appflowy/plugins/document/presentation/document_collaborators.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/shared/feature_flags.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
+import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
@@ -105,6 +108,12 @@ class _MobileViewPageState extends State<MobileViewPage> {
                 create: (_) =>
                     ShareBloc(view: view)..add(const ShareEvent.initial()),
               ),
+              if (state.userProfilePB != null)
+                BlocProvider(
+                  create: (_) =>
+                      UserWorkspaceBloc(userProfile: state.userProfilePB!)
+                        ..add(const UserWorkspaceEvent.initial()),
+                ),
               if (view.layout.isDocumentView)
                 BlocProvider(
                   create: (_) => DocumentPageStyleBloc(view: view)
@@ -255,15 +264,14 @@ class _MobileViewPageState extends State<MobileViewPage> {
   }
 
   Widget _buildTitle(BuildContext context, ViewPB? view) {
-    final icon = view?.icon.value;
+    final icon = view?.icon;
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
-        if (icon != null && icon.isNotEmpty) ...[
-          FlowyText.emoji(
-            icon,
-            fontSize: 15.0,
-            figmaLineHeight: 18.0,
+        if (icon != null) ...[
+          EmojiIconWidget(
+            emoji: icon.toEmojiIconData(),
+            emojiSize: 15,
           ),
           const HSpace(4),
         ],

frontend/appflowy_flutter/lib/mobile/presentation/base/view_page/more_bottom_sheet.dart

@@ -189,7 +189,7 @@ class MobileViewPageMoreBottomSheet extends StatelessWidget {
     final url = context.read<ShareBloc>().state.url;
     if (url.isNotEmpty) {
       unawaited(
-        afLaunchUrl(
+        afLaunchUri(
           Uri.parse(url),
           mode: LaunchMode.externalApplication,
         ),

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_buttons.dart

@@ -98,7 +98,7 @@ class BottomSheetBackButton extends StatelessWidget {
           width: 18,
           height: 18,
           child: FlowySvg(
-            FlowySvgs.m_app_bar_back_s,
+            FlowySvgs.m_bottom_sheet_back_s,
           ),
         ),
       ),

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart

@@ -138,7 +138,6 @@ class MobileViewBottomSheetBody extends StatelessWidget {
         ),
         _divider(),
         ..._buildPublishActions(context),
-        _divider(),
         MobileQuickActionButton(
           text: LocaleKeys.button_delete.tr(),
           textColor: Theme.of(context).colorScheme.error,
@@ -191,6 +190,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
             MobileViewBottomSheetBodyAction.unpublish,
           ),
         ),
+        _divider(),
       ];
     } else {
       return [
@@ -201,6 +201,7 @@ class MobileViewBottomSheetBody extends StatelessWidget {
             MobileViewBottomSheetBodyAction.publish,
           ),
         ),
+        _divider(),
       ];
     }
   }

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart

@@ -211,14 +211,21 @@ class BottomSheetHeader extends StatelessWidget {
     required this.showDoneButton,
     this.onRemove,
     this.onDone,
+    this.onBack,
+    this.onClose,
   });
 
+  final String title;
+
   final bool showBackButton;
   final bool showCloseButton;
   final bool showRemoveButton;
-  final String title;
   final bool showDoneButton;
+
   final VoidCallback? onRemove;
+  final VoidCallback? onBack;
+  final VoidCallback? onClose;
+
   final void Function(BuildContext context)? onDone;
 
   @override
@@ -230,14 +237,18 @@ class BottomSheetHeader extends StatelessWidget {
         child: Stack(
           children: [
             if (showBackButton)
-              const Align(
+              Align(
                 alignment: Alignment.centerLeft,
-                child: BottomSheetBackButton(),
+                child: BottomSheetBackButton(
+                  onTap: onBack,
+                ),
               ),
             if (showCloseButton)
-              const Align(
+              Align(
                 alignment: Alignment.centerLeft,
-                child: BottomSheetCloseButton(),
+                child: BottomSheetCloseButton(
+                  onTap: onClose,
+                ),
               ),
             if (showRemoveButton)
               Align(

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_full_field_editor.dart

@@ -9,10 +9,10 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/plugins/base/drag_handler.dart';
-import 'package:appflowy/plugins/database/domain/field_service.dart';
 import 'package:appflowy/plugins/database/application/field/type_option/number_format_bloc.dart';
-import 'package:appflowy/plugins/database/widgets/field/type_option_editor/date/date_time_format.dart';
+import 'package:appflowy/plugins/database/domain/field_service.dart';
 import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart';
+import 'package:appflowy/plugins/database/widgets/field/type_option_editor/date/date_time_format.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:collection/collection.dart';
@@ -863,6 +863,8 @@ class _SelectOptionListState extends State<_SelectOptionList> {
     return ListView(
       shrinkWrap: true,
       padding: EdgeInsets.zero,
+      // disable the inner scroll physics, so the outer ListView can scroll
+      physics: const NeverScrollableScrollPhysics(),
       children: widget.selectOptions
           .mapIndexed(
             (index, option) => _SelectOptionTile(

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page_header.dart

@@ -228,7 +228,7 @@ class _UserIcon extends StatelessWidget {
               fontSize: 26,
             ),
       onTap: () async {
-        final icon = await context.push<EmojiPickerResult>(
+        final icon = await context.push<EmojiIconData>(
           Uri(
             path: MobileEmojiPickerScreen.routeName,
             queryParameters: {

frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/mobile_recent_view.dart

@@ -111,7 +111,7 @@ class MobileRecentView extends StatelessWidget {
       padding: const EdgeInsets.only(left: 8.0),
       child: state.icon.isNotEmpty
           ? EmojiText(
-              emoji: state.icon,
+              emoji: state.icon.emoji,
               fontSize: 30.0,
             )
           : SizedBox.square(

frontend/appflowy_flutter/lib/mobile/presentation/home/shared/mobile_page_card.dart

@@ -7,6 +7,7 @@ import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.
 import 'package:appflowy/mobile/application/recent/recent_view_bloc.dart';
 import 'package:appflowy/mobile/presentation/base/animated_gesture.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/shared/appflowy_network_image.dart';
 import 'package:appflowy/shared/flowy_gradient_colors.dart';
@@ -26,7 +27,6 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:provider/provider.dart';
 import 'package:string_validator/string_validator.dart';
 import 'package:time/time.dart';
@@ -118,7 +118,7 @@ class MobileViewPage extends StatelessWidget {
   }
 
   Widget _buildNameAndLastViewed(BuildContext context, RecentViewState state) {
-    final supportAvatar = isURL(state.icon);
+    final supportAvatar = isURL(state.icon.emoji);
     if (!supportAvatar) {
       return _buildLastViewed(context);
     }
@@ -173,21 +173,19 @@ class MobileViewPage extends StatelessWidget {
   Widget _buildTitle(BuildContext context, RecentViewState state) {
     final name = state.name;
     final icon = state.icon;
-    final fontFamily = Platform.isAndroid || Platform.isLinux
-        ? GoogleFonts.notoColorEmoji().fontFamily
-        : null;
     return RichText(
       maxLines: 3,
       overflow: TextOverflow.ellipsis,
       text: TextSpan(
         children: [
-          TextSpan(
-            text: icon,
-            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                  fontSize: 17.0,
-                  fontWeight: FontWeight.w600,
-                  fontFamily: fontFamily,
-                ),
+          WidgetSpan(
+            child: SizedBox(
+              width: 20,
+              child: EmojiIconWidget(
+                emoji: icon,
+                emojiSize: 17.0,
+              ),
+            ),
           ),
           if (icon.isNotEmpty) const WidgetSpan(child: HSpace(2.0)),
           TextSpan(

frontend/appflowy_flutter/lib/mobile/presentation/notifications/widgets/shared.dart

@@ -14,6 +14,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:universal_platform/universal_platform.dart';
 
 const _kNotificationIconHeight = 36.0;
 
@@ -264,7 +265,11 @@ class NotificationDocumentContent extends StatelessWidget {
       styleCustomizer: styleCustomizer,
       // the editor is not editable in the chat
       editable: false,
-      customHeadingPadding: EdgeInsets.zero,
+      customHeadingPadding: UniversalPlatform.isDesktop
+          ? EdgeInsets.zero
+          : EdgeInsets.symmetric(
+              vertical: EditorStyleCustomizer.nodeHorizontalPadding,
+            ),
     );
 
     return IgnorePointer(

frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart

@@ -2,6 +2,8 @@ import 'dart:io';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/mobile/application/mobile_router.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
@@ -121,6 +123,7 @@ class InnerMobileViewItem extends StatelessWidget {
   final bool isDraggable;
   final bool isExpanded;
   final bool isFirstChild;
+
   // identify if the view item is rendered as feedback widget inside DraggableItem
   final bool isFeedback;
 
@@ -230,6 +233,7 @@ class SingleMobileInnerViewItem extends StatefulWidget {
   final ViewPB view;
   final ViewPB? parentView;
   final bool isExpanded;
+
   // identify if the view item is rendered as feedback widget inside DraggableItem
   final bool isFeedback;
 
@@ -297,11 +301,9 @@ class _SingleMobileInnerViewItemState extends State<SingleMobileInnerViewItem> {
 
   Widget _buildViewIcon() {
     final icon = widget.view.icon.value.isNotEmpty
-        ? FlowyText.emoji(
-            widget.view.icon.value,
-            fontSize: Platform.isAndroid ? 16.0 : 18.0,
-            figmaLineHeight: 20.0,
-            optimizeEmojiAlign: true,
+        ? EmojiIconWidget(
+            emoji: widget.view.icon.toEmojiIconData(),
+            emojiSize: Platform.isAndroid ? 16.0 : 18.0,
           )
         : Opacity(
             opacity: 0.7,

frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart

@@ -34,7 +34,7 @@ class MobileQuickActionButton extends StatelessWidget {
             enable ? null : const WidgetStatePropertyAll(Colors.transparent),
         splashColor: Colors.transparent,
         child: Container(
-          height: 52,
+          height: 44,
           padding: const EdgeInsets.symmetric(horizontal: 12),
           child: Row(
             children: [

frontend/appflowy_flutter/lib/plugins/ai_chat/application/ai_prompt_input_bloc.dart

@@ -5,6 +5,7 @@ import 'package:appflowy/workspace/application/settings/ai/local_llm_listener.da
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:appflowy_result/appflowy_result.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -20,18 +21,6 @@ class AIPromptInputBloc extends Bloc<AIPromptInputEvent, AIPromptInputState> {
     _init();
   }
 
-  ChatInputFileMetadata consumeMetadata() {
-    final metadata = {
-      for (final file in state.uploadFiles) file.filePath: file,
-    };
-
-    if (metadata.isNotEmpty) {
-      add(const AIPromptInputEvent.clear());
-    }
-
-    return metadata;
-  }
-
   final LocalLLMListener _listener;
 
   @override
@@ -44,15 +33,6 @@ class AIPromptInputBloc extends Bloc<AIPromptInputEvent, AIPromptInputState> {
     on<AIPromptInputEvent>(
       (event, emit) {
         event.when(
-          newFile: (String filePath, String fileName) {
-            final files = [...state.uploadFiles];
-
-            final newFile = ChatFile.fromFilePath(filePath);
-            if (newFile != null) {
-              files.add(newFile);
-              emit(state.copyWith(uploadFiles: files));
-            }
-          },
           updateChatState: (LocalAIChatPB chatState) {
             // Only user enable chat with file and the plugin is already running
             final supportChatWithFile = chatState.fileEnabled &&
@@ -80,19 +60,37 @@ class AIPromptInputBloc extends Bloc<AIPromptInputEvent, AIPromptInputState> {
               ),
             );
           },
-          deleteFile: (file) {
-            final files = List<ChatFile>.from(state.uploadFiles);
+          attachFile: (filePath, fileName) {
+            final newFile = ChatFile.fromFilePath(filePath);
+            if (newFile != null) {
+              emit(
+                state.copyWith(
+                  attachedFiles: [...state.attachedFiles, newFile],
+                ),
+              );
+            }
+          },
+          removeFile: (file) {
+            final files = [...state.attachedFiles];
             files.remove(file);
             emit(
               state.copyWith(
-                uploadFiles: files,
+                attachedFiles: files,
               ),
             );
           },
-          clear: () {
+          updateMentionedViews: (views) {
             emit(
               state.copyWith(
-                uploadFiles: [],
+                mentionedPages: views,
+              ),
+            );
+          },
+          clearMetadata: () {
+            emit(
+              state.copyWith(
+                attachedFiles: [],
+                mentionedPages: [],
               ),
             );
           },
@@ -126,35 +124,55 @@ class AIPromptInputBloc extends Bloc<AIPromptInputEvent, AIPromptInputState> {
       Log.error,
     );
   }
+
+  Map<String, dynamic> consumeMetadata() {
+    final metadata = {
+      for (final file in state.attachedFiles) file.filePath: file,
+      for (final page in state.mentionedPages) page.id: page,
+    };
+
+    if (metadata.isNotEmpty && !isClosed) {
+      add(const AIPromptInputEvent.clearMetadata());
+    }
+
+    return metadata;
+  }
 }
 
 @freezed
 class AIPromptInputEvent with _$AIPromptInputEvent {
-  const factory AIPromptInputEvent.newFile(String filePath, String fileName) =
-      _NewFile;
-  const factory AIPromptInputEvent.deleteFile(ChatFile file) = _DeleteFile;
-  const factory AIPromptInputEvent.clear() = _ClearFile;
   const factory AIPromptInputEvent.updateChatState(
     LocalAIChatPB chatState,
   ) = _UpdateChatState;
   const factory AIPromptInputEvent.updatePluginState(
     LocalAIPluginStatePB chatState,
   ) = _UpdatePluginState;
+  const factory AIPromptInputEvent.attachFile(
+    String filePath,
+    String fileName,
+  ) = _AttachFile;
+  const factory AIPromptInputEvent.removeFile(ChatFile file) = _RemoveFile;
+  const factory AIPromptInputEvent.updateMentionedViews(List<ViewPB> views) =
+      _UpdateMentionedViews;
+  const factory AIPromptInputEvent.clearMetadata() = _ClearMetadata;
 }
 
 @freezed
 class AIPromptInputState with _$AIPromptInputState {
   const factory AIPromptInputState({
-    required bool supportChatWithFile,
-    LocalAIChatPB? chatState,
-    required List<ChatFile> uploadFiles,
     required AIType aiType,
+    required bool supportChatWithFile,
+    required LocalAIChatPB? chatState,
+    required List<ChatFile> attachedFiles,
+    required List<ViewPB> mentionedPages,
   }) = _AIPromptInputState;
 
   factory AIPromptInputState.initial() => const AIPromptInputState(
-        supportChatWithFile: false,
-        uploadFiles: [],
         aiType: AIType.appflowyAI,
+        supportChatWithFile: false,
+        chatState: null,
+        attachedFiles: [],
+        mentionedPages: [],
       );
 }
 

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_ai_message_bloc.dart

@@ -1,5 +1,3 @@
-import 'dart:async';
-
 import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
 import 'package:appflowy/plugins/ai_chat/application/chat_message_stream.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
@@ -22,42 +20,26 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
   }) : super(
           ChatAIMessageState.initial(
             message,
-            messageReferenceSource(refSourceJsonString),
+            parseMetadata(refSourceJsonString),
           ),
         ) {
-    if (state.stream != null) {
-      state.stream!.listen(
-        onData: (text) {
-          if (!isClosed) {
-            add(ChatAIMessageEvent.updateText(text));
-          }
-        },
-        onError: (error) {
-          if (!isClosed) {
-            add(ChatAIMessageEvent.receiveError(error.toString()));
-          }
-        },
-        onAIResponseLimit: () {
-          if (!isClosed) {
-            add(const ChatAIMessageEvent.onAIResponseLimit());
-          }
-        },
-        onMetadata: (sources) {
-          if (!isClosed) {
-            add(ChatAIMessageEvent.receiveSources(sources));
-          }
-        },
-      );
+    _dispatch();
 
-      if (state.stream!.error != null) {
-        Future.delayed(const Duration(milliseconds: 300), () {
-          if (!isClosed) {
-            add(ChatAIMessageEvent.receiveError(state.stream!.error!));
-          }
-        });
+    if (state.stream != null) {
+      _startListening();
+
+      if (state.stream!.aiLimitReached) {
+        add(const ChatAIMessageEvent.onAIResponseLimit());
+      } else if (state.stream!.error != null) {
+        add(ChatAIMessageEvent.receiveError(state.stream!.error!));
       }
     }
+  }
 
+  final String chatId;
+  final Int64? questionId;
+
+  void _dispatch() {
     on<ChatAIMessageEvent>(
       (event, emit) {
         event.when(
@@ -116,10 +98,12 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
               ),
             );
           },
-          receiveSources: (List<ChatMessageRefSource> sources) {
+          receiveMetadata: (metadata) {
+            Log.debug("AI Steps: ${metadata.progress?.step}");
             emit(
               state.copyWith(
-                sources: sources,
+                sources: metadata.sources,
+                progress: metadata.progress,
               ),
             );
           },
@@ -128,8 +112,30 @@ class ChatAIMessageBloc extends Bloc<ChatAIMessageEvent, ChatAIMessageState> {
     );
   }
 
-  final String chatId;
-  final Int64? questionId;
+  void _startListening() {
+    state.stream!.listen(
+      onData: (text) {
+        if (!isClosed) {
+          add(ChatAIMessageEvent.updateText(text));
+        }
+      },
+      onError: (error) {
+        if (!isClosed) {
+          add(ChatAIMessageEvent.receiveError(error.toString()));
+        }
+      },
+      onAIResponseLimit: () {
+        if (!isClosed) {
+          add(const ChatAIMessageEvent.onAIResponseLimit());
+        }
+      },
+      onMetadata: (metadata) {
+        if (!isClosed) {
+          add(ChatAIMessageEvent.receiveMetadata(metadata));
+        }
+      },
+    );
+  }
 }
 
 @freezed
@@ -139,8 +145,8 @@ class ChatAIMessageEvent with _$ChatAIMessageEvent {
   const factory ChatAIMessageEvent.retry() = _Retry;
   const factory ChatAIMessageEvent.retryResult(String text) = _RetryResult;
   const factory ChatAIMessageEvent.onAIResponseLimit() = _OnAIResponseLimit;
-  const factory ChatAIMessageEvent.receiveSources(
-    List<ChatMessageRefSource> sources,
+  const factory ChatAIMessageEvent.receiveMetadata(
+    MetadataCollection metadata,
   ) = _ReceiveMetadata;
 }
 
@@ -151,17 +157,19 @@ class ChatAIMessageState with _$ChatAIMessageState {
     required String text,
     required MessageState messageState,
     required List<ChatMessageRefSource> sources,
+    required AIChatProgress? progress,
   }) = _ChatAIMessageState;
 
   factory ChatAIMessageState.initial(
     dynamic text,
-    List<ChatMessageRefSource> sources,
+    MetadataCollection metadata,
   ) {
     return ChatAIMessageState(
       text: text is String ? text : "",
       stream: text is AnswerStream ? text : null,
       messageState: const MessageState.ready(),
-      sources: sources,
+      sources: metadata.sources,
+      progress: metadata.progress,
     );
   }
 }

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_bloc.dart

@@ -1,47 +1,52 @@
 import 'dart:async';
 import 'dart:collection';
 
-import 'package:appflowy/plugins/ai_chat/application/chat_message_stream.dart';
+import 'package:appflowy/util/int64_extension.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/code.pb.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
-import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
+import 'package:appflowy_result/appflowy_result.dart';
 import 'package:collection/collection.dart';
 import 'package:fixnum/fixnum.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart';
+import 'package:flutter_chat_core/flutter_chat_core.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:nanoid/nanoid.dart';
 
 import 'chat_entity.dart';
 import 'chat_message_listener.dart';
 import 'chat_message_service.dart';
+import 'chat_message_stream.dart';
 
 part 'chat_bloc.freezed.dart';
 
 class ChatBloc extends Bloc<ChatEvent, ChatState> {
   ChatBloc({
-    required ViewPB view,
-    required UserProfilePB userProfile,
-  })  : listener = ChatMessageListener(chatId: view.id),
-        chatId = view.id,
-        super(
-          ChatState.initial(view, userProfile),
-        ) {
+    required this.chatId,
+    required this.userId,
+  })  : chatController = InMemoryChatController(),
+        listener = ChatMessageListener(chatId: chatId),
+        super(ChatState.initial()) {
     _startListening();
     _dispatch();
+    _loadMessages();
+    _loadSetting();
   }
 
-  final ChatMessageListener listener;
   final String chatId;
+  final String userId;
+  final ChatMessageListener listener;
+
+  final ChatController chatController;
 
   /// The last streaming message id
   String answerStreamMessageId = '';
   String questionStreamMessageId = '';
 
+  ChatMessagePB? lastSentMessage;
+
   /// Using a temporary map to associate the real message ID with the last streaming message ID.
   ///
   /// When a message is streaming, it does not have a real message ID. To maintain the relationship
@@ -51,12 +56,18 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
   /// is 3 (AI response).
   final HashMap<String, String> temporaryMessageIDMap = HashMap();
 
+  bool isLoadingPreviousMessages = false;
+  bool hasMorePreviousMessages = true;
+  AnswerStream? answerStream;
+  int numSendMessage = 0;
+
   @override
   Future<void> close() async {
-    if (state.answerStream != null) {
-      await state.answerStream?.dispose();
-    }
+    await answerStream?.dispose();
     await listener.stop();
+    final request = ViewIdPB(value: chatId);
+    unawaited(FolderEventCloseView(request).send());
+
     return super.close();
   }
 
@@ -64,198 +75,202 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
     on<ChatEvent>(
       (event, emit) async {
         await event.when(
-          initialLoad: () {
-            final payload = LoadNextChatMessagePB(
-              chatId: state.view.id,
-              limit: Int64(10),
-            );
-            AIEventLoadNextMessage(payload).send().then(
-              (result) {
-                result.fold((list) {
-                  if (!isClosed) {
-                    final messages =
-                        list.messages.map(_createTextMessage).toList();
-                    add(ChatEvent.didLoadLatestMessages(messages));
-                  }
-                }, (err) {
-                  Log.error("Failed to load messages: $err");
-                });
-              },
-            );
-          },
           // Loading messages
-          startLoadingPrevMessage: () async {
-            Int64? beforeMessageId;
-            final oldestMessage = _getOldestMessage();
-            if (oldestMessage != null) {
-              try {
-                beforeMessageId = Int64.parseInt(oldestMessage.id);
-              } catch (e) {
-                Log.error(
-                  "Failed to parse message id: $e, messaeg_id: ${oldestMessage.id}",
-                );
-              }
+          didLoadLatestMessages: (List<Message> messages) async {
+            for (final message in messages) {
+              await chatController.insert(message, index: 0);
             }
-            _loadPrevMessage(beforeMessageId);
-            emit(
-              state.copyWith(
-                loadingPreviousStatus: const ChatLoadingState.loading(),
-              ),
-            );
-          },
-          didLoadPreviousMessages: (List<Message> messages, bool hasMore) {
-            Log.debug("did load previous messages: ${messages.length}");
-            final onetimeMessages = _getOnetimeMessages();
-            final allMessages = _permanentMessages();
-            final uniqueMessages = {...allMessages, ...messages}.toList();
 
-            uniqueMessages.insertAll(0, onetimeMessages);
-
-            emit(
-              state.copyWith(
-                messages: uniqueMessages,
-                loadingPreviousStatus: const ChatLoadingState.finish(),
-                hasMorePrevMessage: hasMore,
-              ),
-            );
+            switch (state.loadingState) {
+              case LoadChatMessageStatus.loading
+                  when chatController.messages.isEmpty:
+                emit(
+                  state.copyWith(
+                    loadingState: LoadChatMessageStatus.loadingRemote,
+                  ),
+                );
+                break;
+              case LoadChatMessageStatus.loading:
+              case LoadChatMessageStatus.loadingRemote:
+                emit(
+                  state.copyWith(loadingState: LoadChatMessageStatus.ready),
+                );
+                break;
+              default:
+                break;
+            }
           },
-          didLoadLatestMessages: (List<Message> messages) {
-            final onetimeMessages = _getOnetimeMessages();
-            final allMessages = _permanentMessages();
-            final uniqueMessages = {...allMessages, ...messages}.toList();
-            uniqueMessages.insertAll(0, onetimeMessages);
-            emit(
-              state.copyWith(
-                messages: uniqueMessages,
-                initialLoadingStatus: const ChatLoadingState.finish(),
-              ),
-            );
-          },
-          // streaming message
-          finishAnswerStreaming: () {
-            emit(
-              state.copyWith(
-                streamingState: const StreamingState.done(),
-                acceptRelatedQuestion: true,
-                canSendMessage:
-                    state.sendingState == const SendMessageState.done(),
-              ),
-            );
-          },
-          didUpdateAnswerStream: (AnswerStream stream) {
-            emit(state.copyWith(answerStream: stream));
-          },
-          stopStream: () async {
-            if (state.answerStream == null) {
+          loadPreviousMessages: () {
+            if (isLoadingPreviousMessages) {
               return;
             }
 
-            final payload = StopStreamPB(chatId: chatId);
-            await AIEventStopStream(payload).send();
-            final allMessages = _permanentMessages();
-            if (state.streamingState != const StreamingState.done()) {
-              // If the streaming is not started, remove the message from the list
-              if (!state.answerStream!.hasStarted) {
-                allMessages.removeWhere(
-                  (element) => element.id == answerStreamMessageId,
-                );
-                answerStreamMessageId = "";
-              }
+            final oldestMessage = _getOldestMessage();
 
-              // when stop stream, we will set the answer stream to null. Which means the streaming
-              // is finished or canceled.
-              emit(
-                state.copyWith(
-                  messages: allMessages,
-                  answerStream: null,
-                  streamingState: const StreamingState.done(),
-                ),
-              );
+            if (oldestMessage != null) {
+              final oldestMessageId = Int64.tryParseInt(oldestMessage.id);
+              if (oldestMessageId == null) {
+                Log.error("Failed to parse message_id: ${oldestMessage.id}");
+                return;
+              }
+              isLoadingPreviousMessages = true;
+              _loadPreviousMessages(oldestMessageId);
             }
           },
-          receiveMessage: (Message message) {
-            final allMessages = _permanentMessages();
-            // remove message with the same id
-            allMessages.removeWhere((element) => element.id == message.id);
-            allMessages.insert(0, message);
+          didLoadPreviousMessages: (messages, hasMore) {
+            Log.debug("did load previous messages: ${messages.length}");
+
+            for (final message in messages) {
+              chatController.insert(message, index: 0);
+            }
+
+            isLoadingPreviousMessages = false;
+            hasMorePreviousMessages = hasMore;
+          },
+          didFinishAnswerStream: () {
             emit(
-              state.copyWith(
-                messages: allMessages,
-              ),
+              state.copyWith(promptResponseState: PromptResponseState.ready),
             );
           },
-          startAnswerStreaming: (Message message) {
-            final allMessages = _permanentMessages();
-            allMessages.insert(0, message);
-            emit(
-              state.copyWith(
-                messages: allMessages,
-                streamingState: const StreamingState.streaming(),
-                canSendMessage: false,
-              ),
-            );
-          },
-          sendMessage: (String message, Map<String, dynamic>? metadata) async {
-            unawaited(_startStreamingMessage(message, metadata, emit));
-            final allMessages = _permanentMessages();
-            emit(
-              state.copyWith(
-                lastSentMessage: null,
-                messages: allMessages,
-                relatedQuestions: [],
-                acceptRelatedQuestion: false,
-                sendingState: const SendMessageState.sending(),
-                canSendMessage: false,
-              ),
-            );
-          },
-          finishSending: (ChatMessagePB message) {
-            emit(
-              state.copyWith(
-                lastSentMessage: message,
-                sendingState: const SendMessageState.done(),
-                canSendMessage:
-                    state.streamingState == const StreamingState.done(),
-              ),
-            );
-          },
-          failedSending: () {
-            emit(
-              state.copyWith(
-                messages: _permanentMessages()..removeAt(0),
-                sendingState: const SendMessageState.done(),
-                canSendMessage: true,
-              ),
-            );
-          },
-          // related question
-          didReceiveRelatedQuestion: (List<RelatedQuestionPB> questions) {
+          didReceiveRelatedQuestions: (List<String> questions) {
             if (questions.isEmpty) {
               return;
             }
 
-            final allMessages = _permanentMessages();
-            final message = CustomMessage(
-              metadata: OnetimeShotType.relatedQuestion.toMap(),
+            final metadata = {
+              onetimeShotType: OnetimeShotType.relatedQuestion,
+              'questions': questions,
+            };
+
+            final createdAt = DateTime.now();
+
+            final message = TextMessage(
+              id: "related_question_$createdAt",
+              text: '',
+              metadata: metadata,
               author: const User(id: systemUserId),
-              showStatus: false,
-              id: systemUserId,
+              createdAt: createdAt,
             );
-            allMessages.insert(0, message);
+
+            chatController.insert(message);
+          },
+          receiveMessage: (Message message) {
+            final oldMessage = chatController.messages
+                .firstWhereOrNull((m) => m.id == message.id);
+            if (oldMessage == null) {
+              chatController.insert(message);
+            } else {
+              chatController.update(oldMessage, message);
+            }
+          },
+          sendMessage: (
+            String message,
+            Map<String, dynamic>? metadata,
+          ) {
+            numSendMessage += 1;
+
+            _clearRelatedQuestions();
+            _startStreamingMessage(message, metadata);
+            lastSentMessage = null;
+
             emit(
               state.copyWith(
-                messages: allMessages,
-                relatedQuestions: questions,
+                promptResponseState: PromptResponseState.sendingQuestion,
               ),
             );
           },
-          clearRelatedQuestions: () {
+          finishSending: () {
             emit(
               state.copyWith(
-                relatedQuestions: [],
+                promptResponseState: PromptResponseState.streamingAnswer,
               ),
             );
           },
+          stopStream: () async {
+            if (answerStream == null) {
+              return;
+            }
+
+            // tell backend to stop
+            final payload = StopStreamPB(chatId: chatId);
+            await AIEventStopStream(payload).send();
+
+            // allow user input
+            emit(
+              state.copyWith(
+                promptResponseState: PromptResponseState.ready,
+              ),
+            );
+
+            // no need to remove old message if stream has started already
+            if (answerStream!.hasStarted) {
+              return;
+            }
+
+            // remove the non-started message from the list
+            final message = chatController.messages.lastWhereOrNull(
+              (e) => e.id == answerStreamMessageId,
+            );
+            if (message != null) {
+              await chatController.remove(message);
+            }
+
+            // set answer stream to null
+            await answerStream?.dispose();
+            answerStream = null;
+            answerStreamMessageId = '';
+          },
+          failedSending: () {
+            final lastMessage = chatController.messages.lastOrNull;
+            if (lastMessage != null) {
+              chatController.remove(lastMessage);
+            }
+            emit(
+              state.copyWith(
+                promptResponseState: PromptResponseState.ready,
+              ),
+            );
+          },
+          regenerateAnswer: (id) {
+            _clearRelatedQuestions();
+            _regenerateAnswer(id);
+            lastSentMessage = null;
+
+            emit(
+              state.copyWith(
+                promptResponseState: PromptResponseState.sendingQuestion,
+              ),
+            );
+          },
+          didReceiveChatSettings: (settings) {
+            emit(
+              state.copyWith(
+                selectedSourceIds: settings.ragIds.ragIds,
+                onlyUseSelectedSources: settings.ragOnly,
+              ),
+            );
+          },
+          updateSelectedSources: (selectedSourcesIds) async {
+            emit(state.copyWith(selectedSourceIds: selectedSourcesIds));
+            final ragIds = RepeatedRagId(ragIds: selectedSourcesIds);
+            final payload = UpdateChatSettingsPB.create()
+              ..chatId = ChatId(value: chatId)
+              ..ragIds = ragIds;
+
+            await AIEventUpdateChatSettings(payload)
+                .send()
+                .onFailure(Log.error);
+          },
+          setRagOnly: (ragOnly) async {
+            emit(state.copyWith(onlyUseSelectedSources: ragOnly));
+            final payload = UpdateChatSettingsPB.create()
+              ..chatId = ChatId(value: chatId)
+              ..ragOnly = ragOnly;
+
+            await AIEventUpdateChatSettings(payload)
+                .send()
+                .onFailure(Log.error);
+          },
         );
       },
     );
@@ -264,29 +279,31 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
   void _startListening() {
     listener.start(
       chatMessageCallback: (pb) {
-        if (!isClosed) {
-          // 3 mean message response from AI
-          if (pb.authorType == 3 && answerStreamMessageId.isNotEmpty) {
-            temporaryMessageIDMap[pb.messageId.toString()] =
-                answerStreamMessageId;
-            answerStreamMessageId = "";
-          }
-
-          // 1 mean message response from User
-          if (pb.authorType == 1 && questionStreamMessageId.isNotEmpty) {
-            temporaryMessageIDMap[pb.messageId.toString()] =
-                questionStreamMessageId;
-            questionStreamMessageId = "";
-          }
-
-          final message = _createTextMessage(pb);
-          add(ChatEvent.receiveMessage(message));
+        if (isClosed) {
+          return;
         }
+
+        // 3 mean message response from AI
+        if (pb.authorType == 3 && answerStreamMessageId.isNotEmpty) {
+          temporaryMessageIDMap[pb.messageId.toString()] =
+              answerStreamMessageId;
+          answerStreamMessageId = '';
+        }
+
+        // 1 mean message response from User
+        if (pb.authorType == 1 && questionStreamMessageId.isNotEmpty) {
+          temporaryMessageIDMap[pb.messageId.toString()] =
+              questionStreamMessageId;
+          questionStreamMessageId = '';
+        }
+
+        final message = _createTextMessage(pb);
+        add(ChatEvent.receiveMessage(message));
       },
       chatErrorMessageCallback: (err) {
         if (!isClosed) {
           Log.error("chat error: ${err.errorMessage}");
-          add(const ChatEvent.finishAnswerStreaming());
+          add(const ChatEvent.didFinishAnswerStream());
         }
       },
       latestMessageCallback: (list) {
@@ -301,65 +318,87 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
           add(ChatEvent.didLoadPreviousMessages(messages, list.hasMore));
         }
       },
-      finishStreamingCallback: () {
-        if (!isClosed) {
-          add(const ChatEvent.finishAnswerStreaming());
-          // The answer strema will bet set to null after the streaming is finished or canceled.
-          // so if the answer stream is null, we will not get related question.
-          if (state.lastSentMessage != null && state.answerStream != null) {
-            final payload = ChatMessageIdPB(
-              chatId: chatId,
-              messageId: state.lastSentMessage!.messageId,
-            );
-            //  When user message was sent to the server, we start gettting related question
-            AIEventGetRelatedQuestion(payload).send().then((result) {
-              if (!isClosed) {
-                result.fold(
-                  (list) {
-                    if (state.acceptRelatedQuestion) {
-                      add(ChatEvent.didReceiveRelatedQuestion(list.items));
-                    }
-                  },
-                  (err) {
-                    Log.error("Failed to get related question: $err");
-                  },
-                );
-              }
-            });
-          }
+      finishStreamingCallback: () async {
+        if (isClosed) {
+          return;
         }
+
+        add(const ChatEvent.didFinishAnswerStream());
+
+        // The answer stream will bet set to null after the streaming has
+        // finished, got cancelled, or errored. In this case, don't retrieve
+        // related questions.
+        if (answerStream == null || lastSentMessage == null) {
+          return;
+        }
+
+        final payload = ChatMessageIdPB(
+          chatId: chatId,
+          messageId: lastSentMessage!.messageId,
+        );
+
+        // when previous numSendMessage is not equal to current numSendMessage, it means that the user
+        // has sent a new message. So we don't need to get related questions.
+        final preNumSendMessage = numSendMessage;
+        await AIEventGetRelatedQuestion(payload).send().fold(
+          (list) {
+            if (!isClosed && preNumSendMessage == numSendMessage) {
+              add(
+                ChatEvent.didReceiveRelatedQuestions(
+                  list.items.map((e) => e.content).toList(),
+                ),
+              );
+            }
+          },
+          (err) => Log.error("Failed to get related questions: $err"),
+        );
       },
     );
   }
 
-// Returns the list of messages that are not include one-time messages.
-  List<Message> _permanentMessages() {
-    final allMessages = state.messages.where((element) {
-      return !(element.metadata?.containsKey(onetimeShotType) == true);
-    }).toList();
-
-    return allMessages;
+  void _loadSetting() async {
+    final getChatSettingsPayload =
+        AIEventGetChatSettings(ChatId(value: chatId));
+    await getChatSettingsPayload.send().fold(
+      (settings) {
+        if (!isClosed) {
+          add(ChatEvent.didReceiveChatSettings(settings: settings));
+        }
+      },
+      Log.error,
+    );
   }
 
-  List<Message> _getOnetimeMessages() {
-    final messages = state.messages.where((element) {
-      return (element.metadata?.containsKey(onetimeShotType) == true);
-    }).toList();
-
-    return messages;
+  void _loadMessages() async {
+    final loadMessagesPayload = LoadNextChatMessagePB(
+      chatId: chatId,
+      limit: Int64(10),
+    );
+    await AIEventLoadNextMessage(loadMessagesPayload).send().fold(
+      (list) {
+        if (!isClosed) {
+          final messages = list.messages.map(_createTextMessage).toList();
+          add(ChatEvent.didLoadLatestMessages(messages));
+        }
+      },
+      (err) => Log.error("Failed to load messages: $err"),
+    );
   }
 
+  bool _isOneTimeMessage(Message message) {
+    return message.metadata != null &&
+        message.metadata!.containsKey(onetimeShotType);
+  }
+
+  /// get the last message that is not a one-time message
   Message? _getOldestMessage() {
-    // get the last message that is not a one-time message
-    final message = state.messages.lastWhereOrNull((element) {
-      return !(element.metadata?.containsKey(onetimeShotType) == true);
-    });
-    return message;
+    return chatController.messages
+        .firstWhereOrNull((message) => !_isOneTimeMessage(message));
   }
 
-  void _loadPrevMessage(Int64? beforeMessageId) {
+  void _loadPreviousMessages(Int64? beforeMessageId) {
     final payload = LoadPrevChatMessagePB(
-      chatId: state.view.id,
+      chatId: chatId,
       limit: Int64(10),
       beforeMessageId: beforeMessageId,
     );
@@ -369,59 +408,57 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
   Future<void> _startStreamingMessage(
     String message,
     Map<String, dynamic>? metadata,
-    Emitter<ChatState> emit,
   ) async {
-    if (state.answerStream != null) {
-      await state.answerStream?.dispose();
-    }
+    await answerStream?.dispose();
 
-    final answerStream = AnswerStream();
+    answerStream = AnswerStream();
     final questionStream = QuestionStream();
-    add(ChatEvent.didUpdateAnswerStream(answerStream));
-
-    final payload = StreamChatPayloadPB(
-      chatId: state.view.id,
-      message: message,
-      messageType: ChatMessageTypePB.User,
-      questionStreamPort: Int64(questionStream.nativePort),
-      answerStreamPort: Int64(answerStream.nativePort),
-      metadata: await metadataPBFromMetadata(metadata),
-    );
 
+    // add a streaming question message
     final questionStreamMessage = _createQuestionStreamMessage(
       questionStream,
       metadata,
     );
     add(ChatEvent.receiveMessage(questionStreamMessage));
 
-    // Stream message to the server
-    final result = await AIEventStreamMessage(payload).send();
-    result.fold(
-      (ChatMessagePB question) {
+    final payload = StreamChatPayloadPB(
+      chatId: chatId,
+      message: message,
+      messageType: ChatMessageTypePB.User,
+      questionStreamPort: Int64(questionStream.nativePort),
+      answerStreamPort: Int64(answerStream!.nativePort),
+      metadata: await metadataPBFromMetadata(metadata),
+    );
+
+    // stream the question to the server
+    await AIEventStreamMessage(payload).send().fold(
+      (question) {
         if (!isClosed) {
-          add(ChatEvent.finishSending(question));
+          final streamAnswer = _createAnswerStreamMessage(
+            answerStream!,
+            question.messageId,
+          );
 
-          // final message = _createTextMessage(question);
-          // add(ChatEvent.receiveMessage(message));
-
-          final streamAnswer =
-              _createAnswerStreamMessage(answerStream, question.messageId);
-          add(ChatEvent.startAnswerStreaming(streamAnswer));
+          lastSentMessage = question;
+          add(const ChatEvent.finishSending());
+          add(ChatEvent.receiveMessage(streamAnswer));
         }
       },
       (err) {
         if (!isClosed) {
           Log.error("Failed to send message: ${err.msg}");
-          final metadata = OnetimeShotType.invalidSendMesssage.toMap();
-          if (err.code != ErrorCode.Internal) {
-            metadata[sendMessageErrorKey] = err.msg;
-          }
 
-          final error = CustomMessage(
+          final metadata = {
+            onetimeShotType: OnetimeShotType.error,
+            if (err.code != ErrorCode.Internal) errorMessageTextKey: err.msg,
+          };
+
+          final error = TextMessage(
+            text: '',
             metadata: metadata,
             author: const User(id: systemUserId),
-            showStatus: false,
             id: systemUserId,
+            createdAt: DateTime.now(),
           );
 
           add(const ChatEvent.failedSending());
@@ -431,24 +468,58 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
     );
   }
 
+  void _regenerateAnswer(String answerMessageIdString) async {
+    final id = temporaryMessageIDMap.entries
+            .firstWhereOrNull((e) => e.value == answerMessageIdString)
+            ?.key ??
+        answerMessageIdString;
+    final answerMessageId = Int64.tryParseInt(id);
+
+    if (answerMessageId == null) {
+      return;
+    }
+
+    await answerStream?.dispose();
+    answerStream = AnswerStream();
+
+    final payload = RegenerateResponsePB(
+      chatId: chatId,
+      answerMessageId: answerMessageId,
+      answerStreamPort: Int64(answerStream!.nativePort),
+    );
+
+    await AIEventRegenerateResponse(payload).send().fold(
+      (success) {
+        if (!isClosed) {
+          final streamAnswer = _createAnswerStreamMessage(
+            answerStream!,
+            answerMessageId - 1,
+          ).copyWith(id: answerMessageIdString);
+
+          add(ChatEvent.receiveMessage(streamAnswer));
+          add(const ChatEvent.finishSending());
+        }
+      },
+      (err) => Log.error("Failed to send message: ${err.msg}"),
+    );
+  }
+
   Message _createAnswerStreamMessage(
     AnswerStream stream,
     Int64 questionMessageId,
   ) {
-    final streamMessageId = (questionMessageId + 1).toString();
-    answerStreamMessageId = streamMessageId;
+    answerStreamMessageId = (questionMessageId + 1).toString();
 
     return TextMessage(
+      id: answerStreamMessageId,
+      text: '',
       author: User(id: "streamId:${nanoid()}"),
       metadata: {
         "$AnswerStream": stream,
         messageQuestionIdKey: questionMessageId,
         "chatId": chatId,
       },
-      id: streamMessageId,
-      showStatus: false,
-      createdAt: DateTime.now().millisecondsSinceEpoch,
-      text: '',
+      createdAt: DateTime.now(),
     );
   }
 
@@ -457,24 +528,18 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
     Map<String, dynamic>? sentMetadata,
   ) {
     final now = DateTime.now();
-    final timestamp = now.millisecondsSinceEpoch;
-    questionStreamMessageId = timestamp.toString();
-    final Map<String, dynamic> metadata = {};
 
-    // if (sentMetadata != null) {
-    //   metadata[messageMetadataJsonStringKey] = sentMetadata;
-    // }
+    questionStreamMessageId = (now.millisecondsSinceEpoch ~/ 1000).toString();
 
-    metadata["$QuestionStream"] = stream;
-    metadata["chatId"] = chatId;
-    metadata[messageChatFileListKey] =
-        chatFilesFromMessageMetadata(sentMetadata);
     return TextMessage(
-      author: User(id: state.userProfile.id.toString()),
-      metadata: metadata,
+      author: User(id: userId),
+      metadata: {
+        "$QuestionStream": stream,
+        "chatId": chatId,
+        messageChatFileListKey: chatFilesFromMessageMetadata(sentMetadata),
+      },
       id: questionStreamMessageId,
-      showStatus: false,
-      createdAt: DateTime.now().millisecondsSinceEpoch,
+      createdAt: now,
       text: '',
     );
   }
@@ -491,93 +556,89 @@ class ChatBloc extends Bloc<ChatEvent, ChatState> {
       author: User(id: message.authorId),
       id: messageId,
       text: message.content,
-      createdAt: message.createdAt.toInt() * 1000,
-      showStatus: false,
+      createdAt: message.createdAt.toDateTime(),
       metadata: {
         messageRefSourceJsonStringKey: message.metadata,
       },
     );
   }
+
+  void _clearRelatedQuestions() {
+    final relatedQuestionMessages = chatController.messages
+        .where(
+          (message) =>
+              onetimeMessageTypeFromMeta(message.metadata) ==
+              OnetimeShotType.relatedQuestion,
+        )
+        .toList();
+
+    for (final message in relatedQuestionMessages) {
+      chatController.remove(message);
+    }
+  }
 }
 
 @freezed
 class ChatEvent with _$ChatEvent {
-  const factory ChatEvent.initialLoad() = _InitialLoadMessage;
+  // chat settings
+  const factory ChatEvent.didReceiveChatSettings({
+    required ChatSettingsPB settings,
+  }) = _DidReceiveChatSettings;
+  const factory ChatEvent.updateSelectedSources({
+    required List<String> selectedSourcesIds,
+  }) = _UpdateSelectedSources;
+
+  const factory ChatEvent.setRagOnly({
+    required bool ragOnly,
+  }) = _SetRagOnly;
 
   // send message
   const factory ChatEvent.sendMessage({
     required String message,
     Map<String, dynamic>? metadata,
   }) = _SendMessage;
-  const factory ChatEvent.finishSending(ChatMessagePB message) =
-      _FinishSendMessage;
+  const factory ChatEvent.finishSending() = _FinishSendMessage;
   const factory ChatEvent.failedSending() = _FailSendMessage;
 
-// receive message
-  const factory ChatEvent.startAnswerStreaming(Message message) =
-      _StartAnswerStreaming;
-  const factory ChatEvent.receiveMessage(Message message) = _ReceiveMessage;
-  const factory ChatEvent.finishAnswerStreaming() = _FinishAnswerStreaming;
+  // regenerate
+  const factory ChatEvent.regenerateAnswer(String id) = _RegenerateAnswer;
 
-// loading messages
-  const factory ChatEvent.startLoadingPrevMessage() = _StartLoadPrevMessage;
+  // streaming answer
+  const factory ChatEvent.stopStream() = _StopStream;
+  const factory ChatEvent.didFinishAnswerStream() = _DidFinishAnswerStream;
+
+  // receive message
+  const factory ChatEvent.receiveMessage(Message message) = _ReceiveMessage;
+
+  // loading messages
+  const factory ChatEvent.didLoadLatestMessages(List<Message> messages) =
+      _DidLoadMessages;
+  const factory ChatEvent.loadPreviousMessages() = _LoadPreviousMessages;
   const factory ChatEvent.didLoadPreviousMessages(
     List<Message> messages,
     bool hasMore,
   ) = _DidLoadPreviousMessages;
-  const factory ChatEvent.didLoadLatestMessages(List<Message> messages) =
-      _DidLoadMessages;
 
-// related questions
-  const factory ChatEvent.didReceiveRelatedQuestion(
-    List<RelatedQuestionPB> questions,
+  // related questions
+  const factory ChatEvent.didReceiveRelatedQuestions(
+    List<String> questions,
   ) = _DidReceiveRelatedQueston;
-  const factory ChatEvent.clearRelatedQuestions() = _ClearRelatedQuestions;
-
-  const factory ChatEvent.didUpdateAnswerStream(
-    AnswerStream stream,
-  ) = _DidUpdateAnswerStream;
-  const factory ChatEvent.stopStream() = _StopStream;
 }
 
 @freezed
 class ChatState with _$ChatState {
   const factory ChatState({
-    required ViewPB view,
-    required List<Message> messages,
-    required UserProfilePB userProfile,
-    // When opening the chat, the initial loading status will be set as loading.
-    //After the initial loading is done, the status will be set as finished.
-    required ChatLoadingState initialLoadingStatus,
-    // When loading previous messages, the status will be set as loading.
-    // After the loading is done, the status will be set as finished.
-    required ChatLoadingState loadingPreviousStatus,
-    // When sending a user message, the status will be set as loading.
-    // After the message is sent, the status will be set as finished.
-    required StreamingState streamingState,
-    required SendMessageState sendingState,
-    // Indicate whether there are more previous messages to load.
-    required bool hasMorePrevMessage,
-    // The related questions that are received after the user message is sent.
-    required List<RelatedQuestionPB> relatedQuestions,
-    @Default(false) bool acceptRelatedQuestion,
-    // The last user message that is sent to the server.
-    ChatMessagePB? lastSentMessage,
-    AnswerStream? answerStream,
-    @Default(true) bool canSendMessage,
+    required bool onlyUseSelectedSources,
+    required List<String> selectedSourceIds,
+    required LoadChatMessageStatus loadingState,
+    required PromptResponseState promptResponseState,
   }) = _ChatState;
 
-  factory ChatState.initial(ViewPB view, UserProfilePB userProfile) =>
-      ChatState(
-        view: view,
-        messages: [],
-        userProfile: userProfile,
-        initialLoadingStatus: const ChatLoadingState.finish(),
-        loadingPreviousStatus: const ChatLoadingState.finish(),
-        streamingState: const StreamingState.done(),
-        sendingState: const SendMessageState.done(),
-        hasMorePrevMessage: true,
-        relatedQuestions: [],
+  factory ChatState.initial() => const ChatState(
+        onlyUseSelectedSources: false,
+        selectedSourceIds: [],
+        loadingState: LoadChatMessageStatus.loading,
+        promptResponseState: PromptResponseState.ready,
       );
 }
 

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_edit_document_service.dart

@@ -0,0 +1,96 @@
+import 'dart:async';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/application/document_data_pb_extension.dart';
+import 'package:appflowy/plugins/document/application/prelude.dart';
+import 'package:appflowy/shared/markdown_to_document.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_result/appflowy_result.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter_chat_core/flutter_chat_core.dart';
+
+class ChatEditDocumentService {
+  static Future<ViewPB?> saveMessagesToNewPage(
+    String chatPageName,
+    String parentViewId,
+    List<TextMessage> messages,
+  ) async {
+    if (messages.isEmpty) {
+      return null;
+    }
+
+    // Convert messages to markdown and trim the last empty newline.
+    final completeMessage = messages.map((m) => m.text).join('\n').trimRight();
+    if (completeMessage.isEmpty) {
+      return null;
+    }
+
+    final document = customMarkdownToDocument(completeMessage);
+    final initialBytes =
+        DocumentDataPBFromTo.fromDocument(document)?.writeToBuffer();
+    if (initialBytes == null) {
+      Log.error('Failed to convert messages to document');
+      return null;
+    }
+
+    return ViewBackendService.createView(
+      name: LocaleKeys.chat_addToNewPageName.tr(args: [chatPageName]),
+      layoutType: ViewLayoutPB.Document,
+      parentViewId: parentViewId,
+      initialDataBytes: initialBytes,
+    ).toNullable();
+  }
+
+  static Future<void> addMessageToPage(
+    String documentId,
+    TextMessage message,
+  ) async {
+    if (message.text.isEmpty) {
+      Log.error('Message is empty');
+      return;
+    }
+
+    final bloc = DocumentBloc(
+      documentId: documentId,
+      saveToBlocMap: false,
+    )..add(const DocumentEvent.initial());
+
+    if (bloc.state.editorState == null) {
+      await bloc.stream.firstWhere((state) => state.editorState != null);
+    }
+
+    final editorState = bloc.state.editorState;
+    if (editorState == null) {
+      Log.error("Can't get EditorState of document");
+      return;
+    }
+
+    final messageDocument = customMarkdownToDocument(message.text);
+    if (messageDocument.isEmpty) {
+      Log.error('Failed to convert message to document');
+      return;
+    }
+
+    final lastNodeOrNull = editorState.document.root.children.lastOrNull;
+
+    final rootIsEmpty = lastNodeOrNull == null;
+    final isLastLineEmpty = lastNodeOrNull?.children.isNotEmpty == false &&
+        lastNodeOrNull?.delta?.isNotEmpty == false;
+
+    final nodes = [
+      if (rootIsEmpty || !isLastLineEmpty) paragraphNode(),
+      ...messageDocument.root.children,
+    ];
+    final insertPath = rootIsEmpty || listEquals(lastNodeOrNull.path, const [0])
+        ? const [0]
+        : lastNodeOrNull.path.next;
+
+    final transaction = editorState.transaction..insertNodes(insertPath, nodes);
+    await editorState.apply(transaction);
+    await bloc.close();
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_entity.dart

@@ -1,8 +1,8 @@
 import 'dart:io';
 
-import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-ai/entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:equatable/equatable.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:path/path.dart' as path;
@@ -10,7 +10,7 @@ import 'package:path/path.dart' as path;
 part 'chat_entity.g.dart';
 part 'chat_entity.freezed.dart';
 
-const sendMessageErrorKey = "sendMessageError";
+const errorMessageTextKey = "errorMessageText";
 const systemUserId = "system";
 const aiResponseUserId = "0";
 
@@ -40,16 +40,24 @@ class ChatMessageRefSource {
   Map<String, dynamic> toJson() => _$ChatMessageRefSourceToJson(this);
 }
 
-@freezed
-class StreamingState with _$StreamingState {
-  const factory StreamingState.streaming() = _Streaming;
-  const factory StreamingState.done({FlowyError? error}) = _StreamDone;
+@JsonSerializable()
+class AIChatProgress {
+  AIChatProgress({
+    required this.step,
+  });
+
+  factory AIChatProgress.fromJson(Map<String, dynamic> json) =>
+      _$AIChatProgressFromJson(json);
+
+  final String step;
+
+  Map<String, dynamic> toJson() => _$AIChatProgressToJson(this);
 }
 
-@freezed
-class SendMessageState with _$SendMessageState {
-  const factory SendMessageState.sending() = _Sending;
-  const factory SendMessageState.done({FlowyError? error}) = _SendDone;
+enum PromptResponseState {
+  ready,
+  sendingQuestion,
+  streamingAnswer,
 }
 
 class ChatFile extends Equatable {
@@ -68,19 +76,19 @@ class ChatFile extends Equatable {
     final fileName = path.basename(filePath);
     final extension = path.extension(filePath).toLowerCase();
 
-    ChatMessageMetaTypePB fileType;
+    ContextLoaderTypePB fileType;
     switch (extension) {
       case '.pdf':
-        fileType = ChatMessageMetaTypePB.PDF;
+        fileType = ContextLoaderTypePB.PDF;
         break;
       case '.txt':
-        fileType = ChatMessageMetaTypePB.Txt;
+        fileType = ContextLoaderTypePB.Txt;
         break;
       case '.md':
-        fileType = ChatMessageMetaTypePB.Markdown;
+        fileType = ContextLoaderTypePB.Markdown;
         break;
       default:
-        fileType = ChatMessageMetaTypePB.UnknownMetaType;
+        fileType = ContextLoaderTypePB.UnknownLoaderType;
     }
 
     return ChatFile(
@@ -92,13 +100,14 @@ class ChatFile extends Equatable {
 
   final String filePath;
   final String fileName;
-  final ChatMessageMetaTypePB fileType;
+  final ContextLoaderTypePB fileType;
 
   @override
   List<Object?> get props => [filePath];
 }
 
-typedef ChatInputFileMetadata = Map<String, ChatFile>;
+typedef ChatFileMap = Map<String, ChatFile>;
+typedef ChatMentionedPageMap = Map<String, ViewPB>;
 
 @freezed
 class ChatLoadingState with _$ChatLoadingState {
@@ -112,45 +121,19 @@ extension ChatLoadingStateExtension on ChatLoadingState {
 }
 
 enum OnetimeShotType {
-  unknown,
   sendingMessage,
   relatedQuestion,
-  invalidSendMesssage,
+  error,
 }
 
 const onetimeShotType = "OnetimeShotType";
 
-extension OnetimeMessageTypeExtension on OnetimeShotType {
-  static OnetimeShotType fromString(String value) {
-    switch (value) {
-      case 'OnetimeShotType.sendingMessage':
-        return OnetimeShotType.sendingMessage;
-      case 'OnetimeShotType.relatedQuestion':
-        return OnetimeShotType.relatedQuestion;
-      case 'OnetimeShotType.invalidSendMesssage':
-        return OnetimeShotType.invalidSendMesssage;
-      default:
-        Log.error('Unknown OnetimeShotType: $value');
-        return OnetimeShotType.unknown;
-    }
-  }
-
-  Map<String, dynamic> toMap() {
-    return {
-      onetimeShotType: toString(),
-    };
-  }
-}
-
 OnetimeShotType? onetimeMessageTypeFromMeta(Map<String, dynamic>? metadata) {
-  if (metadata == null) {
-    return null;
-  }
+  return metadata?[onetimeShotType];
+}
 
-  for (final entry in metadata.entries) {
-    if (entry.key == onetimeShotType) {
-      return OnetimeMessageTypeExtension.fromString(entry.value as String);
-    }
-  }
-  return null;
+enum LoadChatMessageStatus {
+  loading,
+  loadingRemote,
+  ready,
 }

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_action_bloc.dart

@@ -1,217 +0,0 @@
-import 'dart:async';
-
-import 'package:appflowy/workspace/application/view/view_ext.dart';
-import 'package:appflowy/workspace/application/view/view_service.dart';
-import 'package:appflowy_backend/log.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
-import 'package:bloc/bloc.dart';
-import 'package:equatable/equatable.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter/widgets.dart';
-import 'package:freezed_annotation/freezed_annotation.dart';
-
-import 'chat_input_action_control.dart';
-
-part 'chat_input_action_bloc.freezed.dart';
-
-class ChatInputActionBloc
-    extends Bloc<ChatInputActionEvent, ChatInputActionState> {
-  ChatInputActionBloc({required this.chatId})
-      : super(const ChatInputActionState()) {
-    on<ChatInputActionEvent>(_handleEvent);
-  }
-
-  final String chatId;
-
-  Future<void> _handleEvent(
-    ChatInputActionEvent event,
-    Emitter<ChatInputActionState> emit,
-  ) async {
-    await event.when(
-      started: () async {
-        unawaited(
-          ViewBackendService.getAllViews().then(
-            (result) {
-              final views = result
-                      .toNullable()
-                      ?.items
-                      .where(
-                        (v) =>
-                            v.layout.isDocumentView &&
-                            !v.isSpace &&
-                            v.parentViewId.isNotEmpty,
-                      )
-                      .toList() ??
-                  [];
-              if (!isClosed) {
-                add(ChatInputActionEvent.refreshViews(views));
-              }
-            },
-          ),
-        );
-      },
-      refreshViews: (List<ViewPB> views) {
-        final List<ViewActionPage> pages = _filterPages(
-          views,
-          state.selectedPages,
-          state.filter,
-        );
-        emit(
-          state.copyWith(
-            views: views,
-            pages: pages,
-            indicator: const ChatActionMenuIndicator.ready(),
-          ),
-        );
-      },
-      filter: (String filter) {
-        Log.debug("Filter chat input pages: $filter");
-        final List<ViewActionPage> pages = _filterPages(
-          state.views,
-          state.selectedPages,
-          filter,
-        );
-
-        emit(state.copyWith(pages: pages, filter: filter));
-      },
-      handleKeyEvent: (PhysicalKeyboardKey physicalKey) {
-        emit(
-          state.copyWith(
-            keyboardKey: ChatInputKeyboardEvent(physicalKey: physicalKey),
-          ),
-        );
-      },
-      addPage: (ChatInputMention page) {
-        if (!state.selectedPages.any((p) => p.pageId == page.pageId)) {
-          final List<ViewActionPage> pages = _filterPages(
-            state.views,
-            state.selectedPages,
-            state.filter,
-          );
-          emit(
-            state.copyWith(
-              pages: pages,
-              selectedPages: [...state.selectedPages, page],
-            ),
-          );
-        }
-      },
-      removePage: (String text) {
-        final List<ChatInputMention> selectedPages =
-            List.from(state.selectedPages);
-        selectedPages.retainWhere((t) => !text.contains(t.title));
-
-        final List<ViewActionPage> allPages = _filterPages(
-          state.views,
-          state.selectedPages,
-          state.filter,
-        );
-
-        emit(
-          state.copyWith(
-            selectedPages: selectedPages,
-            pages: allPages,
-          ),
-        );
-      },
-      clear: () {
-        emit(
-          state.copyWith(
-            selectedPages: [],
-            filter: "",
-          ),
-        );
-      },
-    );
-  }
-}
-
-List<ViewActionPage> _filterPages(
-  List<ViewPB> views,
-  List<ChatInputMention> selectedPages,
-  String filter,
-) {
-  final pages = views
-      .map(
-        (v) => ViewActionPage(view: v),
-      )
-      .toList();
-
-  pages.retainWhere((page) {
-    return !selectedPages.contains(page);
-  });
-
-  if (filter.isEmpty) {
-    return pages;
-  }
-
-  return pages
-      .where(
-        (v) => v.title.toLowerCase().contains(filter.toLowerCase()),
-      )
-      .toList();
-}
-
-class ViewActionPage extends ChatInputMention {
-  ViewActionPage({required this.view});
-
-  final ViewPB view;
-
-  @override
-  String get pageId => view.id;
-
-  @override
-  String get title => view.name;
-
-  @override
-  List<Object?> get props => [pageId];
-
-  @override
-  dynamic get page => view;
-
-  @override
-  Widget get icon => view.defaultIcon();
-}
-
-@freezed
-class ChatInputActionEvent with _$ChatInputActionEvent {
-  const factory ChatInputActionEvent.started() = _Started;
-  const factory ChatInputActionEvent.refreshViews(List<ViewPB> views) =
-      _RefreshViews;
-  const factory ChatInputActionEvent.filter(String filter) = _Filter;
-  const factory ChatInputActionEvent.handleKeyEvent(
-    PhysicalKeyboardKey keyboardKey,
-  ) = _HandleKeyEvent;
-  const factory ChatInputActionEvent.addPage(ChatInputMention page) = _AddPage;
-  const factory ChatInputActionEvent.removePage(String text) = _RemovePage;
-  const factory ChatInputActionEvent.clear() = _Clear;
-}
-
-@freezed
-class ChatInputActionState with _$ChatInputActionState {
-  const factory ChatInputActionState({
-    @Default([]) List<ViewPB> views,
-    @Default([]) List<ChatInputMention> pages,
-    @Default([]) List<ChatInputMention> selectedPages,
-    @Default("") String filter,
-    ChatInputKeyboardEvent? keyboardKey,
-    @Default(ChatActionMenuIndicator.loading())
-    ChatActionMenuIndicator indicator,
-  }) = _ChatInputActionState;
-}
-
-class ChatInputKeyboardEvent extends Equatable {
-  ChatInputKeyboardEvent({required this.physicalKey});
-
-  final PhysicalKeyboardKey physicalKey;
-  final int timestamp = DateTime.now().millisecondsSinceEpoch;
-
-  @override
-  List<Object?> get props => [timestamp];
-}
-
-@freezed
-class ChatActionMenuIndicator with _$ChatActionMenuIndicator {
-  const factory ChatActionMenuIndicator.ready() = _Ready;
-  const factory ChatActionMenuIndicator.loading() = _Loading;
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_action_control.dart

@@ -1,172 +0,0 @@
-import 'package:appflowy/plugins/ai_chat/application/chat_input_action_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/chat_input_action_menu.dart';
-import 'package:appflowy_backend/log.dart';
-import 'package:equatable/equatable.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
-abstract class ChatInputMention extends Equatable {
-  String get title;
-  String get pageId;
-  dynamic get page;
-  Widget get icon;
-}
-
-/// Key: the key is the pageId
-typedef ChatInputMentionMetadata = Map<String, ChatInputMention>;
-
-class ChatInputActionControl extends ChatActionHandler {
-  ChatInputActionControl({
-    required this.textController,
-    required this.textFieldFocusNode,
-    required this.chatId,
-  }) : _commandBloc = ChatInputActionBloc(chatId: chatId);
-
-  final TextEditingController textController;
-  final ChatInputActionBloc _commandBloc;
-  final FocusNode textFieldFocusNode;
-  final String chatId;
-
-  // Private attributes
-  String _atText = "";
-  String _prevText = "";
-  String _showMenuText = "";
-
-  // Getter
-  List<String> get tags =>
-      _commandBloc.state.selectedPages.map((e) => e.title).toList();
-
-  ChatInputMentionMetadata consumeMetaData() {
-    final metadata = _commandBloc.state.selectedPages.fold(
-      <String, ChatInputMention>{},
-      (map, page) => map..putIfAbsent(page.pageId, () => page),
-    );
-
-    if (metadata.isNotEmpty) {
-      _commandBloc.add(const ChatInputActionEvent.clear());
-    }
-
-    return metadata;
-  }
-
-  void handleKeyEvent(KeyEvent event) {
-    // ignore: deprecated_member_use
-    if (event is KeyDownEvent || event is RawKeyDownEvent) {
-      _commandBloc.add(ChatInputActionEvent.handleKeyEvent(event.physicalKey));
-    }
-  }
-
-  bool canHandleKeyEvent(KeyEvent event) {
-    return _showMenuText.isNotEmpty &&
-        <PhysicalKeyboardKey>{
-          PhysicalKeyboardKey.arrowDown,
-          PhysicalKeyboardKey.arrowUp,
-          PhysicalKeyboardKey.enter,
-          PhysicalKeyboardKey.escape,
-        }.contains(event.physicalKey);
-  }
-
-  void dispose() {
-    _commandBloc.close();
-  }
-
-  @override
-  void onSelected(ChatInputMention page) {
-    _commandBloc.add(ChatInputActionEvent.addPage(page));
-    textController.text = "$_showMenuText${page.title}";
-
-    onExit();
-  }
-
-  @override
-  void onExit() {
-    _atText = "";
-    _showMenuText = "";
-    _prevText = "";
-    _commandBloc.add(const ChatInputActionEvent.filter(""));
-  }
-
-  @override
-  void onEnter() {
-    _commandBloc.add(const ChatInputActionEvent.started());
-    _showMenuText = textController.text;
-  }
-
-  @override
-  double actionMenuOffsetX() {
-    final TextPosition textPosition = textController.selection.extent;
-    if (textFieldFocusNode.context == null) {
-      return 0;
-    }
-
-    final RenderBox renderBox =
-        textFieldFocusNode.context?.findRenderObject() as RenderBox;
-
-    final TextPainter textPainter = TextPainter(
-      text: TextSpan(text: textController.text),
-      textDirection: TextDirection.ltr,
-    );
-    textPainter.layout(
-      minWidth: renderBox.size.width,
-      maxWidth: renderBox.size.width,
-    );
-
-    final Offset caretOffset =
-        textPainter.getOffsetForCaret(textPosition, Rect.zero);
-    final List<TextBox> boxes = textPainter.getBoxesForSelection(
-      TextSelection(
-        baseOffset: textPosition.offset,
-        extentOffset: textPosition.offset,
-      ),
-    );
-
-    if (boxes.isNotEmpty) {
-      return boxes.last.right;
-    }
-    return caretOffset.dx;
-  }
-
-  bool onTextChanged(String text) {
-    final String inputText = text;
-    if (_prevText.length > inputText.length) {
-      final deleteStartIndex = textController.selection.baseOffset;
-      final deleteEndIndex =
-          _prevText.length - inputText.length + deleteStartIndex;
-      final deletedText = _prevText.substring(deleteStartIndex, deleteEndIndex);
-      _commandBloc.add(ChatInputActionEvent.removePage(deletedText));
-    }
-
-    // If the action menu is shown, filter the views
-    if (_showMenuText.isNotEmpty) {
-      if (text.length >= _showMenuText.length) {
-        final filterText = inputText.substring(_showMenuText.length);
-        _commandBloc.add(ChatInputActionEvent.filter(filterText));
-      }
-
-      // If the text change from "xxx @"" to "xxx", which means user delete the @, we should hide the action menu
-      if (_atText.isNotEmpty && !inputText.contains(_atText)) {
-        _commandBloc.add(
-          const ChatInputActionEvent.handleKeyEvent(PhysicalKeyboardKey.escape),
-        );
-      }
-    } else {
-      final isTypingNewAt =
-          text.endsWith("@") && _prevText.length < text.length;
-      if (isTypingNewAt) {
-        _atText = text;
-        _prevText = text;
-        return true;
-      }
-    }
-    _prevText = text;
-    return false;
-  }
-
-  @override
-  void onFilter(String filter) {
-    Log.info("filter: $filter");
-  }
-
-  @override
-  ChatInputActionBloc get commandBloc => _commandBloc;
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_input_control_cubit.dart

@@ -0,0 +1,246 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/application/view/prelude.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:appflowy_result/appflowy_result.dart';
+import 'package:bloc/bloc.dart';
+import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/services.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'chat_input_control_cubit.freezed.dart';
+
+class ChatInputControlCubit extends Cubit<ChatInputControlState> {
+  ChatInputControlCubit() : super(const ChatInputControlState.loading());
+
+  final List<ViewPB> allViews = [];
+  final List<String> selectedViewIds = [];
+
+  /// used when mentioning a page
+  ///
+  /// the text position after the @ character
+  int _filterStartPosition = -1;
+
+  /// used when mentioning a page
+  ///
+  /// the text position after the @ character, at the end of the filter
+  int _filterEndPosition = -1;
+
+  /// used when mentioning a page
+  ///
+  /// the entire string input in the prompt
+  String _inputText = "";
+
+  /// used when mentioning a page
+  ///
+  /// the current filtering text, after the @ characater
+  String _filter = "";
+
+  String get inputText => _inputText;
+  int get filterStartPosition => _filterStartPosition;
+  int get filterEndPosition => _filterEndPosition;
+
+  void refreshViews() async {
+    final newViews = await ViewBackendService.getAllViews().fold(
+      (result) {
+        return result.items
+            .where(
+              (v) =>
+                  !v.isSpace &&
+                  v.layout.isDocumentView &&
+                  v.parentViewId != v.id,
+            )
+            .toList();
+      },
+      (err) {
+        Log.error(err);
+        return <ViewPB>[];
+      },
+    );
+    allViews
+      ..clear()
+      ..addAll(newViews);
+
+    // update visible views
+    newViews.retainWhere((v) => !selectedViewIds.contains(v.id));
+    if (_filter.isNotEmpty) {
+      newViews.retainWhere(
+        (v) {
+          final nonEmptyName = v.name.isEmpty
+              ? LocaleKeys.document_title_placeholder.tr()
+              : v.name;
+          return nonEmptyName.toLowerCase().contains(_filter);
+        },
+      );
+    }
+    final focusedViewIndex = newViews.isEmpty ? -1 : 0;
+    emit(
+      ChatInputControlState.ready(
+        visibleViews: newViews,
+        focusedViewIndex: focusedViewIndex,
+      ),
+    );
+  }
+
+  void startSearching(TextEditingValue textEditingValue) {
+    _filterStartPosition =
+        _filterEndPosition = textEditingValue.selection.baseOffset;
+    _filter = "";
+    _inputText = textEditingValue.text;
+    state.maybeMap(
+      ready: (readyState) {
+        emit(
+          readyState.copyWith(
+            visibleViews: allViews,
+            focusedViewIndex: allViews.isEmpty ? -1 : 0,
+          ),
+        );
+      },
+      orElse: () {},
+    );
+  }
+
+  void reset() {
+    _filterStartPosition = _filterEndPosition = -1;
+    _filter = _inputText = "";
+    state.maybeMap(
+      ready: (readyState) {
+        emit(
+          readyState.copyWith(
+            visibleViews: allViews,
+            focusedViewIndex: allViews.isEmpty ? -1 : 0,
+          ),
+        );
+      },
+      orElse: () {},
+    );
+  }
+
+  void updateFilter(
+    String newInputText,
+    String newFilter, {
+    int? newEndPosition,
+  }) {
+    updateInputText(newInputText);
+
+    // filter the views
+    _filter = newFilter.toLowerCase();
+    if (newEndPosition != null) {
+      _filterEndPosition = newEndPosition;
+    }
+
+    final newVisibleViews =
+        allViews.where((v) => !selectedViewIds.contains(v.id)).toList();
+
+    if (_filter.isNotEmpty) {
+      newVisibleViews.retainWhere(
+        (v) {
+          final nonEmptyName = v.name.isEmpty
+              ? LocaleKeys.document_title_placeholder.tr()
+              : v.name;
+          return nonEmptyName.toLowerCase().contains(_filter);
+        },
+      );
+    }
+
+    state.maybeWhen(
+      ready: (_, oldFocusedIndex) {
+        final newFocusedViewIndex = oldFocusedIndex < newVisibleViews.length
+            ? oldFocusedIndex
+            : (newVisibleViews.isEmpty ? -1 : 0);
+        emit(
+          ChatInputControlState.ready(
+            visibleViews: newVisibleViews,
+            focusedViewIndex: newFocusedViewIndex,
+          ),
+        );
+      },
+      orElse: () {},
+    );
+  }
+
+  void updateInputText(String newInputText) {
+    _inputText = newInputText;
+
+    // input text is changed, see if there are any deletions
+    selectedViewIds.retainWhere(_inputText.contains);
+    _notifyUpdateSelectedViews();
+  }
+
+  void updateSelectionUp() {
+    state.maybeMap(
+      ready: (readyState) {
+        final newIndex = readyState.visibleViews.isEmpty
+            ? -1
+            : (readyState.focusedViewIndex - 1) %
+                readyState.visibleViews.length;
+        emit(
+          readyState.copyWith(focusedViewIndex: newIndex),
+        );
+      },
+      orElse: () {},
+    );
+  }
+
+  void updateSelectionDown() {
+    state.maybeMap(
+      ready: (readyState) {
+        final newIndex = readyState.visibleViews.isEmpty
+            ? -1
+            : (readyState.focusedViewIndex + 1) %
+                readyState.visibleViews.length;
+        emit(
+          readyState.copyWith(focusedViewIndex: newIndex),
+        );
+      },
+      orElse: () {},
+    );
+  }
+
+  void selectPage(ViewPB view) {
+    selectedViewIds.add(view.id);
+    _notifyUpdateSelectedViews();
+    reset();
+  }
+
+  String formatIntputText(final String input) {
+    String result = input;
+    for (final viewId in selectedViewIds) {
+      if (!result.contains(viewId)) {
+        continue;
+      }
+      final view = allViews.firstWhereOrNull((view) => view.id == viewId);
+      if (view != null) {
+        final nonEmptyName = view.name.isEmpty
+            ? LocaleKeys.document_title_placeholder.tr()
+            : view.name;
+        result = result.replaceAll(RegExp(viewId), nonEmptyName);
+      }
+    }
+    return result;
+  }
+
+  void _notifyUpdateSelectedViews() {
+    final stateCopy = state;
+    final selectedViews =
+        allViews.where((view) => selectedViewIds.contains(view.id)).toList();
+    emit(ChatInputControlState.updateSelectedViews(selectedViews));
+    emit(stateCopy);
+  }
+}
+
+@freezed
+class ChatInputControlState with _$ChatInputControlState {
+  const factory ChatInputControlState.loading() = _Loading;
+
+  const factory ChatInputControlState.ready({
+    required List<ViewPB> visibleViews,
+    required int focusedViewIndex,
+  }) = _Ready;
+
+  const factory ChatInputControlState.updateSelectedViews(
+    List<ViewPB> selectedViews,
+  ) = _UpdateOneShot;
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_message_service.dart

@@ -1,13 +1,13 @@
 import 'dart:convert';
 
 import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_input_action_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-ai/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-document/entities.pb.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
+import 'package:appflowy_result/appflowy_result.dart';
 import 'package:nanoid/nanoid.dart';
 
 /// Indicate file source from appflowy document
@@ -66,78 +66,101 @@ ChatFile? chatFileFromMap(Map<String, dynamic>? map) {
   return ChatFile.fromFilePath(filePath);
 }
 
-List<ChatMessageRefSource> messageReferenceSource(String? s) {
-  if (s == null || s.isEmpty || s == "null") {
-    return [];
+class MetadataCollection {
+  MetadataCollection({
+    required this.sources,
+    this.progress,
+  });
+  final List<ChatMessageRefSource> sources;
+  final AIChatProgress? progress;
+}
+
+MetadataCollection parseMetadata(String? s) {
+  if (s == null || s.trim().isEmpty || s.toLowerCase() == "null") {
+    return MetadataCollection(sources: []);
   }
 
   final List<ChatMessageRefSource> metadata = [];
-  try {
-    final metadataJson = jsonDecode(s);
-    if (metadataJson == null) {
-      Log.warn("metadata is null");
-      return [];
-    }
-    // [{"id":null,"name":"The Five Dysfunctions of a Team.pdf","source":"/Users/weidongfu/Desktop/The Five Dysfunctions of a Team.pdf"}]
+  AIChatProgress? progress;
 
-    if (metadataJson is Map<String, dynamic>) {
-      if (metadataJson.isNotEmpty) {
-        metadata.add(ChatMessageRefSource.fromJson(metadataJson));
-      }
-    } else if (metadataJson is List) {
-      metadata.addAll(
-        metadataJson.map(
-          (e) => ChatMessageRefSource.fromJson(e as Map<String, dynamic>),
-        ),
-      );
-    } else {
-      Log.error("Invalid metadata: $metadataJson");
+  try {
+    final dynamic decodedJson = jsonDecode(s);
+    if (decodedJson == null) {
+      return MetadataCollection(sources: []);
     }
-  } catch (e) {
-    Log.error("Failed to parse metadata: $e");
+
+    void processMap(Map<String, dynamic> map) {
+      if (map.containsKey("step") && map["step"] != null) {
+        progress = AIChatProgress.fromJson(map);
+      } else if (map.containsKey("id") && map["id"] != null) {
+        metadata.add(ChatMessageRefSource.fromJson(map));
+      } else {
+        Log.info("Unsupported metadata format: $map");
+      }
+    }
+
+    if (decodedJson is Map<String, dynamic>) {
+      processMap(decodedJson);
+    } else if (decodedJson is List) {
+      for (final element in decodedJson) {
+        if (element is Map<String, dynamic>) {
+          processMap(element);
+        } else {
+          Log.error("Invalid metadata element: $element");
+        }
+      }
+    } else {
+      Log.error("Invalid metadata format: $decodedJson");
+    }
+  } catch (e, stacktrace) {
+    Log.error("Failed to parse metadata: $e, input: $s");
+    Log.debug(stacktrace.toString());
   }
 
-  return metadata;
+  return MetadataCollection(sources: metadata, progress: progress);
 }
 
 Future<List<ChatMessageMetaPB>> metadataPBFromMetadata(
   Map<String, dynamic>? map,
 ) async {
+  if (map == null) return [];
+
   final List<ChatMessageMetaPB> metadata = [];
-  if (map != null) {
-    for (final entry in map.entries) {
-      if (entry.value is ViewActionPage) {
-        if (entry.value.page is ViewPB) {
-          final view = entry.value.page as ViewPB;
-          if (view.layout.isDocumentView) {
-            final payload = OpenDocumentPayloadPB(documentId: view.id);
-            final result = await DocumentEventGetDocumentText(payload).send();
-            result.fold((pb) {
-              metadata.add(
-                ChatMessageMetaPB(
-                  id: view.id,
-                  name: view.name,
-                  data: pb.text,
-                  dataType: ChatMessageMetaTypePB.Txt,
-                  source: appflowySource,
-                ),
-              );
-            }, (err) {
-              Log.error('Failed to get document text: $err');
-            });
-          }
-        }
-      } else if (entry.value is ChatFile) {
+
+  for (final value in map.values) {
+    switch (value) {
+      case ViewPB _ when value.layout.isDocumentView:
+        final payload = OpenDocumentPayloadPB(documentId: value.id);
+        await DocumentEventGetDocumentText(payload).send().fold(
+          (pb) {
+            metadata.add(
+              ChatMessageMetaPB(
+                id: value.id,
+                name: value.name,
+                data: pb.text,
+                loaderType: ContextLoaderTypePB.Txt,
+                source: appflowySource,
+              ),
+            );
+          },
+          (err) => Log.error('Failed to get document text: $err'),
+        );
+        break;
+      case ChatFile(
+          filePath: final filePath,
+          fileName: final fileName,
+          fileType: final fileType,
+        ):
         metadata.add(
           ChatMessageMetaPB(
             id: nanoid(8),
-            name: entry.value.fileName,
-            data: entry.value.filePath,
-            dataType: entry.value.fileType,
-            source: entry.value.filePath,
+            name: fileName,
+            data: filePath,
+            loaderType: fileType,
+            source: filePath,
           ),
         );
-      }
+        break;
     }
   }
 

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_message_stream.dart

@@ -2,7 +2,6 @@ import 'dart:async';
 import 'dart:ffi';
 import 'dart:isolate';
 
-import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
 import 'package:appflowy/plugins/ai_chat/application/chat_message_service.dart';
 
 class AnswerStream {
@@ -14,34 +13,25 @@ class AnswerStream {
           _hasStarted = true;
           final newText = event.substring(5);
           _text += newText;
-          if (_onData != null) {
-            _onData!(_text);
-          }
+          _onData?.call(_text);
         } else if (event.startsWith("error:")) {
           _error = event.substring(5);
-          if (_onError != null) {
-            _onError!(_error!);
-          }
+          _onError?.call(_error!);
         } else if (event.startsWith("metadata:")) {
           if (_onMetadata != null) {
             final s = event.substring(9);
-            _onMetadata!(messageReferenceSource(s));
+            _onMetadata!(parseMetadata(s));
           }
         } else if (event == "AI_RESPONSE_LIMIT") {
-          if (_onAIResponseLimit != null) {
-            _onAIResponseLimit!();
-          }
+          _aiLimitReached = true;
+          _onAIResponseLimit?.call();
         }
       },
       onDone: () {
-        if (_onEnd != null) {
-          _onEnd!();
-        }
+        _onEnd?.call();
       },
       onError: (error) {
-        if (_onError != null) {
-          _onError!(error.toString());
-        }
+        _onError?.call(error.toString());
       },
     );
   }
@@ -50,6 +40,7 @@ class AnswerStream {
   final StreamController<String> _controller = StreamController.broadcast();
   late StreamSubscription<String> _subscription;
   bool _hasStarted = false;
+  bool _aiLimitReached = false;
   String? _error;
   String _text = "";
 
@@ -59,10 +50,11 @@ class AnswerStream {
   void Function()? _onEnd;
   void Function(String error)? _onError;
   void Function()? _onAIResponseLimit;
-  void Function(List<ChatMessageRefSource> metadata)? _onMetadata;
+  void Function(MetadataCollection metadataCollection)? _onMetadata;
 
   int get nativePort => _port.sendPort.nativePort;
   bool get hasStarted => _hasStarted;
+  bool get aiLimitReached => _aiLimitReached;
   String? get error => _error;
   String get text => _text;
 
@@ -78,7 +70,7 @@ class AnswerStream {
     void Function()? onEnd,
     void Function(String error)? onError,
     void Function()? onAIResponseLimit,
-    void Function(List<ChatMessageRefSource> metadata)? onMetadata,
+    void Function(MetadataCollection metadata)? onMetadata,
   }) {
     _onData = onData;
     _onStart = onStart;
@@ -87,9 +79,7 @@ class AnswerStream {
     _onAIResponseLimit = onAIResponseLimit;
     _onMetadata = onMetadata;
 
-    if (_onStart != null) {
-      _onStart!();
-    }
+    _onStart?.call();
   }
 }
 

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_select_sources_cubit.dart

@@ -0,0 +1,399 @@
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
+import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
+import 'package:appflowy_result/appflowy_result.dart';
+import 'package:bloc/bloc.dart';
+import 'package:flutter/foundation.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+part 'chat_select_sources_cubit.freezed.dart';
+
+const int _kMaxSelectedParentPageCount = 3;
+
+enum SourceSelectedStatus {
+  unselected,
+  selected,
+  partiallySelected;
+
+  bool get isUnselected => this == unselected;
+  bool get isSelected => this == selected;
+  bool get isPartiallySelected => this == partiallySelected;
+}
+
+class ChatSource {
+  ChatSource({
+    required this.view,
+    required this.parentView,
+    required this.children,
+    required bool isExpanded,
+    required SourceSelectedStatus selectedStatus,
+    required IgnoreViewType ignoreStatus,
+  })  : isExpandedNotifier = ValueNotifier(isExpanded),
+        selectedStatusNotifier = ValueNotifier(selectedStatus),
+        ignoreStatusNotifier = ValueNotifier(ignoreStatus);
+
+  final ViewPB view;
+  final ViewPB? parentView;
+  final List<ChatSource> children;
+  final ValueNotifier<bool> isExpandedNotifier;
+  final ValueNotifier<SourceSelectedStatus> selectedStatusNotifier;
+  final ValueNotifier<IgnoreViewType> ignoreStatusNotifier;
+
+  bool get isExpanded => isExpandedNotifier.value;
+  SourceSelectedStatus get selectedStatus => selectedStatusNotifier.value;
+  IgnoreViewType get ignoreStatus => ignoreStatusNotifier.value;
+
+  void toggleIsExpanded() {
+    isExpandedNotifier.value = !isExpanded;
+  }
+
+  ChatSource copy() {
+    return ChatSource(
+      view: view,
+      parentView: parentView,
+      children: children.map<ChatSource>((child) => child.copy()).toList(),
+      ignoreStatus: ignoreStatus,
+      isExpanded: isExpanded,
+      selectedStatus: selectedStatus,
+    );
+  }
+
+  ChatSource? findChildBySourceId(String sourceId) {
+    if (view.id == sourceId) {
+      return this;
+    }
+    for (final child in children) {
+      final childResult = child.findChildBySourceId(sourceId);
+      if (childResult != null) {
+        return childResult;
+      }
+    }
+    return null;
+  }
+
+  void resetIgnoreViewTypeRecursive() {
+    ignoreStatusNotifier.value = view.layout.isDocumentView
+        ? IgnoreViewType.none
+        : IgnoreViewType.disable;
+
+    for (final child in children) {
+      child.resetIgnoreViewTypeRecursive();
+    }
+  }
+
+  void updateIgnoreViewTypeRecursive(IgnoreViewType newIgnoreViewType) {
+    ignoreStatusNotifier.value = newIgnoreViewType;
+    for (final child in children) {
+      child.updateIgnoreViewTypeRecursive(newIgnoreViewType);
+    }
+  }
+
+  void dispose() {
+    for (final child in children) {
+      child.dispose();
+    }
+    isExpandedNotifier.dispose();
+    selectedStatusNotifier.dispose();
+    ignoreStatusNotifier.dispose();
+  }
+}
+
+class ChatSettingsCubit extends Cubit<ChatSettingsState> {
+  ChatSettingsCubit() : super(ChatSettingsState.initial());
+
+  List<String> selectedSourceIds = [];
+  ChatSource? source;
+  List<ChatSource> selectedSources = [];
+  String filter = '';
+
+  void updateOnlyUseSelectedSources(bool onlyUseSelectedSources) {
+    if (state.onlyUseSelectedSources != onlyUseSelectedSources) {
+      emit(state.copyWith(onlyUseSelectedSources: onlyUseSelectedSources));
+    }
+  }
+
+  void updateSelectedSources(List<String> newSelectedSourceIds) {
+    selectedSourceIds = [...newSelectedSourceIds];
+  }
+
+  void refreshSources(ViewPB view) async {
+    filter = "";
+    final newSource = await _recursiveBuild(view, null);
+
+    _restrictSelectionIfNecessary(newSource.children);
+
+    final selected = _buildSelectedSources(newSource).toList();
+
+    newSource.toggleIsExpanded();
+
+    emit(
+      state.copyWith(
+        selectedSources: selected,
+        visibleSources: [newSource],
+      ),
+    );
+
+    source?.dispose();
+    source = newSource.copy();
+
+    selectedSources
+      ..forEach((e) => e.dispose())
+      ..clear()
+      ..addAll(selected.map((e) => e.copy()));
+  }
+
+  Future<ChatSource> _recursiveBuild(ViewPB view, ViewPB? parentView) async {
+    SourceSelectedStatus selectedStatus = SourceSelectedStatus.unselected;
+    final isThisSourceSelected = selectedSourceIds.contains(view.id);
+
+    final childrenViews =
+        await ViewBackendService.getChildViews(viewId: view.id).toNullable();
+
+    int selectedCount = 0;
+    final children = <ChatSource>[];
+
+    if (childrenViews != null) {
+      for (final childView in childrenViews) {
+        if (childView.layout == ViewLayoutPB.Chat) {
+          continue;
+        }
+        final childChatSource = await _recursiveBuild(childView, view);
+        if (childChatSource.selectedStatus.isSelected) {
+          selectedCount++;
+        }
+        children.add(childChatSource);
+      }
+
+      final areAllChildrenSelectedOrNoChildren =
+          children.length == selectedCount;
+      final isAnyChildNotUnselected =
+          children.any((e) => !e.selectedStatus.isUnselected);
+
+      if (isThisSourceSelected && areAllChildrenSelectedOrNoChildren) {
+        selectedStatus = SourceSelectedStatus.selected;
+      } else if (isThisSourceSelected || isAnyChildNotUnselected) {
+        selectedStatus = SourceSelectedStatus.partiallySelected;
+      }
+    } else if (isThisSourceSelected) {
+      selectedStatus = SourceSelectedStatus.selected;
+    }
+
+    return ChatSource(
+      view: view,
+      parentView: parentView,
+      children: children,
+      ignoreStatus: view.layout.isDocumentView
+          ? IgnoreViewType.none
+          : IgnoreViewType.disable,
+      isExpanded: false,
+      selectedStatus: selectedStatus,
+    );
+  }
+
+  void _restrictSelectionIfNecessary(List<ChatSource> sources) {
+    for (final source in sources) {
+      source.resetIgnoreViewTypeRecursive();
+    }
+    if (sources.where((e) => !e.selectedStatus.isUnselected).length >=
+        _kMaxSelectedParentPageCount) {
+      sources
+          .where((e) => e.selectedStatus == SourceSelectedStatus.unselected)
+          .forEach(
+            (e) => e.updateIgnoreViewTypeRecursive(IgnoreViewType.disable),
+          );
+    }
+  }
+
+  void updateFilter(String filter) {
+    this.filter = filter;
+    for (final source in state.visibleSources) {
+      source.dispose();
+    }
+    if (source == null) {
+      emit(ChatSettingsState.initial());
+    } else {
+      final selected =
+          selectedSources.map(_buildSearchResults).nonNulls.toList();
+      final visible = [_buildSearchResults(source!)].nonNulls.toList();
+      emit(
+        state.copyWith(
+          selectedSources: selected,
+          visibleSources: visible,
+        ),
+      );
+    }
+  }
+
+  /// traverse tree to build up search query
+  ChatSource? _buildSearchResults(ChatSource chatSource) {
+    final isVisible = chatSource.view.nameOrDefault
+        .toLowerCase()
+        .contains(filter.toLowerCase());
+
+    final childrenResults = <ChatSource>[];
+    for (final childSource in chatSource.children) {
+      final childResult = _buildSearchResults(childSource);
+      if (childResult != null) {
+        childrenResults.add(childResult);
+      }
+    }
+
+    return isVisible || childrenResults.isNotEmpty
+        ? ChatSource(
+            view: chatSource.view,
+            parentView: chatSource.parentView,
+            children: childrenResults,
+            ignoreStatus: chatSource.ignoreStatus,
+            isExpanded: chatSource.isExpanded,
+            selectedStatus: chatSource.selectedStatus,
+          )
+        : null;
+  }
+
+  /// traverse tree to build up selected sources
+  Iterable<ChatSource> _buildSelectedSources(ChatSource chatSource) {
+    final children = <ChatSource>[];
+
+    for (final childSource in chatSource.children) {
+      children.addAll(_buildSelectedSources(childSource));
+    }
+
+    return selectedSourceIds.contains(chatSource.view.id)
+        ? [
+            ChatSource(
+              view: chatSource.view,
+              parentView: chatSource.parentView,
+              children: children,
+              ignoreStatus: chatSource.ignoreStatus,
+              selectedStatus: chatSource.selectedStatus,
+              isExpanded: true,
+            ),
+          ]
+        : children;
+  }
+
+  void toggleSelectedStatus(ChatSource chatSource) {
+    if (chatSource.view.isSpace) {
+      return;
+    }
+    final allIds = _recursiveGetSourceIds(chatSource);
+
+    if (chatSource.selectedStatus.isUnselected ||
+        chatSource.selectedStatus.isPartiallySelected &&
+            !chatSource.view.layout.isDocumentView) {
+      for (final id in allIds) {
+        if (!selectedSourceIds.contains(id)) {
+          selectedSourceIds.add(id);
+        }
+      }
+    } else {
+      for (final id in allIds) {
+        if (selectedSourceIds.contains(id)) {
+          selectedSourceIds.remove(id);
+        }
+      }
+    }
+
+    updateSelectedStatus();
+  }
+
+  List<String> _recursiveGetSourceIds(ChatSource chatSource) {
+    return [
+      if (chatSource.view.layout.isDocumentView) chatSource.view.id,
+      for (final childSource in chatSource.children)
+        ..._recursiveGetSourceIds(childSource),
+    ];
+  }
+
+  void updateSelectedStatus() {
+    if (source == null) {
+      return;
+    }
+    _recursiveUpdateSelectedStatus(source!);
+    _restrictSelectionIfNecessary(source!.children);
+    for (final visibleSource in state.visibleSources) {
+      visibleSource.dispose();
+    }
+    final visible = [_buildSearchResults(source!)].nonNulls.toList();
+
+    selectedSources
+      ..forEach((e) => e.dispose())
+      ..clear()
+      ..addAll(_buildSelectedSources(source!));
+    emit(
+      state.copyWith(
+        visibleSources: visible,
+        selectedSources:
+            selectedSources.map(_buildSearchResults).nonNulls.toList(),
+      ),
+    );
+  }
+
+  SourceSelectedStatus _recursiveUpdateSelectedStatus(ChatSource chatSource) {
+    SourceSelectedStatus selectedStatus = SourceSelectedStatus.unselected;
+
+    int selectedCount = 0;
+    for (final childSource in chatSource.children) {
+      final childStatus = _recursiveUpdateSelectedStatus(childSource);
+      if (childStatus.isSelected) {
+        selectedCount++;
+      }
+    }
+
+    final isThisSourceSelected = selectedSourceIds.contains(chatSource.view.id);
+    final areAllChildrenSelectedOrNoChildren =
+        chatSource.children.length == selectedCount;
+    final isAnyChildNotUnselected =
+        chatSource.children.any((e) => !e.selectedStatus.isUnselected);
+
+    if (isThisSourceSelected && areAllChildrenSelectedOrNoChildren) {
+      selectedStatus = SourceSelectedStatus.selected;
+    } else if (isThisSourceSelected || isAnyChildNotUnselected) {
+      selectedStatus = SourceSelectedStatus.partiallySelected;
+    }
+
+    chatSource.selectedStatusNotifier.value = selectedStatus;
+    return selectedStatus;
+  }
+
+  void toggleIsExpanded(ChatSource chatSource, bool isSelectedSection) {
+    chatSource.toggleIsExpanded();
+    if (isSelectedSection) {
+      for (final selectedSource in selectedSources) {
+        selectedSource
+            .findChildBySourceId(chatSource.view.id)
+            ?.toggleIsExpanded();
+      }
+    } else {
+      source?.findChildBySourceId(chatSource.view.id)?.toggleIsExpanded();
+    }
+  }
+
+  @override
+  Future<void> close() {
+    source?.dispose();
+    for (final child in state.selectedSources) {
+      child.dispose();
+    }
+    for (final child in state.visibleSources) {
+      child.dispose();
+    }
+    return super.close();
+  }
+}
+
+@freezed
+class ChatSettingsState with _$ChatSettingsState {
+  const factory ChatSettingsState({
+    required bool onlyUseSelectedSources,
+    required List<ChatSource> visibleSources,
+    required List<ChatSource> selectedSources,
+  }) = _ChatSettingsState;
+
+  factory ChatSettingsState.initial() => const ChatSettingsState(
+        onlyUseSelectedSources: false,
+        visibleSources: [],
+        selectedSources: [],
+      );
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_side_panel_bloc.dart

@@ -1,75 +0,0 @@
-import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
-import 'package:appflowy/workspace/application/view/view_service.dart';
-import 'package:appflowy_backend/log.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
-import 'package:appflowy_result/appflowy_result.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:freezed_annotation/freezed_annotation.dart';
-
-part 'chat_side_panel_bloc.freezed.dart';
-
-class ChatSidePanelBloc extends Bloc<ChatSidePanelEvent, ChatSidePanelState> {
-  ChatSidePanelBloc({
-    required this.chatId,
-  }) : super(const ChatSidePanelState()) {
-    on<ChatSidePanelEvent>(
-      (event, emit) async {
-        await event.when(
-          selectedMetadata: (ChatMessageRefSource metadata) async {
-            emit(
-              state.copyWith(
-                metadata: metadata,
-                indicator: const ChatSidePanelIndicator.loading(),
-              ),
-            );
-            await ViewBackendService.getView(metadata.id).fold(
-              (view) {
-                if (!isClosed) {
-                  add(ChatSidePanelEvent.open(view));
-                }
-              },
-              (err) => Log.error("Failed to get view: $err"),
-            );
-          },
-          close: () {
-            emit(state.copyWith(metadata: null, isShowPanel: false));
-          },
-          open: (ViewPB view) {
-            emit(
-              state.copyWith(
-                indicator: ChatSidePanelIndicator.ready(view),
-                isShowPanel: true,
-              ),
-            );
-          },
-        );
-      },
-    );
-  }
-
-  final String chatId;
-}
-
-@freezed
-class ChatSidePanelEvent with _$ChatSidePanelEvent {
-  const factory ChatSidePanelEvent.selectedMetadata(
-    ChatMessageRefSource metadata,
-  ) = _SelectedMetadata;
-  const factory ChatSidePanelEvent.close() = _Close;
-  const factory ChatSidePanelEvent.open(ViewPB view) = _Open;
-}
-
-@freezed
-class ChatSidePanelState with _$ChatSidePanelState {
-  const factory ChatSidePanelState({
-    ChatMessageRefSource? metadata,
-    @Default(ChatSidePanelIndicator.loading()) ChatSidePanelIndicator indicator,
-    @Default(false) bool isShowPanel,
-  }) = _ChatSidePanelState;
-}
-
-@freezed
-class ChatSidePanelIndicator with _$ChatSidePanelIndicator {
-  const factory ChatSidePanelIndicator.ready(ViewPB view) = _Ready;
-  const factory ChatSidePanelIndicator.loading() = _Loading;
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_user_message_bloc.dart

@@ -8,76 +8,19 @@ part 'chat_user_message_bloc.freezed.dart';
 class ChatUserMessageBloc
     extends Bloc<ChatUserMessageEvent, ChatUserMessageState> {
   ChatUserMessageBloc({
-    required dynamic message,
-  }) : super(
-          ChatUserMessageState.initial(
-            message,
-          ),
-        ) {
+    required this.questionStream,
+    required String text,
+  }) : super(ChatUserMessageState.initial(text)) {
+    _dispatch();
+    _startListening();
+  }
+
+  final QuestionStream? questionStream;
+
+  void _dispatch() {
     on<ChatUserMessageEvent>(
       (event, emit) {
         event.when(
-          initial: () {
-            if (state.stream != null) {
-              if (!isClosed) {
-                add(ChatUserMessageEvent.updateText(state.stream!.text));
-              }
-            }
-
-            state.stream?.listen(
-              onData: (text) {
-                if (!isClosed) {
-                  add(ChatUserMessageEvent.updateText(text));
-                }
-              },
-              onMessageId: (messageId) {
-                if (!isClosed) {
-                  add(ChatUserMessageEvent.updateMessageId(messageId));
-                }
-              },
-              onError: (error) {
-                if (!isClosed) {
-                  add(ChatUserMessageEvent.receiveError(error.toString()));
-                }
-              },
-              onFileIndexStart: (indexName) {
-                Log.debug("index start: $indexName");
-              },
-              onFileIndexEnd: (indexName) {
-                Log.info("index end: $indexName");
-              },
-              onFileIndexFail: (indexName) {
-                Log.debug("index fail: $indexName");
-              },
-              onIndexStart: () {
-                if (!isClosed) {
-                  add(
-                    const ChatUserMessageEvent.updateQuestionState(
-                      QuestionMessageState.indexStart(),
-                    ),
-                  );
-                }
-              },
-              onIndexEnd: () {
-                if (!isClosed) {
-                  add(
-                    const ChatUserMessageEvent.updateQuestionState(
-                      QuestionMessageState.indexEnd(),
-                    ),
-                  );
-                }
-              },
-              onDone: () {
-                if (!isClosed) {
-                  add(
-                    const ChatUserMessageEvent.updateQuestionState(
-                      QuestionMessageState.finish(),
-                    ),
-                  );
-                }
-              },
-            );
-          },
           updateText: (String text) {
             emit(state.copyWith(text: text));
           },
@@ -92,11 +35,66 @@ class ChatUserMessageBloc
       },
     );
   }
+
+  void _startListening() {
+    questionStream?.listen(
+      onData: (text) {
+        if (!isClosed) {
+          add(ChatUserMessageEvent.updateText(text));
+        }
+      },
+      onMessageId: (messageId) {
+        if (!isClosed) {
+          add(ChatUserMessageEvent.updateMessageId(messageId));
+        }
+      },
+      onError: (error) {
+        if (!isClosed) {
+          add(ChatUserMessageEvent.receiveError(error.toString()));
+        }
+      },
+      onFileIndexStart: (indexName) {
+        Log.debug("index start: $indexName");
+      },
+      onFileIndexEnd: (indexName) {
+        Log.info("index end: $indexName");
+      },
+      onFileIndexFail: (indexName) {
+        Log.debug("index fail: $indexName");
+      },
+      onIndexStart: () {
+        if (!isClosed) {
+          add(
+            const ChatUserMessageEvent.updateQuestionState(
+              QuestionMessageState.indexStart(),
+            ),
+          );
+        }
+      },
+      onIndexEnd: () {
+        if (!isClosed) {
+          add(
+            const ChatUserMessageEvent.updateQuestionState(
+              QuestionMessageState.indexEnd(),
+            ),
+          );
+        }
+      },
+      onDone: () {
+        if (!isClosed) {
+          add(
+            const ChatUserMessageEvent.updateQuestionState(
+              QuestionMessageState.finish(),
+            ),
+          );
+        }
+      },
+    );
+  }
 }
 
 @freezed
 class ChatUserMessageEvent with _$ChatUserMessageEvent {
-  const factory ChatUserMessageEvent.initial() = Initial;
   const factory ChatUserMessageEvent.updateText(String text) = _UpdateText;
   const factory ChatUserMessageEvent.updateQuestionState(
     QuestionMessageState newState,
@@ -110,17 +108,14 @@ class ChatUserMessageEvent with _$ChatUserMessageEvent {
 class ChatUserMessageState with _$ChatUserMessageState {
   const factory ChatUserMessageState({
     required String text,
-    QuestionStream? stream,
-    String? messageId,
-    @Default(QuestionMessageState.finish()) QuestionMessageState messageState,
+    required String? messageId,
+    required QuestionMessageState messageState,
   }) = _ChatUserMessageState;
 
-  factory ChatUserMessageState.initial(
-    dynamic message,
-  ) =>
-      ChatUserMessageState(
-        text: message is String ? message : "",
-        stream: message is QuestionStream ? message : null,
+  factory ChatUserMessageState.initial(String message) => ChatUserMessageState(
+        text: message,
+        messageId: null,
+        messageState: const QuestionMessageState.finish(),
       );
 }
 

frontend/appflowy_flutter/lib/plugins/ai_chat/application/chat_user_message_bubble_bloc.dart

@@ -1,60 +0,0 @@
-import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart';
-import 'package:freezed_annotation/freezed_annotation.dart';
-
-import 'chat_message_service.dart';
-
-part 'chat_user_message_bubble_bloc.freezed.dart';
-
-class ChatUserMessageBubbleBloc
-    extends Bloc<ChatUserMessageBubbleEvent, ChatUserMessageBubbleState> {
-  ChatUserMessageBubbleBloc({
-    required Message message,
-  }) : super(
-          ChatUserMessageBubbleState.initial(
-            message,
-            _getFiles(message.metadata),
-          ),
-        ) {
-    on<ChatUserMessageBubbleEvent>(
-      (event, emit) async {
-        event.when(
-          initial: () {},
-        );
-      },
-    );
-  }
-}
-
-List<ChatFile> _getFiles(Map<String, dynamic>? metadata) {
-  if (metadata == null) {
-    return [];
-  }
-  final refSourceMetadata = metadata[messageRefSourceJsonStringKey] as String?;
-  final files = metadata[messageChatFileListKey] as List<ChatFile>?;
-
-  if (refSourceMetadata != null) {
-    return chatFilesFromMetadataString(refSourceMetadata);
-  }
-  return files ?? [];
-}
-
-@freezed
-class ChatUserMessageBubbleEvent with _$ChatUserMessageBubbleEvent {
-  const factory ChatUserMessageBubbleEvent.initial() = Initial;
-}
-
-@freezed
-class ChatUserMessageBubbleState with _$ChatUserMessageBubbleState {
-  const factory ChatUserMessageBubbleState({
-    required Message message,
-    required List<ChatFile> files,
-  }) = _ChatUserMessageBubbleState;
-
-  factory ChatUserMessageBubbleState.initial(
-    Message message,
-    List<ChatFile> files,
-  ) =>
-      ChatUserMessageBubbleState(message: message, files: files);
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/chat.dart

@@ -2,6 +2,7 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/plugins/ai_chat/chat_page.dart';
 import 'package:appflowy/plugins/util.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy/workspace/application/view_info/view_info_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:appflowy/workspace/presentation/widgets/tab_bar_item.dart';
@@ -85,12 +86,16 @@ class AIChatPagePluginWidgetBuilder extends PluginWidgetBuilder
   final ViewPluginNotifier notifier;
   int? deletedViewIndex;
 
+  @override
+  String? get viewName => notifier.view.nameOrDefault;
+
   @override
   Widget get leftBarItem =>
       ViewTitleBar(key: ValueKey(notifier.view.id), view: notifier.view);
 
   @override
-  Widget tabBarItem(String pluginId) => ViewTabBarItem(view: notifier.view);
+  Widget tabBarItem(String pluginId, [bool shortForm = false]) =>
+      ViewTabBarItem(view: notifier.view, shortForm: shortForm);
 
   @override
   Widget buildWidget({
@@ -105,7 +110,7 @@ class AIChatPagePluginWidgetBuilder extends PluginWidgetBuilder
       return const SizedBox();
     }
 
-    return BlocProvider<ViewInfoBloc>.value(
+    return BlocProvider.value(
       value: bloc,
       child: AIChatPage(
         userProfile: context.userProfile!,

frontend/appflowy_flutter/lib/plugins/ai_chat/chat_page.dart

@@ -1,35 +1,40 @@
+import 'dart:io';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
-import 'package:appflowy/plugins/ai_chat/application/ai_prompt_input_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_message_stream.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/chat_related_question.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/message/user_message_bubble.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:appflowy_result/appflowy_result.dart';
 import 'package:desktop_drop/desktop_drop.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
-import 'package:flutter_chat_types/flutter_chat_types.dart';
-import 'package:flutter_chat_ui/flutter_chat_ui.dart' show Chat;
-import 'package:styled_widget/styled_widget.dart';
+import 'package:flutter_chat_core/flutter_chat_core.dart';
+import 'package:flutter_chat_ui/flutter_chat_ui.dart'
+    hide ChatAnimatedListReversed;
+import 'package:string_validator/string_validator.dart';
 import 'package:universal_platform/universal_platform.dart';
+import 'package:url_launcher/url_launcher.dart';
 
+import 'application/ai_prompt_input_bloc.dart';
+import 'application/chat_bloc.dart';
+import 'application/chat_entity.dart';
 import 'application/chat_member_bloc.dart';
-import 'application/chat_side_panel_bloc.dart';
+import 'application/chat_message_stream.dart';
+import 'presentation/animated_chat_list.dart';
 import 'presentation/chat_input/desktop_ai_prompt_input.dart';
 import 'presentation/chat_input/mobile_ai_prompt_input.dart';
-import 'presentation/chat_side_panel.dart';
-import 'presentation/chat_theme.dart';
-import 'presentation/chat_user_invalid_message.dart';
+import 'presentation/chat_related_question.dart';
 import 'presentation/chat_welcome_page.dart';
 import 'presentation/layout_define.dart';
 import 'presentation/message/ai_text_message.dart';
+import 'presentation/message/error_text_message.dart';
+import 'presentation/message/message_util.dart';
 import 'presentation/message/user_text_message.dart';
+import 'presentation/scroll_to_bottom.dart';
 
 class AIChatPage extends StatelessWidget {
   const AIChatPage({
@@ -59,30 +64,33 @@ class AIChatPage extends StatelessWidget {
         /// [ChatBloc] is used to handle chat messages including send/receive message
         BlocProvider(
           create: (_) => ChatBloc(
-            view: view,
-            userProfile: userProfile,
-          )..add(const ChatEvent.initialLoad()),
+            chatId: view.id,
+            userId: userProfile.id.toString(),
+          ),
         ),
 
         /// [AIPromptInputBloc] is used to handle the user prompt
         BlocProvider(create: (_) => AIPromptInputBloc()),
-        BlocProvider(create: (_) => ChatSidePanelBloc(chatId: view.id)),
         BlocProvider(create: (_) => ChatMemberBloc()),
       ],
-      child: DropTarget(
-        onDragDone: (DropDoneDetails detail) async {
-          if (context.read<AIPromptInputBloc>().state.supportChatWithFile) {
-            for (final file in detail.files) {
-              context
-                  .read<AIPromptInputBloc>()
-                  .add(AIPromptInputEvent.newFile(file.path, file.name));
-            }
-          }
+      child: Builder(
+        builder: (context) {
+          return DropTarget(
+            onDragDone: (DropDoneDetails detail) async {
+              if (context.read<AIPromptInputBloc>().state.supportChatWithFile) {
+                for (final file in detail.files) {
+                  context
+                      .read<AIPromptInputBloc>()
+                      .add(AIPromptInputEvent.attachFile(file.path, file.name));
+                }
+              }
+            },
+            child: _ChatContentPage(
+              view: view,
+              userProfile: userProfile,
+            ),
+          );
         },
-        child: _ChatContentPage(
-          view: view,
-          userProfile: userProfile,
-        ),
       ),
     );
   }
@@ -99,276 +107,233 @@ class _ChatContentPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    if (UniversalPlatform.isDesktop) {
-      return BlocSelector<ChatSidePanelBloc, ChatSidePanelState, bool>(
-        selector: (state) => state.isShowPanel,
-        builder: (context, isShowPanel) {
-          return LayoutBuilder(
-            builder: (BuildContext context, BoxConstraints constraints) {
-              final sidePanelRatio = isShowPanel ? 0.33 : 0.0;
-              final chatWidth = constraints.maxWidth * (1 - sidePanelRatio);
-              final sidePanelWidth =
-                  constraints.maxWidth * sidePanelRatio - 1.0;
-
-              return Row(
-                children: [
-                  Center(
-                    child: buildChatWidget()
-                        .constrained(
-                          maxWidth: 784,
-                        )
-                        .padding(horizontal: 32)
-                        .animate(
-                          const Duration(milliseconds: 200),
-                          Curves.easeOut,
-                        ),
-                  ).constrained(width: chatWidth),
-                  if (isShowPanel) ...[
-                    const VerticalDivider(
-                      width: 1.0,
-                      thickness: 1.0,
-                    ),
-                    buildChatSidePanel()
-                        .constrained(width: sidePanelWidth)
-                        .animate(
-                          const Duration(milliseconds: 200),
-                          Curves.easeOut,
-                        ),
-                  ],
-                ],
-              );
-            },
-          );
-        },
-      );
-    } else {
-      return Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Flexible(
-            child: ConstrainedBox(
-              constraints: const BoxConstraints(maxWidth: 784),
-              child: buildChatWidget(),
-            ),
-          ),
-        ],
-      );
-    }
-  }
-
-  Widget buildChatSidePanel() {
-    return BlocBuilder<ChatSidePanelBloc, ChatSidePanelState>(
-      builder: (context, state) {
-        if (state.metadata == null) {
-          return const SizedBox.shrink();
-        }
-        return const ChatSidePanel();
-      },
-    );
-  }
-
-  Widget buildChatWidget() {
-    return BlocBuilder<ChatBloc, ChatState>(
-      builder: (context, state) {
-        return ScrollConfiguration(
+    return Center(
+      child: Container(
+        constraints: const BoxConstraints(maxWidth: 784),
+        margin: UniversalPlatform.isDesktop
+            ? const EdgeInsets.symmetric(horizontal: 60.0)
+            : null,
+        child: ScrollConfiguration(
           behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
           child: BlocBuilder<ChatBloc, ChatState>(
-            builder: (_, state) => state.initialLoadingStatus.isFinish
-                ? Chat(
-                    messages: state.messages,
-                    dateHeaderBuilder: (_) => const SizedBox.shrink(),
-                    onSendPressed: (_) {
-                      // We use custom bottom widget for chat input, so
-                      // do not need to handle this event.
-                    },
-                    customBottomWidget: _buildBottom(context),
-                    user: types.User(id: userProfile.id.toString()),
-                    theme: _buildTheme(context),
-                    onEndReached: () async {
-                      if (state.hasMorePrevMessage &&
-                          state.loadingPreviousStatus.isFinish) {
-                        context
-                            .read<ChatBloc>()
-                            .add(const ChatEvent.startLoadingPrevMessage());
-                      }
-                    },
-                    emptyState: TextFieldTapRegion(
-                      child: ChatWelcomePage(
-                        userProfile: userProfile,
-                        onSelectedQuestion: (question) => context
-                            .read<ChatBloc>()
-                            .add(ChatEvent.sendMessage(message: question)),
+            builder: (context, state) {
+              return switch (state.loadingState) {
+                LoadChatMessageStatus.ready => Column(
+                    children: [
+                      Expanded(
+                        child: Chat(
+                          chatController:
+                              context.read<ChatBloc>().chatController,
+                          user: User(id: userProfile.id.toString()),
+                          darkTheme: ChatTheme.fromThemeData(Theme.of(context)),
+                          theme: ChatTheme.fromThemeData(Theme.of(context)),
+                          builders: Builders(
+                            inputBuilder: (_) => const SizedBox.shrink(),
+                            textMessageBuilder: _buildTextMessage,
+                            chatMessageBuilder: _buildChatMessage,
+                            scrollToBottomBuilder: _buildScrollToBottom,
+                            chatAnimatedListBuilder: _buildChatAnimatedList,
+                          ),
+                        ),
                       ),
-                    ),
-                    messageWidthRatio: AIChatUILayout.messageWidthRatio,
-                    textMessageBuilder: (
-                      textMessage, {
-                      required messageWidth,
-                      required showName,
-                    }) =>
-                        _buildTextMessage(context, textMessage, state),
-                    customMessageBuilder: (message, {required messageWidth}) {
-                      final messageType = onetimeMessageTypeFromMeta(
-                        message.metadata,
-                      );
-
-                      if (messageType == OnetimeShotType.invalidSendMesssage) {
-                        return ChatInvalidUserMessage(
-                          message: message,
-                        );
-                      }
-                      if (messageType == OnetimeShotType.relatedQuestion) {
-                        return RelatedQuestionList(
-                          relatedQuestions: state.relatedQuestions,
-                          onQuestionSelected: (question) {
-                            final bloc = context.read<ChatBloc>();
-                            bloc
-                              ..add(ChatEvent.sendMessage(message: question))
-                              ..add(const ChatEvent.clearRelatedQuestions());
-                          },
-                        );
-                      }
-
-                      return const SizedBox.shrink();
-                    },
-                    bubbleBuilder: (
-                      child, {
-                      required message,
-                      required nextMessageInGroup,
-                    }) =>
-                        _buildBubble(context, message, child),
-                  )
-                : const Center(
-                    child: CircularProgressIndicator.adaptive(),
+                      _buildInput(context),
+                    ],
                   ),
+                _ => const Center(child: CircularProgressIndicator.adaptive()),
+              };
+            },
           ),
-        );
-      },
+        ),
+      ),
     );
   }
 
   Widget _buildTextMessage(
     BuildContext context,
     TextMessage message,
-    ChatState state,
   ) {
-    if (message.author.id == userProfile.id.toString()) {
-      final stream = message.metadata?["$QuestionStream"];
-      return ChatUserMessageWidget(
-        key: ValueKey(message.id),
-        user: message.author,
-        message: stream is QuestionStream ? stream : message.text,
-      );
-    } else if (isOtherUserMessage(message)) {
-      final stream = message.metadata?["$QuestionStream"];
-      return ChatUserMessageWidget(
-        key: ValueKey(message.id),
-        user: message.author,
-        message: stream is QuestionStream ? stream : message.text,
-      );
-    } else {
-      final stream = message.metadata?["$AnswerStream"];
-      final questionId = message.metadata?[messageQuestionIdKey];
-      final refSourceJsonString =
-          message.metadata?[messageRefSourceJsonStringKey] as String?;
+    final messageType = onetimeMessageTypeFromMeta(
+      message.metadata,
+    );
 
-      return BlocSelector<ChatBloc, ChatState, bool>(
-        key: ValueKey(message.id),
-        selector: (state) {
-          final messages = state.messages.where((e) {
-            final oneTimeMessageType = onetimeMessageTypeFromMeta(e.metadata);
-            if (oneTimeMessageType == null) {
-              return true;
-            }
-            if (oneTimeMessageType
-                case OnetimeShotType.relatedQuestion ||
-                    OnetimeShotType.sendingMessage ||
-                    OnetimeShotType.invalidSendMesssage) {
-              return false;
-            }
-            return true;
-          });
-          return messages.isEmpty ? false : messages.first.id == message.id;
-        },
-        builder: (context, isLastMessage) {
-          return ChatAIMessageWidget(
-            user: message.author,
-            messageUserId: message.id,
-            message: message,
-            stream: stream is AnswerStream ? stream : null,
-            questionId: questionId,
-            chatId: view.id,
-            refSourceJsonString: refSourceJsonString,
-            isLastMessage: isLastMessage,
-            onSelectedMetadata: (metadata) {
-              context
-                  .read<ChatSidePanelBloc>()
-                  .add(ChatSidePanelEvent.selectedMetadata(metadata));
-            },
-          );
+    if (messageType == OnetimeShotType.error) {
+      return ChatErrorMessageWidget(
+        errorMessage: message.metadata?[errorMessageTextKey] ?? "",
+      );
+    }
+
+    if (messageType == OnetimeShotType.relatedQuestion) {
+      return RelatedQuestionList(
+        relatedQuestions: message.metadata!['questions'],
+        onQuestionSelected: (question) {
+          context
+              .read<ChatBloc>()
+              .add(ChatEvent.sendMessage(message: question));
         },
       );
     }
-  }
 
-  Widget _buildBubble(
-    BuildContext context,
-    Message message,
-    Widget child,
-  ) {
     if (message.author.id == userProfile.id.toString()) {
-      return ChatUserMessageBubble(
+      return ChatUserMessageWidget(
+        user: message.author,
         message: message,
-        child: child,
+        isCurrentUser: true,
       );
-    } else if (isOtherUserMessage(message)) {
-      return ChatUserMessageBubble(
+    }
+
+    if (isOtherUserMessage(message)) {
+      return ChatUserMessageWidget(
+        user: message.author,
         message: message,
         isCurrentUser: false,
-        child: child,
       );
-    } else {
-      // The bubble is rendered in the child already
-      return child;
     }
+
+    final stream = message.metadata?["$AnswerStream"];
+    final questionId = message.metadata?[messageQuestionIdKey];
+    final refSourceJsonString =
+        message.metadata?[messageRefSourceJsonStringKey] as String?;
+
+    return BlocBuilder<ChatBloc, ChatState>(
+      builder: (context, state) {
+        final chatController = context.read<ChatBloc>().chatController;
+        final messages = chatController.messages
+            .where((e) => onetimeMessageTypeFromMeta(e.metadata) == null);
+        final isLastMessage =
+            messages.isEmpty ? false : messages.last.id == message.id;
+        return ChatAIMessageWidget(
+          user: message.author,
+          messageUserId: message.id,
+          message: message,
+          stream: stream is AnswerStream ? stream : null,
+          questionId: questionId,
+          chatId: view.id,
+          refSourceJsonString: refSourceJsonString,
+          isStreaming: state.promptResponseState != PromptResponseState.ready,
+          isLastMessage: isLastMessage,
+          onSelectedMetadata: (metadata) =>
+              _onSelectMetadata(context, metadata),
+          onRegenerate: () => context
+              .read<ChatBloc>()
+              .add(ChatEvent.regenerateAnswer(message.id)),
+        );
+      },
+    );
   }
 
-  Widget _buildBottom(BuildContext context) {
+  Widget _buildChatMessage(
+    BuildContext context,
+    Message message,
+    Animation<double> animation,
+    Widget child,
+  ) {
+    return ChatMessage(
+      message: message,
+      animation: animation,
+      padding: const EdgeInsets.symmetric(vertical: 12.0),
+      receivedMessageScaleAnimationAlignment: Alignment.center,
+      child: child,
+    );
+  }
+
+  Widget _buildScrollToBottom(
+    BuildContext context,
+    Animation<double> animation,
+    VoidCallback onPressed,
+  ) {
+    return CustomScrollToBottom(
+      animation: animation,
+      onPressed: onPressed,
+    );
+  }
+
+  Widget _buildChatAnimatedList(
+    BuildContext context,
+    ScrollController scrollController,
+    ChatItem itemBuilder,
+  ) {
+    final bloc = context.read<ChatBloc>();
+
+    if (bloc.chatController.messages.isEmpty) {
+      return ChatWelcomePage(
+        userProfile: userProfile,
+        onSelectedQuestion: (question) {
+          bloc.add(ChatEvent.sendMessage(message: question));
+        },
+      );
+    }
+
+    return ChatAnimatedListReversed(
+      scrollController: scrollController,
+      itemBuilder: itemBuilder,
+      onLoadPreviousMessages: () {
+        bloc.add(const ChatEvent.loadPreviousMessages());
+      },
+    );
+  }
+
+  Widget _buildInput(BuildContext context) {
     return Padding(
       padding: AIChatUILayout.safeAreaInsets(context),
       child: BlocSelector<ChatBloc, ChatState, bool>(
-        selector: (state) => state.canSendMessage,
+        selector: (state) {
+          return state.promptResponseState == PromptResponseState.ready;
+        },
         builder: (context, canSendMessage) {
+          final chatBloc = context.read<ChatBloc>();
+
           return UniversalPlatform.isDesktop
               ? DesktopAIPromptInput(
                   chatId: view.id,
-                  indicateFocus: true,
-                  onSubmitted: (message) {
-                    context.read<ChatBloc>().add(
-                          ChatEvent.sendMessage(
-                            message: message.text,
-                            metadata: message.metadata,
-                          ),
-                        );
-                  },
                   isStreaming: !canSendMessage,
                   onStopStreaming: () {
-                    context.read<ChatBloc>().add(const ChatEvent.stopStream());
+                    chatBloc.add(const ChatEvent.stopStream());
+                  },
+                  onSubmitted: (text, metadata) {
+                    chatBloc.add(
+                      ChatEvent.sendMessage(
+                        message: text,
+                        metadata: metadata,
+                      ),
+                    );
+                  },
+                  onUpdateSelectedSources: (ragOnly, ids) {
+                    if (ragOnly != chatBloc.state.onlyUseSelectedSources) {
+                      chatBloc.add(
+                        ChatEvent.setRagOnly(
+                          ragOnly: ragOnly,
+                        ),
+                      );
+                    }
+                    if (!listEquals(ids, chatBloc.state.selectedSourceIds)) {
+                      chatBloc.add(
+                        ChatEvent.updateSelectedSources(
+                          selectedSourcesIds: ids,
+                        ),
+                      );
+                    }
                   },
                 )
               : MobileAIPromptInput(
                   chatId: view.id,
-                  onSubmitted: (message) {
-                    context.read<ChatBloc>().add(
-                          ChatEvent.sendMessage(
-                            message: message.text,
-                            metadata: message.metadata,
-                          ),
-                        );
-                  },
                   isStreaming: !canSendMessage,
                   onStopStreaming: () {
-                    context.read<ChatBloc>().add(const ChatEvent.stopStream());
+                    chatBloc.add(const ChatEvent.stopStream());
+                  },
+                  onSubmitted: (text, metadata) {
+                    chatBloc.add(
+                      ChatEvent.sendMessage(
+                        message: text,
+                        metadata: metadata,
+                      ),
+                    );
+                  },
+                  onUpdateSelectedSources: (ids) {
+                    chatBloc.add(
+                      ChatEvent.updateSelectedSources(
+                        selectedSourcesIds: ids,
+                      ),
+                    );
                   },
                 );
         },
@@ -376,10 +341,29 @@ class _ChatContentPage extends StatelessWidget {
     );
   }
 
-  AFDefaultChatTheme _buildTheme(BuildContext context) {
-    return AFDefaultChatTheme(
-      primaryColor: Theme.of(context).colorScheme.primary,
-      secondaryColor: AFThemeExtension.of(context).tint1,
-    );
+  void _onSelectMetadata(
+    BuildContext context,
+    ChatMessageRefSource metadata,
+  ) async {
+    if (isURL(metadata.name)) {
+      late Uri uri;
+      try {
+        uri = Uri.parse(metadata.name);
+        // `Uri` identifies `localhost` as a scheme
+        if (!uri.hasScheme || uri.scheme == 'localhost') {
+          uri = Uri.parse("http://${metadata.name}");
+          await InternetAddress.lookup(uri.host);
+        }
+        await launchUrl(uri);
+      } catch (err) {
+        Log.error("failed to open url $err");
+      }
+    } else {
+      final sidebarView =
+          await ViewBackendService.getView(metadata.id).toNullable();
+      if (context.mounted) {
+        openPageFromMessage(context, sidebarView);
+      }
+    }
   }
 }

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/animated_chat_list.dart

@@ -0,0 +1,370 @@
+// ignore_for_file: implementation_imports
+
+import 'dart:async';
+import 'dart:math';
+
+import 'package:diffutil_dart/diffutil.dart' as diffutil;
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_chat_core/flutter_chat_core.dart';
+import 'package:provider/provider.dart';
+
+import 'package:flutter_chat_ui/src/scroll_to_bottom.dart';
+import 'package:flutter_chat_ui/src/utils/message_list_diff.dart';
+
+class ChatAnimatedListReversed extends StatefulWidget {
+  const ChatAnimatedListReversed({
+    super.key,
+    required this.scrollController,
+    required this.itemBuilder,
+    this.insertAnimationDuration = const Duration(milliseconds: 250),
+    this.removeAnimationDuration = const Duration(milliseconds: 250),
+    this.scrollToEndAnimationDuration = const Duration(milliseconds: 250),
+    this.scrollToBottomAppearanceDelay = const Duration(milliseconds: 250),
+    this.bottomPadding = 8,
+    this.onLoadPreviousMessages,
+  });
+
+  final ScrollController scrollController;
+  final ChatItem itemBuilder;
+  final Duration insertAnimationDuration;
+  final Duration removeAnimationDuration;
+  final Duration scrollToEndAnimationDuration;
+  final Duration scrollToBottomAppearanceDelay;
+  final double? bottomPadding;
+  final VoidCallback? onLoadPreviousMessages;
+
+  @override
+  ChatAnimatedListReversedState createState() =>
+      ChatAnimatedListReversedState();
+}
+
+class ChatAnimatedListReversedState extends State<ChatAnimatedListReversed>
+    with SingleTickerProviderStateMixin {
+  final GlobalKey<SliverAnimatedListState> _listKey = GlobalKey();
+  late ChatController _chatController;
+  late List<Message> _oldList;
+  late StreamSubscription<ChatOperation> _operationsSubscription;
+
+  late final AnimationController _scrollToBottomController;
+  late final Animation<double> _scrollToBottomAnimation;
+  Timer? _scrollToBottomShowTimer;
+
+  bool _userHasScrolled = false;
+  bool _isScrollingToBottom = false;
+  String _lastInsertedMessageId = '';
+
+  @override
+  void initState() {
+    super.initState();
+    _chatController = Provider.of<ChatController>(context, listen: false);
+    // TODO: Add assert for messages having same id
+    _oldList = List.from(_chatController.messages);
+    _operationsSubscription = _chatController.operationsStream.listen((event) {
+      switch (event.type) {
+        case ChatOperationType.insert:
+          assert(
+            event.index != null,
+            'Index must be provided when inserting a message.',
+          );
+          assert(
+            event.message != null,
+            'Message must be provided when inserting a message.',
+          );
+          _onInserted(0, event.message!);
+          _oldList = List.from(_chatController.messages);
+          break;
+        case ChatOperationType.remove:
+          assert(
+            event.index != null,
+            'Index must be provided when removing a message.',
+          );
+          assert(
+            event.message != null,
+            'Message must be provided when removing a message.',
+          );
+          _onRemoved(event.index!, event.message!);
+          _oldList = List.from(_chatController.messages);
+          break;
+        case ChatOperationType.set:
+          final newList = _chatController.messages;
+
+          final updates = diffutil
+              .calculateDiff<Message>(
+                MessageListDiff(_oldList, newList),
+              )
+              .getUpdatesWithData();
+
+          for (var i = updates.length - 1; i >= 0; i--) {
+            _onDiffUpdate(updates.elementAt(i));
+          }
+
+          _oldList = List.from(newList);
+          break;
+        default:
+          break;
+      }
+    });
+
+    _scrollToBottomController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 300),
+    );
+    _scrollToBottomAnimation = CurvedAnimation(
+      parent: _scrollToBottomController,
+      curve: Curves.easeInOut,
+    );
+
+    widget.scrollController.addListener(_handleLoadPreviousMessages);
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _handleLoadPreviousMessages();
+    });
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _scrollToBottomShowTimer?.cancel();
+    _scrollToBottomController.dispose();
+    _operationsSubscription.cancel();
+    widget.scrollController.removeListener(_handleLoadPreviousMessages);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final builders = context.watch<Builders>();
+
+    return NotificationListener<Notification>(
+      onNotification: (notification) {
+        if (notification is UserScrollNotification) {
+          // When user scrolls up, save it to `_userHasScrolled`
+          if (notification.direction == ScrollDirection.reverse) {
+            _userHasScrolled = true;
+          } else {
+            // When user overscolls to the bottom or stays idle at the bottom, set `_userHasScrolled` to false
+            if (notification.metrics.pixels ==
+                notification.metrics.minScrollExtent) {
+              _userHasScrolled = false;
+            }
+          }
+        }
+
+        if (notification is ScrollUpdateNotification) {
+          _handleToggleScrollToBottom();
+        }
+
+        // Allow other listeners to get the notification
+        return false;
+      },
+      child: Stack(
+        children: [
+          CustomScrollView(
+            reverse: true,
+            controller: widget.scrollController,
+            slivers: <Widget>[
+              SliverPadding(
+                padding: EdgeInsets.only(
+                  top: widget.bottomPadding ?? 0,
+                ),
+              ),
+              SliverAnimatedList(
+                key: _listKey,
+                initialItemCount: _chatController.messages.length,
+                itemBuilder: (
+                  BuildContext context,
+                  int index,
+                  Animation<double> animation,
+                ) {
+                  final message = _chatController.messages[
+                      max(_chatController.messages.length - 1 - index, 0)];
+                  return widget.itemBuilder(
+                    context,
+                    animation,
+                    message,
+                  );
+                },
+              ),
+            ],
+          ),
+          builders.scrollToBottomBuilder?.call(
+                context,
+                _scrollToBottomAnimation,
+                _handleScrollToBottom,
+              ) ??
+              ScrollToBottom(
+                animation: _scrollToBottomAnimation,
+                onPressed: _handleScrollToBottom,
+              ),
+        ],
+      ),
+    );
+  }
+
+  void _subsequentScrollToEnd(Message data) async {
+    final user = Provider.of<User>(context, listen: false);
+
+    // We only want to scroll to the bottom if user has not scrolled up
+    // or if the message is sent by the current user.
+    if (data.id == _lastInsertedMessageId &&
+        widget.scrollController.offset >
+            widget.scrollController.position.minScrollExtent &&
+        (user.id == data.author.id || !_userHasScrolled)) {
+      if (widget.scrollToEndAnimationDuration == Duration.zero) {
+        widget.scrollController
+            .jumpTo(widget.scrollController.position.minScrollExtent);
+      } else {
+        await widget.scrollController.animateTo(
+          widget.scrollController.position.minScrollExtent,
+          duration: widget.scrollToEndAnimationDuration,
+          curve: Curves.linearToEaseOut,
+        );
+      }
+
+      if (!widget.scrollController.hasClients || !mounted) return;
+
+      // Because of the issue I have opened here https://github.com/flutter/flutter/issues/129768
+      // we need an additional jump to the end. Sometimes Flutter
+      // will not scroll to the very end. Sometimes it will not scroll to the
+      // very end even with this, so this is something that needs to be
+      // addressed by the Flutter team.
+      //
+      // Additionally here we have a check for the message id, because
+      // if new message arrives in the meantime it will trigger another
+      // scroll to the end animation, making this logic redundant.
+      if (data.id == _lastInsertedMessageId &&
+          widget.scrollController.offset >
+              widget.scrollController.position.minScrollExtent &&
+          (user.id == data.author.id || !_userHasScrolled)) {
+        widget.scrollController
+            .jumpTo(widget.scrollController.position.minScrollExtent);
+      }
+    }
+  }
+
+  void _scrollToEnd(Message data) {
+    WidgetsBinding.instance.addPostFrameCallback(
+      (_) {
+        if (!widget.scrollController.hasClients || !mounted) return;
+
+        _subsequentScrollToEnd(data);
+      },
+    );
+  }
+
+  void _handleScrollToBottom() {
+    _isScrollingToBottom = true;
+    _scrollToBottomController.reverse();
+
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      if (!widget.scrollController.hasClients || !mounted) return;
+
+      if (widget.scrollToEndAnimationDuration == Duration.zero) {
+        widget.scrollController
+            .jumpTo(widget.scrollController.position.minScrollExtent);
+      } else {
+        await widget.scrollController.animateTo(
+          widget.scrollController.position.minScrollExtent,
+          duration: widget.scrollToEndAnimationDuration,
+          curve: Curves.linearToEaseOut,
+        );
+      }
+
+      if (!widget.scrollController.hasClients || !mounted) return;
+
+      if (widget.scrollController.offset <
+          widget.scrollController.position.minScrollExtent) {
+        widget.scrollController.jumpTo(
+          widget.scrollController.position.minScrollExtent,
+        );
+      }
+
+      _isScrollingToBottom = false;
+    });
+  }
+
+  void _handleToggleScrollToBottom() {
+    if (_isScrollingToBottom) {
+      return;
+    }
+
+    _scrollToBottomShowTimer?.cancel();
+    if (widget.scrollController.offset >
+        widget.scrollController.position.minScrollExtent) {
+      _scrollToBottomShowTimer =
+          Timer(widget.scrollToBottomAppearanceDelay, () {
+        if (mounted) {
+          _scrollToBottomController.forward();
+        }
+      });
+    } else {
+      if (_scrollToBottomController.status != AnimationStatus.completed) {
+        _scrollToBottomController.stop();
+      }
+      _scrollToBottomController.reverse();
+    }
+  }
+
+  void _onInserted(final int position, final Message data) {
+    // There is a scroll notification listener the controls the
+    // `_userHasScrolled` variable.
+    //
+    // If for some reason `_userHasScrolled` is true and the user is not at the
+    // bottom of the list, set `_userHasScrolled` to false so that the scroll
+    // animation is triggered.
+    if (_userHasScrolled &&
+        widget.scrollController.offset >=
+            widget.scrollController.position.minScrollExtent) {
+      _userHasScrolled = false;
+    }
+
+    _listKey.currentState!.insertItem(
+      position,
+      duration: widget.insertAnimationDuration,
+    );
+
+    // Used later to trigger scroll to end only for the last inserted message.
+    _lastInsertedMessageId = data.id;
+
+    if (position == _oldList.length) {
+      _scrollToEnd(data);
+    }
+  }
+
+  void _onRemoved(final int position, final Message data) {
+    final visualPosition = max(_oldList.length - position - 1, 0);
+    _listKey.currentState!.removeItem(
+      visualPosition,
+      (context, animation) => widget.itemBuilder(
+        context,
+        animation,
+        data,
+        isRemoved: true,
+      ),
+      duration: widget.removeAnimationDuration,
+    );
+  }
+
+  void _onChanged(int position, Message oldData, Message newData) {
+    _onRemoved(position, oldData);
+    _listKey.currentState!.insertItem(
+      max(_oldList.length - position - 1, 0),
+      duration: widget.insertAnimationDuration,
+    );
+  }
+
+  void _onDiffUpdate(diffutil.DataDiffUpdate<Message> update) {
+    update.when<void>(
+      insert: (pos, data) => _onInserted(max(_oldList.length - pos, 0), data),
+      remove: (pos, data) => _onRemoved(pos, data),
+      change: (pos, oldData, newData) => _onChanged(pos, oldData, newData),
+      move: (_, __, ___) => throw UnimplementedError('unused'),
+    );
+  }
+
+  void _handleLoadPreviousMessages() {
+    if (widget.scrollController.offset >=
+        widget.scrollController.position.maxScrollExtent) {
+      widget.onLoadPreviousMessages?.call();
+    }
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input_file.dart

@@ -23,7 +23,7 @@ class ChatInputFile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocSelector<AIPromptInputBloc, AIPromptInputState, List<ChatFile>>(
-      selector: (state) => state.uploadFiles,
+      selector: (state) => state.attachedFiles,
       builder: (context, files) {
         if (files.isEmpty) {
           return const SizedBox.shrink();

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_input_span.dart

@@ -1,15 +1,18 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_input_control_cubit.dart';
+import 'package:collection/collection.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:extended_text_library/extended_text_library.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 
-import '../../application/chat_input_action_control.dart';
-
 class ChatInputTextSpanBuilder extends SpecialTextSpanBuilder {
   ChatInputTextSpanBuilder({
-    required this.inputActionControl,
+    required this.inputControlCubit,
+    this.specialTextStyle,
   });
 
-  final ChatInputActionControl inputActionControl;
+  final ChatInputControlCubit inputControlCubit;
+  final TextStyle? specialTextStyle;
 
   @override
   SpecialText? createSpecialText(
@@ -22,51 +25,54 @@ class ChatInputTextSpanBuilder extends SpecialTextSpanBuilder {
       return null;
     }
 
-    //index is end index of start flag, so text start index should be index-(flag.length-1)
-    if (isStart(flag, AtText.flag)) {
-      return AtText(
-        inputActionControl,
-        textStyle,
-        onTap,
-        start: index! - (AtText.flag.length - 1),
-      );
+    if (!isStart(flag, AtText.flag)) {
+      return null;
     }
-    return null;
+
+    // index is at the end of the start flag, so the start index should be index - (flag.length - 1)
+    return AtText(
+      inputControlCubit,
+      specialTextStyle ?? textStyle,
+      onTap,
+      // scrubbing over text is kinda funky
+      start: index! - (AtText.flag.length - 1),
+    );
   }
 }
 
 class AtText extends SpecialText {
   AtText(
-    this.inputActionControl,
+    this.inputControlCubit,
     TextStyle? textStyle,
     SpecialTextGestureTapCallback? onTap, {
     this.start,
   }) : super(flag, '', textStyle, onTap: onTap);
+
   static const String flag = '@';
+
   final int? start;
-  final ChatInputActionControl inputActionControl;
+  final ChatInputControlCubit inputControlCubit;
 
   @override
-  bool isEnd(String value) {
-    return inputActionControl.tags.contains(value);
-  }
+  bool isEnd(String value) => inputControlCubit.selectedViewIds.contains(value);
 
   @override
   InlineSpan finishText() {
-    final TextStyle? textStyle =
-        this.textStyle?.copyWith(color: Colors.blue, fontSize: 15.0);
+    final String actualText = toString();
 
-    final String atText = toString();
+    final viewName = inputControlCubit.allViews
+            .firstWhereOrNull((view) => view.id == actualText.substring(1))
+            ?.name ??
+        "";
+    final nonEmptyName = viewName.isEmpty
+        ? LocaleKeys.document_title_placeholder.tr()
+        : viewName;
 
     return SpecialTextSpan(
-      text: atText,
-      actualText: atText,
+      text: "@$nonEmptyName",
+      actualText: actualText,
       start: start!,
       style: textStyle,
-      recognizer: (TapGestureRecognizer()
-        ..onTap = () {
-          onTap?.call(atText);
-        }),
     );
   }
 }

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_mention_page_bottom_sheet.dart

@@ -0,0 +1,204 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/flowy_search_text_field.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart';
+import 'package:appflowy/plugins/base/drag_handler.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+import 'chat_mention_page_menu.dart';
+
+Future<ViewPB?> showPageSelectorSheet(
+  BuildContext context, {
+  required bool Function(ViewPB view) filter,
+}) async {
+  return showMobileBottomSheet<ViewPB>(
+    context,
+    backgroundColor: Theme.of(context).colorScheme.surface,
+    maxChildSize: 0.98,
+    enableDraggableScrollable: true,
+    scrollableWidgetBuilder: (context, scrollController) {
+      return Expanded(
+        child: _MobilePageSelectorBody(
+          filter: filter,
+          scrollController: scrollController,
+        ),
+      );
+    },
+    builder: (context) => const SizedBox.shrink(),
+  );
+}
+
+class _MobilePageSelectorBody extends StatefulWidget {
+  const _MobilePageSelectorBody({
+    this.filter,
+    this.scrollController,
+  });
+
+  final bool Function(ViewPB view)? filter;
+  final ScrollController? scrollController;
+
+  @override
+  State<_MobilePageSelectorBody> createState() =>
+      _MobilePageSelectorBodyState();
+}
+
+class _MobilePageSelectorBodyState extends State<_MobilePageSelectorBody> {
+  final textController = TextEditingController();
+  late final Future<List<ViewPB>> _viewsFuture = _fetchViews();
+
+  @override
+  void dispose() {
+    textController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomScrollView(
+      controller: widget.scrollController,
+      shrinkWrap: true,
+      slivers: [
+        SliverPersistentHeader(
+          pinned: true,
+          delegate: _Header(
+            child: ColoredBox(
+              color: Theme.of(context).cardColor,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  const DragHandle(),
+                  SizedBox(
+                    height: 44.0,
+                    child: Center(
+                      child: FlowyText.medium(
+                        LocaleKeys.document_mobilePageSelector_title.tr(),
+                        fontSize: 16.0,
+                      ),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 16.0,
+                      vertical: 8.0,
+                    ),
+                    child: SizedBox(
+                      height: 44.0,
+                      child: FlowySearchTextField(
+                        controller: textController,
+                        onChanged: (_) => setState(() {}),
+                      ),
+                    ),
+                  ),
+                  const Divider(height: 0.5, thickness: 0.5),
+                ],
+              ),
+            ),
+          ),
+        ),
+        FutureBuilder(
+          future: _viewsFuture,
+          builder: (_, snapshot) {
+            if (snapshot.connectionState == ConnectionState.waiting) {
+              return const SliverToBoxAdapter(
+                child: CircularProgressIndicator.adaptive(),
+              );
+            }
+
+            if (snapshot.hasError || snapshot.data == null) {
+              return SliverToBoxAdapter(
+                child: FlowyText(
+                  LocaleKeys.document_mobilePageSelector_failedToLoad.tr(),
+                ),
+              );
+            }
+
+            final views = snapshot.data!
+                .where((v) => widget.filter?.call(v) ?? true)
+                .toList();
+
+            final filtered = views.where(
+              (v) =>
+                  textController.text.isEmpty ||
+                  v.name
+                      .toLowerCase()
+                      .contains(textController.text.toLowerCase()),
+            );
+
+            if (filtered.isEmpty) {
+              return SliverToBoxAdapter(
+                child: FlowyText(
+                  LocaleKeys.document_mobilePageSelector_noPagesFound.tr(),
+                ),
+              );
+            }
+
+            return SliverPadding(
+              padding:
+                  const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+              sliver: SliverList(
+                delegate: SliverChildBuilderDelegate(
+                  (context, index) {
+                    final view = filtered.elementAt(index);
+                    return InkWell(
+                      onTap: () => Navigator.of(context).pop(view),
+                      borderRadius: BorderRadius.circular(12),
+                      splashColor: Colors.transparent,
+                      child: Container(
+                        height: 44,
+                        padding: const EdgeInsets.all(4.0),
+                        child: Row(
+                          children: [
+                            MentionViewIcon(view: view),
+                            const HSpace(8),
+                            Expanded(
+                              child: MentionViewTitleAndAncestors(view: view),
+                            ),
+                          ],
+                        ),
+                      ),
+                    );
+                  },
+                  childCount: filtered.length,
+                ),
+              ),
+            );
+          },
+        ),
+      ],
+    );
+  }
+
+  Future<List<ViewPB>> _fetchViews() async =>
+      (await ViewBackendService.getAllViews()).toNullable()?.items ?? [];
+}
+
+class _Header extends SliverPersistentHeaderDelegate {
+  const _Header({
+    required this.child,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(
+    BuildContext context,
+    double shrinkOffset,
+    bool overlapsContent,
+  ) {
+    return child;
+  }
+
+  @override
+  double get maxExtent => 120.5;
+
+  @override
+  double get minExtent => 120.5;
+
+  @override
+  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
+    return false;
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/chat_mention_page_menu.dart

@@ -0,0 +1,429 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_input_control_cubit.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
+import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/application/view_title/view_title_bar_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_icon.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
+import 'package:easy_localization/easy_localization.dart' hide TextDirection;
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:scroll_to_index/scroll_to_index.dart';
+
+const double _itemHeight = 44.0;
+const double _noPageHeight = 20.0;
+const double _fixedWidth = 360.0;
+const double _maxHeight = 328.0;
+
+class ChatInputAnchor {
+  ChatInputAnchor(this.anchorKey, this.layerLink);
+
+  final GlobalKey<State<StatefulWidget>> anchorKey;
+  final LayerLink layerLink;
+}
+
+class ChatMentionPageMenu extends StatefulWidget {
+  const ChatMentionPageMenu({
+    super.key,
+    required this.anchor,
+    required this.textController,
+    required this.onPageSelected,
+  });
+
+  final ChatInputAnchor anchor;
+  final TextEditingController textController;
+  final void Function(ViewPB view) onPageSelected;
+
+  @override
+  State<ChatMentionPageMenu> createState() => _ChatMentionPageMenuState();
+}
+
+class _ChatMentionPageMenuState extends State<ChatMentionPageMenu> {
+  @override
+  void initState() {
+    super.initState();
+    Future.delayed(Duration.zero, () {
+      context.read<ChatInputControlCubit>().refreshViews();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<ChatInputControlCubit, ChatInputControlState>(
+      builder: (context, state) {
+        return Stack(
+          children: [
+            CompositedTransformFollower(
+              link: widget.anchor.layerLink,
+              showWhenUnlinked: false,
+              offset: Offset(getPopupOffsetX(), 0.0),
+              followerAnchor: Alignment.bottomLeft,
+              child: Container(
+                constraints: const BoxConstraints(
+                  minWidth: _fixedWidth,
+                  maxWidth: _fixedWidth,
+                  maxHeight: _maxHeight,
+                ),
+                decoration: BoxDecoration(
+                  color: Theme.of(context).cardColor,
+                  borderRadius: BorderRadius.circular(6.0),
+                  boxShadow: const [
+                    BoxShadow(
+                      color: Color(0x0A1F2329),
+                      blurRadius: 24,
+                      offset: Offset(0, 8),
+                      spreadRadius: 8,
+                    ),
+                    BoxShadow(
+                      color: Color(0x0A1F2329),
+                      blurRadius: 12,
+                      offset: Offset(0, 6),
+                    ),
+                    BoxShadow(
+                      color: Color(0x0F1F2329),
+                      blurRadius: 8,
+                      offset: Offset(0, 4),
+                      spreadRadius: -8,
+                    ),
+                  ],
+                ),
+                child: TextFieldTapRegion(
+                  child: ChatMentionPageList(
+                    onPageSelected: widget.onPageSelected,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  double getPopupOffsetX() {
+    if (widget.anchor.anchorKey.currentContext == null) {
+      return 0.0;
+    }
+
+    final cubit = context.read<ChatInputControlCubit>();
+    if (cubit.filterStartPosition == -1) {
+      return 0.0;
+    }
+
+    final textPosition = TextPosition(offset: cubit.filterEndPosition);
+    final renderBox =
+        widget.anchor.anchorKey.currentContext?.findRenderObject() as RenderBox;
+
+    final textPainter = TextPainter(
+      text: TextSpan(text: cubit.formatIntputText(widget.textController.text)),
+      textDirection: TextDirection.ltr,
+    );
+    textPainter.layout(
+      minWidth: renderBox.size.width,
+      maxWidth: renderBox.size.width,
+    );
+
+    final caretOffset = textPainter.getOffsetForCaret(textPosition, Rect.zero);
+    final boxes = textPainter.getBoxesForSelection(
+      TextSelection(
+        baseOffset: textPosition.offset,
+        extentOffset: textPosition.offset,
+      ),
+    );
+
+    if (boxes.isNotEmpty) {
+      return boxes.last.right;
+    }
+
+    return caretOffset.dx;
+  }
+}
+
+class ChatMentionPageList extends StatefulWidget {
+  const ChatMentionPageList({
+    super.key,
+    required this.onPageSelected,
+  });
+
+  final void Function(ViewPB view) onPageSelected;
+
+  @override
+  State<ChatMentionPageList> createState() => _ChatMentionPageListState();
+}
+
+class _ChatMentionPageListState extends State<ChatMentionPageList> {
+  final autoScrollController = SimpleAutoScrollController(
+    suggestedRowHeight: _itemHeight,
+    beginGetter: (rect) => rect.top + 8.0,
+    endGetter: (rect) => rect.bottom - 8.0,
+  );
+
+  @override
+  void dispose() {
+    autoScrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocConsumer<ChatInputControlCubit, ChatInputControlState>(
+      listenWhen: (previous, current) {
+        return previous.maybeWhen(
+          ready: (_, pFocusedViewIndex) => current.maybeWhen(
+            ready: (_, cFocusedViewIndex) =>
+                pFocusedViewIndex != cFocusedViewIndex,
+            orElse: () => false,
+          ),
+          orElse: () => false,
+        );
+      },
+      listener: (context, state) {
+        state.maybeWhen(
+          ready: (views, focusedViewIndex) {
+            if (focusedViewIndex == -1 || !autoScrollController.hasClients) {
+              return;
+            }
+            if (autoScrollController.isAutoScrolling) {
+              autoScrollController.position
+                  .jumpTo(autoScrollController.position.pixels);
+            }
+            autoScrollController.scrollToIndex(
+              focusedViewIndex,
+              duration: const Duration(milliseconds: 200),
+              preferPosition: AutoScrollPosition.begin,
+            );
+          },
+          orElse: () {},
+        );
+      },
+      builder: (context, state) {
+        return state.maybeWhen(
+          loading: () {
+            return const Padding(
+              padding: EdgeInsets.all(8.0),
+              child: SizedBox(
+                height: _noPageHeight,
+                child: Center(
+                  child: CircularProgressIndicator.adaptive(),
+                ),
+              ),
+            );
+          },
+          ready: (views, focusedViewIndex) {
+            if (views.isEmpty) {
+              return Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: SizedBox(
+                  height: _noPageHeight,
+                  child: Center(
+                    child: FlowyText(
+                      LocaleKeys.chat_inputActionNoPages.tr(),
+                    ),
+                  ),
+                ),
+              );
+            }
+
+            return ListView.builder(
+              shrinkWrap: true,
+              controller: autoScrollController,
+              padding: const EdgeInsets.all(8.0),
+              itemCount: views.length,
+              itemBuilder: (context, index) {
+                final view = views[index];
+                return AutoScrollTag(
+                  key: ValueKey("chat_mention_page_item_${view.id}"),
+                  index: index,
+                  controller: autoScrollController,
+                  child: _ChatMentionPageItem(
+                    view: view,
+                    onTap: () => widget.onPageSelected(view),
+                    isSelected: focusedViewIndex == index,
+                  ),
+                );
+              },
+            );
+          },
+          orElse: () => const SizedBox.shrink(),
+        );
+      },
+    );
+  }
+}
+
+class _ChatMentionPageItem extends StatelessWidget {
+  const _ChatMentionPageItem({
+    required this.view,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  final ViewPB view;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyTooltip(
+      message: view.name,
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: GestureDetector(
+          onTap: onTap,
+          behavior: HitTestBehavior.opaque,
+          child: FlowyHover(
+            isSelected: () => isSelected,
+            child: Container(
+              height: _itemHeight,
+              padding: const EdgeInsets.all(4.0),
+              child: Row(
+                children: [
+                  MentionViewIcon(view: view),
+                  const HSpace(8.0),
+                  Expanded(child: MentionViewTitleAndAncestors(view: view)),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class MentionViewIcon extends StatelessWidget {
+  const MentionViewIcon({
+    super.key,
+    required this.view,
+  });
+
+  final ViewPB view;
+
+  @override
+  Widget build(BuildContext context) {
+    final spaceIcon = view.buildSpaceIconSvg(context);
+
+    if (view.icon.value.isNotEmpty) {
+      return SizedBox(
+        width: 16.0,
+        child: EmojiIconWidget(
+          emoji: view.icon.toEmojiIconData(),
+          emojiSize: 14,
+        ),
+      );
+    }
+
+    if (view.isSpace == true && spaceIcon != null) {
+      return SpaceIcon(
+        dimension: 16.0,
+        svgSize: 9.68,
+        space: view,
+        cornerRadius: 4,
+      );
+    }
+
+    return FlowySvg(
+      view.layout.icon,
+      size: const Size.square(16),
+      color: Theme.of(context).hintColor,
+    );
+  }
+}
+
+class MentionViewTitleAndAncestors extends StatelessWidget {
+  const MentionViewTitleAndAncestors({
+    super.key,
+    required this.view,
+  });
+
+  final ViewPB view;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => ViewTitleBarBloc(view: view),
+      child: BlocBuilder<ViewTitleBarBloc, ViewTitleBarState>(
+        builder: (context, state) {
+          final nonEmptyName = view.name.isEmpty
+              ? LocaleKeys.document_title_placeholder.tr()
+              : view.name;
+
+          final ancestorList = _getViewAncestorList(state.ancestors);
+
+          if (state.ancestors.isEmpty || ancestorList.trim().isEmpty) {
+            return FlowyText(
+              nonEmptyName,
+              fontSize: 14.0,
+              overflow: TextOverflow.ellipsis,
+            );
+          }
+
+          return Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              FlowyText(
+                nonEmptyName,
+                fontSize: 14.0,
+                figmaLineHeight: 20.0,
+                overflow: TextOverflow.ellipsis,
+              ),
+              FlowyText(
+                ancestorList,
+                fontSize: 12.0,
+                figmaLineHeight: 16.0,
+                color: Theme.of(context).hintColor,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+
+  /// see workspace/presentation/widgets/view_title_bar.dart, upon which this
+  /// function was based. This version doesn't include the current view in the
+  /// result, and returns a string rather than a list of widgets
+  String _getViewAncestorList(
+    List<ViewPB> views,
+  ) {
+    const lowerBound = 2;
+    final upperBound = views.length - 2;
+    bool hasAddedEllipsis = false;
+    String result = "";
+
+    if (views.length <= 1) {
+      return "";
+    }
+
+    // ignore the workspace name, use section name instead in the future
+    // skip the workspace view
+    for (var i = 1; i < views.length - 1; i++) {
+      final view = views[i];
+
+      if (i >= lowerBound && i < upperBound) {
+        if (!hasAddedEllipsis) {
+          hasAddedEllipsis = true;
+          result += "… / ";
+        }
+        continue;
+      }
+
+      final nonEmptyName = view.name.isEmpty
+          ? LocaleKeys.document_title_placeholder.tr()
+          : view.name;
+
+      result += nonEmptyName;
+
+      if (i != views.length - 2) {
+        // if not the last one, add a divider
+        result += " / ";
+      }
+    }
+    return result;
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/desktop_ai_prompt_input.dart

@@ -1,10 +1,8 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
 import 'package:appflowy/plugins/ai_chat/application/ai_prompt_input_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_input_action_control.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/chat_input/chat_input_file.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/chat_input_action_menu.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_input_control_cubit.dart';
 import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:extended_text_field/extended_text_field.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
@@ -12,43 +10,41 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
-import 'package:flutter_chat_ui/flutter_chat_ui.dart';
-import 'package:universal_platform/universal_platform.dart';
 
-import 'ai_prompt_buttons.dart';
-import 'chat_input_span.dart';
 import '../layout_define.dart';
+import 'ai_prompt_buttons.dart';
+import 'chat_input_file.dart';
+import 'chat_input_span.dart';
+import 'chat_mention_page_menu.dart';
+import 'select_sources_menu.dart';
 
 class DesktopAIPromptInput extends StatefulWidget {
   const DesktopAIPromptInput({
     super.key,
     required this.chatId,
-    required this.indicateFocus,
-    this.options = const InputOptions(),
     required this.isStreaming,
     required this.onStopStreaming,
     required this.onSubmitted,
+    required this.onUpdateSelectedSources,
   });
 
   final String chatId;
-  final bool indicateFocus;
-  final InputOptions options;
   final bool isStreaming;
   final void Function() onStopStreaming;
-  final void Function(types.PartialText) onSubmitted;
+  final void Function(String, Map<String, dynamic>) onSubmitted;
+  final void Function(bool, List<String>) onUpdateSelectedSources;
 
   @override
   State<DesktopAIPromptInput> createState() => _DesktopAIPromptInputState();
 }
 
 class _DesktopAIPromptInputState extends State<DesktopAIPromptInput> {
-  final GlobalKey _textFieldKey = GlobalKey();
-  final LayerLink _layerLink = LayerLink();
-
-  late final ChatInputActionControl _inputActionControl;
-  late final FocusNode _inputFocusNode;
-  late final TextEditingController _textController;
+  final textFieldKey = GlobalKey();
+  final layerLink = LayerLink();
+  final overlayController = OverlayPortalController();
+  final inputControlCubit = ChatInputControlCubit();
+  final focusNode = FocusNode();
+  final textController = TextEditingController();
 
   late SendButtonState sendButtonState;
 
@@ -56,40 +52,22 @@ class _DesktopAIPromptInputState extends State<DesktopAIPromptInput> {
   void initState() {
     super.initState();
 
-    _textController = InputTextFieldController()
-      ..addListener(_handleTextControllerChange);
+    textController.addListener(handleTextControllerChanged);
 
-    _inputFocusNode = FocusNode(
-      onKeyEvent: (node, event) {
-        if (_inputActionControl.canHandleKeyEvent(event)) {
-          _inputActionControl.handleKeyEvent(event);
-          return KeyEventResult.handled;
-        } else {
-          return _handleEnterKeyWithoutShift(
-            event,
-            _textController,
-            widget.isStreaming,
-            _handleSendPressed,
-          );
+    // refresh border color on focus change and hide menu when lost focus
+    focusNode.addListener(
+      () => setState(() {
+        if (!focusNode.hasFocus) {
+          cancelMentionPage();
         }
-      },
-    )..addListener(() {
-        // refresh border color on focus change
-        if (widget.indicateFocus) {
-          setState(() {});
-        }
-      });
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      _inputFocusNode.requestFocus();
-    });
-
-    _inputActionControl = ChatInputActionControl(
-      chatId: widget.chatId,
-      textController: _textController,
-      textFieldFocusNode: _inputFocusNode,
+      }),
     );
 
     updateSendButtonState();
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      focusNode.requestFocus();
+    });
   }
 
   @override
@@ -100,208 +78,491 @@ class _DesktopAIPromptInputState extends State<DesktopAIPromptInput> {
 
   @override
   void dispose() {
-    _inputFocusNode.dispose();
-    _textController.dispose();
-    _inputActionControl.dispose();
+    focusNode.dispose();
+    textController.dispose();
+    inputControlCubit.close();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        border: Border.all(
-          color: _inputFocusNode.hasFocus && widget.indicateFocus
-              ? Theme.of(context).colorScheme.primary
-              : Theme.of(context).colorScheme.outline,
-        ),
-        borderRadius: DesktopAIPromptSizes.promptFrameRadius,
-      ),
-      child: Column(
-        children: [
-          ConstrainedBox(
-            constraints: BoxConstraints(
-              maxHeight: DesktopAIPromptSizes.attachedFilesBarPadding.vertical +
-                  DesktopAIPromptSizes.attachedFilesPreviewHeight,
-            ),
-            child: TextFieldTapRegion(
-              child: ChatInputFile(
-                chatId: widget.chatId,
-                onDeleted: (file) => context
-                    .read<AIPromptInputBloc>()
-                    .add(AIPromptInputEvent.deleteFile(file)),
+    return BlocProvider.value(
+      value: inputControlCubit,
+      child: BlocListener<ChatInputControlCubit, ChatInputControlState>(
+        listener: (context, state) {
+          state.maybeWhen(
+            updateSelectedViews: (selectedViews) {
+              context
+                  .read<AIPromptInputBloc>()
+                  .add(AIPromptInputEvent.updateMentionedViews(selectedViews));
+            },
+            orElse: () {},
+          );
+        },
+        child: OverlayPortal(
+          controller: overlayController,
+          overlayChildBuilder: (context) {
+            return ChatMentionPageMenu(
+              anchor: ChatInputAnchor(textFieldKey, layerLink),
+              textController: textController,
+              onPageSelected: handlePageSelected,
+            );
+          },
+          child: DecoratedBox(
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: focusNode.hasFocus
+                    ? Theme.of(context).colorScheme.primary
+                    : Theme.of(context).colorScheme.outline,
+                width: focusNode.hasFocus ? 1.5 : 1.0,
               ),
+              borderRadius: DesktopAIPromptSizes.promptFrameRadius,
             ),
-          ),
-          Stack(
-            children: [
-              ConstrainedBox(
-                constraints: const BoxConstraints(
-                  minHeight: DesktopAIPromptSizes.textFieldMinHeight +
-                      DesktopAIPromptSizes.actionBarHeight,
-                  maxHeight: 300,
-                ),
-                child: _inputTextField(context),
-              ),
-              Positioned.fill(
-                top: null,
-                child: TextFieldTapRegion(
-                  child: Container(
-                    height: DesktopAIPromptSizes.actionBarHeight,
-                    padding: const EdgeInsets.symmetric(horizontal: 8),
-                    child: BlocBuilder<AIPromptInputBloc, AIPromptInputState>(
-                      builder: (context, state) {
-                        return Row(
-                          crossAxisAlignment: CrossAxisAlignment.start,
-                          children: [
-                            // _predefinedFormatButton(),
-                            const Spacer(),
-                            _mentionButton(),
-                            const HSpace(
-                              DesktopAIPromptSizes.actionBarButtonSpacing,
-                            ),
-                            if (UniversalPlatform.isDesktop &&
-                                state.supportChatWithFile) ...[
-                              _attachmentButton(),
-                              const HSpace(
-                                DesktopAIPromptSizes.actionBarButtonSpacing,
-                              ),
-                            ],
-                            _sendButton(),
-                          ],
-                        );
-                      },
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                ConstrainedBox(
+                  constraints: BoxConstraints(
+                    maxHeight:
+                        DesktopAIPromptSizes.attachedFilesBarPadding.vertical +
+                            DesktopAIPromptSizes.attachedFilesPreviewHeight,
+                  ),
+                  child: TextFieldTapRegion(
+                    child: ChatInputFile(
+                      chatId: widget.chatId,
+                      onDeleted: (file) => context
+                          .read<AIPromptInputBloc>()
+                          .add(AIPromptInputEvent.removeFile(file)),
                     ),
                   ),
                 ),
-              ),
-            ],
+                Stack(
+                  children: [
+                    ConstrainedBox(
+                      constraints: BoxConstraints(
+                        minHeight: DesktopAIPromptSizes.textFieldMinHeight +
+                            DesktopAIPromptSizes.actionBarHeight +
+                            DesktopAIPromptSizes.actionBarPadding.vertical,
+                        maxHeight: 300,
+                      ),
+                      child: inputTextField(),
+                    ),
+                    Positioned.fill(
+                      top: null,
+                      child: TextFieldTapRegion(
+                        child: _PromptBottomActions(
+                          textController: textController,
+                          overlayController: overlayController,
+                          focusNode: focusNode,
+                          sendButtonState: sendButtonState,
+                          onSendPressed: handleSendPressed,
+                          onStopStreaming: widget.onStopStreaming,
+                          onUpdateSelectedSources:
+                              widget.onUpdateSelectedSources,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
           ),
-        ],
+        ),
       ),
     );
   }
 
+  void cancelMentionPage() {
+    if (overlayController.isShowing) {
+      inputControlCubit.reset();
+      overlayController.hide();
+    }
+  }
+
   void updateSendButtonState() {
     if (widget.isStreaming) {
       sendButtonState = SendButtonState.streaming;
-    } else if (_textController.text.trim().isEmpty) {
+    } else if (textController.text.trim().isEmpty) {
       sendButtonState = SendButtonState.disabled;
     } else {
       sendButtonState = SendButtonState.enabled;
     }
   }
 
-  void _handleSendPressed() {
-    final trimmedText = _textController.text.trim();
-    _textController.clear();
+  void handleSendPressed() {
+    if (widget.isStreaming) {
+      return;
+    }
+    final trimmedText = inputControlCubit.formatIntputText(
+      textController.text.trim(),
+    );
+    textController.clear();
     if (trimmedText.isEmpty) {
       return;
     }
-    // consume metadata
-    final ChatInputMentionMetadata mentionPageMetadata =
-        _inputActionControl.consumeMetaData();
-    final ChatInputFileMetadata fileMetadata =
-        context.read<AIPromptInputBloc>().consumeMetadata();
 
-    // combine metadata
-    final Map<String, dynamic> metadata = {}
-      ..addAll(mentionPageMetadata)
-      ..addAll(fileMetadata);
+    // get the attached files and mentioned pages
+    final metadata = context.read<AIPromptInputBloc>().consumeMetadata();
 
-    final partialText = types.PartialText(
-      text: trimmedText,
-      metadata: metadata,
-    );
-    widget.onSubmitted(partialText);
+    widget.onSubmitted(trimmedText, metadata);
   }
 
-  void _handleTextControllerChange() {
-    if (_textController.value.isComposingRangeValid) {
+  void handleTextControllerChanged() {
+    if (!textController.value.composing.isCollapsed) {
       return;
     }
+
+    // update whether send button is clickable
     setState(() => updateSendButtonState());
+
+    // handle text and selection changes ONLY when mentioning a page
+
+    // disable mention
+    return;
+    // ignore: dead_code
+    if (!overlayController.isShowing ||
+        inputControlCubit.filterStartPosition == -1) {
+      return;
+    }
+
+    // handle cases where mention a page is cancelled
+    final textSelection = textController.value.selection;
+    final isSelectingMultipleCharacters = !textSelection.isCollapsed;
+    final isCaretBeforeStartOfRange =
+        textSelection.baseOffset < inputControlCubit.filterStartPosition;
+    final isCaretAfterEndOfRange =
+        textSelection.baseOffset > inputControlCubit.filterEndPosition;
+    final isTextSame = inputControlCubit.inputText == textController.text;
+
+    if (isSelectingMultipleCharacters ||
+        isTextSame && (isCaretBeforeStartOfRange || isCaretAfterEndOfRange)) {
+      cancelMentionPage();
+      return;
+    }
+
+    final previousLength = inputControlCubit.inputText.characters.length;
+    final currentLength = textController.text.characters.length;
+
+    // delete "@"
+    if (previousLength != currentLength && isCaretBeforeStartOfRange) {
+      cancelMentionPage();
+      return;
+    }
+
+    // handle cases where mention the filter is updated
+    if (previousLength != currentLength) {
+      final diff = currentLength - previousLength;
+      final newEndPosition = inputControlCubit.filterEndPosition + diff;
+      final newFilter = textController.text.substring(
+        inputControlCubit.filterStartPosition,
+        newEndPosition,
+      );
+      inputControlCubit.updateFilter(
+        textController.text,
+        newFilter,
+        newEndPosition: newEndPosition,
+      );
+    } else if (!isTextSame) {
+      final newFilter = textController.text.substring(
+        inputControlCubit.filterStartPosition,
+        inputControlCubit.filterEndPosition,
+      );
+      inputControlCubit.updateFilter(textController.text, newFilter);
+    }
   }
 
-  Widget _inputTextField(BuildContext context) {
-    return CompositedTransformTarget(
-      link: _layerLink,
-      child: BlocBuilder<AIPromptInputBloc, AIPromptInputState>(
-        builder: (context, state) {
-          return ExtendedTextField(
-            key: _textFieldKey,
-            controller: _textController,
-            focusNode: _inputFocusNode,
-            decoration: InputDecoration(
-              border: InputBorder.none,
-              enabledBorder: InputBorder.none,
-              focusedBorder: InputBorder.none,
-              contentPadding: DesktopAIPromptSizes.textFieldContentPadding.add(
-                const EdgeInsets.only(
-                  bottom: DesktopAIPromptSizes.actionBarHeight,
-                ),
-              ),
+  void handlePageSelected(ViewPB view) {
+    final newText = textController.text.replaceRange(
+      inputControlCubit.filterStartPosition,
+      inputControlCubit.filterEndPosition,
+      view.id,
+    );
+    textController.value = TextEditingValue(
+      text: newText,
+      selection: TextSelection.collapsed(
+        offset: inputControlCubit.filterStartPosition + view.id.length,
+        affinity: TextAffinity.upstream,
+      ),
+    );
+
+    inputControlCubit.selectPage(view);
+    overlayController.hide();
+  }
+
+  Widget inputTextField() {
+    return Actions(
+      actions: buildActions(),
+      child: CompositedTransformTarget(
+        link: layerLink,
+        child: BlocBuilder<AIPromptInputBloc, AIPromptInputState>(
+          builder: (context, state) {
+            return _PromptTextField(
+              key: textFieldKey,
+              cubit: inputControlCubit,
+              textController: textController,
+              textFieldFocusNode: focusNode,
               hintText: switch (state.aiType) {
                 AIType.appflowyAI => LocaleKeys.chat_inputMessageHint.tr(),
                 AIType.localAI => LocaleKeys.chat_inputLocalAIMessageHint.tr()
               },
-              hintStyle: Theme.of(context)
-                  .textTheme
-                  .bodyMedium
-                  ?.copyWith(color: Theme.of(context).hintColor),
-              isCollapsed: true,
-              isDense: true,
+              // onStartMentioningPage: () {
+              //   WidgetsBinding.instance.addPostFrameCallback((_) {
+              //     inputControlCubit.startSearching(textController.value);
+              //     overlayController.show();
+              //   });
+              // },
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  Map<Type, Action<Intent>> buildActions() {
+    return {
+      _FocusPreviousItemIntent: CallbackAction<_FocusPreviousItemIntent>(
+        onInvoke: (intent) {
+          inputControlCubit.updateSelectionUp();
+          return;
+        },
+      ),
+      _FocusNextItemIntent: CallbackAction<_FocusNextItemIntent>(
+        onInvoke: (intent) {
+          inputControlCubit.updateSelectionDown();
+          return;
+        },
+      ),
+      _CancelMentionPageIntent: CallbackAction<_CancelMentionPageIntent>(
+        onInvoke: (intent) {
+          cancelMentionPage();
+          return;
+        },
+      ),
+      _SubmitOrMentionPageIntent: CallbackAction<_SubmitOrMentionPageIntent>(
+        onInvoke: (intent) {
+          if (overlayController.isShowing) {
+            inputControlCubit.state.maybeWhen(
+              ready: (visibleViews, focusedViewIndex) {
+                if (focusedViewIndex != -1 &&
+                    focusedViewIndex < visibleViews.length) {
+                  handlePageSelected(visibleViews[focusedViewIndex]);
+                }
+              },
+              orElse: () {},
+            );
+          } else {
+            handleSendPressed();
+          }
+          return;
+        },
+      ),
+    };
+  }
+}
+
+class _PromptTextField extends StatefulWidget {
+  const _PromptTextField({
+    super.key,
+    required this.cubit,
+    required this.textController,
+    required this.textFieldFocusNode,
+    // required this.onStartMentioningPage,
+    this.hintText = "",
+  });
+
+  final ChatInputControlCubit cubit;
+  final TextEditingController textController;
+  final FocusNode textFieldFocusNode;
+  // final void Function() onStartMentioningPage;
+  final String hintText;
+
+  @override
+  State<_PromptTextField> createState() => _PromptTextFieldState();
+}
+
+class _PromptTextFieldState extends State<_PromptTextField> {
+  bool isComposing = false;
+
+  @override
+  void initState() {
+    super.initState();
+    // widget.textFieldFocusNode.onKeyEvent = handleKeyEvent;
+    widget.textController.addListener(onTextChanged);
+  }
+
+  @override
+  void dispose() {
+    // widget.textFieldFocusNode.onKeyEvent = null;
+    widget.textController.removeListener(onTextChanged);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Shortcuts(
+      shortcuts: buildShortcuts(),
+      child: ExtendedTextField(
+        controller: widget.textController,
+        focusNode: widget.textFieldFocusNode,
+        decoration: InputDecoration(
+          border: InputBorder.none,
+          enabledBorder: InputBorder.none,
+          focusedBorder: InputBorder.none,
+          contentPadding: DesktopAIPromptSizes.textFieldContentPadding.add(
+            const EdgeInsets.only(
+              bottom: DesktopAIPromptSizes.actionBarHeight,
             ),
-            keyboardType: TextInputType.multiline,
-            textCapitalization: TextCapitalization.sentences,
-            minLines: 1,
-            maxLines: null,
-            style: Theme.of(context).textTheme.bodyMedium,
-            specialTextSpanBuilder: ChatInputTextSpanBuilder(
-              inputActionControl: _inputActionControl,
-            ),
-            onChanged: (text) {
-              _handleOnTextChange(context, text);
-            },
+          ),
+          hintText: widget.hintText,
+          hintStyle: Theme.of(context)
+              .textTheme
+              .bodyMedium
+              ?.copyWith(color: Theme.of(context).hintColor),
+          isCollapsed: true,
+          isDense: true,
+        ),
+        keyboardType: TextInputType.multiline,
+        textCapitalization: TextCapitalization.sentences,
+        minLines: 1,
+        maxLines: null,
+        style: Theme.of(context).textTheme.bodyMedium,
+        specialTextSpanBuilder: ChatInputTextSpanBuilder(
+          inputControlCubit: widget.cubit,
+          specialTextStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                color: Theme.of(context).colorScheme.primary,
+                fontWeight: FontWeight.w600,
+              ),
+        ),
+      ),
+    );
+  }
+
+  // KeyEventResult handleKeyEvent(FocusNode node, KeyEvent event) {
+  //   if (event.character == '@') {
+  //     widget.onStartMentioningPage();
+  //   }
+  //   return KeyEventResult.ignored;
+  // }
+
+  void onTextChanged() {
+    setState(
+      () => isComposing = !widget.textController.value.composing.isCollapsed,
+    );
+  }
+
+  Map<ShortcutActivator, Intent> buildShortcuts() {
+    if (isComposing) {
+      return const {};
+    }
+
+    return const {
+      SingleActivator(LogicalKeyboardKey.arrowUp): _FocusPreviousItemIntent(),
+      SingleActivator(LogicalKeyboardKey.arrowDown): _FocusNextItemIntent(),
+      SingleActivator(LogicalKeyboardKey.escape): _CancelMentionPageIntent(),
+      SingleActivator(LogicalKeyboardKey.enter): _SubmitOrMentionPageIntent(),
+    };
+  }
+}
+
+class _SubmitOrMentionPageIntent extends Intent {
+  const _SubmitOrMentionPageIntent();
+}
+
+class _CancelMentionPageIntent extends Intent {
+  const _CancelMentionPageIntent();
+}
+
+class _FocusPreviousItemIntent extends Intent {
+  const _FocusPreviousItemIntent();
+}
+
+class _FocusNextItemIntent extends Intent {
+  const _FocusNextItemIntent();
+}
+
+class _PromptBottomActions extends StatelessWidget {
+  const _PromptBottomActions({
+    required this.textController,
+    required this.overlayController,
+    required this.focusNode,
+    required this.sendButtonState,
+    required this.onSendPressed,
+    required this.onStopStreaming,
+    required this.onUpdateSelectedSources,
+  });
+
+  final TextEditingController textController;
+  final OverlayPortalController overlayController;
+  final FocusNode focusNode;
+  final SendButtonState sendButtonState;
+  final void Function() onSendPressed;
+  final void Function() onStopStreaming;
+  final void Function(bool, List<String>) onUpdateSelectedSources;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: DesktopAIPromptSizes.actionBarHeight,
+      margin: DesktopAIPromptSizes.actionBarPadding,
+      child: BlocBuilder<AIPromptInputBloc, AIPromptInputState>(
+        builder: (context, state) {
+          return Row(
+            children: [
+              // predefinedFormatButton(),
+              const Spacer(),
+              if (state.aiType == AIType.appflowyAI) ...[
+                _selectSourcesButton(context),
+                const HSpace(
+                  DesktopAIPromptSizes.actionBarButtonSpacing,
+                ),
+              ],
+              // _mentionButton(context),
+              // const HSpace(
+              //   DesktopAIPromptSizes.actionBarButtonSpacing,
+              // ),
+              if (state.supportChatWithFile) ...[
+                _attachmentButton(context),
+                const HSpace(
+                  DesktopAIPromptSizes.actionBarButtonSpacing,
+                ),
+              ],
+              _sendButton(),
+            ],
           );
         },
       ),
     );
   }
 
-  Future<void> _handleOnTextChange(BuildContext context, String text) async {
-    if (!_inputActionControl.onTextChanged(text)) {
-      return;
-    }
-
-    ChatActionsMenu(
-      anchor: ChatInputAnchor(
-        anchorKey: _textFieldKey,
-        layerLink: _layerLink,
-      ),
-      handler: _inputActionControl,
-      context: context,
-      style: Theme.of(context).brightness == Brightness.dark
-          ? const ChatActionsMenuStyle.dark()
-          : const ChatActionsMenuStyle.light(),
-    ).show();
-  }
-
-  Widget _mentionButton() {
-    return PromptInputMentionButton(
-      iconSize: DesktopAIPromptSizes.actionBarIconSize,
-      buttonSize: DesktopAIPromptSizes.actionBarButtonSize,
-      onTap: () {
-        _textController.text += '@';
-        if (!_inputFocusNode.hasFocus) {
-          _inputFocusNode.requestFocus();
-        }
-        _handleOnTextChange(context, _textController.text);
-      },
+  Widget _selectSourcesButton(BuildContext context) {
+    return PromptInputDesktopSelectSourcesButton(
+      onUpdateSelectedSources: onUpdateSelectedSources,
     );
   }
 
-  Widget _attachmentButton() {
+  // Widget _mentionButton(BuildContext context) {
+  //   return PromptInputMentionButton(
+  //     iconSize: DesktopAIPromptSizes.actionBarIconSize,
+  //     buttonSize: DesktopAIPromptSizes.actionBarButtonSize,
+  //     onTap: () {
+  //       if (overlayController.isShowing) {
+  //         return;
+  //       }
+  //       if (!focusNode.hasFocus) {
+  //         focusNode.requestFocus();
+  //       }
+  //       textController.text += '@';
+  //       Future.delayed(Duration.zero, () {
+  //         context
+  //             .read<ChatInputControlCubit>()
+  //             .startSearching(textController.value);
+  //         overlayController.show();
+  //       });
+  //     },
+  //   );
+  // }
+
+  Widget _attachmentButton(BuildContext context) {
     return PromptInputAttachmentButton(
       onTap: () async {
         final path = await getIt<FilePickerService>().pickFiles(
@@ -315,12 +576,10 @@ class _DesktopAIPromptInputState extends State<DesktopAIPromptInput> {
         }
 
         for (final file in path.files) {
-          if (file.path != null) {
-            if (mounted) {
-              context
-                  .read<AIPromptInputBloc>()
-                  .add(AIPromptInputEvent.newFile(file.path!, file.name));
-            }
+          if (file.path != null && context.mounted) {
+            context
+                .read<AIPromptInputBloc>()
+                .add(AIPromptInputEvent.attachFile(file.path!, file.name));
           }
         }
       },
@@ -329,59 +588,11 @@ class _DesktopAIPromptInputState extends State<DesktopAIPromptInput> {
 
   Widget _sendButton() {
     return PromptInputSendButton(
-      buttonSize: DesktopAIPromptSizes.actionBarButtonSize,
+      buttonSize: DesktopAIPromptSizes.actionBarHeight,
       iconSize: DesktopAIPromptSizes.sendButtonSize,
       state: sendButtonState,
-      onSendPressed: _handleSendPressed,
-      onStopStreaming: widget.onStopStreaming,
+      onSendPressed: onSendPressed,
+      onStopStreaming: onStopStreaming,
     );
   }
 }
-
-class ChatInputAnchor extends ChatAnchor {
-  ChatInputAnchor({
-    required this.anchorKey,
-    required this.layerLink,
-  });
-
-  @override
-  final GlobalKey<State<StatefulWidget>> anchorKey;
-
-  @override
-  final LayerLink layerLink;
-}
-
-/// Handles the key press event for the Enter key without Shift.
-///
-/// This function checks if the Enter key is pressed without either of the Shift keys.
-/// If the conditions are met, it performs the action of sending a message if the
-/// text controller is not in a composing range and if the event is a key down event.
-///
-/// - Returns: A `KeyEventResult` indicating whether the key event was handled or ignored.
-KeyEventResult _handleEnterKeyWithoutShift(
-  KeyEvent event,
-  TextEditingController textController,
-  bool isStreaming,
-  void Function() handleSendPressed,
-) {
-  if (event.physicalKey == PhysicalKeyboardKey.enter &&
-      !HardwareKeyboard.instance.physicalKeysPressed.any(
-        (el) => <PhysicalKeyboardKey>{
-          PhysicalKeyboardKey.shiftLeft,
-          PhysicalKeyboardKey.shiftRight,
-        }.contains(el),
-      )) {
-    if (textController.value.isComposingRangeValid) {
-      return KeyEventResult.ignored;
-    }
-
-    if (event is KeyDownEvent) {
-      if (!isStreaming) {
-        handleSendPressed();
-      }
-    }
-    return KeyEventResult.handled;
-  } else {
-    return KeyEventResult.ignored;
-  }
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/mobile_ai_prompt_input.dart

@@ -1,48 +1,44 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
 import 'package:appflowy/plugins/ai_chat/application/ai_prompt_input_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_input_action_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_input_action_control.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/chat_input/chat_input_file.dart';
-import 'package:appflowy/plugins/ai_chat/presentation/chat_input_action_menu.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mobile_page_selector_sheet.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_input_control_cubit.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:extended_text_field/extended_text_field.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
-import 'package:flutter_chat_ui/flutter_chat_ui.dart';
 
-import 'ai_prompt_buttons.dart';
-import 'chat_input_span.dart';
 import '../layout_define.dart';
+import 'ai_prompt_buttons.dart';
+import 'chat_input_file.dart';
+import 'chat_input_span.dart';
+import 'chat_mention_page_bottom_sheet.dart';
+import 'select_sources_bottom_sheet.dart';
 
 class MobileAIPromptInput extends StatefulWidget {
   const MobileAIPromptInput({
     super.key,
     required this.chatId,
-    this.options = const InputOptions(),
     required this.isStreaming,
     required this.onStopStreaming,
     required this.onSubmitted,
+    required this.onUpdateSelectedSources,
   });
 
   final String chatId;
-  final InputOptions options;
   final bool isStreaming;
   final void Function() onStopStreaming;
-  final void Function(types.PartialText) onSubmitted;
+  final void Function(String, Map<String, dynamic>) onSubmitted;
+  final void Function(List<String>) onUpdateSelectedSources;
 
   @override
   State<MobileAIPromptInput> createState() => _MobileAIPromptInputState();
 }
 
 class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
-  late final ChatInputActionControl _inputActionControl;
-  late final FocusNode _inputFocusNode;
-  late final TextEditingController _textController;
+  final inputControlCubit = ChatInputControlCubit();
+  final focusNode = FocusNode();
+  final textController = TextEditingController();
 
   late SendButtonState sendButtonState;
 
@@ -50,20 +46,13 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
   void initState() {
     super.initState();
 
-    _textController = InputTextFieldController()
-      ..addListener(_handleTextControllerChange);
+    textController.addListener(handleTextControllerChange);
+    // focusNode.onKeyEvent = handleKeyEvent;
 
-    _inputFocusNode = FocusNode();
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      _inputFocusNode.requestFocus();
+      focusNode.requestFocus();
     });
 
-    _inputActionControl = ChatInputActionControl(
-      chatId: widget.chatId,
-      textController: _textController,
-      textFieldFocusNode: _inputFocusNode,
-    );
-
     updateSendButtonState();
   }
 
@@ -75,9 +64,9 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
 
   @override
   void dispose() {
-    _inputFocusNode.dispose();
-    _textController.dispose();
-    _inputActionControl.dispose();
+    focusNode.dispose();
+    textController.dispose();
+    inputControlCubit.close();
     super.dispose();
   }
 
@@ -85,55 +74,71 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
   Widget build(BuildContext context) {
     return Hero(
       tag: "ai_chat_prompt",
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          border: Border(
-            top: BorderSide(color: Theme.of(context).colorScheme.outline),
-          ),
-          color: Theme.of(context).colorScheme.surface,
-          boxShadow: const [
-            BoxShadow(
-              blurRadius: 4.0,
-              offset: Offset(0, -2),
-              color: Color.fromRGBO(0, 0, 0, 0.05),
-            ),
-          ],
-          borderRadius: MobileAIPromptSizes.promptFrameRadius,
-        ),
-        child: Column(
-          children: [
-            ConstrainedBox(
-              constraints: BoxConstraints(
-                maxHeight:
-                    MobileAIPromptSizes.attachedFilesBarPadding.vertical +
-                        MobileAIPromptSizes.attachedFilesPreviewHeight,
+      child: BlocProvider.value(
+        value: inputControlCubit,
+        child: BlocListener<ChatInputControlCubit, ChatInputControlState>(
+          listener: (context, state) {
+            state.maybeWhen(
+              updateSelectedViews: (selectedViews) {
+                context.read<AIPromptInputBloc>().add(
+                      AIPromptInputEvent.updateMentionedViews(selectedViews),
+                    );
+              },
+              orElse: () {},
+            );
+          },
+          child: DecoratedBox(
+            decoration: BoxDecoration(
+              border: Border(
+                top: BorderSide(color: Theme.of(context).colorScheme.outline),
               ),
-              child: ChatInputFile(
-                chatId: widget.chatId,
-                onDeleted: (file) => context
-                    .read<AIPromptInputBloc>()
-                    .add(AIPromptInputEvent.deleteFile(file)),
-              ),
-            ),
-            Container(
-              constraints: const BoxConstraints(
-                minHeight: MobileAIPromptSizes.textFieldMinHeight,
-                maxHeight: 220,
-              ),
-              padding: const EdgeInsetsDirectional.fromSTEB(0, 8.0, 12.0, 8.0),
-              child: IntrinsicHeight(
-                child: Row(
-                  children: [
-                    const HSpace(8.0),
-                    Expanded(child: _inputTextField(context)),
-                    _mentionButton(),
-                    const HSpace(6.0),
-                    _sendButton(),
-                  ],
+              color: Theme.of(context).colorScheme.surface,
+              boxShadow: const [
+                BoxShadow(
+                  blurRadius: 4.0,
+                  offset: Offset(0, -2),
+                  color: Color.fromRGBO(0, 0, 0, 0.05),
                 ),
-              ),
+              ],
+              borderRadius: MobileAIPromptSizes.promptFrameRadius,
             ),
-          ],
+            child: Column(
+              children: [
+                ConstrainedBox(
+                  constraints: BoxConstraints(
+                    maxHeight:
+                        MobileAIPromptSizes.attachedFilesBarPadding.vertical +
+                            MobileAIPromptSizes.attachedFilesPreviewHeight,
+                  ),
+                  child: ChatInputFile(
+                    chatId: widget.chatId,
+                    onDeleted: (file) => context
+                        .read<AIPromptInputBloc>()
+                        .add(AIPromptInputEvent.removeFile(file)),
+                  ),
+                ),
+                Container(
+                  constraints: const BoxConstraints(
+                    minHeight: MobileAIPromptSizes.textFieldMinHeight,
+                    maxHeight: 220,
+                  ),
+                  child: IntrinsicHeight(
+                    child: Row(
+                      children: [
+                        const HSpace(8.0),
+                        leadingButtons(context),
+                        Expanded(
+                          child: inputTextField(context),
+                        ),
+                        sendButton(),
+                        const HSpace(12.0),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
         ),
       ),
     );
@@ -142,142 +147,175 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
   void updateSendButtonState() {
     if (widget.isStreaming) {
       sendButtonState = SendButtonState.streaming;
-    } else if (_textController.text.trim().isEmpty) {
+    } else if (textController.text.trim().isEmpty) {
       sendButtonState = SendButtonState.disabled;
     } else {
       sendButtonState = SendButtonState.enabled;
     }
   }
 
-  void _handleSendPressed() {
-    final trimmedText = _textController.text.trim();
-    _textController.clear();
+  void handleSendPressed() {
+    if (widget.isStreaming) {
+      return;
+    }
+    final trimmedText = inputControlCubit.formatIntputText(
+      textController.text.trim(),
+    );
+    textController.clear();
     if (trimmedText.isEmpty) {
       return;
     }
-    // consume metadata
-    final ChatInputMentionMetadata mentionPageMetadata =
-        _inputActionControl.consumeMetaData();
-    final ChatInputFileMetadata fileMetadata =
-        context.read<AIPromptInputBloc>().consumeMetadata();
 
-    // combine metadata
-    final Map<String, dynamic> metadata = {}
-      ..addAll(mentionPageMetadata)
-      ..addAll(fileMetadata);
+    // get the attached files and mentioned pages
+    final metadata = context.read<AIPromptInputBloc>().consumeMetadata();
 
-    final partialText = types.PartialText(
-      text: trimmedText,
-      metadata: metadata,
-    );
-    widget.onSubmitted(partialText);
+    widget.onSubmitted(trimmedText, metadata);
   }
 
-  void _handleTextControllerChange() {
-    if (_textController.value.isComposingRangeValid) {
+  void handleTextControllerChange() {
+    if (textController.value.isComposingRangeValid) {
       return;
     }
+    // inputControlCubit.updateInputText(textController.text);
     setState(() => updateSendButtonState());
   }
 
-  Widget _inputTextField(BuildContext context) {
+  // KeyEventResult handleKeyEvent(FocusNode node, KeyEvent event) {
+  //   if (event.character == '@') {
+  //     WidgetsBinding.instance.addPostFrameCallback((_) {
+  //       mentionPage(context);
+  //     });
+  //   }
+  //   return KeyEventResult.ignored;
+  // }
+
+  Future<void> mentionPage(BuildContext context) async {
+    // if the focus node is on focus, unfocus it for better animation
+    // otherwise, the page sheet animation will be blocked by the keyboard
+    inputControlCubit.refreshViews();
+    inputControlCubit.startSearching(textController.value);
+    if (focusNode.hasFocus) {
+      focusNode.unfocus();
+      await Future.delayed(const Duration(milliseconds: 100));
+    }
+
+    if (context.mounted) {
+      final selectedView = await showPageSelectorSheet(
+        context,
+        filter: (view) =>
+            !view.isSpace &&
+            view.layout.isDocumentView &&
+            view.parentViewId != view.id &&
+            !inputControlCubit.selectedViewIds.contains(view.id),
+      );
+      if (selectedView != null) {
+        final newText = textController.text.replaceRange(
+          inputControlCubit.filterStartPosition,
+          inputControlCubit.filterStartPosition,
+          selectedView.id,
+        );
+        textController.value = TextEditingValue(
+          text: newText,
+          selection: TextSelection.collapsed(
+            offset:
+                textController.selection.baseOffset + selectedView.id.length,
+            affinity: TextAffinity.upstream,
+          ),
+        );
+
+        inputControlCubit.selectPage(selectedView);
+      }
+      focusNode.requestFocus();
+      inputControlCubit.reset();
+    }
+  }
+
+  Widget inputTextField(BuildContext context) {
     return BlocBuilder<AIPromptInputBloc, AIPromptInputState>(
       builder: (context, state) {
         return ExtendedTextField(
-          controller: _textController,
-          focusNode: _inputFocusNode,
-          decoration: _buildInputDecoration(state),
+          controller: textController,
+          focusNode: focusNode,
+          decoration: InputDecoration(
+            border: InputBorder.none,
+            enabledBorder: InputBorder.none,
+            focusedBorder: InputBorder.none,
+            contentPadding: MobileAIPromptSizes.textFieldContentPadding,
+            hintText: switch (state.aiType) {
+              AIType.appflowyAI => LocaleKeys.chat_inputMessageHint.tr(),
+              AIType.localAI => LocaleKeys.chat_inputLocalAIMessageHint.tr()
+            },
+            isCollapsed: true,
+            isDense: true,
+          ),
           keyboardType: TextInputType.multiline,
           textCapitalization: TextCapitalization.sentences,
           minLines: 1,
           maxLines: null,
           style: Theme.of(context).textTheme.bodyMedium,
           specialTextSpanBuilder: ChatInputTextSpanBuilder(
-            inputActionControl: _inputActionControl,
+            inputControlCubit: inputControlCubit,
+            specialTextStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                  color: Theme.of(context).colorScheme.primary,
+                  fontWeight: FontWeight.w600,
+                ),
           ),
-          onChanged: (text) {
-            _handleOnTextChange(context, text);
-          },
         );
       },
     );
   }
 
-  InputDecoration _buildInputDecoration(AIPromptInputState state) {
-    return InputDecoration(
-      border: InputBorder.none,
-      enabledBorder: InputBorder.none,
-      focusedBorder: InputBorder.none,
-      contentPadding: MobileAIPromptSizes.textFieldContentPadding,
-      hintText: switch (state.aiType) {
-        AIType.appflowyAI => LocaleKeys.chat_inputMessageHint.tr(),
-        AIType.localAI => LocaleKeys.chat_inputLocalAIMessageHint.tr()
-      },
-      isCollapsed: true,
-      isDense: true,
-    );
-  }
-
-  Future<void> _handleOnTextChange(BuildContext context, String text) async {
-    if (!_inputActionControl.onTextChanged(text)) {
-      return;
-    }
-
-    // if the focus node is on focus, unfocus it for better animation
-    // otherwise, the page sheet animation will be blocked by the keyboard
-    if (_inputFocusNode.hasFocus) {
-      _inputFocusNode.unfocus();
-      Future.delayed(const Duration(milliseconds: 100), () async {
-        await _referPage(_inputActionControl);
-      });
-    } else {
-      await _referPage(_inputActionControl);
-    }
-  }
-
-  Widget _mentionButton() {
-    return Align(
+  Widget leadingButtons(BuildContext context) {
+    return Container(
       alignment: Alignment.bottomCenter,
-      child: PromptInputMentionButton(
-        iconSize: MobileAIPromptSizes.mentionIconSize,
-        buttonSize: MobileAIPromptSizes.sendButtonSize,
-        onTap: () {
-          _textController.text += '@';
-          if (!_inputFocusNode.hasFocus) {
-            _inputFocusNode.requestFocus();
-          }
-          _handleOnTextChange(context, _textController.text);
-        },
+      padding: const EdgeInsets.only(bottom: 8.0),
+      child: _LeadingActions(
+        textController: textController,
+        // onMention: () {
+        //   textController.text += '@';
+        //   if (!focusNode.hasFocus) {
+        //     focusNode.requestFocus();
+        //   }
+        //   WidgetsBinding.instance.addPostFrameCallback((_) {
+        //     mentionPage(context);
+        //   });
+        // },
+        onUpdateSelectedSources: widget.onUpdateSelectedSources,
       ),
     );
   }
 
-  Widget _sendButton() {
-    return Align(
+  Widget sendButton() {
+    return Container(
       alignment: Alignment.bottomCenter,
+      padding: const EdgeInsets.only(bottom: 8.0),
       child: PromptInputSendButton(
         buttonSize: MobileAIPromptSizes.sendButtonSize,
         iconSize: MobileAIPromptSizes.sendButtonSize,
-        onSendPressed: _handleSendPressed,
+        onSendPressed: handleSendPressed,
         onStopStreaming: widget.onStopStreaming,
         state: sendButtonState,
       ),
     );
   }
+}
 
-  Future<void> _referPage(ChatActionHandler handler) async {
-    handler.onEnter();
-    final selectedView = await showPageSelectorSheet(
-      context,
-      filter: (view) =>
-          view.layout.isDocumentView &&
-          !view.isSpace &&
-          view.parentViewId.isNotEmpty,
+class _LeadingActions extends StatelessWidget {
+  const _LeadingActions({
+    required this.textController,
+    required this.onUpdateSelectedSources,
+  });
+
+  final TextEditingController textController;
+  final void Function(List<String>) onUpdateSelectedSources;
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Theme.of(context).cardColor,
+      child: PromptInputMobileSelectSourcesButton(
+        onUpdateSelectedSources: onUpdateSelectedSources,
+      ),
     );
-    if (selectedView != null) {
-      handler.onSelected(ViewActionPage(view: selectedView));
-    }
-    handler.onExit();
-    _inputFocusNode.requestFocus();
   }
 }

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/select_sources_bottom_sheet.dart

@@ -0,0 +1,263 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/flowy_search_text_field.dart';
+import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_bloc.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_select_sources_cubit.dart';
+import 'package:appflowy/plugins/base/drag_handler.dart';
+import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
+import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'select_sources_menu.dart';
+
+class PromptInputMobileSelectSourcesButton extends StatefulWidget {
+  const PromptInputMobileSelectSourcesButton({
+    super.key,
+    required this.onUpdateSelectedSources,
+  });
+
+  final void Function(List<String>) onUpdateSelectedSources;
+
+  @override
+  State<PromptInputMobileSelectSourcesButton> createState() =>
+      _PromptInputMobileSelectSourcesButtonState();
+}
+
+class _PromptInputMobileSelectSourcesButtonState
+    extends State<PromptInputMobileSelectSourcesButton> {
+  late final cubit = ChatSettingsCubit();
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      cubit.updateSelectedSources(
+        context.read<ChatBloc>().state.selectedSourceIds,
+      );
+    });
+  }
+
+  @override
+  void dispose() {
+    cubit.close();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<UserWorkspaceBloc, UserWorkspaceState>(
+      builder: (context, state) {
+        final userProfile = context.read<UserWorkspaceBloc>().userProfile;
+        final workspaceId = state.currentWorkspace?.workspaceId ?? '';
+        return MultiBlocProvider(
+          providers: [
+            BlocProvider(
+              key: ValueKey(workspaceId),
+              create: (context) => SpaceBloc(
+                userProfile: userProfile,
+                workspaceId: workspaceId,
+              )..add(const SpaceEvent.initial(openFirstPage: false)),
+            ),
+            BlocProvider.value(
+              value: cubit,
+            ),
+          ],
+          child: BlocSelector<SpaceBloc, SpaceState, ViewPB?>(
+            selector: (state) => state.currentSpace,
+            builder: (context, spaceView) {
+              return BlocListener<ChatBloc, ChatState>(
+                listener: (context, state) {
+                  cubit
+                    ..updateSelectedSources(state.selectedSourceIds)
+                    ..updateSelectedStatus();
+                },
+                child: FlowyButton(
+                  margin: const EdgeInsetsDirectional.fromSTEB(4, 6, 2, 6),
+                  expandText: false,
+                  text: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      FlowySvg(
+                        FlowySvgs.ai_page_s,
+                        color: Theme.of(context).iconTheme.color,
+                        size: const Size.square(20.0),
+                      ),
+                      FlowySvg(
+                        FlowySvgs.ai_source_drop_down_s,
+                        color: Theme.of(context).hintColor,
+                        size: const Size.square(10),
+                      ),
+                    ],
+                  ),
+                  onTap: () async {
+                    if (spaceView != null) {
+                      context
+                          .read<ChatSettingsCubit>()
+                          .refreshSources(spaceView);
+                    }
+                    await showMobileBottomSheet<void>(
+                      context,
+                      backgroundColor: Theme.of(context).colorScheme.surface,
+                      maxChildSize: 0.98,
+                      enableDraggableScrollable: true,
+                      scrollableWidgetBuilder: (_, scrollController) {
+                        return Expanded(
+                          child: BlocProvider.value(
+                            value: cubit,
+                            child: _MobileSelectSourcesSheetBody(
+                              scrollController: scrollController,
+                            ),
+                          ),
+                        );
+                      },
+                      builder: (context) => const SizedBox.shrink(),
+                    );
+                    if (context.mounted) {
+                      widget.onUpdateSelectedSources(cubit.selectedSourceIds);
+                    }
+                  },
+                ),
+              );
+            },
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _MobileSelectSourcesSheetBody extends StatefulWidget {
+  const _MobileSelectSourcesSheetBody({
+    required this.scrollController,
+  });
+
+  final ScrollController scrollController;
+
+  @override
+  State<_MobileSelectSourcesSheetBody> createState() =>
+      _MobileSelectSourcesSheetBodyState();
+}
+
+class _MobileSelectSourcesSheetBodyState
+    extends State<_MobileSelectSourcesSheetBody> {
+  final textController = TextEditingController();
+
+  @override
+  void dispose() {
+    textController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomScrollView(
+      controller: widget.scrollController,
+      shrinkWrap: true,
+      slivers: [
+        SliverPersistentHeader(
+          pinned: true,
+          delegate: _Header(
+            child: ColoredBox(
+              color: Theme.of(context).cardColor,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  const DragHandle(),
+                  SizedBox(
+                    height: 44.0,
+                    child: Center(
+                      child: FlowyText.medium(
+                        LocaleKeys.chat_selectSources.tr(),
+                        fontSize: 16.0,
+                      ),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 16.0,
+                      vertical: 8.0,
+                    ),
+                    child: SizedBox(
+                      height: 44.0,
+                      child: FlowySearchTextField(
+                        controller: textController,
+                        onChanged: (value) => context
+                            .read<ChatSettingsCubit>()
+                            .updateFilter(value),
+                      ),
+                    ),
+                  ),
+                  const Divider(height: 0.5, thickness: 0.5),
+                ],
+              ),
+            ),
+          ),
+        ),
+        BlocBuilder<ChatSettingsCubit, ChatSettingsState>(
+          builder: (context, state) {
+            final sources = state.visibleSources
+                .where((e) => e.ignoreStatus != IgnoreViewType.hide);
+            return SliverList(
+              delegate: SliverChildBuilderDelegate(
+                childCount: sources.length,
+                (context, index) {
+                  final source = sources.elementAt(index);
+                  return ChatSourceTreeItem(
+                    key: ValueKey(
+                      'visible_select_sources_tree_item_${source.view.id}',
+                    ),
+                    chatSource: source,
+                    level: 0,
+                    isDescendentOfSpace: source.view.isSpace,
+                    isSelectedSection: false,
+                    onSelected: (chatSource) {
+                      context
+                          .read<ChatSettingsCubit>()
+                          .toggleSelectedStatus(chatSource);
+                    },
+                    height: 40.0,
+                  );
+                },
+              ),
+            );
+          },
+        ),
+      ],
+    );
+  }
+}
+
+class _Header extends SliverPersistentHeaderDelegate {
+  const _Header({
+    required this.child,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(
+    BuildContext context,
+    double shrinkOffset,
+    bool overlapsContent,
+  ) {
+    return child;
+  }
+
+  @override
+  double get maxExtent => 120.5;
+
+  @override
+  double get minExtent => 120.5;
+
+  @override
+  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
+    return false;
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/select_sources_menu.dart

@@ -0,0 +1,551 @@
+import 'dart:math';
+
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_bloc.dart';
+import 'package:appflowy/plugins/ai_chat/application/chat_select_sources_cubit.dart';
+import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
+import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
+import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../layout_define.dart';
+import 'chat_mention_page_menu.dart';
+
+class PromptInputDesktopSelectSourcesButton extends StatefulWidget {
+  const PromptInputDesktopSelectSourcesButton({
+    super.key,
+    required this.onUpdateSelectedSources,
+  });
+
+  final void Function(bool, List<String>) onUpdateSelectedSources;
+
+  @override
+  State<PromptInputDesktopSelectSourcesButton> createState() =>
+      _PromptInputDesktopSelectSourcesButtonState();
+}
+
+class _PromptInputDesktopSelectSourcesButtonState
+    extends State<PromptInputDesktopSelectSourcesButton> {
+  late final cubit = ChatSettingsCubit();
+  final popoverController = PopoverController();
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      final chatBlocState = context.read<ChatBloc>().state;
+      cubit
+        ..updateSelectedSources(chatBlocState.selectedSourceIds)
+        ..updateOnlyUseSelectedSources(chatBlocState.onlyUseSelectedSources);
+    });
+  }
+
+  @override
+  void dispose() {
+    cubit.close();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final userWorkspaceBloc = context.read<UserWorkspaceBloc>();
+    final userProfile = userWorkspaceBloc.userProfile;
+    final workspaceId =
+        userWorkspaceBloc.state.currentWorkspace?.workspaceId ?? '';
+
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(
+          create: (context) => SpaceBloc(
+            userProfile: userProfile,
+            workspaceId: workspaceId,
+          )..add(const SpaceEvent.initial(openFirstPage: false)),
+        ),
+        BlocProvider.value(
+          value: cubit,
+        ),
+      ],
+      child: BlocSelector<SpaceBloc, SpaceState, ViewPB?>(
+        selector: (state) => state.currentSpace,
+        builder: (context, spaceView) {
+          return BlocListener<ChatBloc, ChatState>(
+            listener: (context, state) {
+              cubit
+                ..updateOnlyUseSelectedSources(state.onlyUseSelectedSources)
+                ..updateSelectedSources(state.selectedSourceIds)
+                ..updateSelectedStatus();
+            },
+            child: AppFlowyPopover(
+              constraints: BoxConstraints.loose(const Size(320, 380)),
+              offset: const Offset(0.0, -10.0),
+              direction: PopoverDirection.topWithCenterAligned,
+              margin: EdgeInsets.zero,
+              controller: popoverController,
+              onOpen: () {
+                if (spaceView != null) {
+                  context.read<ChatSettingsCubit>().refreshSources(spaceView);
+                }
+              },
+              onClose: () {
+                widget.onUpdateSelectedSources(
+                  cubit.state.onlyUseSelectedSources,
+                  cubit.selectedSourceIds,
+                );
+                if (spaceView != null) {
+                  context.read<ChatSettingsCubit>().refreshSources(spaceView);
+                }
+              },
+              popupBuilder: (_) {
+                return BlocProvider.value(
+                  value: context.read<ChatSettingsCubit>(),
+                  child: const _PopoverContent(),
+                );
+              },
+              child: _IndicatorButton(
+                onTap: () => popoverController.show(),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _IndicatorButton extends StatelessWidget {
+  const _IndicatorButton({
+    required this.onTap,
+  });
+
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      behavior: HitTestBehavior.opaque,
+      child: SizedBox(
+        height: DesktopAIPromptSizes.actionBarButtonSize,
+        child: FlowyHover(
+          style: const HoverStyle(
+            borderRadius: BorderRadius.all(Radius.circular(8)),
+          ),
+          child: Padding(
+            padding: const EdgeInsetsDirectional.fromSTEB(6, 6, 4, 6),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                FlowySvg(
+                  FlowySvgs.ai_page_s,
+                  color: Theme.of(context).iconTheme.color,
+                ),
+                const HSpace(2.0),
+                BlocBuilder<ChatBloc, ChatState>(
+                  builder: (context, state) {
+                    return FlowyText(
+                      state.selectedSourceIds.length.toString(),
+                      fontSize: 14,
+                      figmaLineHeight: 16,
+                      color: Theme.of(context).hintColor,
+                    );
+                  },
+                ),
+                const HSpace(2.0),
+                FlowySvg(
+                  FlowySvgs.ai_source_drop_down_s,
+                  color: Theme.of(context).hintColor,
+                  size: const Size.square(10),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _PopoverContent extends StatelessWidget {
+  const _PopoverContent();
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<ChatSettingsCubit, ChatSettingsState>(
+      builder: (context, state) {
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Padding(
+              padding: const EdgeInsets.fromLTRB(8, 12, 8, 8),
+              child: SpaceSearchField(
+                width: 600,
+                onSearch: (context, value) =>
+                    context.read<ChatSettingsCubit>().updateFilter(value),
+              ),
+            ),
+            Container(
+              margin: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+              height: 30,
+              child: FlowyButton(
+                text: FlowyText(
+                  LocaleKeys.chat_onlyUseRags.tr(),
+                  overflow: TextOverflow.ellipsis,
+                ),
+                onTap: () {
+                  context
+                      .read<ChatSettingsCubit>()
+                      .updateOnlyUseSelectedSources(
+                        !state.onlyUseSelectedSources,
+                      );
+                },
+                rightIcon: state.onlyUseSelectedSources
+                    ? FlowySvg(
+                        FlowySvgs.check_s,
+                        color: Theme.of(context).colorScheme.primary,
+                      )
+                    : null,
+              ),
+            ),
+            _buildDivider(),
+            Flexible(
+              child: ListView(
+                shrinkWrap: true,
+                padding: const EdgeInsets.fromLTRB(8, 4, 8, 12),
+                children: [
+                  ..._buildSelectedSources(context, state),
+                  if (state.selectedSources.isNotEmpty &&
+                      state.visibleSources.isNotEmpty)
+                    Padding(
+                      padding: const EdgeInsets.symmetric(vertical: 4.0),
+                      child: _buildDivider(),
+                    ),
+                  ..._buildVisibleSources(context, state),
+                ],
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildDivider() {
+    return const Divider(
+      height: 1.0,
+      thickness: 1.0,
+      indent: 8.0,
+      endIndent: 8.0,
+    );
+  }
+
+  Iterable<Widget> _buildSelectedSources(
+    BuildContext context,
+    ChatSettingsState state,
+  ) {
+    return state.selectedSources
+        .where((e) => e.ignoreStatus != IgnoreViewType.hide)
+        .map(
+          (e) => ChatSourceTreeItem(
+            key: ValueKey(
+              'selected_select_sources_tree_item_${e.view.id}',
+            ),
+            chatSource: e,
+            level: 0,
+            isDescendentOfSpace: e.view.isSpace,
+            isSelectedSection: true,
+            onSelected: (chatSource) {
+              context
+                  .read<ChatSettingsCubit>()
+                  .toggleSelectedStatus(chatSource);
+            },
+            height: 30.0,
+          ),
+        );
+  }
+
+  Iterable<Widget> _buildVisibleSources(
+    BuildContext context,
+    ChatSettingsState state,
+  ) {
+    return state.visibleSources
+        .where((e) => e.ignoreStatus != IgnoreViewType.hide)
+        .map(
+          (e) => ChatSourceTreeItem(
+            key: ValueKey(
+              'visible_select_sources_tree_item_${e.view.id}',
+            ),
+            chatSource: e,
+            level: 0,
+            isDescendentOfSpace: e.view.isSpace,
+            isSelectedSection: false,
+            onSelected: (chatSource) {
+              context
+                  .read<ChatSettingsCubit>()
+                  .toggleSelectedStatus(chatSource);
+            },
+            height: 30.0,
+          ),
+        );
+  }
+}
+
+class ChatSourceTreeItem extends StatefulWidget {
+  const ChatSourceTreeItem({
+    super.key,
+    required this.chatSource,
+    required this.level,
+    required this.isDescendentOfSpace,
+    required this.isSelectedSection,
+    required this.onSelected,
+    required this.height,
+    this.showCheckbox = true,
+  });
+
+  final ChatSource chatSource;
+
+  /// nested level of the view item
+  final int level;
+
+  final bool isDescendentOfSpace;
+
+  final bool isSelectedSection;
+
+  final void Function(ChatSource chatSource) onSelected;
+
+  final double height;
+
+  final bool showCheckbox;
+
+  @override
+  State<ChatSourceTreeItem> createState() => _ChatSourceTreeItemState();
+}
+
+class _ChatSourceTreeItemState extends State<ChatSourceTreeItem> {
+  @override
+  Widget build(BuildContext context) {
+    final child = SizedBox(
+      height: widget.height,
+      child: ChatSourceTreeItemInner(
+        chatSource: widget.chatSource,
+        level: widget.level,
+        isDescendentOfSpace: widget.isDescendentOfSpace,
+        isSelectedSection: widget.isSelectedSection,
+        showCheckbox: widget.showCheckbox,
+        onSelected: widget.onSelected,
+      ),
+    );
+
+    final disabledEnabledChild =
+        widget.chatSource.ignoreStatus == IgnoreViewType.disable
+            ? FlowyTooltip(
+                message: widget.showCheckbox
+                    ? switch (widget.chatSource.view.layout) {
+                        ViewLayoutPB.Document =>
+                          LocaleKeys.chat_sourcesLimitReached.tr(),
+                        _ => LocaleKeys.chat_sourceUnsupported.tr(),
+                      }
+                    : "",
+                child: Opacity(
+                  opacity: 0.5,
+                  child: MouseRegion(
+                    cursor: SystemMouseCursors.forbidden,
+                    child: IgnorePointer(child: child),
+                  ),
+                ),
+              )
+            : child;
+
+    return ValueListenableBuilder(
+      valueListenable: widget.chatSource.isExpandedNotifier,
+      builder: (context, isExpanded, child) {
+        // filter the child views that should be ignored
+        final childViews = widget.chatSource.children
+            .where((e) => e.ignoreStatus != IgnoreViewType.hide)
+            .toList();
+
+        if (!isExpanded || childViews.isEmpty) {
+          return disabledEnabledChild;
+        }
+
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            disabledEnabledChild,
+            ...childViews.map(
+              (childSource) => ChatSourceTreeItem(
+                key: ValueKey(
+                  'select_sources_tree_item_${childSource.view.id}',
+                ),
+                chatSource: childSource,
+                level: widget.level + 1,
+                isDescendentOfSpace: widget.isDescendentOfSpace,
+                isSelectedSection: widget.isSelectedSection,
+                onSelected: widget.onSelected,
+                height: widget.height,
+                showCheckbox: widget.showCheckbox,
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+class ChatSourceTreeItemInner extends StatelessWidget {
+  const ChatSourceTreeItemInner({
+    super.key,
+    required this.chatSource,
+    required this.level,
+    required this.isDescendentOfSpace,
+    required this.isSelectedSection,
+    required this.showCheckbox,
+    this.onSelected,
+  });
+
+  final ChatSource chatSource;
+  final int level;
+  final bool isDescendentOfSpace;
+  final bool isSelectedSection;
+  final bool showCheckbox;
+  final void Function(ChatSource)? onSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyHover(
+      style: HoverStyle(
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+      ),
+      child: GestureDetector(
+        behavior: HitTestBehavior.translucent,
+        onTap: () => onSelected?.call(chatSource),
+        child: Row(
+          children: [
+            const HSpace(4.0),
+            HSpace(max(20.0 * level - (isDescendentOfSpace ? 2 : 0), 0)),
+            // builds the >, ^ or · button
+            ToggleIsExpandedButton(
+              chatSource: chatSource,
+              isSelectedSection: isSelectedSection,
+            ),
+            const HSpace(2.0),
+            // checkbox
+            if (!chatSource.view.isSpace && showCheckbox) ...[
+              SourceSelectedStatusCheckbox(
+                chatSource: chatSource,
+              ),
+              const HSpace(4.0),
+            ],
+            // icon
+            MentionViewIcon(
+              view: chatSource.view,
+            ),
+            const HSpace(6.0),
+            // title
+            Expanded(
+              child: FlowyText(
+                chatSource.view.nameOrDefault,
+                overflow: TextOverflow.ellipsis,
+                fontSize: 14.0,
+                figmaLineHeight: 18.0,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class ToggleIsExpandedButton extends StatelessWidget {
+  const ToggleIsExpandedButton({
+    super.key,
+    required this.chatSource,
+    required this.isSelectedSection,
+  });
+
+  final ChatSource chatSource;
+  final bool isSelectedSection;
+
+  @override
+  Widget build(BuildContext context) {
+    if (isReferencedDatabaseView(chatSource.view, chatSource.parentView)) {
+      return const _DotIconWidget();
+    }
+
+    if (chatSource.children.isEmpty) {
+      return const SizedBox.square(dimension: 16.0);
+    }
+
+    return FlowyHover(
+      child: GestureDetector(
+        child: ValueListenableBuilder(
+          valueListenable: chatSource.isExpandedNotifier,
+          builder: (context, value, _) => FlowySvg(
+            value
+                ? FlowySvgs.view_item_expand_s
+                : FlowySvgs.view_item_unexpand_s,
+            size: const Size.square(16.0),
+          ),
+        ),
+        onTap: () => context
+            .read<ChatSettingsCubit>()
+            .toggleIsExpanded(chatSource, isSelectedSection),
+      ),
+    );
+  }
+}
+
+class _DotIconWidget extends StatelessWidget {
+  const _DotIconWidget();
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(6.0),
+      child: Container(
+        width: 4,
+        height: 4,
+        decoration: BoxDecoration(
+          color: Theme.of(context).iconTheme.color,
+          borderRadius: BorderRadius.circular(2),
+        ),
+      ),
+    );
+  }
+}
+
+class SourceSelectedStatusCheckbox extends StatelessWidget {
+  const SourceSelectedStatusCheckbox({
+    super.key,
+    required this.chatSource,
+  });
+
+  final ChatSource chatSource;
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder(
+      valueListenable: chatSource.selectedStatusNotifier,
+      builder: (context, selectedStatus, _) => FlowySvg(
+        switch (selectedStatus) {
+          SourceSelectedStatus.unselected => FlowySvgs.uncheck_s,
+          SourceSelectedStatus.selected => FlowySvgs.check_filled_s,
+          SourceSelectedStatus.partiallySelected => FlowySvgs.check_partial_s,
+        },
+        size: const Size.square(18.0),
+        blendMode: null,
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input_action_menu.dart

@@ -1,320 +0,0 @@
-import 'dart:math';
-
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_input_action_bloc.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_input_action_control.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:scroll_to_index/scroll_to_index.dart';
-
-abstract class ChatActionHandler {
-  void onEnter();
-  void onSelected(ChatInputMention page);
-  void onExit();
-  ChatInputActionBloc get commandBloc;
-  void onFilter(String filter);
-  double actionMenuOffsetX();
-}
-
-abstract class ChatAnchor {
-  GlobalKey get anchorKey;
-  LayerLink get layerLink;
-}
-
-const int _itemHeight = 34;
-const int _itemVerticalPadding = 4;
-const int _noPageHeight = 20;
-
-class ChatActionsMenu {
-  ChatActionsMenu({
-    required this.anchor,
-    required this.context,
-    required this.handler,
-    required this.style,
-  });
-
-  final BuildContext context;
-  final ChatAnchor anchor;
-  final ChatActionsMenuStyle style;
-  final ChatActionHandler handler;
-
-  OverlayEntry? _overlayEntry;
-
-  void dismiss() {
-    _overlayEntry?.remove();
-    _overlayEntry = null;
-    handler.onExit();
-  }
-
-  void show() {
-    WidgetsBinding.instance.addPostFrameCallback((_) => _show());
-  }
-
-  void _show() {
-    if (_overlayEntry != null) {
-      dismiss();
-    }
-
-    if (anchor.anchorKey.currentContext == null) {
-      return;
-    }
-
-    handler.onEnter();
-    const double maxHeight = 300;
-
-    _overlayEntry = OverlayEntry(
-      builder: (context) => BlocProvider.value(
-        value: handler.commandBloc,
-        child: BlocBuilder<ChatInputActionBloc, ChatInputActionState>(
-          builder: (context, state) {
-            final height = min(
-              max(
-                state.pages.length * (_itemHeight + _itemVerticalPadding),
-                _noPageHeight,
-              ),
-              maxHeight,
-            );
-            final isLoading =
-                state.indicator == const ChatActionMenuIndicator.loading();
-
-            return Stack(
-              children: [
-                CompositedTransformFollower(
-                  link: anchor.layerLink,
-                  showWhenUnlinked: false,
-                  offset: Offset(handler.actionMenuOffsetX(), -height - 4),
-                  child: Material(
-                    elevation: 4.0,
-                    child: ConstrainedBox(
-                      constraints: const BoxConstraints(
-                        minWidth: 200,
-                        maxWidth: 200,
-                        maxHeight: maxHeight,
-                      ),
-                      child: DecoratedBox(
-                        decoration: BoxDecoration(
-                          color: Theme.of(context)
-                              .colorScheme
-                              .surfaceContainerHighest,
-                          borderRadius: BorderRadius.circular(6.0),
-                        ),
-                        child: Padding(
-                          padding: const EdgeInsets.symmetric(
-                            horizontal: 2,
-                            vertical: 2,
-                          ),
-                          child: ActionList(
-                            isLoading: isLoading,
-                            handler: handler,
-                            onDismiss: () => dismiss(),
-                            pages: state.pages,
-                          ),
-                        ),
-                      ),
-                    ),
-                  ),
-                ),
-              ],
-            );
-          },
-        ),
-      ),
-    );
-
-    Overlay.of(context).insert(_overlayEntry!);
-  }
-}
-
-class _ActionItem extends StatelessWidget {
-  const _ActionItem({
-    required this.item,
-    required this.onTap,
-    required this.isSelected,
-  });
-
-  final ChatInputMention item;
-  final VoidCallback? onTap;
-  final bool isSelected;
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      height: _itemHeight.toDouble(),
-      padding: const EdgeInsets.symmetric(vertical: _itemVerticalPadding / 2.0),
-      decoration: BoxDecoration(
-        color: isSelected
-            ? Theme.of(context).colorScheme.primary.withOpacity(0.1)
-            : Colors.transparent,
-        borderRadius: BorderRadius.circular(4.0),
-      ),
-      child: FlowyTooltip(
-        message: item.title,
-        child: FlowyButton(
-          leftIcon: item.icon,
-          margin: const EdgeInsets.symmetric(horizontal: 6),
-          iconPadding: 10.0,
-          text: FlowyText(
-            item.title.isEmpty
-                ? LocaleKeys.document_title_placeholder.tr()
-                : item.title,
-            lineHeight: 1.0,
-            overflow: TextOverflow.ellipsis,
-          ),
-          onTap: onTap,
-        ),
-      ),
-    );
-  }
-}
-
-class ActionList extends StatefulWidget {
-  const ActionList({
-    super.key,
-    required this.handler,
-    required this.onDismiss,
-    required this.pages,
-    required this.isLoading,
-  });
-
-  final ChatActionHandler handler;
-  final VoidCallback? onDismiss;
-  final List<ChatInputMention> pages;
-  final bool isLoading;
-
-  @override
-  State<ActionList> createState() => _ActionListState();
-}
-
-class _ActionListState extends State<ActionList> {
-  int _selectedIndex = 0;
-  final _scrollController = AutoScrollController();
-
-  @override
-  void dispose() {
-    _scrollController.dispose();
-    super.dispose();
-  }
-
-  KeyEventResult _handleKeyPress(logicalKey) {
-    bool isHandle = false;
-    setState(() {
-      if (logicalKey == PhysicalKeyboardKey.arrowDown) {
-        _selectedIndex = (_selectedIndex + 1) % widget.pages.length;
-        _scrollToSelectedIndex();
-        isHandle = true;
-      } else if (logicalKey == PhysicalKeyboardKey.arrowUp) {
-        _selectedIndex =
-            (_selectedIndex - 1 + widget.pages.length) % widget.pages.length;
-        _scrollToSelectedIndex();
-        isHandle = true;
-      } else if (logicalKey == PhysicalKeyboardKey.enter) {
-        widget.handler.onSelected(widget.pages[_selectedIndex]);
-        widget.onDismiss?.call();
-        isHandle = true;
-      } else if (logicalKey == PhysicalKeyboardKey.escape) {
-        widget.onDismiss?.call();
-        isHandle = true;
-      }
-    });
-    return isHandle ? KeyEventResult.handled : KeyEventResult.ignored;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocListener<ChatInputActionBloc, ChatInputActionState>(
-      listenWhen: (previous, current) =>
-          previous.keyboardKey != current.keyboardKey,
-      listener: (context, state) {
-        if (state.keyboardKey != null) {
-          _handleKeyPress(state.keyboardKey!.physicalKey);
-        }
-      },
-      child: ListView(
-        shrinkWrap: true,
-        controller: _scrollController,
-        padding: const EdgeInsets.all(4),
-        children: _buildPages(),
-      ),
-    );
-  }
-
-  List<Widget> _buildPages() {
-    if (widget.isLoading) {
-      return [
-        SizedBox(
-          height: _noPageHeight.toDouble(),
-          child: const Center(child: CircularProgressIndicator.adaptive()),
-        ),
-      ];
-    }
-
-    if (widget.pages.isEmpty) {
-      return [
-        SizedBox(
-          height: _noPageHeight.toDouble(),
-          child:
-              Center(child: FlowyText(LocaleKeys.chat_inputActionNoPages.tr())),
-        ),
-      ];
-    }
-
-    return widget.pages.asMap().entries.map((entry) {
-      final index = entry.key;
-      final ChatInputMention item = entry.value;
-      return AutoScrollTag(
-        key: ValueKey(item.pageId),
-        index: index,
-        controller: _scrollController,
-        child: _ActionItem(
-          item: item,
-          onTap: () {
-            widget.handler.onSelected(item);
-            widget.onDismiss?.call();
-          },
-          isSelected: _selectedIndex == index,
-        ),
-      );
-    }).toList();
-  }
-
-  void _scrollToSelectedIndex() {
-    _scrollController.scrollToIndex(
-      _selectedIndex,
-      duration: const Duration(milliseconds: 200),
-      preferPosition: AutoScrollPosition.begin,
-    );
-  }
-}
-
-class ChatActionsMenuStyle {
-  ChatActionsMenuStyle({
-    required this.backgroundColor,
-    required this.groupTextColor,
-    required this.menuItemTextColor,
-    required this.menuItemSelectedColor,
-    required this.menuItemSelectedTextColor,
-  });
-
-  const ChatActionsMenuStyle.light()
-      : backgroundColor = Colors.white,
-        groupTextColor = const Color(0xFF555555),
-        menuItemTextColor = const Color(0xFF333333),
-        menuItemSelectedColor = const Color(0xFFE0F8FF),
-        menuItemSelectedTextColor = const Color.fromARGB(255, 56, 91, 247);
-
-  const ChatActionsMenuStyle.dark()
-      : backgroundColor = const Color(0xFF282E3A),
-        groupTextColor = const Color(0xFFBBC3CD),
-        menuItemTextColor = const Color(0xFFBBC3CD),
-        menuItemSelectedColor = const Color(0xFF00BCF0),
-        menuItemSelectedTextColor = const Color(0xFF131720);
-
-  final Color backgroundColor;
-  final Color groupTextColor;
-  final Color menuItemTextColor;
-  final Color menuItemSelectedColor;
-  final Color menuItemSelectedTextColor;
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_loading.dart

@@ -1,76 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
-
-/// An animated generating indicator for an AI response
-class ChatAILoading extends StatelessWidget {
-  const ChatAILoading({
-    super.key,
-    this.duration = const Duration(seconds: 1),
-  });
-
-  final Duration duration;
-
-  @override
-  Widget build(BuildContext context) {
-    final slice = Duration(milliseconds: duration.inMilliseconds ~/ 5);
-    return SizedBox(
-      height: 20,
-      child: SeparatedRow(
-        separatorBuilder: () => const HSpace(4),
-        children: [
-          Padding(
-            padding: const EdgeInsetsDirectional.only(end: 4.0),
-            child: FlowyText(
-              LocaleKeys.chat_generatingResponse.tr(),
-              color: Theme.of(context).hintColor,
-            ),
-          ),
-          buildDot(const Color(0xFF9327FF))
-              .animate(onPlay: (controller) => controller.repeat())
-              .slideY(duration: slice, begin: 0, end: -1)
-              .then()
-              .slideY(begin: -1, end: 1)
-              .then()
-              .slideY(begin: 1, end: 0)
-              .then()
-              .slideY(duration: slice * 2, begin: 0, end: 0),
-          buildDot(const Color(0xFFFB006D))
-              .animate(onPlay: (controller) => controller.repeat())
-              .slideY(duration: slice, begin: 0, end: 0)
-              .then()
-              .slideY(begin: 0, end: -1)
-              .then()
-              .slideY(begin: -1, end: 1)
-              .then()
-              .slideY(begin: 1, end: 0)
-              .then()
-              .slideY(begin: 0, end: 0),
-          buildDot(const Color(0xFFFFCE00))
-              .animate(onPlay: (controller) => controller.repeat())
-              .slideY(duration: slice * 2, begin: 0, end: 0)
-              .then()
-              .slideY(duration: slice, begin: 0, end: -1)
-              .then()
-              .slideY(begin: -1, end: 1)
-              .then()
-              .slideY(begin: 1, end: 0),
-        ],
-      ),
-    );
-  }
-
-  Widget buildDot(Color color) {
-    return SizedBox.square(
-      dimension: 4,
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: color,
-          borderRadius: BorderRadius.circular(2),
-        ),
-      ),
-    );
-  }
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_related_question.dart

@@ -1,6 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy_backend/protobuf/flowy-ai/entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -8,6 +7,8 @@ import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:universal_platform/universal_platform.dart';
 
+import 'layout_define.dart';
+
 class RelatedQuestionList extends StatelessWidget {
   const RelatedQuestionList({
     super.key,
@@ -16,7 +17,7 @@ class RelatedQuestionList extends StatelessWidget {
   });
 
   final Function(String) onQuestionSelected;
-  final List<RelatedQuestionPB> relatedQuestions;
+  final List<String> relatedQuestions;
 
   @override
   Widget build(BuildContext context) {
@@ -24,10 +25,8 @@ class RelatedQuestionList extends StatelessWidget {
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
       itemCount: relatedQuestions.length + 1,
-      padding: const EdgeInsets.only(bottom: 8.0) +
-          (UniversalPlatform.isMobile
-              ? const EdgeInsets.symmetric(horizontal: 16)
-              : EdgeInsets.zero),
+      padding:
+          const EdgeInsets.only(bottom: 8.0) + AIChatUILayout.messageMargin,
       separatorBuilder: (context, index) => const VSpace(4.0),
       itemBuilder: (context, index) {
         if (index == 0) {
@@ -40,9 +39,12 @@ class RelatedQuestionList extends StatelessWidget {
             ),
           );
         } else {
-          return RelatedQuestionItem(
-            question: relatedQuestions[index - 1],
-            onQuestionSelected: onQuestionSelected,
+          return Align(
+            alignment: AlignmentDirectional.centerStart,
+            child: RelatedQuestionItem(
+              question: relatedQuestions[index - 1],
+              onQuestionSelected: onQuestionSelected,
+            ),
           );
         }
       },
@@ -57,17 +59,21 @@ class RelatedQuestionItem extends StatelessWidget {
     super.key,
   });
 
-  final RelatedQuestionPB question;
+  final String question;
   final Function(String) onQuestionSelected;
 
   @override
   Widget build(BuildContext context) {
     return FlowyButton(
-      text: FlowyText(
-        question.content,
-        lineHeight: 1.4,
-        overflow: TextOverflow.ellipsis,
+      mainAxisAlignment: MainAxisAlignment.start,
+      text: Flexible(
+        child: FlowyText(
+          question,
+          lineHeight: 1.4,
+          overflow: TextOverflow.ellipsis,
+        ),
       ),
+      expandText: false,
       margin: UniversalPlatform.isMobile
           ? const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0)
           : const EdgeInsets.all(8.0),
@@ -76,7 +82,7 @@ class RelatedQuestionItem extends StatelessWidget {
         color: Theme.of(context).colorScheme.primary,
         size: const Size.square(16.0),
       ),
-      onTap: () => onQuestionSelected(question.content),
+      onTap: () => onQuestionSelected(question),
     );
   }
 }

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_side_panel.dart

@@ -1,50 +0,0 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_side_panel_bloc.dart';
-import 'package:appflowy/startup/plugin/plugin.dart';
-import 'package:appflowy/workspace/application/view/view_ext.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-
-class ChatSidePanel extends StatelessWidget {
-  const ChatSidePanel({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocBuilder<ChatSidePanelBloc, ChatSidePanelState>(
-      builder: (context, state) {
-        return state.indicator.when(
-          loading: () {
-            return const CircularProgressIndicator.adaptive();
-          },
-          ready: (view) {
-            final plugin = view.plugin();
-            plugin.init();
-
-            final pluginContext = PluginContext();
-            final child = plugin.widgetBuilder
-                .buildWidget(context: pluginContext, shrinkWrap: false);
-            return Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Padding(
-                  padding: const EdgeInsets.all(8.0),
-                  child: FlowyIconButton(
-                    icon: const FlowySvg(FlowySvgs.show_menu_s),
-                    onPressed: () {
-                      context
-                          .read<ChatSidePanelBloc>()
-                          .add(const ChatSidePanelEvent.close());
-                    },
-                  ),
-                ),
-                const VSpace(6),
-                Expanded(child: child),
-              ],
-            );
-          },
-        );
-      },
-    );
-  }
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_theme.dart

@@ -1,85 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_chat_ui/flutter_chat_ui.dart';
-
-/// Default chat theme which extends [ChatTheme].
-@immutable
-class AFDefaultChatTheme extends ChatTheme {
-  const AFDefaultChatTheme({
-    required super.primaryColor,
-    required super.secondaryColor,
-  }) : super(
-          backgroundColor: Colors.transparent,
-          // TODO: think how to offset the default 12 pixels set by chat package
-          bubbleMargin: const EdgeInsets.symmetric(vertical: 4.0),
-          messageMaxWidth: double.infinity,
-          // unused
-          dateDividerMargin: EdgeInsets.zero,
-          dateDividerTextStyle: const TextStyle(),
-          attachmentButtonIcon: null,
-          attachmentButtonMargin: null,
-          deliveredIcon: null,
-          documentIcon: null,
-          emptyChatPlaceholderTextStyle: const TextStyle(),
-          errorColor: error,
-          errorIcon: null,
-          inputBackgroundColor: neutral0,
-          inputSurfaceTintColor: neutral0,
-          inputElevation: 0,
-          inputBorderRadius: BorderRadius.zero,
-          inputContainerDecoration: null,
-          inputMargin: EdgeInsets.zero,
-          inputPadding: EdgeInsets.zero,
-          inputTextColor: neutral7,
-          inputTextCursorColor: null,
-          inputTextDecoration: const InputDecoration(),
-          inputTextStyle: const TextStyle(),
-          messageBorderRadius: 0,
-          messageInsetsHorizontal: 0,
-          messageInsetsVertical: 0,
-          receivedEmojiMessageTextStyle: const TextStyle(),
-          receivedMessageBodyBoldTextStyle: null,
-          receivedMessageBodyCodeTextStyle: null,
-          receivedMessageBodyLinkTextStyle: null,
-          receivedMessageBodyTextStyle: const TextStyle(),
-          receivedMessageDocumentIconColor: primary,
-          receivedMessageCaptionTextStyle: const TextStyle(),
-          receivedMessageLinkDescriptionTextStyle: const TextStyle(),
-          receivedMessageLinkTitleTextStyle: const TextStyle(),
-          seenIcon: null,
-          sendButtonIcon: null,
-          sendButtonMargin: null,
-          sendingIcon: null,
-          sentEmojiMessageTextStyle: const TextStyle(),
-          sentMessageBodyBoldTextStyle: null,
-          sentMessageBodyCodeTextStyle: null,
-          sentMessageBodyLinkTextStyle: null,
-          sentMessageBodyTextStyle: const TextStyle(),
-          sentMessageCaptionTextStyle: const TextStyle(),
-          sentMessageDocumentIconColor: neutral7,
-          sentMessageLinkDescriptionTextStyle: const TextStyle(),
-          sentMessageLinkTitleTextStyle: const TextStyle(),
-          statusIconPadding: EdgeInsets.zero,
-          systemMessageTheme: const SystemMessageTheme(
-            margin: EdgeInsets.zero,
-            textStyle: TextStyle(),
-          ),
-          typingIndicatorTheme: const TypingIndicatorTheme(
-            animatedCirclesColor: neutral1,
-            animatedCircleSize: 0.0,
-            bubbleBorder: BorderRadius.zero,
-            bubbleColor: neutral7,
-            countAvatarColor: primary,
-            countTextColor: secondary,
-            multipleUserTextStyle: TextStyle(),
-          ),
-          unreadHeaderTheme: const UnreadHeaderTheme(
-            color: secondary,
-            textStyle: TextStyle(),
-          ),
-          userAvatarImageBackgroundColor: Colors.transparent,
-          userAvatarNameColors: colors,
-          userAvatarTextStyle: const TextStyle(),
-          userNameTextStyle: const TextStyle(),
-          highlightMessageColor: null,
-        );
-}

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/chat_user_invalid_message.dart

@@ -1,52 +0,0 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
-import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
-import 'package:appflowy/util/theme_extension.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_chat_types/flutter_chat_types.dart';
-import 'package:universal_platform/universal_platform.dart';
-
-class ChatInvalidUserMessage extends StatelessWidget {
-  const ChatInvalidUserMessage({
-    required this.message,
-    super.key,
-  });
-
-  final Message message;
-  @override
-  Widget build(BuildContext context) {
-    final errorMessage = message.metadata?[sendMessageErrorKey] ?? "";
-    return Center(
-      child: Container(
-        margin: const EdgeInsets.only(top: 16.0, bottom: 24.0),
-        constraints: UniversalPlatform.isDesktop
-            ? const BoxConstraints(maxWidth: 480)
-            : const BoxConstraints(),
-        padding: const EdgeInsets.all(8.0),
-        decoration: BoxDecoration(
-          color: Theme.of(context).isLightMode
-              ? const Color(0x80FFE7EE)
-              : const Color(0x80591734),
-          borderRadius: const BorderRadius.all(Radius.circular(8.0)),
-        ),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            const FlowySvg(
-              FlowySvgs.warning_filled_s,
-              blendMode: null,
-            ),
-            const HSpace(8.0),
-            Flexible(
-              child: FlowyText(
-                errorMessage,
-                lineHeight: 1.4,
-                maxLines: null,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}