FastGPT/src/pages/model/components/ModelList.tsx

import React, { useCallback, useMemo, useState } from 'react';
import { Box, Flex, useTheme, Input, IconButton, Tooltip } from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';
import { useRouter } from 'next/router';
import MyIcon from '@/components/Icon';
import { postCreateModel } from '@/api/model';
import { useLoading } from '@/hooks/useLoading';
import { useToast } from '@/hooks/useToast';
import { useQuery } from '@tanstack/react-query';
import { useUserStore } from '@/store/user';
import Avatar from '@/components/Avatar';

const ModelList = ({ modelId }: { modelId: string }) => {
  const theme = useTheme();
  const router = useRouter();
  const { toast } = useToast();
  const { Loading, setIsLoading } = useLoading();
  const { myModels, myCollectionModels, loadMyModels, refreshModel } = useUserStore();
  const [searchText, setSearchText] = useState('');

  /* 加载模型 */
  const { isFetching } = useQuery(['loadModels'], () => loadMyModels(false));

  const onclickCreateModel = useCallback(async () => {
    setIsLoading(true);
    try {
      const id = await postCreateModel({ name: `AI应用${myModels.length + 1}` });
      toast({
        title: '创建成功',
        status: 'success'
      });
      refreshModel.freshMyModels();
      router.push(`/model?modelId=${id}`);
    } catch (err: any) {
      toast({
        title: typeof err === 'string' ? err : err.message || '出现了意外',
        status: 'error'
      });
    }
    setIsLoading(false);
  }, [myModels.length, refreshModel, router, setIsLoading, toast]);

  const models = useMemo(
    () =>
      [
        {
          label: '我的',
          list: myModels.filter((item) =>
            new RegExp(searchText, 'ig').test(item.name + item.systemPrompt)
          )
        },
        {
          label: '收藏',
          list: myCollectionModels.filter((item) =>
            new RegExp(searchText, 'ig').test(item.name + item.systemPrompt)
          )
        }
      ].filter((item) => item.list.length > 0),
    [myCollectionModels, myModels, searchText]
  );

  const totalModels = useMemo(
    () => models.reduce((sum, item) => sum + item.list.length, 0),
    [models]
  );

  return (
    <Flex
      position={'relative'}
      flexDirection={'column'}
      w={'100%'}
      h={'100%'}
      bg={'white'}
      borderRight={['', theme.borders.base]}
    >
      <Flex w={'90%'} my={5} mx={'auto'}>
        <Flex flex={1} mr={2} position={'relative'} alignItems={'center'}>
          <Input
            h={'32px'}
            placeholder="搜索 AI 应用"
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
          />
          {searchText && (
            <MyIcon
              zIndex={10}
              position={'absolute'}
              right={3}
              name={'closeSolid'}
              w={'16px'}
              h={'16px'}
              color={'myGray.500'}
              cursor={'pointer'}
              onClick={() => setSearchText('')}
            />
          )}
        </Flex>
        <Tooltip label={'新建一个AI应用'}>
          <IconButton
            h={'32px'}
            icon={<AddIcon />}
            aria-label={''}
            variant={'outline'}
            onClick={onclickCreateModel}
          />
        </Tooltip>
      </Flex>
      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
        {models.map((item) => (
          <Box key={item.label} _notFirst={{ mt: 5 }}>
            <Box fontWeight={'bold'} pl={5}>
              {item.label}
            </Box>
            {item.list.map((item) => (
              <Flex
                key={item._id}
                position={'relative'}
                alignItems={['flex-start', 'center']}
                p={3}
                mb={[2, 0]}
                cursor={'pointer'}
                transition={'background-color .2s ease-in'}
                borderLeft={['', '5px solid transparent']}
                _hover={{
                  backgroundColor: ['', '#dee0e3']
                }}
                {...(modelId === item._id
                  ? {
                      backgroundColor: '#eff0f1',
                      borderLeftColor: 'myBlue.600 !important'
                    }
                  : {})}
                onClick={() => {
                  if (item._id === modelId) return;
                  router.push(`/model?modelId=${item._id}`);
                }}
              >
                <Avatar src={item.avatar} w={'34px'} h={'34px'} />
                <Box flex={'1 0 0'} w={0} ml={3}>
                  <Box className="textEllipsis" color={'myGray.1000'}>
                    {item.name}
                  </Box>
                  <Box className="textEllipsis" color={'myGray.400'} fontSize={'sm'}>
                    {item.systemPrompt || '这个 应用 没有设置提示词~'}
                  </Box>
                </Box>
              </Flex>
            ))}
          </Box>
        ))}

        {!isFetching && totalModels === 0 && (
          <Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'30vh'}>
            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
            <Box mt={2} color={'myGray.500'}>
              还没有 AI 应用~
            </Box>
          </Flex>
        )}
      </Box>
      <Loading loading={isFetching} fixed={false} />
    </Flex>
  );
};

export default ModelList;