mirror of
https://github.com/langgenius/dify.git
synced 2026-08-13 19:39:48 +08:00
499d237b7e
Frontend: - Migrate deprecated imports: modal→dialog, toast→ui/toast, tooltip→tooltip-plus, portal-to-follow-elem→portal-to-follow-elem-plus, select→ui/select, confirm→alert-dialog - Replace next/* with @/next/* wrapper modules - Convert TypeScript enums to const objects (erasable-syntax-only) - Replace all `any` types with `unknown` or specific types in workflow types - Fix unused vars, react-hooks-extra, react-refresh/only-export-components - Extract InteractionMode to separate module, tool-block commands to commands.ts Backend: - Fix pyrefly errors: type narrowing, null guards, getattr patterns - Remove unused TYPE_CHECKING imports in LLM node - Add ignore_imports entries to .importlinter for dify_graph boundary violations Made-with: Cursor
83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import type { Var } from '../../../types'
|
|
import { RiArrowDownSLine } from '@remixicon/react'
|
|
import * as React from 'react'
|
|
import { useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
|
|
import { cn } from '@/utils/classnames'
|
|
import { VarType } from '../../../types'
|
|
import Selector from '../../_base/components/selector'
|
|
import useAvailableVarList from '../../_base/hooks/use-available-var-list'
|
|
import { Method } from '../types'
|
|
|
|
const MethodOptions = [
|
|
{ label: 'GET', value: Method.get },
|
|
{ label: 'POST', value: Method.post },
|
|
{ label: 'HEAD', value: Method.head },
|
|
{ label: 'PATCH', value: Method.patch },
|
|
{ label: 'PUT', value: Method.put },
|
|
{ label: 'DELETE', value: Method.delete },
|
|
]
|
|
type Props = {
|
|
nodeId: string
|
|
readonly: boolean
|
|
method: Method
|
|
onMethodChange: (method: Method) => void
|
|
url: string
|
|
onUrlChange: (url: string) => void
|
|
}
|
|
|
|
const ApiInput: FC<Props> = ({
|
|
nodeId,
|
|
readonly,
|
|
method,
|
|
onMethodChange,
|
|
url,
|
|
onUrlChange,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
|
|
const [isFocus, setIsFocus] = useState(false)
|
|
const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
|
|
onlyLeafNodeVar: false,
|
|
filterVar: (varPayload: Var) => {
|
|
return ([VarType.string, VarType.number, VarType.secret] as VarType[]).includes(varPayload.type)
|
|
},
|
|
})
|
|
|
|
return (
|
|
<div className="flex items-start space-x-1">
|
|
<Selector
|
|
value={method}
|
|
onChange={onMethodChange}
|
|
options={MethodOptions}
|
|
trigger={(
|
|
<div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-2.5')}>
|
|
<div className="w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-text-primary">{method}</div>
|
|
{!readonly && <RiArrowDownSLine className="ml-1 h-3.5 w-3.5 text-text-secondary" />}
|
|
</div>
|
|
)}
|
|
popupClassName="top-[34px] w-[108px]"
|
|
showChecked
|
|
readonly={readonly}
|
|
/>
|
|
|
|
<Input
|
|
instanceId="http-api-url"
|
|
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
|
|
value={url}
|
|
onChange={onUrlChange}
|
|
readOnly={readonly}
|
|
nodesOutputVars={availableVars}
|
|
availableNodes={availableNodesWithParent}
|
|
onFocusChange={setIsFocus}
|
|
placeholder={!readonly ? t('nodes.http.apiPlaceholder', { ns: 'workflow' })! : ''}
|
|
placeholderClassName="!leading-[21px]"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
export default React.memo(ApiInput)
|