@lobehub/chat 0.74.0 → 0.76.0

package/src/locales/resources/en_US.ts

@@ -1,6 +1,7 @@
 import common from '../../../locales/en_US/common.json';
 import empty from '../../../locales/en_US/empty.json';
 import error from '../../../locales/en_US/error.json';
+import market from '../../../locales/en_US/market.json';
 import plugin from '../../../locales/en_US/plugin.json';
 import setting from '../../../locales/en_US/setting.json';
 import welcome from '../../../locales/en_US/welcome.json';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/locales/resources/ru_RU.ts

@@ -1,6 +1,7 @@
 import common from '../../../locales/ru_RU/common.json';
 import empty from '../../../locales/ru_RU/empty.json';
 import error from '../../../locales/ru_RU/error.json';
+import market from '../../../locales/ru_RU/market.json';
 import plugin from '../../../locales/ru_RU/plugin.json';
 import setting from '../../../locales/ru_RU/setting.json';
 import welcome from '../../../locales/ru_RU/welcome.json';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/locales/resources/zh_CN.ts

@@ -1,6 +1,7 @@
 import common from '../default/common';
 import empty from '../default/empty';
 import error from '../default/error';
+import market from '../default/market';
 import plugin from '../default/plugin';
 import setting from '../default/setting';
 import welcome from '../default/welcome';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/pages/api/openai/chat.api.ts

@@ -1,7 +1,8 @@
 import OpenAI from 'openai';
 
+import { getClientConfig } from '@/config/client';
 import { getOpenAIAuthFromRequest } from '@/const/fetch';
-import { ChatErrorType, ErrorType } from '@/types/fetch';
+import { ErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
 import { checkAuth } from '../auth';
@@ -24,17 +25,12 @@ export default async function handler(req: Request) {
   }
 
   let openai: OpenAI;
-  if (useAzure) {
-    if (!apiVersion) return createErrorResponse(ChatErrorType.BadRequest);
 
-    // `https://test-001.openai.azure.com/openai/deployments/gpt-35-turbo`,
-    const url = `${endpoint}/openai/deployments/${payload.model.replace('.', '')}`;
+  const { USE_AZURE_OPENAI } = getClientConfig();
+  const useAzureOpenAI = useAzure || USE_AZURE_OPENAI;
 
-    openai = createAzureOpenai({
-      apiVersion,
-      endpoint: url,
-      userApiKey: apiKey,
-    });
+  if (useAzureOpenAI) {
+    openai = createAzureOpenai({ apiVersion, endpoint, model: payload.model, userApiKey: apiKey });
   } else {
     openai = createOpenai(apiKey, endpoint);
   }

package/src/pages/api/openai/createAzureOpenai.ts

@@ -1,25 +1,29 @@
 import OpenAI, { ClientOptions } from 'openai';
+import urlJoin from 'url-join';
 
 import { getServerConfig } from '@/config/server';
 
 // 创建 Azure OpenAI 实例
 export const createAzureOpenai = (params: {
-  apiVersion: string;
-  endpoint: string;
+  apiVersion?: string | null;
+  endpoint?: string | null;
+  model: string;
   userApiKey?: string | null;
 }) => {
-  const { AZURE_API_KEY } = getServerConfig();
+  const { OPENAI_PROXY_URL = '', AZURE_API_VERSION, AZURE_API_KEY } = getServerConfig();
 
-  const baseURL = params.endpoint;
-  const apiKey = !params.userApiKey ? AZURE_API_KEY : params.userApiKey;
+  const endpoint = !params.endpoint ? OPENAI_PROXY_URL : params.endpoint;
+  const baseURL = urlJoin(endpoint, `/openai/deployments/${params.model.replace('.', '')}`); // refs: https://test-001.openai.azure.com/openai/deployments/gpt-35-turbo
+
+  const defaultApiVersion = AZURE_API_VERSION || '2023-08-01-preview';
+  const apiVersion = !params.apiVersion ? defaultApiVersion : params.apiVersion;
+  const apiKey = !params.userApiKey ? AZURE_API_KEY ?? '' : params.userApiKey;
 
   const config: ClientOptions = {
-    apiKey: apiKey,
+    apiKey,
     baseURL,
     defaultHeaders: { 'api-key': apiKey },
-    defaultQuery: {
-      'api-version': params.apiVersion,
-    },
+    defaultQuery: { 'api-version': apiVersion },
   };
 
   return new OpenAI(config);

package/src/pages/chat/features/Conversation/Input/{Action.tsx → ActionBar/ActionLeft.tsx}

@@ -9,7 +9,7 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { LanguageModel } from '@/types/llm';
 
-const InputActions = memo(() => {
+const ActionLeft = memo(() => {
   const { t } = useTranslation('setting');
 
   const [model, temperature, historyCount, unlimited, updateAgentConfig] = useSessionStore((s) => {
@@ -107,4 +107,4 @@ const InputActions = memo(() => {
   );
 });
 
-export default InputActions;
+export default ActionLeft;

package/src/pages/chat/features/Conversation/Input/ActionBar/ActionRight.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popconfirm } from 'antd';
+import { Eraser } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+import SaveTopic from '../Footer/SaveTopic';
+
+const ActionsRight = memo(() => {
+  const { t } = useTranslation('setting');
+  const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig]);
+
+  return (
+    <>
+      <SaveTopic />
+      <Popconfirm
+        cancelText={t('cancel', { ns: 'common' })}
+        okButtonProps={{ danger: true }}
+        okText={t('ok', { ns: 'common' })}
+        onConfirm={() => clearMessage()}
+        placement={'topRight'}
+        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      >
+        <ActionIcon
+          icon={Eraser}
+          placement={'bottom'}
+          title={t('clearCurrentMessages', { ns: 'common' })}
+        />
+      </Popconfirm>
+    </>
+  );
+});
+
+export default ActionsRight;

package/src/pages/chat/features/Conversation/Input/Desktop.tsx

@@ -0,0 +1,40 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+
+import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+
+interface ChatInputDesktopLayoutProps {
+  children: ReactNode;
+  expand?: boolean;
+}
+
+const ChatInputDesktopLayout = memo<ChatInputDesktopLayoutProps>(({ children, expand }) => {
+  const [inputHeight, updatePreference] = useGlobalStore((s) => [
+    s.preference.inputHeight,
+    s.updatePreference,
+  ]);
+
+  return (
+    <DraggablePanel
+      expandable={false}
+      fullscreen={expand}
+      headerHeight={HEADER_HEIGHT}
+      minHeight={CHAT_TEXTAREA_HEIGHT}
+      onSizeChange={(_, size) => {
+        if (!size) return;
+
+        updatePreference({
+          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+        });
+      }}
+      placement="bottom"
+      size={{ height: inputHeight, width: '100%' }}
+      style={{ zIndex: 10 }}
+    >
+      {children}
+    </DraggablePanel>
+  );
+});
+
+export default ChatInputDesktopLayout;

package/src/pages/chat/features/Conversation/Input/Footer/SaveTopic.tsx

@@ -0,0 +1,27 @@
+import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
+import { useResponsive } from 'antd-style';
+import { LucideGalleryVerticalEnd } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const SaveTopic = memo(() => {
+  const { t } = useTranslation('common');
+  const [hasTopic, saveToTopic] = useSessionStore((s) => [!!s.activeTopicId, s.saveToTopic]);
+  const { mobile } = useResponsive();
+
+  if (hasTopic) return undefined;
+
+  const Render = mobile ? ActionIcon : Button;
+  const icon: any = mobile ? LucideGalleryVerticalEnd : <Icon icon={LucideGalleryVerticalEnd} />;
+
+  return (
+    <Tooltip title={t('topic.saveCurrentMessages')}>
+      <Render icon={icon} onClick={saveToTopic} />
+    </Tooltip>
+  );
+});
+
+export default SaveTopic;

package/src/pages/chat/features/Conversation/Input/Footer/index.tsx

@@ -0,0 +1,35 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { ArrowBigUp, CornerDownLeft } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import SaveTopic from './SaveTopic';
+
+const Footer = memo(() => {
+  const theme = useTheme();
+  const { t } = useTranslation('common');
+
+  return (
+    <>
+      <Flexbox
+        gap={4}
+        horizontal
+        style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
+      >
+        <Icon icon={CornerDownLeft} />
+        <span>{t('send')}</span>
+        <span>/</span>
+        <Flexbox horizontal>
+          <Icon icon={ArrowBigUp} />
+          <Icon icon={CornerDownLeft} />
+        </Flexbox>
+        <span>{t('warp')}</span>
+      </Flexbox>
+      <SaveTopic />
+    </>
+  );
+});
+
+export default Footer;

package/src/pages/chat/features/Conversation/Input/Mobile.tsx

@@ -0,0 +1,12 @@
+import { ReactNode, memo } from 'react';
+
+interface ChatInputMobileLayoutProps {
+  children: ReactNode;
+  expand?: boolean;
+}
+
+const ChatInputMobileLayout = memo<ChatInputMobileLayoutProps>(({ children }) => {
+  return <div>{children}</div>;
+});
+
+export default ChatInputMobileLayout;

package/src/pages/chat/features/Conversation/Input/index.tsx

@@ -1,64 +1,46 @@
-import { ChatInputArea, DraggablePanel } from '@lobehub/ui';
+import { ChatInputArea } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
+import { CHAT_TEXTAREA_HEIGHT } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
-import InputActions from './Action';
-import ActionsRight from './ActionRight';
+import ActionLeft from './ActionBar/ActionLeft';
+import ActionsRight from './ActionBar/ActionRight';
+import Token from './ActionBar/Token';
+import Desktop from './Desktop';
 import Footer from './Footer';
-import Token from './Token';
+import Mobile from './Mobile';
 
 const ChatInput = () => {
   const { t } = useTranslation('common');
   const [expand, setExpand] = useState<boolean>(false);
   const [message, setMessage] = useState('');
+  const { mobile } = useResponsive();
 
-  const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    s.preference.inputHeight,
-    s.updatePreference,
+  const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
+    !!s.chatLoadingId,
+    s.sendMessage,
+    s.stopGenerateMessage,
   ]);
-  const [isLoading, hasTopic, sendMessage, saveToTopic, stopGenerateMessage] = useSessionStore(
-    (s) => [
-      !!s.chatLoadingId,
-      !!s.activeTopicId,
-      s.sendMessage,
-      s.saveToTopic,
-      s.stopGenerateMessage,
-    ],
-  );
 
-  return (
-    <DraggablePanel
-      expandable={false}
-      fullscreen={expand}
-      headerHeight={HEADER_HEIGHT}
-      minHeight={CHAT_TEXTAREA_HEIGHT}
-      onSizeChange={(_, size) => {
-        if (!size) return;
+  const Render = mobile ? Mobile : Desktop;
 
-        updatePreference({
-          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-        });
-      }}
-      placement="bottom"
-      size={{ height: inputHeight, width: '100%' }}
-      style={{ zIndex: 10 }}
-    >
+  return (
+    <Render expand={expand}>
       <ChatInputArea
         actions={
           <>
-            <InputActions />
+            <ActionLeft />
             <Token input={message} />
           </>
         }
         actionsRight={<ActionsRight />}
         expand={expand}
-        footer={<Footer hasTopic={hasTopic} saveToTopic={saveToTopic} />}
+        footer={<Footer />}
         loading={isLoading}
-        minHeight={CHAT_TEXTAREA_HEIGHT}
+        minHeight={mobile ? 0 : CHAT_TEXTAREA_HEIGHT}
         onExpandChange={setExpand}
         onInputChange={setMessage}
         onSend={sendMessage}
@@ -70,7 +52,7 @@ const ChatInput = () => {
         }}
         value={message}
       />
-    </DraggablePanel>
+    </Render>
   );
 };
 

package/src/pages/chat/features/SessionList/Header/Desktop.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
+import { ActionIcon, Logo } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
 import Link from 'next/link';
@@ -8,6 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
+import SessionSearchBar from '../../SessionSearchBar';
+
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`
     fill: ${token.colorText};
@@ -21,7 +23,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('common');
-  const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
+  const [createSession] = useSessionStore((s) => [s.createSession]);
 
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>
@@ -31,22 +33,13 @@ const Header = memo(() => {
         </Link>
         <ActionIcon
           icon={MessageSquarePlus}
-          onClick={createSession}
+          onClick={() => createSession()}
           size={{ fontSize: 24 }}
           style={{ flex: 'none' }}
           title={t('newAgent')}
         />
       </Flexbox>
-      <SearchBar
-        allowClear
-        enableShortKey
-        onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-        placeholder={t('searchAgentPlaceholder')}
-        shortKey={'k'}
-        spotlight
-        type={'ghost'}
-        value={keywords}
-      />
+      <SessionSearchBar />
     </Flexbox>
   );
 });

package/src/pages/chat/features/SessionList/Header/Mobile.tsx

@@ -26,7 +26,7 @@ const Header = memo(() => {
       left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
       right={
         <>
-          <ActionIcon icon={MessageSquarePlus} onClick={createSession} />
+          <ActionIcon icon={MessageSquarePlus} onClick={() => createSession()} />
           <ActionIcon
             icon={Settings2}
             onClick={() => {

package/src/pages/chat/features/SessionList/List/AddButton.tsx

@@ -12,7 +12,7 @@ const AddButton = memo<ButtonProps>((props) => {
   const createSession = useSessionStore((s) => s.createSession);
   return (
     <Flexbox style={{ margin: '12px 16px' }}>
-      <Button block icon={<Icon icon={Plus} />} onClick={createSession} {...props}>
+      <Button block icon={<Icon icon={Plus} />} onClick={() => createSession()} {...props}>
         {t('newAgent')}
       </Button>
     </Flexbox>

package/src/pages/chat/features/SessionList/List/Item/index.tsx

@@ -1,7 +1,7 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { Avatar, List, Tag } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
@@ -34,7 +34,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const isHovering = useHover(ref);
-
+  const { mobile } = useResponsive();
   const { styles } = useStyles();
   const [defaultModel] = useGlobalStore((s) => [globalSelectors.defaultAgentConfig(s).model]);
 
@@ -98,7 +98,8 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   return (
     <Item
       actions={actions}
-      active={active}
+      // needn't active state in mobile
+      active={mobile ? false : active}
       addon={addon}
       avatar={avatarRender}
       className={styles.container}

package/src/pages/chat/features/SessionList/List/index.tsx

@@ -26,10 +26,8 @@ const SessionList = memo(() => {
       <Link
         href={SESSION_CHAT_URL(id, mobile)}
         key={id}
-        // replace onClick with onPointerDown to prevent double click on mobile
-        onPointerDown={(e) => {
+        onClick={(e) => {
           e.preventDefault();
-
           if (mobile) switchSession(id);
           else activeSession(id);
         }}

package/src/pages/chat/features/SessionList/Mobile.tsx

@@ -1,22 +1,12 @@
-import { SearchBar } from '@lobehub/ui';
 import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { useSessionStore } from '@/store/session';
+import SessionSearchBar from '../SessionSearchBar';
 
 const Sessions = memo<{ children: ReactNode }>(({ children }) => {
-  const { t } = useTranslation('common');
-  const [keywords] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
   return (
     <>
       <div style={{ padding: '8px 16px' }}>
-        <SearchBar
-          allowClear
-          onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-          placeholder={t('searchAgentPlaceholder')}
-          type={'block'}
-          value={keywords}
-        />
+        <SessionSearchBar />
       </div>
       {children}
     </>

package/src/pages/chat/features/SessionSearchBar/index.tsx

@@ -0,0 +1,26 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const SessionSearchBar = memo(() => {
+  const { t } = useTranslation('common');
+  const [keywords] = useSessionStore((s) => [s.searchKeywords]);
+  const { mobile } = useResponsive();
+  return (
+    <SearchBar
+      allowClear
+      enableShortKey={!mobile}
+      onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+      placeholder={t('searchAgentPlaceholder')}
+      shortKey={'k'}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keywords}
+    />
+  );
+});
+
+export default SessionSearchBar;

package/src/pages/chat/features/Sidebar/Topic/index.tsx

@@ -1,9 +1,10 @@
+import { EmptyCard } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import Empty from '@/components/Empty';
 import { useGlobalStore } from '@/store/global';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { topicSelectors } from '@/store/session/selectors';
@@ -15,20 +16,27 @@ export const Topic = () => {
   const init = useSessionChatInit();
   const topics = useSessionStore(topicSelectors.currentTopics, isEqual);
   const { isDarkMode } = useThemeMode();
-  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
+  const [activeTopicId, keywords] = useSessionStore((s) => [
+    s.activeTopicId,
+    s.topicSearchKeywords,
+  ]);
   const { t } = useTranslation('empty');
-
   const [visible, updateGuideState] = useGlobalStore((s) => [
     s.preference.guide?.topic,
     s.updateGuideState,
   ]);
 
+  const topicsData = useMemo(() => {
+    if (!keywords) return topics;
+    return topics.filter(({ title }) => title.toLowerCase().includes(keywords.toLowerCase()));
+  }, [topics, keywords]);
+
   return !init ? (
     <SkeletonList />
   ) : (
     <Flexbox gap={2} style={{ marginBottom: 12 }}>
       {topics?.length === 0 && (
-        <Empty
+        <EmptyCard
           alt={t('topic.desc')}
           cover={`/images/empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`}
           desc={t('topic.desc')}
@@ -43,9 +51,13 @@ export const Topic = () => {
         />
       )}
 
-      <TopicItem active={!activeTopicId} fav={false} title={'默认话题'} />
+      <TopicItem
+        active={!activeTopicId}
+        fav={false}
+        title={t('topic.defaultTitle', { ns: 'common' })}
+      />
 
-      {topics.map(({ id, favorite, title }) => (
+      {topicsData.map(({ id, favorite, title }) => (
         <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
       ))}
     </Flexbox>

package/src/pages/chat/features/Sidebar/TopicSearchBar/index.tsx

@@ -0,0 +1,24 @@
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const TopicSearchBar = memo(() => {
+  const { t } = useTranslation('common');
+  const [keywords] = useSessionStore((s) => [s.topicSearchKeywords]);
+  const { mobile } = useResponsive();
+  return (
+    <SearchBar
+      allowClear
+      onChange={(e) => useSessionStore.setState({ topicSearchKeywords: e.target.value })}
+      placeholder={t('topic.searchPlaceholder')}
+      spotlight={!mobile}
+      type={mobile ? 'block' : 'ghost'}
+      value={keywords}
+    />
+  );
+});
+
+export default TopicSearchBar;

package/src/pages/chat/features/Sidebar/index.tsx

@@ -1,29 +1,22 @@
-import { SearchBar } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import Desktop from './Desktop';
 import Mobile from './Mobile';
 import { Topic } from './Topic';
+import TopicSearchBar from './TopicSearchBar';
 
 const SideBar = memo(() => {
   const { mobile } = useResponsive();
 
   const Render = mobile ? Mobile : Desktop;
 
-  const { t } = useTranslation('common');
-
   return (
     <Render>
       <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
         <Flexbox padding={16}>
-          <SearchBar
-            placeholder={t('topic.searchPlaceholder')}
-            spotlight={!mobile}
-            type={mobile ? 'block' : 'ghost'}
-          />
+          <TopicSearchBar />
         </Flexbox>
         <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
           <Topic />