diff --git a/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx b/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx index 8fe085aa2f..c185d509f1 100644 --- a/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx +++ b/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx @@ -6,8 +6,10 @@ import { useSettings } from '@renderer/hooks/useSettings' import { useAppDispatch } from '@renderer/store' import { setFoldDisplayMode } from '@renderer/store/settings' import type { Model } from '@renderer/types' -import type { Message } from '@renderer/types/newMessage' +import { AssistantMessageStatus, type Message } from '@renderer/types/newMessage' +import { lightbulbSoftVariants } from '@renderer/utils/motionVariants' import { Avatar, Segmented as AntdSegmented, Tooltip } from 'antd' +import { motion } from 'motion/react' import { FC, memo, useCallback } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -26,50 +28,62 @@ const MessageGroupModelList: FC = ({ messages, selec const { foldDisplayMode } = useSettings() const isCompact = foldDisplayMode === 'compact' + const isMessageProcessing = useCallback((message: Message) => { + return [ + AssistantMessageStatus.PENDING, + AssistantMessageStatus.PROCESSING, + AssistantMessageStatus.SEARCHING + ].includes(message.status as AssistantMessageStatus) + }, []) + const renderLabel = useCallback( (message: Message) => { const modelTip = message.model?.name + const isProcessing = isMessageProcessing(message) if (isCompact) { return ( - + { setSelectedMessage(message) }}> - + + + ) } return ( - + {message.model?.name} ) }, - [isCompact, selectMessageId, setSelectedMessage] + [isCompact, isMessageProcessing, selectMessageId, setSelectedMessage] ) return ( - dispatch(setFoldDisplayMode(isCompact ? 'expanded' : 'compact'))}> - + + dispatch(setFoldDisplayMode(isCompact ? 'expanded' : 'compact'))}> {isCompact ? : } - - - + + {isCompact ? ( /* Compact style display */ diff --git a/src/renderer/src/utils/motionVariants.ts b/src/renderer/src/utils/motionVariants.ts index 1f4812369f..8d5d25ade6 100644 --- a/src/renderer/src/utils/motionVariants.ts +++ b/src/renderer/src/utils/motionVariants.ts @@ -16,3 +16,22 @@ export const lightbulbVariants = { } } } + +export const lightbulbSoftVariants = { + active: { + opacity: [1, 0.5, 1], + transition: { + duration: 2, + ease: 'easeInOut', + times: [0, 0.5, 1], + repeat: Infinity + } + }, + idle: { + opacity: 1, + transition: { + duration: 0.3, + ease: 'easeInOut' + } + } +}