/*
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 .
For commercial licensing, please contact support@quantumnous.com
*/
import React, { useContext, useMemo } from 'react';
import {
Input,
ImagePreview,
Button,
Collapsible,
Select,
} from '@douyinfe/semi-ui';
import { useIsMobile } from '../../hooks/common/useIsMobile';
import { IconSearch } from '@douyinfe/semi-icons';
import PricingVendors from '../table/model-pricing/filter/PricingVendors';
import PricingProviderType from '../table/model-pricing/filter/PricingProviderType';
import PricingQuotaTypes from '../table/model-pricing/filter/PricingQuotaTypes';
import PricingTags from '../table/model-pricing/filter/PricingTags';
import PricingEndpointTypes from '../table/model-pricing/filter/PricingEndpointTypes';
import PricingCardView from '../table/model-pricing/view/card/PricingCardView';
import ModelDetailSideSheet from '../table/model-pricing/modal/ModelDetailSideSheet';
import { useModelPricingData } from '../../hooks/model-pricing/useModelPricingData';
import { usePricingFilterCounts } from '../../hooks/model-pricing/usePricingFilterCounts';
import { StatusContext } from '../../context/Status';
import { UserContext } from '../../context/User';
const HomeModelList = () => {
const isMobile = useIsMobile();
const pricingData = useModelPricingData({ defaultSortKey: 'hot' });
const [statusState] = useContext(StatusContext);
const [userState] = useContext(UserContext);
const headerNavHomeConfig = useMemo(() => {
try {
const config = statusState?.status?.HeaderNavModules;
if (!config) return null;
const modules = JSON.parse(config);
const home = modules?.home;
if (typeof home === 'object' && home !== null) {
return home;
}
} catch {}
return null;
}, [statusState?.status?.HeaderNavModules]);
const blurPricing = useMemo(() => {
if (userState?.user) return false;
return !!headerNavHomeConfig?.blurPricing;
}, [headerNavHomeConfig, userState?.user]);
const showCostPrice = useMemo(
() => !!headerNavHomeConfig?.showCostPrice,
[headerNavHomeConfig],
);
const {
quotaTypeModels,
endpointTypeModels,
vendorModels,
tagModels,
supplierTypeModels,
} = usePricingFilterCounts({
models: pricingData.models,
filterGroup: pricingData.filterGroup,
filterQuotaType: pricingData.filterQuotaType,
filterEndpointType: pricingData.filterEndpointType,
filterVendor: pricingData.filterVendor,
filterTag: pricingData.filterTag,
filterSupplierType: pricingData.filterSupplierType,
searchValue: pricingData.searchValue,
});
React.useEffect(() => {
pricingData.setPageSize(40);
}, []);
const handleResetFilters = () => {
pricingData.setSearchValue('');
pricingData.setFilterVendor('all');
pricingData.setFilterQuotaType('all');
pricingData.setFilterTag('all');
pricingData.setFilterEndpointType('all');
pricingData.setFilterSupplierType?.('all');
pricingData.setFilterSupplier && pricingData.setFilterSupplier('all');
pricingData.setSortKey && pricingData.setSortKey('hot');
pricingData.setCurrentPage(1);
};
const handleFilterVendorChange = (vendor) => {
pricingData.setFilterVendor(vendor);
if (vendor === 'all') {
pricingData.setSortKey?.('hot');
} else {
pricingData.setSortKey?.('discount');
}
};
const sortSelectValue =
!pricingData.sortKey || pricingData.sortKey === 'default'
? 'hot'
: pricingData.sortKey;
const sortOptions = [
// { value: 'default', label: pricingData.t('默认') },
{ value: 'hot', label: pricingData.t('热门') },
{ value: 'price', label: pricingData.t('价格') },
{ value: 'discount', label: pricingData.t('折扣率') },
{ value: 'supplier_grade', label: pricingData.t('供应商等级') },
{ value: 'latency', label: pricingData.t('时延') },
];
return (