mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-08-09 04:40:57 +00:00
Hyu
1042 lines
34 KiB
TypeScript
1042 lines
34 KiB
TypeScript
import {
|
|
DynamicFormItemType,
|
|
IDynamicFormItemSchema,
|
|
SYSTEM_FIELD_PREFIX,
|
|
} from '@/app/infra/entities/form/dynamic';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form';
|
|
import DynamicFormItemComponent from '@/app/home/components/dynamic-form/DynamicFormItemComponent';
|
|
import { normalizeDynamicFormValuesForSave } from '@/app/home/components/dynamic-form/DynamicFormSaveValues';
|
|
import QrCodeLoginDialog, {
|
|
QrLoginPlatform,
|
|
} from '@/app/home/components/qrcode-login/QrCodeLoginDialog';
|
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
import { extractI18nObject } from '@/i18n/I18nProvider';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { cn } from '@/lib/utils';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Copy,
|
|
Check,
|
|
Globe,
|
|
Info,
|
|
QrCode,
|
|
Download,
|
|
ExternalLink,
|
|
} from 'lucide-react';
|
|
import { copyToClipboard } from '@/app/utils/clipboard';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip';
|
|
import { systemInfo } from '@/app/infra/http';
|
|
import { getAdapterDocUrl } from '@/app/infra/entities/adapter-docs';
|
|
|
|
/**
|
|
* Resolve the value referenced by a `show_if.field` string.
|
|
*
|
|
* Fields prefixed with `__system.` are looked up in the caller-supplied
|
|
* `systemContext` dictionary (e.g. `__system.is_wizard` → `systemContext.is_wizard`).
|
|
* All other field names are resolved from the live form values first, then
|
|
* fall back to `externalDependentValues`.
|
|
*/
|
|
function resolveShowIfValue(
|
|
field: string,
|
|
watchedValues: Record<string, unknown>,
|
|
externalDependentValues?: Record<string, unknown>,
|
|
systemContext?: Record<string, unknown>,
|
|
): unknown {
|
|
if (field.startsWith(SYSTEM_FIELD_PREFIX)) {
|
|
const key = field.slice(SYSTEM_FIELD_PREFIX.length);
|
|
return systemContext?.[key];
|
|
}
|
|
if (watchedValues[field] !== undefined) {
|
|
return watchedValues[field];
|
|
}
|
|
return externalDependentValues?.[field];
|
|
}
|
|
|
|
type DynamicFormValueSpec = Pick<
|
|
IDynamicFormItemSchema,
|
|
'default' | 'name' | 'required' | 'type'
|
|
>;
|
|
|
|
function getValueSpecs(item: IDynamicFormItemSchema): DynamicFormValueSpec[] {
|
|
if (item.type === DynamicFormItemType.RICH_TOOLS_SELECTOR) {
|
|
return [
|
|
item,
|
|
{
|
|
name: 'enable-all-tools',
|
|
type: DynamicFormItemType.BOOLEAN,
|
|
required: false,
|
|
default: true,
|
|
},
|
|
];
|
|
}
|
|
|
|
if (item.type === DynamicFormItemType.RESOURCES_SELECTOR) {
|
|
return [
|
|
item,
|
|
{
|
|
name: 'mcp-resources',
|
|
type: DynamicFormItemType.UNKNOWN,
|
|
required: false,
|
|
default: [],
|
|
},
|
|
{
|
|
name: 'mcp-resource-agent-read-enabled',
|
|
type: DynamicFormItemType.BOOLEAN,
|
|
required: false,
|
|
default: true,
|
|
},
|
|
];
|
|
}
|
|
|
|
return [item];
|
|
}
|
|
|
|
function getValueSchema(spec: DynamicFormValueSpec) {
|
|
if (spec.name === 'mcp-resources') {
|
|
return z.array(z.any());
|
|
}
|
|
|
|
switch (spec.type) {
|
|
case DynamicFormItemType.INT:
|
|
return z.number();
|
|
case DynamicFormItemType.FLOAT:
|
|
return z.number();
|
|
case DynamicFormItemType.BOOLEAN:
|
|
return z.boolean();
|
|
case DynamicFormItemType.STRING:
|
|
return z.string();
|
|
case DynamicFormItemType.STRING_ARRAY:
|
|
return z.array(z.string());
|
|
case DynamicFormItemType.SELECT:
|
|
return z.string();
|
|
case DynamicFormItemType.LLM_MODEL_SELECTOR:
|
|
return z.string();
|
|
case DynamicFormItemType.EMBEDDING_MODEL_SELECTOR:
|
|
return z.string();
|
|
case DynamicFormItemType.RERANK_MODEL_SELECTOR:
|
|
return z.string();
|
|
case DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR:
|
|
return z.string();
|
|
case DynamicFormItemType.KNOWLEDGE_BASE_MULTI_SELECTOR:
|
|
case DynamicFormItemType.RESOURCES_SELECTOR:
|
|
case DynamicFormItemType.RICH_TOOLS_SELECTOR:
|
|
case DynamicFormItemType.TOOLS_SELECTOR:
|
|
return z.array(z.string());
|
|
case DynamicFormItemType.BOT_SELECTOR:
|
|
return z.string();
|
|
case DynamicFormItemType.MODEL_FALLBACK_SELECTOR:
|
|
return z.object({
|
|
primary: z.string(),
|
|
fallbacks: z.array(z.string()),
|
|
});
|
|
case DynamicFormItemType.PROMPT_EDITOR:
|
|
return z.array(
|
|
z.object({
|
|
content: z.string(),
|
|
role: z.string(),
|
|
}),
|
|
);
|
|
default:
|
|
return z.string();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Display-only component for embed code fields with copy animation.
|
|
*/
|
|
function EmbedCodeField({
|
|
label,
|
|
description,
|
|
snippet,
|
|
}: {
|
|
label: string;
|
|
description?: string;
|
|
snippet: string;
|
|
}) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopy = () => {
|
|
copyToClipboard(snippet).catch(() => {});
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium leading-none">{label}</label>
|
|
{description && (
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
<pre className="flex-1 overflow-x-auto rounded-md bg-muted p-3 text-sm font-mono select-all">
|
|
<code>{snippet}</code>
|
|
</pre>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
className="shrink-0"
|
|
onClick={handleCopy}
|
|
>
|
|
{copied ? (
|
|
<Check className="h-4 w-4 text-green-600" />
|
|
) : (
|
|
<Copy className="size-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Display-only component for webhook URL fields.
|
|
* Rendered outside of react-hook-form binding since the value is
|
|
* read-only and comes from systemContext, not user input.
|
|
*/
|
|
function WebhookUrlField({
|
|
label,
|
|
description,
|
|
url,
|
|
extraUrl,
|
|
}: {
|
|
label: string;
|
|
description?: string;
|
|
url: string;
|
|
extraUrl?: string;
|
|
}) {
|
|
const [copied, setCopied] = useState(false);
|
|
const [extraCopied, setExtraCopied] = useState(false);
|
|
const { t } = useTranslation();
|
|
|
|
const handleCopy = (text: string, setter: (v: boolean) => void) => {
|
|
copyToClipboard(text).catch(() => {});
|
|
setter(true);
|
|
setTimeout(() => setter(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<FormItem className="min-w-0">
|
|
<FormLabel className="break-words">{label}</FormLabel>
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<Input
|
|
value={url}
|
|
readOnly
|
|
className="min-w-0 flex-1 bg-muted"
|
|
onClick={(e) => (e.target as HTMLInputElement).select()}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleCopy(url, setCopied)}
|
|
>
|
|
{copied ? (
|
|
<Check className="h-4 w-4 text-green-600" />
|
|
) : (
|
|
<Copy className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
{extraUrl && (
|
|
<div className="mt-2 flex min-w-0 items-center gap-2">
|
|
<Input
|
|
value={extraUrl}
|
|
readOnly
|
|
className="min-w-0 flex-1 bg-muted"
|
|
onClick={(e) => (e.target as HTMLInputElement).select()}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleCopy(extraUrl, setExtraCopied)}
|
|
>
|
|
{extraCopied ? (
|
|
<Check className="h-4 w-4 text-green-600" />
|
|
) : (
|
|
<Copy className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{description && (
|
|
<p className="text-sm break-words text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
)}
|
|
{systemInfo.edition === 'community' && (
|
|
<div className="mt-1 flex max-w-full min-w-0 items-start gap-2.5 rounded-md border border-border/60 bg-muted/40 px-3 py-2.5">
|
|
<Globe className="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
|
|
<p className="text-sm leading-relaxed break-words text-muted-foreground">
|
|
{t('bots.webhookSaasHint')}{' '}
|
|
<a
|
|
href="https://space.langbot.app/cloud?utm_source=local_webui&utm_medium=webhook_alert&utm_campaign=saas_conversion"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary underline-offset-4 hover:underline font-medium"
|
|
>
|
|
{t('bots.webhookSaasLink')}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
)}
|
|
</FormItem>
|
|
);
|
|
}
|
|
|
|
function DownloadLinkField({
|
|
label,
|
|
description,
|
|
url,
|
|
filename,
|
|
helpUrl,
|
|
helpLabel,
|
|
}: {
|
|
label: string;
|
|
description?: string;
|
|
url: string;
|
|
filename?: string;
|
|
helpUrl?: string | null;
|
|
helpLabel: string;
|
|
}) {
|
|
const baseUrl = import.meta.env.VITE_API_BASE_URL || window.location.origin;
|
|
const downloadUrl = url.startsWith('http') ? url : `${baseUrl}${url}`;
|
|
|
|
return (
|
|
<FormItem className="min-w-0">
|
|
<FormLabel className="break-words">{label}</FormLabel>
|
|
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
|
<Button asChild variant="outline" size="sm">
|
|
<a href={downloadUrl} download={filename}>
|
|
<Download className="h-4 w-4" />
|
|
{label}
|
|
</a>
|
|
</Button>
|
|
{helpUrl && (
|
|
<Button asChild variant="ghost" size="sm">
|
|
<a href={helpUrl} target="_blank" rel="noopener noreferrer">
|
|
<ExternalLink className="h-4 w-4" />
|
|
{helpLabel}
|
|
</a>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{description && (
|
|
<p className="max-w-2xl text-sm break-words text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</FormItem>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Display-only component for `__system.*` fields (e.g. the deployment's
|
|
* outbound IPs that the operator must add to a platform's trusted-IP list).
|
|
* Renders one read-only row per value, each with a copy button. Rendered
|
|
* outside of react-hook-form binding since the values come from
|
|
* systemContext, not user input.
|
|
*/
|
|
function SystemInfoField({
|
|
label,
|
|
description,
|
|
values,
|
|
}: {
|
|
label: string;
|
|
description?: string;
|
|
values: string[];
|
|
}) {
|
|
const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
|
|
|
|
const handleCopy = (text: string, index: number) => {
|
|
copyToClipboard(text).catch(() => {});
|
|
setCopiedIndex(index);
|
|
setTimeout(() => setCopiedIndex(null), 2000);
|
|
};
|
|
|
|
return (
|
|
<FormItem className="min-w-0">
|
|
<FormLabel className="break-words">{label}</FormLabel>
|
|
<div className="space-y-2">
|
|
{values.map((value, index) => (
|
|
<div key={index} className="flex min-w-0 items-center gap-2">
|
|
<Input
|
|
value={value}
|
|
readOnly
|
|
className="min-w-0 flex-1 bg-muted"
|
|
onClick={(e) => (e.target as HTMLInputElement).select()}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleCopy(value, index)}
|
|
>
|
|
{copiedIndex === index ? (
|
|
<Check className="h-4 w-4 text-green-600" />
|
|
) : (
|
|
<Copy className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{description && (
|
|
<p className="text-sm break-words text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</FormItem>
|
|
);
|
|
}
|
|
|
|
// Hover-only Radix tooltips never open on touch devices (no pointer hover),
|
|
// so the ``disabled_tooltip`` explaining why a field is locked was invisible on
|
|
// mobile. This wrapper makes the info icon also toggle the tooltip on tap while
|
|
// keeping hover behavior on desktop.
|
|
function DisabledTooltipIcon({ text }: { text: string }) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<TooltipProvider delayDuration={100}>
|
|
<Tooltip open={open} onOpenChange={setOpen}>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
aria-label={text}
|
|
className="inline-flex shrink-0"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setOpen((v) => !v);
|
|
}}
|
|
>
|
|
<Info className="h-3.5 w-3.5 text-muted-foreground cursor-help shrink-0" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="max-w-xs">{text}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|
|
|
|
export default function DynamicFormComponent({
|
|
itemConfigList,
|
|
onSubmit,
|
|
initialValues,
|
|
onFileUploaded,
|
|
isEditing,
|
|
externalDependentValues,
|
|
systemContext,
|
|
onValidate,
|
|
}: {
|
|
itemConfigList: IDynamicFormItemSchema[];
|
|
onSubmit?: (val: object) => unknown;
|
|
initialValues?: Record<string, object>;
|
|
onFileUploaded?: (fileKey: string) => void;
|
|
isEditing?: boolean;
|
|
externalDependentValues?: Record<string, unknown>;
|
|
/** Extra variables accessible via the `__system.*` namespace in show_if conditions.
|
|
* e.g. `{ is_wizard: true }` makes `show_if: { field: "__system.is_wizard", ... }` work. */
|
|
systemContext?: Record<string, unknown>;
|
|
/** Callback to expose validation function to parent component.
|
|
* Parent can call this function to trigger validation and get validity state. */
|
|
onValidate?: (validateFn: () => Promise<boolean>) => void;
|
|
}) {
|
|
const isInitialMount = useRef(true);
|
|
const previousInitialValues = useRef(initialValues);
|
|
const { t, i18n } = useTranslation();
|
|
|
|
// Normalize a form value according to its field type.
|
|
// This ensures legacy/malformed data (e.g. a plain string for
|
|
// model-fallback-selector) is coerced to the expected shape
|
|
// so that downstream components never crash.
|
|
const normalizeFieldValue = (
|
|
item: DynamicFormValueSpec,
|
|
value: unknown,
|
|
): unknown => {
|
|
if (
|
|
item.name === 'mcp-resources' ||
|
|
item.type === DynamicFormItemType.RESOURCES_SELECTOR ||
|
|
item.type === DynamicFormItemType.RICH_TOOLS_SELECTOR
|
|
) {
|
|
return Array.isArray(value) ? value : [];
|
|
}
|
|
if (item.type === 'model-fallback-selector') {
|
|
if (value != null && typeof value === 'object' && !Array.isArray(value)) {
|
|
const obj = value as Record<string, unknown>;
|
|
return {
|
|
primary: typeof obj.primary === 'string' ? obj.primary : '',
|
|
fallbacks: Array.isArray(obj.fallbacks)
|
|
? (obj.fallbacks as unknown[]).filter(
|
|
(v): v is string => typeof v === 'string',
|
|
)
|
|
: [],
|
|
};
|
|
}
|
|
// Legacy string format or any other unexpected type
|
|
return {
|
|
primary: typeof value === 'string' ? value : '',
|
|
fallbacks: [],
|
|
};
|
|
}
|
|
if (item.type === 'prompt-editor') {
|
|
if (Array.isArray(value)) {
|
|
return value;
|
|
}
|
|
// Default to a single empty system prompt entry
|
|
return [{ role: 'system', content: '' }];
|
|
}
|
|
return value;
|
|
};
|
|
|
|
// Filter out display-only fields (webhook-url/embed-code/qr-code-login types
|
|
// and `__system.*`-named fields) that should not participate in form state,
|
|
// validation, or value emission.
|
|
const editableItems = useMemo(
|
|
() =>
|
|
itemConfigList.filter(
|
|
(item) =>
|
|
item.type !== 'webhook-url' &&
|
|
item.type !== 'embed-code' &&
|
|
item.type !== 'qr-code-login' &&
|
|
item.type !== 'download-link' &&
|
|
!item.name.startsWith(SYSTEM_FIELD_PREFIX),
|
|
),
|
|
[itemConfigList],
|
|
);
|
|
|
|
const editableValueSpecs = useMemo(
|
|
() => editableItems.flatMap(getValueSpecs),
|
|
[editableItems],
|
|
);
|
|
|
|
// 根据 itemConfigList 动态生成 zod schema
|
|
const formSchema = z.object(
|
|
editableValueSpecs.reduce(
|
|
(acc, item) => {
|
|
let fieldSchema = getValueSchema(item);
|
|
|
|
if (
|
|
item.required &&
|
|
(fieldSchema instanceof z.ZodString ||
|
|
fieldSchema instanceof z.ZodArray)
|
|
) {
|
|
fieldSchema = fieldSchema.min(1, {
|
|
message: t('common.fieldRequired'),
|
|
});
|
|
}
|
|
|
|
return {
|
|
...acc,
|
|
[item.name]: fieldSchema,
|
|
};
|
|
},
|
|
{} as Record<string, z.ZodTypeAny>,
|
|
),
|
|
);
|
|
|
|
type FormValues = z.infer<typeof formSchema>;
|
|
|
|
const form = useForm<FormValues>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: editableValueSpecs.reduce((acc, item) => {
|
|
// 优先使用 initialValues，如果没有则使用默认值
|
|
const rawValue = initialValues?.[item.name] ?? item.default;
|
|
return {
|
|
...acc,
|
|
[item.name]: normalizeFieldValue(item, rawValue),
|
|
};
|
|
}, {} as FormValues),
|
|
});
|
|
|
|
// Expose validation function to parent component
|
|
const validate = async (): Promise<boolean> => {
|
|
// Trigger validation for all fields
|
|
const result = await form.trigger();
|
|
return result;
|
|
};
|
|
|
|
useEffect(() => {
|
|
onValidate?.(validate);
|
|
}, [onValidate]);
|
|
|
|
// 当 initialValues 变化时更新表单值
|
|
// 但要避免因为内部表单更新触发的 onSubmit 导致的 initialValues 变化而重新设置表单
|
|
useEffect(() => {
|
|
// 首次挂载时，使用 initialValues 初始化表单
|
|
if (isInitialMount.current) {
|
|
isInitialMount.current = false;
|
|
previousInitialValues.current = initialValues;
|
|
return;
|
|
}
|
|
|
|
// 检查 initialValues 是否真的发生了实质性变化
|
|
// 使用 JSON.stringify 进行深度比较
|
|
const hasRealChange =
|
|
JSON.stringify(previousInitialValues.current) !==
|
|
JSON.stringify(initialValues);
|
|
|
|
if (initialValues && hasRealChange) {
|
|
// 合并默认值和初始值
|
|
const mergedValues = editableValueSpecs.reduce(
|
|
(acc, item) => {
|
|
const rawValue = initialValues[item.name] ?? item.default;
|
|
acc[item.name] = normalizeFieldValue(item, rawValue) as object;
|
|
return acc;
|
|
},
|
|
{} as Record<string, object>,
|
|
);
|
|
|
|
Object.entries(mergedValues).forEach(([key, value]) => {
|
|
form.setValue(key as keyof FormValues, value);
|
|
});
|
|
|
|
previousInitialValues.current = initialValues;
|
|
}
|
|
}, [initialValues, form, editableValueSpecs]);
|
|
|
|
// Get reactive form values for conditional rendering
|
|
const watchedValues = form.watch();
|
|
const setFormValue = (name: string, value: unknown) => {
|
|
form.setValue(name as keyof FormValues, value as never, {
|
|
shouldDirty: true,
|
|
shouldValidate: true,
|
|
});
|
|
};
|
|
|
|
// Stable ref for onSubmit to avoid re-triggering the effect when the
|
|
// parent passes a new closure on every render.
|
|
const onSubmitRef = useRef(onSubmit);
|
|
onSubmitRef.current = onSubmit;
|
|
|
|
// 监听表单值变化
|
|
useEffect(() => {
|
|
// Emit initial form values immediately so the parent always has a valid snapshot,
|
|
// even if the user saves without modifying any field.
|
|
// form.watch(callback) only fires on subsequent changes, not on mount.
|
|
const formValues = form.getValues();
|
|
const initialFinalValues = normalizeDynamicFormValuesForSave(
|
|
editableValueSpecs,
|
|
formValues as Record<string, unknown>,
|
|
);
|
|
onSubmitRef.current?.(initialFinalValues);
|
|
|
|
// Update previousInitialValues to the emitted snapshot so that if the
|
|
// parent writes these values back as new initialValues, the deep
|
|
// comparison in the initialValues-sync useEffect won't detect a change
|
|
// and won't trigger an infinite update loop.
|
|
previousInitialValues.current = initialFinalValues as Record<
|
|
string,
|
|
object
|
|
>;
|
|
|
|
const subscription = form.watch(() => {
|
|
const formValues = form.getValues();
|
|
const finalValues = normalizeDynamicFormValuesForSave(
|
|
editableValueSpecs,
|
|
formValues as Record<string, unknown>,
|
|
);
|
|
onSubmitRef.current?.(finalValues);
|
|
previousInitialValues.current = finalValues as Record<string, object>;
|
|
});
|
|
return () => subscription.unsubscribe();
|
|
}, [form, editableValueSpecs]);
|
|
|
|
// State for QR code login dialog
|
|
const [qrDialogOpen, setQrDialogOpen] = useState(false);
|
|
const [qrDialogPlatform, setQrDialogPlatform] =
|
|
useState<QrLoginPlatform>('feishu');
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<div className="min-w-0 max-w-full space-y-4 overflow-x-hidden">
|
|
{/* QR code login dialog */}
|
|
<QrCodeLoginDialog
|
|
open={qrDialogOpen}
|
|
onOpenChange={setQrDialogOpen}
|
|
platform={qrDialogPlatform}
|
|
onSuccess={(credentials) => {
|
|
for (const [key, value] of Object.entries(credentials)) {
|
|
if (value) {
|
|
form.setValue(key as keyof FormValues, value as never);
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{itemConfigList.map((config) => {
|
|
if (config.show_if) {
|
|
const dependValue = resolveShowIfValue(
|
|
config.show_if.field,
|
|
watchedValues as Record<string, unknown>,
|
|
externalDependentValues,
|
|
systemContext,
|
|
);
|
|
|
|
if (
|
|
config.show_if.operator === 'eq' &&
|
|
dependValue !== config.show_if.value
|
|
) {
|
|
return null;
|
|
}
|
|
if (
|
|
config.show_if.operator === 'neq' &&
|
|
dependValue === config.show_if.value
|
|
) {
|
|
return null;
|
|
}
|
|
if (
|
|
config.show_if.operator === 'in' &&
|
|
Array.isArray(config.show_if.value) &&
|
|
!config.show_if.value.includes(dependValue)
|
|
) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// ``disable_if`` mirrors ``show_if``'s evaluator but instead of
|
|
// hiding the field, leaves it visible and inert. Use it when the
|
|
// operator needs to see that the field exists yet cannot edit it
|
|
// under the current runtime state (e.g. sandbox-bound fields when
|
|
// Box is disabled).
|
|
let isDisabledByCondition = false;
|
|
if (config.disable_if) {
|
|
const dependValue = resolveShowIfValue(
|
|
config.disable_if.field,
|
|
watchedValues as Record<string, unknown>,
|
|
externalDependentValues,
|
|
systemContext,
|
|
);
|
|
const cond = config.disable_if;
|
|
if (cond.operator === 'eq' && dependValue === cond.value) {
|
|
isDisabledByCondition = true;
|
|
} else if (cond.operator === 'neq' && dependValue !== cond.value) {
|
|
isDisabledByCondition = true;
|
|
} else if (
|
|
cond.operator === 'in' &&
|
|
Array.isArray(cond.value) &&
|
|
cond.value.includes(dependValue)
|
|
) {
|
|
isDisabledByCondition = true;
|
|
}
|
|
}
|
|
|
|
// All fields are disabled when editing (creation_settings are
|
|
// immutable) or when ``disable_if`` matches.
|
|
const isFieldDisabled = !!isEditing || isDisabledByCondition;
|
|
const disabledTooltip =
|
|
isDisabledByCondition && config.disabled_tooltip
|
|
? extractI18nObject(config.disabled_tooltip)
|
|
: '';
|
|
const renderDisabledTooltipIcon = () =>
|
|
disabledTooltip ? (
|
|
<DisabledTooltipIcon text={disabledTooltip} />
|
|
) : null;
|
|
|
|
// `__system.*` fields are display-only; their value is resolved
|
|
// from systemContext (same namespace as show_if), not user input.
|
|
// Hidden entirely when the deployment doesn't provide the value.
|
|
if (config.name.startsWith(SYSTEM_FIELD_PREFIX)) {
|
|
const rawValue =
|
|
systemContext?.[config.name.slice(SYSTEM_FIELD_PREFIX.length)];
|
|
const values = (Array.isArray(rawValue) ? rawValue : [rawValue])
|
|
.filter((v) => v !== undefined && v !== null && v !== '')
|
|
.map(String);
|
|
if (values.length === 0) return null;
|
|
|
|
return (
|
|
<SystemInfoField
|
|
key={config.id}
|
|
label={extractI18nObject(config.label)}
|
|
description={
|
|
config.description
|
|
? extractI18nObject(config.description)
|
|
: undefined
|
|
}
|
|
values={values}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Webhook URL fields are display-only; render outside of form binding
|
|
if (config.type === 'webhook-url') {
|
|
const webhookUrl = (systemContext?.webhook_url as string) || '';
|
|
const extraWebhookUrl =
|
|
(systemContext?.extra_webhook_url as string) || '';
|
|
|
|
if (!webhookUrl) return null;
|
|
|
|
return (
|
|
<WebhookUrlField
|
|
key={config.id}
|
|
label={extractI18nObject(config.label)}
|
|
description={
|
|
config.description
|
|
? extractI18nObject(config.description)
|
|
: undefined
|
|
}
|
|
url={webhookUrl}
|
|
extraUrl={extraWebhookUrl || undefined}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (config.type === 'embed-code') {
|
|
const botUuid = (systemContext?.bot_uuid as string) || '';
|
|
if (!botUuid) return null;
|
|
|
|
const baseUrl =
|
|
import.meta.env.VITE_API_BASE_URL || window.location.origin;
|
|
const widgetTitle =
|
|
((systemContext?.adapter_config as Record<string, unknown>)
|
|
?.title as string) || 'LangBot';
|
|
const safeTitle = widgetTitle
|
|
.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
const embedSnippet = `<script data-title="${safeTitle}" src="${baseUrl}/api/v1/embed/${botUuid}/widget.js"><\/script>`;
|
|
|
|
return (
|
|
<EmbedCodeField
|
|
key={config.id}
|
|
label={extractI18nObject(config.label)}
|
|
description={
|
|
config.description
|
|
? extractI18nObject(config.description)
|
|
: undefined
|
|
}
|
|
snippet={embedSnippet}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (config.type === 'download-link') {
|
|
if (!config.url) return null;
|
|
|
|
return (
|
|
<DownloadLinkField
|
|
key={config.id}
|
|
label={extractI18nObject(config.label)}
|
|
description={
|
|
config.description
|
|
? extractI18nObject(config.description)
|
|
: undefined
|
|
}
|
|
url={config.url}
|
|
filename={config.download_filename}
|
|
helpUrl={getAdapterDocUrl(config.help_links, i18n.language)}
|
|
helpLabel={
|
|
config.help_label
|
|
? extractI18nObject(config.help_label)
|
|
: t('bots.viewAdapterDocs')
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// QR code login button (e.g. Feishu one-click create, WeChat scan login)
|
|
if (config.type === 'qr-code-login') {
|
|
return (
|
|
<FormItem key={config.id}>
|
|
<div
|
|
className="relative flex items-center gap-4 p-4 rounded-xl border-2 border-dashed cursor-pointer transition-all hover:border-solid hover:shadow-md group"
|
|
style={{
|
|
borderColor:
|
|
'color-mix(in srgb, var(--primary) 25%, transparent)',
|
|
background:
|
|
'color-mix(in srgb, var(--primary) 3%, transparent)',
|
|
}}
|
|
onClick={() => {
|
|
if (!isEditing) {
|
|
setQrDialogPlatform(
|
|
(config.login_platform as QrLoginPlatform) || 'feishu',
|
|
);
|
|
setQrDialogOpen(true);
|
|
}
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-center h-12 w-12 rounded-lg bg-primary/10 shrink-0">
|
|
<QrCode className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-semibold text-foreground">
|
|
{extractI18nObject(config.label)}
|
|
</span>
|
|
<span className="px-1.5 py-0.5 text-[10px] font-bold rounded bg-primary text-primary-foreground">
|
|
{t('common.recommend')}
|
|
</span>
|
|
</div>
|
|
{config.description && (
|
|
<p className="text-xs text-muted-foreground mt-1 leading-relaxed">
|
|
{extractI18nObject(config.description)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
disabled={!!isEditing}
|
|
className="shrink-0"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setQrDialogPlatform(
|
|
(config.login_platform as QrLoginPlatform) || 'feishu',
|
|
);
|
|
setQrDialogOpen(true);
|
|
}}
|
|
>
|
|
<QrCode className="h-3.5 w-3.5 mr-1" />
|
|
{t('common.start')}
|
|
</Button>
|
|
</div>
|
|
</FormItem>
|
|
);
|
|
}
|
|
|
|
if (
|
|
config.type === DynamicFormItemType.RICH_TOOLS_SELECTOR ||
|
|
config.type === DynamicFormItemType.RESOURCES_SELECTOR
|
|
) {
|
|
return (
|
|
<FormField
|
|
key={config.id}
|
|
control={form.control}
|
|
name={config.name as keyof FormValues}
|
|
render={({ field }) => (
|
|
<FormItem className="min-w-0">
|
|
<FormControl>
|
|
<div
|
|
className={cn(
|
|
'min-w-0 max-w-full overflow-x-hidden',
|
|
isFieldDisabled && 'pointer-events-none opacity-60',
|
|
)}
|
|
>
|
|
<DynamicFormItemComponent
|
|
config={config}
|
|
field={field}
|
|
formValues={watchedValues as Record<string, unknown>}
|
|
onFileUploaded={onFileUploaded}
|
|
setFormValue={setFormValue}
|
|
systemContext={systemContext}
|
|
/>
|
|
</div>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Boolean fields use a special inline layout
|
|
if (config.type === 'boolean') {
|
|
return (
|
|
<FormField
|
|
key={config.id}
|
|
control={form.control}
|
|
name={config.name as keyof FormValues}
|
|
render={({ field }) => (
|
|
<FormItem className="min-w-0">
|
|
<div
|
|
className={cn(
|
|
'flex w-full min-w-0 max-w-full flex-row items-center justify-between rounded-lg border p-4',
|
|
isFieldDisabled && 'pointer-events-none opacity-60',
|
|
)}
|
|
>
|
|
<div className="min-w-0 space-y-0.5">
|
|
<FormLabel className="flex min-w-0 items-center gap-1.5 text-base">
|
|
{extractI18nObject(config.label)}
|
|
{renderDisabledTooltipIcon()}
|
|
</FormLabel>
|
|
{config.description && (
|
|
<p className="text-sm break-words text-muted-foreground">
|
|
{extractI18nObject(config.description)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<FormControl>
|
|
<DynamicFormItemComponent
|
|
config={config}
|
|
field={field}
|
|
formValues={watchedValues as Record<string, unknown>}
|
|
onFileUploaded={onFileUploaded}
|
|
setFormValue={setFormValue}
|
|
systemContext={systemContext}
|
|
/>
|
|
</FormControl>
|
|
</div>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FormField
|
|
key={config.id}
|
|
control={form.control}
|
|
name={config.name as keyof FormValues}
|
|
render={({ field }) => (
|
|
<FormItem className="min-w-0">
|
|
<FormLabel className="flex min-w-0 items-center gap-1.5">
|
|
<span className="min-w-0 break-words">
|
|
{extractI18nObject(config.label)}{' '}
|
|
{config.required && (
|
|
<span className="text-red-500">*</span>
|
|
)}
|
|
</span>
|
|
{renderDisabledTooltipIcon()}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<div
|
|
className={cn(
|
|
'min-w-0 max-w-full overflow-x-hidden',
|
|
isFieldDisabled && 'pointer-events-none opacity-60',
|
|
)}
|
|
>
|
|
<DynamicFormItemComponent
|
|
config={config}
|
|
field={field}
|
|
formValues={watchedValues as Record<string, unknown>}
|
|
onFileUploaded={onFileUploaded}
|
|
setFormValue={setFormValue}
|
|
systemContext={systemContext}
|
|
/>
|
|
</div>
|
|
</FormControl>
|
|
{config.description && (
|
|
<p className="text-sm break-words text-muted-foreground">
|
|
{extractI18nObject(config.description)}
|
|
</p>
|
|
)}
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</Form>
|
|
);
|
|
}
|