dify/web/app/components/tools/mcp/sections/headers-section.tsx
Stephen Zhou a84c2d36a3
style: format with vp fmt (#38803)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-07-12 15:57:46 +00:00

37 lines
1.0 KiB
TypeScript

'use client'
import type { FC } from 'react'
import type { HeaderItem } from '../headers-input'
import { useTranslation } from 'react-i18next'
import HeadersInput from '../headers-input'
type HeadersSectionProps = {
headers: HeaderItem[]
onHeadersChange: (headers: HeaderItem[]) => void
isCreate: boolean
}
const HeadersSection: FC<HeadersSectionProps> = ({ headers, onHeadersChange, isCreate }) => {
const { t } = useTranslation()
return (
<div>
<div className="mb-1 flex h-6 items-center">
<span className="system-sm-medium text-text-secondary">
{t(($) => $['mcp.modal.headers'], { ns: 'tools' })}
</span>
</div>
<div className="mb-2 body-xs-regular text-text-tertiary">
{t(($) => $['mcp.modal.headersTip'], { ns: 'tools' })}
</div>
<HeadersInput
headersItems={headers}
onChange={onHeadersChange}
readonly={false}
isMasked={!isCreate && headers.filter((item) => item.key.trim()).length > 0}
/>
</div>
)
}
export default HeadersSection