-
+
{!readonly
? (
= ({ promptVariables, readonly, onPromptVar
/>
)}
+ {isShowDeleteContextVarModal && (
+ {
+ didRemoveVar(removeIndex as number)
+ hideDeleteContextVarModal()
+ }}
+ onCancel={hideDeleteContextVarModal}
+ />
+ )}
+
)
}
diff --git a/web/app/components/app/configuration/config-var/input-type-icon.tsx b/web/app/components/app/configuration/config-var/input-type-icon.tsx
index 9922ef16d8..c5c8ae02b9 100644
--- a/web/app/components/app/configuration/config-var/input-type-icon.tsx
+++ b/web/app/components/app/configuration/config-var/input-type-icon.tsx
@@ -1,31 +1,25 @@
'use client'
import React from 'react'
import type { FC } from 'react'
+import { Paragraph, TypeSquare } from '@/app/components/base/icons/src/vender/solid/editor'
+import { CheckDone01 } from '@/app/components/base/icons/src/vender/solid/general'
export type IInputTypeIconProps = {
type: 'string' | 'select'
+ className: string
}
-const IconMap = (type: IInputTypeIconProps['type']) => {
+const IconMap = (type: IInputTypeIconProps['type'], className: string) => {
+ const classNames = `w-3.5 h-3.5 ${className}`
const icons = {
string: (
-
+
),
paragraph: (
-
+
),
select: (
-
+
),
}
@@ -34,8 +28,9 @@ const IconMap = (type: IInputTypeIconProps['type']) => {
const InputTypeIcon: FC = ({
type,
+ className,
}) => {
- const Icon = IconMap(type)
+ const Icon = IconMap(type, className)
return Icon
}
diff --git a/web/app/components/app/configuration/dataset-config/context-var/index.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
new file mode 100644
index 0000000000..c38176d9b6
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
@@ -0,0 +1,39 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import type { Props } from './var-picker'
+import VarPicker from './var-picker'
+import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
+import Tooltip from '@/app/components/base/tooltip'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+
+const ContextVar: FC = (props) => {
+ const { t } = useTranslation()
+ const { value, options } = props
+ const currItem = options.find(item => item.value === value)
+ const notSetVar = !currItem
+ return (
+
+
+
+
+
+ {t('appDebug.feature.dataSet.queryVariable.title')}
+
+ {t('appDebug.feature.dataSet.queryVariable.tip')}
+ }
+ selector='context-var-tooltip'
+ >
+
+
+
+
+
+
+ )
+}
+
+export default React.memo(ContextVar)
diff --git a/web/app/components/app/configuration/dataset-config/context-var/style.module.css b/web/app/components/app/configuration/dataset-config/context-var/style.module.css
new file mode 100644
index 0000000000..cbfaae8e29
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/context-var/style.module.css
@@ -0,0 +1,3 @@
+.trigger:hover .dropdownIcon {
+ color: #98A2B3;
+}
\ No newline at end of file
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
new file mode 100644
index 0000000000..54ad45aaed
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
@@ -0,0 +1,99 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
+import cn from 'classnames'
+import s from './style.module.css'
+import {
+ PortalToFollowElem,
+ PortalToFollowElemContent,
+ PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { IInputTypeIconProps } from '@/app/components/app/configuration/config-var/input-type-icon'
+import IconTypeIcon from '@/app/components/app/configuration/config-var/input-type-icon'
+
+type Option = { name: string; value: string; type: string }
+export type Props = {
+ value: string | undefined
+ options: Option[]
+ onChange: (value: string) => void
+}
+
+const VarItem: FC<{ item: Option }> = ({ item }) => (
+
+
+
+ {'{{'}
+ {item.value}
+ {'}}'}
+
+
+)
+const VarPicker: FC = ({
+ value,
+ options,
+ onChange,
+}) => {
+ const { t } = useTranslation()
+ const [open, setOpen] = useState(false)
+ const currItem = options.find(item => item.value === value)
+ const notSetVar = !currItem
+ return (
+
+ setOpen(v => !v)}>
+
+
+ {value
+ ? (
+
+ )
+ : (
+ {t('appDebug.feature.dataSet.queryVariable.choosePlaceholder')}
+ )}
+
+
+
+
+
+ {options.length > 0
+ ? (
+ {options.map(({ name, value, type }, index) => (
+ {
+ onChange(value)
+ setOpen(false)
+ }}
+ >
+
+
+ ))}
+ )
+ : (
+
+ {t('appDebug.feature.dataSet.queryVariable.noVar')}
+ {t('appDebug.feature.dataSet.queryVariable.noVarTip')}
+
+ )}
+
+
+
+ )
+}
+export default React.memo(VarPicker)
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index d69bb094c9..05f7a35899 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -10,8 +10,10 @@ import FeaturePanel from '../base/feature-panel'
import OperationBtn from '../base/operation-btn'
import CardItem from './card-item'
import SelectDataSet from './select-dataset'
+import ContextVar from './context-var'
import ConfigContext from '@/context/debug-configuration'
import type { DataSet } from '@/models/datasets'
+import { AppType } from '@/types/app'
const Icon = (
|