feat: improve layout and styling of EditDialog with enhanced field organization
This commit is contained in:
mlogclub
@@ -743,114 +743,117 @@ function EditDialogBody({
|
|||||||
title="服务策略"
|
title="服务策略"
|
||||||
description="控制 Graph Tool 转人工配置、兜底策略和自动回复边界。"
|
description="控制 Graph Tool 转人工配置、兜底策略和自动回复边界。"
|
||||||
>
|
>
|
||||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-4">
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(320px,1.15fr)]">
|
||||||
<Field data-invalid={!!errors.handoffMode}>
|
<div className="space-y-4">
|
||||||
<FieldLabel>转人工模式</FieldLabel>
|
<Field data-invalid={!!errors.handoffMode}>
|
||||||
<FieldContent>
|
<FieldLabel>转人工模式</FieldLabel>
|
||||||
<Controller
|
<FieldContent>
|
||||||
control={control}
|
<Controller
|
||||||
name="handoffMode"
|
control={control}
|
||||||
render={({ field }) => (
|
name="handoffMode"
|
||||||
<OptionCombobox
|
render={({ field }) => (
|
||||||
value={field.value}
|
<OptionCombobox
|
||||||
options={handoffModeOptions}
|
value={field.value}
|
||||||
placeholder="请选择转人工模式"
|
options={handoffModeOptions}
|
||||||
searchPlaceholder="搜索转人工模式"
|
placeholder="请选择转人工模式"
|
||||||
emptyText="未找到转人工模式"
|
searchPlaceholder="搜索转人工模式"
|
||||||
onChange={field.onChange}
|
emptyText="未找到转人工模式"
|
||||||
/>
|
onChange={field.onChange}
|
||||||
)}
|
/>
|
||||||
/>
|
)}
|
||||||
<FieldError errors={[errors.handoffMode]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
<Field data-invalid={!!errors.replyTimeoutSeconds}>
|
|
||||||
<FieldLabel
|
|
||||||
htmlFor="ai-agent-reply-timeout-seconds"
|
|
||||||
className="flex items-center gap-1"
|
|
||||||
>
|
|
||||||
回复超时秒数
|
|
||||||
<Popover>
|
|
||||||
<PopoverTrigger
|
|
||||||
render={
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex items-center justify-center text-muted-foreground hover:text-foreground"
|
|
||||||
>
|
|
||||||
<InfoIcon className="size-4" />
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<PopoverContent side="top" align="start" className="max-w-xs">
|
<FieldError errors={[errors.handoffMode]} />
|
||||||
<PopoverDescription>
|
</FieldContent>
|
||||||
AI 自动回复的异步执行超时时间。填 0 时使用系统默认值 180 秒。
|
</Field>
|
||||||
</PopoverDescription>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
</FieldLabel>
|
|
||||||
<FieldContent>
|
|
||||||
<Input
|
|
||||||
id="ai-agent-reply-timeout-seconds"
|
|
||||||
type="number"
|
|
||||||
min={0}
|
|
||||||
step={1}
|
|
||||||
{...register("replyTimeoutSeconds", { valueAsNumber: true })}
|
|
||||||
/>
|
|
||||||
<FieldError errors={[errors.replyTimeoutSeconds]} />
|
|
||||||
</FieldContent>
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="rounded-xl border bg-muted/10 p-4">
|
<Field data-invalid={!!errors.replyTimeoutSeconds}>
|
||||||
<div className="mb-1 text-sm font-medium">客服组</div>
|
<FieldLabel
|
||||||
<div className="mb-4 text-xs text-muted-foreground">
|
htmlFor="ai-agent-reply-timeout-seconds"
|
||||||
当前转人工模式：{selectedHandoffModeLabel}
|
className="flex items-center gap-1"
|
||||||
{handoffMode ===
|
>
|
||||||
String(AIAgentHandoffMode.DefaultTeamPool)
|
回复超时秒数
|
||||||
? "。该模式要求至少配置一个客服组。"
|
<Popover>
|
||||||
: "。仅在涉及转人工时生效。"}
|
<PopoverTrigger
|
||||||
</div>
|
render={
|
||||||
<Field>
|
<button
|
||||||
<FieldContent className="space-y-3">
|
|
||||||
<OptionCombobox
|
|
||||||
value={teamToAdd}
|
|
||||||
options={addableTeamOptions}
|
|
||||||
placeholder="请选择客服组"
|
|
||||||
searchPlaceholder="搜索客服组"
|
|
||||||
emptyText="未找到客服组"
|
|
||||||
onChange={handleAddTeam}
|
|
||||||
/>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{selectedTeamOptions.length === 0 ? (
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
未配置客服组
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
selectedTeamOptions.map((option) => (
|
|
||||||
<Badge
|
|
||||||
key={option.value}
|
|
||||||
variant="secondary"
|
|
||||||
className="gap-1 pr-1"
|
|
||||||
>
|
|
||||||
{option.label}
|
|
||||||
<Button
|
|
||||||
type="button"
|
type="button"
|
||||||
variant="ghost"
|
className="inline-flex items-center justify-center text-muted-foreground hover:text-foreground"
|
||||||
size="icon"
|
|
||||||
className="size-5"
|
|
||||||
onClick={() =>
|
|
||||||
handleRemoveTeam(Number(option.value))
|
|
||||||
}
|
|
||||||
aria-label={`移除客服组 ${option.label}`}
|
|
||||||
>
|
>
|
||||||
<Trash2Icon className="size-3" />
|
<InfoIcon className="size-4" />
|
||||||
</Button>
|
</button>
|
||||||
</Badge>
|
}
|
||||||
))
|
/>
|
||||||
)}
|
<PopoverContent side="top" align="start" className="max-w-xs">
|
||||||
</div>
|
<PopoverDescription>
|
||||||
</FieldContent>
|
AI 自动回复的异步执行超时时间。填 0 时使用系统默认值 180 秒。
|
||||||
</Field>
|
</PopoverDescription>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</FieldLabel>
|
||||||
|
<FieldContent>
|
||||||
|
<Input
|
||||||
|
id="ai-agent-reply-timeout-seconds"
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
step={1}
|
||||||
|
{...register("replyTimeoutSeconds", { valueAsNumber: true })}
|
||||||
|
/>
|
||||||
|
<FieldError errors={[errors.replyTimeoutSeconds]} />
|
||||||
|
</FieldContent>
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg border bg-muted/10 p-4">
|
||||||
|
<div className="mb-1 text-sm font-medium">客服组</div>
|
||||||
|
<div className="mb-4 text-xs text-muted-foreground">
|
||||||
|
当前转人工模式：{selectedHandoffModeLabel}
|
||||||
|
{handoffMode ===
|
||||||
|
String(AIAgentHandoffMode.DefaultTeamPool)
|
||||||
|
? "。该模式要求至少配置一个客服组。"
|
||||||
|
: "。仅在涉及转人工时生效。"}
|
||||||
|
</div>
|
||||||
|
<Field>
|
||||||
|
<FieldContent className="space-y-3">
|
||||||
|
<OptionCombobox
|
||||||
|
value={teamToAdd}
|
||||||
|
options={addableTeamOptions}
|
||||||
|
placeholder="请选择客服组"
|
||||||
|
searchPlaceholder="搜索客服组"
|
||||||
|
emptyText="未找到客服组"
|
||||||
|
onChange={handleAddTeam}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{selectedTeamOptions.length === 0 ? (
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
未配置客服组
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
selectedTeamOptions.map((option) => (
|
||||||
|
<Badge
|
||||||
|
key={option.value}
|
||||||
|
variant="secondary"
|
||||||
|
className="gap-1 pr-1"
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="size-5"
|
||||||
|
onClick={() =>
|
||||||
|
handleRemoveTeam(Number(option.value))
|
||||||
|
}
|
||||||
|
aria-label={`移除客服组 ${option.label}`}
|
||||||
|
>
|
||||||
|
<Trash2Icon className="size-3" />
|
||||||
|
</Button>
|
||||||
|
</Badge>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</FieldContent>
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SectionCard>
|
</SectionCard>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user