jyapayne/dify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feat: web app dark mode (#14732)

Browse source
This commit is contained in:
KVOJJJin 2025-03-03 14:44:51 +08:00 • committed by GitHub
commit d0d0bf570e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
98 changed files with 3006 additions and 2496 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web/app/components/base/chat/chat-with-history/sidebar/item.tsx
View file

@ -5,8 +5,8 @@ import {
} from 'react'
import { useHover } from 'ahooks'
import type { ConversationItem } from '@/models/share'
import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/communication'
import ItemOperation from '@/app/components/explore/item-operation'
import Operation from '@/app/components/base/chat/chat-with-history/sidebar/operation'
import cn from '@/utils/classnames'
type ItemProps = {
isPin?: boolean
@ -24,23 +24,23 @@ const Item: FC<ItemProps> = ({
}) => {
const ref = useRef(null)
const isHovering = useHover(ref)
const isSelected = currentConversationId === item.id
return (
<div
ref={ref}
key={item.id}
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'}
`}
className={cn(
'group flex p-1 pl-3 rounded-lg cursor-pointer text-components-menu-item-text system-sm-medium hover:bg-state-base-hover',
isSelected && 'bg-state-accent-active hover:bg-state-accent-active text-text-accent',
)}
onClick={() => onChangeConversation(item.id)}
>
<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>
<div className='grow p-1 pl-0 truncate' title={item.name}>{item.name}</div>
{item.id !== '' && (
<div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
<ItemOperation
<div className='shrink-0' onClick={e => e.stopPropagation()}>
<Operation
isActive={isSelected}
isPinned={!!isPin}
isItemHovering={isHovering}
togglePin={() => onOperate(isPin ? 'unpin' : 'pin', item)}