modify prompt log

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

@@ -115,10 +115,9 @@ const AudioBtn = ({
         className='z-10'
       >
         <div
-          className={`box-border p-0.5 flex items-center justify-center cursor-pointer ${isAudition || 'rounded-md bg-white'}`}
-          style={{ boxShadow: !isAudition ? '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)' : '' }}
+          className={`box-border p-0.5 flex items-center justify-center cursor-pointer ${isAudition || '!p-0 rounded-md bg-white'}`}
           onClick={togglePlayPause}>
-          <div className={`w-6 h-6 rounded-md ${!isAudition ? 'hover:bg-gray-200' : 'hover:bg-gray-50'} ${(isPlaying && !hasEnded) ? s.pauseIcon : s.playIcon}`}></div>
+          <div className={`w-6 h-6 rounded-md ${!isAudition ? 'w-4 h-4 hover:bg-gray-50' : 'hover:bg-gray-50'} ${(isPlaying && !hasEnded) ? s.pauseIcon : s.playIcon}`}></div>
         </div>
       </Tooltip>
     </div>

web/app/components/base/chat/chat/answer/index.tsx

@@ -2,7 +2,7 @@ import type {
   FC,
   ReactNode,
 } from 'react'
-import { memo } from 'react'
+import { memo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type {
   ChatConfig,
@@ -27,6 +27,7 @@ type AnswerProps = {
   answerIcon?: ReactNode
   responding?: boolean
   allToolIcons?: Record<string, string | Emoji>
+  showPromptLog?: boolean
 }
 const Answer: FC<AnswerProps> = ({
   item,
@@ -36,8 +37,10 @@ const Answer: FC<AnswerProps> = ({
   answerIcon,
   responding,
   allToolIcons,
+  showPromptLog,
 }) => {
   const { t } = useTranslation()
+  const ref = useRef(null)
   const {
     content,
     citation,
@@ -48,7 +51,7 @@ const Answer: FC<AnswerProps> = ({
   const hasAgentThoughts = !!agent_thoughts?.length
 
   return (
-    <div className='flex mb-2 last:mb-0'>
+    <div className='flex mb-2 last:mb-0' ref={ref}>
       <div className='shrink-0 relative w-10 h-10'>
         {
           answerIcon || (
@@ -75,6 +78,8 @@ const Answer: FC<AnswerProps> = ({
                   item={item}
                   question={question}
                   index={index}
+                  showPromptLog={showPromptLog}
+                  containerRef={ref}
                 />
               )
             }

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

@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import type { FC, RefObject } from 'react'
 import {
   memo,
   useMemo,
@@ -17,16 +17,21 @@ import {
   ThumbsUp,
 } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
+import Log from '@/app/components/app/chat/log'
 
 type OperationProps = {
   item: ChatItem
   question: string
   index: number
+  showPromptLog?: boolean
+  containerRef: RefObject<HTMLElement>
 }
 const Operation: FC<OperationProps> = ({
   item,
   question,
   index,
+  showPromptLog,
+  containerRef,
 }) => {
   const { t } = useTranslation()
   const {
@@ -65,22 +70,29 @@ const Operation: FC<OperationProps> = ({
 
   return (
     <div className='absolute top-[-14px] right-[-14px] flex justify-end gap-1'>
-      {
-        !isOpeningStatement && (
-          <CopyBtn
-            value={content}
-            className='hidden group-hover:block'
-          />
-        )
-      }
-
-      {(!isOpeningStatement && config?.text_to_speech?.enabled) && (
-        <AudioBtn
+      {!isOpeningStatement && (
+        <CopyBtn
           value={content}
-          voice={config?.text_to_speech?.voice}
           className='hidden group-hover:block'
         />
       )}
+
+      <div className='hidden group-hover:flex items-center h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
+        {showPromptLog && (
+          <Log runID={item.workflow_run_id} log={item.log!} containerRef={containerRef} />
+        )}
+        {(!isOpeningStatement && config?.text_to_speech?.enabled) && (
+          <>
+            <div className='mx-1 w-[1px] h-[14px] bg-gray-200'/>
+            <AudioBtn
+              value={content}
+              voice={config?.text_to_speech?.voice}
+              className='hidden group-hover:block'
+            />
+          </>
+        )}
+      </div>
+
       {(!isOpeningStatement && config?.supportAnnotation && config.annotation_reply?.enabled) && (
         <AnnotationCtrlBtn
           appId={config?.appId || ''}

web/app/components/base/chat/chat/hooks.ts

@@ -318,10 +318,17 @@ export const useChat = (
                 const requestion = draft[index - 1]
                 draft[index - 1] = {
                   ...requestion,
-                  log: newResponseItem.message,
                 }
                 draft[index] = {
                   ...draft[index],
+                  log: [
+                    ...newResponseItem.message,
+                    {
+                      role: 'assistant',
+                      text: newResponseItem.answer,
+                      files: newResponseItem.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
+                    },
+                  ],
                   more: {
                     time: dayjs.unix(newResponseItem.created_at).format('hh:mm A'),
                     tokens: newResponseItem.answer_tokens + newResponseItem.message_tokens,

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

@@ -160,6 +160,7 @@ const Chat: FC<ChatProps> = ({
                       answerIcon={answerIcon}
                       responding={isLast && isResponding}
                       allToolIcons={allToolIcons}
+                      showPromptLog={showPromptLog}
                     />
                   )
                 }
@@ -167,9 +168,7 @@ const Chat: FC<ChatProps> = ({
                   <Question
                     key={item.id}
                     item={item}
-                    showPromptLog={showPromptLog}
                     questionIcon={questionIcon}
-                    isResponding={isResponding}
                   />
                 )
               })

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

@@ -4,28 +4,21 @@ import type {
 } from 'react'
 import {
   memo,
-  useRef,
 } from 'react'
 import type { ChatItem } from '../types'
 import { QuestionTriangle } from '@/app/components/base/icons/src/vender/solid/general'
 import { User } from '@/app/components/base/icons/src/public/avatar'
-import Log from '@/app/components/app/chat/log'
 import { Markdown } from '@/app/components/base/markdown'
 import ImageGallery from '@/app/components/base/image-gallery'
 
 type QuestionProps = {
   item: ChatItem
-  showPromptLog?: boolean
   questionIcon?: ReactNode
-  isResponding?: boolean
 }
 const Question: FC<QuestionProps> = ({
   item,
-  showPromptLog,
-  isResponding,
   questionIcon,
 }) => {
-  const ref = useRef(null)
   const {
     content,
     message_files,
@@ -34,14 +27,9 @@ const Question: FC<QuestionProps> = ({
   const imgSrcs = message_files?.length ? message_files.map(item => item.url) : []
 
   return (
-    <div className='flex justify-end mb-2 last:mb-0 pl-10' ref={ref}>
+    <div className='flex justify-end mb-2 last:mb-0 pl-10'>
       <div className='group relative mr-4'>
         <QuestionTriangle className='absolute -right-2 top-0 w-2 h-3 text-[#D1E9FF]/50' />
-        {
-          showPromptLog && !isResponding && (
-            <Log log={item.log!} containerRef={ref} />
-          )
-        }
         <div className='px-4 py-3 bg-[#D1E9FF]/50 rounded-b-2xl rounded-tl-2xl text-sm text-gray-900'>
           {
             !!imgSrcs.length && (