1080 lines
50 KiB
TypeScript
1080 lines
50 KiB
TypeScript
/**
|
||
* Analysis form component
|
||
*/
|
||
"use client";
|
||
|
||
import { useState, useEffect, useMemo } from "react";
|
||
import { useForm, ControllerRenderProps } from "react-hook-form";
|
||
import { zodResolver } from "@hookform/resolvers/zod";
|
||
import * as z from "zod";
|
||
import { format } from "date-fns";
|
||
import { CheckIcon } from "lucide-react";
|
||
import { getApiSettingsAsync } from "@/lib/storage";
|
||
import { getBaseUrlForModel, getApiKeyForModel } from "@/lib/api-helpers";
|
||
import Image from "next/image";
|
||
import { useLanguage } from "@/contexts/LanguageContext";
|
||
|
||
import { cn } from "@/lib/utils";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import { DatePicker } from "@/components/ui/date-picker";
|
||
import {
|
||
Form,
|
||
FormControl,
|
||
FormDescription,
|
||
FormField,
|
||
FormItem,
|
||
FormLabel,
|
||
FormMessage,
|
||
} from "@/components/ui/form";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import type { AnalysisRequest } from "@/lib/types";
|
||
|
||
const formSchema = z.object({
|
||
ticker: z.string().min(1, "股票代碼為必填").max(10),
|
||
analysis_date: z
|
||
.string()
|
||
.regex(/^\d{4}-\d{2}-\d{2}$/, "日期格式必須為 YYYY-MM-DD"),
|
||
analysts: z.array(z.string()).min(1, "請至少選擇一位分析師"),
|
||
research_depth: z.number().int().min(1).max(5),
|
||
analysis_mode: z.enum(["fast", "deep"]).default("deep"),
|
||
quick_think_llm: z.string().min(1, "請選擇快速思維模型"),
|
||
deep_think_llm: z.string().min(1, "請選擇深層思維模型"),
|
||
embedding_model: z.string().min(1, "請選擇嵌入式模型"),
|
||
|
||
// Market type selection: us=美股, twse=上市, tpex=上櫃/興櫃
|
||
market_type: z.enum(["us", "twse", "tpex"]),
|
||
|
||
// Custom model names (when "custom" is selected)
|
||
custom_quick_think_model: z.string().optional(),
|
||
custom_deep_think_model: z.string().optional(),
|
||
|
||
// API Configuration (hidden from UI, populated from localStorage)
|
||
quick_think_base_url: z
|
||
.string()
|
||
.url("請輸入有效的 URL")
|
||
.optional()
|
||
.or(z.literal("")),
|
||
deep_think_base_url: z
|
||
.string()
|
||
.url("請輸入有效的 URL")
|
||
.optional()
|
||
.or(z.literal("")),
|
||
quick_think_api_key: z.string().optional().or(z.literal("")),
|
||
deep_think_api_key: z.string().optional().or(z.literal("")),
|
||
embedding_base_url: z
|
||
.string()
|
||
.url("請輸入有效的 URL")
|
||
.optional()
|
||
.or(z.literal("")),
|
||
embedding_api_key: z.string().optional().or(z.literal("")), // 本地模型不需要 API Key
|
||
alpha_vantage_api_key: z.string().optional().or(z.literal("")), // 選填
|
||
finmind_api_key: z.string().optional().or(z.literal("")), // 選填
|
||
});
|
||
|
||
interface AnalysisFormProps {
|
||
onSubmit: (data: AnalysisRequest) => void;
|
||
loading?: boolean;
|
||
}
|
||
|
||
// ANALYSTS is now defined inside the component using translations
|
||
|
||
export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
|
||
const { t, locale } = useLanguage();
|
||
|
||
// Define ANALYSTS using translations
|
||
const ANALYSTS = useMemo(() => [
|
||
{ value: "market", label: t.agents.market_analyst },
|
||
{ value: "social", label: t.agents.social_analyst },
|
||
{ value: "news", label: t.agents.news_analyst },
|
||
{ value: "fundamentals", label: t.agents.fundamentals_analyst },
|
||
], [t]);
|
||
|
||
const form = useForm<z.infer<typeof formSchema>>({
|
||
resolver: zodResolver(formSchema),
|
||
defaultValues: {
|
||
ticker: "NVDA",
|
||
analysis_date: format(new Date(), "yyyy-MM-dd"),
|
||
analysts: ["market", "social", "news", "fundamentals"], // 預設全選
|
||
research_depth: 3, // 預設中等層級
|
||
analysis_mode: "deep", // 預設深層分析
|
||
market_type: "us", // 預設美股
|
||
quick_think_llm: "gpt-5-mini",
|
||
deep_think_llm: "gpt-5-mini",
|
||
embedding_model: "all-MiniLM-L6-v2", // 預設使用本地開源模型
|
||
custom_quick_think_model: "",
|
||
custom_deep_think_model: "",
|
||
quick_think_base_url: "https://api.openai.com/v1",
|
||
deep_think_base_url: "https://api.openai.com/v1",
|
||
quick_think_api_key: "",
|
||
deep_think_api_key: "",
|
||
embedding_base_url: "https://api.openai.com/v1",
|
||
embedding_api_key: "",
|
||
alpha_vantage_api_key: "",
|
||
finmind_api_key: "",
|
||
},
|
||
});
|
||
|
||
// Load API settings from localStorage and update when models change
|
||
const quickThinkLlm = form.watch("quick_think_llm");
|
||
const deepThinkLlm = form.watch("deep_think_llm");
|
||
const embeddingModel = form.watch("embedding_model");
|
||
const marketType = form.watch("market_type");
|
||
const isQuickThinkCustom = quickThinkLlm === "custom";
|
||
const isDeepThinkCustom = deepThinkLlm === "custom";
|
||
const isLocalEmbedding = ["all-MiniLM-L6-v2", "all-mpnet-base-v2"].includes(embeddingModel);
|
||
|
||
useEffect(() => {
|
||
// Use async version to get decrypted API keys
|
||
const loadSettings = async () => {
|
||
const savedSettings = await getApiSettingsAsync();
|
||
|
||
// For custom models, always use custom base URL and API key
|
||
if (isQuickThinkCustom) {
|
||
form.setValue(
|
||
"quick_think_base_url",
|
||
savedSettings.custom_base_url || ""
|
||
);
|
||
form.setValue(
|
||
"quick_think_api_key",
|
||
savedSettings.custom_api_key || ""
|
||
);
|
||
} else {
|
||
form.setValue(
|
||
"quick_think_base_url",
|
||
getBaseUrlForModel(quickThinkLlm, savedSettings.custom_base_url)
|
||
);
|
||
form.setValue(
|
||
"quick_think_api_key",
|
||
getApiKeyForModel(quickThinkLlm, savedSettings)
|
||
);
|
||
}
|
||
|
||
if (isDeepThinkCustom) {
|
||
form.setValue(
|
||
"deep_think_base_url",
|
||
savedSettings.custom_base_url || ""
|
||
);
|
||
form.setValue("deep_think_api_key", savedSettings.custom_api_key || "");
|
||
} else {
|
||
form.setValue(
|
||
"deep_think_base_url",
|
||
getBaseUrlForModel(deepThinkLlm, savedSettings.custom_base_url)
|
||
);
|
||
form.setValue(
|
||
"deep_think_api_key",
|
||
getApiKeyForModel(deepThinkLlm, savedSettings)
|
||
);
|
||
}
|
||
|
||
// 本地模型不需要設定 API Key 和 Base URL
|
||
if (!isLocalEmbedding) {
|
||
form.setValue(
|
||
"embedding_base_url",
|
||
savedSettings.custom_base_url || "https://api.openai.com/v1"
|
||
);
|
||
form.setValue(
|
||
"embedding_api_key",
|
||
savedSettings.custom_api_key || savedSettings.openai_api_key
|
||
);
|
||
} else {
|
||
form.setValue("embedding_base_url", "");
|
||
form.setValue("embedding_api_key", "");
|
||
}
|
||
form.setValue(
|
||
"alpha_vantage_api_key",
|
||
savedSettings.alpha_vantage_api_key || ""
|
||
);
|
||
form.setValue("finmind_api_key", savedSettings.finmind_api_key || "");
|
||
};
|
||
|
||
loadSettings();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [quickThinkLlm, deepThinkLlm, embeddingModel, isQuickThinkCustom, isDeepThinkCustom, isLocalEmbedding]);
|
||
|
||
// 當市場類型改變時，更新預設股票代碼和提示
|
||
useEffect(() => {
|
||
const currentTicker = form.getValues("ticker");
|
||
// 只在用戶未修改預設值時才自動切換
|
||
const isTwStock = marketType === "twse" || marketType === "tpex";
|
||
const isDefaultUsTicker =
|
||
currentTicker === "NVDA" || currentTicker === "AAPL";
|
||
const isDefaultTwTicker =
|
||
currentTicker === "2330" ||
|
||
currentTicker === "2317" ||
|
||
currentTicker === "6488";
|
||
|
||
if (isTwStock && isDefaultUsTicker) {
|
||
form.setValue("ticker", marketType === "twse" ? "2330" : "6488");
|
||
} else if (marketType === "us" && isDefaultTwTicker) {
|
||
form.setValue("ticker", "NVDA");
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [marketType]);
|
||
|
||
// 全選/取消全選
|
||
const toggleSelectAll = () => {
|
||
const currentAnalysts = form.getValues("analysts");
|
||
if (currentAnalysts.length === ANALYSTS.length) {
|
||
form.setValue("analysts", []);
|
||
} else {
|
||
form.setValue(
|
||
"analysts",
|
||
ANALYSTS.map((a) => a.value)
|
||
);
|
||
}
|
||
};
|
||
|
||
function handleSubmit(values: z.infer<typeof formSchema>) {
|
||
// Use custom model names if "custom" is selected
|
||
const finalQuickThinkLlm =
|
||
values.quick_think_llm === "custom"
|
||
? values.custom_quick_think_model || ""
|
||
: values.quick_think_llm;
|
||
|
||
const finalDeepThinkLlm =
|
||
values.deep_think_llm === "custom"
|
||
? values.custom_deep_think_model || ""
|
||
: values.deep_think_llm;
|
||
|
||
// Validate custom model names
|
||
if (
|
||
values.quick_think_llm === "custom" &&
|
||
!values.custom_quick_think_model
|
||
) {
|
||
form.setError("custom_quick_think_model", {
|
||
type: "manual",
|
||
message: "請輸入快速思維模型的完整名稱",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (values.deep_think_llm === "custom" && !values.custom_deep_think_model) {
|
||
form.setError("custom_deep_think_model", {
|
||
type: "manual",
|
||
message: "請輸入深層思維模型的完整名稱",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// Validate API keys are set (they come from localStorage/settings)
|
||
if (!values.quick_think_api_key) {
|
||
alert("請先在右上角「設定」中設定您的 API Key。\n\n快速思維模型需要對應的 API Key 才能運作。");
|
||
return;
|
||
}
|
||
|
||
if (!values.deep_think_api_key) {
|
||
alert("請先在右上角「設定」中設定您的 API Key。\n\n深層思維模型需要對應的 API Key 才能運作。");
|
||
return;
|
||
}
|
||
|
||
const request: AnalysisRequest = {
|
||
...values,
|
||
quick_think_llm: finalQuickThinkLlm,
|
||
deep_think_llm: finalDeepThinkLlm,
|
||
language: locale as "en" | "zh-TW", // Pass current UI language to backend
|
||
};
|
||
onSubmit(request);
|
||
}
|
||
|
||
return (
|
||
<Card className="shadow-lg hover-lift animate-scale-up">
|
||
<CardContent className="pt-6">
|
||
<Form {...form}>
|
||
<form
|
||
onSubmit={form.handleSubmit(handleSubmit)}
|
||
className="space-y-6"
|
||
>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{/* 分析師選擇區塊 - 全寬 */}
|
||
<div className="md:col-span-2 border-b pb-6">
|
||
<div className="flex justify-between items-center mb-4">
|
||
<FormLabel className="text-base font-semibold">
|
||
{t.form.analysts}
|
||
</FormLabel>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={toggleSelectAll}
|
||
>
|
||
{form.watch("analysts").length === ANALYSTS.length
|
||
? t.form.deselectAll
|
||
: t.form.selectAll}
|
||
</Button>
|
||
</div>
|
||
<FormField
|
||
control={form.control}
|
||
name="analysts"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{ANALYSTS.map((analyst) => {
|
||
const isSelected = field.value?.includes(
|
||
analyst.value
|
||
);
|
||
return (
|
||
<FormItem key={analyst.value} className="space-y-0">
|
||
<FormControl>
|
||
<div
|
||
onClick={() => {
|
||
const newValue = isSelected
|
||
? field.value?.filter(
|
||
(v: string) => v !== analyst.value
|
||
)
|
||
: [...(field.value ?? []), analyst.value];
|
||
field.onChange(newValue);
|
||
}}
|
||
className={cn(
|
||
"relative flex cursor-pointer flex-row items-center gap-3 rounded-lg border-2 p-4 transition-all hover:bg-accent",
|
||
isSelected
|
||
? "border-primary bg-primary/5 text-primary"
|
||
: "border-muted-foreground/25 bg-card text-muted-foreground"
|
||
)}
|
||
>
|
||
<div
|
||
className={cn(
|
||
"flex h-5 w-5 shrink-0 items-center justify-center rounded-sm border transition-colors",
|
||
isSelected
|
||
? "border-primary bg-primary text-primary-foreground"
|
||
: "border-muted-foreground"
|
||
)}
|
||
>
|
||
{isSelected && (
|
||
<CheckIcon className="h-3.5 w-3.5" />
|
||
)}
|
||
</div>
|
||
<span className="font-medium select-none">
|
||
{analyst.label}
|
||
</span>
|
||
</div>
|
||
</FormControl>
|
||
</FormItem>
|
||
);
|
||
})}
|
||
</div>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* 第一行：市場類型、股票代碼、分析日期（3列） */}
|
||
<div className="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{/* 市場類型選擇 */}
|
||
<FormField
|
||
control={form.control}
|
||
name="market_type"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t.form.marketType}</FormLabel>
|
||
<Select
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
>
|
||
<FormControl>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder={t.form.selectMarket} />
|
||
</SelectTrigger>
|
||
</FormControl>
|
||
<SelectContent>
|
||
<SelectItem
|
||
value="us"
|
||
className="py-3 cursor-pointer"
|
||
>
|
||
🇺🇸 {t.form.usMarket}
|
||
</SelectItem>
|
||
<SelectItem
|
||
value="twse"
|
||
className="py-3 cursor-pointer"
|
||
>
|
||
🇹🇼 {t.form.twseMarket}
|
||
</SelectItem>
|
||
<SelectItem
|
||
value="tpex"
|
||
className="py-3 cursor-pointer"
|
||
>
|
||
🇹🇼 {t.form.tpexMarket}
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<FormDescription>{t.form.selectMarketDesc}</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
{/* 股票代碼 */}
|
||
<FormField
|
||
control={form.control}
|
||
name="ticker"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t.form.ticker}</FormLabel>
|
||
<FormControl>
|
||
<Input
|
||
placeholder={
|
||
marketType === "us"
|
||
? "NVDA"
|
||
: marketType === "twse"
|
||
? "2330"
|
||
: "6488"
|
||
}
|
||
{...field}
|
||
/>
|
||
</FormControl>
|
||
<FormDescription>
|
||
{marketType === "us"
|
||
? t.form.tickerDescUS
|
||
: marketType === "twse"
|
||
? t.form.tickerDescTWSE
|
||
: t.form.tickerDescTPEX}
|
||
</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="analysis_date"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t.form.analysisDate}</FormLabel>
|
||
<FormControl>
|
||
<DatePicker
|
||
date={field.value ? new Date(field.value) : undefined}
|
||
onDateChange={(date) => {
|
||
field.onChange(
|
||
date ? format(date, "yyyy-MM-dd") : ""
|
||
);
|
||
}}
|
||
placeholder={t.form.selectDate}
|
||
className="w-full"
|
||
/>
|
||
</FormControl>
|
||
<FormDescription>{t.form.selectDate}</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* 分析模式行 */}
|
||
<div className="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<FormField
|
||
control={form.control}
|
||
name="analysis_mode"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>分析模式</FormLabel>
|
||
<Select
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
>
|
||
<FormControl>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="選擇分析模式" />
|
||
</SelectTrigger>
|
||
</FormControl>
|
||
<SelectContent>
|
||
<SelectItem value="fast">快速分析 (~15-25 分鐘)</SelectItem>
|
||
<SelectItem value="deep">深層分析 (~1 小時)</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<FormDescription>快速模式跳過辯論，深層模式包含投資和風險辯論</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* 第二行：研究深度、快速思維模型、深層思維模型、嵌入式模型（4列） */}
|
||
<div className="md:col-span-2 grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
<FormField
|
||
control={form.control}
|
||
name="research_depth"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t.form.researchDepth}</FormLabel>
|
||
<Select
|
||
onValueChange={(value) =>
|
||
field.onChange(parseInt(value))
|
||
}
|
||
defaultValue={field.value?.toString() ?? "3"}
|
||
>
|
||
<FormControl>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder={t.form.selectDepth} />
|
||
</SelectTrigger>
|
||
</FormControl>
|
||
<SelectContent className="max-h-80">
|
||
<SelectItem value="1" className="py-3 cursor-pointer">
|
||
{t.form.depthShallowLabel}
|
||
</SelectItem>
|
||
<SelectItem value="3" className="py-3 cursor-pointer">
|
||
{t.form.depthMediumLabel}
|
||
</SelectItem>
|
||
<SelectItem value="5" className="py-3 cursor-pointer">
|
||
{t.form.depthDeepLabel}
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<FormDescription>{t.form.selectDepth}</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="quick_think_llm"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t.form.quickThinkModel}</FormLabel>
|
||
<Select
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
>
|
||
<FormControl>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="選擇模型" />
|
||
</SelectTrigger>
|
||
</FormControl>
|
||
<SelectContent>
|
||
{/* OpenAI */}
|
||
<SelectItem value="gpt-5.2-2025-12-11">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-5.2</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-5.1">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-5.1</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-5-mini">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-5 Mini</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-5-nano">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-5 Nano</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-4.1-mini">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-4.1 Mini</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-4.1-nano">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-4.1 Nano</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="o4-mini">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>o4-mini</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Anthropic (Official model IDs) */}
|
||
<SelectItem value="claude-sonnet-4-5-20250929">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
|
||
<span>Claude Sonnet 4.5</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="claude-haiku-4-5-20251001">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
|
||
<span>Claude Haiku 4.5</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="claude-sonnet-4-20250514">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
|
||
<span>Claude Sonnet 4</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="claude-3-haiku-20240307">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
|
||
<span>Claude 3 Haiku</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Google */}
|
||
<SelectItem value="gemini-2.5-pro">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.5 Pro</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gemini-2.5-flash">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.5 Flash</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gemini-2.5-flash-lite">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.5 Flash Lite</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gemini-2.0-flash">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.0 Flash</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gemini-2.0-flash-lite">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.0 Flash Lite</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Grok */}
|
||
<SelectItem value="grok-4-1-fast-reasoning">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4.1 Fast Reasoning</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-4-1-fast-non-reasoning">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4.1 Fast Non Reasoning</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-4-fast-reasoning">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4 Fast Reasoning</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-4-fast-non-reasoning">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4 Fast Non Reasoning</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-4-0709">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-3">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 3</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-3-mini">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 3 Mini</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* DeepSeek */}
|
||
<SelectItem value="deepseek-reasoner">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/deepseek-color.svg" alt="DeepSeek" width={16} height={16} className="shrink-0" />
|
||
<span>DeepSeek Reasoner</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="deepseek-chat">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/deepseek-color.svg" alt="DeepSeek" width={16} height={16} className="shrink-0" />
|
||
<span>DeepSeek Chat</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Qwen */}
|
||
<SelectItem value="qwen3-max">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
|
||
<span>Qwen 3 Max</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="qwen-plus">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
|
||
<span>Qwen Plus</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="qwen-flash">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
|
||
<span>Qwen Flash</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Custom Model */}
|
||
<SelectItem value="custom">
|
||
{t.form.otherCustomModel}
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<FormDescription>{t.form.quickResponseModel}</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
{/* Custom Quick Think Model Input */}
|
||
{isQuickThinkCustom && (
|
||
<FormField
|
||
control={form.control}
|
||
name="custom_quick_think_model"
|
||
render={({ field }) => (
|
||
<FormItem className="md:col-span-3 animate-scale-up">
|
||
<FormLabel>自訂快速思維模型名稱</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="例如：deepseek-chat" {...field} />
|
||
</FormControl>
|
||
<FormDescription>
|
||
請輸入完整的模型名稱（此模型將使用自訂端點）
|
||
</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
)}
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="deep_think_llm"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t.form.deepThinkModel}</FormLabel>
|
||
<Select
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
>
|
||
<FormControl>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="選擇模型" />
|
||
</SelectTrigger>
|
||
</FormControl>
|
||
<SelectContent>
|
||
{/* OpenAI */}
|
||
<SelectItem value="gpt-5.2-2025-12-11">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-5.2</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-5.1">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-5.1</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-5-mini">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-5 Mini</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-5-nano">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-5 Nano</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-4.1-mini">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-4.1 Mini</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gpt-4.1-nano">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>GPT-4.1 Nano</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="o4-mini">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>o4-mini</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Anthropic (Official model IDs) */}
|
||
<SelectItem value="claude-sonnet-4-5-20250929">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
|
||
<span>Claude Sonnet 4.5</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="claude-haiku-4-5-20251001">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
|
||
<span>Claude Haiku 4.5</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="claude-sonnet-4-20250514">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
|
||
<span>Claude Sonnet 4</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="claude-3-haiku-20240307">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/claude-color.svg" alt="Claude" width={16} height={16} className="shrink-0" />
|
||
<span>Claude 3 Haiku</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Google */}
|
||
<SelectItem value="gemini-2.5-pro">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.5 Pro</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gemini-2.5-flash">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.5 Flash</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gemini-2.5-flash-lite">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.5 Flash Lite</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gemini-2.0-flash">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.0 Flash</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="gemini-2.0-flash-lite">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/gemini-color.svg" alt="Gemini" width={16} height={16} className="shrink-0" />
|
||
<span>Gemini 2.0 Flash Lite</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Grok */}
|
||
<SelectItem value="grok-4-1-fast-reasoning">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4.1 Fast Reasoning</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-4-1-fast-non-reasoning">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4.1 Fast Non Reasoning</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-4-fast-reasoning">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4 Fast Reasoning</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-4-fast-non-reasoning">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4 Fast Non Reasoning</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-4-0709">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 4</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-3">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 3</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="grok-3-mini">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/grok.svg" alt="Grok" width={16} height={16} className="shrink-0" />
|
||
<span>Grok 3 Mini</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* DeepSeek */}
|
||
<SelectItem value="deepseek-reasoner">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/deepseek-color.svg" alt="DeepSeek" width={16} height={16} className="shrink-0" />
|
||
<span>DeepSeek Reasoner</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="deepseek-chat">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/deepseek-color.svg" alt="DeepSeek" width={16} height={16} className="shrink-0" />
|
||
<span>DeepSeek Chat</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Qwen */}
|
||
<SelectItem value="qwen3-max">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
|
||
<span>Qwen 3 Max</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="qwen-plus">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
|
||
<span>Qwen Plus</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="qwen-flash">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/qwen-color.svg" alt="Qwen" width={16} height={16} className="shrink-0" />
|
||
<span>Qwen Flash</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* Custom Model */}
|
||
<SelectItem value="custom">
|
||
{t.form.otherCustomModel}
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<FormDescription>{t.form.complexReasoningModel}</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
{/* Custom Deep Think Model Input */}
|
||
{isDeepThinkCustom && (
|
||
<FormField
|
||
control={form.control}
|
||
name="custom_deep_think_model"
|
||
render={({ field }) => (
|
||
<FormItem className="md:col-span-3 animate-scale-up">
|
||
<FormLabel>{t.form.customDeepThinkModelName}</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="例如：deepseek-chat" {...field} />
|
||
</FormControl>
|
||
<FormDescription>
|
||
請輸入完整的模型名稱（此模型將使用自訂端點）
|
||
</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
)}
|
||
|
||
{/* 嵌入式模型 */}
|
||
<FormField
|
||
control={form.control}
|
||
name="embedding_model"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t.form.embeddingModel}</FormLabel>
|
||
<Select
|
||
onValueChange={field.onChange}
|
||
defaultValue={field.value}
|
||
>
|
||
<FormControl>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="選擇嵌入式模型" />
|
||
</SelectTrigger>
|
||
</FormControl>
|
||
<SelectContent>
|
||
{/* 本地開源模型 (不需要 API Key) */}
|
||
<SelectItem value="all-MiniLM-L6-v2">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/huggingface-color.svg" alt="HuggingFace" width={16} height={16} className="shrink-0" />
|
||
<span>all-MiniLM-L6-v2</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="all-mpnet-base-v2">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/huggingface-color.svg" alt="HuggingFace" width={16} height={16} className="shrink-0" />
|
||
<span>all-mpnet-base-v2</span>
|
||
</div>
|
||
</SelectItem>
|
||
|
||
{/* OpenAI API 模型 (需要 API Key) */}
|
||
<SelectItem value="text-embedding-3-small">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>text-embedding-3-small</span>
|
||
</div>
|
||
</SelectItem>
|
||
<SelectItem value="text-embedding-3-large">
|
||
<div className="flex items-center gap-2">
|
||
<Image src="/logos/openai.svg" alt="OpenAI" width={16} height={16} className="shrink-0" />
|
||
<span>text-embedding-3-large</span>
|
||
</div>
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<FormDescription>
|
||
{isLocalEmbedding
|
||
? t.form.localModelNoApiKey
|
||
: t.form.needsOpenAiApiKey}
|
||
</FormDescription>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<Button
|
||
type="submit"
|
||
className="w-full bg-gradient-to-r from-blue-500 to-pink-500 dark:from-blue-600 dark:to-purple-600 hover:from-blue-600 hover:to-pink-600 dark:hover:from-blue-700 dark:hover:to-purple-700 shadow-lg hover:shadow-xl transition-all animate-heartbeat"
|
||
disabled={loading}
|
||
size="lg"
|
||
style={{
|
||
touchAction: "manipulation",
|
||
WebkitTapHighlightColor: "transparent",
|
||
}}
|
||
onClick={(e) => {
|
||
// Ensure touch events work on Safari mobile
|
||
e.currentTarget.blur();
|
||
}}
|
||
>
|
||
{loading ? t.form.analyzing : t.form.executeAnalysis}
|
||
</Button>
|
||
</form>
|
||
</Form>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|