예제 소스

ModelSelector.tsx

"use client";

import { useEffect, useState } from "react";
import {
  VLM_MODELS,
  getSelectedVlmModelId,
  setSelectedVlmModelId,
  type VlmModelOption,
} from "@/lib/vlmModels";
import styles from "./ModelSelector.module.css";

const SELECT_WIDTH_CH =
  Math.max(...VLM_MODELS.map((m) => m.label.length)) + 2;

type Props = {
  disabled?: boolean;
  onChange?: (model: VlmModelOption) => void;
};

export function ModelSelector({ disabled = false, onChange }: Props) {
  const [modelId, setModelId] = useState("local");

  useEffect(() => {
    setModelId(getSelectedVlmModelId());
  }, []);

  function handleChange(nextId: string) {
    setSelectedVlmModelId(nextId);
    setModelId(nextId);
    const model = VLM_MODELS.find((m) => m.id === nextId);
    if (model) onChange?.(model);
  }

  return (
    <label className={styles.wrap}>
      <span className={styles.label}>AI</span>
      <select
        className={styles.select}
        style={{ width: `${SELECT_WIDTH_CH}ch` }}
        value={modelId}
        disabled={disabled}
        onChange={(e) => handleChange(e.target.value)}
        aria-label="모델 선택"
      >
        {VLM_MODELS.map((m) => (
          <option key={m.id} value={m.id}>
            {m.label}
          </option>
        ))}
      </select>
    </label>
  );
}