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/sessions.tsx

@@ -1,37 +1,60 @@
 import { MoreButton } from '@/components/more-button';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { useFetchConversationList } from '@/hooks/use-chat-request';
+import { useGetChatSearchParams } from '@/hooks/use-chat-request';
+import { cn } from '@/lib/utils';
 import { Plus } from 'lucide-react';
+import { useCallback } from 'react';
+import { useHandleClickConversationCard } from '../hooks/use-click-card';
+import { useSelectDerivedConversationList } from '../hooks/use-select-conversation-list';
+import { ChatSettingSheet } from './app-settings/chat-settings-sheet';
 
-function SessionCard() {
-  return (
-    <Card>
-      <CardContent className="px-3 py-2 flex justify-between items-center group">
-        xxx
-        <MoreButton></MoreButton>
-      </CardContent>
-    </Card>
+type SessionProps = Pick<
+  ReturnType<typeof useHandleClickConversationCard>,
+  'handleConversationCardClick'
+>;
+export function Sessions({ handleConversationCardClick }: SessionProps) {
+  const { list: conversationList, addTemporaryConversation } =
+    useSelectDerivedConversationList();
+
+  const handleCardClick = useCallback(
+    (conversationId: string, isNew: boolean) => () => {
+      handleConversationCardClick(conversationId, isNew);
+    },
+    [handleConversationCardClick],
   );
-}
 
-export function Sessions() {
-  const sessionList = new Array(10).fill(1);
-  const {} = useFetchConversationList();
+  const { conversationId } = useGetChatSearchParams();
 
   return (
-    <section className="p-6 w-[400px] max-w-[20%]">
+    <section className="p-6 w-[400px] max-w-[20%] flex flex-col">
       <div className="flex justify-between items-center mb-4">
         <span className="text-xl font-bold">Conversations</span>
-        <Button variant={'ghost'}>
+        <Button variant={'ghost'} onClick={addTemporaryConversation}>
           <Plus></Plus>
         </Button>
       </div>
-      <div className="space-y-4">
-        {sessionList.map((x) => (
-          <SessionCard key={x}></SessionCard>
+      <div className="space-y-4 flex-1 overflow-auto">
+        {conversationList.map((x) => (
+          <Card
+            key={x.id}
+            onClick={handleCardClick(x.id, x.is_new)}
+            className={cn('cursor-pointer bg-transparent', {
+              'bg-background-card': conversationId === x.id,
+            })}
+          >
+            <CardContent className="px-3 py-2 flex justify-between items-center group">
+              {x.name}
+              <MoreButton></MoreButton>
+            </CardContent>
+          </Card>
         ))}
       </div>
+      <div className="py-2">
+        <ChatSettingSheet>
+          <Button className="w-full">Chat Settings</Button>
+        </ChatSettingSheet>
+      </div>
     </section>
   );
 }