Feat: Render chat page #3221 (#9298)

### What problem does this PR solve?

Feat: Render chat page #3221

### Type of change


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

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

@@ -10,7 +10,7 @@ import {
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchDialog } from '@/hooks/use-chat-request';
 import { useTranslation } from 'react-i18next';
-import { AppSettings } from './app-settings';
+import { useHandleClickConversationCard } from '../hooks/use-click-card';
 import { ChatBox } from './chat-box';
 import { Sessions } from './sessions';
 
@@ -18,6 +18,8 @@ export default function Chat() {
   const { navigateToChatList } = useNavigatePage();
   const { data } = useFetchDialog();
   const { t } = useTranslation();
+  const { handleConversationCardClick, controller } =
+    useHandleClickConversationCard();
 
   return (
     <section className="h-full flex flex-col">
@@ -36,10 +38,11 @@ export default function Chat() {
           </BreadcrumbList>
         </Breadcrumb>
       </PageHeader>
-      <div className="flex flex-1">
-        <Sessions></Sessions>
-        <ChatBox></ChatBox>
-        <AppSettings></AppSettings>
+      <div className="flex flex-1 min-h-0">
+        <Sessions
+          handleConversationCardClick={handleConversationCardClick}
+        ></Sessions>
+        <ChatBox controller={controller}></ChatBox>
       </div>
     </section>
   );