feature: customizable sidebar module #644 (#680)

* feat：对话的时候支持侧边栏拖拽调整宽度 * feat：对话的时候支持侧边栏拖拽调整宽度 * feat: 隐藏app sidebar 用户体验度提升，不支持隐藏对话 * fix：对话勾选知识库国际化错误 * refactor: split the SidebarIconsManager module out of DisplaySettings * style: update SidebarIconsManager style * ci: fix typecheck * Revert "feat：对话的时候支持侧边栏拖拽调整宽度" This reverts commit 58072128f0741ecc4f918564512ec1e4ee3e9edb. * refactor: merge migrate versions * refactor: simplify sidebarIcons data structure * chore: move react-beautiful-dnd to dev dependencies * chore: use @hello-pangea/dnd replace react-beautiful-dnd * docs: update translation and formatting of input messages --------- Co-authored-by: hxp0618 <1169924772@qq.com> Co-authored-by: huang <hxp0618@gmail.com>
2025-01-07 19:11:12 +08:00 · 2025-01-07 19:11:12 +08:00 · c9813bb1e2
commit c9813bb1e2
parent edac2004a0
22 changed files with 2338 additions and 1890 deletions
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@ -50,7 +50,7 @@ export default defineConfig({
      }
    },
    optimizeDeps: {
-      exclude: ['chunk-QH6N6I7P.js', 'chunk-PB73W2YU.js']
+      exclude: ['chunk-QH6N6I7P.js', 'chunk-PB73W2YU.js', 'chunk-AFE5XGNG.js']
    }
  }
 })
--- a/src/main/services/KnowledgeService.ts
+++ b/src/main/services/KnowledgeService.ts
@ -89,12 +89,14 @@ class KnowledgeService {
    if (item.type === 'url') {
      const content = item.content as string
      if (content.startsWith('http')) {
+        // @ts-ignore loader type
        return await ragApplication.addLoader(new WebLoader({ urlOrContent: content }), forceReload)
      }
    }

    if (item.type === 'sitemap') {
      const content = item.content as string
+      // @ts-ignore loader type
      return await ragApplication.addLoader(new SitemapLoader({ url: content }), forceReload)
    }

--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@ -21,8 +21,7 @@ const Sidebar: FC = () => {
  const { minappShow } = useRuntime()
  const { t } = useTranslation()
  const navigate = useNavigate()
-  const { windowStyle, showTranslateIcon, showPaintingIcon, showMinappIcon, showKnowledgeIcon, showFilesIcon } =
-    useSettings()
+  const { windowStyle, sidebarIcons } = useSettings()
  const { theme, toggleTheme } = useTheme()

  const isRoute = (path: string): string => (pathname === path ? 'active' : '')
@ -38,6 +37,41 @@ const Sidebar: FC = () => {
    navigate(path)
  }

+  const renderMainMenus = () => {
+    return sidebarIcons.visible.map((icon) => {
+      const iconMap = {
+        assistants: <i className="iconfont icon-chat" />,
+        agents: <i className="iconfont icon-business-smart-assistant" />,
+        paintings: <PictureOutlined style={{ fontSize: 16 }} />,
+        translate: <TranslationOutlined />,
+        minapp: <i className="iconfont icon-appstore" />,
+        knowledge: <FileSearchOutlined />,
+        files: <FolderOutlined />
+      }
+
+      const pathMap = {
+        assistants: '/',
+        agents: '/agents',
+        paintings: '/paintings',
+        translate: '/translate',
+        minapp: '/apps',
+        knowledge: '/knowledge',
+        files: '/files'
+      }
+
+      const path = pathMap[icon]
+      const isActive = path === '/' ? isRoute(path) : isRoutes(path)
+
+      return (
+        <Tooltip key={icon} title={t(`${icon}.title`)} mouseEnterDelay={0.8} placement="right">
+          <StyledLink onClick={() => to(path)}>
+            <Icon className={isActive}>{iconMap[icon]}</Icon>
+          </StyledLink>
+        </Tooltip>
+      )
+    })
+  }
+
  return (
    <Container
      id="app-sidebar"
@ -47,67 +81,7 @@ const Sidebar: FC = () => {
      }}>
      <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
      <MainMenus>
-        <Menus onClick={MinApp.onClose}>
-          <Tooltip title={t('assistants.title')} mouseEnterDelay={0.8} placement="right">
-            <StyledLink onClick={() => to('/')}>
-              <Icon className={isRoute('/')}>
-                <i className="iconfont icon-chat" />
-              </Icon>
-            </StyledLink>
-          </Tooltip>
-          <Tooltip title={t('agents.title')} mouseEnterDelay={0.8} placement="right">
-            <StyledLink onClick={() => to('/agents')}>
-              <Icon className={isRoutes('/agents')}>
-                <i className="iconfont icon-business-smart-assistant" />
-              </Icon>
-            </StyledLink>
-          </Tooltip>
-          {showPaintingIcon && (
-            <Tooltip title={t('paintings.title')} mouseEnterDelay={0.8} placement="right">
-              <StyledLink onClick={() => to('/paintings')}>
-                <Icon className={isRoute('/paintings')}>
-                  <PictureOutlined style={{ fontSize: 16 }} />
-                </Icon>
-              </StyledLink>
-            </Tooltip>
-          )}
-          {showTranslateIcon && (
-            <Tooltip title={t('translate.title')} mouseEnterDelay={0.8} placement="right">
-              <StyledLink onClick={() => to('/translate')}>
-                <Icon className={isRoute('/translate')}>
-                  <TranslationOutlined />
-                </Icon>
-              </StyledLink>
-            </Tooltip>
-          )}
-          {showMinappIcon && (
-            <Tooltip title={t('minapp.title')} mouseEnterDelay={0.8} placement="right">
-              <StyledLink onClick={() => to('/apps')}>
-                <Icon className={isRoute('/apps')}>
-                  <i className="iconfont icon-appstore" />
-                </Icon>
-              </StyledLink>
-            </Tooltip>
-          )}
-          {showKnowledgeIcon && (
-            <Tooltip title={t('knowledge_base.title')} mouseEnterDelay={0.5} placement="right">
-              <StyledLink onClick={() => to('/knowledge')}>
-                <Icon className={isRoute('/knowledge')}>
-                  <FileSearchOutlined />
-                </Icon>
-              </StyledLink>
-            </Tooltip>
-          )}
-          {showFilesIcon && (
-            <Tooltip title={t('files.title')} mouseEnterDelay={0.8} placement="right">
-              <StyledLink onClick={() => to('/files')}>
-                <Icon className={isRoute('/files')}>
-                  <FolderOutlined />
-                </Icon>
-              </StyledLink>
-            </Tooltip>
-          )}
-        </Menus>
+        <Menus onClick={MinApp.onClose}>{renderMainMenus()}</Menus>
      </MainMenus>
      <Menus onClick={MinApp.onClose}>
        <Tooltip title={t('settings.theme.title')} mouseEnterDelay={0.8} placement="right">
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@ -401,6 +401,10 @@
      "display.sidebar.knowledge.icon": "Show Knowledge icon",
      "display.sidebar.files.icon": "Show Files icon",
      "display.sidebar.title": "Sidebar Settings",
+      "display.sidebar.visible": "Show my sidebar icons",
+      "display.sidebar.disabled": "Hide my sidebar icons",
+      "display.sidebar.chat.hiddenMessage": "Assistants are basic functions, not supported for hiding",
+      "display.sidebar.empty": "Drag the hidden feature from the left side here",
      "display.topic.title": "Topic Settings",
      "display.custom.css": "Custom CSS",
      "display.custom.css.placeholder": "/* Put custom CSS here */",
@ -411,7 +415,7 @@
      "messages.input.show_estimated_tokens": "Show estimated tokens",
      "messages.metrics": "{{time_first_token_millsec}}ms to first token | {{token_speed}} tok/sec",
      "messages.input.title": "Input Settings",
-      "messages.markdown_rendering_input_message": "Markdown render input msg",
+      "messages.markdown_rendering_input_message": "Markdown render input message",
      "messages.math_engine": "Math render engine",
      "messages.model.title": "Model Settings",
      "messages.title": "Message Settings",
@ -547,7 +551,7 @@
      "show_window": "Show Window",
      "quit": "Quit"
    },
-    "knowledge_base": {
+    "knowledge": {
      "title": "Knowledge Base",
      "search": "Search knowledge base",
      "empty": "No knowledge base found",
--- a/src/renderer/src/i18n/locales/ja-jp.json
+++ b/src/renderer/src/i18n/locales/ja-jp.json
@ -399,6 +399,10 @@
      "display.sidebar.knowledge.icon": "ナレッジのアイコンを表示",
      "display.sidebar.files.icon": "ファイルのアイコンを表示",
      "display.sidebar.title": "サイドバー設定",
+      "display.sidebar.visible": "サイドバーのアイコンを表示する",
+      "display.sidebar.disabled": "サイドバーのアイコンを非表示にする",
+      "display.sidebar.chat.hiddenMessage": "アシスタントは基本的な機能であり、非表示はサポートされていません",
+      "display.sidebar.empty": "非表示にする機能を左側からここにドラッグ",
      "display.topic.title": "トピック設定",
      "display.custom.css": "カスタムCSS",
      "display.custom.css.placeholder": "/* ここにカスタムCSSを入力 */",
@ -533,7 +537,7 @@
      "show_window": "ウィンドウを表示",
      "quit": "終了"
    },
-    "knowledge_base": {
+    "knowledge": {
      "title": "ナレッジベース",
      "search": "ナレッジベースを検索",
      "empty": "ナレッジベースが見つかりません",
--- a/src/renderer/src/i18n/locales/ru-ru.json
+++ b/src/renderer/src/i18n/locales/ru-ru.json
@ -401,6 +401,10 @@
      "display.sidebar.knowledge.icon": "Показывать иконку знаний",
      "display.sidebar.files.icon": "Показывать иконку файлов",
      "display.sidebar.title": "Настройки боковой панели",
+      "display.sidebar.visible": "Показать мои значки на боковой панели",
+      "display.sidebar.disabled": "Скрыть значок на боковой панели",
+      "display.sidebar.chat.hiddenMessage": "Помощник является базовой функцией и не поддерживает скрытие",
+      "display.sidebar.empty": "Перетащите скрываемую функцию с левой стороны сюда",
      "display.topic.title": "Настройки топиков",
      "display.custom.css": "Пользовательский CSS",
      "display.custom.css.placeholder": "/* Здесь введите пользовательский CSS */",
@ -547,7 +551,7 @@
      "show_window": "Показать окно",
      "quit": "Выйти"
    },
-    "knowledge_base": {
+    "knowledge": {
      "title": "База знаний",
      "search": "Поиск в базе знаний",
      "empty": "База знаний не найдена",
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@ -402,6 +402,10 @@
      "display.sidebar.knowledge.icon": "显示知识图标",
      "display.sidebar.files.icon": "显示文件图标",
      "display.sidebar.title": "侧边栏设置",
+      "display.sidebar.visible": "显示我的侧边栏图标",
+      "display.sidebar.disabled": "隐藏我的侧边栏图标",
+      "display.sidebar.chat.hiddenMessage": "助手是基础功能，不支持隐藏",
+      "display.sidebar.empty": "把要隐藏的功能从左侧拖拽到这里",
      "display.topic.title": "话题设置",
      "display.custom.css": "自定义 CSS",
      "display.custom.css.placeholder": "/* 这里写自定义CSS */",
@ -536,7 +540,7 @@
      "show_window": "显示窗口",
      "quit": "退出"
    },
-    "knowledge_base": {
+    "knowledge": {
      "title": "知识库",
      "search": "搜索知识库",
      "empty": "暂无知识库",
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@ -402,6 +402,10 @@
      "display.sidebar.files.icon": "顯示文件圖示",
      "display.sidebar.title": "側邊欄設定",
      "display.topic.title": "話題設定",
+      "display.sidebar.chat.hiddenMessage": "助手是基礎功能，不支援隱藏",
+      "display.sidebar.empty": "把要隱藏的功能從左側拖拽到這裡",
+      "display.sidebar.visible": "顯示我的側邊欄圖標",
+      "display.sidebar.disabled": "隱藏我的側邊欄圖標",
      "display.custom.css": "自定義 CSS",
      "display.custom.css.placeholder": "/* 這裡寫自定義 CSS */",
      "input.auto_translate_with_space": "快速敲擊3次空格翻譯",
@ -535,7 +539,7 @@
      "show_window": "顯示視窗",
      "quit": "退出"
    },
-    "knowledge_base": {
+    "knowledge": {
      "title": "知識庫",
      "search": "搜尋知識庫",
      "empty": "暫無知識庫",
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@ -63,7 +63,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic }) => {
    clickAssistantToShowTopic,
    language,
    autoTranslateWithSpace,
-    showKnowledgeIcon
+    sidebarIcons
  } = useSettings()
  const [expended, setExpend] = useState(false)
  const [estimateTokenCount, setEstimateTokenCount] = useState(0)
@ -85,6 +85,8 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic }) => {
  const isVision = useMemo(() => isVisionModel(model), [model])
  const supportExts = useMemo(() => [...textExts, ...documentExts, ...(isVision ? imageExts : [])], [isVision])

+  const showKnowledgeIcon = sidebarIcons.visible.includes('knowledge')
+
  const estimateTextTokens = useCallback(debounce(estimateTxtTokens, 1000), [])
  const inputTokenCount = useMemo(
    () => (showInputEstimatedTokens ? estimateTextTokens(text) || 0 : 0),
--- a/src/renderer/src/pages/home/Messages/MessageHeader.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
@ -27,7 +27,7 @@ const getAvatarSource = (isLocalAi: boolean, modelId: string | undefined) => {
 const MessageHeader: FC<Props> = memo(({ assistant, model, message }) => {
  const avatar = useAvatar()
  const { theme } = useTheme()
-  const { userName, showMinappIcon } = useSettings()
+  const { userName, sidebarIcons } = useSettings()
  const { t } = useTranslation()
  const { isBubbleStyle } = useMessageStyle()

@ -40,6 +40,7 @@ const MessageHeader: FC<Props> = memo(({ assistant, model, message }) => {
  }, [message.modelId, message.role, model?.id, model?.name, t, userName])

  const isAssistantMessage = message.role === 'assistant'
+  const showMinappIcon = sidebarIcons.visible.includes('minapp')

  const avatarName = useMemo(() => firstLetter(assistant?.name).toUpperCase(), [assistant?.name])
  const username = useMemo(() => removeLeadingEmoji(getUserName()), [getUserName])
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@ -25,7 +25,7 @@ interface Props {
 const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
  const { assistant } = useAssistant(activeAssistant.id)
  const { showAssistants, toggleShowAssistants } = useShowAssistants()
-  const { topicPosition, showMinappIcon } = useSettings()
+  const { topicPosition, sidebarIcons } = useSettings()
  const { showTopics, toggleShowTopics } = useShowTopics()

  useShortcut('toggle_show_assistants', () => {
@ -79,7 +79,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
          <NavbarIcon onClick={() => SearchPopup.show()}>
            <SearchOutlined />
          </NavbarIcon>
-          {showMinappIcon && (
+          {sidebarIcons.visible.includes('minapp') && (
            <AppStorePopover>
              <NavbarIcon style={{ marginLeft: isMac ? 5 : 10 }}>
                <i className="iconfont icon-appstore" />
--- a/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
+++ b/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
@ -126,9 +126,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
    }

    const url = await PromptPopup.show({
-      title: t('knowledge_base.add_url'),
+      title: t('knowledge.add_url'),
      message: '',
-      inputPlaceholder: t('knowledge_base.url_placeholder'),
+      inputPlaceholder: t('knowledge.url_placeholder'),
      inputProps: {
        maxLength: 1000,
        rows: 1
@ -139,7 +139,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
      try {
        new URL(url)
        if (urlItems.find((item) => item.content === url)) {
-          message.success(t('knowledge_base.url_added'))
+          message.success(t('knowledge.url_added'))
          return
        }
        addUrl(url)
@ -155,9 +155,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
    }

    const url = await PromptPopup.show({
-      title: t('knowledge_base.add_sitemap'),
+      title: t('knowledge.add_sitemap'),
      message: '',
-      inputPlaceholder: t('knowledge_base.sitemap_placeholder'),
+      inputPlaceholder: t('knowledge.sitemap_placeholder'),
      inputProps: {
        maxLength: 1000,
        rows: 1
@ -168,7 +168,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
      try {
        new URL(url)
        if (sitemapItems.find((item) => item.content === url)) {
-          message.success(t('knowledge_base.sitemap_added'))
+          message.success(t('knowledge.sitemap_added'))
          return
        }
        addSitemap(url)
@ -209,16 +209,16 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
  return (
    <MainContent>
      {!base?.version && (
-        <Alert message={t('knowledge_base.not_support')} type="error" style={{ marginBottom: 20 }} showIcon />
+        <Alert message={t('knowledge.not_support')} type="error" style={{ marginBottom: 20 }} showIcon />
      )}
      {!providerName && (
-        <Alert message={t('knowledge_base.no_provider')} type="error" style={{ marginBottom: 20 }} showIcon />
+        <Alert message={t('knowledge.no_provider')} type="error" style={{ marginBottom: 20 }} showIcon />
      )}
      <FileSection>
        <TitleWrapper>
          <Title level={5}>{t('files.title')}</Title>
          <Button icon={<PlusOutlined />} onClick={handleAddFile} disabled={disabled}>
-            {t('knowledge_base.add_file')}
+            {t('knowledge.add_file')}
          </Button>
        </TitleWrapper>
        <Dragger
@ -227,9 +227,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
          multiple={true}
          accept={fileTypes.join(',')}
          style={{ marginTop: 10, background: 'transparent' }}>
-          <p className="ant-upload-text">{t('knowledge_base.drag_file')}</p>
+          <p className="ant-upload-text">{t('knowledge.drag_file')}</p>
          <p className="ant-upload-hint">
-            {t('knowledge_base.file_hint', { file_types: fileTypes.join(', ').replaceAll('.', '') })}
+            {t('knowledge.file_hint', { file_types: fileTypes.join(', ').replaceAll('.', '') })}
          </p>
        </Dragger>
      </FileSection>
@ -256,9 +256,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {

      <ContentSection>
        <TitleWrapper>
-          <Title level={5}>{t('knowledge_base.directories')}</Title>
+          <Title level={5}>{t('knowledge.directories')}</Title>
          <Button icon={<PlusOutlined />} onClick={handleAddDirectory} disabled={disabled}>
-            {t('knowledge_base.add_directory')}
+            {t('knowledge.add_directory')}
          </Button>
        </TitleWrapper>
        <FlexColumn>
@ -283,9 +283,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {

      <ContentSection>
        <TitleWrapper>
-          <Title level={5}>{t('knowledge_base.urls')}</Title>
+          <Title level={5}>{t('knowledge.urls')}</Title>
          <Button icon={<PlusOutlined />} onClick={handleAddUrl} disabled={disabled}>
-            {t('knowledge_base.add_url')}
+            {t('knowledge.add_url')}
          </Button>
        </TitleWrapper>
        <FlexColumn>
@ -310,9 +310,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {

      <ContentSection>
        <TitleWrapper>
-          <Title level={5}>{t('knowledge_base.sitemaps')}</Title>
+          <Title level={5}>{t('knowledge.sitemaps')}</Title>
          <Button icon={<PlusOutlined />} onClick={handleAddSitemap} disabled={disabled}>
-            {t('knowledge_base.add_sitemap')}
+            {t('knowledge.add_sitemap')}
          </Button>
        </TitleWrapper>
        <FlexColumn>
@ -337,9 +337,9 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {

      <ContentSection>
        <TitleWrapper>
-          <Title level={5}>{t('knowledge_base.notes')}</Title>
+          <Title level={5}>{t('knowledge.notes')}</Title>
          <Button icon={<PlusOutlined />} onClick={handleAddNote} disabled={disabled}>
-            {t('knowledge_base.add_note')}
+            {t('knowledge.add_note')}
          </Button>
        </TitleWrapper>
        <FlexColumn>
@ -363,7 +363,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
      <Divider style={{ margin: '10px 0' }} />

      <ModelInfo>
-        <label htmlFor="model-info">{t('knowledge_base.model_info')}</label>
+        <label htmlFor="model-info">{t('knowledge.model_info')}</label>
        <Tag color="blue">{base.model.name}</Tag>
        <Tag color="cyan">{t('models.dimensions', { dimensions: base.dimensions || 0 })}</Tag>
        {providerName && <Tag color="purple">{providerName}</Tag>}
@ -375,7 +375,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
          onClick={() => KnowledgeSearchPopup.show({ base })}
          icon={<SearchOutlined />}
          disabled={disabled}>
-          {t('knowledge_base.search')}
+          {t('knowledge.search')}
        </Button>
      </IndexSection>

--- a/src/renderer/src/pages/knowledge/KnowledgePage.tsx
+++ b/src/renderer/src/pages/knowledge/KnowledgePage.tsx
@ -22,7 +22,7 @@ const KnowledgePage: FC = () => {
  const prevLength = useRef(0)

  const handleAddKnowledge = async () => {
-    await AddKnowledgePopup.show({ title: t('knowledge_base.add.title') })
+    await AddKnowledgePopup.show({ title: t('knowledge.add.title') })
  }

  useEffect(() => {
@ -48,12 +48,12 @@ const KnowledgePage: FC = () => {
    (base: KnowledgeBase) => {
      const menus: MenuProps['items'] = [
        {
-          label: t('knowledge_base.rename'),
+          label: t('knowledge.rename'),
          key: 'rename',
          icon: <EditOutlined />,
          async onClick() {
            const name = await PromptPopup.show({
-              title: t('knowledge_base.rename'),
+              title: t('knowledge.rename'),
              message: '',
              defaultValue: base.name || ''
            })
@ -70,7 +70,7 @@ const KnowledgePage: FC = () => {
          icon: <DeleteOutlined />,
          onClick: () => {
            window.modal.confirm({
-              title: t('knowledge_base.delete_confirm'),
+              title: t('knowledge.delete_confirm'),
              centered: true,
              onOk: () => {
                deleteKnowledgeBase(base.id)
@ -88,7 +88,7 @@ const KnowledgePage: FC = () => {
  return (
    <Container>
      <Navbar>
-        <NavbarCenter style={{ borderRight: 'none' }}>{t('knowledge_base.title')}</NavbarCenter>
+        <NavbarCenter style={{ borderRight: 'none' }}>{t('knowledge.title')}</NavbarCenter>
      </Navbar>
      <ContentContainer id="content-container">
        <SideNav>
@ -125,7 +125,7 @@ const KnowledgePage: FC = () => {
        </SideNav>
        {bases.length === 0 ? (
          <MainContent>
-            <Empty description={t('knowledge_base.empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+            <Empty description={t('knowledge.empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </MainContent>
        ) : selectedBase ? (
          <KnowledgeContent selectedBase={selectedBase} />
--- a/src/renderer/src/pages/knowledge/components/KnowledgeSearchPopup.tsx
+++ b/src/renderer/src/pages/knowledge/components/KnowledgeSearchPopup.tsx
@ -77,7 +77,7 @@ const PopupContainer: React.FC<Props> = ({ base, resolve }) => {

  return (
    <Modal
-      title={t('knowledge_base.search')}
+      title={t('knowledge.search')}
      open={open}
      onOk={onOk}
      onCancel={onCancel}
@ -88,7 +88,7 @@ const PopupContainer: React.FC<Props> = ({ base, resolve }) => {
      transitionName="ant-move-down">
      <SearchContainer>
        <Search
-          placeholder={t('knowledge_base.search_placeholder')}
+          placeholder={t('knowledge.search_placeholder')}
          allowClear
          enterButton
          size="large"
@ -109,7 +109,7 @@ const PopupContainer: React.FC<Props> = ({ base, resolve }) => {
                    <Paragraph>{highlightText(item.pageContent)}</Paragraph>
                    <MetadataContainer>
                      <Text type="secondary">
-                        {t('knowledge_base.source')}:{' '}
+                        {t('knowledge.source')}:{' '}
                        {item.file ? (
                          <a href={`http://file/${item.file.name}`} target="_blank" rel="noreferrer">
                            {item.file.origin_name}
--- a/src/renderer/src/pages/knowledge/components/StatusIcon.tsx
+++ b/src/renderer/src/pages/knowledge/components/StatusIcon.tsx
@ -21,13 +21,13 @@ const StatusIcon: FC<StatusIconProps> = ({ sourceId, base, getProcessingStatus }
  if (!status) {
    if (item?.uniqueId) {
      return (
-        <Tooltip title={t('knowledge_base.status_completed')} placement="left">
+        <Tooltip title={t('knowledge.status_completed')} placement="left">
          <CheckCircleOutlined style={{ color: '#52c41a' }} />
        </Tooltip>
      )
    }
    return (
-      <Tooltip title={t('knowledge_base.status_new')} placement="left">
+      <Tooltip title={t('knowledge.status_new')} placement="left">
        <Center style={{ width: '16px', height: '16px' }}>
          <StatusDot $status="new" />
        </Center>
@ -38,25 +38,25 @@ const StatusIcon: FC<StatusIconProps> = ({ sourceId, base, getProcessingStatus }
  switch (status) {
    case 'pending':
      return (
-        <Tooltip title={t('knowledge_base.status_pending')} placement="left">
+        <Tooltip title={t('knowledge.status_pending')} placement="left">
          <StatusDot $status="pending" />
        </Tooltip>
      )
    case 'processing':
      return (
-        <Tooltip title={t('knowledge_base.status_processing')} placement="left">
+        <Tooltip title={t('knowledge.status_processing')} placement="left">
          <StatusDot $status="processing" />
        </Tooltip>
      )
    case 'completed':
      return (
-        <Tooltip title={t('knowledge_base.status_completed')} placement="left">
+        <Tooltip title={t('knowledge.status_completed')} placement="left">
          <CheckCircleOutlined style={{ color: '#52c41a' }} />
        </Tooltip>
      )
    case 'failed':
      return (
-        <Tooltip title={errorText || t('knowledge_base.status_failed')} placement="left">
+        <Tooltip title={errorText || t('knowledge.status_failed')} placement="left">
          <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
        </Tooltip>
      )
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
@ -3,21 +3,20 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useAppDispatch } from '@renderer/store'
 import {
+  DEFAULT_SIDEBAR_ICONS,
  setClickAssistantToShowTopic,
  setCustomCss,
-  setShowFilesIcon,
-  setShowKnowledgeIcon,
-  setShowMinappIcon,
-  setShowPaintingIcon,
  setShowTopicTime,
-  setShowTranslateIcon
+  setSidebarIcons
 } from '@renderer/store/settings'
 import { ThemeMode } from '@renderer/types'
-import { Input, Select, Switch } from 'antd'
-import { FC } from 'react'
+import { Button, Input, Select, Switch } from 'antd'
+import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'

-import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '.'
+import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '..'
+import SidebarIconsManager from './SidebarIconsManager'

 const DisplaySettings: FC = () => {
  const {
@ -25,25 +24,33 @@ const DisplaySettings: FC = () => {
    theme,
    windowStyle,
    setWindowStyle,
-    showTranslateIcon,
-    showPaintingIcon,
-    showMinappIcon,
-    showKnowledgeIcon,
-    showFilesIcon,
    topicPosition,
    setTopicPosition,
    clickAssistantToShowTopic,
    showTopicTime,
-    customCss
+    customCss,
+    sidebarIcons
  } = useSettings()
  const { theme: themeMode } = useTheme()
-
  const { t } = useTranslation()
  const dispatch = useAppDispatch()

-  const handleWindowStyleChange = (checked: boolean) => {
-    setWindowStyle(checked ? 'transparent' : 'opaque')
-  }
+  const [visibleIcons, setVisibleIcons] = useState(sidebarIcons?.visible || DEFAULT_SIDEBAR_ICONS)
+  const [disabledIcons, setDisabledIcons] = useState(sidebarIcons?.disabled || [])
+
+  // 使用useCallback优化回调函数
+  const handleWindowStyleChange = useCallback(
+    (checked: boolean) => {
+      setWindowStyle(checked ? 'transparent' : 'opaque')
+    },
+    [setWindowStyle]
+  )
+
+  const handleReset = useCallback(() => {
+    setVisibleIcons([...DEFAULT_SIDEBAR_ICONS])
+    setDisabledIcons([])
+    dispatch(setSidebarIcons({ visible: DEFAULT_SIDEBAR_ICONS, disabled: [] }))
+  }, [dispatch])

  return (
    <SettingContainer theme={themeMode}>
@ -53,7 +60,7 @@ const DisplaySettings: FC = () => {
        <SettingRow>
          <SettingRowTitle>{t('settings.theme.title')}</SettingRowTitle>
          <Select
-            defaultValue={theme}
+            value={theme}
            style={{ width: 120 }}
            onChange={setTheme}
            options={[
@ -79,7 +86,7 @@ const DisplaySettings: FC = () => {
        <SettingRow>
          <SettingRowTitle>{t('settings.topic.position')}</SettingRowTitle>
          <Select
-            defaultValue={topicPosition || 'right'}
+            value={topicPosition || 'right'}
            style={{ width: 120 }}
            onChange={setTopicPosition}
            options={[
@ -107,39 +114,27 @@ const DisplaySettings: FC = () => {
        </SettingRow>
      </SettingGroup>
      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.display.sidebar.title')}</SettingTitle>
+        <SettingTitle
+          style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span>{t('settings.display.sidebar.title')}</span>
+          <ResetButtonWrapper>
+            <Button onClick={handleReset}>{t('common.reset')}</Button>
+          </ResetButtonWrapper>
+        </SettingTitle>
        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.display.sidebar.translate.icon')}</SettingRowTitle>
-          <Switch checked={showTranslateIcon} onChange={(value) => dispatch(setShowTranslateIcon(value))} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.display.sidebar.painting.icon')}</SettingRowTitle>
-          <Switch checked={showPaintingIcon} onChange={(value) => dispatch(setShowPaintingIcon(value))} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.display.sidebar.minapp.icon')}</SettingRowTitle>
-          <Switch checked={showMinappIcon} onChange={(value) => dispatch(setShowMinappIcon(value))} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.display.sidebar.knowledge.icon')}</SettingRowTitle>
-          <Switch checked={showKnowledgeIcon} onChange={(value) => dispatch(setShowKnowledgeIcon(value))} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.display.sidebar.files.icon')}</SettingRowTitle>
-          <Switch checked={showFilesIcon} onChange={(value) => dispatch(setShowFilesIcon(value))} />
-        </SettingRow>
+        <SidebarIconsManager
+          visibleIcons={visibleIcons}
+          disabledIcons={disabledIcons}
+          setVisibleIcons={setVisibleIcons}
+          setDisabledIcons={setDisabledIcons}
+        />
      </SettingGroup>
      <SettingGroup theme={theme}>
        <SettingTitle>{t('settings.display.custom.css')}</SettingTitle>
        <SettingDivider />
        <Input.TextArea
-          defaultValue={customCss}
-          onBlur={(e) => dispatch(setCustomCss(e.target.value))}
+          value={customCss}
+          onChange={(e) => dispatch(setCustomCss(e.target.value))}
          placeholder={t('settings.display.custom.css.placeholder')}
          style={{
            minHeight: 200,
@ -151,4 +146,10 @@ const DisplaySettings: FC = () => {
  )
 }

+const ResetButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
 export default DisplaySettings
--- a/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx
@ -0,0 +1,272 @@
+import { CloseOutlined } from '@ant-design/icons'
+import { FileSearchOutlined, FolderOutlined, PictureOutlined, TranslationOutlined } from '@ant-design/icons'
+import {
+  DragDropContext,
+  Draggable,
+  DraggableProvided,
+  Droppable,
+  DroppableProvided,
+  DropResult
+} from '@hello-pangea/dnd'
+import { useAppDispatch } from '@renderer/store'
+import { setSidebarIcons } from '@renderer/store/settings'
+import { message } from 'antd'
+import { FC, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { SidebarIcon } from '../../../store/settings'
+
+interface SidebarIconsManagerProps {
+  visibleIcons: SidebarIcon[]
+  disabledIcons: SidebarIcon[]
+  setVisibleIcons: (icons: SidebarIcon[]) => void
+  setDisabledIcons: (icons: SidebarIcon[]) => void
+}
+
+const SidebarIconsManager: FC<SidebarIconsManagerProps> = ({
+  visibleIcons,
+  disabledIcons,
+  setVisibleIcons,
+  setDisabledIcons
+}) => {
+  const { t } = useTranslation()
+
+  const dispatch = useAppDispatch()
+
+  const onDragEnd = useCallback(
+    (result: DropResult) => {
+      if (!result.destination) return
+
+      const { source, destination } = result
+
+      // 如果是chat图标且目标是disabled区域,则不允许移动并提示
+      const draggedItem = source.droppableId === 'visible' ? visibleIcons[source.index] : disabledIcons[source.index]
+      if (draggedItem === 'assistants' && destination.droppableId === 'disabled') {
+        message.warning(t('settings.display.sidebar.chat.hiddenMessage'))
+        return
+      }
+
+      if (source.droppableId === destination.droppableId) {
+        const list = source.droppableId === 'visible' ? [...visibleIcons] : [...disabledIcons]
+        const [removed] = list.splice(source.index, 1)
+        list.splice(destination.index, 0, removed)
+
+        if (source.droppableId === 'visible') {
+          setVisibleIcons(list)
+          dispatch(setSidebarIcons({ visible: list, disabled: disabledIcons }))
+        } else {
+          setDisabledIcons(list)
+          dispatch(setSidebarIcons({ visible: visibleIcons, disabled: list }))
+        }
+        return
+      }
+
+      const sourceList = source.droppableId === 'visible' ? [...visibleIcons] : [...disabledIcons]
+      const destList = destination.droppableId === 'visible' ? [...visibleIcons] : [...disabledIcons]
+
+      const [removed] = sourceList.splice(source.index, 1)
+      const targetList = destList.filter((icon) => icon !== removed)
+      targetList.splice(destination.index, 0, removed)
+
+      const newVisibleIcons = destination.droppableId === 'visible' ? targetList : sourceList
+      const newDisabledIcons = destination.droppableId === 'disabled' ? targetList : sourceList
+
+      setVisibleIcons(newVisibleIcons)
+      setDisabledIcons(newDisabledIcons)
+      dispatch(setSidebarIcons({ visible: newVisibleIcons, disabled: newDisabledIcons }))
+    },
+    [visibleIcons, disabledIcons, dispatch, setVisibleIcons, setDisabledIcons, t]
+  )
+
+  const onMoveIcon = useCallback(
+    (icon: SidebarIcon, fromList: 'visible' | 'disabled') => {
+      // 如果是chat图标且要移动到disabled列表,则不允许并提示
+      if (icon === 'assistants' && fromList === 'visible') {
+        message.warning(t('settings.display.sidebar.chat.hiddenMessage'))
+        return
+      }
+
+      if (fromList === 'visible') {
+        const newVisibleIcons = visibleIcons.filter((i) => i !== icon)
+        const newDisabledIcons = disabledIcons.some((i) => i === icon) ? disabledIcons : [...disabledIcons, icon]
+
+        setVisibleIcons(newVisibleIcons)
+        setDisabledIcons(newDisabledIcons)
+        dispatch(setSidebarIcons({ visible: newVisibleIcons, disabled: newDisabledIcons }))
+      } else {
+        const newDisabledIcons = disabledIcons.filter((i) => i !== icon)
+        const newVisibleIcons = visibleIcons.some((i) => i === icon) ? visibleIcons : [...visibleIcons, icon]
+
+        setDisabledIcons(newDisabledIcons)
+        setVisibleIcons(newVisibleIcons)
+        dispatch(setSidebarIcons({ visible: newVisibleIcons, disabled: newDisabledIcons }))
+      }
+    },
+    [t, visibleIcons, disabledIcons, setVisibleIcons, setDisabledIcons, dispatch]
+  )
+
+  // 使用useMemo缓存图标映射
+  const iconMap = useMemo(
+    () => ({
+      assistants: <i className="iconfont icon-chat" />,
+      agents: <i className="iconfont icon-business-smart-assistant" />,
+      paintings: <PictureOutlined style={{ fontSize: 14 }} />,
+      translate: <TranslationOutlined />,
+      minapp: <i className="iconfont icon-appstore" />,
+      knowledge: <FileSearchOutlined />,
+      files: <FolderOutlined />
+    }),
+    []
+  )
+
+  const renderIcon = (icon: SidebarIcon) => iconMap[icon] || <i className={`iconfont ${icon}`} />
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <IconSection>
+        <IconColumn>
+          <h4>{t('settings.display.sidebar.visible')}</h4>
+          <Droppable droppableId="visible">
+            {(provided: DroppableProvided) => (
+              <IconList ref={provided.innerRef} {...provided.droppableProps}>
+                {visibleIcons.map((icon, index) => (
+                  <Draggable key={icon} draggableId={icon} index={index}>
+                    {(provided: DraggableProvided) => (
+                      <IconItem ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                        <IconContent>
+                          {renderIcon(icon)}
+                          <span>{t(`${icon}.title`)}</span>
+                        </IconContent>
+                        {icon !== 'assistants' && (
+                          <CloseButton onClick={() => onMoveIcon(icon, 'visible')}>
+                            <CloseOutlined />
+                          </CloseButton>
+                        )}
+                      </IconItem>
+                    )}
+                  </Draggable>
+                ))}
+                {provided.placeholder}
+              </IconList>
+            )}
+          </Droppable>
+        </IconColumn>
+        <IconColumn>
+          <h4>{t('settings.display.sidebar.disabled')}</h4>
+          <Droppable droppableId="disabled">
+            {(provided: DroppableProvided) => (
+              <IconList ref={provided.innerRef} {...provided.droppableProps}>
+                {disabledIcons.length === 0 ? (
+                  <EmptyPlaceholder>{t('settings.display.sidebar.empty')}</EmptyPlaceholder>
+                ) : (
+                  disabledIcons.map((icon, index) => (
+                    <Draggable key={icon} draggableId={icon} index={index}>
+                      {(provided: DraggableProvided) => (
+                        <IconItem ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                          <IconContent>
+                            {renderIcon(icon)}
+                            <span>{t(`${icon}.title`)}</span>
+                          </IconContent>
+                          <CloseButton onClick={() => onMoveIcon(icon, 'disabled')}>
+                            <CloseOutlined />
+                          </CloseButton>
+                        </IconItem>
+                      )}
+                    </Draggable>
+                  ))
+                )}
+                {provided.placeholder}
+              </IconList>
+            )}
+          </Droppable>
+        </IconColumn>
+      </IconSection>
+    </DragDropContext>
+  )
+}
+
+// Styled components remain the same
+const IconSection = styled.div`
+  display: flex;
+  gap: 20px;
+  padding: 10px;
+  background: var(--color-background);
+`
+
+const IconColumn = styled.div`
+  flex: 1;
+
+  h4 {
+    margin-bottom: 10px;
+    color: var(--color-text);
+    font-weight: normal;
+  }
+`
+
+const IconList = styled.div`
+  height: 365px;
+  min-height: 365px;
+  padding: 10px;
+  background: var(--color-background-soft);
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+`
+
+const IconItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  cursor: move;
+`
+
+const IconContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  .iconfont {
+    font-size: 16px;
+    color: var(--color-text);
+  }
+
+  span {
+    color: var(--color-text);
+  }
+`
+
+const CloseButton = styled.div`
+  cursor: pointer;
+  color: var(--color-text-2);
+  opacity: 0;
+  transition: all 0.2s;
+
+  &:hover {
+    color: var(--color-text);
+  }
+
+  ${IconItem}:hover & {
+    opacity: 1;
+  }
+`
+
+const EmptyPlaceholder = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-2);
+  text-align: center;
+  padding: 20px;
+  font-size: 14px;
+`
+
+export default SidebarIconsManager
--- a/src/renderer/src/pages/settings/SettingsPage.tsx
+++ b/src/renderer/src/pages/settings/SettingsPage.tsx
@ -15,7 +15,7 @@ import styled from 'styled-components'

 import AboutSettings from './AboutSettings'
 import DataSettings from './DataSettings/DataSettings'
-import DisplaySettings from './DisplaySettings'
+import DisplaySettings from './DisplaySettings/DisplaySettings'
 import GeneralSettings from './GeneralSettings'
 import ModelSettings from './ModalSettings/ModelSettings'
 import ProvidersList from './ProviderSettings'
--- a/src/renderer/src/store/index.ts
+++ b/src/renderer/src/store/index.ts
@ -28,7 +28,7 @@ const persistedReducer = persistReducer(
  {
    key: 'cherry-studio',
    storage,
-    version: 52,
+    version: 54,
    blacklist: ['runtime'],
    migrate
  },
--- a/src/renderer/src/store/migrate.ts
+++ b/src/renderer/src/store/migrate.ts
@ -9,6 +9,7 @@ import { isEmpty } from 'lodash'
 import { createMigrate } from 'redux-persist'

 import { RootState } from '.'
+import { DEFAULT_SIDEBAR_ICONS } from './settings'

 const migrateConfig = {
  '2': (state: RootState) => {
@ -742,8 +743,6 @@ const migrateConfig = {
    return state
  },
  '49': (state: RootState) => {
-    state.settings.showMinappIcon = true
-    state.settings.showFilesIcon = true
    state.settings.pasteLongTextThreshold = 1500
    if (state.shortcuts) {
      state.shortcuts.shortcuts = [
@ -776,7 +775,7 @@ const migrateConfig = {
    state.settings.topicNamingPrompt = ''
    return state
  },
-  '52': (state: RootState) => {
+  '54': (state: RootState) => {
    if (state.shortcuts) {
      state.shortcuts.shortcuts.push({
        key: 'search_message',
@ -786,9 +785,10 @@ const migrateConfig = {
        system: false
      })
    }
-    state.settings.showTranslateIcon = true
-    state.settings.showPaintingIcon = true
-    state.settings.showKnowledgeIcon = true
+    state.settings.sidebarIcons = {
+      visible: DEFAULT_SIDEBAR_ICONS,
+      disabled: []
+    }
    return state
  }
 }
--- a/src/renderer/src/store/settings.ts
+++ b/src/renderer/src/store/settings.ts
@ -4,6 +4,18 @@ import { CodeStyleVarious, LanguageVarious, ThemeMode } from '@renderer/types'

 export type SendMessageShortcut = 'Enter' | 'Shift+Enter' | 'Ctrl+Enter' | 'Command+Enter'

+export type SidebarIcon = 'assistants' | 'agents' | 'paintings' | 'translate' | 'minapp' | 'knowledge' | 'files'
+
+export const DEFAULT_SIDEBAR_ICONS: SidebarIcon[] = [
+  'assistants',
+  'agents',
+  'paintings',
+  'translate',
+  'minapp',
+  'knowledge',
+  'files'
+]
+
 export interface SettingsState {
  showAssistants: boolean
  showTopics: boolean
@ -41,14 +53,13 @@ export interface SettingsState {
  translateModelPrompt: string
  autoTranslateWithSpace: boolean
  enableTopicNaming: boolean
-  // Sidebar icons
-  showTranslateIcon: boolean
-  showPaintingIcon: boolean
-  showMinappIcon: boolean
-  showKnowledgeIcon: boolean
-  showFilesIcon: boolean
  customCss: string
  topicNamingPrompt: string
+  // Sidebar icons
+  sidebarIcons: {
+    visible: SidebarIcon[]
+    disabled: SidebarIcon[]
+  }
 }

 const initialState: SettingsState = {
@ -87,13 +98,12 @@ const initialState: SettingsState = {
  translateModelPrompt: TRANSLATE_PROMPT,
  autoTranslateWithSpace: false,
  enableTopicNaming: true,
-  showTranslateIcon: true,
-  showPaintingIcon: true,
-  showMinappIcon: true,
-  showKnowledgeIcon: true,
-  showFilesIcon: true,
  customCss: '',
-  topicNamingPrompt: ''
+  topicNamingPrompt: '',
+  sidebarIcons: {
+    visible: DEFAULT_SIDEBAR_ICONS,
+    disabled: []
+  }
 }

 const settingsSlice = createSlice({
@ -209,21 +219,6 @@ const settingsSlice = createSlice({
    setEnableTopicNaming: (state, action: PayloadAction<boolean>) => {
      state.enableTopicNaming = action.payload
    },
-    setShowTranslateIcon: (state, action: PayloadAction<boolean>) => {
-      state.showTranslateIcon = action.payload
-    },
-    setShowPaintingIcon: (state, action: PayloadAction<boolean>) => {
-      state.showPaintingIcon = action.payload
-    },
-    setShowMinappIcon: (state, action: PayloadAction<boolean>) => {
-      state.showMinappIcon = action.payload
-    },
-    setShowKnowledgeIcon: (state, action: PayloadAction<boolean>) => {
-      state.showKnowledgeIcon = action.payload
-    },
-    setShowFilesIcon: (state, action: PayloadAction<boolean>) => {
-      state.showFilesIcon = action.payload
-    },
    setPasteLongTextThreshold: (state, action: PayloadAction<number>) => {
      state.pasteLongTextThreshold = action.payload
    },
@ -232,6 +227,9 @@ const settingsSlice = createSlice({
    },
    setTopicNamingPrompt: (state, action: PayloadAction<string>) => {
      state.topicNamingPrompt = action.payload
+    },
+    setSidebarIcons: (state, action: PayloadAction<{ visible: SidebarIcon[]; disabled: SidebarIcon[] }>) => {
+      state.sidebarIcons = action.payload
    }
  }
 })
@ -273,14 +271,10 @@ export const {
  setTranslateModelPrompt,
  setAutoTranslateWithSpace,
  setEnableTopicNaming,
-  setShowTranslateIcon,
-  setShowPaintingIcon,
-  setShowMinappIcon,
-  setShowKnowledgeIcon,
-  setShowFilesIcon,
  setPasteLongTextThreshold,
  setCustomCss,
-  setTopicNamingPrompt
+  setTopicNamingPrompt,
+  setSidebarIcons
 } = settingsSlice.actions

 export default settingsSlice.reducer
--- a/yarn.lock
+++ b/yarn.lock