merge

langgenius · Nov 15, 2024 · 7fe16a9 · 7fe16a9
2 parents 6da877c + a6be3fd
commit 7fe16a9
Show file tree

Hide file tree

Showing 47 changed files with 937 additions and 101 deletions.
diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -6,35 +6,53 @@ import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 // import ProviderCard from '@/app/components/plugins/provider-card'
 import Badge from '@/app/components/base/badge'
 import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
+import { useBoolean } from 'ahooks'
 
 const PluginList = () => {
   const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
+  const [isShow, {
+    setFalse: hide,
+  }] = useBoolean(true)
 
   return (
     <div className='pb-3 bg-white'>
-      <InstallBundle onClose={() => { }} fromDSLPayload={[
-        {
-          type: 'marketplace',
-          value: {
-            plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
-          },
-        },
-        {
-          type: 'github',
-          value: {
-            repo: 'YIXIAO0/test',
-            version: '1.11.5',
-            package: 'test.difypkg',
-            github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
-          },
-        },
-        {
-          type: 'marketplace',
-          value: {
-            plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
-          },
-        },
-      ]} />
+      {isShow && (
+        <InstallBundle
+          onClose={hide}
+          fromDSLPayload={[
+            // {
+            //   type: 'marketplace',
+            //   value: {
+            //     plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
+            //   },
+            // },
+            {
+              type: 'github',
+              value: {
+                repo: 'YIXIAO0/test',
+                version: '1.11.5',
+                package: 'test.difypkg',
+                github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
+              },
+            },
+            {
+              type: 'github',
+              value: {
+                package: 'dify-test.difypkg',
+                repo: 'WTW0313/dify-test',
+                version: '0.0.5-beta.2',
+                github_plugin_unique_identifier: 'wtw0313/dify-test:0.0.1@1633daa043b47155d4228e2db7734245fd6d3e20ba812e5c02ce69fc1e3038f4',
+              },
+            },
+            {
+              type: 'marketplace',
+              value: {
+                plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
+              },
+            },
+          ]} />
+      )
+      }
       <div className='mx-3 '>
         {/* <h2 className='my-3'>Dify Plugin list</h2> */}
         {/* <div className='grid grid-cols-2 gap-3'>

diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -25,7 +25,7 @@ import { useSelectedDatasetsMode } from '@/app/components/workflow/nodes/knowled
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
 
-interface Props {
+type Props = {
   datasetConfigs: DatasetConfigs
   onChange: (configs: DatasetConfigs, isRetrievalModeChange?: boolean) => void
   isInWorkflow?: boolean

diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -139,11 +139,11 @@ const ParamsConfig = ({
             />
 
             <div className='mt-6 flex justify-end'>
-              <Button className='mr-2 flex-shrink-0' onClick={() => {
+              <Button className='mr-2 shrink-0' onClick={() => {
                 setTempDataSetConfigs(datasetConfigs)
                 setRerankSettingModalOpen(false)
               }}>{t('common.operation.cancel')}</Button>
-              <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
+              <Button variant='primary' className='shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
             </div>
           </Modal>
         )

diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
@@ -72,6 +72,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import { fetchFileUploadConfig } from '@/service/common'
 import { correctProvider } from '@/utils'
+import PluginDependency from '@/app/components/workflow/plugin-dependency'
 
 type PublishConfig = {
   modelConfig: ModelConfig
@@ -1038,6 +1039,7 @@ const Configuration: FC = () => {
               onAutoAddPromptVariable={handleAddPromptVariable}
             />
           )}
+          <PluginDependency />
         </>
       </FeaturesProvider>
     </ConfigContext.Provider>

diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -80,24 +80,16 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
       let app
 
       if (currentTab === CreateFromDSLModalTab.FROM_FILE) {
-        const leakedData = await mutateAsync({ dslString: fileContent })
-        if (leakedData?.leaked.length) {
-          isCreatingRef.current = false
-          return
-        }
         app = await importApp({
           data: fileContent || '',
         })
+        await mutateAsync({ dslString: fileContent })
       }
       if (currentTab === CreateFromDSLModalTab.FROM_URL) {
-        const leakedData = await mutateAsync({ url: dslUrlValue })
-        if (leakedData?.leaked.length) {
-          isCreatingRef.current = false
-          return
-        }
         app = await importAppFromUrl({
           url: dslUrlValue || '',
         })
+        await mutateAsync({ url: dslUrlValue })
       }
       if (onSuccess)
         onSuccess()

diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
@@ -243,7 +243,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         <div className='w-full mt-8'>
           <p className='system-xs-medium text-gray-500'>{t(`${prefixSettings}.workflow.title`)}</p>
           <div className='flex justify-between items-center'>
-            <div className='font-medium system-sm-semibold flex-grow text-gray-900'>{t(`${prefixSettings}.workflow.subTitle`)}</div>
+            <div className='font-medium system-sm-semibold grow text-gray-900'>{t(`${prefixSettings}.workflow.subTitle`)}</div>
             <Switch
               disabled={!(appInfo.mode === 'workflow' || appInfo.mode === 'advanced-chat')}
               defaultValue={inputInfo.show_workflow_steps}
@@ -269,7 +269,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         {systemFeatures.enable_web_sso_switch_component && <div className='w-full mt-8'>
           <p className='system-xs-medium text-gray-500'>{t(`${prefixSettings}.sso.label`)}</p>
           <div className='flex justify-between items-center'>
-            <div className='font-medium system-sm-semibold flex-grow text-gray-900'>{t(`${prefixSettings}.sso.title`)}</div>
+            <div className='font-medium system-sm-semibold grow text-gray-900'>{t(`${prefixSettings}.sso.title`)}</div>
             <Tooltip
               disabled={systemFeatures.sso_enforced_for_web}
               popupContent={
@@ -284,8 +284,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         </div>}
         {!isShowMore && <div className='w-full cursor-pointer mt-8' onClick={() => setIsShowMore(true)}>
           <div className='flex justify-between'>
-            <div className={`font-medium ${s.settingTitle} flex-grow text-gray-900`}>{t(`${prefixSettings}.more.entry`)}</div>
-            <div className='flex-shrink-0 w-4 h-4 text-gray-500'>
+            <div className={`font-medium ${s.settingTitle} grow text-gray-900`}>{t(`${prefixSettings}.more.entry`)}</div>
+            <div className='shrink-0 w-4 h-4 text-gray-500'>
               <ChevronRightIcon />
             </div>
           </div>

diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -59,7 +59,7 @@ const FileFromLinkOrLocal = ({
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} asChild>
         {trigger(open)}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-10'>
+      <PortalToFollowElemContent className='z-[1001]'>
         <div className='p-3 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
           {
             showFromLink && (

diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
@@ -48,7 +48,7 @@ const MembersPage = () => {
   return (
     <>
       <div className='flex flex-col'>
-        <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
+        <div className='flex items-center mb-4 p-3 gap-1 bg-gray-50 rounded-2xl'>
           <LogoEmbeddedChatHeader className='!w-10 !h-10' />
           <div className='grow mx-2'>
             <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -18,7 +18,8 @@ import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
 import Radio from '@/app/components/base/radio'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
-import ToolSelector from '@/app/components/tools/tool-selector'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
+import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 
 type FormProps = {
   className?: string
@@ -347,7 +348,32 @@ const Form: FC<FormProps> = ({
     }
 
     if (formSchema.type === FormTypeEnum.appSelector) {
-      // TODO
+      const {
+        variable,
+        label,
+        required,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+            {label[language] || label.en_US}
+            {
+              required && (
+                <span className='ml-1 text-red-500'>*</span>
+              )
+            }
+            {tooltipContent}
+          </div>
+          <AppSelector
+            disabled={readonly}
+            value={value[variable]}
+            onSelect={item => handleFormChange(variable, item as any)}
+          />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
     }
   }
 

diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
@@ -76,7 +76,7 @@ const Header = () => {
                   <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
                   <div className='system-xs-medium'>
                     <span className='p-1'>
-                      {t('billing.upgradeBtn.encourage')}
+                      {t('billing.upgradeBtn.encourageShort')}
                     </span>
                   </div>
                 </PremiumBadge>
@@ -98,7 +98,7 @@ const Header = () => {
                 <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
                 <div className='system-xs-medium'>
                   <span className='p-1'>
-                    {t('billing.upgradeBtn.encourage')}
+                    {t('billing.upgradeBtn.encourageShort')}
                   </span>
                 </div>
               </PremiumBadge>

diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -3,8 +3,9 @@ import type { FC } from 'react'
 import Modal from '@/app/components/base/modal'
 import React, { useCallback, useState } from 'react'
 import { InstallStep } from '../../types'
-import type { Dependency } from '../../types'
+import type { Dependency, Plugin } from '../../types'
 import Install from './steps/install'
+import Installed from './steps/installed'
 import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'plugin.installModal'
@@ -29,7 +30,8 @@ const InstallBundle: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
-
+  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
+  const [installStatus, setInstallStatus] = useState<{ success: boolean }[]>([])
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -41,6 +43,12 @@ const InstallBundle: FC<Props> = ({
     return t(`${i18nPrefix}.installPlugin`)
   }, [step, t])
 
+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: { success: boolean }[]) => {
+    setInstallStatus(installStatus)
+    setInstalledPlugins(plugins)
+    setStep(InstallStep.installed)
+  }, [])
+
   return (
     <Modal
       isShow={true}
@@ -57,6 +65,14 @@ const InstallBundle: FC<Props> = ({
         <Install
           fromDSLPayload={fromDSLPayload}
           onCancel={onClose}
+          onInstalled={handleInstalled}
+        />
+      )}
+      {step === InstallStep.installed && (
+        <Installed
+          list={installedPlugins}
+          installStatus={installStatus}
+          onCancel={onClose}
         />
       )}
     </Modal>

diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
@@ -29,7 +29,10 @@ const Item: FC<Props> = ({
   const [payload, setPayload] = React.useState<Plugin | null>(null)
   useEffect(() => {
     if (data) {
-      const payload = pluginManifestToCardPluginProps(data.manifest)
+      const payload = {
+        ...pluginManifestToCardPluginProps(data.manifest),
+        plugin_id: data.unique_identifier,
+      }
       onFetchedPayload(payload)
       setPayload(payload)
     }

diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
@@ -5,6 +5,7 @@ import type { Plugin } from '../../../types'
 import Card from '../../../card'
 import Checkbox from '@/app/components/base/checkbox'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import useGetIcon from '../../base/use-get-icon'
 
 type Props = {
   checked: boolean
@@ -17,6 +18,7 @@ const LoadedItem: FC<Props> = ({
   onCheckedChange,
   payload,
 }) => {
+  const { getIconUrl } = useGetIcon()
   return (
     <div className='flex items-center space-x-2'>
       <Checkbox
@@ -26,7 +28,10 @@ const LoadedItem: FC<Props> = ({
       />
       <Card
         className='grow'
-        payload={payload}
+        payload={{
+          ...payload,
+          icon: getIconUrl(payload.icon),
+        }}
         titleLeft={payload.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge> : null}
       />
     </div>

diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx
@@ -26,9 +26,12 @@ const InstallByDSLList: FC<Props> = ({
   const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
   const handlePlugInFetched = useCallback((index: number) => {
     return (p: Plugin) => {
-      setPlugins(plugins.map((item, i) => i === index ? p : item))
+      const nextPlugins = produce(getPlugins(), (draft) => {
+        draft[index] = p
+      })
+      setPlugins(nextPlugins)
     }
-  }, [plugins])
+  }, [getPlugins, setPlugins])
 
   const marketPlaceInDSLIndex = useMemo(() => {
     const res: number[] = []