From 9908a8bf1fde94221ec2cf11d26746dbde7cf2f3 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 15 Mar 2024 19:54:50 +0800
Subject: [PATCH] prompt log

---
 web/app/components/app/chat/answer/index.tsx  | 27 ++++++++++++++---
 web/app/components/app/chat/log/index.tsx     | 30 ++-----------------
 .../base/chat/chat/answer/index.tsx           | 27 +++++++++++++++--
 .../base/chat/chat/answer/operation.tsx       |  8 ++---
 .../base/prompt-log-modal/index.tsx           |  7 +++--
 5 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/web/app/components/app/chat/answer/index.tsx b/web/app/components/app/chat/answer/index.tsx
index af37d60b05..ae3fd18429 100644
--- a/web/app/components/app/chat/answer/index.tsx
+++ b/web/app/components/app/chat/answer/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC, ReactNode } from 'react'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { UserCircleIcon } from '@heroicons/react/24/solid'
 import cn from 'classnames'
@@ -27,6 +27,7 @@ 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'
+import PromptLogModal from '@/app/components/base/prompt-log-modal'
 
 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'}>
@@ -233,7 +234,19 @@ const Answer: FC<IAnswerProps> = ({
     </div>
   )
 
-  const ref = useRef(null)
+  const [showPromptLogModal, setShowPromptLogModal] = useState(false)
+  const [width, setWidth] = useState(0)
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  const adjustModalWidth = () => {
+    if (ref.current)
+      setWidth(document.body.clientWidth - (ref.current?.clientWidth + 56 + 16))
+  }
+
+  useEffect(() => {
+    adjustModalWidth()
+  }, [])
 
   return (
     // data-id for debug the item message is right
@@ -323,7 +336,7 @@ const Answer: FC<IAnswerProps> = ({
                 {((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} />
+                      <Log runID={item.workflow_run_id} setShowModal={setShowPromptLogModal} />
                     )}
                     {!item.isOpeningStatement && isShowTextToSpeech && (
                       <>
@@ -373,7 +386,13 @@ const Answer: FC<IAnswerProps> = ({
                 {!feedbackDisabled && renderFeedbackRating(feedback?.rating, !isHideFeedbackEdit, displayScene !== 'console')}
               </div>
             </div>
-
+            {showPromptLogModal && (
+              <PromptLogModal
+                width={width}
+                log={item.log || []}
+                onCancel={() => setShowPromptLogModal(false)}
+              />
+            )}
             {more && <MoreInfo className='invisible group-hover:visible' more={more} isQuestion={false} />}
           </div>
         </div>
diff --git a/web/app/components/app/chat/log/index.tsx b/web/app/components/app/chat/log/index.tsx
index 0ef14162d9..cb7e6520de 100644
--- a/web/app/components/app/chat/log/index.tsx
+++ b/web/app/components/app/chat/log/index.tsx
@@ -1,8 +1,6 @@
-import type { Dispatch, FC, ReactNode, RefObject, SetStateAction } from 'react'
-import { useEffect, useState } from 'react'
+import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
 import { useTranslation } from 'react-i18next'
 import { File02 } from '@/app/components/base/icons/src/vender/line/files'
-import PromptLogModal from '@/app/components/base/prompt-log-modal'
 
 export type LogData = {
   role: string
@@ -10,29 +8,16 @@ export type LogData = {
 }
 
 type LogProps = {
-  containerRef: RefObject<HTMLElement>
-  log: LogData[]
   runID?: string
+  setShowModal: Dispatch<SetStateAction<boolean>>
   children?: (v: Dispatch<SetStateAction<boolean>>) => ReactNode
 }
 const Log: FC<LogProps> = ({
-  containerRef,
   children,
-  log,
   runID,
+  setShowModal,
 }) => {
   const { t } = useTranslation()
-  const [showModal, setShowModal] = useState(false)
-  const [width, setWidth] = useState(0)
-
-  const adjustModalWidth = () => {
-    if (containerRef.current)
-      setWidth(document.body.clientWidth - (containerRef.current?.clientWidth + 56 + 16))
-  }
-
-  useEffect(() => {
-    adjustModalWidth()
-  }, [])
 
   return (
     <>
@@ -52,15 +37,6 @@ const Log: FC<LogProps> = ({
             </div>
           )
       }
-      {
-        showModal && (
-          <PromptLogModal
-            width={width}
-            log={log}
-            onCancel={() => setShowModal(false)}
-          />
-        )
-      }
     </>
   )
 }
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index 581b031bab..d50a978654 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, useRef } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type {
   ChatConfig,
@@ -18,6 +18,7 @@ import LoadingAnim from '@/app/components/app/chat/loading-anim'
 import Citation from '@/app/components/app/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
 import type { Emoji } from '@/app/components/tools/types'
+import PromptLogModal from '@/app/components/base/prompt-log-modal'
 
 type AnswerProps = {
   item: ChatItem
@@ -40,7 +41,6 @@ const Answer: FC<AnswerProps> = ({
   showPromptLog,
 }) => {
   const { t } = useTranslation()
-  const ref = useRef(null)
   const {
     content,
     citation,
@@ -50,6 +50,20 @@ const Answer: FC<AnswerProps> = ({
   } = item
   const hasAgentThoughts = !!agent_thoughts?.length
 
+  const [showPromptLogModal, setShowPromptLogModal] = useState(false)
+  const [width, setWidth] = useState(0)
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  const adjustModalWidth = () => {
+    if (ref.current)
+      setWidth(document.body.clientWidth - (ref.current?.clientWidth + 56 + 16))
+  }
+
+  useEffect(() => {
+    adjustModalWidth()
+  }, [])
+
   return (
     <div className='flex mb-2 last:mb-0' ref={ref}>
       <div className='shrink-0 relative w-10 h-10'>
@@ -79,7 +93,7 @@ const Answer: FC<AnswerProps> = ({
                   question={question}
                   index={index}
                   showPromptLog={showPromptLog}
-                  containerRef={ref}
+                  setShowPromptLogModal={setShowPromptLogModal}
                 />
               )
             }
@@ -122,6 +136,13 @@ const Answer: FC<AnswerProps> = ({
         </div>
         <More more={more} />
       </div>
+      {showPromptLogModal && (
+        <PromptLogModal
+          width={width}
+          log={item.log || []}
+          onCancel={() => setShowPromptLogModal(false)}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index aeed0c9e4f..e824b051e8 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, RefObject } from 'react'
+import type { Dispatch, FC, SetStateAction } from 'react'
 import {
   memo,
   useMemo,
@@ -24,14 +24,14 @@ type OperationProps = {
   question: string
   index: number
   showPromptLog?: boolean
-  containerRef: RefObject<HTMLElement>
+  setShowPromptLogModal: Dispatch<SetStateAction<boolean>>
 }
 const Operation: FC<OperationProps> = ({
   item,
   question,
   index,
   showPromptLog,
-  containerRef,
+  setShowPromptLogModal,
 }) => {
   const { t } = useTranslation()
   const {
@@ -79,7 +79,7 @@ const Operation: FC<OperationProps> = ({
 
       <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} />
+          <Log runID={item.workflow_run_id} setShowModal={setShowPromptLogModal} />
         )}
         {(!isOpeningStatement && config?.text_to_speech?.enabled) && (
           <>
diff --git a/web/app/components/base/prompt-log-modal/index.tsx b/web/app/components/base/prompt-log-modal/index.tsx
index 2948e9f067..f0e5b27dde 100644
--- a/web/app/components/base/prompt-log-modal/index.tsx
+++ b/web/app/components/base/prompt-log-modal/index.tsx
@@ -4,9 +4,10 @@ import { useClickAway } from 'ahooks'
 import Card from './card'
 import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+import type { VisionFile } from '@/types/app'
 
 type PromptLogModalProps = {
-  log: { role: string; text: string }[]
+  log: { role: string; text: string; files?: VisionFile[] }[]
   width: number
   onCancel: () => void
 }
@@ -19,8 +20,10 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
   const [mounted, setMounted] = useState(false)
 
   useClickAway(() => {
-    if (mounted)
+    if (mounted) {
+      console.log(111)
       onCancel()
+    }
   }, ref)
 
   useEffect(() => {