{context.mode === "flash" &&
-
+
{t.inputBox.reasoningEffort}:
{context.reasoning_effort === "minimal" &&
@@ -824,7 +824,7 @@ export function InputBox({
onOpenChange={setModelDialogOpen}
>
-
+
{selectedModel?.display_name}
@@ -858,7 +858,7 @@ export function InputBox({
{!isNewThread && (
-
+
)}
diff --git a/frontend-web/src/components/workspace/messages/message-list.tsx b/frontend-web/src/components/workspace/messages/message-list.tsx
index b9c8b90b..b27775be 100644
--- a/frontend-web/src/components/workspace/messages/message-list.tsx
+++ b/frontend-web/src/components/workspace/messages/message-list.tsx
@@ -454,6 +454,7 @@ function ClarificationCard({
const payload = getClarificationPayload(message);
const [customAnswer, setCustomAnswer] = useState("");
const [submitting, setSubmitting] = useState(false);
+ const [submitted, setSubmitted] = useState(false);
const options = useMemo(
() =>
@@ -473,16 +474,17 @@ function ClarificationCard({
);
}
- const disabled = isLoading || submitting || !onSubmit;
+ const disabled = false;
async function submitAnswer(answer: string) {
const trimmed = answer.trim();
- if (!trimmed || disabled) {
+ if (!trimmed) {
return;
}
setSubmitting(true);
try {
await onSubmit?.(trimmed);
+ setSubmitted(true);
} finally {
setSubmitting(false);
}
diff --git a/frontend-web/src/contexts/ChatContext.tsx b/frontend-web/src/contexts/ChatContext.tsx
new file mode 100644
index 00000000..67682896
--- /dev/null
+++ b/frontend-web/src/contexts/ChatContext.tsx
@@ -0,0 +1,81 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+export interface ChatMessage {
+ id: string;
+ role: 'user' | 'assistant';
+ content: string;
+ timestamp: number;
+ type?: 'general' | 'agent' | 'compare';
+ agentName?: string;
+}
+
+interface ChatContextType {
+ messages: ChatMessage[];
+ addMessage: (role: 'user' | 'assistant', content: string, type?: 'general' | 'agent' | 'compare', agentName?: string) => void;
+ clearMessages: () => void;
+ deleteMessage: (id: string) => void;
+}
+
+const ChatContext = createContext(undefined);
+
+export function ChatProvider({ children }: { children: ReactNode }) {
+ const [messages, setMessages] = useState(() => {
+ try {
+ const stored = localStorage.getItem('qa-chat-history');
+ return stored ? JSON.parse(stored) : [];
+ } catch {
+ return [];
+ }
+ });
+
+ const saveToStorage = useCallback((newMessages: ChatMessage[]) => {
+ try {
+ localStorage.setItem('qa-chat-history', JSON.stringify(newMessages));
+ } catch (error) {
+ console.error('Failed to save chat history:', error);
+ }
+ }, []);
+
+ const addMessage = useCallback((role: 'user' | 'assistant', content: string, type?: 'general' | 'agent' | 'compare', agentName?: string) => {
+ const newMessage: ChatMessage = {
+ id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+ role,
+ content,
+ timestamp: Date.now(),
+ type,
+ agentName,
+ };
+ setMessages((prev) => {
+ const updated = [...prev, newMessage];
+ saveToStorage(updated);
+ return updated;
+ });
+ }, [saveToStorage]);
+
+ const clearMessages = useCallback(() => {
+ setMessages([]);
+ localStorage.removeItem('qa-chat-history');
+ }, []);
+
+ const deleteMessage = useCallback((id: string) => {
+ setMessages((prev) => {
+ const updated = prev.filter((msg) => msg.id !== id);
+ saveToStorage(updated);
+ return updated;
+ });
+ }, [saveToStorage]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useChatContext() {
+ const context = useContext(ChatContext);
+ if (context === undefined) {
+ throw new Error('useChatContext must be used within a ChatProvider');
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/frontend-web/src/contexts/ThemeContext.tsx b/frontend-web/src/contexts/ThemeContext.tsx
new file mode 100644
index 00000000..a4042ae7
--- /dev/null
+++ b/frontend-web/src/contexts/ThemeContext.tsx
@@ -0,0 +1,145 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+// 主题类型
+export type ThemeType = 'dark' | 'light';
+
+// 主题配置
+export interface ThemeConfig {
+ type: ThemeType;
+ name: string;
+ colors: {
+ background: string;
+ backgroundSecondary: string;
+ text: string;
+ textSecondary: string;
+ primary: string;
+ primaryHover: string;
+ border: string;
+ accent: string;
+ success: string;
+ warning: string;
+ error: string;
+ card: string;
+ cardHover: string;
+ input: string;
+ inputBorder: string;
+ overlay: string;
+ };
+}
+
+// 主题配置
+const themes: Record = {
+ dark: {
+ type: 'dark',
+ name: '深色主题',
+ colors: {
+ background: 'slate-900',
+ backgroundSecondary: 'slate-800',
+ text: 'white',
+ textSecondary: 'slate-400',
+ primary: 'blue-500',
+ primaryHover: 'blue-400',
+ border: 'slate-700',
+ accent: 'blue-600',
+ success: 'emerald-500',
+ warning: 'amber-500',
+ error: 'rose-500',
+ card: 'slate-800',
+ cardHover: 'slate-700',
+ input: 'slate-800',
+ inputBorder: 'slate-600',
+ overlay: 'slate-900/80',
+ },
+ },
+ light: {
+ type: 'light',
+ name: '红白主题',
+ colors: {
+ background: 'white',
+ backgroundSecondary: 'red-50',
+ text: 'gray-900',
+ textSecondary: 'gray-600',
+ primary: 'red-600',
+ primaryHover: 'red-500',
+ border: 'red-200',
+ accent: 'red-700',
+ success: 'green-600',
+ warning: 'amber-500',
+ error: 'red-600',
+ card: 'white',
+ cardHover: 'red-50',
+ input: 'white',
+ inputBorder: 'red-200',
+ overlay: 'black/30',
+ },
+ },
+};
+
+// 主题上下文
+interface ThemeContextType {
+ theme: ThemeType;
+ themeConfig: ThemeConfig;
+ toggleTheme: () => void;
+ setTheme: (theme: ThemeType) => void;
+}
+
+const ThemeContext = createContext(undefined);
+
+// 主题提供者
+interface ThemeProviderProps {
+ children: ReactNode;
+}
+
+export const ThemeProvider: React.FC = ({ children }) => {
+ const [theme, setThemeState] = useState(() => {
+ // 从 localStorage 读取保存的主题
+ const saved = localStorage.getItem('strategy-theme');
+ return (saved as ThemeType) || 'dark';
+ });
+
+ // 切换主题
+ const toggleTheme = () => {
+ setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark'));
+ };
+
+ // 设置特定主题
+ const setTheme = (newTheme: ThemeType) => {
+ setThemeState(newTheme);
+ };
+
+ // 保存到 localStorage
+ useEffect(() => {
+ localStorage.setItem('strategy-theme', theme);
+ // 更新文档类名
+ document.documentElement.classList.remove('dark', 'light');
+ document.documentElement.classList.add(theme);
+ }, [theme]);
+
+ const themeConfig = themes[theme];
+
+ return (
+
+ {children}
+
+ );
+};
+
+// 使用主题的 Hook
+export const useTheme = (): ThemeContextType => {
+ const context = useContext(ThemeContext);
+ if (!context) {
+ throw new Error('useTheme must be used within a ThemeProvider');
+ }
+ return context;
+};
+
+// 主题工具函数 - 生成动态类名
+export const getThemeClasses = (colorKey: keyof ThemeConfig['colors']): string => {
+ const { themeConfig } = useTheme();
+ return themeConfig.colors[colorKey];
+};
+
+// 组合类名工具函数
+export const cn = (...classes: (string | undefined | null | false)[]): string => {
+ return classes.filter(Boolean).join(' ');
+};
diff --git a/frontend-web/src/pages/AgentChatPage.tsx b/frontend-web/src/pages/AgentChatPage.tsx
index 19bd0918..871998b9 100644
--- a/frontend-web/src/pages/AgentChatPage.tsx
+++ b/frontend-web/src/pages/AgentChatPage.tsx
@@ -98,6 +98,14 @@ export default function AgentChatPage() {
[sendMessage, threadId, agent_id],
);
+ const handleClarificationSubmit = useCallback(
+ (answer: string) => {
+ setHasStartedConversation(true);
+ void sendMessage(threadId, { text: answer, files: [] }, { agent_id });
+ },
+ [sendMessage, threadId, agent_id],
+ );
+
const handleStop = useCallback(async () => {
await thread.stop();
}, [thread]);
@@ -160,6 +168,7 @@ export default function AgentChatPage() {
thread={thread}
paddingBottom={messageListPaddingBottom}
tokenUsageEnabled={tokenUsageEnabled}
+ onClarificationSubmit={handleClarificationSubmit}
/>
diff --git a/frontend-web/src/pages/ChatPage.tsx b/frontend-web/src/pages/ChatPage.tsx
index 0ac3427c..3ada83f5 100644
--- a/frontend-web/src/pages/ChatPage.tsx
+++ b/frontend-web/src/pages/ChatPage.tsx
@@ -95,6 +95,14 @@ export default function ChatPage() {
},
[sendMessage, threadId],
);
+
+ const handleClarificationSubmit = useCallback(
+ (answer: string) => {
+ setHasStartedConversation(true);
+ void sendMessage(threadId, { text: answer, files: [] });
+ },
+ [sendMessage, threadId],
+ );
const handleStop = useCallback(async () => {
await thread.stop();
}, [thread]);
@@ -137,6 +145,7 @@ export default function ChatPage() {
thread={thread}
paddingBottom={messageListPaddingBottom}
tokenUsageEnabled={tokenUsageEnabled}
+ onClarificationSubmit={handleClarificationSubmit}
/>
diff --git a/frontend-web/src/pages/PageRoutes.tsx b/frontend-web/src/pages/PageRoutes.tsx
index b227d3ad..78f2445e 100644
--- a/frontend-web/src/pages/PageRoutes.tsx
+++ b/frontend-web/src/pages/PageRoutes.tsx
@@ -4,6 +4,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
import { PageSidebar } from "@/components/page-sidebar";
import WorkspaceRoutes from "./WorkspaceRoutes";
+import Header from "@/strategy-components/Header";
// 设为 true 时隐藏侧边栏（开发中，暂未完成）
const SIDEBAR_ENABLED = false;
@@ -12,31 +13,34 @@ function PageLayout() {
const [collapsed, setCollapsed] = useState(false);
return (
- {
+ const { theme, toggleTheme } = useTheme();
+ const isDark = theme === 'dark';
+
+ return (
+
+ {/* 左侧 - 搜索框 */}
+
+ );
+};
+
+export default Header;
diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css
index 3c79e249..8c4e042a 100644
--- a/frontend-web/src/styles/globals.css
+++ b/frontend-web/src/styles/globals.css
@@ -243,7 +243,7 @@
--workspace-brand: #d92121;
--workspace-brand-foreground: #ffffff;
--radius: 0.75rem;
- --background: oklch(0.985 0.004 95);
+ --background: oklch(1 0 0);
--foreground: oklch(0.22 0.02 25);
--card: oklch(1 0.002 95);
--card-foreground: oklch(0.22 0.02 25);
@@ -277,39 +277,39 @@
}
.dark {
- --workspace-brand: #e11d1d;
+ --workspace-brand: #3b82f6;
--workspace-brand-foreground: #ffffff;
- --background: oklch(0.22 0.015 25);
- --foreground: oklch(0.96 0.01 95);
- --card: oklch(0.26 0.018 25);
- --card-foreground: oklch(0.96 0.01 95);
- --popover: oklch(0.24 0.018 25);
- --popover-foreground: oklch(0.96 0.01 95);
- --primary: oklch(0.62 0.17 27);
- --primary-foreground: oklch(0.12 0.02 25);
- --secondary: oklch(0.32 0.02 25);
- --secondary-foreground: oklch(0.96 0.01 95);
- --muted: oklch(0.3 0.02 25);
- --muted-foreground: oklch(0.72 0.02 95);
- --accent: oklch(0.34 0.06 25);
- --accent-foreground: oklch(0.96 0.01 95);
+ --background: oklch(0.208 0.042 264);
+ --foreground: oklch(0.96 0.005 240);
+ --card: oklch(0.265 0.04 260);
+ --card-foreground: oklch(0.96 0.005 240);
+ --popover: oklch(0.245 0.04 262);
+ --popover-foreground: oklch(0.96 0.005 240);
+ --primary: oklch(0.623 0.214 259);
+ --primary-foreground: oklch(0.99 0 0);
+ --secondary: oklch(0.32 0.038 260);
+ --secondary-foreground: oklch(0.96 0.005 240);
+ --muted: oklch(0.30 0.035 260);
+ --muted-foreground: oklch(0.68 0.02 240);
+ --accent: oklch(0.35 0.06 260);
+ --accent-foreground: oklch(0.96 0.005 240);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 14%);
- --ring: oklch(0.62 0.17 27 / 0.45);
+ --ring: oklch(0.623 0.214 259 / 0.45);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
- --sidebar: oklch(0.2 0.02 25);
- --sidebar-foreground: oklch(0.94 0.01 95);
- --sidebar-primary: oklch(0.62 0.17 27);
+ --sidebar: oklch(0.185 0.04 265);
+ --sidebar-foreground: oklch(0.94 0.005 240);
+ --sidebar-primary: oklch(0.623 0.214 259);
--sidebar-primary-foreground: oklch(0.99 0 0);
- --sidebar-accent: oklch(0.3 0.05 25);
- --sidebar-accent-foreground: oklch(0.96 0.01 95);
+ --sidebar-accent: oklch(0.30 0.055 260);
+ --sidebar-accent-foreground: oklch(0.96 0.005 240);
--sidebar-border: oklch(1 0 0 / 10%);
- --sidebar-ring: oklch(0.62 0.17 27 / 0.45);
+ --sidebar-ring: oklch(0.623 0.214 259 / 0.45);
font-weight: 300;
}
@@ -430,19 +430,27 @@
}
.workspace-shell {
- background:
- radial-gradient(circle at top right, rgb(255 214 214 / 0.72), transparent 18%),
- linear-gradient(180deg, #fbf7f4 0%, #f6efea 100%);
+ background: #ffffff;
+ }
+
+ .dark .workspace-shell {
+ background: var(--background);
}
.workspace-panel {
border: 1px solid #f0d7d0;
- background: linear-gradient(180deg, rgb(255 253 251 / 0.98), rgb(255 247 244 / 0.98));
+ background: #ffffff;
box-shadow:
0 32px 72px -46px rgb(98 63 42 / 0.35),
0 12px 28px -22px rgb(170 91 75 / 0.24);
}
+ .dark .workspace-panel {
+ border: 1px solid oklch(1 0 0 / 10%);
+ background: var(--card);
+ box-shadow: none;
+ }
+
.workspace-user-bubble {
max-width: min(82%, 42rem);
border: 1px solid rgb(255 255 255 / 0.14);
+
);
}
diff --git a/frontend-web/src/pages/WorkspaceRoutes.tsx b/frontend-web/src/pages/WorkspaceRoutes.tsx
index eaf676f5..a69ab007 100644
--- a/frontend-web/src/pages/WorkspaceRoutes.tsx
+++ b/frontend-web/src/pages/WorkspaceRoutes.tsx
@@ -37,7 +37,7 @@ function WorkspaceLayout({
return (
{SIDEBAR_ENABLED && (
setCollapsed((prev) => !prev)}
/>
)}
-
-
-
-
+
+
+
+
+
+
+
+ {/* 右侧 - 用户信息和通知 */}
+
+
+
+ {/* 主题切换按钮 */}
+
+
+ {/* 通知 */}
+
+
+ {/* 分隔线 */}
+
+
+ {/* 用户信息 */}
+
+
+