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>