@lobehub/lobehub 2.0.0-next.221 → 2.0.0-next.223

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

@@ -0,0 +1,42 @@
+import { Block, Flexbox, Icon } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { LucideArrowRight, LucideBolt } from 'lucide-react';
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import { styles } from '../styles';
+
+interface FooterProps {
+  onClose: () => void;
+}
+
+export const Footer: FC<FooterProps> = ({ onClose }) => {
+  const { t } = useTranslation('components');
+  const navigate = useNavigate();
+
+  return (
+    <Flexbox className={styles.footer} padding={4}>
+      <Block
+        clickable
+        gap={8}
+        horizontal
+        onClick={() => {
+          navigate('/settings/provider/all');
+          onClose();
+        }}
+        paddingBlock={8}
+        paddingInline={12}
+        variant={'borderless'}
+      >
+        <Flexbox align={'center'} gap={8} horizontal style={{ flex: 1 }}>
+          <Icon icon={LucideBolt} size={'small'} />
+          {t('ModelSwitchPanel.manageProvider')}
+        </Flexbox>
+        <Icon color={cssVar.colorTextDescription} icon={LucideArrowRight} size={'small'} />
+      </Block>
+    </Flexbox>
+  );
+};
+
+Footer.displayName = 'Footer';

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

@@ -0,0 +1,103 @@
+import { ActionIcon, Dropdown } from '@lobehub/ui';
+import { MenuItemType } from 'antd/es/menu/interface';
+import { LucideBolt } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import urlJoin from 'url-join';
+
+import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+
+import { styles } from '../../styles';
+import type { ModelWithProviders } from '../../types';
+import { menuKey } from '../../utils';
+
+interface MultipleProvidersModelItemProps {
+  activeKey: string;
+  data: ModelWithProviders;
+  newLabel: string;
+  onClose: () => void;
+  onModelChange: (modelId: string, providerId: string) => Promise<void>;
+}
+
+export const MultipleProvidersModelItem = memo<MultipleProvidersModelItemProps>(
+  ({ activeKey, data, newLabel, onModelChange, onClose }) => {
+    const { t } = useTranslation('components');
+    const navigate = useNavigate();
+
+    const items = useMemo(
+      () =>
+        [
+          {
+            key: 'header',
+            label: t('ModelSwitchPanel.useModelFrom'),
+            type: 'group',
+          },
+          ...data.providers.map((p) => {
+            return {
+              extra: (
+                <ActionIcon
+                  className={'settings-icon'}
+                  icon={LucideBolt}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const url = urlJoin('/settings/provider', p.id || 'all');
+                    if (e.ctrlKey || e.metaKey) {
+                      window.open(url, '_blank');
+                    } else {
+                      navigate(url);
+                    }
+                  }}
+                  size={'small'}
+                  title={t('ModelSwitchPanel.goToSettings')}
+                />
+              ),
+              key: menuKey(p.id, data.model.id),
+              label: (
+                <ProviderItemRender
+                  logo={p.logo}
+                  name={p.name}
+                  provider={p.id}
+                  size={20}
+                  source={p.source}
+                  type={'avatar'}
+                />
+              ),
+              onClick: async () => {
+                onModelChange(data.model.id, p.id);
+                onClose();
+              },
+            };
+          }),
+        ] as MenuItemType[],
+      [data.model.id, data.providers, navigate, onModelChange, onClose, t],
+    );
+
+    return (
+      <Dropdown
+        align={{ offset: [12, -48] }}
+        arrow={false}
+        classNames={{
+          item: styles.menuItem,
+        }}
+        menu={{
+          items,
+          selectedKeys: [activeKey],
+        }}
+        // @ts-ignore
+        placement="rightTop"
+      >
+        <ModelItemRender
+          {...data.model}
+          {...data.model.abilities}
+          infoTagTooltip={false}
+          newBadgeLabel={newLabel}
+          showInfoTag={true}
+        />
+      </Dropdown>
+    );
+  },
+);
+
+MultipleProvidersModelItem.displayName = 'MultipleProvidersModelItem';

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

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+
+import { ModelItemRender } from '@/components/ModelSelect';
+
+import type { ModelWithProviders } from '../../types';
+
+interface SingleProviderModelItemProps {
+  data: ModelWithProviders;
+  newLabel: string;
+}
+
+export const SingleProviderModelItem = memo<SingleProviderModelItemProps>(({ data, newLabel }) => {
+  return (
+    <ModelItemRender
+      {...data.model}
+      {...data.model.abilities}
+      infoTagTooltip={false}
+      newBadgeLabel={newLabel}
+      showInfoTag={true}
+    />
+  );
+});
+
+SingleProviderModelItem.displayName = 'SingleProviderModelItem';

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

@@ -0,0 +1,180 @@
+import { ActionIcon, Block, Flexbox, Icon } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { LucideArrowRight, LucideBolt } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import urlJoin from 'url-join';
+
+import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+
+import { styles } from '../../styles';
+import type { VirtualItem } from '../../types';
+import { menuKey } from '../../utils';
+import { MultipleProvidersModelItem } from './MultipleProvidersModelItem';
+import { SingleProviderModelItem } from './SingleProviderModelItem';
+
+interface VirtualItemRendererProps {
+  activeKey: string;
+  item: VirtualItem;
+  newLabel: string;
+  onClose: () => void;
+  onModelChange: (modelId: string, providerId: string) => Promise<void>;
+}
+
+export const VirtualItemRenderer = memo<VirtualItemRendererProps>(
+  ({ activeKey, item, newLabel, onModelChange, onClose }) => {
+    const { t } = useTranslation('components');
+    const navigate = useNavigate();
+
+    switch (item.type) {
+      case 'no-provider': {
+        return (
+          <Block
+            className={styles.menuItem}
+            clickable
+            gap={8}
+            horizontal
+            key="no-provider"
+            onClick={() => navigate('/settings/provider/all')}
+            style={{ color: cssVar.colorTextTertiary }}
+            variant={'borderless'}
+          >
+            {t('ModelSwitchPanel.emptyProvider')}
+            <Icon icon={LucideArrowRight} />
+          </Block>
+        );
+      }
+
+      case 'group-header': {
+        return (
+          <Flexbox
+            className={styles.groupHeader}
+            horizontal
+            justify="space-between"
+            key={`header-${item.provider.id}`}
+            paddingBlock={'12px 4px'}
+            paddingInline={'12px 8px'}
+          >
+            <ProviderItemRender
+              logo={item.provider.logo}
+              name={item.provider.name}
+              provider={item.provider.id}
+              source={item.provider.source}
+            />
+            <ActionIcon
+              className="settings-icon"
+              icon={LucideBolt}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const url = urlJoin('/settings/provider', item.provider.id || 'all');
+                if (e.ctrlKey || e.metaKey) {
+                  window.open(url, '_blank');
+                } else {
+                  navigate(url);
+                }
+              }}
+              size={'small'}
+              title={t('ModelSwitchPanel.goToSettings')}
+            />
+          </Flexbox>
+        );
+      }
+
+      case 'empty-model': {
+        return (
+          <Flexbox
+            className={styles.menuItem}
+            gap={8}
+            horizontal
+            key={`empty-${item.provider.id}`}
+            onClick={() => navigate(`/settings/provider/${item.provider.id}`)}
+            style={{ color: cssVar.colorTextTertiary }}
+          >
+            {t('ModelSwitchPanel.emptyModel')}
+            <Icon icon={LucideArrowRight} />
+          </Flexbox>
+        );
+      }
+
+      case 'provider-model-item': {
+        const key = menuKey(item.provider.id, item.model.id);
+        const isActive = key === activeKey;
+
+        return (
+          <Block
+            className={styles.menuItem}
+            clickable
+            key={key}
+            onClick={async () => {
+              onModelChange(item.model.id, item.provider.id);
+              onClose();
+            }}
+            variant={isActive ? 'filled' : 'borderless'}
+          >
+            <ModelItemRender
+              {...item.model}
+              {...item.model.abilities}
+              infoTagTooltip={false}
+              newBadgeLabel={newLabel}
+              showInfoTag
+            />
+          </Block>
+        );
+      }
+
+      case 'model-item-single': {
+        const singleProvider = item.data.providers[0];
+        const key = menuKey(singleProvider.id, item.data.model.id);
+        const isActive = key === activeKey;
+
+        return (
+          <Block
+            className={styles.menuItem}
+            clickable
+            key={key}
+            onClick={async () => {
+              onModelChange(item.data.model.id, singleProvider.id);
+              onClose();
+            }}
+            variant={isActive ? 'filled' : 'borderless'}
+          >
+            <SingleProviderModelItem data={item.data} newLabel={newLabel} />
+          </Block>
+        );
+      }
+
+      case 'model-item-multiple': {
+        // Check if any provider of this model is active
+        const activeProvider = item.data.providers.find(
+          (p) => menuKey(p.id, item.data.model.id) === activeKey,
+        );
+        const isActive = !!activeProvider;
+
+        return (
+          <Block
+            className={styles.menuItem}
+            clickable
+            key={item.data.displayName}
+            variant={isActive ? 'filled' : 'borderless'}
+          >
+            <MultipleProvidersModelItem
+              activeKey={activeKey}
+              data={item.data}
+              newLabel={newLabel}
+              onClose={onClose}
+              onModelChange={onModelChange}
+            />
+          </Block>
+        );
+      }
+
+      default: {
+        return null;
+      }
+    }
+  },
+);
+
+VirtualItemRenderer.displayName = 'VirtualItemRenderer';

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

@@ -0,0 +1,99 @@
+import { Flexbox } from '@lobehub/ui';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+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 { 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';
+
+interface ListProps {
+  groupMode: GroupMode;
+  isOpen: boolean;
+  model?: string;
+  onModelChange?: (params: { model: string; provider: string }) => Promise<void>;
+  onOpenChange?: (open: boolean) => void;
+  provider?: string;
+  searchKeyword?: string;
+}
+
+export const List: FC<ListProps> = ({
+  groupMode,
+  isOpen,
+  model: modelProp,
+  onModelChange: onModelChangeProp,
+  onOpenChange,
+  provider: providerProp,
+  searchKeyword = '',
+}) => {
+  const { t: tCommon } = useTranslation('common');
+  const newLabel = tCommon('new');
+
+  // Get enabled models list
+  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,
+  });
+
+  // Build virtual items
+  const virtualItems = useBuildVirtualItems(enabledList, groupMode, searchKeyword);
+
+  // Calculate panel height
+  const panelHeight = useMemo(
+    () =>
+      enabledList.length === 0
+        ? TOOLBAR_HEIGHT + ITEM_HEIGHT['no-provider'] + FOOTER_HEIGHT
+        : MAX_PANEL_HEIGHT,
+    [enabledList.length],
+  );
+
+  // Calculate active key
+  const activeKey = menuKey(provider, model);
+
+  return (
+    <Flexbox
+      className={styles.list}
+      flex={1}
+      style={{
+        height: panelHeight - TOOLBAR_HEIGHT - FOOTER_HEIGHT,
+        paddingBlock: groupMode === 'byModel' ? 8 : 0,
+      }}
+    >
+      {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}
+        />
+      ))}
+    </Flexbox>
+  );
+};
+
+List.displayName = 'List';

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

@@ -0,0 +1,77 @@
+import type { FC } from 'react';
+import { useState } from 'react';
+import { Rnd } from 'react-rnd';
+
+import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
+
+import { ENABLE_RESIZING, MAX_WIDTH, MIN_WIDTH } from '../const';
+import { usePanelHandlers } from '../hooks/usePanelHandlers';
+import { usePanelSize } from '../hooks/usePanelSize';
+import { usePanelState } from '../hooks/usePanelState';
+import { Footer } from './Footer';
+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;
+  provider?: string;
+}
+
+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({
+    onModelChange: onModelChangeProp,
+    onOpenChange,
+  });
+
+  return (
+    <Rnd
+      disableDragging
+      enableResizing={ENABLE_RESIZING}
+      maxWidth={MAX_WIDTH}
+      minWidth={MIN_WIDTH}
+      onResizeStop={(_e, _direction, ref) => {
+        handlePanelWidthChange(ref.offsetWidth);
+      }}
+      position={{ x: 0, y: 0 }}
+      size={{ height: panelHeight, width: panelWidth }}
+      style={{ display: 'flex', flexDirection: 'column', position: 'relative' }}
+    >
+      <Toolbar
+        groupMode={groupMode}
+        onGroupModeChange={handleGroupModeChange}
+        onSearchKeywordChange={setSearchKeyword}
+        searchKeyword={searchKeyword}
+      />
+      <List
+        groupMode={groupMode}
+        isOpen={isOpen}
+        model={modelProp}
+        onModelChange={onModelChangeProp}
+        onOpenChange={onOpenChange}
+        provider={providerProp}
+        searchKeyword={searchKeyword}
+      />
+      <Footer onClose={handleClose} />
+    </Rnd>
+  );
+};
+
+PanelContent.displayName = 'PanelContent';

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

@@ -0,0 +1,54 @@
+import { Flexbox, Icon, SearchBar, Segmented } from '@lobehub/ui';
+import { ProviderIcon } from '@lobehub/ui/icons';
+import { Brain } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { styles } from '../styles';
+import type { GroupMode } from '../types';
+
+interface ToolbarProps {
+  groupMode: GroupMode;
+  onGroupModeChange: (mode: GroupMode) => void;
+  onSearchKeywordChange: (keyword: string) => void;
+  searchKeyword: string;
+}
+
+export const Toolbar = memo<ToolbarProps>(
+  ({ groupMode, onGroupModeChange, searchKeyword, onSearchKeywordChange }) => {
+    const { t } = useTranslation('components');
+
+    return (
+      <Flexbox className={styles.toolbar} gap={4} horizontal paddingBlock={8} paddingInline={8}>
+        <SearchBar
+          allowClear
+          onChange={(e) => onSearchKeywordChange(e.target.value)}
+          placeholder={t('ModelSwitchPanel.searchPlaceholder')}
+          size="small"
+          style={{ flex: 1 }}
+          value={searchKeyword}
+          variant="borderless"
+        />
+        <Segmented
+          onChange={(value) => onGroupModeChange(value as GroupMode)}
+          options={[
+            {
+              icon: <Icon icon={Brain} />,
+              title: t('ModelSwitchPanel.byModel'),
+              value: 'byModel',
+            },
+            {
+              icon: <Icon icon={ProviderIcon} />,
+              title: t('ModelSwitchPanel.byProvider'),
+              value: 'byProvider',
+            },
+          ]}
+          size="small"
+          value={groupMode}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+Toolbar.displayName = 'Toolbar';

package/src/features/ModelSwitchPanel/const.ts

@@ -0,0 +1,29 @@
+export const STORAGE_KEY = 'MODEL_SWITCH_PANEL_WIDTH';
+export const STORAGE_KEY_MODE = 'MODEL_SWITCH_PANEL_MODE';
+export const DEFAULT_WIDTH = 430;
+export const MIN_WIDTH = 280;
+export const MAX_WIDTH = 600;
+export const MAX_PANEL_HEIGHT = 460;
+export const TOOLBAR_HEIGHT = 40;
+export const FOOTER_HEIGHT = 48;
+
+export const INITIAL_RENDER_COUNT = 15;
+export const RENDER_ALL_DELAY_MS = 500;
+
+export const ITEM_HEIGHT = {
+  'empty-model': 32,
+  'group-header': 32,
+  'model-item': 32,
+  'no-provider': 32,
+} as const;
+
+export const ENABLE_RESIZING = {
+  bottom: false,
+  bottomLeft: false,
+  bottomRight: false,
+  left: false,
+  right: true,
+  top: false,
+  topLeft: false,
+  topRight: false,
+} as const;