diff --git a/web/app/components/app/chat/answer/index.tsx b/web/app/components/app/chat/answer/index.tsx
index 7138aeba881e40..af37d60b05129b 100644
--- a/web/app/components/app/chat/answer/index.tsx
+++ b/web/app/components/app/chat/answer/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC, ReactNode } from 'react'
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { UserCircleIcon } from '@heroicons/react/24/solid'
 import cn from 'classnames'
 import type { CitationItem, DisplayScene, FeedbackFunc, Feedbacktype, IChatItem } from '../type'
 import OperationBtn from '../operation'
 import LoadingAnim from '../loading-anim'
-import { EditIconSolid, RatingIcon } from '../icon-component'
+import { RatingIcon } from '../icon-component'
 import s from '../style.module.css'
 import MoreInfo from '../more-info'
 import CopyBtn from '../copy-btn'
@@ -26,16 +26,8 @@ import { MessageFast } from '@/app/components/base/icons/src/vender/solid/commun
 import type { Emoji } from '@/app/components/tools/types'
 import type { VisionFile } from '@/types/app'
 import ImageGallery from '@/app/components/base/image-gallery'
+import Log from '@/app/components/app/chat/log'
 
-const Divider: FC<{ name: string }> = ({ name }) => {
-  const { t } = useTranslation()
-  return <div className='flex items-center my-2'>
-    <span className='text-xs text-gray-500 inline-flex items-center mr-2'>
-      <EditIconSolid className='mr-1' />{t('appLog.detail.annotationTip', { user: name })}
-    </span>
-    <div className='h-[1px] bg-gray-200 flex-1'></div>
-  </div>
-}
 const IconWrapper: FC<{ children: React.ReactNode | string }> = ({ children }) => {
   return <div className={'rounded-lg h-6 w-6 flex items-center justify-center hover:bg-gray-100'}>
     {children}
@@ -64,6 +56,7 @@ export type IAnswerProps = {
   onAnnotationAdded?: (annotationId: string, authorName: string, question: string, answer: string, index: number) => void
   onAnnotationRemoved?: (index: number) => void
   allToolIcons?: Record<string, string | Emoji>
+  isShowPromptLog?: boolean
 }
 // The component needs to maintain its own state to control whether to display input component
 const Answer: FC<IAnswerProps> = ({
@@ -87,12 +80,11 @@ const Answer: FC<IAnswerProps> = ({
   onAnnotationAdded,
   onAnnotationRemoved,
   allToolIcons,
+  isShowPromptLog,
 }) => {
   const { id, content, more, feedback, adminFeedback, annotation, agent_thoughts } = item
   const isAgentMode = !!agent_thoughts && agent_thoughts.length > 0
   const hasAnnotation = !!annotation?.id
-  const [showEdit, setShowEdit] = useState(false)
-  const [loading, setLoading] = useState(false)
   // const [annotation, setAnnotation] = useState<Annotation | undefined | null>(initAnnotation)
   // const [inputValue, setInputValue] = useState<string>(initAnnotation?.content ?? '')
   const [localAdminFeedback, setLocalAdminFeedback] = useState<Feedbacktype | undefined | null>(adminFeedback)
@@ -241,9 +233,11 @@ const Answer: FC<IAnswerProps> = ({
     </div>
   )
 
+  const ref = useRef(null)
+
   return (
     // data-id for debug the item message is right
-    <div key={id} data-id={id}>
+    <div key={id} data-id={id} ref={ref}>
       <div className='flex items-start'>
         {
           answerIcon || (
@@ -257,7 +251,7 @@ const Answer: FC<IAnswerProps> = ({
           )
         }
         <div className={cn(s.answerWrapWrap, 'chat-answer-container group')}>
-          <div className={`${s.answerWrap} ${showEdit ? 'w-full' : ''}`}>
+          <div className={s.answerWrap}>
             <div className={`${s.answer} relative text-sm text-gray-900`}>
               <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
                 {(isResponding && (isAgentMode ? (!content && (agent_thoughts || []).filter(item => !!item.thought || !!item.tool).length === 0) : !content))
@@ -326,11 +320,21 @@ const Answer: FC<IAnswerProps> = ({
                     className={cn(s.copyBtn, 'mr-1')}
                   />
                 )}
-                {!item.isOpeningStatement && isShowTextToSpeech && (
-                  <AudioBtn
-                    value={content}
-                    className={cn(s.playBtn, 'mr-1')}
-                  />
+                {((isShowPromptLog && !isResponding) || (!item.isOpeningStatement && isShowTextToSpeech)) && (
+                  <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'>
+                    {isShowPromptLog && !isResponding && (
+                      <Log runID={item.workflow_run_id} log={item.log!} containerRef={ref} />
+                    )}
+                    {!item.isOpeningStatement && isShowTextToSpeech && (
+                      <>
+                        <div className='mx-1 w-[1px] h-[14px] bg-gray-200'/>
+                        <AudioBtn
+                          value={content}
+                          className={cn(s.playBtn)}
+                        />
+                      </>
+                    )}
+                  </div>
                 )}
                 {(!item.isOpeningStatement && supportAnnotation) && (
                   <AnnotationCtrlBtn
diff --git a/web/app/components/app/chat/index.tsx b/web/app/components/app/chat/index.tsx
index 0abdaab6d59de4..3ff0a5fdc3bfee 100644
--- a/web/app/components/app/chat/index.tsx
+++ b/web/app/components/app/chat/index.tsx
@@ -300,6 +300,7 @@ const Chat: FC<IChatProps> = ({
               onAnnotationAdded={handleAnnotationAdded}
               onAnnotationRemoved={handleAnnotationRemoved}
               allToolIcons={allToolIcons}
+              isShowPromptLog={isShowPromptLog}
             />
           }
           return (
@@ -316,140 +317,132 @@ const Chat: FC<IChatProps> = ({
           )
         })}
       </div>
-      {
-        !isHideSendInput && (
-          <div className={cn(!feedbackDisabled && '!left-3.5 !right-3.5', 'absolute z-10 bottom-0 left-0 right-0')}>
-            {/* Thinking is sync and can not be stopped */}
-            {(isResponding && canStopResponding && ((!!chatList[chatList.length - 1]?.content) || (chatList[chatList.length - 1]?.agent_thoughts && chatList[chatList.length - 1].agent_thoughts!.length > 0))) && (
-              <div className='flex justify-center mb-4'>
-                <Button className='flex items-center space-x-1 bg-white' onClick={() => abortResponding?.()}>
-                  {stopIcon}
-                  <span className='text-xs text-gray-500 font-normal'>{t('appDebug.operation.stopResponding')}</span>
-                </Button>
+      {!isHideSendInput && (
+        <div className={cn(!feedbackDisabled && '!left-3.5 !right-3.5', 'absolute z-10 bottom-0 left-0 right-0')}>
+          {/* Thinking is sync and can not be stopped */}
+          {(isResponding && canStopResponding && ((!!chatList[chatList.length - 1]?.content) || (chatList[chatList.length - 1]?.agent_thoughts && chatList[chatList.length - 1].agent_thoughts!.length > 0))) && (
+            <div className='flex justify-center mb-4'>
+              <Button className='flex items-center space-x-1 bg-white' onClick={() => abortResponding?.()}>
+                {stopIcon}
+                <span className='text-xs text-gray-500 font-normal'>{t('appDebug.operation.stopResponding')}</span>
+              </Button>
+            </div>
+          )}
+          {isShowSuggestion && (
+            <div className='pt-2'>
+              <div className='flex items-center justify-center mb-2.5'>
+                <div className='grow h-[1px]'
+                  style={{
+                    background: 'linear-gradient(270deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%)',
+                  }}></div>
+                <div className='shrink-0 flex items-center px-3 space-x-1'>
+                  {TryToAskIcon}
+                  <span className='text-xs text-gray-500 font-medium'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</span>
+                </div>
+                <div className='grow h-[1px]'
+                  style={{
+                    background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
+                  }}></div>
               </div>
-            )}
-            {
-              isShowSuggestion && (
-                <div className='pt-2'>
-                  <div className='flex items-center justify-center mb-2.5'>
-                    <div className='grow h-[1px]'
-                      style={{
-                        background: 'linear-gradient(270deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%)',
-                      }}></div>
-                    <div className='shrink-0 flex items-center px-3 space-x-1'>
-                      {TryToAskIcon}
-                      <span className='text-xs text-gray-500 font-medium'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</span>
-                    </div>
-                    <div className='grow h-[1px]'
-                      style={{
-                        background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
-                      }}></div>
-                  </div>
-                  {/* has scrollbar would hide part of first item */}
-                  <div ref={suggestionListRef} className={cn(!hasScrollbar && 'justify-center', 'flex overflow-x-auto pb-2')}>
-                    {suggestionList?.map((item, index) => (
-                      <div key={item} className='shrink-0 flex justify-center mr-2'>
-                        <Button
-                          key={index}
-                          onClick={() => onQueryChange(item)}
-                        >
-                          <span className='text-primary-600 text-xs font-medium'>{item}</span>
-                        </Button>
-                      </div>
-                    ))}
+              {/* has scrollbar would hide part of first item */}
+              <div ref={suggestionListRef} className={cn(!hasScrollbar && 'justify-center', 'flex overflow-x-auto pb-2')}>
+                {suggestionList?.map((item, index) => (
+                  <div key={item} className='shrink-0 flex justify-center mr-2'>
+                    <Button
+                      key={index}
+                      onClick={() => onQueryChange(item)}
+                    >
+                      <span className='text-primary-600 text-xs font-medium'>{item}</span>
+                    </Button>
                   </div>
-                </div>)
-            }
-            <div className={cn('p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto', isDragActive && 'border-primary-600')}>
+                ))}
+              </div>
+            </div>
+          )}
+          <div className={cn('p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto', isDragActive && 'border-primary-600')}>
+            {visionConfig?.enabled && (
+              <>
+                <div className='absolute bottom-2 left-2 flex items-center'>
+                  <ChatImageUploader
+                    settings={visionConfig}
+                    onUpload={onUpload}
+                    disabled={files.length >= visionConfig.number_limits}
+                  />
+                  <div className='mx-1 w-[1px] h-4 bg-black/5' />
+                </div>
+                <div className='pl-[52px]'>
+                  <ImageList
+                    list={files}
+                    onRemove={onRemove}
+                    onReUpload={onReUpload}
+                    onImageLinkLoadSuccess={onImageLinkLoadSuccess}
+                    onImageLinkLoadError={onImageLinkLoadError}
+                  />
+                </div>
+              </>
+            )}
+            <Textarea
+              className={`
+                block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
+                ${visionConfig?.enabled && 'pl-12'}
+              `}
+              value={query}
+              onChange={handleContentChange}
+              onKeyUp={handleKeyUp}
+              onKeyDown={handleKeyDown}
+              onPaste={onPaste}
+              onDragEnter={onDragEnter}
+              onDragLeave={onDragLeave}
+              onDragOver={onDragOver}
+              onDrop={onDrop}
+              autoSize
+            />
+            <div className="absolute bottom-2 right-2 flex items-center h-8">
+              <div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
               {
-                visionConfig?.enabled && (
-                  <>
-                    <div className='absolute bottom-2 left-2 flex items-center'>
-                      <ChatImageUploader
-                        settings={visionConfig}
-                        onUpload={onUpload}
-                        disabled={files.length >= visionConfig.number_limits}
-                      />
-                      <div className='mx-1 w-[1px] h-4 bg-black/5' />
+                query
+                  ? (
+                    <div className='flex justify-center items-center w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg' onClick={() => onQueryChange('')}>
+                      <XCircle className='w-4 h-4 text-[#98A2B3]' />
                     </div>
-                    <div className='pl-[52px]'>
-                      <ImageList
-                        list={files}
-                        onRemove={onRemove}
-                        onReUpload={onReUpload}
-                        onImageLinkLoadSuccess={onImageLinkLoadSuccess}
-                        onImageLinkLoadError={onImageLinkLoadError}
-                      />
-                    </div>
-                  </>
-                )
-              }
-              <Textarea
-                className={`
-                  block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
-                  ${visionConfig?.enabled && 'pl-12'}
-                `}
-                value={query}
-                onChange={handleContentChange}
-                onKeyUp={handleKeyUp}
-                onKeyDown={handleKeyDown}
-                onPaste={onPaste}
-                onDragEnter={onDragEnter}
-                onDragLeave={onDragLeave}
-                onDragOver={onDragOver}
-                onDrop={onDrop}
-                autoSize
-              />
-              <div className="absolute bottom-2 right-2 flex items-center h-8">
-                <div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
-                {
-                  query
+                  )
+                  : isShowSpeechToText
                     ? (
-                      <div className='flex justify-center items-center w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg' onClick={() => onQueryChange('')}>
-                        <XCircle className='w-4 h-4 text-[#98A2B3]' />
+                      <div
+                        className='group flex justify-center items-center w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
+                        onClick={handleVoiceInputShow}
+                      >
+                        <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
+                        <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />
                       </div>
                     )
-                    : isShowSpeechToText
-                      ? (
-                        <div
-                          className='group flex justify-center items-center w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
-                          onClick={handleVoiceInputShow}
-                        >
-                          <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
-                          <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />
-                        </div>
-                      )
-                      : null
-                }
-                <div className='mx-2 w-[1px] h-4 bg-black opacity-5' />
-                {isMobile
-                  ? sendBtn
-                  : (
-                    <TooltipPlus
-                      popupContent={
-                        <div>
-                          <div>{t('common.operation.send')} Enter</div>
-                          <div>{t('common.operation.lineBreak')} Shift Enter</div>
-                        </div>
-                      }
-                    >
-                      {sendBtn}
-                    </TooltipPlus>
-                  )}
-              </div>
-              {
-                voiceInputShow && (
-                  <VoiceInput
-                    onCancel={() => setVoiceInputShow(false)}
-                    onConverted={text => onQueryChange(text)}
-                  />
-                )
+                    : null
               }
+              <div className='mx-2 w-[1px] h-4 bg-black opacity-5' />
+              {isMobile
+                ? sendBtn
+                : (
+                  <TooltipPlus
+                    popupContent={
+                      <div>
+                        <div>{t('common.operation.send')} Enter</div>
+                        <div>{t('common.operation.lineBreak')} Shift Enter</div>
+                      </div>
+                    }
+                  >
+                    {sendBtn}
+                  </TooltipPlus>
+                )}
             </div>
+            {voiceInputShow && (
+              <VoiceInput
+                onCancel={() => setVoiceInputShow(false)}
+                onConverted={text => onQueryChange(text)}
+              />
+            )}
           </div>
-        )
-      }
-
+        </div>
+      )}
     </div>
   )
 }
diff --git a/web/app/components/app/chat/log/index.tsx b/web/app/components/app/chat/log/index.tsx
index 838eeaf35ae3d1..0ef14162d9e79c 100644
--- a/web/app/components/app/chat/log/index.tsx
+++ b/web/app/components/app/chat/log/index.tsx
@@ -1,10 +1,8 @@
 import type { Dispatch, FC, ReactNode, RefObject, SetStateAction } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { uniqueId } from 'lodash-es'
 import { File02 } from '@/app/components/base/icons/src/vender/line/files'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
-import Tooltip from '@/app/components/base/tooltip'
 
 export type LogData = {
   role: string
@@ -14,12 +12,14 @@ export type LogData = {
 type LogProps = {
   containerRef: RefObject<HTMLElement>
   log: LogData[]
+  runID?: string
   children?: (v: Dispatch<SetStateAction<boolean>>) => ReactNode
 }
 const Log: FC<LogProps> = ({
   containerRef,
   children,
   log,
+  runID,
 }) => {
   const { t } = useTranslation()
   const [showModal, setShowModal] = useState(false)
@@ -40,23 +40,16 @@ const Log: FC<LogProps> = ({
         children
           ? children(setShowModal)
           : (
-            <Tooltip selector={`prompt-log-modal-trigger-${uniqueId()}`} content={t('common.operation.log') || ''}>
-              <div className={`
-                hidden absolute -left-[14px] -top-[14px] group-hover:block w-7 h-7
-                p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-md cursor-pointer
-              `}>
-                <div
-                  className='flex items-center justify-center rounded-md w-full h-full hover:bg-gray-100'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setShowModal(true)
-                  }
-                  }
-                >
-                  <File02 className='w-4 h-4 text-gray-500' />
-                </div>
-              </div>
-            </Tooltip>
+            <div
+              className='p-1 flex items-center justify-center rounded-[6px] hover:bg-gray-50 cursor-pointer'
+              onClick={(e) => {
+                e.stopPropagation()
+                setShowModal(true)
+              }}
+            >
+              <File02 className='mr-1 w-4 h-4 text-gray-500' />
+              <div className='text-xs leading-4 text-gray-500'>{runID ? t('appLog.viewLog') : t('appLog.promptLog')}</div>
+            </div>
           )
       }
       {
diff --git a/web/app/components/app/chat/question/index.tsx b/web/app/components/app/chat/question/index.tsx
index 7006682f7c52dc..248c7496f0080c 100644
--- a/web/app/components/app/chat/question/index.tsx
+++ b/web/app/components/app/chat/question/index.tsx
@@ -4,7 +4,6 @@ import React, { useRef } from 'react'
 import { useContext } from 'use-context-selector'
 import s from '../style.module.css'
 import type { IChatItem } from '../type'
-import Log from '../log'
 import MoreInfo from '../more-info'
 import AppContext from '@/context/app-context'
 import { Markdown } from '@/app/components/base/markdown'
@@ -16,7 +15,7 @@ type IQuestionProps = Pick<IChatItem, 'id' | 'content' | 'more' | 'useCurrentUse
   isResponding?: boolean
 }
 
-const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar, isShowPromptLog, item, isResponding }) => {
+const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar, isShowPromptLog, item }) => {
   const { userProfile } = useContext(AppContext)
   const userName = userProfile?.name
   const ref = useRef(null)
@@ -27,11 +26,6 @@ const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar,
       <div className={s.questionWrapWrap}>
 
         <div className={`${s.question} group relative text-sm text-gray-900`}>
-          {
-            isShowPromptLog && !isResponding && (
-              <Log log={item.log!} containerRef={ref} />
-            )
-          }
           <div
             className={'mr-2 py-3 px-4 bg-blue-500 rounded-tl-2xl rounded-b-2xl'}
           >
diff --git a/web/app/components/app/chat/type.ts b/web/app/components/app/chat/type.ts
index 3f2e60d3766085..f49f6d1881ca5d 100644
--- a/web/app/components/app/chat/type.ts
+++ b/web/app/components/app/chat/type.ts
@@ -79,9 +79,10 @@ export type IChatItem = {
   useCurrentUserAvatar?: boolean
   isOpeningStatement?: boolean
   suggestedQuestions?: string[]
-  log?: { role: string; text: string }[]
+  log?: { role: string; text: string; files?: VisionFile[] }[]
   agent_thoughts?: ThoughtItem[]
   message_files?: VisionFile[]
+  workflow_run_id?: string
 }
 
 export type MessageEnd = {
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 06e95ff5624b8e..49ad61fe32f20f 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -80,7 +80,6 @@ const getFormattedChatList = (messages: ChatMessage[]) => {
       id: `question-${item.id}`,
       content: item.inputs.query || item.inputs.default_input || item.query, // text generation: item.inputs.query; chat: item.query
       isAnswer: false,
-      log: item.message as any,
       message_files: item.message_files?.filter((file: any) => file.belongs_to === 'user') || [],
     })
     newChatList.push({
@@ -92,6 +91,15 @@ const getFormattedChatList = (messages: ChatMessage[]) => {
       feedbackDisabled: false,
       isAnswer: true,
       message_files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
+      log: [
+        ...item.message,
+        {
+          role: 'assistant',
+          text: item.answer,
+          files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
+        },
+      ],
+      workflow_run_id: item.workflow_run_id,
       more: {
         time: dayjs.unix(item.created_at).format('hh:mm A'),
         tokens: item.answer_tokens + item.message_tokens,
@@ -175,7 +183,7 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
   }
 
   useEffect(() => {
-    if (appDetail?.id && detail.id && appDetail?.mode === 'completion')
+    if (appDetail?.id && detail.id && appDetail?.mode !== 'completion')
       fetchData()
   }, [appDetail?.id, detail.id, appDetail?.mode])
 
diff --git a/web/app/components/base/audio-btn/index.tsx b/web/app/components/base/audio-btn/index.tsx
index 1492b859fae1fa..676b85414b4a99 100644
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/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>
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index 84b397462c4525..581b031bab5438 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/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}
                 />
               )
             }
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 8a791d82dae0a4..aeed0c9e4fdcd1 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/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 || ''}
diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index 618a1bf7e02efd..37b6de654c5f73 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/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,
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 2e46f1e8697620..d0b060c99043c3 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -174,6 +174,7 @@ const Chat: FC<ChatProps> = ({
                       answerIcon={answerIcon}
                       responding={isLast && isResponding}
                       allToolIcons={allToolIcons}
+                      showPromptLog={showPromptLog}
                     />
                   )
                 }
@@ -181,9 +182,7 @@ const Chat: FC<ChatProps> = ({
                   <Question
                     key={item.id}
                     item={item}
-                    showPromptLog={showPromptLog}
                     questionIcon={questionIcon}
-                    isResponding={isResponding}
                   />
                 )
               })
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index a123540a890bad..f8eaad1ce6328e 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/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 && (
diff --git a/web/app/components/workflow/block-selector/index.tsx b/web/app/components/workflow/block-selector/index.tsx
index 6b948a86fa9dfc..b742f5f1c30b96 100644
--- a/web/app/components/workflow/block-selector/index.tsx
+++ b/web/app/components/workflow/block-selector/index.tsx
@@ -99,7 +99,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
         }
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className={`w-[256px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}>
+        <div className={`rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}>
           <div className='px-2 pt-2'>
             <div
               className='flex items-center px-2 rounded-lg bg-gray-100'
diff --git a/web/app/components/workflow/constants.ts b/web/app/components/workflow/constants.ts
index 40b855b81a5ca3..581ce2c8b77fe3 100644
--- a/web/app/components/workflow/constants.ts
+++ b/web/app/components/workflow/constants.ts
@@ -230,8 +230,12 @@ export const NODE_WIDTH = 220
 export const X_OFFSET = 64
 export const NODE_WIDTH_X_OFFSET = NODE_WIDTH + X_OFFSET
 export const Y_OFFSET = 39
-export const TREE_DEEPTH = 20
+export const TREE_DEEPTH = 30
 export const START_INITIAL_POSITION = { x: 80, y: 282 }
+export const AUTO_LAYOUT_OFFSET = {
+  x: -42,
+  y: 243,
+}
 
 export const RETRIEVAL_OUTPUT_STRUCT = `{
   "content": "",
diff --git a/web/app/components/workflow/hooks/use-nodes-data.ts b/web/app/components/workflow/hooks/use-nodes-data.ts
index 9eaa40ce3c1742..417cb3399c25f0 100644
--- a/web/app/components/workflow/hooks/use-nodes-data.ts
+++ b/web/app/components/workflow/hooks/use-nodes-data.ts
@@ -16,7 +16,7 @@ export const useNodesInitialData = () => {
   return useMemo(() => produce(NODES_INITIAL_DATA, (draft) => {
     Object.keys(draft).forEach((key) => {
       draft[key as BlockEnum].title = t(`workflow.blocks.${key}`)
-
+      draft[key as BlockEnum]._isReady = true
       if (nodesDefaultConfigs[key as BlockEnum]) {
         draft[key as BlockEnum] = {
           ...draft[key as BlockEnum],
diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts
index d1ddaff3cdf02d..07233fc3696bcc 100644
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -8,6 +8,7 @@ import produce from 'immer'
 import {
   getIncomers,
   getOutgoers,
+  useReactFlow,
   useStoreApi,
 } from 'reactflow'
 import type { Connection } from 'reactflow'
@@ -20,6 +21,7 @@ import type { Node } from '../types'
 import { BlockEnum } from '../types'
 import { useWorkflowStore } from '../store'
 import {
+  AUTO_LAYOUT_OFFSET,
   START_INITIAL_POSITION,
   SUPPORT_OUTPUT_VARS_NODE,
 } from '../constants'
@@ -27,6 +29,7 @@ import {
   useNodesExtraData,
   useNodesInitialData,
 } from './use-nodes-data'
+import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
   fetchNodesDefaultConfigs,
@@ -43,7 +46,9 @@ export const useIsChatMode = () => {
 
 export const useWorkflow = () => {
   const store = useStoreApi()
+  const reactflow = useReactFlow()
   const nodesExtraData = useNodesExtraData()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
 
   const handleLayout = useCallback(async () => {
     const {
@@ -51,6 +56,7 @@ export const useWorkflow = () => {
       edges,
       setNodes,
     } = store.getState()
+    const { setViewport } = reactflow
     const nodes = getNodes()
     const layout = getLayoutByDagre(nodes, edges)
 
@@ -58,13 +64,19 @@ export const useWorkflow = () => {
       draft.forEach((node) => {
         const nodeWithPosition = layout.node(node.id)
         node.position = {
-          x: nodeWithPosition.x,
-          y: nodeWithPosition.y,
+          x: nodeWithPosition.x + AUTO_LAYOUT_OFFSET.x,
+          y: nodeWithPosition.y + AUTO_LAYOUT_OFFSET.y,
         }
       })
     })
     setNodes(newNodes)
-  }, [store])
+    setViewport({
+      x: 0,
+      y: 0,
+      zoom: 0.8,
+    })
+    setTimeout(() => handleSyncWorkflowDraft())
+  }, [store, reactflow, handleSyncWorkflowDraft])
 
   const getTreeLeafNodes = useCallback((nodeId: string) => {
     const {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
index 46bd2a0980f0ef..d8acf4fa874327 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
@@ -26,6 +26,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
   const {
     inputs,
     handleQueryVarChange,
+    filterVar,
     handleRetrievalModeChange,
     handleMultipleRetrievalConfigChange,
     selectedDatasets,
@@ -52,6 +53,8 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
             isShowNodeName
             value={inputs.query_variable_selector}
             onChange={handleQueryVarChange}
+            filterVar={filterVar}
+            width={370}
           />
         </Field>
 
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
index 7d6e622a4b7168..e37e1ce9cae736 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useState } from 'react'
 import produce from 'immer'
-import type { ValueSelector } from '../../types'
+import type { ValueSelector, Var } from '../../types'
+import { BlockEnum, VarType } from '../../types'
+import { useIsChatMode, useWorkflow } from '../../hooks'
 import type { KnowledgeRetrievalNodeType, MultipleRetrievalConfig } from './types'
 import type { RETRIEVE_TYPE } from '@/types/app'
 import type { DataSet } from '@/models/datasets'
@@ -9,10 +11,14 @@ import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-cr
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
 
 const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
+  const isChatMode = useIsChatMode()
+  const { getBeforeNodesInSameBranch } = useWorkflow()
+  const startNode = getBeforeNodesInSameBranch(id).find(node => node.data.type === BlockEnum.Start)
+  const startNodeId = startNode?.id
   const { inputs, setInputs } = useNodeCrud<KnowledgeRetrievalNodeType>(id, payload)
-  const handleQueryVarChange = useCallback((newVar: ValueSelector) => {
+  const handleQueryVarChange = useCallback((newVar: ValueSelector | string) => {
     const newInputs = produce(inputs, (draft) => {
-      draft.query_variable_selector = newVar
+      draft.query_variable_selector = newVar as ValueSelector
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
@@ -45,8 +51,19 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
       })
       setInputs(newInputs)
     })()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useEffect(() => {
+    if (inputs._isReady) {
+      if (isChatMode && inputs.query_variable_selector.length === 0 && startNodeId) {
+        handleQueryVarChange(
+          [startNodeId, 'sys.query'],
+        )
+      }
+    }
+  }, [inputs._isReady])
+
   const handleOnDatasetsChange = useCallback((newDatasets: DataSet[]) => {
     const newInputs = produce(inputs, (draft) => {
       draft.dataset_ids = newDatasets.map(d => d.id)
@@ -55,6 +72,10 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
     setSelectedDatasets(newDatasets)
   }, [inputs, setInputs])
 
+  const filterVar = useCallback((varPayload: Var) => {
+    return varPayload.type === VarType.string
+  }, [])
+
   // single run
   const {
     isShowSingleRun,
@@ -84,6 +105,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
   return {
     inputs,
     handleQueryVarChange,
+    filterVar,
     handleRetrievalModeChange,
     handleMultipleRetrievalConfigChange,
     selectedDatasets,
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index 91d72a1486d7f4..bb8efb3bdc73bb 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -33,6 +33,7 @@ export type CommonNodeType<T = {}> = {
   _isSingleRun?: boolean
   _runningStatus?: NodeRunningStatus
   _singleRunningStatus?: NodeRunningStatus
+  _isReady?: boolean
   selected?: boolean
   title: string
   desc: string
diff --git a/web/app/components/workflow/utils.ts b/web/app/components/workflow/utils.ts
index 0c733a74f0777b..8281164f9cfcab 100644
--- a/web/app/components/workflow/utils.ts
+++ b/web/app/components/workflow/utils.ts
@@ -146,10 +146,12 @@ export const getNodesPositionMap = (nodes: Node[], edges: Edge[]) => {
   return positionMap
 }
 
+const dagreGraph = new dagre.graphlib.Graph()
+dagreGraph.setDefaultEdgeLabel(() => ({}))
+
 export const getLayoutByDagre = (originNodes: Node[], originEdges: Edge[]) => {
   const nodes = cloneDeep(originNodes)
   const edges = cloneDeep(originEdges)
-  const dagreGraph = new dagre.graphlib.Graph()
   dagreGraph.setGraph({
     rankdir: 'LR',
     align: 'UL',
diff --git a/web/i18n/en-US/app-log.ts b/web/i18n/en-US/app-log.ts
index 59151b2c1f81f7..5c86703db969d2 100644
--- a/web/i18n/en-US/app-log.ts
+++ b/web/i18n/en-US/app-log.ts
@@ -76,6 +76,8 @@ const translation = {
     title: 'Conversation Log',
     workflowTitle: 'Log Detail',
   },
+  promptLog: 'Prompt Log',
+  viewLog: 'View Log',
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/app-log.ts b/web/i18n/zh-Hans/app-log.ts
index 7233be9ae3063a..111297fe6adcd0 100644
--- a/web/i18n/zh-Hans/app-log.ts
+++ b/web/i18n/zh-Hans/app-log.ts
@@ -72,6 +72,8 @@ const translation = {
   },
   workflowTitle: '日志',
   workflowSubtitle: '日志记录了应用的执行情况',
+  promptLog: 'Prompt 日志',
+  viewLog: '查看日志',
 }
 
 export default translation
diff --git a/web/models/log.ts b/web/models/log.ts
index e485a9d3b28129..3b8509b1b727e7 100644
--- a/web/models/log.ts
+++ b/web/models/log.ts
@@ -77,8 +77,7 @@ export type MessageContent = {
   conversation_id: string
   query: string
   inputs: Record<string, any>
-  // message: Record<string, any>
-  message: string
+  message: { role: string; text: string; files?: VisionFile[] }[]
   message_tokens: number
   answer_tokens: number
   answer: string
@@ -101,6 +100,8 @@ export type MessageContent = {
     from_end_user_id?: string
   }>
   message_files: VisionFile[]
+  agent_thoughts: any[] // TODO
+  workflow_run_id: string
 }
 
 export type CompletionConversationGeneralDetail = {