FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/components/app/configuration/debug/debug-with-multiple-model/publish-with-multiple-model.tsx

@@ -1,103 +0,0 @@
-import type { FC } from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { ModelAndParameter } from '../types'
-import Button from '@/app/components/base/button'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
-import { useProviderContext } from '@/context/provider-context'
-import type { ModelItem } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-
-type PublishWithMultipleModelProps = {
-  multipleModelConfigs: ModelAndParameter[]
-  onSelect: (v: ModelAndParameter) => void
-}
-const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
-  multipleModelConfigs,
-  onSelect,
-}) => {
-  const { t } = useTranslation()
-  const language = useLanguage()
-  const { textGenerationModelList } = useProviderContext()
-  const [open, setOpen] = useState(false)
-
-  const validModelConfigs: (ModelAndParameter & { modelItem: ModelItem })[] = []
-
-  multipleModelConfigs.forEach((item) => {
-    const provider = textGenerationModelList.find(model => model.provider === item.provider)
-
-    if (provider) {
-      const model = provider.models.find(model => model.model === item.model)
-
-      if (model) {
-        validModelConfigs.push({
-          id: item.id,
-          model: item.model,
-          provider: item.provider,
-          modelItem: model,
-          parameters: item.parameters,
-        })
-      }
-    }
-  })
-
-  const handleToggle = () => {
-    if (validModelConfigs.length)
-      setOpen(v => !v)
-  }
-
-  const handleSelect = (item: ModelAndParameter) => {
-    onSelect(item)
-    setOpen(false)
-  }
-
-  return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement='bottom-end'
-    >
-      <PortalToFollowElemTrigger onClick={handleToggle}>
-        <Button
-          type='primary'
-          disabled={!validModelConfigs.length}
-          className='pl-3 pr-2 h-8 text-[13px]'
-        >
-          {t('appDebug.operation.applyConfig')}
-          <ChevronDown className='ml-0.5 w-3 h-3' />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
-        <div className='p-1 w-[168px] rounded-lg border-[0.5px] border-gray-200 shadow-lg bg-white'>
-          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
-            {t('appDebug.publishAs')}
-          </div>
-          {
-            validModelConfigs.map((item, index) => (
-              <div
-                key={item.id}
-                className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-100 cursor-pointer text-sm text-gray-500'
-                onClick={() => handleSelect(item)}
-              >
-                #{index + 1}
-                <div
-                  className='ml-1 text-gray-700 truncate'
-                  title={item.modelItem.label[language]}
-                >
-                  {item.modelItem.label[language]}
-                </div>
-              </div>
-            ))
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-
-export default PublishWithMultipleModel

web/app/components/app/configuration/debug/index.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { setAutoFreeze } from 'immer'
 import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
@@ -36,6 +36,8 @@ import type { ModelParameterModalProps } from '@/app/components/header/account-s
 import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useProviderContext } from '@/context/provider-context'
+import PromptLogModal from '@/app/components/base/prompt-log-modal'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 type IDebug = {
   hasSetAPIKEY: boolean
@@ -135,7 +137,7 @@ const Debug: FC<IDebug> = ({
   const [completionFiles, setCompletionFiles] = useState<VisionFile[]>([])
 
   const checkCanSend = useCallback(() => {
-    if (isAdvancedMode && mode === AppType.chat) {
+    if (isAdvancedMode && mode !== AppType.completion) {
       if (modelModeType === ModelModeType.completion) {
         if (!hasSetBlockStatus.history) {
           notify({ type: 'error', message: t('appDebug.otherError.historyNoBeEmpty'), duration: 3000 })
@@ -365,6 +367,19 @@ const Debug: FC<IDebug> = ({
     handleVisionConfigInMultipleModel()
   }, [multipleModelConfigs, mode])
 
+  const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal } = useAppStore()
+  const [width, setWidth] = useState(0)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const adjustModalWidth = () => {
+    if (ref.current)
+      setWidth(document.body.clientWidth - (ref.current?.clientWidth + 16) - 8)
+  }
+
+  useEffect(() => {
+    adjustModalWidth()
+  }, [])
+
   return (
     <>
       <div className="shrink-0 pt-4 px-6">
@@ -391,7 +406,7 @@ const Debug: FC<IDebug> = ({
                 )
                 : null
             }
-            {mode === 'chat' && (
+            {mode !== AppType.completion && (
               <Button className='flex items-center gap-1 !h-8 !bg-white' onClick={clearConversation}>
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M2.66663 2.66629V5.99963H3.05463M3.05463 5.99963C3.49719 4.90505 4.29041 3.98823 5.30998 3.39287C6.32954 2.7975 7.51783 2.55724 8.68861 2.70972C9.85938 2.8622 10.9465 3.39882 11.7795 4.23548C12.6126 5.07213 13.1445 6.16154 13.292 7.33296M3.05463 5.99963H5.99996M13.3333 13.333V9.99963H12.946M12.946 9.99963C12.5028 11.0936 11.7093 12.0097 10.6898 12.6045C9.67038 13.1993 8.48245 13.4393 7.31203 13.2869C6.1416 13.1344 5.05476 12.5982 4.22165 11.7621C3.38854 10.926 2.8562 9.83726 2.70796 8.66629M12.946 9.99963H9.99996" stroke="#1C64F2" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -426,9 +441,9 @@ const Debug: FC<IDebug> = ({
       }
       {
         !debugWithMultipleModel && (
-          <div className="flex flex-col grow">
+          <div className="flex flex-col grow" ref={ref}>
             {/* Chat */}
-            {mode === AppType.chat && (
+            {mode !== AppType.completion && (
               <div className='grow h-0 overflow-hidden'>
                 <DebugWithSingleModel
                   ref={debugWithSingleModelRef}
@@ -458,6 +473,16 @@ const Debug: FC<IDebug> = ({
                 )}
               </div>
             )}
+            {showPromptLogModal && (
+              <PromptLogModal
+                width={width}
+                currentLogItem={currentLogItem}
+                onCancel={() => {
+                  setCurrentLogItem()
+                  setShowPromptLogModal(false)
+                }}
+              />
+            )}
             {isShowCannotQueryDataset && (
               <CannotQueryDataset
                 onConfirm={() => setShowCannotQueryDataset(false)}

web/app/components/app/configuration/debug/types.ts

@@ -15,5 +15,4 @@ export type DebugWithSingleOrMultipleModelConfigs = {
 }
 export const APP_CHAT_WITH_MULTIPLE_MODEL = 'APP_CHAT_WITH_MULTIPLE_MODEL'
 export const APP_CHAT_WITH_MULTIPLE_MODEL_RESTART = 'APP_CHAT_WITH_MULTIPLE_MODEL_RESTART'
-export const APP_SIDEBAR_SHOULD_COLLAPSE = 'APP_SIDEBAR_SHOULD_COLLAPSE'
 export const ORCHESTRATE_CHANGED = 'ORCHESTRATE_CHANGED'