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

package/src/features/EditorModal/EditorCanvas.tsx

@@ -1,4 +1,5 @@
 import {
+  IEditor,
   ReactCodePlugin,
   ReactCodemirrorPlugin,
   ReactHRPlugin,
@@ -7,72 +8,52 @@ import {
   ReactMathPlugin,
   ReactTablePlugin,
 } from '@lobehub/editor';
-import { Editor, useEditor } from '@lobehub/editor/react';
+import { Editor } from '@lobehub/editor/react';
 import { Flexbox } from '@lobehub/ui';
 import { FC } from 'react';
 
 import TypoBar from './Typobar';
 
 interface EditorCanvasProps {
-  onChange?: (value: string) => void;
-  value?: string;
+  defaultValue?: string;
+  editor?: IEditor;
 }
 
-const EditorCanvas: FC<EditorCanvasProps> = ({ value, onChange }) => {
-  const editor = useEditor();
+const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, editor }) => {
   return (
     <>
       <TypoBar editor={editor} />
       <Flexbox
-        onClick={() => {
-          editor?.focus();
-        }}
         padding={16}
         style={{ cursor: 'text', maxHeight: '80vh', minHeight: '50vh', overflowY: 'auto' }}
       >
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
+        <Editor
+          autoFocus
+          content={''}
+          editor={editor}
+          onInit={(editor) => {
+            if (!editor || !defaultValue) return;
+            try {
+              editor?.setDocument('markdown', defaultValue);
+            } catch (e) {
+              console.error('setDocument error:', e);
+            }
           }}
-        >
-          <Editor
-            autoFocus
-            content={''}
-            editor={editor}
-            onInit={(editor) => {
-              if (!editor || !value) return;
-              try {
-                editor?.setDocument('markdown', value);
-              } catch (e) {
-                console.error('setDocument error:', e);
-              }
-            }}
-            onTextChange={(editor) => {
-              try {
-                const newValue = editor.getDocument('markdown') as unknown as string;
-                onChange?.(newValue);
-              } catch (e) {
-                console.error('getDocument error:', e);
-                onChange?.('');
-              }
-            }}
-            plugins={[
-              ReactListPlugin,
-              ReactCodePlugin,
-              ReactCodemirrorPlugin,
-              ReactHRPlugin,
-              ReactLinkPlugin,
-              ReactTablePlugin,
-              ReactMathPlugin,
-            ]}
-            style={{
-              paddingBottom: 120,
-            }}
-            type={'text'}
-            variant={'chat'}
-          />
-        </div>
+          plugins={[
+            ReactListPlugin,
+            ReactCodePlugin,
+            ReactCodemirrorPlugin,
+            ReactHRPlugin,
+            ReactLinkPlugin,
+            ReactTablePlugin,
+            ReactMathPlugin,
+          ]}
+          style={{
+            paddingBottom: 120,
+          }}
+          type={'text'}
+          variant={'chat'}
+        />
       </Flexbox>
     </>
   );

package/src/features/EditorModal/TextareCanvas.tsx

@@ -2,13 +2,15 @@ import { TextArea } from '@lobehub/ui';
 import { FC } from 'react';
 
 interface EditorCanvasProps {
+  defaultValue?: string;
   onChange?: (value: string) => void;
   value?: string;
 }
 
-const EditorCanvas: FC<EditorCanvasProps> = ({ value, onChange }) => {
+const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, value, onChange }) => {
   return (
     <TextArea
+      defaultValue={defaultValue}
       onChange={(e) => {
         onChange?.(e.target.value);
       }}

package/src/features/EditorModal/index.tsx

@@ -1,3 +1,4 @@
+import { useEditor } from '@lobehub/editor/react';
 import { Modal, ModalProps, createRawModal } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,8 +19,7 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
   const { t } = useTranslation('common');
   const [v, setV] = useState(value);
   const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
-
-  const Canvas = enableRichRender ? EditorCanvas : TextareCanvas;
+  const editor = useEditor();
 
   return (
     <Modal
@@ -30,7 +30,13 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       okText={t('ok')}
       onOk={async () => {
         setConfirmLoading(true);
-        await onConfirm?.(v || '');
+        let finalValue;
+        if (enableRichRender) {
+          finalValue = editor?.getDocument('markdown') as unknown as string;
+        } else {
+          finalValue = v;
+        }
+        await onConfirm?.(finalValue || '');
         setConfirmLoading(false);
       }}
       styles={{
@@ -43,7 +49,11 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       width={'min(90vw, 920px)'}
       {...rest}
     >
-      <Canvas onChange={(v) => setV(v)} value={v} />
+      {enableRichRender ? (
+        <EditorCanvas defaultValue={value} editor={editor} />
+      ) : (
+        <TextareCanvas defaultValue={value} onChange={(v) => setV(v)} value={v} />
+      )}
     </Modal>
   );
 });

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';