Feat: Add ChatInput component #3221 (#4915)

### What problem does this PR solve?

Feat: Add ChatInput component #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/chat/app-settings/index.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -35,7 +36,7 @@ export function AppSettings() {
       <div className="text-2xl font-bold mb-4 text-colors-text-neutral-strong px-6">
         App settings
       </div>
-      <div className="overflow-auto max-h-[88vh] px-6 ">
+      <div className="overflow-auto max-h-[81vh] px-6 ">
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
             <ChatBasicSetting></ChatBasicSetting>
@@ -44,6 +45,14 @@ export function AppSettings() {
           </form>
         </FormProvider>
       </div>
+      <div className="p-6 text-center">
+        <p className="text-colors-text-neutral-weak mb-1">
+          There are unsaved changes
+        </p>
+        <Button variant={'tertiary'} className="w-full">
+          Update
+        </Button>
+      </div>
     </section>
   );
 }

web/src/pages/next-chats/chat/chat-box.tsx

@@ -1,3 +1,9 @@
+import { ChatInput } from '@/components/chat-input';
+
 export function ChatBox() {
-  return <section className="border-x flex-1">ChatBox</section>;
+  return (
+    <section className="border-x flex-1">
+      <ChatInput></ChatInput>
+    </section>
+  );
 }