@lobehub/lobehub 2.0.0-next.324 → 2.0.0-next.326

package/src/features/ModelSwitchPanel/components/List/index.tsx

@@ -1,29 +1,22 @@
 import { Flexbox, TooltipGroup } from '@lobehub/ui';
 import type { FC } from 'react';
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
 
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 
-import {
-  FOOTER_HEIGHT,
-  INITIAL_RENDER_COUNT,
-  ITEM_HEIGHT,
-  MAX_PANEL_HEIGHT,
-  TOOLBAR_HEIGHT,
-} from '../../const';
-import { useBuildVirtualItems } from '../../hooks/useBuildVirtualItems';
-import { useDelayedRender } from '../../hooks/useDelayedRender';
+import { FOOTER_HEIGHT, ITEM_HEIGHT, MAX_PANEL_HEIGHT, TOOLBAR_HEIGHT } from '../../const';
+import { useBuildListItems } from '../../hooks/useBuildListItems';
 import { useModelAndProvider } from '../../hooks/useModelAndProvider';
 import { usePanelHandlers } from '../../hooks/usePanelHandlers';
 import { styles } from '../../styles';
 import type { GroupMode } from '../../types';
-import { getVirtualItemKey, menuKey } from '../../utils';
-import { VirtualItemRenderer } from './VirtualItemRenderer';
+import { menuKey } from '../../utils';
+import { ListItemRenderer } from './ListItemRenderer';
 
 interface ListProps {
   groupMode: GroupMode;
-  isOpen: boolean;
   model?: string;
   onModelChange?: (params: { model: string; provider: string }) => Promise<void>;
   onOpenChange?: (open: boolean) => void;
@@ -33,7 +26,6 @@ interface ListProps {
 
 export const List: FC<ListProps> = ({
   groupMode,
-  isOpen,
   model: modelProp,
   onModelChange: onModelChangeProp,
   onOpenChange,
@@ -43,25 +35,15 @@ export const List: FC<ListProps> = ({
   const { t: tCommon } = useTranslation('common');
   const newLabel = tCommon('new');
 
-  // Get enabled models list
+  const [isScrolling, setIsScrolling] = useState(false);
   const enabledList = useEnabledChatModels();
-
-  // Get delayed render state
-  const renderAll = useDelayedRender(isOpen);
-
-  // Get model and provider
   const { model, provider } = useModelAndProvider(modelProp, providerProp);
-
-  // Get handlers
   const { handleModelChange, handleClose } = usePanelHandlers({
     onModelChange: onModelChangeProp,
     onOpenChange,
   });
+  const listItems = useBuildListItems(enabledList, groupMode, searchKeyword);
 
-  // Build virtual items
-  const virtualItems = useBuildVirtualItems(enabledList, groupMode, searchKeyword);
-
-  // Calculate panel height
   const panelHeight = useMemo(
     () =>
       enabledList.length === 0
@@ -70,31 +52,48 @@ export const List: FC<ListProps> = ({
     [enabledList.length],
   );
 
-  // Calculate active key
   const activeKey = menuKey(provider, model);
 
+  const handleScrollingStateChange = useCallback((scrolling: boolean) => {
+    setIsScrolling(scrolling);
+  }, []);
+
+  const itemContent = useCallback(
+    (index: number) => {
+      const item = listItems[index];
+      return (
+        <ListItemRenderer
+          activeKey={activeKey}
+          isScrolling={isScrolling}
+          item={item}
+          newLabel={newLabel}
+          onClose={handleClose}
+          onModelChange={handleModelChange}
+        />
+      );
+    },
+    [activeKey, handleClose, handleModelChange, isScrolling, listItems, newLabel],
+  );
+
+  const listHeight = panelHeight - TOOLBAR_HEIGHT - FOOTER_HEIGHT;
+
   return (
     <Flexbox
       className={styles.list}
       flex={1}
       style={{
-        height: panelHeight - TOOLBAR_HEIGHT - FOOTER_HEIGHT,
+        height: listHeight,
         paddingBlock: groupMode === 'byModel' ? 8 : 0,
       }}
     >
       <TooltipGroup>
-        {virtualItems
-          .slice(0, renderAll ? virtualItems.length : INITIAL_RENDER_COUNT)
-          .map((item) => (
-            <VirtualItemRenderer
-              activeKey={activeKey}
-              item={item}
-              key={getVirtualItemKey(item)}
-              newLabel={newLabel}
-              onClose={handleClose}
-              onModelChange={handleModelChange}
-            />
-          ))}
+        <Virtuoso
+          isScrolling={handleScrollingStateChange}
+          itemContent={itemContent}
+          overscan={200}
+          style={{ height: listHeight }}
+          totalCount={listItems.length}
+        />
       </TooltipGroup>
     </Flexbox>
   );

package/src/features/ModelSwitchPanel/components/PanelContent.tsx

@@ -13,7 +13,6 @@ import { List } from './List';
 import { Toolbar } from './Toolbar';
 
 interface PanelContentProps {
-  isOpen: boolean;
   model?: string;
   onModelChange?: (params: { model: string; provider: string }) => Promise<void>;
   onOpenChange?: (open: boolean) => void;
@@ -21,19 +20,13 @@ interface PanelContentProps {
 }
 
 export const PanelContent: FC<PanelContentProps> = ({
-  isOpen,
   model: modelProp,
   onModelChange: onModelChangeProp,
   onOpenChange,
   provider: providerProp,
 }) => {
-  // Get enabled models list
   const enabledList = useEnabledChatModels();
-
-  // Search keyword state
   const [searchKeyword, setSearchKeyword] = useState('');
-
-  // Hooks for state management
   const { groupMode, handleGroupModeChange } = usePanelState();
   const { panelHeight, panelWidth, handlePanelWidthChange } = usePanelSize(enabledList.length);
   const { handleClose } = usePanelHandlers({
@@ -62,7 +55,6 @@ export const PanelContent: FC<PanelContentProps> = ({
       />
       <List
         groupMode={groupMode}
-        isOpen={isOpen}
         model={modelProp}
         onModelChange={onModelChangeProp}
         onOpenChange={onOpenChange}

package/src/features/ModelSwitchPanel/hooks/{useBuildVirtualItems.ts → useBuildListItems.ts}

@@ -2,26 +2,25 @@ import { useMemo } from 'react';
 
 import type { EnabledProviderWithModels } from '@/types/aiProvider';
 
-import type { GroupMode, ModelWithProviders, VirtualItem } from '../types';
+import type { GroupMode, ListItem, ModelWithProviders } from '../types';
 
-export const useBuildVirtualItems = (
+export const useBuildListItems = (
   enabledList: EnabledProviderWithModels[],
   groupMode: GroupMode,
   searchKeyword: string = '',
-): VirtualItem[] => {
+): ListItem[] => {
   return useMemo(() => {
     if (enabledList.length === 0) {
-      return [{ type: 'no-provider' }] as VirtualItem[];
+      return [{ type: 'no-provider' }] as ListItem[];
     }
 
-    // Filter function for search
     const matchesSearch = (text: string): boolean => {
       if (!searchKeyword.trim()) return true;
       const keyword = searchKeyword.toLowerCase().trim();
       return text.toLowerCase().includes(keyword);
     };
 
-    // Sort providers: lobehub first, then others
+    // lobehub first, then others
     const sortedProviders = [...enabledList].sort((a, b) => {
       const aIsLobehub = a.id === 'lobehub';
       const bIsLobehub = b.id === 'lobehub';
@@ -31,14 +30,12 @@ export const useBuildVirtualItems = (
     });
 
     if (groupMode === 'byModel') {
-      // Group models by display name
       const modelMap = new Map<string, ModelWithProviders>();
 
       for (const providerItem of sortedProviders) {
         for (const modelItem of providerItem.children) {
           const displayName = modelItem.displayName || modelItem.id;
 
-          // Filter by search keyword
           if (!matchesSearch(displayName) && !matchesSearch(providerItem.name)) {
             continue;
           }
@@ -61,7 +58,7 @@ export const useBuildVirtualItems = (
         }
       }
 
-      // Sort providers within each model: lobehub first
+      // lobehub first
       const modelArray = Array.from(modelMap.values());
       for (const model of modelArray) {
         model.providers.sort((a, b) => {
@@ -73,7 +70,6 @@ export const useBuildVirtualItems = (
         });
       }
 
-      // Convert to array and sort by display name
       return modelArray
         .sort((a, b) => a.displayName.localeCompare(b.displayName))
         .map((data) => ({
@@ -84,27 +80,21 @@ export const useBuildVirtualItems = (
               : ('model-item-multiple' as const),
         }));
     } else {
-      // Group by provider (original structure)
-      const items: VirtualItem[] = [];
+      const items: ListItem[] = [];
 
       for (const providerItem of sortedProviders) {
-        // Filter models by search keyword
         const filteredModels = providerItem.children.filter(
           (modelItem) =>
             matchesSearch(modelItem.displayName || modelItem.id) ||
             matchesSearch(providerItem.name),
         );
 
-        // Only add provider group header if there are matching models or if search is empty
         if (filteredModels.length > 0 || !searchKeyword.trim()) {
-          // Add provider group header
           items.push({ provider: providerItem, type: 'group-header' });
 
           if (filteredModels.length === 0) {
-            // Add empty model placeholder
             items.push({ provider: providerItem, type: 'empty-model' });
           } else {
-            // Add each filtered model item
             for (const modelItem of filteredModels) {
               items.push({
                 model: modelItem,

package/src/features/ModelSwitchPanel/index.tsx

@@ -1,4 +1,10 @@
-import { Popover } from '@lobehub/ui';
+import {
+  DropdownMenuPopup,
+  DropdownMenuPortal,
+  DropdownMenuPositioner,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+} from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { PanelContent } from './components/PanelContent';
@@ -16,8 +22,6 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
     provider: providerProp,
   }) => {
     const [internalOpen, setInternalOpen] = useState(false);
-
-    // Use controlled open if provided, otherwise use internal state
     const isOpen = open ?? internalOpen;
 
     const handleOpenChange = useCallback(
@@ -29,26 +33,23 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
     );
 
     return (
-      <Popover
-        classNames={{
-          content: styles.container,
-        }}
-        content={
-          <PanelContent
-            isOpen={isOpen}
-            model={modelProp}
-            onModelChange={onModelChange}
-            onOpenChange={handleOpenChange}
-            provider={providerProp}
-          />
-        }
-        nativeButton={false}
-        onOpenChange={handleOpenChange}
-        open={isOpen}
-        placement={placement}
-      >
-        {children}
-      </Popover>
+      <DropdownMenuRoot onOpenChange={handleOpenChange} open={isOpen}>
+        <DropdownMenuTrigger nativeButton={false} openOnHover>
+          {children}
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+          <DropdownMenuPositioner hoverTrigger placement={placement}>
+            <DropdownMenuPopup className={styles.container}>
+              <PanelContent
+                model={modelProp}
+                onModelChange={onModelChange}
+                onOpenChange={handleOpenChange}
+                provider={providerProp}
+              />
+            </DropdownMenuPopup>
+          </DropdownMenuPositioner>
+        </DropdownMenuPortal>
+      </DropdownMenuRoot>
     );
   },
 );

package/src/features/ModelSwitchPanel/styles.ts

@@ -69,6 +69,9 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
       }
     }
   `,
+  menuItemActive: css`
+    background: ${cssVar.colorFillTertiary};
+  `,
   toolbar: css`
     border-block-end: 1px solid ${cssVar.colorBorderSecondary};
   `,

package/src/features/ModelSwitchPanel/types.ts

@@ -1,3 +1,4 @@
+import type { DropdownMenuPlacement } from '@lobehub/ui';
 import type { AiModelForSelect } from 'model-bank';
 import type { ReactNode } from 'react';
 
@@ -16,7 +17,7 @@ export interface ModelWithProviders {
   }>;
 }
 
-export type VirtualItem =
+export type ListItem =
   | {
       data: ModelWithProviders;
       type: 'model-item-single';
@@ -42,13 +43,7 @@ export type VirtualItem =
       type: 'no-provider';
     };
 
-export type DropdownPlacement =
-  | 'bottom'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'top'
-  | 'topLeft'
-  | 'topRight';
+export type DropdownPlacement = DropdownMenuPlacement;
 
 export interface ModelSwitchPanelProps {
   children?: ReactNode;

package/src/features/ModelSwitchPanel/utils.ts

@@ -1,8 +1,8 @@
-import type { VirtualItem } from './types';
+import type { ListItem } from './types';
 
 export const menuKey = (provider: string, model: string) => `${provider}-${model}`;
 
-export const getVirtualItemKey = (item: VirtualItem): string => {
+export const getListItemKey = (item: ListItem): string => {
   switch (item.type) {
     case 'model-item-single':
     case 'model-item-multiple': {

package/src/features/NavPanel/SideBarDrawer.tsx

@@ -23,6 +23,7 @@ interface SideBarDrawerProps {
 
 const SideBarDrawer = memo<SideBarDrawerProps>(
   ({ subHeader, open, onClose, children, title, action }) => {
+    const size = 280;
     return (
       <Drawer
         closable={false}
@@ -33,9 +34,13 @@ const SideBarDrawer = memo<SideBarDrawerProps>(
         open={open}
         placement="left"
         rootStyle={{
+          bottom: 0,
+          overflow: 'hidden',
           position: 'absolute',
+          top: 0,
+          width: `${size}px`,
         }}
-        size={280}
+        size={size}
         styles={{
           body: {
             background: cssVar.colorBgLayout,
@@ -58,7 +63,12 @@ const SideBarDrawer = memo<SideBarDrawerProps>(
             <SideBarHeaderLayout
               left={
                 typeof title === 'string' ? (
-                  <Text ellipsis fontSize={14} style={{ paddingLeft: 4 }} weight={400}>
+                  <Text
+                    ellipsis
+                    fontSize={14}
+                    style={{ fontWeight: 600, paddingLeft: 8 }}
+                    weight={400}
+                  >
                     {title}
                   </Text>
                 ) : (

package/src/features/NavPanel/SideBarHeaderLayout.tsx

@@ -8,6 +8,8 @@ import { type ReactNode, memo } from 'react';
 import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 
+import { isDesktop } from '@/const/version';
+
 import ToggleLeftPanelButton from './ToggleLeftPanelButton';
 import BackButton from './components/BackButton';
 
@@ -35,7 +37,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
   container: css`
     overflow: hidden;
-    margin-block-start: 8px;
+    margin-block-start: ${isDesktop ? '' : '8px'};
   `,
 }));
 

package/src/features/Portal/GroupThread/Body/index.tsx

@@ -3,20 +3,14 @@
 import { Flexbox } from '@lobehub/ui';
 import { memo } from 'react';
 
-// import ChatInput from '@/app/[variants]/(main)/chat/features/Conversation/ChatInput';
-// import { useChatGroupStore } from '@/store/chatGroup';
-
 import ThreadChatList from './ThreadChatList';
 
 const Body = memo(() => {
-  // const activeThreadAgentId = useChatGroupStore((s) => s.activeThreadAgentId);
-
   return (
     <Flexbox height={'100%'}>
       <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
         <ThreadChatList />
       </Flexbox>
-      {/*{activeThreadAgentId && <ChatInput targetMemberId={activeThreadAgentId} />}*/}
     </Flexbox>
   );
 });

package/src/features/ResourceManager/components/Header/AddButton.tsx

@@ -187,22 +187,6 @@ const AddButton = () => {
             label: 'Notion',
             onClick: handleOpenNotionGuide,
           },
-          // {
-          //   icon: <Icon icon={Notion} />,
-          //   key: 'connect-google-drive',
-          //   label: 'Google Drive',
-          //   onClick: () => {
-          //     // TODO: Implement Google Drive connection
-          //   },
-          // },
-          // {
-          //   icon: <Icon icon={Notion} />,
-          //   key: 'connect-onedrive',
-          //   label: 'OneDrive',
-          //   onClick: () => {
-          //     // TODO: Implement OneDrive connection
-          //   },
-          // },
         ],
         icon: <Icon icon={Link} />,
         key: 'connect',

package/src/features/ShareModal/ShareImage/index.tsx

@@ -56,14 +56,6 @@ const ShareImage = memo<{ mobile?: boolean }>(() => {
       name: 'withSystemRole',
       valuePropName: 'checked',
     },
-    // {
-    //   children: <Switch />,
-    //   label: t('shareModal.withBackground'),
-    //   layout: 'horizontal',
-    //   minWidth: undefined,
-    //   name: 'withBackground',
-    //   valuePropName: 'checked',
-    // },
     {
       children: <Switch />,
       label: t('shareModal.withFooter'),

package/src/hooks/useProviderName.ts

@@ -1,7 +1,6 @@
 import { DEFAULT_MODEL_PROVIDER_LIST } from 'model-bank/modelProviders';
 
 export const useProviderName = (provider: string) => {
-  // const { t } = useTranslation('modelProvider');
   const providerCard = DEFAULT_MODEL_PROVIDER_LIST.find((p) => p.id === provider);
 
   return providerCard?.name || provider;

package/src/layout/GlobalProvider/Locale.tsx

@@ -12,7 +12,6 @@ import { getAntdLocale } from '@/utils/locale';
 import Editor from './Editor';
 
 const updateDayjs = async (lang: string) => {
-  // load default lang
   let dayJSLocale;
   try {
     // dayjs locale is using `en` instead of `en-US`
@@ -38,21 +37,10 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) =
   const [lang, setLang] = useState(defaultLang);
   const [locale, setLocale] = useState(antdLocale);
 
-  // if run on server side, init i18n instance everytime
   if (isOnServerSide) {
-    // use sync mode to init instantly
     i18n.init({ initAsync: false });
-
-    // load the dayjs locale
-    // if (lang) {
-    //   const dayJSLocale = require(`dayjs/locale/${lang!.toLowerCase()}.js`);
-    //
-    //   dayjs.locale(dayJSLocale);
-    // }
   } else {
-    // if on browser side, init i18n instance only once
     if (!i18n.instance.isInitialized)
-      // console.debug('locale', lang);
       i18n.init().then(async () => {
         if (!lang) return;
 

package/src/layout/GlobalProvider/index.tsx

@@ -67,7 +67,6 @@ const GlobalLayout = async ({
               <QueryProvider>
                 <StoreInitialization />
                 <FaviconProvider>
-                  {/* {process.env.NODE_ENV === 'development' && <FaviconTestPanel />} */}
                   <GroupWizardProvider>
                     <DragUploadProvider>
                       <LazyMotion features={domMax}>

package/src/libs/better-auth/sso/helpers.ts

@@ -55,7 +55,6 @@ export const buildOidcConfig = ({
     pkce,
     providerId,
     scopes,
-    // ...fallbackEndpoints,
     ...overrides,
   } satisfies GenericOAuthConfig;
 };

package/src/libs/next/config/define-config.ts

@@ -308,6 +308,11 @@ export function defineConfig(config: CustomNextConfig) {
         permanent: false,
         source: '/repos',
       },
+      {
+        destination: '/',
+        permanent: true,
+        source: '/chat',
+      },
       ...(config.redirects ?? []),
     ],
 

package/src/locales/create.ts

@@ -45,21 +45,6 @@ export const createI18nNext = (lang?: string) => {
       return instance.init({
         debug: debugMode,
         defaultNS: ['error', 'common', 'chat'],
-
-        // detection: {
-        //   caches: ['cookie'],
-        //   cookieMinutes: 60 * 24 * COOKIE_CACHE_DAYS,
-        //   /**
-        //      Set `sameSite` to `lax` so that the i18n cookie can be passed to the
-        //      server side when returning from the OAuth authorization website.
-        //      ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
-        //      discussion: https://github.com/lobehub/lobe-chat/pull/1474
-        //   */
-        //   cookieOptions: {
-        //     sameSite: 'lax',
-        //   },
-        //   lookupCookie: LOBE_LOCALE_COOKIE,
-        // },
         fallbackLng: DEFAULT_LANG,
 
         initAsync,
@@ -67,8 +52,6 @@ export const createI18nNext = (lang?: string) => {
         interpolation: {
           escapeValue: false,
         },
-        // Use flat keys with dots (e.g. "notFound.title") instead of nested objects.
-        // This keeps both runtime lookup and TS key inference consistent.
         keySeparator: false,
 
         lng: lang,

package/src/services/aiChat.ts

@@ -20,10 +20,6 @@ class AiChatService {
       signal: abortController?.signal,
     });
   };
-
-  // sendGroupMessageInServer = async (params: SendMessageServerParams) => {
-  //   return lambdaClient.aiChat.sendGroupMessageInServer.mutate(cleanObject(params));
-  // };
 }
 
 export const aiChatService = new AiChatService();

package/src/services/debug.ts

@@ -1,38 +1,5 @@
 class DebugService {
-  async insertLargeDataToDB() {
-    // await DEBUG_MODEL.createRandomData({
-    //   messageCount: 100_000,
-    //   sessionCount: 40,
-    //   startIndex: 0,
-    //   topicCount: 200,
-    // });
-    //
-    // console.log('Inserted 100k');
-    //
-    // await DEBUG_MODEL.createRandomData({
-    //   messageCount: 300_000,
-    //   sessionCount: 40,
-    //   startIndex: 100_001,
-    //   topicCount: 200,
-    // });
-    // console.log('Inserted 400k');
-    //
-    // await DEBUG_MODEL.createRandomData({
-    //   messageCount: 300_000,
-    //   sessionCount: 40,
-    //   startIndex: 400_001,
-    //   topicCount: 200,
-    // });
-    // console.log('Inserted 700k');
-    //
-    // await DEBUG_MODEL.createRandomData({
-    //   messageCount: 300_000,
-    //   sessionCount: 40,
-    //   startIndex: 700_001,
-    //   topicCount: 200,
-    // });
-    // console.log('Inserted 1M');
-  }
+  async insertLargeDataToDB() {}
 }
 
 export const debugService = new DebugService();