course-agent-od/web/src/components/chat/model-selector.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import { ChevronDown, Cpu, Sparkles, Brain } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ModelOption {
  id: string;
  name: string;
  description: string;
  provider: string;
  providerLabel: string;
  icon?: React.ComponentType<{ className?: string }>;
}

interface ModelSelectorProps {
  selectedModel: string;
  onModelChange: (modelId: string) => void;
  className?: string;
}

const models: ModelOption[] = [
  {
    id: "deepseek-reasoner",
    name: "DeepSeek-R1",
    description: "深度推理模型，适合复杂分析任务",
    provider: "deepseek-official",
    providerLabel: "DeepSeek",
    icon: Brain,
  },
  {
    id: "deepseek-chat",
    name: "DeepSeek-V3",
    description: "通用模型，速度快、能力强",
    provider: "deepseek-official",
    providerLabel: "DeepSeek",
    icon: Sparkles,
  },
];

export default function ModelSelector({
  selectedModel,
  onModelChange,
  className,
}: ModelSelectorProps) {
  const [isOpen, setIsOpen] = useState(false);

  const selectedModelData =
    models.find((model) => model.id === selectedModel) || models[0];
  const IconComponent = selectedModelData.icon || Cpu;

  return (
    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          className={cn(
            "h-9 px-3 text-sm font-medium",
            "border-border/50 bg-background/80 hover:bg-muted/50",
            "transition-all duration-200",
            className
          )}
        >
          <IconComponent className="w-4 h-4 mr-2" />
          <span className="hidden sm:inline">{selectedModelData.name}</span>
          <span className="sm:hidden">{selectedModelData.name.split(" ")[0]}</span>
          <ChevronDown className="w-3 h-3 ml-1 opacity-50" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-64">
        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
          选择AI模型
        </div>
        <DropdownMenuSeparator />
        {models.map((model) => {
          const ModelIcon = model.icon || Cpu;
          const isSelected = model.id === selectedModel;

          return (
            <DropdownMenuItem
              key={model.id}
              onClick={() => {
                onModelChange(model.id);
                setIsOpen(false);
              }}
              className={cn(
                "flex items-start space-x-3 p-3 cursor-pointer",
                isSelected && "bg-muted/50"
              )}
            >
              <ModelIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <div className="flex items-center space-x-2">
                  <span className="font-medium text-sm">{model.name}</span>
                  {isSelected && (
                    <Badge variant="secondary" className="text-xs">
                      已选择
                    </Badge>
                  )}
                </div>
                <p className="text-xs text-muted-foreground mt-0.5">
                  {model.description}
                </p>
              </div>
            </DropdownMenuItem>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}