Merge branch 'gzy' into 'master'

feat: iframe增加智能体选择

See merge request knowledge-base-bj/deerflow-server!123

frontend-web/src/pages/IframeChatPage.tsx

@@ -1,10 +1,18 @@
 "use client";
 
+import {
+  BookMarkedIcon,
+  BrainCircuitIcon,
+  CheckIcon,
+  FileTextIcon,
+  GraduationCapIcon,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { type PromptInputMessage } from "@/components/ai-elements/prompt-input";
 import { useArtifacts } from "@/components/workspace/artifacts";
+import { AgentSelector } from "@/components/workspace/agents/agent-selector";
 import {
   ChatBox,
   useSpecificChatMode,
@@ -12,18 +20,23 @@ import {
 } from "@/components/workspace/chats";
 import {
   MessageList,
-  MESSAGE_LIST_DEFAULT_PADDING_BOTTOM,
-  MESSAGE_LIST_FOLLOWUPS_EXTRA_PADDING_BOTTOM,
 } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
 import { TodoList } from "@/components/workspace/todo-list";
+import { Button } from "@/components/ui/button";
+import { useAgentSelector } from "@/core/agents";
 import { getAccessToken } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 import { useModels } from "@/core/models/hooks";
 import { useNotification } from "@/core/notification/hooks";
 import { useRouteBase } from "@/core/route-base";
-import { useThreadSettings } from "@/core/settings";
+import {
-import { usePromptPrefixSettings } from "@/core/system-settings/hooks";
+  getLastAgentId,
+  isThreadRagModeLocked,
+  saveLastAgentId,
+  useLocalSettings,
+  useThreadSettings,
+} from "@/core/settings";
 import { useThreadStream } from "@/core/threads/hooks";
 import { textOfMessage } from "@/core/threads/utils";
 import { env } from "@/env";
@@ -81,16 +94,16 @@ export default function IframeChatPage() {
   const routeBase = useRouteBase();
   const router = useRouter();
   const { t } = useI18n();
-  const [showFollowups, setShowFollowups] = useState(false);
   const [hasStartedConversation, setHasStartedConversation] = useState(false);
   const { threadId, setThreadId, isNewThread, setIsNewThread, isMock } =
     useThreadChat();
-  const [settings] = useThreadSettings(threadId);
+  const [settings, setSettings] = useThreadSettings(threadId);
+  const [localSettings, setLocalSettings] = useLocalSettings();
   const [mounted, setMounted] = useState(false);
   const { tokenUsageEnabled } = useModels();
-  const { data: promptPrefixSettings } = usePromptPrefixSettings();
-  const [promptPrefixOn, setPromptPrefixOn] = useState(false);
   const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
+  const { agents: selectorAgents, isLoading: selectorLoading } =
+    useAgentSelector();
   const pendingRequestIdRef = useRef<string | null>(null);
   const { selectedArtifact } = useArtifacts();
   useSpecificChatMode();
@@ -124,11 +137,19 @@ export default function IframeChatPage() {
   useEffect(() => {
     if (isNewThread) {
       setHasStartedConversation(false);
-      setPromptPrefixOn(false);
+      setSelectedAgentId(getLastAgentId());
-      setSelectedAgentId(null);
     }
   }, [isNewThread, threadId]);
 
+  useEffect(() => {
+    if (selectorLoading || !selectedAgentId) {
+      return;
+    }
+    if (!selectorAgents.some((agent) => agent.id === selectedAgentId)) {
+      setSelectedAgentId(null);
+    }
+  }, [selectedAgentId, selectorAgents, selectorLoading]);
+
   const { showNotification } = useNotification();
 
   const [thread, sendMessage, isUploading] = useThreadStream({
@@ -207,20 +228,12 @@ export default function IframeChatPage() {
         return;
       }
 
-      const shouldApplyPrefix =
-        isNewThread &&
-        !hasStartedConversation &&
-        promptPrefixOn &&
-        promptPrefixSettings?.enabled === true;
       setHasStartedConversation(true);
       window.dispatchEvent(
         new CustomEvent("workspace:sandbox-resume-autoscroll"),
       );
 
       const extraContext: Record<string, unknown> = {};
-      if (shouldApplyPrefix) {
-        extraContext.prompt_prefix_enabled = true;
-      }
       if (settings.context.writing_mode && writingArtifactPath) {
         extraContext.writing_artifact_path = writingArtifactPath;
       }
@@ -238,8 +251,6 @@ export default function IframeChatPage() {
     [
       hasStartedConversation,
       isNewThread,
-      promptPrefixOn,
-      promptPrefixSettings,
       router,
       selectedAgentId,
       sendMessage,
@@ -257,6 +268,45 @@ export default function IframeChatPage() {
     [sendMessage, threadId],
   );
 
+  const handleAgentChange = useCallback((agentId: string | null) => {
+    setSelectedAgentId(agentId);
+    saveLastAgentId(agentId);
+  }, []);
+
+  const ragModeLocked = isThreadRagModeLocked(threadId);
+  const ragModeEnabled =
+    localSettings.display.ragModeEnabled || ragModeLocked;
+  const proModeEnabled = settings.context.mode === "pro";
+
+  const toggleWritingMode = useCallback(() => {
+    setSettings("context", {
+      writing_mode: !settings.context.writing_mode,
+    });
+  }, [setSettings, settings.context.writing_mode]);
+
+  const toggleMemoryInjection = useCallback(() => {
+    setSettings("context", {
+      memory_injection_enabled:
+        !(settings.context.memory_injection_enabled ?? true),
+    });
+  }, [setSettings, settings.context.memory_injection_enabled]);
+
+  const toggleRagMode = useCallback(() => {
+    if (ragModeLocked) {
+      return;
+    }
+    setLocalSettings("display", {
+      ragModeEnabled: !ragModeEnabled,
+    });
+  }, [ragModeEnabled, ragModeLocked, setLocalSettings]);
+
+  const toggleProMode = useCallback(() => {
+    setSettings("context", {
+      mode: proModeEnabled ? "flash" : "pro",
+      reasoning_effort: proModeEnabled ? "minimal" : "medium",
+    });
+  }, [proModeEnabled, setSettings]);
+
   const handleInterrupt = useCallback(
     async (message: BrainyChatInterruptMessage) => {
       const targetRequestId = message.payload?.requestId?.trim();
@@ -318,11 +368,47 @@ export default function IframeChatPage() {
     };
   }, [handleInterrupt, handleSubmit]);
 
-  const messageListPaddingBottom = showFollowups
-    ? MESSAGE_LIST_DEFAULT_PADDING_BOTTOM +
-      MESSAGE_LIST_FOLLOWUPS_EXTRA_PADDING_BOTTOM
-    : undefined;
   const isLandingState = isNewThread && !hasStartedConversation;
+  const bottomBarHeightClass = "pb-28";
+  const modeButtons = [
+    {
+      key: "writing",
+      label: "写作",
+      icon: FileTextIcon,
+      active: !!settings.context.writing_mode,
+      onClick: toggleWritingMode,
+      activeClassName:
+        "border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100",
+    },
+    {
+      key: "memory",
+      label: "记忆",
+      icon: BrainCircuitIcon,
+      active: settings.context.memory_injection_enabled ?? true,
+      onClick: toggleMemoryInjection,
+      activeClassName:
+        "border-blue-300 bg-blue-50 text-blue-700 hover:bg-blue-100",
+    },
+    {
+      key: "references",
+      label: "参考文献",
+      icon: BookMarkedIcon,
+      active: ragModeEnabled,
+      onClick: toggleRagMode,
+      disabled: ragModeLocked,
+      activeClassName:
+        "border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100",
+    },
+    {
+      key: "pro",
+      label: "专业问答",
+      icon: GraduationCapIcon,
+      active: proModeEnabled,
+      onClick: toggleProMode,
+      activeClassName:
+        "border-violet-300 bg-violet-50 text-violet-700 hover:bg-violet-100",
+    },
+  ] as const;
 
   return (
     <ThreadContext.Provider value={{ thread, isMock }}>
@@ -350,24 +436,30 @@ export default function IframeChatPage() {
           </header>
           */}
           <main className="flex min-h-0 max-w-full grow flex-col overflow-hidden">
-            <div className="flex size-full min-w-0">
+            <div className={cn("flex size-full min-w-0", !isLandingState && bottomBarHeightClass)}>
               {!isLandingState && (
                 <MessageList
                   className="size-full"
                   contentClassName="mx-0 max-w-full px-3 sm:px-4"
                   threadId={threadId}
                   thread={thread}
-                  paddingBottom={messageListPaddingBottom}
+                  paddingBottom={96}
                   tokenUsageEnabled={tokenUsageEnabled}
                   onClarificationSubmit={handleClarificationSubmit}
                 />
               )}
             </div>
-            <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
+            <div
+              className={cn(
+                "absolute inset-x-0 z-30 flex justify-center px-4",
+                isLandingState
+                  ? "top-0 bottom-24 items-center"
+                  : "bottom-24",
+              )}
+            >
               <div
                 className={cn(
                   "relative w-full",
-                  isLandingState && "-translate-y-[calc(50vh-96px)]",
                   isLandingState
                     ? "max-w-(--container-width-md)"
                     : "max-w-full",
@@ -387,6 +479,13 @@ export default function IframeChatPage() {
                 {isLandingState && mounted && (
                   <div className="mb-6 flex min-h-40 flex-col items-center justify-center">
                     <div className="text-2xl font-medium">你好</div>
+                    <div className="mt-4">
+                      <AgentSelector
+                        selectedAgentId={selectedAgentId}
+                        onAgentChange={handleAgentChange}
+                        disabled={isUploading}
+                      />
+                    </div>
                   </div>
                 )}
                 {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
@@ -396,6 +495,31 @@ export default function IframeChatPage() {
                 )}
               </div>
             </div>
+            <div className="absolute right-0 bottom-0 left-0 z-40 border-t bg-background/95 backdrop-blur">
+              <div className="mx-auto flex max-w-(--container-width-lg) flex-wrap items-center justify-center gap-2 px-4 py-4">
+                {modeButtons.map((button) => {
+                  const Icon = button.icon;
+                  return (
+                    <Button
+                      key={button.key}
+                      type="button"
+                      variant="outline"
+                      disabled={button.disabled || isUploading}
+                      onClick={button.onClick}
+                      className={cn(
+                        "gap-1.5 rounded-full border border-transparent bg-muted/40 text-muted-foreground shadow-none hover:bg-muted hover:text-foreground",
+                        button.active && button.activeClassName,
+                        button.disabled && "cursor-not-allowed opacity-80",
+                      )}
+                    >
+                      {button.active && <CheckIcon className="size-3.5" />}
+                      <Icon className="size-3.5" />
+                      <span className="text-xs font-normal">{button.label}</span>
+                    </Button>
+                  );
+                })}
+              </div>
+            </div>
           </main>
         </div>
       </ChatBox>