new-api/web/src/components/table/channels/modals/SingleModelSelectModal.jsx

/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useIsMobile } from '../../../../hooks/common/useIsMobile';
import {
  Collapse,
  Empty,
  Input,
  Modal,
  Radio,
  Typography,
} from '@douyinfe/semi-ui';
import {
  IllustrationNoResult,
  IllustrationNoResultDark,
} from '@douyinfe/semi-illustrations';
import { IconSearch } from '@douyinfe/semi-icons';
import { getModelCategories } from '../../../../helpers/render';

const SingleModelSelectModal = ({
  visible,
  models = [],
  selected = '',
  onConfirm,
  onCancel,
}) => {
  const { t } = useTranslation();
  const isMobile = useIsMobile();

  const normalizeModelName = (model) => String(model ?? '').trim();
  const normalizedModels = useMemo(() => {
    const list = Array.isArray(models) ? models : [];
    return Array.from(new Set(list.map(normalizeModelName).filter(Boolean)));
  }, [models]);

  const [keyword, setKeyword] = useState('');
  const [selectedModel, setSelectedModel] = useState('');

  useEffect(() => {
    if (visible) {
      setKeyword('');
      setSelectedModel(normalizeModelName(selected));
    }
  }, [visible, selected]);

  const filteredModels = useMemo(() => {
    const lower = keyword.trim().toLowerCase();
    if (!lower) return normalizedModels;
    return normalizedModels.filter((m) => m.toLowerCase().includes(lower));
  }, [normalizedModels, keyword]);

  const modelsByCategory = useMemo(() => {
    const categories = getModelCategories(t);
    const categorized = {};
    const uncategorized = [];

    filteredModels.forEach((model) => {
      let foundCategory = false;
      for (const [key, category] of Object.entries(categories)) {
        if (key !== 'all' && category.filter({ model_name: model })) {
          if (!categorized[key]) {
            categorized[key] = {
              label: category.label,
              icon: category.icon,
              models: [],
            };
          }
          categorized[key].models.push(model);
          foundCategory = true;
          break;
        }
      }
      if (!foundCategory) {
        uncategorized.push(model);
      }
    });

    if (uncategorized.length > 0) {
      categorized.other = {
        label: t('其他'),
        icon: null,
        models: uncategorized,
      };
    }

    return categorized;
  }, [filteredModels, t]);

  const categoryEntries = useMemo(
    () => Object.entries(modelsByCategory),
    [modelsByCategory],
  );

  return (
    <Modal
      header={
        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 py-4'>
          <Typography.Title heading={5} className='m-0'>
            {t('选择模型')}
          </Typography.Title>
        </div>
      }
      visible={visible}
      onOk={() => onConfirm?.(selectedModel)}
      onCancel={onCancel}
      okText={t('确定')}
      cancelText={t('取消')}
      okButtonProps={{ disabled: !selectedModel }}
      size={isMobile ? 'full-width' : 'large'}
      closeOnEsc
      maskClosable
      centered
    >
      <Input
        prefix={<IconSearch size={14} />}
        placeholder={t('搜索模型')}
        value={keyword}
        onChange={(v) => setKeyword(v)}
        showClear
      />

      <div style={{ maxHeight: 400, overflowY: 'auto', paddingRight: 8 }}>
        {filteredModels.length === 0 ? (
          <Empty
            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
            darkModeImage={
              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
            }
            description={t('暂无匹配模型')}
            style={{ padding: 30 }}
          />
        ) : (
          <Radio.Group
            className='w-full'
            style={{ width: '100%' }}
            value={selectedModel}
            onChange={(val) => {
              const next = val && val.target ? val.target.value : val;
              setSelectedModel(next);
            }}
          >
            <Collapse
              className='w-full'
              style={{ width: '100%' }}
              defaultActiveKey={[]}
            >
              {categoryEntries.map(([key, categoryData], index) => (
                <Collapse.Panel
                  key={`${key}_${index}`}
                  itemKey={`${key}_${index}`}
                  header={
                    <span className='flex items-center gap-2'>
                      {categoryData.icon}
                      <span>
                        {categoryData.label} ({categoryData.models.length})
                      </span>
                    </span>
                  }
                >
                  <div className='grid grid-cols-2 gap-x-4'>
                    {categoryData.models.map((model) => (
                      <Radio key={model} value={model} className='my-1'>
                        {model}
                      </Radio>
                    ))}
                  </div>
                </Collapse.Panel>
              ))}
            </Collapse>
          </Radio.Group>
        )}
      </div>
    </Modal>
  );
};

export default SingleModelSelectModal;