diff --git a/app/api/chat-messages/route.ts b/app/api/chat-messages/route.ts
new file mode 100644
index 0000000..453035e
--- /dev/null
+++ b/app/api/chat-messages/route.ts
@@ -0,0 +1,18 @@
+import { type NextRequest } from 'next/server'
+import { cookies } from 'next/headers'
+import { client } from '@/service'
+
+export async function POST(request: NextRequest) {
+  const { inputs, query, conversation_id } = await request.json()
+  const cookieStore = cookies()
+  const user = cookieStore.get('user')?.value || 'anonymous'
+
+  const res = await client.createChatMessage(
+    inputs,
+    query,
+    user,
+    true,
+    conversation_id
+  )
+  return new Response(res.data)
+}
diff --git a/app/chat/main.tsx b/app/chat/main.tsx
index e5508b6..8facec3 100644
--- a/app/chat/main.tsx
+++ b/app/chat/main.tsx
@@ -1,11 +1,9 @@
 'use client'
-import { Suspense } from 'react'
 import { FC, useReducer } from 'react'
 import { AppProps, ConversationsProps, LocaleProps } from '@/interface'
 import Button from '@/components/button'
 import PencilSquare from '@heroicons/react/24/solid/PencilSquareIcon'
 import MenuItem from '@/components/menu-item'
-import Loading from '@/components/loading'
 import Welcome from '@/components/welcome'
 import Form from '@/components/form'
 import XPowerBy, { XPowerByPrivacy } from '@/components/x-power-by'
@@ -65,42 +63,40 @@ const Main: FC<AppProps & LocaleProps & ConversationsProps> = ({
   })
   return (
     <>
-      <Suspense fallback={<Loading />}>
-        <div className='flex flex-col shrink-0 w-60 h-screen bg-white hidden sm:block'>
-          <div className='flex items-center w-full h-16 p-4'>
-            <span className='h-8 w-8 mr-3 inline-flex items-center justify-center bg-blue-100 rounded-lg shrink-0'>
-              🤖️
-            </span>
-            <span className='text-gray-800 text-md font-semibold truncate'>
-              {I18N(locale)('app.name')}
+      <div className='flex flex-col shrink-0 w-60 h-screen bg-white hidden sm:block'>
+        <div className='flex items-center w-full h-16 p-4'>
+          <span className='h-8 w-8 mr-3 inline-flex items-center justify-center bg-blue-100 rounded-lg shrink-0'>
+            🤖️
+          </span>
+          <span className='text-gray-800 text-md font-semibold truncate'>
+            {I18N(locale)('app.name')}
+          </span>
+        </div>
+        <div className='flex  mx-4'>
+          <Button
+            text=''
+            type='transparent'
+            onClick={() => {}}
+            className='w-full'
+          >
+            <PencilSquare className='h-4 w-4 mr-2 text-blue-600' />
+            <span className='text-blue-600'>
+              {I18N(locale)('app.new_chat')}
             </span>
+          </Button>
+        </div>
+        <div className='mt-6 mx-4'>
+          <div className='ml-4 text-gray-500 text-xs mb-1'>
+            {I18N(locale)('app.chats')}
           </div>
-          <div className='flex  mx-4'>
-            <Button
-              text=''
-              type='transparent'
-              onClick={() => {}}
-              className='w-full'
-            >
-              <PencilSquare className='h-4 w-4 mr-2 text-blue-600' />
-              <span className='text-blue-600'>
-                {I18N(locale)('app.new_chat')}
-              </span>
-            </Button>
-          </div>
-          <div className='mt-6 mx-4'>
-            <div className='ml-4 text-gray-500 text-xs mb-1'>
-              {I18N(locale)('app.chats')}
-            </div>
-            <div className='flex flex-col'>
-              <MenuItem text='Menu Item' onClick={() => {}} />
-              <MenuItem text='Menu Item' onClick={() => {}} />
-              <MenuItem text='Menu Item' onClick={() => {}} />
-              <MenuItem text='Menu Item' onClick={() => {}} />
-            </div>
+          <div className='flex flex-col'>
+            <MenuItem text='Menu Item' onClick={() => {}} />
+            <MenuItem text='Menu Item' onClick={() => {}} />
+            <MenuItem text='Menu Item' onClick={() => {}} />
+            <MenuItem text='Menu Item' onClick={() => {}} />
           </div>
         </div>
-      </Suspense>
+      </div>
       <div className='flex flex-col w-full pt-32 px-5 sm:px-8 md:px-72 '>
         <section className='mb-6'>
           <Welcome
diff --git a/app/chat/page.tsx b/app/chat/page.tsx
index 902d1a2..d4aee4c 100644
--- a/app/chat/page.tsx
+++ b/app/chat/page.tsx
@@ -8,7 +8,6 @@ async function getAppInfo() {
     // This will activate the closest `error.js` Error Boundary
     throw new Error('Failed to fetch data')
   }
-
   return appInfo
 }
 
diff --git a/global.d.ts b/global.d.ts
index b86a7f8..d3952a7 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1 +1,2 @@
 declare module 'dify-client'
+declare module 'uuid'
diff --git a/middleware.ts b/middleware.ts
index 3c96863..7592935 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,15 +1,16 @@
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
+import { v4 } from 'uuid'
 
 export function middleware(request: NextRequest) {
-  // check if the locale cookie exists
-  if (request.cookies.has('locale')) {
-    // if it does, return the next response
-    return NextResponse.next()
-  } else {
-    // if it doesn't, set the locale cookie to 'en' and return the next response
-    const response = NextResponse.next()
+  const response = NextResponse.next()
+  // Check and set the locale cookie if it doesn't exist
+  if (!request.cookies.has('locale')) {
     response.cookies.set('locale', 'en')
-    return response
   }
+  // Check and set the user cookie if it doesn't exist
+  if (!request.cookies.has('user')) {
+    response.cookies.set('user', v4())
+  }
+  return response
 }
diff --git a/package.json b/package.json
index dbc6ce1..46c713d 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "react-dom": "18.2.0",
     "sass": "^1.63.3",
     "tailwindcss": "3.3.2",
-    "typescript": "5.1.3"
+    "typescript": "5.1.3",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "eslint": "8.42.0",
diff --git a/yarn.lock b/yarn.lock
index f16f013..4b203ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2870,6 +2870,11 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"