Feat: Search conversation by name #3221 (#9283)

### What problem does this PR solve?

Feat: Search conversation by name #3221
### Type of change


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

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

@@ -1,15 +1,15 @@
+import { MoreButton } from '@/components/more-button';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { EllipsisVertical, Plus } from 'lucide-react';
+import { useFetchConversationList } from '@/hooks/use-chat-request';
+import { Plus } from 'lucide-react';
 
 function SessionCard() {
   return (
-    <Card className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard">
-      <CardContent className="px-3 py-2 flex justify-between items-center">
+    <Card>
+      <CardContent className="px-3 py-2 flex justify-between items-center group">
         xxx
-        <Button variant={'icon'} size={'icon'}>
-          <EllipsisVertical />
-        </Button>
+        <MoreButton></MoreButton>
       </CardContent>
     </Card>
   );
@@ -17,20 +17,19 @@ function SessionCard() {
 
 export function Sessions() {
   const sessionList = new Array(10).fill(1);
+  const {} = useFetchConversationList();
 
   return (
     <section className="p-6 w-[400px] max-w-[20%]">
       <div className="flex justify-between items-center mb-4">
-        <span className="text-colors-text-neutral-strong text-2xl font-bold">
-          Sessions
-        </span>
-        <Button variant={'icon'} size={'icon'}>
+        <span className="text-xl font-bold">Conversations</span>
+        <Button variant={'ghost'}>
           <Plus></Plus>
         </Button>
       </div>
       <div className="space-y-4">
         {sessionList.map((x) => (
-          <SessionCard key={x.id}></SessionCard>
+          <SessionCard key={x}></SessionCard>
         ))}
       </div>
     </section>