58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Box, Flex, Image } from '@chakra-ui/react';
|
|
import { useRouter } from 'next/router';
|
|
import { ModelListItemType } from '@/types/model';
|
|
|
|
const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId: string }) => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<Box w={'100%'} h={'100%'} bg={'white'} overflow={'overlay'}>
|
|
{models.map((item) => (
|
|
<Box key={item._id}>
|
|
<Flex
|
|
key={item._id}
|
|
position={'relative'}
|
|
alignItems={['flex-start', 'center']}
|
|
p={3}
|
|
cursor={'pointer'}
|
|
transition={'background-color .2s ease-in'}
|
|
borderLeft={['', '5px solid transparent']}
|
|
_hover={{
|
|
backgroundColor: ['', '#dee0e3']
|
|
}}
|
|
{...(modelId === item._id
|
|
? {
|
|
backgroundColor: '#eff0f1',
|
|
borderLeftColor: 'myBlue.600'
|
|
}
|
|
: {})}
|
|
onClick={() => {
|
|
if (item._id === modelId) return;
|
|
router.replace(`/chat?modelId=${item._id}`);
|
|
}}
|
|
>
|
|
<Image
|
|
src={item.avatar || '/icon/logo.png'}
|
|
alt=""
|
|
w={'34px'}
|
|
maxH={'50px'}
|
|
objectFit={'contain'}
|
|
/>
|
|
<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 || '这个AI助手没有设置提示词~'}
|
|
</Box>
|
|
</Box>
|
|
</Flex>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ModelList;
|