@lobehub/chat 0.155.4 → 0.155.5

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 0.155.5](https://github.com/lobehub/lobe-chat/compare/v0.155.4...v0.155.5)
+
+<sup>Released on **2024-05-08**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.155.4](https://github.com/lobehub/lobe-chat/compare/v0.155.3...v0.155.4)
 
 <sup>Released on **2024-05-08**</sup>

package/README.md

@@ -263,12 +263,12 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 | Recent Submits                                                                                                                                                                             | Description                                                                                                                                                                                                                                                    |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [SF Symbols Finder](https://chat-preview.lobehub.com/market?agent=sf-symbols-finder)<br/><sup>By **[inquiry-paring0a](https://github.com/inquiry-paring0a)** on **2024-05-08**</sup>       | Master Apple SF Symbols, select symbols that match the description<br/>`sf-symbols` `expert` `icon` `symbol` `plugin`                                                                                                                                          |
 | [Video to Blog Post Assistant](https://chat-preview.lobehub.com/market?agent=video-2-blog-assistant)<br/><sup>By **[yayoinoyume](https://github.com/yayoinoyume)** on **2024-05-06**</sup> | Helps you quickly organize messy subtitles into beautiful blog posts<br/>`subtitle-organization` `blog-post-formatting` `video-to-blog`                                                                                                                        |
 | [Art Evaluation Tutor](https://chat-preview.lobehub.com/market?agent=wanwusheng-art)<br/><sup>By **[dingyufei615](https://github.com/dingyufei615)** on **2024-05-06**</sup>               | Specializes in teaching children's art, meticulously evaluates works, pays attention to details, and adapts to students of different age groups.<br/>`art-education` `evaluation` `creativity` `teaching` `painting`                                           |
 | [iOS Code Artist](https://chat-preview.lobehub.com/market?agent=ios-develop)<br/><sup>By **[Alcu1n](https://github.com/Alcu1n)** on **2024-05-03**</sup>                                   | iOS development expert with 15 years of experience, proficient in Swift, SwiftUI, Flutter. Clear logic in code, precise debugging, providing project frameworks from 0 to 1.<br/>`i-os-development` `coding` `debugging` `project-planning` `logical-thinking` |
-| [Sales Description Specialist](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup>        | Assists in the sale of used items through research, pricing, description, and title creation.<br/>`product-sales` `research` `description`                                                                                                                     |
 
-> 📊 Total agents: [<kbd>**247**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**248**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -249,14 +249,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- AGENT LIST -->
 
-| 最近新增                                                                                                                                                                         | 助手说明                                                                                                                                                       |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [视频转博客文章助手](https://chat-preview.lobehub.com/market?agent=video-2-blog-assistant)<br/><sup>By **[yayoinoyume](https://github.com/yayoinoyume)** on **2024-05-06**</sup> | 帮你快速整理缭乱的字幕，变成精美的博客文章<br/>`字幕整理` `博文格式` `视频变博客`                                                                              |
-| [美术评价导师](https://chat-preview.lobehub.com/market?agent=wanwusheng-art)<br/><sup>By **[dingyufei615](https://github.com/dingyufei615)** on **2024-05-06**</sup>             | 擅长少儿美术教学，细致评价作品，关注细节，适应不同年龄段学生。<br/>`美术教育` `评价` `创意` `教学` `绘画`                                                      |
-| [iOS 代码艺术家](https://chat-preview.lobehub.com/market?agent=ios-develop)<br/><sup>By **[Alcu1n](https://github.com/Alcu1n)** on **2024-05-03**</sup>                          | iOS 开发专家，15 年经验，精通 Swift、SwiftUI、Flutter。逻辑清晰的代码，精准 debug，提供 0 到 1 的项目框架。<br/>`i-os开发` `编码` `调试` `项目规划` `逻辑思维` |
-| [销售描述专家](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup>              | 通过研究、定价、描述和标题设计帮助销售二手物品。<br/>`产品销售` `研究` `描述`                                                                                  |
-
-> 📊 Total agents: [<kbd>**247**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| 最近新增                                                                                                                                                                             | 助手说明                                                                                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [SF Symbols 查找器](https://chat-preview.lobehub.com/market?agent=sf-symbols-finder)<br/><sup>By **[inquiry-paring0a](https://github.com/inquiry-paring0a)** on **2024-05-08**</sup> | 精通苹果 SF Symbols，可根据描述选择符合的 Symbols<br/>`sf-symbols` `专家` `图标` `符号` `插件`                                                                 |
+| [视频转博客文章助手](https://chat-preview.lobehub.com/market?agent=video-2-blog-assistant)<br/><sup>By **[yayoinoyume](https://github.com/yayoinoyume)** on **2024-05-06**</sup>     | 帮你快速整理缭乱的字幕，变成精美的博客文章<br/>`字幕整理` `博文格式` `视频变博客`                                                                              |
+| [美术评价导师](https://chat-preview.lobehub.com/market?agent=wanwusheng-art)<br/><sup>By **[dingyufei615](https://github.com/dingyufei615)** on **2024-05-06**</sup>                 | 擅长少儿美术教学，细致评价作品，关注细节，适应不同年龄段学生。<br/>`美术教育` `评价` `创意` `教学` `绘画`                                                      |
+| [iOS 代码艺术家](https://chat-preview.lobehub.com/market?agent=ios-develop)<br/><sup>By **[Alcu1n](https://github.com/Alcu1n)** on **2024-05-03**</sup>                              | iOS 开发专家，15 年经验，精通 Swift、SwiftUI、Flutter。逻辑清晰的代码，精准 debug，提供 0 到 1 的项目框架。<br/>`i-os开发` `编码` `调试` `项目规划` `逻辑思维` |
+
+> 📊 Total agents: [<kbd>**248**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.155.4",
+  "version": "0.155.5",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/(mobile)/me/features/Header.tsx

@@ -1,35 +1,28 @@
 'use client';
 
 import { ActionIcon, MobileNavBar } from '@lobehub/ui';
-import { useScroll } from 'ahooks';
 import { useTheme } from 'antd-style';
 import { Moon, Sun } from 'lucide-react';
 import { memo } from 'react';
 
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
-import { mobileHeaderFixed } from '@/styles/mobileHeader';
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
   const theme = useTheme();
-  const scroll = useScroll(() => document.querySelector('#lobe-mobile-scroll-container'));
   const switchThemeMode = useUserStore((s) => s.switchThemeMode);
-  const showBackground = (scroll as any)?.top > 44;
 
   return (
     <MobileNavBar
       right={
         <ActionIcon
-          color={showBackground ? undefined : theme.colorBgLayout}
           icon={theme.isDarkMode ? Moon : Sun}
           onClick={() => switchThemeMode(theme.isDarkMode ? 'light' : 'dark')}
           size={MOBILE_HEADER_ICON_SIZE}
         />
       }
-      style={{
-        ...mobileHeaderFixed,
-        background: showBackground ? undefined : 'transparent',
-      }}
+      style={mobileHeaderSticky}
     />
   );
 });

package/src/app/(main)/(mobile)/me/loading.tsx

@@ -7,21 +7,10 @@ import { Flexbox } from 'react-layout-kit';
 import Divider from '@/components/Cell/Divider';
 import SkeletonLoading from '@/components/SkeletonLoading';
 
-import { useStyles } from './features/style';
-
 const Loading = memo(() => {
-  const { styles } = useStyles();
   return (
     <>
-      <Flexbox align={'center'} className={styles.bannerBox} justify={'center'} />
-      <Flexbox
-        align={'center'}
-        className={styles.info}
-        gap={12}
-        horizontal
-        paddingBlock={12}
-        paddingInline={12}
-      >
+      <Flexbox align={'center'} gap={12} horizontal paddingBlock={12} paddingInline={12}>
         <Skeleton.Avatar active shape={'circle'} size={48} />
         <Skeleton.Button active block />
       </Flexbox>

package/src/app/(main)/(mobile)/me/page.tsx

@@ -7,7 +7,6 @@ import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
 import { isMobileDevice } from '@/utils/responsive';
 
-import AvatarBanner from './features/AvatarBanner';
 import Cate from './features/Cate';
 import ExtraCate from './features/ExtraCate';
 
@@ -18,10 +17,8 @@ const Page = () => {
 
   return (
     <>
-      <AvatarBanner>
-        <UserInfo />
-        <DataStatistics paddingInline={16} />
-      </AvatarBanner>
+      <UserInfo />
+      <DataStatistics paddingInline={12} style={{ paddingBottom: 6 }} />
       <Divider />
       <Cate />
       <ExtraCate />

package/src/app/(main)/@nav/_layout/Mobile.tsx

@@ -63,7 +63,7 @@ const Nav = memo(() => {
     [t],
   );
 
-  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} safeArea />;
+  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} />;
 });
 
 Nav.displayName = 'MobileNav';

package/src/app/(main)/_layout/Mobile.tsx

@@ -3,13 +3,17 @@
 import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 
+import { useQuery } from '@/hooks/useQuery';
+
 import { LayoutProps } from './type';
 
 const MOBILE_IGNORE_NAV_ROUTES = ['/settings/', '/chat/'];
 
 const Layout = memo(({ children, nav }: LayoutProps) => {
+  const { showMobileWorkspace } = useQuery();
   const pathname = usePathname();
-  const hideNav = MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
+  const hideNav =
+    showMobileWorkspace || MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
 
   return (
     <>

package/src/app/(main)/chat/(workspace)/@conversation/default.tsx

@@ -0,0 +1,23 @@
+import ChatHydration from '@/components/StoreHydration/ChatHydration';
+import Conversation from '@/features/Conversation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import DesktopChatInput from './features/ChatInput/Desktop';
+import MobileChatInput from './features/ChatInput/Mobile';
+
+const ChatConversation = () => {
+  const mobile = isMobileDevice();
+  const ChatInput = mobile ? MobileChatInput : DesktopChatInput;
+
+  return (
+    <>
+      <Conversation mobile={mobile} />
+      <ChatInput />
+      <ChatHydration />
+    </>
+  );
+};
+
+ChatConversation.displayName = 'ChatConversation';
+
+export default ChatConversation;

package/src/app/(main)/chat/{(desktop)/features/ChatInput → (workspace)/@conversation/features/ChatInput/Desktop}/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { DraggablePanel } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -13,7 +15,7 @@ import Footer from './Footer';
 import Head from './Header';
 import TextArea from './TextArea';
 
-const ChatInput = memo(() => {
+const DesktopChatInput = memo(() => {
   const [expand, setExpand] = useState<boolean>(false);
 
   const [inputHeight, updatePreference] = useGlobalStore((s) => [
@@ -52,4 +54,6 @@ const ChatInput = memo(() => {
   );
 });
 
-export default ChatInput;
+DesktopChatInput.displayName = 'DesktopChatInput';
+
+export default DesktopChatInput;

package/src/app/(main)/chat/{(mobile)/features/ChatInput → (workspace)/@conversation/features/ChatInput/Mobile}/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { MobileChatInputArea, MobileChatSendButton } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
@@ -10,7 +12,7 @@ import { useChatInput } from '@/features/ChatInput/useChatInput';
 
 import Files from './Files';
 
-const ChatInputMobileLayout = memo(() => {
+const MobileChatInput = memo(() => {
   const { t } = useTranslation('chat');
   const theme = useTheme();
   const { ref, onSend, loading, value, onInput, onStop, expand, setExpand } = useChatInput();
@@ -23,11 +25,12 @@ const ChatInputMobileLayout = memo(() => {
       onSend={onSend}
       placeholder={t('sendPlaceholder')}
       ref={ref}
-      safeArea
       setExpand={setExpand}
       style={{
-        background: `linear-gradient(to bottom, ${theme.colorFillQuaternary}, transparent)`,
+        background: theme.colorBgLayout,
+        top: expand ? 0 : undefined,
         width: '100%',
+        zIndex: 101,
       }}
       textAreaLeftAddons={<STT mobile />}
       textAreaRightAddons={
@@ -44,4 +47,6 @@ const ChatInputMobileLayout = memo(() => {
   );
 });
 
-export default ChatInputMobileLayout;
+MobileChatInput.displayName = 'MobileChatInput';
+
+export default MobileChatInput;

package/src/app/(main)/chat/(workspace)/@topic/default.tsx

@@ -0,0 +1,19 @@
+import { isMobileDevice } from '@/utils/responsive';
+
+import SystemRole from './features/SystemRole';
+import TopicListContent from './features/TopicListContent';
+
+const Topic = () => {
+  const mobile = isMobileDevice();
+
+  return (
+    <>
+      {!mobile && <SystemRole />}
+      <TopicListContent mobile={mobile} />
+    </>
+  );
+};
+
+Topic.displayName = 'ChatTopic';
+
+export default Topic;

package/src/app/(main)/chat/{(desktop)/features/SideBar/SystemRole/index.tsx → (workspace)/@topic/features/SystemRole/SystemRoleContent.tsx}

@@ -1,3 +1,5 @@
+'use client';
+
 import { ActionIcon, EditableMessage } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { Edit } from 'lucide-react';

package/src/app/(main)/chat/(workspace)/@topic/features/SystemRole/index.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { memo } from 'react';
+
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import SystemRoleContent from './SystemRoleContent';
+
+const SystemRole = memo(() => {
+  const { isAgentEditable: showSystemRole } = useServerConfigStore(featureFlagsSelectors);
+  const isInbox = useSessionStore(sessionSelectors.isInboxSession);
+
+  return showSystemRole && !isInbox && <SystemRoleContent />;
+});
+
+export default SystemRole;

package/src/app/(main)/chat/{features → (workspace)/@topic/features}/TopicListContent/Header.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { App, Dropdown, MenuProps } from 'antd';
 import { MoreHorizontal, Search, Trash } from 'lucide-react';

package/src/app/(main)/chat/{features → (workspace)/@topic/features}/TopicListContent/Topic/index.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import { EmptyCard } from '@lobehub/ui';
-import { css, cx, useThemeMode } from 'antd-style';
+import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import React, { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,13 +17,7 @@ import { ChatTopic } from '@/types/topic';
 import { Placeholder, SkeletonList } from './SkeletonList';
 import TopicItem from './TopicItem';
 
-const container = css`
-  > div {
-    padding-inline: 8px;
-  }
-`;
-
-export const Topic = memo(() => {
+export const Topic = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const { isDarkMode } = useThemeMode();
@@ -62,29 +58,31 @@ export const Topic = memo(() => {
   return !topicsInit ? (
     <SkeletonList />
   ) : (
-    <Flexbox gap={2} height={'100%'} style={{ marginBottom: 12 }}>
+    <Flexbox
+      gap={2}
+      height={'100%'}
+      paddingInline={mobile ? undefined : 8}
+      style={{ marginBottom: 12 }}
+    >
       {topicLength === 0 && (
-        <Flexbox flex={1} paddingInline={8}>
-          <EmptyCard
-            alt={t('topic.guide.desc')}
-            cover={imageUrl(`empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`)}
-            desc={t('topic.guide.desc')}
-            height={120}
-            imageProps={{
-              priority: true,
-            }}
-            onVisibleChange={(visible) => {
-              updateGuideState({ topic: visible });
-            }}
-            style={{ marginBottom: 6 }}
-            title={t('topic.guide.title')}
-            visible={visible}
-            width={200}
-          />
-        </Flexbox>
+        <EmptyCard
+          alt={t('topic.guide.desc')}
+          cover={imageUrl(`empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`)}
+          desc={t('topic.guide.desc')}
+          height={120}
+          imageProps={{
+            priority: true,
+          }}
+          onVisibleChange={(visible) => {
+            updateGuideState({ topic: visible });
+          }}
+          style={{ flex: 'none', marginBottom: 12 }}
+          title={t('topic.guide.title')}
+          visible={visible}
+          width={200}
+        />
       )}
       <Virtuoso
-        className={cx(container)}
         components={{ ScrollSeekPlaceholder: Placeholder }}
         computeItemKey={(_, item) => item.id}
         data={topics}

package/src/app/(main)/chat/{features → (workspace)/@topic/features}/TopicListContent/TopicSearchBar/index.tsx

@@ -1,16 +1,18 @@
+'use client';
+
 import { SearchBar } from '@lobehub/ui';
 import { useUnmount } from 'ahooks';
-import { useResponsive } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
+import { useServerConfigStore } from '@/store/serverConfig';
 
 const TopicSearchBar = memo<{ onClear?: () => void }>(({ onClear }) => {
   const { t } = useTranslation('chat');
 
   const [keywords, setKeywords] = useState('');
-  const { mobile } = useResponsive();
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const [activeSessionId, useSearchTopics] = useChatStore((s) => [s.activeId, s.useSearchTopics]);
 
   useSearchTopics(keywords, activeSessionId);

package/src/app/(main)/chat/{features → (workspace)/@topic/features}/TopicListContent/index.tsx

@@ -1,19 +1,18 @@
-import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Header from './Header';
 import { Topic } from './Topic';
 import TopicSearchBar from './TopicSearchBar';
 
-const TopicListContent = memo<{ mobile?: boolean }>(({ mobile }) => {
+const TopicListContent = ({ mobile }: { mobile?: boolean }) => {
   return (
     <Flexbox gap={mobile ? 8 : 0} height={'100%'} style={{ overflow: 'hidden' }}>
       {mobile ? <TopicSearchBar /> : <Header />}
       <Flexbox gap={16} height={'100%'} style={{ paddingTop: 6, position: 'relative' }}>
-        <Topic />
+        <Topic mobile={mobile} />
       </Flexbox>
     </Flexbox>
   );
-});
+};
 
 export default TopicListContent;

package/src/app/(main)/chat/{(desktop)/features → (workspace)/_layout/Desktop}/ChatHeader/HeaderAction.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ActionIcon } from '@lobehub/ui';
 import { PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { memo } from 'react';

package/src/app/(main)/chat/{(desktop)/features → (workspace)/_layout/Desktop}/ChatHeader/Main.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Avatar, ChatHeaderTitle } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { memo } from 'react';
@@ -41,7 +43,7 @@ const Main = memo(() => {
       <Avatar
         avatar={avatar}
         background={backgroundColor}
-        onClick={openChatSettings}
+        onClick={() => openChatSettings()}
         size={40}
         title={title}
       />

package/src/app/(main)/chat/{(desktop)/features → (workspace)/_layout/Desktop}/ChatHeader/Tags.tsx

@@ -19,7 +19,7 @@ const TitleTags = memo(() => {
   const showPlugin = useUserStore(modelProviderSelectors.isModelEnabledFunctionCall(model));
 
   return (
-    <Flexbox gap={8} horizontal>
+    <Flexbox align={'center'} horizontal>
       <ModelSwitchPanel>
         <ModelTag model={model} />
       </ModelSwitchPanel>

package/src/app/(main)/chat/{(desktop)/features → (workspace)/_layout/Desktop}/ChatHeader/index.tsx

@@ -1,9 +1,8 @@
 import { ChatHeader } from '@lobehub/ui';
-import { memo } from 'react';
 
 import HeaderAction from './HeaderAction';
 import Main from './Main';
 
-const Header = memo(() => <ChatHeader left={<Main />} right={<HeaderAction />} />);
+const Header = () => <ChatHeader left={<Main />} right={<HeaderAction />} style={{ zIndex: 11 }} />;
 
 export default Header;

package/src/app/(main)/chat/{(desktop)/features → (workspace)/_layout/Desktop}/HotKeys.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import isEqual from 'fast-deep-equal';
 import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

package/src/app/(main)/chat/{(desktop)/features/SideBar/index.tsx → (workspace)/_layout/Desktop/TopicPanel.tsx}

@@ -1,18 +1,12 @@
+'use client';
+
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import dynamic from 'next/dynamic';
-import { memo } from 'react';
+import { createStyles, useResponsive } from 'antd-style';
+import { PropsWithChildren, memo, useEffect, useLayoutEffect, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
-
-import TopicListContent from '../../../features/TopicListContent';
-
-const SystemRole = dynamic(() => import('./SystemRole'));
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -21,7 +15,7 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 100% !important;
   `,
   drawer: css`
-    z-index: 0;
+    z-index: 10;
     background: ${token.colorBgLayout};
   `,
   header: css`
@@ -29,15 +23,25 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Desktop = memo(() => {
+const TopicPanel = memo(({ children }: PropsWithChildren) => {
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+  const { md = true, lg = true } = useResponsive();
+  const [showAgentSettings, toggleConfig, isPreferenceInit] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
+    s.isPreferenceInit,
   ]);
+  const [expand, setExpand] = useState(showAgentSettings);
+
+  useLayoutEffect(() => {
+    if (!isPreferenceInit) return;
+    setExpand(showAgentSettings);
+  }, [isPreferenceInit, showAgentSettings]);
 
-  const { isAgentEditable: showSystemRole } = useServerConfigStore(featureFlagsSelectors);
-  const isInbox = useSessionStore(sessionSelectors.isInboxSession);
+  useEffect(() => {
+    if (lg && showAgentSettings) setExpand(true);
+    if (!lg) setExpand(false);
+  }, [lg, showAgentSettings]);
 
   return (
     <DraggablePanel
@@ -45,9 +49,9 @@ const Desktop = memo(() => {
       classNames={{
         content: styles.content,
       }}
-      expand={showAgentSettings}
+      expand={expand}
       minWidth={CHAT_SIDEBAR_WIDTH}
-      mode={'fixed'}
+      mode={md ? 'fixed' : 'float'}
       onExpandChange={toggleConfig}
       placement={'right'}
       showHandlerWideArea={false}
@@ -61,11 +65,10 @@ const Desktop = memo(() => {
         }}
       >
         <SafeSpacing />
-        {showSystemRole && !isInbox && <SystemRole />}
-        <TopicListContent />
+        {children}
       </DraggablePanelContainer>
     </DraggablePanel>
   );
 });
 
-export default Desktop;
+export default TopicPanel;

package/src/app/(main)/chat/(workspace)/_layout/Desktop/index.tsx

@@ -0,0 +1,35 @@
+import { Flexbox } from 'react-layout-kit';
+
+import { LayoutProps } from '../type';
+import ChatHeader from './ChatHeader';
+import HotKeys from './HotKeys';
+import TopicPanel from './TopicPanel';
+
+const Layout = ({ children, topic, conversation }: LayoutProps) => {
+  return (
+    <>
+      <ChatHeader />
+      <Flexbox
+        height={'100%'}
+        horizontal
+        style={{ overflow: 'hidden', position: 'relative' }}
+        width={'100%'}
+      >
+        <Flexbox
+          height={'100%'}
+          style={{ overflow: 'hidden', position: 'relative' }}
+          width={'100%'}
+        >
+          {conversation}
+        </Flexbox>
+        {children}
+        <TopicPanel>{topic}</TopicPanel>
+      </Flexbox>
+      <HotKeys />
+    </>
+  );
+};
+
+Layout.displayName = 'DesktopConversationLayout';
+
+export default Layout;