Merge branch 'feat/workflow' into deploy/dev

langgenius · Mar 15, 2024 · b18fca4 · b18fca4
2 parents 308535c + a577db9
commit b18fca4
Show file tree

Hide file tree

Showing 33 changed files with 370 additions and 271 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, { 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
@@ -1,38 +1,23 @@
-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
   text: string
 }
 
 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/app/create-app-dialog/appForm.tsx b/web/app/components/app/create-app-dialog/appForm.tsx
@@ -165,7 +165,7 @@ const AppForm = ({
                 <div className='w-[298px] h-[0.5px] my-2 bg-[rgba(0,0,0,0.05)]'></div>
                 <div className='flex items-center text-indigo-600'>
                   <InfoCircle className='w-3 h-3 mr-1'/>
-                  <div>{t('app.newApp.completionWarning')}</div>
+                  <div>{t('app.newApp.workflowWarning')}</div>
                 </div>
               </div>
             }

diff --git 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
@@ -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/icons/assets/vender/line/mediaAndDevices/stop-circle.svg b/web/app/components/base/icons/assets/vender/line/mediaAndDevices/stop-circle.svg
diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.json b/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.json
@@ -0,0 +1,59 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "17",
+			"height": "16",
+			"viewBox": "0 0 17 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Icon"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"id": "Icon_2"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M8.49967 14.6663C12.1816 14.6663 15.1663 11.6816 15.1663 7.99967C15.1663 4.31778 12.1816 1.33301 8.49967 1.33301C4.81778 1.33301 1.83301 4.31778 1.83301 7.99967C1.83301 11.6816 4.81778 14.6663 8.49967 14.6663Z",
+									"stroke": "currentColor",
+									"stroke-width": "1.5",
+									"stroke-linecap": "round",
+									"stroke-linejoin": "round"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M10.4997 5.99967H6.49967V9.99967H10.4997V5.99967Z",
+									"stroke": "currentColor",
+									"stroke-width": "1.5",
+									"stroke-linecap": "round",
+									"stroke-linejoin": "round"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "StopCircle"
+}
diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.tsx b/web/app/components/base/icons/src/vender/line/mediaAndDevices/StopCircle.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './StopCircle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'StopCircle'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/index.ts b/web/app/components/base/icons/src/vender/line/mediaAndDevices/index.ts
@@ -2,4 +2,5 @@ export { default as Microphone01 } from './Microphone01'
 export { default as Play } from './Play'
 export { default as SlidersH } from './SlidersH'
 export { default as Speaker } from './Speaker'
+export { default as StopCircle } from './StopCircle'
 export { default as Stop } from './Stop'
diff --git a/web/app/components/base/icons/src/vender/workflow/index.ts b/web/app/components/base/icons/src/vender/workflow/index.ts
@@ -1,5 +1,5 @@
-export { default as Code } from './Code'
 export { default as Answer } from './Answer'
+export { default as Code } from './Code'
 export { default as End } from './End'
 export { default as Home } from './Home'
 export { default as Http } from './Http'

diff --git 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(() => {