From 297d35364e4c6de1fa2ba8725c99aab454d1ca92 Mon Sep 17 00:00:00 2001
From: yangzheli <43645580+yangzheli@users.noreply.github.com>
Date: Tue, 13 May 2025 21:31:01 +0800
Subject: [PATCH] fix(web): optimize action buttons style in the question
 component (#19626)

---
 .../components/base/chat/chat/question.tsx    | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 3f7f2e837f..8fc49d1978 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -5,6 +5,8 @@ import type {
 import {
   memo,
   useCallback,
+  useEffect,
+  useRef,
   useState,
 } from 'react'
 import type { ChatItem } from '../types'
@@ -52,6 +54,8 @@ const Question: FC<QuestionProps> = ({
 
   const [isEditing, setIsEditing] = useState(false)
   const [editedContent, setEditedContent] = useState(content)
+  const [contentWidth, setContentWidth] = useState(0)
+  const contentRef = useRef<HTMLDivElement>(null)
 
   const handleEdit = useCallback(() => {
     setIsEditing(true)
@@ -75,14 +79,31 @@ const Question: FC<QuestionProps> = ({
       item.nextSibling && switchSibling?.(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 (
-    <div className='mb-2 flex justify-end pl-14 last:mb-0'>
-      <div className={cn('group relative mr-4 flex max-w-full items-start', isEditing && 'flex-1')}>
+    <div className='mb-2 flex justify-end last:mb-0'>
+      <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="
-            absolutegap-0.5 hidden rounded-[10px] border-[0.5px] border-components-actionbar-border
-            bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex
-          ">
+          <div
+            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"
+            style={{ right: contentWidth + 8 }}
+          >
             <ActionButton onClick={() => {
               copy(content)
               Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
@@ -95,6 +116,7 @@ const Question: FC<QuestionProps> = ({
           </div>
         </div>
         <div
+          ref={contentRef}
           className='w-full rounded-2xl bg-[#D1E9FF]/50 px-4 py-3 text-sm text-gray-900'
           style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
         >