chore(version): 0.6.7

feat: change topics position
feat: Update Content-Security-Policy to allow file: frame-src #38
2024-09-05 23:53:47 +08:00 · 2024-09-05 23:53:47 +08:00 · 2024-09-05 17:19:17 +08:00 · 2024-09-05 16:15:48 +08:00 · 2024-09-05 15:30:26 +08:00 · 2024-09-05 14:36:19 +08:00
72 changed files with 1774 additions and 1181 deletions
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -57,5 +57,6 @@ electronDownload:
 afterSign: scripts/notarize.js
 releaseInfo:
  releaseNotes: |
-    增加应用备份和恢复功能
-    增加更多AI小程序
+    智能助理和消息列表合并
+    优化输入框样式
+    提升小程序稳定性
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "CherryStudio",
-  "version": "0.6.2",
+  "version": "0.6.7",
  "private": true,
  "description": "A powerful AI assistant for producer.",
  "main": "./out/main/index.js",
--- a/src/main/window.ts
+++ b/src/main/window.ts
@@ -34,7 +34,8 @@ export function createMainWindow() {
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
-      webSecurity: false
+      webSecurity: false,
+      webviewTag: true
      // devTools: !app.isPackaged,
    }
  })
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -5,7 +5,7 @@
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <meta
      http-equiv="Content-Security-Policy"
-      content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data:; frame-src * file:" />
+      content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: *; frame-src * file:" />
  </head>
  <body>
    <div id="root"></div>
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -5,13 +5,13 @@ import { PersistGate } from 'redux-persist/integration/react'

 import Sidebar from './components/app/Sidebar'
 import TopViewContainer from './components/TopView'
+import AntdProvider from './context/AntdProvider'
+import { ThemeProvider } from './context/ThemeProvider'
 import AgentsPage from './pages/agents/AgentsPage'
 import AppsPage from './pages/apps/AppsPage'
 import HomePage from './pages/home/HomePage'
 import SettingsPage from './pages/settings/SettingsPage'
 import TranslatePage from './pages/translate/TranslatePage'
-import AntdProvider from './providers/AntdProvider'
-import { ThemeProvider } from './providers/ThemeProvider'

 function App(): JSX.Element {
  return (
--- a/src/renderer/src/assets/fonts/icon-fonts/iconfont.css
+++ b/src/renderer/src/assets/fonts/icon-fonts/iconfont.css
@@ -1,6 +1,6 @@
@font-face {
  font-family: 'iconfont'; /* Project id 4563475 */
-  src: url('iconfont.woff2?t=1724204739157') format('woff2');
+  src: url('iconfont.woff2?t=1725450669049') format('woff2');
 }

 .iconfont {
@@ -11,6 +11,30 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-gridlines:before {
+  content: '\e942';
+}
+
+.icon-grid-frame:before {
+  content: '\e680';
+}
+
+.icon-grid-row-2copy:before {
+  content: '\e681';
+}
+
+.icon-sidebar-left:before {
+  content: '\e6ab';
+}
+
+.icon-sidebar-right:before {
+  content: '\e6ac';
+}
+
+.icon-inbox:before {
+  content: '\e869';
+}
+
 .icon-business-smart-assistant:before {
  content: '\e601';
 }
@@ -39,14 +63,6 @@
  content: '\e758';
 }

-.icon-hidesidebarhoriz:before {
-  content: '\e8eb';
-}
-
-.icon-showsidebarhoriz:before {
-  content: '\e944';
-}
-
 .icon-a-addchat:before {
  content: '\e658';
 }
--- a/src/renderer/src/assets/fonts/icon-fonts/iconfont.woff2
+++ b/src/renderer/src/assets/fonts/icon-fonts/iconfont.woff2
--- a/src/renderer/src/assets/images/apps/perplexity.webp
+++ b/src/renderer/src/assets/images/apps/perplexity.webp
--- a/src/renderer/src/assets/images/avatar.png
+++ b/src/renderer/src/assets/images/avatar.png
--- a/src/renderer/src/assets/images/avatar.webp
+++ b/src/renderer/src/assets/images/avatar.webp
--- a/src/renderer/src/assets/images/models/chatglm.jpeg
+++ b/src/renderer/src/assets/images/models/chatglm.jpeg
--- a/src/renderer/src/assets/images/models/chatglm.png
+++ b/src/renderer/src/assets/images/models/chatglm.png
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -36,8 +36,8 @@
  --color-error: #f44336;
  --color-link: #1677ff;
  --color-code-background: #323232;
-  --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
-  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);

  --navbar-background-mac: rgba(30, 30, 30, 0.8);
  --navbar-background: rgba(30, 30, 30);
@@ -48,8 +48,8 @@
  --status-bar-height: 40px;
  --input-bar-height: 85px;

-  --assistants-width: 245px;
-  --topic-list-width: 260px;
+  --assistants-width: 240px;
+  --topic-list-width: 270px;
  --settings-width: var(--assistants-width);
 }

@@ -86,8 +86,8 @@ body[theme-mode='light'] {
  --color-error: #f44336;
  --color-link: #1677ff;
  --color-code-background: #e3e3e3;
-  --color-scrollbar-thumb: rgba(0, 0, 0, 0.15);
-  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
+  --color-scrollbar-thumb: rgba(0, 0, 0, 0.08);
+  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.15);

  --navbar-background-mac: rgba(255, 255, 255, 0.75);
  --navbar-background: rgba(255, 255, 255);
@@ -204,3 +204,7 @@ body,
    background-color: transparent !important;
  }
 }
+
+.ant-drawer-header {
+  -webkit-app-region: no-drag;
+}
--- a/src/renderer/src/assets/styles/scrollbar.scss
+++ b/src/renderer/src/assets/styles/scrollbar.scss
@@ -1,7 +1,7 @@
 /* 全局初始化滚动条样式 */
 ::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
+  width: 2px;
+  height: 2px;
 }

 ::-webkit-scrollbar-track {
--- a/src/renderer/src/components/DragableList/index.tsx
+++ b/src/renderer/src/components/DragableList/index.tsx
@@ -1,18 +1,27 @@
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  DropResult,
+  OnDragEndResponder,
+  OnDragStartResponder,
+  ResponderProvided
+} from '@hello-pangea/dnd'
 import { droppableReorder } from '@renderer/utils'
 import { FC } from 'react'

 interface Props<T> {
  list: T[]
+  style?: React.CSSProperties
  children: (item: T, index: number) => React.ReactNode
  onUpdate: (list: T[]) => void
-  onDragStart?: () => void
-  onDragEnd?: () => void
+  onDragStart?: OnDragStartResponder
+  onDragEnd?: OnDragEndResponder
 }

-const DragableList: FC<Props<any>> = ({ children, list, onDragStart, onUpdate, onDragEnd }) => {
-  const _onDragEnd = (result: DropResult) => {
-    onDragEnd?.()
+const DragableList: FC<Props<any>> = ({ children, list, style, onDragStart, onUpdate, onDragEnd }) => {
+  const _onDragEnd = (result: DropResult, provided: ResponderProvided) => {
+    onDragEnd?.(result, provided)
    if (result.destination) {
      const sourceIndex = result.source.index
      const destIndex = result.destination.index
@@ -33,7 +42,7 @@ const DragableList: FC<Props<any>> = ({ children, list, onDragStart, onUpdate, o
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
-                    style={{ ...provided.draggableProps.style, marginBottom: 8 }}>
+                    style={{ ...provided.draggableProps.style, marginBottom: 8, ...style }}>
                    {children(item, index)}
                  </div>
                )}
--- a/src/renderer/src/components/EmojiPicker/index.tsx
+++ b/src/renderer/src/components/EmojiPicker/index.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from '@renderer/providers/ThemeProvider'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { FC, useEffect, useRef } from 'react'

 interface Props {
--- a/src/renderer/src/components/MinApp/index.tsx
+++ b/src/renderer/src/components/MinApp/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 import { CloseOutlined, ExportOutlined, ReloadOutlined } from '@ant-design/icons'
 import { isMac, isWindows } from '@renderer/config/constant'
 import { useBridge } from '@renderer/hooks/useBridge'
@@ -5,7 +6,8 @@ import store from '@renderer/store'
 import { setMinappShow } from '@renderer/store/runtime'
 import { MinAppType } from '@renderer/types'
 import { Drawer } from 'antd'
-import { useRef, useState } from 'react'
+import { WebviewTag } from 'electron'
+import { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'

 import { TopView } from '../TopView'
@@ -17,7 +19,7 @@ interface Props {

 const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
  const [open, setOpen] = useState(true)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const webviewRef = useRef<WebviewTag | null>(null)

  useBridge()

@@ -29,8 +31,8 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
  }

  const onReload = () => {
-    if (iframeRef.current) {
-      iframeRef.current.src = app.url
+    if (webviewRef.current) {
+      webviewRef.current.src = app.url
    }
  }

@@ -59,6 +61,27 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
    )
  }

+  useEffect(() => {
+    const webview = webviewRef.current
+
+    if (webview) {
+      const handleNewWindow = (event: any) => {
+        event.preventDefault()
+        if (webview.loadURL) {
+          webview.loadURL(event.url)
+        }
+      }
+
+      webview.addEventListener('new-window', handleNewWindow)
+
+      return () => {
+        webview.removeEventListener('new-window', handleNewWindow)
+      }
+    }
+
+    return () => {}
+  }, [])
+
  return (
    <Drawer
      title={<Title />}
@@ -72,17 +95,17 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
      maskClosable={false}
      closeIcon={null}
      style={{ marginLeft: 'var(--sidebar-width)' }}>
-      <Frame src={app.url} ref={iframeRef} />
+      <webview src={app.url} ref={webviewRef} style={WebviewStyle} allowpopups={'true' as any} />
    </Drawer>
  )
 }

-const Frame = styled.iframe`
-  width: calc(100vw - var(--sidebar-width));
-  height: calc(100vh - var(--navbar-height));
-  border: none;
-  background-color: white;
-`
+const WebviewStyle: React.CSSProperties = {
+  width: 'calc(100vw - var(--sidebar-width))',
+  height: 'calc(100vh - var(--navbar-height))',
+  backgroundColor: 'white',
+  display: 'inline-flex'
+}

 const TitleContainer = styled.div`
  display: flex;
--- a/src/renderer/src/components/Popups/AddAssistantPopup.tsx
+++ b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
@@ -70,8 +70,8 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
      open={open}
      onCancel={onCancel}
      afterClose={onClose}
-      transitionName=""
-      maskTransitionName=""
+      transitionName="ant-move-down"
+      maskTransitionName="ant-fade"
      footer={null}>
      <Input
        placeholder={t('common.search')}
--- a/src/renderer/src/components/Popups/AssistantSettingPopup.tsx
+++ b/src/renderer/src/components/Popups/AssistantSettingPopup.tsx
@@ -34,7 +34,14 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ assistant, resolve })
  }

  return (
-    <Modal title={assistant.name} open={open} onOk={onOk} onCancel={handleCancel} afterClose={onClose}>
+    <Modal
+      title={assistant.name}
+      open={open}
+      onOk={onOk}
+      onCancel={handleCancel}
+      afterClose={onClose}
+      transitionName="ant-move-down"
+      maskTransitionName="ant-fade">
      <Box mb={8}>{t('common.name')}</Box>
      <Input
        placeholder={t('common.assistant') + t('common.name')}
@@ -45,7 +52,7 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ assistant, resolve })
        {t('common.prompt')}
      </Box>
      <TextArea
-        rows={4}
+        rows={10}
        placeholder={t('common.assistant') + t('common.prompt')}
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -1,15 +1,18 @@
 import { isMac } from '@renderer/config/constant'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { useRuntime } from '@renderer/hooks/useStore'
 import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'

 type Props = PropsWithChildren & JSX.IntrinsicElements['div']

-const navbarBackgroundColor = isMac ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
-
 export const Navbar: FC<Props> = ({ children, ...props }) => {
  const { minappShow } = useRuntime()
-  const backgroundColor = minappShow ? 'var(--navbar-background)' : navbarBackgroundColor
+  const { windowStyle } = useSettings()
+
+  const macTransparentWindow = isMac && windowStyle === 'transparent'
+  const navbarBgColor = macTransparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
+  const backgroundColor = minappShow ? 'var(--navbar-background)' : navbarBgColor

  return (
    <NavbarContainer {...props} style={{ backgroundColor }}>
@@ -39,7 +42,6 @@ const NavbarContainer = styled.div`
  margin-left: ${isMac ? 'calc(var(--sidebar-width) * -1)' : 0};
  padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
  border-bottom: 0.5px solid var(--color-border);
-  background-color: ${navbarBackgroundColor};
  transition: background-color 0.3s ease;
  -webkit-app-region: drag;
 `
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -1,49 +1,67 @@
 import { TranslationOutlined } from '@ant-design/icons'
 import { isMac } from '@renderer/config/constant'
-import { AppLogo, isLocalAi } from '@renderer/config/env'
+import { isLocalAi, UserAvatar } from '@renderer/config/env'
 import useAvatar from '@renderer/hooks/useAvatar'
-import { useRuntime } from '@renderer/hooks/useStore'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useRuntime, useShowAssistants } from '@renderer/hooks/useStore'
 import { Avatar } from 'antd'
 import { FC } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'

 import UserPopup from '../Popups/UserPopup'

-const sidebarBackgroundColor = isMac ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
-
 const Sidebar: FC = () => {
  const { pathname } = useLocation()
  const avatar = useAvatar()
  const { minappShow } = useRuntime()
+  const { toggleShowAssistants } = useShowAssistants()
+  const { generating } = useRuntime()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { windowStyle } = useSettings()

  const isRoute = (path: string): string => (pathname === path ? 'active' : '')

-  const onEditUser = () => {
-    UserPopup.show()
+  const onEditUser = () => UserPopup.show()
+
+  const macTransparentWindow = isMac && windowStyle === 'transparent'
+  const sidebarBgColor = macTransparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
+
+  const to = (path: string) => {
+    if (generating) {
+      window.message.warning({ content: t('message.switch.disabled'), key: 'switch-assistant' })
+      return
+    }
+    navigate(path)
+  }
+
+  const onToggleShowAssistants = () => {
+    pathname === '/' ? toggleShowAssistants() : navigate('/')
  }

  return (
-    <Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBackgroundColor }}>
-      <AvatarImg src={avatar || AppLogo} draggable={false} className="nodrag" onClick={onEditUser} />
+    <Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBgColor }}>
+      <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
      <MainMenus>
        <Menus>
-          <StyledLink to="/">
+          <StyledLink onClick={onToggleShowAssistants}>
            <Icon className={isRoute('/')}>
              <i className="iconfont icon-chat"></i>
            </Icon>
          </StyledLink>
-          <StyledLink to="/agents">
+          <StyledLink onClick={() => to('/agents')}>
            <Icon className={isRoute('/agents')}>
              <i className="iconfont icon-business-smart-assistant"></i>
            </Icon>
          </StyledLink>
-          <StyledLink to="/translate">
+          <StyledLink onClick={() => to('/translate')}>
            <Icon className={isRoute('/translate')}>
              <TranslationOutlined />
            </Icon>
          </StyledLink>
-          <StyledLink to="/apps">
+          <StyledLink onClick={() => to('/apps')}>
            <Icon className={isRoute('/apps')}>
              <i className="iconfont icon-appstore"></i>
            </Icon>
@@ -51,7 +69,7 @@ const Sidebar: FC = () => {
        </Menus>
      </MainMenus>
      <Menus>
-        <StyledLink to={isLocalAi ? '/settings/assistant' : '/settings/provider'}>
+        <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
          <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
            <i className="iconfont icon-setting"></i>
          </Icon>
@@ -72,7 +90,6 @@ const Container = styled.div`
  -webkit-app-region: drag !important;
  border-right: 0.5px solid var(--color-border);
  margin-top: ${isMac ? 'var(--navbar-height)' : 0};
-  background-color: ${sidebarBackgroundColor};
  transition: background-color 0.3s ease;
 `

@@ -133,7 +150,7 @@ const Icon = styled.div`
  }
 `

-const StyledLink = styled(Link)`
+const StyledLink = styled.div`
  text-decoration: none;
  -webkit-app-region: none;
  &* {
--- a/src/renderer/src/config/env.ts
+++ b/src/renderer/src/config/env.ts
@@ -1,3 +1,4 @@
+export { default as UserAvatar } from '@renderer/assets/images/avatar.png'
 export { default as AppLogo } from '@renderer/assets/images/logo.png'

 export const APP_NAME = 'Cherry Studio'
--- a/src/renderer/src/config/minapp.ts
+++ b/src/renderer/src/config/minapp.ts
@@ -0,0 +1,79 @@
+import AiAssistantAppLogo from '@renderer/assets/images/apps/360-ai.png'
+import AiSearchAppLogo from '@renderer/assets/images/apps/ai-search.png'
+import BaiduAiAppLogo from '@renderer/assets/images/apps/baidu-ai.png'
+import DevvAppLogo from '@renderer/assets/images/apps/devv.png'
+import MetasoAppLogo from '@renderer/assets/images/apps/metaso.webp'
+import PerplexityAppLogo from '@renderer/assets/images/apps/perplexity.webp'
+import SensetimeAppLogo from '@renderer/assets/images/apps/sensetime.png'
+import SparkDeskAppLogo from '@renderer/assets/images/apps/sparkdesk.png'
+import TiangongAiLogo from '@renderer/assets/images/apps/tiangong.png'
+import TencentYuanbaoAppLogo from '@renderer/assets/images/apps/yuanbao.png'
+import MinApp from '@renderer/components/MinApp'
+import { PROVIDER_CONFIG } from '@renderer/config/provider'
+import { MinAppType } from '@renderer/types'
+
+const _apps: MinAppType[] = [
+  {
+    name: 'AI 助手',
+    logo: AiAssistantAppLogo,
+    url: 'https://bot.360.com/'
+  },
+  {
+    name: '文心一言',
+    logo: BaiduAiAppLogo,
+    url: 'https://yiyan.baidu.com/'
+  },
+  {
+    name: 'SparkDesk',
+    logo: SparkDeskAppLogo,
+    url: 'https://xinghuo.xfyun.cn/desk'
+  },
+  {
+    name: '腾讯元宝',
+    logo: TencentYuanbaoAppLogo,
+    url: 'https://yuanbao.tencent.com/chat'
+  },
+  {
+    name: '商量',
+    logo: SensetimeAppLogo,
+    url: 'https://chat.sensetime.com/wb/chat'
+  },
+  {
+    name: '360AI搜索',
+    logo: AiSearchAppLogo,
+    url: 'https://so.360.com/'
+  },
+  {
+    name: '秘塔AI搜索',
+    logo: MetasoAppLogo,
+    url: 'https://metaso.cn/'
+  },
+  {
+    name: '天工AI',
+    logo: TiangongAiLogo,
+    url: 'https://www.tiangong.cn/'
+  },
+  {
+    name: 'DEVV_',
+    logo: DevvAppLogo,
+    url: 'https://devv.ai/'
+  },
+  {
+    name: 'perplexity',
+    logo: PerplexityAppLogo,
+    url: 'https://www.perplexity.ai/'
+  }
+]
+
+export function getAllMinApps() {
+  const list: MinAppType[] = (Object.entries(PROVIDER_CONFIG) as any[])
+    .filter(([, config]) => config.app)
+    .map(([key, config]) => ({ id: key, ...config.app }))
+    .concat(_apps)
+  return list
+}
+
+export function startMinAppById(id: string) {
+  const app = getAllMinApps().find((app) => app?.id === id)
+  app && MinApp.start(app)
+}
--- a/src/renderer/src/config/models.ts
+++ b/src/renderer/src/config/models.ts
@@ -1,37 +1,66 @@
 import { Model } from '@renderer/types'

-type SystemModel = Model & { enabled: boolean }
+const TEXT_TO_IMAGE_REGEX = /flux|diffusion|stabilityai|sd-turbo|dall|cogview/i
+const EMBEDDING_REGEX = /embedding/i

-export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
+export const SYSTEM_MODELS: Record<string, Model[]> = {
  ollama: [],
+  silicon: [
+    {
+      id: 'Qwen/Qwen2-7B-Instruct',
+      provider: 'silicon',
+      name: 'Qwen2-7B-Instruct',
+      group: 'Qwen2'
+    },
+    {
+      id: 'Qwen/Qwen2-72B-Instruct',
+      provider: 'silicon',
+      name: 'Qwen2-72B-Instruct',
+      group: 'Qwen2'
+    },
+    {
+      id: 'THUDM/glm-4-9b-chat',
+      provider: 'silicon',
+      name: 'GLM-4-9B-Chat',
+      group: 'GLM'
+    },
+    {
+      id: 'deepseek-ai/DeepSeek-V2-Chat',
+      provider: 'silicon',
+      name: 'DeepSeek-V2-Chat',
+      group: 'DeepSeek'
+    },
+    {
+      id: 'deepseek-ai/DeepSeek-Coder-V2-Instruct',
+      provider: 'silicon',
+      name: 'DeepSeek-Coder-V2-Instruct',
+      group: 'DeepSeek'
+    }
+  ],
  openai: [
    {
      id: 'gpt-4o',
      provider: 'openai',
      name: ' GPT-4o',
-      group: 'GPT 4o',
-      enabled: true
+      group: 'GPT 4o'
    },
    {
      id: 'gpt-4o-mini',
      provider: 'openai',
      name: ' GPT-4o-mini',
-      group: 'GPT 4o',
-      enabled: true
+      group: 'GPT 4o'
    },
    {
      id: 'gpt-4-turbo',
      provider: 'openai',
      name: ' GPT-4 Turbo',
-      group: 'GPT 4',
-      enabled: true
+      group: 'GPT 4'
    },
    {
      id: 'gpt-4',
      provider: 'openai',
      name: ' GPT-4',
-      group: 'GPT 4',
-      enabled: true
+      group: 'GPT 4'
    }
  ],
  gemini: [
@@ -39,15 +68,13 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'gemini-1.5-flash',
      provider: 'gemini',
      name: 'Gemini 1.5 Flash',
-      group: 'Gemini 1.5',
-      enabled: true
+      group: 'Gemini 1.5'
    },
    {
      id: 'gemini-1.5-pro-exp-0801',
      provider: 'gemini',
      name: 'Gemini 1.5 Pro Experimental 0801',
-      group: 'Gemini 1.5',
-      enabled: true
+      group: 'Gemini 1.5'
    }
  ],
  anthropic: [
@@ -55,143 +82,25 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'claude-3-5-sonnet-20240620',
      provider: 'anthropic',
      name: 'Claude 3.5 Sonnet',
-      group: 'Claude 3.5',
-      enabled: true
+      group: 'Claude 3.5'
    },
    {
      id: 'claude-3-opus-20240229',
      provider: 'anthropic',
      name: 'Claude 3 Opus',
-      group: 'Claude 3',
-      enabled: true
+      group: 'Claude 3'
    },
    {
      id: 'claude-3-sonnet-20240229',
      provider: 'anthropic',
      name: 'Claude 3 Sonnet',
-      group: 'Claude 3',
-      enabled: true
+      group: 'Claude 3'
    },
    {
      id: 'claude-3-haiku-20240307',
      provider: 'anthropic',
      name: 'Claude 3 Haiku',
-      group: 'Claude 3',
-      enabled: true
-    }
-  ],
-  silicon: [
-    {
-      id: 'Qwen/Qwen2-7B-Instruct',
-      provider: 'silicon',
-      name: 'Qwen2-7B-Instruct',
-      group: 'Qwen2',
-      enabled: true
-    },
-    {
-      id: 'Qwen/Qwen2-1.5B-Instruct',
-      provider: 'silicon',
-      name: 'Qwen2-1.5B-Instruct',
-      group: 'Qwen2',
-      enabled: false
-    },
-    {
-      id: 'Qwen/Qwen1.5-7B-Chat',
-      provider: 'silicon',
-      name: 'Qwen1.5-7B-Chat',
-      group: 'Qwen1.5',
-      enabled: false
-    },
-    {
-      id: 'Qwen/Qwen2-72B-Instruct',
-      provider: 'silicon',
-      name: 'Qwen2-72B-Instruct',
-      group: 'Qwen2',
-      enabled: true
-    },
-    {
-      id: 'Qwen/Qwen2-57B-A14B-Instruct',
-      provider: 'silicon',
-      name: 'Qwen2-57B-A14B-Instruct',
-      group: 'Qwen2',
-      enabled: false
-    },
-    {
-      id: 'Qwen/Qwen1.5-110B-Chat',
-      provider: 'silicon',
-      name: 'Qwen1.5-110B-Chat',
-      group: 'Qwen1.5',
-      enabled: false
-    },
-    {
-      id: 'Qwen/Qwen1.5-32B-Chat',
-      provider: 'silicon',
-      name: 'Qwen1.5-32B-Chat',
-      group: 'Qwen1.5',
-      enabled: false
-    },
-    {
-      id: 'Qwen/Qwen1.5-14B-Chat',
-      provider: 'silicon',
-      name: 'Qwen1.5-14B-Chat',
-      group: 'Qwen1.5',
-      enabled: false
-    },
-    {
-      id: 'deepseek-ai/DeepSeek-V2-Chat',
-      provider: 'silicon',
-      name: 'DeepSeek-V2-Chat',
-      group: 'DeepSeek',
-      enabled: false
-    },
-    {
-      id: 'deepseek-ai/DeepSeek-Coder-V2-Instruct',
-      provider: 'silicon',
-      name: 'DeepSeek-Coder-V2-Instruct',
-      group: 'DeepSeek',
-      enabled: false
-    },
-    {
-      id: 'deepseek-ai/deepseek-llm-67b-chat',
-      provider: 'silicon',
-      name: 'Deepseek-LLM-67B-Chat',
-      group: 'DeepSeek',
-      enabled: false
-    },
-    {
-      id: 'THUDM/glm-4-9b-chat',
-      provider: 'silicon',
-      name: 'GLM-4-9B-Chat',
-      group: 'GLM',
-      enabled: true
-    },
-    {
-      id: 'THUDM/chatglm3-6b',
-      provider: 'silicon',
-      name: 'GhatGLM3-6B',
-      group: 'GLM',
-      enabled: false
-    },
-    {
-      id: '01-ai/Yi-1.5-9B-Chat-16K',
-      provider: 'silicon',
-      name: 'Yi-1.5-9B-Chat-16K',
-      group: 'Yi',
-      enabled: false
-    },
-    {
-      id: '01-ai/Yi-1.5-6B-Chat',
-      provider: 'silicon',
-      name: 'Yi-1.5-6B-Chat',
-      group: 'Yi',
-      enabled: false
-    },
-    {
-      id: '01-ai/Yi-1.5-34B-Chat-16K',
-      provider: 'silicon',
-      name: 'Yi-1.5-34B-Chat-16K',
-      group: 'Yi',
-      enabled: false
+      group: 'Claude 3'
    }
  ],
  deepseek: [
@@ -199,15 +108,13 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'deepseek-chat',
      provider: 'deepseek',
      name: 'DeepSeek Chat',
-      group: 'DeepSeek Chat',
-      enabled: true
+      group: 'DeepSeek Chat'
    },
    {
      id: 'deepseek-coder',
      provider: 'deepseek',
      name: 'DeepSeek Coder',
-      group: 'DeepSeek Coder',
-      enabled: true
+      group: 'DeepSeek Coder'
    }
  ],
  yi: [
@@ -215,87 +122,87 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'yi-large',
      provider: 'yi',
      name: 'Yi-Large',
-      group: 'Yi',
-      enabled: false
+      group: 'Yi'
    },
    {
      id: 'yi-large-turbo',
      provider: 'yi',
      name: 'Yi-Large-Turbo',
-      group: 'Yi',
-      enabled: true
+      group: 'Yi'
    },
    {
      id: 'yi-large-rag',
      provider: 'yi',
      name: 'Yi-Large-Rag',
-      group: 'Yi',
-      enabled: false
+      group: 'Yi'
    },
    {
      id: 'yi-medium',
      provider: 'yi',
      name: 'Yi-Medium',
-      group: 'Yi',
-      enabled: true
+      group: 'Yi'
    },
    {
      id: 'yi-medium-200k',
      provider: 'yi',
      name: 'Yi-Medium-200k',
-      group: 'Yi',
-      enabled: false
+      group: 'Yi'
    },
    {
      id: 'yi-spark',
      provider: 'yi',
      name: 'Yi-Spark',
-      group: 'Yi',
-      enabled: false
+      group: 'Yi'
    }
  ],
  zhipu: [
-    {
-      id: 'glm-4-0520',
-      provider: 'zhipu',
-      name: 'GLM-4-0520',
-      group: 'GLM',
-      enabled: true
-    },
    {
      id: 'glm-4',
      provider: 'zhipu',
      name: 'GLM-4',
-      group: 'GLM',
-      enabled: false
+      group: 'GLM-4'
    },
    {
-      id: 'glm-4-airx',
+      id: 'glm-4-plus',
      provider: 'zhipu',
-      name: 'GLM-4-AirX',
-      group: 'GLM',
-      enabled: false
+      name: 'GLM-4-Plus',
+      group: 'GLM-4'
    },
    {
      id: 'glm-4-air',
      provider: 'zhipu',
      name: 'GLM-4-Air',
-      group: 'GLM',
-      enabled: true
+      group: 'GLM-4'
+    },
+    {
+      id: 'glm-4-airx',
+      provider: 'zhipu',
+      name: 'GLM-4-AirX',
+      group: 'GLM-4'
+    },
+    {
+      id: 'glm-4-flash',
+      provider: 'zhipu',
+      name: 'GLM-4-Flash',
+      group: 'GLM-4'
    },
    {
      id: 'glm-4v',
      provider: 'zhipu',
-      name: 'GLM-4V',
-      group: 'GLM',
-      enabled: false
+      name: 'GLM 4V',
+      group: 'GLM-4v'
+    },
+    {
+      id: 'glm-4v-plus',
+      provider: 'zhipu',
+      name: 'GLM-4V-Plus',
+      group: 'GLM-4v'
    },
    {
      id: 'glm-4-alltools',
      provider: 'zhipu',
      name: 'GLM-4-AllTools',
-      group: 'GLM',
-      enabled: false
+      group: 'GLM-4-AllTools'
    }
  ],
  moonshot: [
@@ -303,22 +210,19 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'moonshot-v1-8k',
      provider: 'moonshot',
      name: 'Moonshot V1 8k',
-      group: 'Moonshot V1',
-      enabled: true
+      group: 'Moonshot V1'
    },
    {
      id: 'moonshot-v1-32k',
      provider: 'moonshot',
      name: 'Moonshot V1 32k',
-      group: 'Moonshot V1',
-      enabled: true
+      group: 'Moonshot V1'
    },
    {
      id: 'moonshot-v1-128k',
      provider: 'moonshot',
      name: 'Moonshot V1 128k',
-      group: 'Moonshot V1',
-      enabled: true
+      group: 'Moonshot V1'
    }
  ],
  baichuan: [
@@ -326,22 +230,19 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'Baichuan4',
      provider: 'baichuan',
      name: 'Baichuan4',
-      group: 'Baichuan4',
-      enabled: true
+      group: 'Baichuan4'
    },
    {
      id: 'Baichuan3-Turbo',
      provider: 'baichuan',
      name: 'Baichuan3 Turbo',
-      group: 'Baichuan3',
-      enabled: true
+      group: 'Baichuan3'
    },
    {
      id: 'Baichuan3-Turbo-128k',
      provider: 'baichuan',
      name: 'Baichuan3 Turbo 128k',
-      group: 'Baichuan3',
-      enabled: true
+      group: 'Baichuan3'
    }
  ],
  dashscope: [
@@ -349,22 +250,19 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'qwen-turbo',
      provider: 'dashscope',
      name: 'Qwen Turbo',
-      group: 'Qwen',
-      enabled: true
+      group: 'Qwen'
    },
    {
      id: 'qwen-plus',
      provider: 'dashscope',
      name: 'Qwen Plus',
-      group: 'Qwen',
-      enabled: true
+      group: 'Qwen'
    },
    {
      id: 'qwen-max',
      provider: 'dashscope',
      name: 'Qwen Max',
-      group: 'Qwen',
-      enabled: true
+      group: 'Qwen'
    }
  ],
  stepfun: [
@@ -372,15 +270,13 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'step-1-8k',
      provider: 'stepfun',
      name: 'Step 1 8K',
-      group: 'Step 1',
-      enabled: true
+      group: 'Step 1'
    },
    {
      id: 'step-1-flash',
      provider: 'stepfun',
      name: 'Step 1 Flash',
-      group: 'Step 1',
-      enabled: true
+      group: 'Step 1'
    }
  ],
  doubao: [],
@@ -389,29 +285,25 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'abab6.5s-chat',
      provider: 'minimax',
      name: 'abab6.5s',
-      group: 'abab6',
-      enabled: true
+      group: 'abab6'
    },
    {
      id: 'abab6.5g-chat',
      provider: 'minimax',
      name: 'abab6.5g',
-      group: 'abab6',
-      enabled: true
+      group: 'abab6'
    },
    {
      id: 'abab6.5t-chat',
      provider: 'minimax',
      name: 'abab6.5t',
-      group: 'abab6',
-      enabled: true
+      group: 'abab6'
    },
    {
      id: 'abab5.5s-chat',
      provider: 'minimax',
      name: 'abab5.5s',
-      group: 'abab5',
-      enabled: true
+      group: 'abab5'
    }
  ],
  aihubmix: [
@@ -419,15 +311,13 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'gpt-4o-mini',
      provider: 'aihubmix',
      name: 'GPT-4o Mini',
-      group: 'GPT-4o',
-      enabled: true
+      group: 'GPT-4o'
    },
    {
      id: 'aihubmix-Llama-3-70B-Instruct',
      provider: 'aihubmix',
      name: 'Llama 3 70B Instruct',
-      group: 'Llama3',
-      enabled: true
+      group: 'Llama3'
    }
  ],
  openrouter: [
@@ -435,36 +325,31 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'google/gemma-2-9b-it:free',
      provider: 'openrouter',
      name: 'Google: Gemma 2 9B',
-      group: 'Gemma',
-      enabled: true
+      group: 'Gemma'
    },
    {
      id: 'microsoft/phi-3-mini-128k-instruct:free',
      provider: 'openrouter',
      name: 'Phi-3 Mini 128K Instruct',
-      group: 'Phi',
-      enabled: true
+      group: 'Phi'
    },
    {
      id: 'microsoft/phi-3-medium-128k-instruct:free',
      provider: 'openrouter',
      name: 'Phi-3 Medium 128K Instruct',
-      group: 'Phi',
-      enabled: true
+      group: 'Phi'
    },
    {
      id: 'meta-llama/llama-3-8b-instruct:free',
      provider: 'openrouter',
      name: 'Meta: Llama 3 8B Instruct',
-      group: 'Llama3',
-      enabled: true
+      group: 'Llama3'
    },
    {
      id: 'mistralai/mistral-7b-instruct:free',
      provider: 'openrouter',
      name: 'Mistral: Mistral 7B Instruct',
-      group: 'Mistral',
-      enabled: true
+      group: 'Mistral'
    }
  ],
  groq: [
@@ -472,29 +357,33 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
      id: 'llama3-8b-8192',
      provider: 'groq',
      name: 'LLaMA3 8B',
-      group: 'Llama3',
-      enabled: false
+      group: 'Llama3'
    },
    {
      id: 'llama3-70b-8192',
      provider: 'groq',
      name: 'LLaMA3 70B',
-      group: 'Llama3',
-      enabled: true
+      group: 'Llama3'
    },
    {
      id: 'mixtral-8x7b-32768',
      provider: 'groq',
      name: 'Mixtral 8x7B',
-      group: 'Mixtral',
-      enabled: false
+      group: 'Mixtral'
    },
    {
      id: 'gemma-7b-it',
      provider: 'groq',
      name: 'Gemma 7B',
-      group: 'Gemma',
-      enabled: false
+      group: 'Gemma'
    }
  ]
 }
+
+export function isTextToImageModel(model: Model): boolean {
+  return TEXT_TO_IMAGE_REGEX.test(model.id)
+}
+
+export function isEmbeddingModel(model: Model): boolean {
+  return EMBEDDING_REGEX.test(model.id)
+}
--- a/src/renderer/src/config/provider.ts
+++ b/src/renderer/src/config/provider.ts
@@ -2,7 +2,7 @@ import BaicuanAppLogo from '@renderer/assets/images/apps/baixiaoying.webp'
 import KimiAppLogo from '@renderer/assets/images/apps/kimi.jpg'
 import YuewenAppLogo from '@renderer/assets/images/apps/yuewen.png'
 import BaichuanModelLogo from '@renderer/assets/images/models/baichuan.png'
-import ChatGLMModelLogo from '@renderer/assets/images/models/chatglm.jpeg'
+import ChatGLMModelLogo from '@renderer/assets/images/models/chatglm.png'
 import ChatGPTModelLogo from '@renderer/assets/images/models/chatgpt.jpeg'
 import ClaudeModelLogo from '@renderer/assets/images/models/claude.png'
 import DeepSeekModelLogo from '@renderer/assets/images/models/deepseek.png'
--- a/src/renderer/src/providers/AntdProvider.tsx
+++ b/src/renderer/src/providers/AntdProvider.tsx
--- a/src/renderer/src/providers/ThemeProvider.tsx
+++ b/src/renderer/src/providers/ThemeProvider.tsx
--- a/src/renderer/src/hooks/useModel.ts
+++ b/src/renderer/src/hooks/useModel.ts
@@ -0,0 +1,7 @@
+import { useProviders } from './useProvider'
+
+export function useModel(id?: string) {
+  const { providers } = useProviders()
+  const allModels = providers.map((p) => p.models).flat()
+  return allModels.find((m) => m.id === id)
+}
--- a/src/renderer/src/hooks/useSettings.ts
+++ b/src/renderer/src/hooks/useSettings.ts
@@ -3,6 +3,8 @@ import {
  SendMessageShortcut,
  setSendMessageShortcut as _setSendMessageShortcut,
  setTheme,
+  setTopicPosition,
+  setWindowStyle,
  ThemeMode
 } from '@renderer/store/settings'

@@ -17,6 +19,12 @@ export function useSettings() {
    },
    setTheme(theme: ThemeMode) {
      dispatch(setTheme(theme))
+    },
+    setWindowStyle(windowStyle: 'transparent' | 'opaque') {
+      dispatch(setWindowStyle(windowStyle))
+    },
+    setTopicPosition(topicPosition: 'left' | 'right') {
+      dispatch(setTopicPosition(topicPosition))
    }
  }
 }
--- a/src/renderer/src/hooks/useStore.ts
+++ b/src/renderer/src/hooks/useStore.ts
@@ -1,17 +1,5 @@
 import { useAppDispatch, useAppSelector } from '@renderer/store'
-import { setShowRightSidebar, toggleRightSidebar, toggleShowAssistants } from '@renderer/store/settings'
-
-export function useShowRightSidebar() {
-  const showRightSidebar = useAppSelector((state) => state.settings.showRightSidebar)
-  const dispatch = useAppDispatch()
-
-  return {
-    rightSidebarShown: showRightSidebar,
-    toggleRightSidebar: () => dispatch(toggleRightSidebar()),
-    showRightSidebar: () => dispatch(setShowRightSidebar(true)),
-    hideRightSidebar: () => dispatch(setShowRightSidebar(false))
-  }
-}
+import { setShowTopics, toggleShowAssistants, toggleShowTopics } from '@renderer/store/settings'

 export function useShowAssistants() {
  const showAssistants = useAppSelector((state) => state.settings.showAssistants)
@@ -23,6 +11,17 @@ export function useShowAssistants() {
  }
 }

+export function useShowTopics() {
+  const showTopics = useAppSelector((state) => state.settings.showTopics)
+  const dispatch = useAppDispatch()
+
+  return {
+    showTopics,
+    setShowTopics: (show: boolean) => dispatch(setShowTopics(show)),
+    toggleShowTopics: () => dispatch(toggleShowTopics())
+  }
+}
+
 export function useRuntime() {
  return useAppSelector((state) => state.runtime)
 }
--- a/src/renderer/src/hooks/useTopic.ts
+++ b/src/renderer/src/hooks/useTopic.ts
@@ -2,9 +2,12 @@ import { Assistant, Topic } from '@renderer/types'
 import { find } from 'lodash'
 import { useEffect, useState } from 'react'

+import { useAssistant } from './useAssistant'
+
 let _activeTopic: Topic

-export function useActiveTopic(assistant: Assistant) {
+export function useActiveTopic(_assistant: Assistant) {
+  const { assistant } = useAssistant(_assistant.id)
  const [activeTopic, setActiveTopic] = useState(_activeTopic || assistant?.topics[0])

  useEffect(() => {
--- a/src/renderer/src/i18n/index.ts
+++ b/src/renderer/src/i18n/index.ts
@@ -29,7 +29,9 @@ const resources = {
        select: 'Select',
        search: 'Search',
        default: 'Default',
-        warning: 'Warning'
+        warning: 'Warning',
+        back: 'Back',
+        chat: 'Chat'
      },
      button: {
        add: 'Add',
@@ -66,6 +68,7 @@ const resources = {
        'topics.edit.placeholder': 'Enter new name',
        'topics.delete.all.title': 'Delete all topics',
        'topics.delete.all.content': 'Are you sure you want to delete all topics?',
+        'topics.list': 'Topic List',
        'input.new_topic': 'New Topic',
        'input.topics': ' Topics ',
        'input.clear': 'Clear',
@@ -77,6 +80,7 @@ const resources = {
        'input.send': 'Send',
        'input.pause': 'Pause',
        'input.settings': 'Settings',
+        'input.upload': 'Upload image png、jpg、jpeg',
        'input.context_count.tip': 'Context Count',
        'input.estimated_tokens.tip': 'Estimated tokens',
        'settings.temperature': 'Temperature',
@@ -147,6 +151,8 @@ const resources = {
        'general.user_name': 'User Name',
        'general.user_name.placeholder': 'Enter your name',
        'general.backup.title': 'Data Backup and Recovery',
+        'general.backup.button': 'Backup',
+        'general.restore.button': 'Restore',
        'general.reset.title': 'Data Reset',
        'general.reset.button': 'Reset',
        'provider.api_key': 'API Key',
@@ -198,7 +204,13 @@ const resources = {
        'theme.dark': 'Dark',
        'theme.light': 'Light',
        'theme.auto': 'Auto',
-        'font_size.title': 'Message Font Size'
+        'theme.window.style.title': 'Window Style',
+        'theme.window.style.transparent': 'Transparent Window',
+        'theme.window.style.opaque': 'Opaque Window',
+        'font_size.title': 'Message Font Size',
+        'topic.position': 'Topic Position',
+        'topic.position.left': 'Left',
+        'topic.position.right': 'Right'
      },
      translate: {
        title: 'Translation',
@@ -266,7 +278,9 @@ const resources = {
        select: '选择',
        search: '搜索',
        default: '默认',
-        warning: '警告'
+        warning: '警告',
+        back: '返回',
+        chat: '聊天'
      },
      button: {
        add: '添加',
@@ -303,6 +317,7 @@ const resources = {
        'topics.edit.placeholder': '输入新名称',
        'topics.delete.all.title': '删除所有话题',
        'topics.delete.all.content': '确定要删除所有话题吗?',
+        'topics.list': '话题列表',
        'input.new_topic': '新话题',
        'input.topics': ' 话题 ',
        'input.clear': '清除',
@@ -314,6 +329,7 @@ const resources = {
        'input.send': '发送',
        'input.pause': '暂停',
        'input.settings': '设置',
+        'input.upload': '上传图片 png、jpg、jpeg',
        'input.context_count.tip': '上下文数',
        'input.estimated_tokens.tip': '预估 token 数',
        'settings.temperature': '模型温度',
@@ -385,6 +401,8 @@ const resources = {
        'general.user_name': '用户名',
        'general.user_name.placeholder': '请输入用户名',
        'general.backup.title': '数据备份与恢复',
+        'general.backup.button': '备份',
+        'general.restore.button': '恢复',
        'general.reset.title': '重置数据',
        'general.reset.button': '重置',
        'provider.api_key': 'API 密钥',
@@ -436,7 +454,13 @@ const resources = {
        'theme.dark': '深色主题',
        'theme.light': '浅色主题',
        'theme.auto': '跟随系统',
-        'font_size.title': '消息字体大小'
+        'theme.window.style.title': '窗口样式',
+        'theme.window.style.transparent': '透明窗口',
+        'theme.window.style.opaque': '不透明窗口',
+        'font_size.title': '消息字体大小',
+        'topic.position': '话题位置',
+        'topic.position.left': '左侧',
+        'topic.position.right': '右侧'
      },
      translate: {
        title: '翻译',
--- a/src/renderer/src/pages/apps/App.tsx
+++ b/src/renderer/src/pages/apps/App.tsx
@@ -1,5 +1,5 @@
 import MinApp from '@renderer/components/MinApp'
-import { useTheme } from '@renderer/providers/ThemeProvider'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { MinAppType } from '@renderer/types'
 import { FC } from 'react'
 import styled from 'styled-components'
@@ -12,13 +12,6 @@ const App: FC<Props> = ({ app }) => {
  const { theme } = useTheme()

  const onClick = () => {
-    const websiteReg = /claude|chatgpt|groq/i
-
-    if (websiteReg.test(app.url)) {
-      window.api.minApp({ url: app.url, windowOptions: { title: app.name } })
-      return
-    }
-
    MinApp.start(app)
  }

--- a/src/renderer/src/pages/apps/AppsPage.tsx
+++ b/src/renderer/src/pages/apps/AppsPage.tsx
@@ -1,17 +1,7 @@
 import { SearchOutlined } from '@ant-design/icons'
-import AiAssistantAppLogo from '@renderer/assets/images/apps/360-ai.png'
-import AiSearchAppLogo from '@renderer/assets/images/apps/ai-search.png'
-import BaiduAiAppLogo from '@renderer/assets/images/apps/baidu-ai.png'
-import DevvAppLogo from '@renderer/assets/images/apps/devv.png'
-import MetasoAppLogo from '@renderer/assets/images/apps/metaso.webp'
-import SensetimeAppLogo from '@renderer/assets/images/apps/sensetime.png'
-import SparkDeskAppLogo from '@renderer/assets/images/apps/sparkdesk.png'
-import TiangongAiLogo from '@renderer/assets/images/apps/tiangong.png'
-import TencentYuanbaoAppLogo from '@renderer/assets/images/apps/yuanbao.png'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { Center } from '@renderer/components/Layout'
-import { PROVIDER_CONFIG } from '@renderer/config/provider'
-import { MinAppType } from '@renderer/types'
+import { getAllMinApps } from '@renderer/config/minapp'
 import { Empty, Input } from 'antd'
 import { isEmpty } from 'lodash'
 import { FC, useState } from 'react'
@@ -20,63 +10,12 @@ import styled from 'styled-components'

 import App from './App'

-const _apps: MinAppType[] = [
-  {
-    name: 'AI 助手',
-    logo: AiAssistantAppLogo,
-    url: 'https://bot.360.com/'
-  },
-  {
-    name: '文心一言',
-    logo: BaiduAiAppLogo,
-    url: 'https://yiyan.baidu.com/'
-  },
-  {
-    name: 'SparkDesk',
-    logo: SparkDeskAppLogo,
-    url: 'https://xinghuo.xfyun.cn/desk'
-  },
-  {
-    name: '腾讯元宝',
-    logo: TencentYuanbaoAppLogo,
-    url: 'https://yuanbao.tencent.com/chat'
-  },
-  {
-    name: '商量',
-    logo: SensetimeAppLogo,
-    url: 'https://chat.sensetime.com/wb/chat'
-  },
-  {
-    name: '360AI搜索',
-    logo: AiSearchAppLogo,
-    url: 'https://so.360.com/'
-  },
-  {
-    name: '秘塔AI搜索',
-    logo: MetasoAppLogo,
-    url: 'https://metaso.cn/'
-  },
-  {
-    name: '天工AI',
-    logo: TiangongAiLogo,
-    url: 'https://www.tiangong.cn/'
-  },
-  {
-    name: 'DEVV_',
-    logo: DevvAppLogo,
-    url: 'https://devv.ai/referral?code=dvl5am34asqo'
-  }
-]
+const list = getAllMinApps()

 const AppsPage: FC = () => {
  const { t } = useTranslation()
  const [search, setSearch] = useState('')

-  const list: MinAppType[] = (Object.entries(PROVIDER_CONFIG) as any[])
-    .filter(([, config]) => config.app)
-    .map(([key, config]) => ({ id: key, ...config.app }))
-    .concat(_apps)
-
  const apps = search
    ? list.filter(
        (app) => app.name.toLowerCase().includes(search.toLowerCase()) || app.url.includes(search.toLowerCase())
--- a/src/renderer/src/pages/home/Assistants.tsx
+++ b/src/renderer/src/pages/home/Assistants.tsx
@@ -1,12 +1,13 @@
-import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import { CopyOutlined, DeleteOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons'
+import DragableList from '@renderer/components/DragableList'
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
+import { useShowTopics } from '@renderer/hooks/useStore'
 import { getDefaultTopic, syncAsistantToAgent } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { useAppSelector } from '@renderer/store'
 import { Assistant } from '@renderer/types'
-import { droppableReorder, uuid } from '@renderer/utils'
+import { uuid } from '@renderer/utils'
 import { Dropdown } from 'antd'
 import { ItemType } from 'antd/es/menu/interface'
 import { last } from 'lodash'
@@ -23,7 +24,8 @@ interface Props {
 const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAssistant }) => {
  const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
  const generating = useAppSelector((state) => state.runtime.generating)
-  const { updateAssistant } = useAssistant(activeAssistant.id)
+  const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id)
+  const { showTopics, toggleShowTopics } = useShowTopics()
  const { t } = useTranslation()

  const onDelete = useCallback(
@@ -35,6 +37,15 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
    [assistants, onCreateAssistant, removeAssistant, setActiveAssistant]
  )

+  const onEditAssistant = useCallback(
+    async (assistant: Assistant) => {
+      const _assistant = await AssistantSettingPopup.show({ assistant })
+      updateAssistant(_assistant)
+      syncAsistantToAgent(_assistant)
+    },
+    [updateAssistant]
+  )
+
  const getMenuItems = useCallback(
    (assistant: Assistant) =>
      [
@@ -42,11 +53,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
          label: t('common.edit'),
          key: 'edit',
          icon: <EditOutlined />,
-          async onClick() {
-            const _assistant = await AssistantSettingPopup.show({ assistant })
-            updateAssistant(_assistant)
-            syncAsistantToAgent(_assistant)
-          }
+          onClick: () => onEditAssistant(assistant)
        },
        {
          label: t('common.duplicate'),
@@ -58,6 +65,19 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
            setActiveAssistant(_assistant)
          }
        },
+        {
+          label: t('chat.topics.delete.all.title'),
+          key: 'delete-all',
+          icon: <MinusCircleOutlined />,
+          onClick: () => {
+            window.modal.confirm({
+              title: t('chat.topics.delete.all.title'),
+              content: t('chat.topics.delete.all.content'),
+              okButtonProps: { danger: true },
+              onOk: removeAllTopics
+            })
+          }
+        },
        { type: 'divider' },
        {
          label: t('common.delete'),
@@ -67,19 +87,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
          onClick: () => onDelete(assistant)
        }
      ] as ItemType[],
-    [addAssistant, onDelete, setActiveAssistant, t, updateAssistant]
-  )
-
-  const onDragEnd = useCallback(
-    (result: DropResult) => {
-      if (result.destination) {
-        const sourceIndex = result.source.index
-        const destIndex = result.destination.index
-        const reorderAssistants = droppableReorder<Assistant>(assistants, sourceIndex, destIndex)
-        updateAssistants(reorderAssistants)
-      }
-    },
-    [assistants, updateAssistants]
+    [addAssistant, onDelete, onEditAssistant, removeAllTopics, setActiveAssistant, t]
  )

  const onSwitchAssistant = useCallback(
@@ -90,6 +98,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
          key: 'switch-assistant'
        })
      }
+
      EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)
      setActiveAssistant(assistant)
    },
@@ -98,33 +107,24 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs

  return (
    <Container>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="droppable">
-          {(provided) => (
-            <div {...provided.droppableProps} ref={provided.innerRef}>
-              {assistants.map((assistant, index) => (
-                <Draggable key={`draggable_${assistant.id}_${index}`} draggableId={assistant.id} index={index}>
-                  {(provided) => (
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
-                      <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
-                        <AssistantItem
-                          onClick={() => onSwitchAssistant(assistant)}
-                          className={assistant.id === activeAssistant?.id ? 'active' : ''}>
-                          <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
-                        </AssistantItem>
-                      </Dropdown>
-                    </div>
-                  )}
-                </Draggable>
-              ))}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
+      <DragableList list={assistants} onUpdate={updateAssistants}>
+        {(assistant) => {
+          const isCurrent = assistant.id === activeAssistant?.id
+          return (
+            <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
+              <AssistantItem onClick={() => onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}>
+                <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
+                <ArrowRightButton
+                  className={`arrow-button ${isCurrent && showTopics ? 'active' : ''}`}
+                  onClick={() => isCurrent && toggleShowTopics()}>
+                  <i className="iconfont icon-gridlines" />
+                </ArrowRightButton>
+                {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
+              </AssistantItem>
+            </Dropdown>
+          )
+        }}
+      </DragableList>
    </Container>
  )
 }
@@ -136,34 +136,38 @@ const Container = styled.div`
  max-width: var(--assistants-width);
  border-right: 0.5px solid var(--color-border);
  height: calc(100vh - var(--navbar-height));
-  padding: 10px;
  overflow-y: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
 `

 const AssistantItem = styled.div`
  display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: space-between;
  padding: 7px 10px;
  position: relative;
  border-radius: 4px;
+  margin: 0 10px;
+  padding-right: 35px;
  cursor: pointer;
  font-family: Ubuntu;
-  .anticon {
-    display: none;
-  }
-  &:hover {
-    background-color: var(--color-background-soft);
-    .anticon {
-      display: block;
-      color: var(--color-text-1);
-    }
+  .iconfont {
+    opacity: 0;
+    color: var(--color-text-3);
  }
  &.active {
    background-color: var(--color-background-mute);
-    cursor: pointer;
    .name {
      font-weight: 500;
    }
+    .topics-count {
+      display: none;
+    }
+    .iconfont {
+      opacity: 1;
+      color: var(--color-text-2);
+    }
  }
 `

@@ -173,6 +177,46 @@ const AssistantName = styled.div`
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
+  font-size: 13px;
+`
+
+const ArrowRightButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 4px;
+  position: absolute;
+  right: 10px;
+  top: 5px;
+  .anticon {
+    font-size: 14px;
+  }
+  &:hover {
+    background-color: var(--color-background);
+  }
+  &.active {
+    background-color: var(--color-background);
+  }
+`
+
+const TopicCount = styled.div`
+  color: var(--color-text-3);
+  font-size: 12px;
+  margin-right: 3px;
+  background-color: var(--color-background-mute);
+  opacity: 0.8;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 `

 export default Assistants
--- a/src/renderer/src/pages/home/Chat.tsx
+++ b/src/renderer/src/pages/home/Chat.tsx
@@ -1,29 +1,38 @@
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useActiveTopic } from '@renderer/hooks/useTopic'
-import { Assistant } from '@renderer/types'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowTopics } from '@renderer/hooks/useStore'
+import { Assistant, Topic } from '@renderer/types'
 import { Flex } from 'antd'
 import { FC } from 'react'
 import styled from 'styled-components'

 import Inputbar from './Inputbar/Inputbar'
 import Messages from './Messages/Messages'
-import RightSidebar from './RightSidebar'
+import Topics from './Topics'

 interface Props {
  assistant: Assistant
+  activeTopic: Topic
+  setActiveTopic: (topic: Topic) => void
 }

 const Chat: FC<Props> = (props) => {
  const { assistant } = useAssistant(props.assistant.id)
-  const { activeTopic, setActiveTopic } = useActiveTopic(assistant)
+  const { showTopics } = useShowTopics()
+  const { topicPosition } = useSettings()

  return (
    <Container id="chat">
+      {showTopics && topicPosition === 'left' && (
+        <Topics assistant={assistant} activeTopic={props.activeTopic} setActiveTopic={props.setActiveTopic} />
+      )}
      <Main vertical flex={1} justify="space-between">
-        <Messages assistant={assistant} topic={activeTopic} />
-        <Inputbar assistant={assistant} setActiveTopic={setActiveTopic} />
+        <Messages assistant={assistant} topic={props.activeTopic} setActiveTopic={props.setActiveTopic} />
+        <Inputbar assistant={assistant} setActiveTopic={props.setActiveTopic} />
      </Main>
-      <RightSidebar assistant={assistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
+      {showTopics && topicPosition === 'right' && (
+        <Topics assistant={assistant} activeTopic={props.activeTopic} setActiveTopic={props.setActiveTopic} />
+      )}
    </Container>
  )
 }
--- a/src/renderer/src/pages/home/Header.tsx
+++ b/src/renderer/src/pages/home/Header.tsx
@@ -1,42 +0,0 @@
-import { NavbarCenter } from '@renderer/components/app/Navbar'
-import { isMac } from '@renderer/config/constant'
-import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useShowAssistants } from '@renderer/hooks/useStore'
-import { Assistant } from '@renderer/types'
-import { removeLeadingEmoji } from '@renderer/utils'
-import { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-import SelectModelButton from './components/SelectModelButton'
-import { NewButton } from './HomePage'
-
-interface Props {
-  activeAssistant: Assistant
-}
-
-const HomeHeader: FC<Props> = ({ activeAssistant }) => {
-  const { assistant } = useAssistant(activeAssistant.id)
-  const { t } = useTranslation()
-  const { showAssistants, toggleShowAssistants } = useShowAssistants()
-
-  return (
-    <NavbarCenter style={{ paddingLeft: isMac ? 16 : 8 }}>
-      {!showAssistants && (
-        <NewButton onClick={toggleShowAssistants} style={{ marginRight: isMac ? 8 : 25 }}>
-          <i className="iconfont icon-showsidebarhoriz" />
-        </NewButton>
-      )}
-      <AssistantName>{removeLeadingEmoji(assistant?.name) || t('chat.default.name')}</AssistantName>
-      <SelectModelButton assistant={assistant} />
-    </NavbarCenter>
-  )
-}
-
-const AssistantName = styled.span`
-  margin-left: 5px;
-  margin-right: 10px;
-  font-family: Ubuntu;
-`
-
-export default HomeHeader
--- a/src/renderer/src/pages/home/HomePage.tsx
+++ b/src/renderer/src/pages/home/HomePage.tsx
@@ -1,28 +1,24 @@
-import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
-import { isMac, isWindows } from '@renderer/config/constant'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
-import { useShowAssistants, useShowRightSidebar } from '@renderer/hooks/useStore'
-import { useTheme } from '@renderer/providers/ThemeProvider'
-import { Assistant } from '@renderer/types'
+import { useShowAssistants } from '@renderer/hooks/useStore'
+import { useActiveTopic } from '@renderer/hooks/useTopic'
+import { Assistant, Topic } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Switch } from 'antd'
 import { FC, useState } from 'react'
 import styled from 'styled-components'

-import AddAssistantPopup from '../../components/Popups/AddAssistantPopup'
 import Assistants from './Assistants'
 import Chat from './Chat'
-import Navigation from './Header'
+import Navbar from './Navbar'

 let _activeAssistant: Assistant

 const HomePage: FC = () => {
  const { assistants, addAssistant } = useAssistants()
  const [activeAssistant, setActiveAssistant] = useState(_activeAssistant || assistants[0])
-  const { rightSidebarShown, toggleRightSidebar } = useShowRightSidebar()
-  const { showAssistants, toggleShowAssistants } = useShowAssistants()
+  const { showAssistants } = useShowAssistants()
  const { defaultAssistant } = useDefaultAssistant()
-  const { theme, toggleTheme } = useTheme()
+
+  const { activeTopic, setActiveTopic } = useActiveTopic(activeAssistant)

  _activeAssistant = activeAssistant

@@ -32,37 +28,18 @@ const HomePage: FC = () => {
    setActiveAssistant(assistant)
  }

-  const onCreateAssistant = async () => {
-    const assistant = await AddAssistantPopup.show()
-    assistant && setActiveAssistant(assistant)
+  const onSetActiveTopic = (topic: Topic) => {
+    setActiveTopic(topic)
  }

  return (
    <Container>
-      <Navbar>
-        {showAssistants && (
-          <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
-            <NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
-              <i className="iconfont icon-hidesidebarhoriz" />
-            </NewButton>
-            <NewButton onClick={onCreateAssistant}>
-              <i className="iconfont icon-a-addchat"></i>
-            </NewButton>
-          </NavbarLeft>
-        )}
-        <Navigation activeAssistant={activeAssistant} />
-        <NavbarRight style={{ justifyContent: 'flex-end', paddingRight: isWindows ? 140 : 12 }}>
-          <ThemeSwitch
-            checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
-            unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
-            checked={theme === 'dark'}
-            onChange={toggleTheme}
-          />
-          <NewButton onClick={toggleRightSidebar}>
-            <i className={`iconfont ${rightSidebarShown ? 'icon-showsidebarhoriz' : 'icon-hidesidebarhoriz'}`} />
-          </NewButton>
-        </NavbarRight>
-      </Navbar>
+      <Navbar
+        activeAssistant={activeAssistant}
+        setActiveAssistant={setActiveAssistant}
+        activeTopic={activeTopic}
+        setActiveTopic={onSetActiveTopic}
+      />
      <ContentContainer>
        {showAssistants && (
          <Assistants
@@ -71,7 +48,7 @@ const HomePage: FC = () => {
            onCreateAssistant={onCreateDefaultAssistant}
          />
        )}
-        <Chat assistant={activeAssistant} />
+        <Chat assistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={onSetActiveTopic} />
      </ContentContainer>
    </Container>
  )
@@ -90,40 +67,4 @@ const ContentContainer = styled.div`
  background-color: var(--color-background);
 `

-export const NewButton = styled.div`
-  -webkit-app-region: none;
-  border-radius: 4px;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease-in-out;
-  color: var(--color-icon);
-  .icon-a-addchat {
-    font-size: 20px;
-  }
-  .anticon {
-    font-size: 19px;
-  }
-  .icon-showsidebarhoriz,
-  .icon-hidesidebarhoriz {
-    font-size: 17px;
-  }
-  &:hover {
-    background-color: var(--color-background-soft);
-    cursor: pointer;
-    color: var(--color-icon-white);
-  }
-`
-
-const ThemeSwitch = styled(Switch)`
-  -webkit-app-region: none;
-  margin-right: 10px;
-  .icon-theme {
-    font-size: 14px;
-  }
-`
-
 export default HomePage
--- a/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx
@@ -0,0 +1,31 @@
+import { PaperClipOutlined } from '@ant-design/icons'
+import { Tooltip, Upload } from 'antd'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  files: File[]
+  setFiles: (files: File[]) => void
+  ToolbarButton: any
+}
+
+const AttachmentButton: FC<Props> = ({ files, setFiles, ToolbarButton }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Tooltip placement="top" title={t('chat.input.upload')} arrow>
+      <Upload
+        customRequest={() => {}}
+        accept="image/*"
+        itemRender={() => null}
+        maxCount={1}
+        onChange={async ({ file }) => file?.originFileObj && setFiles([file.originFileObj as File])}>
+        <ToolbarButton type="text" className={files.length ? 'active' : ''}>
+          <PaperClipOutlined style={{ rotate: '135deg' }} />
+        </ToolbarButton>
+      </Upload>
+    </Tooltip>
+  )
+}
+
+export default AttachmentButton
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -1,16 +1,17 @@
 import {
  ClearOutlined,
  ControlOutlined,
+  FormOutlined,
  FullscreenExitOutlined,
  FullscreenOutlined,
  HistoryOutlined,
  PauseCircleOutlined,
-  PlusCircleOutlined,
  QuestionCircleOutlined
 } from '@ant-design/icons'
 import { DEFAULT_CONEXTCOUNT } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowTopics } from '@renderer/hooks/useStore'
 import { getDefaultTopic } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { estimateInputTokenCount } from '@renderer/services/messages'
@@ -18,14 +19,15 @@ import store, { useAppSelector } from '@renderer/store'
 import { setGenerating } from '@renderer/store/runtime'
 import { Assistant, Message, Topic } from '@renderer/types'
 import { delay, uuid } from '@renderer/utils'
-import { Button, Divider, Popconfirm, Tag, Tooltip } from 'antd'
+import { Button, Divider, Popconfirm, Popover, Tag, Tooltip } from 'antd'
 import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
 import dayjs from 'dayjs'
 import { debounce, isEmpty } from 'lodash'
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

+import SettingsTab from '../Settings'
 import SendMessageButton from './SendMessageButton'

 interface Props {
@@ -43,8 +45,11 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
  const [expended, setExpend] = useState(false)
  const [estimateTokenCount, setEstimateTokenCount] = useState(0)
  const generating = useAppSelector((state) => state.runtime.generating)
-  const inputRef = useRef<TextAreaRef>(null)
+  const textareaRef = useRef<TextAreaRef>(null)
+  const [files, setFiles] = useState<File[]>([])
  const { t } = useTranslation()
+  const containerRef = useRef(null)
+  const { toggleShowTopics } = useShowTopics()

  _text = text

@@ -67,13 +72,19 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
      status: 'success'
    }

+    if (files.length > 0) {
+      message.files = files
+    }
+
    EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE, message)

    setText('')
+    setFiles([])
    setTimeout(() => setText(''), 500)
+    setTimeout(() => resizeTextArea(), 0)

    setExpend(false)
-  }, [assistant.id, assistant.topics, generating, text])
+  }, [assistant.id, assistant.topics, generating, files, text])

  const inputTokenCount = useMemo(() => estimateInputTokenCount(text), [text])

@@ -117,6 +128,32 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
    store.dispatch(setGenerating(false))
  }

+  const resizeTextArea = () => {
+    const textArea = textareaRef.current?.resizableTextArea?.textArea
+    if (textArea) {
+      textArea.style.height = 'auto'
+      textArea.style.height = textArea?.scrollHeight > 400 ? '400px' : `${textArea?.scrollHeight}px`
+    }
+  }
+
+  const onToggleExpended = () => {
+    const isExpended = !expended
+    setExpend(isExpended)
+    const textArea = textareaRef.current?.resizableTextArea?.textArea
+
+    if (textArea) {
+      if (isExpended) {
+        textArea.style.height = '70vh'
+      } else {
+        resizeTextArea()
+      }
+    }
+
+    textareaRef.current?.focus()
+  }
+
+  const onInput = () => !expended && resizeTextArea()
+
  // Command or Ctrl + N create new topic
  useEffect(() => {
    const onKeydown = (e) => {
@@ -124,7 +161,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
        if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
          addNewTopic()
          EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
-          inputRef.current?.focus()
+          textareaRef.current?.focus()
        }
      }
    }
@@ -137,7 +174,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
    const unsubscribes = [
      EventEmitter.on(EVENT_NAMES.EDIT_MESSAGE, (message: Message) => {
        setText(message.content)
-        inputRef.current?.focus()
+        textareaRef.current?.focus()
      }),
      EventEmitter.on(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, _setEstimateTokenCount)
    ]
@@ -145,19 +182,32 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
  }, [])

  useEffect(() => {
-    inputRef.current?.focus()
+    textareaRef.current?.focus()
  }, [assistant])

  return (
-    <Container
-      id="inputbar"
-      style={{ minHeight: expended ? '60%' : 'var(--input-bar-height)' }}
-      className={inputFocus ? 'focus' : ''}>
+    <Container id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
+      <Textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={t('chat.input.placeholder')}
+        autoFocus
+        contextMenu="true"
+        variant="borderless"
+        rows={1}
+        ref={textareaRef}
+        style={{ fontSize }}
+        styles={{ textarea: TextareaStyle }}
+        onFocus={() => setInputFocus(true)}
+        onBlur={() => setInputFocus(false)}
+        onInput={onInput}
+      />
      <Toolbar>
        <ToolbarMenu>
          <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
            <ToolbarButton type="text" onClick={addNewTopic}>
-              <PlusCircleOutlined />
+              <FormOutlined />
            </ToolbarButton>
          </Tooltip>
          <Tooltip placement="top" title={t('chat.input.clear')} arrow>
@@ -174,38 +224,32 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
            </Popconfirm>
          </Tooltip>
          <Tooltip placement="top" title={t('chat.input.topics')} arrow>
-            <ToolbarButton type="text" onClick={() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)}>
+            <ToolbarButton type="text" onClick={toggleShowTopics}>
              <HistoryOutlined />
            </ToolbarButton>
          </Tooltip>
-          <Tooltip placement="top" title={t('chat.input.settings')} arrow>
-            <ToolbarButton type="text" onClick={() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS)}>
-              <ControlOutlined />
-            </ToolbarButton>
-          </Tooltip>
+          <Popover content={<SettingsTab assistant={assistant} />} trigger="click" placement="topRight">
+            <Tooltip placement="top" title={t('chat.input.settings')} arrow>
+              <ToolbarButton type="text">
+                <ControlOutlined />
+              </ToolbarButton>
+            </Tooltip>
+          </Popover>
+          {/* <AttachmentButton files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} /> */}
          <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
-            <ToolbarButton type="text" onClick={() => setExpend(!expended)}>
+            <ToolbarButton type="text" onClick={onToggleExpended}>
              {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
            </ToolbarButton>
          </Tooltip>
          {showInputEstimatedTokens && (
            <TextCount>
              <Tooltip title={t('chat.input.context_count.tip') + ' | ' + t('chat.input.estimated_tokens.tip')}>
-                <Tag
-                  style={{
-                    cursor: 'pointer',
-                    borderRadius: '6px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: '2px 8px',
-                    borderWidth: 0.5
-                  }}>
-                  <i className="iconfont icon-history" style={{ marginRight: '3px' }} />
+                <StyledTag>
                  {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT}
                  <Divider type="vertical" style={{ marginTop: 2, marginLeft: 5, marginRight: 5 }} />↑{inputTokenCount}
                  <span style={{ margin: '0 2px' }}>/</span>
                  {estimateTokenCount}
-                </Tag>
+                </StyledTag>
              </Tooltip>
            </TextCount>
          )}
@@ -221,28 +265,17 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
          {!generating && <SendMessageButton sendMessage={sendMessage} disabled={generating || !text} />}
        </ToolbarMenu>
      </Toolbar>
-      <Textarea
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={t('chat.input.placeholder')}
-        autoFocus
-        contextMenu="true"
-        variant="borderless"
-        ref={inputRef}
-        styles={{ textarea: { paddingLeft: 0 } }}
-        onFocus={() => setInputFocus(true)}
-        onBlur={() => setInputFocus(false)}
-        style={{ fontSize }}
-      />
    </Container>
  )
 }

+const TextareaStyle: CSSProperties = {
+  paddingLeft: 0,
+  padding: '10px 15px 8px',
+  transition: 'all 0.3s ease'
+}
+
 const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: var(--input-bar-height);
  border: 1px solid var(--color-border-soft);
  transition: all 0.3s ease;
  position: relative;
@@ -257,11 +290,11 @@ const Textarea = styled(TextArea)`
  border-radius: 0;
  display: flex;
  flex: 1;
-  margin: 0 15px 5px 15px;
  font-family: Ubuntu;
  resize: vertical;
  overflow: auto;
-  width: auto;
+  width: 100%;
+  box-sizing: border-box;
 `

 const Toolbar = styled.div`
@@ -269,8 +302,9 @@ const Toolbar = styled.div`
  flex-direction: row;
  justify-content: space-between;
  padding: 0 8px;
-  padding-top: 3px;
  padding-bottom: 0;
+  margin-bottom: 4px;
+  height: 36px;
 `

 const ToolbarMenu = styled.div`
@@ -281,17 +315,23 @@ const ToolbarMenu = styled.div`
 `

 const ToolbarButton = styled(Button)`
-  width: 32px;
-  height: 32px;
-  font-size: 18px;
+  width: 30px;
+  height: 30px;
+  font-size: 17px;
  border-radius: 50%;
  transition: all 0.3s ease;
  color: var(--color-icon);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
  &.anticon {
    transition: all 0.3s ease;
    color: var(--color-icon);
  }
-  &:hover {
+  &:hover,
+  &.active {
    background-color: var(--color-background-soft);
    .anticon {
      color: var(--color-text-1);
@@ -308,4 +348,14 @@ const TextCount = styled.div`
  user-select: none;
 `

+const StyledTag = styled(Tag)`
+  cursor: pointer;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-width: 0.5;
+  margin: 0;
+`
+
 export default Inputbar
--- a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
+++ b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
@@ -1,7 +1,7 @@
 import { CheckOutlined } from '@ant-design/icons'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { initMermaid } from '@renderer/init'
-import { useTheme } from '@renderer/providers/ThemeProvider'
 import { ThemeMode } from '@renderer/store/settings'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -7,10 +7,13 @@ import {
  SaveOutlined,
  SyncOutlined
 } from '@ant-design/icons'
+import UserPopup from '@renderer/components/Popups/UserPopup'
 import { FONT_FAMILY } from '@renderer/config/constant'
+import { startMinAppById } from '@renderer/config/minapp'
 import { getModelLogo } from '@renderer/config/provider'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import useAvatar from '@renderer/hooks/useAvatar'
+import { useModel } from '@renderer/hooks/useModel'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useRuntime } from '@renderer/hooks/useStore'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
@@ -25,6 +28,7 @@ import styled from 'styled-components'

 import SelectModelDropdown from '../components/SelectModelDropdown'
 import Markdown from '../Markdown/Markdown'
+import MessageAttachments from './MessageAttachments'

 interface Props {
  message: Message
@@ -37,7 +41,8 @@ interface Props {
 const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) => {
  const avatar = useAvatar()
  const { t } = useTranslation()
-  const { assistant, model, setModel } = useAssistant(message.assistantId)
+  const { assistant, setModel } = useAssistant(message.assistantId)
+  const model = useModel(message.modelId)
  const { userName, showMessageDivider, messageFont, fontSize } = useSettings()
  const { generating } = useRuntime()
  const [copied, setCopied] = useState(false)
@@ -67,9 +72,9 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =

  const getUserName = useCallback(() => {
    if (message.id === 'assistant') return assistant?.name
-    if (message.role === 'assistant') return upperFirst(model.name || model.id)
+    if (message.role === 'assistant') return upperFirst(model?.name || model?.id)
    return userName || t('common.you')
-  }, [assistant?.name, message.id, message.role, model.id, model.name, t, userName])
+  }, [assistant?.name, message.id, message.role, model?.id, model?.name, t, userName])

  const fontFamily = useMemo(() => {
    return messageFont === 'serif' ? FONT_FAMILY.replace('sans-serif', 'serif').replace('Ubuntu, ', '') : FONT_FAMILY
@@ -107,27 +112,43 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
    if (message.status === 'error') {
      return (
        <Alert
-          message={t('error.chat.response')}
+          message={<div style={{ fontSize: 14 }}>{t('error.chat.response')}</div>}
          description={<Markdown message={message} />}
          type="error"
-          style={{ marginBottom: 15 }}
+          style={{ marginBottom: 15, padding: 10, fontSize: 12 }}
        />
      )
    }

-    return <Markdown message={message} />
-  }, [message])
+    return (
+      <>
+        <Markdown message={message} />
+        <MessageAttachments message={message} />
+      </>
+    )
+  }, [message, t])
+
+  const showMiniApp = () => model?.provider && startMinAppById(model?.provider)

  return (
    <MessageContainer key={message.id} className="message">
      <MessageHeader>
        <AvatarWrapper>
          {isAssistantMessage ? (
-            <Avatar src={avatarSource} size={35} style={{ borderRadius: '20%' }}>
+            <Avatar
+              src={avatarSource}
+              size={35}
+              style={{ borderRadius: '20%', cursor: 'pointer' }}
+              onClick={showMiniApp}>
              {avatarName}
            </Avatar>
          ) : (
-            <Avatar src={avatar} size={35} style={{ borderRadius: '20%' }} />
+            <Avatar
+              src={avatar}
+              size={35}
+              style={{ borderRadius: '20%', cursor: 'pointer' }}
+              onClick={() => UserPopup.show()}
+            />
          )}
          <UserWrap>
            <UserName>{username}</UserName>
@@ -154,7 +175,7 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
                </ActionButton>
              </Tooltip>
              {canRegenerate && (
-                <SelectModelDropdown model={model} onSelect={onRegenerate} placement="topRight">
+                <SelectModelDropdown model={model} onSelect={onRegenerate} placement="topLeft">
                  <Tooltip title={t('common.regenerate')} mouseEnterDelay={0.8}>
                    <ActionButton>
                      <SyncOutlined />
--- a/src/renderer/src/pages/home/Messages/MessageAttachments.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageAttachments.tsx
@@ -0,0 +1,25 @@
+import { Message } from '@renderer/types'
+import { Image as AntdImage } from 'antd'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  message: Message
+}
+
+const MessageAttachments: FC<Props> = ({ message }) => {
+  return <Container>{message.images?.map((image) => <Image src={image} key={image} width="33%" />)}</Container>
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-top: 8px;
+`
+
+const Image = styled(AntdImage)`
+  border-radius: 10px;
+`
+
+export default MessageAttachments
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/src/renderer/src/pages/home/Messages/Messages.tsx
@@ -20,9 +20,10 @@ import Prompt from './Prompt'
 interface Props {
  assistant: Assistant
  topic: Topic
+  setActiveTopic: (topic: Topic) => void
 }

-const Messages: FC<Props> = ({ assistant, topic }) => {
+const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
  const [messages, setMessages] = useState<Message[]>([])
  const [lastMessage, setLastMessage] = useState<Message | null>(null)
  const provider = useProviderByAssistant(assistant)
@@ -33,7 +34,7 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
    (message: Message) => {
      const _messages = [...messages, message]
      setMessages(_messages)
-      localforage.setItem(`topic:${topic.id}`, { ...topic, messages: _messages })
+      localforage.setItem(`topic:${topic.id}`, { id: topic.id, messages: _messages })
    },
    [messages, topic]
  )
@@ -42,9 +43,13 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
    const _topic = getTopic(assistant, topic.id)
    if (_topic && _topic.name === t('chat.default.topic.name') && messages.length >= 2) {
      const summaryText = await fetchMessagesSummary({ messages, assistant })
-      summaryText && updateTopic({ ..._topic, name: summaryText })
+      if (summaryText) {
+        const data = { ..._topic, name: summaryText }
+        setActiveTopic(data)
+        updateTopic(data)
+      }
    }
-  }, [assistant, messages, topic, updateTopic])
+  }, [assistant, messages, setActiveTopic, topic.id, updateTopic])

  const onDeleteMessage = useCallback(
    (message: Message) => {
@@ -117,6 +122,7 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
 }

 const Container = styled.div`
+  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@@ -0,0 +1,161 @@
+import { FormOutlined } from '@ant-design/icons'
+import { Navbar, NavbarCenter, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
+import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
+import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
+import { isMac, isWindows } from '@renderer/config/constant'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
+import { getDefaultTopic } from '@renderer/services/assistant'
+import { Assistant, Topic } from '@renderer/types'
+import { Switch } from 'antd'
+import { FC, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import SelectModelButton from './components/SelectModelButton'
+
+interface Props {
+  activeAssistant: Assistant
+  activeTopic: Topic
+  setActiveAssistant: (assistant: Assistant) => void
+  setActiveTopic: (topic: Topic) => void
+}
+
+const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiveTopic }) => {
+  const { assistant, addTopic } = useAssistant(activeAssistant.id)
+  const { t } = useTranslation()
+  const { showAssistants, toggleShowAssistants } = useShowAssistants()
+  const { showTopics, toggleShowTopics } = useShowTopics()
+  const { theme, toggleTheme } = useTheme()
+  const { topicPosition } = useSettings()
+
+  const onCreateAssistant = async () => {
+    const assistant = await AddAssistantPopup.show()
+    assistant && setActiveAssistant(assistant)
+  }
+
+  const addNewTopic = useCallback(() => {
+    const topic = getDefaultTopic()
+    addTopic(topic)
+    setActiveTopic(topic)
+  }, [addTopic, setActiveTopic])
+
+  return (
+    <Navbar>
+      {showAssistants && (
+        <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
+          <NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
+            <i className="iconfont icon-sidebar-right" />
+          </NewButton>
+          <NewButton onClick={onCreateAssistant} style={{ marginRight: 6 }}>
+            <i className="iconfont icon-a-addchat" />
+          </NewButton>
+        </NavbarLeft>
+      )}
+      {showTopics && topicPosition === 'left' && (
+        <NavbarCenter
+          style={{
+            paddingLeft: isMac && !showAssistants ? 16 : 8,
+            paddingRight: 8,
+            maxWidth: 'var(--topic-list-width)',
+            justifyContent: 'space-between'
+          }}>
+          <HStack alignItems="center">
+            {!showAssistants && (
+              <NewButton onClick={toggleShowAssistants} style={{ marginRight: isMac ? 8 : 25 }}>
+                <i className="iconfont icon-sidebar-left" />
+              </NewButton>
+            )}
+            {showAssistants && (
+              <TitleText>
+                {t('chat.topics.title')} ({assistant.topics.length})
+              </TitleText>
+            )}
+          </HStack>
+          <NewButton onClick={addNewTopic}>
+            <FormOutlined />
+          </NewButton>
+        </NavbarCenter>
+      )}
+      <NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 130 : 12, flex: 1 }}>
+        <HStack alignItems="center">
+          {!showAssistants && (topicPosition === 'left' ? !showTopics : true) && (
+            <NewButton
+              onClick={() => toggleShowAssistants()}
+              style={{ marginRight: isMac ? 8 : 25, marginLeft: isMac ? 8 : 0 }}>
+              <i className="iconfont icon-sidebar-left" />
+            </NewButton>
+          )}
+          <TitleText
+            style={{ marginRight: 10, cursor: 'pointer' }}
+            className="nodrag"
+            onClick={() => AssistantSettingPopup.show({ assistant })}>
+            {assistant.name}
+          </TitleText>
+          <SelectModelButton assistant={assistant} />
+        </HStack>
+        <HStack alignItems="center">
+          <ThemeSwitch
+            checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
+            unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
+            checked={theme === 'dark'}
+            onChange={toggleTheme}
+          />
+          {topicPosition === 'right' && (
+            <NewButton onClick={toggleShowTopics}>
+              <i className={`iconfont icon-sidebar-${showTopics ? 'left' : 'right'}`} />
+            </NewButton>
+          )}
+        </HStack>
+      </NavbarRight>
+    </Navbar>
+  )
+}
+
+export const NewButton = styled.div`
+  -webkit-app-region: none;
+  border-radius: 4px;
+  height: 30px;
+  padding: 0 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  .iconfont {
+    font-size: 18px;
+    color: var(--color-icon);
+  }
+  .icon-a-addchat {
+    font-size: 20px;
+  }
+  .anticon {
+    color: var(--color-icon);
+    font-size: 17px;
+  }
+  &:hover {
+    background-color: var(--color-background-mute);
+    color: var(--color-icon-white);
+  }
+`
+
+const TitleText = styled.span`
+  margin-left: 5px;
+  font-family: Ubuntu;
+  font-size: 13px;
+  font-weight: 500;
+`
+
+const ThemeSwitch = styled(Switch)`
+  -webkit-app-region: no-drag;
+  margin-right: 10px;
+  .icon-theme {
+    font-size: 14px;
+  }
+`
+
+export default HeaderNavbar
--- a/src/renderer/src/pages/home/RightSidebar/index.tsx
+++ b/src/renderer/src/pages/home/RightSidebar/index.tsx
@@ -1,5 +1,5 @@
 import { BarsOutlined, SettingOutlined } from '@ant-design/icons'
-import { useShowRightSidebar } from '@renderer/hooks/useStore'
+import { useShowTopics } from '@renderer/hooks/useStore'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { Assistant, Topic } from '@renderer/types'
 import { Segmented } from 'antd'
@@ -7,8 +7,8 @@ import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

-import SettingsTab from './SettingsTab'
-import TopicsTab from './TopicsTab'
+import Settings from './Settings'
+import Topics from './Topics'

 interface Props {
  assistant: Assistant
@@ -18,7 +18,7 @@ interface Props {

 const RightSidebar: FC<Props> = (props) => {
  const [tab, setTab] = useState<'topic' | 'settings'>('topic')
-  const { rightSidebarShown, showRightSidebar, hideRightSidebar } = useShowRightSidebar()
+  const { showTopics, setShowTopics } = useShowTopics()
  const { t } = useTranslation()
  const isTopicTab = tab === 'topic'
  const isSettingsTab = tab === 'settings'
@@ -26,31 +26,31 @@ const RightSidebar: FC<Props> = (props) => {
  useEffect(() => {
    const unsubscribes = [
      EventEmitter.on(EVENT_NAMES.SHOW_TOPIC_SIDEBAR, (): any => {
-        if (rightSidebarShown && isTopicTab) {
-          return hideRightSidebar()
+        if (showTopics && isTopicTab) {
+          return setShowTopics(false)
        }
-        if (rightSidebarShown) {
+        if (showTopics) {
          return setTab('topic')
        }
-        showRightSidebar()
+        setShowTopics(true)
        setTab('topic')
      }),
      EventEmitter.on(EVENT_NAMES.SHOW_CHAT_SETTINGS, (): any => {
-        if (rightSidebarShown && isSettingsTab) {
-          return hideRightSidebar()
+        if (showTopics && isSettingsTab) {
+          return setShowTopics(false)
        }
-        if (rightSidebarShown) {
+        if (showTopics) {
          return setTab('settings')
        }
-        showRightSidebar()
+        setShowTopics(true)
        setTab('settings')
      }),
      EventEmitter.on(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR, () => setTab('topic'))
    ]
    return () => unsubscribes.forEach((unsub) => unsub())
-  }, [hideRightSidebar, isSettingsTab, isTopicTab, rightSidebarShown, showRightSidebar])
+  }, [isSettingsTab, isTopicTab, showTopics, setShowTopics])

-  if (!rightSidebarShown) {
+  if (!showTopics) {
    return null
  }

@@ -67,8 +67,8 @@ const RightSidebar: FC<Props> = (props) => {
        onChange={(value) => setTab(value as 'topic' | 'settings')}
      />
      <TabContent>
-        {tab === 'topic' && <TopicsTab {...props} />}
-        {tab === 'settings' && <SettingsTab assistant={props.assistant} />}
+        {tab === 'topic' && <Topics {...props} />}
+        {tab === 'settings' && <Settings assistant={props.assistant} />}
      </TabContent>
    </Container>
  )
--- a/src/renderer/src/pages/home/RightSidebar/SettingsTab.tsx
+++ b/src/renderer/src/pages/home/RightSidebar/SettingsTab.tsx
@@ -87,7 +87,7 @@ const SettingsTab: FC<Props> = (props) => {

  return (
    <Container>
-      <SettingSubtitle>
+      <SettingSubtitle style={{ marginTop: 5 }}>
        {t('settings.messages.model.title')}{' '}
        <Tooltip title={t('chat.settings.reset')}>
          <ReloadOutlined onClick={onReset} style={{ cursor: 'pointer', fontSize: 12, padding: '0 3px' }} />
@@ -234,7 +234,9 @@ const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
-  padding: 0 15px;
+  overflow: hidden;
+  min-width: 300px;
+  padding-bottom: 10px;
 `

 const Label = styled.p`
--- a/src/renderer/src/pages/home/RightSidebar/TopicsTab.tsx
+++ b/src/renderer/src/pages/home/RightSidebar/TopicsTab.tsx
@@ -1,12 +1,12 @@
 import { DeleteOutlined, EditOutlined, OpenAIOutlined } from '@ant-design/icons'
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import DragableList from '@renderer/components/DragableList'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
 import { useAssistant } from '@renderer/hooks/useAssistant'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { fetchMessagesSummary } from '@renderer/services/api'
 import LocalStorage from '@renderer/services/storage'
 import { useAppSelector } from '@renderer/store'
 import { Assistant, Topic } from '@renderer/types'
-import { droppableReorder } from '@renderer/utils'
 import { Dropdown, MenuProps } from 'antd'
 import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -18,10 +18,13 @@ interface Props {
  setActiveTopic: (topic: Topic) => void
 }

-const TopicsTab: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic }) => {
+const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic }) => {
  const { assistant, removeTopic, updateTopic, updateTopics } = useAssistant(_assistant.id)
  const { t } = useTranslation()
  const generating = useAppSelector((state) => state.runtime.generating)
+  const { topicPosition } = useSettings()
+
+  const borderStyle = '0.5px solid var(--color-border)'

  const getTopicMenuItems = useCallback(
    (topic: Topic) => {
@@ -77,17 +80,6 @@ const TopicsTab: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTop
    [assistant, removeTopic, setActiveTopic, t, updateTopic]
  )

-  const onDragEnd = useCallback(
-    (result: DropResult) => {
-      if (result.destination) {
-        const sourceIndex = result.source.index
-        const destIndex = result.destination.index
-        updateTopics(droppableReorder(assistant.topics, sourceIndex, destIndex))
-      }
-    },
-    [assistant.topics, updateTopics]
-  )
-
  const onSwitchTopic = useCallback(
    (topic: Topic) => {
      if (generating) {
@@ -100,34 +92,20 @@ const TopicsTab: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTop
  )

  return (
-    <Container>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="droppable">
-          {(provided) => (
-            <div {...provided.droppableProps} ref={provided.innerRef}>
-              {assistant.topics.map((topic, index) => (
-                <Draggable key={`draggable_${topic.id}_${index}`} draggableId={topic.id} index={index}>
-                  {(provided) => (
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
-                      <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
-                        <TopicListItem
-                          className={topic.id === activeTopic?.id ? 'active' : ''}
-                          onClick={() => onSwitchTopic(topic)}>
-                          {topic.name}
-                        </TopicListItem>
-                      </Dropdown>
-                    </div>
-                  )}
-                </Draggable>
-              ))}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
+    <Container style={topicPosition === 'left' ? { borderRight: borderStyle } : { borderLeft: borderStyle }}>
+      <DragableList list={assistant.topics} onUpdate={updateTopics}>
+        {(topic) => {
+          const isActive = topic.id === activeTopic?.id
+          const activeClass = topicPosition === 'left' ? 'active-left' : 'active-right'
+          return (
+            <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
+              <TopicListItem className={isActive ? activeClass : ''} onClick={() => onSwitchTopic(topic)}>
+                {topic.name}
+              </TopicListItem>
+            </Dropdown>
+          )
+        }}
+      </DragableList>
    </Container>
  )
 }
@@ -136,23 +114,37 @@ const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
-  padding: 10px 10px;
+  padding-top: 10px;
+  min-width: var(--topic-list-width);
+  max-width: var(--topic-list-width);
+  border-right: 0.5px solid var(--color-border);
+  border-left: 0.5px solid var(--color-border);
+  overflow-y: scroll;
+  height: calc(100vh - var(--navbar-height));
 `

 const TopicListItem = styled.div`
  padding: 7px 10px;
+  margin: 0 10px;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Ubuntu;
+  font-size: 13px;
  &:hover {
    background-color: var(--color-background-soft);
  }
-  &.active {
+  &.active-left {
+    background-color: var(--color-primary);
+    color: white;
+    font-weight: 500;
+  }
+  &.active-right {
    background-color: var(--color-background-mute);
+    font-weight: 500;
  }
 `

-export default TopicsTab
+export default Topics
--- a/src/renderer/src/pages/home/components/SelectModelButton.tsx
+++ b/src/renderer/src/pages/home/components/SelectModelButton.tsx
@@ -23,7 +23,7 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
  }

  return (
-    <SelectModelDropdown model={model} onSelect={setModel}>
+    <SelectModelDropdown model={model} onSelect={setModel} placement="top">
      <DropdownButton size="small" type="default">
        <ModelAvatar model={model} size={20} />
        <ModelName>{model ? upperFirst(model.name) : t('button.select_model')}</ModelName>
--- a/src/renderer/src/pages/home/components/SelectModelDropdown.tsx
+++ b/src/renderer/src/pages/home/components/SelectModelDropdown.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 interface Props extends DropdownProps {
-  model: Model
+  model?: Model
  onSelect: (model: Model) => void
 }

@@ -37,7 +37,7 @@ const SelectModelDropdown: FC<Props & PropsWithChildren> = ({ children, model, o

  return (
    <DropdownMenu
-      menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' }, selectedKeys: [model?.id] }}
+      menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' }, selectedKeys: model ? [model.id] : [] }}
      trigger={['click']}
      arrow
      placement="bottom"
--- a/src/renderer/src/pages/settings/GeneralSettings.tsx
+++ b/src/renderer/src/pages/settings/GeneralSettings.tsx
@@ -1,25 +1,30 @@
 import { FolderOpenOutlined, SaveOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
-import useAvatar from '@renderer/hooks/useAvatar'
 import { useSettings } from '@renderer/hooks/useSettings'
 import i18n from '@renderer/i18n'
 import { backup, reset, restore } from '@renderer/services/backup'
-import LocalStorage from '@renderer/services/storage'
 import { useAppDispatch } from '@renderer/store'
-import { setAvatar } from '@renderer/store/runtime'
 import { setLanguage, setUserName, ThemeMode } from '@renderer/store/settings'
 import { setProxyUrl as _setProxyUrl } from '@renderer/store/settings'
-import { compressImage, isValidProxyUrl } from '@renderer/utils'
-import { Avatar, Button, Input, Select, Upload } from 'antd'
+import { isValidProxyUrl } from '@renderer/utils'
+import { Button, Input, Select } from 'antd'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'

 import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from '.'

 const GeneralSettings: FC = () => {
-  const avatar = useAvatar()
-  const { language, proxyUrl: storeProxyUrl, userName, theme, setTheme } = useSettings()
+  const {
+    language,
+    proxyUrl: storeProxyUrl,
+    userName,
+    theme,
+    windowStyle,
+    topicPosition,
+    setTheme,
+    setWindowStyle,
+    setTopicPosition
+  } = useSettings()
  const [proxyUrl, setProxyUrl] = useState<string | undefined>(storeProxyUrl)
  const dispatch = useAppDispatch()
  const { t } = useTranslation()
@@ -48,7 +53,7 @@ const GeneralSettings: FC = () => {
        <SettingRowTitle>{t('common.language')}</SettingRowTitle>
        <Select
          defaultValue={language || 'en-US'}
-          style={{ width: 120 }}
+          style={{ width: 180 }}
          onChange={onSelectLanguage}
          options={[
            { value: 'zh-CN', label: '中文' },
@@ -61,7 +66,7 @@ const GeneralSettings: FC = () => {
        <SettingRowTitle>{t('settings.theme.title')}</SettingRowTitle>
        <Select
          defaultValue={theme}
-          style={{ width: 120 }}
+          style={{ width: 180 }}
          onChange={setTheme}
          options={[
            { value: ThemeMode.light, label: t('settings.theme.light') },
@@ -72,24 +77,29 @@ const GeneralSettings: FC = () => {
      </SettingRow>
      <SettingDivider />
      <SettingRow>
-        <SettingRowTitle>{t('common.avatar')}</SettingRowTitle>
-        <Upload
-          customRequest={() => {}}
-          accept="image/png, image/jpeg"
-          itemRender={() => null}
-          maxCount={1}
-          onChange={async ({ file }) => {
-            try {
-              const _file = file.originFileObj as File
-              const compressedFile = await compressImage(_file)
-              await LocalStorage.storeImage('avatar', compressedFile)
-              dispatch(setAvatar(await LocalStorage.getImage('avatar')))
-            } catch (error: any) {
-              window.message.error(error.message)
-            }
-          }}>
-          <UserAvatar src={avatar} size="large" />
-        </Upload>
+        <SettingRowTitle>{t('settings.theme.window.style.title')}</SettingRowTitle>
+        <Select
+          defaultValue={windowStyle || 'opaque'}
+          style={{ width: 180 }}
+          onChange={setWindowStyle}
+          options={[
+            { value: 'transparent', label: t('settings.theme.window.style.transparent') },
+            { value: 'opaque', label: t('settings.theme.window.style.opaque') }
+          ]}
+        />
+      </SettingRow>
+      <SettingDivider />
+      <SettingRow>
+        <SettingRowTitle>{t('settings.topic.position')}</SettingRowTitle>
+        <Select
+          defaultValue={topicPosition || 'right'}
+          style={{ width: 180 }}
+          onChange={setTopicPosition}
+          options={[
+            { value: 'left', label: t('settings.topic.position.left') },
+            { value: 'right', label: t('settings.topic.position.right') }
+          ]}
+        />
      </SettingRow>
      <SettingDivider />
      <SettingRow>
@@ -98,7 +108,7 @@ const GeneralSettings: FC = () => {
          placeholder={t('settings.general.user_name.placeholder')}
          value={userName}
          onChange={(e) => dispatch(setUserName(e.target.value))}
-          style={{ width: 150 }}
+          style={{ width: 180 }}
          maxLength={30}
        />
      </SettingRow>
@@ -109,7 +119,7 @@ const GeneralSettings: FC = () => {
          placeholder="socks5://127.0.0.1:6153"
          value={proxyUrl}
          onChange={(e) => setProxyUrl(e.target.value)}
-          style={{ width: 300 }}
+          style={{ width: 180 }}
          onBlur={() => onSetProxyUrl()}
          type="url"
        />
@@ -117,12 +127,12 @@ const GeneralSettings: FC = () => {
      <SettingDivider />
      <SettingRow>
        <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
-        <HStack gap="5px">
+        <HStack gap="5px" justifyContent="space-between">
          <Button onClick={backup} icon={<SaveOutlined />}>
-            备份
+            {t('settings.general.backup.button')}
          </Button>
          <Button onClick={restore} icon={<FolderOpenOutlined />}>
-            恢复
+            {t('settings.general.restore.button')}
          </Button>
        </HStack>
      </SettingRow>
@@ -140,8 +150,4 @@ const GeneralSettings: FC = () => {
  )
 }

-const UserAvatar = styled(Avatar)`
-  cursor: pointer;
-`
-
 export default GeneralSettings
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
@@ -8,8 +8,8 @@ import {
 } from '@ant-design/icons'
 import { getModelLogo } from '@renderer/config/provider'
 import { PROVIDER_CONFIG } from '@renderer/config/provider'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { useProvider } from '@renderer/hooks/useProvider'
-import { useTheme } from '@renderer/providers/ThemeProvider'
 import { checkApi } from '@renderer/services/api'
 import { Provider } from '@renderer/types'
 import { Avatar, Button, Card, Divider, Flex, Input, Space, Switch } from 'antd'
--- a/src/renderer/src/pages/settings/ProviderSettings/index.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/index.tsx
@@ -1,5 +1,4 @@
-import { PlusOutlined } from '@ant-design/icons'
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
 import { getProviderLogo } from '@renderer/config/provider'
 import { useAllProviders, useProviders } from '@renderer/hooks/useProvider'
--- a/src/renderer/src/pages/settings/index.tsx
+++ b/src/renderer/src/pages/settings/index.tsx
@@ -2,8 +2,6 @@ import { Divider } from 'antd'
 import Link from 'antd/es/typography/Link'
 import styled from 'styled-components'

-import SettingsPage from './SettingsPage'
-
 export const SettingContainer = styled.div`
  display: flex;
  flex-direction: column;
@@ -69,5 +67,3 @@ export const SettingHelpLink = styled(Link)`
  font-size: 11px;
  padding: 0 5px;
 `
-
-export default SettingsPage
--- a/src/renderer/src/providers/AiProvider.ts
+++ b/src/renderer/src/providers/AiProvider.ts
@@ -0,0 +1,40 @@
+import BaseProvider from '@renderer/providers/BaseProvider'
+import ProviderFactory from '@renderer/providers/ProviderFactory'
+import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
+import OpenAI from 'openai'
+
+export default class AiProvider {
+  private sdk: BaseProvider
+
+  constructor(provider: Provider) {
+    this.sdk = ProviderFactory.create(provider)
+  }
+
+  public async completions(
+    messages: Message[],
+    assistant: Assistant,
+    onChunk: ({ text, usage }: { text?: string; usage?: OpenAI.Completions.CompletionUsage }) => void
+  ): Promise<void> {
+    return this.sdk.completions(messages, assistant, onChunk)
+  }
+
+  public async translate(message: Message, assistant: Assistant): Promise<string> {
+    return this.sdk.translate(message, assistant)
+  }
+
+  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
+    return this.sdk.summaries(messages, assistant)
+  }
+
+  public async suggestions(messages: Message[], assistant: Assistant): Promise<Suggestion[]> {
+    return this.sdk.suggestions(messages, assistant)
+  }
+
+  public async check(): Promise<{ valid: boolean; error: Error | null }> {
+    return this.sdk.check()
+  }
+
+  public async models(): Promise<OpenAI.Models.Model[]> {
+    return this.sdk.models()
+  }
+}
--- a/src/renderer/src/providers/AnthropicProvider.ts
+++ b/src/renderer/src/providers/AnthropicProvider.ts
@@ -0,0 +1,151 @@
+import Anthropic from '@anthropic-ai/sdk'
+import { MessageCreateParamsNonStreaming, MessageParam } from '@anthropic-ai/sdk/resources'
+import { DEFAULT_MAX_TOKENS } from '@renderer/config/constant'
+import { getAssistantSettings, getDefaultModel, getTopNamingModel } from '@renderer/services/assistant'
+import { EVENT_NAMES } from '@renderer/services/event'
+import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
+import { first, sum, takeRight } from 'lodash'
+import OpenAI from 'openai'
+
+import BaseProvider from './BaseProvider'
+
+export default class AnthropicProvider extends BaseProvider {
+  private sdk: Anthropic
+
+  constructor(provider: Provider) {
+    super(provider)
+    this.sdk = new Anthropic({ apiKey: provider.apiKey, baseURL: this.getBaseURL() })
+  }
+
+  public async completions(
+    messages: Message[],
+    assistant: Assistant,
+    onChunk: ({ text, usage }: { text?: string; usage?: OpenAI.Completions.CompletionUsage }) => void
+  ) {
+    const defaultModel = getDefaultModel()
+    const model = assistant.model || defaultModel
+    const { contextCount, maxTokens } = getAssistantSettings(assistant)
+
+    const userMessages = takeRight(messages, contextCount + 2).map((message) => {
+      return {
+        role: message.role,
+        content: message.content
+      }
+    })
+
+    if (first(userMessages)?.role === 'assistant') {
+      userMessages.shift()
+    }
+
+    return new Promise<void>((resolve, reject) => {
+      const stream = this.sdk.messages
+        .stream({
+          model: model.id,
+          messages: userMessages.filter(Boolean) as MessageParam[],
+          max_tokens: maxTokens || DEFAULT_MAX_TOKENS,
+          temperature: assistant?.settings?.temperature,
+          system: assistant.prompt,
+          stream: true
+        })
+        .on('text', (text) => {
+          if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) {
+            resolve()
+            return stream.controller.abort()
+          }
+          onChunk({ text })
+        })
+        .on('finalMessage', (message) => {
+          onChunk({
+            text: '',
+            usage: {
+              prompt_tokens: message.usage.input_tokens,
+              completion_tokens: message.usage.output_tokens,
+              total_tokens: sum(Object.values(message.usage))
+            }
+          })
+          resolve()
+        })
+        .on('error', (error) => reject(error))
+    })
+  }
+
+  public async translate(message: Message, assistant: Assistant) {
+    const defaultModel = getDefaultModel()
+    const model = assistant.model || defaultModel
+    const messages = [
+      { role: 'system', content: assistant.prompt },
+      { role: 'user', content: message.content }
+    ]
+
+    const response = await this.sdk.messages.create({
+      model: model.id,
+      messages: messages.filter((m) => m.role === 'user') as MessageParam[],
+      max_tokens: 4096,
+      temperature: assistant?.settings?.temperature,
+      system: assistant.prompt,
+      stream: false
+    })
+
+    return response.content[0].type === 'text' ? response.content[0].text : ''
+  }
+
+  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
+    const model = getTopNamingModel() || assistant.model || getDefaultModel()
+
+    const userMessages = takeRight(messages, 5).map((message) => ({
+      role: message.role,
+      content: message.content
+    }))
+
+    if (first(userMessages)?.role === 'assistant') {
+      userMessages.shift()
+    }
+
+    const systemMessage = {
+      role: 'system',
+      content: '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不要使用标点符号和其他特殊符号。'
+    }
+
+    const message = await this.sdk.messages.create({
+      messages: userMessages as Anthropic.Messages.MessageParam[],
+      model: model.id,
+      system: systemMessage.content,
+      stream: false,
+      max_tokens: 4096
+    })
+
+    return message.content[0].type === 'text' ? message.content[0].text : null
+  }
+
+  public async suggestions(): Promise<Suggestion[]> {
+    return []
+  }
+
+  public async check(): Promise<{ valid: boolean; error: Error | null }> {
+    const model = this.provider.models[0]
+
+    const body = {
+      model: model.id,
+      messages: [{ role: 'user', content: 'hi' }],
+      max_tokens: 100,
+      stream: false
+    }
+
+    try {
+      const message = await this.sdk.messages.create(body as MessageCreateParamsNonStreaming)
+      return {
+        valid: message.content.length > 0,
+        error: null
+      }
+    } catch (error: any) {
+      return {
+        valid: false,
+        error
+      }
+    }
+  }
+
+  public async models(): Promise<OpenAI.Models.Model[]> {
+    return []
+  }
+}
--- a/src/renderer/src/providers/BaseProvider.ts
+++ b/src/renderer/src/providers/BaseProvider.ts
@@ -0,0 +1,33 @@
+import { getOllamaKeepAliveTime } from '@renderer/hooks/useOllama'
+import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
+import OpenAI from 'openai'
+
+export default abstract class BaseProvider {
+  protected provider: Provider
+  protected host: string
+
+  constructor(provider: Provider) {
+    this.provider = provider
+    this.host = this.getBaseURL()
+  }
+
+  public getBaseURL(): string {
+    const host = this.provider.apiHost
+    return host.endsWith('/') ? host : `${host}/v1/`
+  }
+
+  public get keepAliveTime() {
+    return this.provider.id === 'ollama' ? getOllamaKeepAliveTime() : undefined
+  }
+
+  abstract completions(
+    messages: Message[],
+    assistant: Assistant,
+    onChunk: ({ text, usage }: { text?: string; usage?: OpenAI.Completions.CompletionUsage }) => void
+  ): Promise<void>
+  abstract translate(message: Message, assistant: Assistant): Promise<string>
+  abstract summaries(messages: Message[], assistant: Assistant): Promise<string | null>
+  abstract suggestions(messages: Message[], assistant: Assistant): Promise<Suggestion[]>
+  abstract check(): Promise<{ valid: boolean; error: Error | null }>
+  abstract models(): Promise<OpenAI.Models.Model[]>
+}
--- a/src/renderer/src/providers/GeminiProvider.ts
+++ b/src/renderer/src/providers/GeminiProvider.ts
@@ -0,0 +1,170 @@
+import { GoogleGenerativeAI } from '@google/generative-ai'
+import { getAssistantSettings, getDefaultModel, getTopNamingModel } from '@renderer/services/assistant'
+import { EVENT_NAMES } from '@renderer/services/event'
+import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
+import axios from 'axios'
+import { isEmpty, takeRight } from 'lodash'
+import OpenAI from 'openai'
+
+import BaseProvider from './BaseProvider'
+
+export default class GeminiProvider extends BaseProvider {
+  private sdk: GoogleGenerativeAI
+
+  constructor(provider: Provider) {
+    super(provider)
+    this.sdk = new GoogleGenerativeAI(provider.apiKey)
+  }
+
+  public async completions(
+    messages: Message[],
+    assistant: Assistant,
+    onChunk: ({ text, usage }: { text?: string; usage?: OpenAI.Completions.CompletionUsage }) => void
+  ) {
+    const defaultModel = getDefaultModel()
+    const model = assistant.model || defaultModel
+    const { contextCount, maxTokens } = getAssistantSettings(assistant)
+
+    const userMessages = takeRight(messages, contextCount + 1).map((message) => {
+      return {
+        role: message.role,
+        content: message.content
+      }
+    })
+
+    const geminiModel = this.sdk.getGenerativeModel({
+      model: model.id,
+      systemInstruction: assistant.prompt,
+      generationConfig: {
+        maxOutputTokens: maxTokens,
+        temperature: assistant?.settings?.temperature
+      }
+    })
+
+    const userLastMessage = userMessages.pop()
+
+    const chat = geminiModel.startChat({
+      history: userMessages.map((message) => ({
+        role: message.role === 'user' ? 'user' : 'model',
+        parts: [{ text: message.content }]
+      }))
+    })
+
+    const userMessagesStream = await chat.sendMessageStream(userLastMessage?.content!)
+
+    for await (const chunk of userMessagesStream.stream) {
+      if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) break
+      onChunk({
+        text: chunk.text(),
+        usage: {
+          prompt_tokens: chunk.usageMetadata?.promptTokenCount || 0,
+          completion_tokens: chunk.usageMetadata?.candidatesTokenCount || 0,
+          total_tokens: chunk.usageMetadata?.totalTokenCount || 0
+        }
+      })
+    }
+  }
+
+  async translate(message: Message, assistant: Assistant) {
+    const defaultModel = getDefaultModel()
+    const { maxTokens } = getAssistantSettings(assistant)
+    const model = assistant.model || defaultModel
+
+    const geminiModel = this.sdk.getGenerativeModel({
+      model: model.id,
+      systemInstruction: assistant.prompt,
+      generationConfig: {
+        maxOutputTokens: maxTokens,
+        temperature: assistant?.settings?.temperature
+      }
+    })
+
+    const { response } = await geminiModel.generateContent(message.content)
+
+    return response.text()
+  }
+
+  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
+    const model = getTopNamingModel() || assistant.model || getDefaultModel()
+
+    const userMessages = takeRight(messages, 5).map((message) => ({
+      role: message.role,
+      content: message.content
+    }))
+
+    const systemMessage = {
+      role: 'system',
+      content: '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不要使用标点符号和其他特殊符号。'
+    }
+
+    const geminiModel = this.sdk.getGenerativeModel({
+      model: model.id,
+      systemInstruction: systemMessage.content,
+      generationConfig: {
+        temperature: assistant?.settings?.temperature
+      }
+    })
+
+    const lastUserMessage = userMessages.pop()
+
+    const chat = await geminiModel.startChat({
+      history: userMessages.map((message) => ({
+        role: message.role === 'user' ? 'user' : 'model',
+        parts: [{ text: message.content }]
+      }))
+    })
+
+    const { response } = await chat.sendMessage(lastUserMessage?.content!)
+
+    return response.text()
+  }
+
+  public async suggestions(): Promise<Suggestion[]> {
+    return []
+  }
+
+  public async check(): Promise<{ valid: boolean; error: Error | null }> {
+    const model = this.provider.models[0]
+
+    const body = {
+      model: model.id,
+      messages: [{ role: 'user', content: 'hi' }],
+      max_tokens: 100,
+      stream: false
+    }
+
+    try {
+      const geminiModel = this.sdk.getGenerativeModel({ model: body.model })
+      const result = await geminiModel.generateContent(body.messages[0].content)
+      return {
+        valid: !isEmpty(result.response.text()),
+        error: null
+      }
+    } catch (error: any) {
+      return {
+        valid: false,
+        error
+      }
+    }
+  }
+
+  public async models(): Promise<OpenAI.Models.Model[]> {
+    try {
+      const api = this.provider.apiHost + '/v1beta/models'
+      const { data } = await axios.get(api, { params: { key: this.provider.apiKey } })
+      return data.models.map(
+        (m: any) =>
+          ({
+            id: m.name.replace('models/', ''),
+            name: m.displayName,
+            description: m.description,
+            object: 'model',
+            created: Date.now(),
+            owned_by: 'gemini'
+          }) as OpenAI.Models.Model
+      )
+    } catch (error) {
+      return []
+    }
+  }
+}
--- a/src/renderer/src/providers/OpenAIProvider.ts
+++ b/src/renderer/src/providers/OpenAIProvider.ts
@@ -0,0 +1,185 @@
+import { isLocalAi } from '@renderer/config/env'
+import { getAssistantSettings, getDefaultModel, getTopNamingModel } from '@renderer/services/assistant'
+import { EVENT_NAMES } from '@renderer/services/event'
+import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
+import { fileToBase64, removeQuotes } from '@renderer/utils'
+import { first, takeRight } from 'lodash'
+import OpenAI from 'openai'
+import {
+  ChatCompletionContentPart,
+  ChatCompletionCreateParamsNonStreaming,
+  ChatCompletionMessageParam
+} from 'openai/resources'
+
+import BaseProvider from './BaseProvider'
+
+export default class OpenAIProvider extends BaseProvider {
+  private sdk: OpenAI
+
+  constructor(provider: Provider) {
+    super(provider)
+    this.sdk = new OpenAI({
+      dangerouslyAllowBrowser: true,
+      apiKey: provider.apiKey,
+      baseURL: this.getBaseURL()
+    })
+  }
+
+  private async getMessageContent(message: Message): Promise<string | ChatCompletionContentPart[]> {
+    const file = first(message.files)
+
+    if (!file) {
+      return message.content
+    }
+
+    if (file.type.includes('image')) {
+      return [
+        { type: 'text', text: message.content },
+        {
+          type: 'image_url',
+          image_url: {
+            url: await fileToBase64(file)
+          }
+        }
+      ]
+    }
+
+    return message.content
+  }
+
+  async completions(
+    messages: Message[],
+    assistant: Assistant,
+    onChunk: ({ text, usage }: { text?: string; usage?: OpenAI.Completions.CompletionUsage }) => void
+  ): Promise<void> {
+    const defaultModel = getDefaultModel()
+    const model = assistant.model || defaultModel
+    const { contextCount, maxTokens } = getAssistantSettings(assistant)
+
+    const systemMessage = assistant.prompt ? { role: 'system', content: assistant.prompt } : undefined
+
+    const userMessages: ChatCompletionMessageParam[] = []
+
+    for (const message of takeRight(messages, contextCount + 1)) {
+      userMessages.push({
+        role: message.role,
+        content: await this.getMessageContent(message)
+      } as ChatCompletionMessageParam)
+    }
+
+    // @ts-ignore key is not typed
+    const stream = await this.sdk.chat.completions.create({
+      model: model.id,
+      messages: [systemMessage, ...userMessages].filter(Boolean) as ChatCompletionMessageParam[],
+      stream: true,
+      temperature: assistant?.settings?.temperature,
+      max_tokens: maxTokens,
+      keep_alive: this.keepAliveTime
+    })
+
+    for await (const chunk of stream) {
+      if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) break
+      onChunk({ text: chunk.choices[0]?.delta?.content || '', usage: chunk.usage })
+    }
+  }
+
+  async translate(message: Message, assistant: Assistant) {
+    const defaultModel = getDefaultModel()
+    const model = assistant.model || defaultModel
+    const messages = [
+      { role: 'system', content: assistant.prompt },
+      { role: 'user', content: message.content }
+    ]
+
+    // @ts-ignore key is not typed
+    const response = await this.sdk.chat.completions.create({
+      model: model.id,
+      messages: messages as ChatCompletionMessageParam[],
+      stream: false,
+      keep_alive: this.keepAliveTime
+    })
+
+    return response.choices[0].message?.content || ''
+  }
+
+  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
+    const model = getTopNamingModel() || assistant.model || getDefaultModel()
+
+    const userMessages = takeRight(messages, 5).map((message) => ({
+      role: message.role,
+      content: message.content
+    }))
+
+    const systemMessage = {
+      role: 'system',
+      content: '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不要使用标点符号和其他特殊符号。'
+    }
+
+    // @ts-ignore key is not typed
+    const response = await this.sdk.chat.completions.create({
+      model: model.id,
+      messages: [systemMessage, ...(isLocalAi ? [first(userMessages)] : userMessages)] as ChatCompletionMessageParam[],
+      stream: false,
+      max_tokens: 50,
+      keep_alive: this.keepAliveTime
+    })
+
+    return removeQuotes(response.choices[0].message?.content?.substring(0, 50) || '')
+  }
+
+  async suggestions(messages: Message[], assistant: Assistant): Promise<Suggestion[]> {
+    const model = assistant.model
+
+    if (!model) {
+      return []
+    }
+
+    const response: any = await this.sdk.request({
+      method: 'post',
+      path: '/advice_questions',
+      body: {
+        messages: messages.filter((m) => m.role === 'user').map((m) => ({ role: m.role, content: m.content })),
+        model: model.id,
+        max_tokens: 0,
+        temperature: 0,
+        n: 0
+      }
+    })
+
+    return response?.questions?.filter(Boolean)?.map((q: any) => ({ content: q })) || []
+  }
+
+  public async check(): Promise<{ valid: boolean; error: Error | null }> {
+    const model = this.provider.models[0]
+
+    const body = {
+      model: model.id,
+      messages: [{ role: 'user', content: 'hi' }],
+      max_tokens: 100,
+      stream: false
+    }
+
+    try {
+      const response = await this.sdk.chat.completions.create(body as ChatCompletionCreateParamsNonStreaming)
+
+      return {
+        valid: Boolean(response?.choices[0].message),
+        error: null
+      }
+    } catch (error: any) {
+      return {
+        valid: false,
+        error
+      }
+    }
+  }
+
+  public async models(): Promise<OpenAI.Models.Model[]> {
+    try {
+      const response = await this.sdk.models.list()
+      return response.data
+    } catch (error) {
+      return []
+    }
+  }
+}
--- a/src/renderer/src/providers/ProviderFactory.ts
+++ b/src/renderer/src/providers/ProviderFactory.ts
@@ -0,0 +1,19 @@
+import { Provider } from '@renderer/types'
+
+import AnthropicProvider from './AnthropicProvider'
+import BaseProvider from './BaseProvider'
+import GeminiProvider from './GeminiProvider'
+import OpenAIProvider from './OpenAIProvider'
+
+export default class ProviderFactory {
+  static create(provider: Provider): BaseProvider {
+    switch (provider.id) {
+      case 'anthropic':
+        return new AnthropicProvider(provider)
+      case 'gemini':
+        return new GeminiProvider(provider)
+      default:
+        return new OpenAIProvider(provider)
+    }
+  }
+}
--- a/src/renderer/src/services/ProviderSDK.ts
+++ b/src/renderer/src/services/ProviderSDK.ts
@@ -1,344 +0,0 @@
-import Anthropic from '@anthropic-ai/sdk'
-import { MessageCreateParamsNonStreaming, MessageParam } from '@anthropic-ai/sdk/resources'
-import { GoogleGenerativeAI } from '@google/generative-ai'
-import { DEFAULT_MAX_TOKENS } from '@renderer/config/constant'
-import { isLocalAi } from '@renderer/config/env'
-import { getOllamaKeepAliveTime } from '@renderer/hooks/useOllama'
-import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
-import { removeQuotes } from '@renderer/utils'
-import axios from 'axios'
-import { first, isEmpty, sum, takeRight } from 'lodash'
-import OpenAI from 'openai'
-import { ChatCompletionCreateParamsNonStreaming, ChatCompletionMessageParam } from 'openai/resources'
-
-import { getAssistantSettings, getDefaultModel, getTopNamingModel } from './assistant'
-import { EVENT_NAMES } from './event'
-
-export default class ProviderSDK {
-  provider: Provider
-  openaiSdk: OpenAI
-  anthropicSdk: Anthropic
-  geminiSdk: GoogleGenerativeAI
-
-  constructor(provider: Provider) {
-    this.provider = provider
-    const host = provider.apiHost
-    const baseURL = host.endsWith('/') ? host : `${provider.apiHost}/v1/`
-    this.anthropicSdk = new Anthropic({ apiKey: provider.apiKey, baseURL })
-    this.openaiSdk = new OpenAI({ dangerouslyAllowBrowser: true, apiKey: provider.apiKey, baseURL })
-    this.geminiSdk = new GoogleGenerativeAI(provider.apiKey)
-  }
-
-  private get isAnthropic() {
-    return this.provider.id === 'anthropic'
-  }
-
-  private get isGemini() {
-    return this.provider.id === 'gemini'
-  }
-
-  private get keepAliveTime() {
-    return this.provider.id === 'ollama' ? getOllamaKeepAliveTime() : undefined
-  }
-
-  public async completions(
-    messages: Message[],
-    assistant: Assistant,
-    onChunk: ({ text, usage }: { text?: string; usage?: OpenAI.Completions.CompletionUsage }) => void
-  ) {
-    const defaultModel = getDefaultModel()
-    const model = assistant.model || defaultModel
-    const { contextCount, maxTokens } = getAssistantSettings(assistant)
-
-    const systemMessage = assistant.prompt ? { role: 'system', content: assistant.prompt } : undefined
-    const userMessages = takeRight(messages, contextCount + 1).map((message) => ({
-      role: message.role,
-      content: message.content
-    }))
-
-    if (this.isAnthropic) {
-      return new Promise<void>((resolve, reject) => {
-        const stream = this.anthropicSdk.messages
-          .stream({
-            model: model.id,
-            messages: userMessages.filter(Boolean) as MessageParam[],
-            max_tokens: maxTokens || DEFAULT_MAX_TOKENS,
-            temperature: assistant?.settings?.temperature,
-            system: assistant.prompt,
-            stream: true
-          })
-          .on('text', (text) => {
-            if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) {
-              resolve()
-              return stream.controller.abort()
-            }
-            onChunk({ text })
-          })
-          .on('finalMessage', (message) => {
-            onChunk({
-              text: '',
-              usage: {
-                prompt_tokens: message.usage.input_tokens,
-                completion_tokens: message.usage.output_tokens,
-                total_tokens: sum(Object.values(message.usage))
-              }
-            })
-            resolve()
-          })
-          .on('error', (error) => reject(error))
-      })
-    }
-
-    if (this.isGemini) {
-      const geminiModel = this.geminiSdk.getGenerativeModel({
-        model: model.id,
-        systemInstruction: assistant.prompt,
-        generationConfig: {
-          maxOutputTokens: maxTokens,
-          temperature: assistant?.settings?.temperature
-        }
-      })
-
-      const userLastMessage = userMessages.pop()
-
-      const chat = geminiModel.startChat({
-        history: userMessages.map((message) => ({
-          role: message.role === 'user' ? 'user' : 'model',
-          parts: [{ text: message.content }]
-        }))
-      })
-
-      const userMessagesStream = await chat.sendMessageStream(userLastMessage?.content!)
-
-      for await (const chunk of userMessagesStream.stream) {
-        if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) break
-        onChunk({
-          text: chunk.text(),
-          usage: {
-            prompt_tokens: chunk.usageMetadata?.promptTokenCount || 0,
-            completion_tokens: chunk.usageMetadata?.candidatesTokenCount || 0,
-            total_tokens: chunk.usageMetadata?.totalTokenCount || 0
-          }
-        })
-      }
-
-      return
-    }
-
-    // @ts-ignore key is not typed
-    const stream = await this.openaiSdk.chat.completions.create({
-      model: model.id,
-      messages: [systemMessage, ...userMessages].filter(Boolean) as ChatCompletionMessageParam[],
-      stream: true,
-      temperature: assistant?.settings?.temperature,
-      max_tokens: maxTokens,
-      keep_alive: this.keepAliveTime
-    })
-
-    for await (const chunk of stream) {
-      if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) break
-      onChunk({ text: chunk.choices[0]?.delta?.content || '', usage: chunk.usage })
-    }
-  }
-
-  public async translate(message: Message, assistant: Assistant) {
-    const defaultModel = getDefaultModel()
-    const { maxTokens } = getAssistantSettings(assistant)
-    const model = assistant.model || defaultModel
-    const messages = [
-      { role: 'system', content: assistant.prompt },
-      { role: 'user', content: message.content }
-    ]
-
-    if (this.isAnthropic) {
-      const response = await this.anthropicSdk.messages.create({
-        model: model.id,
-        messages: messages.filter((m) => m.role === 'user') as MessageParam[],
-        max_tokens: 4096,
-        temperature: assistant?.settings?.temperature,
-        system: assistant.prompt,
-        stream: false
-      })
-
-      return response.content[0].type === 'text' ? response.content[0].text : ''
-    }
-
-    if (this.isGemini) {
-      const geminiModel = this.geminiSdk.getGenerativeModel({
-        model: model.id,
-        systemInstruction: assistant.prompt,
-        generationConfig: {
-          maxOutputTokens: maxTokens,
-          temperature: assistant?.settings?.temperature
-        }
-      })
-
-      const { response } = await geminiModel.generateContent(message.content)
-
-      return response.text()
-    }
-
-    // @ts-ignore key is not typed
-    const response = await this.openaiSdk.chat.completions.create({
-      model: model.id,
-      messages: messages as ChatCompletionMessageParam[],
-      stream: false,
-      keep_alive: this.keepAliveTime
-    })
-
-    return response.choices[0].message?.content || ''
-  }
-
-  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
-    const model = getTopNamingModel() || assistant.model || getDefaultModel()
-
-    const userMessages = takeRight(messages, 5).map((message) => ({
-      role: message.role,
-      content: message.content
-    }))
-
-    const systemMessage = {
-      role: 'system',
-      content: '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不要使用标点符号和其他特殊符号。'
-    }
-
-    if (this.isAnthropic) {
-      const message = await this.anthropicSdk.messages.create({
-        messages: userMessages as Anthropic.Messages.MessageParam[],
-        model: model.id,
-        system: systemMessage.content,
-        stream: false,
-        max_tokens: 4096
-      })
-
-      return message.content[0].type === 'text' ? message.content[0].text : null
-    }
-
-    if (this.isGemini) {
-      const geminiModel = this.geminiSdk.getGenerativeModel({
-        model: model.id,
-        systemInstruction: systemMessage.content,
-        generationConfig: {
-          temperature: assistant?.settings?.temperature
-        }
-      })
-
-      const lastUserMessage = userMessages.pop()
-
-      const chat = await geminiModel.startChat({
-        history: userMessages.map((message) => ({
-          role: message.role === 'user' ? 'user' : 'model',
-          parts: [{ text: message.content }]
-        }))
-      })
-
-      const { response } = await chat.sendMessage(lastUserMessage?.content!)
-
-      return response.text()
-    }
-
-    // @ts-ignore key is not typed
-    const response = await this.openaiSdk.chat.completions.create({
-      model: model.id,
-      messages: [systemMessage, ...(isLocalAi ? [first(userMessages)] : userMessages)] as ChatCompletionMessageParam[],
-      stream: false,
-      max_tokens: 50,
-      keep_alive: this.keepAliveTime
-    })
-
-    return removeQuotes(response.choices[0].message?.content?.substring(0, 50) || '')
-  }
-
-  public async suggestions(messages: Message[], assistant: Assistant): Promise<Suggestion[]> {
-    const model = assistant.model
-
-    if (!model) {
-      return []
-    }
-
-    const response: any = await this.openaiSdk.request({
-      method: 'post',
-      path: '/advice_questions',
-      body: {
-        messages: messages.filter((m) => m.role === 'user').map((m) => ({ role: m.role, content: m.content })),
-        model: model.id,
-        max_tokens: 0,
-        temperature: 0,
-        n: 0
-      }
-    })
-
-    return response?.questions?.filter(Boolean)?.map((q: any) => ({ content: q })) || []
-  }
-
-  public async check(): Promise<{ valid: boolean; error: Error | null }> {
-    const model = this.provider.models[0]
-
-    const body = {
-      model: model.id,
-      messages: [{ role: 'user', content: 'hi' }],
-      max_tokens: 100,
-      stream: false
-    }
-
-    try {
-      if (this.isAnthropic) {
-        const message = await this.anthropicSdk.messages.create(body as MessageCreateParamsNonStreaming)
-        return {
-          valid: message.content.length > 0,
-          error: null
-        }
-      }
-
-      if (this.isGemini) {
-        const geminiModel = this.geminiSdk.getGenerativeModel({ model: body.model })
-        const result = await geminiModel.generateContent(body.messages[0].content)
-        return {
-          valid: !isEmpty(result.response.text()),
-          error: null
-        }
-      }
-
-      const response = await this.openaiSdk.chat.completions.create(body as ChatCompletionCreateParamsNonStreaming)
-
-      return {
-        valid: Boolean(response?.choices[0].message),
-        error: null
-      }
-    } catch (error: any) {
-      return {
-        valid: false,
-        error
-      }
-    }
-  }
-
-  public async models(): Promise<OpenAI.Models.Model[]> {
-    try {
-      if (this.isAnthropic) {
-        return []
-      }
-
-      if (this.isGemini) {
-        const api = this.provider.apiHost + '/v1beta/models'
-        const { data } = await axios.get(api, { params: { key: this.provider.apiKey } })
-        return data.models.map(
-          (m: any) =>
-            ({
-              id: m.name.replace('models/', ''),
-              name: m.displayName,
-              description: m.description,
-              object: 'model',
-              created: Date.now(),
-              owned_by: 'gemini'
-            }) as OpenAI.Models.Model
-        )
-      }
-
-      const response = await this.openaiSdk.models.list()
-      return response.data
-    } catch (error) {
-      return []
-    }
-  }
-}
--- a/src/renderer/src/services/api.ts
+++ b/src/renderer/src/services/api.ts
@@ -6,6 +6,7 @@ import { uuid } from '@renderer/utils'
 import dayjs from 'dayjs'
 import { isEmpty } from 'lodash'

+import AiProvider from '../providers/AiProvider'
 import {
  getAssistantProvider,
  getDefaultModel,
@@ -15,7 +16,6 @@ import {
 } from './assistant'
 import { EVENT_NAMES, EventEmitter } from './event'
 import { filterMessages } from './messages'
-import ProviderSDK from './ProviderSDK'

 export async function fetchChatCompletion({
  messages,
@@ -33,7 +33,7 @@ export async function fetchChatCompletion({
  const provider = getAssistantProvider(assistant)
  const defaultModel = getDefaultModel()
  const model = assistant.model || defaultModel
-  const providerSdk = new ProviderSDK(provider)
+  const AI = new AiProvider(provider)

  store.dispatch(setGenerating(true))

@@ -61,7 +61,7 @@ export async function fetchChatCompletion({
  }, 1000)

  try {
-    await providerSdk.completions(filterMessages(messages), assistant, ({ text, usage }) => {
+    await AI.completions(filterMessages(messages), assistant, ({ text, usage }) => {
      message.content = message.content + text || ''
      message.usage = usage
      onResponse({ ...message, status: 'pending' })
@@ -103,10 +103,10 @@ export async function fetchTranslate({ message, assistant }: { message: Message;
    return ''
  }

-  const providerSdk = new ProviderSDK(provider)
+  const AI = new AiProvider(provider)

  try {
-    return await providerSdk.translate(message, assistant)
+    return await AI.translate(message, assistant)
  } catch (error: any) {
    return ''
  }
@@ -120,10 +120,10 @@ export async function fetchMessagesSummary({ messages, assistant }: { messages:
    return null
  }

-  const providerSdk = new ProviderSDK(provider)
+  const AI = new AiProvider(provider)

  try {
-    return await providerSdk.summaries(filterMessages(messages), assistant)
+    return await AI.summaries(filterMessages(messages), assistant)
  } catch (error: any) {
    return null
  }
@@ -136,10 +136,8 @@ export async function fetchSuggestions({
  messages: Message[]
  assistant: Assistant
 }): Promise<Suggestion[]> {
-  console.debug('fetchSuggestions', messages, assistant)
  const provider = getAssistantProvider(assistant)
-  const providerSdk = new ProviderSDK(provider)
-  console.debug('fetchSuggestions', provider)
+  const AI = new AiProvider(provider)
  const model = assistant.model

  if (!model) {
@@ -155,7 +153,7 @@ export async function fetchSuggestions({
  }

  try {
-    return await providerSdk.suggestions(messages, assistant)
+    return await AI.suggestions(messages, assistant)
  } catch (error: any) {
    return []
  }
@@ -183,9 +181,9 @@ export async function checkApi(provider: Provider) {
    return false
  }

-  const providerSdk = new ProviderSDK(provider)
+  const AI = new AiProvider(provider)

-  const { valid } = await providerSdk.check()
+  const { valid } = await AI.check()

  window.message[valid ? 'success' : 'error']({
    key: 'api-check',
@@ -204,10 +202,10 @@ function hasApiKey(provider: Provider) {
 }

 export async function fetchModels(provider: Provider) {
-  const providerSdk = new ProviderSDK(provider)
+  const AI = new AiProvider(provider)

  try {
-    return await providerSdk.models()
+    return await AI.models()
  } catch (error) {
    return []
  }
--- a/src/renderer/src/services/assistant.ts
+++ b/src/renderer/src/services/assistant.ts
@@ -18,6 +18,8 @@ export function getDefaultAssistant(): Assistant {
 export function getDefaultTopic(): Topic {
  return {
    id: uuid(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
    name: i18n.t('chat.default.topic.name'),
    messages: []
  }
--- a/src/renderer/src/store/assistants.ts
+++ b/src/renderer/src/store/assistants.ts
@@ -44,11 +44,14 @@ const assistantsSlice = createSlice({
      )
    },
    addTopic: (state, action: PayloadAction<{ assistantId: string; topic: Topic }>) => {
+      const topic = action.payload.topic
+      topic.createdAt = new Date().toISOString()
+      topic.updatedAt = new Date().toISOString()
      state.assistants = state.assistants.map((assistant) =>
        assistant.id === action.payload.assistantId
          ? {
              ...assistant,
-              topics: uniqBy([action.payload.topic, ...assistant.topics], 'id')
+              topics: uniqBy([topic, ...assistant.topics], 'id')
            }
          : assistant
      )
@@ -64,13 +67,13 @@ const assistantsSlice = createSlice({
      )
    },
    updateTopic: (state, action: PayloadAction<{ assistantId: string; topic: Topic }>) => {
+      const newTopic = action.payload.topic
+      newTopic.updatedAt = new Date().toISOString()
      state.assistants = state.assistants.map((assistant) =>
        assistant.id === action.payload.assistantId
          ? {
              ...assistant,
-              topics: assistant.topics.map((topic) =>
-                topic.id === action.payload.topic.id ? action.payload.topic : topic
-              )
+              topics: assistant.topics.map((topic) => (topic.id === newTopic.id ? newTopic : topic))
            }
          : assistant
      )
--- a/src/renderer/src/store/index.ts
+++ b/src/renderer/src/store/index.ts
@@ -22,7 +22,7 @@ const persistedReducer = persistReducer(
  {
    key: 'cherry-studio',
    storage,
-    version: 22,
+    version: 24,
    blacklist: ['runtime'],
    migrate
  },
--- a/src/renderer/src/store/llm.ts
+++ b/src/renderer/src/store/llm.ts
@@ -19,25 +19,25 @@ export interface LlmState {
 }

 const initialState: LlmState = {
-  defaultModel: SYSTEM_MODELS.openai[0],
-  topicNamingModel: SYSTEM_MODELS.openai[0],
-  translateModel: SYSTEM_MODELS.openai[0],
+  defaultModel: SYSTEM_MODELS.silicon[0],
+  topicNamingModel: SYSTEM_MODELS.silicon[0],
+  translateModel: SYSTEM_MODELS.silicon[0],
  providers: [
    {
-      id: 'openai',
-      name: 'OpenAI',
+      id: 'silicon',
+      name: 'Silicon',
      apiKey: '',
-      apiHost: 'https://api.openai.com',
-      models: SYSTEM_MODELS.openai.filter((m) => m.enabled),
+      apiHost: 'https://api.siliconflow.cn',
+      models: SYSTEM_MODELS.silicon,
      isSystem: true,
      enabled: true
    },
    {
-      id: 'gemini',
-      name: 'Gemini',
+      id: 'ollama',
+      name: 'Ollama',
      apiKey: '',
-      apiHost: 'https://generativelanguage.googleapis.com',
-      models: SYSTEM_MODELS.gemini.filter((m) => m.enabled),
+      apiHost: 'http://localhost:11434/v1/',
+      models: SYSTEM_MODELS.ollama,
      isSystem: true,
      enabled: false
    },
@@ -46,25 +46,25 @@ const initialState: LlmState = {
      name: 'Anthropic',
      apiKey: '',
      apiHost: 'https://api.anthropic.com/',
-      models: SYSTEM_MODELS.anthropic.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.anthropic,
      isSystem: true,
      enabled: false
    },
    {
-      id: 'ollama',
-      name: 'Ollama',
+      id: 'openai',
+      name: 'OpenAI',
      apiKey: '',
-      apiHost: 'http://localhost:11434/v1/',
-      models: SYSTEM_MODELS.ollama.filter((m) => m.enabled),
+      apiHost: 'https://api.openai.com',
+      models: SYSTEM_MODELS.openai,
      isSystem: true,
      enabled: false
    },
    {
-      id: 'silicon',
-      name: 'Silicon',
+      id: 'gemini',
+      name: 'Gemini',
      apiKey: '',
-      apiHost: 'https://api.siliconflow.cn',
-      models: SYSTEM_MODELS.silicon.filter((m) => m.enabled),
+      apiHost: 'https://generativelanguage.googleapis.com',
+      models: SYSTEM_MODELS.gemini,
      isSystem: true,
      enabled: false
    },
@@ -73,7 +73,7 @@ const initialState: LlmState = {
      name: 'deepseek',
      apiKey: '',
      apiHost: 'https://api.deepseek.com',
-      models: SYSTEM_MODELS.deepseek.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.deepseek,
      isSystem: true,
      enabled: false
    },
@@ -82,7 +82,7 @@ const initialState: LlmState = {
      name: 'Yi',
      apiKey: '',
      apiHost: 'https://api.lingyiwanwu.com',
-      models: SYSTEM_MODELS.yi.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.yi,
      isSystem: true,
      enabled: false
    },
@@ -91,7 +91,7 @@ const initialState: LlmState = {
      name: 'ZhiPu',
      apiKey: '',
      apiHost: 'https://open.bigmodel.cn/api/paas/v4/',
-      models: SYSTEM_MODELS.zhipu.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.zhipu,
      isSystem: true,
      enabled: false
    },
@@ -100,7 +100,7 @@ const initialState: LlmState = {
      name: 'Moonshot AI',
      apiKey: '',
      apiHost: 'https://api.moonshot.cn',
-      models: SYSTEM_MODELS.moonshot.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.moonshot,
      isSystem: true,
      enabled: false
    },
@@ -109,7 +109,7 @@ const initialState: LlmState = {
      name: 'BAICHUAN AI',
      apiKey: '',
      apiHost: 'https://api.baichuan-ai.com',
-      models: SYSTEM_MODELS.baichuan.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.baichuan,
      isSystem: true,
      enabled: false
    },
@@ -118,7 +118,7 @@ const initialState: LlmState = {
      name: 'DashScope',
      apiKey: '',
      apiHost: 'https://dashscope.aliyuncs.com/compatible-mode/v1/',
-      models: SYSTEM_MODELS.dashscope.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.dashscope,
      isSystem: true,
      enabled: false
    },
@@ -127,7 +127,7 @@ const initialState: LlmState = {
      name: 'StepFun',
      apiKey: '',
      apiHost: 'https://api.stepfun.com',
-      models: SYSTEM_MODELS.stepfun.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.stepfun,
      isSystem: true,
      enabled: false
    },
@@ -136,7 +136,7 @@ const initialState: LlmState = {
      name: 'doubao',
      apiKey: '',
      apiHost: 'https://ark.cn-beijing.volces.com/api/v3/',
-      models: SYSTEM_MODELS.doubao.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.doubao,
      isSystem: true,
      enabled: false
    },
@@ -145,16 +145,7 @@ const initialState: LlmState = {
      name: 'MiniMax',
      apiKey: '',
      apiHost: 'https://api.minimax.chat/v1/',
-      models: SYSTEM_MODELS.minimax.filter((m) => m.enabled),
-      isSystem: true,
-      enabled: false
-    },
-    {
-      id: 'aihubmix',
-      name: 'AiHubMix',
-      apiKey: '',
-      apiHost: 'https://aihubmix.com',
-      models: SYSTEM_MODELS.aihubmix.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.minimax,
      isSystem: true,
      enabled: false
    },
@@ -172,7 +163,7 @@ const initialState: LlmState = {
      name: 'OpenRouter',
      apiKey: '',
      apiHost: 'https://openrouter.ai/api/v1/',
-      models: SYSTEM_MODELS.openrouter.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.openrouter,
      isSystem: true,
      enabled: false
    },
@@ -181,7 +172,16 @@ const initialState: LlmState = {
      name: 'Groq',
      apiKey: '',
      apiHost: 'https://api.groq.com/openai',
-      models: SYSTEM_MODELS.groq.filter((m) => m.enabled),
+      models: SYSTEM_MODELS.groq,
+      isSystem: true,
+      enabled: false
+    },
+    {
+      id: 'aihubmix',
+      name: 'AiHubMix',
+      apiKey: '',
+      apiHost: 'https://aihubmix.com',
+      models: SYSTEM_MODELS.aihubmix,
      isSystem: true,
      enabled: false
    }
--- a/src/renderer/src/store/migrate.ts
+++ b/src/renderer/src/store/migrate.ts
@@ -1,7 +1,8 @@
 import { SYSTEM_MODELS } from '@renderer/config/models'
 import i18n from '@renderer/i18n'
 import { Assistant } from '@renderer/types'
-import { isEmpty } from 'lodash'
+import localforage from 'localforage'
+import { isEmpty, pick } from 'lodash'
 import { createMigrate } from 'redux-persist'

 import { RootState } from '.'
@@ -20,7 +21,7 @@ const migrateConfig = {
            apiKey: '',
            apiHost: 'https://api.lingyiwanwu.com',
            isSystem: true,
-            models: SYSTEM_MODELS.yi.filter((m) => m.enabled)
+            models: SYSTEM_MODELS.yi
          }
        ]
      }
@@ -39,7 +40,7 @@ const migrateConfig = {
            apiKey: '',
            apiHost: 'https://open.bigmodel.cn/api/paas/v4/',
            isSystem: true,
-            models: SYSTEM_MODELS.zhipu.filter((m) => m.enabled)
+            models: SYSTEM_MODELS.zhipu
          }
        ]
      }
@@ -77,7 +78,7 @@ const migrateConfig = {
            apiKey: '',
            apiHost: 'https://api.moonshot.cn',
            isSystem: true,
-            models: SYSTEM_MODELS.moonshot.filter((m) => m.enabled)
+            models: SYSTEM_MODELS.moonshot
          }
        ]
      }
@@ -95,7 +96,7 @@ const migrateConfig = {
            name: 'OpenRouter',
            apiKey: '',
            apiHost: 'https://openrouter.ai/api/v1/',
-            models: SYSTEM_MODELS.openrouter.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.openrouter,
            isSystem: true
          }
        ]
@@ -143,7 +144,7 @@ const migrateConfig = {
        ...state.llm,
        providers: state.llm.providers.map((provider) => {
          if (provider.id === 'zhipu' && provider.models[0] && provider.models[0].id === 'llama3-70b-8192') {
-            provider.models = SYSTEM_MODELS.zhipu.filter((m) => m.enabled)
+            provider.models = SYSTEM_MODELS.zhipu
          }
          return provider
        })
@@ -162,7 +163,7 @@ const migrateConfig = {
            name: 'BAICHUAN AI',
            apiKey: '',
            apiHost: 'https://api.baichuan-ai.com',
-            models: SYSTEM_MODELS.baichuan.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.baichuan,
            isSystem: true,
            enabled: false
          }
@@ -182,7 +183,7 @@ const migrateConfig = {
            name: 'DashScope',
            apiKey: '',
            apiHost: 'https://dashscope.aliyuncs.com/compatible-mode/v1/',
-            models: SYSTEM_MODELS.dashscope.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.dashscope,
            isSystem: true,
            enabled: false
          },
@@ -191,7 +192,7 @@ const migrateConfig = {
            name: 'Anthropic',
            apiKey: '',
            apiHost: 'https://api.anthropic.com/',
-            models: SYSTEM_MODELS.anthropic.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.anthropic,
            isSystem: true,
            enabled: false
          }
@@ -211,7 +212,7 @@ const migrateConfig = {
            name: 'AiHubMix',
            apiKey: '',
            apiHost: 'https://aihubmix.com',
-            models: SYSTEM_MODELS.aihubmix.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.aihubmix,
            isSystem: true,
            enabled: false
          }
@@ -309,7 +310,7 @@ const migrateConfig = {
            name: 'Gemini',
            apiKey: '',
            apiHost: 'https://generativelanguage.googleapis.com',
-            models: SYSTEM_MODELS.gemini.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.gemini,
            isSystem: true,
            enabled: false
          },
@@ -318,7 +319,7 @@ const migrateConfig = {
            name: 'StepFun',
            apiKey: '',
            apiHost: 'https://api.stepfun.com',
-            models: SYSTEM_MODELS.stepfun.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.stepfun,
            isSystem: true,
            enabled: false
          },
@@ -327,7 +328,7 @@ const migrateConfig = {
            name: 'doubao',
            apiKey: '',
            apiHost: 'https://ark.cn-beijing.volces.com/api/v3/',
-            models: SYSTEM_MODELS.doubao.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.doubao,
            isSystem: true,
            enabled: false
          },
@@ -356,13 +357,48 @@ const migrateConfig = {
            name: 'MiniMax',
            apiKey: '',
            apiHost: 'https://api.minimax.chat/v1/',
-            models: SYSTEM_MODELS.minimax.filter((m) => m.enabled),
+            models: SYSTEM_MODELS.minimax,
            isSystem: true,
            enabled: false
          }
        ]
      }
    }
+  },
+  '23': (state: RootState) => {
+    return {
+      ...state,
+      settings: {
+        ...state.settings,
+        showTopics: true,
+        windowStyle: 'transparent'
+      }
+    }
+  },
+  '24': async (state: RootState) => {
+    for (const key of await localforage.keys()) {
+      if (key.startsWith('topic:')) {
+        localforage.getItem(key).then((topic) => localforage.setItem(key, pick(topic, ['id', 'messages'])))
+      }
+    }
+    return {
+      ...state,
+      assistants: {
+        ...state.assistants,
+        assistants: state.assistants.assistants.map((assistant) => ({
+          ...assistant,
+          topics: assistant.topics.map((topic) => ({
+            ...topic,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+          }))
+        }))
+      },
+      settings: {
+        ...state.settings,
+        topicPosition: 'right'
+      }
+    }
  }
 }

--- a/src/renderer/src/store/runtime.ts
+++ b/src/renderer/src/store/runtime.ts
@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { AppLogo } from '@renderer/config/env'
+import { AppLogo, UserAvatar } from '@renderer/config/env'

 export interface RuntimeState {
  avatar: string
@@ -8,7 +8,7 @@ export interface RuntimeState {
 }

 const initialState: RuntimeState = {
-  avatar: AppLogo,
+  avatar: UserAvatar,
  generating: false,
  minappShow: false
 }
--- a/src/renderer/src/store/settings.ts
+++ b/src/renderer/src/store/settings.ts
@@ -9,8 +9,8 @@ export enum ThemeMode {
 }

 export interface SettingsState {
-  showRightSidebar: boolean
  showAssistants: boolean
+  showTopics: boolean
  sendMessageShortcut: SendMessageShortcut
  language: string
  proxyUrl?: string
@@ -19,12 +19,14 @@ export interface SettingsState {
  messageFont: 'system' | 'serif'
  showInputEstimatedTokens: boolean
  theme: ThemeMode
+  windowStyle: 'transparent' | 'opaque'
  fontSize: number
+  topicPosition: 'left' | 'right'
 }

 const initialState: SettingsState = {
-  showRightSidebar: true,
  showAssistants: true,
+  showTopics: true,
  sendMessageShortcut: 'Enter',
  language: navigator.language,
  proxyUrl: undefined,
@@ -33,22 +35,27 @@ const initialState: SettingsState = {
  messageFont: 'system',
  showInputEstimatedTokens: false,
  theme: ThemeMode.light,
-  fontSize: 14
+  windowStyle: 'opaque',
+  fontSize: 14,
+  topicPosition: 'right'
 }

 const settingsSlice = createSlice({
  name: 'settings',
  initialState,
  reducers: {
-    toggleRightSidebar: (state) => {
-      state.showRightSidebar = !state.showRightSidebar
-    },
-    setShowRightSidebar: (state, action: PayloadAction<boolean>) => {
-      state.showRightSidebar = action.payload
+    setShowAssistants: (state, action: PayloadAction<boolean>) => {
+      state.showAssistants = action.payload
    },
    toggleShowAssistants: (state) => {
      state.showAssistants = !state.showAssistants
    },
+    setShowTopics: (state, action: PayloadAction<boolean>) => {
+      state.showTopics = action.payload
+    },
+    toggleShowTopics: (state) => {
+      state.showTopics = !state.showTopics
+    },
    setSendMessageShortcut: (state, action: PayloadAction<SendMessageShortcut>) => {
      state.sendMessageShortcut = action.payload
    },
@@ -75,14 +82,22 @@ const settingsSlice = createSlice({
    },
    setFontSize: (state, action: PayloadAction<number>) => {
      state.fontSize = action.payload
+    },
+    setWindowStyle: (state, action: PayloadAction<'transparent' | 'opaque'>) => {
+      state.windowStyle = action.payload
+      console.log(state.windowStyle)
+    },
+    setTopicPosition: (state, action: PayloadAction<'left' | 'right'>) => {
+      state.topicPosition = action.payload
    }
  }
 })

 export const {
-  setShowRightSidebar,
-  toggleRightSidebar,
+  setShowAssistants,
  toggleShowAssistants,
+  setShowTopics,
+  toggleShowTopics,
  setSendMessageShortcut,
  setLanguage,
  setProxyUrl,
@@ -91,7 +106,9 @@ export const {
  setMessageFont,
  setShowInputEstimatedTokens,
  setTheme,
-  setFontSize
+  setFontSize,
+  setWindowStyle,
+  setTopicPosition
 } = settingsSlice.actions

 export default settingsSlice.reducer
--- a/src/renderer/src/types/index.ts
+++ b/src/renderer/src/types/index.ts
@@ -20,13 +20,15 @@ export type AssistantSettings = {

 export type Message = {
  id: string
+  assistantId: string
  role: 'user' | 'assistant'
  content: string
-  assistantId: string
  topicId: string
-  modelId?: string
  createdAt: string
  status: 'sending' | 'pending' | 'success' | 'paused' | 'error'
+  modelId?: string
+  files?: File[]
+  images?: string[]
  usage?: OpenAI.Completions.CompletionUsage
  type?: 'text' | '@'
 }
@@ -34,6 +36,8 @@ export type Message = {
 export type Topic = {
  id: string
  name: string
+  createdAt: string
+  updatedAt: string
  messages: Message[]
 }

@@ -77,6 +81,7 @@ export type Suggestion = {
 }

 export type MinAppType = {
+  id?: string | number
  name: string
  logo: string
  url: string
--- a/src/renderer/src/utils/index.ts
+++ b/src/renderer/src/utils/index.ts
@@ -223,3 +223,18 @@ export function getBriefInfo(text: string, maxLength: number = 50): string {
  // 截取前面的内容，并在末尾添加 "..."
  return truncatedText + '...'
 }
+
+export async function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    try {
+      const reader = new FileReader()
+      reader.onload = (e: ProgressEvent<FileReader>) => {
+        const result = e.target?.result
+        resolve(typeof result === 'string' ? result : '')
+      }
+      reader.readAsDataURL(file)
+    } catch (error: any) {
+      reject(error)
+    }
+  })
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,7 +15,7 @@ __metadata:
    "@types/adm-zip": "npm:^0"
    adm-zip: "npm:^0.5.15"
    dotenv-cli: "npm:^7.4.2"
-    electron: "npm:^28.3.3"
+    electron: "npm:28.3.3"
    electron-builder: "npm:^24.9.1"
    electron-log: "npm:^5.1.5"
    electron-store: "npm:^8.2.0"
@@ -3472,7 +3472,7 @@ __metadata:
  languageName: node
  linkType: hard

-"electron@npm:^28.3.3":
+"electron@npm:28.3.3, electron@npm:^28.3.3":
  version: 28.3.3
  resolution: "electron@npm:28.3.3"
  dependencies:
Author	SHA1	Message	Date
kangfenmao	f194ebbc20	chore(version): 0.6.7	2024-09-05 23:53:47 +08:00
kangfenmao	ab0e7e1e07	feat: change topics position	2024-09-05 23:53:47 +08:00
kangfenmao	d809f50c0e	feat: Update Content-Security-Policy to allow file: frame-src #38 - Updated Content-Security-Policy directive to allow frame-src from file: in the HTML document.	2024-09-05 17:19:17 +08:00
kangfenmao	a48d24de26	refactor: renamed and refactored topic properties and added date-time tracking - Renamed localforage topic item property from topic object to id. - Added date-time tracking for assistant topics. - Incremented the store version to 24. - Refactored migrate function to add support for local storage and update topics timestamps. - Added createdAt and updatedAt properties to Topic type.	2024-09-05 16:15:48 +08:00
kangfenmao	0dacc20e74	docs(DragableList): improve types and props documentation for DragDropContext responders	2024-09-05 15:30:26 +08:00
kangfenmao	08df6cb4f8	feat: highlight acitve topic icon	2024-09-05 14:36:19 +08:00
kangfenmao	0676ac8942	feat: quickly edit the asistant on edit title #42	2024-09-05 13:41:47 +08:00
kangfenmao	c257e8f0fe	fix: anthropic first message must use the user role #39 {"type":"error","error":{"type":"invalid_request_error","message":"messages: first message must use the "user" role"}}	2024-09-05 13:35:16 +08:00
kangfenmao	521670f683	fix: assistant and topic list style	2024-09-05 00:04:35 +08:00
kangfenmao	87216b5d91	chore(version): 0.6.6	2024-09-04 22:33:15 +08:00
kangfenmao	e6122a3d36	fix: left sidebar icon	2024-09-04 22:31:39 +08:00
kangfenmao	e6e1502308	feat: remove hashtag title	2024-09-04 21:57:23 +08:00
kangfenmao	7f5be3a688	chore(version): 0.6.5	2024-09-04 21:29:56 +08:00
kangfenmao	4dde49a9f0	feat: new chat style	2024-09-04 21:29:16 +08:00
kangfenmao	ce830b692b	revert: fold topics	2024-09-04 15:37:39 +08:00
kangfenmao	563472f3a9	wip	2024-09-04 13:26:51 +08:00
kangfenmao	14acd45927	feat: transparent window settings	2024-09-04 11:23:45 +08:00
kangfenmao	9e2c7a08df	feat: change assistant sidebar width	2024-09-03 23:37:40 +08:00
kangfenmao	f10c8dc379	chore(version): 0.6.4	2024-09-03 22:14:12 +08:00
kangfenmao	fdd815879a	feat: double click to change assistat view	2024-09-03 22:13:25 +08:00
kangfenmao	635f238576	chore(version): 0.6.3	2024-09-03 20:50:46 +08:00
kangfenmao	615e337e3f	fix: assistant nav style	2024-09-03 20:50:37 +08:00
kangfenmao	acd5d4b192	feat: change default avatar	2024-09-03 20:39:27 +08:00
kangfenmao	9a41b697c6	fix: inputbar height	2024-09-03 20:11:25 +08:00
kangfenmao	5cb67e00a6	feat: change default provider	2024-09-03 20:11:20 +08:00
kangfenmao	350f13e97c	fix: backup and restore i18n	2024-09-03 19:30:21 +08:00
kangfenmao	4d6cbf5073	refactor: provider sdk	2024-09-03 19:00:24 +08:00
kangfenmao	8d7b10d21e	refactor: remove modal enabled key	2024-09-03 13:17:55 +08:00
kangfenmao	6753a93c0d	fix: use webview replace iframe	2024-09-03 13:17:38 +08:00
kangfenmao	9ee763337d	refactor: remove models config enabled	2024-09-03 11:40:46 +08:00
kangfenmao	ace0cb7823	feat: merge assistant and topics	2024-09-03 11:36:57 +08:00
kangfenmao	44e518ef03	refactor: assistant drap and drop	2024-09-02 20:48:31 +08:00
kangfenmao	e28b96b45e	feat: expand inputbar height	2024-09-02 15:38:48 +08:00
kangfenmao	11427a980c	feat: auto change inputbar height	2024-09-02 14:09:03 +08:00
kangfenmao	cb95562e58	feat: add attachment button	2024-09-01 23:22:21 +08:00