AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-05-25 15:47:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): optimize action buttons style in the question component (#19626)

Browse Source
This commit is contained in:
yangzheli 2025-05-13 21:31:01 +08:00 committed by GitHub
parent b8e305f183
commit 297d35364e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/app/components/base/chat/chat/question.tsx
View File

@ -5,6 +5,8 @@ import type {
import { import {
memo, memo,
useCallback, useCallback,
useEffect,
useRef,
useState, useState,
} from 'react' } from 'react'
import type { ChatItem } from '../types' import type { ChatItem } from '../types'
@ -52,6 +54,8 @@ const Question: FC<QuestionProps> = ({
const [isEditing, setIsEditing] = useState(false) const [isEditing, setIsEditing] = useState(false)
const [editedContent, setEditedContent] = useState(content) const [editedContent, setEditedContent] = useState(content)
const [contentWidth, setContentWidth] = useState(0)
const contentRef = useRef<HTMLDivElement>(null)
const handleEdit = useCallback(() => { const handleEdit = useCallback(() => {
setIsEditing(true) setIsEditing(true)
@ -75,14 +79,31 @@ const Question: FC<QuestionProps> = ({
item.nextSibling && switchSibling?.(item.nextSibling) item.nextSibling && switchSibling?.(item.nextSibling)
}, [switchSibling, item.prevSibling, item.nextSibling]) }, [switchSibling, item.prevSibling, item.nextSibling])
const getContentWidth = () => {
if (contentRef.current)
setContentWidth(contentRef.current?.clientWidth)
}
useEffect(() => {
if (!contentRef.current)
return
const resizeObserver = new ResizeObserver(() => {
getContentWidth()
})
resizeObserver.observe(contentRef.current)
return () => {
resizeObserver.disconnect()
}
}, [])
return ( return (
<div className='mb-2 flex justify-end pl-14 last:mb-0'> <div className='mb-2 flex justify-end last:mb-0'>
<div className={cn('group relative mr-4 flex max-w-full items-start', isEditing && 'flex-1')}> <div className={cn('group relative mr-4 flex max-w-full items-start pl-14', isEditing && 'flex-1')}>
<div className={cn('mr-2 gap-1', isEditing ? 'hidden' : 'flex')}> <div className={cn('mr-2 gap-1', isEditing ? 'hidden' : 'flex')}>
<div className=" <div
absolutegap-0.5 hidden rounded-[10px] border-[0.5px] border-components-actionbar-border className="absolute hidden gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex"
bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex style={{ right: contentWidth + 8 }}
"> >
<ActionButton onClick={() => { <ActionButton onClick={() => {
copy(content) copy(content)
Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') }) Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
@ -95,6 +116,7 @@ const Question: FC<QuestionProps> = ({
</div> </div>
</div> </div>
<div <div
ref={contentRef}
className='w-full rounded-2xl bg-[#D1E9FF]/50 px-4 py-3 text-sm text-gray-900' className='w-full rounded-2xl bg-[#D1E9FF]/50 px-4 py-3 text-sm text-gray-900'
style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}} style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
> >