ai-video-fullstack/frontend/src/components/editor/vision-config-section.tsx

"use client";

import { Camera } from "lucide-react";

import {
  ResourceSelectField,
  ToggleRow,
} from "@/components/assistant-editor/editor-controls";
import { SectionCard } from "@/components/editor/section-card";

type VisionModelOption = {
  value: string;
  label: string;
};

export function VisionConfigSection({
  description,
  hint,
  enabled,
  modelResourceId,
  mainModelResourceId,
  mainModelSupportsImageInput,
  modelOptions,
  onEnabledChange,
  onModelResourceIdChange,
}: {
  description: string;
  hint: string;
  enabled: boolean;
  modelResourceId: string;
  mainModelResourceId: string;
  mainModelSupportsImageInput?: boolean;
  modelOptions: VisionModelOption[];
  onEnabledChange: (enabled: boolean) => void;
  onModelResourceIdChange: (modelResourceId: string) => void;
}) {
  const mainModelSupportsVision =
    mainModelSupportsImageInput ??
    modelOptions.some((option) => option.value === mainModelResourceId);
  const independentModelOptions = modelOptions.filter(
    (option) => option.value !== mainModelResourceId,
  );

  return (
    <SectionCard
      icon={<Camera size={15} />}
      title="视觉理解"
      description={description}
    >
      <ToggleRow
        title="允许理解当前画面"
        hint={hint}
        checked={enabled}
        onChange={onEnabledChange}
      />
      {enabled && (
        <>
          <ResourceSelectField
            label="视觉模型"
            value={modelResourceId}
            onChange={onModelResourceIdChange}
            options={independentModelOptions}
            noneLabel="模型自己"
          />
          {!modelResourceId && !mainModelSupportsVision && (
            <p className="text-xs text-destructive">
              当前模型未标记支持图片输入，请选择独立视觉模型。
            </p>
          )}
        </>
      )}
    </SectionCard>
  );
}