fix: support vision prompt modes

frontend/src/components/editor/vision-config-section.tsx

@@ -1,53 +1,71 @@
 "use client";
 
-import { useState } from "react";
-import { Camera, Loader2, Sparkles } from "lucide-react";
+import { Camera, Check } from "lucide-react";
 
 import {
   ResourceSelectField,
   ToggleRow,
 } from "@/components/assistant-editor/editor-controls";
 import { SectionCard } from "@/components/editor/section-card";
-import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { assistantsApi } from "@/lib/api";
+import type { VisionPromptMode } from "@/lib/api";
 
 type VisionModelOption = {
   value: string;
   label: string;
 };
 
+const promptModes: Array<{
+  value: VisionPromptMode;
+  title: string;
+  description: string;
+}> = [
+  {
+    value: "fixed",
+    title: "固定提示词",
+    description: "每次获取画面都发送同一个问题。",
+  },
+  {
+    value: "runtime",
+    title: "运行时自动生成",
+    description: "模型结合当前对话，临时生成看图问题。",
+  },
+  {
+    value: "guided",
+    title: "固定提示词引导",
+    description: "模型动态生成问题，同时遵守固定引导。",
+  },
+];
+
 export function VisionConfigSection({
   description,
   hint,
   enabled,
   modelResourceId,
-  focusPrompt,
-  sourcePrompt,
-  generatorModelResourceId,
+  promptMode,
+  prompt,
   mainModelResourceId,
   mainModelSupportsImageInput,
   modelOptions,
   onEnabledChange,
   onModelResourceIdChange,
-  onFocusPromptChange,
+  onPromptModeChange,
+  onPromptChange,
 }: {
   description: string;
   hint: string;
   enabled: boolean;
   modelResourceId: string;
-  focusPrompt: string;
-  sourcePrompt: string;
-  generatorModelResourceId: string;
+  promptMode: VisionPromptMode;
+  prompt: string;
   mainModelResourceId: string;
   mainModelSupportsImageInput?: boolean;
   modelOptions: VisionModelOption[];
   onEnabledChange: (enabled: boolean) => void;
   onModelResourceIdChange: (modelResourceId: string) => void;
-  onFocusPromptChange: (focusPrompt: string) => void;
+  onPromptModeChange: (promptMode: VisionPromptMode) => void;
+  onPromptChange: (prompt: string) => void;
 }) {
-  const [generating, setGenerating] = useState(false);
-  const [generationError, setGenerationError] = useState("");
   const mainModelSupportsVision =
     mainModelSupportsImageInput ??
     modelOptions.some((option) => option.value === mainModelResourceId);
@@ -55,25 +73,6 @@ export function VisionConfigSection({
     (option) => option.value !== mainModelResourceId,
   );
 
-  async function generateFocusPrompt() {
-    if (!sourcePrompt.trim() || !generatorModelResourceId || generating) return;
-    setGenerating(true);
-    setGenerationError("");
-    try {
-      const result = await assistantsApi.generateVisionFocus({
-        sourcePrompt,
-        modelResourceId: generatorModelResourceId,
-      });
-      onFocusPromptChange(result.focusPrompt);
-    } catch (error) {
-      setGenerationError(
-        error instanceof Error ? error.message : "生成视觉关注目标失败",
-      );
-    } finally {
-      setGenerating(false);
-    }
-  }
-
   return (
     <SectionCard
       icon={<Camera size={15} />}
@@ -100,56 +99,79 @@ export function VisionConfigSection({
               当前模型未标记支持图片输入，请选择独立视觉模型。
             </p>
           )}
-          <div className="space-y-1.5">
-            <div className="flex items-center justify-between gap-3">
-              <label className="text-sm font-medium text-foreground">
-                视觉关注目标
-              </label>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="h-7 gap-1.5 rounded-full px-2.5 text-xs"
-                disabled={
-                  generating || !sourcePrompt.trim() || !generatorModelResourceId
-                }
-                onClick={() => void generateFocusPrompt()}
-                title={
-                  !sourcePrompt.trim()
-                    ? "请先填写助手提示词"
-                    : !generatorModelResourceId
-                      ? "请先选择大语言模型"
-                      : "根据当前助手提示词生成可编辑草稿"
-                }
-              >
-                {generating ? (
-                  <Loader2 size={12} className="animate-spin" />
-                ) : (
-                  <Sparkles size={12} />
-                )}
-                {generating ? "生成中" : "根据提示词生成"}
-              </Button>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-foreground">
+              看图问题生成方式
+            </label>
+            <div role="radiogroup" aria-label="看图问题生成方式" className="space-y-2">
+              {promptModes.map((option) => {
+                const selected = promptMode === option.value;
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    role="radio"
+                    aria-checked={selected}
+                    onClick={() => onPromptModeChange(option.value)}
+                    className={[
+                      "flex w-full items-start gap-3 rounded-xl border px-3.5 py-3 text-left transition-colors",
+                      selected
+                        ? "border-primary bg-surface-strong/70 ring-1 ring-primary"
+                        : "border-hairline bg-background hover:border-hairline-strong",
+                    ].join(" ")}
+                  >
+                    <span
+                      className={[
+                        "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border",
+                        selected
+                          ? "border-primary bg-primary text-primary-foreground"
+                          : "border-hairline-strong text-transparent",
+                      ].join(" ")}
+                    >
+                      <Check size={12} />
+                    </span>
+                    <span className="min-w-0">
+                      <span className="block text-sm font-medium text-foreground">
+                        {option.title}
+                      </span>
+                      <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">
+                        {option.description}
+                      </span>
+                    </span>
+                  </button>
+                );
+              })}
             </div>
-            <Textarea
-              value={focusPrompt}
-              maxLength={4000}
-              rows={5}
-              onChange={(event) => {
-                onFocusPromptChange(event.target.value);
-                if (generationError) setGenerationError("");
-              }}
-              placeholder="例如：优先识别车辆数量、碰撞位置、明显损伤和人员状态；只报告画面中可直接确认的信息。"
-              className="field-sizing-fixed min-h-28 resize-y border-hairline-strong bg-background text-sm leading-6 text-foreground placeholder:text-muted-soft"
-            />
-            <p className="text-[11px] leading-5 text-muted-soft">
-              可选。系统仍保留通用视觉安全规则；这里用于让每次看图稳定聚焦业务目标。
-            </p>
-            {generationError && (
-              <p className="text-xs leading-5 text-destructive">
-                {generationError}
-              </p>
-            )}
           </div>
+          {promptMode !== "runtime" && (
+            <div className="space-y-1.5">
+              <label className="text-sm font-medium text-foreground">
+                {promptMode === "fixed" ? "固定视觉提示词" : "运行时提示词引导"}
+              </label>
+              <Textarea
+                value={prompt}
+                maxLength={4000}
+                rows={5}
+                onChange={(event) => onPromptChange(event.target.value)}
+                placeholder={
+                  promptMode === "fixed"
+                    ? "例如：请识别画面中的车辆数量、碰撞位置、明显损伤和人员状态。"
+                    : "例如：问题应聚焦车辆数量、碰撞位置和人员状态；只询问画面中可直接判断的信息。"
+                }
+                className="field-sizing-fixed min-h-28 resize-y border-hairline-strong bg-background text-sm leading-6 text-foreground placeholder:text-muted-soft"
+              />
+              <p className="text-[11px] leading-5 text-muted-soft">
+                {promptMode === "fixed"
+                  ? "工具调用时不会让模型改写这段内容。"
+                  : "模型会结合当前对话生成具体问题，并受到这段内容约束。"}
+              </p>
+              {!prompt.trim() && (
+                <p className="text-xs leading-5 text-destructive">
+                  当前模式需要填写提示词后才能保存。
+                </p>
+              )}
+            </div>
+          )}
         </>
       )}
     </SectionCard>