feat: add copy and resend button for the question of chat

web/app/components/base/chat/chat/question.tsx → web/app/components/base/chat/chat/question/index.tsx

@@ -5,9 +5,10 @@ import type {
 import {
   memo,
 } from 'react'
-import type { ChatItem } from '../types'
-import type { Theme } from '../embedded-chatbot/theme/theme-context'
-import { CssTransform } from '../embedded-chatbot/theme/utils'
+import type { ChatItem } from '../../types'
+import type { Theme } from '../../embedded-chatbot/theme/theme-context'
+import { CssTransform } from '../../embedded-chatbot/theme/utils'
+import Operation from './operation'
 import { QuestionTriangle } from '@/app/components/base/icons/src/vender/solid/general'
 import { User } from '@/app/components/base/icons/src/public/avatar'
 import { Markdown } from '@/app/components/base/markdown'
@@ -40,6 +41,7 @@ const Question: FC<QuestionProps> = ({
           className='px-4 py-3 bg-[#D1E9FF]/50 rounded-b-2xl rounded-tl-2xl text-sm text-gray-900'
           style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
         >
+          <Operation item={item}/>
           {
             !!imgSrcs.length && (
               <ImageGallery srcs={imgSrcs} />

web/app/components/base/chat/chat/question/operation.tsx

@@ -0,0 +1,46 @@
+import type { FC } from 'react'
+import {
+  memo,
+} from 'react'
+import type { ChatItem } from '../../types'
+import cn from '@/utils/classnames'
+import CopyBtn from '@/app/components/base/copy-btn'
+import ResendBtn from '@/app/components/base/resend-btn'
+
+type OperationProps = {
+  item: ChatItem
+}
+const Operation: FC<OperationProps> = ({
+  item,
+}) => {
+  const {
+    isOpeningStatement,
+    content,
+    message_files,
+  } = item
+
+  return (
+    <>
+      <div
+        className={cn('absolute flex justify-end gap-1 -top-3.5 right-0')}
+      >
+        {!isOpeningStatement && (
+          <div className='hidden group-hover:flex items-center w-max h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md shrink-0'>
+            <CopyBtn
+              value={content}
+              className='hidden group-hover:block'
+            />
+            <ResendBtn
+              value={content}
+              files={message_files}
+              className='hidden group-hover:block'
+            />
+          </div>
+        )}
+
+      </div>
+    </>
+  )
+}
+
+export default memo(Operation)

web/app/components/base/resend-btn/index.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { t } from 'i18next'
+import s from './style.module.css'
+import { useChatContext } from '@/app/components/base/chat/chat/context'
+import Tooltip from '@/app/components/base/tooltip'
+import type { VisionFile } from '@/types/app'
+
+type ResendBtnProps = {
+  value: string
+  files?: VisionFile[]
+  className?: string
+  isPlain?: boolean
+}
+
+const ResendBtn = ({
+  value,
+  files,
+  className,
+  isPlain,
+}: ResendBtnProps) => {
+  const { onSend } = useChatContext()
+  return (
+    <div className={`${className}`}>
+      <Tooltip popupContent={t('appApi.resend')}>
+        <div
+          className={'box-border p-0.5 flex items-center justify-center rounded-md bg-white cursor-pointer'}
+          style={!isPlain
+            ? {
+              boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
+            }
+            : {}}
+          onClick={() => {
+            if (onSend)
+              onSend(value, files)
+          }}
+        >
+          <div className={`w-6 h-6 rounded-md hover:bg-gray-50  ${s.resendIcon}`}></div>
+        </div>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default ResendBtn

web/app/components/base/resend-btn/style.module.css

@@ -0,0 +1,11 @@
+.resendIcon {
+    background-image: url(~@/app/components/develop/secret-key/assets/resend.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.resendIcon:hover {
+    background-image: url(~@/app/components/develop/secret-key/assets/resend-hover.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+}

web/i18n/en-US/app-api.ts

@@ -6,6 +6,7 @@ const translation = {
   ok: 'In Service',
   copy: 'Copy',
   copied: 'Copied',
+  resend: 'Resend',
   play: 'Play',
   pause: 'Pause',
   playing: 'Playing',

web/i18n/zh-Hans/app-api.ts

@@ -6,6 +6,7 @@ const translation = {
   ok: '运行中',
   copy: '复制',
   copied: '已复制',
+  resend: '重新发送',
   play: '播放',
   pause: '暂停',
   playing: '播放中',