diff --git a/package.json b/package.json
index b2f7287d..c2dd90cb 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@reduxjs/toolkit": "2.0.0",
     "@slate-yjs/core": "^1.0.2",
@@ -119,6 +120,7 @@
     "react-hook-form": "^7.52.2",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^14.1.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-katex": "^3.0.1",
     "react-measure": "^2.5.2",
     "react-player": "^2.16.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e249298d..f101d1ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.9
         version: 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toast':
+        specifier: ^1.2.15
+        version: 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.1.8
         version: 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -290,6 +293,9 @@ importers:
       react-i18next:
         specifier: ^14.1.0
         version: 14.1.3(i18next@22.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-infinite-scroll-component:
+        specifier: ^6.1.0
+        version: 6.1.0(react@18.3.1)
       react-katex:
         specifier: ^3.0.1
         version: 3.1.0(prop-types@15.8.1)(react@18.3.1)
@@ -2366,6 +2372,9 @@ packages:
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
   '@radix-ui/react-arrow@1.1.6':
     resolution: {integrity: sha512-2JMfHJf/eVnwq+2dewT3C0acmCWD3XiVA1Da+jTDqo342UlU13WvXtqHhG+yJw5JeQmu4ue2eMy6gcEArLBlcw==}
     peerDependencies:
@@ -2497,6 +2506,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.9':
     resolution: {integrity: sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ==}
     peerDependencies:
@@ -2710,6 +2732,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.1.2':
     resolution: {integrity: sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==}
     peerDependencies:
@@ -2845,8 +2880,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-toast@1.2.13':
-    resolution: {integrity: sha512-e/e43mQAwgYs8BY4y9l99xTK6ig1bK2uXsFLOMn9IZ16lAgulSTsotcPHVT2ZlSb/ye6Sllq7IgyDB8dGhpeXQ==}
+  '@radix-ui/react-toast@1.2.15':
+    resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -2965,6 +3000,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
@@ -9024,7 +9072,7 @@ snapshots:
       '@radix-ui/react-separator': 1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot': 1.2.3(@types/react@18.3.21)(react@18.3.1)
       '@radix-ui/react-switch': 1.2.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toast': 1.2.13(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip': 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       axios: 1.9.0
       class-variance-authority: 0.7.1
@@ -11151,6 +11199,8 @@ snapshots:
 
   '@radix-ui/primitive@1.1.2': {}
 
+  '@radix-ui/primitive@1.1.3': {}
+
   '@radix-ui/react-arrow@1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -11281,6 +11331,19 @@ snapshots:
       '@types/react': 18.3.21
       '@types/react-dom': 18.3.7(@types/react@18.3.21)
 
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
   '@radix-ui/react-dismissable-layer@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -11532,6 +11595,16 @@ snapshots:
       '@types/react': 18.3.21
       '@types/react-dom': 18.3.7(@types/react@18.3.21)
 
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
   '@radix-ui/react-primitive@2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-slot': 1.2.2(@types/react@18.3.21)(react@18.3.1)
@@ -11685,20 +11758,20 @@ snapshots:
       '@types/react': 18.3.21
       '@types/react-dom': 18.3.7(@types/react@18.3.21)
 
-  '@radix-ui/react-toast@1.2.13(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toast@1.2.15(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.21)(react@18.3.1)
       '@radix-ui/react-context': 1.1.2(@types/react@18.3.21)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.21)(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.21)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.21)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.2.2(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
@@ -11795,6 +11868,15 @@ snapshots:
       '@types/react': 18.3.21
       '@types/react-dom': 18.3.7(@types/react@18.3.21)
 
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.21
+      '@types/react-dom': 18.3.7(@types/react@18.3.21)
+
   '@radix-ui/rect@1.1.1': {}
 
   '@reduxjs/toolkit@2.0.0(react-redux@8.1.3(@types/react-dom@18.3.7(@types/react@18.3.21))(@types/react@18.3.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1))(react@18.3.1)':
diff --git a/src/application/services/js-services/http/http_api.ts b/src/application/services/js-services/http/http_api.ts
index c8e1bb3d..298f736d 100644
--- a/src/application/services/js-services/http/http_api.ts
+++ b/src/application/services/js-services/http/http_api.ts
@@ -1,4 +1,4 @@
-import { RepeatedChatMessage } from '@appflowyinc/ai-chat';
+import { RepeatedChatMessage } from '@/components/chat';
 import axios, { AxiosInstance } from 'axios';
 import dayjs from 'dayjs';
 import { omit } from 'lodash-es';
diff --git a/src/application/services/js-services/index.ts b/src/application/services/js-services/index.ts
index 7fe5ebaa..869897dd 100644
--- a/src/application/services/js-services/index.ts
+++ b/src/application/services/js-services/index.ts
@@ -1,4 +1,4 @@
-import { RepeatedChatMessage } from '@appflowyinc/ai-chat';
+import { RepeatedChatMessage } from '@/components/chat';
 import * as random from 'lib0/random';
 import { nanoid } from 'nanoid';
 import * as Y from 'yjs';
diff --git a/src/application/services/services.type.ts b/src/application/services/services.type.ts
index 042e6e67..33c73868 100644
--- a/src/application/services/services.type.ts
+++ b/src/application/services/services.type.ts
@@ -1,4 +1,4 @@
-import { RepeatedChatMessage } from '@appflowyinc/ai-chat';
+import { RepeatedChatMessage } from '@/components/chat';
 import { AxiosInstance } from 'axios';
 
 import { GlobalComment, Reaction } from '@/application/comment.type';
diff --git a/src/application/types.ts b/src/application/types.ts
index 6fc67c1b..a33e9a8e 100644
--- a/src/application/types.ts
+++ b/src/application/types.ts
@@ -1,4 +1,4 @@
-import { PromptDatabaseConfiguration } from '@appflowyinc/ai-chat';
+import { PromptDatabaseConfiguration } from '@/components/chat';
 import { AxiosInstance } from 'axios';
 import * as Y from 'yjs';
 
diff --git a/src/components/ai-chat/AIChat.tsx b/src/components/ai-chat/AIChat.tsx
index 21695b3e..3f95e699 100644
--- a/src/components/ai-chat/AIChat.tsx
+++ b/src/components/ai-chat/AIChat.tsx
@@ -1,4 +1,4 @@
-import { Chat, ChatRequest } from '@appflowyinc/ai-chat';
+import { Chat, ChatRequest } from '@/components/chat';
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import React, { useEffect, useMemo } from 'react';
 
@@ -8,7 +8,7 @@ import { useCurrentUser, useService } from '@/components/main/app.hooks';
 import { getPlatform } from '@/utils/platform';
 import { downloadPage } from '@/utils/url';
 
-import '@appflowyinc/ai-chat/style';
+import '@/components/chat/styles/index.scss';
 
 export function AIChat({ chatId, onRendered }: { chatId: string; onRendered?: () => void }) {
   const service = useService();
diff --git a/src/components/app/hooks/useDatabaseOperations.ts b/src/components/app/hooks/useDatabaseOperations.ts
index 9cf61fe2..5f9b092c 100644
--- a/src/components/app/hooks/useDatabaseOperations.ts
+++ b/src/components/app/hooks/useDatabaseOperations.ts
@@ -1,5 +1,5 @@
 import { useCallback, useRef } from 'react';
-import { PromptDatabaseConfiguration } from '@appflowyinc/ai-chat';
+import { PromptDatabaseConfiguration } from '@/components/chat';
 
 import {
   DatabasePrompt,
diff --git a/src/components/chat/assets/icons/ai-more.svg b/src/components/chat/assets/icons/ai-more.svg
new file mode 100644
index 00000000..73e8f73f
--- /dev/null
+++ b/src/components/chat/assets/icons/ai-more.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
+    <path d="M8.53338 4.65784C8.87931 3.78072 10.1207 3.78072 10.4666 4.65785L11.5386 7.37598C11.6442 7.64377 11.8562 7.85575 12.124 7.96136L14.8422 9.03338C15.7193 9.37931 15.7193 10.6207 14.8422 10.9666L12.124 12.0386C11.8562 12.1442 11.6442 12.3562 11.5386 12.624L10.4666 15.3422C10.1207 16.2193 8.87931 16.2193 8.53338 15.3422L7.46136 12.624C7.35574 12.3562 7.14377 12.1442 6.87598 12.0386L4.15784 10.9666C3.28072 10.6207 3.28072 9.37931 4.15785 9.03338L6.87598 7.96136C7.14377 7.85574 7.35575 7.64377 7.46136 7.37598L8.53338 4.65784Z"
+          stroke="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M15.7788 2.18536C15.6765 1.93826 15.3264 1.9382 15.2239 2.18526L15.0912 2.5053C14.8879 2.99548 14.4983 3.3849 14.0079 3.58798L13.6854 3.72156C13.4382 3.82396 13.4382 4.17415 13.6855 4.27647L14.0049 4.40864C14.4962 4.61192 14.8865 5.00222 15.0896 5.49348L15.2224 5.81445C15.3247 6.0618 15.6751 6.06186 15.7774 5.81455L15.9093 5.49609C16.1125 5.00523 16.5025 4.61524 16.9934 4.41202L17.3158 4.27854C17.563 4.1762 17.5631 3.8261 17.3159 3.72367L16.9957 3.59096C16.5053 3.38775 16.1156 2.99814 15.9124 2.50778L15.7788 2.18536ZM15.7788 14.1854C15.6765 13.9383 15.3264 13.9382 15.2239 14.1853L15.0912 14.5053C14.8879 14.9955 14.4983 15.3849 14.0079 15.588L13.6854 15.7216C13.4382 15.824 13.4382 16.1742 13.6855 16.2765L14.0049 16.4086C14.4962 16.6119 14.8865 17.0022 15.0896 17.4935L15.2224 17.8145C15.3247 18.0618 15.6751 18.0619 15.7774 17.8145L15.9093 17.4961C16.1125 17.0052 16.5025 16.6152 16.9934 16.412L17.3158 16.2785C17.563 16.1762 17.5631 15.8261 17.3159 15.7237L16.9957 15.591C16.5053 15.3878 16.1156 14.9981 15.9124 14.5078L15.7788 14.1854Z"
+          fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/ai.svg b/src/components/chat/assets/icons/ai.svg
new file mode 100644
index 00000000..321f3775
--- /dev/null
+++ b/src/components/chat/assets/icons/ai.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.03338 4.65784C8.37931 3.78072 9.62067 3.78072 9.9666 4.65785L11.0386 7.37598C11.1442 7.64377 11.3562 7.85575 11.624 7.96136L14.3422 9.03338C15.2193 9.37931 15.2193 10.6207 14.3422 10.9666L11.624 12.0386C11.3562 12.1442 11.1442 12.3562 11.0386 12.624L9.9666 15.3422C9.62066 16.2193 8.37931 16.2193 8.03338 15.3422L6.96136 12.624C6.85574 12.3562 6.64377 12.1442 6.37598 12.0386L3.65784 10.9666C2.78072 10.6207 2.78072 9.37931 3.65785 9.03338L6.37598 7.96136C6.64377 7.85574 6.85575 7.64377 6.96136 7.37598L8.03338 4.65784Z"
+          stroke="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M15.2788 2.18536C15.1765 1.93826 14.8264 1.9382 14.7239 2.18526L14.5912 2.5053C14.3879 2.99548 13.9983 3.3849 13.5079 3.58798L13.1854 3.72156C12.9382 3.82396 12.9382 4.17415 13.1855 4.27647L13.5049 4.40864C13.9962 4.61192 14.3865 5.00222 14.5896 5.49348L14.7224 5.81445C14.8247 6.0618 15.1751 6.06186 15.2774 5.81455L15.4093 5.49609C15.6125 5.00523 16.0025 4.61524 16.4934 4.41202L16.8158 4.27854C17.063 4.1762 17.0631 3.8261 16.8159 3.72367L16.4957 3.59096C16.0053 3.38775 15.6156 2.99814 15.4124 2.50778L15.2788 2.18536ZM15.2788 14.1854C15.1765 13.9383 14.8264 13.9382 14.7239 14.1853L14.5912 14.5053C14.3879 14.9955 13.9983 15.3849 13.5079 15.588L13.1854 15.7216C12.9382 15.824 12.9382 16.1742 13.1855 16.2765L13.5049 16.4086C13.9962 16.6119 14.3865 17.0022 14.5896 17.4935L14.7224 17.8145C14.8247 18.0618 15.1751 18.0619 15.2774 17.8145L15.4093 17.4961C15.6125 17.0052 16.0025 16.6152 16.4934 16.412L16.8158 16.2785C17.063 16.1762 17.0631 15.8261 16.8159 15.7237L16.4957 15.591C16.0053 15.3878 15.6156 14.9981 15.4124 14.5078L15.2788 14.1854Z"
+          fill="currentColor"/>
+</svg>
diff --git a/src/components/chat/assets/icons/ai_sparks.svg b/src/components/chat/assets/icons/ai_sparks.svg
new file mode 100644
index 00000000..e3cf2c1c
--- /dev/null
+++ b/src/components/chat/assets/icons/ai_sparks.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5491 4.17206C13.3043 3.65812 12.892 3.24292 12.3798 2.99709C12.8922 2.75182 13.3049 2.33713 13.5502 1.82359C13.7949 2.33773 14.2073 2.7531 14.7196 2.99902C14.2072 3.24416 13.7945 3.6587 13.5491 4.17206ZM7.8553 2.67116C7.94884 2.44317 8.26264 2.44322 8.35611 2.67125L8.87245 3.93101C9.57472 5.64439 10.9224 7.00747 12.6208 7.71895L13.8686 8.24163C14.0945 8.33625 14.0944 8.66539 13.8685 8.75993L12.6215 9.28181C10.9213 9.99333 9.57229 11.3577 8.86997 13.0729L8.35566 14.3289C8.2622 14.5571 7.94808 14.557 7.8547 14.3288L7.33851 13.0669C6.6363 11.3504 5.28646 9.9849 3.58499 9.2732L2.34236 8.75342L2.14941 9.2147L2.34236 8.75342C2.1164 8.65891 2.11633 8.32969 2.34227 8.23509L3.59203 7.71183C5.29021 7.00081 6.63792 5.6384 7.34062 3.92565L7.8553 2.67116Z" stroke="currentColor"/>
+<circle cx="13.5825" cy="2.9375" r="0.5" fill="currentColor"/>
+</svg>
diff --git a/src/components/chat/assets/icons/arrow-up.svg b/src/components/chat/assets/icons/arrow-up.svg
new file mode 100644
index 00000000..6c1c0177
--- /dev/null
+++ b/src/components/chat/assets/icons/arrow-up.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="icon / send / s">
+        <path id="Union"
+              d="M19.1673 10.8405C19.1673 5.77788 15.0633 1.67383 10.0007 1.67383C4.93804 1.67383 0.833984 5.77788 0.833984 10.8405C0.833984 15.9031 4.93804 20.0072 10.0007 20.0072C15.0633 20.0072 19.1673 15.9031 19.1673 10.8405ZM10.5891 5.88102C11.4676 6.75834 12.3453 7.63653 13.2229 8.51471C13.5242 8.81623 13.8255 9.11776 14.1269 9.41924C14.4523 9.74474 14.4536 10.2725 14.1289 10.5987C13.8065 10.9225 13.2774 10.9268 12.9543 10.6037L10.834 8.48345V15.0072C10.834 15.4674 10.4609 15.8405 10.0007 15.8405C9.54046 15.8405 9.16736 15.4674 9.16736 15.0072V8.48345L7.05352 10.5973C6.72854 10.9223 6.20057 10.9218 5.87558 10.5968C5.5506 10.2718 5.55003 9.74382 5.87495 9.41877C6.17654 9.11707 6.47809 8.81533 6.77964 8.51359C7.6569 7.63578 8.53416 6.75798 9.41226 5.88103C9.73738 5.55633 10.264 5.55632 10.5891 5.88102Z"
+              fill="currentColor"/>
+    </g>
+</svg>
diff --git a/src/components/chat/assets/icons/at.svg b/src/components/chat/assets/icons/at.svg
new file mode 100644
index 00000000..53a2d20f
--- /dev/null
+++ b/src/components/chat/assets/icons/at.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.125 7.71583V11.6221C13.125 12.2437 13.3719 12.8398 13.8115 13.2794C14.251 13.7189 14.8472 13.9658 15.4688 13.9658C16.0904 13.9658 16.6865 13.7189 17.126 13.2794C17.5656 12.8398 17.8125 12.2437 17.8125 11.6221V10.8408C17.8125 9.08091 17.2183 7.37254 16.1261 5.99252C15.0339 4.6125 13.5078 3.64167 11.795 3.23732C10.0821 2.83297 8.28293 3.0188 6.68889 3.7647C5.09485 4.51059 3.79936 5.77285 3.0123 7.34697C2.22524 8.92109 1.99273 10.7148 2.35243 12.4376C2.71214 14.1604 3.64299 15.7112 4.99417 16.8389C6.34535 17.9666 8.0377 18.605 9.79702 18.6507C11.5563 18.6964 13.2796 18.1468 14.6875 17.0908" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.875 10.8408C6.875 11.6696 7.20424 12.4645 7.79029 13.0505C8.37634 13.6366 9.1712 13.9658 10 13.9658C10.8288 13.9658 11.6237 13.6366 12.2097 13.0505C12.7958 12.4645 13.125 11.6696 13.125 10.8408C13.125 10.012 12.7958 9.21716 12.2097 8.63111C11.6237 8.04506 10.8288 7.71582 10 7.71582C9.1712 7.71582 8.37634 8.04506 7.79029 8.63111C7.20424 9.21716 6.875 10.012 6.875 10.8408Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/auto-text.svg b/src/components/chat/assets/icons/auto-text.svg
new file mode 100644
index 00000000..9e0cc0dc
--- /dev/null
+++ b/src/components/chat/assets/icons/auto-text.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
+    <path d="M8.5 2.375H6C4.82149 2.375 4.23223 2.375 3.86612 2.74112C3.5 3.10723 3.5 3.69649 3.5 4.875V5.46875M8.5 2.375H11C12.1785 2.375 12.7677 2.375 13.1339 2.74112C13.5 3.10723 13.5 3.69649 13.5 4.875V5.46875M8.5 2.375V13.625"
+          stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5.375 13.625H11.625" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/board.svg b/src/components/chat/assets/icons/board.svg
new file mode 100644
index 00000000..8ba9a9bc
--- /dev/null
+++ b/src/components/chat/assets/icons/board.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.7 15.135V4.865C8.7 3.89 8.3085 3.5 7.33579 3.5H4.86425C3.89154 3.5 3.5 3.89 3.5 4.865V15.135C3.5 16.11 3.89154 16.5 4.86425 16.5H7.33579C8.3085 16.5 8.7 16.11 8.7 15.135Z"
+          stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16.5 10.7667V4.9C16.5 3.9 16.1086 3.5 15.1358 3.5H12.6643C11.6916 3.5 11.3 3.9 11.3 4.9V10.7667C11.3 11.7667 11.6916 12.1667 12.6643 12.1667H15.1358C16.1086 12.1667 16.5 11.7667 16.5 10.7667Z"
+          stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/bullet-list.svg b/src/components/chat/assets/icons/bullet-list.svg
new file mode 100644
index 00000000..e82e3b80
--- /dev/null
+++ b/src/components/chat/assets/icons/bullet-list.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.875 7.15625H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M8.875 12H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M8.875 16.6875H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M4.96875 7.3125H4.97656" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M4.96875 12H4.97656" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M4.96875 16.6875H4.97656" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+          stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/calendar.svg b/src/components/chat/assets/icons/calendar.svg
new file mode 100644
index 00000000..c1824e86
--- /dev/null
+++ b/src/components/chat/assets/icons/calendar.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 4.2V3M13 4.2V3M3 8.5H17M3 9.83333C3 7.31917 3 6.0621 3.8201 5.28105C4.64021 4.5 5.96013 4.5 8.6 4.5H11.4C14.0398 4.5 15.3598 4.5 16.1799 5.28105C17 6.0621 17 7.31917 17 9.83333V11.1667C17 13.6808 17 14.9379 16.1799 15.7189C15.3598 16.5 14.0398 16.5 11.4 16.5H8.6C5.96013 16.5 4.64021 16.5 3.8201 15.7189C3 14.9379 3 13.6808 3 11.1667V9.83333Z" stroke="currentColor" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/change-font.svg b/src/components/chat/assets/icons/change-font.svg
new file mode 100644
index 00000000..4e406db3
--- /dev/null
+++ b/src/components/chat/assets/icons/change-font.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="icon / font / m">
+        <path id="Vector"
+              d="M9.92245 3.5527C7.91641 3.5527 6.20484 4.26125 4.78773 5.67836C3.37063 7.09547 2.66207 8.80704 2.66207 10.8131C2.66207 12.0673 2.95157 13.2158 3.53056 14.2586C4.10955 15.3012 4.88748 16.1325 5.86437 16.7525V15.5337C5.86437 15.3303 5.93265 15.1598 6.0692 15.0222C6.20576 14.8847 6.37489 14.8159 6.5766 14.8159C6.77849 14.8159 6.94947 14.8847 7.08952 15.0222C7.22976 15.1598 7.29988 15.3303 7.29988 15.5337V18.6764C7.29988 18.9279 7.21485 19.1388 7.0448 19.3088C6.87456 19.479 6.66374 19.5642 6.41235 19.5642H3.26941C3.06604 19.5642 2.89562 19.4959 2.75814 19.3593C2.62048 19.2228 2.55165 19.0536 2.55165 18.8519C2.55165 18.65 2.62048 18.4791 2.75814 18.339C2.89562 18.1988 3.06604 18.1287 3.26941 18.1287H5.29099C4.07081 17.3741 3.08831 16.3574 2.3435 15.0785C1.59888 13.7998 1.22656 12.3872 1.22656 10.8407C1.22656 9.6481 1.45634 8.52095 1.91588 7.45922C2.37543 6.39731 3.00034 5.47131 3.79061 4.68123C4.58069 3.89096 5.50678 3.26606 6.56887 2.80651C7.63097 2.34696 8.75959 2.11719 9.95475 2.11719C11.7928 2.11719 13.4391 2.62661 14.8937 3.64545C16.3486 4.66412 17.3961 5.97319 18.0364 7.57268C18.1185 7.75727 18.1188 7.93846 18.0375 8.11624C17.956 8.29403 17.8253 8.42442 17.6455 8.50742C17.4657 8.59061 17.2866 8.58941 17.1083 8.50383C16.9301 8.41807 16.7999 8.28528 16.7177 8.10548C16.1911 6.7734 15.3177 5.68158 14.0973 4.83003C12.8769 3.97848 11.4853 3.5527 9.92245 3.5527Z"
+              fill="currentColor"/>
+        <path id="Vector_2"
+              d="M10.8158 18.7685L14.0181 10.3528C14.0739 10.2264 14.1491 10.1307 14.2436 10.0655C14.3382 10.0004 14.4458 9.96777 14.5666 9.96777H15.0221C15.1506 9.96777 15.2623 10.002 15.3573 10.0704C15.4524 10.1389 15.5278 10.2363 15.5837 10.3626L18.7245 18.7542C18.8016 18.9504 18.7882 19.1344 18.6845 19.3062C18.5808 19.478 18.4174 19.5639 18.1943 19.5639C18.0572 19.5639 17.9375 19.5297 17.835 19.4615C17.7327 19.393 17.6575 19.2955 17.6094 19.169L16.8299 17.0033H12.7089L11.9161 19.1851C11.8775 19.2942 11.8086 19.3845 11.7092 19.4563C11.6098 19.528 11.4949 19.5639 11.3644 19.5639C11.1433 19.5639 10.9783 19.4788 10.8692 19.3088C10.7602 19.1385 10.7424 18.9584 10.8158 18.7685ZM13.0848 15.9305H16.4511L14.8521 11.4553H14.7619L13.0848 15.9305Z"
+              fill="currentColor"/>
+    </g>
+</svg>
diff --git a/src/components/chat/assets/icons/chat-outlined.svg b/src/components/chat/assets/icons/chat-outlined.svg
new file mode 100644
index 00000000..87989592
--- /dev/null
+++ b/src/components/chat/assets/icons/chat-outlined.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 17 17" fill="none">
+  <path d="M6.5 6.06201H11.1667C11.5 6.06201 11.8333 6.32764 11.8333 6.72868C11.8333 7.06201 11.5755 7.39535 11.1667 7.39534H6.51302C6.09865 7.39535 5.83333 7.06201 5.83333 6.72868C5.83333 6.32764 6.16667 6.06201 6.5 6.06201Z" fill="currentColor"/>
+  <path d="M6.5 8.72868H9.15885C9.57031 8.72868 9.83333 9.06201 9.83333 9.39535C9.83333 9.72868 9.57031 10.062 9.16667 10.062H6.5C6.16667 10.062 5.83333 9.79653 5.83333 9.39535C5.83333 8.99416 6.16667 8.72868 6.5 8.72868Z" fill="currentColor"/>
+  <path d="M2.76088 13.8836L3.46384 12.8777C2.32857 11.711 1.60305 10.1638 1.51107 8.45342C1.50372 8.32386 1.5 8.19335 1.5 8.06201C1.5 4.19602 4.72439 1.06201 8.70189 1.06201C8.72413 1.06201 8.74635 1.06211 8.76854 1.06231C8.79012 1.06211 8.81171 1.06201 8.83333 1.06201C10.574 1.06201 12.1663 1.69737 13.391 2.74883C14.3416 3.54217 15.0769 4.5724 15.5 5.74532C15.5145 5.78564 15.8333 7.10668 15.8333 8.06201C15.8333 11.645 13.1413 14.5993 9.66957 15.0126L9.66791 15.0128C9.39425 15.0453 9.11574 15.062 8.83333 15.062L8.69835 15.0617C8.56267 15.0614 8.38169 15.0609 8.3441 15.0617C8.33953 15.0618 8.33708 15.062 8.33708 15.062H3.40299C2.77997 15.062 2.41082 14.3845 2.76088 13.8836ZM8.3408 13.7283C8.35765 13.7281 8.37817 13.728 8.39845 13.728C8.44025 13.7279 8.49549 13.728 8.55174 13.7281L8.83333 13.7287C11.9629 13.7287 14.5 11.1916 14.5 8.06201C14.5 7.70427 14.4372 7.22782 14.3597 6.79581C14.3225 6.58852 14.285 6.40744 14.2563 6.27777C14.2435 6.21991 14.2328 6.17374 14.2251 6.14142C13.8818 5.22135 13.2962 4.40641 12.5367 3.77253L12.5295 3.76654L12.5224 3.76045C11.5304 2.90871 10.2435 2.39535 8.83333 2.39535C8.81574 2.39535 8.79817 2.39542 8.78063 2.39558L8.76871 2.39569L8.75679 2.39559C8.73852 2.39543 8.72021 2.39535 8.70189 2.39535C5.42478 2.39535 2.83333 4.96788 2.83333 8.06201C2.83333 8.16816 2.83634 8.27349 2.84226 8.37793L2.84248 8.38181C2.91624 9.7534 3.49725 11.0002 4.41943 11.9479L5.18819 12.7379L4.49581 13.7287H8.3143C8.32535 13.7284 8.33506 13.7283 8.3408 13.7283ZM14.2152 6.10117L14.216 6.10405C14.2116 6.08819 14.2109 6.08427 14.2152 6.10117Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/check-circle.svg b/src/components/chat/assets/icons/check-circle.svg
new file mode 100644
index 00000000..8c59d0ee
--- /dev/null
+++ b/src/components/chat/assets/icons/check-circle.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon / Check-Circle" clip-path="url(#clip0_4938_101642)">
+<path id="Vector" d="M1.45312 10.8405C1.45312 17.4196 8.57516 21.5315 14.2729 18.242C16.9172 16.7153 18.5461 13.8939 18.5461 10.8405C18.5461 4.26136 11.4241 0.149481 5.72633 3.43901C3.08203 4.96565 1.45312 7.78714 1.45312 10.8405Z" stroke="black" stroke-width="1.25"/>
+<path id="Vector_2" d="M7.00781 11.2681L8.71711 12.9774L12.9903 8.7041" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_4938_101642">
+<rect width="20" height="20" fill="white" transform="translate(0 0.84082)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/chat/assets/icons/check.svg b/src/components/chat/assets/icons/check.svg
new file mode 100644
index 00000000..5ed80178
--- /dev/null
+++ b/src/components/chat/assets/icons/check.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 17 16" fill="none">
+  <g opacity="0.6">
+    <path d="M6.97897 10.2731L12.9305 4.32166C13.1583 4.09385 13.5276 4.09385 13.7554 4.32166L13.8733 4.43951C14.1011 4.66732 14.1011 5.03666 13.8733 5.26447L7.39145 11.7463C7.16364 11.9741 6.7943 11.9741 6.56649 11.7463L3.14881 8.3286C2.921 8.10079 2.921 7.73145 3.14881 7.50364L3.26666 7.38579C3.49446 7.15798 3.86381 7.15798 4.09162 7.38579L6.97897 10.2731Z" fill="currentColor"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/chevron.svg b/src/components/chat/assets/icons/chevron.svg
new file mode 100644
index 00000000..d9e6ba3d
--- /dev/null
+++ b/src/components/chat/assets/icons/chevron.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="10" viewBox="0 0 11 10" fill="none">
+  <path d="M2.28805 4.37204C2.45077 4.20932 2.71459 4.20932 2.87731 4.37204L5.49935 6.99408L8.12139 4.37204C8.28411 4.20932 8.54792 4.20932 8.71064 4.37204C8.87336 4.53476 8.87336 4.79858 8.71064 4.96129L5.79398 7.87796C5.71584 7.9561 5.60986 8 5.49935 8C5.38884 8 5.28286 7.9561 5.20472 7.87796L2.28805 4.96129C2.12534 4.79858 2.12534 4.53476 2.28805 4.37204Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/clip.svg b/src/components/chat/assets/icons/clip.svg
new file mode 100644
index 00000000..364ba80f
--- /dev/null
+++ b/src/components/chat/assets/icons/clip.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4938_101635)">
+<path d="M6.51133 15.8032L13.2553 9.34781C14.065 8.57281 14.065 7.31617 13.2553 6.54117C12.4456 5.76617 11.1329 5.76609 10.3232 6.54117L3.62805 12.9498C2.08969 14.4223 2.08969 16.8099 3.62805 18.2825C5.16648 19.7552 7.6607 19.7552 9.19914 18.2825L15.992 11.7803C18.2591 9.61016 18.2591 6.09172 15.992 3.92156C13.7248 1.75141 10.0491 1.75141 7.78195 3.92156L2.30859 9.1607" stroke="black" stroke-width="1.25" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_4938_101635">
+<rect width="20" height="20" fill="white" transform="translate(0 0.84082)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/chat/assets/icons/close.svg b/src/components/chat/assets/icons/close.svg
new file mode 100644
index 00000000..03f4fd18
--- /dev/null
+++ b/src/components/chat/assets/icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4L4 16M4 4L16 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/close_circle.svg b/src/components/chat/assets/icons/close_circle.svg
new file mode 100644
index 00000000..40f2401c
--- /dev/null
+++ b/src/components/chat/assets/icons/close_circle.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17ZM12.3524 12.3524C12.1555 12.5492 11.8364 12.5492 11.6395 12.3524L10 10.7128L8.36047 12.3524C8.16363 12.5492 7.84448 12.5492 7.64763 12.3524C7.45079 12.1555 7.45079 11.8364 7.64763 11.6395L9.28716 10L7.64763 8.36047C7.45079 8.16363 7.45079 7.84448 7.64763 7.64763C7.84448 7.45079 8.16363 7.45079 8.36047 7.64763L10 9.28716L11.6395 7.64763C11.8364 7.45079 12.1555 7.45079 12.3524 7.64763C12.5492 7.84448 12.5492 8.16363 12.3524 8.36047L10.7128 10L12.3524 11.6395C12.5492 11.8364 12.5492 12.1555 12.3524 12.3524Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/chat/assets/icons/continue-writing.svg b/src/components/chat/assets/icons/continue-writing.svg
new file mode 100644
index 00000000..c72a1330
--- /dev/null
+++ b/src/components/chat/assets/icons/continue-writing.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
+    <path d="M6.17211 14.1865C6.30477 14.1865 6.43199 14.1338 6.52576 14.04L14.4246 6.13678C14.6197 5.94154 14.6197 5.62512 14.4246 5.42987L12.3108 3.3148C12.1155 3.1194 11.7988 3.1194 11.6035 3.31479L3.70494 11.2177C3.61123 11.3115 3.55859 11.4386 3.55859 11.5712V13.6865C3.55859 13.9627 3.78245 14.1865 4.05859 14.1865H6.17211Z"
+          stroke="currentColor"/>
+    <path d="M9.9375 4.97949L12.7582 7.80188" stroke="currentColor"/>
+    <path d="M6.34776 1.52132C6.38669 1.42647 6.51969 1.42649 6.55859 1.52136L6.60935 1.64515C6.68655 1.83341 6.83459 1.983 7.02092 2.06101L7.1426 2.11196C7.23652 2.15129 7.23649 2.2857 7.14256 2.32499L7.02005 2.37624C6.83353 2.45426 6.68535 2.60399 6.60814 2.79245L6.55806 2.91471C6.51916 3.00967 6.38603 3.00964 6.34717 2.91468L6.29673 2.79145C6.21954 2.60284 6.07127 2.45299 5.8846 2.37494L5.76323 2.3242C5.66928 2.28492 5.66925 2.15047 5.76319 2.11115L5.88574 2.05987C6.07204 1.9819 6.22008 1.83239 6.29733 1.6442L6.34776 1.52132Z"
+          fill="currentColor"/>
+    <path d="M4.0868 2.01949C4.18797 1.77289 4.53373 1.77295 4.63482 2.01958L4.83325 2.5037C5.08397 3.1154 5.56486 3.60147 6.17019 3.85504L6.6497 4.05591C6.89374 4.15814 6.89368 4.50742 6.6496 4.60957L6.17037 4.81012C5.56441 5.06371 5.08306 5.55024 4.83232 6.16257L4.63467 6.64525C4.53359 6.8921 4.1875 6.89204 4.0865 6.64516L3.88813 6.16024C3.63743 5.54741 3.15577 5.06048 2.54935 4.80683L2.07181 4.60708C1.82767 4.50496 1.82761 4.15559 2.07172 4.05338L2.552 3.85229C3.15724 3.59888 3.63814 3.11305 3.88901 2.50158L4.0868 2.01949Z"
+          fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/copy.svg b/src/components/chat/assets/icons/copy.svg
new file mode 100644
index 00000000..5559af5b
--- /dev/null
+++ b/src/components/chat/assets/icons/copy.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 17 16" fill="none">
+  <path d="M11.1673 8.60016V11.4002C11.1673 13.7335 10.234 14.6668 7.90065 14.6668H5.10065C2.76732 14.6668 1.83398 13.7335 1.83398 11.4002V8.60016C1.83398 6.26683 2.76732 5.3335 5.10065 5.3335H7.90065C10.234 5.3335 11.1673 6.26683 11.1673 8.60016Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.1673 4.60016V7.40016C15.1673 9.7335 14.234 10.6668 11.9007 10.6668H11.1673V8.60016C11.1673 6.26683 10.234 5.3335 7.90065 5.3335H5.83398V4.60016C5.83398 2.26683 6.76732 1.3335 9.10065 1.3335H11.9007C14.234 1.3335 15.1673 2.26683 15.1673 4.60016Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/doc-forward.svg b/src/components/chat/assets/icons/doc-forward.svg
new file mode 100644
index 00000000..62dc5a7d
--- /dev/null
+++ b/src/components/chat/assets/icons/doc-forward.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 17 16" fill="none">
+  <path d="M7.83464 11.8332L9.16797 10.4332L7.83464 9.0332L9.16797 10.4332H5.16797" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.1673 6.9335V10.4335C15.1673 13.9335 13.834 15.3335 10.5007 15.3335H6.50065C3.16732 15.3335 1.83398 13.9335 1.83398 10.4335V6.2335C1.83398 2.7335 3.16732 1.3335 6.50065 1.3335H9.83398" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15.1673 6.9335H12.5007C10.5007 6.9335 9.83398 6.2335 9.83398 4.1335V1.3335L15.1673 6.9335Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/doc.svg b/src/components/chat/assets/icons/doc.svg
new file mode 100644
index 00000000..08d2a5e0
--- /dev/null
+++ b/src/components/chat/assets/icons/doc.svg
@@ -0,0 +1,12 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="document">
+        <g id="3">
+            <path id="Vector"
+                  d="M16.0827 7.27114V11.3627C16.0827 15.4543 14.666 17.0909 11.1243 17.0909H6.87435C3.33268 17.0909 1.91602 15.4543 1.91602 11.3627V6.45282C1.91602 2.36124 3.33268 0.724609 6.87435 0.724609H10.416"
+                  stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+            <path id="Vector_2"
+                  d="M16.0202 7.17293H13.1868C11.0618 7.17293 10.3535 6.35016 10.3535 3.88187V0.877085C10.3535 0.778556 10.476 0.733094 10.5403 0.807763L16.0202 7.17293Z"
+                  stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/components/chat/assets/icons/download.svg b/src/components/chat/assets/icons/download.svg
new file mode 100644
index 00000000..3b713e05
--- /dev/null
+++ b/src/components/chat/assets/icons/download.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon / save_as / m">
+<path id="Vector" d="M1.51953 13.668C1.51953 16.3332 1.51953 17.6658 2.3475 18.4938C3.17555 19.3218 4.50813 19.3218 7.17336 19.3218H12.8273C15.4924 19.3218 16.8251 19.3218 17.653 18.4938C18.4811 17.6658 18.4811 16.3331 18.4811 13.668" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M9.99969 2.36035V14.6104M9.99969 14.6104L13.7689 10.4878M9.99969 14.6104L6.23047 10.4878" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/components/chat/assets/icons/drop_menu_show.svg b/src/components/chat/assets/icons/drop_menu_show.svg
new file mode 100644
index 00000000..42ead9ef
--- /dev/null
+++ b/src/components/chat/assets/icons/drop_menu_show.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.6963 9.14568L5.56599 6.66032C5.34358 6.40085 5.52795 6 5.86969 6H10.1303C10.4721 6 10.6564 6.40085 10.434 6.66032L8.3037 9.14568C8.14406 9.33192 7.85594 9.33192 7.6963 9.14568Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/chat/assets/icons/error.svg b/src/components/chat/assets/icons/error.svg
new file mode 100644
index 00000000..89f8b0e6
--- /dev/null
+++ b/src/components/chat/assets/icons/error.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7936 8.72396C15.7936 12.774 12.5104 16.0573 8.46029 16.0573C4.4102 16.0573 1.12695 12.774 1.12695 8.72396C1.12695 4.67387 4.4102 1.39062 8.46029 1.39062C12.5104 1.39062 15.7936 4.67387 15.7936 8.72396Z" fill="#FB006D"/>
+<path d="M8.46159 5.39062C8.0934 5.39062 7.79492 5.6891 7.79492 6.05729V9.39062C7.79492 9.75881 8.0934 10.0573 8.46159 10.0573C8.82978 10.0573 9.12826 9.75881 9.12826 9.39062V6.05729C9.12826 5.6891 8.82978 5.39062 8.46159 5.39062Z" fill="white"/>
+<path d="M8.46159 10.724C8.0934 10.724 7.79492 11.0224 7.79492 11.3906C7.79492 11.7588 8.0934 12.0573 8.46159 12.0573C8.82978 12.0573 9.12826 11.7588 9.12826 11.3906C9.12826 11.0224 8.82978 10.724 8.46159 10.724Z" fill="white"/>
+</svg>
diff --git a/src/components/chat/assets/icons/explain.svg b/src/components/chat/assets/icons/explain.svg
new file mode 100644
index 00000000..272ca876
--- /dev/null
+++ b/src/components/chat/assets/icons/explain.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.4708 14C10.2878 14 10.1123 13.9273 9.98294 13.7979C9.85356 13.6686 9.78088 13.4931 9.78088 13.3101C9.78088 13.1271 9.85356 12.9517 9.98294 12.8223C10.1123 12.6929 10.2878 12.6202 10.4708 12.6202C10.6537 12.6202 10.8292 12.6929 10.9586 12.8223C11.088 12.9517 11.1607 13.1271 11.1607 13.3101C11.1607 13.4931 11.088 13.6686 10.9586 13.7979C10.8292 13.9273 10.6537 14 10.4708 14ZM8.60574 8.56588C8.53755 8.56539 8.47023 8.55047 8.40821 8.52212C8.34619 8.49376 8.29088 8.4526 8.2459 8.40134C8.20092 8.35009 8.1673 8.28989 8.14724 8.22471C8.12718 8.15954 8.12114 8.09085 8.12951 8.02318C8.16085 7.75491 8.21071 7.53555 8.27908 7.3651C8.39498 7.08258 8.57529 6.83106 8.80563 6.63058C9.0395 6.41921 9.31352 6.25709 9.61137 6.15388C9.91328 6.05038 10.2304 5.99837 10.5496 6.00004C11.2143 6.00004 11.7675 6.19566 12.21 6.58737C12.6525 6.97766 12.8742 7.49899 12.8742 8.14947C12.8742 8.44195 12.8172 8.70689 12.7033 8.94429C12.5903 9.18217 12.3491 9.47845 11.9802 9.83265C11.6103 10.1873 11.3662 10.4394 11.2452 10.5895C11.1197 10.7489 11.0268 10.9313 10.9717 11.1265C10.9384 11.2362 10.9147 11.3658 10.9019 11.5149C10.8791 11.7665 10.6768 11.9659 10.4242 11.9659C10.357 11.9655 10.2907 11.9511 10.2294 11.9236C10.1681 11.8961 10.1132 11.8562 10.0682 11.8062C10.0232 11.7563 9.98909 11.6976 9.96807 11.6338C9.94705 11.57 9.93957 11.5025 9.94611 11.4356C9.96273 11.2628 9.98789 11.1122 10.023 10.984C10.0881 10.7395 10.1868 10.5259 10.3188 10.3431C10.4504 10.1598 10.6878 9.89105 11.031 9.53637C11.3748 9.18217 11.5961 8.92388 11.6958 8.76387C11.7936 8.60291 11.8966 8.34129 11.8966 8.02318C11.8966 7.70506 11.729 7.44629 11.5035 7.20129C11.2765 6.95629 10.9475 6.83332 10.5159 6.83332C9.67357 6.83332 9.19592 7.26681 9.08387 8.1338C9.05206 8.37785 8.85359 8.56588 8.60764 8.56588H8.60574Z"
+          fill="currentColor"/>
+    <circle cx="10.5" cy="10.5" r="7.5" stroke="currentColor"/>
+</svg>
diff --git a/src/components/chat/assets/icons/fix-spelling.svg b/src/components/chat/assets/icons/fix-spelling.svg
new file mode 100644
index 00000000..1b520c54
--- /dev/null
+++ b/src/components/chat/assets/icons/fix-spelling.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.8181 6L7.81813 14L4.18176 10.3636" stroke="currentColor" stroke-linecap="round"
+          stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/grid.svg b/src/components/chat/assets/icons/grid.svg
new file mode 100644
index 00000000..36cc2cec
--- /dev/null
+++ b/src/components/chat/assets/icons/grid.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 3V17M3 7.5H17M3 12.5H17M5.5 17H14.5C15.8807 17 17 15.8807 17 14.5V5.5C17 4.11929 15.8807 3 14.5 3H5.5C4.11929 3 3 4.11929 3 5.5V14.5C3 15.8807 4.11929 17 5.5 17Z"
+          stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/image-text.svg b/src/components/chat/assets/icons/image-text.svg
new file mode 100644
index 00000000..d5bc46dd
--- /dev/null
+++ b/src/components/chat/assets/icons/image-text.svg
@@ -0,0 +1,18 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_5942_74700)">
+        <path d="M1.63867 11.9997C1.63867 8.97803 1.63867 7.46725 2.57734 6.52852C3.51607 5.58984 5.02686 5.58984 8.04853 5.58984C11.0702 5.58984 12.581 5.58984 13.5197 6.52852C14.4584 7.46725 14.4584 8.97803 14.4584 11.9997C14.4584 15.0213 14.4584 16.5322 13.5197 17.4708C12.5811 18.4096 11.0702 18.4096 8.04853 18.4096C5.02686 18.4096 3.51607 18.4096 2.57734 17.4708C1.63867 16.5322 1.63867 15.0213 1.63867 11.9997Z"
+              stroke="currentColor" stroke-width="1.25"/>
+        <path d="M9.33203 9.43605C9.32992 10.4229 10.3969 11.042 11.2526 10.5504C11.6515 10.3212 11.897 9.89601 11.896 9.43605C11.8981 8.44916 10.8311 7.83012 9.97539 8.32172C9.57655 8.55082 9.33104 8.97609 9.33203 9.43605Z"
+              fill="currentColor" stroke="currentColor" stroke-width="0.2"/>
+        <path d="M1.63867 12.3198L2.76139 11.3374C3.34551 10.8263 4.22588 10.8556 4.77467 11.4044L7.52436 14.1541C7.96481 14.5946 8.65826 14.6547 9.16797 14.2964L9.3591 14.1621C10.0925 13.6467 11.0849 13.7064 11.7512 14.3061L13.8174 16.1657"
+              stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+    </g>
+    <path d="M23.4512 7H16.5488" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+    <path d="M21.3805 12H16.5488" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+    <path d="M20 17H16.5488" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+    <defs>
+        <clipPath id="clip0_5942_74700">
+            <rect width="15" height="15" fill="white" transform="translate(0.548828 4.5)"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/src/components/chat/assets/icons/image.svg b/src/components/chat/assets/icons/image.svg
new file mode 100644
index 00000000..9e6ca022
--- /dev/null
+++ b/src/components/chat/assets/icons/image.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_5942_74694)">
+        <path d="M5.58984 11.9997C5.58984 8.97803 5.58984 7.46725 6.52852 6.52852C7.46725 5.58984 8.97803 5.58984 11.9997 5.58984C15.0213 5.58984 16.5322 5.58984 17.4708 6.52852C18.4096 7.46725 18.4096 8.97803 18.4096 11.9997C18.4096 15.0213 18.4096 16.5322 17.4708 17.4708C16.5322 18.4096 15.0213 18.4096 11.9997 18.4096C8.97803 18.4096 7.46725 18.4096 6.52852 17.4708C5.58984 16.5322 5.58984 15.0213 5.58984 11.9997Z"
+              stroke="currentColor" stroke-width="1.25"/>
+        <path d="M13.2813 9.43605C13.2791 10.4229 14.3461 11.042 15.2018 10.5504C15.6007 10.3212 15.8462 9.89601 15.8452 9.43605C15.8473 8.44916 14.7803 7.83012 13.9246 8.32172C13.5258 8.55082 13.2803 8.97609 13.2813 9.43605Z"
+              fill="currentColor"/>
+        <path d="M5.58984 12.3208L6.71256 11.3384C7.29668 10.8273 8.17705 10.8566 8.72584 11.4054L11.4755 14.1551C11.916 14.5956 12.6094 14.6557 13.1191 14.2974L13.3103 14.1631C14.0437 13.6477 15.036 13.7074 15.7024 14.3071L17.7686 16.1667"
+              stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_5942_74694">
+            <rect width="15" height="15" fill="white" transform="translate(4.5 4.5)"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/src/components/chat/assets/icons/improve-writing.svg b/src/components/chat/assets/icons/improve-writing.svg
new file mode 100644
index 00000000..5d09d207
--- /dev/null
+++ b/src/components/chat/assets/icons/improve-writing.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.15493 2.23158C4.28302 1.92275 4.72057 1.92283 4.84856 2.2317L5.01555 2.63473C5.26953 3.24768 5.75656 3.73469 6.36957 3.98871L6.7699 4.15459C7.07888 4.28262 7.0788 4.72025 6.76978 4.84817L6.36672 5.01503C5.75307 5.26905 5.26558 5.75653 5.01158 6.37011L4.8468 6.76819C4.71882 7.07733 4.28084 7.07725 4.15298 6.76807L3.98705 6.36685C3.7331 5.75277 3.24529 5.2649 2.63118 5.0108L2.23187 4.84558C1.92277 4.71769 1.92269 4.27995 2.23175 4.15195L2.63492 3.98497C3.24784 3.73112 3.73488 3.24435 3.98901 2.63163L4.15493 2.23158Z"
+          fill="currentColor"/>
+    <path d="M11.0234 5.71096C11.2876 7.34532 12.6641 8.59477 14.3725 8.76058M11.8628 4.85217L4.64726 12.1683C4.45676 12.3637 4.2724 12.7487 4.23553 13.0151L4.00815 14.9337C3.92827 15.6265 4.44447 16.1003 5.15731 15.9818L7.13608 15.6562C7.41262 15.6088 7.79977 15.4134 7.99027 15.212L15.2058 7.89587C16.0784 7.00763 16.4717 5.99504 15.1136 4.75742C13.7617 3.53165 12.7354 3.96393 11.8628 4.85217Z"
+          stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/insert-below.svg b/src/components/chat/assets/icons/insert-below.svg
new file mode 100644
index 00000000..33479a6a
--- /dev/null
+++ b/src/components/chat/assets/icons/insert-below.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
+    <path d="M2.90039 4H14.1504M2.90039 6.5H14.1504M9.15039 9H14.1504M9.15039 11.5H14.1504M7.52539 10.25L6.19206 11.5833M7.52539 10.25L6.19206 8.91666M7.52539 10.25L4.52539 10.2503C3.02539 10.2503 3.02539 9.81634 3.02539 8.74967"
+          stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/make-longer.svg b/src/components/chat/assets/icons/make-longer.svg
new file mode 100644
index 00000000..f031a184
--- /dev/null
+++ b/src/components/chat/assets/icons/make-longer.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 4.75H17M3 8.25005H17M3 11.75H17M3 15.25H10" stroke="currentColor" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/make-shorter.svg b/src/components/chat/assets/icons/make-shorter.svg
new file mode 100644
index 00000000..86633793
--- /dev/null
+++ b/src/components/chat/assets/icons/make-shorter.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 9H17M3 12H9.125" stroke="currentColor" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/num-list.svg b/src/components/chat/assets/icons/num-list.svg
new file mode 100644
index 00000000..5e5ddcb7
--- /dev/null
+++ b/src/components/chat/assets/icons/num-list.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.4375 7.3125H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M10.4375 12H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M10.4375 16.6875H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M5.75 7.3125H6.53125V10.4375" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M5.75 10.4375H7.3125" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M7.3125 16.6874H5.75C5.75 15.9062 7.3125 15.1249 7.3125 14.3437C7.3125 13.5624 6.53125 13.1718 5.75 13.5624"
+          stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/paragraph.svg b/src/components/chat/assets/icons/paragraph.svg
new file mode 100644
index 00000000..2d5d14ca
--- /dev/null
+++ b/src/components/chat/assets/icons/paragraph.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.9727 4.7041V20.2688" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M16.8633 4.7041V20.2688" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M18.8092 4.7041H9.5677C6.19784 4.7041 4.0917 8.35213 5.77659 11.2705C6.55854 12.6249 8.00381 13.4592 9.5677 13.4593H12.9724"
+          stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/regenerate-circle.svg b/src/components/chat/assets/icons/regenerate-circle.svg
new file mode 100644
index 00000000..028db5b8
--- /dev/null
+++ b/src/components/chat/assets/icons/regenerate-circle.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.835938" y="1.67578" width="18.33" height="18.33" rx="9.165" fill="currentColor"/>
+    <path d="M13.9775 8.11944L13.5356 7.67746C11.5829 5.72487 8.41707 5.72487 6.46448 7.67746C4.51184 9.63005 4.51184 12.7959 6.46448 14.7486C8.41707 16.7012 11.5829 16.7012 13.5356 14.7486C14.6711 13.613 15.1462 12.0672 14.9611 10.5883M13.9775 8.11944H11.3258M13.9775 8.11944V5.46777"
+          stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/regenerate.svg b/src/components/chat/assets/icons/regenerate.svg
new file mode 100644
index 00000000..55c9aced
--- /dev/null
+++ b/src/components/chat/assets/icons/regenerate.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon / regenerate / m">
+<path id="Vector" d="M16.2568 6.56125L15.5617 5.86609C12.4906 2.795 7.51119 2.795 4.4401 5.86609C1.36893 8.93719 1.36893 13.9166 4.4401 16.9877C7.51119 20.0589 12.4906 20.0589 15.5617 16.9877C17.3477 15.2017 18.095 12.7705 17.8038 10.4444M16.2568 6.56125H12.0861M16.2568 6.56125V2.39062" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/components/chat/assets/icons/stop.svg b/src/components/chat/assets/icons/stop.svg
new file mode 100644
index 00000000..4856f28a
--- /dev/null
+++ b/src/components/chat/assets/icons/stop.svg
@@ -0,0 +1,5 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
+          d="M9.165 19.0058C14.2266 19.0058 18.33 14.9024 18.33 9.84078C18.33 4.77907 14.2266 0.675781 9.165 0.675781C4.10329 0.675781 0 4.77907 0 9.84078C0 14.9024 4.10329 19.0058 9.165 19.0058ZM6.03589 6.71167C5.499 7.24855 5.499 8.1126 5.499 9.84078C5.499 11.569 5.499 12.433 6.03589 12.9699C6.57277 13.5068 7.43682 13.5068 9.165 13.5068C10.8932 13.5068 11.7572 13.5068 12.2941 12.9699C12.831 12.433 12.831 11.569 12.831 9.84078C12.831 8.1126 12.831 7.24855 12.2941 6.71167C11.7572 6.17478 10.8932 6.17478 9.165 6.17478C7.43682 6.17478 6.57277 6.17478 6.03589 6.71167Z"
+          fill="currentColor"/>
+</svg>
diff --git a/src/components/chat/assets/icons/success.svg b/src/components/chat/assets/icons/success.svg
new file mode 100644
index 00000000..5b06ab2b
--- /dev/null
+++ b/src/components/chat/assets/icons/success.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
+    <path d="M8.83268 12.3172L7.04102 10.5256C6.88824 10.3728 6.69379 10.2964 6.45768 10.2964C6.22157 10.2964 6.02713 10.3728 5.87435 10.5256C5.72157 10.6783 5.64518 10.8728 5.64518 11.1089C5.64518 11.345 5.72157 11.5394 5.87435 11.6922L8.24935 14.0672C8.41602 14.2339 8.61046 14.3172 8.83268 14.3172C9.05491 14.3172 9.24935 14.2339 9.41602 14.0672L14.1244 9.35889C14.2771 9.20611 14.3535 9.01167 14.3535 8.77555C14.3535 8.53944 14.2771 8.345 14.1244 8.19222C13.9716 8.03944 13.7771 7.96305 13.541 7.96305C13.3049 7.96305 13.1105 8.03944 12.9577 8.19222L8.83268 12.3172ZM9.99935 19.1506C8.84657 19.1506 7.76324 18.9318 6.74935 18.4943C5.73546 18.0568 4.85352 17.4631 4.10352 16.7131C3.35352 15.9631 2.75977 15.0811 2.32227 14.0672C1.88477 13.0533 1.66602 11.97 1.66602 10.8172C1.66602 9.66444 1.88477 8.58111 2.32227 7.56722C2.75977 6.55333 3.35352 5.67139 4.10352 4.92139C4.85352 4.17139 5.73546 3.57764 6.74935 3.14014C7.76324 2.70264 8.84657 2.48389 9.99935 2.48389C11.1521 2.48389 12.2355 2.70264 13.2494 3.14014C14.2632 3.57764 15.1452 4.17139 15.8952 4.92139C16.6452 5.67139 17.2389 6.55333 17.6764 7.56722C18.1139 8.58111 18.3327 9.66444 18.3327 10.8172C18.3327 11.97 18.1139 13.0533 17.6764 14.0672C17.2389 15.0811 16.6452 15.9631 15.8952 16.7131C15.1452 17.4631 14.2632 18.0568 13.2494 18.4943C12.2355 18.9318 11.1521 19.1506 9.99935 19.1506Z" fill="#66CF80"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/assets/icons/summarize.svg b/src/components/chat/assets/icons/summarize.svg
new file mode 100644
index 00000000..0e375323
--- /dev/null
+++ b/src/components/chat/assets/icons/summarize.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.64559 5.9359C5.79326 5.9359 5.92009 5.88412 6.02609 5.78057C6.13198 5.6769 6.18492 5.55123 6.18492 5.40357C6.18492 5.2559 6.13314 5.12907 6.02959 5.02307C5.92592 4.91718 5.80026 4.86423 5.65259 4.86423C5.50492 4.86423 5.37809 4.91601 5.27209 5.01956C5.1662 5.12323 5.11326 5.2489 5.11326 5.39656C5.11326 5.54423 5.16503 5.67107 5.26859 5.77707C5.37226 5.88295 5.49792 5.9359 5.64559 5.9359ZM5.64559 8.5359C5.79326 8.5359 5.92009 8.48412 6.02609 8.38057C6.13198 8.2769 6.18492 8.15123 6.18492 8.00357C6.18492 7.8559 6.13314 7.72907 6.02959 7.62307C5.92592 7.51718 5.80026 7.46423 5.65259 7.46423C5.50492 7.46423 5.37809 7.51601 5.27209 7.61957C5.1662 7.72323 5.11326 7.8489 5.11326 7.99657C5.11326 8.14423 5.16503 8.27107 5.26859 8.37707C5.37226 8.48295 5.49792 8.5359 5.64559 8.5359ZM5.64559 11.1359C5.79326 11.1359 5.92009 11.0841 6.02609 10.9806C6.13198 10.8769 6.18492 10.7512 6.18492 10.6036C6.18492 10.4559 6.13314 10.3291 6.02959 10.2231C5.92592 10.1172 5.80026 10.0642 5.65259 10.0642C5.50492 10.0642 5.37809 10.116 5.27209 10.2196C5.1662 10.3232 5.11326 10.4489 5.11326 10.5966C5.11326 10.7442 5.16503 10.8711 5.26859 10.9771C5.37226 11.083 5.49792 11.1359 5.64559 11.1359ZM4.05426 13.2667C3.75414 13.2667 3.50048 13.1631 3.29326 12.9559C3.08603 12.7487 2.98242 12.495 2.98242 12.1949V3.80523C2.98242 3.50512 3.08603 3.25145 3.29326 3.04423C3.50048 2.83701 3.75414 2.7334 4.05426 2.7334H10.0593C10.2003 2.7334 10.3359 2.75907 10.4663 2.8104C10.5967 2.86162 10.7152 2.94057 10.8218 3.04723L13.2019 5.4274C13.3086 5.53395 13.3875 5.65245 13.4388 5.7829C13.4901 5.91323 13.5158 6.0489 13.5158 6.1899V12.1949C13.5158 12.495 13.4121 12.7487 13.2049 12.9559C12.9977 13.1631 12.744 13.2667 12.4439 13.2667H4.05426ZM4.05426 12.4001H12.4439C12.5038 12.4001 12.553 12.3808 12.5914 12.3424C12.6299 12.304 12.6491 12.2548 12.6491 12.1949V6.40007H10.3849C10.232 6.40007 10.1045 6.34895 10.0024 6.24673C9.9002 6.14462 9.84909 6.01712 9.84909 5.86423V3.60007H4.05426C3.99437 3.60007 3.9452 3.61929 3.90676 3.65773C3.86831 3.69618 3.84909 3.74534 3.84909 3.80523V12.1949C3.84909 12.2548 3.86831 12.304 3.90676 12.3424C3.9452 12.3808 3.99437 12.4001 4.05426 12.4001Z"
+          fill="currentColor"/>
+</svg>
diff --git a/src/components/chat/assets/icons/table.svg b/src/components/chat/assets/icons/table.svg
new file mode 100644
index 00000000..a357e8e0
--- /dev/null
+++ b/src/components/chat/assets/icons/table.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.21234 4.55859H17.7886C17.7886 4.55859 19.4423 4.55859 19.4423 6.21234V17.7886C19.4423 17.7886 19.4423 19.4423 17.7886 19.4423H6.21234C6.21234 19.4423 4.55859 19.4423 4.55859 17.7886V6.21234C4.55859 6.21234 4.55859 4.55859 6.21234 4.55859Z"
+          stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4.55859 12H19.4423" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"
+          stroke-linejoin="round"/>
+    <path d="M12 4.55859V19.4423" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"
+          stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/text.svg b/src/components/chat/assets/icons/text.svg
new file mode 100644
index 00000000..04a6b8f6
--- /dev/null
+++ b/src/components/chat/assets/icons/text.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.96875 7.3125H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M4.96875 12H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+    <path d="M4.96875 16.6875H19.0312" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+          stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/trans.svg b/src/components/chat/assets/icons/trans.svg
new file mode 100644
index 00000000..095ea2d7
--- /dev/null
+++ b/src/components/chat/assets/icons/trans.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.98242 5.1416H14.5158C15.8991 5.1416 17.0158 6.25827 17.0158 7.6416V10.4083" stroke="#171717" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.61576 2.50781L2.98242 5.14112L5.61576 7.77448" stroke="#171717" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.0158 16.5411H5.48242C4.09909 16.5411 2.98242 15.4244 2.98242 14.0411V11.2744" stroke="#171717" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.3828 19.1749L17.0161 16.5416L14.3828 13.9082" stroke="#171717" stroke-width="1.25" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/chat/assets/icons/undo.svg b/src/components/chat/assets/icons/undo.svg
new file mode 100644
index 00000000..0a1f6525
--- /dev/null
+++ b/src/components/chat/assets/icons/undo.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="icon / undo / m">
+        <path id="Vector"
+              d="M1.59961 7.16562H13.1496C16.0491 7.16562 18.3996 9.51609 18.3996 12.4156C18.3996 15.3151 16.0491 17.6656 13.1496 17.6656H5.79961M1.59961 7.16562L4.74961 4.01562M1.59961 7.16562L4.74961 10.3156"
+              stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+</svg>
diff --git a/src/components/chat/assets/logo.svg b/src/components/chat/assets/logo.svg
new file mode 100644
index 00000000..cbc46a5c
--- /dev/null
+++ b/src/components/chat/assets/logo.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
+  <path d="M32.4662 30.7031C32.4662 29.5134 27.8699 28.1787 26.9754 28.9631C25.7279 30.0573 24.3464 31.0043 22.9067 31.7656C22.3423 32.0844 21.6721 32.2615 21.0371 32.2969H30.8436C31.796 32.2969 32.4662 31.5886 32.4662 30.7031Z" fill="#F7931E"/>
+  <path d="M12.8496 10.337C12.7085 10.4432 12.5674 10.5495 12.4263 10.6557C10.0276 12.3558 2.76091 17.81 1.10299 15.4371C-0.519663 13.1349 1.20881 6.61816 5.37126 3.46602C5.51433 3.32237 5.70267 3.22812 5.86994 3.11355C10.2936 0.083662 13.5858 0.569693 15.213 2.86392C16.7651 5.0598 15.0366 8.53069 12.8496 10.337Z" fill="#8427E0"/>
+  <path d="M30.629 15.4035C28.3714 16.9973 24.8439 15.1556 23.0801 12.8534C23.0096 12.7472 22.939 12.6764 22.8685 12.5701C21.1753 10.1617 15.7429 2.86575 18.0711 1.23656C20.3992 -0.428056 27.1368 1.37823 30.2057 5.76997C30.2762 5.87623 30.3468 5.94706 30.4173 6.05331C33.3804 10.4805 32.9219 13.7743 30.629 15.4035Z" fill="#00B5FF"/>
+  <path d="M27.834 29.5952C27.6756 29.7219 27.5149 29.8461 27.3464 29.9589C22.7959 33.1818 19.4095 32.7214 17.7516 30.3839C16.1995 28.188 17.928 24.7171 20.115 22.9108C20.2561 22.8046 20.3972 22.6983 20.5383 22.5921C22.937 20.9275 30.2037 15.4378 31.8263 17.8107C33.4522 20.0683 31.8553 26.3792 27.834 29.5952Z" fill="#FFBD00"/>
+  <path d="M14.8984 32.0135C12.6145 33.6464 6.12111 31.9392 2.97789 27.7276C2.85637 27.5647 2.71327 27.414 2.6227 27.2321C-0.375674 22.805 0.118176 19.4757 2.41105 17.8819C4.66865 16.2882 8.19615 18.1299 9.9599 20.432C10.0304 20.5382 10.101 20.6091 10.1715 20.7153C11.8295 23.0883 17.2618 30.3843 14.8984 32.0135Z" fill="#E3006D"/>
+  <path d="M15.2169 2.86392C18.4809 7.48175 10.4134 12.2416 4.83254 13.1535C3.28235 13.4068 2.05736 13.2646 1.67131 12.3558C0.789433 10.337 2.41208 6.22857 5.37518 3.46602C5.51825 3.32237 5.7066 3.22812 5.87386 3.11355C10.2975 0.0836619 13.5897 0.569693 15.2169 2.86392Z" fill="#9327FF"/>
+  <path d="M30.6295 15.401C25.9092 18.7334 21.0367 10.3547 20.3364 4.6193C20.171 3.26491 20.3573 2.22026 21.1758 1.87162C23.2923 0.950772 27.6664 2.79247 30.4531 6.05087C33.3809 10.478 32.9224 13.7718 30.6295 15.401Z" fill="#00C8FF"/>
+  <path d="M27.5933 29.7806C27.5228 29.8514 27.4522 29.8868 27.3464 29.9577C22.7959 33.1806 19.4095 32.7202 17.7516 30.3827C14.4876 25.7648 22.5551 21.005 28.136 20.0931C29.6861 19.8398 30.9111 19.9819 31.2972 20.8908C32.2143 22.9096 30.5917 27.018 27.5933 29.7806Z" fill="#FFCE00"/>
+  <path d="M11.8648 31.3759C9.74825 32.2968 5.37415 30.4905 2.6227 27.2321C-0.375674 22.805 0.118176 19.4757 2.41105 17.8819C7.13188 14.5492 12.027 22.9224 12.7079 28.6608C12.8667 29.9986 12.677 31.03 11.8648 31.3759Z" fill="#FB006D"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/chat/chat/context.ts b/src/components/chat/chat/context.ts
new file mode 100644
index 00000000..b652fe0e
--- /dev/null
+++ b/src/components/chat/chat/context.ts
@@ -0,0 +1,13 @@
+import { ChatProps } from '../types';
+import { createContext, useContext } from 'react';
+
+export const ChatContext = createContext<ChatProps | undefined>(undefined);
+
+export function useChatContext() {
+  const context = useContext(ChatContext);
+  if(!context) {
+    throw new Error('useChatContext must be used within a ChatContextProvider');
+  }
+
+  return context;
+}
diff --git a/src/components/chat/chat/index.tsx b/src/components/chat/chat/index.tsx
new file mode 100644
index 00000000..3a920c35
--- /dev/null
+++ b/src/components/chat/chat/index.tsx
@@ -0,0 +1,27 @@
+import Main from './main';
+import { TooltipProvider } from '../components/ui/tooltip';
+import { ChatI18nContext, getI18n, initI18n } from '../i18n/config';
+import { ChatProps } from '../types';
+import { Toaster } from '../components/ui/toaster';
+import '../styles/index.scss';
+
+export * from '../provider/prompt-modal-provider';
+export * from '../provider/view-loader-provider';
+
+initI18n();
+const i18n = getI18n();
+
+export function Chat(props: ChatProps) {
+  return (
+    <div id={'appflowy-chat'} className={'w-full h-full overflow-hidden'}>
+      <ChatI18nContext.Provider value={i18n}>
+        <TooltipProvider>
+          <Main {...props} />
+        </TooltipProvider>
+        <Toaster />
+      </ChatI18nContext.Provider>
+    </div>
+  );
+}
+
+export default Chat;
diff --git a/src/components/chat/chat/main.tsx b/src/components/chat/chat/main.tsx
new file mode 100644
index 00000000..706e3070
--- /dev/null
+++ b/src/components/chat/chat/main.tsx
@@ -0,0 +1,69 @@
+// Code: Chat main component
+import { ChatContext } from './context';
+import { ChatInput } from '../components/chat-input';
+import { ChatMessages } from '../components/chat-messages';
+import { cn } from '../lib/utils';
+import { MessageAnimationProvider } from '../provider/message-animation-provider';
+import { EditorProvider } from '../provider/editor-provider';
+import { MessagesHandlerProvider } from '../provider/messages-handler-provider';
+import { ChatMessagesProvider } from '../provider/messages-provider';
+import { PromptModalProvider } from '../provider/prompt-modal-provider';
+import { ResponseFormatProvider } from '../provider/response-format-provider';
+import { SelectionModeProvider } from '../provider/selection-mode-provider';
+import { SuggestionsProvider } from '../provider/suggestions-provider';
+import { ChatProps } from '../types';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ViewLoaderProvider } from '../provider/view-loader-provider';
+
+function Main(props: ChatProps) {
+  const { currentUser, selectionMode } = props;
+
+  return (
+    <ChatContext.Provider value={props}>
+      <ChatMessagesProvider>
+        <MessageAnimationProvider>
+          <SuggestionsProvider>
+            <EditorProvider>
+              <ViewLoaderProvider
+                getView={(viewId: string, forceRefresh?: boolean) =>
+                  props.requestInstance.getView(viewId, forceRefresh)
+                }
+                fetchViews={(forceRefresh?: boolean) =>
+                  props.requestInstance.fetchViews(forceRefresh)
+                }
+              >
+                <SelectionModeProvider>
+                  <ResponseFormatProvider>
+                    <PromptModalProvider
+                      workspaceId={props.workspaceId}
+                      loadDatabasePrompts={props.loadDatabasePrompts}
+                      testDatabasePromptConfig={props.testDatabasePromptConfig}
+                    >
+                      <MessagesHandlerProvider>
+                        <div className={'w-full relative h-full flex flex-col'}>
+                          <ChatMessages currentUser={currentUser} />
+                          <motion.div
+                            layout
+                            className={cn(
+                              'w-full relative flex pb-6 justify-center max-sm:hidden',
+                            )}
+                          >
+                            <AnimatePresence mode='wait'>
+                              {!selectionMode && <ChatInput />}
+                            </AnimatePresence>
+                          </motion.div>
+                        </div>
+                      </MessagesHandlerProvider>
+                    </PromptModalProvider>
+                  </ResponseFormatProvider>
+                </SelectionModeProvider>
+              </ViewLoaderProvider>
+            </EditorProvider>
+          </SuggestionsProvider>
+        </MessageAnimationProvider>
+      </ChatMessagesProvider>
+    </ChatContext.Provider>
+  );
+}
+
+export default Main;
diff --git a/src/components/chat/components/add-messages-to-page-wrapper/index.tsx b/src/components/chat/components/add-messages-to-page-wrapper/index.tsx
new file mode 100644
index 00000000..8fa44e19
--- /dev/null
+++ b/src/components/chat/components/add-messages-to-page-wrapper/index.tsx
@@ -0,0 +1,128 @@
+import { useChatContext } from '../../chat/context';
+import { SpaceList } from '../add-messages-to-page-wrapper/space-list';
+import { Label } from '../../../ui/label';
+import { SearchInput } from '../ui/search-input';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/popover';
+import { Separator } from '../../../ui/separator';
+import { toast } from '../../hooks/use-toast';
+import { useViewContentInserter } from '../../hooks/use-view-content-inserter';
+import { useTranslation } from '../../i18n';
+import { useEditorContext } from '../../provider/editor-provider';
+import { ChatMessage } from '../../types';
+import { useCallback, useState } from 'react';
+import { useViewLoader } from '../../provider/view-loader-provider';
+
+export function AddMessageToPageWrapper({ onFinished, messages, children }: {
+  messages: ChatMessage[];
+  children?: React.ReactNode;
+  onFinished?: () => void;
+}) {
+  const {
+    openingViewId,
+    chatId,
+  } = useChatContext();
+  
+  const { getView } = useViewLoader();
+  const { getEditor } = useEditorContext();
+  const {
+    createViewWithContent,
+    insertContentToView,
+  } = useViewContentInserter();
+
+  const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState('');
+
+  const getData = useCallback(() => {
+    return messages.reverse().flatMap(item => {
+      const editor = getEditor(item.message_id);
+      return editor?.getData() || [];
+    });
+  }, [messages, getEditor]);
+
+  const handleCreateViewWithContent = useCallback(async(parentViewId: string) => {
+    const data = getData();
+    const chat = await getView(chatId, false);
+
+    const name = `Messages extracted from "${chat?.name || 'Untitled'}"`;
+
+    try {
+      await createViewWithContent(parentViewId, name, data);
+      toast({
+        variant: 'success',
+        description: t('success.addMessageToPage', {
+          name,
+        }),
+      });
+      onFinished?.();
+      // eslint-disable-next-line
+    } catch(e: any) {
+      toast({
+        variant: 'destructive',
+        description: e.message,
+      });
+    }
+  }, [getData, getView, chatId, createViewWithContent, t, onFinished]);
+
+  const handleInsertContentToView = useCallback(async(viewId: string) => {
+    const data = getData();
+    const chat = await getView(chatId, false);
+
+    try {
+      await insertContentToView(viewId, data);
+      toast({
+        variant: 'success',
+        description: t('success.addMessageToPage', {
+          name: chat?.name || t('view.placeholder'),
+        }),
+      });
+      onFinished?.();
+      // eslint-disable-next-line
+    } catch(e: any) {
+      toast({
+        variant: 'destructive',
+        description: e.message,
+      });
+    }
+  }, [getData, getView, chatId, insertContentToView, t, onFinished]);
+
+  if(openingViewId) {
+    return <div
+      onClick={async() => {
+        await handleInsertContentToView(openingViewId);
+      }}
+    >{children}</div>;
+  }
+
+  return (
+    <Popover modal>
+      <PopoverTrigger
+        asChild
+      >
+        {children}
+      </PopoverTrigger>
+      <PopoverContent
+        onOpenAutoFocus={e => e.preventDefault()}
+        onCloseAutoFocus={e => e.preventDefault()}
+      >
+        <div className={'h-fit py-1 px-1 min-h-[200px] max-h-[360px] w-[300px] flex gap-2 flex-col'}>
+          <Label className={'font-normal opacity-60'}>{t('addMessageToPage.placeholder')}</Label>
+
+          <SearchInput
+            value={searchValue}
+            onChange={setSearchValue}
+          />
+          <Separator />
+          <div className={'overflow-x-hidden overflow-y-auto flex-1  appflowy-scrollbar'}>
+            <SpaceList
+              onCreateViewWithContent={handleCreateViewWithContent}
+              onInsertContentToView={handleInsertContentToView}
+              searchValue={searchValue}
+            />
+          </div>
+
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
diff --git a/src/components/chat/components/add-messages-to-page-wrapper/space-list.tsx b/src/components/chat/components/add-messages-to-page-wrapper/space-list.tsx
new file mode 100644
index 00000000..406bdf0d
--- /dev/null
+++ b/src/components/chat/components/add-messages-to-page-wrapper/space-list.tsx
@@ -0,0 +1,96 @@
+import ViewList from '../add-messages-to-page-wrapper/view-list';
+import { Button } from '../../../ui/button';
+import LoadingDots from '../ui/loading-dots';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../ui/tooltip';
+import SpaceItem from '../view/space-item';
+import { useTranslation } from '../../i18n';
+import { searchViews } from '../../lib/views';
+import { View } from '../../types';
+import { useEffect, useMemo, useState } from 'react';
+import { PlusIcon } from 'lucide-react';
+import { useViewLoader } from '../../provider/view-loader-provider';
+
+export function SpaceList({
+  searchValue,
+  onCreateViewWithContent,
+  onInsertContentToView,
+}: {
+  searchValue: string;
+  onCreateViewWithContent: (parentViewId: string) => void;
+  onInsertContentToView: (viewId: string) => void;
+}) {
+  const { t } = useTranslation();
+
+  const {
+    fetchViews,
+    viewsLoading,
+  } = useViewLoader();
+
+  const [folder, setFolder] = useState<View | null>(null);
+
+  useEffect(() => {
+    void (async() => {
+      const data = await fetchViews();
+      if(!data) return;
+      setFolder(data);
+    })();
+  }, [fetchViews]);
+
+  const filteredSpaces = useMemo(() => {
+    const spaces = folder?.children.filter(view => view.extra?.is_space);
+    return searchViews(spaces || [], searchValue);
+  }, [folder, searchValue]);
+
+  if(viewsLoading) {
+    return <div className={'flex w-full h-full  py-10 items-center justify-center'}>
+      <LoadingDots />
+    </div>;
+  }
+
+  if(!filteredSpaces || filteredSpaces.length === 0) {
+    return <div className={'flex w-full opacity-60 h-full py-10 items-center justify-center'}>
+      {t('search.noSpacesFound')}
+    </div>;
+  }
+
+  return (
+    <div className={'flex flex-col gap-1 w-full h-full'}>
+      {filteredSpaces.map((view: View) => {
+        return (
+          <SpaceItem
+            key={view.view_id}
+            view={view}
+            extraNode={<TooltipProvider><Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={e => {
+                    e.stopPropagation();
+                    onCreateViewWithContent(view.view_id);
+                  }}
+                  variant={'ghost'}
+                  className={'!w-5 !h-5 !p-0 rounded-md hover:bg-muted-foreground/10'}
+                >
+                  <PlusIcon
+                    className={'w-4 h-4'}
+                  />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t('addMessageToPage.createNewPage')}
+              </TooltipContent>
+            </Tooltip>
+            </TooltipProvider>
+            }
+          >
+            <ViewList
+              onCreateViewWithContent={onCreateViewWithContent}
+              onInsertContentToView={onInsertContentToView}
+              item={view}
+            />
+          </SpaceItem>
+        );
+      })}
+    </div>
+  );
+}
+
diff --git a/src/components/chat/components/add-messages-to-page-wrapper/view-item.tsx b/src/components/chat/components/add-messages-to-page-wrapper/view-item.tsx
new file mode 100644
index 00000000..e58c95cc
--- /dev/null
+++ b/src/components/chat/components/add-messages-to-page-wrapper/view-item.tsx
@@ -0,0 +1,119 @@
+import { ReactComponent as ChevronDown } from '../../assets/icons/drop_menu_show.svg';
+import { Button } from '../../../ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../ui/tooltip';
+import PageIcon from '../view/page-icon';
+import { useTranslation } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { View } from '../../types';
+import { PlusIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { ReactComponent as AddPageIcon } from '../../assets/icons/doc-forward.svg';
+
+export function ViewItem({ view, children, onCreateViewWithContent, onInsertContentToView }: {
+  view: View;
+  children?: React.ReactNode;
+  onCreateViewWithContent: (parentViewId: string) => void;
+  onInsertContentToView: (viewId: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const { t } = useTranslation();
+
+  const [isHovering, setIsHovering] = useState(false);
+  const name = view.name || t('view.placeholder');
+
+  const ToggleButton = useMemo(() => {
+    return view.children.length > 0 ? (
+      <Button
+        variant={'ghost'}
+        size={'icon'}
+        className={'!w-4 !h-4 !min-w-4 !min-h-4 hover:bg-muted-foreground/10'}
+      >
+        <ChevronDown
+          className={cn(
+            'transform transition-transform',
+            expanded ? 'rotate-0' : '-rotate-90',
+          )}
+        />
+      </Button>
+    ) : (
+      <div style={{ width: 16, height: 16 }}></div>
+    );
+  }, [expanded, view.children.length]);
+
+  return (
+    <div className={'flex flex-col'}>
+      <div
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+        onClick={() => setExpanded(!expanded)}
+        className={'px-1.5 h-[28px] w-full select-none text-sm cursor-pointer rounded-[8px] flex items-center justify-between gap-2 hover:bg-muted'}
+      >
+        <div className={'flex items-center gap-2 w-full overflow-hidden'}>
+          <div className={'flex items-center gap-0.5'}>
+            {ToggleButton}
+            <PageIcon view={view} />
+          </div>
+          <TooltipProvider>
+            <Tooltip disableHoverableContent={true}>
+              <TooltipTrigger asChild>
+                <span className={'flex-1 truncate'}>{name}</span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {name}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+        {isHovering && (
+          <div
+            onClick={e => {
+              e.stopPropagation();
+            }}
+            className={'flex items-center gap-1'}
+          >
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    onClick={() => onInsertContentToView(view.view_id)}
+                    variant={'ghost'}
+                    className={'!w-5 !h-5 !p-0 rounded-md hover:bg-muted-foreground/10'}
+                  >
+                    <AddPageIcon
+                      className={'w-4 h-4'}
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t('button.addToPage')}
+                </TooltipContent>
+              </Tooltip>
+
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    onClick={() => {
+                      onCreateViewWithContent(view.view_id);
+                    }}
+                    variant={'ghost'}
+                    className={'!w-5 !h-5 !p-0 rounded-md hover:bg-muted-foreground/10'}
+                  >
+                    <PlusIcon
+                      className={'w-4 h-4'}
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t('addMessageToPage.createNewPage')}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        )}
+      </div>
+      {expanded && children}
+    </div>
+  );
+}
+
diff --git a/src/components/chat/components/add-messages-to-page-wrapper/view-list.tsx b/src/components/chat/components/add-messages-to-page-wrapper/view-list.tsx
new file mode 100644
index 00000000..f149a151
--- /dev/null
+++ b/src/components/chat/components/add-messages-to-page-wrapper/view-list.tsx
@@ -0,0 +1,39 @@
+import { ViewItem } from '../add-messages-to-page-wrapper/view-item';
+import { View } from '../../types';
+
+function ViewList({
+  item,
+  onCreateViewWithContent,
+  onInsertContentToView,
+}: {
+  item: View;
+  onCreateViewWithContent: (parentViewId: string) => void;
+  onInsertContentToView: (viewId: string) => void;
+}) {
+  if(!item.children || item.children.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={'flex pl-4 flex-col gap-1'}>
+      {item.children.map((view: View) => {
+        return (
+          <ViewItem
+            key={view.view_id}
+            view={view}
+            onCreateViewWithContent={onCreateViewWithContent}
+            onInsertContentToView={onInsertContentToView}
+          >
+            <ViewList
+              onCreateViewWithContent={onCreateViewWithContent}
+              onInsertContentToView={onInsertContentToView}
+              item={view}
+            />
+          </ViewItem>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ViewList;
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/ai-writer-menu-content.tsx b/src/components/chat/components/ai-writer/ai-writer-menu-content.tsx
new file mode 100644
index 00000000..eaca676e
--- /dev/null
+++ b/src/components/chat/components/ai-writer/ai-writer-menu-content.tsx
@@ -0,0 +1,114 @@
+import { Button } from '../../../ui/button';
+import { Separator } from '../../../ui/separator';
+import { useTranslation } from '../../i18n';
+import { ReactComponent as ImproveWritingIcon } from '../../assets/icons/improve-writing.svg';
+import { ReactComponent as AskAIIcon } from '../../assets/icons/ai.svg';
+import { ReactComponent as FixSpellingIcon } from '../../assets/icons/fix-spelling.svg';
+import { ReactComponent as ExplainIcon } from '../../assets/icons/explain.svg';
+import { ReactComponent as MakeLongerIcon } from '../../assets/icons/make-longer.svg';
+import { ReactComponent as MakeShorterIcon } from '../../assets/icons/make-shorter.svg';
+import { ReactComponent as ContinueWritingIcon } from '../../assets/icons/continue-writing.svg';
+import { AIAssistantType } from '../../types';
+import { useWriterContext } from '../../writer/context';
+import { useMemo } from 'react';
+
+export function AiWriterMenuContent({ input, onClicked, isFilterOut }: {
+  onClicked: (type: AIAssistantType) => void;
+  isFilterOut?: (type: AIAssistantType) => boolean;
+  input: string;
+}) {
+  const { t } = useTranslation();
+  const {
+    improveWriting,
+    askAIAnything,
+    fixSpelling,
+    explain,
+    makeLonger,
+    makeShorter,
+    continueWriting,
+  } = useWriterContext();
+
+  const actions = useMemo(() => [{
+    icon: ContinueWritingIcon,
+    label: t('writer.continue'),
+    key: AIAssistantType.ContinueWriting,
+    onClick: () => continueWriting(input),
+  }, {
+    icon: ImproveWritingIcon,
+    label: t('writer.improve'),
+    key: AIAssistantType.ImproveWriting,
+    onClick: () => improveWriting(input),
+  },
+    {
+      key: AIAssistantType.AskAIAnything,
+      icon: AskAIIcon,
+      label: t('writer.askAI'),
+      onClick: () => askAIAnything(input),
+    },
+    {
+      key: AIAssistantType.FixSpelling,
+      icon: FixSpellingIcon,
+      label: t('writer.fixSpelling'),
+      onClick: () => fixSpelling(input),
+    },
+    {
+      key: AIAssistantType.Explain,
+      icon: ExplainIcon,
+      label: t('writer.explain'),
+      onClick: () => explain(input),
+    },
+  ].filter(item => {
+    return !isFilterOut || !isFilterOut(item.key);
+  }), [askAIAnything, continueWriting, explain, fixSpelling, improveWriting, input, isFilterOut, t]);
+
+  const otherActions = useMemo(() => [{
+    icon: MakeLongerIcon,
+    label: t('writer.makeLonger'),
+    onClick: () => makeLonger(input),
+    key: AIAssistantType.MakeLonger,
+  },
+    {
+      icon: MakeShorterIcon,
+      label: t('writer.makeShorter'),
+      onClick: () => makeShorter(input),
+      key: AIAssistantType.MakeShorter,
+    }].filter(item => {
+    return !isFilterOut || !isFilterOut(item.key);
+  }), [t, makeLonger, input, makeShorter, isFilterOut]);
+
+  return <div className="flex flex-col gap-1">
+    {actions.map((action, index) => (
+      <Button
+        key={index}
+        onClick={() => {
+          action.onClick();
+          onClicked(action.key);
+        }}
+        className={'w-full !p-1.5 justify-start !gap-[10px] !text-foreground !font-normal'}
+        variant={'ghost'}
+        onMouseDown={e => e.preventDefault()}
+        startIcon={<action.icon className={'!w-5 !h-5'} />}
+      >{action.label}
+      </Button>
+    ))}
+    {otherActions.length > 0 && <Separator />}
+
+    {
+      otherActions.map((action, index) => (
+        <Button
+          onClick={() => {
+            void action.onClick();
+            onClicked(action.key);
+          }}
+          key={index}
+          className={'w-full !p-1.5 !gap-[10px] justify-start !text-foreground !font-normal'}
+          variant={'ghost'}
+          startIcon={<action.icon className={'!w-5 !h-5'} />}
+          onMouseDown={e => e.preventDefault()}
+
+        >{action.label}
+        </Button>
+      ))
+    }
+  </div>;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/confirm-discard.tsx b/src/components/chat/components/ai-writer/confirm-discard.tsx
new file mode 100644
index 00000000..11bac97c
--- /dev/null
+++ b/src/components/chat/components/ai-writer/confirm-discard.tsx
@@ -0,0 +1,51 @@
+import { Button } from '../../../ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription, DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../../ui/dialog';
+import { useTranslation } from '../../i18n';
+import { useWriterContext } from '../../writer/context';
+import React from 'react';
+
+export const ConfirmDiscard = React.forwardRef<HTMLDivElement, {
+  open: boolean;
+  onClose: () => void;
+}>(({ open, onClose }, ref) => {
+  const { t } = useTranslation();
+  const { exit } = useWriterContext();
+
+  return <Dialog
+    open={open}
+    onOpenChange={(open) => !open && onClose()}
+  >
+    <DialogContent
+      ref={ref}
+      onOpenAutoFocus={e => e.preventDefault()}
+      onCloseAutoFocus={e => e.preventDefault()}
+    >
+      <DialogHeader className={'!text-left'}>
+        <DialogTitle>{t('writer.discard')}</DialogTitle>
+        <DialogDescription>
+          {t('writer.confirm-discard')}
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <Button
+          variant={'outline'}
+          onClick={onClose}
+        >{t('writer.button.cancel')}</Button>
+        <Button
+          onClick={() => {
+            exit();
+            onClose();
+          }}
+          variant={'destructive'}
+          type="submit"
+        >{t('writer.button.discard')}</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>;
+});
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/error.tsx b/src/components/chat/components/ai-writer/error.tsx
new file mode 100644
index 00000000..76b5aa5b
--- /dev/null
+++ b/src/components/chat/components/ai-writer/error.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from '../../i18n';
+import { ERROR_CODE_NO_LIMIT } from '../../lib/const';
+import { useWriterContext } from '../../writer/context';
+import { ReactComponent as XCircleIcon } from '../../assets/icons/error.svg';
+
+export function Error() {
+  const { t } = useTranslation();
+
+  const { error, rewrite } = useWriterContext();
+
+  return (
+    <div className={'writer-anchor flex bg-background w-full justify-between p-2 rounded-lg max-w-full border border-input shadow-toast items-center gap-2'}>
+      <div className={'flex text-foreground/70 text-sm items-center gap-2 p-2'}>
+        <XCircleIcon className={'text-destructive min-w-4 w-4 h-4'} />
+        {error?.code === undefined ? <span>
+          {t('writer.errors.connection')}
+          <span
+            className={'hover:underline mx-1 text-primary cursor-pointer'}
+            onClick={() => {
+              rewrite();
+            }}
+          >{t('writer.button.retry')}</span>
+        </span> : error?.code === ERROR_CODE_NO_LIMIT ? t('writer.errors.noLimit') : error?.message}
+      </div>
+
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/index.tsx b/src/components/chat/components/ai-writer/index.tsx
new file mode 100644
index 00000000..678f878e
--- /dev/null
+++ b/src/components/chat/components/ai-writer/index.tsx
@@ -0,0 +1,159 @@
+import { usePromptModal } from '../../provider/prompt-modal-provider';
+import { ConfirmDiscard } from '../ai-writer/confirm-discard';
+import { Error } from '../ai-writer/error';
+import { Loading } from '../ai-writer/loading';
+import { AskAnything } from '../ai-writer/tools/ask-anything';
+import { Explain } from '../ai-writer/tools/explain';
+import { FixSpelling } from '../ai-writer/tools/fix-spelling';
+import { ImproveWriting } from '../ai-writer/tools/improve-writing';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/popover';
+import { useTranslation } from '../../i18n';
+import { AIAssistantType } from '../../types';
+import { useWriterContext } from '../../writer/context';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+type PointerDownOutsideEvent = CustomEvent<{
+  originalEvent: PointerEvent;
+}>;
+type FocusOutsideEvent = CustomEvent<{
+  originalEvent: FocusEvent;
+}>;
+
+export function AIAssistant({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
+  const { t } = useTranslation();
+  const {
+    assistantType,
+    isFetching,
+    exit,
+    isApplying,
+    error,
+    scrollContainer,
+    hasAIAnswer,
+  } = useWriterContext();
+  const open = Boolean(assistantType);
+  const [openModal, setOpenModal] = useState(false);
+  
+  const {
+    isOpen
+  } = usePromptModal();
+
+  const Tool = useMemo(() => {
+    if(error) return <Error />;
+    if(isApplying || isFetching) return <Loading />;
+    switch(assistantType) {
+      case AIAssistantType.AskAIAnything:
+        return <AskAnything title={t('writer.askAI')} />;
+      case AIAssistantType.ContinueWriting:
+        return <AskAnything title={t('writer.continue')} />;
+
+      case AIAssistantType.Explain:
+        return <Explain />;
+
+      case AIAssistantType.FixSpelling:
+        return <FixSpelling />;
+
+      case AIAssistantType.ImproveWriting:
+        return <ImproveWriting title={t('writer.improve')} />;
+      case AIAssistantType.MakeLonger:
+        return <ImproveWriting title={t('writer.makeLonger')} />;
+      case AIAssistantType.MakeShorter:
+        return <ImproveWriting title={t('writer.makeShorter')} />;
+      default:
+        return null;
+    }
+  }, [error, isApplying, isFetching, assistantType, t]);
+
+  const handleOpenChange = useCallback((status: boolean) => {
+    if(!status) {
+      exit();
+    }
+  }, [exit]);
+
+  const [width, setWidth] = useState<number>(600);
+
+  useEffect(() => {
+    const container = document.getElementById('appflowy-ai-writer');
+
+    if(container && open) {
+      setWidth(container.clientWidth);
+    }
+    if(scrollContainer) {
+      if(open) {
+        scrollContainer.style.userSelect = 'none';
+      } else {
+        scrollContainer.style.userSelect = 'auto';
+      }
+    }
+
+  }, [open, scrollContainer]);
+
+  const onInteractOutside = useCallback((e: PointerDownOutsideEvent | FocusOutsideEvent) => {
+    if(hasAIAnswer()) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.detail.originalEvent.preventDefault();
+      setOpenModal(true);
+    }
+  }, [hasAIAnswer]);
+
+  return <>
+    <Popover
+      onOpenChange={handleOpenChange}
+      open={open}
+    >
+      <PopoverTrigger>{children}</PopoverTrigger>
+      {open && <PopoverContent
+        onMouseDown={e => {
+          e.stopPropagation();
+        }}
+        onEscapeKeyDown={e => {
+          if (isOpen) {
+            e.preventDefault();
+            return;
+          }
+          if (openModal) {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpenModal(false);
+            return;
+          }
+          if(hasAIAnswer()) {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpenModal(true);
+          }
+        }}
+        disableOutsidePointerEvents
+        onInteractOutside={onInteractOutside}
+        container={scrollContainer || document.body}
+        forceMount
+        id={'ai-assistant'}
+        className={'relative !bg-transparent max-w-full'}
+        side={'bottom'}
+        avoidCollisions={false}
+        collisionPadding={0}
+        align={'start'}
+        style={{
+          width,
+          borderWidth: 0,
+          boxShadow: 'none',
+          padding: 0,
+          userSelect: 'none',
+        }}
+      >{Tool}
+        <ConfirmDiscard
+          open={openModal}
+          onClose={() => {
+            setOpenModal(false);
+          }}
+        />
+      </PopoverContent>}
+
+    </Popover>
+
+  </>;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/loading.tsx b/src/components/chat/components/ai-writer/loading.tsx
new file mode 100644
index 00000000..43f557e9
--- /dev/null
+++ b/src/components/chat/components/ai-writer/loading.tsx
@@ -0,0 +1,43 @@
+import { Button } from '../../../ui/button';
+import LoadingDots from '../ui/loading-dots';
+import { useTranslation } from '../../i18n';
+import { useWriterContext } from '../../writer/context';
+import { ReactComponent as StopIcon } from '../../assets/icons/stop.svg';
+
+export function Loading() {
+  const { t } = useTranslation();
+  const {
+    isApplying,
+    isFetching,
+    stop,
+  } = useWriterContext();
+
+  return (
+    <div className={'writer-anchor flex bg-background w-full justify-between p-2 rounded-lg max-w-full border border-input shadow-toast items-center gap-2'}>
+      <div className={'flex text-foreground/70 text-xs items-center gap-2 px-2'}>
+        {
+          isFetching ? t('writer.analyzing') : isApplying ? t('writer.editing') : null
+        }
+        <LoadingDots size={20} />
+      </div>
+
+      <Button
+        onMouseDown={e => {
+          e.preventDefault();
+        }}
+        tabIndex={-1}
+        onClick={stop}
+        size={'icon'}
+        variant={'link'}
+        className={'w-7 h-7 text-fill-theme-thick !p-0.5'}
+      >
+        <StopIcon
+          style={{
+            width: 24,
+            height: 24,
+          }}
+        />
+      </Button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/render-editor.tsx b/src/components/chat/components/ai-writer/render-editor.tsx
new file mode 100644
index 00000000..3c85b12e
--- /dev/null
+++ b/src/components/chat/components/ai-writer/render-editor.tsx
@@ -0,0 +1,37 @@
+import { Alert, AlertDescription } from '../ui/alert';
+
+import { Editor, EditorData, useEditor } from '@appflowyinc/editor';
+
+import { useEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+export function RenderEditor({
+  content,
+  onDataChange,
+}: {
+  content: string;
+  onDataChange?: (data: EditorData) => void;
+}) {
+
+  const editor = useEditor();
+
+  useEffect(() => {
+    editor.applyMarkdown(content);
+    onDataChange?.(editor.getData());
+  }, [content, editor, onDataChange]);
+
+  return (
+    <div className={`relative select-text text-left w-full h-full`}>
+      <ErrorBoundary
+        fallback={<Alert variant={'destructive'}>
+          <AlertDescription>
+            Failed to render content
+          </AlertDescription>
+        </Alert>}
+      >
+        {content && <Editor readOnly />}
+
+      </ErrorBoundary>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/tools/ask-anything.tsx b/src/components/chat/components/ai-writer/tools/ask-anything.tsx
new file mode 100644
index 00000000..0804b79b
--- /dev/null
+++ b/src/components/chat/components/ai-writer/tools/ask-anything.tsx
@@ -0,0 +1,45 @@
+import { ReactComponent as TryAgainIcon } from '../../../assets/icons/undo.svg';
+import { CommentWithAskAnything } from './with-comment';
+import { useTranslation } from '../../../i18n';
+import { useWriterContext } from '../../../writer/context';
+import { CheckIcon, XIcon } from 'lucide-react';
+import { useMemo } from 'react';
+
+export function AskAnything({
+  title,
+}: {
+  title: string
+}) {
+  const { t } = useTranslation();
+  const {
+    rewrite,
+    keep,
+    exit,
+  } = useWriterContext();
+
+  const actions = useMemo(() => [
+    {
+      label: t('writer.button.keep'),
+      onClick: keep,
+      icon: <CheckIcon className={'text-success'} />,
+    },
+    {
+      label: t('writer.button.discard'),
+      onClick: () => {
+        exit();
+      },
+      icon: <XIcon className={'text-destructive'} />,
+    },
+    {
+      label: t('writer.button.rewrite'),
+      onClick: rewrite,
+      icon: <TryAgainIcon />,
+    },
+  ], [exit, keep, rewrite, t]);
+
+  return <CommentWithAskAnything
+    noSwitchMode={false}
+    title={title}
+    actions={actions}
+  />;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/tools/explain-toolbar.tsx b/src/components/chat/components/ai-writer/tools/explain-toolbar.tsx
new file mode 100644
index 00000000..d6520380
--- /dev/null
+++ b/src/components/chat/components/ai-writer/tools/explain-toolbar.tsx
@@ -0,0 +1,56 @@
+import { RenderEditor } from '../render-editor';
+import { Button } from '../../ui/button';
+import { Label } from '../../ui/label';
+import { useTranslation } from '../../../i18n';
+import { useWriterContext } from '../../../writer/context';
+import { EditorProvider } from '@appflowyinc/editor';
+import { XIcon } from 'lucide-react';
+import { ReactComponent as InsertBelowIcon } from '../../../assets/icons/insert-below.svg';
+import { ReactComponent as TryAgainIcon } from '../../../assets/icons/undo.svg';
+
+export function ExplainToolbar() {
+  const { t } = useTranslation();
+  const {
+    rewrite,
+    keep: insertBelow,
+    exit,
+    placeholderContent,
+    setEditorData,
+  } = useWriterContext();
+
+  return <div
+    className={'flex h-fit gap-2 p-2 py-3 min-h-[48px] flex-col bg-secondary-background border-b border-input overflow-hidden w-full max-w-full'}
+  >
+    <Label className={'font-semibold select-text px-[6px] text-xs text-foreground/60'}>{t('writer.explain')}</Label>
+    <div className={'text-sm leading-[20px] select-none px-[4px] max-h-[238px] appflowy-scrollbar overflow-y-auto w-full font-medium'}>
+      <EditorProvider>
+        <RenderEditor
+          content={placeholderContent || ''}
+          onDataChange={setEditorData}
+        />
+      </EditorProvider>
+    </div>
+    <div className={'flex text-sm items-center w-fit gap-1'}>
+      <Button
+        onClick={insertBelow}
+        startIcon={<InsertBelowIcon />}
+        variant={'ghost'}
+        className={'!text-sm !h-[28px] text-foreground'}
+      >{t('writer.button.insert-below')}</Button>
+      <Button
+        onClick={() => rewrite()}
+        startIcon={<TryAgainIcon />}
+        variant={'ghost'}
+        className={'!text-sm !h-[28px] text-foreground'}
+      >{t('writer.button.try-again')}</Button>
+      <Button
+        onClick={() => {
+          exit();
+        }}
+        startIcon={<XIcon className={'text-destructive'} />}
+        variant={'ghost'}
+        className={'!text-sm !h-[28px] text-foreground'}
+      >{t('writer.button.close')}</Button>
+    </div>
+  </div>;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/tools/explain.tsx b/src/components/chat/components/ai-writer/tools/explain.tsx
new file mode 100644
index 00000000..1ca45ebd
--- /dev/null
+++ b/src/components/chat/components/ai-writer/tools/explain.tsx
@@ -0,0 +1,24 @@
+import { ExplainToolbar } from './explain-toolbar';
+import { WritingInput } from '../writing-input';
+import { ApplyingState, useWriterContext } from '../../../writer/context';
+import { useCallback } from 'react';
+
+export function Explain() {
+  const { askAIAnythingWithRequest, applyingState } = useWriterContext();
+
+  const showToolbar = applyingState === ApplyingState.completed;
+
+  const handleSubmit = useCallback(async(content: string) => {
+    return askAIAnythingWithRequest(content);
+  }, [askAIAnythingWithRequest]);
+
+  return <div className={'writer-anchor pb-[150px] flex flex-col'}>
+    <div className={'flex bg-secondary-background shadow-menu ring-[1.5px] ring-input overflow-hidden rounded-[12px] flex-col'}>
+      {showToolbar && <ExplainToolbar />}
+      <WritingInput
+        onSubmit={handleSubmit}
+        noBorder={true}
+      />
+    </div>
+  </div>;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/tools/fix-spelling.tsx b/src/components/chat/components/ai-writer/tools/fix-spelling.tsx
new file mode 100644
index 00000000..d3673bc5
--- /dev/null
+++ b/src/components/chat/components/ai-writer/tools/fix-spelling.tsx
@@ -0,0 +1,64 @@
+import { CommentWithAskAnything } from './with-comment';
+
+import { useTranslation } from '../../../i18n';
+import { useWriterContext } from '../../../writer/context';
+import { useMemo } from 'react';
+import { CheckIcon, XIcon } from 'lucide-react';
+import { ReactComponent as TryAgainIcon } from '../../../assets/icons/undo.svg';
+import { ReactComponent as InsertBelowIcon } from '../../../assets/icons/insert-below.svg';
+
+export function FixSpelling() {
+  const { t } = useTranslation();
+  const {
+    rewrite,
+    accept,
+    keep: insertBelow,
+    exit,
+    placeholderContent,
+  } = useWriterContext();
+
+  const actions = useMemo(() => placeholderContent ? [
+    {
+      label: t('writer.button.accept'),
+      onClick: accept,
+      icon: <CheckIcon className={'text-success'} />,
+    },
+    {
+      label: t('writer.button.discard'),
+      onClick: () => {
+        exit();
+      },
+      icon: <XIcon className={'text-destructive'} />,
+    },
+    {
+      label: t('writer.button.insert-below'),
+      onClick: insertBelow,
+      icon: <InsertBelowIcon />,
+    },
+    {
+      label: t('writer.button.try-again'),
+      onClick: rewrite,
+      icon: <TryAgainIcon />,
+    },
+  ] : [
+    {
+      label: t('writer.button.try-again'),
+      onClick: rewrite,
+      icon: <TryAgainIcon />,
+    },
+    {
+      label: t('writer.button.close'),
+      onClick: () => {
+        exit();
+      },
+      icon: <XIcon className={'text-destructive'} />,
+    },
+  ], [accept, exit, insertBelow, placeholderContent, rewrite, t]);
+
+  return <CommentWithAskAnything
+    title={t('writer.fixSpelling')}
+    actions={actions}
+    noSwitchMode={true}
+
+  />;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/tools/improve-writing.tsx b/src/components/chat/components/ai-writer/tools/improve-writing.tsx
new file mode 100644
index 00000000..06d8afad
--- /dev/null
+++ b/src/components/chat/components/ai-writer/tools/improve-writing.tsx
@@ -0,0 +1,67 @@
+import { CommentWithAskAnything } from './with-comment';
+
+import { useTranslation } from '../../../i18n';
+import { useWriterContext } from '../../../writer/context';
+import { useMemo } from 'react';
+import { CheckIcon, XIcon } from 'lucide-react';
+import { ReactComponent as TryAgainIcon } from '../../../assets/icons/undo.svg';
+import { ReactComponent as InsertBelowIcon } from '../../../assets/icons/insert-below.svg';
+
+export function ImproveWriting({
+  title,
+}: {
+  title: string
+}) {
+  const {
+    rewrite,
+    accept,
+    keep: insertBelow,
+    exit,
+    placeholderContent,
+  } = useWriterContext();
+  const { t } = useTranslation();
+
+  const actions = useMemo(() => placeholderContent ? [
+    {
+      label: t('writer.button.accept'),
+      onClick: accept,
+      icon: <CheckIcon className={'text-success'} />,
+    },
+    {
+      label: t('writer.button.discard'),
+      onClick: () => {
+        exit();
+      },
+      icon: <XIcon className={'text-destructive'} />,
+    },
+    {
+      label: t('writer.button.insert-below'),
+      onClick: insertBelow,
+      icon: <InsertBelowIcon />,
+    },
+    {
+      label: t('writer.button.rewrite'),
+      onClick: rewrite,
+      icon: <TryAgainIcon />,
+    },
+  ] : [
+    {
+      label: t('writer.button.try-again'),
+      onClick: rewrite,
+      icon: <TryAgainIcon />,
+    },
+    {
+      label: t('writer.button.close'),
+      onClick: () => {
+        exit();
+      },
+      icon: <XIcon className={'text-destructive'} />,
+    },
+  ], [accept, exit, insertBelow, placeholderContent, rewrite, t]);
+
+  return <CommentWithAskAnything
+    title={title}
+    actions={actions}
+    noSwitchMode={true}
+  />;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/tools/with-comment.tsx b/src/components/chat/components/ai-writer/tools/with-comment.tsx
new file mode 100644
index 00000000..8488dbce
--- /dev/null
+++ b/src/components/chat/components/ai-writer/tools/with-comment.tsx
@@ -0,0 +1,98 @@
+import { RenderEditor } from '../render-editor';
+import { WritingInput } from '../writing-input';
+import { Button } from '../../ui/button';
+import { Label } from '../../ui/label';
+import { ApplyingState, useWriterContext } from '../../../writer/context';
+import { EditorProvider } from '@appflowyinc/editor';
+import { ReactNode, useCallback, useMemo } from 'react';
+
+export function withComment(WrappedComponent: React.ComponentType<{
+  noBorder?: boolean;
+  onSubmit: (content: string) => Promise<() => void>;
+  noSwitchMode: boolean;
+}>) {
+  return ({
+    actions,
+    title,
+    noSwitchMode,
+  }: {
+    noSwitchMode: boolean,
+    actions: {
+      onClick: () => void;
+      icon: ReactNode;
+      label: string;
+    }[];
+    title: string;
+  }) => {
+
+    const {
+      comment,
+      applyingState,
+      askAIAnythingWithRequest,
+    } = useWriterContext();
+
+    const handleSubmit = useCallback(async(content: string) => {
+      return askAIAnythingWithRequest(content);
+    }, [askAIAnythingWithRequest]);
+
+    const showToolbar = applyingState === ApplyingState.completed;
+
+    const renderToolbar = useMemo(() => {
+      return actions.map(({
+        onClick,
+        icon,
+        label,
+      }) => (
+        <Button
+          key={label}
+          onClick={onClick}
+          startIcon={icon}
+          variant={'ghost'}
+          className={'text-sm !h-[28px] !text-foreground'}
+        >{label}</Button>
+      ));
+    }, [actions]);
+
+    if(!comment) {
+      return <div className={'flex flex-col gap-1'}>
+        {showToolbar &&
+          <div className={'flex rounded-lg py-1 px-1 items-center w-fit gap-1 bg-background text-foreground border border-input shadow-menu'}>
+            {renderToolbar}
+          </div>}
+        <WrappedComponent
+          onSubmit={handleSubmit}
+          noSwitchMode={noSwitchMode}
+        />
+      </div>;
+    }
+
+    return <div className={'writer-anchor pb-[150px] gap-1 flex flex-col'}>
+      {showToolbar &&
+        <div className={'flex rounded-lg py-1 px-1 items-center w-fit gap-1 bg-background text-foreground border border-input shadow-menu'}>
+          {renderToolbar}
+        </div>}
+      <div className={'flex shadow-menu ring-[1.5px] ring-input overflow-hidden rounded-[12px] flex-col'}>
+        <div
+          className={'flex h-fit select-none gap-2 p-2 py-3 min-h-[48px] border-b border-input flex-col bg-secondary-background overflow-hidden w-full max-w-full'}
+        >
+          <Label className={'select-text font-semibold px-[6px] text-xs text-foreground/60'}>{title}</Label>
+          <div className={'text-sm leading-[20px] px-[4px] max-h-[238px] appflowy-scrollbar overflow-y-auto w-full font-medium'}>
+            <EditorProvider>
+              <RenderEditor
+                content={comment || ''}
+              />
+            </EditorProvider>
+          </div>
+        </div>
+        <WrappedComponent
+          noBorder
+          onSubmit={handleSubmit}
+          noSwitchMode={noSwitchMode}
+        />
+
+      </div>
+    </div>;
+  };
+}
+
+export const CommentWithAskAnything = withComment(WritingInput);
diff --git a/src/components/chat/components/ai-writer/use-ensure-bottom-visible.ts b/src/components/chat/components/ai-writer/use-ensure-bottom-visible.ts
new file mode 100644
index 00000000..6f53a642
--- /dev/null
+++ b/src/components/chat/components/ai-writer/use-ensure-bottom-visible.ts
@@ -0,0 +1,128 @@
+import { ApplyingState, useWriterContext } from '../../writer/context';
+import throttle from 'lodash-es/throttle';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+const SCROLL_CONFIG = {
+  // Offset to ensure the bottom is visible
+  OFFSET: 150,
+  // Delay to throttle the scroll event
+  DELAY: 50,
+  // Delay to prevent auto scroll when user is scrolling
+  PREVENT_SCROLL_DELAY: 150,
+};
+
+function useEnsureBottomVisible() {
+  const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
+  const isUserScrollingRef = useRef(false);
+  const {
+    placeholderContent,
+    scrollContainer,
+    hasAIAnswer,
+    applyingState,
+  } = useWriterContext();
+
+  const enableAutoScroll = useCallback(() => {
+    isUserScrollingRef.current = false;
+    setIsAutoScrollEnabled(true);
+  }, []);
+
+  const applyingStateRef = useRef(applyingState);
+
+  useEffect(() => {
+    applyingStateRef.current = applyingState;
+    if(applyingState === ApplyingState.idle) {
+      enableAutoScroll();
+    }
+  }, [applyingState, enableAutoScroll]);
+
+  const getTarget = useCallback(() => {
+    return document.querySelector('.writer-anchor');
+  }, []);
+
+  const scrollToBottom = useCallback((container: HTMLElement) => {
+    const containerRect = container.getBoundingClientRect();
+    const rect = document.querySelector('.writer-anchor')?.getBoundingClientRect();
+    if(!rect) return;
+
+    const offset = rect.bottom - containerRect.bottom;
+
+    if(offset < 0) return;
+
+    container.scrollTo({
+      top: container.scrollTop + offset + SCROLL_CONFIG.OFFSET,
+      behavior: 'smooth',
+    });
+  }, []);
+
+  const scrollIntoView = useMemo(() => {
+    return throttle(() => {
+      const target = getTarget();
+      if(!scrollContainer || !target || isUserScrollingRef.current) return;
+
+      scrollToBottom(scrollContainer);
+
+    }, SCROLL_CONFIG.DELAY);
+  }, [getTarget, scrollContainer, scrollToBottom]);
+
+  const handleScroll = useCallback((event: WheelEvent) => {
+    const target = getTarget();
+
+    if(!isAutoScrollEnabled || !target) return;
+
+    if([ApplyingState.analyzing, ApplyingState.applying].includes(applyingStateRef.current)) {
+      isUserScrollingRef.current = true;
+      if(event.deltaY < -50) {
+        console.error('User is scrolling, disabling auto scroll', event.deltaY);
+        setIsAutoScrollEnabled(false);
+      } else {
+        isUserScrollingRef.current = false;
+      }
+    }
+
+  }, [getTarget, isAutoScrollEnabled]);
+
+  useEffect(() => {
+    if(!isAutoScrollEnabled) return;
+
+    scrollContainer?.addEventListener('wheel', handleScroll, { passive: true });
+
+    window.addEventListener('wheel', handleScroll, { passive: true });
+
+    return () => {
+      scrollContainer?.removeEventListener('wheel', handleScroll);
+      window.removeEventListener('wheel', handleScroll);
+
+    };
+  }, [handleScroll, isAutoScrollEnabled, scrollContainer]);
+
+  useEffect(() => {
+    const target = getTarget();
+    if(!placeholderContent || !target) {
+      return;
+    }
+
+    if(isAutoScrollEnabled && ([ApplyingState.analyzing, ApplyingState.applying, ApplyingState.completed].includes(applyingState))) {
+      const rect = target.getBoundingClientRect();
+      const viewportRect = scrollContainer?.getBoundingClientRect();
+
+      if(viewportRect && rect.bottom > viewportRect.bottom) {
+        scrollIntoView();
+      }
+
+    }
+  }, [getTarget, isAutoScrollEnabled, placeholderContent, scrollContainer, scrollIntoView, applyingState]);
+
+  useEffect(() => {
+    if(!placeholderContent && hasAIAnswer()) {
+      enableAutoScroll();
+    }
+  }, [hasAIAnswer, enableAutoScroll, placeholderContent]);
+
+  return {
+    isAutoScrollEnabled,
+    enableAutoScroll,
+    disableAutoScroll: () => setIsAutoScrollEnabled(false),
+  };
+}
+
+export default useEnsureBottomVisible;
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/utils.ts b/src/components/chat/components/ai-writer/utils.ts
new file mode 100644
index 00000000..435a4805
--- /dev/null
+++ b/src/components/chat/components/ai-writer/utils.ts
@@ -0,0 +1,8 @@
+export function getToolPosition(writer: HTMLElement) {
+  const writerRect = writer.getBoundingClientRect();
+
+  return {
+    top: writerRect.top + writerRect.height,
+    left: writerRect.left,
+  };
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/view-tree/index.tsx b/src/components/chat/components/ai-writer/view-tree/index.tsx
new file mode 100644
index 00000000..f8171c4c
--- /dev/null
+++ b/src/components/chat/components/ai-writer/view-tree/index.tsx
@@ -0,0 +1,112 @@
+import LoadingDots from '../../ui/loading-dots';
+import { toast } from '../../../hooks/use-toast';
+import { useTranslation } from '../../../i18n';
+import { searchViews } from '../../../lib/views';
+import { Spaces } from './spaces';
+import { Button } from '../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import { SearchInput } from '../../ui/search-input';
+import { Separator } from '../../ui/separator';
+import { useCheckboxTree } from '../../../hooks/use-checkbox-tree';
+import { View } from '../../../types';
+import { useWriterContext } from '../../../writer/context';
+import { ChevronDown } from 'lucide-react';
+import { ReactComponent as DocIcon } from '../../../assets/icons/doc.svg';
+import { useEffect, useMemo, useState } from 'react';
+
+export function ViewTree() {
+  const [searchValue, setSearchValue] = useState('');
+  const {
+    viewId,
+    setRagIds,
+  } = useWriterContext();
+  const { fetchViews } = useWriterContext();
+  const [viewsLoading, setViewsLoading] = useState(true);
+  const [folder, setFolder] = useState<View | null>(null);
+  const viewIds = useMemo(() => [viewId], [viewId]);
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    void (async() => {
+      setViewsLoading(true);
+      try {
+        const data = await fetchViews();
+        if(!data) return;
+        setFolder(data);
+        // eslint-disable-next-line
+      } catch(e: any) {
+        toast({
+          variant: 'destructive',
+          description: e.message,
+        });
+      } finally {
+        setViewsLoading(false);
+      }
+    })();
+  }, [fetchViews]);
+
+  const views = useMemo(() => {
+    return folder?.children || [];
+  }, [folder]);
+
+  const {
+    getSelected,
+    getCheckStatus,
+    toggleNode,
+    getInitialExpand,
+  } = useCheckboxTree(viewIds, views);
+
+  const length = getSelected().length;
+
+  const spaces = useMemo(() => {
+    const spaces = folder?.children.filter(view => view.extra?.is_space);
+    return searchViews(spaces || [], searchValue);
+  }, [folder, searchValue]);
+
+  return <Popover modal={false}>
+    <PopoverTrigger asChild>
+      <Button
+        className={'text-xs !gap-1 !text-secondary-foreground h-[28px]'}
+        startIcon={
+          <DocIcon />
+        }
+        size={'sm'}
+        variant={'ghost'}
+        disabled={viewsLoading}
+      >
+        <div className={'flex gap-0.5 items-center flex-1'}>
+          {length > 1 ? length : t('writer.current-page')}
+          {viewsLoading ? <LoadingDots size={12} /> : <ChevronDown className={'!w-2 !h-2'} />}
+
+        </div>
+
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent side={'top'}>
+      <div className={'h-fit py-1 px-1 min-h-[200px] max-h-[360px] w-[300px] flex gap-2 flex-col'}>
+        <SearchInput
+          value={searchValue}
+          onChange={setSearchValue}
+        />
+        <Separator />
+        <div className={'overflow-x-hidden overflow-y-auto flex-1 appflowy-scrollbar'}>
+          <Spaces
+            viewsLoading={viewsLoading}
+            spaces={spaces}
+            getCheckStatus={getCheckStatus}
+            getInitialExpand={getInitialExpand}
+            onToggle={
+              (view: View) => {
+                if(view.view_id === viewId) return;
+                const ids = toggleNode(view);
+                setRagIds(Array.from(ids));
+              }
+            }
+          />
+        </div>
+
+      </div>
+    </PopoverContent>
+  </Popover>;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ai-writer/view-tree/spaces.tsx b/src/components/chat/components/ai-writer/view-tree/spaces.tsx
new file mode 100644
index 00000000..88431a71
--- /dev/null
+++ b/src/components/chat/components/ai-writer/view-tree/spaces.tsx
@@ -0,0 +1,58 @@
+import ViewChildren from '../../view/view-children';
+import SpaceItem from '../../view/space-item';
+import LoadingDots from '../../ui/loading-dots';
+import { useTranslation } from '../../../i18n';
+import { View } from '../../../types';
+import { CheckStatus } from '../../../types/checkbox';
+
+interface SpacesProps {
+  getCheckStatus: (view: View) => CheckStatus;
+  getInitialExpand: (viewId: string) => boolean;
+  onToggle: (view: View) => void;
+  spaces: View[];
+  viewsLoading: boolean;
+}
+
+export function Spaces({
+  getCheckStatus,
+  onToggle,
+  spaces,
+  viewsLoading,
+  getInitialExpand,
+}: SpacesProps) {
+  const { t } = useTranslation();
+
+  if(viewsLoading) {
+    return <div className={'flex w-full h-full items-center py-10 justify-center'}>
+      <LoadingDots />
+    </div>;
+  }
+
+  if(!spaces || spaces.length === 0) {
+    return <div className={'flex w-full opacity-60 h-full py-10 items-center justify-center'}>
+      {t('search.noSpacesFound')}
+    </div>;
+  }
+
+  return (
+    <div className={'flex flex-col gap-1 h-full w-full'}>
+      {spaces.map((view: View) => {
+        return (
+          <SpaceItem
+            key={view.view_id}
+            view={view}
+            getInitialExpand={getInitialExpand}
+          >
+            <ViewChildren
+              item={view}
+              onToggle={onToggle}
+              getCheckStatus={getCheckStatus}
+              getInitialExpand={getInitialExpand}
+            />
+          </SpaceItem>
+        );
+      })}
+    </div>
+  );
+}
+
diff --git a/src/components/chat/components/ai-writer/writing-input.tsx b/src/components/chat/components/ai-writer/writing-input.tsx
new file mode 100644
index 00000000..57060a00
--- /dev/null
+++ b/src/components/chat/components/ai-writer/writing-input.tsx
@@ -0,0 +1,349 @@
+import { ReactComponent as SendIcon } from '../../assets/icons/arrow-up.svg';
+import { ReactComponent as AutoTextIcon } from '../../assets/icons/auto-text.svg';
+import { ReactComponent as ImageTextIcon } from '../../assets/icons/image-text.svg';
+import { ViewTree } from '../ai-writer/view-tree';
+import { WritingMore } from '../ai-writer/writing-more';
+import { Button } from '../../../ui/button';
+import { FormatGroup } from '../ui/format-group';
+import LoadingDots from '../ui/loading-dots';
+import { Textarea } from '../ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '../../../ui/tooltip';
+import { toast } from '../../hooks/use-toast';
+import { useTranslation } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { usePromptModal } from '../../provider/prompt-modal-provider';
+import { ChatInputMode } from '../../types';
+import { AiPrompt } from '../../types/prompt';
+import { useWriterContext } from '../../writer/context';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PromptModal } from '../chat-input/prompt-modal';
+
+const MAX_HEIGHT = 200;
+// Prevent focus on page load and cause the page to scroll
+const FOCUS_DELAY = 250;
+
+export function WritingInput({
+  onSubmit,
+  noBorder,
+  noSwitchMode,
+}: {
+  onSubmit: (message: string) => Promise<() => void>;
+  noBorder?: boolean;
+  noSwitchMode?: boolean;
+}) {
+  const { t } = useTranslation();
+
+  const [, setFocused] = useState(false);
+  const [message, setMessage] = useState('');
+  const {
+    assistantType,
+    isApplying,
+    isFetching,
+    responseMode,
+    responseFormat,
+    setResponseFormat,
+    setResponseMode,
+    hasAIAnswer,
+    scrollContainer,
+  } = useWriterContext();
+  const { openModal, currentPromptId, updateCurrentPromptId } =
+    usePromptModal();
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (assistantType === undefined) {
+      setMessage('');
+    }
+  }, [assistantType]);
+
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    // reset height
+    textarea.style.height = 'auto';
+
+    // calculate height
+    const newHeight = Math.min(textarea.scrollHeight, MAX_HEIGHT);
+    textarea.style.height = `${newHeight}px`;
+
+    // toggle overflowY
+    textarea.style.overflowY =
+      textarea.scrollHeight > MAX_HEIGHT ? 'auto' : 'hidden';
+
+    // adjust container height
+    if (containerRef.current) {
+      containerRef.current.style.height = `${newHeight + (responseMode === ChatInputMode.FormatResponse ? 54 + 24 : 30 + 16)}px`; // 32px padding
+    }
+  }, [responseMode]);
+
+  const handleInput = () => {
+    adjustHeight();
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value);
+    adjustHeight();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      void handleSubmit();
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!message.trim()) {
+      toast({
+        variant: 'destructive',
+        description: `${t('errors.emptyMessage')}`,
+      });
+      return;
+    }
+    if (isFetching || isApplying) {
+      toast({
+        variant: 'destructive',
+        description: `${t('errors.wait')}`,
+      });
+      return;
+    }
+    setMessage('');
+    adjustHeight();
+
+    try {
+      await onSubmit(message);
+      // eslint-disable-next-line
+    } catch (e: any) {
+      toast({
+        variant: 'destructive',
+        description: e.message,
+      });
+    }
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (message) {
+        adjustHeight();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [adjustHeight, message]);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      const rect = textareaRef.current?.getBoundingClientRect();
+      const containerRect = scrollContainer?.getBoundingClientRect();
+      if (!rect || !containerRect) return;
+
+      const inViewport =
+        rect.top >= containerRect.top && rect.bottom <= containerRect.bottom;
+      const bottomInView =
+        rect.top < containerRect.top && rect.bottom > containerRect.top;
+      const topInView =
+        rect.bottom > containerRect.bottom && rect.top < containerRect.bottom;
+
+      if (inViewport || bottomInView || topInView) {
+        textareaRef.current?.focus();
+        return;
+      }
+
+      console.error('Disable focus on page load', {
+        rect,
+        containerRect,
+      });
+    }, FOCUS_DELAY);
+  }, [scrollContainer]);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight, currentPromptId]);
+
+  const handleUsePrompt = useCallback(
+    (prompt: AiPrompt) => {
+      updateCurrentPromptId(prompt.id);
+      setResponseMode(ChatInputMode.Auto);
+      setMessage(prompt.content);
+      if (textareaRef) {
+        textareaRef.current?.focus();
+        setFocused(true);
+      }
+    },
+    [setResponseMode, updateCurrentPromptId],
+  );
+
+  const formatTooltip =
+    responseMode === ChatInputMode.FormatResponse
+      ? t('input.button.auto')
+      : t('input.button.format');
+  const FormatIcon =
+    responseMode === ChatInputMode.FormatResponse
+      ? AutoTextIcon
+      : ImageTextIcon;
+  return (
+    <div
+      className={cn(
+        'writer-anchor flex w-full flex-col',
+        noBorder ? '' : 'pb-[150px]',
+      )}
+    >
+      <div
+        ref={containerRef}
+        style={{
+          borderTop: noBorder ? 'none' : undefined,
+          borderTopLeftRadius: noBorder ? 0 : undefined,
+          borderTopRightRadius: noBorder ? 0 : undefined,
+          border: noBorder ? 'none' : undefined,
+        }}
+        className={cn(
+          noBorder ? '' : 'shadow-menu',
+          'border bg-input-background w-full relative justify-between gap-1 flex flex-col border-border py-1 px-2 focus:border-primary rounded-[12px]',
+          noBorder ? 'ring-0' : 'ring-[0.5px] ring-input',
+        )}
+      >
+        {responseMode === ChatInputMode.FormatResponse && (
+          <FormatGroup
+            setOutputLayout={(newOutLayout) => {
+              setResponseFormat({
+                ...responseFormat,
+                output_layout: newOutLayout,
+              });
+            }}
+            setOutputContent={(newOutContent) => {
+              setResponseFormat({
+                ...responseFormat,
+                output_content: newOutContent,
+              });
+            }}
+            outputContent={responseFormat.output_content}
+            outputLayout={responseFormat.output_layout}
+          />
+        )}
+        <Textarea
+          value={message}
+          onChange={handleChange}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          ref={textareaRef}
+          onFocus={() => {
+            setFocused(true);
+          }}
+          placeholder={t('input.placeholder')}
+          onBlur={() => {
+            setFocused(false);
+          }}
+          rows={1}
+          className={
+            'resize-none select-text writer-input !text-sm caret-primary min-h-[32px] !py-1 !px-1.5 !border-none !shadow-none w-full !ring-0 h-full !outline-none'
+          }
+        />
+
+        <div className={'flex justify-between items-center gap-4'}>
+          <div className='flex items-center gap-1'>
+            {!noSwitchMode ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                    }}
+                    variant={'ghost'}
+                    size={'icon'}
+                    className={'w-7 h-7'}
+                    onClick={() => {
+                      setResponseMode(
+                        responseMode === ChatInputMode.FormatResponse
+                          ? ChatInputMode.Auto
+                          : ChatInputMode.FormatResponse,
+                      );
+                    }}
+                  >
+                    <FormatIcon
+                      style={{
+                        width: 20,
+                        height: 20,
+                      }}
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent align={'center'} side={'right'}>
+                  {formatTooltip}
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <div />
+            )}
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                  }}
+                  variant={'ghost'}
+                  className={'h-7 text-xs'}
+                  onClick={openModal}
+                >
+                  {t('customPrompt.browsePrompts')}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent align={'center'} side={'right'}>
+                {t('customPrompt.browsePrompts')}
+              </TooltipContent>
+            </Tooltip>
+
+            <PromptModal
+              onUsePrompt={handleUsePrompt}
+              returnFocus={() => {
+                setFocused(true);
+                setTimeout(() => {
+                  textareaRef.current?.focus();
+                }, 200);
+              }}
+            />
+          </div>
+
+          <div className={'flex gap-1 items-center'}>
+            <ViewTree />
+            {!hasAIAnswer() && <WritingMore input={message} />}
+
+            <Button
+              onClick={handleSubmit}
+              size={'icon'}
+              variant={'link'}
+              className={'w-7 h-7 text-fill-theme-thick !p-0.5'}
+              disabled={!message.trim() || isFetching}
+              onMouseDown={(e) => {
+                e.preventDefault();
+              }}
+            >
+              {isFetching ? (
+                <LoadingDots />
+              ) : (
+                <SendIcon
+                  style={{
+                    width: 24,
+                    height: 24,
+                  }}
+                />
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chat/components/ai-writer/writing-more.tsx b/src/components/chat/components/ai-writer/writing-more.tsx
new file mode 100644
index 00000000..1116196b
--- /dev/null
+++ b/src/components/chat/components/ai-writer/writing-more.tsx
@@ -0,0 +1,62 @@
+import { AiWriterMenuContent } from '../ai-writer/ai-writer-menu-content';
+import { Button } from '../../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/popover';
+import { useTranslation } from '../../i18n';
+import { AIAssistantType } from '../../types';
+import { useWriterContext } from '../../writer/context';
+import { ChevronDown } from 'lucide-react';
+import { ReactComponent as MoreIcon } from '../../assets/icons/ai-more.svg';
+import { useCallback, useState } from 'react';
+
+export function WritingMore({ input }: {
+  input: string
+}) {
+  const { t } = useTranslation();
+  const {
+    isGlobalDocument,
+  } = useWriterContext();
+
+  const [open, setOpen] = useState(false);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const isFilterOut = useCallback((type: AIAssistantType) => {
+    if(isGlobalDocument) {
+      return type !== AIAssistantType.ContinueWriting;
+    }
+
+    return type === AIAssistantType.AskAIAnything || type === AIAssistantType.ContinueWriting;
+  }, [isGlobalDocument]);
+
+  return <Popover
+    onOpenChange={setOpen}
+    open={open}
+    modal={false}
+  >
+    <PopoverTrigger asChild>
+      <Button
+        className={'text-xs !gap-1 !text-secondary-foreground h-[28px]'}
+        size={'sm'}
+        startIcon={
+          <MoreIcon className={'!w-5 !h-5'} />
+        }
+        variant={'ghost'}
+      >
+        <div className={'flex gap-0.5 items-center flex-1'}>
+          {t('writer.button.more')}
+          <ChevronDown className={'!w-2 !h-2'} />
+        </div>
+
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent className={'min-w-[240px] !p-2'}>
+      <AiWriterMenuContent
+        input={input}
+        isFilterOut={isFilterOut}
+        onClicked={handleClose}
+      />
+    </PopoverContent>
+  </Popover>;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/chat-input/index.tsx b/src/components/chat/components/chat-input/index.tsx
new file mode 100644
index 00000000..aa4ab495
--- /dev/null
+++ b/src/components/chat/components/chat-input/index.tsx
@@ -0,0 +1,321 @@
+import { ReactComponent as SendIcon } from '../../assets/icons/arrow-up.svg';
+import { ReactComponent as AutoTextIcon } from '../../assets/icons/auto-text.svg';
+import { ReactComponent as ImageTextIcon } from '../../assets/icons/image-text.svg';
+import { ReactComponent as StopIcon } from '../../assets/icons/stop.svg';
+import { useChatContext } from '../../chat/context';
+import { FormatGroup } from '../ui/format-group';
+import { RelatedViews } from './related-views';
+import { Button } from '../ui/button';
+import LoadingDots from '../ui/loading-dots';
+import { Textarea } from '../ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '../ui/tooltip';
+import { toast } from '../../hooks/use-toast';
+import { useTranslation } from '../../i18n';
+import { MESSAGE_VARIANTS } from '../../lib/animations';
+import { useMessagesHandlerContext } from '../../provider/messages-handler-provider';
+import { useResponseFormatContext } from '../../provider/response-format-provider';
+import { ChatInputMode } from '../../types';
+import { motion } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PromptModal } from './prompt-modal';
+import { usePromptModal } from '../../provider/prompt-modal-provider';
+import { AiPrompt } from '../../types/prompt';
+import { ModelSelector } from './model-selector';
+
+const MAX_HEIGHT = 200;
+
+export function ChatInput() {
+  const { t } = useTranslation();
+  const [focused, setFocused] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const {
+    submitQuestion,
+    cancelAnswerStream,
+    answerApplying,
+    questionSending,
+  } = useMessagesHandlerContext();
+  const { responseFormat, responseMode, setResponseFormat, setResponseMode } =
+    useResponseFormatContext();
+  const {
+    openModal,
+    currentPromptId,
+    updateCurrentPromptId,
+    reloadDatabasePrompts,
+  } = usePromptModal();
+
+  const { chatId } = useChatContext();
+
+  const disabled = questionSending;
+
+  useEffect(() => {
+    return () => {
+      setMessage('');
+    };
+  }, [chatId]);
+
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    // reset height
+    textarea.style.height = 'auto';
+
+    // calculate height
+    const newHeight = Math.min(textarea.scrollHeight, MAX_HEIGHT);
+    textarea.style.height = `${newHeight}px`;
+
+    // toggle overflowY
+    textarea.style.overflowY =
+      textarea.scrollHeight > MAX_HEIGHT ? 'auto' : 'hidden';
+
+    // adjust container height
+    if (containerRef.current) {
+      containerRef.current.style.height = `${newHeight + (responseMode === ChatInputMode.FormatResponse ? 54 + 20 : 30 + 16)}px`; // 32px padding
+    }
+  }, [responseMode]);
+
+  const handleInput = () => {
+    adjustHeight();
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value);
+    adjustHeight();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      void handleSubmit();
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!message.trim()) {
+      toast({
+        variant: 'destructive',
+        description: `${t('errors.emptyMessage')}`,
+      });
+      return;
+    }
+    if (questionSending || answerApplying) {
+      toast({
+        variant: 'destructive',
+        description: `${t('errors.wait')}`,
+      });
+      return;
+    }
+    setMessage('');
+    adjustHeight();
+
+    try {
+      await submitQuestion(message);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      updateCurrentPromptId(null);
+    }
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (message) {
+        adjustHeight();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [adjustHeight, message]);
+
+  const formatTooltip =
+    responseMode === ChatInputMode.FormatResponse
+      ? t('input.button.auto')
+      : t('input.button.format');
+  const FormatIcon =
+    responseMode === ChatInputMode.FormatResponse
+      ? AutoTextIcon
+      : ImageTextIcon;
+
+  useEffect(() => {
+    adjustHeight();
+  }, [adjustHeight, currentPromptId, message]);
+
+  const handleUsePrompt = useCallback(
+    (prompt: AiPrompt) => {
+      updateCurrentPromptId(prompt.id);
+      setResponseMode(ChatInputMode.Auto);
+      setMessage(prompt.content);
+    },
+    [setResponseMode, updateCurrentPromptId],
+  );
+
+  return (
+    <motion.div
+      variants={MESSAGE_VARIANTS.getInputVariants()}
+      initial='hidden'
+      animate='visible'
+      exit='hidden'
+      className={'w-full'}
+    >
+      <div
+        ref={containerRef}
+        className={`border relative justify-between gap-1 flex flex-col ${focused ? 'ring-1 ring-ring border-primary' : 'ring-0'} border-border py-1 px-2 focus:border-primary w-full rounded-[12px]`}
+      >
+        {responseMode === ChatInputMode.FormatResponse && (
+          <FormatGroup
+            setOutputLayout={(newOutLayout) => {
+              setResponseFormat({
+                ...responseFormat,
+                output_layout: newOutLayout,
+              });
+            }}
+            setOutputContent={(newOutContent) => {
+              setResponseFormat({
+                ...responseFormat,
+                output_content: newOutContent,
+              });
+            }}
+            outputContent={responseFormat.output_content}
+            outputLayout={responseFormat.output_layout}
+          />
+        )}
+        <Textarea
+          autoFocus
+          value={message}
+          onChange={handleChange}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          ref={textareaRef}
+          onFocus={() => {
+            setFocused(true);
+          }}
+          placeholder={t('input.placeholder')}
+          onBlur={() => {
+            setFocused(false);
+          }}
+          rows={1}
+          className={
+            'resize-none !text-sm caret-primary min-h-[32px] !py-1 !px-1.5 !border-none !shadow-none w-full !ring-0 h-full !outline-none'
+          }
+        />
+
+        <div className={'flex justify-between items-center gap-4'}>
+          <div className={'flex items-center gap-1'}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                  }}
+                  variant={'ghost'}
+                  size={'icon'}
+                  className={'w-7 h-7'}
+                  onClick={() => {
+                    setResponseMode(
+                      responseMode === ChatInputMode.FormatResponse
+                        ? ChatInputMode.Auto
+                        : ChatInputMode.FormatResponse,
+                    );
+                  }}
+                >
+                  <FormatIcon
+                    style={{
+                      width: 20,
+                      height: 20,
+                    }}
+                  />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent align={'center'} side={'right'}>
+                {formatTooltip}
+              </TooltipContent>
+            </Tooltip>
+
+            <ModelSelector 
+              className={'h-7'} 
+              disabled={questionSending || answerApplying}
+            />
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                  }}
+                  variant={'ghost'}
+                  className={'h-7 text-xs'}
+                  onClick={() => {
+                    reloadDatabasePrompts();
+                    openModal();
+                  }}
+                >
+                  {t('customPrompt.browsePrompts')}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent align={'center'} side={'right'}>
+                {t('customPrompt.browsePrompts')}
+              </TooltipContent>
+            </Tooltip>
+
+            <PromptModal
+              onUsePrompt={handleUsePrompt}
+              returnFocus={() => {
+                setFocused(true);
+                setTimeout(() => {
+                  textareaRef.current?.focus();
+                }, 200);
+              }}
+            />
+          </div>
+
+          <div className={'flex items-center gap-2'}>
+            <RelatedViews />
+            {answerApplying ? (
+              <Button
+                onClick={cancelAnswerStream}
+                size={'icon'}
+                variant={'link'}
+                className={'w-7 h-7 text-fill-theme-thick !p-0.5'}
+              >
+                <StopIcon
+                  style={{
+                    width: 24,
+                    height: 24,
+                  }}
+                />
+              </Button>
+            ) : (
+              <Button
+                onClick={handleSubmit}
+                size={'icon'}
+                variant={'link'}
+                className={'w-7 h-7 text-fill-theme-thick !p-0.5'}
+                disabled={!message.trim() || disabled}
+              >
+                {questionSending ? (
+                  <LoadingDots />
+                ) : (
+                  <SendIcon
+                    style={{
+                      width: 24,
+                      height: 24,
+                    }}
+                  />
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/src/components/chat/components/chat-input/model-selector/index.tsx b/src/components/chat/components/chat-input/model-selector/index.tsx
new file mode 100644
index 00000000..7b6ffdfd
--- /dev/null
+++ b/src/components/chat/components/chat-input/model-selector/index.tsx
@@ -0,0 +1,279 @@
+import { Check } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ReactComponent as AISparksIcon } from '../../../assets/icons/ai_sparks.svg';
+
+import { useChatContext } from '../../../chat/context';
+import { ModelCache } from '../../../lib/model-cache';
+import { cn } from '../../../lib/utils';
+import { useMessagesHandlerContext } from '../../../provider/messages-handler-provider';
+import { UpdateChatSettingsParams } from '../../../request/chat-request';
+import { AvailableModel, toModelDisplayInfo } from '../../../types/ai-model';
+import { Button } from '../../ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../ui/popover';
+
+interface ModelSelectorProps {
+  className?: string;
+  disabled?: boolean;
+}
+
+export function ModelSelector({ className, disabled }: ModelSelectorProps) {
+
+  const [open, setOpen] = useState(false);
+  const [selectedModel, setSelectedModel] = useState<string>(''); // Start empty, will be loaded from settings
+  const [models, setModels] = useState<AvailableModel[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isInitialized, setIsInitialized] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Get context - hooks must be called unconditionally
+  // If the provider is missing, these will throw - that's expected behavior
+  const chatContext = useChatContext();
+  const messagesContext = useMessagesHandlerContext();
+
+  const requestInstance = chatContext?.requestInstance;
+  const chatId = chatContext?.chatId;
+  // const workspaceId = chatContext?.workspaceId; // Not used currently
+  const setSelectedModelName = messagesContext?.setSelectedModelName;
+
+
+  // Initialize: Load cached model first, then fetch from server
+  useEffect(() => {
+    if (!chatId || !requestInstance || isInitialized) return;
+
+    // Step 1: Load from cache immediately for instant UI
+    const cachedModel = ModelCache.get(chatId);
+
+    if (cachedModel) {
+      setSelectedModel(cachedModel);
+      setSelectedModelName?.(cachedModel);
+    }
+
+    // Step 2: Fetch chat settings in background to get the truth
+    const loadChatSettings = async () => {
+      try {
+        const settings = await requestInstance.getChatSettings();
+        const modelFromSettings = settings.metadata?.ai_model as string | undefined;
+
+        if (modelFromSettings) {
+          // Server has a model saved, use it
+          setSelectedModel(modelFromSettings);
+          setSelectedModelName?.(modelFromSettings);
+          ModelCache.set(chatId, modelFromSettings);
+        }
+        // Don't set a default if there's no saved model - let user choose
+        // If no model in settings but we have cache, keep using cache
+      } catch (error) {
+        console.warn('Failed to load chat settings', error);
+        // Keep cached model if available, otherwise let user choose
+      }
+    };
+
+    void loadChatSettings();
+    setIsInitialized(true);
+  }, [chatId, requestInstance, isInitialized, setSelectedModelName]);
+
+  const loadModels = useCallback(async () => {
+    if (!requestInstance) {
+      // Provide fallback models when no context
+      setModels([
+        { name: 'Auto', metadata: { is_default: true, desc: 'Auto select the best model' } },
+        { name: 'GPT-4', metadata: { is_default: false, desc: 'Most capable model' } },
+        { name: 'GPT-3.5', metadata: { is_default: false, desc: 'Fast and efficient' } },
+      ]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const modelList = await requestInstance.getModelList();
+
+      setModels(modelList.models);
+
+      // Don't override the selected model - it should come from chat settings
+    } catch (error) {
+      console.error('Failed to load models:', error);
+      // Fallback to Auto only if API fails
+      setModels([
+        { name: 'Auto', metadata: { is_default: true, desc: 'Auto select the best model' } },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  }, [requestInstance]);
+
+  // Load models when popover opens
+  useEffect(() => {
+    if (open && models.length === 0) {
+      void loadModels();
+    }
+  }, [open, models.length, loadModels]);
+
+  // Focus search input when popover opens
+  useEffect(() => {
+    if (open && searchInputRef.current) {
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 100);
+    } else if (!open) {
+      setSearchQuery('');
+    }
+  }, [open]);
+
+  const handleSelect = useCallback(async (modelName: string) => {
+    // Update UI immediately
+    setSelectedModel(modelName);
+    setOpen(false);
+
+    // Only update context if available
+    if (setSelectedModelName) {
+      setSelectedModelName(modelName);
+    }
+
+    // Update cache if chatId is available
+    if (chatId) {
+      ModelCache.set(chatId, modelName);
+    }
+
+    // Send update request to server if context is available
+    if (requestInstance && chatId) {
+      try {
+        const params: UpdateChatSettingsParams = {
+          metadata: {
+            ai_model: modelName
+          }
+        };
+
+        await requestInstance.updateChatSettings(params);
+      } catch (error) {
+        console.error('Failed to update chat settings:', error);
+        // Cache is already updated, so user experience is not affected
+      }
+    }
+  }, [setSelectedModelName, chatId, requestInstance]);
+
+  const filteredModels = models.filter((model) => {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+
+    return (
+      model.name.toLowerCase().includes(query) ||
+      model.metadata?.desc?.toLowerCase().includes(query) ||
+      model.provider?.toLowerCase().includes(query)
+    );
+  });
+
+  const selectedModelData = models.find((m) => m.name === selectedModel);
+  const displayText = selectedModelData?.name || selectedModel || 'Select Model';
+
+  const getProviderIcon = (_provider?: string) => {
+    // You can add specific icons for different providers here
+    return null;
+  };
+
+  // Always render the button, even without full context
+  const hasContext = !!(requestInstance && chatId);
+
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className={cn('h-7 px-2 text-xs font-normal gap-1', className)}
+          onMouseDown={(e) => e.preventDefault()}
+          disabled={disabled}
+          title={hasContext ? 'Select AI Model' : 'Model selector (offline mode)'}
+        >
+          {AISparksIcon ? (
+            <AISparksIcon className="w-4 h-4" />
+          ) : (
+            <span className="text-[10px]">🤖</span>
+          )}
+          <span className="truncate max-w-[120px]">{displayText}</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[380px] p-0 rounded-lg"
+        align="start"
+        side="top"
+        sideOffset={8}
+      >
+        {/* Search Input */}
+        <div className="px-3 py-2 border-b border-border-primary">
+          <input
+            ref={searchInputRef}
+            type="text"
+            placeholder="Search models..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full px-2 py-1 text-sm bg-transparent outline-none placeholder:text-text-placeholder"
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                setOpen(false);
+              }
+            }}
+          />
+        </div>
+
+        {/* Models List */}
+        <div className="max-h-[380px] overflow-y-auto py-1">
+          {loading ? (
+            <div className="px-3 py-8 text-center text-sm text-text-secondary">
+              Loading models...
+            </div>
+          ) : filteredModels.length === 0 ? (
+            <div className="px-3 py-8 text-center text-sm text-text-secondary">
+              {searchQuery ? 'No models found' : 'No models available'}
+            </div>
+          ) : (
+            filteredModels.map((model) => {
+              const displayInfo = toModelDisplayInfo(model);
+              const isSelected = selectedModel === model.name;
+
+              return (
+                <button
+                  key={displayInfo.id}
+                  onClick={() => handleSelect(model.name)}
+                  className={cn(
+                    'w-full px-3 py-2.5 text-left hover:bg-fill-content-hover transition-colors',
+                    'flex items-start justify-between group',
+                    'focus:outline-none focus:bg-fill-content-hover',
+                    isSelected && 'bg-fill-content-select'
+                  )}
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      {getProviderIcon(model.provider)}
+                      <span className={cn(
+                        "text-sm font-medium",
+                        isSelected && "text-primary"
+                      )}>
+                        {model.name}
+                      </span>
+                    </div>
+                    {model.metadata?.desc && (
+                      <p className="text-xs text-muted-foreground mt-0.5 truncate pr-2">
+                        {model.metadata.desc}
+                      </p>
+                    )}
+                  </div>
+                  {isSelected && (
+                    <Check className="h-4 w-4 text-primary mt-0.5 ml-2 flex-shrink-0" />
+                  )}
+                </button>
+              );
+            })
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default ModelSelector;
\ No newline at end of file
diff --git a/src/components/chat/components/chat-input/prompt-modal/index.tsx b/src/components/chat/components/chat-input/prompt-modal/index.tsx
new file mode 100644
index 00000000..c83ae73d
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/index.tsx
@@ -0,0 +1,277 @@
+import { Dialog, DialogContent, DialogTitle } from '../../../../ui/dialog';
+import { useTranslation } from '../../../i18n';
+import { usePromptModal } from '../../../provider/prompt-modal-provider';
+import { AiPrompt, AiPromptCategory } from '../../../types/prompt';
+import { SearchIcon } from 'lucide-react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { PromptCard } from './prompt-card';
+import { PromptPreview } from './prompt-preview';
+import { ReactComponent as CloseCircle } from '../../../assets/icons/close_circle.svg';
+import { PromptCategory } from './prompt-category';
+import { SearchInput } from '../../ui/search-input';
+import { Button } from '../../../../ui/button';
+import { PromptDatabaseModal } from './prompt-database';
+import { useViewLoader } from '../../../provider/view-loader-provider';
+
+export const PromptModal = forwardRef<
+  HTMLDivElement,
+  {
+    onUsePrompt: (prompt: AiPrompt) => void;
+    returnFocus: () => void;
+  }
+>(({ onUsePrompt, returnFocus }, ref) => {
+  const {
+    isOpen,
+    openModal,
+    closeModal,
+    prompts,
+    reloadDatabasePrompts,
+    databaseConfig,
+  } = usePromptModal();
+
+  const { getView } = useViewLoader();
+
+  const { t } = useTranslation();
+
+  const [isFeaturedSelected, setIsFeaturedSelected] = useState(true);
+  const [isCustomSelected, setIsCustomSelected] = useState(false);
+  const [selectedCatecory, setSelectedCategory] =
+    useState<AiPromptCategory | null>(null);
+  const [selectedPreviewPromptId, setSelectedPreviewPromptId] = useState<
+    string | null
+  >(null);
+  const [filter, setFilter] = useState('');
+  const [isPromptDatabaseModalOpen, setIsPromptDatabaseModalOpen] =
+    useState(false);
+  const [viewName, setViewName] = useState<string | null>(null);
+
+  const isScrollingRef = useRef(false);
+  const scrollTimeoutRef = useRef<number | null>(null);
+
+  const visiblePrompts = useMemo(() => {
+    return prompts.filter((prompt) => {
+      const matchesCategory =
+        (isFeaturedSelected && prompt.isFeatured) ||
+        (isCustomSelected && prompt.isCustom) ||
+        (!isFeaturedSelected &&
+          !isCustomSelected &&
+          selectedCatecory === null) ||
+        (selectedCatecory && prompt.category.includes(selectedCatecory));
+
+      if (!matchesCategory) return false;
+
+      if (filter) {
+        return (
+          prompt.name.toLowerCase().includes(filter.toLowerCase()) ||
+          prompt.content.toLowerCase().includes(filter.toLowerCase())
+        );
+      }
+
+      return true;
+    });
+  }, [filter, isCustomSelected, isFeaturedSelected, prompts, selectedCatecory]);
+
+  const selectedPrompt = useMemo(() => {
+    const foundVisiblePrompt = visiblePrompts.find(
+      (prompt) => prompt.id === selectedPreviewPromptId,
+    );
+    if (foundVisiblePrompt) {
+      return foundVisiblePrompt;
+    }
+
+    if (visiblePrompts.length > 0) {
+      setSelectedPreviewPromptId(visiblePrompts[0].id);
+      return visiblePrompts[0];
+    }
+  }, [selectedPreviewPromptId, visiblePrompts]);
+
+  useEffect(() => {
+    void (async () => {
+      if (!databaseConfig) return;
+      if (!databaseConfig.databaseViewId) return;
+
+      const view = await getView(databaseConfig.databaseViewId);
+
+      setViewName(view?.name || null);
+    })();
+  }, [databaseConfig, getView]);
+
+  const handleHoverPromptCard = useCallback(
+    (id: string) => {
+      if (isScrollingRef.current) return;
+
+      setSelectedPreviewPromptId(id);
+    },
+    [setSelectedPreviewPromptId],
+  );
+
+  const handleScroll = useCallback(() => {
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    isScrollingRef.current = true;
+
+    scrollTimeoutRef.current = window.setTimeout(() => {
+      isScrollingRef.current = false;
+    }, 100);
+  }, []);
+
+  const emptyDatabasePrompt = useMemo(() => {
+    return (
+      <div className='w-[83%] flex items-center justify-center'>
+        <div className='flex flex-col items-center'>
+          <span className='text-text-primary text-xl mb-1.5'>
+            {t('customPrompt.customPrompt')}
+          </span>
+          <span className='text-text-secondary text-sm mb-5'>
+            {t('customPrompt.databasePrompts')}
+          </span>
+          <Button onClick={() => setIsPromptDatabaseModalOpen(true)}>
+            {t('customPrompt.selectDatabase')}
+          </Button>
+        </div>
+      </div>
+    );
+  }, [t]);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          setFilter('');
+          if (visiblePrompts.length > 0) {
+            setSelectedPreviewPromptId(visiblePrompts[0].id);
+          }
+          returnFocus();
+          closeModal();
+        } else {
+          openModal();
+          reloadDatabasePrompts();
+        }
+      }}
+    >
+      <DialogContent
+        className='max-h-[800px] w-[1200px] flex flex-col gap-3 min-h-0 sm:max-w-[calc(100%-2rem)]'
+        ref={ref}
+        onEscapeKeyDown={(_e) => {
+          setFilter('');
+          closeModal();
+        }}
+      >
+        <DialogTitle className='text-md text-text-primary font-bold'>
+          {t('customPrompt.browsePrompts')}
+        </DialogTitle>
+        <div className='flex-1 flex min-h-0 w-full'>
+          <div className='w-[17%] flex flex-col min-h-0'>
+            <PromptCategory
+              isFeaturedSelected={isFeaturedSelected}
+              setIsFeaturedSelected={setIsFeaturedSelected}
+              isCustomSelected={isCustomSelected}
+              setIsCustomSelected={setIsCustomSelected}
+              selectedCatecory={selectedCatecory}
+              setSelectedCategory={setSelectedCategory}
+            />
+          </div>
+          {isCustomSelected && !databaseConfig ? (
+            emptyDatabasePrompt
+          ) : (
+            <>
+              <div
+                onScroll={handleScroll}
+                className='w-[33%] flex flex-col gap-3 appflowy-scrollbar overflow-y-auto min-h-0 px-3 pb-3'
+              >
+                <div className='bg-background-primary sticky top-0 z-10 flex flex-col gap-3'>
+                  {isCustomSelected && databaseConfig && (
+                    <div className='flex items-center justify-between rounded-[8px] p-2 bg-surface-container-layer-01'>
+                      <div>
+                        <span className='text-text-primary text-sm font-medium'>
+                          {`${t('customPrompt.promptDatabase')}: `}
+                        </span>
+                        <span className='text-text-primary text-sm truncate'>
+                          {viewName || t('view.placeholder')}
+                        </span>
+                      </div>
+                      <Button
+                        variant='outline'
+                        onClick={() => setIsPromptDatabaseModalOpen(true)}
+                      >
+                        {t('customPrompt.button.change')}
+                      </Button>
+                    </div>
+                  )}
+                  <SearchInput
+                    value={filter}
+                    onChange={(value) => setFilter(value)}
+                    className='h-10 py-[10px] px-2 rounded-[10px]'
+                  >
+                    {filter && (
+                      <CloseCircle
+                        className={'w-5 h-5 cursor-pointer text-icon-tertiary'}
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => setFilter('')}
+                      />
+                    )}
+                  </SearchInput>
+                </div>
+                {visiblePrompts.length > 0 ? (
+                  visiblePrompts.map((prompt) => (
+                    <PromptCard
+                      key={prompt.id}
+                      prompt={prompt}
+                      isSelected={selectedPreviewPromptId === prompt.id}
+                      onPreview={() => {
+                        handleHoverPromptCard(prompt.id);
+                      }}
+                      onUsePrompt={() => {
+                        onUsePrompt(prompt);
+                        setFilter('');
+                        returnFocus();
+                        closeModal();
+                      }}
+                    />
+                  ))
+                ) : (
+                  <div className='flex-1 flex flex-col items-center justify-center min-h-0'>
+                    <SearchIcon size={24} className={'text-icon-secondary'} />
+                    <span className='text-text-secondary text-sm'>
+                      {t('customPrompt.noResults')}
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              <div className='w-[50%] flex flex-col px-3 appflowy-scrollbar overflow-y-auto'>
+                {selectedPrompt && (
+                  <PromptPreview
+                    prompt={selectedPrompt}
+                    onUsePrompt={() => {
+                      onUsePrompt(selectedPrompt);
+                      setFilter('');
+                      returnFocus();
+                      closeModal();
+                    }}
+                  />
+                )}
+              </div>
+            </>
+          )}
+        </div>
+        <PromptDatabaseModal
+          isOpen={isPromptDatabaseModalOpen}
+          closeModal={() => {
+            setIsPromptDatabaseModalOpen(false);
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+});
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-card.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-card.tsx
new file mode 100644
index 00000000..c62deb65
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-card.tsx
@@ -0,0 +1,65 @@
+import { useTranslation } from '../../../i18n';
+import { cn } from '../../../lib/utils';
+import { AiPrompt } from '../../../types/prompt';
+import { useState } from 'react';
+
+export function PromptCard({
+  prompt,
+  isSelected,
+  onPreview,
+  onUsePrompt,
+}: {
+  prompt: AiPrompt;
+  isSelected: boolean;
+  onPreview: () => void;
+  onUsePrompt: () => void;
+}) {
+  const { t } = useTranslation();
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [isUsePromptHovered, setIsUsePromptHovered] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+        onPreview();
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+      className={cn(
+        'relative rounded-[8px] border-[1.5px]',
+        isSelected ? 'border-border-theme-thick' : 'border-border-primary',
+      )}
+    >
+      <div
+        className='flex flex-col p-2 cursor-pointer'
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={onPreview}
+      >
+        <span className='truncate text-sm text-text-primary'>
+          {prompt.name}
+        </span>
+        <span className='text-xs text-text-secondary line-clamp-2'>
+          {prompt.content}
+        </span>
+      </div>
+      {isHovered && (
+        <div
+          className={cn(
+            'absolute right-1.5 top-1.5 shadow-md rounded-[8px] border border-border-primary px-2 py-1.5 cursor-pointer text-sm text-text-primary',
+            isUsePromptHovered
+              ? 'bg-surface-primary-hover'
+              : 'bg-surface-primary',
+          )}
+          onMouseEnter={() => setIsUsePromptHovered(true)}
+          onMouseLeave={() => setIsUsePromptHovered(false)}
+          onClick={onUsePrompt}
+        >
+          {t('customPrompt.usePrompt')}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-category.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-category.tsx
new file mode 100644
index 00000000..f460179b
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-category.tsx
@@ -0,0 +1,115 @@
+import { Button } from '../../ui/button';
+import { cn } from '../../../lib/utils';
+import { AiPromptCategory } from '../../../types/prompt';
+import { Separator } from '../../ui/separator';
+import { useMemo } from 'react';
+import { useTranslation } from '../../../i18n';
+
+export function PromptCategory({
+  isFeaturedSelected,
+  isCustomSelected,
+  selectedCatecory,
+  setIsFeaturedSelected,
+  setIsCustomSelected,
+  setSelectedCategory,
+}: {
+  isFeaturedSelected: boolean;
+  isCustomSelected: boolean;
+  selectedCatecory: AiPromptCategory | null;
+  setIsFeaturedSelected: (value: boolean) => void;
+  setIsCustomSelected: (value: boolean) => void;
+  setSelectedCategory: (category: AiPromptCategory | null) => void;
+}) {
+  const { t } = useTranslation();
+
+  const isAllSelected = useMemo(() => {
+    return !isCustomSelected && !isFeaturedSelected && !selectedCatecory;
+  }, [isCustomSelected, isFeaturedSelected, selectedCatecory]);
+
+  const categoryList = useMemo(() => {
+    const categories = Object.values(AiPromptCategory);
+
+    const withoutOthers = categories.filter(
+      (category) => category !== 'others',
+    );
+
+    const sorted = withoutOthers
+      .slice()
+      .sort((a, b) =>
+        t(`customPrompt.${a}`).localeCompare(t(`customPrompt.${b}`)),
+      );
+
+    return [...sorted, 'others'];
+  }, [t]);
+
+  return (
+    <div className='flex flex-col pr-3 appflowy-scrollbar overflow-auto justify-between'>
+      <div className='sticky top-0 z-10 bg-background-primary mb-2 flex flex-col'>
+        <Button
+          variant={'ghost'}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => {
+            setIsFeaturedSelected(true);
+            setIsCustomSelected(false);
+            setSelectedCategory(null);
+          }}
+          className={cn(
+            'flex flex-shrink-0 justify-start',
+            isFeaturedSelected ? '!bg-fill-theme-select' : '',
+          )}
+        >
+          {t('customPrompt.featured')}
+        </Button>
+        <Button
+          variant={'ghost'}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => {
+            setIsCustomSelected(true);
+            setIsFeaturedSelected(false);
+            setSelectedCategory(null);
+          }}
+          className={cn(
+            'flex justify-start',
+            isCustomSelected ? '!bg-fill-theme-select' : '',
+          )}
+        >
+          {t('customPrompt.custom')}
+        </Button>
+        <Separator className='mt-2' />
+      </div>
+      <Button
+        onMouseDown={(e) => e.preventDefault()}
+        variant={'ghost'}
+        onClick={() => {
+          setSelectedCategory(null);
+          setIsCustomSelected(false);
+          setIsFeaturedSelected(false);
+        }}
+        className={cn(
+          'flex flex-shrink-0 justify-start',
+          isAllSelected && '!bg-fill-theme-select',
+        )}
+      >
+        {t('customPrompt.all')}
+      </Button>
+      {categoryList.map((category) => (
+        <Button
+          key={category ?? 'all'}
+          variant={'ghost'}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => {
+            setSelectedCategory(category as AiPromptCategory | null);
+            setIsFeaturedSelected(false);
+            setIsCustomSelected(false);
+          }}
+          className={cn(
+            'flex flex-shrink-0 justify-start',
+            selectedCatecory === category ? '!bg-fill-theme-select' : '',
+          )}
+        >
+          {t(`customPrompt.${category}`, category)}
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-database/index.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-database/index.tsx
new file mode 100644
index 00000000..bb19a356
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-database/index.tsx
@@ -0,0 +1,314 @@
+import { Button } from '../../../ui/button';
+import { Dialog, DialogContent, DialogTitle } from '../../../ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu';
+import { useTranslation } from '../../../../i18n';
+import { cn } from '../../../../lib/utils';
+import { usePromptModal } from '../../../../provider/prompt-modal-provider';
+import { ChevronDown } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PromptDatabaseViews } from './prompt-database-views';
+import { ReactComponent as CloseCircle } from '../../../../assets/icons/close_circle.svg';
+import { InvalidDatabaseDialog } from './invalid-database-dialog';
+import { useViewLoader } from '../../../../provider/view-loader-provider';
+
+export function PromptDatabaseModal({
+  isOpen,
+  closeModal,
+}: {
+  isOpen: boolean;
+  closeModal: () => void;
+}) {
+  const { getView } = useViewLoader();
+
+  const { t } = useTranslation();
+
+  const {
+    databaseConfig,
+    fields,
+    saveDatabaseConfig,
+    testDatabasePromptConfig,
+  } = usePromptModal();
+
+  const [currentDatabaseConfig, setCurrentDatabaseConfig] =
+    useState(databaseConfig);
+  const [currentFields, setCurrentFields] = useState(fields || []);
+  const [isInvalidModalOpen, setIsInvalidModalOpen] = useState(false);
+
+  useEffect(() => {
+    setCurrentDatabaseConfig(databaseConfig);
+    setCurrentFields(fields || []);
+  }, [databaseConfig, fields]);
+
+  const [viewName, setViewName] = useState<string | null>(null);
+
+  useEffect(() => {
+    void (async () => {
+      if (!currentDatabaseConfig) return;
+      if (!currentDatabaseConfig.databaseViewId) return;
+
+      const view = await getView(currentDatabaseConfig.databaseViewId);
+
+      setViewName(view?.name ?? null);
+    })();
+  }, [currentDatabaseConfig, getView]);
+
+  const handleChangeViewId = useCallback(
+    async (viewId: string) => {
+      if (!viewId) return;
+
+      if (testDatabasePromptConfig) {
+        try {
+          const { config: newConfig, fields: newFields } =
+            await testDatabasePromptConfig(viewId);
+
+          setCurrentDatabaseConfig(newConfig);
+          setCurrentFields(newFields);
+        } catch (e) {
+          console.error('Error testing database prompt config:', e);
+          setIsInvalidModalOpen(true);
+          return;
+        }
+      }
+    },
+    [testDatabasePromptConfig],
+  );
+
+  const handleChangeContentId = useCallback(
+    (contentFieldId: string) => {
+      if (!currentDatabaseConfig) return;
+      const newConfig = {
+        ...currentDatabaseConfig,
+        contentFieldId,
+      };
+      setCurrentDatabaseConfig(newConfig);
+    },
+    [currentDatabaseConfig],
+  );
+
+  const handleChangeExampleId = useCallback(
+    (exampleFieldId: string | null) => {
+      if (!currentDatabaseConfig) return;
+      const newConfig = {
+        ...currentDatabaseConfig,
+        exampleFieldId: exampleFieldId,
+      };
+      setCurrentDatabaseConfig(newConfig);
+    },
+    [currentDatabaseConfig],
+  );
+
+  const handleChangeCategoryId = useCallback(
+    (categoryFieldId: string | null) => {
+      if (!currentDatabaseConfig) return;
+      const newConfig = {
+        ...currentDatabaseConfig,
+        categoryFieldId: categoryFieldId,
+      };
+      setCurrentDatabaseConfig(newConfig);
+    },
+    [currentDatabaseConfig],
+  );
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open && closeModal) {
+          setCurrentDatabaseConfig(databaseConfig);
+          setCurrentFields(fields || []);
+          closeModal();
+        }
+      }}
+    >
+      <DialogContent
+        className='h-[400px] w-[450px] flex flex-col gap-3 min-h-0 sm:max-w-[calc(100%-2rem)]'
+        onEscapeKeyDown={(_e) => {}}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <DialogTitle className='text-md text-text-primary font-bold'>
+          {t('customPrompt.configureDatabase')}
+        </DialogTitle>
+        <div className='flex-1 flex flex-col min-h-0 w-full gap-4 px-2 py-4'>
+          <div className='flex items-center'>
+            <span className='flex-1 text-sm text-text-secondary'>
+              {t('customPrompt.selectDatabase')}
+            </span>
+            <PromptDatabaseViews onSelectView={handleChangeViewId}>
+              <div className='flex-1 flex justify-center'>
+                <Button variant={'outline'}>
+                  {viewName === null
+                    ? t('customPrompt.selectDatabase')
+                    : viewName === ''
+                      ? t('view.placeholder')
+                      : viewName}
+                </Button>
+              </div>
+            </PromptDatabaseViews>
+          </div>
+          {currentDatabaseConfig && (
+            <div className='flex flex-col gap-2'>
+              <FieldSelector
+                title={t('customPrompt.title')}
+                selectedFieldId={currentDatabaseConfig?.titleFieldId || null}
+                fields={currentFields.filter((f) => !f.isSelect)}
+                isDisabled={true}
+                onFieldChange={() => {}}
+              />
+              <FieldSelector
+                title={t('customPrompt.content')}
+                selectedFieldId={currentDatabaseConfig?.contentFieldId || null}
+                fields={currentFields.filter((f) => !f.isSelect)}
+                onFieldChange={handleChangeContentId}
+              />
+              <FieldSelector
+                title={t('customPrompt.example')}
+                selectedFieldId={currentDatabaseConfig?.exampleFieldId || null}
+                fields={currentFields.filter((f) => !f.isSelect)}
+                onFieldChange={handleChangeExampleId}
+                isOptional={true}
+              />
+              <FieldSelector
+                title={t('customPrompt.category')}
+                selectedFieldId={currentDatabaseConfig?.categoryFieldId || null}
+                fields={currentFields}
+                onFieldChange={handleChangeCategoryId}
+                isOptional={true}
+              />
+            </div>
+          )}
+        </div>
+        <div className='flex gap-3 items-center justify-end'>
+          <Button
+            variant='outline'
+            onClick={() => {
+              setCurrentDatabaseConfig(databaseConfig);
+              setCurrentFields(fields || []);
+              closeModal();
+            }}
+          >
+            {t('customPrompt.button.cancel')}
+          </Button>
+          <Button
+            disabled={!currentDatabaseConfig}
+            onClick={() => {
+              if (currentDatabaseConfig) {
+                saveDatabaseConfig(currentDatabaseConfig);
+              }
+              closeModal();
+            }}
+          >
+            {t('customPrompt.button.done')}
+          </Button>
+        </div>
+        <InvalidDatabaseDialog
+          isOpen={isInvalidModalOpen}
+          setIsOpen={setIsInvalidModalOpen}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function FieldSelector({
+  title,
+  selectedFieldId,
+  fields,
+  onFieldChange,
+  isDisabled,
+  isOptional,
+}: {
+  title: string;
+  selectedFieldId: string | null;
+  fields: { id: string; name: string }[];
+  onFieldChange: (fieldId: string) => void;
+  isDisabled?: boolean;
+  isOptional?: boolean;
+}) {
+  const { t } = useTranslation();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const closeButtonRef = useRef<HTMLDivElement>(null);
+
+  const value =
+    fields.find((field) => field.id === selectedFieldId) ||
+    (isOptional === true ? undefined : fields[0]);
+
+  return (
+    <div className='flex items-center'>
+      <span className='flex-1 text-text-secondary text-sm'>{title}</span>
+      <div className='relative flex-1 flex'>
+        <DropdownMenu open={isOpen} onOpenChange={setIsOpen} modal={false}>
+          <DropdownMenuTrigger
+            asChild
+            onPointerDown={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            onClick={(e) => {
+              if (
+                closeButtonRef.current &&
+                closeButtonRef.current.contains(e.target as Node)
+              ) {
+                onFieldChange('');
+              }
+              setIsOpen((prev) => !prev);
+            }}
+          >
+            <div
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+              className={cn(
+                'flex-1 flex items-center border cursor-default h-8 text-sm px-2 rounded-300 gap-1 font-normal',
+                (!value || isDisabled) && 'text-text-tertiary',
+                isDisabled && 'pointer-events-none bg-fill-content-hover',
+                isOpen
+                  ? 'border-border-theme-thick'
+                  : isHovered
+                    ? 'border-border-primary-hover'
+                    : 'border-border-primary',
+              )}
+            >
+              <span
+                className='flex-1 truncate'
+                onMouseDown={(e) => e.preventDefault()}
+              >
+                {value?.name || t('customPrompt.optional')}
+              </span>
+              {isOptional && isOpen && value && (
+                <div ref={closeButtonRef}>
+                  <CloseCircle className='h-5 w-5 text-icon-tertiary' />
+                </div>
+              )}
+              <ChevronDown size={16} className='text-icon-primary' />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className='w-[--radix-dropdown-menu-trigger-width]'>
+            <DropdownMenuRadioGroup
+              value={value?.id}
+              onValueChange={onFieldChange}
+            >
+              {fields.map((item) => (
+                <DropdownMenuRadioItem
+                  key={item.id}
+                  value={item.id}
+                  onMouseEnter={() => setIsHovered(true)}
+                  onMouseLeave={() => setIsHovered(false)}
+                >
+                  {item.name}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-database/invalid-database-dialog.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-database/invalid-database-dialog.tsx
new file mode 100644
index 00000000..d127ed6f
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-database/invalid-database-dialog.tsx
@@ -0,0 +1,46 @@
+import { Button } from '../../../ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../../ui/dialog';
+import { useTranslation } from '../../../../i18n';
+
+export function InvalidDatabaseDialog({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onCloseAutoFocus={(e) => e.preventDefault()}
+      >
+        <DialogHeader className={'!text-left'}>
+          <DialogTitle>{t('customPrompt.invalidDatabase')}</DialogTitle>
+          <DialogDescription className={'whitespace-pre-line'}>
+            {t('customPrompt.invalidDatabaseHelp')}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              setIsOpen(false);
+            }}
+            type='submit'
+          >
+            {t('customPrompt.button.ok')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-database/prompt-database-views.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-database/prompt-database-views.tsx
new file mode 100644
index 00000000..fb8f5be4
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-database/prompt-database-views.tsx
@@ -0,0 +1,44 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../../ui/popover';
+import { SearchInput } from '../../../ui/search-input';
+import { Separator } from '../../../ui/separator';
+import { ReactNode, useState } from 'react';
+import { SpaceList } from './space-list';
+
+export function PromptDatabaseViews({
+  onSelectView,
+  children,
+}: {
+  onSelectView: (viewId: string) => void;
+  children: ReactNode;
+}) {
+  const [searchValue, setSearchValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelectDatabaseView = (viewId: string) => {
+    if (!viewId) return;
+    onSelectView(viewId);
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover modal open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent>
+        <div className='h-fit py-1 px-1 min-h-[200px] max-h-[360px] w-[300px] flex gap-2 flex-col'>
+          <SearchInput value={searchValue} onChange={setSearchValue} />
+          <Separator />
+          <div className='overflow-x-hidden overflow-y-auto flex-1 appflowy-scrollbar'>
+            <SpaceList
+              searchValue={searchValue}
+              onSelectDatabaseView={handleSelectDatabaseView}
+            />
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-database/space-list.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-database/space-list.tsx
new file mode 100644
index 00000000..d7838973
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-database/space-list.tsx
@@ -0,0 +1,81 @@
+import { useViewLoader } from '../../../../provider/view-loader-provider';
+import LoadingDots from '../../../ui/loading-dots';
+import SpaceItem from '../../../view/space-item';
+import { useTranslation } from '../../../../i18n';
+import { hasDatabaseViewChild, searchDatabaseViews } from '../../../../lib/views';
+import { View } from '../../../../types';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import ViewList from './view-list';
+
+export function SpaceList({
+  searchValue,
+  onSelectDatabaseView: onSelectDatabaseView,
+}: {
+  searchValue: string;
+  onSelectDatabaseView: (viewId: string) => void;
+}) {
+  const { t } = useTranslation();
+
+  const { fetchViews, viewsLoading } = useViewLoader();
+
+  const [folder, setFolder] = useState<View | null>(null);
+
+  const filterDatabaseViews = useCallback((views: View[]): View[] => {
+    return views
+      .filter((view) => hasDatabaseViewChild(view))
+      .map((view) => ({
+        ...view,
+        children:
+          view.children.length > 0 ? filterDatabaseViews(view.children) : [],
+      }));
+  }, []);
+
+  useEffect(() => {
+    void (async () => {
+      const data = await fetchViews((v) => v);
+      if (!data) return;
+      setFolder(data);
+    })();
+  }, [fetchViews, filterDatabaseViews]);
+
+  const filteredSpaces = useMemo(() => {
+    if (!folder || !folder.children) return [];
+
+    const spaces = folder.children.filter((view) => view.extra?.is_space);
+    const filteredViews = filterDatabaseViews(spaces);
+
+    return searchDatabaseViews(filteredViews, searchValue);
+  }, [filterDatabaseViews, folder, searchValue]);
+
+  if (viewsLoading) {
+    return (
+      <div className={'flex w-full h-full  py-10 items-center justify-center'}>
+        <LoadingDots />
+      </div>
+    );
+  }
+
+  if (!filteredSpaces || filteredSpaces.length === 0) {
+    return (
+      <div
+        className={
+          'flex w-full opacity-60 h-full py-10 items-center justify-center'
+        }
+      >
+        {t('search.noSpacesFound')}
+      </div>
+    );
+  }
+
+  return (
+    <div className={'flex flex-col gap-1 w-full h-full'}>
+      {filteredSpaces.map((view: View) => {
+        return (
+          <SpaceItem key={view.view_id} view={view}>
+            <ViewList onSelectDatabaseView={onSelectDatabaseView} item={view} />
+          </SpaceItem>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-database/view-item.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-database/view-item.tsx
new file mode 100644
index 00000000..081791c3
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-database/view-item.tsx
@@ -0,0 +1,78 @@
+import { ReactComponent as ChevronDown } from '../../../../assets/icons/drop_menu_show.svg';
+import { Button } from '../../../ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../../ui/tooltip';
+import PageIcon from '../../../view/page-icon';
+import { useTranslation } from '../../../../i18n';
+import { cn } from '../../../../lib/utils';
+import { View } from '../../../../types';
+import { useMemo, useState } from 'react';
+
+export function ViewItem({
+  view,
+  children,
+  onSelectDatabaseView,
+}: {
+  view: View;
+  children?: React.ReactNode;
+  onSelectDatabaseView: (viewId: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const { t } = useTranslation();
+
+  const name = view.name || t('view.placeholder');
+
+  const ToggleButton = useMemo(() => {
+    return view.children.length > 0 ? (
+      <Button
+        variant={'ghost'}
+        size={'icon'}
+        className={'!w-4 !h-4 !min-w-4 !min-h-4 hover:bg-muted-foreground/10'}
+        onClick={(e) => {
+          e.stopPropagation();
+          setExpanded(!expanded);
+        }}
+      >
+        <ChevronDown
+          className={cn(
+            'transform transition-transform',
+            expanded ? 'rotate-0' : '-rotate-90',
+          )}
+        />
+      </Button>
+    ) : (
+      <div style={{ width: 16, height: 16 }}></div>
+    );
+  }, [expanded, view.children.length]);
+
+  return (
+    <div className={'flex flex-col'}>
+      <div
+        onClick={() => onSelectDatabaseView(view.view_id)}
+        className={
+          'px-1.5 h-[28px] w-full select-none text-sm cursor-pointer rounded-[8px] flex items-center justify-between gap-2 hover:bg-muted'
+        }
+      >
+        <div className={'flex items-center gap-2 w-full overflow-hidden'}>
+          <div className={'flex items-center gap-0.5'}>
+            {ToggleButton}
+            <PageIcon view={view} />
+          </div>
+          <TooltipProvider>
+            <Tooltip disableHoverableContent={true}>
+              <TooltipTrigger asChild>
+                <span className={'flex-1 truncate'}>{name}</span>
+              </TooltipTrigger>
+              <TooltipContent>{name}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+      {expanded && children}
+    </div>
+  );
+}
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-database/view-list.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-database/view-list.tsx
new file mode 100644
index 00000000..ec30d6c1
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-database/view-list.tsx
@@ -0,0 +1,32 @@
+import { View } from '../../types';
+import { ViewItem } from './view-item';
+
+function ViewList({
+  item,
+  onSelectDatabaseView,
+}: {
+  item: View;
+  onSelectDatabaseView: (viewId: string) => void;
+}) {
+  if (!item.children || item.children.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={'flex pl-4 flex-col gap-1'}>
+      {item.children.map((view: View) => {
+        return (
+          <ViewItem
+            key={view.view_id}
+            view={view}
+            onSelectDatabaseView={onSelectDatabaseView}
+          >
+            <ViewList onSelectDatabaseView={onSelectDatabaseView} item={view} />
+          </ViewItem>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ViewList;
diff --git a/src/components/chat/components/chat-input/prompt-modal/prompt-preview.tsx b/src/components/chat/components/chat-input/prompt-modal/prompt-preview.tsx
new file mode 100644
index 00000000..aac2d6c8
--- /dev/null
+++ b/src/components/chat/components/chat-input/prompt-modal/prompt-preview.tsx
@@ -0,0 +1,60 @@
+import { Button } from '../../ui/button';
+import { useTranslation } from '../../../i18n';
+import { AiPrompt } from '../../../types/prompt';
+import { useMemo } from 'react';
+
+export function PromptPreview({
+  prompt,
+  onUsePrompt,
+}: {
+  prompt: AiPrompt;
+  onUsePrompt: () => void;
+}) {
+  const { t } = useTranslation();
+
+  const formattedContent = useMemo(() => {
+    if (!prompt?.content) return null;
+
+    const parts = prompt.content.split(/(\[.*?\])/g);
+
+    return parts.map((part, index) => {
+      if (part.startsWith('[') && part.endsWith(']')) {
+        return (
+          <span key={index} className='text-text-featured'>
+            {part}
+          </span>
+        );
+      }
+      return <span key={index}>{part}</span>;
+    });
+  }, [prompt?.content]);
+
+  return (
+    <>
+      <div className='flex items-center justify-between gap-1.5 sticky top-0 bg-background-primary pb-3'>
+        <span className='text-2xl text-text-primary'>{prompt?.name}</span>
+        <Button onClick={onUsePrompt} className='px-4 py-1.5'>
+          {t('customPrompt.usePrompt')}
+        </Button>
+      </div>
+      <div className='flex flex-col gap-4 pt-3'>
+        <div className='flex flex-col gap-1'>
+          <span className='text-text-primary'>{t('customPrompt.prompt')}</span>
+          <span className='text-sm text-text-primary p-3 rounded-[8px] bg-surface-container-layer-01 whitespace-pre-wrap'>
+            {formattedContent}
+          </span>
+        </div>
+        {prompt?.example && (
+          <div className='flex flex-col gap-1'>
+            <span className='text-text-primary'>
+              {t('customPrompt.promptExample')}
+            </span>
+            <span className='text-sm text-text-primary p-3 rounded-[8px] bg-surface-container-layer-01 whitespace-pre-wrap'>
+              {prompt.example}
+            </span>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/chat/components/chat-input/related-views/index.tsx b/src/components/chat/components/chat-input/related-views/index.tsx
new file mode 100644
index 00000000..21cda9c1
--- /dev/null
+++ b/src/components/chat/components/chat-input/related-views/index.tsx
@@ -0,0 +1,119 @@
+import LoadingDots from '../../ui/loading-dots';
+import { SearchInput } from '../../ui/search-input';
+import { Spaces } from './spaces';
+import { Button } from '../../../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../../ui/popover';
+import { ReactComponent as DocIcon } from '../../../assets/icons/doc.svg';
+import { Separator } from '../../../../ui/separator';
+import { useChatSettingsLoader } from '../../../hooks/use-chat-settings-loader';
+import { useCheckboxTree } from '../../../hooks/use-checkbox-tree';
+import { searchViews } from '../../../lib/views';
+import { View } from '../../../types';
+import { ChevronDown } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash-es/debounce';
+import { useViewLoader } from '../../..';
+
+export function RelatedViews() {
+
+  const [searchValue, setSearchValue] = useState('');
+
+  const {
+    chatSettings,
+    fetchChatSettings,
+    updateChatSettings,
+  } = useChatSettingsLoader();
+
+  const viewIds = useMemo(() => {
+    return chatSettings?.rag_ids || [];
+  }, [chatSettings]);
+
+  useEffect(() => {
+    void fetchChatSettings();
+  }, [fetchChatSettings]);
+
+  const {
+    fetchViews,
+    viewsLoading,
+  } = useViewLoader();
+
+  const [folder, setFolder] = useState<View | null>(null);
+
+  useEffect(() => {
+    void (async() => {
+      const data = await fetchViews();
+      if(!data) return;
+      setFolder(data);
+    })();
+  }, [fetchViews]);
+
+  const filteredSpaces = useMemo(() => {
+    const spaces = folder?.children.filter(view => view.extra?.is_space);
+    return searchViews(spaces || [], searchValue);
+  }, [folder, searchValue]);
+
+  const views = useMemo(() => {
+    return folder?.children || [];
+  }, [folder]);
+
+  const {
+    getSelected,
+    getCheckStatus,
+    toggleNode,
+    getInitialExpand,
+  } = useCheckboxTree(viewIds, views);
+
+  const length = getSelected().length;
+
+  const handleToggle = useMemo(() => {
+    return debounce(async(ids: string[]) => {
+      await updateChatSettings({
+        rag_ids: ids,
+      });
+    }, 500);
+  }, [updateChatSettings]);
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild={true}>
+        <Button
+          disabled={viewsLoading}
+          className={'text-sm h-7 p-1.5'}
+          startIcon={
+            <span className={'text-foreground'}><DocIcon /></span>
+          }
+          variant={'ghost'}
+        >
+          {length}
+          {viewsLoading ? <LoadingDots size={12} /> : <ChevronDown className={'!w-2 !h-2'} />}
+
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className={'h-fit py-1 px-1 min-h-[200px] max-h-[360px] w-[300px] flex gap-2 flex-col'}>
+          <SearchInput
+            value={searchValue}
+            onChange={setSearchValue}
+          />
+          <Separator />
+          <div className={'overflow-x-hidden overflow-y-auto flex-1 appflowy-scrollbar'}>
+            <Spaces
+              getInitialExpand={getInitialExpand}
+              spaces={filteredSpaces}
+              viewsLoading={viewsLoading}
+              getCheckStatus={getCheckStatus}
+              onToggle={
+                (view: View) => {
+                  const ids = toggleNode(view);
+                  void handleToggle(Array.from(ids));
+                }
+              }
+            />
+          </div>
+
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
diff --git a/src/components/chat/components/chat-input/related-views/spaces.tsx b/src/components/chat/components/chat-input/related-views/spaces.tsx
new file mode 100644
index 00000000..705b81a7
--- /dev/null
+++ b/src/components/chat/components/chat-input/related-views/spaces.tsx
@@ -0,0 +1,58 @@
+import ViewChildren from '../../view/view-children';
+import SpaceItem from '../../view/space-item';
+import LoadingDots from '../../ui/loading-dots';
+import { useTranslation } from '../../../i18n';
+import { View } from '../../../types';
+import { CheckStatus } from '../../../types/checkbox';
+
+interface SpacesProps {
+  getCheckStatus: (view: View) => CheckStatus;
+  onToggle: (view: View) => void;
+  spaces: View[];
+  viewsLoading: boolean;
+  getInitialExpand: (viewId: string) => boolean;
+}
+
+export function Spaces({
+  getCheckStatus,
+  onToggle,
+  spaces,
+  viewsLoading,
+  getInitialExpand,
+}: SpacesProps) {
+  const { t } = useTranslation();
+
+  if(viewsLoading) {
+    return <div className={'flex w-full h-full items-center py-10 justify-center'}>
+      <LoadingDots />
+    </div>;
+  }
+
+  if(!spaces || spaces.length === 0) {
+    return <div className={'flex w-full opacity-60 h-full py-10 items-center justify-center'}>
+      {t('search.noSpacesFound')}
+    </div>;
+  }
+
+  return (
+    <div className={'flex flex-col gap-1 h-full w-full'}>
+      {spaces.map((view: View) => {
+        return (
+          <SpaceItem
+            key={view.view_id}
+            view={view}
+            getInitialExpand={getInitialExpand}
+          >
+            <ViewChildren
+              item={view}
+              getInitialExpand={getInitialExpand}
+              onToggle={onToggle}
+              getCheckStatus={getCheckStatus}
+            />
+          </SpaceItem>
+        );
+      })}
+    </div>
+  );
+}
+
diff --git a/src/components/chat/components/chat-messages/add-message-to.tsx b/src/components/chat/components/chat-messages/add-message-to.tsx
new file mode 100644
index 00000000..bcd05d1f
--- /dev/null
+++ b/src/components/chat/components/chat-messages/add-message-to.tsx
@@ -0,0 +1,55 @@
+import { AddMessageToPageWrapper } from '../add-messages-to-page-wrapper';
+import { Button } from '../../../ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/tooltip';
+import { ReactComponent as AddPageIcon } from '../../assets/icons/doc-forward.svg';
+import { useTranslation } from '../../i18n';
+import { useChatMessagesContext } from '../../provider/messages-provider';
+
+export function AddMessageTo({ id }: {
+  id: number
+}) {
+  const {
+    getMessage,
+  } = useChatMessagesContext();
+
+  const message = getMessage(id);
+  const {
+    t,
+  } = useTranslation();
+
+  if(!message) return null;
+
+  return (
+    <Tooltip>
+      <AddMessageToPageWrapper messages={[message]}>
+        <TooltipTrigger asChild>
+          <Button
+            onMouseDown={e => {
+              e.preventDefault();
+            }}
+            variant={'ghost'}
+            size={'icon'}
+            className={`h-7 !p-0 w-7`}
+          >
+            <AddPageIcon
+              style={{
+                width: 16,
+                height: 16,
+              }}
+            />
+          </Button>
+        </TooltipTrigger>
+
+      </AddMessageToPageWrapper>
+
+      <TooltipContent
+        align={'center'}
+        side={'bottom'}
+      >
+        {t('button.addToPage')}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export default AddMessageTo;
\ No newline at end of file
diff --git a/src/components/chat/components/chat-messages/ai-answer.tsx b/src/components/chat/components/chat-messages/ai-answer.tsx
new file mode 100644
index 00000000..e740ac3c
--- /dev/null
+++ b/src/components/chat/components/chat-messages/ai-answer.tsx
@@ -0,0 +1,33 @@
+import { AnswerMd } from '../chat-messages/answer-md';
+import { MessageActions } from '../chat-messages/message-actions';
+import MessageSources from '../chat-messages/message-sources';
+import { ChatMessageMetadata } from '../../types';
+import { EditorProvider } from '@appflowyinc/editor';
+import MessageCheckbox from './message-checkbox';
+
+export function AIAnswer({
+  content,
+  id,
+  sources,
+  isHovered,
+}: {
+  content: string;
+  id: number;
+  sources?: ChatMessageMetadata[];
+  isHovered: boolean;
+}) {
+  return (
+    <div className={`chat-message flex flex-col w-full pl-0.5 relative`}>
+      <div className={'flex gap-2 w-full overflow-hidden py-1'}>
+        <MessageCheckbox id={id} />
+        <EditorProvider>
+          <AnswerMd id={id} mdContent={content} />
+        </EditorProvider>
+      </div>
+      {sources && sources.length > 0 ? (
+        <MessageSources sources={sources} />
+      ) : null}
+      <MessageActions id={id} isHovered={isHovered} />
+    </div>
+  );
+}
diff --git a/src/components/chat/components/chat-messages/answer-md.tsx b/src/components/chat/components/chat-messages/answer-md.tsx
new file mode 100644
index 00000000..201d6f04
--- /dev/null
+++ b/src/components/chat/components/chat-messages/answer-md.tsx
@@ -0,0 +1,49 @@
+import { Alert, AlertDescription } from '../ui/alert';
+import { useEditorContext } from '../../provider/editor-provider';
+import { Editor, useEditor } from '@appflowyinc/editor';
+import { useEffect } from 'react';
+
+import { ErrorBoundary } from 'react-error-boundary';
+
+export function AnswerMd({
+  mdContent,
+  id,
+}: {
+  mdContent: string;
+  id: number;
+}) {
+  const editor = useEditor();
+  const {
+    setEditor: setMessageEditor,
+  } = useEditorContext();
+
+  useEffect(() => {
+    setMessageEditor(id, editor);
+  }, [editor, id, setMessageEditor]);
+
+  useEffect(() => {
+
+    if(!mdContent) return;
+
+    try {
+      editor.applyMarkdown(mdContent);
+    } catch(error) {
+      console.error('Failed to apply markdown', error);
+    }
+  }, [editor, mdContent]);
+
+  return (
+    <ErrorBoundary
+      fallback={<Alert variant={'destructive'}>
+        <AlertDescription>
+          Failed to render content
+        </AlertDescription>
+      </Alert>}
+    >
+      <Editor
+        readOnly
+      />
+    </ErrorBoundary>
+  );
+}
+
diff --git a/src/components/chat/components/chat-messages/assistant-message.tsx b/src/components/chat/components/chat-messages/assistant-message.tsx
new file mode 100644
index 00000000..da1a9d54
--- /dev/null
+++ b/src/components/chat/components/chat-messages/assistant-message.tsx
@@ -0,0 +1,117 @@
+import { AnswerMd } from '../chat-messages/answer-md';
+import { MessageActions } from '../chat-messages/message-actions';
+import MessageSources from '../chat-messages/message-sources';
+import { MessageSuggestions } from '../chat-messages/message-suggestions';
+import LoadingDots from '../ui/loading-dots';
+import { useTranslation } from '../../i18n';
+import { useMessagesHandlerContext } from '../../provider/messages-handler-provider';
+import { useChatMessagesContext } from '../../provider/messages-provider';
+import { useResponseFormatContext } from '../../provider/response-format-provider';
+import { useSuggestionsContext } from '../../provider/suggestions-provider';
+import { ChatInputMode } from '../../types';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Alert, AlertDescription } from '../ui/alert';
+import { EditorProvider } from '@appflowyinc/editor';
+import { ReactComponent as Error } from '../../assets/icons/error.svg';
+import MessageCheckbox from './message-checkbox';
+
+export function AssistantMessage({ id, isHovered }: { id: number; isHovered: boolean }) {
+  const isInitialLoad = useRef(true);
+  const { getMessage } = useChatMessagesContext();
+  const { responseFormat, responseMode } = useResponseFormatContext();
+  const { fetchAnswerStream } = useMessagesHandlerContext();
+
+  const { getMessageSuggestions } = useSuggestionsContext();
+
+  const message = getMessage(id);
+
+  const questionId = id - 1;
+  const sources = message?.meta_data;
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<boolean>(false);
+  const [content, setContent] = useState<string>('');
+  const [done, setDone] = useState<boolean>(false);
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (!questionId || !isInitialLoad.current || loading) return;
+    void (async () => {
+      setLoading(true);
+
+      try {
+        isInitialLoad.current = false;
+        await fetchAnswerStream(
+          questionId,
+          responseMode === ChatInputMode.FormatResponse
+            ? {
+                output_content: responseFormat.output_content,
+                output_layout: responseFormat.output_layout,
+              }
+            : undefined,
+          (text, done) => {
+            if (done || text) {
+              setLoading(false);
+            }
+            setDone(done || false);
+            setContent(text);
+          },
+        );
+        // eslint-disable-next-line
+      } catch (e: any) {
+        console.error(e);
+        setError(true);
+        setLoading(false);
+      }
+    })();
+  }, [fetchAnswerStream, questionId, responseFormat, responseMode, loading]);
+
+  const suggestions = useMemo(() => {
+    if (!questionId) return null;
+    return getMessageSuggestions(questionId);
+  }, [questionId, getMessageSuggestions]);
+
+  return (
+    <div
+      className={
+        'assistant-message transform transition-transform flex flex-col w-full gap-1 relative'
+      }
+    >
+      {error ? (
+        <div className={`flex items-center w-full justify-center`}>
+          <div className="max-w-[480px]">
+            <Alert className={'border-none text-foreground bg-red-500/10'}>
+              <AlertDescription>
+                <div className="flex gap-3 items-center">
+                  <div className={'!w-4 !h-4 !min-w-4 !min-h-4'}>
+                    <Error />
+                  </div>
+                  {t('errors.noLimit')}
+                </div>
+              </AlertDescription>
+            </Alert>
+          </div>
+        </div>
+      ) : loading
+        ? (
+          <div className={`flex gap-2 overflow-hidden items-center pl-0.5`}>
+            <span className={'text-foreground opacity-60 text-sm'}>{t('generating')}</span>
+            <LoadingDots />
+          </div>
+        ) :
+        content && (
+          <div className={'flex gap-2 w-full overflow-hidden py-1 pl-0.5'}>
+            <MessageCheckbox id={id} />
+            <EditorProvider>
+              <AnswerMd id={id} mdContent={content} />
+            </EditorProvider>
+          </div>
+        )
+      }
+      {sources && sources.length > 0 ? <MessageSources sources={sources} /> : null}
+      {done && <MessageActions id={id} isHovered={isHovered} />}
+      {suggestions && suggestions.items.length > 0 ? <MessageSuggestions suggestions={suggestions} /> : null}
+    </div>
+  );
+}
diff --git a/src/components/chat/components/chat-messages/empty-messages.tsx b/src/components/chat/components/chat-messages/empty-messages.tsx
new file mode 100644
index 00000000..fb8398b5
--- /dev/null
+++ b/src/components/chat/components/chat-messages/empty-messages.tsx
@@ -0,0 +1,68 @@
+import { Button } from '../../../ui/button';
+import { Label } from '../../../ui/label';
+import { useTranslation } from '../../i18n';
+import { useMessagesHandlerContext } from '../../provider/messages-handler-provider';
+import { User } from '../../types';
+import { ReactComponent as Logo } from '../../assets/logo.svg';
+import { useCallback } from 'react';
+
+export function EmptyMessages({ currentUser }: {
+  currentUser?: User;
+}) {
+  const { t } = useTranslation();
+  const {
+    submitQuestion,
+  } = useMessagesHandlerContext();
+
+  const handleClick = useCallback(async(content: string) => {
+    try {
+      await submitQuestion(content);
+    } catch(e) {
+      console.error(e);
+    }
+  }, [submitQuestion]);
+
+  return (
+    <div className={'w-full h-full justify-center items-center flex flex-col gap-8'}>
+      <div className={'flex flex-col gap-6 w-full justify-center items-center'}>
+        <Logo className={'h-10 w-10 text-text-secondary'} />
+        <Label className={'text-foreground/70'}>{t('placeholder', {
+          name: currentUser?.name || t('dear'),
+        })}</Label>
+      </div>
+      <div className={'flex flex-col text-foreground/60 gap-4 w-full justify-center items-center'}>
+        <Button
+          onClick={() => handleClick(t('questions.one'))}
+          variant={'outline'}
+          className={'rounded-full py-2 px-4 shadow-sm'}
+        >
+          {t('questions.one')}
+        </Button>
+        <Button
+          onClick={() => handleClick(t('questions.two'))}
+          variant={'outline'}
+          className={'rounded-full py-2 px-4 shadow-sm'}
+        >
+          {t('questions.two')}
+        </Button>
+        <Button
+          onClick={() => handleClick(t('questions.three'))}
+          variant={'outline'}
+          className={'rounded-full py-2 px-4 shadow-sm'}
+        >
+          {t('questions.three')}
+        </Button>
+        <Button
+          onClick={() => handleClick(t('questions.four'))}
+          variant={'outline'}
+          className={'rounded-full py-2 px-4 shadow-sm'}
+        >
+          {t('questions.four')}
+        </Button>
+      </div>
+
+
+    </div>
+  );
+}
+
diff --git a/src/components/chat/components/chat-messages/human-question.tsx b/src/components/chat/components/chat-messages/human-question.tsx
new file mode 100644
index 00000000..c7c55289
--- /dev/null
+++ b/src/components/chat/components/chat-messages/human-question.tsx
@@ -0,0 +1,51 @@
+import { Avatar, AvatarFallback } from '../../../ui/avatar';
+import { stringToColor } from '../../lib/utils';
+import { User } from '../../types';
+import { useEffect, useState } from 'react';
+
+function HumanQuestion({
+  content,
+  userId,
+  fetchMember,
+}: {
+  content: string;
+  userId: string;
+  fetchMember: (uuid: string) => Promise<User>;
+}) {
+
+  const [member, setMember] = useState<User | null>(null);
+
+  useEffect(() => {
+    void (async() => {
+      try {
+        const member = await fetchMember(userId);
+        setMember(member);
+      } catch(e) {
+        console.error(e);
+      }
+    })();
+  }, [fetchMember, userId]);
+
+  const name = member?.name || 'Anonymous';
+
+  return (
+    <div className={`flex gap-2 w-full`}>
+      <div className={'flex-1 flex items-center justify-end'}>
+        <div className={'w-fit max-w-[83%] bg-muted rounded-[16px] px-4 py-2'}>
+          {content}
+        </div>
+      </div>
+      <Avatar className={'w-9 h-9 border border-border'}>
+        <AvatarFallback
+          style={{
+            background: stringToColor(name),
+          }}
+        >
+          {name[0]}
+        </AvatarFallback>
+      </Avatar>
+    </div>
+  );
+}
+
+export default HumanQuestion;
\ No newline at end of file
diff --git a/src/components/chat/components/chat-messages/index.tsx b/src/components/chat/components/chat-messages/index.tsx
new file mode 100644
index 00000000..c583f2dd
--- /dev/null
+++ b/src/components/chat/components/chat-messages/index.tsx
@@ -0,0 +1,167 @@
+import { useChatContext } from '../../chat/context';
+import { EmptyMessages } from '../chat-messages/empty-messages';
+import { Message } from '../chat-messages/message';
+import { useChatMessages } from '../chat-messages/use-chat-messages';
+import { Button } from '../../../ui/button';
+import LoadingDots from '../ui/loading-dots';
+import { useUserLoader } from '../../hooks/use-user-loader';
+import { ANIMATION_PRESETS } from '../../lib/animations';
+import { User } from '../../types';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { ArrowDown } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { cn } from '../../lib/utils';
+
+const LoadingIndicator = () => (
+  <div className="flex items-center justify-center w-full h-[48px]">
+    <LoadingDots />
+  </div>
+);
+
+export function ChatMessages({ currentUser }: {
+  currentUser?: User;
+}) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const isFirstLoadRef = useRef(true);
+  const [hoveredId, setHoveredId] = useState<number | null>(null);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const {
+    fetchMember,
+  } = useUserLoader();
+  const {
+    selectionMode,
+  } = useChatContext();
+
+  const {
+    messageIds,
+    hasMore,
+    isLoading,
+    fetchInitialMessages,
+    loadMoreMessages,
+  } = useChatMessages();
+
+  const scrollToBottom = useCallback((immediate = false) => {
+    const container = scrollContainerRef.current;
+    if(!container) return;
+
+    if(immediate) {
+      container.scrollTop = container.scrollHeight;
+      return;
+    }
+    container.scroll({
+      top: container.scrollHeight,
+      behavior: 'smooth',
+    });
+  }, []);
+
+  const checkScrollPosition = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if(!container) return;
+
+    const scrollTop = container.scrollTop;
+    const distanceFromBottom = Math.abs(scrollTop);
+
+    setShowScrollButton(distanceFromBottom > 100);
+  }, []);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if(!container) return;
+
+    container.addEventListener('scroll', checkScrollPosition);
+    return () => container.removeEventListener('scroll', checkScrollPosition);
+  }, [checkScrollPosition]);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if(!container || !isFirstLoadRef.current || messageIds.length === 0) return;
+    const observer = new MutationObserver(() => {
+      scrollToBottom(true);
+      isFirstLoadRef.current = false;
+      observer.disconnect();
+    });
+
+    observer.observe(scrollContainerRef.current, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+
+  }, [scrollToBottom, messageIds]);
+
+  useEffect(() => {
+    isFirstLoadRef.current = true;
+    void fetchInitialMessages();
+  }, [fetchInitialMessages]);
+
+  return (
+    <div
+      className="relative w-full flex-1 overflow-hidden"
+    >
+      <motion.div
+        layout
+        transition={ANIMATION_PRESETS.SPRING_GENTLE}
+        id="messages-scroller"
+        ref={scrollContainerRef}
+        style={{ flexDirection: 'column-reverse' }}
+        className={cn(
+          "flex px-1 relative pt-8 appflowy-scrollbar overflow-x-hidden gap-4 h-full w-full overflow-auto",
+          selectionMode ? 'pb-9' : 'pb-2',
+        )}
+      >
+        <InfiniteScroll
+          dataLength={messageIds.length}
+          next={loadMoreMessages}
+          hasMore={hasMore}
+          loader={<LoadingIndicator />}
+          inverse={true}
+          scrollableTarget="messages-scroller"
+          style={{ display: 'flex', flexDirection: 'column-reverse' }}
+          className="flex flex-col-reverse"
+          scrollThreshold="200px"
+        >
+          {messageIds.map((id) => (
+            <div
+              onMouseMove={() => setHoveredId(id)}
+              key={id}
+              className={'overflow-x-hidden'}
+            >
+              <Message
+                id={id}
+                isHovered={hoveredId === id}
+                fetchMember={fetchMember}
+              />
+            </div>
+
+          ))}
+
+        </InfiniteScroll>
+        {messageIds.length === 0 && !isLoading &&
+          <div className={'absolute top-0 left-0 w-full h-full'}>
+            <EmptyMessages currentUser={currentUser} />
+          </div>}
+
+      </motion.div>
+      {showScrollButton && (
+        <div className={cn(
+          'absolute left-1/2 transform -translate-x-1/2',
+          selectionMode ? 'bottom-12' : 'bottom-6',
+        )}>
+          <Button
+            variant={'outline'}
+            size={'icon'}
+            onClick={() => {
+              scrollToBottom();
+            }}
+            className="w-8 h-8 rounded-full shadow-menu bg-surface-primary hover:bg-surface-primary-hover"
+          >
+            <ArrowDown size={24} />
+          </Button>
+        </div>
+
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/chat/components/chat-messages/message-actions.tsx b/src/components/chat/components/chat-messages/message-actions.tsx
new file mode 100644
index 00000000..16a52677
--- /dev/null
+++ b/src/components/chat/components/chat-messages/message-actions.tsx
@@ -0,0 +1,148 @@
+import { ReactComponent as CopyIcon } from '../../assets/icons/copy.svg';
+
+import { useChatContext } from '../../chat/context';
+import AddMessageTo from '../chat-messages/add-message-to';
+import Regenerations from '../chat-messages/regenerations';
+import { Button } from '../../../ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/tooltip';
+import { useToast } from '../../hooks/use-toast';
+import { useTranslation } from '../../i18n';
+import { convertToAppFlowyFragment } from '../../lib/copy';
+import { cn, convertToPageData } from '../../lib/utils';
+import { useEditorContext } from '../../provider/editor-provider';
+import { useChatMessagesContext } from '../../provider/messages-provider';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function MessageActions({
+  id,
+  isHovered,
+}: {
+  id: number;
+  isHovered: boolean;
+}) {
+  const {
+    toast,
+  } = useToast();
+
+  const {
+    getMessage,
+    messageIds,
+  } = useChatMessagesContext();
+
+  const {
+    selectionMode,
+  } = useChatContext();
+
+  const { getEditor } = useEditorContext();
+
+  const isLast = messageIds.indexOf(id) === 0;
+  const [visible, setVisible] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const {
+    t,
+  } = useTranslation();
+
+  useEffect(() => {
+    if(isLast) {
+      setVisible(true);
+      return;
+    }
+
+    setVisible(isHovered);
+  }, [isLast, isHovered]);
+
+  const message = getMessage(id);
+
+  const handleCopy = useCallback(async() => {
+    const message = getMessage(id);
+    if(!message) {
+      return;
+    }
+    const editor = getEditor(id);
+    if(!editor) return;
+    try {
+      const data = editor?.getData();
+
+      const newJson = convertToPageData(data);
+
+      const stringifies = JSON.stringify(newJson, null, 2);
+
+      document.addEventListener('copy', (e: ClipboardEvent) => {
+        e.preventDefault();
+        e.clipboardData?.setData('text/plain', message.content);
+        e.clipboardData?.setData('application/json', stringifies);
+
+        const { key, value } = convertToAppFlowyFragment(data);
+        e.clipboardData?.setData(key, value);
+      }, { once: true });
+
+      document.execCommand('copy');
+
+      toast({
+        variant: 'success',
+        description: t('success.copied'),
+        duration: 2000,
+      });
+      // eslint-disable-next-line
+    } catch(e: any) {
+      console.error(e);
+      toast({
+        variant: 'destructive',
+        description: t('errors.copied'),
+        duration: 2000,
+      });
+    }
+
+  }, [getEditor, getMessage, id, t, toast]);
+
+  if(selectionMode) return null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex max-sm:hidden gap-2 min-w-0 w-fit",
+        isLast
+          ? `min-h-[28px] mt-2`
+          : `min-h-[34px] ml-0.5 absolute -bottom-[34px] ${isHovered ? 'p-0.5 border border-border rounded-[8px] shadow-popover' : ''}`
+      )}
+    >
+      {visible && message && (
+        <>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onMouseDown={e => {
+                  e.preventDefault();
+                }}
+                variant={'ghost'}
+                size={'icon'}
+                className={`h-7 !p-0 w-7`}
+                onClick={handleCopy}
+              >
+                <CopyIcon
+                  style={{
+                    width: 16,
+                    height: 16,
+                  }}
+                />
+              </Button>
+            </TooltipTrigger>
+
+            <TooltipContent
+              align={'center'}
+              side={'bottom'}
+            >
+              {t('button.copyClipboard')}
+            </TooltipContent>
+          </Tooltip>
+          <Regenerations id={id} />
+          <AddMessageTo id={id} />
+        </>
+      )}
+    </div>
+
+  );
+}
+
diff --git a/src/components/chat/components/chat-messages/message-checkbox.tsx b/src/components/chat/components/chat-messages/message-checkbox.tsx
new file mode 100644
index 00000000..addfe961
--- /dev/null
+++ b/src/components/chat/components/chat-messages/message-checkbox.tsx
@@ -0,0 +1,49 @@
+import { useChatContext } from '../../chat/context';
+import { Button } from '../../../ui/button';
+import { useChatMessagesContext } from '../../provider/messages-provider';
+import { useSelectionModeContext } from '../../provider/selection-mode-provider';
+import { useMemo } from 'react';
+import { CheckSquare, Square } from 'lucide-react';
+
+function MessageCheckbox({ id }: {
+  id: number
+}) {
+  const {
+    toggleMessage,
+    messages,
+  } = useSelectionModeContext();
+  const {
+    selectionMode,
+  } = useChatContext();
+  const {
+    getMessage,
+  } = useChatMessagesContext();
+  const selected = useMemo(() => messages.find(message => {
+    return message.message_id === id;
+  }), [id, messages]);
+
+  if(!selectionMode) return null;
+
+  return (
+    <Button
+      onClick={() => {
+        const message = getMessage(id);
+        if(!message) return;
+
+        toggleMessage?.(message);
+      }}
+      className={'w-4 h-4 ml-2 p-3'}
+      variant={'link'}
+    >
+      {selected ? <CheckSquare
+        className={'text-primary'}
+        size={16}
+      /> : <Square
+        className={' text-accent-foreground'}
+        size={16}
+      />}
+    </Button>
+  );
+}
+
+export default MessageCheckbox;
\ No newline at end of file
diff --git a/src/components/chat/components/chat-messages/message-sources.tsx b/src/components/chat/components/chat-messages/message-sources.tsx
new file mode 100644
index 00000000..c416b030
--- /dev/null
+++ b/src/components/chat/components/chat-messages/message-sources.tsx
@@ -0,0 +1,89 @@
+import { useChatContext } from '../../chat/context';
+import { Button } from '../ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { useTranslation } from '../../i18n';
+import { ChatMessageMetadata, View } from '../../types';
+import { ChevronDown } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { ReactComponent as DocumentIcon } from '../../assets/icons/doc.svg';
+import { useViewLoader } from '../../provider/view-loader-provider';
+
+function MessageSources({
+  sources,
+}: {
+  sources: ChatMessageMetadata[]
+}) {
+  const {
+    getView,
+  } = useViewLoader();
+  const {
+    onOpenView,
+  } = useChatContext();
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(true);
+
+  const [views, setViews] = useState<View[]>([]);
+
+  useEffect(() => {
+    void (async() => {
+      const views = [];
+      for(const source of sources) {
+        const view = await getView(source.id, false);
+        if(!view) {
+          continue;
+        }
+        views.push({
+          ...view,
+          name: view.name || t('view.placeholder'),
+        });
+      }
+      setViews(views);
+    })();
+  }, [getView, sources, t]);
+
+  return (
+    <div className={'flex flex-col pb-2 max-sm:hidden'}>
+      <Button
+        onClick={() => setExpanded(!expanded)}
+        variant={'link'}
+        className={'w-full opacity-60 !no-underline hover:text-primary text-foreground justify-start'}
+      >
+        <span>{t('sources.label', {
+          sourceCount: sources.length,
+        })}</span>
+
+        <ChevronDown className={`w-4 h-4 ml-1 ${expanded ? 'transform rotate-180' : ''}`} />
+      </Button>
+      {
+        expanded && (
+          <div className={'flex items-start flex-wrap gap-2'}>
+            {views.map((source, index) => (
+              <Tooltip key={index}>
+                <TooltipTrigger asChild>
+                  <Button
+                    onClick={
+                      () => onOpenView?.(source.view_id)
+                    }
+                    variant={'ghost'}
+                    className={'overflow-hidden max-w-[160px]'}
+                    startIcon={
+                      <DocumentIcon />
+                    }
+                  >
+                    <span className={'text-foreground truncate'}>{source.name}</span>
+
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {source.name}
+                </TooltipContent>
+              </Tooltip>
+            ))}
+          </div>
+        )
+      }
+    </div>
+  );
+}
+
+export default MessageSources;
\ No newline at end of file
diff --git a/src/components/chat/components/chat-messages/message-suggestions.tsx b/src/components/chat/components/chat-messages/message-suggestions.tsx
new file mode 100644
index 00000000..c118f0c0
--- /dev/null
+++ b/src/components/chat/components/chat-messages/message-suggestions.tsx
@@ -0,0 +1,67 @@
+import { useChatContext } from '../../chat/context';
+import { Button } from '../../../ui/button';
+import { Label } from '../../../ui/label';
+import { useTranslation } from '../../i18n';
+import { MESSAGE_VARIANTS } from '../../lib/animations';
+import { useMessagesHandlerContext } from '../../provider/messages-handler-provider';
+import { Suggestions } from '../../types';
+import { ReactComponent as ChatIcon } from '../../assets/icons/chat-outlined.svg';
+import { motion } from 'framer-motion';
+
+interface MessageSuggestionsProps {
+  suggestions: Suggestions;
+}
+
+const EmptySuggestions = () => {
+  return (
+    <div className={'flex flex-col gap-4 w-full overflow-hidden mr-auto'}>
+      <Label className={'opacity-60'}>No suggestions</Label>
+    </div>
+  );
+};
+
+export function MessageSuggestions({ suggestions }: MessageSuggestionsProps) {
+  const { t } = useTranslation();
+  const { selectionMode } = useChatContext();
+  const { submitQuestion } = useMessagesHandlerContext();
+
+  const handleClick = async (content: string) => {
+    try {
+      await submitQuestion(content);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  if (selectionMode) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial={'hidden'}
+      animate="visible"
+      variants={MESSAGE_VARIANTS.getSuggestionsVariants()}
+      className={'flex flex-col gap-4 w-full overflow-hidden mr-auto mt-9'}
+    >
+      <Label className={'opacity-60'}>{t('suggestion.title')}</Label>
+      <div className={'flex gap-2 flex-col items-start w-full overflow-hidden'}>
+        {suggestions.items.length === 0 ? (
+          <EmptySuggestions />
+        ) : (
+          suggestions.items.map((suggestion, index) => (
+            <Button
+              key={index}
+              className={'w-full justify-start overflow-hidden h-fit p-2'}
+              onClick={() => handleClick(suggestion.content)}
+              startIcon={<ChatIcon className='w-5 h-5 text-fill-theme-thick' />}
+              variant={'ghost'}
+            >
+              <span className={'text-wrap !text-foreground/85 text-start'}>{suggestion.content}</span>
+            </Button>
+          ))
+        )}
+      </div>
+    </motion.div>
+  );
+}
diff --git a/src/components/chat/components/chat-messages/message.tsx b/src/components/chat/components/chat-messages/message.tsx
new file mode 100644
index 00000000..fb7ea5fd
--- /dev/null
+++ b/src/components/chat/components/chat-messages/message.tsx
@@ -0,0 +1,83 @@
+import { AIAnswer } from '../chat-messages/ai-answer';
+import { AssistantMessage } from '../chat-messages/assistant-message';
+import HumanQuestion from '../chat-messages/human-question';
+import { MESSAGE_VARIANTS } from '../../lib/animations';
+import { cn } from '../../lib/utils';
+import { useMessageAnimation } from '../../provider/message-animation-provider';
+import { useChatMessagesContext } from '../../provider/messages-provider';
+import { useSelectionModeContext } from '../../provider/selection-mode-provider';
+import { AuthorType, User } from '../../types';
+import { motion } from 'framer-motion';
+import { useCallback, useMemo } from 'react';
+
+export const Message = ({
+  id,
+  isHovered,
+  fetchMember,
+}: {
+  id: number;
+  isHovered: boolean;
+  fetchMember: (uuid: string) => Promise<User>;
+}) => {
+  const { animatingIds, completeAnimation } = useMessageAnimation();
+  const shouldAnimate = animatingIds.has(id);
+  const {
+    getMessage,
+  } = useChatMessagesContext();
+
+  const {
+    messages,
+  } = useSelectionModeContext();
+
+  const selected = useMemo(() => messages.find(message => {
+    return message.message_id === id;
+  }), [id, messages]);
+
+  const message = useMemo(() => getMessage(id), [id, getMessage]);
+
+  const renderMessage = useCallback(() => {
+    if(!message) {
+      return null;
+    }
+
+    const authorType = message.author.author_type;
+
+    switch(authorType) {
+      case AuthorType.AI:
+        return <AIAnswer
+          content={message.content}
+          id={message.message_id}
+          sources={message.meta_data}
+          isHovered={isHovered}
+        />;
+      case AuthorType.Assistant:
+        return <AssistantMessage
+          isHovered={isHovered}
+          id={message.message_id}
+        />;
+      default:
+        return <HumanQuestion
+          fetchMember={fetchMember}
+          userId={message.author.author_uuid}
+          content={message.content}
+        />;
+    }
+
+  }, [message, isHovered, fetchMember]);
+
+  return (
+    <motion.div
+      data-message-id={id}
+      initial={shouldAnimate ? 'hidden' : false}
+      animate="visible"
+      variants={MESSAGE_VARIANTS.getMessageVariants()}
+      onAnimationComplete={() => shouldAnimate && completeAnimation(id)}
+      className={cn(
+        'message rounded-[8px] mb-9',
+        selected ? 'bg-primary/5' : '',
+      )}
+    >
+      {renderMessage()}
+    </motion.div>
+  );
+};
diff --git a/src/components/chat/components/chat-messages/regenerations.tsx b/src/components/chat/components/chat-messages/regenerations.tsx
new file mode 100644
index 00000000..73c95c25
--- /dev/null
+++ b/src/components/chat/components/chat-messages/regenerations.tsx
@@ -0,0 +1,159 @@
+import { ReactComponent as RegenerateIcon } from '../../assets/icons/change-font.svg';
+import { ReactComponent as ChevronIcon } from '../../assets/icons/chevron.svg';
+import { ReactComponent as RegenerateCircleIcon } from '../../assets/icons/regenerate-circle.svg';
+import { ReactComponent as TryAgainIcon } from '../../assets/icons/undo.svg';
+import { FormatGroup } from '../ui/format-group';
+import { Button } from '../../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/tooltip';
+import { useTranslation } from '../../i18n';
+import { useMessagesHandlerContext } from '../../provider/messages-handler-provider';
+import { useChatMessagesContext } from '../../provider/messages-provider';
+import { useResponseFormatContext } from '../../provider/response-format-provider';
+import { OutputContent, OutputLayout } from '../../types';
+import { useCallback, useState } from 'react';
+
+export function Regenerations({ id }: {
+  id: number;
+}) {
+  const { t } = useTranslation();
+  const {
+    messageIds,
+  } = useChatMessagesContext();
+  const {
+    setResponseFormat,
+    getMessageResponseFormat,
+  } = useResponseFormatContext();
+
+  const { regenerateAnswer } = useMessagesHandlerContext();
+
+  const [outputContent, setOutputContent] = useState<OutputContent | undefined>(getMessageResponseFormat(id)?.output_content);
+  const [outputLayout, setOutputLayout] = useState<OutputLayout | undefined>(getMessageResponseFormat(id)?.output_layout);
+
+  const regenerate = useCallback(() => {
+    const index = messageIds.indexOf(id);
+    if(index < 0) {
+      return;
+    }
+
+    const questionId = id - 1;
+
+    void regenerateAnswer(questionId);
+  }, [id, messageIds, regenerateAnswer]);
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            onMouseDown={e => {
+              e.preventDefault();
+            }}
+            onClick={() => {
+              void regenerate();
+            }}
+            variant={'ghost'}
+            size={'icon'}
+            className={`h-7 !p-0 w-7`}
+          >
+            <TryAgainIcon
+              style={{
+                width: 16,
+                height: 16,
+              }}
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent
+          align={'center'}
+          side={'bottom'}
+        >
+          {t('button.tryAgain')}
+
+        </TooltipContent>
+      </Tooltip>
+      <Popover modal>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button
+                onMouseDown={e => {
+                  e.preventDefault();
+                }}
+                variant={'ghost'}
+                size={'icon'}
+                className={`h-7 !p-0 w-10`}
+              >
+                <RegenerateIcon
+                  style={{
+                    width: 16,
+                    height: 16,
+                  }}
+                />
+                <ChevronIcon
+                  style={{
+                    width: 12,
+                    height: 12,
+                  }}
+                />
+              </Button>
+
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent
+            align={'center'}
+            side={'bottom'}
+          >
+            {t('button.changeFormat')}
+          </TooltipContent>
+        </Tooltip>
+        <PopoverContent
+          onOpenAutoFocus={e => e.preventDefault()}
+          onCloseAutoFocus={e => e.preventDefault()}
+          className={'flex items-center gap-2'}
+        >
+          <FormatGroup
+            outputContent={outputContent}
+            outputLayout={outputLayout}
+            setOutputContent={content => {
+              setOutputContent(content);
+              setOutputLayout(OutputLayout.Paragraph);
+            }}
+            setOutputLayout={setOutputLayout}
+          />
+          <Tooltip>
+            <TooltipTrigger>
+              <Button
+                variant={'link'}
+                size={'icon'}
+                disabled={(outputContent === undefined) || (outputLayout === undefined)}
+                onClick={() => {
+                  if(outputContent === undefined || outputLayout === undefined) {
+                    return;
+                  }
+
+                  setResponseFormat({
+                    output_content: outputContent,
+                    output_layout: outputLayout,
+                  });
+                  void regenerate();
+                }}
+              >
+                <RegenerateCircleIcon
+                  style={{
+                    width: 20,
+                    height: 20,
+                  }}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {t('button.regenerateWithNewFormat')}
+            </TooltipContent>
+          </Tooltip>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}
+
+export default Regenerations;
\ No newline at end of file
diff --git a/src/components/chat/components/chat-messages/use-chat-messages.ts b/src/components/chat/components/chat-messages/use-chat-messages.ts
new file mode 100644
index 00000000..a8035783
--- /dev/null
+++ b/src/components/chat/components/chat-messages/use-chat-messages.ts
@@ -0,0 +1,71 @@
+import { useMessagesHandlerContext } from '../../provider/messages-handler-provider';
+import { useChatMessagesContext } from '../../provider/messages-provider';
+import { useCallback, useRef, useState } from 'react';
+
+const DEFAULT_LIMIT = 20;
+
+interface FetchMessagesParams {
+  limit?: number;
+  before?: number;
+}
+
+export function useChatMessages() {
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const lastMessageId = useRef<number | null>(null);
+  const isInitialLoad = useRef(true);
+  const loadingRef = useRef(false);
+
+  const {
+    messageIds,
+  } = useChatMessagesContext();
+  const {
+    fetchMessages,
+  } = useMessagesHandlerContext();
+
+  const fetchMessagesWithParams = useCallback(async(params: FetchMessagesParams) => {
+    if(loadingRef.current) return;
+
+    try {
+      setIsLoading(true);
+      const data = await fetchMessages(params);
+
+      if(data.messages.length > 0) {
+        const messages = data.messages.map(message => message.message_id);
+        lastMessageId.current = messages[messages.length - 1];
+      }
+
+      setHasMore(data.has_more);
+      return data;
+      // eslint-disable-next-line
+    } catch(e: any) {
+      // do nothing
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fetchMessages]);
+
+  const fetchInitialMessages = useCallback(async() => {
+    isInitialLoad.current = true;
+    const data = await fetchMessagesWithParams({ limit: DEFAULT_LIMIT });
+    isInitialLoad.current = false;
+    return data;
+  }, [fetchMessagesWithParams]);
+
+  const loadMoreMessages = useCallback(async() => {
+    if(!lastMessageId.current) return;
+
+    await fetchMessagesWithParams({
+      limit: DEFAULT_LIMIT,
+      before: lastMessageId.current,
+    });
+  }, [fetchMessagesWithParams]);
+
+  return {
+    messageIds,
+    hasMore,
+    isLoading,
+    fetchInitialMessages,
+    loadMoreMessages,
+  };
+}
\ No newline at end of file
diff --git a/src/components/chat/components/multi-selection/banner.tsx b/src/components/chat/components/multi-selection/banner.tsx
new file mode 100644
index 00000000..46eb1986
--- /dev/null
+++ b/src/components/chat/components/multi-selection/banner.tsx
@@ -0,0 +1,89 @@
+import { useChatContext } from '../../chat/context';
+import { AddMessageToPageWrapper } from '../add-messages-to-page-wrapper';
+import { Button } from '../../../ui/button';
+import { useTranslation } from '../../i18n';
+import { ChatMessage } from '../../types';
+import { CheckStatus } from '../../types/checkbox';
+import { CheckSquare, Minus, Square, X } from 'lucide-react';
+import { useMemo } from 'react';
+
+export function Banner({
+  onSelectAll,
+  onClearAll,
+  checkStatus,
+  messages,
+}: {
+  checkStatus: CheckStatus
+  onSelectAll: () => void;
+  onClearAll: () => void;
+  messages: ChatMessage[]
+}) {
+  const {
+    selectionMode,
+    onCloseSelectionMode,
+  } = useChatContext();
+
+  const { t } = useTranslation();
+
+  const CheckboxIcon = useMemo(() => {
+    switch(checkStatus) {
+      case CheckStatus.Checked:
+        return <CheckSquare className="h-4 w-4" />;
+      case CheckStatus.Indeterminate:
+        return <Square className="h-4 w-4"><Minus className="h-3 w-3" /></Square>;
+      default:
+        return <Square className="h-4 w-4" />;
+    }
+  }, [checkStatus]);
+
+  const handleClick = () => {
+    if(checkStatus === CheckStatus.Checked) {
+      onClearAll();
+    } else {
+      onSelectAll();
+    }
+  };
+
+  if(!selectionMode) return null;
+
+  return (
+    <div className={'flex fixed z-[100] left-0 top-0 w-full h-12 bg-primary/90 px-6 text-primary-foreground chat-selections-banner items-center gap-2 justify-between'}>
+      <div className={'flex items-center gap-2'}>
+        <Button
+          variant={'link'}
+          onClick={handleClick}
+          className={'w-4 h-4 text-accent'}
+        >
+          {CheckboxIcon}
+        </Button>
+
+        <div className={'text-sm font-medium'}>
+          {messages.length > 0 ? t('addMessageToPage.selectedCount', {
+            count: messages.length,
+          }) : t('addMessageToPage.selectMsg')}
+        </div>
+      </div>
+      <div className={'flex items-center justify-end gap-2'}>
+        <AddMessageToPageWrapper
+          onFinished={onCloseSelectionMode}
+          messages={messages}
+        >
+          <Button
+            variant={'outline'}
+            className={'text-primary-foreground h-[28px] px-3 text-sm bg-transparent hover:bg-primary hover:text-primary-foreground'}
+          >
+            {t('button.addTo')}
+          </Button>
+        </AddMessageToPageWrapper>
+        <Button
+          variant={'link'}
+          onClick={onCloseSelectionMode}
+          className={'w-5 h-5 text-accent'}
+        >
+          <X className={'w-4 h-4'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/components/chat/components/multi-selection/context.ts b/src/components/chat/components/multi-selection/context.ts
new file mode 100644
index 00000000..e4027080
--- /dev/null
+++ b/src/components/chat/components/multi-selection/context.ts
@@ -0,0 +1,21 @@
+import { ChatMessage } from '../../types';
+import { createContext, useContext } from 'react';
+
+interface SelectionContextType {
+  messages: ChatMessage[];
+  toggleMessage: (message: ChatMessage) => void;
+}
+
+export const SelectionContext = createContext<SelectionContextType | null>(null);
+
+export const SelectionProvider = SelectionContext.Provider;
+
+export function useSelectionContext() {
+  const context = useContext(SelectionContext);
+
+  if(!context) {
+    throw new Error('useSelectionContext must be used within a SelectionProvider');
+  }
+
+  return context;
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ui/alert.tsx b/src/components/chat/components/ui/alert.tsx
new file mode 100644
index 00000000..5afd41d1
--- /dev/null
+++ b/src/components/chat/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/src/components/chat/components/ui/avatar.tsx b/src/components/chat/components/ui/avatar.tsx
new file mode 100644
index 00000000..991f56ec
--- /dev/null
+++ b/src/components/chat/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/src/components/chat/components/ui/button.tsx b/src/components/chat/components/ui/button.tsx
new file mode 100644
index 00000000..d1e7a933
--- /dev/null
+++ b/src/components/chat/components/ui/button.tsx
@@ -0,0 +1,106 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap  disabled:pointer-events-none  [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-border-error-thick aria-invalid:border-border-error-thick-hover aria-readonly:cursor-not-allowed',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-fill-theme-thick text-text-on-fill hover:bg-fill-theme-thick-hover disabled:bg-fill-content-hover disabled:text-text-tertiary',
+        destructive:
+          'bg-fill-error-thick text-text-on-fill hover:bg-fill-error-thick-hover disabled:bg-fill-content-hover disabled:text-text-tertiary',
+        outline:
+          'border border-border-primary bg-fill-content text-text-primary hover:bg-fill-content-hover hover:border-border-primary-hover disabled:text-text-tertiary',
+        'destructive-outline':
+          'bg-fill-content text-text-error hover:bg-fill-error-select hover:text-text-error-hover border border-border-error-thick hover:border-border-error-thick-hover disabled:text-text-tertiary disabled:border-border-primary',
+        ghost:
+          'hover:bg-fill-content-hover text-text-primary disabled:bg-fill-content disabled:text-text-tertiary',
+        link: 'hover:bg-fill-content text-text-action hover:text-text-action-hover !h-fit',
+        loading: 'opacity-50 cursor-not-allowed',
+      },
+      size: {
+        sm: 'h-7 text-sm px-3 rounded-300 gap-2 font-normal',
+        default: 'h-8 text-sm px-3 rounded-300 gap-2 font-normal',
+        lg: 'h-10 rounded-400 text-sm px-4 gap-2 font-medium',
+        xl: 'h-14 rounded-500 px-4 text-xl gap-2 font-medium',
+        'icon-sm':
+          'w-6 h-6 rounded-300 p-0.5 text-icon-primary disabled:text-icon-tertiary',
+        icon: 'w-7 h-7 rounded-300 p-1 text-icon-primary disabled:text-icon-tertiary',
+        'icon-lg':
+          'w-8 h-8 rounded-300 p-2 text-icon-primary disabled:text-icon-tertiary',
+        'icon-xl':
+          'w-10 h-10 rounded-400 p-[10px] text-icon-primary disabled:text-icon-tertiary',
+      },
+      loading: {
+        true: 'opacity-70 cursor-not-allowed',
+        false: '',
+      },
+      danger: {
+        true: 'hover:text-text-error',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      loading: false,
+      danger: false,
+    },
+  },
+);
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+      startIcon?: React.ReactNode;
+    }
+>(
+  (
+    {
+      className,
+      variant,
+      size,
+      loading,
+      asChild = false,
+      startIcon,
+      children,
+      danger,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+      <Comp
+        ref={ref}
+        data-slot='button'
+        className={cn(
+          buttonVariants({ variant, size, className, loading, danger }),
+        )}
+        onClick={(e) => {
+          if (loading) {
+            e.stopPropagation();
+            return;
+          }
+
+          if (props.onClick) {
+            props.onClick(e);
+          }
+        }}
+        {...props}
+      >
+        {startIcon}
+        {children}
+      </Comp>
+    );
+  },
+);
+
+export { Button, buttonVariants };
diff --git a/src/components/chat/components/ui/card.tsx b/src/components/chat/components/ui/card.tsx
new file mode 100644
index 00000000..cabfbfc5
--- /dev/null
+++ b/src/components/chat/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/chat/components/ui/dialog.tsx b/src/components/chat/components/ui/dialog.tsx
new file mode 100644
index 00000000..a3596b81
--- /dev/null
+++ b/src/components/chat/components/ui/dialog.tsx
@@ -0,0 +1,213 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { forwardRef } from 'react';
+
+import { ReactComponent as Close } from '../../assets/icons/close.svg';
+import { buttonVariants } from './button';
+import { cn } from '../../lib/utils';
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot='dialog' {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
+}
+
+const DialogOverlay = forwardRef<HTMLDivElement>(
+  (
+    {
+      className,
+      ...props
+    }: React.ComponentProps<typeof DialogPrimitive.Overlay>,
+    ref,
+  ) => {
+    return (
+      <DialogPrimitive.Overlay
+        ref={ref}
+        data-slot='dialog-overlay'
+        className={cn(
+          // Positioning and stacking
+          'fixed inset-0 z-50',
+
+          // Background styling
+          'bg-surface-overlay', // Semi-transparent black background
+
+          // Animation states for opening/closing
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+const dialogVariants = cva(
+  cn(
+    // Base appearance
+    'bg-background-primary rounded-500 shadow-dialog',
+
+    // Positioning and sizing
+    'fixed top-[50%] left-[50%] z-50',
+    'translate-x-[-50%] translate-y-[-50%]', // Center perfectly
+    'max-w-[calc(100%-2rem)] sm:max-w-lg', // Responsive width
+    'max-h-[85vh]',
+    'focus:outline-hidde focus-visible:outline-none',
+
+    // Internal layout
+    'grid px-5 py-4',
+
+    // Animation settings
+    'duration-200',
+
+    // Animation states for opening/closing
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+    'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+  ),
+  {
+    variants: {
+      size: {
+        xs: 'w-[300px]',
+        sm: 'w-[400px]',
+        md: 'w-[560px]',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+function DialogContent({
+  className,
+  children,
+  size,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  size?: 'xs' | 'sm' | 'md';
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot='dialog-portal'>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot='dialog-content'
+        className={cn(dialogVariants({ size, className }))}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close
+          className={cn(
+            // Positioning
+            'absolute right-5 top-3.5',
+            showCloseButton ? 'visible' : 'invisible',
+
+            // Base styling
+            'rounded-300 text-icon-primary',
+
+            // Interactive states
+            'focus:outline-hidde focus-visible:outline-none',
+            'disabled:pointer-events-none disabled:text-text-tertiary',
+
+            // Open state styling
+            'data-[state=open]:bg-fill-secondary data-[state=open]:text-icon-primary',
+
+            // Transition
+            'transition-opacity',
+
+            // SVG specific styling
+            '[&_svg]:pointer-events-none [&_svg]:h-5 [&_svg]:w-5 [&_svg]:shrink-0',
+          )}
+        >
+          <div className={buttonVariants({ size: 'icon', variant: 'ghost' })}>
+            <Close />
+          </div>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='dialog-header'
+      className={cn('mb-3 flex flex-col gap-3 text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='dialog-footer'
+      className={cn(
+        'mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot='dialog-title'
+      className={cn('text-base font-bold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot='dialog-description'
+      className={cn('text-sm font-normal text-text-primary', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/src/components/chat/components/ui/dropdown-menu.tsx b/src/components/chat/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..e9bf96e5
--- /dev/null
+++ b/src/components/chat/components/ui/dropdown-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-fill-content-hover data-[state=open]:bg-fill-content-hover [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className='ml-auto' />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-[12px] border border-border-primary bg-surface-layer-01 p-2 text-text-primary shadow-popover',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-fill-content-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-fill-content-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className='h-4 w-4' />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex items-center rounded-[8px] py-1.5 px-2',
+      'text-sm cursor-default select-none',
+      'outline-none transition-colors focus:bg-fill-content-hover',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'data-[state=checked]:bg-fill-theme-select',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/src/components/chat/components/ui/format-group.tsx b/src/components/chat/components/ui/format-group.tsx
new file mode 100644
index 00000000..7b71b3f5
--- /dev/null
+++ b/src/components/chat/components/ui/format-group.tsx
@@ -0,0 +1,130 @@
+import { Button } from './button';
+import { ReactComponent as TextIcon } from '../../assets/icons/text.svg';
+import { ReactComponent as TextWithIcon } from '../../assets/icons/image-text.svg';
+import { ReactComponent as ImageIcon } from '../../assets/icons/image.svg';
+import { ReactComponent as ParagraphIcon } from '../../assets/icons/paragraph.svg';
+import { ReactComponent as BulletedListIcon } from '../../assets/icons/bullet-list.svg';
+import { ReactComponent as NumberedListIcon } from '../../assets/icons/num-list.svg';
+import { ReactComponent as TableIcon } from '../../assets/icons/table.svg';
+import { Separator } from './separator';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+import { useTranslation } from '../../i18n';
+import { OutputContent, OutputLayout } from '../../types';
+import { useMemo } from 'react';
+
+export function FormatGroup({
+  outputContent,
+  outputLayout,
+  setOutputContent,
+  setOutputLayout,
+}: {
+  outputContent?: OutputContent;
+  outputLayout?: OutputLayout;
+  setOutputContent: (content: OutputContent) => void;
+  setOutputLayout: (layout: OutputLayout) => void;
+}) {
+  const { t } = useTranslation();
+
+  const actions = useMemo(() => [{
+    Icon: TextIcon,
+    key: OutputContent.TEXT,
+    title: t('input.button.text'),
+    onClick: () => setOutputContent(OutputContent.TEXT),
+  }, {
+    Icon: TextWithIcon,
+    key: OutputContent.RichTextImage,
+    title: t('input.button.textWithImage'),
+    onClick: () => setOutputContent(OutputContent.RichTextImage),
+  }, {
+    Icon: ImageIcon,
+    key: OutputContent.IMAGE,
+    title: t('input.button.imageOnly'),
+    onClick: () => setOutputContent(OutputContent.IMAGE),
+  }], [setOutputContent, t]);
+
+  const textFormats = useMemo(() => [
+    {
+      Icon: ParagraphIcon,
+      key: OutputLayout.Paragraph,
+      title: t('input.button.paragraph'),
+      onClick: () => setOutputLayout(OutputLayout.Paragraph),
+    },
+    {
+      Icon: BulletedListIcon,
+      key: OutputLayout.BulletList,
+      title: t('input.button.bulletList'),
+      onClick: () => setOutputLayout(OutputLayout.BulletList),
+    },
+    {
+      Icon: NumberedListIcon,
+      key: OutputLayout.NumberedList,
+      title: t('input.button.numberedList'),
+      onClick: () => setOutputLayout(OutputLayout.NumberedList),
+    },
+    {
+      Icon: TableIcon,
+      key: OutputLayout.SimpleTable,
+      title: t('input.button.table'),
+      onClick: () => setOutputLayout(OutputLayout.SimpleTable),
+    },
+  ], [setOutputLayout, t]);
+
+  const renderGroup = (options: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Icon: any,
+    onClick?: () => void;
+    key: OutputContent | OutputLayout, title: string
+  }[], isLayout: boolean) => {
+    return options.map(({ Icon, key, title, onClick }) => (
+      <Tooltip key={String(key)}>
+        <TooltipTrigger asChild>
+          <Button
+            onMouseDown={e => {
+              e.preventDefault();
+            }}
+            variant={'ghost'}
+            size={'icon'}
+            onClick={onClick}
+            className={`${(outputContent === key && !isLayout) || (outputLayout === key && isLayout) ? 'bg-accent' : ''} w-7 h-7 !p-0`}
+          >
+            <Icon
+              style={{
+                width: 20,
+                height: 20,
+              }}
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent
+          align={'center'}
+          side={'top'}
+        >
+          {title}
+        </TooltipContent>
+      </Tooltip>
+    ));
+  };
+
+  return (
+    <div className={'flex gap-2 items-center'}>
+      <div className={'flex gap-1'}>
+        {renderGroup(actions, false)}
+      </div>
+      {
+        outputContent !== OutputContent.IMAGE && (
+          <>
+            <Separator
+              orientation={'vertical'}
+              className={'h-4'}
+            />
+            <div className={'flex gap-1'}>
+              {renderGroup(textFormats, true)}
+            </div>
+          </>
+        )
+      }
+
+    </div>
+  );
+}
+
diff --git a/src/components/chat/components/ui/input.tsx b/src/components/chat/components/ui/input.tsx
new file mode 100644
index 00000000..1475607d
--- /dev/null
+++ b/src/components/chat/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/chat/components/ui/label.tsx b/src/components/chat/components/ui/label.tsx
new file mode 100644
index 00000000..683faa79
--- /dev/null
+++ b/src/components/chat/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/components/chat/components/ui/loading-dots.tsx b/src/components/chat/components/ui/loading-dots.tsx
new file mode 100644
index 00000000..0f7bef00
--- /dev/null
+++ b/src/components/chat/components/ui/loading-dots.tsx
@@ -0,0 +1,29 @@
+export default function LoadingDots({
+  className,
+  colors = ['#00b5ff', '#e3006d', '#f7931e'],
+  size = 30,
+  ...props
+}: {
+  className?: string;
+  size?: number;
+  colors?: [string, string, string];
+} & React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={className} {...props}>
+      <div
+        style={{
+          width: size + 'px',
+          aspectRatio: '2',
+          background: `
+            radial-gradient(circle closest-side, ${colors[0]} 90%, transparent) 0% 50%,
+            radial-gradient(circle closest-side, ${colors[1]} 90%, transparent) 50% 50%,
+            radial-gradient(circle closest-side, ${colors[2]} 90%, transparent) 100% 50%
+          `,
+          backgroundSize: 'calc(100%/3) 50%',
+          backgroundRepeat: 'no-repeat',
+          animation: 'dots-loading 1s infinite linear',
+        }}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/chat/components/ui/popover.tsx b/src/components/chat/components/ui/popover.tsx
new file mode 100644
index 00000000..1c85505b
--- /dev/null
+++ b/src/components/chat/components/ui/popover.tsx
@@ -0,0 +1,76 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { forwardRef } from 'react';
+
+import { cn } from '../../lib/utils';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot='popover' {...props} />;
+}
+
+const PopoverTrigger = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof PopoverPrimitive.Trigger>
+>(({ ...props }, ref) => {
+  return (
+    <PopoverPrimitive.Trigger
+      data-slot='popover-trigger'
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  container,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+  container?: React.ComponentProps<typeof PopoverPrimitive.Portal>['container'];
+  disableOutsidePointerEvents?: boolean;
+}) {
+  return (
+    <PopoverPrimitive.Portal container={container}>
+      <PopoverPrimitive.Content
+        data-slot='popover-content'
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 min-w-[240px] rounded-400 bg-background-primary p-0 shadow-popover',
+
+          'origin-(--radix-popover-content-transform-origin)',
+
+          'data-[state=open]:animate-in',
+          'data-[state=closed]:animate-out',
+
+          'data-[state=open]:fade-in-0',
+          'data-[state=closed]:fade-out-0',
+
+          'data-[state=open]:zoom-in-95',
+          'data-[state=closed]:zoom-out-95',
+
+          'data-[side=bottom]:slide-in-from-top-2',
+          'data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2',
+          'data-[side=top]:slide-in-from-bottom-2',
+
+          'focus:outline-none focus-visible:outline-none',
+
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
diff --git a/src/components/chat/components/ui/radio-group.tsx b/src/components/chat/components/ui/radio-group.tsx
new file mode 100644
index 00000000..e8e552ec
--- /dev/null
+++ b/src/components/chat/components/ui/radio-group.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/src/components/chat/components/ui/search-input.tsx b/src/components/chat/components/ui/search-input.tsx
new file mode 100644
index 00000000..90558d35
--- /dev/null
+++ b/src/components/chat/components/ui/search-input.tsx
@@ -0,0 +1,49 @@
+import { Input } from './input';
+import { useTranslation } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { SearchIcon } from 'lucide-react';
+import { useState } from 'react';
+
+interface SearchInputProps {
+  value: string;
+  className?: string;
+  onChange: (value: string) => void;
+  children?: React.ReactNode;
+}
+
+export function SearchInput({
+  value,
+  className,
+  onChange,
+  children,
+}: SearchInputProps) {
+  const [focused, setFocused] = useState(false);
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        'flex gap-2 items-center',
+        'h-8 py-1.5 px-2 rounded-[8px] border-[1.5px]',
+        focused ? 'border-border-theme-thick' : 'border-border-primary',
+        className,
+      )}
+    >
+      <SearchIcon size={20} className={'shrink-0 text-icon-secondary'} />
+
+      <Input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        autoFocus
+        type='text'
+        placeholder={t('search.label')}
+        className={
+          '!p-0 !h-fit !ring-0 !border-none !shadow-none rounded-none text-sm text-text-primary caret-fill-theme-thick'
+        }
+      />
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/chat/components/ui/select.tsx b/src/components/chat/components/ui/select.tsx
new file mode 100644
index 00000000..9604c0e0
--- /dev/null
+++ b/src/components/chat/components/ui/select.tsx
@@ -0,0 +1,157 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-[var(--z-ai-popover)] max-h-96 min-w-[8rem] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-menu data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+          'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/src/components/chat/components/ui/separator.tsx b/src/components/chat/components/ui/separator.tsx
new file mode 100644
index 00000000..6d7f1226
--- /dev/null
+++ b/src/components/chat/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/components/chat/components/ui/switch.tsx b/src/components/chat/components/ui/switch.tsx
new file mode 100644
index 00000000..4607c1d2
--- /dev/null
+++ b/src/components/chat/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '../../lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-menu ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/src/components/chat/components/ui/textarea.tsx b/src/components/chat/components/ui/textarea.tsx
new file mode 100644
index 00000000..4779ee93
--- /dev/null
+++ b/src/components/chat/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex w-full text-foreground rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-placeholder focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/src/components/chat/components/ui/toast.tsx b/src/components/chat/components/ui/toast.tsx
new file mode 100644
index 00000000..5ea98046
--- /dev/null
+++ b/src/components/chat/components/ui/toast.tsx
@@ -0,0 +1,144 @@
+import { useContext } from 'react';
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X, CircleX, CircleCheck } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const ToastContext = React.createContext<{ variant?: 'default' | 'destructive' | 'success' | null | undefined }>({});
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => {
+  return <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed z-[100] flex left-1/2 -translate-x-1/2 max-h-screen w-full flex-col-reverse p-2 sm:bottom-4 sm:top-auto sm:flex-col md:max-w-[420px]',
+      className,
+    )}
+    {...props}
+  />;
+});
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto min-h-[34px] relative flex text-sm w-full items-center justify-between space-x-2 overflow-hidden rounded-[8px] py-2 px-3 shadow-toast transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'bg-black text-white',
+        destructive:
+          'destructive group bg-black text-white',
+        success: 'success group bg-black text-white',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+  VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastContext.Provider value={{ variant }}>
+      <ToastPrimitives.Root
+        ref={ref}
+        className={cn(toastVariants({ variant }), className)}
+        {...props}
+      />
+    </ToastContext.Provider>
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'absolute right-2 top-1.5 rounded-md p-1 text-white opacity-60 transition-opacity hover:text-white focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100',
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold [&+div]:text-xs', className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => {
+  const {
+    variant,
+  } = useContext(ToastContext);
+
+  const icon = variant === 'destructive' ? <CircleX className={'w-4 h-4 text-destructive'} /> : variant === 'success' ?
+    <CircleCheck className={'w-4 h-4 text-success'} /> : null;
+  return <div className={'flex gap-2'}>
+    <span className={'relative top-0.5'}>
+      {icon}
+    </span>
+    <ToastPrimitives.Description
+      ref={ref}
+      className={cn('text-sm opacity-90', className)}
+      {...props}
+    />
+  </div>;
+});
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/src/components/chat/components/ui/toaster.tsx b/src/components/chat/components/ui/toaster.tsx
new file mode 100644
index 00000000..a6498b6a
--- /dev/null
+++ b/src/components/chat/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import { useToast } from '../../hooks/use-toast';
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from './toast';
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider swipeDirection={'down'}>
+      {toasts.map(function({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/src/components/chat/components/ui/tooltip.tsx b/src/components/chat/components/ui/tooltip.tsx
new file mode 100644
index 00000000..fbc84b02
--- /dev/null
+++ b/src/components/chat/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-[var(--z-ai-popover)] overflow-hidden rounded-md bg-tooltip px-3 py-1.5 text-xs text-tooltip-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/components/chat/components/view/page-icon.tsx b/src/components/chat/components/view/page-icon.tsx
new file mode 100644
index 00000000..c12bcada
--- /dev/null
+++ b/src/components/chat/components/view/page-icon.tsx
@@ -0,0 +1,80 @@
+import { ReactComponent as BoardIcon } from '../../assets/icons/board.svg';
+import { ReactComponent as CalendarIcon } from '../../assets/icons/calendar.svg';
+import { ReactComponent as DocIcon } from '../../assets/icons/doc.svg';
+import { ReactComponent as GridIcon } from '../../assets/icons/grid.svg';
+import { cn, getIcon, renderColor } from '../../lib/utils';
+import { View, ViewIconType, ViewLayout } from '../../types';
+import DOMPurify from 'dompurify';
+import { useEffect, useMemo, useState } from 'react';
+
+function PageIcon({ view }: {
+  view: View;
+}) {
+  const icon = view.icon;
+
+  const [iconSvg, setIconSvg] = useState<string | null>(null);
+  const [iconColor, setIconColor] = useState<string | null>(null);
+  const isEmoji = icon?.ty === ViewIconType.Emoji;
+
+  useEffect(() => {
+    if(isEmoji || !icon) return;
+    void (async() => {
+
+      const iconValue = icon.value;
+
+      const iconJson = iconValue ? JSON.parse(iconValue) : null;
+
+      if(iconJson) {
+        const svg = await getIcon(`${iconJson.groupName}/${iconJson.iconName}`);
+        if(svg) {
+          setIconSvg(svg);
+        }
+
+        setIconColor(iconJson.color);
+      }
+    })();
+  }, [icon, isEmoji, view.extra]);
+
+  const customIcon = useMemo(() => {
+    const cleanSvg = iconSvg ? DOMPurify.sanitize(iconSvg.replace('black', iconColor ? renderColor(iconColor) : 'black').replace('<svg', '<svg width="100%" height="100%"'), {
+      USE_PROFILES: { svg: true, svgFilters: true },
+    }) : '';
+
+    return <span
+      className={cn('flex w-4 h-4 rounded-md items-center justify-center')}
+    ><span
+      dangerouslySetInnerHTML={{
+        __html: cleanSvg,
+      }}
+    /></span>;
+  }, [iconColor, iconSvg]);
+
+  if (!icon || !icon.value) {
+    switch (view.layout) {
+      case ViewLayout.Board:
+        return <BoardIcon className='h-5 w-5' />;
+      case ViewLayout.Calendar:
+        return <CalendarIcon className='h-5 w-5' />;
+      case ViewLayout.Grid:
+        return <GridIcon className='h-5 w-5' />;
+      default:
+        return <DocIcon className='h-4 w-4' />;
+    }
+  }
+
+  if(isEmoji) {
+    return <span
+      className={'flex justify-center items-center'}
+      style={{
+        width: 16,
+        height: 16,
+      }}
+    >{icon.value}</span>;
+  }
+
+  return customIcon;
+
+}
+
+export default PageIcon;
+
diff --git a/src/components/chat/components/view/space-item.tsx b/src/components/chat/components/view/space-item.tsx
new file mode 100644
index 00000000..a1369b0a
--- /dev/null
+++ b/src/components/chat/components/view/space-item.tsx
@@ -0,0 +1,113 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../ui/tooltip';
+import { useTranslation } from '../../i18n';
+import { cn, getIcon, renderColor, stringToColor } from '../../lib/utils';
+import { View } from '../../types';
+import { ReactComponent as ChevronDown } from '../../assets/icons/drop_menu_show.svg';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+import DOMPurify from 'dompurify';
+import { Button } from '../ui/button';
+
+function SpaceItem({
+  view,
+  extraNode,
+  children,
+  getInitialExpand,
+}: {
+  view: View;
+  extraNode?: ReactNode;
+  children?: ReactNode;
+  getInitialExpand?: (viewId: string) => boolean;
+}) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(() => {
+    return getInitialExpand?.(view.view_id) || false;
+  });
+
+  const [iconSvg, setIconSvg] = useState<string | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    void (async() => {
+      const icon = view.extra?.space_icon;
+
+      if(icon) {
+        const svg = await getIcon(icon);
+        if(svg) {
+          setIconSvg(svg);
+        }
+      }
+    })();
+  }, [view.extra]);
+
+  const icon = useMemo(() => {
+
+    const cleanSvg = iconSvg ? DOMPurify.sanitize(iconSvg.replace('black', 'white').replace('<svg', '<svg width="100%" height="100%"'), {
+      USE_PROFILES: { svg: true, svgFilters: true },
+    }) : null;
+
+    return <span
+      style={{
+        backgroundColor: view.extra?.space_icon_color ? renderColor(view.extra?.space_icon_color) : stringToColor(view.name),
+      }}
+      className={cn('flex w-[18px] h-[18px] p-1 rounded-md items-center justify-center')}
+    >{cleanSvg ? <span
+      dangerouslySetInnerHTML={{
+        __html: cleanSvg,
+      }}
+    /> : <span className={'text-primary-foreground'}>{view.name.slice(0, 1)}</span>}</span>;
+  }, [iconSvg, view.extra?.space_icon_color, view.name]);
+
+  const ToggleButton = useMemo(() => {
+    return view.children.length > 0 ? (
+      <Button
+        variant={'ghost'}
+        size={'icon'}
+        className={'!w-4 !h-4 !min-w-4 !min-h-4 hover:bg-muted-foreground/10'}
+      >
+        <ChevronDown
+          className={cn(
+            'transform transition-transform',
+            expanded ? 'rotate-0' : '-rotate-90',
+          )}
+        />
+      </Button>
+    ) : (
+      <div style={{ width: 16, height: 16 }}></div>
+    );
+  }, [expanded, view.children.length]);
+
+  const name = view.name || t('view.placeholder');
+  return (
+    <div
+      className={'flex flex-col'}
+    >
+      <div
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onClick={() => setExpanded(!expanded)}
+        className={'px-1.5 h-[28px] select-none text-sm cursor-pointer rounded-[8px] flex items-center justify-between gap-2 hover:bg-muted'}
+      >
+        <div className={'flex items-center gap-2  w-full overflow-hidden'}>
+          <div className={'flex items-center gap-0.5'}>
+            {ToggleButton}
+            {icon}
+          </div>
+          <TooltipProvider>
+            <Tooltip disableHoverableContent={true}>
+              <TooltipTrigger asChild>
+                <span className={'flex-1 truncate'}>{name}</span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {name}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+        {isHovered ? extraNode : null}
+      </div>
+      {expanded && children}
+    </div>
+  );
+}
+
+export default SpaceItem;
\ No newline at end of file
diff --git a/src/components/chat/components/view/view-children.tsx b/src/components/chat/components/view/view-children.tsx
new file mode 100644
index 00000000..09698fd5
--- /dev/null
+++ b/src/components/chat/components/view/view-children.tsx
@@ -0,0 +1,44 @@
+import { ViewItem } from '../view/view-item';
+import { View } from '../../types';
+import { CheckStatus } from '../../types/checkbox';
+
+export function ViewChildren({
+  item,
+  getCheckStatus,
+  onToggle,
+  getInitialExpand,
+}: {
+  item: View;
+  getCheckStatus: (view: View) => CheckStatus;
+  onToggle: (view: View) => void;
+  getInitialExpand: (viewId: string) => boolean;
+}) {
+  if(!item.children || item.children.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={'flex pl-4 flex-col gap-1'}>
+      {item.children.map((view: View) => {
+        return (
+          <ViewItem
+            key={view.view_id}
+            view={view}
+            getCheckStatus={getCheckStatus}
+            onToggle={onToggle}
+            getInitialExpand={getInitialExpand}
+          >
+            <ViewChildren
+              item={view}
+              getCheckStatus={getCheckStatus}
+              onToggle={onToggle}
+              getInitialExpand={getInitialExpand}
+            />
+          </ViewItem>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ViewChildren;
\ No newline at end of file
diff --git a/src/components/chat/components/view/view-item.tsx b/src/components/chat/components/view/view-item.tsx
new file mode 100644
index 00000000..63c29fc0
--- /dev/null
+++ b/src/components/chat/components/view/view-item.tsx
@@ -0,0 +1,99 @@
+import { ReactComponent as ChevronDown } from '../../assets/icons/drop_menu_show.svg';
+import { Button } from '../../../ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../ui/tooltip';
+import PageIcon from '../view/page-icon';
+import { useTranslation } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { View } from '../../types';
+import { CheckStatus } from '../../types/checkbox';
+import { CheckSquare, Minus, Square } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+export function ViewItem({ view, children, getCheckStatus, onToggle, getInitialExpand }: {
+  view: View;
+  children?: React.ReactNode;
+  getCheckStatus: (view: View) => CheckStatus;
+  onToggle: (view: View) => void;
+  getInitialExpand: (viewId: string) => boolean;
+}) {
+  const [expanded, setExpanded] = useState(() => {
+    return getInitialExpand(view.view_id);
+  });
+  const { t } = useTranslation();
+
+  const name = view.name || t('view.placeholder');
+  const checkStatus = getCheckStatus(view);
+  const CheckboxIcon = useMemo(() => {
+    switch(checkStatus) {
+      case CheckStatus.Checked:
+        return <CheckSquare className="h-4 w-4 text-primary" />;
+      case CheckStatus.Indeterminate:
+        return <Square className="h-4 w-4  text-primary"><Minus className="h-3 w-3" /></Square>;
+      default:
+        return <Square className="h-4 w-4" />;
+    }
+  }, [checkStatus]);
+
+  const ToggleButton = useMemo(() => {
+    return view.children.length > 0 ? (
+      <Button
+        variant={'ghost'}
+        size={'icon'}
+        onClick={(e) => {
+          e.stopPropagation();
+          setExpanded(prev => !prev);
+        }}
+        className={'!w-4 !h-4 !min-w-4 !min-h-4 hover:bg-muted-foreground/10'}
+      >
+        <ChevronDown
+          className={cn(
+            'transform transition-transform',
+            expanded ? 'rotate-0' : '-rotate-90',
+          )}
+        />
+      </Button>
+    ) : (
+      <div style={{ width: 16, height: 16 }}></div>
+    );
+  }, [expanded, view.children.length]);
+
+  return (
+    <div className={'flex flex-col'}>
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggle(view);
+        }}
+        className={'px-1.5 h-[28px] w-full select-none text-sm cursor-pointer rounded-[8px] flex items-center justify-between gap-2 hover:bg-muted'}
+      >
+        <div className={'flex items-center gap-2 w-full overflow-hidden'}>
+          <div
+            className={'flex cursor-pointer items-center gap-0.5'}
+          >
+            {ToggleButton}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="p-0 h-4 w-4 mr-1"
+            >
+              {CheckboxIcon}
+            </Button>
+            <PageIcon view={view} />
+          </div>
+          <TooltipProvider>
+            <Tooltip disableHoverableContent={true}>
+              <TooltipTrigger asChild>
+                <span className={'flex-1 truncate'}>{name}</span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {name}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+      {expanded && children}
+    </div>
+  );
+}
+
diff --git a/src/components/chat/data/built_in_prompts.d.ts b/src/components/chat/data/built_in_prompts.d.ts
new file mode 100644
index 00000000..2ce3b320
--- /dev/null
+++ b/src/components/chat/data/built_in_prompts.d.ts
@@ -0,0 +1,15 @@
+declare module '../data/prompts.json' {
+  interface PromptsJsonContent {
+    prompts: Array<{
+      id: string;
+      name: string;
+      category?: string;
+      content: string;
+      example?: string;
+      isFeatured?: boolean;
+      isCustom?: boolean;
+    }>;
+  }
+  const value: PromptsJsonContent;
+  export default value;
+}
diff --git a/src/components/chat/data/built_in_prompts.json b/src/components/chat/data/built_in_prompts.json
new file mode 100644
index 00000000..8541fe2b
--- /dev/null
+++ b/src/components/chat/data/built_in_prompts.json
@@ -0,0 +1,1455 @@
+{
+  "prompts": [
+    {
+      "id": "builtin_prompt_1",
+      "name": "Linux terminal",
+      "category": "other",
+      "content": "I want you to act as a linux terminal. I will type commands and you will reply with what the terminal should show. I want you to only reply with the terminal output inside one unique code block, and nothing else. do not write explanations. do not type commands unless I instruct you to do so.\nThis is my first command:\n\n[command]",
+      "example": "I want you to act as a linux terminal. I will type commands and you will reply with what the terminal should show. I want you to only reply with the terminal output inside one unique code block, and nothing else. do not write explanations. do not type commands unless I instruct you to do so.\nThis is my first command:\n\nls -l"
+    },
+    {
+      "id": "builtin_prompt_2",
+      "name": "Cover Letter Writer and Advisor",
+      "category": "business",
+      "content": "I want you to act as a career advisor, who can assist in crafting a compelling cover letter for job applications. Share insights on how to structure the letter, highlight relevant skills and experiences, and express enthusiasm for the role. Offer advice on how to tailor the letter to the specific job description, company culture, and industry standards. Provide tips on maintaining a professional tone, proofreading for errors, and making a memorable impression on hiring managers. My first request is:\n\n[request]",
+      "example": "I want you to act as a career advisor, who can assist in crafting a compelling cover letter for job applications. Share insights on how to structure the letter, highlight relevant skills and experiences, and express enthusiasm for the role. Offer advice on how to tailor the letter to the specific job description, company culture, and industry standards. Provide tips on maintaining a professional tone, proofreading for errors, and making a memorable impression on hiring managers. My first request is:\n\nHelp me write a cover letter for a software engineer position at a tech startup, focusing on my coding skills, problem-solving ability, and experience with agile development methodologies."
+    },
+    {
+      "id": "builtin_prompt_3",
+      "name": "Business Plan Consultant",
+      "category": "business",
+      "content": "I want you to act as a business plan consultant, who can guide me through the process of creating a comprehensive and persuasive business plan for a new startup or existing business. Discuss key elements to include in the plan, such as executive summary, company overview, market analysis, marketing strategies, organizational structure, and financial projections. Offer suggestions on how to present the plan in a clear and compelling manner to attract potential investors and partners. My first request is:\n\n[request]",
+      "example": "I want you to act as a business plan consultant, who can guide me through the process of creating a comprehensive and persuasive business plan for a new startup or existing business. Discuss key elements to include in the plan, such as executive summary, company overview, market analysis, marketing strategies, organizational structure, and financial projections. Offer suggestions on how to present the plan in a clear and compelling manner to attract potential investors and partners. My first request is:\n\nHelp me outline a business plan for an online fitness coaching platform targeting busy professionals."
+    },
+    {
+      "id": "builtin_prompt_4",
+      "name": "Niche Identifier",
+      "category": "business",
+      "content": "As an online business consultant, your task is to help an aspiring entrepreneur identify 5 profitable niches for starting an online business. Consider factors such as market demand, competition, target audience, and potential for growth. For each niche, provide a brief description of the products or services that could be offered, the target customer demographics, and the potential marketing strategies to reach them. Suggest low-cost ways to validate the niche ideas and test their viability before investing significant time or money."
+    },
+    {
+      "id": "builtin_prompt_5",
+      "name": "Chief Executive Officer",
+      "category": "business",
+      "content": "I want you to act as a CEO, who can provide strategic insights into running a successful organization. Share advice on setting the company's vision and mission, building a high-performing team, managing resources, and driving growth. Offer guidance on making tough decisions, dealing with risks and crises, and maintaining stakeholder relationships. Also, discuss the responsibilities of a CEO in ensuring ethical conduct and corporate social responsibility. My first request is:\n\n[request]",
+      "example": "I want you to act as a CEO, who can provide strategic insights into running a successful organization. Share advice on setting the company's vision and mission, building a high-performing team, managing resources, and driving growth. Offer guidance on making tough decisions, dealing with risks and crises, and maintaining stakeholder relationships. Also, discuss the responsibilities of a CEO in ensuring ethical conduct and corporate social responsibility. My first request is:\n\nProvide a strategic plan for a startup tech company in its first year of operation, focusing on key objectives, potential challenges, and growth strategies."
+    },
+    {
+      "id": "builtin_prompt_6",
+      "name": "Accountant",
+      "category": "business",
+      "content": "I want you to act as an accountant and come up with creative ways to manage finances. You’ll need to consider budgeting, investment strategies and risk management when creating a financial plan for your client. In some cases, you may also need to provide advice on taxation laws and regulations in order to help them maximize their profits. My first suggestion request is:\n\n[request].",
+      "example": "I want you to act as an accountant and come up with creative ways to manage finances. You’ll need to consider budgeting, investment strategies and risk management when creating a financial plan for your client. In some cases, you may also need to provide advice on taxation laws and regulations in order to help them maximize their profits. My first suggestion request is:\n\nCreate a financial plan for a small business that focuses on cost savings and long-term investments"
+    },
+    {
+      "id": "builtin_prompt_7",
+      "name": "Creative Branding Strategist",
+      "category": "business",
+      "content": "You are a creative branding strategist, specializing in helping small businesses establish a strong and memorable brand identity. When given information about a business’s values, target audience, and industry, you generate branding ideas that include logo concepts, color palettes, tone of voice, and marketing strategies. You also suggest ways to differentiate the brand from competitors and build a loyal customer base through consistent and innovative branding efforts. Reply in English using professional tone for everyone. This is my first request:\n\n[request]",
+      "example": "You are a creative branding strategist, specializing in helping small businesses establish a strong and memorable brand identity. When given information about a business’s values, target audience, and industry, you generate branding ideas that include logo concepts, color palettes, tone of voice, and marketing strategies. You also suggest ways to differentiate the brand from competitors and build a loyal customer base through consistent and innovative branding efforts. Reply in English using professional tone for everyone. This is my first request:\n\nHelp me create a branding strategy for a new organic skincare line targeting eco-conscious consumers."
+    },
+    {
+      "id": "builtin_prompt_8",
+      "name": "Emoji-fy",
+      "category": "other",
+      "content": "Your task is to take the following plain text message provided and convert it into an expressive, emoji-rich message that conveys the same meaning and intent. Replace key words and phrases with relevant emojis wherever possible to add visual interest and emotion. Use emojis creatively but ensure the message remains clear and easy to understand. Do not alter the core message or add new information.\n\n[message]"
+    },
+    {
+      "id": "builtin_prompt_9",
+      "name": "Explain like I’m 5",
+      "category": "education",
+      "content": "Explain [concept or question, e.g., What is gravity?, What does money do?, How do plants grow?] in a way that a 5-year-old would understand. Use very simple language, short sentences, and relatable examples from everyday life (like toys, animals, food, or playground activities). Avoid technical jargon and aim to make the explanation fun and clear.\n\nIf helpful, include a quick story or analogy to illustrate the idea. You can end the explanation with a cheerful summary or a fun fact to keep it engaging.",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_10",
+      "name": "Social Media Master",
+      "category": "marketing",
+      "content": "Create an engaging and upbeat social media post for [platform, e.g., Instagram/Twitter/LinkedIn] about [topic or event, e.g., product launch, personal milestone, motivational message]. The tone should be [desired tone, e.g., energetic, friendly, professional] and include [specific elements, e.g., a call to action, hashtags, emojis]. Make it appealing to [target audience, e.g., young professionals, fitness enthusiasts, small business owners]."
+    },
+    {
+      "id": "builtin_prompt_11",
+      "name": "Prompt Enhancer",
+      "category": "other",
+      "content": "Act as a Prompt Enhancer AI that takes user-input prompts and transforms them into more engaging, detailed, and thought-provoking questions. Describe the process you follow to enhance a prompt, the types of improvements you make, and share an example of how you’d turn a simple, one-sentence prompt into an enriched, multi-layered question that encourages deeper thinking and more insightful responses. Reply in English using professional tone for everyone."
+    },
+    {
+      "id": "builtin_prompt_12",
+      "name": "Learning with Historical Figures",
+      "category": "education",
+      "content": "Pretend you are [famous figure] explaining [topic] to me. Let’s have a dialogue where I can ask questions to understand better."
+    },
+    {
+      "id": "builtin_prompt_13",
+      "name": "Salesperson",
+      "category": "marketing",
+      "content": "I want you to act as a salesperson. Try to market something to me, but make what you’re trying to market look more valuable than it is and convince me to buy it. Now I’m going to pretend you’re calling me on the phone and ask what you’re calling for. Hello, what did you call for? Reply in English using professional tone for everyone."
+    },
+    {
+      "id": "builtin_prompt_14",
+      "name": "Marketing Funnel Framework",
+      "category": "marketing",
+      "content": "Using the 'Marketing Funnel' framework, please write a marketing campaign outline that targets [awareness consideration conversion] stage of the customer journey and aligns with the goals of each stage. Highlight the [features] of our [product/service] and explain how it can [solve a problem] or [achieve a goal] for [ideal customer persona]."
+    },
+    {
+      "id": "builtin_prompt_15",
+      "name": "Email Marketing Campaign",
+      "category": "marketing",
+      "content": "As an experienced email marketer, your goal is to create an engaging email campaign to promote [insert product/service/event]. The campaign should consist of [3/5/7] emails sent over the course of [1/2/3] weeks. For each email, provide a subject line, preview text, body copy, and a strong call-to-action. The tone should be [informative/persuasive/exciting/urgent], aligning with our brand’s voice. Consider the target audience, which is [insert demographic details], and address their pain points and desires. Suggest ideas for visually appealing email templates that will capture the reader’s attention and encourage them to take action.\n\n[Text here]"
+    },
+    {
+      "id": "builtin_prompt_16",
+      "name": "Referral Marketing Program",
+      "category": "marketing",
+      "content": "As a growth marketing expert, your task is to design a referral marketing program for [insert company name] to incentivize existing customers to refer new business. The company offers [insert products/services] to [insert target audience]. Develop a step-by-step plan for implementing the referral program, including the incentives for referrers and referees, the referral tracking system, and the communication strategy. Ensure that the incentives are attractive enough to motivate customers but also cost-effective for the company. Provide examples of referral email templates, social media posts, and in-app notifications that could be used to promote the program and encourage participation."
+    },
+    {
+      "id": "builtin_prompt_17",
+      "name": "Personal Trainer",
+      "category": "healthAndFitness",
+      "content": "I want you to act as a personal trainer, who can create customized fitness programs, provide exercise instructions, and offer guidance on healthy lifestyle choices. Assess my current fitness level, goals, and preferences to develop a tailored workout plan that includes strength training, cardiovascular exercises, and flexibility routines. Share tips on proper exercise form, injury prevention, and progressive overload to ensure continuous improvement. Offer advice on nutrition, hydration, and rest to support my overall well-being. My first request is:\n\n[request]",
+      "example": "I want you to act as a personal trainer, who can create customized fitness programs, provide exercise instructions, and offer guidance on healthy lifestyle choices. Assess my current fitness level, goals, and preferences to develop a tailored workout plan that includes strength training, cardiovascular exercises, and flexibility routines. Share tips on proper exercise form, injury prevention, and progressive overload to ensure continuous improvement. Offer advice on nutrition, hydration, and rest to support my overall well-being. My first request is:\n\nDesign a 4-week workout plan for me to improve my overall strength and endurance, considering my limited access to gym equipment."
+    },
+    {
+      "id": "builtin_prompt_18",
+      "name": "Nutrition Expert",
+      "category": "healthAndFitness",
+      "content": "You are a highly trusted and knowledgeable health, fitness, and nutrition expert. Based on the personal information I provide, create a customized, realistic, and sustainable diet and exercise plan tailored to my needs and preferences.\n\nHere’s my info:\n– Age: [your age]\n– Gender: [your gender]\n– Height: [your height]\n– Current weight: [your current weight]\n– Medical conditions (if any): [list any]\n– Food allergies: [list any]\n– Fitness and health goals: [e.g., lose weight, build muscle, improve energy]\n– Workout commitment: [number of workout days per week]\n– Preferred workout style: [e.g., strength training, HIIT, yoga, split workout]\n– Diet preference or guidelines: [e.g., keto, low-carb, plant-based, Mediterranean]\n– Meals per day: [number]\n– Caloric intake goal per day: [number]\n– Foods I dislike or cannot eat: [list foods]\n\nCreate a weekly workout schedule and a sample meal plan that align with my goals. Explain your reasoning behind each recommendation (e.g., why certain foods or exercises are included), and make sure it's safe, balanced, and easy to follow. Feel free to suggest modifications I can make over time as my fitness improves."
+    },
+    {
+      "id": "builtin_prompt_19",
+      "name": "AI Doctor",
+      "category": "healthAndFitness",
+      "content": "I want you to act as an AI assisted doctor. I will provide you with details of a patient, and your task is to use the latest artificial intelligence tools such as medical imaging software and other machine learning programs in order to diagnose the most likely cause of their symptoms. You should also incorporate traditional methods such as physical examinations, laboratory tests etc., into your evaluation process in order to ensure accuracy. My first request is:\n\n[request]",
+      "example": "I want you to act as an AI assisted doctor. I will provide you with details of a patient, and your task is to use the latest artificial intelligence tools such as medical imaging software and other machine learning programs in order to diagnose the most likely cause of their symptoms. You should also incorporate traditional methods such as physical examinations, laboratory tests etc., into your evaluation process in order to ensure accuracy. My first request is:\n\nI need help diagnosing a case of severe abdominal pain."
+    },
+    {
+      "id": "builtin_prompt_20",
+      "name": "Psychologist",
+      "category": "healthAndFitness",
+      "content": "I want you to act a psychologist. I will provide you my thoughts. I want you to give me scientific suggestions that will make me feel better. My first thought is:\n\n[thought]",
+      "example": "I want you to act a psychologist. I will provide you my thoughts. I want you to give me scientific suggestions that will make me feel better. My first thought is:\n\nI feel overwhelmed with my workload and can’t seem to focus."
+    },
+    {
+      "id": "builtin_prompt_21",
+      "name": "Budget Travel Ticker Advisor",
+      "category": "travel",
+      "content": "You are a cheap travel ticket advisor specializing in finding the most affordable transportation options for your clients. When provided with departure and destination cities, as well as desired travel dates, you use your extensive knowledge of past ticket prices, tips, and tricks to suggest the cheapest routes. Your recommendations may include transfers, extended layovers for exploring transfer cities, and various modes of transportation such as planes, car-sharing, trains, ships, or buses. Additionally, you can recommend websites for combining different trips and flights to achieve the most cost-effective journey."
+    },
+    {
+      "id": "builtin_prompt_22",
+      "name": "Travel Guide",
+      "category": "travel",
+      "content": "I want you to act as a travel guide. I will write you my location and you will suggest a place to visit near my location. In some cases, I will also give you the type of places I will visit. You will also suggest me places of similar type that are close to my first location.\n\n[location]"
+    },
+    {
+      "id": "builtin_prompt_23",
+      "name": "Travel Preparation Assistant",
+      "category": "travel",
+      "content": "You are an expert travel preparation assistant. My goal is to have you help me plan and pack for an upcoming trip.\n\nFirst, I need to provide you with some information about my trip:\n\n1.  Type of trip: [e.g., vacation, business, backpacking, cruise]\n2.  Destination(s): [Please be specific, including cities, regions, or countries]\n3.  Dates of travel: [Start date - End date]\n4.  Primary purpose: [e.g., relaxation, adventure, work, cultural immersion]\n5.  Traveling with: [e.g., alone, family, friends, colleagues]\n6.  Typical weather at destination during travel dates: [If known, describe. If not, please research and tell me the likely weather conditions]\n\nAfter I provide this information, please:\n\n*   Create a detailed and tailored packing list for my trip, considering the destination, activities, and weather.\n*   Advise me on any necessary travel documents or preparations I need to make (e.g., visas, vaccinations, travel insurance).\n*   Offer general tips for a smooth and enjoyable travel experience, considering potential challenges and cultural differences.\n\nPlease ask clarifying questions as needed.\n\nLet's begin! Here's the information about my trip: [Paste your answers to the questions above here]"
+    },
+    {
+      "id": "builtin_prompt_24",
+      "name": "Financial planner",
+      "category": "education",
+      "content": "I want you to act as a financial planner, who can provide a roadmap and guidance on how to accumulate wealth to [financial goal]. Share insights on various strategies like saving, investing, creating additional income streams, and optimizing tax benefits. Provide advice on budgeting, risk management, and long-term financial planning. Offer suggestions on investing in stocks, real estate, retirement funds, or starting a business as potential pathways to grow wealth."
+    },
+    {
+      "id": "builtin_prompt_25",
+      "name": "Write an introductory paragraph",
+      "category": "writing",
+      "content": "Write an engaging introductory paragraph for an essay about [essay topic, e.g., climate change, the role of technology in education, my first year in college]. Based on the topic, infer the appropriate essay type (e.g., argumentative, analytical, narrative, descriptive, expository) and craft a paragraph that includes:\n- A compelling hook to capture attention\n- A brief introduction or context relevant to the topic\n- A clear and focused thesis statement that outlines the essay’s main argument or purpose\n\nThe tone should be [desired tone, e.g., formal, reflective, persuasive], and the level of writing should match [education level, e.g., high school, college freshman, senior].\n\nAfter the paragraph, provide brief tips or an outline to help the student continue the essay, including:\n- Suggested structure for body paragraphs\n- Ideas for supporting evidence or examples\n- Transitions to use between paragraphs\n- A reminder of how to restate the thesis in the conclusion",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_26",
+      "name": "Real-Time Problem Solving",
+      "category": "education",
+      "content": "Work through this problem step-by-step: [problem or topic, e.g., solve this algebra equation, analyze this business case, debug this code]. At each step, explain clearly what you’re doing and why that step is necessary. Don’t just give the final answer — break it down logically and thoroughly. After solving it, review the approach, highlight any common mistakes to avoid, and offer feedback or tips to better understand or improve the process.\n\nIf I ask questions, respond as if you’re teaching a friend who’s new to this subject."
+    },
+    {
+      "id": "builtin_prompt_27",
+      "name": "Paraphraser",
+      "category": "education",
+      "content": "I want you to act as a content paraphraser, who can skillfully rephrase and restructure existing text to create a new, unique version without altering the original meaning or intent. Use synonyms, change sentence structures, and adjust the tone or style as needed to ensure the paraphrased content is both original and engaging. Offer guidance on maintaining the integrity of the original message while avoiding plagiarism and preserving the author’s voice.\n\n[text here]",
+      "example": "I want you to act as a content paraphraser, who can skillfully rephrase and restructure existing text to create a new, unique version without altering the original meaning or intent. Use synonyms, change sentence structures, and adjust the tone or style as needed to ensure the paraphrased content is both original and engaging. Offer guidance on maintaining the integrity of the original message while avoiding plagiarism and preserving the author’s voice.\n\nThe quick brown fox jumps over the lazy dog."
+    },
+    {
+      "id": "builtin_prompt_28",
+      "name": "Summarizer",
+      "category": "education",
+      "content": "Act as a skilled summarizer. Read the following article or passage:\n\n[text here]\n\n, and condense it into a clear, well-organized summary that captures the main points, key arguments, and core conclusions. Focus on presenting the essential information in an unbiased tone, while preserving the original intent and emphasis of the author. Offer a summary that is appropriate for someone who hasn't read the original but needs to understand its value and implications.\n\nWhile summarizing:\n– Identify the central thesis and supporting evidence\n– Exclude repetitive or non-essential details\n– Maintain neutrality and accuracy\n– Use your own words, not direct quotes, unless absolutely necessary\n– At the end, include a brief note on how to properly cite or reference the source if used in academic or professional contexts",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_29",
+      "name": "Life Coach",
+      "category": "other",
+      "content": "I want you to act as a life coach, who can provide guidance and motivation to help me reach personal and professional goals. Share insights on setting realistic goals, creating an action plan, developing positive habits, and overcoming obstacles. Offer advice on improving self-awareness, building confidence, and managing stress. Provide tips on maintaining work-life balance, developing interpersonal skills, and fostering personal growth. My first request is:\n\n[request]",
+      "example": "I want you to act as a life coach, who can provide guidance and motivation to help me reach personal and professional goals. Share insights on setting realistic goals, creating an action plan, developing positive habits, and overcoming obstacles. Offer advice on improving self-awareness, building confidence, and managing stress. Provide tips on maintaining work-life balance, developing interpersonal skills, and fostering personal growth. My first request is:\n\nHelp me design a personal development plan for the next year, focusing on career advancement, improving fitness, and cultivating a positive mindset."
+    },
+    {
+      "id": "builtin_prompt_30",
+      "name": "Course Generator",
+      "category": "education",
+      "content": "I want you to act as a course generator, who can design comprehensive and engaging educational courses across a wide range of subjects, such as technology, personal development, arts, or business. Outline the course structure, including modules, lessons, and learning objectives to ensure a coherent and progressive learning experience. Suggest various teaching methods, such as video lectures, interactive quizzes, practical exercises, and assignments to cater to different learning styles. Offer advice on how to promote the course, attract students, and provide ongoing support to ensure their success. My first request is:\n\n[request]",
+      "example": "I want you to act as a course generator, who can design comprehensive and engaging educational courses across a wide range of subjects, such as technology, personal development, arts, or business. Outline the course structure, including modules, lessons, and learning objectives to ensure a coherent and progressive learning experience. Suggest various teaching methods, such as video lectures, interactive quizzes, practical exercises, and assignments to cater to different learning styles. Offer advice on how to promote the course, attract students, and provide ongoing support to ensure their success. My first request is:\n\nHelp me create an outline for a 6-week online course on digital marketing strategies for small business owners."
+    },
+    {
+      "id": "builtin_prompt_31",
+      "name": "TikTok Script Writer",
+      "category": "other",
+      "content": "I want you to act as a TikTok video scriptwriter, who can create captivating, entertaining, and share-worthy scripts for short-form video content on the TikTok platform. Consider the platform's unique format and user behavior when crafting engaging storylines, incorporating humor, challenges, trends, or educational elements as appropriate. Offer guidance on incorporating visual effects, background music, and text overlays to enhance the viewer experience and maximize the video's virality potential. My first request is:\n\n[request]",
+      "example": "I want you to act as a TikTok video scriptwriter, who can create captivating, entertaining, and share-worthy scripts for short-form video content on the TikTok platform. Consider the platform's unique format and user behavior when crafting engaging storylines, incorporating humor, challenges, trends, or educational elements as appropriate. Offer guidance on incorporating visual effects, background music, and text overlays to enhance the viewer experience and maximize the video's virality potential. My first request is:\n\nWrite a script for a 60-second TikTok video demonstrating a simple yet impressive DIY home decor project."
+    },
+    {
+      "id": "builtin_prompt_32",
+      "name": "Writing Style Analyst",
+      "category": "writing",
+      "content": "I want you to act as a writing style analyst, who can examine my writing samples and provide a detailed analysis of my unique writing style. Share insights on my use of vocabulary, sentence structure, tone, and narrative techniques. Offer suggestions on how I can further refine my style, improve clarity and readability, or adapt my writing to different genres, audiences, or purposes. My first request is:\n\n[request]",
+      "example": "I want you to act as a writing style analyst, who can examine my writing samples and provide a detailed analysis of my unique writing style. Share insights on my use of vocabulary, sentence structure, tone, and narrative techniques. Offer suggestions on how I can further refine my style, improve clarity and readability, or adapt my writing to different genres, audiences, or purposes. My first request is:\n\nAnalyze a short story I've written and identify key elements that define my writing style, including strengths and potential areas for improvement."
+    },
+    {
+      "id": "builtin_prompt_33",
+      "name": "Tech Writer",
+      "category": "writing",
+      "content": "I want you to act as a technical writer, who can provide guidance on creating clear, concise, and user-friendly technical documentation, such as user manuals, product specifications, or software documentation. Share insights on understanding the technical subject matter, organizing information logically, and writing for a non-technical audience. Offer advice on using diagrams, screenshots, or other visual aids to enhance understanding, and maintaining consistency in language, style, and format across different documents. My first request is:\n\n[request]",
+      "example": "I want you to act as a technical writer, who can provide guidance on creating clear, concise, and user-friendly technical documentation, such as user manuals, product specifications, or software documentation. Share insights on understanding the technical subject matter, organizing information logically, and writing for a non-technical audience. Offer advice on using diagrams, screenshots, or other visual aids to enhance understanding, and maintaining consistency in language, style, and format across different documents. My first request is:\n\nHelp me draft a user guide for a new mobile app, focusing on making complex features easy to understand for first-time users."
+    },
+    {
+      "id": "builtin_prompt_34",
+      "name": "Website SEO and conversion optimization",
+      "category": "other",
+      "content": "As an SEO and conversion rate optimization specialist, your task is to review and optimize the website copy for [insert company name], focusing on the [homepage/product pages/blog/landing pages]. Identify the target keywords for each page and suggest ways to naturally incorporate them into the copy, headings, and meta descriptions. Analyze the current copy and provide recommendations for improving readability, addressing customer pain points, and highlighting unique selling propositions. Ensure that the tone aligns with our brand’s voice and resonates with our target audience, which is [insert demographic details]. Suggest ideas for compelling calls-to-action and lead magnets that will encourage visitors to convert into leads or customers.\n\n[Text here]"
+    },
+    {
+      "id": "builtin_prompt_35",
+      "name": "DIY Expert",
+      "category": "education",
+      "content": "I want you to act as a DIY expert. You will develop the skills necessary to complete simple home improvement projects, create tutorials and guides for beginners, explain complex concepts in layman’s terms using visuals, and work on developing helpful resources that people can use when taking on their own do-it-yourself project. My first suggestion request is:\n\n[request]",
+      "example": "I want you to act as a DIY expert. You will develop the skills necessary to complete simple home improvement projects, create tutorials and guides for beginners, explain complex concepts in layman’s terms using visuals, and work on developing helpful resources that people can use when taking on their own do-it-yourself project. My first suggestion request is:\n\nI need help on creating an outdoor seating area for entertaining guests."
+    },
+    {
+      "id": "builtin_prompt_36",
+      "name": "Regex Generator",
+      "category": "other",
+      "content": "I want you to act as a regex generator. Your role is to generate regular expressions that match specific patterns in text. You should provide the regular expressions in a format that can be easily copied and pasted into a regex-enabled text editor or programming language. Do not write explanations or examples of how the regular expressions work; simply provide only the regular expressions themselves. My first prompt is:\n\n[prompt]",
+      "example": "I want you to act as a regex generator. Your role is to generate regular expressions that match specific patterns in text. You should provide the regular expressions in a format that can be easily copied and pasted into a regex-enabled text editor or programming language. Do not write explanations or examples of how the regular expressions work; simply provide only the regular expressions themselves. My first prompt is:\n\nGenerate a regular expression that matches an email address."
+    },
+    {
+      "id": "builtin_prompt_37",
+      "name": "Architect Guide",
+      "category": "development",
+      "content": "You are the “Architect Guide,” specialized in assisting programmers who are experienced in individual module development but are looking to enhance their skills in understanding and managing entire project architectures. Your primary roles and methods of guidance include:\n- Basics of Project Architecture: Start with foundational knowledge, focusing on principles and practices of inter-module communication and standardization in modular coding.\n- Integration Insights: Provide insights into how individual modules integrate and communicate within a larger system, using examples and case studies for effective project architecture demonstration.\n- Exploration of Architectural Styles: Encourage exploring different architectural styles, discussing their suitability for various types of projects, and provide resources for further learning.\n- Practical Exercises: Offer practical exercises to apply new concepts in real-world scenarios. Analysis of Multi-layered Software Projects: Analyze complex software projects to understand their architecture, including layers like Frontend Application, Backend Service, and Data Storage.\n- Educational Insights: Focus on educational insights for comprehensive project development understanding, including reviewing project readme files and source code.\n- Use of Diagrams and Images: Utilize architecture diagrams and images to aid in understanding project structure and layer interactions.\n- Clarity Over Jargon: Avoid overly technical language, focusing on clear, understandable explanations.\n- No Coding Solutions: Focus on architectural concepts and practices rather than specific coding solutions.\n- Detailed Yet Concise Responses: Provide detailed responses that are concise and informative without being overwhelming.\n- Practical Application and Real-World Examples: Emphasize practical application with real-world examples.\n- Clarification Requests: Ask for clarification on vague project details or unspecified architectural styles to ensure accurate advice.\n- Professional and Approachable Tone: Maintain a professional yet approachable tone, using familiar but not overly casual language.\n- Use of Everyday Analogies: When discussing technical concepts, use everyday analogies to make them more accessible and understandable."
+    },
+    {
+      "id": "builtin_prompt_38",
+      "name": "IT Expert",
+      "category": "other",
+      "content": "I want you to act as an IT Expert. I will provide you with all the information needed about my technical problems, and your role is to solve my problem. You should use your computer science, network infrastructure, and IT security knowledge to solve my problem. Using intelligent, simple, and understandable language for people of all levels in your answers will be helpful. It is helpful to explain your solutions step by step and with bullet points. Try to avoid too many technical details, but use them when necessary. I want you to reply with the solution, not write any explanations. My first problem is:\n\n[problem]",
+      "example": "I want you to act as an IT Expert. I will provide you with all the information needed about my technical problems, and your role is to solve my problem. You should use your computer science, network infrastructure, and IT security knowledge to solve my problem. Using intelligent, simple, and understandable language for people of all levels in your answers will be helpful. It is helpful to explain your solutions step by step and with bullet points. Try to avoid too many technical details, but use them when necessary. I want you to reply with the solution, not write any explanations. My first problem is:\n\nMy laptop gets an error with a blue screen."
+    },
+    {
+      "id": "builtin_prompt_39",
+      "name": "Senior Devops Engineer",
+      "category": "development",
+      "content": "You are a Senior DevOps Engineer planning the initial DevOps setup for a new web application. First, gather the business requirements from stakeholders. Then, create a simplified DevOps plan covering these key areas:\n\nI. Infrastructure:\n\n    Cloud Provider (AWS, Azure, GCP, etc.): Recommendation and justification.\n    IaC Tool (Terraform, etc.): Choice and essential resources managed.\n    Database: Selection of a scalable, cost-effective option.\n    Caching: Basic caching strategy.\n\nII. Deployment:\n\n    Docker: Containerization approach.\n    Orchestration (Kubernetes, ECS, Docker Compose): Choice for application needs.\n    CI/CD Pipeline: Automated build, test, and deployment strategy.\n\nIII. Automation:\n\n    CI/CD Tool (Jenkins, GitLab CI, etc.): Selection and rationale.\n    Monitoring/Alerting: Basic implementation; define key metrics.\n    Logging: Centralized solution.\n\nIV. Scaling, Cost, & Security:\n\n    Auto-Scaling: Implementation approach.\n    Load Balancing: Configuration.\n    Resource Optimization: Strategy.\n    Cost Monitoring: Tools for tracking expenses.\n    Secrets Management: Solution.\n    Least Privilege: Enforcement.\n    WAF: Consideration.\n\nDeliverable:\n\nA concise DevOps plan outlining technologies and processes for deploying and managing the web application, directly addressing the business requirements gathered from stakeholders. Focus on actionable steps and cost optimization.\n\nThis is my initial list of requirements for the Devops plan:\n\n[list of requirements]",
+      "example": "I want to build a new e-commerce MVP, targeting rapid deployment, cost-effective scalability for 1,000 daily active users (DAU) in the first month, and future growth"
+    },
+    {
+      "id": "builtin_prompt_40",
+      "name": "Software Quality Assurance Tester",
+      "category": "development",
+      "content": "I want you to act as a software quality assurance tester for a new software application. Your job is to test the functionality and performance of the software to ensure it meets the required standards. You will need to write detailed reports on any issues or bugs you encounter, and provide recommendations for improvement. Do not include any personal opinions or subjective evaluations in your reports. Your first task is:\n\n[task]",
+      "example": "I want you to act as a software quality assurance tester for a new software application. Your job is to test the functionality and performance of the software to ensure it meets the required standards. You will need to write detailed reports on any issues or bugs you encounter, and provide recommendations for improvement. Do not include any personal opinions or subjective evaluations in your reports. Your first task is:\n\nTest the login functionality of the software, including valid and invalid credentials, password recovery, and session management."
+    },
+    {
+      "id": "builtin_prompt_41",
+      "name": "Developer Relations Consultant",
+      "category": "development",
+      "content": "I want you to act as a Developer Relations consultant. I will provide you with a software package and it’s related documentation. Research the package and its available documentation, and if none can be found, reply “Unable to find docs”. Your feedback needs to include quantitative analysis (using data from StackOverflow, Hacker News, and GitHub) of content like issues submitted, closed issues, number of stars on a repository, and overall StackOverflow activity. If there are areas that could be expanded on, include scenarios or contexts that should be added. Include specifics of the provided software packages like number of downloads, and related statistics over time. You should compare industrial competitors and the benefits or shortcomings when compared with the package. Approach this from the mindset of the professional opinion of software engineers. Review technical blogs and websites (such as TechCrunch.com or Crunchbase.com) and if data isn’t available, reply “No data available”.",
+      "example": "I want you to analyze the software package Express at https://expressjs.com” Provide a detailed report on its usage, popularity, and areas for improvement."
+    },
+    {
+      "id": "builtin_prompt_42",
+      "name": "Commit Message Generator",
+      "category": "development",
+      "content": "I want you to act as a commit message generator. I will provide you with information about the task and the prefix for the task code, and I would like you to generate an appropriate commit message using the conventional commit format. Do not write any explanations or other words, just reply with the commit message.",
+      "example": "Task: Add a new feature to the user profile page\nPrefix: feat\nCommit Message: feat(user-profile): add new feature to display user bio"
+    },
+    {
+      "id": "builtin_prompt_43",
+      "name": "Code Reviewer",
+      "category": "development",
+      "content": "I want you to act as a code reviewer, who can thoroughly examine and evaluate code submissions, identify potential issues, and provide constructive feedback to improve code quality, maintainability, and performance. Share insights on adhering to coding standards, optimizing algorithms, and implementing best practices for error handling, security, and resource management. Offer guidance on enhancing code readability, documentation, and modularity to ensure a robust and maintainable codebase. My first request is:\n\n[request]",
+      "example": "I want you to act as a code reviewer, who can thoroughly examine and evaluate code submissions, identify potential issues, and provide constructive feedback to improve code quality, maintainability, and performance. Share insights on adhering to coding standards, optimizing algorithms, and implementing best practices for error handling, security, and resource management. Offer guidance on enhancing code readability, documentation, and modularity to ensure a robust and maintainable codebase. My first request is:\n\nReview this code snippet for a Python function that calculates the factorial of a number and suggest improvements."
+    },
+    {
+      "id": "builtin_prompt_44",
+      "name": "Full Stack Developer",
+      "category": "development",
+      "content": "I want you to act as a full-stack software developer, who can provide guidance on designing, developing, and deploying full-stack applications. Share insights on working with various front-end technologies (like HTML, CSS, JavaScript, and frameworks like React or Vue.js), back-end technologies (like Node.js, Python, or Ruby), and databases (like SQL or MongoDB). Offer advice on managing client-server communication, implementing user authentication, handling errors, and deploying applications to the cloud. My first request is:\n\n[request]",
+      "example": "I want you to act as a full-stack software developer, who can provide guidance on designing, developing, and deploying full-stack applications. Share insights on working with various front-end technologies (like HTML, CSS, JavaScript, and frameworks like React or Vue.js), back-end technologies (like Node.js, Python, or Ruby), and databases (like SQL or MongoDB). Offer advice on managing client-server communication, implementing user authentication, handling errors, and deploying applications to the cloud. My first request is:\n\nHelp me design a simple web application that allows users to create and manage to-do lists, including user authentication and data storage."
+    },
+    {
+      "id": "builtin_prompt_45",
+      "name": "Code Teacher",
+      "category": "development",
+      "content": "I want you to act as a code teacher, who can provide clear and concise explanations of programming concepts, techniques, and best practices across various languages, such as Python, JavaScript, Java, or C++. Share insights on understanding fundamental programming principles, mastering specific languages, and utilizing essential tools and resources to enhance learning. Offer guidance on building projects, honing problem-solving skills, and staying up-to-date with the latest trends and developments in the software industry. My first request is:\n\n[request]",
+      "example": "I want you to act as a code teacher, who can provide clear and concise explanations of programming concepts, techniques, and best practices across various languages, such as Python, JavaScript, Java, or C++. Share insights on understanding fundamental programming principles, mastering specific languages, and utilizing essential tools and resources to enhance learning. Offer guidance on building projects, honing problem-solving skills, and staying up-to-date with the latest trends and developments in the software industry. My first request is:\n\nExplain the concept of object-oriented programming and how it is implemented in Python, using an example to illustrate the key concepts of classes, objects, inheritance, and polymorphism."
+    },
+    {
+      "id": "builtin_prompt_46",
+      "name": "Machine Learning Engineer",
+      "category": "development",
+      "content": "I want you to act as a machine learning engineer, who can provide insights into the process of developing machine learning models. Share knowledge about data preparation, feature engineering, model selection, training, and evaluation. Discuss the nuances of various machine learning algorithms and their use cases. Also, offer advice on how to manage overfitting, interpret model performance, and improve predictions. My first request is:\n\n[request]",
+      "example": "I want you to act as a machine learning engineer, who can provide insights into the process of developing machine learning models. Share knowledge about data preparation, feature engineering, model selection, training, and evaluation. Discuss the nuances of various machine learning algorithms and their use cases. Also, offer advice on how to manage overfitting, interpret model performance, and improve predictions. My first request is:\n\nProvide a step-by-step guide on how to develop a machine learning model to predict house prices based on features like location, number of rooms, and square footage."
+    },
+    {
+      "id": "builtin_prompt_47",
+      "name": "Coding Assistant",
+      "category": "development",
+      "content": "I want you to act as a coding assistant, who can provide guidance, tips, and best practices for various programming languages, such as Python, JavaScript, Java, or C++. Share insights on writing clean, efficient, and well-documented code, as well as debugging and troubleshooting common issues. Offer advice on selecting the appropriate tools, libraries, and frameworks for specific projects, and assist with understanding key programming concepts, such as algorithms, data structures, and design patterns. My first request is:\n\n[request]",
+      "example": "I want you to act as a coding assistant, who can provide guidance, tips, and best practices for various programming languages, such as Python, JavaScript, Java, or C++. Share insights on writing clean, efficient, and well-documented code, as well as debugging and troubleshooting common issues. Offer advice on selecting the appropriate tools, libraries, and frameworks for specific projects, and assist with understanding key programming concepts, such as algorithms, data structures, and design patterns. My first request is:\n\nHelp me write a simple Python script that reads a CSV file, filters the data based on specific criteria, and outputs the results to a new CSV file."
+    },
+    {
+      "id": "builtin_prompt_48",
+      "name": "ASCII Artist",
+      "category": "other",
+      "content": "I want you to act as an ascii artist. I will provide or describe an object to you and I will ask you to write that object as ascii code in the code block. Write only ascii code. Do not explain about the object you wrote. The first thing I want you to draw is:\n\n[object]",
+      "example": "I want you to act as an ascii artist. I will provide or describe an object to you and I will ask you to write that object as ascii code in the code block. Write only ascii code. Do not explain about the object you wrote. The first thing I want you to draw is:\n\nA cat"
+    },
+    {
+      "id": "builtin_prompt_49",
+      "name": "Understanding Practical Applications with Real-World Examples",
+      "category": "education",
+      "content": "Explain [concept, e.g., machine learning, opportunity cost, entropy] in simple terms, then give a clear real-world example of how it’s applied in [field or industry, e.g., healthcare, education, manufacturing]. Describe how the concept is used in this scenario, why it matters, and what benefits or problems it addresses. Include real companies, tools, or case studies if relevant, and keep the explanation appropriate for someone with a [audience level, e.g., beginner, high school student, industry professional]. Use analogies or vivid descriptions to make it easier to understand."
+    },
+    {
+      "id": "builtin_prompt_50",
+      "name": "Write a poem",
+      "category": "writing",
+      "content": "Write a [type of poem, e.g., haiku, sonnet, free verse] about [topic, e.g., love, nature, technology]. The poem should evoke strong imagery and emotions related to the topic. Use [specific poetic devices, e.g., metaphors, similes, alliteration] to enhance the language and create a vivid experience for the reader. Aim for a tone that is [desired tone, e.g., romantic, reflective, humorous].\n\nAfter the poem, provide a brief analysis of its themes and any literary devices used.",
+      "example": "In the quiet woods,\nWhispers of leaves dance with light,\nNature’s soft embrace."
+    },
+    {
+      "id": "builtin_prompt_51",
+      "name": "YouTube Video Script",
+      "category": "writing",
+      "content": "Create an engaging, clear, and structured script for a [length, e.g., 5-minute] YouTube video about [topic, e.g., how black holes work].\n\nInstructions:\n– Begin with a hook: a surprising fact, question, or bold statement to draw in viewers\n– Introduce the topic and what the audience will learn or gain by watching\n– Explain key points step-by-step, using language appropriate for a [audience level, e.g., beginner, general audience, advanced learners]\n– Suggest visuals or animations at points where complex ideas are explained\n– Maintain an energetic or appropriate tone throughout: [tone, e.g., enthusiastic, dramatic, casual]\n– End with a summary or surprising twist, followed by a call to action (like “subscribe,” “comment,” or “check out the next video”)\n– Use clear transitions between sections for flow"
+    },
+    {
+      "id": "builtin_prompt_52",
+      "name": "Riddle me this",
+      "category": "other",
+      "content": "Generate a clever riddle and provide a step-by-step guide to help the user arrive at the correct solutions. The riddle should be challenging but solvable with logical thinking and attention to detail. After presenting each riddle, offer a set of hints or questions that progressively lead the user towards the answer. Ensure that the hints are not too obvious but still provide enough information to guide the user’s thought process. Finally, reveal the solution and provide a brief explanation of how the riddle can be solved using the given hints."
+    },
+    {
+      "id": "built_in_prompt_49",
+      "name": "Blog Outline",
+      "content": "Create a blog outline for [topic].\n\nOptional details: Focus on [angle] to show the reader to do [action].",
+      "category": "contentSeo",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_50",
+      "name": "Blog Post",
+      "content": "Write a blog about [topic]. Make sure to focus on [key points].",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_51",
+      "name": "FAQ Generator",
+      "content": "Create a list of [10] frequently asked questions about [keyword] and provide answers for each one of them considering the SERP and rich result guidelines.",
+      "category": "contentSeo",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_52",
+      "name": "Headline Generator",
+      "content": "Generate 10 attention-grabbing headlines for an article about [your topic]",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_53",
+      "name": "Landing Page Copy",
+      "content": "Create website copy about [product details]. Follow the following structure:\n\n- Hero\n- Subheader\n- Call to action\n- Tagline\n- H2\n- paragraph\n- H2\n- paragraph\n- H2\n- paragraph\n- Call to action",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_54",
+      "name": "Product Brochure",
+      "content": "Create a brochure outlining the features and benefits of [product]. Include customer testimonials and a call to action.\n\nProduct details: [additional product details]",
+      "category": "contentSeo",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_55",
+      "name": "Product Description",
+      "content": "Craft an irresistible product description that highlights the benefits of [your product]",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_56",
+      "name": "Rewrite Content",
+      "content": "Revise the given content to improve its clarity, conciseness, and overall quality.\n\nInstructions:\n1. Read the original content carefully to understand its message and purpose.\n2. Identify any areas that need improvement, such as grammar, word choice, or sentence structure.\n3. Consider the target audience and adjust the tone, style, and level of formality accordingly.\n4. Rewrite the content, ensuring that the revised version maintains the original meaning and intent.\n5. Use clear and concise language, avoiding unnecessary jargon or complex terms.\n6. Break down lengthy sentences into shorter, more digestible ones.\n7. Check the revised content for coherence and flow, ensuring that the ideas are logically organized.\n8. Proofread the final version to correct any remaining errors or inconsistencies. \n\nOriginal content:\n\n[paste the original content here]",
+      "category": "contentSeo",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_57",
+      "name": "SEO Content Brief",
+      "content": "Create a SEO content brief for [keyword].",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_58",
+      "name": "SEO Keyword Ideas",
+      "content": "Generate a list of 20 keyword ideas on [topic].\n\nCluster this list of keywords according to funnel stages whether they are top of the funnel, middle of the funnel or bottom of the funnel keywords.",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_59",
+      "name": "Short Summary",
+      "content": "Write a summary in 50 words that summarizes [topic or keyword].",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_60",
+      "name": "Step-by-Step Guide",
+      "content": "Create a step by step guide to instruct how to [topic].",
+      "category": "contentSeo",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_61",
+      "name": "Article Generator",
+      "content": "Write an article about [topic].\n\nInclude relevant statistics (add the links of the sources you use) and consider diverse perspectives. Write it in a [X tone] and mention the source links at the end.",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_62",
+      "name": "Attention-Interest-Desire-Action",
+      "content": "Using the 'Attention-Interest-Desire-Action' framework, write an email marketing campaign that highlights the\n\n[features]\n\nof our [product/service]\n\nand explains how these [advantages]\n\ncan be helpful to [ideal customer persona].\n\nElaborate on the [benefits] of our product and how it can positively impact the reader.",
+      "category": "emailMarketing"
+    },
+    {
+      "id": "built_in_prompt_63",
+      "name": "Email Subject Generator",
+      "content": "Develop five subject lines for a cold email offering your [product or service] to a potential client",
+      "category": "emailMarketing"
+    },
+    {
+      "id": "built_in_prompt_64",
+      "name": "Features-Advantages-Benefits",
+      "content": "Using the 'Features-Advantages-Benefits' framework, please write an email marketing campaign that highlights the [features]\n\nof our [product/service]\n\nand explains how these [advantages]\n\ncan be helpful to [ideal customer persona].\n\nElaborate on the [benefits] of our product and how it can positively impact the reader.",
+      "category": "emailMarketing"
+    },
+    {
+      "id": "built_in_prompt_65",
+      "name": "Newsletter From Recent News",
+      "content": "Find recent news about [topic or event] and then turn it into a long form newsletter consisting of a subject line, intro, body paragraph, bullet point list, and a conclusion.",
+      "category": "emailMarketing"
+    },
+    {
+      "id": "built_in_prompt_66",
+      "name": "Newsletter Inspiration",
+      "content": "What are the top trends in [industry] that I can include in my next newsletter focused on [details about your newsletter]?",
+      "category": "emailMarketing"
+    },
+    {
+      "id": "built_in_prompt_67",
+      "name": "Pain-Agitate-Solution",
+      "content": "Using the 'Pain-Agitate-Solution' framework, please write an email marketing campaign that highlights the [features]\n\nof our [product/service]\n\nand explains how these [advantages]\n\ncan be helpful to [ideal customer persona].\n\nElaborate on the [benefits] of our product and how it can positively impact the reader.",
+      "category": "emailMarketing"
+    },
+    {
+      "id": "built_in_prompt_68",
+      "name": "Facebook Ad",
+      "content": "Create 3 variations of effective ad copy to promote [product] for [audience].\n\nMake sure they are [persuasive/playful/emotional] and mention these benefits:\n- [Benefit 1]\n- [Benefit 2]\n- [Benefit 3] Finish with a call to action saying [CTA] and add 3 emojis to it.",
+      "category": "paidAds"
+    },
+    {
+      "id": "built_in_prompt_69",
+      "name": "Facebook Ad (PAS)",
+      "content": "Product Description: [Product Description]\n\nWrite a PAS for the product\n\nConvert the Problem Agitate Solution into Facebook ad copy\n\nWrite a Facebook ad headline",
+      "category": "paidAds"
+    },
+    {
+      "id": "built_in_prompt_70",
+      "name": "Facebook Headlines",
+      "content": "Brainstorm 20 compelling headlines for a Facebook ad promoting [product description] for [audience]. Format the output as a table.",
+      "category": "paidAds"
+    },
+    {
+      "id": "built_in_prompt_71",
+      "name": "Facebook Video Script",
+      "content": "Write a Facebook ad video script for [product description] that speaks directly to [our target audience] and addresses their pain points and desires",
+      "category": "paidAds"
+    },
+    {
+      "id": "built_in_prompt_72",
+      "name": "Google Ads",
+      "content": "Create 10 google ads (a headline and a description) for [product description] targeting the keyword [keyword].\n\nThe headline of the ad needs to be under 30 characters. The description needs to be under 90 characters. Format the output as a table.",
+      "category": "paidAds"
+    },
+    {
+      "id": "built_in_prompt_73",
+      "name": "Customer Case Study",
+      "content": "Write a customer case study highlighting how [company name] used [product name] to [achieve success]. Include 4 customer quotes, 2 customer success metrics, and visual elements.\n\nCase details:\n[additional details go here]",
+      "category": "prCommunication"
+    },
+    {
+      "id": "built_in_prompt_74",
+      "name": "Event Invite",
+      "content": "Write a persuasive email to increase attendance at our upcoming event about [theme].\n\nHere are additional details about the event to include:\n[event details]",
+      "category": "prCommunication"
+    },
+    {
+      "id": "built_in_prompt_75",
+      "name": "Internal Memos",
+      "content": "Write an internal memo to [specific department/team] regarding [topic].\n\nIn the memo, explain [key details] and the desired outcome. Provide an action plan with clear steps and timeline.",
+      "category": "prCommunication"
+    },
+    {
+      "id": "built_in_prompt_76",
+      "name": "Pitch a Journalist",
+      "content": "Pitch a story to [reporter name/publication].\n\nStory details: [details]",
+      "category": "prCommunication"
+    },
+    {
+      "id": "built_in_prompt_77",
+      "name": "Press Release",
+      "content": "Write a press release for [company or organization] announcing a recent achievement or milestone. Begin with a concise and attention-grabbing headline that summarizes the main news. In the opening paragraph, provide a brief overview of the announcement and its significance. In the following paragraphs, provide more details about the achievement, including any relevant statistics or data. Use quotes from company representatives or experts to add credibility and context to the announcement. End the press release with a brief company description and contact information for media inquiries.\n\nRemember to keep the press release concise, informative, and engaging, highlighting the key takeaways and benefits of the announcement.\n\nPress release details:\n\n[paste any necessary details about the announcement here]",
+      "category": "prCommunication",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_78",
+      "name": "Linkedin Connection Invite Message",
+      "content": "You are a recruiter trying to attract top talent.\n\nYou came across this linkedin profile [linkedin URL].\n\nYou have to pitch them and you can't write more than 500 characters\n\nYour message should include:\n- the name of the company they're currently working for\n- praise for their areas of expertise",
+      "category": "recruiting"
+    },
+    {
+      "id": "built_in_prompt_79",
+      "name": "3 Step Outreach Sequence",
+      "content": "Generate a 3 step outreach sequence for [company URL] selling to [target customer]",
+      "category": "sales"
+    },
+    {
+      "id": "built_in_prompt_80",
+      "name": "Analyze Industry Trends",
+      "content": "Analyze the industry trends for [industry] in the [country/region] for the past 12 months and compare it to the same period last year.\n\nPresent your findings in a report.",
+      "category": "sales"
+    },
+    {
+      "id": "built_in_prompt_81",
+      "name": "Brainstorm Pain Points",
+      "content": "Act as a [target persona].\n\nWhat pain points do they face and what language would they use for [goals]?",
+      "category": "sales"
+    },
+    {
+      "id": "built_in_prompt_82",
+      "name": "Competitive Analysis",
+      "content": "Conduct a full analysis of [competitor company name] and identify the competitive advantages and disadvantages of their product.",
+      "category": "sales",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_83",
+      "name": "Linkedin Boolean Search",
+      "content": "Write me a boolean search on variations of [roles] that I can plug into sales navigator search",
+      "category": "sales"
+    },
+    {
+      "id": "built_in_prompt_84",
+      "name": "Personalized Cold Email From LinkedIn Profile",
+      "content": "Write a personalized cold email to [linkedin profile url] selling [product description].\n\nMake sure the first 7 words of the email catch the reader's attention. Make the email 4-6 sentences.",
+      "category": "sales"
+    },
+    {
+      "id": "built_in_prompt_85",
+      "name": "Research Prospect From Linkedin",
+      "content": "Summarize [linkedin profile url] into 10 bullet points, brainstorm the pain points they have around [topic]",
+      "category": "sales"
+    },
+    {
+      "id": "builtin_prompt_86",
+      "name": "Caption Generator",
+      "content": "Write a catchy caption about [your theme] and try to play with words to make it fun, engage users in the end, ask them questions, use relevant emojis, and 3 hashtags in the end",
+      "category": "socialMedia"
+    },
+    {
+      "id": "builtin_prompt_87",
+      "name": "Generate Content Calendar",
+      "content": "Generate a content calendar about [topic]",
+      "category": "socialMedia"
+    },
+    {
+      "id": "builtin_prompt_88",
+      "name": "Headlines",
+      "content": "Write 5 attention-grabbing headlines for a [platform] post on [topic] for [audience].",
+      "category": "socialMedia",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_89",
+      "name": "Instagram Captions",
+      "content": "Write 5 variations of Instagram captions for [product].\n\nUse friendly, human-like language that appeals to [target audience].\n\nEmphasize the unique qualities of [product],\n\nuse ample emojis, and don't sound too promotional.",
+      "category": "socialMedia"
+    },
+    {
+      "id": "builtin_prompt_90",
+      "name": "LinkedIn Post",
+      "content": "Create a narrative Linkedin post using immersive writing about [topic].\n\nDetails:\n\n[give details in bullet point format]\n\nUse a mix of short and long sentences. Make it punchy and dramatic.",
+      "category": "socialMedia",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_91",
+      "name": "TikTok Script",
+      "content": "Write a super engaging TikTok video script on [topic]. Each sentence should catch the viewer's attention to make them keep watching.",
+      "category": "socialMedia"
+    },
+    {
+      "id": "builtin_prompt_92",
+      "name": "Twitter Thread",
+      "content": "Give a controversial opinion on [topic], then turn it into a twitter thread.",
+      "category": "socialMedia"
+    },
+    {
+      "id": "builtin_prompt_93",
+      "name": "Youtube Video Description",
+      "content": "Write a 100-word YouTube video description that compels [audience]\n\nto watch a video on [topic]\n\nand mentions the following keywords\n\n[keyword 1]\n\n[keyword 2]\n\n[keyword 3].",
+      "category": "socialMedia"
+    },
+    {
+      "id": "builtin_prompt_94",
+      "name": "Reframing Business Perspectives",
+      "content": "Apply Reframing Business Perspectives to analyze [my business decision]. Look at the problem from different angles, challenging the existing beliefs.",
+      "category": "strategy",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_95",
+      "name": "Behavioral Economics Principles",
+      "content": "Apply Behavioral Economics Principles to analyze [my business decision]. Consider how cognitive, emotional, and social factors affect economic decisions.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_96",
+      "name": "Blue Ocean Strategy",
+      "content": "Apply the Blue Ocean Strategy to evaluate [my business decision]. Focus on creating uncontested market space rather than competing in existing industries.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_97",
+      "name": "Brand Ecosystem Development",
+      "content": "Utilize Brand Ecosystem Development to assess [my business decision]. Build a network of interrelated products, services, and stakeholders.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_98",
+      "name": "Consumer Behavior Analysis",
+      "category": "strategy",
+      "content": "Use Consumer Behavior Analysis to evaluate [my business decision]. Dive into the psychological, personal, and social influences on consumer choices."
+    },
+    {
+      "id": "builtin_prompt_99",
+      "name": "Cost-Benefit Analysis",
+      "content": "Apply Cost-Benefit Analysis to assess [my business decision]. Analyze the expected balance of benefits and costs, including possible risk and uncertainties.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_100",
+      "name": "Customer Lifetime Value",
+      "content": "Assess [my business decision] by considering Customer Lifetime Value. Analyze the long-term value of customers to understand how acquisition, retention, and monetization strategies align.",
+      "category": "strategy",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_101",
+      "name": "Customer Persona Building",
+      "content": "Utilize Customer Persona Building to evaluate [my business decision]. Define specific customer archetypes with detailed attributes and needs.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_102",
+      "name": "Disruptive Innovation",
+      "content": "Apply Disruptive Innovation to assess [my business decision]. Consider how groundbreaking changes in technology or methodology might impact your industry or market.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_103",
+      "name": "Double Loop Learning",
+      "content": "Use Double Loop Learning to evaluate [my business decision]. Reflect not just on solutions, but on underlying assumptions and beliefs, encouraging adaptive learning.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_104",
+      "name": "Eisenhower Matrix",
+      "content": "Use the Eisenhower Matrix to evaluate [my business decision]. Categorize tasks or elements based on urgency and importance to prioritize effectively.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_105",
+      "name": "Emotional Intelligence",
+      "content": "Evaluate [my business decision] with Emotional Intelligence in mind. Recognize and manage both your own and others' emotions to make more empathetic and effective decisions.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_106",
+      "name": "Freemium Business Model",
+      "content": "Apply the Freemium Business Model to [my business decision]. Explore offering basic services for free while charging for premium features.",
+      "category": "strategy",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_107",
+      "name": "Heuristics and Decision Trees",
+      "content": "Evaluate [my business decision] using Heuristics and Decision Trees. Create simplified models to understand complex problems and find optimal paths.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_108",
+      "name": "Hyper-Personalization Strategy",
+      "content": "Use Hyper-Personalization Strategy to evaluate [my business decision]. Leverage data and AI to provide an extremely personalized experience.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_109",
+      "name": "Innovation Ambition Matrix",
+      "content": "Evaluate [my business decision] through the Innovation Ambition Matrix. Plot initiatives on a matrix to balance core enhancements, adjacent opportunities, and transformational innovations.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_110",
+      "name": "Jobs to Be Done Framework",
+      "content": "Assess [my business decision] by applying the Jobs to Be Done Framework. Focus on the problems customers are trying to solve.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_111",
+      "name": "Kano Model Analysis",
+      "content": "Evaluate [my business decision] using the Kano Model Analysis. Prioritize customer needs into basic, performance, and excitement categories.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_112",
+      "name": "Lean Startup Principles",
+      "content": "Apply Lean Startup Principles to [my business decision]. Focus on creating a minimum viable product, measuring its success, and learning from the results.",
+      "category": "strategy",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_113",
+      "name": "Long Tail Strategy",
+      "content": "Analyze [my business decision] focusing on the Long Tail Strategy. Consider how niche markets or products may contribute to overall success.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_114",
+      "name": "Network Effects",
+      "content": "Analyze [my business decision] through the understanding of Network Effects. Consider how the value of a product or service increases as more people use it.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_115",
+      "name": "Pre-Mortem Analysis",
+      "content": "Utilize Pre-Mortem Analysis to assess [my business decision]. Imagine a future failure of the decision and work backward to identify potential causes and mitigation strategies.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_116",
+      "name": "Prospect Theory",
+      "content": "Utilize Prospect Theory to assess [my business decision]. Understand how people perceive gains and losses and how that can influence decision-making.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_117",
+      "name": "Pygmalion Effect",
+      "content": "Apply the Pygmalion Effect to analyze [my business decision]. Recognize how expectations can influence outcomes, both positively and negatively.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_118",
+      "name": "Resource-Based View",
+      "content": "Apply the Resource-Based View to evaluate [my business decision]. Focus on leveraging the company's internal strengths and weaknesses in relation to external opportunities and threats.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_119",
+      "name": "Risk-Reward Analysis",
+      "content": "Analyze [my business decision] through Risk-Reward Analysis. Evaluate the potential risks against the potential rewards to understand the balance and make an informed decision.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_120",
+      "name": "Scenario Planning",
+      "content": "Apply Scenario Planning to assess [my business decision]. Create different future scenarios and analyze how the decision performs in each to identify potential risks and opportunities."
+    },
+    {
+      "id": "builtin_prompt_121",
+      "name": "Six Thinking Hats",
+      "content": "Evaluate [my business decision] through the Six Thinking Hats method. Analyze the decision from different perspectives such as logical, emotional, cautious, creative, and more.",
+      "category": "strategy",
+      "isFeatured": true
+    },
+    {
+      "id": "builtin_prompt_122",
+      "name": "Temporal Discounting",
+      "content": "Use Temporal Discounting to analyze [my business decision]. Consider how the value of outcomes changes over time and how that might influence the decision-making process.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_123",
+      "name": "The Five Whys Technique",
+      "content": "Utilize the Five Whys Technique to analyze [my business decision]. Ask 'why?' multiple times to get to the root cause of problems or challenges.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_124",
+      "name": "The OODA Loop (Observe, Orient, Decide, Act)",
+      "content": "Use the OODA Loop to evaluate [my business decision]. Cycle through observing the situation, orienting yourself, making a decision, and taking action, then repeating as necessary.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_125",
+      "name": "Value Chain Analysis",
+      "content": "Apply Value Chain Analysis to evaluate [my business decision]. Examine all the activities performed by a company to create value and find opportunities for competitive advantage.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_126",
+      "name": "Viral Loop Strategy",
+      "content": "Use Viral Loop Strategy to assess [my business decision]. Construct a process where existing users help in recruiting new ones.",
+      "category": "strategy"
+    },
+    {
+      "id": "builtin_prompt_127",
+      "name": "Focus on Results",
+      "content": "Can you provide me with a case study template for [CLIENT NAME]'s [PRODUCT/SERVICE] that showcases the results achieved? Please suggest the key metrics and KPIs that should be included. Use [AGENCY NAME], [RESULTS], and [KEY METRICS] as placeholders for customization.",
+      "category": "caseStudies"
+    },
+    {
+      "id": "builtin_prompt_128",
+      "name": "Showcase Digital Transformation",
+      "content": "How would you structure a case study for [CLIENT NAME] that focuses on their journey of digital transformation? Please suggest the main sections, such as the challenges, the solutions, and the outcomes achieved. Use [AGENCY NAME], [CLIENT NAME], and [OUTCOMES] as placeholders for customization.",
+      "category": "caseStudies"
+    },
+    {
+      "id": "builtin_prompt_129",
+      "name": "Highlighting Collaboration",
+      "content": "Can you generate a case study template for [CLIENT NAME] that highlights their partnership with [PARTNER NAME]? Please include details on the collaboration process, the benefits for both parties, and the outcomes achieved. Use [AGENCY NAME], [CLIENT NAME], and [PARTNER NAME] as placeholders for customization.",
+      "category": "caseStudies"
+    },
+    {
+      "id": "builtin_prompt_130",
+      "name": "Achieving Goals",
+      "content": "How would you structure a case study for [CLIENT NAME] that showcases their success in achieving sustainability goals? Please suggest the main sections, such as the challenges, the solutions, and the impact achieved. Use [AGENCY NAME], [CLIENT NAME], and [IMPACT] as placeholders for customization.",
+      "category": "caseStudies"
+    },
+    {
+      "id": "builtin_prompt_131",
+      "name": "Focus on Strategy",
+      "content": "Can you provide me with a case study template for [CLIENT NAME] that highlights their social media strategy? Please include details on the objectives, the tactics, and the results achieved. Use [AGENCY NAME], [CLIENT NAME], and [RESULTS] as placeholders for customization.",
+      "category": "caseStudies"
+    },
+    {
+      "id": "builtin_prompt_132",
+      "name": "Highlight Unique Features",
+      "content": "Can you write a benefit-driven sales copy that highlights the unique features and benefits of [product/service]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_133",
+      "name": "Explain the Benefits",
+      "content": "How would you describe the benefits of [product/service] to a potential customer in a way that would convince them to purchase?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_134",
+      "name": "Explain the Need",
+      "content": "Can you craft a benefit-driven sales copy that explains why [product/service] is the best solution for [customer's problem or need]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_135",
+      "name": "Crafting Convincing Copy",
+      "content": "How would you sell the benefits of [product/service] to a customer who is on the fence about making a purchase?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_136",
+      "name": "Overcome Objections",
+      "content": "How would you sell the benefits of [product/service] to a customer who is skeptical about its effectiveness for [customer's problem or need]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_137",
+      "name": "Make Your Product Stand Out (Long-Form)",
+      "content": "Can you write an extended sales copy describing the unique features and benefits of [product/service] that sets it apart from the competition and makes it a must-have for [target audience]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_138",
+      "name": "Top Features (Long-Form)",
+      "content": "Can you write an extended sales copy on what are the top features of [product/service] that [target audience] will love?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_139",
+      "name": "Explaining the Process (Long-Form)",
+      "content": "Can you write an extended sales copy explaining in detail the process of using [product/service] and how it can help [target audience] achieve their goals?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_140",
+      "name": "Differentiating Your Product (Long-Form)",
+      "content": "Can you write an extended sales copy on what makes [product/service] stand out from similar offerings in the market, and why should [target audience] choose it over the competition?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_141",
+      "name": "Convincing Sales Copy (Long-Form)",
+      "content": "Can you write an extended sales copy convincing me why [product/service] is the missing piece [target audience] needs to take their [aspect of life/business] to the next level?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_142",
+      "name": "Engaging Sales Pitches (Medium-Form)",
+      "content": "Write a sales pitch for a [product/service] that highlights its unique features and benefits.",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_143",
+      "name": "Persuasive Emails (Medium-Form)",
+      "content": "Write a persuasive email to a potential customer explaining why they should choose [company name] for their [product/service] needs.",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_144",
+      "name": "Persuasive Blog Posts (Medium-Form)",
+      "content": "Write a persuasive blog post about the benefits of using [product/service] for [specific industry/target market].",
+      "category": "salesCopy"
+    },
+    {
+      "id": "builtin_prompt_145",
+      "name": "Problem-Solving Sales Pitches (Medium-Form)",
+      "content": "Write a sales pitch for a [product or service] that emphasizes its unique features and benefits. Include specific details about how it can solve a problem or improve the customer's life.",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_146",
+      "name": "Translating Ad Copy",
+      "content": "Translate the following ad copy into [language]: [ad copy]",
+      "category": "salesCopy",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_147",
+      "name": "Persuasive Ad Copy",
+      "content": "Rewrite the following ad copy to make it more persuasive: [ad copy]",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_148",
+      "name": "Translating Ad Copy Alternative Phrasing",
+      "content": "What are some alternative ways to phrase the following ad copy in [language]: [ad copy]",
+      "category": "salesCopy",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_149",
+      "name": "Translating Ad Copy Compelling CTAs",
+      "content": "Write a compelling call-to-action for our [product/service] in [language]: [product/service description]",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_150",
+      "name": "Translating Ad Copy Catchy Taglines",
+      "content": "Create a catchy tagline for our new [product/service] in [language]: [product/service description]",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_151",
+      "name": "Make Ad Copy More Interesting Grab Audience Attention",
+      "content": "I am trying to make my ad copy for [product/service] more interesting. Can you help me come up with a catchy headline and a unique selling point that will grab people's attention?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_152",
+      "name": "Make Ad Copy More Interesting Create Memorable Products",
+      "content": "I am looking to create an ad campaign for [product/service] that stands out. Can you help me write ad copy that is engaging, memorable and persuasive?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_153",
+      "name": "Make Ad Copy More Interesting Evoke Emotion",
+      "content": "I want to create an ad for [product/service] that evokes emotions and resonates with [target audience]. Can you help me write copy that will connect with them on a deeper level?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_154",
+      "name": "Make Ad Copy More Interesting Entice Your Audience",
+      "content": "Introduce our new [product/service] in a way that highlights its unique features and benefits.",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_155",
+      "name": "Make Ad Copy More Interesting Achieve Specific Goals",
+      "content": "Write an ad copy that showcases how our [product/service] can help [target audience] achieve [specific goal].",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_156",
+      "name": "Crafting Unique USP's Being the Company of Choice",
+      "content": "Why is [type of company/business]'s [product/service] the best choice for [target audience] looking for [desired outcome]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_157",
+      "name": "Crafting Unique USP's Highlighting Unique Solutions",
+      "content": "What unique solution does [type of company/business] offer to solve the [pain point] faced by [target audience]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_158",
+      "name": "Crafting Unique USP's Distinct Approaches to Industry Challenges",
+      "content": "What makes [specific topic company/business] approach to [industry challenge] different and more effective?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_159",
+      "name": "Providing Superior Benefits",
+      "content": "How does [specific type of company/business] [product/service feature] provide a superior [customer benefit] compared to others in the market?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_160",
+      "name": "Features-Advantages-Benefits' framework",
+      "content": "Using the 'Features-Advantages-Benefits' framework, please write a copy that highlights the [features] of our [product/service] and explains how these [advantages] can be helpful to [ideal customer persona]. Elaborate on the [benefits] of our product and how it can positively impact the reader.",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_161",
+      "name": "PASTOR' framework",
+      "content": "Write a copy using the 'PASTOR' framework to address the pain points of [ideal customer persona] and present our [product/service] as the solution. Identify the [problem] they are facing, amplify the consequences of not solving it, tell a [story] related to the problem, include [testimonials] from happy customers, present our [offer], and ask for a response.",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_162",
+      "name": "Before-After-Bridge' framework",
+      "content": "Using the 'Before-After-Bridge' framework, please write a copy that presents the current situation with a [problem] faced by ideal customer persona]. Show them the world after using our [product/service] and how it has improved their situation. Then, provide a [bridge] to show them how they can get to that improved state by using our product.",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_163",
+      "name": "Attention-Interest-Desire-Action' framework",
+      "content": "Using the 'Before-After-Bridge' framework, please write a copy that presents the current situation with a [problem] faced by ideal customer persona]. Show them the world after using our [product/service] and how it has improved their situation. Then, provide a [bridge] to show them how they can get to that improved state by using our product.",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_164",
+      "name": "Problem-Agitate-Solve' framework",
+      "content": "Using the 'Problem-Agitate-Solve' framework, please write a copy that identifies the most painful [problem] faced by [ideal customer persona] and agitates the issue to show why it is a bad situation. Then, present our [product/service] as the logical solution to the problem.",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_165",
+      "name": "Star-Story-Solution' framework",
+      "content": "Using the 'Features-Advantages-Benefits' framework, please write a copy that highlights the [features] of our [product/service] and explains how these [advantages] can be helpful to [ideal customer persona]. Elaborate on the [benefits] of our product and how it can positively impact the reader.",
+      "category": "copyWriting",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_166",
+      "name": "Picture-Promise-Prove-Push' framework",
+      "content": "Write a copy using the 'Picture-Promise-Prove-Push' framework to paint a picture that gets the attention and creates desire for our [product/service] in ideal customer persona]. Describe how our product will deliver on its promises, provide testimonials to back up those promises, and give a little push to encourage the reader to take action.",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_167",
+      "name": "Awareness-Comprehension-Conviction-Action’ framework",
+      "content": "Write a copy using the 'Awareness-Comprehension-Conviction-Action’ framework to present the situation or [problem] faced by [ideal customer persona] and help them understand it. Create the desired conviction in the reader to use our [product/service] as the solution and make them take action.",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_168",
+      "name": "5 Basic Objections' framework",
+      "content": "Using the '5 Basic Objections' framework, please write a copy that addresses and refutes the common objections of [ideal customer personal: lack of time, lack of money, concerns that the product won't work for them, lack of belief in the product or company, and the belief that they don't need the product. Include talking points such as [unique selling point] and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_169",
+      "name": "Four C's' framework",
+      "content": "Write a copy using the 'Four C's' framework to create clear, concise, compelling, and credible copy for [ideal customer persona]. Use this checklist to ensure that our message is effectively communicated and persuades the reader to take action. Include talking points such as [unique selling point] and [desired action].",
+      "category": "copyWriting",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_170",
+      "name": "Consistent-Contrasting' framework",
+      "content": "Please write a copy using the 'Consistent-Contrasting' framework to convert leads into customers. Use a consistent message or theme throughout the copy, but incorporate contrasting language or images to draw the reader's attention and keep them engaged. Include talking points such as [product/service], [unique selling point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_171",
+      "name": "Strong-Weak' framework",
+      "content": "Write a copy using the 'Strong-Weak' framework to persuade [ideal customer persona] to take action. Use strong language and images to emphasize the benefits of our [product/service], but also acknowledge any potential weaknesses or limitations in a transparent and honest way. Include talking points such as [unique selling point], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_172",
+      "name": "Emotion-Logic' framework",
+      "content": "Using the 'Emotion-Logic' framework, please write a copy that connects with [ideal customer persona] and creates desire for our [product/service]. Use emotional appeals to connect with the reader, but also use logical arguments to convince them to take action. Include talking points such as [emotion], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_173",
+      "name": "Personal-Universal' framework",
+      "content": "Craft a copy using the 'Personal-Universal' framework to make our [product/service] relatable to [ideal customer persona]. Use \"you\" language and address their specific needs and desires, but also connect our product to universal human experiences and values. Include talking points such as [unique selling point], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_174",
+      "name": "Urgency-Patience' framework",
+      "content": "Write a copy using the 'Urgency-Patience' framework to encourage [ideal customer persona] to take action. Create a sense of urgency to encourage the reader to act now, but also remind them that using our [product/service] will bring long-term benefits that are worth waiting for. Include talking points such as [unique selling point], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_175",
+      "name": "Expectation-Surprise' framework",
+      "content": "Please write a copy using the 'Expectation-Surprise' framework to generate interest and encourage action from [ideal customer persona]. Set expectations for the reader about what they can expect from our [product/service], but then surprise them with unexpected benefits or features that exceed those expectations. Include talking points such as [unique selling point], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_176",
+      "name": "Exclusive-Inclusive' framework",
+      "content": "Write a copy using the 'Exclusive-Inclusive' framework to position our [product/service] as elite and desirable to [ideal customer persona]. Make it clear that our product is exclusive or elite in some way, but also emphasize that it is accessible and inclusive to a wide range of customers. Include talking points such as [unique selling point], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_177",
+      "name": "Positive-Negative' framework",
+      "content": "Using the 'Positive-Negative' framework, please write a copy that focuses on the positive aspects of our [product/service] and the benefits it will bring to [ideal customer persona]. Also acknowledge and address any potential negative consequences or drawbacks in a constructive way. Include talking points such as [unique selling point], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_178",
+      "name": "Past-Present-Future' framework",
+      "content": "Create a copy using the 'Past-Present-Future' framework to connect our [product/service] to [ideal customer persona]'s past experiences or memories. Show how it can improve their present situation, and then show how it can shape their future in a positive way. Include talking points such as [unique selling point], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_179",
+      "name": "Friend-Expert' framework",
+      "content": "Write a copy using the 'Friend-Expert' framework to establish a connection with [ideal customer persona] and position our brand or [product/service] as an expert in our field. Use a friendly and approachable tone to connect with the reader, but also highlight our credibility and expertise in our field. Include talking points such as [unique selling point], [pain point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_180",
+      "name": "Pain-Agitate-Relief' framework",
+      "content": "Please write a copy using the 'Pain-Agitate-Relief' framework to convert leads into customers. Identify the pain points faced by [ideal customer personal], amplify the negative consequences of not addressing these pain points, and present our [product/service] as the solution that brings relief. Include variables such as [product/service], [unique selling point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_181",
+      "name": "Solution-Savings-Social Proof' framework",
+      "content": "Write a copy using the 'Solution-Savings-Social Proof' framework to persuade [ideal customer persona] to take action. Clearly state the problem our [product/service] solves, emphasize the time, money, or other resources that the customer can save by using our product, and use customer testimonials or social proof to demonstrate the effectiveness of our solution. Include variables such as [product/service], [unique selling point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_182",
+      "name": "‘6 W's' framework",
+      "content": "Write a copy using the '6 W's' framework to convert leads into customers. Identify [ideal customer persona] as the target audience, clearly describe our [product/service] and what it does, highlight any time-sensitive aspects of our offer or the problem it solves, specify where the product or service can be purchased or used, clearly explain the benefits and value of our [product/service], and explain how the product or service works and how the customer can obtain it. Include variables such as [product/service], [unique selling point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_183",
+      "name": "Story-Solve-Sell' framework",
+      "content": "Create a copy using the 'Story-Solve-Sell' framework to convert leads into customers. Tell a compelling story that connects with [ideal customer persona] and relates to the problem our [product/service] solves, clearly demonstrate how our product solves the problem, and make a strong call to action to convince the reader to purchase or take the desired action. Include variables such as [product/service], [unique selling point], and [desired action].",
+      "category": "copyWriting"
+    },
+    {
+      "id": "built_in_prompt_184",
+      "name": "Outlining Your Course",
+      "content": "As a Professor at a [Software] Company, design a comprehensive outline for a 12-week educational course focused on [software development] techniques. Include weekly topics, learning objectives, and suggested teaching materials.",
+      "category": "education"
+    },
+    {
+      "id": "built_in_prompt_185",
+      "name": "Detailed Lesson Plans",
+      "content": "Create a detailed lesson plan for a 90-minute workshop on [agile software development principles] for [professionals]. Ensure the plan covers key concepts, activities, and learning takeaways for participants.",
+      "category": "education",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_186",
+      "name": "Proposing a Virtual Series",
+      "content": "Draft a proposal for a series of virtual webinars addressing emerging trends in [software development], discussing the potential topics for the webinars and their educational value for the audience.",
+      "category": "education"
+    },
+    {
+      "id": "built_in_prompt_187",
+      "name": "Training Students on Best Practices",
+      "content": "As a Professor at a [Software] Company, outline a curriculum for a 6-week training program targeted at upskilling [developers] in [cybersecurity] best practices. Include course modules, learning objectives, and assessment strategies.",
+      "category": "education"
+    },
+    {
+      "id": "built_in_prompt_188",
+      "name": "Teaching Skills Relevant to Company Needs",
+      "content": "Design a syllabus for a four-week, intensive [coding] bootcamp focused on teaching [programming languages] and [software tools] relevant to your company's needs. Consider the skills participants need to learn and how to structure the course for optimal engagement and retention.",
+      "category": "education"
+    },
+    {
+      "id": "built_in_prompt_189",
+      "name": "Angles and Subtopics",
+      "content": "For my podcast episode on [TOPIC], can you provide me with [NUMBER] unique and [ADJECTIVE] angles or subtopics that will appeal to [TYPE OF AUDIENCE], and suggest [NUMBER] potential guests who can offer their expertise on each subtopic?",
+      "category": "podcastProduction",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_190",
+      "name": "Identifying Different Viewpoints",
+      "content": "Can you help me plan a podcast episode on [TOPIC], by identifying [NUMBER] different viewpoints on [SUBTOPIC] and providing [TYPE OF INFORMATION] on each, while incorporating [TYPE OF MEDIA] to add depth and interest?",
+      "category": "podcastProduction"
+    },
+    {
+      "id": "built_in_prompt_191",
+      "name": "Creating a Podcast Series",
+      "content": "I want to create a series of podcast episodes on [TOPIC], can you help me brainstorm [NUMBER] overarching themes, [NUMBER] subtopics for each theme, and [TYPE OF INFORMATION] for each subtopic that will keep listeners engaged throughout the entire series?",
+      "category": "podcastProduction"
+    },
+    {
+      "id": "built_in_prompt_192",
+      "name": "Tailoring to Specific Demographics",
+      "content": "When creating a podcast episode about [TOPIC] for a [SPECIFIC DEMOGRAPHIC] audience, what are some [NUMBER] [ADJECTIVE] ways to hook their attention at the beginning and keep them engaged throughout the episode? How can I address potential concerns or questions that they might have about the topic in an informative and empathetic manner?",
+      "category": "podcastProduction"
+    },
+    {
+      "id": "built_in_prompt_193",
+      "name": "Integrating Elements",
+      "content": "As a podcast creator, I want to integrate [SPECIFIC ELEMENT] into my episode about [TOPIC] in a [ADJECTIVE] way that enhances my audience's listening experience. What are some [NUMBER] strategies or tools I could use to accomplish this goal? Could you suggest any examples of podcasts that have successfully implemented this element in their episodes?",
+      "category": "podcastProduction"
+    },
+    {
+      "id": "built_in_prompt_194",
+      "name": "Cold Calling Complete Sales Copy",
+      "content": "Can you provide me with a complete sales copy about [product/service] for a cold call to a potential client, including an opening, presentation, overcoming objections, and close?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_195",
+      "name": "Cold Calling Showcasing a Product/ Service",
+      "content": "Can you draft a copy for a sales cold call that effectively showcases the [product/service] to [Prospect Name] and leads to a successful close?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_196",
+      "name": "Cold Calling Tailoring Copy to Specific Audiences",
+      "content": "Can you formulate a sales copy for [product/service] for a cold call to [Specific audience] that covers the aspects of introduction, demonstration, objection handling, and closing?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_197",
+      "name": "Successful Pitch Examples",
+      "content": "Can you provide me an example of a successful pitch for [product/service] to a [specific audience] potential client?",
+      "category": "salesCopy",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_198",
+      "name": "Presenting Product Value",
+      "content": "Write me a sales cold calling copy by presenting the value of [product/service] to [prospective customer name] in the most effective way.",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_199",
+      "name": "Client Proposal Highlighting Benefits",
+      "content": "Can you please write a B2B proposal for [Company] that highlights the benefits of using our [Product/Service] and how it can help them achieve their [specific business goal]?",
+      "category": "salesCopy",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_200",
+      "name": "Client Proposal Improving Specific Processes",
+      "content": "Can you draft a B2B proposal for [Company Name] that explains how our [Product/Service] can improve their [specific business process] and increase their [specific metric]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_201",
+      "name": "Client Proposal Industry Specific Proposals",
+      "content": "I am looking to write a proposal for a potential client in the [industry] industry. Can you help me create a compelling introduction and outline the key points and benefits of my [product/service]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_202",
+      "name": "Client Proposal B2B Proposals Comparing Solutions",
+      "content": "Can you compose a B2B proposal for [Company Name] that showcases the unique features of our [Product/Service] and how it compares to similar solutions in the market?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_203",
+      "name": "Client Proposal Winning Over a New Client",
+      "content": "I am trying to win over a new client for my [product/service]. Can you help me write a persuasive proposal that highlights the benefits and value of [offering]?",
+      "category": "salesCopy"
+    },
+    {
+      "id": "built_in_prompt_204",
+      "name": "Meeting Notes Highlighting Key Takeaways",
+      "content": "Can you summarize a meeting on [topic of meeting] by highlighting the key takeaways? The notes of the meeting: [notes]",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_205",
+      "name": "Meeting Notes Summarizing Objectives",
+      "content": "Can you summarize the objectives discussed in a meeting and the action items decided? The notes of the meeting: [notes]",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_206",
+      "name": "Meeting Notes Summarizing Decisions and Next Steps",
+      "content": "Can you summarize the decisions made during a meeting about [specific issue] and the next steps outlined? The notes of the meeting: [notes]",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_207",
+      "name": "Meeting Notes Summarizing Progress Updates",
+      "content": "Can you summarize the progress update given in a meeting on [project/task] and the future plans discussed? The notes of the meeting: [notes]",
+      "category": "work",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_208",
+      "name": "Meeting Notes Summarizing Key Points and Solutions",
+      "content": "Can you summarize the key points raised during a [team/department/etc.] meeting and the solutions proposed? The notes of the meeting: [notes]",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_209",
+      "name": "Generate Long-tail Keywords The Definition",
+      "content": "Can you define [keyword] in a few words?",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_210",
+      "name": "Generate Long-tail Keywords A Short Description",
+      "content": "What is a short description for [keyword]?",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_211",
+      "name": "Generate Long-tail Keywords The Central Idea",
+      "content": "What is the central idea of [keyword]?",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_212",
+      "name": "Generate Long-tail Keywords The Core",
+      "content": "What is the core of [keyword]?",
+      "category": "contentSeo"
+    },
+    {
+      "id": "built_in_prompt_213",
+      "name": "Generate Long-tail Keywords The Key Elements",
+      "content": "What are the key elements of [keyword]?",
+      "category": "contentSeo",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_214",
+      "name": "Customer Surveys Key Questions to Ask",
+      "content": "What are some key questions to ask in a customer survey to gauge [product/service] satisfaction?",
+      "category": "customerSuccess",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_215",
+      "name": "Customer Surveys Examples of Open-Ended Questions",
+      "content": "Can you provide some examples of open-ended questions to include in a customer survey for [company/industry]?",
+      "category": "customerSuccess"
+    },
+    {
+      "id": "built_in_prompt_216",
+      "name": "Customer Surveys Best Practices to Gather Feedback",
+      "content": "What are some best practices for creating a customer survey to gather valuable feedback on [specific aspect of product/service]?",
+      "category": "customerSuccess"
+    },
+    {
+      "id": "built_in_prompt_217",
+      "name": "Customer Surveys Important Metrics to Track",
+      "content": "What are the most important metrics to track in a customer survey to measure [product/service] success?",
+      "category": "customerSuccess"
+    },
+    {
+      "id": "built_in_prompt_218",
+      "name": "Customer Surveys Creative Approaches",
+      "content": "Can you suggest some creative approaches to designing customer survey questions for [company/industry]?",
+      "category": "customerSuccess"
+    },
+    {
+      "id": "built_in_prompt_219",
+      "name": "Meeting Agenda Including Specific Topics and Relevant Items",
+      "content": "Can you create me a meeting agenda for [UPCOMING MEETING] on [DATE] at [TIME], including topics such as [LIST OF TOPICS] and any other items that may be relevant, such as [ADDITIONAL ITEMS]? Please make sure to allocate appropriate time for each topic.",
+      "category": "work",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_220",
+      "name": "Meeting Agenda Including Key Topics and Supporting Materials",
+      "content": "I need your help creating a comprehensive meeting agenda for our next meeting. Can you suggest key topics to include, such as [LIST OF POSSIBLE TOPICS], and any supporting materials we may need, such as [MATERIALS]? Please ensure that the agenda reflects our objectives for the meeting.",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_221",
+      "name": "Meeting Agenda Covering all Necessary Items",
+      "content": "I'm struggling to create an agenda for our [TYPE OF MEETING] meeting. Can you please create a detailed agenda that covers all necessary items and information, such as [LIST OF ITEMS AND INFORMATION]? Additionally, can you provide any tips or best practices for running an effective meeting?",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_222",
+      "name": "Meeting Agenda Creating an Agenda for Specific Departments",
+      "content": "Can you help me create a meeting agenda for a [TEAM/DEPARTMENT/DIVISION] meeting with [NUMBER] participants, including [SPECIFIC INDIVIDUALS OR DEPARTMENTS], [AND/OR OTHER CRITERIA]?",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_223",
+      "name": "Meeting Agenda Ensuring the Agenda is Inclusive of All Participants",
+      "content": "How can I make sure the meeting agenda is inclusive and addresses the needs of all participants, especially those with [SPECIFIC CHARACTERISTICS OR PERSPECTIVES], [WHILE STILL ACHIEVING SPECIFIC OUTCOMES SUCH AS DECISION-MAKING OR CONSENSUS-BUILDING]?",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_224",
+      "name": "Goal Setting Important Outcomes or Deliverables",
+      "content": "Crafting a goal for [specific project or task]: What are the most important outcomes or deliverables you hope to achieve?",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_225",
+      "name": "Goal Setting Tracking Progress",
+      "content": "I want to track progress towards [specific goal], what is the best way to do that?",
+      "category": "work",
+      "isFeatured": true
+    },
+    {
+      "id": "built_in_prompt_226",
+      "name": "Goal Setting Evaluating Effectiveness",
+      "content": "I want to evaluate the effectiveness of my [OKRs or goal], can you give me some suggestions on how to do that?",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_227",
+      "name": "Goal Setting Performance Targets",
+      "content": "In order to reach my goal of [insert goal], I need to set performance targets for myself. For example, I could aim to [insert action] [insert number] times per week. Can you help me with that?",
+      "category": "work"
+    },
+    {
+      "id": "built_in_prompt_228",
+      "name": "Goal Setting OKRs",
+      "content": "Write a list of specific, measurable, and attainable goals for [your company/project] using the OKR framework.",
+      "category": "work",
+      "isFeatured": true
+    }
+  ]
+}
diff --git a/src/components/chat/hooks/use-chat-settings-loader.ts b/src/components/chat/hooks/use-chat-settings-loader.ts
new file mode 100644
index 00000000..09b601b1
--- /dev/null
+++ b/src/components/chat/hooks/use-chat-settings-loader.ts
@@ -0,0 +1,55 @@
+import { useChatContext } from '../chat/context';
+import { useToast } from './use-toast';
+import { ChatSettings } from '../types';
+import { useCallback, useEffect, useState } from 'react';
+
+export function useChatSettingsLoader() {
+  const [loading, setLoading] = useState(true);
+  const [chatSettings, setChatSettings] = useState<ChatSettings | null>(null);
+  const {
+    requestInstance,
+    chatId,
+  } = useChatContext();
+
+  const {
+    toast,
+  } = useToast();
+
+  useEffect(() => {
+    return () => {
+      setLoading(true);
+      setChatSettings(null);
+    };
+  }, [chatId]);
+
+  const fetchChatSettings = useCallback(async() => {
+    try {
+      const data = await requestInstance.getChatSettings();
+      setLoading(false);
+      setChatSettings(data);
+      return data;
+      // eslint-disable-next-line
+    } catch(e: any) {
+      setLoading(false);
+    }
+  }, [requestInstance]);
+
+  const updateChatSettings = useCallback(async(payload: Partial<ChatSettings>) => {
+    try {
+      await requestInstance.updateChatSettings(payload);
+      // eslint-disable-next-line
+    } catch(e: any) {
+      toast({
+        variant: 'destructive',
+        description: e.message,
+      });
+    }
+  }, [requestInstance, toast]);
+
+  return {
+    loading,
+    fetchChatSettings,
+    updateChatSettings,
+    chatSettings,
+  };
+}
\ No newline at end of file
diff --git a/src/components/chat/hooks/use-checkbox-tree.ts b/src/components/chat/hooks/use-checkbox-tree.ts
new file mode 100644
index 00000000..8e6953b1
--- /dev/null
+++ b/src/components/chat/hooks/use-checkbox-tree.ts
@@ -0,0 +1,121 @@
+import { findAncestors } from '../lib/views';
+import { View } from '../types';
+import { CheckStatus } from '../types/checkbox';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const useCheckboxTree = (initialSelected: string[] = [], source: View[]) => {
+  const [selected, setSelected] = useState<Set<string>>(
+    new Set(initialSelected),
+  );
+
+  const initialExpandViewIds = useRef(new Set<string>());
+
+  useEffect(() => {
+    setSelected(new Set(initialSelected));
+  }, [initialSelected]);
+
+  useEffect(() => {
+
+    initialSelected.forEach(id => {
+      findAncestors(source, id)?.forEach(ancestor => {
+        initialExpandViewIds.current.add(ancestor.view_id);
+      });
+    });
+
+  }, [source, initialSelected]);
+
+  // Get all descendant IDs of a view
+  const getDescendantIds = useCallback((view: View): string[] => {
+    const ids: string[] = [view.view_id];
+    view.children.forEach(child => {
+      ids.push(...getDescendantIds(child));
+    });
+    return ids;
+  }, []);
+
+  // Get the check status of a view
+  const getCheckStatus = useCallback((view: View): CheckStatus => {
+    const isCurrentSelected = selected.has(view.view_id);
+
+    if(view.children.length === 0) {
+      return isCurrentSelected ? CheckStatus.Checked : CheckStatus.Unchecked;
+    }
+
+    const childrenStatuses = view.children.map(child =>
+      getCheckStatus(child),
+    );
+
+    // if(childrenStatuses.every(status => status === 'unchecked')) {
+    //   if(isCurrentSelected) {
+    //     setSelected(prev => {
+    //       const next = new Set(prev);
+    //       next.delete(view.view_id);
+    //       return next;
+    //     });
+    //   }
+    //   return CheckStatus.Unchecked;
+    // }
+    if(!isCurrentSelected) {
+      return CheckStatus.Unchecked;
+    }
+
+    if(childrenStatuses.every(status => status === 'checked')) {
+      return CheckStatus.Checked;
+    }
+
+    return CheckStatus.Indeterminate;
+  }, [selected]);
+
+  const toggleNode = useCallback((view: View) => {
+    const status = getCheckStatus(view);
+    const descendantIds = getDescendantIds(view);
+
+    const next = new Set(selected);
+    if(status === CheckStatus.Checked) {
+      descendantIds.forEach(id => next.delete(id));
+    } else {
+      descendantIds.forEach(id => next.add(id));
+    }
+
+    setSelected(next);
+    return next;
+  }, [getCheckStatus, getDescendantIds, selected]);
+
+  const selectAll = useCallback((views: View[]) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      views.forEach(view => {
+        getDescendantIds(view).forEach(id => next.add(id));
+      });
+      return next;
+    });
+  }, [getDescendantIds]);
+
+  const unselectAll = useCallback((views: View[]) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      views.forEach(view => {
+        getDescendantIds(view).forEach(id => next.delete(id));
+      });
+      return next;
+    });
+  }, [getDescendantIds]);
+
+  const getSelected = useCallback(() => {
+    return Array.from(selected);
+  }, [selected]);
+
+  const getInitialExpand = useCallback((id: string) => {
+    return initialExpandViewIds.current.has(id);
+  }, []);
+
+  return {
+    selected,
+    getCheckStatus,
+    getInitialExpand,
+    toggleNode,
+    selectAll,
+    unselectAll,
+    getSelected,
+  };
+};
\ No newline at end of file
diff --git a/src/components/chat/hooks/use-toast.ts b/src/components/chat/hooks/use-toast.ts
new file mode 100644
index 00000000..b0a72276
--- /dev/null
+++ b/src/components/chat/hooks/use-toast.ts
@@ -0,0 +1,195 @@
+'use client';
+
+// Inspired by react-hot-toast library
+import * as React from 'react';
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from '../components/ui/toast';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+  type: ActionType['ADD_TOAST']
+  toast: ToasterToast
+}
+  | {
+  type: ActionType['UPDATE_TOAST']
+  toast: Partial<ToasterToast>
+}
+  | {
+  type: ActionType['DISMISS_TOAST']
+  toastId?: ToasterToast['id']
+}
+  | {
+  type: ActionType['REMOVE_TOAST']
+  toastId?: ToasterToast['id']
+}
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if(toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch(action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if(toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+              ...t,
+              open: false,
+            }
+            : t,
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if(action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if(!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if(index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/src/components/chat/hooks/use-user-loader.ts b/src/components/chat/hooks/use-user-loader.ts
new file mode 100644
index 00000000..f11e0651
--- /dev/null
+++ b/src/components/chat/hooks/use-user-loader.ts
@@ -0,0 +1,45 @@
+import { useChatContext } from '../chat/context';
+import { User } from '../types';
+import { useCallback, useRef } from 'react';
+
+export function useUserLoader() {
+  const users = useRef<
+    Map<string, Promise<User>>
+  >(new Map());
+
+  const {
+    requestInstance,
+  } = useChatContext();
+
+  // Make sure to cache the user to avoid fetching the same user multiple times
+  const fetchMember = useCallback(async(uuid: string) => {
+
+    // Check if the user is already being fetched
+    const existingRequest = users.current.get(uuid);
+    if(existingRequest) {
+      return existingRequest;
+    }
+
+    const promise = (async() => {
+      try {
+        const user = await requestInstance.getMember(uuid);
+        // Cache the user
+        users.current.set(uuid, Promise.resolve(user));
+        return user;
+      } catch(error) {
+        // Remove the user from the cache
+        users.current.delete(uuid);
+        throw error;
+      }
+    })();
+
+    // Cache the promise
+    users.current.set(uuid, promise);
+
+    return promise;
+  }, [requestInstance]);
+
+  return {
+    fetchMember,
+  };
+}
\ No newline at end of file
diff --git a/src/components/chat/hooks/use-view-content-inserter.ts b/src/components/chat/hooks/use-view-content-inserter.ts
new file mode 100644
index 00000000..b5495840
--- /dev/null
+++ b/src/components/chat/hooks/use-view-content-inserter.ts
@@ -0,0 +1,36 @@
+import { useChatContext } from '../chat/context';
+import { EditorData } from '@appflowyinc/editor';
+import { useCallback } from 'react';
+
+export function useViewContentInserter() {
+  const { requestInstance } = useChatContext();
+
+  const insertContentToView = useCallback(
+    async (viewId: string, data: EditorData) => {
+      try {
+        await requestInstance.insertContentToView(viewId, data);
+        // eslint-disable-next-line
+      } catch (e: any) {
+        return Promise.reject(e);
+      }
+    },
+    [requestInstance],
+  );
+
+  const createViewWithContent = useCallback(
+    async (parentViewId: string, name: string, data: EditorData) => {
+      try {
+        await requestInstance.createViewWithContent(parentViewId, name, data);
+        // eslint-disable-next-line
+      } catch (e: any) {
+        return Promise.reject(e);
+      }
+    },
+    [requestInstance],
+  );
+
+  return {
+    insertContentToView,
+    createViewWithContent,
+  };
+}
diff --git a/src/components/chat/i18n/config.ts b/src/components/chat/i18n/config.ts
new file mode 100644
index 00000000..90490517
--- /dev/null
+++ b/src/components/chat/i18n/config.ts
@@ -0,0 +1,34 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from '../locales/en.json';
+import { createContext } from 'react';
+
+let chatI18n: typeof i18n | null = null;
+
+export function initI18n() {
+  chatI18n = i18n.createInstance();
+
+  chatI18n
+    .use(initReactI18next)
+    .init({
+      resources: { en: { chat: en.chat } },
+      lng: 'en',
+      fallbackLng: 'en',
+      defaultNS: 'chat',
+      interpolation: {
+        escapeValue: false,
+      },
+      keySeparator: '.',
+      cache: {
+        enabled: true,
+        prefix: `i18next_chat_`,
+      },
+    });
+  return chatI18n;
+}
+
+export function getI18n() {
+  return chatI18n;
+}
+
+export const ChatI18nContext = createContext<typeof i18n | null>(null);
diff --git a/src/components/chat/i18n/index.ts b/src/components/chat/i18n/index.ts
new file mode 100644
index 00000000..ff47ebf4
--- /dev/null
+++ b/src/components/chat/i18n/index.ts
@@ -0,0 +1,22 @@
+import { useTranslation as useReactI18next } from 'react-i18next';
+import { getI18n } from './config';
+
+export function changeLanguage(lang: string) {
+  const i18n = getI18n();
+  if (!i18n) throw new Error('i18n not initialized');
+  return i18n.changeLanguage(lang);
+}
+
+export function addResourceBundle(lang: string, _ns: string, resources: Record<string, string>) {
+  const i18n = getI18n();
+  if (!i18n) throw new Error('i18n not initialized');
+  const isExist = i18n.hasResourceBundle(lang, 'chat');
+  if (isExist) return;
+  i18n.addResourceBundle(lang, 'chat', resources, true, true);
+}
+
+export const useTranslation: typeof useReactI18next = (_, options) => {
+  const i18n = getI18n();
+  if (!i18n) throw new Error('i18n not initialized');
+  return useReactI18next('chat', { ...options, i18n });
+};
\ No newline at end of file
diff --git a/src/components/chat/index.ts b/src/components/chat/index.ts
new file mode 100644
index 00000000..8f56f5ba
--- /dev/null
+++ b/src/components/chat/index.ts
@@ -0,0 +1,5 @@
+export * from './chat';
+export * from './request';
+export * from './writer';
+export * from './types';
+export * from './provider/prompt-modal-provider';
diff --git a/src/components/chat/lib/animations.ts b/src/components/chat/lib/animations.ts
new file mode 100644
index 00000000..116a726a
--- /dev/null
+++ b/src/components/chat/lib/animations.ts
@@ -0,0 +1,124 @@
+export const ANIMATION_PRESETS = {
+  SPRING_GENTLE: {
+    type: 'spring',
+    stiffness: 500,
+    damping: 40,
+    mass: 1,
+  },
+  SPRING_BOUNCY: {
+    type: 'spring',
+    stiffness: 700,
+    damping: 30,
+    mass: 1,
+  },
+  TWEEN_SMOOTH: {
+    type: 'tween',
+    duration: 0.2,
+    ease: 'easeInOut',
+  },
+} as const;
+
+export const MESSAGE_VARIANTS = {
+  getMessageVariants: () => ({
+    hidden: {
+      y: 20,
+      opacity: 0,
+      scale: 0.95,
+    },
+    visible: {
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      transition: {
+        y: {
+          type: 'spring',
+          stiffness: 600,
+          damping: 30,
+          mass: 1,
+        },
+        opacity: {
+          type: 'tween',
+          duration: 0.15,
+          ease: 'easeOut',
+        },
+        scale: {
+          type: 'spring',
+          stiffness: 600,
+          damping: 30,
+          mass: 1,
+        },
+      },
+    },
+  }),
+  getSuggestionsVariants: () => ({
+    hidden: {
+      x: -100,
+      opacity: 0,
+      height: 0,
+      scale: 0.95,
+    },
+    visible: {
+      x: 0,
+      opacity: 1,
+      scale: 1,
+      height: 'auto',
+      transition: ANIMATION_PRESETS.SPRING_GENTLE,
+    },
+  }),
+  getInputVariants: () => ({
+    hidden: {
+      y: 100,  // 向下移动
+      opacity: 0,
+      transition: {
+        y: {
+          type: 'tween',
+          duration: 0.2,
+          ease: 'easeIn',
+        },
+        opacity: {
+          type: 'tween',
+          duration: 0.1,
+        },
+      },
+    },
+    visible: {
+      y: 0,    // 原始位置
+      opacity: 1,
+      transition: {
+        y: {
+          type: 'spring',
+          stiffness: 500,
+          damping: 30,
+          mass: 1,
+        },
+        opacity: {
+          type: 'tween',
+          duration: 0.2,
+        },
+      },
+    },
+  }),
+  getBannerVariants: () => ({
+    initial: {
+      opacity: 0,
+      y: -20,
+      scale: 0.95,
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: ANIMATION_PRESETS.SPRING_GENTLE,
+    },
+    exit: {
+      opacity: 0,
+      y: -20,
+      scale: 0.95,
+      transition: {
+        ...ANIMATION_PRESETS.SPRING_GENTLE,
+        // 调整离开动画的持续时间和缓动函数，使其更平滑
+        opacity: { duration: 0.2 },
+      },
+    },
+  }),
+};
\ No newline at end of file
diff --git a/src/components/chat/lib/const.ts b/src/components/chat/lib/const.ts
new file mode 100644
index 00000000..ba972a3e
--- /dev/null
+++ b/src/components/chat/lib/const.ts
@@ -0,0 +1 @@
+export const ERROR_CODE_NO_LIMIT = 1033;
\ No newline at end of file
diff --git a/src/components/chat/lib/copy.ts b/src/components/chat/lib/copy.ts
new file mode 100644
index 00000000..cb7d4ae7
--- /dev/null
+++ b/src/components/chat/lib/copy.ts
@@ -0,0 +1,49 @@
+import { EditorData, EditorNode } from '@appflowyinc/editor';
+
+interface Element {
+  type: string;
+  data?: Record<string, unknown>;
+  children: (Element | Text)[];
+}
+
+interface Text extends Record<string, unknown> {
+  text: string;
+}
+
+export function convertToAppFlowyFragment(data: EditorData) {
+  const key = 'application/x-appflowy-fragment';
+
+  const traverse = (item: EditorNode) => {
+    const data = item.data || {};
+    const delta = item.delta;
+
+    const textNode: Element | undefined = delta ? {
+      type: 'text',
+      children: delta.map(op => ({
+        text: op.insert,
+        ...op.attributes,
+      })) as Text[],
+    } : undefined;
+
+    const children = item.children.map(traverse);
+    if(textNode) {
+      children.unshift(textNode);
+    }
+
+    const newNode: Element = {
+      type: item.type,
+      data,
+      children,
+    };
+    return newNode;
+  };
+
+  const fragment = data.map(traverse);
+  const string = JSON.stringify(fragment);
+  const encoded = window.btoa(encodeURIComponent(string));
+
+  return {
+    key,
+    value: encoded,
+  };
+}
\ No newline at end of file
diff --git a/src/components/chat/lib/model-cache.ts b/src/components/chat/lib/model-cache.ts
new file mode 100644
index 00000000..71466525
--- /dev/null
+++ b/src/components/chat/lib/model-cache.ts
@@ -0,0 +1,83 @@
+/**
+ * Model selection cache management
+ * Stores selected models per chat in localStorage for quick access
+ */
+
+const CACHE_KEY_PREFIX = 'af_chat_model_';
+const CACHE_EXPIRY_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+interface CachedModel {
+  modelName: string;
+  timestamp: number;
+}
+
+export class ModelCache {
+  /**
+   * Get cached model for a specific chat
+   */
+  static get(chatId: string): string | null {
+    try {
+      const key = `${CACHE_KEY_PREFIX}${chatId}`;
+      const cached = localStorage.getItem(key);
+      
+      if (!cached) return null;
+      
+      const data: CachedModel = JSON.parse(cached);
+      
+      // Check if cache is expired
+      if (Date.now() - data.timestamp > CACHE_EXPIRY_MS) {
+        localStorage.removeItem(key);
+        return null;
+      }
+      
+      return data.modelName;
+    } catch (error) {
+      console.error('Error reading model cache:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Set cached model for a specific chat
+   */
+  static set(chatId: string, modelName: string): void {
+    try {
+      const key = `${CACHE_KEY_PREFIX}${chatId}`;
+      const data: CachedModel = {
+        modelName,
+        timestamp: Date.now(),
+      };
+      localStorage.setItem(key, JSON.stringify(data));
+    } catch (error) {
+      console.error('Error setting model cache:', error);
+    }
+  }
+
+  /**
+   * Clear cached model for a specific chat
+   */
+  static clear(chatId: string): void {
+    try {
+      const key = `${CACHE_KEY_PREFIX}${chatId}`;
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.error('Error clearing model cache:', error);
+    }
+  }
+
+  /**
+   * Clear all cached models
+   */
+  static clearAll(): void {
+    try {
+      const keys = Object.keys(localStorage);
+      keys.forEach(key => {
+        if (key.startsWith(CACHE_KEY_PREFIX)) {
+          localStorage.removeItem(key);
+        }
+      });
+    } catch (error) {
+      console.error('Error clearing all model cache:', error);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/chat/lib/requets.ts b/src/components/chat/lib/requets.ts
new file mode 100644
index 00000000..cf8fbd98
--- /dev/null
+++ b/src/components/chat/lib/requets.ts
@@ -0,0 +1,54 @@
+import axios, { InternalAxiosRequestConfig } from 'axios';
+
+/* Create an axios instance with the default configuration
+ * **Note**: This function is used to create the initial instance of axios, it's used in development mode
+ */
+export function createInitialInstance() {
+  return axios.create({
+    baseURL: 'https://beta.appflowy.cloud',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+export function getAccessToken() {
+  const token = localStorage.getItem('token');
+
+  if(!token) {
+    return null;
+  }
+
+  const parsedToken = JSON.parse(token);
+
+  return parsedToken.access_token;
+}
+
+export function requestInterceptor(config: InternalAxiosRequestConfig) {
+
+  const access_token = getAccessToken();
+
+  if(access_token) {
+    Object.assign(config.headers, {
+      Authorization: `Bearer ${access_token}`,
+    });
+  }
+
+  return config;
+}
+
+export function readableStreamToAsyncIterator(reader: ReadableStreamDefaultReader<Uint8Array>) {
+  return {
+    async * [Symbol.asyncIterator]() {
+      try {
+        while(true) {
+          const { done, value } = await reader.read();
+          if(done) return;
+          yield value;
+        }
+      } finally {
+        reader.releaseLock();
+      }
+    },
+  };
+}
\ No newline at end of file
diff --git a/src/components/chat/lib/utils.ts b/src/components/chat/lib/utils.ts
new file mode 100644
index 00000000..2e8ceb5c
--- /dev/null
+++ b/src/components/chat/lib/utils.ts
@@ -0,0 +1,167 @@
+import { EditorData, EditorNode } from '@appflowyinc/editor';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { AiPrompt, AiPromptCategory, RawPromptData } from '../types/prompt';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function stringToColor(string: string, colorArray?: string[]) {
+  let hash = 0;
+  let i;
+
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  if (colorArray) {
+    return colorArray[string.slice(0, 1).charCodeAt(0) % colorArray.length];
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+
+  return color;
+}
+
+const icon: Map<string, string> = new Map();
+
+export async function getIcon(id: string) {
+  if (icon.has(id)) {
+    return icon.get(id);
+  }
+
+  const url = `https://appflowy.com/af_icons/${id}.svg`;
+
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    return '';
+  }
+
+  const text = await res.text();
+
+  icon.set(id, text);
+
+  return text;
+}
+
+// Convert ARGB to RGBA
+// Flutter uses ARGB, but CSS uses RGBA
+function argbToRgba(color: string): string {
+  const hex = color.replace(/^#|0x/, '');
+
+  const hasAlpha = hex.length === 8;
+
+  if (!hasAlpha) {
+    return color.replace('0x', '#');
+  }
+
+  const r = parseInt(hex.slice(2, 4), 16);
+  const g = parseInt(hex.slice(4, 6), 16);
+  const b = parseInt(hex.slice(6, 8), 16);
+  const a = hasAlpha ? parseInt(hex.slice(0, 2), 16) / 255 : 1;
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+export enum ColorEnum {
+  Purple = 'appflowy_them_color_tint1',
+  Pink = 'appflowy_them_color_tint2',
+  LightPink = 'appflowy_them_color_tint3',
+  Orange = 'appflowy_them_color_tint4',
+  Yellow = 'appflowy_them_color_tint5',
+  Lime = 'appflowy_them_color_tint6',
+  Green = 'appflowy_them_color_tint7',
+  Aqua = 'appflowy_them_color_tint8',
+  Blue = 'appflowy_them_color_tint9',
+}
+
+export const colorMap = {
+  [ColorEnum.Purple]: 'var(--tint-purple)',
+  [ColorEnum.Pink]: 'var(--tint-pink)',
+  [ColorEnum.LightPink]: 'var(--tint-red)',
+  [ColorEnum.Orange]: 'var(--tint-orange)',
+  [ColorEnum.Yellow]: 'var(--tint-yellow)',
+  [ColorEnum.Lime]: 'var(--tint-lime)',
+  [ColorEnum.Green]: 'var(--tint-green)',
+  [ColorEnum.Aqua]: 'var(--tint-aqua)',
+  [ColorEnum.Blue]: 'var(--tint-blue)',
+};
+
+export function renderColor(color: string) {
+  if (colorMap[color as ColorEnum]) {
+    return colorMap[color as ColorEnum];
+  }
+
+  return argbToRgba(color);
+}
+
+export function convertToPageData(data: EditorData) {
+  const traverse = (item: EditorNode) => {
+    const newNode: EditorNode = {
+      ...item,
+      data: {
+        ...item.data,
+        delta: item.delta,
+      },
+      children: item.children.map(traverse),
+    };
+    return newNode;
+  };
+
+  return data.map(traverse);
+}
+
+export const parsePromptData = (
+  rawData: RawPromptData[],
+  translations?: Map<AiPromptCategory, string>,
+): AiPrompt[] => {
+  return rawData.flatMap((raw) => {
+    const parseCategory = (categoryStr: string): AiPromptCategory => {
+      const trimmedCategory = categoryStr.trim();
+      if (!trimmedCategory) {
+        return AiPromptCategory.Others;
+      }
+
+      const categoryValues = Object.values(AiPromptCategory);
+
+      if ((categoryValues as string[]).includes(trimmedCategory)) {
+        return trimmedCategory as AiPromptCategory;
+      }
+
+      if (translations) {
+        const matchingCategory = categoryValues.find(
+          (cat) =>
+            translations.get(cat)?.toLowerCase() ===
+            trimmedCategory.toLowerCase(),
+        );
+        if (matchingCategory) {
+          return matchingCategory;
+        }
+      }
+
+      return AiPromptCategory.Others;
+    };
+
+    const categories = raw.category
+      ? raw.category.split(',').map(parseCategory)
+      : [AiPromptCategory.Others];
+
+    return {
+      id: raw.id,
+      name: raw.name,
+      category: categories,
+      content: raw.content,
+      example: raw.example ?? '',
+      isFeatured: raw.isFeatured ?? false,
+      isCustom: raw.isCustom ?? false,
+    };
+  });
+};
diff --git a/src/components/chat/lib/views.ts b/src/components/chat/lib/views.ts
new file mode 100644
index 00000000..a5104576
--- /dev/null
+++ b/src/components/chat/lib/views.ts
@@ -0,0 +1,116 @@
+import { View, ViewLayout } from '../types';
+
+export function findView(views: View[], id: string): View | undefined {
+  for (const view of views) {
+    if (view.view_id === id) {
+      return view;
+    }
+
+    if (view.children.length) {
+      const found = findView(view.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function findAncestors(
+  data: View[],
+  targetId: string,
+  currentPath: View[] = [],
+): View[] | null {
+  for (const item of data) {
+    const newPath = [...currentPath, item];
+
+    if (item.view_id === targetId) {
+      return newPath;
+    }
+
+    if (item.children && item.children.length > 0) {
+      const result = findAncestors(item.children, targetId, newPath);
+
+      if (result) {
+        return result;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function filterDocumentViews(views: View[]): View[] {
+  return views
+    .filter((view) => view.layout === ViewLayout.Document)
+    .map((view) => ({
+      ...view,
+      children: view.children.length ? filterDocumentViews(view.children) : [],
+    }));
+}
+
+export function hasDatabaseViewChild(view: View): boolean {
+  return (
+    [ViewLayout.Grid, ViewLayout.Board, ViewLayout.Calendar].includes(
+      view.layout,
+    ) ||
+    (view.layout === ViewLayout.Document &&
+      view.children.some((child) => hasDatabaseViewChild(child)))
+  );
+}
+
+export function searchViews(views: View[], searchValue: string): View[] {
+  if (!searchValue.trim()) {
+    return views;
+  }
+
+  const searchLower = searchValue.toLowerCase();
+
+  return views
+    .filter((view) => view.layout === ViewLayout.Document)
+    .reduce<View[]>((acc, view) => {
+      const currentMatches = view.name.toLowerCase().includes(searchLower);
+
+      const matchingChildren = view.children.length
+        ? searchViews(view.children, searchValue)
+        : [];
+
+      if (currentMatches || matchingChildren.length > 0) {
+        acc.push({
+          ...view,
+          children: matchingChildren,
+        });
+      }
+
+      return acc;
+    }, []);
+}
+
+export function searchDatabaseViews(
+  views: View[],
+  searchValue: string,
+): View[] {
+  if (!searchValue.trim()) {
+    return views;
+  }
+
+  const searchLower = searchValue.toLowerCase();
+
+  return views.reduce<View[]>((acc, view) => {
+    const currentMatches = view.name.toLowerCase().includes(searchLower);
+
+    const matchingChildren = view.children.length
+      ? searchDatabaseViews(view.children, searchValue)
+      : [];
+
+    if (currentMatches || matchingChildren.length > 0) {
+      acc.push({
+        ...view,
+        children: matchingChildren,
+      });
+    }
+
+    return acc;
+  }, []);
+}
diff --git a/src/components/chat/locales/en.json b/src/components/chat/locales/en.json
new file mode 100644
index 00000000..adca4b27
--- /dev/null
+++ b/src/components/chat/locales/en.json
@@ -0,0 +1,151 @@
+{
+  "chat": {
+    "placeholder": "Hi {{name}}, how can I help you today?",
+    "dear": "Dear",
+    "input": {
+      "placeholder": "Ask AppFlowy AI",
+      "placeholderFormat": "AI response will generate with the format you define above",
+      "button": {
+        "format": "Format response",
+        "auto": "Auto",
+        "text": "Text",
+        "textWithImage": "Text and image",
+        "imageOnly": "Image only",
+        "paragraph": "Paragraph",
+        "bulletList": "Bullet list",
+        "numberedList": "Numbered list",
+        "table": "Table"
+      }
+    },
+    "generating": "Generating response...",
+    "errors": {
+      "copied": "Error copying to clipboard",
+      "noLimit": "Your workspace has ran out of free AI responses. Please ask your workspace owner to upgrade the workspace plan or purchase AI add-ons.",
+      "emptyMessage": "Please enter a message",
+      "wait": "Please wait for the current response to finish generating"
+    },
+    "button": {
+      "copyClipboard": "Copy to clipboard",
+      "tryAgain": "Try again",
+      "changeFormat": "Change format",
+      "addToPage": "Add message to page",
+      "regenerateWithNewFormat": "Regenerate with this format",
+      "addTo": "Add to..."
+    },
+    "success": {
+      "copied": "Copied to clipboard",
+      "addMessageToPage": "Message added to '{{name}}'"
+    },
+    "suggestion": {
+      "title": "Suggested"
+    },
+    "sources": {
+      "label": "{{sourceCount}} sources found"
+    },
+    "search": {
+      "label": "Search",
+      "noSpacesFound": "No spaces found"
+    },
+    "view": {
+      "placeholder": "Untitled"
+    },
+    "addMessageToPage": {
+      "placeholder": "Add message to...",
+      "createNewPage": "Create new page",
+      "selectMsg": "Select messages",
+      "selectedCount": "{{count}} selected"
+    },
+    "questions": {
+      "one": "How to use Kanban to manage tasks",
+      "two": "Explain the GTD method",
+      "three": "Why use Rust",
+      "four": "Recipe with what's in my kitchen",
+      "five": "Create an illustration for my page",
+      "six": "Draw up a to-do list for my upcoming week"
+    },
+    "writer": {
+      "continue": "Continue writing",
+      "improve": "Improve writing",
+      "askAI": "Ask AI Anything",
+      "fixSpelling": "Fix spelling & grammar",
+      "explain": "Explain",
+      "makeLonger": "Make longer",
+      "makeShorter": "Make shorter",
+      "discard": "Discard",
+      "confirm-discard": "Are you sure you want to discard the AI generated response?",
+      "current-page": "Current Page",
+      "editing": "Editing....",
+      "analyzing": "Analyzing....",
+      "button": {
+        "discard": "Discard",
+        "cancel": "Cancel",
+        "keep": "Keep",
+        "rewrite": "Rewrite",
+        "more": "More",
+        "insert-below": "Insert Below",
+        "accept": "Accept",
+        "try-again": "Try Again",
+        "close": "Close",
+        "retry": "Retry."
+      },
+      "errors": {
+        "noAssistantType": "No assistant type selected",
+        "connection": "Connection lost. Please check your internet and",
+        "noLimit": "Your working space is running out of free AI responses. To get more responses, please upgrade to Pro Plan or purchase an AI add-on."
+      }
+    },
+    "customPrompt": {
+      "browsePrompts": "Browse prompts",
+      "usePrompt": "Use prompt",
+      "featured": "Featured",
+      "custom": "Custom",
+      "customPrompt": "Custom Prompts",
+      "databasePrompts": "Load prompts from your own database",
+      "selectDatabase": "Select database",
+      "promptDatabase": "Prompt database",
+      "configureDatabase": "Configure Database",
+      "title": "Title",
+      "content": "Content",
+      "example": "Example",
+      "category": "Category",
+      "selectField": "Select field",
+      "loading": "Loading",
+      "invalidDatabase": "Invalid Database",
+      "invalidDatabaseHelp": "Ensure that the database has at least two text properties:\n ◦ One used for the prompt name\n ◦ One used for the prompt content\nYou can also optionally add properties for the prompt example and category.",
+      "noResults": "No prompts found",
+      "all": "All",
+      "development": "Development",
+      "writing": "Writing",
+      "healthAndFitness": "Health & fitness",
+      "business": "Business",
+      "marketing": "Marketing",
+      "travel": "Travel",
+      "others": "Other",
+      "prompt": "Prompt",
+      "promptExample": "Prompt Example",
+      "sampleOutput": "Sample output",
+      "contentSeo": "Content/SEO",
+      "emailMarketing": "Email Marketing",
+      "paidAds": "Paid Ads",
+      "prCommunication": "PR/Communication",
+      "recruiting": "Recruiting",
+      "sales": "Sales",
+      "socialMedia": "Social Media",
+      "strategy": "Strategy",
+      "caseStudies": "Case Studies",
+      "salesCopy": "Sales Copy",
+      "education": "Education",
+      "work": "Work",
+      "podcastProduction": "Podcast Production",
+      "copyWriting": "Copy Writing",
+      "customerSuccess": "Customer Success",
+      "button": {
+        "cancel": "Cancel",
+        "done": "Done",
+        "change": "Change",
+        "ok": "OK"
+      },
+      "optional": "(optional)"
+    }
+  }
+}
diff --git a/src/components/chat/provider/ai-assistant-provider.tsx b/src/components/chat/provider/ai-assistant-provider.tsx
new file mode 100644
index 00000000..929f738f
--- /dev/null
+++ b/src/components/chat/provider/ai-assistant-provider.tsx
@@ -0,0 +1,365 @@
+import { ConfirmDiscard } from '../components/ai-writer/confirm-discard';
+import { TooltipProvider } from '../components/ui/tooltip';
+import { toast } from '../hooks/use-toast';
+import { useTranslation } from '../i18n';
+import { ChatI18nContext, getI18n, initI18n } from '../i18n/config';
+import { WriterRequest } from '../request';
+import {
+  AIAssistantType,
+  ChatInputMode,
+  CompletionResult,
+  CompletionRole,
+  OutputContent,
+  OutputLayout,
+  ResponseFormat,
+} from '../types';
+import { ApplyingState, WriterContext } from '../writer/context';
+import { EditorData } from '@appflowyinc/editor';
+import { findLast } from 'lodash-es';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { usePromptModal } from './prompt-modal-provider';
+import { ViewLoaderProvider } from './view-loader-provider';
+
+initI18n();
+
+const i18n = getI18n();
+
+export const AIAssistantProvider = ({
+  isGlobalDocument,
+  viewId,
+  request,
+  children,
+  onReplace,
+  onInsertBelow,
+  onExit,
+  scrollContainer,
+}: {
+  viewId: string,
+  children: ReactNode;
+  request: WriterRequest;
+  onInsertBelow?: (data: EditorData) => void;
+  onReplace?: (data: EditorData) => void;
+  onExit?: () => void;
+  isGlobalDocument?: boolean;
+  scrollContainer?: HTMLElement;
+}) => {
+  const { t } = useTranslation();
+  const completionHistoryRef = useRef<CompletionResult[]>([]);
+  const [placeholderContent, setPlaceholderContent] = useState<string>('');
+  const [comment, setComment] = useState<string>('');
+  const [error, setError] = useState<{
+    code: number;
+    message: string;
+  } | null>(null);
+  const [editorData, setEditorData] = useState<EditorData>();
+  const [assistantType, setAssistantType] = useState<AIAssistantType | undefined>(undefined);
+  const lastAssistantTypeRef = useRef<AIAssistantType | undefined>(undefined);
+  const [isFetching, setFetching] = useState<boolean>(false);
+  const [responseMode, setResponseMode] = useState<ChatInputMode>(ChatInputMode.Auto);
+  const [responseFormat, setResponseFormat] = useState<ResponseFormat>({
+    output_layout: OutputLayout.BulletList,
+    output_content: OutputContent.TEXT,
+  });
+
+  const [openDiscard, setOpenDiscard] = useState<boolean>(false);
+  const [ragIds, setRagIds] = useState<string[]>([]);
+  const [applyingState, setApplyingState] = useState<ApplyingState>(ApplyingState.idle);
+  const isApplying = applyingState === ApplyingState.applying;
+  const cancelRef = useRef<(() => void) | undefined>();
+  const initialScrollTopRef = useRef<number | null>(null);
+
+  const { currentPromptId, updateCurrentPromptId } = usePromptModal();
+
+  useEffect(() => {
+    if(!assistantType) {
+      cancelRef.current = undefined;
+      completionHistoryRef.current = [];
+      setResponseMode(ChatInputMode.Auto);
+      setError(null);
+      setResponseFormat({
+        output_layout: OutputLayout.BulletList,
+        output_content: OutputContent.TEXT,
+      });
+    }
+  }, [assistantType]);
+
+  const scrollToView = useCallback(() => {
+    if(!initialScrollTopRef.current) {
+      return;
+    }
+
+    const rect = document.getElementById('appflowy-ai-writer')?.getBoundingClientRect();
+
+    if(rect && rect.top < 100) {
+      scrollContainer?.scrollTo({
+        top: initialScrollTopRef.current,
+      });
+    }
+
+    initialScrollTopRef.current = null;
+  }, [scrollContainer]);
+
+  const handleMessageChange = useCallback((text: string, comment: string, done?: boolean) => {
+    setFetching(false);
+
+    setPlaceholderContent(text);
+    setComment(comment);
+    setApplyingState(ApplyingState.applying);
+
+    if(initialScrollTopRef.current === null) {
+      initialScrollTopRef.current = scrollContainer?.scrollTop || null;
+    }
+    if(done) {
+      cancelRef.current = undefined;
+      setApplyingState(ApplyingState.completed);
+      completionHistoryRef.current.push({
+        role: CompletionRole.AI,
+        content: text,
+      });
+    }
+
+  }, [scrollContainer]);
+
+  const fetchRequest = useCallback(async(assistantType: AIAssistantType, content: string) => {
+    // Do not change assistant type if there is already an AI response
+    if(!completionHistoryRef.current.some(item => {
+      return item.role === CompletionRole.AI;
+    })) {
+      lastAssistantTypeRef.current = assistantType;
+      setAssistantType(assistantType);
+    }
+
+    setFetching(true);
+    setError(null);
+    try {
+      setApplyingState(ApplyingState.analyzing);
+      const { cancel, streamPromise } = await request.fetchAIAssistant({
+        inputText: content,
+        assistantType: lastAssistantTypeRef.current || assistantType,
+        format: responseMode === ChatInputMode.FormatResponse ? responseFormat : undefined,
+        ragIds,
+        completionHistory: completionHistoryRef.current,
+        promptId: currentPromptId || undefined,
+      }, handleMessageChange);
+
+      completionHistoryRef.current.push({
+        role: CompletionRole.Human,
+        content,
+      });
+
+      cancelRef.current = cancel;
+      await streamPromise;
+      return cancel;
+      // eslint-disable-next-line
+    } catch(e: any) {
+      setError(e);
+      setApplyingState(ApplyingState.failed);
+    } finally {
+      setFetching(false);
+      updateCurrentPromptId(null);
+    }
+
+    return () => undefined;
+
+  }, [currentPromptId, handleMessageChange, ragIds, request, responseFormat, responseMode, updateCurrentPromptId]);
+
+  const improveWriting = useCallback(async(content: string) => {
+    return fetchRequest(AIAssistantType.ImproveWriting, content);
+  }, [fetchRequest]);
+
+  const askAIAnything = useCallback((content: string) => {
+    completionHistoryRef.current.push({
+      role: CompletionRole.Human,
+      content,
+    });
+    setAssistantType(AIAssistantType.AskAIAnything);
+  }, []);
+
+  const askAIAnythingWithRequest = useCallback((content: string) => {
+    setApplyingState(ApplyingState.idle);
+    setPlaceholderContent('');
+    setComment('');
+    setEditorData(undefined);
+    scrollToView();
+    return fetchRequest(AIAssistantType.AskAIAnything, content);
+  }, [scrollToView, fetchRequest]);
+
+  const continueWriting = useCallback(async(content: string) => {
+    return fetchRequest(AIAssistantType.ContinueWriting, content);
+  }, [fetchRequest]);
+
+  const explain = useCallback((content: string) => {
+    return fetchRequest(AIAssistantType.Explain, content);
+  }, [fetchRequest]);
+
+  const fixSpelling = useCallback((content: string) => {
+    return fetchRequest(AIAssistantType.FixSpelling, content);
+  }, [fetchRequest]);
+
+  const makeLonger = useCallback((content: string) => {
+    return fetchRequest(AIAssistantType.MakeLonger, content);
+  }, [fetchRequest]);
+
+  const makeShorter = useCallback((content: string) => {
+    return fetchRequest(AIAssistantType.MakeShorter, content);
+  }, [fetchRequest]);
+
+  const stop = useCallback(() => {
+    cancelRef.current?.();
+    setApplyingState(ApplyingState.idle);
+  }, []);
+
+  const exit = useCallback((scrollLocked?: boolean) => {
+    cancelRef.current?.();
+    setApplyingState(ApplyingState.idle);
+    cancelRef.current = undefined;
+    completionHistoryRef.current = [];
+
+    setTimeout(() => {
+      lastAssistantTypeRef.current = undefined;
+      setAssistantType(undefined);
+      setPlaceholderContent('');
+      if(!scrollLocked) {
+        scrollToView();
+      }
+      setComment('');
+      setEditorData(undefined);
+      onExit?.();
+    }, 0);
+
+  }, [onExit, scrollToView]);
+
+  const keep = useCallback(() => {
+    if(!editorData) {
+      return;
+    }
+    completionHistoryRef.current = [];
+
+    if(isGlobalDocument) {
+      onReplace?.(editorData);
+    } else {
+      onInsertBelow?.(editorData);
+    }
+    exit(true);
+
+  }, [editorData, isGlobalDocument, exit, onReplace, onInsertBelow]);
+
+  const accept = useCallback(() => {
+    if(!editorData) {
+      return;
+    }
+    completionHistoryRef.current = [];
+    onReplace?.(editorData);
+    exit(true);
+
+  }, [editorData, onReplace, exit]);
+
+  const rewrite = useCallback(() => {
+    if(!assistantType) {
+      toast({
+        variant: 'destructive',
+        description: t('writer.errors.noAssistantType'),
+      });
+      return;
+    }
+
+    setApplyingState(ApplyingState.idle);
+    setPlaceholderContent('');
+    setComment('');
+    setEditorData(undefined);
+    scrollToView();
+    const content = findLast(completionHistoryRef.current, item => {
+      return item.role === CompletionRole.Human;
+    })?.content || '';
+
+    switch(assistantType) {
+      case AIAssistantType.ImproveWriting:
+        return improveWriting(content);
+      case AIAssistantType.AskAIAnything:
+        return askAIAnythingWithRequest(content);
+      case AIAssistantType.ContinueWriting:
+        return continueWriting(content);
+      case AIAssistantType.Explain:
+        return explain(content);
+      case AIAssistantType.FixSpelling:
+        return fixSpelling(content);
+      case AIAssistantType.MakeLonger:
+        return makeLonger(content);
+      case AIAssistantType.MakeShorter:
+        return makeShorter(content);
+    }
+  }, [scrollToView, assistantType, t, improveWriting, askAIAnythingWithRequest, continueWriting, explain, fixSpelling, makeLonger, makeShorter]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if(e.ctrlKey && e.key === 'c') {
+        stop();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [exit, stop]);
+
+  const hasAIAnswer = useCallback(() => {
+    return completionHistoryRef.current.some((item) => item.role === CompletionRole.AI);
+  }, []);
+
+  return (
+    <WriterContext.Provider
+      value={{
+        viewId,
+        fetchViews: request.fetchViews,
+        placeholderContent,
+        comment,
+        improveWriting,
+        assistantType,
+        isFetching,
+        isApplying,
+        askAIAnything,
+        continueWriting,
+        explain,
+        fixSpelling,
+        makeLonger,
+        makeShorter,
+        askAIAnythingWithRequest,
+        setOpenDiscard,
+        applyingState,
+        setRagIds,
+        exit,
+        setEditorData,
+        keep,
+        accept,
+        rewrite,
+        stop,
+        responseMode,
+        setResponseMode,
+        responseFormat,
+        setResponseFormat,
+        isGlobalDocument,
+        error,
+        scrollContainer,
+        hasAIAnswer,
+      }}
+    >
+
+      <ChatI18nContext.Provider value={i18n}>
+        <TooltipProvider>
+          <ViewLoaderProvider
+            getView={(viewId: string) => request.getView(viewId)}
+            fetchViews={() => request.fetchViews()}
+          >
+            {children}
+            <ConfirmDiscard
+              open={openDiscard}
+              onClose={() => setOpenDiscard(false)}
+            />
+          </ViewLoaderProvider>
+        </TooltipProvider>
+      </ChatI18nContext.Provider>
+    </WriterContext.Provider>
+  );
+};
diff --git a/src/components/chat/provider/editor-provider.tsx b/src/components/chat/provider/editor-provider.tsx
new file mode 100644
index 00000000..cf19fe9e
--- /dev/null
+++ b/src/components/chat/provider/editor-provider.tsx
@@ -0,0 +1,50 @@
+import { AppFlowyEditor } from '@appflowyinc/editor';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef } from 'react';
+import { useChatContext } from '../chat/context';
+
+interface EditorContextTypes {
+  getEditor: (messageId: number) => AppFlowyEditor | undefined;
+  setEditor: (messageId: number, editor: AppFlowyEditor) => void;
+}
+
+const EditorContext = createContext<EditorContextTypes | undefined>(undefined);
+
+export const EditorProvider = ({ children }: { children: ReactNode }) => {
+  const {
+    chatId,
+  } = useChatContext();
+  const editorsRef = useRef<Map<number, AppFlowyEditor>>(new Map());
+
+  useEffect(() => {
+    editorsRef.current.clear();
+  }, [chatId]);
+
+  const getEditor = useCallback((messageId: number) => {
+    return editorsRef.current.get(messageId);
+  }, [editorsRef]);
+
+  const setEditor = useCallback((messageId: number, editor: AppFlowyEditor) => {
+    editorsRef.current.set(messageId, editor);
+  }, [editorsRef]);
+
+  return (
+    <EditorContext.Provider
+      value={{
+        getEditor,
+        setEditor,
+      }}
+    >
+      {children}
+    </EditorContext.Provider>
+  );
+};
+
+export function useEditorContext() {
+  const context = useContext(EditorContext);
+
+  if(!context) {
+    throw new Error('useEditorContext must be used within a EditorProvider');
+  }
+
+  return context;
+}
\ No newline at end of file
diff --git a/src/components/chat/provider/message-animation-provider.tsx b/src/components/chat/provider/message-animation-provider.tsx
new file mode 100644
index 00000000..5f9ca3e3
--- /dev/null
+++ b/src/components/chat/provider/message-animation-provider.tsx
@@ -0,0 +1,52 @@
+import React, { createContext, useCallback, useContext, useState } from 'react';
+
+interface AnimationContextTypes {
+  animatingIds: Set<number>;
+  registerAnimation: (animationId: number) => void;
+  completeAnimation: (animationId: number) => void;
+}
+
+export const AnimationContext = createContext<AnimationContextTypes | undefined>(undefined);
+
+export function useMessageAnimation() {
+  const context = useContext(AnimationContext);
+
+  if(!context) {
+    throw new Error('useAnimating: useAnimating must be used within a motion');
+  }
+  return context;
+}
+
+export const MessageAnimationProvider = ({ children }: {
+  children: React.ReactNode;
+}) => {
+  const [animatingIds, setAnimatingIds] = useState(new Set<number>());
+
+  const registerAnimation = useCallback((id: number) => {
+    setAnimatingIds(prev => {
+      const newSet = new Set(prev);
+      newSet.add(id);
+      return newSet;
+    });
+  }, []);
+
+  const completeAnimation = useCallback((id: number) => {
+    setAnimatingIds(prev => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+  }, []);
+
+  return (
+    <AnimationContext.Provider
+      value={{
+        animatingIds,
+        registerAnimation,
+        completeAnimation,
+      }}
+    >
+      {children}
+    </AnimationContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/src/components/chat/provider/messages-handler-provider.tsx b/src/components/chat/provider/messages-handler-provider.tsx
new file mode 100644
index 00000000..8fad9aad
--- /dev/null
+++ b/src/components/chat/provider/messages-handler-provider.tsx
@@ -0,0 +1,331 @@
+import { useChatContext } from '../chat/context';
+import { useToast } from '../hooks/use-toast';
+import { ERROR_CODE_NO_LIMIT } from '../lib/const';
+import { useMessageAnimation } from './message-animation-provider';
+import { useChatMessagesContext } from './messages-provider';
+import { useResponseFormatContext } from './response-format-provider';
+import { useSuggestionsContext } from './suggestions-provider';
+import {
+  AuthorType,
+  ChatMessageMetadata,
+  GetChatMessagesPayload,
+  MessageType,
+  OutputContent,
+  OutputLayout, RepeatedChatMessage,
+  ResponseFormat,
+} from '../types';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { usePromptModal } from './prompt-modal-provider';
+
+interface MessagesHandlerContextTypes {
+  fetchMessages: (payload?: GetChatMessagesPayload) => Promise<RepeatedChatMessage>;
+  submitQuestion: (message: string) => Promise<void>;
+  regenerateAnswer: (questionId: number) => Promise<void>;
+  fetchAnswerStream: (questionId: number, format?: ResponseFormat, onMessage?: (text: string, done?: boolean) => void) => Promise<void>;
+  cancelAnswerStream: () => void;
+  questionSending: boolean;
+  answerApplying: boolean;
+  selectedModelName?: string;
+  setSelectedModelName?: (modelName: string) => void;
+}
+
+export const MessagesHandlerContext = createContext<MessagesHandlerContextTypes | undefined>(undefined);
+
+function useMessagesHandler() {
+  const {
+    chatId,
+    requestInstance,
+    currentUser,
+  } = useChatContext();
+  
+  const [selectedModelName, setSelectedModelName] = useState<string>();
+
+  const {
+    messageIds,
+    addMessages,
+    insertMessage,
+    removeMessages,
+    saveMessageContent,
+    getMessage,
+  } = useChatMessagesContext();
+
+  const {
+    setResponseFormatWithId,
+  } = useResponseFormatContext();
+
+  const { currentPromptId } = usePromptModal();
+
+  const {
+    toast,
+  } = useToast();
+  const { registerAnimation } = useMessageAnimation();
+  const { registerFetchSuggestions, startFetchSuggestions } = useSuggestionsContext();
+  const [questionSending, setQuestionSending] = useState(false);
+  const [answerApplying, setAnswerApplying] = useState(false);
+  const cancelStreamRef = useRef<() => void>();
+
+  useEffect(() => {
+    return () => {
+      setQuestionSending(false);
+      setAnswerApplying(false);
+      cancelStreamRef.current = undefined;
+    };
+  }, [chatId]);
+
+  const fetchMessages = useCallback(async(payload?: GetChatMessagesPayload) => {
+    try {
+      const data = await requestInstance.getChatMessages(payload);
+      const messages = data.messages;
+      addMessages(messages);
+
+      return data;
+      // eslint-disable-next-line
+    } catch(e: any) {
+      toast({
+        variant: 'destructive',
+        description: e.message,
+      });
+      return Promise.reject(e);
+    }
+  }, [requestInstance, toast, addMessages]);
+
+  const createAssistantMessage = useCallback((answerId: number, index: number) => {
+
+    registerAnimation(answerId);
+
+    insertMessage({
+      message_id: answerId,
+      content: '',
+      author: {
+        author_uuid: 'assistant',
+        author_type: AuthorType.Assistant,
+      },
+    }, index);
+
+  }, [insertMessage, registerAnimation]);
+
+  const regenerateAnswer = useCallback(async(questionId: number) => {
+    const question = getMessage(questionId);
+    const answerId = question?.reply_message_id || questionId + 1;
+
+    const newMessages = removeMessages([answerId]);
+
+    setTimeout(() => {
+      const index = newMessages.map((message) => message.message_id).indexOf(questionId);
+      createAssistantMessage(answerId, index);
+    }, 200);
+
+  }, [createAssistantMessage, getMessage, removeMessages]);
+
+  const submitQuestion = useCallback(async(message: string) => {
+    try {
+      setQuestionSending(true);
+
+      // insert fake message to show user message
+      const fakeMessageId = Date.now();
+      const author = {
+        author_uuid: currentUser?.uuid || '',
+        author_type: AuthorType.Human,
+      };
+      insertMessage({
+        message_id: fakeMessageId,
+        content: message,
+        author,
+      }, 0);
+      registerAnimation(fakeMessageId);
+
+      const promptId = currentPromptId || undefined;
+
+      const question = await requestInstance.submitQuestion({
+        content: message,
+        message_type: MessageType.User,
+        prompt_id: promptId,
+        model_name: selectedModelName,
+      });
+
+      const answerId = question.reply_message_id || (question.message_id + 1);
+
+      // remove fake message
+      removeMessages([fakeMessageId]);
+
+      insertMessage({
+        ...question,
+        author,
+      }, 0);
+
+      // clear suggestions and set placeholder for this question
+      registerFetchSuggestions(question.message_id);
+
+      // create assistant message after user message
+      setTimeout(() => {
+        createAssistantMessage(answerId, 0);
+      }, 200);
+
+      void (async() => {
+        try {
+          const view = await requestInstance.getCurrentView();
+          if((!messageIds || messageIds.length === 0) && view) {
+            await requestInstance.updateViewName(view, message);
+          }
+          // eslint-disable-next-line
+        } catch(e: any) {
+          toast({
+            variant: 'destructive',
+            description: e.message,
+          });
+        }
+      })();
+
+      // eslint-disable-next-line
+    } catch(e: any) {
+      toast({
+        variant: 'destructive',
+        description: e.message,
+      });
+
+      return Promise.reject(e);
+    } finally {
+      setQuestionSending(false);
+    }
+  }, [currentUser?.uuid, insertMessage, registerAnimation, currentPromptId, requestInstance, removeMessages, registerFetchSuggestions, createAssistantMessage, messageIds, toast, selectedModelName]);
+
+  const saveAnswer = useCallback(
+    async(
+      questionId: number,
+      content: string,
+      metadata: ChatMessageMetadata[],
+    ) => {
+      try {
+        const answer = await requestInstance.saveAnswer({
+          question_message_id: questionId,
+          content,
+          ...(metadata.length !== 0 && { meta_data: metadata }),
+        });
+
+        saveMessageContent(answer.message_id, content, metadata);
+        // eslint-disable-next-line
+      } catch(e: any) {
+        toast({
+          variant: 'destructive',
+          description: e.message,
+        });
+      }
+    },
+    [requestInstance, saveMessageContent, toast],
+  );
+
+  const removeAssistantMessage = useCallback((messageId: number) => {
+    removeMessages([messageId]);
+  }, [removeMessages]);
+
+  const fetchAnswerStream = useCallback(async(questionId: number, format?: ResponseFormat, onMessage?: (text: string, done?: boolean) => void) => {
+
+    const question = getMessage(questionId);
+    let answerId = question?.reply_message_id;
+    if(!answerId) {
+      answerId = questionId + 1;
+    }
+
+    if(format) {
+      setResponseFormatWithId(answerId, format);
+    }
+
+    const handleMessageProgress = (
+      message: string,
+      metadata: ChatMessageMetadata[],
+      done?: boolean,
+    ) => {
+      onMessage?.(message, done);
+
+      if(done) {
+        if(message) {
+          void (async() => {
+            await saveAnswer(questionId, message, metadata);
+            setAnswerApplying(false);
+            if (answerId && messageIds.indexOf(answerId) === 0) {
+              await startFetchSuggestions(questionId);
+            }
+          })();
+        } else {
+          if(answerId) {
+            removeAssistantMessage(answerId);
+          }
+          setAnswerApplying(false);
+        }
+        return;
+      }
+
+    };
+
+    try {
+      setAnswerApplying(true);
+      const { cancel, streamPromise } = await requestInstance.fetchAnswerStream({
+        question_id: questionId,
+        format: format || {
+          output_layout: OutputLayout.Paragraph,
+          output_content: OutputContent.TEXT,
+        },
+        model_name: selectedModelName,
+      }, handleMessageProgress);
+      cancelStreamRef.current = cancel;
+      await streamPromise;
+      // eslint-disable-next-line
+    } catch(e: any) {
+      toast({
+        variant: 'destructive',
+        description: e.message,
+      });
+      setAnswerApplying(false);
+      const code = e.code;
+      if(code !== ERROR_CODE_NO_LIMIT) {
+        // remove assistant message if error is not no limit
+        if(answerId) {
+          removeAssistantMessage(answerId);
+        }
+        return;
+      }
+
+      // if error is no limit, show assistant message with error
+      return Promise.reject(e);
+
+    }
+  }, [getMessage, setResponseFormatWithId, saveAnswer, messageIds, startFetchSuggestions, removeAssistantMessage, requestInstance, toast, selectedModelName]);
+
+  const cancelAnswerStream = useCallback(() => {
+    if(cancelStreamRef.current) {
+      cancelStreamRef.current();
+    }
+  }, []);
+
+  return {
+    fetchMessages,
+    submitQuestion,
+    regenerateAnswer,
+    fetchAnswerStream,
+    cancelAnswerStream,
+    questionSending,
+    answerApplying,
+    selectedModelName,
+    setSelectedModelName,
+  };
+}
+
+export function MessagesHandlerProvider({ children }: { children: ReactNode }) {
+  const value = useMessagesHandler();
+
+  return (
+    <MessagesHandlerContext.Provider value={value}>
+      {children}
+    </MessagesHandlerContext.Provider>
+  );
+}
+
+export function useMessagesHandlerContext() {
+  const context = useContext(MessagesHandlerContext);
+
+  if(!context) {
+    throw new Error('useMessagesHandlerContext must be used within a MessagesHandlerProvider');
+  }
+
+  return context;
+}
diff --git a/src/components/chat/provider/messages-provider.tsx b/src/components/chat/provider/messages-provider.tsx
new file mode 100644
index 00000000..4aac2434
--- /dev/null
+++ b/src/components/chat/provider/messages-provider.tsx
@@ -0,0 +1,93 @@
+import { useChatContext } from '../chat/context';
+import { ChatMessage, ChatMessageMetadata } from '../types';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+export interface ChatMessagesContextTypes {
+  messageIds: number[];
+  getMessage: (id: number) => ChatMessage | undefined;
+  addMessages: (messages: ChatMessage[]) => void;
+  removeMessages: (ids: number[]) => ChatMessage[];
+  insertMessage: (message: ChatMessage, index: number) => void;
+  saveMessageContent: (messageId: number, content: string, metadata: ChatMessageMetadata[]) => void;
+}
+
+export const ChatMessagesContext = createContext<ChatMessagesContextTypes | undefined>(undefined);
+
+export function useChatMessagesContext() {
+  const context = useContext(ChatMessagesContext);
+
+  if(!context) {
+    throw new Error('useMessagesManager: useMessagesManager must be used within a ChatMessagesProvider');
+  }
+  return context;
+}
+
+export const ChatMessagesProvider = ({ children }: { children: ReactNode }) => {
+  const {
+    chatId,
+  } = useChatContext();
+  const [messageIds, setMessageIds] = useState<number[]>([]);
+  const messagesRef = useRef<ChatMessage[]>([]);
+
+  useEffect(() => {
+    return () => {
+      setMessageIds([]);
+      messagesRef.current = [];
+    };
+  }, [chatId]);
+
+  const getMessage = useCallback((id: number) => {
+    return messagesRef.current.find((message) => message.message_id === id);
+  }, []);
+
+  const addMessages = useCallback((messages: ChatMessage[]) => {
+    for(const message of messages) {
+      messagesRef.current.push(message);
+    }
+
+    setMessageIds(messagesRef.current.map((message) => message.message_id));
+  }, []);
+
+  const removeMessages = useCallback((ids: number[]) => {
+    messagesRef.current = messagesRef.current.filter((message) => !ids.includes(message.message_id));
+
+    setMessageIds(messagesRef.current.map((message) => message.message_id));
+
+    return messagesRef.current;
+  }, []);
+
+  const insertMessage = useCallback((message: ChatMessage, index: number) => {
+    const newMessage = [...messagesRef.current];
+    newMessage.splice(index, 0, message);
+    messagesRef.current = newMessage;
+    setMessageIds(messagesRef.current.map((message) => message.message_id));
+  }, []);
+
+  const saveMessageContent = useCallback(
+    (messageId: number, content: string, metadata: ChatMessageMetadata[]) => {
+      const message = messagesRef.current.find(
+        (message) => message.message_id === messageId
+      );
+      if(message) {
+        message.content = content;
+        message.meta_data = [...metadata];
+      }
+    },
+    []
+  );
+
+  return (
+    <ChatMessagesContext.Provider
+      value={{
+        messageIds,
+        getMessage,
+        addMessages,
+        removeMessages,
+        insertMessage,
+        saveMessageContent,
+      }}
+    >
+      {children}
+    </ChatMessagesContext.Provider>
+  );
+};
diff --git a/src/components/chat/provider/prompt-modal-provider.tsx b/src/components/chat/provider/prompt-modal-provider.tsx
new file mode 100644
index 00000000..01ee1be8
--- /dev/null
+++ b/src/components/chat/provider/prompt-modal-provider.tsx
@@ -0,0 +1,189 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import promptsData from '../data/built_in_prompts.json';
+import { parsePromptData } from '../lib/utils';
+import {
+  AiPrompt,
+  AiPromptCategory,
+  PromptDatabaseField,
+  RawPromptData,
+} from '../types/prompt';
+import { useTranslation } from '../i18n';
+
+const STORAGE_KEY = 'appflowy_prompt_db_config';
+
+export interface PromptDatabaseConfiguration {
+  databaseViewId: string;
+  titleFieldId: string;
+  contentFieldId: string;
+  exampleFieldId: string | null;
+  categoryFieldId: string | null;
+}
+
+interface PromptModalContextTypes {
+  isOpen: boolean;
+  currentPromptId: string | null;
+  updateCurrentPromptId: (id: string | null) => void;
+  prompts: AiPrompt[];
+  openModal: () => void;
+  closeModal: () => void;
+  databaseConfig: PromptDatabaseConfiguration | null;
+  fields: Array<PromptDatabaseField> | null;
+  reloadDatabasePrompts: () => void;
+  testDatabasePromptConfig?: (databaseViewId: string) => Promise<{
+    config: PromptDatabaseConfiguration;
+    fields: PromptDatabaseField[];
+  }>;
+  saveDatabaseConfig: (config: PromptDatabaseConfiguration) => void;
+}
+
+export const PromptModalContext = createContext<
+  PromptModalContextTypes | undefined
+>(undefined);
+
+export function usePromptModal() {
+  const context = useContext(PromptModalContext);
+
+  if (!context) {
+    throw new Error(
+      'usePromptModal: usePromptModal must be used within a PromptModalProvider',
+    );
+  }
+  return context;
+}
+
+export const PromptModalProvider = ({
+  workspaceId,
+  loadDatabasePrompts,
+  testDatabasePromptConfig,
+  children,
+}: {
+  workspaceId: string;
+  loadDatabasePrompts?: (config: PromptDatabaseConfiguration) => Promise<{
+    rawDatabasePrompts: RawPromptData[];
+    fields: PromptDatabaseField[];
+  }>;
+  testDatabasePromptConfig?: (databaseViewId: string) => Promise<{
+    config: PromptDatabaseConfiguration;
+    fields: PromptDatabaseField[];
+  }>;
+  children: ReactNode;
+}) => {
+  const { t } = useTranslation();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentDatabaseConfig, setCurrentDatabaseConfig] =
+    useState<PromptDatabaseConfiguration | null>(null);
+  const [fields, setFields] = useState<PromptDatabaseField[]>([]);
+
+  const prompts = useRef<AiPrompt[]>([]);
+  const currentPromptIdRef = useRef<string | null>(null);
+
+  const updateCurrentPromptId = (id: string | null) => {
+    currentPromptIdRef.current = id;
+  };
+
+  const fetchBuiltInPrompts = useCallback(() => {
+    try {
+      if (Array.isArray(promptsData.prompts)) {
+        const parsedPrompts = parsePromptData(promptsData.prompts);
+        prompts.current = parsedPrompts;
+      } else {
+        throw new Error(
+          'Invalid JSON structure: "prompts" array not found in imported data.',
+        );
+      }
+    } catch (err) {
+      console.error('Failed to load prompts:', err);
+    }
+  }, []);
+
+  const fetchCustomPrompts = useCallback(async () => {
+    if (!loadDatabasePrompts) return;
+
+    const storageKey = `${STORAGE_KEY}_${workspaceId}`;
+    const savedConfig = localStorage.getItem(storageKey);
+    if (!savedConfig) return;
+
+    const config = JSON.parse(savedConfig) as PromptDatabaseConfiguration;
+
+    try {
+      const { rawDatabasePrompts, fields: loadedFields } =
+        await loadDatabasePrompts(config);
+
+      const categories = new Map(
+        Object.values(AiPromptCategory).map((category) => [
+          category,
+          t(`customPrompt.${category}`),
+        ]),
+      );
+
+      const databasePrompts = parsePromptData(rawDatabasePrompts, categories);
+
+      const builtInPrompts = prompts.current.filter((p) => !p.isCustom);
+      prompts.current = [
+        ...builtInPrompts,
+        ...databasePrompts.map((p) => ({
+          ...p,
+          isCustom: true,
+          isFeatured: false,
+        })),
+      ];
+
+      setCurrentDatabaseConfig(config);
+      setFields(loadedFields);
+    } catch (err) {
+      console.error(
+        'Failed to load custom prompts using database config:',
+        err,
+      );
+      setCurrentDatabaseConfig(null);
+      setFields([]);
+    }
+  }, [loadDatabasePrompts, t, workspaceId]);
+
+  const saveDatabaseConfig = useCallback(
+    (config: PromptDatabaseConfiguration) => {
+      try {
+        const storageKey = `${STORAGE_KEY}_${workspaceId}`;
+        localStorage.setItem(storageKey, JSON.stringify(config));
+        fetchCustomPrompts();
+      } catch (err) {
+        console.error('Failed to save database config:', err);
+      }
+    },
+    [fetchCustomPrompts, workspaceId],
+  );
+
+  useEffect(() => {
+    fetchBuiltInPrompts();
+    void fetchCustomPrompts();
+  }, [fetchBuiltInPrompts, fetchCustomPrompts]);
+
+  return (
+    <PromptModalContext.Provider
+      value={{
+        isOpen,
+        currentPromptId: currentPromptIdRef.current,
+        updateCurrentPromptId,
+        prompts: prompts.current,
+        openModal: () => setIsOpen(true),
+        closeModal: () => setIsOpen(false),
+        databaseConfig: currentDatabaseConfig,
+        fields,
+        testDatabasePromptConfig,
+        saveDatabaseConfig,
+        reloadDatabasePrompts: fetchCustomPrompts,
+      }}
+    >
+      {children}
+    </PromptModalContext.Provider>
+  );
+};
diff --git a/src/components/chat/provider/response-format-provider.tsx b/src/components/chat/provider/response-format-provider.tsx
new file mode 100644
index 00000000..7d1b58e4
--- /dev/null
+++ b/src/components/chat/provider/response-format-provider.tsx
@@ -0,0 +1,70 @@
+import { useChatContext } from '../chat/context';
+import { ChatInputMode, OutputContent, OutputLayout, ResponseFormat } from '../types';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+interface ResponseFormatContextTypes {
+  responseFormat: ResponseFormat;
+  responseMode: ChatInputMode;
+  setResponseFormat: (responseFormat: ResponseFormat) => void;
+  setResponseMode: (responseMode: ChatInputMode) => void;
+  getMessageResponseFormat: (id: number) => ResponseFormat | undefined;
+  setResponseFormatWithId: (id: number, responseFormat: ResponseFormat) => void;
+}
+
+export const ResponseFormatContext = createContext<ResponseFormatContextTypes | undefined>(undefined);
+
+export function useResponseFormatContext() {
+  const context = useContext(ResponseFormatContext);
+
+  if(!context) {
+    throw new Error('useResponseFormatContext must be used within a ResponseFormatProvider');
+  }
+
+  return context;
+}
+
+export const ResponseFormatProvider = ({ children }: { children: ReactNode }) => {
+  const [responseFormat, setResponseFormat] = useState<ResponseFormat>({
+    output_layout: OutputLayout.BulletList,
+    output_content: OutputContent.TEXT,
+  });
+  const messagesResponseFormat = useRef<Map<number, ResponseFormat>>(new Map());
+  const [responseMode, setResponseMode] = useState<ChatInputMode>(ChatInputMode.FormatResponse);
+
+  const {
+    chatId,
+  } = useChatContext();
+
+  const getMessageResponseFormat = useCallback((id: number) => {
+    return messagesResponseFormat.current.get(id);
+  }, []);
+
+  const setResponseFormatWithId = useCallback((id: number, responseFormat: ResponseFormat) => {
+    messagesResponseFormat.current.set(id, responseFormat);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      setResponseFormat({
+        output_layout: OutputLayout.BulletList,
+        output_content: OutputContent.TEXT,
+      });
+      setResponseMode(ChatInputMode.FormatResponse);
+    };
+  }, [chatId]);
+
+  return (
+    <ResponseFormatContext.Provider
+      value={{
+        responseMode,
+        responseFormat,
+        setResponseFormat,
+        setResponseMode,
+        getMessageResponseFormat,
+        setResponseFormatWithId,
+      }}
+    >
+      {children}
+    </ResponseFormatContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/src/components/chat/provider/selection-mode-provider.tsx b/src/components/chat/provider/selection-mode-provider.tsx
new file mode 100644
index 00000000..ab91565b
--- /dev/null
+++ b/src/components/chat/provider/selection-mode-provider.tsx
@@ -0,0 +1,126 @@
+import { Banner } from '../components/multi-selection/banner';
+import { ANIMATION_PRESETS, MESSAGE_VARIANTS } from '../lib/animations';
+import { cn } from '../lib/utils';
+import { useChatMessagesContext } from './messages-provider';
+import { AuthorType, ChatMessage } from '../types';
+import { CheckStatus } from '../types/checkbox';
+import { AnimatePresence, motion } from 'framer-motion';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useChatContext } from '../chat/context';
+
+interface SelectionModeContextTypes {
+  messages: ChatMessage[];
+  toggleMessage: (message: ChatMessage) => void;
+}
+
+export const SelectionModeContext = createContext<SelectionModeContextTypes | undefined>(undefined);
+
+export function useSelectionModeContext() {
+  const context = useContext(SelectionModeContext);
+
+  if(!context) {
+    throw new Error('useSelectionModeContext must be used within a SelectionModeProvider');
+  }
+
+  return context;
+}
+
+export const SelectionModeProvider = ({ children }: { children: ReactNode }) => {
+  const {
+    chatId,
+    selectionMode,
+  } = useChatContext();
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [checkStatus, setCheckStatus] = useState<CheckStatus>(CheckStatus.Unchecked);
+
+  useEffect(() => {
+    return () => {
+      setMessages([]);
+      setCheckStatus(CheckStatus.Unchecked);
+    };
+  }, [chatId]);
+
+  useEffect(() => {
+    if(!selectionMode) {
+      setMessages([]);
+      setCheckStatus(CheckStatus.Unchecked);
+    }
+  }, [selectionMode]);
+
+  const {
+    messageIds,
+    getMessage,
+  } = useChatMessagesContext();
+
+  const toggleMessage = useCallback((message: ChatMessage) => {
+    setMessages(messages => {
+      if(messages.find(m => m.message_id === message.message_id)) {
+        return messages.filter(m => m.message_id !== message.message_id);
+      }
+      return [...messages, message];
+    });
+  }, []);
+
+  const allMessages = useMemo(() => {
+    return messageIds.map(getMessage).filter(item => {
+      if(item?.author?.author_type !== undefined && [AuthorType.Assistant, AuthorType.AI].includes(item?.author?.author_type)) {
+        return item;
+      }
+    }) as ChatMessage[];
+  }, [getMessage, messageIds]);
+
+  useEffect(() => {
+    const isAllChecked = allMessages.length > 0 && messages.length === allMessages.length;
+    const isAllUnchecked = messages.length === 0;
+    setCheckStatus(isAllChecked ? CheckStatus.Checked : isAllUnchecked ? CheckStatus.Unchecked : CheckStatus.Indeterminate);
+  }, [allMessages, messages]);
+
+  const handleSelectAll = useCallback(() => {
+    setMessages(allMessages);
+  }, [allMessages]);
+
+  const handleUnselectAll = useCallback(() => {
+    setMessages([]);
+  }, []);
+
+  return <SelectionModeContext.Provider
+    value={{
+      messages,
+      toggleMessage,
+    }}
+  >
+    <div
+      className={cn('h-full w-full  px-1')}
+    >
+      <AnimatePresence mode="wait">
+        {selectionMode && (
+          <motion.div
+            key="banner"
+            variants={MESSAGE_VARIANTS.getBannerVariants()}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            className="absolute top-0 left-0 right-0 z-10"
+          >
+            <Banner
+              messages={messages}
+              onSelectAll={handleSelectAll}
+              onClearAll={handleUnselectAll}
+              checkStatus={checkStatus}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <motion.div
+        className="h-full w-full relative"
+        animate={{
+          y: selectionMode ? 48 : 0,
+        }}
+        transition={ANIMATION_PRESETS.SPRING_GENTLE}
+      >
+        {children}
+      </motion.div>
+
+    </div>
+  </SelectionModeContext.Provider>;
+};
\ No newline at end of file
diff --git a/src/components/chat/provider/suggestions-provider.tsx b/src/components/chat/provider/suggestions-provider.tsx
new file mode 100644
index 00000000..9be27b15
--- /dev/null
+++ b/src/components/chat/provider/suggestions-provider.tsx
@@ -0,0 +1,95 @@
+import { useToast } from '../hooks/use-toast';
+import { Suggestions } from '../types';
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useChatContext } from '../chat/context';
+
+interface SuggestionsContextTypes {
+  registerFetchSuggestions: (messageId: number) => void;
+  unregisterFetchSuggestions: (messageId: number) => void;
+  startFetchSuggestions: (questionMessageId: number) => Promise<void>;
+  getMessageSuggestions: (messageId: number) => Suggestions | undefined;
+  clearSuggestions: () => void;
+}
+
+export const SuggestionsContext = createContext<SuggestionsContextTypes | undefined>(undefined);
+
+export function useSuggestionsContext() {
+  const context = useContext(SuggestionsContext);
+
+  if(!context) {
+    throw new Error('useSuggestionsContext must be used within a SuggestionsProvider');
+  }
+
+  return context;
+}
+
+export const SuggestionsProvider = ({ children }: { children: ReactNode }) => {
+  const {
+    chatId,
+    requestInstance,
+  } = useChatContext();
+  const [suggestions, setSuggestions] = useState<Map<number, Suggestions>>(new Map());
+
+  const { toast } = useToast();
+  const fetchingMessageIdsRef = useRef<Set<number>>(new Set());
+
+  useEffect(() => {
+    fetchingMessageIdsRef.current.clear();
+
+    return () => {
+      setSuggestions(new Map());
+    };
+  }, [chatId]);
+
+  const clearSuggestions = useCallback(() => {
+    setSuggestions(new Map());
+  }, []);
+
+  const registerFetchSuggestions = useCallback((messageId: number) => {
+    clearSuggestions();
+    fetchingMessageIdsRef.current.add(messageId);
+  }, [clearSuggestions]);
+
+  const unregisterFetchSuggestions = useCallback((messageId: number) => {
+    fetchingMessageIdsRef.current.delete(messageId);
+  }, []);
+
+  const getMessageSuggestions = useCallback((messageId: number) => {
+    return suggestions.get(messageId);
+  }, [suggestions]);
+
+  const startFetchSuggestions = useCallback(async(questionMessageId: number) => {
+    try {
+      const data = await requestInstance.getSuggestions(questionMessageId);
+
+      setSuggestions(() => {
+        const newSuggestions = new Map();
+        newSuggestions.set(questionMessageId, data);
+        return newSuggestions;
+      });
+
+      // eslint-disable-next-line
+    } catch(e: any) {
+      toast({
+        variant: 'destructive',
+        description: e.message,
+      });
+    } finally {
+      unregisterFetchSuggestions(questionMessageId);
+    }
+  }, [requestInstance, toast, unregisterFetchSuggestions]);
+
+  return (
+    <SuggestionsContext.Provider
+      value={{
+        getMessageSuggestions,
+        startFetchSuggestions,
+        clearSuggestions,
+        registerFetchSuggestions,
+        unregisterFetchSuggestions,
+      }}
+    >
+      {children}
+    </SuggestionsContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/src/components/chat/provider/view-loader-provider.tsx b/src/components/chat/provider/view-loader-provider.tsx
new file mode 100644
index 00000000..16dfbe96
--- /dev/null
+++ b/src/components/chat/provider/view-loader-provider.tsx
@@ -0,0 +1,86 @@
+import { useToast } from '../hooks/use-toast';
+import { filterDocumentViews } from '../lib/views';
+import { View } from '../types/request';
+import { createContext, useCallback, useContext, useState } from 'react';
+
+interface ViewLoaderProviderProps {
+  viewsLoading: boolean;
+  fetchViews: (filter?: (v: View[]) => View[]) => Promise<View | undefined>;
+  getView: (
+    viewId: string,
+    forceRefresh?: boolean,
+  ) => Promise<View | undefined>;
+}
+
+export const ViewLoaderContext = createContext<
+  ViewLoaderProviderProps | undefined
+>(undefined);
+
+export function useViewLoader() {
+  const context = useContext(ViewLoaderContext);
+
+  if (!context) {
+    throw new Error(
+      'useViewLoader: useViewLoader must be used within a ViewLoaderProvider',
+    );
+  }
+  return context;
+}
+
+export const ViewLoaderProvider = ({
+  getView,
+  fetchViews,
+  children,
+}: {
+  getView: (viewId: string, forceRefresh?: boolean) => Promise<View>;
+  fetchViews: (forceRefresh?: boolean) => Promise<View>;
+  children: React.ReactNode;
+}) => {
+  const { toast } = useToast();
+
+  const [viewsLoading, setViewsLoading] = useState(false);
+
+  const fetchViewsImpl = useCallback(
+    async (filter?: (v: View[]) => View[]) => {
+      try {
+        setViewsLoading(true);
+        const view = await fetchViews(true);
+        const result = {
+          ...view,
+          children: filter
+            ? filter(view.children)
+            : filterDocumentViews(view.children),
+        };
+        setViewsLoading(false);
+        return result;
+        // eslint-disable-next-line
+      } catch (e: any) {
+        // do not show toast for no views
+      }
+    },
+    [fetchViews],
+  );
+
+  const getViewImpl = useCallback(
+    async (viewId: string, forceRefresh = true) => {
+      try {
+        return await getView(viewId, forceRefresh);
+        // eslint-disable-next-line
+      } catch (e: any) {
+        toast({
+          variant: 'destructive',
+          description: e.message,
+        });
+      }
+    },
+    [getView, toast],
+  );
+
+  return (
+    <ViewLoaderContext.Provider
+      value={{ viewsLoading, getView: getViewImpl, fetchViews: fetchViewsImpl }}
+    >
+      {children}
+    </ViewLoaderContext.Provider>
+  );
+};
diff --git a/src/components/chat/request/chat-request.ts b/src/components/chat/request/chat-request.ts
new file mode 100644
index 00000000..6fc02692
--- /dev/null
+++ b/src/components/chat/request/chat-request.ts
@@ -0,0 +1,535 @@
+import {
+  createInitialInstance,
+  getAccessToken,
+  readableStreamToAsyncIterator,
+  requestInterceptor,
+} from '../lib/requets';
+import { convertToPageData } from '../lib/utils';
+import { findView } from '../lib/views';
+import {
+  ChatMessage,
+  GetChatMessagesPayload,
+  RepeatedChatMessage,
+  ResponseFormat,
+  SendQuestionPayload,
+  Suggestions,
+  User, View, ViewLayout,
+  ChatMessageMetadata, StreamType,
+} from '../types';
+import { ModelList } from '../types/ai-model';
+import { EditorData } from '@appflowyinc/editor';
+import { AxiosInstance } from 'axios';
+
+export interface ChatSettings {
+  name: string;
+  rag_ids: string[];
+  metadata: Record<string, any>;
+}
+
+export interface UpdateChatSettingsParams {
+  name?: string;
+  metadata?: Record<string, any>;
+  rag_ids?: string[];
+}
+
+/**
+ * ChatRequest class for handling chat-related API requests
+ * @class
+ * @classdesc ChatRequest class manages chat interactions, particularly designed for AppFlowy cloud services.
+ * It handles user information, chat messages, and member details. While primarily integrated with AppFlowy,
+ * it can be customized for different backend services by implementing compatible interfaces.
+ *
+ * @constructor
+ * @param {string} workspaceId - Unique identifier for the AppFlowy workspace
+ * @param {string} chatId - Unique identifier for the specific chat instance
+ * @param {AxiosInstance} [axiosInstance] - Optional custom Axios instance for HTTP requests
+ *
+ * @example
+ * // Using with AppFlowy cloud service
+ * const chatRequest = new ChatRequest(workspaceId, chatId);
+ * const user = await chatRequest.getCurrentUser();
+ * const messages = await chatRequest.getChatMessages();
+ * const member = await chatRequest.getMember('memberId');
+ *
+ * @example
+ * // Using with custom axios instance
+ * const customAxios = axios.create({
+ *   baseURL: 'your-api-url',
+ *   headers: { 'Custom-Header': 'value' }
+ * });
+ * const chatRequest = new ChatRequest(workspaceId, chatId, customAxios);
+ *
+ * @property {string} workspaceId - Stored workspace identifier
+ * @property {string} chatId - Stored chat identifier
+ * @property {AxiosInstance} axiosInstance - HTTP client instance
+ *
+ * @throws {Error} If workspaceId or chatId is not provided
+ * @throws {AxiosError} On API request failures
+ *
+ * Implementation Notes:
+ * - This class is designed to work with AppFlowy's cloud services by default
+ * - Developers not using AppFlowy cloud need to implement their own ChatRequest with compatible interfaces
+ * - Custom axios instances can be provided for specialized request handling (e.g., custom interceptors)
+ * - All API methods return Promises and should handle errors appropriately
+ *
+ * Configuration Notes:
+ * - Default endpoint: AppFlowy cloud service
+ * - Authentication: Handled by axios interceptors
+ * - Rate limiting: Follows AppFlowy's API guidelines
+ * - Error handling: Standardized error responses
+ *
+ * @see {@link https://github.com/AppFlowy-IO/AppFlowy|AppFlowy GitHub}
+ * @see {@link https://docs.appflowy.io/docs/guides/appflowy-cloud|AppFlowy Cloud Documentation}
+ */
+export class ChatRequest {
+  private axiosInstance: AxiosInstance = createInitialInstance();
+
+  private readonly workspaceId: string | undefined;
+
+  private readonly chatId: string | undefined;
+
+  private folder: View | undefined;
+
+  constructor(workspaceId?: string, chatId?: string, axiosInstance?: AxiosInstance) {
+    this.workspaceId = workspaceId;
+    this.chatId = chatId;
+
+    if(axiosInstance) {
+      this.axiosInstance = axiosInstance;
+    } else {
+      this.axiosInstance.interceptors.request.use(requestInterceptor);
+    }
+  }
+
+  async getCurrentUser(): Promise<User> {
+    const url = '/api/user/profile';
+    const response = await this.axiosInstance.get<{
+      code: number;
+      data?: {
+        uid: number;
+        uuid: string;
+        email: string;
+        name: string;
+        metadata: {
+          icon_url: string;
+        };
+      };
+      message: string;
+    }>(url);
+
+    const data = response?.data;
+
+    if(data?.code === 0 && data.data) {
+      const { uuid, email, name, metadata } = data.data;
+
+      return {
+        uuid,
+        email,
+        name,
+        avatar: metadata.icon_url,
+      };
+    }
+
+    return Promise.reject(data);
+  }
+
+  async getChatMessages(payload?: GetChatMessagesPayload): Promise<RepeatedChatMessage> {
+    if(!this.workspaceId || !this.chatId) {
+      return Promise.reject('workspaceId or chatId is not defined');
+    }
+
+    const url = `/api/chat/${this.workspaceId}/${this.chatId}/message`;
+
+    const response = await this.axiosInstance.get<{
+      code: number;
+      data?: RepeatedChatMessage;
+      message: string;
+    }>(url, {
+      params: payload,
+    });
+
+    const data = response?.data;
+
+    if(data?.code === 0 && data.data) {
+      return data.data;
+    }
+
+    return Promise.reject(data);
+  }
+
+  async getMember(uuid: string): Promise<User> {
+    const url = `/api/workspace/v1/${this.workspaceId}/member/user/${uuid}`;
+    const res = await this.axiosInstance.get<{
+      code: number;
+      data: {
+        name: string;
+        email: string;
+        avatar_url: string;
+      };
+      message: string;
+    }>(url);
+
+    if(res?.data.code === 0) {
+      const { data } = res.data;
+      return data ? {
+        uuid,
+        email: data.email,
+        name: data.name,
+        avatar: data.avatar_url,
+      } as User : Promise.reject('Member not found');
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async getSuggestions(questionId: number) {
+    const url = `/api/chat/${this.workspaceId}/${this.chatId}/${questionId}/related_question`;
+
+    const res = await this.axiosInstance.get<{
+      code: number;
+      data: Suggestions;
+      message: string;
+    }>(url);
+
+    if(res?.data.code === 0) {
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async updateViewName(view: View, newName: string) {
+    const url = `/api/workspace/${this.workspaceId}/page-view/${view.view_id}`;
+
+    const payload = {
+      name: newName,
+      icon: view.icon,
+      extra: view.extra,
+    };
+
+    const res = await this.axiosInstance.patch<{
+      code: number;
+      message: string;
+    }>(url, payload);
+
+    if(res?.data.code === 0) {
+      return;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async submitQuestion(payload: SendQuestionPayload) {
+    const url = `/api/chat/${this.workspaceId}/${this.chatId}/message/question`;
+
+    const res = await this.axiosInstance.post<{
+      code: number;
+      data: ChatMessage;
+      message: string;
+    }>(url, payload);
+
+    if(res?.data.code === 0) {
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async fetchAnswerStream(payload: {
+    question_id: number;
+    format: ResponseFormat;
+    model_name?: string;
+  }, onMessage: (text: string, metadata: ChatMessageMetadata[], done?: boolean) => void) {
+    const baseUrl = this.axiosInstance.defaults.baseURL;
+    const url = `${baseUrl}/api/chat/${this.workspaceId}/${this.chatId}/answer/stream`;
+
+    const token = getAccessToken(); // Assume this function returns a valid token
+
+    let reader: ReadableStreamDefaultReader<Uint8Array> | undefined = undefined;
+
+    const cancel = () => {
+      reader?.cancel();
+      reader?.releaseLock();
+      console.log('Stream canceled');
+    };
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'ai-model': payload.model_name || 'Auto',
+      },
+      body: JSON.stringify({
+        ...payload,
+        chat_id: this.chatId,
+      }),
+    });
+
+    if(!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const streamPromise = (async() => {
+      const contentType = response.headers.get('Content-Type');
+
+      if(contentType?.includes('application/json')) {
+        const json = await response.json();
+        if(json.code !== 0) {
+          return Promise.reject(json);
+        }
+        return;
+      }
+
+      reader = response.body?.getReader();
+
+      if(!reader) {
+        throw new Error('Failed to get reader');
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let text = '';
+      const metadata: ChatMessageMetadata[] = [];
+
+      try {
+        for await (const chunk of readableStreamToAsyncIterator(reader)) {
+          buffer += decoder.decode(chunk, { stream: true });
+
+          while(buffer.length > 0) {
+            const openBraceIndex = buffer.indexOf('{');
+            if(openBraceIndex === -1) break;
+
+            let closeBraceIndex = -1;
+            let depth = 0;
+
+            for(let i = openBraceIndex; i < buffer.length; i++) {
+              if(buffer[i] === '{') depth++;
+              if(buffer[i] === '}') depth--;
+              if(depth === 0) {
+                closeBraceIndex = i;
+                break;
+              }
+            }
+
+            if(closeBraceIndex === -1) break;
+
+            const jsonStr = buffer.slice(openBraceIndex, closeBraceIndex + 1);
+            try {
+              const data = JSON.parse(jsonStr);
+              Object.entries(data).forEach(([key, value]) => {
+                if(key === StreamType.META_DATA) {
+                  if(Array.isArray(value)) {
+                    metadata.push(...value);
+                  }
+                  return;
+                }
+
+                text += value;
+              });
+
+              onMessage(text, [], false);
+            } catch(e) {
+              console.error('Failed to parse JSON:', e);
+            }
+
+            buffer = buffer.slice(closeBraceIndex + 1);
+          }
+        }
+
+        onMessage(text, metadata, true);
+
+      } catch(error) {
+        console.error('Stream reading error:', error);
+      } finally {
+        reader.releaseLock();
+        try {
+          await response.body?.cancel();
+        } catch(error) {
+          console.error('Error canceling stream:', error);
+        }
+      }
+    })();
+
+    return { cancel, streamPromise };
+  }
+
+  async saveAnswer(payload: {
+    question_message_id: number;
+    content: string;
+    meta_data?: ChatMessageMetadata[],
+  }) {
+    const url = `/api/chat/${this.workspaceId}/${this.chatId}/message/answer`;
+
+    const res = await this.axiosInstance.post<{
+      code: number;
+      data: ChatMessage;
+      message: string;
+      meta_data: ChatMessageMetadata[],
+    }>(url, payload);
+
+    if(res?.data.code === 0) {
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async getCurrentView() {
+    const url = `/api/workspace/${this.workspaceId}/folder?depth=1&root_view_id=${this.chatId}`;
+
+    const res = await this.axiosInstance.get<{
+      code: number;
+      data: View;
+      message: string;
+    }>(url);
+
+    if(res?.data.code === 0) {
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async getView(viewId: string, forceRefresh = true) {
+    const oldView = findView(this.folder?.children || [], viewId);
+
+    if(!forceRefresh && oldView) {
+      return oldView;
+    }
+
+    const url = `/api/workspace/${this.workspaceId}/folder?depth=1&root_view_id=${viewId}`;
+
+    const res = await this.axiosInstance.get<{
+      code: number;
+      data: View;
+      message: string;
+    }>(url);
+
+    if(res?.data.code === 0) {
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async fetchViews(forceRefresh = false) {
+    if(this.folder && !forceRefresh) {
+      return this.folder;
+    }
+
+    const url = `/api/workspace/${this.workspaceId}/folder?depth=10`;
+
+    const res = await this.axiosInstance.get<{
+      code: number;
+      data: View;
+      message: string;
+    }>(url);
+
+    if(res?.data.code === 0) {
+      this.folder = res.data.data;
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async insertContentToView(viewId: string, data: EditorData): Promise<void> {
+    const url = `/api/workspace/${this.workspaceId}/page-view/${viewId}/append-block`;
+    const pageData = convertToPageData(data);
+
+    const res = await this.axiosInstance.post<{
+      code: number;
+      message: string;
+    }>(url, {
+      blocks: pageData,
+    });
+
+    if(res?.data.code === 0) {
+      return;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async createViewWithContent(parentViewId: string, name: string, data: EditorData) {
+    const url = `/api/workspace/${this.workspaceId}/page-view`;
+    const pageData = {
+      type: 'page',
+      children: convertToPageData(data),
+    };
+    const res = await this.axiosInstance.post<{
+      code: number;
+      data: {
+        view_id: string;
+      };
+      message: string;
+    }>(url, {
+      parent_view_id: parentViewId,
+      page_data: pageData,
+      layout: ViewLayout.Document,
+      name,
+    });
+
+    if(res?.data.code === 0) {
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  async getModelList(): Promise<ModelList> {
+    if (!this.workspaceId) {
+      return Promise.reject('workspaceId is not defined');
+    }
+
+    const url = `/api/ai/${this.workspaceId}/model/list`;
+    const response = await this.axiosInstance.get<{
+      code: number;
+      data?: ModelList;
+      message?: string;
+    }>(url);
+
+    if (response?.data.code === 0 && response.data.data) {
+      return response.data.data;
+    }
+
+    return Promise.reject(response?.data?.message || 'Failed to fetch model list');
+  }
+
+  async getChatSettings(): Promise<ChatSettings> {
+    if (!this.workspaceId || !this.chatId) {
+      return Promise.reject('workspaceId or chatId is not defined');
+    }
+
+    const url = `/api/chat/${this.workspaceId}/${this.chatId}/settings`;
+    const response = await this.axiosInstance.get<{
+      code: number;
+      data?: ChatSettings;
+      message?: string;
+    }>(url);
+
+    if (response?.data.code === 0 && response.data.data) {
+      return response.data.data;
+    }
+
+    return Promise.reject(response?.data?.message || 'Failed to fetch chat settings');
+  }
+
+  async updateChatSettings(params: UpdateChatSettingsParams): Promise<void> {
+    if (!this.workspaceId || !this.chatId) {
+      return Promise.reject('workspaceId or chatId is not defined');
+    }
+
+    const url = `/api/chat/${this.workspaceId}/${this.chatId}/settings`;
+    const response = await this.axiosInstance.post<{
+      code: number;
+      message?: string;
+    }>(url, params);
+
+    if (response?.data.code === 0) {
+      return;
+    }
+
+    return Promise.reject(response?.data?.message || 'Failed to update chat settings');
+  }
+}
diff --git a/src/components/chat/request/index.ts b/src/components/chat/request/index.ts
new file mode 100644
index 00000000..c1402253
--- /dev/null
+++ b/src/components/chat/request/index.ts
@@ -0,0 +1,7 @@
+import { ChatRequest } from './chat-request';
+import { WriterRequest } from './writer-request';
+
+export {
+  ChatRequest,
+  WriterRequest,
+};
\ No newline at end of file
diff --git a/src/components/chat/request/writer-request.ts b/src/components/chat/request/writer-request.ts
new file mode 100644
index 00000000..a502284a
--- /dev/null
+++ b/src/components/chat/request/writer-request.ts
@@ -0,0 +1,200 @@
+import {
+  createInitialInstance,
+  getAccessToken,
+  readableStreamToAsyncIterator,
+  requestInterceptor,
+} from '../lib/requets';
+import {
+  AIAssistantType,
+  CompletionResult,
+  OutputContent,
+  OutputLayout,
+  ResponseFormat,
+  StreamType,
+  View,
+} from '../types';
+import { AxiosInstance } from 'axios';
+
+export class WriterRequest {
+  private axiosInstance: AxiosInstance = createInitialInstance();
+
+  private readonly workspaceId: string | undefined;
+
+  private readonly viewId: string | undefined;
+
+  constructor(workspaceId?: string, viewId?: string, axiosInstance?: AxiosInstance) {
+    this.workspaceId = workspaceId;
+    this.viewId = viewId;
+
+    if(axiosInstance) {
+      this.axiosInstance = axiosInstance;
+    } else {
+      this.axiosInstance.interceptors.request.use(requestInterceptor);
+    }
+  }
+
+  fetchAIAssistant = async(payload: {
+    inputText: string;
+    assistantType: AIAssistantType;
+    format?: ResponseFormat;
+    ragIds: string[];
+    completionHistory: CompletionResult[];
+    promptId?: string;
+  }, onMessage: (text: string, comment: string, done?: boolean) => void) => {
+    const baseUrl = this.axiosInstance.defaults.baseURL;
+    const url = `${baseUrl}/api/ai/${this.workspaceId}/v2/complete/stream`;
+
+    const token = getAccessToken(); // Assume this function returns a valid token
+
+    let reader: ReadableStreamDefaultReader<Uint8Array> | undefined = undefined;
+
+    const cancel = () => {
+      reader?.cancel();
+      reader?.releaseLock();
+    };
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'ai-model': 'Auto',
+      },
+      body: JSON.stringify({
+        text: payload.inputText,
+        completion_type: payload.assistantType,
+        format: payload.format || {
+          output_content: OutputContent.TEXT,
+          output_layout: OutputLayout.Paragraph,
+        },
+        metadata: {
+          object_id: this.viewId,
+          workspace_id: this.workspaceId,
+          rag_ids: payload.ragIds.length === 0 ? [this.viewId] : payload.ragIds,
+          completion_history: payload.completionHistory,
+          prompt_id: payload.promptId,
+        },
+      }),
+    });
+
+    if(!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const streamPromise = (async() => {
+      const contentType = response.headers.get('Content-Type');
+
+      if(contentType?.includes('application/json')) {
+        const json = await response.json();
+        if(json.code !== 0) {
+          return Promise.reject(json);
+        }
+        return;
+      }
+
+      reader = response.body?.getReader();
+
+      if(!reader) {
+        throw new Error('Failed to get reader');
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let text = '';
+      let comment = '';
+
+      try {
+        for await (const chunk of readableStreamToAsyncIterator(reader)) {
+          buffer += decoder.decode(chunk, { stream: true });
+
+          while(buffer.length > 0) {
+            const openBraceIndex = buffer.indexOf('{');
+            if(openBraceIndex === -1) break;
+
+            let closeBraceIndex = -1;
+            let depth = 0;
+
+            for(let i = openBraceIndex; i < buffer.length; i++) {
+              if(buffer[i] === '{') depth++;
+              if(buffer[i] === '}') depth--;
+              if(depth === 0) {
+                closeBraceIndex = i;
+                break;
+              }
+            }
+
+            if(closeBraceIndex === -1) break;
+
+            const jsonStr = buffer.slice(openBraceIndex, closeBraceIndex + 1);
+            try {
+              const data = JSON.parse(jsonStr);
+              Object.entries(data).forEach(([key, value]) => {
+                if(key === StreamType.META_DATA || key === StreamType.KEEP_ALIVE_KEY) {
+                  return;
+                }
+
+                if(key === StreamType.COMMENT) {
+                  comment += value;
+                  return;
+                }
+
+                text += value;
+              });
+
+              onMessage(text, comment, false);
+            } catch(e) {
+              console.error('Failed to parse JSON:', e);
+            }
+
+            buffer = buffer.slice(closeBraceIndex + 1);
+          }
+        }
+
+        onMessage(text, comment, true);
+
+      } catch(error) {
+        console.error('Stream reading error:', error);
+      } finally {
+        reader.releaseLock();
+        try {
+          await response.body?.cancel();
+        } catch(error) {
+          console.error('Error canceling stream:', error);
+        }
+      }
+    })();
+
+    return { cancel, streamPromise };
+  };
+  
+  async getView(viewId: string) {
+    const url = `/api/workspace/${this.workspaceId}/folder?depth=1&root_view_id=${viewId}`;
+
+    const res = await this.axiosInstance.get<{
+      code: number;
+      data: View;
+      message: string;
+    }>(url);
+
+    if(res?.data.code === 0) {
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  }
+
+  fetchViews = async() => {
+    const url = `/api/workspace/${this.workspaceId}/folder?depth=10`;
+
+    const res = await this.axiosInstance.get<{
+      code: number;
+      data: View;
+      message: string;
+    }>(url);
+
+    if(res?.data.code === 0) {
+      return res.data.data;
+    }
+
+    return Promise.reject(res?.data);
+  };
+}
\ No newline at end of file
diff --git a/src/components/chat/styles/index.scss b/src/components/chat/styles/index.scss
new file mode 100644
index 00000000..4e80c00f
--- /dev/null
+++ b/src/components/chat/styles/index.scss
@@ -0,0 +1,198 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Light variables */
+:root {
+  --z-ai-popover: 1300;
+  /* component colors */
+  --background: 0 0% 100%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --tooltip: 0 0% 9%;
+  --tooltip-foreground: 0 0% 100%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 9%;
+  --primary: 195 100% 47%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 214, 7%, 43%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --placeholder: 213, 9%, 76%;
+  --accent: 216, 14%, 14%, 0.06;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --success: 136, 57%, 35%;
+  --border: 216, 14%, 14%, 8%;
+  --input: 216, 14%, 14%, 8%;
+  --ring: 195 100% 47%;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+  --radius: 0.5rem;
+  --icon: 214, 7%, 43%;
+  --gradient1: linear-gradient(233deg, #34BDAF 0%, #B682D5 100%);
+  --gradient2: linear-gradient(180deg, #4CC2CC 0%, #E17570 100%);
+  --gradient3: linear-gradient(180deg, #AF70E1 0%, #ED7196 100%);
+  --gradient4: linear-gradient(180deg, #A348D6 0%, #45A7DF 100%);
+  --gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
+  --gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
+  --gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
+  --tint-purple: #E8E0FF;
+  --badge-purple: #AB8DFF;
+  --tint-pink: #FFE7FD;
+  --badge-pink: #FF8EF5;
+  --tint-red: #FFE7EE;
+  --badge-red: #FF85A9;
+  --tint-lime: #F5FFDC;
+  --badge-lime: #C6EC41;
+  --tint-green: #DDFFD6;
+  --badge-green: #74F37D;
+  --tint-aqua: #DEFFF1;
+  --badge-aqua: #40F0D1;
+  --tint-blue: #E1FBFF;
+  --badge-blue: #00C8FF;
+  --tint-orange: #FFEFE3;
+  --badge-orange: #FFBC7E;
+  --tint-yellow: #FFF2CD;
+  --badge-yellow: #FCD86F;
+  --selection: #e0f8ff;
+  --button-disabled: 216, 12%, 83%;
+  --secondary-background: #faf9fd;
+  --input-background: #ffffff;
+  /* !shadows */
+  --shadows-sm: 0px 4px 20px 0px rgba(31, 35, 41, 0.10);
+  --shadows-md: 0px 4px 32px 0px rgba(31, 34, 37, 0.12);
+  --scrollbar-thumb: #d1d5db;
+}
+
+/* Dark variables */
+:root[data-dark-mode="true"] {
+  --background: 220 26% 14%;
+  --foreground: 0 0% 98%;
+  --input-background: #1B1A22;
+  --card: 220 26% 14%;
+  --card-foreground: 0 0% 98%;
+  --tooltip: 231 30% 8%;
+  --tooltip-foreground: 0 0% 98%;
+  --popover: 220 26% 14%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 193 100% 47%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-background: #23242F;
+  --secondary-foreground: 234, 11%, 64%;
+  --muted: 214.55 27.73% 23.33%;
+  --muted-foreground: 240 5% 64.9%;
+  --placeholder: 234, 15%, 28%;
+  --accent: 215 28% 23%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 334, 100%, 49%;
+  --destructive-foreground: 0 0% 98%;
+  --success: 120 100% 50%;
+  --border: 214, 38%, 92%, 0.06;
+  --input: 214, 38%, 92%, 0.06;
+  --ring: 193 100% 47%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+  --icon: 214, 7%, 43%;
+  --gradient1: linear-gradient(233deg, #34BDAF 0%, #B682D5 100%);
+  --gradient2: linear-gradient(180deg, #4CC2CC 0%, #E17570 100%);
+  --gradient3: linear-gradient(180deg, #AF70E1 0%, #ED7196 100%);
+  --gradient4: linear-gradient(180deg, #A348D6 0%, #45A7DF 100%);
+  --gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
+  --gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
+  --gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
+  --tint-red: #C42A534D;
+  --badge-red: #C42A53;
+  --tint-green: #23CA2E4D;
+  --badge-green: #23CA2E;
+  --tint-purple: #502FD64D;
+  --badge-purple: #502FD6;
+  --tint-blue: #04A9D74D;
+  --badge-blue: #04A9D7;
+  --tint-yellow: #C59A1A4D;
+  --badge-yellow: #C59A1A;
+  --tint-pink: #BF1CC04D;
+  --badge-pink: #BF1CC0;
+  --tint-lime: #A4C8244D;
+  --badge-lime: #A4C824;
+  --tint-aqua: #19CCAC4D;
+  --badge-aqua: #19CCAC;
+  --tint-orange: #D779224D;
+  --badge-orange: #D77922;
+  --selection: #005174;
+  --scrollbar-thumb: #4b5563;
+  --button-disabled: 213, 9%, 76%;
+  --shadows-sm: 0px 2px 16px 0px rgba(0, 0, 0, 0.48);
+  --shadows-md: 0px 4px 32px 0px rgba(0, 0, 0, 0.48);
+}
+
+@mixin scrollbar-style {
+  ::-webkit-scrollbar, &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &:hover {
+
+    &::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: var(--scrollbar-thumb);
+    }
+  }
+}
+
+@mixin hidden-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.appflowy-scrollbar {
+  @include scrollbar-style;
+}
+
+.appflowy-hidden-scrollbar {
+  @include hidden-scrollbar;
+}
+
+
+#appflowy-chat, #ai-assistant {
+  #appflowy-editor > div {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  #appflowy-editor {
+    [data-block-type="bulleted_list"] .h-6 {
+      height: 1.25rem;
+    }
+  }
+}
+
+
+@keyframes dots-loading {
+  20% {
+    background-position: 0% 0%, 50% 50%, 100% 50%;
+  }
+  40% {
+    background-position: 0% 100%, 50% 0%, 100% 50%;
+  }
+  60% {
+    background-position: 0% 50%, 50% 100%, 100% 0%;
+  }
+  80% {
+    background-position: 0% 50%, 50% 50%, 100% 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/components/chat/types/ai-model.ts b/src/components/chat/types/ai-model.ts
new file mode 100644
index 00000000..dfb60f8f
--- /dev/null
+++ b/src/components/chat/types/ai-model.ts
@@ -0,0 +1,36 @@
+/**
+ * AI Model types matching the AppFlowy-Cloud-Premium API
+ * Based on libs/appflowy-entity/src/ai/dto.rs
+ */
+
+export interface ModelMetadata {
+  is_default: boolean;
+  desc: string;
+}
+
+export interface AvailableModel {
+  name: string;
+  provider?: string;
+  metadata?: ModelMetadata;
+}
+
+export interface ModelList {
+  models: AvailableModel[];
+}
+
+// Extended interface for UI display purposes
+export interface ModelDisplayInfo extends AvailableModel {
+  id: string;
+  displayName: string;
+  description: string;
+}
+
+// Helper function to convert API response to display format
+export function toModelDisplayInfo(model: AvailableModel): ModelDisplayInfo {
+  return {
+    ...model,
+    id: model.name.toLowerCase().replace(/\s+/g, '-'),
+    displayName: model.name,
+    description: model.metadata?.desc || '',
+  };
+}
\ No newline at end of file
diff --git a/src/components/chat/types/checkbox.ts b/src/components/chat/types/checkbox.ts
new file mode 100644
index 00000000..ce62c101
--- /dev/null
+++ b/src/components/chat/types/checkbox.ts
@@ -0,0 +1,5 @@
+export enum CheckStatus {
+  Checked = 'checked',
+  Unchecked = 'unchecked',
+  Indeterminate = 'indeterminate',
+}
\ No newline at end of file
diff --git a/src/components/chat/types/index.ts b/src/components/chat/types/index.ts
new file mode 100644
index 00000000..06a975f2
--- /dev/null
+++ b/src/components/chat/types/index.ts
@@ -0,0 +1,28 @@
+import { ChatRequest } from '../request/chat-request';
+import { User } from './request';
+import { PromptDatabaseConfiguration } from '../provider/prompt-modal-provider';
+import { RawPromptData, PromptDatabaseField } from './prompt';
+
+export * from './request';
+export * from './writer';
+
+export interface ChatProps {
+  workspaceId: string;
+  chatId: string;
+  requestInstance: ChatRequest;
+  currentUser?: User;
+  openingViewId?: string;
+  onOpenView?: (viewId: string) => void;
+  onCloseView?: () => void;
+  selectionMode?: boolean;
+  onOpenSelectionMode?: () => void;
+  onCloseSelectionMode?: () => void;
+  loadDatabasePrompts?: (config: PromptDatabaseConfiguration) => Promise<{
+    rawDatabasePrompts: RawPromptData[];
+    fields: PromptDatabaseField[];
+  }>;
+  testDatabasePromptConfig?: (databaseViewId: string) => Promise<{
+    config: PromptDatabaseConfiguration;
+    fields: PromptDatabaseField[];
+  }>;
+}
diff --git a/src/components/chat/types/prompt.ts b/src/components/chat/types/prompt.ts
new file mode 100644
index 00000000..df41c7ae
--- /dev/null
+++ b/src/components/chat/types/prompt.ts
@@ -0,0 +1,51 @@
+export enum AiPromptCategory {
+  Development = 'development',
+  Writing = 'writing',
+  HealthAndFitness = 'healthAndFitness',
+  Business = 'business',
+  Marketing = 'marketing',
+  Travel = 'travel',
+  Others = 'others',
+  ContentSeo = 'contentSeo',
+  EmailMarketing = 'emailMarketing',
+  PaidAds = 'paidAds',
+  PrCommunication = 'prCommunication',
+  Recruiting = 'recruiting',
+  Sales = 'sales',
+  SocialMedia = 'socialMedia',
+  Strategy = 'strategy',
+  CaseStudies = 'caseStudies',
+  SalesCopy = 'salesCopy',
+  Education = 'education',
+  Work = 'work',
+  PodcastProduction = 'podcastProduction',
+  CopyWriting = 'copyWriting',
+  CustomerSuccess = 'customerSuccess',
+}
+
+export interface AiPrompt {
+  id: string;
+  name: string;
+  category: AiPromptCategory[];
+  content: string;
+  example: string;
+  isFeatured: boolean;
+  isCustom: boolean;
+}
+
+export interface RawPromptData {
+  id: string;
+  name: string;
+  category?: string;
+  content: string;
+  example?: string;
+  isFeatured?: boolean;
+  isCustom?: boolean;
+}
+
+export interface PromptDatabaseField {
+  id: string;
+  name: string;
+  isPrimary: boolean;
+  isSelect: boolean;
+}
diff --git a/src/components/chat/types/request.ts b/src/components/chat/types/request.ts
new file mode 100644
index 00000000..f5e3dde7
--- /dev/null
+++ b/src/components/chat/types/request.ts
@@ -0,0 +1,167 @@
+export interface User {
+  uuid: string;
+  name: string;
+  email: string;
+  avatar: string;
+}
+
+export type GetChatMessagesPayload = Partial<{
+  limit: number;
+  offset: number;
+  after: number;
+  before: number;
+}>;
+
+export interface RepeatedChatMessage {
+  messages: ChatMessage[];
+  has_more: boolean;
+  total: number;
+}
+
+export enum AuthorType {
+  Unknown = 0,
+  // Human message sent by user
+  Human = 1,
+  System = 2,
+  AI = 3,
+  // Placeholder message for assistant's streaming response
+  Assistant = 1001,
+}
+
+export interface ChatMessage {
+  message_id: number;
+  author: {
+    author_type: AuthorType;
+    author_uuid: string;
+  };
+  content: string;
+  created_at?: string;
+  reply_message_id?: number;
+  meta_data?: ChatMessageMetadata[];
+}
+
+export interface Suggestions {
+  message_id: string;
+  items: SuggestionItem[];
+}
+
+export interface SuggestionItem {
+  content: string;
+}
+
+export enum OutputLayout {
+  Paragraph = 0,
+  BulletList = 1,
+  NumberedList = 2,
+  SimpleTable = 3,
+  Flex = 4,
+}
+
+export enum OutputContent {
+  TEXT = 0,
+  IMAGE = 1,
+  RichTextImage = 2,
+}
+
+export interface ResponseFormat {
+  output_layout: OutputLayout;
+  output_content: OutputContent;
+
+  // It's unclear what this is supposed to be
+  // eslint-disable-next-line
+  output_content_metadata?: any;
+}
+
+export enum MessageType {
+  System = 0,
+  User = 1,
+}
+
+export interface ChatMessageMetadata {
+  // The id for the metadata. It can be a file_id, view_id
+  id: string;
+  // The name for the metadata. For example, @xxx, @xx.txt
+  name: string;
+  source: string;
+}
+
+export interface SendQuestionPayload {
+  content: string;
+  message_type: MessageType;
+  prompt_id?: string;
+  model_name?: string;
+}
+
+export enum ChatInputMode {
+  Auto,
+  FormatResponse,
+}
+
+export interface ChatSettings {
+  // from view id
+  rag_ids: string[];
+}
+
+export enum SpacePermission {
+  Public = 0,
+  Private = 1,
+}
+
+export enum CoverType {
+  NormalColor = 'color',
+  GradientColor = 'gradient',
+  BuildInImage = 'built_in',
+  CustomImage = 'custom',
+  LocalImage = 'local',
+  UpsplashImage = 'unsplash',
+  None = 'none',
+}
+
+export interface ViewExtra {
+  is_space: boolean;
+  space_created_at?: number;
+  space_icon?: string;
+  space_icon_color?: string;
+  space_permission?: number;
+  is_pinned?: boolean;
+  cover?: {
+    type: CoverType;
+    value: string;
+  };
+}
+
+export interface ViewIcon {
+  ty: ViewIconType;
+  value: string;
+}
+
+export enum ViewIconType {
+  Emoji = 0,
+  Icon = 2,
+}
+
+export enum ViewLayout {
+  Document = 0,
+  Grid = 1,
+  Board = 2,
+  Calendar = 3,
+  AIChat = 4,
+}
+
+export interface View {
+  view_id: string;
+  name: string;
+  icon: ViewIcon | null;
+  layout: ViewLayout;
+  extra: ViewExtra | null;
+  children: View[];
+  is_private: boolean;
+}
+
+export enum StreamType {
+  META_DATA = '0',
+  TEXT = '1',
+  IMAGE = '2',
+  KEEP_ALIVE_KEY = '3',
+  COMMENT = '4',
+}
diff --git a/src/components/chat/types/writer.ts b/src/components/chat/types/writer.ts
new file mode 100644
index 00000000..b50b38fd
--- /dev/null
+++ b/src/components/chat/types/writer.ts
@@ -0,0 +1,20 @@
+export enum AIAssistantType {
+  ImproveWriting = 1,
+  FixSpelling = 2,
+  MakeShorter = 3,
+  MakeLonger = 4,
+  ContinueWriting = 5,
+  Explain = 6,
+  AskAIAnything = 7
+}
+
+export enum CompletionRole {
+  AI = 'ai',
+  Human = 'human'
+}
+
+export interface CompletionResult {
+  role: CompletionRole;
+  content: string;
+}
+
diff --git a/src/components/chat/vite-env.d.ts b/src/components/chat/vite-env.d.ts
new file mode 100644
index 00000000..b1f45c78
--- /dev/null
+++ b/src/components/chat/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
diff --git a/src/components/chat/writer/ai-writer-menu.tsx b/src/components/chat/writer/ai-writer-menu.tsx
new file mode 100644
index 00000000..8ad1c9c1
--- /dev/null
+++ b/src/components/chat/writer/ai-writer-menu.tsx
@@ -0,0 +1,45 @@
+import { AiWriterMenuContent } from '../components/ai-writer/ai-writer-menu-content';
+import { Popover, PopoverContent, PopoverTrigger } from '../components/ui/popover';
+import { AIAssistantType } from '../types';
+
+interface AIWriterMenuProps {
+  children?: React.ReactNode;
+  onItemClicked?: (type: AIAssistantType) => void;
+  isFilterOut?: (type: AIAssistantType) => boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  input: string;
+}
+
+export function AIWriterMenu({
+  children,
+  open,
+  onOpenChange,
+  ...props
+}: AIWriterMenuProps) {
+  return <Popover
+    open={open}
+    modal
+    onOpenChange={onOpenChange}
+  >
+    <PopoverTrigger
+      asChild={true}
+    >
+      {children}
+    </PopoverTrigger>
+    <PopoverContent
+      onOpenAutoFocus={e => e.preventDefault()}
+      onCloseAutoFocus={e => e.preventDefault()}
+      className={'min-w-[240px] !p-2'}
+    >
+      <AiWriterMenuContent
+        {...props}
+        onClicked={(type) => {
+          props.onItemClicked?.(type);
+          onOpenChange?.(false);
+        }}
+      />
+
+    </PopoverContent>
+  </Popover>;
+}
\ No newline at end of file
diff --git a/src/components/chat/writer/context-placeholder.tsx b/src/components/chat/writer/context-placeholder.tsx
new file mode 100644
index 00000000..623fcc59
--- /dev/null
+++ b/src/components/chat/writer/context-placeholder.tsx
@@ -0,0 +1,37 @@
+import { AIAssistant } from '../components/ai-writer';
+import { RenderEditor } from '../components/ai-writer/render-editor';
+import { Toaster } from '../components/ui/toaster';
+import useEnsureBottomVisible from '../components/ai-writer/use-ensure-bottom-visible';
+import { AIAssistantType } from '../types';
+import { useWriterContext } from './context';
+import { EditorProvider } from '@appflowyinc/editor';
+
+export function ContextPlaceholder() {
+  const {
+    assistantType,
+    placeholderContent,
+    setEditorData,
+  } = useWriterContext();
+
+  useEnsureBottomVisible();
+
+  if(!assistantType) {
+    return null;
+  }
+
+  return <div
+    id={'appflowy-ai-writer'}
+    className={'w-full select-none scroll-mb-[48px] relative h-full flex flex-col overflow-hidden'}
+  >
+    <AIAssistant>
+      {assistantType === AIAssistantType.Explain ? <div /> : <EditorProvider>
+        <RenderEditor
+          content={placeholderContent || ''}
+          onDataChange={setEditorData}
+        />
+      </EditorProvider>}
+    </AIAssistant>
+    
+    <Toaster />
+  </div>;
+}
\ No newline at end of file
diff --git a/src/components/chat/writer/context.ts b/src/components/chat/writer/context.ts
new file mode 100644
index 00000000..c589a17c
--- /dev/null
+++ b/src/components/chat/writer/context.ts
@@ -0,0 +1,64 @@
+import { AIAssistantType, ChatInputMode, ResponseFormat, View } from '../types';
+import { EditorData } from '@appflowyinc/editor';
+import { createContext, useContext } from 'react';
+
+export enum ApplyingState {
+  idle = 'idle',
+  analyzing = 'analyzing',
+  applying = 'applying',
+  completed = 'completed',
+  failed = 'failed',
+}
+
+export interface WriterContextTypes {
+  // generate a new answer markdown string
+  placeholderContent?: string;
+  // comment for the answer
+  comment?: string;
+  // generating a new answer
+  isFetching: boolean;
+  isApplying: boolean;
+  assistantType?: AIAssistantType;
+  improveWriting: (content: string) => Promise<() => void>;
+  askAIAnything: (content: string) => void;
+  continueWriting: (content: string) => Promise<() => void>;
+  explain: (content: string) => Promise<() => void>;
+  fixSpelling: (content: string) => Promise<() => void>;
+  makeLonger: (content: string) => Promise<() => void>;
+  makeShorter: (content: string) => Promise<() => void>;
+  askAIAnythingWithRequest: (content: string) => Promise<() => void>;
+  setOpenDiscard: (open: boolean) => void;
+  applyingState: ApplyingState;
+  viewId: string;
+  setRagIds: (ragIds: string[]) => void;
+  fetchViews: () => Promise<View>;
+  exit: () => void;
+  setEditorData: (data: EditorData) => void;
+  keep: () => void;
+  accept: () => void;
+  rewrite: () => void;
+  stop: () => void;
+  responseMode: ChatInputMode;
+  setResponseMode: (mode: ChatInputMode) => void;
+  responseFormat: ResponseFormat;
+  setResponseFormat: (format: ResponseFormat) => void;
+  hasAIAnswer: () => boolean;
+  isGlobalDocument?: boolean;
+  error: {
+    code: number;
+    message: string;
+  } | null;
+  scrollContainer?: HTMLElement;
+}
+
+export const WriterContext = createContext<WriterContextTypes | undefined>(undefined);
+
+export function useWriterContext() {
+  const context = useContext(WriterContext);
+
+  if(!context) {
+    throw new Error('useWriterContext must be used within a WriterProvider');
+  }
+
+  return context;
+}
\ No newline at end of file
diff --git a/src/components/chat/writer/index.ts b/src/components/chat/writer/index.ts
new file mode 100644
index 00000000..7c9b741d
--- /dev/null
+++ b/src/components/chat/writer/index.ts
@@ -0,0 +1,5 @@
+export * from './use-ai-writer';
+export * from '../provider/ai-assistant-provider';
+export * from './ai-writer-menu';
+export * from './context-placeholder';
+
diff --git a/src/components/chat/writer/use-ai-writer.tsx b/src/components/chat/writer/use-ai-writer.tsx
new file mode 100644
index 00000000..b1c3d1a8
--- /dev/null
+++ b/src/components/chat/writer/use-ai-writer.tsx
@@ -0,0 +1,25 @@
+import { useWriterContext } from './context';
+
+export function useAIWriter() {
+  const {
+    continueWriting,
+    askAIAnything,
+    improveWriting,
+    explain,
+    makeLonger,
+    makeShorter,
+    fixSpelling,
+    assistantType,
+  } = useWriterContext();
+
+  return {
+    continueWriting,
+    askAIAnything,
+    improveWriting,
+    explain,
+    makeLonger,
+    makeShorter,
+    fixSpelling,
+    assistantType,
+  };
+}
\ No newline at end of file
diff --git a/src/components/editor/EditorOverlay.tsx b/src/components/editor/EditorOverlay.tsx
index 3c545667..79dc19f7 100644
--- a/src/components/editor/EditorOverlay.tsx
+++ b/src/components/editor/EditorOverlay.tsx
@@ -8,9 +8,9 @@ import { insertDataAfterBlock } from '@/components/ai-chat/utils';
 import { useEditorContext } from '@/components/editor/EditorContext';
 import { getScrollParent } from '@/components/global-comment/utils';
 import { notify } from '@/components/_shared/notify';
-import '@appflowyinc/ai-chat/style';
+import '@/components/chat/styles/index.scss';
 
-import { AIAssistantProvider, ContextPlaceholder, PromptModalProvider, WriterRequest } from '@appflowyinc/ai-chat';
+import { AIAssistantProvider, ContextPlaceholder, PromptModalProvider, WriterRequest } from '@/components/chat';
 import { EditorData } from '@appflowyinc/editor';
 import { Portal } from '@mui/material';
 import { useCallback, useEffect, useMemo, useState } from 'react';
diff --git a/src/components/editor/components/panels/slash-panel/SlashPanel.tsx b/src/components/editor/components/panels/slash-panel/SlashPanel.tsx
index 5978610e..af501054 100644
--- a/src/components/editor/components/panels/slash-panel/SlashPanel.tsx
+++ b/src/components/editor/components/panels/slash-panel/SlashPanel.tsx
@@ -1,4 +1,4 @@
-import { useAIWriter } from '@appflowyinc/ai-chat';
+import { useAIWriter } from '@/components/chat';
 import { Button } from '@mui/material';
 import { PopoverOrigin } from '@mui/material/Popover/Popover';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
diff --git a/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.hooks.ts b/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.hooks.ts
index 4cc82ca2..91ba3926 100644
--- a/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.hooks.ts
+++ b/src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.hooks.ts
@@ -3,7 +3,7 @@ import { EditorMarkFormat } from '@/application/slate-yjs/types';
 import { getSelectionPosition } from '@/components/editor/components/toolbar/selection-toolbar/utils';
 import { Decorate, useEditorContext } from '@/components/editor/EditorContext';
 import { createHotkey, HOT_KEY_NAME } from '@/utils/hotkeys';
-import { useAIWriter } from '@appflowyinc/ai-chat';
+import { useAIWriter } from '@/components/chat';
 import { debounce } from 'lodash-es';
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Range } from 'slate';
diff --git a/src/components/editor/components/toolbar/selection-toolbar/actions/AIAssistant.tsx b/src/components/editor/components/toolbar/selection-toolbar/actions/AIAssistant.tsx
index 81fd8785..39354eac 100644
--- a/src/components/editor/components/toolbar/selection-toolbar/actions/AIAssistant.tsx
+++ b/src/components/editor/components/toolbar/selection-toolbar/actions/AIAssistant.tsx
@@ -6,7 +6,7 @@ import { ReactComponent as TriangleDownIcon } from '@/assets/icons/triangle_down
 import ActionButton from '@/components/editor/components/toolbar/selection-toolbar/actions/ActionButton';
 import { useSelectionToolbarContext } from '@/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.hooks';
 import { useEditorContext } from '@/components/editor/EditorContext';
-import { AIAssistantType, AIWriterMenu, useAIWriter } from '@appflowyinc/ai-chat';
+import { AIAssistantType, AIWriterMenu, useAIWriter } from '@/components/chat';
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactEditor, useSlate } from 'slate-react';