merge feat/workflow

langgenius · Mar 17, 2024 · 94b0654 · 94b0654
2 parents 53a89dd + 722ff77
commit 94b0654
Show file tree

Hide file tree

Showing 23 changed files with 380 additions and 236 deletions.
diff --git 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, { useEffect, useRef, useState } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { UserCircleIcon } from '@heroicons/react/24/solid'
 import cn from 'classnames'
@@ -27,7 +27,6 @@ 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'}>
@@ -234,23 +233,9 @@ const Answer: FC<IAnswerProps> = ({
     </div>
   )
 
-  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
-    <div key={id} data-id={id} ref={ref}>
+    <div key={id} data-id={id}>
       <div className='flex items-start'>
         {
           answerIcon || (
@@ -336,7 +321,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} setShowModal={setShowPromptLogModal} />
+                      <Log logItem={item} />
                     )}
                     {!item.isOpeningStatement && isShowTextToSpeech && (
                       <>
@@ -386,13 +371,6 @@ 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
@@ -1,43 +1,35 @@
-import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
+import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { File02 } from '@/app/components/base/icons/src/vender/line/files'
-
-export type LogData = {
-  role: string
-  text: string
-}
+import type { IChatItem } from '@/app/components/app/chat/type'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 type LogProps = {
-  runID?: string
-  setShowModal: Dispatch<SetStateAction<boolean>>
-  children?: (v: Dispatch<SetStateAction<boolean>>) => ReactNode
+  logItem: IChatItem
 }
 const Log: FC<LogProps> = ({
-  children,
-  runID,
-  setShowModal,
+  logItem,
 }) => {
   const { t } = useTranslation()
+  const { setCurrentLogItem, setShowPromptLogModal, setShowMessageLogModal } = useAppStore()
+  const { workflow_run_id: runID } = logItem
 
   return (
-    <>
-      {
-        children
-          ? children(setShowModal)
-          : (
-            <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>
-          )
-      }
-    </>
+    <div
+      className='p-1 flex items-center justify-center rounded-[6px] hover:bg-gray-50 cursor-pointer'
+      onClick={(e) => {
+        e.stopPropagation()
+        e.nativeEvent.stopImmediatePropagation()
+        setCurrentLogItem(logItem)
+        if (runID)
+          setShowMessageLogModal(true)
+        else
+          setShowPromptLogModal(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>
   )
 }