@lobehub/chat 0.159.3 → 0.159.5

package/CHANGELOG.md

@@ -2,6 +2,66 @@
 
 # Changelog
 
+### [Version 0.159.5](https://github.com/lobehub/lobe-chat/compare/v0.159.4...v0.159.5)
+
+<sup>Released on **2024-05-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix scroll and expand.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix scroll and expand, closes [#2470](https://github.com/lobehub/lobe-chat/issues/2470) ([8b1202a](https://github.com/lobehub/lobe-chat/commit/8b1202a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.159.4](https://github.com/lobehub/lobe-chat/compare/v0.159.3...v0.159.4)
+
+<sup>Released on **2024-05-14**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Refresh model config form & mobile footer button lost.
+
+#### 💄 Styles
+
+- **misc**: Add GPT-4o model, update perplexity models, updates 01.AI model list.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Refresh model config form & mobile footer button lost, closes [#2318](https://github.com/lobehub/lobe-chat/issues/2318) [#2319](https://github.com/lobehub/lobe-chat/issues/2319) [#1811](https://github.com/lobehub/lobe-chat/issues/1811) ([eadcefc](https://github.com/lobehub/lobe-chat/commit/eadcefc))
+
+#### Styles
+
+- **misc**: Add GPT-4o model, closes [#2481](https://github.com/lobehub/lobe-chat/issues/2481) ([ae6a03f](https://github.com/lobehub/lobe-chat/commit/ae6a03f))
+- **misc**: Update perplexity models, closes [#2469](https://github.com/lobehub/lobe-chat/issues/2469) ([488cde7](https://github.com/lobehub/lobe-chat/commit/488cde7))
+- **misc**: Updates 01.AI model list, closes [#2471](https://github.com/lobehub/lobe-chat/issues/2471) ([f28711a](https://github.com/lobehub/lobe-chat/commit/f28711a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.159.3](https://github.com/lobehub/lobe-chat/compare/v0.159.2...v0.159.3)
 
 <sup>Released on **2024-05-14**</sup>

package/docs/usage/start.mdx

@@ -1,5 +1,5 @@
 ---
-title: Get Start with LobeChat
+title: Get started with LobeChat
 description: >-
   Explore the exciting features in LobeChat, including Vision Model, TTS & STT,
   Local LLMs, and Multi AI Providers. Discover more about Agent Market, Plugin

package/package.json

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

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

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from '../features/Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <Header />
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
+        {children}
+      </Flexbox>
+    </>
+  );
+};
+
+export default Layout;

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

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import TopicSearchBar from '../features/TopicSearchBar';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <Flexbox gap={8} height={'100%'} padding={'8px 8px 0'} style={{ overflow: 'hidden' }}>
+      <TopicSearchBar />
+      <Flexbox
+        height={'100%'}
+        style={{ marginInline: -8, overflow: 'hidden', position: 'relative' }}
+        width={'calc(100% + 16px)'}
+      >
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default Layout;

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

@@ -1,15 +1,21 @@
 import { isMobileDevice } from '@/utils/responsive';
 
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
 import SystemRole from './features/SystemRole';
 import TopicListContent from './features/TopicListContent';
 
 const Topic = () => {
   const mobile = isMobileDevice();
 
+  const Layout = mobile ? Mobile : Desktop;
+
   return (
     <>
       {!mobile && <SystemRole />}
-      <TopicListContent mobile={mobile} />
+      <Layout>
+        <TopicListContent />
+      </Layout>
     </>
   );
 };

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

@@ -45,7 +45,7 @@ export const Placeholder = memo(() => {
 });
 
 export const SkeletonList = memo(() => (
-  <Flexbox>
+  <Flexbox style={{ paddingTop: 6 }}>
     {Array.from({ length: 8 }).map((_, i) => (
       <Placeholder key={i} />
     ))}

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

@@ -19,7 +19,12 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   `,
   container: css`
     cursor: pointer;
+
+    width: calc(100% - 16px);
+    margin-block: 2px;
+    margin-inline: 8px;
     padding: 8px;
+
     border-radius: ${token.borderRadius}px;
 
     &:hover {

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

@@ -1,18 +1,100 @@
+'use client';
+
+import { EmptyCard } from '@lobehub/ui';
+import { useThemeMode } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import React, { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+
+import { imageUrl } from '@/const/url';
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { ChatTopic } from '@/types/topic';
+
+import { Placeholder, SkeletonList } from './SkeletonList';
+import TopicItem from './TopicItem';
+
+const TopicListContent = memo(() => {
+  const { t } = useTranslation('chat');
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const { isDarkMode } = useThemeMode();
+  const [topicsInit, activeTopicId, topicLength] = useChatStore((s) => [
+    s.topicsInit,
+    s.activeTopicId,
+    topicSelectors.currentTopicLength(s),
+  ]);
+  const [visible, updateGuideState] = useUserStore((s) => [
+    s.preference.guide?.topic,
+    s.updateGuideState,
+  ]);
+
+  const topics = useChatStore(
+    (s) => [
+      {
+        favorite: false,
+        id: 'default',
+        title: t('topic.defaultTitle'),
+      } as ChatTopic,
+      ...topicSelectors.displayTopics(s),
+    ],
+    isEqual,
+  );
+
+  const itemContent = useCallback(
+    (index: number, { id, favorite, title }: ChatTopic) =>
+      index === 0 ? (
+        <TopicItem active={!activeTopicId} fav={favorite} title={title} />
+      ) : (
+        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
+      ),
+    [activeTopicId],
+  );
+
+  const activeIndex = topics.findIndex((topic) => topic.id === activeTopicId);
 
-import Header from './Header';
-import { Topic } from './Topic';
-import TopicSearchBar from './TopicSearchBar';
-
-const TopicListContent = ({ mobile }: { mobile?: boolean }) => {
-  return (
-    <Flexbox gap={mobile ? 8 : 0} height={'100%'} style={{ overflow: 'hidden' }}>
-      {mobile ? <TopicSearchBar /> : <Header />}
-      <Flexbox gap={16} height={'100%'} style={{ paddingTop: 6, position: 'relative' }}>
-        <Topic mobile={mobile} />
-      </Flexbox>
-    </Flexbox>
+  return !topicsInit ? (
+    <SkeletonList />
+  ) : (
+    <>
+      {topicLength === 0 && visible && (
+        <Flexbox paddingInline={8}>
+          <EmptyCard
+            alt={t('topic.guide.desc')}
+            cover={imageUrl(`empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`)}
+            desc={t('topic.guide.desc')}
+            height={120}
+            imageProps={{
+              priority: true,
+            }}
+            onVisibleChange={(visible) => {
+              updateGuideState({ topic: visible });
+            }}
+            style={{ flex: 'none', marginBottom: 12 }}
+            title={t('topic.guide.title')}
+            visible={visible}
+            width={200}
+          />
+        </Flexbox>
+      )}
+      <Virtuoso
+        components={{ ScrollSeekPlaceholder: Placeholder }}
+        computeItemKey={(_, item) => item.id}
+        data={topics}
+        fixedItemHeight={44}
+        initialTopMostItemIndex={Math.max(activeIndex, 0)}
+        itemContent={itemContent}
+        overscan={44 * 10}
+        ref={virtuosoRef}
+        scrollSeekConfiguration={{
+          enter: (velocity) => Math.abs(velocity) > 350,
+          exit: (velocity) => Math.abs(velocity) < 10,
+        }}
+      />
+    </>
   );
-};
+});
 
 export default TopicListContent;

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

@@ -2,7 +2,8 @@
 
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
-import { PropsWithChildren, memo, useEffect, useLayoutEffect, useState } from 'react';
+import isEqual from 'fast-deep-equal';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -26,27 +27,23 @@ const useStyles = createStyles(({ css, token }) => ({
 const TopicPanel = memo(({ children }: PropsWithChildren) => {
   const { styles } = useStyles();
   const { md = true, lg = true } = useResponsive();
-  const [showAgentSettings, toggleConfig, isPreferenceInit] = useGlobalStore((s) => [
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
     s.isPreferenceInit,
   ]);
-  const [expand, setExpand] = useState(showAgentSettings);
+  const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showAgentSettings));
 
-  const handleExpand = (e: boolean) => {
-    toggleConfig(e);
-    setExpand(e);
+  const handleExpand = (expand: boolean) => {
+    if (isEqual(expand, Boolean(showAgentSettings))) return;
+    toggleConfig(expand);
+    setCacheExpand(expand);
   };
 
-  useLayoutEffect(() => {
-    if (!isPreferenceInit) return;
-    setExpand(showAgentSettings);
-  }, [isPreferenceInit, showAgentSettings]);
-
   useEffect(() => {
-    if (lg && showAgentSettings) setExpand(true);
-    if (!lg) setExpand(false);
-  }, [lg, showAgentSettings]);
+    if (lg && cacheExpand) toggleConfig(true);
+    if (!lg) toggleConfig(false);
+  }, [lg, cacheExpand]);
 
   return (
     <DraggablePanel
@@ -54,7 +51,7 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
       classNames={{
         content: styles.content,
       }}
-      expand={expand}
+      expand={showAgentSettings}
       minWidth={CHAT_SIDEBAR_WIDTH}
       mode={md ? 'fixed' : 'float'}
       onExpandChange={handleExpand}

package/src/app/(main)/chat/(workspace)/_layout/Mobile/TopicModal.tsx

@@ -17,7 +17,15 @@ const Topics = memo(({ children }: PropsWithChildren) => {
   const { t } = useTranslation('chat');
 
   return (
-    <Modal allowFullscreen onCancel={() => setOpen(false)} open={open} title={t('topic.title')}>
+    <Modal
+      allowFullscreen
+      onCancel={() => setOpen(false)}
+      open={open}
+      styles={{
+        body: { padding: 0 },
+      }}
+      title={t('topic.title')}
+    >
       {children}
     </Modal>
   );

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

@@ -3,7 +3,7 @@
 import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo, useEffect, useLayoutEffect, useState } from 'react';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
 
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
@@ -18,25 +18,21 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 const SessionPanel = memo<PropsWithChildren>(({ children }) => {
   const { md = true } = useResponsive();
+
   const { styles } = useStyles();
-  const [sessionsWidth, sessionExpandable, updatePreference, isPreferenceInit] = useGlobalStore(
-    (s) => [
-      s.preference.sessionsWidth,
-      s.preference.showSessionPanel,
-      s.updatePreference,
-      s.isPreferenceInit,
-    ],
-  );
-  const [expand, setExpand] = useState(sessionExpandable);
+  const [sessionsWidth, sessionExpandable, updatePreference] = useGlobalStore((s) => [
+    s.preference.sessionsWidth,
+    s.preference.showSessionPanel,
+    s.updatePreference,
+  ]);
+  const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(sessionExpandable));
   const [tmpWidth, setWidth] = useState(sessionsWidth);
   if (tmpWidth !== sessionsWidth) setWidth(sessionsWidth);
 
-  const handleExpand: DraggablePanelProps['onExpandChange'] = (e) => {
-    updatePreference({
-      sessionsWidth: e ? 320 : 0,
-      showSessionPanel: e,
-    });
-    setExpand(e);
+  const handleExpand = (expand: boolean) => {
+    if (isEqual(expand, sessionExpandable)) return;
+    updatePreference({ showSessionPanel: expand });
+    setCacheExpand(expand);
   };
 
   const handleSizeChange: DraggablePanelProps['onSizeChange'] = (_, size) => {
@@ -47,21 +43,16 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
     updatePreference({ sessionsWidth: nextWidth });
   };
 
-  useLayoutEffect(() => {
-    if (!isPreferenceInit) return;
-    setExpand(sessionExpandable);
-  }, [isPreferenceInit, sessionExpandable]);
-
   useEffect(() => {
-    if (md && sessionExpandable) setExpand(true);
-    if (!md) setExpand(false);
-  }, [md, sessionExpandable]);
+    if (md && cacheExpand) updatePreference({ showSessionPanel: true });
+    if (!md) updatePreference({ showSessionPanel: false });
+  }, [md, cacheExpand]);
 
   return (
     <DraggablePanel
       className={styles.panel}
       defaultSize={{ width: tmpWidth }}
-      expand={expand}
+      expand={sessionExpandable}
       maxWidth={400}
       minWidth={FOLDER_WIDTH}
       mode={md ? 'fixed' : 'float'}

package/src/app/(main)/settings/llm/components/ProviderModelList/ModelConfigModal.tsx

@@ -1,5 +1,5 @@
 import { Modal } from '@lobehub/ui';
-import { Checkbox, Form, Input } from 'antd';
+import { Button, Checkbox, Form, Input } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,6 +16,7 @@ interface ModelConfigModalProps {
 const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, provider }) => {
   const [formInstance] = Form.useForm();
   const { t } = useTranslation('setting');
+  const { t: tc } = useTranslation('common');
 
   const [open, id, editingProvider, dispatchCustomModelCards, toggleEditingCustomModelCard] =
     useUserStore((s) => [
@@ -38,20 +39,32 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
   return (
     <Modal
       destroyOnClose
-      maskClosable
-      onCancel={() => {
-        closeModal();
-      }}
-      onOk={() => {
-        if (!editingProvider || !id) return;
-        const data = formInstance.getFieldsValue();
+      footer={[
+        <Button key="cancel" onClick={closeModal}>
+          {tc('cancel')}
+        </Button>,
+
+        <Button
+          key="ok"
+          onClick={() => {
+            if (!editingProvider || !id) return;
+            const data = formInstance.getFieldsValue();
 
-        dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
+            dispatchCustomModelCards(editingProvider as any, { id, type: 'update', value: data });
 
-        closeModal();
-      }}
+            closeModal();
+          }}
+          style={{ marginInlineStart: '16px' }}
+          type="primary"
+        >
+          {tc('ok')}
+        </Button>,
+      ]}
+      maskClosable
+      onCancel={closeModal}
       open={open}
       title={t('llm.customModelCards.modelConfig.modalTitle')}
+      zIndex={1051} // Select is 1050
     >
       <div
         onClick={(e) => {
@@ -66,6 +79,7 @@ const ModelConfigModal = memo<ModelConfigModalProps>(({ showAzureDeployName, pro
           form={formInstance}
           initialValues={modelCard}
           labelCol={{ span: 4 }}
+          preserve={false}
           style={{ marginTop: 16 }}
           wrapperCol={{ offset: 1, span: 18 }}
         >

package/src/components/SidebarHeader/index.tsx

@@ -2,10 +2,9 @@ import { createStyles } from 'antd-style';
 import { type ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css }) => ({
   header: css`
     z-index: 10;
-    box-shadow: 0 2px 6px ${token.colorBgLayout};
   `,
 }));
 

package/src/components/server/MobileNavLayout.tsx

@@ -16,6 +16,7 @@ const MobileContentLayout = ({
   const content = (
     <Flexbox
       height="100%"
+      id={'lobe-mobile-scroll-container'}
       style={{
         overflowX: 'hidden',
         overflowY: 'auto',

package/src/config/modelProviders/openai.ts

@@ -29,8 +29,10 @@ const OpenAI: ModelProviderCard = {
       tokens: 4096,
     },
     {
+      description: 'Currently points to gpt-3.5-turbo-16k-0613',
       displayName: 'GPT-3.5 Turbo 16K',
       id: 'gpt-3.5-turbo-16k',
+      legacy: true,
       tokens: 16_385,
     },
     {
@@ -43,9 +45,10 @@ const OpenAI: ModelProviderCard = {
       displayName: 'GPT-3.5 Turbo 16K (0613)',
       id: 'gpt-3.5-turbo-16k-0613',
       legacy: true,
-      tokens: 4096,
+      tokens: 16_385,
     },
     {
+      description: 'Currently points to gpt-4-0125-preview',
       displayName: 'GPT-4 Turbo Preview',
       functionCall: true,
       id: 'gpt-4-turbo-preview',
@@ -58,7 +61,7 @@ const OpenAI: ModelProviderCard = {
       tokens: 128_000,
     },
     {
-      description: 'GPT-4 视觉预览版，支持视觉任务',
+      description: 'Currently points to gpt-4-1106-vision-preview',
       displayName: 'GPT-4 Turbo Vision Preview',
       id: 'gpt-4-vision-preview',
       tokens: 128_000,
@@ -77,6 +80,7 @@ const OpenAI: ModelProviderCard = {
       tokens: 128_000,
     },
     {
+      description: 'Currently points to gpt-4-0613',
       displayName: 'GPT-4',
       functionCall: true,
       id: 'gpt-4',
@@ -89,6 +93,7 @@ const OpenAI: ModelProviderCard = {
       tokens: 8192,
     },
     {
+      description: 'Currently points to gpt-4-32k-0613',
       displayName: 'GPT-4 32K',
       functionCall: true,
       id: 'gpt-4-32k',
@@ -101,7 +106,7 @@ const OpenAI: ModelProviderCard = {
       tokens: 32_768,
     },
     {
-      description: 'GPT-4 Turbo 视觉版',
+      description: 'GPT-4 Turbo with Vision',
       displayName: 'GPT-4 Turbo',
       enabled: true,
       functionCall: true,
@@ -117,6 +122,15 @@ const OpenAI: ModelProviderCard = {
       tokens: 128_000,
       vision: true,
     },
+    {
+      description: 'Currently points to gpt-4o-2024-05-13',
+      displayName: 'GPT-4o',
+      enabled: true,
+      functionCall: true,
+      id: 'gpt-4o',
+      tokens: 128_000,
+      vision: true,
+    },
   ],
   enabled: true,
   id: 'openai',

package/src/config/modelProviders/perplexity.ts

@@ -5,35 +5,35 @@ const Perplexity: ModelProviderCard = {
   chatModels: [
     {
       displayName: 'Perplexity 7B Chat',
-      id: 'sonar-small-chat',
-      tokens: 16_384,
+      id: 'llama-3-sonar-small-32k-chat',
+      tokens: 32_768,
     },
     {
-      displayName: 'Perplexity 8x7B Chat',
+      displayName: 'Perplexity 70B Chat',
       enabled: true,
-      id: 'sonar-medium-chat',
-      tokens: 16_384,
+      id: 'llama-3-sonar-large-32k-chat',
+      tokens: 32_768,
     },
     {
       displayName: 'Perplexity 7B Online',
-      id: 'sonar-small-online',
-      tokens: 12_000,
+      id: 'llama-3-sonar-small-32k-online',
+      tokens: 28_000,
     },
     {
-      displayName: 'Perplexity 8x7B Online',
+      displayName: 'Perplexity 70B Online',
       enabled: true,
-      id: 'sonar-medium-online',
-      tokens: 12_000,
+      id: 'llama-3-sonar-large-32k-online',
+      tokens: 28_000,
     },
     {
-      displayName: 'Codellama 70B Instruct',
-      id: 'codellama-70b-instruct',
-      tokens: 16_384,
+      displayName: 'Llama3 8B Instruct',
+      id: 'llama-3-8b-instruct',
+      tokens: 8192,
     },
     {
-      displayName: 'Mistral 7B Instruct',
-      id: 'mistral-7b-instruc',
-      tokens: 16_384,
+      displayName: 'Llama3 70B Instruct',
+      id: 'llama-3-70b-instruct',
+      tokens: 8192,
     },
     {
       displayName: 'Mixtral 8x7B Instruct',

package/src/config/modelProviders/zeroone.ts

@@ -1,31 +1,70 @@
 import { ModelProviderCard } from '@/types/llm';
 
-// ref https://platform.lingyiwanwu.com/
+// ref https://platform.lingyiwanwu.com/docs#%E6%A8%A1%E5%9E%8B
 const ZeroOne: ModelProviderCard = {
   chatModels: [
     {
-      description: '支持聊天、问答、对话、写作、翻译等功能。',
-      displayName: 'YI 34B Chat',
+      description: '全新千亿参数模型，提供超强问答及文本生成能力。',
+      displayName: 'Yi Large',
       enabled: true,
-      id: 'yi-34b-chat-0205',
-      tokens: 4096, // https://huggingface.co/01-ai/Yi-34B-Chat/blob/main/config.json
+      id: 'yi-large',
+      tokens: 16_384,
     },
     {
-      description:
-        '支持通用图片问答、图表理解、OCR、视觉推理，能处理高分辨率（1024*1024）的图像，能在复杂视觉任务上提供优秀性能，同时支持多种语言。',
-      displayName: 'YI Vision Plus',
+      description: '中型尺寸模型升级微调，能力均衡，性价比高。深度优化指令遵循能力。',
+      displayName: 'Yi Medium',
       enabled: true,
-      id: 'yi-vl-plus',
+      id: 'yi-medium',
+      tokens: 16_384,
+    },
+    {
+      description: '复杂视觉任务模型，提供高性能图片理解、分析能力。',
+      displayName: 'Yi Vision',
+      enabled: true,
+      id: 'yi-vision',
       tokens: 4096,
-      vision: true,
     },
     {
-      description: '增强了问答对话交互和深度内容创作能力。文档问答和构建知识库小能手。',
-      displayName: 'YI 34B Chat 200k',
+      description: '200K 超长上下文窗口，提供长文本深度理解和生成能力。',
+      displayName: 'Yi 200K',
       enabled: true,
-      id: 'yi-34b-chat-200k',
-      tokens: 200_000, // https://huggingface.co/01-ai/Yi-34B-200K/blob/main/config.json
+      id: 'yi-medium-200k',
+      tokens: 200_000,
     },
+    {
+      description: '小而精悍，轻量极速模型。提供强化数学运算和代码编写能力。',
+      displayName: 'Yi Spark',
+      enabled: true,
+      id: 'yi-spark',
+      tokens: 16_384,
+    },
+    {
+      description: '基于Yi-Large超强模型的高阶服务，结合检索与生成技术提供精准答案，支持客⼾私有知识库（请联系客服申请）。',
+      displayName: 'Yi Large RAG',
+      id: 'yi-large-rag',
+      tokens: 16_384,
+    },
+    {
+      description: '超高性价比、卓越性能。根据性能和推理速度、成本，进行平衡性高精度调优。',
+      displayName: 'Yi Large Turbo',
+      enabled: true,
+      id: 'yi-large-turbo',
+      tokens: 16_384,
+    },
+    {
+      description: '「兼容版本模型」文本推理能力增强。',
+      displayName: 'Yi Large Preview',
+      enabled: true,
+      id: 'yi-large-preview',
+      tokens: 16_384,
+    },
+    {
+      description: '「兼容版本模型」实时信息获取，以及文本推理能力增强。',
+      displayName: 'Yi Large RAG Preview',
+      id: 'yi-large-rag-preview',
+      tokens: 16_384,
+    },
+
   ],
   id: 'zeroone',
 };

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -6,7 +6,7 @@ import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { RefreshCw } from 'lucide-react';
 import Link from 'next/link';
-import { memo, useMemo, useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -71,26 +71,6 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
     </Flexbox>
   ));
 
-  const cards = useMemo(
-    () =>
-      agentList.slice(sliceStart, sliceStart + agentLength).map((agent) => (
-        <Link href={`/market?agent=${agent.identifier}`} key={agent.identifier}>
-          <Flexbox className={styles.card} gap={8} horizontal>
-            <Avatar avatar={agent.meta.avatar} style={{ flex: 'none' }} />
-            <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
-              <Paragraph className={styles.cardTitle} ellipsis={{ rows: 1 }}>
-                {agent.meta.title}
-              </Paragraph>
-              <Paragraph className={styles.cardDesc} ellipsis={{ rows: mobile ? 1 : 2 }}>
-                {agent.meta.description}
-              </Paragraph>
-            </Flexbox>
-          </Flexbox>
-        </Link>
-      )),
-    [agentList, sliceStart],
-  );
-
   const handleRefresh = () => {
     if (!agentList) return;
     setSliceStart(Math.floor((Math.random() * agentList.length) / 2));
@@ -108,7 +88,23 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
         />
       </Flexbox>
       <Grid gap={8} rows={2}>
-        {isLoading ? loadingCards : cards}
+        {isLoading
+          ? loadingCards
+          : agentList.slice(sliceStart, sliceStart + agentLength).map((agent) => (
+              <Link href={`/market?agent=${agent.identifier}`} key={agent.identifier}>
+                <Flexbox className={styles.card} gap={8} horizontal>
+                  <Avatar avatar={agent.meta.avatar} style={{ flex: 'none' }} />
+                  <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
+                    <Paragraph className={styles.cardTitle} ellipsis={{ rows: 1 }}>
+                      {agent.meta.title}
+                    </Paragraph>
+                    <Paragraph className={styles.cardDesc} ellipsis={{ rows: mobile ? 1 : 2 }}>
+                      {agent.meta.description}
+                    </Paragraph>
+                  </Flexbox>
+                </Flexbox>
+              </Link>
+            ))}
       </Grid>
     </Flexbox>
   );

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -30,12 +30,25 @@ const useStyles = createStyles(({ css, token }) => ({
     height: 100%;
     min-height: 100dvh;
     max-height: 100dvh;
+
+    @media (min-device-width: 576px) {
+      overflow: hidden;
+    }
   `,
   // scrollbar-width and scrollbar-color are supported from Chrome 121
   // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
   scrollbar: css`
     scrollbar-color: ${token.colorFill} transparent;
     scrollbar-width: thin;
+
+    #lobe-mobile-scroll-container {
+      scrollbar-width: none;
+
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
   `,
 
   // so this is a polyfill for older browsers

package/src/libs/agent-runtime/openai/__snapshots__/index.test.ts.snap

@@ -11,15 +11,17 @@ exports[`LobeOpenAI > models > should get models 1`] = `
     "tokens": 16385,
   },
   {
+    "description": "Currently points to gpt-3.5-turbo-16k-0613",
     "displayName": "GPT-3.5 Turbo 16K",
     "id": "gpt-3.5-turbo-16k",
+    "legacy": true,
     "tokens": 16385,
   },
   {
     "displayName": "GPT-3.5 Turbo 16K (0613)",
     "id": "gpt-3.5-turbo-16k-0613",
     "legacy": true,
-    "tokens": 4096,
+    "tokens": 16385,
   },
   {
     "displayName": "GPT-4 Turbo Vision Preview (1106)",
@@ -37,6 +39,7 @@ exports[`LobeOpenAI > models > should get models 1`] = `
     "tokens": 128000,
   },
   {
+    "description": "Currently points to gpt-4-0125-preview",
     "displayName": "GPT-4 Turbo Preview",
     "functionCall": true,
     "id": "gpt-4-turbo-preview",
@@ -69,13 +72,14 @@ exports[`LobeOpenAI > models > should get models 1`] = `
     "tokens": 128000,
   },
   {
-    "description": "GPT-4 视觉预览版，支持视觉任务",
+    "description": "Currently points to gpt-4-1106-vision-preview",
     "displayName": "GPT-4 Turbo Vision Preview",
     "id": "gpt-4-vision-preview",
     "tokens": 128000,
     "vision": true,
   },
   {
+    "description": "Currently points to gpt-4-0613",
     "displayName": "GPT-4",
     "functionCall": true,
     "id": "gpt-4",

package/src/server/routers/config/__snapshots__/index.test.ts.snap

@@ -69,12 +69,15 @@ exports[`configRouter > getGlobalConfig > Model Provider env > OPENAI_MODEL_LIST
     "tokens": 16385,
   },
   {
+    "description": "Currently points to gpt-3.5-turbo-16k-0613",
     "displayName": "GPT-3.5 Turbo 16K",
     "enabled": true,
     "id": "gpt-3.5-turbo-16k",
+    "legacy": true,
     "tokens": 16385,
   },
   {
+    "description": "Currently points to gpt-4-0613",
     "displayName": "GPT-4",
     "enabled": true,
     "functionCall": true,
@@ -82,6 +85,7 @@ exports[`configRouter > getGlobalConfig > Model Provider env > OPENAI_MODEL_LIST
     "tokens": 8192,
   },
   {
+    "description": "Currently points to gpt-4-32k-0613",
     "displayName": "GPT-4 32K",
     "enabled": true,
     "functionCall": true,
@@ -96,7 +100,7 @@ exports[`configRouter > getGlobalConfig > Model Provider env > OPENAI_MODEL_LIST
     "tokens": 128000,
   },
   {
-    "description": "GPT-4 视觉预览版，支持视觉任务",
+    "description": "Currently points to gpt-4-1106-vision-preview",
     "displayName": "GPT-4 Turbo Vision Preview",
     "enabled": true,
     "id": "gpt-4-vision-preview",

package/src/store/user/slices/preference/initialState.ts

@@ -32,6 +32,7 @@ export interface UserPreferenceState {
 export const DEFAULT_PREFERENCE: UserPreference = {
   guide: {
     moveSettingsToAvatar: true,
+    topic: true,
   },
   telemetry: null,
   useCmdEnterToSend: false,

package/src/store/user/slices/settings/selectors/modelProvider.test.ts

@@ -49,7 +49,7 @@ describe('modelProviderSelectors', () => {
       const s = merge(initialSettingsState, {}) as unknown as UserStore;
 
       const result = modelProviderSelectors.getDefaultEnabledModelsById('openai')(s);
-      expect(result).toEqual(['gpt-3.5-turbo', 'gpt-4-turbo']);
+      expect(result).toEqual(['gpt-3.5-turbo', 'gpt-4-turbo', 'gpt-4o']);
     });
 
     it('should return undefined for a non-existing provider', () => {

package/src/styles/global.ts

@@ -16,10 +16,33 @@ export default ({ token }: { prefixCls: string; token: Theme }) => css`
     max-height: 100dvh;
 
     background: ${token.colorBgLayout};
+
+    @media (min-device-width: 576px) {
+      overflow: hidden;
+    }
   }
 
   * {
     scrollbar-color: ${token.colorFill} transparent;
     scrollbar-width: thin;
+
+    ::-webkit-scrollbar {
+      width: 0.75em;
+      height: 0.75em;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+
+    :hover::-webkit-scrollbar-thumb {
+      background-color: ${token.colorText};
+      background-clip: content-box;
+      border: 3px solid transparent;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
   }
 `;

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

@@ -1,101 +0,0 @@
-'use client';
-
-import { EmptyCard } from '@lobehub/ui';
-import { useThemeMode } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import React, { memo, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-
-import { imageUrl } from '@/const/url';
-import { useChatStore } from '@/store/chat';
-import { topicSelectors } from '@/store/chat/selectors';
-import { useUserStore } from '@/store/user';
-import { ChatTopic } from '@/types/topic';
-
-import { Placeholder, SkeletonList } from './SkeletonList';
-import TopicItem from './TopicItem';
-
-export const Topic = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const { t } = useTranslation('chat');
-  const virtuosoRef = useRef<VirtuosoHandle>(null);
-  const { isDarkMode } = useThemeMode();
-  const [topicsInit, activeTopicId, topicLength] = useChatStore((s) => [
-    s.topicsInit,
-    s.activeTopicId,
-    topicSelectors.currentTopicLength(s),
-  ]);
-  const [visible, updateGuideState] = useUserStore((s) => [
-    s.preference.guide?.topic,
-    s.updateGuideState,
-  ]);
-
-  const topics = useChatStore(
-    (s) => [
-      {
-        favorite: false,
-        id: 'default',
-        title: t('topic.defaultTitle'),
-      } as ChatTopic,
-      ...topicSelectors.displayTopics(s),
-    ],
-    isEqual,
-  );
-
-  const itemContent = useCallback(
-    (index: number, { id, favorite, title }: ChatTopic) =>
-      index === 0 ? (
-        <TopicItem active={!activeTopicId} fav={favorite} title={title} />
-      ) : (
-        <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
-      ),
-    [activeTopicId],
-  );
-
-  const activeIndex = topics.findIndex((topic) => topic.id === activeTopicId);
-
-  return !topicsInit ? (
-    <SkeletonList />
-  ) : (
-    <Flexbox
-      gap={2}
-      height={'100%'}
-      paddingInline={mobile ? undefined : 8}
-      style={{ marginBottom: 12 }}
-    >
-      {topicLength === 0 && (
-        <EmptyCard
-          alt={t('topic.guide.desc')}
-          cover={imageUrl(`empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`)}
-          desc={t('topic.guide.desc')}
-          height={120}
-          imageProps={{
-            priority: true,
-          }}
-          onVisibleChange={(visible) => {
-            updateGuideState({ topic: visible });
-          }}
-          style={{ flex: 'none', marginBottom: 12 }}
-          title={t('topic.guide.title')}
-          visible={visible}
-          width={200}
-        />
-      )}
-      <Virtuoso
-        components={{ ScrollSeekPlaceholder: Placeholder }}
-        computeItemKey={(_, item) => item.id}
-        data={topics}
-        fixedItemHeight={44}
-        initialTopMostItemIndex={Math.max(activeIndex, 0)}
-        itemContent={itemContent}
-        overscan={44 * 10}
-        ref={virtuosoRef}
-        scrollSeekConfiguration={{
-          enter: (velocity) => Math.abs(velocity) > 350,
-          exit: (velocity) => Math.abs(velocity) < 10,
-        }}
-      />
-    </Flexbox>
-  );
-});