| | |
| | | } from 'react' |
| | | import { useHover } from 'ahooks' |
| | | import type { ConversationItem } from '@/models/share' |
| | | import Operation from '@/app/components/base/chat/chat-with-history/sidebar/operation' |
| | | import cn from '@/utils/classnames' |
| | | import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/communication' |
| | | import ItemOperation from '@/app/components/explore/item-operation' |
| | | |
| | | type ItemProps = { |
| | | isPin?: boolean |
| | |
| | | }) => { |
| | | const ref = useRef(null) |
| | | const isHovering = useHover(ref) |
| | | const isSelected = currentConversationId === item.id |
| | | |
| | | return ( |
| | | <div |
| | | ref={ref} |
| | | key={item.id} |
| | | className={cn( |
| | | 'system-sm-medium group flex cursor-pointer rounded-lg p-1 pl-3 text-components-menu-item-text hover:bg-state-base-hover', |
| | | isSelected && 'bg-state-accent-active text-text-accent hover:bg-state-accent-active', |
| | | )} |
| | | className={` |
| | | flex mb-0.5 last-of-type:mb-0 py-1.5 pl-3 pr-1.5 text-sm font-medium text-gray-700 |
| | | rounded-lg cursor-pointer hover:bg-gray-50 group |
| | | ${currentConversationId === item.id && 'text-primary-600 bg-primary-50'} |
| | | `} |
| | | onClick={() => onChangeConversation(item.id)} |
| | | > |
| | | <div className='grow truncate p-1 pl-0' title={item.name}>{item.name}</div> |
| | | <MessageDotsCircle className={`shrink-0 mt-1 mr-2 w-4 h-4 text-gray-400 ${currentConversationId === item.id && 'text-primary-600'}`} /> |
| | | <div className='grow py-0.5 break-all' title={item.name}>{item.name}</div> |
| | | {item.id !== '' && ( |
| | | <div className='shrink-0' onClick={e => e.stopPropagation()}> |
| | | <Operation |
| | | isActive={isSelected} |
| | | <div className='shrink-0 h-6' onClick={e => e.stopPropagation()}> |
| | | <ItemOperation |
| | | isPinned={!!isPin} |
| | | isItemHovering={isHovering} |
| | | togglePin={() => onOperate(isPin ? 'unpin' : 'pin', item)} |