Initial commit

dify_1.2.0/web/app/components/tools/add-tool-modal/category.tsx

@@ -0,0 +1,69 @@
+'use client'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { useMount } from 'ahooks'
+import cn from '@/utils/classnames'
+import { Apps02 } from '@/app/components/base/icons/src/vender/line/others'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import { useStore as useLabelStore } from '@/app/components/tools/labels/store'
+import { fetchLabelList } from '@/service/tools'
+
+type Props = {
+  value: string
+  onSelect: (type: string) => void
+}
+
+const Icon = ({ svgString, active }: { svgString: string; active: boolean }) => {
+  const svgRef = useRef<SVGSVGElement | null>(null)
+  const SVGParser = (svg: string) => {
+    if (!svg)
+      return null
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(svg, 'image/svg+xml')
+    return doc.documentElement
+  }
+  useMount(() => {
+    const svgElement = SVGParser(svgString)
+    if (svgRef.current && svgElement)
+      svgRef.current.appendChild(svgElement)
+  })
+  return <svg className={cn('h-4 w-4 text-gray-700', active && '!text-primary-600')} ref={svgRef} />
+}
+
+const Category = ({
+  value,
+  onSelect,
+}: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const labelList = useLabelStore(s => s.labelList)
+  const setLabelList = useLabelStore(s => s.setLabelList)
+
+  useMount(() => {
+    fetchLabelList().then((res) => {
+      setLabelList(res)
+    })
+  })
+
+  return (
+    <div className='mb-3'>
+      <div className='px-3 py-0.5 text-xs font-medium leading-[18px] text-gray-500'>{t('tools.addToolModal.category').toLocaleUpperCase()}</div>
+      <div className={cn('mb-0.5 flex cursor-pointer items-center rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === '' && '!bg-white font-medium !text-primary-600')} onClick={() => onSelect('')}>
+        <Apps02 className='mr-2 h-4 w-4 shrink-0' />
+        {t('tools.type.all')}
+      </div>
+      {labelList.map(label => (
+        <div key={label.name} title={label.label[language]} className={cn('mb-0.5 flex cursor-pointer items-center overflow-hidden truncate rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === label.name && '!bg-white font-medium !text-primary-600')} onClick={() => onSelect(label.name)}>
+          <div className='mr-2 h-4 w-4 shrink-0'>
+            <Icon active={value === label.name} svgString={label.icon} />
+          </div>
+          {label.label[language]}
+        </div>
+      ))}
+    </div>
+  )
+}
+export default Category

dify_1.2.0/web/app/components/tools/add-tool-modal/empty.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { useSearchParams } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+const Empty = () => {
+  const { t } = useTranslation()
+  const searchParams = useSearchParams()
+
+  return (
+    <div className='flex flex-col items-center'>
+      <div className="h-[149px] w-[163px] shrink-0 bg-[url('~@/app/components/tools/add-tool-modal/empty.png')] bg-cover bg-no-repeat"></div>
+      <div className='mb-1 text-[13px] font-medium leading-[18px] text-text-primary'>
+        {t(`tools.addToolModal.${searchParams.get('category') === 'workflow' ? 'emptyTitle' : 'emptyTitleCustom'}`)}
+      </div>
+      <div className='text-[13px] leading-[18px] text-text-tertiary'>
+        {t(`tools.addToolModal.${searchParams.get('category') === 'workflow' ? 'emptyTip' : 'emptyTipCustom'}`)}
+      </div>
+    </div>
+  )
+}
+
+export default Empty

dify_1.2.0/web/app/components/tools/add-tool-modal/index.tsx

@@ -0,0 +1,250 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import produce from 'immer'
+import {
+  RiAddLine,
+  RiCloseLine,
+} from '@remixicon/react'
+import { useMount } from 'ahooks'
+import type { Collection, CustomCollectionBackend, Tool } from '../types'
+import Type from './type'
+import Category from './category'
+import Tools from './tools'
+import cn from '@/utils/classnames'
+import I18n from '@/context/i18n'
+import Drawer from '@/app/components/base/drawer'
+import Button from '@/app/components/base/button'
+import Loading from '@/app/components/base/loading'
+import Input from '@/app/components/base/input'
+import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
+import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
+import {
+  createCustomCollection,
+  fetchAllBuiltInTools,
+  fetchAllCustomTools,
+  fetchAllWorkflowTools,
+  removeBuiltInToolCredential,
+  updateBuiltInToolCredential,
+} from '@/service/tools'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import Toast from '@/app/components/base/toast'
+import ConfigContext from '@/context/debug-configuration'
+import type { ModelConfig } from '@/models/debug'
+
+type Props = {
+  onHide: () => void
+}
+// Add and Edit
+const AddToolModal: FC<Props> = ({
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const [currentType, setCurrentType] = useState('builtin')
+  const [currentCategory, setCurrentCategory] = useState('')
+  const [keywords, setKeywords] = useState<string>('')
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+  }
+  const isMatchingKeywords = (text: string, keywords: string) => {
+    return text.toLowerCase().includes(keywords.toLowerCase())
+  }
+  const [toolList, setToolList] = useState<ToolWithProvider[]>([])
+  const [listLoading, setListLoading] = useState(true)
+  const getAllTools = async () => {
+    setListLoading(true)
+    const buildInTools = await fetchAllBuiltInTools()
+    const customTools = await fetchAllCustomTools()
+    const workflowTools = await fetchAllWorkflowTools()
+    const mergedToolList = [
+      ...buildInTools,
+      ...customTools,
+      ...workflowTools.filter((toolWithProvider) => {
+        return !toolWithProvider.tools.some((tool) => {
+          return !!tool.parameters.find(item => item.name === '__image')
+        })
+      }),
+    ]
+    setToolList(mergedToolList)
+    setListLoading(false)
+  }
+  const filteredList = useMemo(() => {
+    return toolList.filter((toolWithProvider) => {
+      if (currentType === 'all')
+        return true
+      else
+        return toolWithProvider.type === currentType
+    }).filter((toolWithProvider) => {
+      if (!currentCategory)
+        return true
+      else
+        return toolWithProvider.labels.includes(currentCategory)
+    }).filter((toolWithProvider) => {
+      return (
+        isMatchingKeywords(toolWithProvider.name, keywords)
+        || toolWithProvider.tools.some((tool) => {
+          return Object.values(tool.label).some((label) => {
+            return isMatchingKeywords(label, keywords)
+          })
+        })
+      )
+    })
+  }, [currentType, currentCategory, toolList, keywords])
+
+  const {
+    modelConfig,
+    setModelConfig,
+  } = useContext(ConfigContext)
+
+  const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
+  const doCreateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await createCustomCollection(data)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+    getAllTools()
+  }
+  const [showSettingAuth, setShowSettingAuth] = useState(false)
+  const [collection, setCollection] = useState<Collection>()
+  const toolSelectHandle = (collection: Collection, tool: Tool) => {
+    const parameters: Record<string, string> = {}
+    if (tool.parameters) {
+      tool.parameters.forEach((item) => {
+        parameters[item.name] = ''
+      })
+    }
+
+    const nexModelConfig = produce(modelConfig, (draft: ModelConfig) => {
+      draft.agentConfig.tools.push({
+        provider_id: collection.id || collection.name,
+        provider_type: collection.type,
+        provider_name: collection.name,
+        tool_name: tool.name,
+        tool_label: tool.label[locale] || tool.label[locale.replaceAll('-', '_')],
+        tool_parameters: parameters,
+        enabled: true,
+      })
+    })
+    setModelConfig(nexModelConfig)
+  }
+  const authSelectHandle = (provider: Collection) => {
+    setCollection(provider)
+    setShowSettingAuth(true)
+  }
+  const updateBuiltinAuth = async (value: Record<string, any>) => {
+    if (!collection)
+      return
+    await updateBuiltInToolCredential(collection.name, value)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    await getAllTools()
+    setShowSettingAuth(false)
+  }
+  const removeBuiltinAuth = async () => {
+    if (!collection)
+      return
+    await removeBuiltInToolCredential(collection.name)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    await getAllTools()
+    setShowSettingAuth(false)
+  }
+
+  useMount(() => {
+    getAllTools()
+  })
+
+  return (
+    <>
+      <Drawer
+        isOpen
+        mask
+        clickOutsideNotOpen
+        onClose={onHide}
+        footer={null}
+        panelClassname={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', 'mt-2 !w-[640px]', '!max-w-[640px]')}
+      >
+        <div
+          className='flex w-full rounded-xl border-[0.5px] border-gray-200 bg-white shadow-xl'
+          style={{
+            height: 'calc(100vh - 16px)',
+          }}
+        >
+          <div className='relative w-[200px] shrink-0 overflow-y-auto rounded-l-xl border-r-[0.5px] border-black/2 bg-gray-100 pb-3'>
+            <div className='sticky left-0 right-0 top-0'>
+              <div className='text-md sticky left-0 right-0 top-0 px-5 py-3 font-semibold text-gray-900'>{t('tools.addTool')}</div>
+              <div className='px-3 pb-4 pt-2'>
+                <Button variant='primary' className='w-[176px]' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+                  <RiAddLine className='mr-1 h-4 w-4' />
+                  {t('tools.createCustomTool')}
+                </Button>
+              </div>
+            </div>
+            <div className='px-2 py-1'>
+              <Type value={currentType} onSelect={setCurrentType} />
+              <Category value={currentCategory} onSelect={setCurrentCategory} />
+            </div>
+          </div>
+          <div className='relative grow overflow-y-auto rounded-r-xl bg-white'>
+            <div className='sticky left-0 right-0 top-0 z-10 flex items-center gap-1 bg-white p-2'>
+              <div className='grow'>
+                <Input
+                  showLeftIcon
+                  showClearIcon
+                  value={keywords}
+                  onChange={e => handleKeywordsChange(e.target.value)}
+                  onClear={() => handleKeywordsChange('')}
+                />
+              </div>
+              <div className='ml-2 mr-1 h-4 w-[1px] bg-gray-200'></div>
+              <div className='cursor-pointer p-2' onClick={onHide}>
+                <RiCloseLine className='h-4 w-4 text-gray-500' />
+              </div>
+            </div>
+            {listLoading && (
+              <div className='flex h-[200px] items-center justify-center bg-white'>
+                <Loading />
+              </div>
+            )}
+            {!listLoading && (
+              <Tools
+                showWorkflowEmpty={currentType === 'workflow'}
+                tools={filteredList}
+                addedTools={(modelConfig?.agentConfig?.tools as any) || []}
+                onSelect={toolSelectHandle}
+                onAuthSetup={authSelectHandle}
+              />
+            )}
+          </div>
+        </div>
+      </Drawer>
+      {isShowEditCollectionToolModal && (
+        <EditCustomToolModal
+          positionLeft
+          payload={null}
+          onHide={() => setIsShowEditCustomCollectionModal(false)}
+          onAdd={doCreateCustomToolCollection}
+        />
+      )}
+      {showSettingAuth && collection && (
+        <ConfigCredential
+          collection={collection}
+          onCancel={() => setShowSettingAuth(false)}
+          onSaved={updateBuiltinAuth}
+          onRemove={removeBuiltinAuth}
+        />
+      )}
+    </>
+
+  )
+}
+export default React.memo(AddToolModal)

dify_1.2.0/web/app/components/tools/add-tool-modal/tools.tsx

@@ -0,0 +1,149 @@
+import {
+  memo,
+  useCallback,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+import { Tag01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import Tooltip from '@/app/components/base/tooltip'
+import Button from '@/app/components/base/button'
+import { useGetLanguage } from '@/context/i18n'
+import { useStore as useLabelStore } from '@/app/components/tools/labels/store'
+import Empty from '@/app/components/tools/add-tool-modal/empty'
+import type { Tool } from '@/app/components/tools/types'
+import { CollectionType } from '@/app/components/tools/types'
+import type { AgentTool } from '@/types/app'
+import { MAX_TOOLS_NUM } from '@/config'
+
+type ToolsProps = {
+  showWorkflowEmpty: boolean
+  tools: ToolWithProvider[]
+  addedTools: AgentTool[]
+  onSelect: (provider: ToolWithProvider, tool: Tool) => void
+  onAuthSetup: (provider: ToolWithProvider) => void
+}
+const Blocks = ({
+  showWorkflowEmpty,
+  tools,
+  addedTools,
+  onSelect,
+  onAuthSetup,
+}: ToolsProps) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const labelList = useLabelStore(s => s.labelList)
+  const addable = addedTools.length < MAX_TOOLS_NUM
+
+  const renderGroup = useCallback((toolWithProvider: ToolWithProvider) => {
+    const list = toolWithProvider.tools
+    const needAuth = toolWithProvider.allow_delete && !toolWithProvider.is_team_authorization && toolWithProvider.type === CollectionType.builtIn
+
+    return (
+      <div
+        key={toolWithProvider.id}
+        className='group mb-1 last-of-type:mb-0'
+      >
+        <div className='flex h-[22px] w-full items-center justify-between pl-3 pr-1 text-xs font-medium text-gray-500'>
+          {toolWithProvider.label[language]}
+          <a className='hidden cursor-pointer items-center group-hover:flex' href={`/tools?category=${toolWithProvider.type}`} target='_blank'>{t('tools.addToolModal.manageInTools')}<ArrowUpRight className='ml-0.5 h-3 w-3' /></a>
+        </div>
+        {list.map((tool) => {
+          const labelContent = (() => {
+            if (!tool.labels)
+              return ''
+            return tool.labels.map((name) => {
+              const label = labelList.find(item => item.name === name)
+              return label?.label[language]
+            }).filter(Boolean).join(', ')
+          })()
+          const added = !!addedTools?.find(v => v.provider_id === toolWithProvider.id && v.provider_type === toolWithProvider.type && v.tool_name === tool.name)
+          return (
+            <Tooltip
+              key={tool.name}
+              position='bottom'
+              popupClassName='!p-0 !px-3 !py-2.5 !w-[210px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !bg-transparent !rounded-xl !shadow-lg translate-x-[108px]'
+              popupContent={(
+                <div>
+                  <BlockIcon
+                    size='md'
+                    className='mb-2'
+                    type={BlockEnum.Tool}
+                    toolIcon={toolWithProvider.icon}
+                  />
+                  <div className='mb-1 text-sm leading-5 text-gray-900'>{tool.label[language]}</div>
+                  <div className='text-xs leading-[18px] text-gray-700'>{tool.description[language]}</div>
+                  {tool.labels?.length > 0 && (
+                    <div className='mt-1 flex shrink-0 items-center'>
+                      <div className='relative flex w-full items-center gap-1 rounded-md py-1 text-gray-500' title={labelContent}>
+                        <Tag01 className='h-3 w-3 shrink-0 text-gray-500' />
+                        <div className='grow truncate text-start text-xs font-normal leading-[18px]'>{labelContent}</div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            >
+              <div className='group/item flex h-8 w-full cursor-pointer items-center rounded-lg pl-3 pr-1 hover:bg-gray-50'>
+                <BlockIcon
+                  className={cn('mr-2 shrink-0', needAuth && 'opacity-30')}
+                  type={BlockEnum.Tool}
+                  toolIcon={toolWithProvider.icon}
+                />
+                <div className={cn('grow truncate text-sm text-gray-900', needAuth && 'opacity-30')}>{tool.label[language]}</div>
+                {!needAuth && added && (
+                  <div className='flex items-center gap-1 rounded-[6px] border border-gray-100 bg-white px-2 py-[3px] text-xs font-medium leading-[18px] text-gray-300'>
+                    <Check className='h-3 w-3' />
+                    {t('tools.addToolModal.added').toLocaleUpperCase()}
+                  </div>
+                )}
+                {!needAuth && !added && addable && (
+                  <Button
+                    variant='secondary-accent'
+                    size='small'
+                    className={cn('hidden shrink-0 items-center group-hover/item:flex')}
+                    onClick={() => onSelect(toolWithProvider, tool)}
+                  >
+                    <RiAddLine className='h-3 w-3' />
+                    {t('tools.addToolModal.add').toLocaleUpperCase()}
+                  </Button>
+                )}
+                {needAuth && (
+                  <Button
+                    variant='secondary-accent'
+                    size='small'
+                    className={cn('hidden shrink-0 group-hover/item:flex')}
+                    onClick={() => onAuthSetup(toolWithProvider)}
+                  >{t('tools.auth.setup')}</Button>
+                )}
+              </div>
+            </Tooltip>
+          )
+        })}
+      </div>
+    )
+  }, [addable, language, t, labelList, addedTools, onAuthSetup, onSelect])
+
+  return (
+    <div className='max-w-[440px] p-1 pb-6'>
+      {!tools.length && !showWorkflowEmpty && (
+        <div className='flex h-[22px] items-center px-3 text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div>
+      )}
+      {!tools.length && showWorkflowEmpty && (
+        <div className='pt-[280px]'>
+          <Empty />
+        </div>
+      )}
+      {!!tools.length && tools.map(renderGroup)}
+    </div>
+  )
+}
+
+export default memo(Blocks)

dify_1.2.0/web/app/components/tools/add-tool-modal/type.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+import { Exchange02, FileCode } from '@/app/components/base/icons/src/vender/line/others'
+
+type Props = {
+  value: string
+  onSelect: (type: string) => void
+}
+
+const Types = ({
+  value,
+  onSelect,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='mb-3'>
+      <div className={cn('mb-0.5 flex cursor-pointer items-center rounded-lg p-1 pl-3 text-sm leading-5 hover:bg-white', value === 'builtin' && '!bg-white font-medium')} onClick={() => onSelect('builtin')}>
+        <div className="mr-2 h-4 w-4 shrink-0 bg-[url('~@/app/components/tools/add-tool-modal/D.png')] bg-cover bg-no-repeat" />
+        <span className={cn('text-gray-700', value === 'builtin' && '!text-primary-600')}>{t('tools.type.builtIn')}</span>
+      </div>
+      <div className={cn('mb-0.5 flex cursor-pointer items-center rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === 'api' && '!bg-white font-medium !text-primary-600')} onClick={() => onSelect('api')}>
+        <FileCode className='mr-2 h-4 w-4 shrink-0' />
+        {t('tools.type.custom')}
+      </div>
+      <div className={cn('mb-0.5 flex cursor-pointer items-center rounded-lg p-1 pl-3 text-sm leading-5 text-gray-700 hover:bg-white', value === 'workflow' && '!bg-white font-medium !text-primary-600')} onClick={() => onSelect('workflow')}>
+        <Exchange02 className='mr-2 h-4 w-4 shrink-0' />
+        {t('tools.type.workflow')}
+      </div>
+    </div>
+  )
+}
+export default Types

dify_1.2.0/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx

@@ -0,0 +1,152 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
+import type { Credential } from '@/app/components/tools/types'
+import Input from '@/app/components/base/input'
+import Drawer from '@/app/components/base/drawer-plus'
+import Button from '@/app/components/base/button'
+import Radio from '@/app/components/base/radio/ui'
+import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
+
+type Props = {
+  positionCenter?: boolean
+  credential: Credential
+  onChange: (credential: Credential) => void
+  onHide: () => void
+}
+
+type ItemProps = {
+  text: string
+  value: AuthType | AuthHeaderPrefix
+  isChecked: boolean
+  onClick: (value: AuthType | AuthHeaderPrefix) => void
+}
+
+const SelectItem: FC<ItemProps> = ({ text, value, isChecked, onClick }) => {
+  return (
+    <div
+      className={cn(isChecked ? 'border-[2px] border-util-colors-indigo-indigo-600 bg-components-panel-on-panel-item-bg shadow-sm' : 'border border-components-card-border', 'mb-2 flex h-9 w-[150px] cursor-pointer items-center space-x-2 rounded-xl bg-components-panel-on-panel-item-bg pl-3 hover:bg-components-panel-on-panel-item-bg-hover')}
+      onClick={() => onClick(value)}
+    >
+      <Radio isChecked={isChecked} />
+      <div className='system-sm-regular text-text-primary'>{text}</div>
+    </div>
+  )
+}
+
+const ConfigCredential: FC<Props> = ({
+  positionCenter,
+  credential,
+  onChange,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const [tempCredential, setTempCredential] = React.useState<Credential>(credential)
+
+  return (
+    <Drawer
+      isShow
+      positionCenter={positionCenter}
+      onHide={onHide}
+      title={t('tools.createTool.authMethod.title')!}
+      panelClassName='mt-2 !w-[520px] h-fit'
+      maxWidthClassName='!max-w-[520px]'
+      height={'fit-content'}
+      headerClassName='!border-b-divider-regular'
+      body={
+        <div className='px-6 pt-2'>
+          <div className='space-y-4'>
+            <div>
+              <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.type')}</div>
+              <div className='flex space-x-3'>
+                <SelectItem
+                  text={t('tools.createTool.authMethod.types.none')}
+                  value={AuthType.none}
+                  isChecked={tempCredential.auth_type === AuthType.none}
+                  onClick={value => setTempCredential({ ...tempCredential, auth_type: value as AuthType })}
+                />
+                <SelectItem
+                  text={t('tools.createTool.authMethod.types.api_key')}
+                  value={AuthType.apiKey}
+                  isChecked={tempCredential.auth_type === AuthType.apiKey}
+                  onClick={value => setTempCredential({
+                    ...tempCredential,
+                    auth_type: value as AuthType,
+                    api_key_header: tempCredential.api_key_header || 'Authorization',
+                    api_key_value: tempCredential.api_key_value || '',
+                    api_key_header_prefix: tempCredential.api_key_header_prefix || AuthHeaderPrefix.custom,
+                  })}
+                />
+              </div>
+            </div>
+            {tempCredential.auth_type === AuthType.apiKey && (
+              <>
+                <div>
+                  <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authHeaderPrefix.title')}</div>
+                  <div className='flex space-x-3'>
+                    <SelectItem
+                      text={t('tools.createTool.authHeaderPrefix.types.basic')}
+                      value={AuthHeaderPrefix.basic}
+                      isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.basic}
+                      onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+                    />
+                    <SelectItem
+                      text={t('tools.createTool.authHeaderPrefix.types.bearer')}
+                      value={AuthHeaderPrefix.bearer}
+                      isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.bearer}
+                      onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+                    />
+                    <SelectItem
+                      text={t('tools.createTool.authHeaderPrefix.types.custom')}
+                      value={AuthHeaderPrefix.custom}
+                      isChecked={tempCredential.api_key_header_prefix === AuthHeaderPrefix.custom}
+                      onClick={value => setTempCredential({ ...tempCredential, api_key_header_prefix: value as AuthHeaderPrefix })}
+                    />
+                  </div>
+                </div>
+                <div>
+                  <div className='system-sm-medium flex items-center py-2 text-text-primary'>
+                    {t('tools.createTool.authMethod.key')}
+                    <Tooltip
+                      popupContent={
+                        <div className='w-[261px] text-text-tertiary'>
+                          {t('tools.createTool.authMethod.keyTooltip')}
+                        </div>
+                      }
+                      triggerClassName='ml-0.5 w-4 h-4'
+                    />
+                  </div>
+                  <Input
+                    value={tempCredential.api_key_header}
+                    onChange={e => setTempCredential({ ...tempCredential, api_key_header: e.target.value })}
+                    placeholder={t('tools.createTool.authMethod.types.apiKeyPlaceholder')!}
+                  />
+                </div>
+                <div>
+                  <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.value')}</div>
+                  <Input
+                    value={tempCredential.api_key_value}
+                    onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
+                    placeholder={t('tools.createTool.authMethod.types.apiValuePlaceholder')!}
+                  />
+                </div>
+              </>)}
+
+          </div>
+
+          <div className='mt-4 flex shrink-0 justify-end space-x-2 py-4'>
+            <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+            <Button variant='primary' onClick={() => {
+              onChange(tempCredential)
+              onHide()
+            }}>{t('common.operation.save')}</Button>
+          </div>
+        </div>
+      }
+    />
+  )
+}
+export default React.memo(ConfigCredential)

dify_1.2.0/web/app/components/tools/edit-custom-collection-modal/examples.ts

@@ -0,0 +1,181 @@
+const examples = [
+  {
+    key: 'json',
+    content: `{
+      "openapi": "3.1.0",
+      "info": {
+        "title": "Get weather data",
+        "description": "Retrieves current weather data for a location.",
+        "version": "v1.0.0"
+      },
+      "servers": [
+        {
+          "url": "https://weather.example.com"
+        }
+      ],
+      "paths": {
+        "/location": {
+          "get": {
+            "description": "Get temperature for a specific location",
+            "operationId": "GetCurrentWeather",
+            "parameters": [
+              {
+                "name": "location",
+                "in": "query",
+                "description": "The city and state to retrieve the weather for",
+                "required": true,
+                "schema": {
+                  "type": "string"
+                }
+              }
+            ],
+            "deprecated": false
+          }
+        }
+      },
+      "components": {
+        "schemas": {}
+      }
+    }`,
+  },
+  {
+    key: 'yaml',
+    content: `# Taken from https://github.com/OAI/OpenAPI-Specification/blob/main/examples/v3.0/petstore.yaml
+
+    openapi: "3.0.0"
+    info:
+      version: 1.0.0
+      title: Swagger Petstore
+      license:
+        name: MIT
+    servers:
+      - url: https://petstore.swagger.io/v1
+    paths:
+      /pets:
+        get:
+          summary: List all pets
+          operationId: listPets
+          tags:
+            - pets
+          parameters:
+            - name: limit
+              in: query
+              description: How many items to return at one time (max 100)
+              required: false
+              schema:
+                type: integer
+                maximum: 100
+                format: int32
+          responses:
+            '200':
+              description: A paged array of pets
+              headers:
+                x-next:
+                  description: A link to the next page of responses
+                  schema:
+                    type: string
+              content:
+                application/json:    
+                  schema:
+                    $ref: "#/components/schemas/Pets"
+            default:
+              description: unexpected error
+              content:
+                application/json:
+                  schema:
+                    $ref: "#/components/schemas/Error"
+        post:
+          summary: Create a pet
+          operationId: createPets
+          tags:
+            - pets
+          responses:
+            '201':
+              description: Null response
+            default:
+              description: unexpected error
+              content:
+                application/json:
+                  schema:
+                    $ref: "#/components/schemas/Error"
+      /pets/{petId}:
+        get:
+          summary: Info for a specific pet
+          operationId: showPetById
+          tags:
+            - pets
+          parameters:
+            - name: petId
+              in: path
+              required: true
+              description: The id of the pet to retrieve
+              schema:
+                type: string
+          responses:
+            '200':
+              description: Expected response to a valid request
+              content:
+                application/json:
+                  schema:
+                    $ref: "#/components/schemas/Pet"
+            default:
+              description: unexpected error
+              content:
+                application/json:
+                  schema:
+                    $ref: "#/components/schemas/Error"
+    components:
+      schemas:
+        Pet:
+          type: object
+          required:
+            - id
+            - name
+          properties:
+            id:
+              type: integer
+              format: int64
+            name:
+              type: string
+            tag:
+              type: string
+        Pets:
+          type: array
+          maxItems: 100
+          items:
+            $ref: "#/components/schemas/Pet"
+        Error:
+          type: object
+          required:
+            - code
+            - message
+          properties:
+            code:
+              type: integer
+              format: int32
+            message:
+              type: string`,
+  },
+  {
+    key: 'blankTemplate',
+    content: `{
+      "openapi": "3.1.0",
+      "info": {
+        "title": "Untitled",
+        "description": "Your OpenAPI specification",
+        "version": "v1.0.0"
+      },
+      "servers": [
+        {
+          "url": ""
+        }
+      ],
+      "paths": {},
+      "components": {
+        "schemas": {}
+      }
+    }`,
+  },
+]
+
+export default examples

dify_1.2.0/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx

@@ -0,0 +1,123 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useClickAway } from 'ahooks'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import Toast from '../../base/toast'
+import examples from './examples'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import { importSchemaFromURL } from '@/service/tools'
+
+type Props = {
+  onChange: (value: string) => void
+}
+
+const GetSchema: FC<Props> = ({
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const [showImportFromUrl, setShowImportFromUrl] = useState(false)
+  const [importUrl, setImportUrl] = useState('')
+  const [isParsing, setIsParsing] = useState(false)
+  const handleImportFromUrl = async () => {
+    if (!importUrl.startsWith('http://') && !importUrl.startsWith('https://')) {
+      Toast.notify({
+        type: 'error',
+        message: t('tools.createTool.urlError'),
+      })
+      return
+    }
+    setIsParsing(true)
+    try {
+      const { schema } = await importSchemaFromURL(importUrl) as any
+      setImportUrl('')
+      onChange(schema)
+    }
+    finally {
+      setIsParsing(false)
+      setShowImportFromUrl(false)
+    }
+  }
+
+  const importURLRef = React.useRef(null)
+  useClickAway(() => {
+    setShowImportFromUrl(false)
+  }, importURLRef)
+
+  const [showExamples, setShowExamples] = useState(false)
+  const showExamplesRef = React.useRef(null)
+  useClickAway(() => {
+    setShowExamples(false)
+  }, showExamplesRef)
+
+  return (
+    <div className='relative flex w-[224px] justify-end space-x-1'>
+      <div ref={importURLRef}>
+        <Button
+          size='small'
+          className='space-x-1 '
+          onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
+        >
+          <RiAddLine className='h-3 w-3' />
+          <div className='system-xs-medium text-text-secondary'>{t('tools.createTool.importFromUrl')}</div>
+        </Button>
+        {showImportFromUrl && (
+          <div className=' absolute left-[-35px] top-[26px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg'>
+            <div className='relative'>
+              <Input
+                type='text'
+                className='w-[244px]'
+                placeholder={t('tools.createTool.importFromUrlPlaceHolder')!}
+                value={importUrl}
+                onChange={e => setImportUrl(e.target.value)}
+              />
+              <Button
+                className='absolute right-1 top-1'
+                size='small'
+                variant='primary'
+                disabled={!importUrl}
+                onClick={handleImportFromUrl}
+                loading={isParsing}
+              >
+                {isParsing ? '' : t('common.operation.ok')}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className='relative -mt-0.5' ref={showExamplesRef}>
+        <Button
+          size='small'
+          className='space-x-1'
+          onClick={() => { setShowExamples(!showExamples) }}
+        >
+          <div className='system-xs-medium text-text-secondary'>{t('tools.createTool.examples')}</div>
+          <RiArrowDownSLine className='h-3 w-3' />
+        </Button>
+        {showExamples && (
+          <div className='absolute right-0 top-7 rounded-lg bg-components-panel-bg p-1 shadow-sm'>
+            {examples.map(item => (
+              <div
+                key={item.key}
+                onClick={() => {
+                  onChange(item.content)
+                  setShowExamples(false)
+                }}
+                className='system-sm-regular cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5 text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover'
+              >
+                {t(`tools.createTool.exampleOptions.${item.key}`)}
+              </div>
+            ))}
+          </div>
+        )}
+
+      </div>
+    </div>
+  )
+}
+export default React.memo(GetSchema)

dify_1.2.0/web/app/components/tools/edit-custom-collection-modal/index.tsx

@@ -0,0 +1,366 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDebounce, useGetState } from 'ahooks'
+import { RiSettings2Line } from '@remixicon/react'
+import produce from 'immer'
+import { LinkExternal02 } from '../../base/icons/src/vender/line/general'
+import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types'
+import { AuthHeaderPrefix, AuthType } from '../types'
+import GetSchema from './get-schema'
+import ConfigCredentials from './config-credentials'
+import TestApi from './test-api'
+import cn from '@/utils/classnames'
+import Drawer from '@/app/components/base/drawer-plus'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import EmojiPicker from '@/app/components/base/emoji-picker'
+import AppIcon from '@/app/components/base/app-icon'
+import { parseParamsSchema } from '@/service/tools'
+import LabelSelector from '@/app/components/tools/labels/selector'
+import Toast from '@/app/components/base/toast'
+
+type Props = {
+  positionLeft?: boolean
+  payload: any
+  onHide: () => void
+  onAdd?: (payload: CustomCollectionBackend) => void
+  onRemove?: () => void
+  onEdit?: (payload: CustomCollectionBackend) => void
+}
+// Add and Edit
+const EditCustomCollectionModal: FC<Props> = ({
+  positionLeft,
+  payload,
+  onHide,
+  onAdd,
+  onEdit,
+  onRemove,
+}) => {
+  const { t } = useTranslation()
+  const isAdd = !payload
+  const isEdit = !!payload
+
+  const [editFirst, setEditFirst] = useState(!isAdd)
+  const [paramsSchemas, setParamsSchemas] = useState<CustomParamSchema[]>(payload?.tools || [])
+  const [customCollection, setCustomCollection, getCustomCollection] = useGetState<CustomCollectionBackend>(isAdd
+    ? {
+      provider: '',
+      credentials: {
+        auth_type: AuthType.none,
+        api_key_header: 'Authorization',
+        api_key_header_prefix: AuthHeaderPrefix.basic,
+      },
+      icon: {
+        content: '🕵️',
+        background: '#FEF7C3',
+      },
+      schema_type: '',
+      schema: '',
+    }
+    : payload)
+
+  const originalProvider = isEdit ? payload.provider : ''
+
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const emoji = customCollection.icon
+  const setEmoji = (emoji: Emoji) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.icon = emoji
+    })
+    setCustomCollection(newCollection)
+  }
+  const schema = customCollection.schema
+  const debouncedSchema = useDebounce(schema, { wait: 500 })
+  const setSchema = (schema: any) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.schema = schema
+    })
+    setCustomCollection(newCollection)
+  }
+
+  useEffect(() => {
+    if (!debouncedSchema)
+      return
+    if (isEdit && editFirst) {
+      setEditFirst(false)
+      return
+    }
+    (async () => {
+      try {
+        const { parameters_schema, schema_type } = await parseParamsSchema(debouncedSchema)
+        const customCollection = getCustomCollection()
+        const newCollection = produce(customCollection, (draft) => {
+          draft.schema_type = schema_type
+        })
+        setCustomCollection(newCollection)
+        setParamsSchemas(parameters_schema)
+      }
+      catch (e) {
+        const customCollection = getCustomCollection()
+        const newCollection = produce(customCollection, (draft) => {
+          draft.schema_type = ''
+        })
+        setCustomCollection(newCollection)
+        setParamsSchemas([])
+      }
+    })()
+  }, [debouncedSchema])
+
+  const [credentialsModalShow, setCredentialsModalShow] = useState(false)
+  const credential = customCollection.credentials
+  const setCredential = (credential: Credential) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.credentials = credential
+    })
+    setCustomCollection(newCollection)
+  }
+
+  const [currTool, setCurrTool] = useState<CustomParamSchema | null>(null)
+  const [isShowTestApi, setIsShowTestApi] = useState(false)
+
+  const [labels, setLabels] = useState<string[]>(payload?.labels || [])
+  const handleLabelSelect = (value: string[]) => {
+    setLabels(value)
+  }
+
+  const handleSave = () => {
+    // const postData = clone(customCollection)
+    const postData = produce(customCollection, (draft) => {
+      delete draft.tools
+
+      if (draft.credentials.auth_type === AuthType.none) {
+        delete draft.credentials.api_key_header
+        delete draft.credentials.api_key_header_prefix
+        delete draft.credentials.api_key_value
+      }
+
+      draft.labels = labels
+    })
+
+    let errorMessage = ''
+    if (!postData.provider)
+      errorMessage = t('common.errorMsg.fieldRequired', { field: t('tools.createTool.name') })
+
+    if (!postData.schema)
+      errorMessage = t('common.errorMsg.fieldRequired', { field: t('tools.createTool.schema') })
+
+    if (errorMessage) {
+      Toast.notify({
+        type: 'error',
+        message: errorMessage,
+      })
+      return
+    }
+
+    if (isAdd) {
+      onAdd?.(postData)
+      return
+    }
+
+    onEdit?.({
+      ...postData,
+      original_provider: originalProvider,
+    })
+  }
+
+  const getPath = (url: string) => {
+    if (!url)
+      return ''
+
+    try {
+      const path = decodeURI(new URL(url).pathname)
+      return path || ''
+    }
+    catch (e) {
+      return url
+    }
+  }
+
+  return (
+    <>
+      <Drawer
+        isShow
+        positionCenter={isAdd && !positionLeft}
+        onHide={onHide}
+        title={t(`tools.createTool.${isAdd ? 'title' : 'editTitle'}`)!}
+        panelClassName='mt-2 !w-[640px]'
+        maxWidthClassName='!max-w-[640px]'
+        height='calc(100vh - 16px)'
+        headerClassName='!border-b-divider-regular'
+        body={
+          <div className='flex h-full flex-col'>
+            <div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
+                <div className='flex items-center justify-between gap-3'>
+                  <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
+                  <Input
+                    className='h-10 grow' placeholder={t('tools.createTool.toolNamePlaceHolder')!}
+                    value={customCollection.provider}
+                    onChange={(e) => {
+                      const newCollection = produce(customCollection, (draft) => {
+                        draft.provider = e.target.value
+                      })
+                      setCustomCollection(newCollection)
+                    }}
+                  />
+                </div>
+              </div>
+
+              {/* Schema */}
+              <div className='select-none'>
+                <div className='flex items-center justify-between'>
+                  <div className='flex items-center'>
+                    <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
+                    <div className='mx-2 h-3 w-px bg-divider-regular'></div>
+                    <a
+                      href="https://swagger.io/specification/"
+                      target='_blank' rel='noopener noreferrer'
+                      className='flex h-[18px] items-center space-x-1  text-text-accent'
+                    >
+                      <div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
+                      <LinkExternal02 className='h-3 w-3' />
+                    </a>
+                  </div>
+                  <GetSchema onChange={setSchema} />
+
+                </div>
+                <Textarea
+                  className='h-[240px] resize-none'
+                  value={schema}
+                  onChange={e => setSchema(e.target.value)}
+                  placeholder={t('tools.createTool.schemaPlaceHolder')!}
+                />
+              </div>
+
+              {/* Available Tools  */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
+                <div className='w-full overflow-x-auto rounded-lg border border-divider-regular'>
+                  <table className='system-xs-regular w-full text-text-secondary'>
+                    <thead className='uppercase text-text-tertiary'>
+                      <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
+                        <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.name')}</th>
+                        <th className="w-[236px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.description')}</th>
+                        <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.method')}</th>
+                        <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.path')}</th>
+                        <th className="w-[54px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.action')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {paramsSchemas.map((item, index) => (
+                        <tr key={index} className='border-b border-divider-regular last:border-0'>
+                          <td className="p-2 pl-3">{item.operation_id}</td>
+                          <td className="w-[236px] p-2 pl-3">{item.summary}</td>
+                          <td className="p-2 pl-3">{item.method}</td>
+                          <td className="p-2 pl-3">{getPath(item.server_url)}</td>
+                          <td className="w-[62px] p-2 pl-3">
+                            <Button
+                              size='small'
+                              onClick={() => {
+                                setCurrTool(item)
+                                setIsShowTestApi(true)
+                              }}
+                            >
+                              {t('tools.createTool.availableTools.test')}
+                            </Button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              {/* Authorization method */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
+                <div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}>
+                  <div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
+                  <RiSettings2Line className='h-4 w-4 text-text-secondary' />
+                </div>
+              </div>
+
+              {/* Labels */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
+                <LabelSelector value={labels} onChange={handleLabelSelect} />
+              </div>
+
+              {/* Privacy Policy */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
+                <Input
+                  value={customCollection.privacy_policy}
+                  onChange={(e) => {
+                    const newCollection = produce(customCollection, (draft) => {
+                      draft.privacy_policy = e.target.value
+                    })
+                    setCustomCollection(newCollection)
+                  }}
+                  className='h-10 grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
+              </div>
+
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
+                <Input
+                  value={customCollection.custom_disclaimer}
+                  onChange={(e) => {
+                    const newCollection = produce(customCollection, (draft) => {
+                      draft.custom_disclaimer = e.target.value
+                    })
+                    setCustomCollection(newCollection)
+                  }}
+                  className='h-10 grow' placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''} />
+              </div>
+
+            </div>
+            <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')} >
+              {
+                isEdit && (
+                  <Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
+                )
+              }
+              <div className='flex space-x-2 '>
+                <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+                <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+              </div>
+            </div>
+            {showEmojiPicker && <EmojiPicker
+              onSelect={(icon, icon_background) => {
+                setEmoji({ content: icon, background: icon_background })
+                setShowEmojiPicker(false)
+              }}
+              onClose={() => {
+                setShowEmojiPicker(false)
+              }}
+            />}
+            {credentialsModalShow && (
+              <ConfigCredentials
+                positionCenter={isAdd}
+                credential={credential}
+                onChange={setCredential}
+                onHide={() => setCredentialsModalShow(false)}
+              />)
+            }
+            {isShowTestApi && (
+              <TestApi
+                positionCenter={isAdd}
+                tool={currTool as CustomParamSchema}
+                customCollection={customCollection}
+                onHide={() => setIsShowTestApi(false)}
+              />
+            )}
+          </div>
+        }
+        isShowMask={true}
+        clickOutsideNotOpen={true}
+      />
+    </>
+
+  )
+}
+export default React.memo(EditCustomCollectionModal)

dify_1.2.0/web/app/components/tools/edit-custom-collection-modal/modal.tsx

@@ -0,0 +1,360 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDebounce, useGetState } from 'ahooks'
+import produce from 'immer'
+import { LinkExternal02, Settings01 } from '../../base/icons/src/vender/line/general'
+import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types'
+import { AuthHeaderPrefix, AuthType } from '../types'
+import GetSchema from './get-schema'
+import ConfigCredentials from './config-credentials'
+import TestApi from './test-api'
+import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import EmojiPicker from '@/app/components/base/emoji-picker'
+import AppIcon from '@/app/components/base/app-icon'
+import { parseParamsSchema } from '@/service/tools'
+import LabelSelector from '@/app/components/tools/labels/selector'
+import Toast from '@/app/components/base/toast'
+import Modal from '../../base/modal'
+import Button from '@/app/components/base/button'
+
+type Props = {
+  positionLeft?: boolean
+  payload: any
+  onHide: () => void
+  onAdd?: (payload: CustomCollectionBackend) => void
+  onRemove?: () => void
+  onEdit?: (payload: CustomCollectionBackend) => void
+}
+// Add and Edit
+const EditCustomCollectionModal: FC<Props> = ({
+  payload,
+  onHide,
+  onAdd,
+  onEdit,
+  onRemove,
+}) => {
+  const { t } = useTranslation()
+  const isAdd = !payload
+  const isEdit = !!payload
+
+  const [editFirst, setEditFirst] = useState(!isAdd)
+  const [paramsSchemas, setParamsSchemas] = useState<CustomParamSchema[]>(payload?.tools || [])
+  const [customCollection, setCustomCollection, getCustomCollection] = useGetState<CustomCollectionBackend>(isAdd
+    ? {
+      provider: '',
+      credentials: {
+        auth_type: AuthType.none,
+        api_key_header: 'Authorization',
+        api_key_header_prefix: AuthHeaderPrefix.basic,
+      },
+      icon: {
+        content: '🕵️',
+        background: '#FEF7C3',
+      },
+      schema_type: '',
+      schema: '',
+    }
+    : payload)
+
+  const originalProvider = isEdit ? payload.provider : ''
+
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const emoji = customCollection.icon
+  const setEmoji = (emoji: Emoji) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.icon = emoji
+    })
+    setCustomCollection(newCollection)
+  }
+  const schema = customCollection.schema
+  const debouncedSchema = useDebounce(schema, { wait: 500 })
+  const setSchema = (schema: any) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.schema = schema
+    })
+    setCustomCollection(newCollection)
+  }
+
+  useEffect(() => {
+    if (!debouncedSchema)
+      return
+    if (isEdit && editFirst) {
+      setEditFirst(false)
+      return
+    }
+    (async () => {
+      try {
+        const { parameters_schema, schema_type } = await parseParamsSchema(debouncedSchema)
+        const customCollection = getCustomCollection()
+        const newCollection = produce(customCollection, (draft) => {
+          draft.schema_type = schema_type
+        })
+        setCustomCollection(newCollection)
+        setParamsSchemas(parameters_schema)
+      }
+      catch (e) {
+        const customCollection = getCustomCollection()
+        const newCollection = produce(customCollection, (draft) => {
+          draft.schema_type = ''
+        })
+        setCustomCollection(newCollection)
+        setParamsSchemas([])
+      }
+    })()
+  }, [debouncedSchema])
+
+  const [credentialsModalShow, setCredentialsModalShow] = useState(false)
+  const credential = customCollection.credentials
+  const setCredential = (credential: Credential) => {
+    const newCollection = produce(customCollection, (draft) => {
+      draft.credentials = credential
+    })
+    setCustomCollection(newCollection)
+  }
+
+  const [currTool, setCurrTool] = useState<CustomParamSchema | null>(null)
+  const [isShowTestApi, setIsShowTestApi] = useState(false)
+
+  const [labels, setLabels] = useState<string[]>(payload?.labels || [])
+  const handleLabelSelect = (value: string[]) => {
+    setLabels(value)
+  }
+
+  const handleSave = () => {
+    // const postData = clone(customCollection)
+    const postData = produce(customCollection, (draft) => {
+      delete draft.tools
+
+      if (draft.credentials.auth_type === AuthType.none) {
+        delete draft.credentials.api_key_header
+        delete draft.credentials.api_key_header_prefix
+        delete draft.credentials.api_key_value
+      }
+
+      draft.labels = labels
+    })
+
+    let errorMessage = ''
+    if (!postData.provider)
+      errorMessage = t('common.errorMsg.fieldRequired', { field: t('tools.createTool.name') })
+
+    if (!postData.schema)
+      errorMessage = t('common.errorMsg.fieldRequired', { field: t('tools.createTool.schema') })
+
+    if (errorMessage) {
+      Toast.notify({
+        type: 'error',
+        message: errorMessage,
+      })
+      return
+    }
+
+    if (isAdd) {
+      onAdd?.(postData)
+      return
+    }
+
+    onEdit?.({
+      ...postData,
+      original_provider: originalProvider,
+    })
+  }
+
+  const getPath = (url: string) => {
+    if (!url)
+      return ''
+
+    try {
+      const path = decodeURI(new URL(url).pathname)
+      return path || ''
+    }
+    catch (e) {
+      return url
+    }
+  }
+
+  return (
+    <>
+      <Modal
+        isShow
+        onClose={onHide}
+        closable
+        className='!h-[calc(100vh-16px)] !max-w-[630px] !p-0'
+      >
+        <div className='flex h-full flex-col'>
+          <div className='ml-6 mt-6 text-base font-semibold text-text-primary'>
+            {t('tools.createTool.title')}
+          </div>
+          <div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
+            <div>
+              <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
+              <div className='flex items-center justify-between gap-3'>
+                <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
+                <Input
+                  className='h-10 grow' placeholder={t('tools.createTool.toolNamePlaceHolder')!}
+                  value={customCollection.provider}
+                  onChange={(e) => {
+                    const newCollection = produce(customCollection, (draft) => {
+                      draft.provider = e.target.value
+                    })
+                    setCustomCollection(newCollection)
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* Schema */}
+            <div className='select-none'>
+              <div className='flex items-center justify-between'>
+                <div className='flex items-center'>
+                  <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.schema')}<span className='ml-1 text-red-500'>*</span></div>
+                  <div className='mx-2 h-3 w-px bg-divider-regular'></div>
+                  <a
+                    href="https://swagger.io/specification/"
+                    target='_blank' rel='noopener noreferrer'
+                    className='flex h-[18px] items-center space-x-1  text-text-accent'
+                  >
+                    <div className='text-xs font-normal'>{t('tools.createTool.viewSchemaSpec')}</div>
+                    <LinkExternal02 className='h-3 w-3' />
+                  </a>
+                </div>
+                <GetSchema onChange={setSchema} />
+
+              </div>
+              <Textarea
+                className='h-[240px] resize-none'
+                value={schema}
+                onChange={e => setSchema(e.target.value)}
+                placeholder={t('tools.createTool.schemaPlaceHolder')!}
+              />
+            </div>
+
+            {/* Available Tools  */}
+            <div>
+              <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.availableTools.title')}</div>
+              <div className='w-full overflow-x-auto rounded-lg border border-divider-regular'>
+                <table className='system-xs-regular w-full text-text-secondary'>
+                  <thead className='uppercase text-text-tertiary'>
+                    <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
+                      <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.name')}</th>
+                      <th className="w-[236px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.description')}</th>
+                      <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.method')}</th>
+                      <th className="p-2 pl-3 font-medium">{t('tools.createTool.availableTools.path')}</th>
+                      <th className="w-[54px] p-2 pl-3 font-medium">{t('tools.createTool.availableTools.action')}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {paramsSchemas.map((item, index) => (
+                      <tr key={index} className='border-b border-divider-regular last:border-0'>
+                        <td className="p-2 pl-3">{item.operation_id}</td>
+                        <td className="w-[236px] p-2 pl-3">{item.summary}</td>
+                        <td className="p-2 pl-3">{item.method}</td>
+                        <td className="p-2 pl-3">{getPath(item.server_url)}</td>
+                        <td className="w-[62px] p-2 pl-3">
+                          <Button
+                            size='small'
+                            onClick={() => {
+                              setCurrTool(item)
+                              setIsShowTestApi(true)
+                            }}
+                          >
+                            {t('tools.createTool.availableTools.test')}
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* Authorization method */}
+            <div>
+              <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
+              <div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}>
+                <div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
+                <Settings01 className='h-4 w-4 text-text-secondary' />
+              </div>
+            </div>
+
+            {/* Labels */}
+            <div>
+              <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
+              <LabelSelector value={labels} onChange={handleLabelSelect} />
+            </div>
+
+            {/* Privacy Policy */}
+            <div>
+              <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
+              <Input
+                value={customCollection.privacy_policy}
+                onChange={(e) => {
+                  const newCollection = produce(customCollection, (draft) => {
+                    draft.privacy_policy = e.target.value
+                  })
+                  setCustomCollection(newCollection)
+                }}
+                className='h-10 grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
+            </div>
+
+            <div>
+              <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.customDisclaimer')}</div>
+              <Input
+                value={customCollection.custom_disclaimer}
+                onChange={(e) => {
+                  const newCollection = produce(customCollection, (draft) => {
+                    draft.custom_disclaimer = e.target.value
+                  })
+                  setCustomCollection(newCollection)
+                }}
+                className='h-10 grow' placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''} />
+            </div>
+
+          </div>
+          <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')} >
+            {
+              isEdit && (
+                <Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
+              )
+            }
+            <div className='flex space-x-2 '>
+              <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+              <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+            </div>
+          </div>
+          {showEmojiPicker && <EmojiPicker
+            onSelect={(icon, icon_background) => {
+              setEmoji({ content: icon, background: icon_background })
+              setShowEmojiPicker(false)
+            }}
+            onClose={() => {
+              setShowEmojiPicker(false)
+            }}
+          />}
+          {credentialsModalShow && (
+            <ConfigCredentials
+              positionCenter={isAdd}
+              credential={credential}
+              onChange={setCredential}
+              onHide={() => setCredentialsModalShow(false)}
+            />)
+          }
+          {isShowTestApi && (
+            <TestApi
+              positionCenter={isAdd}
+              tool={currTool as CustomParamSchema}
+              customCollection={customCollection}
+              onHide={() => setIsShowTestApi(false)}
+            />
+          )}
+        </div>
+      </Modal>
+    </>
+
+  )
+}
+export default React.memo(EditCustomCollectionModal)

dify_1.2.0/web/app/components/tools/edit-custom-collection-modal/test-api.tsx

@@ -0,0 +1,134 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { RiSettings2Line } from '@remixicon/react'
+import ConfigCredentials from './config-credentials'
+import { AuthType, type Credential, type CustomCollectionBackend, type CustomParamSchema } from '@/app/components/tools/types'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Drawer from '@/app/components/base/drawer-plus'
+import I18n from '@/context/i18n'
+import { testAPIAvailable } from '@/service/tools'
+import { getLanguage } from '@/i18n/language'
+
+type Props = {
+  positionCenter?: boolean
+  customCollection: CustomCollectionBackend
+  tool: CustomParamSchema
+  onHide: () => void
+}
+
+const TestApi: FC<Props> = ({
+  positionCenter,
+  customCollection,
+  tool,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const [credentialsModalShow, setCredentialsModalShow] = useState(false)
+  const [tempCredential, setTempCredential] = React.useState<Credential>(customCollection.credentials)
+  const [result, setResult] = useState<string>('')
+  const { operation_id: toolName, parameters } = tool
+  const [parametersValue, setParametersValue] = useState<Record<string, string>>({})
+  const handleTest = async () => {
+    // clone test schema
+    const credentials = JSON.parse(JSON.stringify(tempCredential)) as Credential
+    if (credentials.auth_type === AuthType.none) {
+      delete credentials.api_key_header_prefix
+      delete credentials.api_key_header
+      delete credentials.api_key_value
+    }
+    const data = {
+      provider_name: customCollection.provider,
+      tool_name: toolName,
+      credentials,
+      schema_type: customCollection.schema_type,
+      schema: customCollection.schema,
+      parameters: parametersValue,
+    }
+    const res = await testAPIAvailable(data) as any
+    setResult(res.error || res.result)
+  }
+
+  return (
+    <>
+      <Drawer
+        isShow
+        positionCenter={positionCenter}
+        onHide={onHide}
+        title={`${t('tools.test.title')}  ${toolName}`}
+        panelClassName='mt-2 !w-[600px]'
+        maxWidthClassName='!max-w-[600px]'
+        height='calc(100vh - 16px)'
+        headerClassName='!border-b-divider-regular'
+        body={
+          <div className='overflow-y-auto px-6 pt-2'>
+            <div className='space-y-4'>
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.authMethod.title')}</div>
+                <div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5' onClick={() => setCredentialsModalShow(true)}>
+                  <div className='system-xs-regular text-text-primary'>{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div>
+                  <RiSettings2Line className='h-4 w-4 text-text-secondary' />
+                </div>
+              </div>
+
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.test.parametersValue')}</div>
+                <div className='rounded-lg border border-divider-regular'>
+                  <table className='system-xs-regular w-full font-normal text-text-secondary'>
+                    <thead className='uppercase text-text-tertiary'>
+                      <tr className='border-b border-divider-regular'>
+                        <th className="p-2 pl-3 font-medium">{t('tools.test.parameters')}</th>
+                        <th className="p-2 pl-3 font-medium">{t('tools.test.value')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {parameters.map((item, index) => (
+                        <tr key={index} className='border-b border-divider-regular last:border-0'>
+                          <td className="py-2 pl-3 pr-2.5">
+                            {item.label[language]}
+                          </td>
+                          <td className="">
+                            <Input
+                              value={parametersValue[item.name] || ''}
+                              onChange={e => setParametersValue({ ...parametersValue, [item.name]: e.target.value })}
+                              type='text'
+                              className='!hover:border-transparent !hover:bg-transparent !focus:border-transparent !focus:bg-transparent !border-transparent !bg-transparent' />
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+            </div>
+            <Button variant='primary' className=' mt-4 h-10 w-full' onClick={handleTest}>{t('tools.test.title')}</Button>
+            <div className='mt-6'>
+              <div className='flex items-center space-x-3'>
+                <div className='system-xs-semibold text-text-tertiary'>{t('tools.test.testResult')}</div>
+                <div className='bg-[rgb(243, 244, 246)] h-px w-0 grow'></div>
+              </div>
+              <div className='system-xs-regular mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-3 py-2 text-text-secondary'>
+                {result || <span className='text-text-quaternary'>{t('tools.test.testResultPlaceholder')}</span>}
+              </div>
+            </div>
+          </div>
+        }
+      />
+      {credentialsModalShow && (
+        <ConfigCredentials
+          positionCenter={positionCenter}
+          credential={tempCredential}
+          onChange={setTempCredential}
+          onHide={() => setCredentialsModalShow(false)}
+        />)
+      }
+    </>
+  )
+}
+export default React.memo(TestApi)

dify_1.2.0/web/app/components/tools/labels/constant.ts

@@ -0,0 +1,4 @@
+export type Label = {
+  name: string
+  label: string
+}

dify_1.2.0/web/app/components/tools/labels/filter.tsx

@@ -0,0 +1,136 @@
+import type { FC } from 'react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDebounceFn } from 'ahooks'
+import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Input from '@/app/components/base/input'
+import { Tag01, Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import type { Label } from '@/app/components/tools/labels/constant'
+import { useTags } from '@/app/components/plugins/hooks'
+
+type LabelFilterProps = {
+  value: string[]
+  onChange: (v: string[]) => void
+}
+const LabelFilter: FC<LabelFilterProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const { tags: labelList } = useTags()
+
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+
+  const filteredLabelList = useMemo(() => {
+    return labelList.filter(label => label.name.includes(searchKeywords))
+  }, [labelList, searchKeywords])
+
+  const currentLabel = useMemo(() => {
+    return labelList.find(label => label.name === value[0])
+  }, [value, labelList])
+
+  const selectLabel = (label: Label) => {
+    if (value.includes(label.name))
+      onChange(value.filter(v => v !== label.name))
+    else
+      onChange([...value, label.name])
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => setOpen(v => !v)}
+          className='block'
+        >
+          <div className={cn(
+            'flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 hover:bg-components-input-bg-hover',
+            !open && !!value.length && 'shadow-xs',
+            open && !!value.length && 'shadow-xs',
+          )}>
+            <div className='p-[1px]'>
+              <Tag01 className='h-3.5 w-3.5 text-text-tertiary' />
+            </div>
+            <div className='text-[13px] leading-[18px] text-text-tertiary'>
+              {!value.length && t('common.tag.placeholder')}
+              {!!value.length && currentLabel?.label}
+            </div>
+            {value.length > 1 && (
+              <div className='text-xs font-medium leading-[18px] text-text-tertiary'>{`+${value.length - 1}`}</div>
+            )}
+            {!value.length && (
+              <div className='p-[1px]'>
+                <RiArrowDownSLine className='h-3.5 w-3.5 text-text-tertiary' />
+              </div>
+            )}
+            {!!value.length && (
+              <div className='group/clear cursor-pointer p-[1px]' onClick={(e) => {
+                e.stopPropagation()
+                onChange([])
+              }}>
+                <XCircle className='h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary' />
+              </div>
+            )}
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1002]'>
+          <div className='relative w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg  backdrop-blur-[5px]'>
+            <div className='p-2'>
+              <Input
+                showLeftIcon
+                showClearIcon
+                value={keywords}
+                onChange={e => handleKeywordsChange(e.target.value)}
+                onClear={() => handleKeywordsChange('')}
+              />
+            </div>
+            <div className='p-1'>
+              {filteredLabelList.map(label => (
+                <div
+                  key={label.name}
+                  className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover'
+                  onClick={() => selectLabel(label)}
+                >
+                  <div title={label.label} className='grow truncate text-sm leading-5 text-text-secondary'>{label.label}</div>
+                  {value.includes(label.name) && <Check className='h-4 w-4 shrink-0 text-text-accent' />}
+                </div>
+              ))}
+              {!filteredLabelList.length && (
+                <div className='flex flex-col items-center gap-1 p-3'>
+                  <Tag03 className='h-6 w-6 text-text-quaternary' />
+                  <div className='text-xs leading-[14px] text-text-tertiary'>{t('common.tag.noTag')}</div>
+                </div>
+              )}
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+
+  )
+}
+
+export default LabelFilter

dify_1.2.0/web/app/components/tools/labels/selector.tsx

@@ -0,0 +1,122 @@
+import type { FC } from 'react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDebounceFn } from 'ahooks'
+import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Input from '@/app/components/base/input'
+import { Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
+import Checkbox from '@/app/components/base/checkbox'
+import type { Label } from '@/app/components/tools/labels/constant'
+import { useTags } from '@/app/components/plugins/hooks'
+import { noop } from 'lodash-es'
+
+type LabelSelectorProps = {
+  value: string[]
+  onChange: (v: string[]) => void
+}
+const LabelSelector: FC<LabelSelectorProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const { tags: labelList } = useTags()
+
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+
+  const filteredLabelList = useMemo(() => {
+    return labelList.filter(label => label.name.includes(searchKeywords))
+  }, [labelList, searchKeywords])
+
+  const selectedLabels = useMemo(() => {
+    return value.map(v => labelList.find(l => l.name === v)?.label).join(', ')
+  }, [value, labelList])
+
+  const selectLabel = (label: Label) => {
+    if (value.includes(label.name))
+      onChange(value.filter(v => v !== label.name))
+    else
+      onChange([...value, label.name])
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => setOpen(v => !v)}
+          className='block'
+        >
+          <div className={cn(
+            'flex h-10 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-3 hover:bg-components-input-bg-hover',
+            open && '!hover:bg-components-input-bg-hover hover:bg-components-input-bg-hover',
+          )}>
+            <div title={value.length > 0 ? selectedLabels : ''} className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary', !value.length && '!text-text-quaternary')}>
+              {!value.length && t('tools.createTool.toolInput.labelPlaceholder')}
+              {!!value.length && selectedLabels}
+            </div>
+            <div className='ml-1 shrink-0 text-text-secondary opacity-60'>
+              <RiArrowDownSLine className='h-4 w-4' />
+            </div>
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1040]'>
+          <div className='relative w-[591px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg  backdrop-blur-[5px]'>
+            <div className='border-b-[0.5px] border-divider-regular p-2'>
+              <Input
+                showLeftIcon
+                showClearIcon
+                value={keywords}
+                onChange={e => handleKeywordsChange(e.target.value)}
+                onClear={() => handleKeywordsChange('')}
+              />
+            </div>
+            <div className='max-h-[264px] overflow-y-auto p-1'>
+              {filteredLabelList.map(label => (
+                <div
+                  key={label.name}
+                  className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-components-panel-on-panel-item-bg-hover'
+                  onClick={() => selectLabel(label)}
+                >
+                  <Checkbox
+                    className='shrink-0'
+                    checked={value.includes(label.name)}
+                    onCheck={noop}
+                  />
+                  <div title={label.label} className='grow truncate text-sm leading-5 text-text-secondary'>{label.label}</div>
+                </div>
+              ))}
+              {!filteredLabelList.length && (
+                <div className='flex flex-col items-center gap-1 p-3'>
+                  <Tag03 className='h-6 w-6 text-text-quaternary' />
+                  <div className='text-xs leading-[14px] text-text-tertiary'>{t('common.tag.noTag')}</div>
+                </div>
+              )}
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default LabelSelector

dify_1.2.0/web/app/components/tools/marketplace/hooks.ts

@@ -0,0 +1,117 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  useMarketplaceCollectionsAndPlugins,
+  useMarketplacePlugins,
+} from '@/app/components/plugins/marketplace/hooks'
+import { PluginType } from '@/app/components/plugins/types'
+import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
+import { useAllToolProviders } from '@/service/use-tools'
+
+export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => {
+  const { data: toolProvidersData, isSuccess } = useAllToolProviders()
+  const exclude = useMemo(() => {
+    if (isSuccess)
+      return toolProvidersData?.filter(toolProvider => !!toolProvider.plugin_id).map(toolProvider => toolProvider.plugin_id!)
+  }, [isSuccess, toolProvidersData])
+  const {
+    isLoading,
+    marketplaceCollections,
+    marketplaceCollectionPluginsMap,
+    queryMarketplaceCollectionsAndPlugins,
+  } = useMarketplaceCollectionsAndPlugins()
+  const {
+    plugins,
+    resetPlugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+    isLoading: isPluginsLoading,
+    total: pluginsTotal,
+  } = useMarketplacePlugins()
+  const [page, setPage] = useState(1)
+  const pageRef = useRef(page)
+  const searchPluginTextRef = useRef(searchPluginText)
+  const filterPluginTagsRef = useRef(filterPluginTags)
+
+  useEffect(() => {
+    searchPluginTextRef.current = searchPluginText
+    filterPluginTagsRef.current = filterPluginTags
+  }, [searchPluginText, filterPluginTags])
+  useEffect(() => {
+    if ((searchPluginText || filterPluginTags.length) && isSuccess) {
+      setPage(1)
+      pageRef.current = 1
+
+      if (searchPluginText) {
+        queryPluginsWithDebounced({
+          category: PluginType.tool,
+          query: searchPluginText,
+          tags: filterPluginTags,
+          exclude,
+          type: 'plugin',
+          page: pageRef.current,
+        })
+        return
+      }
+      queryPlugins({
+        category: PluginType.tool,
+        query: searchPluginText,
+        tags: filterPluginTags,
+        exclude,
+        type: 'plugin',
+        page: pageRef.current,
+      })
+    }
+    else {
+      if (isSuccess) {
+        queryMarketplaceCollectionsAndPlugins({
+          category: PluginType.tool,
+          condition: getMarketplaceListCondition(PluginType.tool),
+          exclude,
+          type: 'plugin',
+        })
+        resetPlugins()
+      }
+    }
+  }, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, resetPlugins, exclude, isSuccess])
+
+  const handleScroll = useCallback((e: Event) => {
+    const target = e.target as HTMLDivElement
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+    } = target
+    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0) {
+      const searchPluginText = searchPluginTextRef.current
+      const filterPluginTags = filterPluginTagsRef.current
+      if (pluginsTotal && plugins && pluginsTotal > plugins.length && (!!searchPluginText || !!filterPluginTags.length)) {
+        setPage(pageRef.current + 1)
+        pageRef.current++
+
+        queryPlugins({
+          category: PluginType.tool,
+          query: searchPluginText,
+          tags: filterPluginTags,
+          exclude,
+          type: 'plugin',
+          page: pageRef.current,
+        })
+      }
+    }
+  }, [exclude, plugins, pluginsTotal, queryPlugins])
+
+  return {
+    isLoading: isLoading || isPluginsLoading,
+    marketplaceCollections,
+    marketplaceCollectionPluginsMap,
+    plugins,
+    handleScroll,
+    page,
+  }
+}

dify_1.2.0/web/app/components/tools/marketplace/index.tsx

@@ -0,0 +1,117 @@
+import {
+  useEffect,
+  useRef,
+} from 'react'
+import {
+  RiArrowRightUpLine,
+  RiArrowUpDoubleLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useMarketplace } from './hooks'
+import List from '@/app/components/plugins/marketplace/list'
+import Loading from '@/app/components/base/loading'
+import { getLocaleOnClient } from '@/i18n'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
+
+type MarketplaceProps = {
+  searchPluginText: string
+  filterPluginTags: string[]
+  onMarketplaceScroll: () => void
+}
+const Marketplace = ({
+  searchPluginText,
+  filterPluginTags,
+  onMarketplaceScroll,
+}: MarketplaceProps) => {
+  const locale = getLocaleOnClient()
+  const { t } = useTranslation()
+
+  const {
+    isLoading,
+    marketplaceCollections,
+    marketplaceCollectionPluginsMap,
+    plugins,
+    handleScroll,
+    page,
+  } = useMarketplace(searchPluginText, filterPluginTags)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (container)
+      container.addEventListener('scroll', handleScroll)
+
+    return () => {
+      if (container)
+        container.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
+
+  return (
+    <div
+      ref={containerRef}
+      className='sticky bottom-[-442px] flex h-[530px] shrink-0 grow flex-col overflow-y-auto bg-background-default-subtle px-12 py-2 pt-0'
+    >
+      <RiArrowUpDoubleLine
+        className='absolute left-1/2 top-2 h-4 w-4 -translate-x-1/2 cursor-pointer text-text-quaternary'
+        onClick={() => onMarketplaceScroll()}
+      />
+      <div className='sticky top-0 z-10 bg-background-default-subtle pb-3 pt-5'>
+        <div className='title-2xl-semi-bold bg-gradient-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text text-transparent'>
+          {t('plugin.marketplace.moreFrom')}
+        </div>
+        <div className='body-md-regular flex items-center text-center text-text-tertiary'>
+          {t('plugin.marketplace.discover')}
+          <span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            {t('plugin.category.models')}
+          </span>
+          ,
+          <span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            {t('plugin.category.tools')}
+          </span>
+          ,
+          <span className="body-md-medium relative ml-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            {t('plugin.category.agents')}
+          </span>
+          ,
+          <span className="body-md-medium relative ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            {t('plugin.category.extensions')}
+          </span>
+          {t('plugin.marketplace.and')}
+          <span className="body-md-medium relative ml-1 mr-1 text-text-secondary after:absolute after:bottom-[1.5px] after:left-0 after:h-2 after:w-full after:bg-text-text-selected after:content-['']">
+            {t('plugin.category.bundles')}
+          </span>
+          {t('common.operation.in')}
+          <a
+            href={`${MARKETPLACE_URL_PREFIX}?language=${locale}&q=${searchPluginText}&tags=${filterPluginTags.join(',')}`}
+            className='system-sm-medium ml-1 flex items-center text-text-accent'
+            target='_blank'
+          >
+            {t('plugin.marketplace.difyMarketplace')}
+            <RiArrowRightUpLine className='h-4 w-4' />
+          </a>
+        </div>
+      </div>
+      {
+        isLoading && page === 1 && (
+          <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
+            <Loading />
+          </div>
+        )
+      }
+      {
+        (!isLoading || page > 1) && (
+          <List
+            marketplaceCollections={marketplaceCollections || []}
+            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
+            plugins={plugins}
+            showInstallButton
+            locale={locale}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default Marketplace

dify_1.2.0/web/app/components/tools/provider-list.tsx

@@ -0,0 +1,162 @@
+'use client'
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Collection } from './types'
+import Marketplace from './marketplace'
+import cn from '@/utils/classnames'
+import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+import TabSliderNew from '@/app/components/base/tab-slider-new'
+import LabelFilter from '@/app/components/tools/labels/filter'
+import Input from '@/app/components/base/input'
+import ProviderDetail from '@/app/components/tools/provider/detail'
+import Empty from '@/app/components/plugins/marketplace/empty'
+import CustomCreateCard from '@/app/components/tools/provider/custom-create-card'
+import WorkflowToolEmpty from '@/app/components/tools/add-tool-modal/empty'
+import Card from '@/app/components/plugins/card'
+import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
+import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
+import { useAllToolProviders } from '@/service/use-tools'
+import { useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
+
+const ProviderList = () => {
+  const { t } = useTranslation()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
+
+  const [activeTab, setActiveTab] = useTabSearchParams({
+    defaultTab: 'builtin',
+  })
+  const options = [
+    { value: 'builtin', text: t('tools.type.builtIn') },
+    { value: 'api', text: t('tools.type.custom') },
+    { value: 'workflow', text: t('tools.type.workflow') },
+  ]
+  const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
+  const handleTagsChange = (value: string[]) => {
+    setTagFilterValue(value)
+  }
+  const [keywords, setKeywords] = useState<string>('')
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+  }
+  const { data: collectionList = [], refetch } = useAllToolProviders()
+  const filteredCollectionList = useMemo(() => {
+    return collectionList.filter((collection) => {
+      if (collection.type !== activeTab)
+        return false
+      if (tagFilterValue.length > 0 && (!collection.labels || collection.labels.every(label => !tagFilterValue.includes(label))))
+        return false
+      if (keywords)
+        return Object.values(collection.label).some(value => value.toLowerCase().includes(keywords.toLowerCase()))
+      return true
+    })
+  }, [activeTab, tagFilterValue, keywords, collectionList])
+
+  const [currentProvider, setCurrentProvider] = useState<Collection | undefined>()
+  const { data: pluginList } = useInstalledPluginList()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const currentPluginDetail = useMemo(() => {
+    const detail = pluginList?.plugins.find(plugin => plugin.plugin_id === currentProvider?.plugin_id)
+    return detail
+  }, [currentProvider?.plugin_id, pluginList?.plugins])
+
+  return (
+    <>
+      <div className='relative flex h-0 shrink-0 grow overflow-hidden'>
+        <div
+          ref={containerRef}
+          className='relative flex grow flex-col overflow-y-auto bg-background-body'
+        >
+          <div className={cn(
+            'sticky top-0 z-20 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]',
+            currentProvider && 'pr-6',
+          )}>
+            <TabSliderNew
+              value={activeTab}
+              onChange={(state) => {
+                setActiveTab(state)
+                if (state !== activeTab)
+                  setCurrentProvider(undefined)
+              }}
+              options={options}
+            />
+            <div className='flex items-center gap-2'>
+              <LabelFilter value={tagFilterValue} onChange={handleTagsChange} />
+              <Input
+                showLeftIcon
+                showClearIcon
+                wrapperClassName='w-[200px]'
+                value={keywords}
+                onChange={e => handleKeywordsChange(e.target.value)}
+                onClear={() => handleKeywordsChange('')}
+              />
+            </div>
+          </div>
+          {(filteredCollectionList.length > 0 || activeTab !== 'builtin') && (
+            <div className={cn(
+              'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+              !filteredCollectionList.length && activeTab === 'workflow' && 'grow',
+            )}>
+              {activeTab === 'api' && <CustomCreateCard onRefreshData={refetch} />}
+              {filteredCollectionList.map(collection => (
+                <div
+                  key={collection.id}
+                  onClick={() => setCurrentProvider(collection)}
+                >
+                  <Card
+                    className={cn(
+                      'cursor-pointer border-[1.5px] border-transparent',
+                      currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
+                    )}
+                    hideCornerMark
+                    payload={{
+                      ...collection,
+                      brief: collection.description,
+                      org: collection.plugin_id ? collection.plugin_id.split('/')[0] : '',
+                      name: collection.plugin_id ? collection.plugin_id.split('/')[1] : collection.name,
+                    } as any}
+                    footer={
+                      <CardMoreInfo
+                        tags={collection.labels}
+                      />
+                    }
+                  />
+                </div>
+              ))}
+              {!filteredCollectionList.length && activeTab === 'workflow' && <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><WorkflowToolEmpty /></div>}
+            </div>
+          )}
+          {!filteredCollectionList.length && activeTab === 'builtin' && (
+            <Empty lightCard text={t('tools.noTools')} className='h-[224px] px-12' />
+          )}
+          {
+            enable_marketplace && activeTab === 'builtin' && (
+              <Marketplace
+                onMarketplaceScroll={() => {
+                  containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'smooth' })
+                }}
+                searchPluginText={keywords}
+                filterPluginTags={tagFilterValue}
+              />
+            )
+          }
+        </div>
+      </div>
+      {currentProvider && !currentProvider.plugin_id && (
+        <ProviderDetail
+          collection={currentProvider}
+          onHide={() => setCurrentProvider(undefined)}
+          onRefreshData={refetch}
+        />
+      )}
+      <PluginDetailPanel
+        detail={currentPluginDetail}
+        onUpdate={() => invalidateInstalledPluginList()}
+        onHide={() => setCurrentProvider(undefined)}
+      />
+    </>
+  )
+}
+ProviderList.displayName = 'ToolProviderList'
+export default ProviderList

dify_1.2.0/web/app/components/tools/provider/card.tsx

@@ -0,0 +1,83 @@
+'use client'
+import { useMemo } from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import type { Collection } from '../types'
+import cn from '@/utils/classnames'
+import AppIcon from '@/app/components/base/app-icon'
+import { Tag01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import { useStore as useLabelStore } from '@/app/components/tools/labels/store'
+
+type Props = {
+  active: boolean
+  collection: Collection
+  onSelect: () => void
+}
+
+const ProviderCard = ({
+  active,
+  collection,
+  onSelect,
+}: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const labelList = useLabelStore(s => s.labelList)
+
+  const labelContent = useMemo(() => {
+    if (!collection.labels)
+      return ''
+    return collection.labels.map((name) => {
+      const label = labelList.find(item => item.name === name)
+      return label?.label[language]
+    }).filter(Boolean).join(', ')
+  }, [collection.labels, labelList, language])
+
+  return (
+    <div className={cn('group col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-2 border-solid border-transparent bg-white shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg', active && '!border-primary-400')} onClick={onSelect}>
+      <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
+        <div className='relative shrink-0'>
+          {typeof collection.icon === 'string' && (
+            <div className='h-10 w-10 rounded-md bg-cover bg-center bg-no-repeat' style={{ backgroundImage: `url(${collection.icon})` }} />
+          )}
+          {typeof collection.icon !== 'string' && (
+            <AppIcon
+              size='large'
+              icon={collection.icon.content}
+              background={collection.icon.background}
+            />
+          )}
+        </div>
+        <div className='w-0 grow py-[1px]'>
+          <div className='flex items-center text-sm font-semibold leading-5 text-gray-800'>
+            <div className='truncate' title={collection.label[language]}>{collection.label[language]}</div>
+          </div>
+          <div className='flex items-center text-[10px] font-medium leading-[18px] text-gray-500'>
+            <div className='truncate'>{t('tools.author')}&nbsp;{collection.author}</div>
+          </div>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-gray-500',
+          collection.labels?.length ? 'line-clamp-2' : 'line-clamp-4',
+          collection.labels?.length > 0 && 'group-hover:line-clamp-2 group-hover:max-h-[36px]',
+        )}
+        title={collection.description[language]}
+      >
+        {collection.description[language]}
+      </div>
+      {collection.labels?.length > 0 && (
+        <div className='mt-1 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
+          <div className='relative flex w-full items-center gap-1 rounded-md py-[7px] text-gray-500' title={labelContent}>
+            <Tag01 className='h-3 w-3 shrink-0' />
+            <div className='grow truncate text-start text-xs font-normal leading-[18px]'>{labelContent}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+export default ProviderCard

dify_1.2.0/web/app/components/tools/provider/contribute.tsx

@@ -0,0 +1,40 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiHammerFill,
+} from '@remixicon/react'
+import { Heart02 } from '@/app/components/base/icons/src/vender/solid/education'
+import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
+
+const Contribute: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <a
+      href='https://github.com/langgenius/dify/blob/main/api/core/tools/README.md'
+      target='_blank'
+      rel='noopener noreferrer'
+      className="group col-span-1 flex min-h-[160px] cursor-pointer flex-col rounded-xl border-2 border-solid border-transparent bg-white bg-[url('~@/app/components/tools/provider/grid_bg.svg')] bg-cover bg-no-repeat shadow-sm transition-all duration-200 ease-in-out hover:shadow-lg"
+    >
+      <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]'>
+        <div className='relative flex shrink-0 items-center'>
+          <div className='z-10 flex rounded-[10px] border-[0.5px] border-primary-100 bg-white p-3 shadow-md'><RiHammerFill className='h-4 w-4 text-primary-600'/></div>
+          <div className='flex -translate-x-2 rounded-[10px] border-[0.5px] border-[#FCE7F6] bg-[#FEF6FB] p-3 shadow-md'><Heart02 className='h-4 w-4 text-[#EE46BC]'/></div>
+        </div>
+      </div>
+      <div className='mb-3 px-[14px] text-[15px] font-semibold leading-5'>
+        <div className='text-gradient'>{t('tools.contribute.line1')}</div>
+        <div className='text-gradient'>{t('tools.contribute.line2')}</div>
+      </div>
+      <div className='flex items-center space-x-1 border-t-[0.5px] border-black/5 px-4 py-3 text-[#155EEF]'>
+        <BookOpen01 className='h-3 w-3' />
+        <div className='grow text-xs font-normal leading-[18px]'>{t('tools.contribute.viewGuide')}</div>
+        <ArrowUpRight className='h-3 w-3' />
+      </div>
+    </a>
+  )
+}
+export default React.memo(Contribute)

dify_1.2.0/web/app/components/tools/provider/custom-create-card.tsx

@@ -0,0 +1,76 @@
+'use client'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import {
+  RiAddLine,
+} from '@remixicon/react'
+import type { CustomCollectionBackend } from '../types'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
+import { createCustomCollection } from '@/service/tools'
+import Toast from '@/app/components/base/toast'
+import { useAppContext } from '@/context/app-context'
+
+type Props = {
+  onRefreshData: () => void
+}
+
+const Contribute = ({ onRefreshData }: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const { isCurrentWorkspaceManager } = useAppContext()
+
+  const linkUrl = useMemo(() => {
+    if (language.startsWith('zh_'))
+      return 'https://docs.dify.ai/zh-hans/guides/tools#ru-he-chuang-jian-zi-ding-yi-gong-ju'
+    return 'https://docs.dify.ai/guides/tools#how-to-create-custom-tools'
+  }, [language])
+
+  const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
+  const doCreateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await createCustomCollection(data)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+    onRefreshData()
+  }
+
+  return (
+    <>
+      {isCurrentWorkspaceManager && (
+        <div className='col-span-1 flex min-h-[135px] cursor-pointer flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-on-panel-item-bg transition-all duration-200 ease-in-out hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg'>
+          <div className='group grow rounded-t-xl hover:bg-background-body' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+            <div className='flex shrink-0 items-center p-4 pb-3'>
+              <div className='flex h-10 w-10 items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg group-hover:border-components-option-card-option-border-hover group-hover:bg-components-option-card-option-bg-hover'>
+                <RiAddLine className='h-4 w-4 text-text-tertiary group-hover:text-text-accent'/>
+              </div>
+              <div className='ml-3 text-sm font-semibold leading-5 text-text-primary group-hover:text-text-accent'>{t('tools.createCustomTool')}</div>
+            </div>
+          </div>
+          <div className='rounded-b-xl border-t-[0.5px] border-divider-regular px-4 py-3 text-text-tertiary hover:bg-background-body hover:text-text-accent'>
+            <a href={linkUrl} target='_blank' rel='noopener noreferrer' className='flex items-center space-x-1'>
+              <BookOpen01 className='h-3 w-3 shrink-0' />
+              <div className='grow truncate text-xs font-normal leading-[18px]' title={t('tools.customToolTip') || ''}>{t('tools.customToolTip')}</div>
+              <ArrowUpRight className='h-3 w-3 shrink-0' />
+            </a>
+          </div>
+        </div>
+      )}
+      {isShowEditCollectionToolModal && (
+        <EditCustomToolModal
+          payload={null}
+          onHide={() => setIsShowEditCustomCollectionModal(false)}
+          onAdd={doCreateCustomToolCollection}
+        />
+      )}
+    </>
+  )
+}
+export default Contribute

dify_1.2.0/web/app/components/tools/provider/detail.tsx

@@ -0,0 +1,428 @@
+'use client'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import {
+  RiCloseLine,
+} from '@remixicon/react'
+import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
+import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
+import ToolItem from './tool-item'
+import cn from '@/utils/classnames'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import Confirm from '@/app/components/base/confirm'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import { LinkExternal02, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+import Title from '@/app/components/plugins/card/base/title'
+import OrgInfo from '@/app/components/plugins/card/base/org-info'
+import Description from '@/app/components/plugins/card/base/description'
+import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
+import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
+import WorkflowToolModal from '@/app/components/tools/workflow-tool'
+import Toast from '@/app/components/base/toast'
+import Drawer from '@/app/components/base/drawer'
+import ActionButton from '@/app/components/base/action-button'
+
+import {
+  deleteWorkflowTool,
+  fetchBuiltInToolList,
+  fetchCustomCollection,
+  fetchCustomToolList,
+  fetchModelToolList,
+  fetchWorkflowToolDetail,
+  removeBuiltInToolCredential,
+  removeCustomCollection,
+  saveWorkflowToolProvider,
+  updateBuiltInToolCredential,
+  updateCustomCollection,
+} from '@/service/tools'
+import { useModalContext } from '@/context/modal-context'
+import { useProviderContext } from '@/context/provider-context'
+import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import Loading from '@/app/components/base/loading'
+import { useAppContext } from '@/context/app-context'
+import { useInvalidateAllWorkflowTools } from '@/service/use-tools'
+
+type Props = {
+  collection: Collection
+  onHide: () => void
+  onRefreshData: () => void
+}
+
+const ProviderDetail = ({
+  collection,
+  onHide,
+  onRefreshData,
+}: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+
+  const needAuth = collection.allow_delete || collection.type === CollectionType.model
+  const isAuthed = collection.is_team_authorization
+  const isBuiltIn = collection.type === CollectionType.builtIn
+  const isModel = collection.type === CollectionType.model
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const invalidateAllWorkflowTools = useInvalidateAllWorkflowTools()
+  const [isDetailLoading, setIsDetailLoading] = useState(false)
+
+  // built in provider
+  const [showSettingAuth, setShowSettingAuth] = useState(false)
+  const { setShowModelModal } = useModalContext()
+  const { modelProviders: providers } = useProviderContext()
+  const showSettingAuthModal = () => {
+    if (isModel) {
+      const provider = providers.find(item => item.provider === collection?.id)
+      if (provider) {
+        setShowModelModal({
+          payload: {
+            currentProvider: provider,
+            currentConfigurationMethod: ConfigurationMethodEnum.predefinedModel,
+            currentCustomConfigurationModelFixedFields: undefined,
+          },
+          onSaveCallback: () => {
+            onRefreshData()
+          },
+        })
+      }
+    }
+    else {
+      setShowSettingAuth(true)
+    }
+  }
+  // custom provider
+  const [customCollection, setCustomCollection] = useState<CustomCollectionBackend | WorkflowToolProviderResponse | null>(null)
+  const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [deleteAction, setDeleteAction] = useState('')
+  const doUpdateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await updateCustomCollection(data)
+    onRefreshData()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+  }
+  const doRemoveCustomToolCollection = async () => {
+    await removeCustomCollection(collection?.name as string)
+    onRefreshData()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+  }
+  const getCustomProvider = useCallback(async () => {
+    setIsDetailLoading(true)
+    const res = await fetchCustomCollection(collection.name)
+    if (res.credentials.auth_type === AuthType.apiKey && !res.credentials.api_key_header_prefix) {
+      if (res.credentials.api_key_value)
+        res.credentials.api_key_header_prefix = AuthHeaderPrefix.custom
+    }
+    setCustomCollection({
+      ...res,
+      labels: collection.labels,
+      provider: collection.name,
+    })
+    setIsDetailLoading(false)
+  }, [collection.labels, collection.name])
+  // workflow provider
+  const [isShowEditWorkflowToolModal, setIsShowEditWorkflowToolModal] = useState(false)
+  const getWorkflowToolProvider = useCallback(async () => {
+    setIsDetailLoading(true)
+    const res = await fetchWorkflowToolDetail(collection.id)
+    const payload = {
+      ...res,
+      parameters: res.tool?.parameters.map((item) => {
+        return {
+          name: item.name,
+          description: item.llm_description,
+          form: item.form,
+          required: item.required,
+          type: item.type,
+        }
+      }) || [],
+      labels: res.tool?.labels || [],
+    }
+    setCustomCollection(payload)
+    setIsDetailLoading(false)
+  }, [collection.id])
+  const removeWorkflowToolProvider = async () => {
+    await deleteWorkflowTool(collection.id)
+    onRefreshData()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditWorkflowToolModal(false)
+  }
+  const updateWorkflowToolProvider = async (data: WorkflowToolProviderRequest & Partial<{
+    workflow_app_id: string
+    workflow_tool_id: string
+  }>) => {
+    await saveWorkflowToolProvider(data)
+    invalidateAllWorkflowTools()
+    onRefreshData()
+    getWorkflowToolProvider()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditWorkflowToolModal(false)
+  }
+  const onClickCustomToolDelete = () => {
+    setDeleteAction('customTool')
+    setShowConfirmDelete(true)
+  }
+  const onClickWorkflowToolDelete = () => {
+    setDeleteAction('workflowTool')
+    setShowConfirmDelete(true)
+  }
+  const handleConfirmDelete = () => {
+    if (deleteAction === 'customTool')
+      doRemoveCustomToolCollection()
+
+    else if (deleteAction === 'workflowTool')
+      removeWorkflowToolProvider()
+
+    setShowConfirmDelete(false)
+  }
+
+  // ToolList
+  const [toolList, setToolList] = useState<Tool[]>([])
+  const getProviderToolList = useCallback(async () => {
+    setIsDetailLoading(true)
+    try {
+      if (collection.type === CollectionType.builtIn) {
+        const list = await fetchBuiltInToolList(collection.name)
+        setToolList(list)
+      }
+      else if (collection.type === CollectionType.model) {
+        const list = await fetchModelToolList(collection.name)
+        setToolList(list)
+      }
+      else if (collection.type === CollectionType.workflow) {
+        setToolList([])
+      }
+      else {
+        const list = await fetchCustomToolList(collection.name)
+        setToolList(list)
+      }
+    }
+    catch (e) { }
+    setIsDetailLoading(false)
+  }, [collection.name, collection.type])
+
+  useEffect(() => {
+    if (collection.type === CollectionType.custom)
+      getCustomProvider()
+    if (collection.type === CollectionType.workflow)
+      getWorkflowToolProvider()
+    getProviderToolList()
+  }, [collection.name, collection.type, getCustomProvider, getProviderToolList, getWorkflowToolProvider])
+
+  return (
+    <Drawer
+      isOpen={!!collection}
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassname={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+    >
+      <div className='p-4'>
+        <div className='mb-3 flex'>
+          <Icon src={collection.icon} />
+          <div className="ml-3 w-0 grow">
+            <div className="flex h-5 items-center">
+              <Title title={collection.label[language]} />
+            </div>
+            <div className='mb-1 flex h-4 items-center justify-between'>
+              <OrgInfo
+                className="mt-0.5"
+                packageNameClassName='w-auto'
+                orgName={collection.author}
+                packageName={collection.name}
+              />
+            </div>
+          </div>
+          <div className='flex gap-1'>
+            <ActionButton onClick={onHide}>
+              <RiCloseLine className='h-4 w-4' />
+            </ActionButton>
+          </div>
+        </div>
+        {!!collection.description[language] && (
+          <Description text={collection.description[language]} descriptionLineRows={2}></Description>
+        )}
+        <div className='flex gap-1 border-b-[0.5px] border-divider-subtle'>
+          {collection.type === CollectionType.custom && !isDetailLoading && (
+            <Button
+              className={cn('my-3 w-full shrink-0')}
+              onClick={() => setIsShowEditCustomCollectionModal(true)}
+            >
+              <Settings01 className='mr-1 h-4 w-4 text-text-tertiary' />
+              <div className='system-sm-medium text-text-secondary'>{t('tools.createTool.editAction')}</div>
+            </Button>
+          )}
+          {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
+            <>
+              <Button
+                variant='primary'
+                className={cn('my-3 w-[183px] shrink-0')}
+              >
+                <a className='flex items-center' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
+                  <div className='system-sm-medium'>{t('tools.openInStudio')}</div>
+                  <LinkExternal02 className='ml-1 h-4 w-4' />
+                </a>
+              </Button>
+              <Button
+                className={cn('my-3 w-[183px] shrink-0')}
+                onClick={() => setIsShowEditWorkflowToolModal(true)}
+                disabled={!isCurrentWorkspaceManager}
+              >
+                <div className='system-sm-medium text-text-secondary'>{t('tools.createTool.editAction')}</div>
+              </Button>
+            </>
+          )}
+        </div>
+        {/* Tools */}
+        <div className='pt-3'>
+          {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
+          {/* Builtin type */}
+          {!isDetailLoading && (collection.type === CollectionType.builtIn) && isAuthed && (
+            <div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'>
+              {t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
+              {needAuth && (
+                <Button
+                  variant='secondary'
+                  size='small'
+                  onClick={() => {
+                    if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
+                      showSettingAuthModal()
+                  }}
+                  disabled={!isCurrentWorkspaceManager}
+                >
+                  <Indicator className='mr-2' color={'green'} />
+                  {t('tools.auth.authorized')}
+                </Button>
+              )}
+            </div>
+          )}
+          {!isDetailLoading && (collection.type === CollectionType.builtIn) && needAuth && !isAuthed && (
+            <>
+              <div className='system-sm-semibold-uppercase text-text-secondary'>
+                <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
+                <span className='px-1'>·</span>
+                <span className='text-util-colors-orange-orange-600'>{t('tools.auth.setup').toLocaleUpperCase()}</span>
+              </div>
+              <Button
+                variant='primary'
+                className={cn('my-3 w-full shrink-0')}
+                onClick={() => {
+                  if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
+                    showSettingAuthModal()
+                }}
+                disabled={!isCurrentWorkspaceManager}
+              >
+                {t('tools.auth.unauthorized')}
+              </Button>
+            </>
+          )}
+          {/* Custom type */}
+          {!isDetailLoading && (collection.type === CollectionType.custom) && (
+            <div className='system-sm-semibold-uppercase text-text-secondary'>
+              <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
+            </div>
+          )}
+          {/* Workflow type */}
+          {!isDetailLoading && (collection.type === CollectionType.workflow) && (
+            <div className='system-sm-semibold-uppercase text-text-secondary'>
+              <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>
+            </div>
+          )}
+          {!isDetailLoading && (
+            <div className='mt-1 py-2'>
+              {collection.type !== CollectionType.workflow && toolList.map(tool => (
+                <ToolItem
+                  key={tool.name}
+                  disabled={false}
+                  // disabled={needAuth && (isBuiltIn || isModel) && !isAuthed}
+                  collection={collection}
+                  tool={tool}
+                  isBuiltIn={isBuiltIn}
+                  isModel={isModel}
+                />
+              ))}
+              {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
+                <div key={item.name} className='mb-1 py-1'>
+                  <div className='mb-1 flex items-center gap-2'>
+                    <span className='code-sm-semibold text-text-secondary'>{item.name}</span>
+                    <span className='system-xs-regular text-text-tertiary'>{item.type}</span>
+                    <span className='system-xs-medium text-text-warning-secondary'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
+                  </div>
+                  <div className='system-xs-regular text-text-tertiary'>{item.llm_description}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        {showSettingAuth && (
+          <ConfigCredential
+            collection={collection}
+            onCancel={() => setShowSettingAuth(false)}
+            onSaved={async (value) => {
+              await updateBuiltInToolCredential(collection.name, value)
+              Toast.notify({
+                type: 'success',
+                message: t('common.api.actionSuccess'),
+              })
+              await onRefreshData()
+              setShowSettingAuth(false)
+            }}
+            onRemove={async () => {
+              await removeBuiltInToolCredential(collection.name)
+              Toast.notify({
+                type: 'success',
+                message: t('common.api.actionSuccess'),
+              })
+              await onRefreshData()
+              setShowSettingAuth(false)
+            }}
+          />
+        )}
+        {isShowEditCollectionToolModal && (
+          <EditCustomToolModal
+            payload={customCollection}
+            onHide={() => setIsShowEditCustomCollectionModal(false)}
+            onEdit={doUpdateCustomToolCollection}
+            onRemove={onClickCustomToolDelete}
+          />
+        )}
+        {isShowEditWorkflowToolModal && (
+          <WorkflowToolModal
+            payload={customCollection}
+            onHide={() => setIsShowEditWorkflowToolModal(false)}
+            onRemove={onClickWorkflowToolDelete}
+            onSave={updateWorkflowToolProvider}
+          />
+        )}
+        {showConfirmDelete && (
+          <Confirm
+            title={t('tools.createTool.deleteToolConfirmTitle')}
+            content={t('tools.createTool.deleteToolConfirmContent')}
+            isShow={showConfirmDelete}
+            onConfirm={handleConfirmDelete}
+            onCancel={() => setShowConfirmDelete(false)}
+          />
+        )}
+      </div>
+    </Drawer>
+  )
+}
+export default ProviderDetail

dify_1.2.0/web/app/components/tools/provider/tool-item.tsx

@@ -0,0 +1,54 @@
+'use client'
+import React, { useState } from 'react'
+import { useContext } from 'use-context-selector'
+import type { Collection, Tool } from '../types'
+import cn from '@/utils/classnames'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
+
+type Props = {
+  disabled?: boolean
+  collection: Collection
+  tool: Tool
+  isBuiltIn: boolean
+  isModel: boolean
+}
+
+const ToolItem = ({
+  disabled,
+  collection,
+  tool,
+  isBuiltIn,
+  isModel,
+}: Props) => {
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const [showDetail, setShowDetail] = useState(false)
+
+  return (
+    <>
+      <div
+        className={cn('bg-components-panel-item-bg mb-2 cursor-pointer rounded-xl border-[0.5px] border-components-panel-border-subtle px-4 py-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover', disabled && '!cursor-not-allowed opacity-50')}
+        onClick={() => !disabled && setShowDetail(true)}
+      >
+        <div className='system-md-semibold pb-0.5 text-text-secondary'>{tool.label[language]}</div>
+        <div className='system-xs-regular line-clamp-2 text-text-tertiary' title={tool.description[language]}>{tool.description[language]}</div>
+      </div>
+      {showDetail && (
+        <SettingBuiltInTool
+          showBackButton
+          collection={collection}
+          toolName={tool.name}
+          readonly
+          onHide={() => {
+            setShowDetail(false)
+          }}
+          isBuiltIn={isBuiltIn}
+          isModel={isModel}
+        />
+      )}
+    </>
+  )
+}
+export default ToolItem

dify_1.2.0/web/app/components/tools/setting/build-in/config-credentials.tsx

@@ -0,0 +1,130 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { addDefaultValue, toolCredentialToFormSchemas } from '../../utils/to-form-schema'
+import type { Collection } from '../../types'
+import cn from '@/utils/classnames'
+import Drawer from '@/app/components/base/drawer-plus'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
+import Loading from '@/app/components/base/loading'
+import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { noop } from 'lodash-es'
+
+type Props = {
+  collection: Collection
+  onCancel: () => void
+  onSaved: (value: Record<string, any>) => void
+  isHideRemoveBtn?: boolean
+  onRemove?: () => void
+  isSaving?: boolean
+}
+
+const ConfigCredential: FC<Props> = ({
+  collection,
+  onCancel,
+  onSaved,
+  isHideRemoveBtn,
+  onRemove = noop,
+  isSaving,
+}) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+  const [credentialSchema, setCredentialSchema] = useState<any>(null)
+  const { name: collectionName } = collection
+  const [tempCredential, setTempCredential] = React.useState<any>({})
+  const [isLoading, setIsLoading] = React.useState(false)
+  useEffect(() => {
+    fetchBuiltInToolCredentialSchema(collectionName).then(async (res) => {
+      const toolCredentialSchemas = toolCredentialToFormSchemas(res)
+      const credentialValue = await fetchBuiltInToolCredential(collectionName)
+      setTempCredential(credentialValue)
+      const defaultCredentials = addDefaultValue(credentialValue, toolCredentialSchemas)
+      setCredentialSchema(toolCredentialSchemas)
+      setTempCredential(defaultCredentials)
+    })
+  }, [])
+
+  const handleSave = async () => {
+    for (const field of credentialSchema) {
+      if (field.required && !tempCredential[field.name]) {
+        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: field.label[language] || field.label.en_US }) })
+        return
+      }
+    }
+    setIsLoading(true)
+    try {
+      await onSaved(tempCredential)
+      setIsLoading(false)
+    }
+    finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Drawer
+      isShow
+      onHide={onCancel}
+      title={t('tools.auth.setupModalTitle') as string}
+      titleDescription={t('tools.auth.setupModalTitleDescription') as string}
+      panelClassName='mt-[64px] mb-2 !w-[420px] border-components-panel-border'
+      maxWidthClassName='!max-w-[420px]'
+      height='calc(100vh - 64px)'
+      contentClassName='!bg-components-panel-bg'
+      headerClassName='!border-b-divider-subtle'
+      body={
+
+        <div className='h-full px-6 py-3'>
+          {!credentialSchema
+            ? <Loading type='app' />
+            : (
+              <>
+                <Form
+                  value={tempCredential}
+                  onChange={(v) => {
+                    setTempCredential(v)
+                  }}
+                  formSchemas={credentialSchema}
+                  isEditMode={true}
+                  showOnVariableMap={{}}
+                  validating={false}
+                  inputClassName='!bg-components-input-bg-normal'
+                  fieldMoreInfo={item => item.url
+                    ? (<a
+                      href={item.url}
+                      target='_blank' rel='noopener noreferrer'
+                      className='inline-flex items-center text-xs text-text-accent'
+                    >
+                      {t('tools.howToGet')}
+                      <LinkExternal02 className='ml-1 h-3 w-3' />
+                    </a>)
+                    : null}
+                />
+                <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex ')} >
+                  {
+                    (collection.is_team_authorization && !isHideRemoveBtn) && (
+                      <Button onClick={onRemove}>{t('common.operation.remove')}</Button>
+                    )
+                  }
+                  < div className='flex space-x-2'>
+                    <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
+                    <Button loading={isLoading || isSaving} disabled={isLoading || isSaving} variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+                  </div>
+                </div>
+              </>
+            )
+          }
+
+        </div >
+      }
+      isShowMask={true}
+      clickOutsideNotOpen={false}
+    />
+  )
+}
+export default React.memo(ConfigCredential)

dify_1.2.0/web/app/components/tools/types.ts

@@ -0,0 +1,170 @@
+import type { TypeWithI18N } from '../header/account-setting/model-provider-page/declarations'
+
+export enum LOC {
+  tools = 'tools',
+  app = 'app',
+}
+
+export enum AuthType {
+  none = 'none',
+  apiKey = 'api_key',
+}
+
+export enum AuthHeaderPrefix {
+  basic = 'basic',
+  bearer = 'bearer',
+  custom = 'custom',
+}
+
+export type Credential = {
+  auth_type: AuthType
+  api_key_header?: string
+  api_key_value?: string
+  api_key_header_prefix?: AuthHeaderPrefix
+}
+
+export enum CollectionType {
+  all = 'all',
+  builtIn = 'builtin',
+  custom = 'api',
+  model = 'model',
+  workflow = 'workflow',
+}
+
+export type Emoji = {
+  background: string
+  content: string
+}
+
+export type Collection = {
+  id: string
+  name: string
+  author: string
+  description: TypeWithI18N
+  icon: string | Emoji
+  label: TypeWithI18N
+  type: CollectionType
+  team_credentials: Record<string, any>
+  is_team_authorization: boolean
+  allow_delete: boolean
+  labels: string[]
+  plugin_id?: string
+  letter?: string
+}
+
+export type ToolParameter = {
+  name: string
+  label: TypeWithI18N
+  human_description: TypeWithI18N
+  type: string
+  form: string
+  llm_description: string
+  required: boolean
+  default: string
+  options?: {
+    label: TypeWithI18N
+    value: string
+  }[]
+  min?: number
+  max?: number
+}
+
+// Action
+export type Tool = {
+  name: string
+  author: string
+  label: TypeWithI18N
+  description: any
+  parameters: ToolParameter[]
+  labels: string[]
+  output_schema: Record<string, any>
+}
+
+export type ToolCredential = {
+  name: string
+  label: TypeWithI18N
+  help: TypeWithI18N | null
+  placeholder: TypeWithI18N
+  type: string
+  required: boolean
+  default: string
+  options?: {
+    label: TypeWithI18N
+    value: string
+  }[]
+}
+
+export type CustomCollectionBackend = {
+  provider: string
+  original_provider?: string
+  credentials: Credential
+  icon: Emoji
+  schema_type: string
+  schema: string
+  privacy_policy: string
+  custom_disclaimer: string
+  tools?: ParamItem[]
+  id: string
+  labels: string[]
+}
+
+export type ParamItem = {
+  name: string
+  label: TypeWithI18N
+  human_description: TypeWithI18N
+  llm_description: string
+  type: string
+  form: string
+  required: boolean
+  default: string
+  min?: number
+  max?: number
+  options?: {
+    label: TypeWithI18N
+    value: string
+  }[]
+}
+
+export type CustomParamSchema = {
+  operation_id: string // name
+  summary: string
+  server_url: string
+  method: string
+  parameters: ParamItem[]
+}
+
+export type WorkflowToolProviderParameter = {
+  name: string
+  form: string
+  description: string
+  required?: boolean
+  type?: string
+}
+
+export type WorkflowToolProviderRequest = {
+  name: string
+  icon: Emoji
+  description: string
+  parameters: WorkflowToolProviderParameter[]
+  labels: string[]
+  privacy_policy: string
+}
+
+export type WorkflowToolProviderResponse = {
+  workflow_app_id: string
+  workflow_tool_id: string
+  label: string
+  name: string
+  icon: Emoji
+  description: string
+  synced: boolean
+  tool: {
+    author: string
+    name: string
+    label: TypeWithI18N
+    description: TypeWithI18N
+    labels: string[]
+    parameters: ParamItem[]
+  }
+  privacy_policy: string
+}

dify_1.2.0/web/app/components/tools/utils/index.ts

@@ -0,0 +1,27 @@
+import type { ThoughtItem } from '@/app/components/base/chat/chat/type'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import type { VisionFile } from '@/types/app'
+
+export const sortAgentSorts = (list: ThoughtItem[]) => {
+  if (!list)
+    return list
+  if (list.some(item => item.position === undefined))
+    return list
+  const temp = [...list]
+  temp.sort((a, b) => a.position - b.position)
+  return temp
+}
+
+export const addFileInfos = (list: ThoughtItem[], messageFiles: (FileEntity | VisionFile)[]) => {
+  if (!list || !messageFiles)
+    return list
+  return list.map((item) => {
+    if (item.files && item.files?.length > 0) {
+      return {
+        ...item,
+        message_files: item.files.map(fileId => messageFiles.find(file => file.id === fileId)) as FileEntity[],
+      }
+    }
+    return item
+  })
+}

dify_1.2.0/web/app/components/tools/utils/to-form-schema.ts

@@ -0,0 +1,96 @@
+import type { ToolCredential, ToolParameter } from '../types'
+export const toType = (type: string) => {
+  switch (type) {
+    case 'string':
+      return 'text-input'
+    case 'number':
+      return 'number-input'
+    default:
+      return type
+  }
+}
+export const toolParametersToFormSchemas = (parameters: ToolParameter[]) => {
+  if (!parameters)
+    return []
+
+  const formSchemas = parameters.map((parameter) => {
+    return {
+      ...parameter,
+      variable: parameter.name,
+      type: toType(parameter.type),
+      _type: parameter.type,
+      show_on: [],
+      options: parameter.options?.map((option) => {
+        return {
+          ...option,
+          show_on: [],
+        }
+      }),
+      tooltip: parameter.human_description,
+    }
+  })
+  return formSchemas
+}
+
+export const toolCredentialToFormSchemas = (parameters: ToolCredential[]) => {
+  if (!parameters)
+    return []
+
+  const formSchemas = parameters.map((parameter) => {
+    return {
+      ...parameter,
+      variable: parameter.name,
+      label: parameter.label,
+      tooltip: parameter.help,
+      show_on: [],
+      options: parameter.options?.map((option) => {
+        return {
+          ...option,
+          show_on: [],
+        }
+      }),
+    }
+  })
+  return formSchemas
+}
+
+export const addDefaultValue = (value: Record<string, any>, formSchemas: { variable: string; default?: any }[]) => {
+  const newValues = { ...value }
+  formSchemas.forEach((formSchema) => {
+    const itemValue = value[formSchema.variable]
+    if ((formSchema.default !== undefined) && (value === undefined || itemValue === null || itemValue === '' || itemValue === undefined))
+      newValues[formSchema.variable] = formSchema.default
+  })
+  return newValues
+}
+
+export const generateFormValue = (value: Record<string, any>, formSchemas: { variable: string; default?: any }[], isReasoning = false) => {
+  const newValues = {} as any
+  formSchemas.forEach((formSchema) => {
+    const itemValue = value[formSchema.variable]
+    if ((formSchema.default !== undefined) && (value === undefined || itemValue === null || itemValue === '' || itemValue === undefined)) {
+      newValues[formSchema.variable] = {
+        ...(isReasoning ? { value: null, auto: 1 } : { value: formSchema.default }),
+      }
+    }
+  })
+  return newValues
+}
+
+export const getPlainValue = (value: Record<string, any>) => {
+  const plainValue = { ...value } as any
+  Object.keys(plainValue).forEach((key) => {
+    plainValue[key] = value[key].value
+  })
+  return plainValue
+}
+
+export const getStructureValue = (value: Record<string, any>) => {
+  const newValue = { ...value } as any
+  Object.keys(newValue).forEach((key) => {
+    newValue[key] = {
+      value: value[key],
+    }
+  })
+  return newValue
+}

dify_1.2.0/web/app/components/tools/workflow-tool/configure-button.tsx

@@ -0,0 +1,258 @@
+'use client'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import { RiArrowRightUpLine, RiHammerLine } from '@remixicon/react'
+import Divider from '../../base/divider'
+import cn from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import WorkflowToolModal from '@/app/components/tools/workflow-tool'
+import Loading from '@/app/components/base/loading'
+import Toast from '@/app/components/base/toast'
+import { createWorkflowToolProvider, fetchWorkflowToolDetailByAppID, saveWorkflowToolProvider } from '@/service/tools'
+import type { Emoji, WorkflowToolProviderParameter, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '@/app/components/tools/types'
+import type { InputVar } from '@/app/components/workflow/types'
+import type { PublishWorkflowParams } from '@/types/workflow'
+import { useAppContext } from '@/context/app-context'
+import { useInvalidateAllWorkflowTools } from '@/service/use-tools'
+
+type Props = {
+  disabled: boolean
+  published: boolean
+  detailNeedUpdate: boolean
+  workflowAppId: string
+  icon: Emoji
+  name: string
+  description: string
+  inputs?: InputVar[]
+  handlePublish: (params?: PublishWorkflowParams) => Promise<void>
+  onRefreshData?: () => void
+}
+
+const WorkflowToolConfigureButton = ({
+  disabled,
+  published,
+  detailNeedUpdate,
+  workflowAppId,
+  icon,
+  name,
+  description,
+  inputs,
+  handlePublish,
+  onRefreshData,
+}: Props) => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const [showModal, setShowModal] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [detail, setDetail] = useState<WorkflowToolProviderResponse>()
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const invalidateAllWorkflowTools = useInvalidateAllWorkflowTools()
+
+  const outdated = useMemo(() => {
+    if (!detail)
+      return false
+    if (detail.tool.parameters.length !== inputs?.length) {
+      return true
+    }
+    else {
+      for (const item of inputs || []) {
+        const param = detail.tool.parameters.find(toolParam => toolParam.name === item.variable)
+        if (!param) {
+          return true
+        }
+        else if (param.required !== item.required) {
+          return true
+        }
+        else {
+          if (item.type === 'paragraph' && param.type !== 'string')
+            return true
+          if (item.type === 'text-input' && param.type !== 'string')
+            return true
+        }
+      }
+    }
+    return false
+  }, [detail, inputs])
+
+  const payload = useMemo(() => {
+    let parameters: WorkflowToolProviderParameter[] = []
+    if (!published) {
+      parameters = (inputs || []).map((item) => {
+        return {
+          name: item.variable,
+          description: '',
+          form: 'llm',
+          required: item.required,
+          type: item.type,
+        }
+      })
+    }
+    else if (detail && detail.tool) {
+      parameters = (inputs || []).map((item) => {
+        return {
+          name: item.variable,
+          required: item.required,
+          type: item.type === 'paragraph' ? 'string' : item.type,
+          description: detail.tool.parameters.find(param => param.name === item.variable)?.llm_description || '',
+          form: detail.tool.parameters.find(param => param.name === item.variable)?.form || 'llm',
+        }
+      })
+    }
+    return {
+      icon: detail?.icon || icon,
+      label: detail?.label || name,
+      name: detail?.name || '',
+      description: detail?.description || description,
+      parameters,
+      labels: detail?.tool?.labels || [],
+      privacy_policy: detail?.privacy_policy || '',
+      ...(published
+        ? {
+          workflow_tool_id: detail?.workflow_tool_id,
+        }
+        : {
+          workflow_app_id: workflowAppId,
+        }),
+    }
+  }, [detail, published, workflowAppId, icon, name, description, inputs])
+
+  const getDetail = useCallback(async (workflowAppId: string) => {
+    setIsLoading(true)
+    const res = await fetchWorkflowToolDetailByAppID(workflowAppId)
+    setDetail(res)
+    setIsLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (published)
+      getDetail(workflowAppId)
+  }, [getDetail, published, workflowAppId])
+
+  useEffect(() => {
+    if (detailNeedUpdate)
+      getDetail(workflowAppId)
+  }, [detailNeedUpdate, getDetail, workflowAppId])
+
+  const createHandle = async (data: WorkflowToolProviderRequest & { workflow_app_id: string }) => {
+    try {
+      await createWorkflowToolProvider(data)
+      invalidateAllWorkflowTools()
+      onRefreshData?.()
+      getDetail(workflowAppId)
+      Toast.notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+      setShowModal(false)
+    }
+    catch (e) {
+      Toast.notify({ type: 'error', message: (e as Error).message })
+    }
+  }
+
+  const updateWorkflowToolProvider = async (data: WorkflowToolProviderRequest & Partial<{
+    workflow_app_id: string
+    workflow_tool_id: string
+  }>) => {
+    try {
+      await handlePublish()
+      await saveWorkflowToolProvider(data)
+      onRefreshData?.()
+      invalidateAllWorkflowTools()
+      getDetail(workflowAppId)
+      Toast.notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+      setShowModal(false)
+    }
+    catch (e) {
+      Toast.notify({ type: 'error', message: (e as Error).message })
+    }
+  }
+
+  return (
+    <>
+      <Divider type='horizontal' className='h-[1px] bg-divider-subtle' />
+      {(!published || !isLoading) && (
+        <div className={cn(
+          'group rounded-lg bg-background-section-burn transition-colors',
+          disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer',
+          !disabled && !published && 'hover:bg-state-accent-hover',
+        )}>
+          {isCurrentWorkspaceManager
+            ? (
+              <div
+                className='flex items-center justify-start gap-2 p-2 pl-2.5'
+                onClick={() => !disabled && !published && setShowModal(true)}
+              >
+                <RiHammerLine className={cn('relative h-4 w-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
+                <div
+                  title={t('workflow.common.workflowAsTool') || ''}
+                  className={cn('system-sm-medium shrink grow basis-0 truncate text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')}
+                >
+                  {t('workflow.common.workflowAsTool')}
+                </div>
+                {!published && (
+                  <span className='system-2xs-medium-uppercase shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 text-text-tertiary'>
+                    {t('workflow.common.configureRequired')}
+                  </span>
+                )}
+              </div>)
+            : (
+              <div
+                className='flex items-center justify-start gap-2 p-2 pl-2.5'
+              >
+                <RiHammerLine className='h-4 w-4 text-text-tertiary' />
+                <div
+                  title={t('workflow.common.workflowAsTool') || ''}
+                  className='system-sm-medium shrink grow basis-0 truncate text-text-tertiary'
+                >
+                  {t('workflow.common.workflowAsTool')}
+                </div>
+              </div>
+            )}
+          {published && (
+            <div className='border-t-[0.5px] border-divider-regular px-2.5 py-2'>
+              <div className='flex justify-between gap-x-2'>
+                <Button
+                  size='small'
+                  className='w-[140px]'
+                  onClick={() => setShowModal(true)}
+                  disabled={!isCurrentWorkspaceManager}
+                >
+                  {t('workflow.common.configure')}
+                  {outdated && <Indicator className='ml-1' color={'yellow'} />}
+                </Button>
+                <Button
+                  size='small'
+                  className='w-[140px]'
+                  onClick={() => router.push('/tools?category=workflow')}
+                >
+                  {t('workflow.common.manageInTools')}
+                  <RiArrowRightUpLine className='ml-1 h-4 w-4' />
+                </Button>
+              </div>
+              {outdated && <div className='mt-1 text-xs leading-[18px] text-text-warning'>
+                {t('workflow.common.workflowAsToolTip')}
+              </div>}
+            </div>
+          )}
+        </div>
+      )}
+      {published && isLoading && <div className='pt-2'><Loading type='app' /></div>}
+      {showModal && (
+        <WorkflowToolModal
+          isAdd={!published}
+          payload={payload}
+          onHide={() => setShowModal(false)}
+          onCreate={createHandle}
+          onSave={updateWorkflowToolProvider}
+        />
+      )}
+    </>
+  )
+}
+export default WorkflowToolConfigureButton

dify_1.2.0/web/app/components/tools/workflow-tool/confirm-modal/index.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+import Modal from '@/app/components/base/modal'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import { noop } from 'lodash-es'
+
+type ConfirmModalProps = {
+  show: boolean
+  onConfirm?: () => void
+  onClose: () => void
+}
+
+const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal
+      className={cn('w-[600px] max-w-[600px] p-8')}
+      isShow={show}
+      onClose={noop}
+    >
+      <div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onClose}>
+        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+      </div>
+      <div className='h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-section p-3 shadow-xl'>
+        <AlertTriangle className='h-6 w-6 text-[rgb(247,144,9)]' />
+      </div>
+      <div className='relative mt-3 text-xl font-semibold leading-[30px] text-text-primary'>{t('tools.createTool.confirmTitle')}</div>
+      <div className='my-1 text-sm leading-5 text-text-tertiary'>
+        {t('tools.createTool.confirmTip')}
+      </div>
+      <div className='flex items-center justify-end pt-6'>
+        <div className='flex items-center'>
+          <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
+          <Button variant="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default ConfirmModal

dify_1.2.0/web/app/components/tools/workflow-tool/index.tsx

@@ -0,0 +1,282 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import type { Emoji, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
+import cn from '@/utils/classnames'
+import Drawer from '@/app/components/base/drawer-plus'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import EmojiPicker from '@/app/components/base/emoji-picker'
+import AppIcon from '@/app/components/base/app-icon'
+import MethodSelector from '@/app/components/tools/workflow-tool/method-selector'
+import LabelSelector from '@/app/components/tools/labels/selector'
+import ConfirmModal from '@/app/components/tools/workflow-tool/confirm-modal'
+import Tooltip from '@/app/components/base/tooltip'
+
+type Props = {
+  isAdd?: boolean
+  payload: any
+  onHide: () => void
+  onRemove?: () => void
+  onCreate?: (payload: WorkflowToolProviderRequest & { workflow_app_id: string }) => void
+  onSave?: (payload: WorkflowToolProviderRequest & Partial<{
+    workflow_app_id: string
+    workflow_tool_id: string
+  }>) => void
+}
+// Add and Edit
+const WorkflowToolAsModal: FC<Props> = ({
+  isAdd,
+  payload,
+  onHide,
+  onRemove,
+  onSave,
+  onCreate,
+}) => {
+  const { t } = useTranslation()
+
+  const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false)
+  const [emoji, setEmoji] = useState<Emoji>(payload.icon)
+  const [label, setLabel] = useState<string>(payload.label)
+  const [name, setName] = useState(payload.name)
+  const [description, setDescription] = useState(payload.description)
+  const [parameters, setParameters] = useState<WorkflowToolProviderParameter[]>(payload.parameters)
+  const handleParameterChange = (key: string, value: string, index: number) => {
+    const newData = produce(parameters, (draft: WorkflowToolProviderParameter[]) => {
+      if (key === 'description')
+        draft[index].description = value
+      else
+        draft[index].form = value
+    })
+    setParameters(newData)
+  }
+  const [labels, setLabels] = useState<string[]>(payload.labels)
+  const handleLabelSelect = (value: string[]) => {
+    setLabels(value)
+  }
+  const [privacyPolicy, setPrivacyPolicy] = useState(payload.privacy_policy)
+  const [showModal, setShowModal] = useState(false)
+
+  const isNameValid = (name: string) => {
+    // when the user has not input anything, no need for a warning
+    if (name === '')
+      return true
+
+    return /^[a-zA-Z0-9_]+$/.test(name)
+  }
+
+  const onConfirm = () => {
+    let errorMessage = ''
+    if (!label)
+      errorMessage = t('common.errorMsg.fieldRequired', { field: t('tools.createTool.name') })
+
+    if (!name)
+      errorMessage = t('common.errorMsg.fieldRequired', { field: t('tools.createTool.nameForToolCall') })
+
+    if (!isNameValid(name))
+      errorMessage = t('tools.createTool.nameForToolCall') + t('tools.createTool.nameForToolCallTip')
+
+    if (errorMessage) {
+      Toast.notify({
+        type: 'error',
+        message: errorMessage,
+      })
+      return
+    }
+
+    const requestParams = {
+      name,
+      description,
+      icon: emoji,
+      label,
+      parameters: parameters.map(item => ({
+        name: item.name,
+        description: item.description,
+        form: item.form,
+      })),
+      labels,
+      privacy_policy: privacyPolicy,
+    }
+    if (!isAdd) {
+      onSave?.({
+        ...requestParams,
+        workflow_tool_id: payload.workflow_tool_id,
+      })
+    }
+    else {
+      onCreate?.({
+        ...requestParams,
+        workflow_app_id: payload.workflow_app_id,
+      })
+    }
+  }
+
+  return (
+    <>
+      <Drawer
+        isShow
+        onHide={onHide}
+        title={t('workflow.common.workflowAsTool')!}
+        panelClassName='mt-2 !w-[640px]'
+        maxWidthClassName='!max-w-[640px]'
+        height='calc(100vh - 16px)'
+        headerClassName='!border-b-divider'
+        body={
+          <div className='flex h-full flex-col'>
+            <div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
+              {/* name & icon */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
+                <div className='flex items-center justify-between gap-3'>
+                  <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' iconType='emoji' icon={emoji.content} background={emoji.background} />
+                  <Input
+                    className='h-10 grow'
+                    placeholder={t('tools.createTool.toolNamePlaceHolder')!}
+                    value={label}
+                    onChange={e => setLabel(e.target.value)}
+                  />
+                </div>
+              </div>
+              {/* name for tool call */}
+              <div>
+                <div className='system-sm-medium flex items-center py-2 text-text-primary'>
+                  {t('tools.createTool.nameForToolCall')} <span className='ml-1 text-red-500'>*</span>
+                  <Tooltip
+                    popupContent={
+                      <div className='w-[180px]'>
+                        {t('tools.createTool.nameForToolCallPlaceHolder')}
+                      </div>
+                    }
+                  />
+                </div>
+                <Input
+                  className='h-10'
+                  placeholder={t('tools.createTool.nameForToolCallPlaceHolder')!}
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                />
+                {!isNameValid(name) && (
+                  <div className='text-xs leading-[18px] text-red-500'>{t('tools.createTool.nameForToolCallTip')}</div>
+                )}
+              </div>
+              {/* description */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.description')}</div>
+                <Textarea
+                  placeholder={t('tools.createTool.descriptionPlaceholder') || ''}
+                  value={description}
+                  onChange={e => setDescription(e.target.value)}
+                />
+              </div>
+              {/* Tool Input  */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.title')}</div>
+                <div className='w-full overflow-x-auto rounded-lg border border-divider-regular'>
+                  <table className='w-full text-xs font-normal leading-[18px] text-text-secondary'>
+                    <thead className='uppercase text-text-tertiary'>
+                      <tr className='border-b border-divider-regular'>
+                        <th className="w-[156px] p-2 pl-3 font-medium">{t('tools.createTool.toolInput.name')}</th>
+                        <th className="w-[102px] p-2 pl-3 font-medium">{t('tools.createTool.toolInput.method')}</th>
+                        <th className="p-2 pl-3 font-medium">{t('tools.createTool.toolInput.description')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {parameters.map((item, index) => (
+                        <tr key={index} className='border-b border-divider-regular last:border-0'>
+                          <td className="max-w-[156px] p-2 pl-3">
+                            <div className='text-[13px] leading-[18px]'>
+                              <div title={item.name} className='flex'>
+                                <span className='truncate font-medium text-text-primary'>{item.name}</span>
+                                <span className='shrink-0 pl-1 text-xs leading-[18px] text-[#ec4a0a]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
+                              </div>
+                              <div className='text-text-tertiary'>{item.type}</div>
+                            </div>
+                          </td>
+                          <td>
+                            {item.name === '__image' && (
+                              <div className={cn(
+                                'flex h-9 min-h-[56px] cursor-default items-center gap-1 bg-transparent px-3 py-2',
+                              )}>
+                                <div className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary')}>
+                                  {t('tools.createTool.toolInput.methodParameter')}
+                                </div>
+                              </div>
+                            )}
+                            {item.name !== '__image' && (
+                              <MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)} />
+                            )}
+                          </td>
+                          <td className="w-[236px] p-2 pl-3 text-text-tertiary">
+                            <input
+                              type='text'
+                              className='w-full appearance-none bg-transparent text-[13px] font-normal leading-[18px] text-text-secondary caret-primary-600 outline-none placeholder:text-text-quaternary'
+                              placeholder={t('tools.createTool.toolInput.descriptionPlaceholder')!}
+                              value={item.description}
+                              onChange={e => handleParameterChange('description', e.target.value, index)}
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              {/* Tags */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
+                <LabelSelector value={labels} onChange={handleLabelSelect} />
+              </div>
+              {/* Privacy Policy */}
+              <div>
+                <div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
+                <Input
+                  className='h-10'
+                  value={privacyPolicy}
+                  onChange={e => setPrivacyPolicy(e.target.value)}
+                  placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
+              </div>
+            </div>
+            <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')} >
+              {!isAdd && onRemove && (
+                <Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
+              )}
+              <div className='flex space-x-2 '>
+                <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+                <Button variant='primary' onClick={() => {
+                  if (isAdd)
+                    onConfirm()
+                  else
+                    setShowModal(true)
+                }}>{t('common.operation.save')}</Button>
+              </div>
+            </div>
+          </div>
+        }
+        isShowMask={true}
+        clickOutsideNotOpen={true}
+      />
+      {showEmojiPicker && <EmojiPicker
+        onSelect={(icon, icon_background) => {
+          setEmoji({ content: icon, background: icon_background })
+          setShowEmojiPicker(false)
+        }}
+        onClose={() => {
+          setShowEmojiPicker(false)
+        }}
+      />}
+      {showModal && (
+        <ConfirmModal
+          show={showModal}
+          onClose={() => setShowModal(false)}
+          onConfirm={onConfirm}
+        />
+      )}
+    </>
+
+  )
+}
+export default React.memo(WorkflowToolAsModal)

dify_1.2.0/web/app/components/tools/workflow-tool/method-selector.tsx

@@ -0,0 +1,77 @@
+import type { FC } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+
+type MethodSelectorProps = {
+  value?: string
+  onChange: (v: string) => void
+}
+const MethodSelector: FC<MethodSelectorProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => setOpen(v => !v)}
+          className='block'
+        >
+          <div className={cn(
+            'flex h-9 min-h-[56px] cursor-pointer items-center gap-1 bg-transparent px-3 py-2 hover:bg-background-section-burn',
+            open && '!bg-background-section-burn hover:bg-background-section-burn',
+          )}>
+            <div className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary')}>
+              {value === 'llm' ? t('tools.createTool.toolInput.methodParameter') : t('tools.createTool.toolInput.methodSetting')}
+            </div>
+            <div className='ml-1 shrink-0 text-text-secondary opacity-60'>
+              <RiArrowDownSLine className='h-4 w-4' />
+            </div>
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1040]'>
+          <div className='relative w-[320px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg  backdrop-blur-sm'>
+            <div className='p-1'>
+              <div className='cursor-pointer rounded-lg py-2.5 pl-3 pr-2 hover:bg-components-panel-on-panel-item-bg-hover' onClick={() => onChange('llm')}>
+                <div className='item-center flex gap-1'>
+                  <div className='h-4 w-4 shrink-0'>
+                    {value === 'llm' && <Check className='h-4 w-4 shrink-0 text-text-accent' />}
+                  </div>
+                  <div className='text-[13px] font-medium leading-[18px] text-text-secondary'>{t('tools.createTool.toolInput.methodParameter')}</div>
+                </div>
+                <div className='pl-5 text-[13px] leading-[18px] text-text-tertiary'>{t('tools.createTool.toolInput.methodParameterTip')}</div>
+              </div>
+              <div className='cursor-pointer rounded-lg py-2.5 pl-3 pr-2 hover:bg-components-panel-on-panel-item-bg-hover' onClick={() => onChange('form')}>
+                <div className='item-center flex gap-1'>
+                  <div className='h-4 w-4 shrink-0'>
+                    {value === 'form' && <Check className='h-4 w-4 shrink-0 text-text-accent' />}
+                  </div>
+                  <div className='text-[13px] font-medium leading-[18px] text-text-secondary'>{t('tools.createTool.toolInput.methodSetting')}</div>
+                </div>
+                <div className='pl-5 text-[13px] leading-[18px] text-text-tertiary'>{t('tools.createTool.toolInput.methodSettingTip')}</div>
+              </div>
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default MethodSelector