fix: improve workflow as tool overlays (#35661)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

eslint-suppressions.json

@@ -3820,21 +3820,6 @@
       "count": 4
     }
   },
-  "web/app/components/tools/workflow-tool/confirm-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/tools/workflow-tool/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/tools/workflow-tool/method-selector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow-app/components/workflow-children.tsx": {
     "ts/no-explicit-any": {
       "count": 3

web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx

@@ -9,6 +9,8 @@ import WorkflowToolConfigureButton from '../configure-button'
 import WorkflowToolAsModal from '../index'
 import MethodSelector from '../method-selector'
 
+vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
+
 // Mock Next.js navigation
 const mockPush = vi.fn()
 vi.mock('@/next/navigation', () => ({
@@ -83,12 +85,11 @@ vi.mock('@/app/components/base/drawer-plus', () => ({
   },
 }))
 
-// Mock EmojiPicker - simplified for testing
-vi.mock('@/app/components/base/emoji-picker', () => ({
-  default: ({ onSelect, onClose }: { onSelect: (icon: string, background: string) => void, onClose: () => void }) => (
+// Mock EmojiPickerInner - simplified for testing
+vi.mock('@/app/components/base/emoji-picker/Inner', () => ({
+  default: ({ onSelect }: { onSelect: (icon: string, background: string) => void }) => (
     <div data-testid="emoji-picker">
       <button data-testid="select-emoji" onClick={() => onSelect('🚀', '#f0f0f0')}>Select Emoji</button>
-      <button data-testid="close-emoji-picker" onClick={onClose}>Close</button>
     </div>
   ),
 }))
@@ -978,6 +979,7 @@ describe('WorkflowToolAsModal', () => {
 
       // Select emoji
       await user.click(screen.getByTestId('select-emoji'))
+      await user.click(screen.getByRole('button', { name: 'app.iconPicker.ok' }))
 
       // Assert
       const updatedIcon = screen.getByTestId('app-icon')
@@ -1002,7 +1004,7 @@ describe('WorkflowToolAsModal', () => {
 
       expect(screen.getByTestId('emoji-picker'))!.toBeInTheDocument()
 
-      await user.click(screen.getByTestId('close-emoji-picker'))
+      await user.click(screen.getByRole('button', { name: 'app.iconPicker.cancel' }))
 
       // Assert
       // Assert
@@ -1501,7 +1503,7 @@ describe('MethodSelector', () => {
 
       // Assert
       // Assert
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
     })
 
     it('should display parameter method text when value is llm', () => {
@@ -1562,11 +1564,11 @@ describe('MethodSelector', () => {
 
       // Act
       render(<MethodSelector {...props} />)
-      await user.click(screen.getByTestId('portal-trigger'))
+      await user.click(screen.getByTestId('popover-trigger'))
 
       // Assert
       // Assert
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should call onChange with llm when parameter option clicked', async () => {
@@ -1580,7 +1582,7 @@ describe('MethodSelector', () => {
 
       // Act
       render(<MethodSelector {...props} />)
-      await user.click(screen.getByTestId('portal-trigger'))
+      await user.click(screen.getByTestId('popover-trigger'))
 
       const paramOption = screen.getAllByText('tools.createTool.toolInput.methodParameter')[0]
       await user.click(paramOption!)
@@ -1600,7 +1602,7 @@ describe('MethodSelector', () => {
 
       // Act
       render(<MethodSelector {...props} />)
-      await user.click(screen.getByTestId('portal-trigger'))
+      await user.click(screen.getByTestId('popover-trigger'))
 
       const settingOption = screen.getByText('tools.createTool.toolInput.methodSetting')
       await user.click(settingOption)
@@ -1621,12 +1623,12 @@ describe('MethodSelector', () => {
       render(<MethodSelector {...props} />)
 
       // First click - open
-      await user.click(screen.getByTestId('portal-trigger'))
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      await user.click(screen.getByTestId('popover-trigger'))
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
 
       // Second click - close
-      await user.click(screen.getByTestId('portal-trigger'))
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+      await user.click(screen.getByTestId('popover-trigger'))
+      expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
     })
   })
 
@@ -1642,10 +1644,10 @@ describe('MethodSelector', () => {
 
       // Act
       render(<MethodSelector {...props} />)
-      await user.click(screen.getByTestId('portal-trigger'))
+      await user.click(screen.getByTestId('popover-trigger'))
 
       // Assert - the first option (llm) should have a check icon container
-      const content = screen.getByTestId('portal-content')
+      const content = screen.getByTestId('popover-content')
       expect(content)!.toBeInTheDocument()
     })
 
@@ -1659,10 +1661,10 @@ describe('MethodSelector', () => {
 
       // Act
       render(<MethodSelector {...props} />)
-      await user.click(screen.getByTestId('portal-trigger'))
+      await user.click(screen.getByTestId('popover-trigger'))
 
       // Assert
-      const content = screen.getByTestId('portal-content')
+      const content = screen.getByTestId('popover-content')
       expect(content)!.toBeInTheDocument()
     })
   })

web/app/components/tools/workflow-tool/__tests__/index.spec.tsx

@@ -18,11 +18,10 @@ vi.mock('@/app/components/base/drawer-plus', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/emoji-picker', () => ({
-  default: ({ onSelect, onClose }: { onSelect: (icon: string, background: string) => void, onClose: () => void }) => (
+vi.mock('@/app/components/base/emoji-picker/Inner', () => ({
+  default: ({ onSelect }: { onSelect: (icon: string, background: string) => void }) => (
     <div data-testid="emoji-picker">
       <button data-testid="select-emoji" onClick={() => onSelect('🚀', '#000000')}>Emoji</button>
-      <button data-testid="close-emoji-picker" onClick={onClose}>Close</button>
     </div>
   ),
 }))
@@ -129,6 +128,7 @@ describe('WorkflowToolAsModal', () => {
     await user.click(screen.getByTestId('append-label'))
     await user.click(screen.getByTestId('app-icon'))
     await user.click(screen.getByTestId('select-emoji'))
+    await user.click(screen.getByRole('button', { name: 'app.iconPicker.ok' }))
     await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
     expect(onCreate).toHaveBeenCalledWith(expect.objectContaining({
@@ -195,6 +195,6 @@ describe('WorkflowToolAsModal', () => {
       />,
     )
 
-    expect(screen.getAllByText('tools.createTool.toolOutput.reservedParameterDuplicateTip').length).toBeGreaterThan(0)
+    expect(screen.getAllByTestId('reserved-output-warning').length).toBeGreaterThan(0)
   })
 })

web/app/components/tools/workflow-tool/__tests__/method-selector.spec.tsx

@@ -4,6 +4,8 @@ import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import MethodSelector from '../method-selector'
 
+vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
+
 // Test utilities
 const defaultProps: ComponentProps<typeof MethodSelector> = {
   value: 'llm',
@@ -139,6 +141,24 @@ describe('MethodSelector', () => {
       expect(onChange).toHaveBeenCalledWith('form')
     })
 
+    it('should close dropdown after an option is clicked', async () => {
+      const user = userEvent.setup()
+      renderComponent({ value: 'llm' })
+
+      const trigger = screen.getByText('tools.createTool.toolInput.methodParameter')
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(screen.getByText('tools.createTool.toolInput.methodSettingTip'))!.toBeInTheDocument()
+      })
+
+      await user.click(screen.getByText('tools.createTool.toolInput.methodSettingTip'))
+
+      await waitFor(() => {
+        expect(screen.queryByText('tools.createTool.toolInput.methodSettingTip')).not.toBeInTheDocument()
+      })
+    })
+
     it('should toggle dropdown open state', async () => {
       const user = userEvent.setup()
       renderComponent()
@@ -235,10 +255,9 @@ describe('MethodSelector', () => {
       await user.click(trigger)
 
       await waitFor(() => {
+        expect(screen.getByTestId('popover-content')).toBeInTheDocument()
         const dropdown = document.querySelector('.w-\\[320px\\]')
         expect(dropdown)!.toBeInTheDocument()
-        expect(dropdown)!.toHaveClass('rounded-lg')
-        expect(dropdown)!.toHaveClass('shadow-lg')
       })
     })
 

web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx

@@ -93,13 +93,12 @@ describe('ConfirmModal', () => {
       // Arrange & Act
       renderComponent()
 
-      // Assert - Check for the dialog panel with modal content
-      // The real modal structure has nested divs, we need to find the one with our classes
-      const dialogContent = document.querySelector('.relative.rounded-2xl')
+      // Assert
+      const dialogContent = screen.getByRole('dialog')
       expect(dialogContent).toBeInTheDocument()
-      expect(dialogContent).toHaveClass('w-[600px]')
-      expect(dialogContent).toHaveClass('max-w-[600px]')
-      expect(dialogContent).toHaveClass('p-8')
+      expect(dialogContent).toHaveClass('w-[600px]!')
+      expect(dialogContent).toHaveClass('max-w-[600px]!')
+      expect(dialogContent).toHaveClass('p-8!')
     })
   })
 

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

@@ -2,11 +2,9 @@
 
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'es-toolkit/function'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { useTranslation } from 'react-i18next'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
-import Modal from '@/app/components/base/modal'
 
 type ConfirmModalProps = {
   show: boolean
@@ -18,28 +16,29 @@ 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 top-4 right-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 leading-[30px] font-semibold text-text-primary">{t('createTool.confirmTitle', { ns: 'tools' })}</div>
-      <div className="my-1 text-sm leading-5 text-text-tertiary">
-        {t('createTool.confirmTip', { ns: 'tools' })}
-      </div>
-      <div className="flex items-center justify-end pt-6">
-        <div className="flex items-center">
-          <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-          <Button variant="primary" tone="destructive" onClick={onConfirm}>{t('operation.confirm', { ns: 'common' })}</Button>
+    <Dialog open={show} disablePointerDismissal>
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className={cn('w-[600px]! max-w-[600px]! p-8!')}
+      >
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
         </div>
-      </div>
-    </Modal>
+        <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>
+        <DialogTitle className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('createTool.confirmTitle', { ns: 'tools' })}</DialogTitle>
+        <div className="my-1 text-sm leading-5 text-text-tertiary">
+          {t('createTool.confirmTip', { ns: 'tools' })}
+        </div>
+        <div className="flex items-center justify-end pt-6">
+          <div className="flex items-center">
+            <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
+            <Button variant="primary" tone="destructive" onClick={onConfirm}>{t('operation.confirm', { ns: 'common' })}</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 

web/app/components/tools/workflow-tool/hooks/__tests__/use-configure-button.spec.ts

@@ -437,7 +437,6 @@ describe('useConfigureButton', () => {
       expect(onRefreshData).toHaveBeenCalled()
       expect(mockInvalidateAllWorkflowTools).toHaveBeenCalled()
       expect(mockInvalidateWorkflowToolDetailByAppID).toHaveBeenCalledWith('app-123')
-      expect(mockToastNotify).toHaveBeenCalledWith({ type: 'success', message: expect.any(String) })
       expect(result.current.showModal).toBe(false)
     })
 

web/app/components/tools/workflow-tool/hooks/use-configure-button.ts

@@ -206,7 +206,6 @@ export function useConfigureButton(options: UseConfigureButtonOptions) {
       onRefreshData?.()
       invalidateAllWorkflowTools()
       invalidateDetail(workflowAppId)
-      toast.success(t('api.actionSuccess', { ns: 'common' }))
       setShowModal(false)
     }
     catch (e) {

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

@@ -3,18 +3,18 @@ import type { FC } from 'react'
 import type { Emoji, WorkflowToolProviderOutputParameter, WorkflowToolProviderOutputSchema, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
-import { RiErrorWarningLine } from '@remixicon/react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Drawer from '@/app/components/base/drawer-plus'
-import EmojiPicker from '@/app/components/base/emoji-picker'
+import Divider from '@/app/components/base/divider'
+import EmojiPickerInner from '@/app/components/base/emoji-picker/Inner'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import Tooltip from '@/app/components/base/tooltip'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import ConfirmModal from '@/app/components/tools/workflow-tool/confirm-modal'
 import MethodSelector from '@/app/components/tools/workflow-tool/method-selector'
@@ -53,6 +53,111 @@ type Props = {
     workflow_tool_id: string
   }>) => void
 }
+
+type WorkflowToolDrawerProps = {
+  title: string
+  onHide: () => void
+  children: React.ReactNode
+}
+
+const InfoTooltip = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={(
+          <span className="i-ri-question-line h-3.5 w-3.5 shrink-0 cursor-help text-text-quaternary hover:text-text-tertiary" />
+        )}
+      />
+      <TooltipContent>
+        <div className="w-[180px]">
+          {children}
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+const WorkflowToolDrawer = ({ title, onHide, children }: WorkflowToolDrawerProps) => {
+  return (
+    <Dialog open disablePointerDismissal>
+      <DialogContent
+        className={cn(
+          'top-2 right-2 bottom-2 left-auto h-[calc(100dvh-16px)] max-h-[calc(100dvh-16px)] w-[640px]! max-w-[calc(100vw-16px)]! translate-x-0! translate-y-0! overflow-hidden rounded-xl border-none bg-transparent p-0 shadow-none',
+          'data-ending-style:translate-x-4 data-ending-style:scale-100 data-starting-style:translate-x-4 data-starting-style:scale-100',
+        )}
+        backdropClassName="bg-background-overlay"
+      >
+        <div data-testid="drawer" className="flex h-full w-full flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg shadow-xl">
+          <div className="shrink-0 border-b border-divider-subtle py-4">
+            <div className="flex h-6 items-center justify-between pr-5 pl-6">
+              <DialogTitle data-testid="drawer-title" className="system-xl-semibold text-text-primary">
+                {title}
+              </DialogTitle>
+              <button
+                type="button"
+                data-testid="drawer-close"
+                className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover"
+                aria-label="Close"
+                onClick={onHide}
+              >
+                <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+              </button>
+            </div>
+          </div>
+          <div className="grow overflow-hidden">
+            {children}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+type WorkflowToolEmojiPickerProps = {
+  onSelect: (icon: string, background: string) => void
+  onClose: () => void
+}
+
+const WorkflowToolEmojiPicker = ({ onSelect, onClose }: WorkflowToolEmojiPickerProps) => {
+  const { t } = useTranslation()
+  const [selectedEmoji, setSelectedEmoji] = useState('')
+  const [selectedBackground, setSelectedBackground] = useState<string>()
+
+  return (
+    <Dialog open disablePointerDismissal>
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="flex max-h-[552px] w-[480px]! flex-col overflow-hidden rounded-xl border-[0.5px] border-divider-subtle p-0! shadow-xl"
+      >
+        <DialogTitle className="sr-only">
+          {t('iconPicker.emoji', { ns: 'app' })}
+        </DialogTitle>
+        <EmojiPickerInner
+          className="pt-3"
+          onSelect={(emoji, background) => {
+            setSelectedEmoji(emoji)
+            setSelectedBackground(background)
+          }}
+        />
+        <Divider className="mt-3 mb-0" />
+        <div className="flex w-full items-center justify-center gap-2 p-3">
+          <Button className="w-full" onClick={onClose}>
+            {t('iconPicker.cancel', { ns: 'app' })}
+          </Button>
+          <Button
+            disabled={selectedEmoji === '' || !selectedBackground}
+            variant="primary"
+            className="w-full"
+            onClick={() => onSelect(selectedEmoji, selectedBackground!)}
+          >
+            {t('iconPicker.ok', { ns: 'app' })}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
 // Add and Edit
 const WorkflowToolAsModal: FC<Props> = ({
   isAdd,
@@ -138,210 +243,201 @@ const WorkflowToolAsModal: FC<Props> = ({
 
   return (
     <>
-      <Drawer
-        isShow
+      <WorkflowToolDrawer
         onHide={onHide}
         title={t('common.workflowAsTool', { ns: 'workflow' })!}
-        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="py-2 system-sm-medium text-text-primary">
-                  {t('createTool.name', { ns: 'tools' })}
-                  {' '}
-                  <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('createTool.toolNamePlaceHolder', { ns: 'tools' })!}
-                    value={label}
-                    onChange={e => setLabel(e.target.value)}
-                  />
-                </div>
+      >
+        <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="py-2 system-sm-medium text-text-primary">
+                {t('createTool.name', { ns: 'tools' })}
+                {' '}
+                <span className="ml-1 text-red-500">*</span>
               </div>
-              {/* name for tool call */}
-              <div>
-                <div className="flex items-center py-2 system-sm-medium text-text-primary">
-                  {t('createTool.nameForToolCall', { ns: 'tools' })}
-                  {' '}
-                  <span className="ml-1 text-red-500">*</span>
-                  <Tooltip
-                    popupContent={(
-                      <div className="w-[180px]">
-                        {t('createTool.nameForToolCallPlaceHolder', { ns: 'tools' })}
-                      </div>
-                    )}
-                  />
-                </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"
-                  placeholder={t('createTool.nameForToolCallPlaceHolder', { ns: 'tools' })!}
-                  value={name}
-                  onChange={e => setName(e.target.value)}
-                />
-                {!isWorkflowToolNameValid(name) && (
-                  <div className="text-xs leading-[18px] text-red-500">{t('createTool.nameForToolCallTip', { ns: 'tools' })}</div>
-                )}
-              </div>
-              {/* description */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.description', { ns: 'tools' })}</div>
-                <Textarea
-                  placeholder={t('createTool.descriptionPlaceholder', { ns: 'tools' }) || ''}
-                  value={description}
-                  onChange={e => setDescription(e.target.value)}
-                />
-              </div>
-              {/* Tool Input  */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolInput.title', { ns: 'tools' })}</div>
-                <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
-                  <table className="w-full text-xs leading-[18px] font-normal text-text-secondary">
-                    <thead className="text-text-tertiary uppercase">
-                      <tr className="border-b border-divider-regular">
-                        <th className="w-[156px] p-2 pl-3 font-medium">{t('createTool.toolInput.name', { ns: 'tools' })}</th>
-                        <th className="w-[102px] p-2 pl-3 font-medium">{t('createTool.toolInput.method', { ns: 'tools' })}</th>
-                        <th className="p-2 pl-3 font-medium">{t('createTool.toolInput.description', { ns: 'tools' })}</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('createTool.toolInput.required', { ns: 'tools' }) : ''}</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('createTool.toolInput.methodParameter', { ns: 'tools' })}
-                                </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] leading-[18px] font-normal text-text-secondary caret-primary-600 outline-hidden placeholder:text-text-quaternary"
-                              placeholder={t('createTool.toolInput.descriptionPlaceholder', { ns: 'tools' })!}
-                              value={item.description}
-                              onChange={e => handleParameterChange('description', e.target.value, index)}
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              {/* Tool Output  */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolOutput.title', { ns: 'tools' })}</div>
-                <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
-                  <table className="w-full text-xs leading-[18px] font-normal text-text-secondary">
-                    <thead className="text-text-tertiary uppercase">
-                      <tr className="border-b border-divider-regular">
-                        <th className="w-[156px] p-2 pl-3 font-medium">{t('createTool.name', { ns: 'tools' })}</th>
-                        <th className="p-2 pl-3 font-medium">{t('createTool.toolOutput.description', { ns: 'tools' })}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {[...reservedOutputParameters, ...outputParameters].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 items-center">
-                                <span className="truncate font-medium text-text-primary">{item.name}</span>
-                                <span className="shrink-0 pl-1 text-xs leading-[18px] text-[#ec4a0a]">{item.reserved ? t('createTool.toolOutput.reserved', { ns: 'tools' }) : ''}</span>
-                                {
-                                  !item.reserved && hasReservedWorkflowOutputConflict(reservedOutputParameters, item.name)
-                                    ? (
-                                        <Tooltip
-                                          popupContent={(
-                                            <div className="w-[180px]">
-                                              {t('createTool.toolOutput.reservedParameterDuplicateTip', { ns: 'tools' })}
-                                            </div>
-                                          )}
-                                        >
-                                          <RiErrorWarningLine className="h-3 w-3 text-text-warning-secondary" />
-                                        </Tooltip>
-                                      )
-                                    : null
-                                }
-                              </div>
-                              <div className="text-text-tertiary">{item.type}</div>
-                            </div>
-                          </td>
-                          <td className="w-[236px] p-2 pl-3 text-text-tertiary">
-                            <span className="text-[13px] leading-[18px] font-normal text-text-secondary">{item.description}</span>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              {/* Tags */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
-                <LabelSelector value={labels} onChange={handleLabelSelect} />
-              </div>
-              {/* Privacy Policy */}
-              <div>
-                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
-                <Input
-                  className="h-10"
-                  value={privacyPolicy}
-                  onChange={e => setPrivacyPolicy(e.target.value)}
-                  placeholder={t('createTool.privacyPolicyPlaceholder', { ns: 'tools' }) || ''}
+                  className="h-10 grow"
+                  placeholder={t('createTool.toolNamePlaceHolder', { ns: 'tools' })!}
+                  value={label}
+                  onChange={e => setLabel(e.target.value)}
                 />
               </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="primary" tone="destructive" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
-              )}
-              <div className="flex space-x-2">
-                <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    if (isAdd)
-                      onConfirm()
-                    else
-                      setShowModal(true)
-                  }}
-                >
-                  {t('operation.save', { ns: 'common' })}
-                </Button>
+            {/* name for tool call */}
+            <div>
+              <div className="flex items-center py-2 system-sm-medium text-text-primary">
+                {t('createTool.nameForToolCall', { ns: 'tools' })}
+                {' '}
+                <span className="ml-1 text-red-500">*</span>
+                <InfoTooltip>
+                  {t('createTool.nameForToolCallPlaceHolder', { ns: 'tools' })}
+                </InfoTooltip>
               </div>
+              <Input
+                className="h-10"
+                placeholder={t('createTool.nameForToolCallPlaceHolder', { ns: 'tools' })!}
+                value={name}
+                onChange={e => setName(e.target.value)}
+              />
+              {!isWorkflowToolNameValid(name) && (
+                <div className="text-xs leading-[18px] text-red-500">{t('createTool.nameForToolCallTip', { ns: 'tools' })}</div>
+              )}
+            </div>
+            {/* description */}
+            <div>
+              <div className="py-2 system-sm-medium text-text-primary">{t('createTool.description', { ns: 'tools' })}</div>
+              <Textarea
+                placeholder={t('createTool.descriptionPlaceholder', { ns: 'tools' }) || ''}
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+              />
+            </div>
+            {/* Tool Input  */}
+            <div>
+              <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolInput.title', { ns: 'tools' })}</div>
+              <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
+                <table className="w-full text-xs leading-[18px] font-normal text-text-secondary">
+                  <thead className="text-text-tertiary uppercase">
+                    <tr className="border-b border-divider-regular">
+                      <th className="w-[156px] p-2 pl-3 font-medium">{t('createTool.toolInput.name', { ns: 'tools' })}</th>
+                      <th className="w-[102px] p-2 pl-3 font-medium">{t('createTool.toolInput.method', { ns: 'tools' })}</th>
+                      <th className="p-2 pl-3 font-medium">{t('createTool.toolInput.description', { ns: 'tools' })}</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('createTool.toolInput.required', { ns: 'tools' }) : ''}</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('createTool.toolInput.methodParameter', { ns: 'tools' })}
+                              </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] leading-[18px] font-normal text-text-secondary caret-primary-600 outline-hidden placeholder:text-text-quaternary"
+                            placeholder={t('createTool.toolInput.descriptionPlaceholder', { ns: 'tools' })!}
+                            value={item.description}
+                            onChange={e => handleParameterChange('description', e.target.value, index)}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            {/* Tool Output  */}
+            <div>
+              <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolOutput.title', { ns: 'tools' })}</div>
+              <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
+                <table className="w-full text-xs leading-[18px] font-normal text-text-secondary">
+                  <thead className="text-text-tertiary uppercase">
+                    <tr className="border-b border-divider-regular">
+                      <th className="w-[156px] p-2 pl-3 font-medium">{t('createTool.name', { ns: 'tools' })}</th>
+                      <th className="p-2 pl-3 font-medium">{t('createTool.toolOutput.description', { ns: 'tools' })}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {[...reservedOutputParameters, ...outputParameters].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 items-center">
+                              <span className="truncate font-medium text-text-primary">{item.name}</span>
+                              <span className="shrink-0 pl-1 text-xs leading-[18px] text-[#ec4a0a]">{item.reserved ? t('createTool.toolOutput.reserved', { ns: 'tools' }) : ''}</span>
+                              {
+                                !item.reserved && hasReservedWorkflowOutputConflict(reservedOutputParameters, item.name)
+                                  ? (
+                                      <Tooltip>
+                                        <TooltipTrigger
+                                          render={(
+                                            <span data-testid="reserved-output-warning" className="i-ri-error-warning-line h-3 w-3 text-text-warning-secondary" />
+                                          )}
+                                        />
+                                        <TooltipContent>
+                                          <div className="w-[180px]">
+                                            {t('createTool.toolOutput.reservedParameterDuplicateTip', { ns: 'tools' })}
+                                          </div>
+                                        </TooltipContent>
+                                      </Tooltip>
+                                    )
+                                  : null
+                              }
+                            </div>
+                            <div className="text-text-tertiary">{item.type}</div>
+                          </div>
+                        </td>
+                        <td className="w-[236px] p-2 pl-3 text-text-tertiary">
+                          <span className="text-[13px] leading-[18px] font-normal text-text-secondary">{item.description}</span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            {/* Tags */}
+            <div>
+              <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
+              <LabelSelector value={labels} onChange={handleLabelSelect} />
+            </div>
+            {/* Privacy Policy */}
+            <div>
+              <div className="py-2 system-sm-medium text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
+              <Input
+                className="h-10"
+                value={privacyPolicy}
+                onChange={e => setPrivacyPolicy(e.target.value)}
+                placeholder={t('createTool.privacyPolicyPlaceholder', { ns: 'tools' }) || ''}
+              />
             </div>
           </div>
-        )}
-        isShowMask={true}
-        clickOutsideNotOpen={true}
-      />
+          <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="primary" tone="destructive" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
+            )}
+            <div className="flex space-x-2">
+              <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+              <Button
+                variant="primary"
+                onClick={() => {
+                  if (isAdd)
+                    onConfirm()
+                  else
+                    setShowModal(true)
+                }}
+              >
+                {t('operation.save', { ns: 'common' })}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </WorkflowToolDrawer>
       {showEmojiPicker && (
-        <EmojiPicker
+        <WorkflowToolEmojiPicker
           onSelect={(icon, icon_background) => {
             setEmoji({ content: icon, background: icon_background })
             setShowEmojiPicker(false)

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

@@ -1,14 +1,14 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 
 type MethodSelectorProps = {
   value?: string
@@ -20,37 +20,43 @@ const MethodSelector: FC<MethodSelectorProps> = ({
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const handleSelect = (value: string) => {
+    onChange(value)
+    setOpen(false)
+  }
 
   return (
-    <PortalToFollowElem
+    <Popover
       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',
+        <PopoverTrigger
+          nativeButton={false}
+          render={(
+            <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('createTool.toolInput.methodParameter', { ns: 'tools' }) : t('createTool.toolInput.methodSetting', { ns: 'tools' })}
+              </div>
+              <div className="ml-1 shrink-0 text-text-secondary opacity-60">
+                <RiArrowDownSLine className="h-4 w-4" />
+              </div>
+            </div>
           )}
-          >
-            <div className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary')}>
-              {value === 'llm' ? t('createTool.toolInput.methodParameter', { ns: 'tools' }) : t('createTool.toolInput.methodSetting', { ns: 'tools' })}
-            </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-xs">
+        />
+        <PopoverContent
+          placement="bottom-start"
+          sideOffset={4}
+          positionerProps={{ style: { zIndex: 1040 } }}
+        >
+          <div className="relative w-[320px]">
             <div className="p-1">
-              <div className="cursor-pointer rounded-lg py-2.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => onChange('llm')}>
-                <div className="item-center flex gap-1">
+              <div className="cursor-pointer rounded-lg py-2.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => handleSelect('llm')}>
+                <div className="flex items-center gap-1">
                   <div className="h-4 w-4 shrink-0">
                     {value === 'llm' && <Check className="h-4 w-4 shrink-0 text-text-accent" />}
                   </div>
@@ -58,8 +64,8 @@ const MethodSelector: FC<MethodSelectorProps> = ({
                 </div>
                 <div className="pl-5 text-[13px] leading-[18px] text-text-tertiary">{t('createTool.toolInput.methodParameterTip', { ns: 'tools' })}</div>
               </div>
-              <div className="cursor-pointer rounded-lg py-2.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => onChange('form')}>
-                <div className="item-center flex gap-1">
+              <div className="cursor-pointer rounded-lg py-2.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => handleSelect('form')}>
+                <div className="flex items-center gap-1">
                   <div className="h-4 w-4 shrink-0">
                     {value === 'form' && <Check className="h-4 w-4 shrink-0 text-text-accent" />}
                   </div>
@@ -69,9 +75,9 @@ const MethodSelector: FC<MethodSelectorProps> = ({
               </div>
             </div>
           </div>
-        </PortalToFollowElemContent>
+        </PopoverContent>
       </div>
-    </PortalToFollowElem>
+    </Popover>
   )
 }