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

@@ -1,27 +1,40 @@
 import { PageHeader } from '@/components/page-header';
-import { Button } from '@/components/ui/button';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchDialog } from '@/hooks/use-chat-request';
-import { EllipsisVertical } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { AppSettings } from './app-settings';
 import { ChatBox } from './chat-box';
 import { Sessions } from './sessions';
 
 export default function Chat() {
   const { navigateToChatList } = useNavigatePage();
-  useFetchDialog();
+  const { data } = useFetchDialog();
+  const { t } = useTranslation();
 
   return (
     <section className="h-full flex flex-col">
       <PageHeader>
-        <div className="flex items-center gap-2">
-          <Button variant={'icon'} size={'icon'}>
-            <EllipsisVertical />
-          </Button>
-          <Button variant={'tertiary'} size={'sm'}>
-            Publish
-          </Button>
-        </div>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink onClick={navigateToChatList}>
+                {t('chat.chat')}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{data.name}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
       </PageHeader>
       <div className="flex flex-1">
         <Sessions></Sessions>

web/src/pages/next-chats/chat/interface.ts

@@ -0,0 +1,33 @@
+import { IConversation, IReference, Message } from '@/interfaces/database/chat';
+import { FormInstance } from 'antd';
+
+export interface ISegmentedContentProps {
+  show: boolean;
+  form: FormInstance;
+  setHasError: (hasError: boolean) => void;
+}
+
+export interface IVariable {
+  temperature: number;
+  top_p: number;
+  frequency_penalty: number;
+  presence_penalty: number;
+  max_tokens: number;
+}
+
+export interface VariableTableDataType {
+  key: string;
+  variable: string;
+  optional: boolean;
+}
+
+export type IPromptConfigParameters = Omit<VariableTableDataType, 'variable'>;
+
+export interface IMessage extends Message {
+  id: string;
+  reference?: IReference; // the latest news has reference
+}
+
+export interface IClientConversation extends IConversation {
+  message: IMessage[];
+}

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>

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

@@ -11,7 +11,8 @@ import { ChatCard } from './chat-card';
 import { useRenameChat } from './hooks/use-rename-chat';
 
 export default function ChatList() {
-  const { data, setPagination, pagination } = useFetchDialogList();
+  const { data, setPagination, pagination, handleInputChange, searchString } =
+    useFetchDialogList();
   const { t } = useTranslation();
   const {
     initialChatName,
@@ -36,7 +37,11 @@ export default function ChatList() {
   return (
     <section className="flex flex-col w-full flex-1">
       <div className="px-8 pt-8">
-        <ListFilterBar title="Chat apps">
+        <ListFilterBar
+          title="Chat apps"
+          onSearchChange={handleInputChange}
+          searchString={searchString}
+        >
           <Button onClick={handleShowCreateModal}>
             <Plus className="size-2.5" />
             {t('chat.createChat')}