fix(prompt-input): 提供可选上下文入口并避免历史路由切换期异常

frontend-web/src/components/ai-elements/prompt-input.tsx

@@ -60,7 +60,6 @@ import {
   createContext,
   type FormEvent,
   type FormEventHandler,
-  Fragment,
   type HTMLAttributes,
   type KeyboardEventHandler,
   type PropsWithChildren,
@@ -124,8 +123,10 @@ export const usePromptInputController = () => {
   return ctx;
 };
 
-// Optional variants (do NOT throw). Useful for dual-mode components.
+// Optional variants (do NOT throw). Useful for dual-mode components and for
-const useOptionalPromptInputController = () =>
+// Fast Refresh transitions where a page can briefly retain the previous
+// provider context instance.
+export const useOptionalPromptInputController = () =>
   useContext(PromptInputController);
 
 export const useProviderAttachments = () => {
@@ -406,9 +407,9 @@ export function PromptInputAttachments({
       {...props}
     >
       {attachments.files.map((file) => (
-        <Fragment key={file.id}>
+        <div key={file.id} className="max-w-60">
-          <div className="max-w-60">{children(file)}</div>
+          {children(file)}
-        </Fragment>
+        </div>
       ))}
     </div>
   );

frontend-web/src/components/workspace/chats/use-chat-mode.ts

@@ -1,7 +1,7 @@
 import { useParams, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useRef } from "react";
 
-import { usePromptInputController } from "@/components/ai-elements/prompt-input";
+import { useOptionalPromptInputController } from "@/components/ai-elements/prompt-input";
 import { useI18n } from "@/core/i18n/hooks";
 
 /**
@@ -11,7 +11,11 @@ export function useSpecificChatMode() {
   const { t } = useI18n();
   const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
   const searchParams = useSearchParams();
-  const promptInputController = usePromptInputController();
+  // A regular history item can navigate here while Vite Fast Refresh is
+  // reconciling the previous page tree. In that short window the page may see
+  // a stale provider context. This hook only pre-fills the skill-mode draft,
+  // so it must not make an ordinary chat page fail to render.
+  const promptInputController = useOptionalPromptInputController();
   const inputInitialValue = useMemo(() => {
     if (threadIdFromPath !== "new" || searchParams.get("mode") !== "skill") {
       return undefined;
@@ -19,8 +23,10 @@ export function useSpecificChatMode() {
     return t.inputBox.createSkillPrompt;
   }, [threadIdFromPath, searchParams, t.inputBox.createSkillPrompt]);
   const lastInitialValueRef = useRef<string | undefined>(undefined);
-  const setInputRef = useRef(promptInputController.textInput.setInput);
+  const setInputRef = useRef<((value: string) => void) | undefined>(
-  setInputRef.current = promptInputController.textInput.setInput;
+    promptInputController?.textInput.setInput,
+  );
+  setInputRef.current = promptInputController?.textInput.setInput;
   useEffect(() => {
     if (
       inputInitialValue &&
@@ -28,7 +34,10 @@ export function useSpecificChatMode() {
     ) {
       lastInitialValueRef.current = inputInitialValue;
       setTimeout(() => {
-        setInputRef.current(inputInitialValue);
+        const setInput = setInputRef.current;
+        if (!setInput) return;
+
+        setInput(inputInitialValue);
         const textarea = document.querySelector("textarea");
         if (textarea) {
           textarea.focus();