增加模型选择功能，支持不同 Agent 模型

src/components/chat/AgentComposer.tsx

@@ -7,8 +7,11 @@ import {
   Box,
   Chip,
   Collapse,
+  FormControl,
   IconButton,
+  MenuItem,
   Paper,
+  Select,
   Stack,
   TextField,
   Typography,
@@ -21,6 +24,9 @@ import MicRounded from "@mui/icons-material/MicRounded";
 import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
 import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
 import AttachFileRounded from "@mui/icons-material/AttachFileRounded";
+import BoltRounded from "@mui/icons-material/BoltRounded";
+import AutoAwesomeRounded from "@mui/icons-material/AutoAwesomeRounded";
+import type { AgentModel } from "@/lib/chatStream";
 
 type AgentComposerProps = {
   input: string;
@@ -36,6 +42,8 @@ type AgentComposerProps = {
   onStartListening: () => void;
   onStopListening: () => void;
   onPresetSelect: (prompt: string) => void;
+  selectedModel: AgentModel;
+  onModelChange: (model: AgentModel) => void;
 };
 
 export const AgentComposer = ({
@@ -52,6 +60,8 @@ export const AgentComposer = ({
   onStartListening,
   onStopListening,
   onPresetSelect,
+  selectedModel,
+  onModelChange,
 }: AgentComposerProps) => {
   const theme = useTheme();
   const canSend = input.trim().length > 0 && !isStreaming && !isHydrating;
@@ -213,46 +223,163 @@ export const AgentComposer = ({
               ) : null}
             </Stack>
 
-            <AnimatePresence mode="wait">
-              {isStreaming ? (
-                <motion.div key="stop" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
-                  <IconButton
-                    onClick={onAbort}
-                    aria-label="停止生成"
-                    size="small"
-                    sx={{
-                      bgcolor: "error.main",
-                      color: "#fff",
-                      width: 40,
-                      height: 40,
-                      boxShadow: `0 4px 12px ${alpha(theme.palette.error.main, 0.4)}`,
-                      "&:hover": { bgcolor: "error.dark" },
-                    }}
-                  >
-                    <StopRounded />
-                  </IconButton>
-                </motion.div>
-              ) : (
-                <motion.div key="send" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
-                  <IconButton
-                    disabled={!canSend}
-                    onClick={onSend}
-                    aria-label="发送"
-                    size="small"
-                    sx={{
-                      bgcolor: canSend ? "#00acc1" : alpha("#fff", 0.5),
-                      color: canSend ? "#fff" : "action.disabled",
-                      width: 40,
-                      height: 40,
-                      boxShadow: canSend ? `0 6px 16px ${alpha("#00acc1", 0.4)}` : "none",
-                      "&:hover": { bgcolor: canSend ? "#00838f" : alpha("#fff", 0.5) },
-                    }}
-                  >
-                    <SendRounded sx={{ ml: 0.35 }} />
-                  </IconButton>
-                </motion.div>
-              )}
-            </AnimatePresence>
+            <Stack direction="row" spacing={1} alignItems="center">
+              <FormControl size="small" sx={{ minWidth: 80 }}>
+                <Select
+                  value={selectedModel}
+                  onChange={(event) => onModelChange(event.target.value as AgentModel)}
+                  disabled={isHydrating || isStreaming}
+                  aria-label="模型选择"
+                  renderValue={(val) => (
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                      {val === "deepseek/deepseek-v4-flash" ? (
+                        <BoltRounded sx={{ fontSize: 18, color: "inherit", transition: "color 0.2s" }} />
+                      ) : (
+                        <AutoAwesomeRounded sx={{ fontSize: 16, color: "inherit", transition: "color 0.2s" }} />
+                      )}
+                      <Typography sx={{ fontSize: "0.8rem", fontWeight: 600, color: "inherit", transition: "color 0.2s" }}>
+                        {val === "deepseek/deepseek-v4-flash" ? "快速" : "专家"}
+                      </Typography>
+                    </Box>
+                  )}
+                  MenuProps={{
+                    anchorOrigin: { vertical: "top", horizontal: "center" },
+                    transformOrigin: { vertical: "bottom", horizontal: "center" },
+                    sx: { zIndex: (theme) => theme.zIndex.modal + 110 },
+                    PaperProps: {
+                      sx: {
+                        mb: 1.5,
+                        width: 230,
+                        borderRadius: 4,
+                        bgcolor: alpha("#fff", 0.85),
+                        backdropFilter: "blur(24px)",
+                        border: `1px solid ${alpha("#fff", 0.9)}`,
+                        boxShadow: `0 -12px 40px ${alpha("#000", 0.08)}, 0 0 0 1px ${alpha("#00acc1", 0.05)} inset`,
+                        "& .MuiList-root": {
+                          p: 1,
+                        },
+                        "& .MuiMenuItem-root": {
+                          px: 1.5,
+                          py: 1.2,
+                          mb: 0.5,
+                          "&:last-child": { mb: 0 },
+                          borderRadius: 3,
+                          alignItems: "flex-start",
+                          transition: "all 0.2s ease",
+                          "&:hover": {
+                            bgcolor: alpha("#000", 0.03),
+                          },
+                          "&.Mui-selected": {
+                            bgcolor: alpha("#00acc1", 0.08),
+                            "&:hover": {
+                              bgcolor: alpha("#00acc1", 0.12),
+                            },
+                            "& .title": { color: "#00838f" },
+                            "& .icon": { color: "#00acc1" },
+                          }
+                        }
+                      }
+                    }
+                  }}
+                  sx={{
+                    height: 36,
+                    borderRadius: "18px",
+                    bgcolor: "transparent",
+                    color: "text.secondary",
+                    transition: "all 0.2s ease",
+                    ".MuiOutlinedInput-notchedOutline": {
+                      border: "none",
+                    },
+                    ".MuiSelect-select": {
+                      py: 0,
+                      pl: 1,
+                      pr: "28px !important",
+                      display: "flex",
+                      alignItems: "center",
+                    },
+                    "&:hover, &:has(.MuiSelect-select[aria-expanded=\"true\"])": {
+                      bgcolor: alpha("#000", 0.06),
+                      color: "text.primary",
+                      ".MuiSelect-icon": {
+                        color: "text.primary",
+                      }
+                    },
+                    ".MuiSelect-icon": {
+                      color: "text.secondary",
+                      right: 4,
+                      transition: "color 0.2s ease",
+                    }
+                  }}
+                >
+                  <Box sx={{ px: 2, py: 1.5, pb: 1, display: "flex", alignItems: "center", gap: 1, pointerEvents: "none" }}>
+                    <Box
+                      component="img"
+                      src="/deepseek-logo.svg"
+                      alt="DeepSeek"
+                      sx={{ width: 16, height: 16, display: "block", flexShrink: 0 }}
+                    />
+                    <Typography sx={{ fontSize: "0.75rem", fontWeight: 700, color: "text.secondary", letterSpacing: 0.5 }}>
+                      DEEPSEEK V4
+                    </Typography>
+                  </Box>
+                  <MenuItem value="deepseek/deepseek-v4-flash">
+                    <BoltRounded className="icon" sx={{ mr: 1.5, mt: 0.2, fontSize: 20, color: "text.secondary", transition: "color 0.2s" }} />
+                    <Box>
+                      <Typography className="title" sx={{ fontSize: "0.85rem", fontWeight: 700, color: "text.primary", mb: 0.2, transition: "color 0.2s" }}>快速</Typography>
+                      <Typography sx={{ fontSize: "0.7rem", fontWeight: 500, color: "text.secondary", lineHeight: 1.3 }}>快速回答和任务执行</Typography>
+                    </Box>
+                  </MenuItem>
+                  <MenuItem value="deepseek/deepseek-v4-pro">
+                    <AutoAwesomeRounded className="icon" sx={{ mr: 1.5, mt: 0.2, fontSize: 18, color: "text.secondary", transition: "color 0.2s" }} />
+                    <Box>
+                      <Typography className="title" sx={{ fontSize: "0.85rem", fontWeight: 700, color: "text.primary", mb: 0.2, transition: "color 0.2s" }}>专家</Typography>
+                      <Typography sx={{ fontSize: "0.7rem", fontWeight: 500, color: "text.secondary", lineHeight: 1.3 }}>探索、解决复杂任务</Typography>
+                    </Box>
+                  </MenuItem>
+                </Select>
+              </FormControl>
+
+              <AnimatePresence mode="wait">
+                {isStreaming ? (
+                  <motion.div key="stop" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
+                    <IconButton
+                      onClick={onAbort}
+                      aria-label="停止生成"
+                      size="small"
+                      sx={{
+                        bgcolor: "error.main",
+                        color: "#fff",
+                        width: 40,
+                        height: 40,
+                        boxShadow: `0 4px 12px ${alpha(theme.palette.error.main, 0.4)}`,
+                        "&:hover": { bgcolor: "error.dark" },
+                      }}
+                    >
+                      <StopRounded />
+                    </IconButton>
+                  </motion.div>
+                ) : (
+                  <motion.div key="send" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
+                    <IconButton
+                      disabled={!canSend}
+                      onClick={onSend}
+                      aria-label="发送"
+                      size="small"
+                      sx={{
+                        bgcolor: canSend ? "#00acc1" : alpha("#fff", 0.5),
+                        color: canSend ? "#fff" : "action.disabled",
+                        width: 40,
+                        height: 40,
+                        boxShadow: canSend ? `0 6px 16px ${alpha("#00acc1", 0.4)}` : "none",
+                        "&:hover": { bgcolor: canSend ? "#00838f" : alpha("#fff", 0.5) },
+                      }}
+                    >
+                      <SendRounded sx={{ ml: 0.35 }} />
+                    </IconButton>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </Stack>
           </Stack>
         </Paper>
       </motion.div>

src/components/chat/GlobalChatbox.tsx

@@ -3,6 +3,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Box, Drawer, alpha, useTheme } from "@mui/material";
 
+import type { AgentModel } from "@/lib/chatStream";
 import { AgentComposer } from "./AgentComposer";
 import { AgentHeader } from "./AgentHeader";
 import { AgentHistoryPanel } from "./AgentHistoryPanel";
@@ -19,6 +20,9 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
   const [width, setWidth] = useState(520);
   const [isResizing, setIsResizing] = useState(false);
   const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+  const [selectedModel, setSelectedModel] = useState<AgentModel>(
+    "deepseek/deepseek-v4-pro",
+  );
 
   const bottomRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -65,6 +69,7 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
   } = useAgentChatSession({
     onToolCall: handleToolCall,
     onBeforeSend: stopListening,
+    getModel: () => selectedModel,
   });
 
   useEffect(() => {
@@ -298,6 +303,8 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
               onStartListening={startListening}
               onStopListening={stopListening}
               onPresetSelect={handlePresetPromptSelect}
+              selectedModel={selectedModel}
+              onModelChange={setSelectedModel}
             />
           </Box>
         </Box>

src/components/chat/hooks/useAgentChatSession.ts

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { abortAgentChat, forkAgentChat, streamAgentChat } from "@/lib/chatStream";
-import type { StreamEvent } from "@/lib/chatStream";
+import type { AgentModel, StreamEvent } from "@/lib/chatStream";
 import type {
   AgentArtifact,
   BranchGroup,
@@ -37,6 +37,7 @@ type UseAgentChatSessionOptions = {
     },
   ) => void;
   onBeforeSend?: () => void;
+  getModel?: () => AgentModel;
 };
 
 type PromptRunOptions = {
@@ -137,6 +138,7 @@ const messagesEqual = (left: Message[], right: Message[]) =>
 export const useAgentChatSession = ({
   onToolCall,
   onBeforeSend,
+  getModel,
 }: UseAgentChatSessionOptions) => {
   const storageSessionIdRef = useRef<string | undefined>(undefined);
   const hydrationCompletedRef = useRef(false);
@@ -317,6 +319,7 @@ export const useAgentChatSession = ({
         await streamAgentChat({
           message: prompt,
           sessionId: sessionIdOverride ?? sessionIdRef.current,
+          model: getModel?.(),
           signal: controller.signal,
           onEvent: (event) => {
             if ("sessionId" in event && event.sessionId && event.sessionId !== sessionIdRef.current) {
@@ -448,7 +451,7 @@ export const useAgentChatSession = ({
         setIsStreaming(false);
       }
     },
-    [appendArtifact, isHydrating, isStreaming, messages, onBeforeSend, onToolCall],
+    [appendArtifact, getModel, isHydrating, isStreaming, messages, onBeforeSend, onToolCall],
   );
 
   const abort = useCallback(() => {