吉鑫升andClaude Opus 4.8
e5ca717783
根因竞态：从已有会话点「新建对话」时 isNewThread 立刻翻 true，但 useThreadStream 的 onStreamThreadId 慢一帧才归零；自动发送 effect 同帧 submit，而 SDK 的 SubmitOptions.threadId 仅在 hook 线程为空时生效，于是开场白发进了上一个对话 （表现为「一直在同一个聊天框里发消息」，首次正常、之后每次都串）。 - useThreadStream 追加返回当前绑定的流线程 id onStreamThreadId（向后兼容） - AgentChatPage 自动发送 effect 增加守卫 streamThreadId == null：等底层 stream 切到全新线程后再发，开场白即落到新建对话 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1179 lines
40 KiB
TypeScript
1179 lines
40 KiB
TypeScript
import type { AIMessage, Message } from "@langchain/langgraph-sdk";
|
||
import type { ThreadsClient } from "@langchain/langgraph-sdk/client";
|
||
import { useStream } from "@langchain/langgraph-sdk/react";
|
||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import type { QueryClient } from "@tanstack/react-query";
|
||
import { useCallback, useEffect, useRef, useState } from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { toast } from "sonner";
|
||
|
||
import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
|
||
|
||
import { getAPIClient } from "../api";
|
||
import { apiFetch } from "../api";
|
||
import { getStoredAuth } from "../auth";
|
||
import { rememberAskTime } from "../chat-timestamps";
|
||
import { getBackendBaseURL, getLangGraphBaseURL } from "../config";
|
||
import { useI18n } from "../i18n/hooks";
|
||
import type { FileInMessage } from "../messages/utils";
|
||
import type { LocalSettings } from "../settings";
|
||
import { isThreadRagModeLocked, lockThreadRagMode, useLocalSettings } from "../settings";
|
||
import { useUpdateSubtask } from "../tasks/context";
|
||
import type { UploadedFileInfo } from "../uploads";
|
||
import { promptInputFilePartToFile, uploadFiles } from "../uploads";
|
||
|
||
import type { AgentThread, AgentThreadState } from "./types";
|
||
|
||
export type ToolEndEvent = {
|
||
name: string;
|
||
data: unknown;
|
||
};
|
||
|
||
export type ThreadStreamOptions = {
|
||
threadId?: string | null | undefined;
|
||
context: LocalSettings["context"];
|
||
isMock?: boolean;
|
||
assistantId?: string;
|
||
/** 额外写到新建 thread 的 metadata（与 agent_id 合并）。
|
||
* 任务深链用 `{ taskId }` 把对话挂到任务下（1:N），列表按 metadata.taskId 过滤。 */
|
||
threadMetadata?: Record<string, unknown>;
|
||
onStart?: (threadId: string) => void;
|
||
onFinish?: (state: AgentThreadState) => void;
|
||
onToolEnd?: (event: ToolEndEvent) => void;
|
||
};
|
||
|
||
type SendMessageOptions = {
|
||
additionalKwargs?: Record<string, unknown>;
|
||
};
|
||
|
||
function normalizeStoredRunId(runId: string | null): string | null {
|
||
if (!runId) {
|
||
return null;
|
||
}
|
||
|
||
const trimmed = runId.trim();
|
||
if (!trimmed) {
|
||
return null;
|
||
}
|
||
|
||
const queryIndex = trimmed.indexOf("?");
|
||
if (queryIndex >= 0) {
|
||
const params = new URLSearchParams(trimmed.slice(queryIndex + 1));
|
||
const queryRunId = params.get("run_id")?.trim();
|
||
if (queryRunId) {
|
||
return queryRunId;
|
||
}
|
||
}
|
||
|
||
const pathWithoutQueryOrHash = trimmed.split(/[?#]/, 1)[0]?.trim() ?? "";
|
||
if (!pathWithoutQueryOrHash) {
|
||
return null;
|
||
}
|
||
|
||
const runsMarker = "/runs/";
|
||
const runsIndex = pathWithoutQueryOrHash.lastIndexOf(runsMarker);
|
||
if (runsIndex >= 0) {
|
||
const runIdAfterMarker = pathWithoutQueryOrHash
|
||
.slice(runsIndex + runsMarker.length)
|
||
.split("/", 1)[0]
|
||
?.trim();
|
||
if (runIdAfterMarker) {
|
||
return runIdAfterMarker;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
const segments = pathWithoutQueryOrHash
|
||
.split("/")
|
||
.map((segment) => segment.trim())
|
||
.filter(Boolean);
|
||
return segments.at(-1) ?? null;
|
||
}
|
||
|
||
function getRunMetadataStorage(): {
|
||
getItem(key: `lg:stream:${string}`): string | null;
|
||
setItem(key: `lg:stream:${string}`, value: string): void;
|
||
removeItem(key: `lg:stream:${string}`): void;
|
||
} {
|
||
return {
|
||
getItem(key) {
|
||
const normalized = normalizeStoredRunId(
|
||
window.sessionStorage.getItem(key),
|
||
);
|
||
if (normalized) {
|
||
window.sessionStorage.setItem(key, normalized);
|
||
return normalized;
|
||
}
|
||
window.sessionStorage.removeItem(key);
|
||
return null;
|
||
},
|
||
setItem(key, value) {
|
||
const normalized = normalizeStoredRunId(value);
|
||
if (normalized) {
|
||
window.sessionStorage.setItem(key, normalized);
|
||
return;
|
||
}
|
||
window.sessionStorage.removeItem(key);
|
||
},
|
||
removeItem(key) {
|
||
window.sessionStorage.removeItem(key);
|
||
},
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 显式停止某会话「服务端正在跑」的 run。
|
||
*
|
||
* 注意：useStream / `thread.stop()` 只中断本地 SSE 监听，服务端 run 仍会继续跑。
|
||
* 任务流程要求「开启新对话时老对话要停止」，所以这里读出 SDK 存在 sessionStorage
|
||
* （``lg:stream:{threadId}``）里的 run id，调用 ``runs.cancel`` 真正取消后端 run，
|
||
* 再清掉本地 reconnect 记录。已结束 / 不存在的 run 取消失败时静默忽略。
|
||
*/
|
||
export async function stopThreadRun(
|
||
threadId: string | null | undefined,
|
||
): Promise<void> {
|
||
if (!threadId || typeof window === "undefined") return;
|
||
let runId: string | null = null;
|
||
try {
|
||
runId = normalizeStoredRunId(
|
||
window.sessionStorage.getItem(`lg:stream:${threadId}`),
|
||
);
|
||
} catch {
|
||
runId = null;
|
||
}
|
||
if (!runId) return;
|
||
try {
|
||
await getAPIClient().runs.cancel(threadId, runId);
|
||
} catch {
|
||
/* 已结束 / 不存在 / 网络错误等忽略 */
|
||
}
|
||
try {
|
||
window.sessionStorage.removeItem(`lg:stream:${threadId}`);
|
||
} catch {
|
||
/* noop */
|
||
}
|
||
}
|
||
|
||
function getStreamErrorMessage(error: unknown): string {
|
||
if (typeof error === "string" && error.trim()) {
|
||
return error;
|
||
}
|
||
if (error instanceof Error && error.message.trim()) {
|
||
return error.message;
|
||
}
|
||
if (typeof error === "object" && error !== null) {
|
||
const message = Reflect.get(error, "message");
|
||
if (typeof message === "string" && message.trim()) {
|
||
return message;
|
||
}
|
||
const nestedError = Reflect.get(error, "error");
|
||
if (nestedError instanceof Error && nestedError.message.trim()) {
|
||
return nestedError.message;
|
||
}
|
||
if (typeof nestedError === "string" && nestedError.trim()) {
|
||
return nestedError;
|
||
}
|
||
}
|
||
return "Request failed.";
|
||
}
|
||
|
||
/**
|
||
* Detect "thread not found" / forbidden errors from the LangGraph SDK.
|
||
*
|
||
* Backend returns 404 both when a thread truly doesn't exist and when the
|
||
* currently authenticated user doesn't own it — the SDK surfaces both as
|
||
* ``HTTP 404: {"detail":"Thread <uuid> not found"}``. The most common cause
|
||
* we see in practice is a stale tab whose URL still points at the previous
|
||
* login session's thread. Raw-toasting the 404 just confuses the user, so
|
||
* we re-frame it around the current login identity.
|
||
*/
|
||
function isThreadNotAccessibleError(message: string): boolean {
|
||
const lowered = message.toLowerCase();
|
||
// Backend now returns "not found" (no row + no checkpoint) and
|
||
// "not accessible" (row owned by another user / stale login session) as
|
||
// distinct details — both mean the current user can't use this thread.
|
||
if (/thread\s+[\w-]{8,}\s+not\s+(found|accessible)/i.test(message)) {
|
||
return true;
|
||
}
|
||
// Fallback: a bare 404/403 from the threads endpoint when the SDK has
|
||
// wrapped the detail differently.
|
||
return (
|
||
(lowered.includes("http 404") || lowered.includes("http 403")) &&
|
||
lowered.includes("thread")
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Detect a "Run <id> not found" 404 from the LangGraph SDK.
|
||
*
|
||
* The SDK persists the in-flight run id under ``lg:stream:{threadId}`` in
|
||
* sessionStorage and, on mount, auto-``joinStream``s it to resume a dropped
|
||
* SSE. After a backend restart the in-memory run registry is gone, so the join
|
||
* 404s — and the SDK only clears that key on reconnect *success*, never on
|
||
* failure. So every switch back into the conversation re-fires the same 404.
|
||
* We detect it here to clear the stale key ourselves and stay silent (the
|
||
* conversation renders from history; there is nothing live to reconnect to).
|
||
*/
|
||
function isRunNotFoundError(message: string): boolean {
|
||
return /run\s+[\w-]{8,}\s+not\s+found/i.test(message);
|
||
}
|
||
|
||
function buildCurrentUserLabel(): string {
|
||
const auth = getStoredAuth();
|
||
if (!auth) {
|
||
return "未登录";
|
||
}
|
||
const email = auth.email?.trim();
|
||
if (email) {
|
||
return email;
|
||
}
|
||
const userId = auth.user_id?.trim();
|
||
return userId ? userId : "未知用户";
|
||
}
|
||
|
||
export function useThreadStream({
|
||
threadId,
|
||
context,
|
||
isMock,
|
||
assistantId,
|
||
threadMetadata,
|
||
onStart,
|
||
onFinish,
|
||
onToolEnd,
|
||
}: ThreadStreamOptions) {
|
||
const { t } = useI18n();
|
||
const [localSettings] = useLocalSettings();
|
||
// Track the thread ID that is currently streaming to handle thread changes during streaming
|
||
const [onStreamThreadId, setOnStreamThreadId] = useState(() => threadId);
|
||
// Ref to track current thread ID across async callbacks without causing re-renders,
|
||
// and to allow access to the current thread id in onUpdateEvent
|
||
const threadIdRef = useRef<string | null>(threadId ?? null);
|
||
const startedRef = useRef(false);
|
||
|
||
const listeners = useRef({
|
||
onStart,
|
||
onFinish,
|
||
onToolEnd,
|
||
});
|
||
|
||
// Keep listeners ref updated with latest callbacks
|
||
useEffect(() => {
|
||
listeners.current = { onStart, onFinish, onToolEnd };
|
||
}, [onStart, onFinish, onToolEnd]);
|
||
|
||
useEffect(() => {
|
||
const normalizedThreadId = threadId ?? null;
|
||
if (!normalizedThreadId) {
|
||
// Reset when the UI moves back to a brand new unsaved thread.
|
||
startedRef.current = false;
|
||
setOnStreamThreadId(normalizedThreadId);
|
||
} else {
|
||
setOnStreamThreadId(normalizedThreadId);
|
||
}
|
||
threadIdRef.current = normalizedThreadId;
|
||
}, [threadId]);
|
||
|
||
const _handleOnStart = useCallback((id: string) => {
|
||
if (!startedRef.current) {
|
||
listeners.current.onStart?.(id);
|
||
startedRef.current = true;
|
||
}
|
||
}, []);
|
||
|
||
const handleStreamStart = useCallback(
|
||
(_threadId: string) => {
|
||
threadIdRef.current = _threadId;
|
||
_handleOnStart(_threadId);
|
||
},
|
||
[_handleOnStart],
|
||
);
|
||
|
||
const queryClient = useQueryClient();
|
||
const updateSubtask = useUpdateSubtask();
|
||
const navigate = useNavigate();
|
||
const runMetadataStorageRef = useRef<
|
||
ReturnType<typeof getRunMetadataStorage> | undefined
|
||
>(undefined);
|
||
|
||
if (
|
||
typeof window !== "undefined" &&
|
||
runMetadataStorageRef.current === undefined
|
||
) {
|
||
runMetadataStorageRef.current = getRunMetadataStorage();
|
||
}
|
||
|
||
const thread = useStream<AgentThreadState>({
|
||
client: getAPIClient(isMock),
|
||
assistantId: assistantId ?? "lead_agent",
|
||
threadId: onStreamThreadId,
|
||
reconnectOnMount: runMetadataStorageRef.current
|
||
? () => runMetadataStorageRef.current!
|
||
: false,
|
||
fetchStateHistory: { limit: 1 },
|
||
onCreated(meta) {
|
||
handleStreamStart(meta.thread_id);
|
||
setOnStreamThreadId(meta.thread_id);
|
||
const metadataAgentId = context.agent_id ?? context.agent_name;
|
||
const extraMetadata =
|
||
threadMetadata && typeof threadMetadata === "object" ? threadMetadata : {};
|
||
const metadata: Record<string, unknown> = {
|
||
...(metadataAgentId ? { agent_id: metadataAgentId } : {}),
|
||
...extraMetadata,
|
||
};
|
||
if (Object.keys(metadata).length > 0 && !isMock) {
|
||
void getAPIClient()
|
||
.threads.update(meta.thread_id, { metadata })
|
||
.catch(() => ({}));
|
||
}
|
||
},
|
||
onLangChainEvent(event) {
|
||
if (event.event === "on_tool_end") {
|
||
listeners.current.onToolEnd?.({
|
||
name: event.name,
|
||
data: event.data,
|
||
});
|
||
}
|
||
},
|
||
onUpdateEvent(data) {
|
||
const updates: Array<Partial<AgentThreadState> | null> = Object.values(
|
||
data || {},
|
||
);
|
||
for (const update of updates) {
|
||
if (update && "title" in update && update.title) {
|
||
const nextTitle = update.title;
|
||
updateCachedThreadLists(queryClient, (threads) =>
|
||
threads.map((t) =>
|
||
t.thread_id === threadIdRef.current
|
||
? {
|
||
...t,
|
||
values: {
|
||
...t.values,
|
||
title: nextTitle,
|
||
},
|
||
}
|
||
: t,
|
||
),
|
||
);
|
||
}
|
||
}
|
||
},
|
||
onCustomEvent(event: unknown) {
|
||
if (
|
||
typeof event === "object" &&
|
||
event !== null &&
|
||
"type" in event &&
|
||
event.type === "task_running"
|
||
) {
|
||
const e = event as {
|
||
type: "task_running";
|
||
task_id: string;
|
||
message: AIMessage;
|
||
};
|
||
updateSubtask({ id: e.task_id, latestMessage: e.message });
|
||
return;
|
||
}
|
||
|
||
if (
|
||
typeof event === "object" &&
|
||
event !== null &&
|
||
"type" in event &&
|
||
event.type === "llm_retry" &&
|
||
"message" in event &&
|
||
typeof event.message === "string" &&
|
||
event.message.trim()
|
||
) {
|
||
const e = event as { type: "llm_retry"; message: string };
|
||
toast(e.message);
|
||
return;
|
||
}
|
||
|
||
// Context compression about to run a (blocking) summarization LLM call —
|
||
// surface a transient hint so the wait before the answer streams isn't a
|
||
// silent dead air. Emitted by DeerFlowSummarizationMiddleware.
|
||
if (
|
||
typeof event === "object" &&
|
||
event !== null &&
|
||
"type" in event &&
|
||
event.type === "context_compacting" &&
|
||
"message" in event &&
|
||
typeof event.message === "string" &&
|
||
event.message.trim()
|
||
) {
|
||
const e = event as { type: "context_compacting"; message: string };
|
||
toast(e.message);
|
||
}
|
||
},
|
||
onError(error) {
|
||
setOptimisticMessages([]);
|
||
const message = getStreamErrorMessage(error);
|
||
// A stale auto-reconnect ("Run <id> not found") after a backend restart:
|
||
// drop the dirty ``lg:stream:{threadId}`` key so switching back into this
|
||
// conversation stops re-firing the same 404, and render from history
|
||
// silently — there is no live run to rejoin.
|
||
if (isRunNotFoundError(message)) {
|
||
const staleThreadId = threadIdRef.current ?? onStreamThreadId ?? null;
|
||
if (staleThreadId && runMetadataStorageRef.current) {
|
||
runMetadataStorageRef.current.removeItem(
|
||
`lg:stream:${staleThreadId}`,
|
||
);
|
||
}
|
||
return;
|
||
}
|
||
// A "thread not found" 404 almost always means the URL points at a
|
||
// thread from a previous login session — either this tab outlived a
|
||
// logout/re-login or the thread genuinely belongs to a different user.
|
||
// Re-frame the error around the *current* logged-in identity and bounce
|
||
// the user to a fresh chat instead of leaving them stuck on the stale
|
||
// route looking at a raw HTTP 404.
|
||
if (isThreadNotAccessibleError(message)) {
|
||
const userLabel = buildCurrentUserLabel();
|
||
toast.info(
|
||
`当前登录用户为 ${userLabel}，原对话不存在或无权访问，正在为你刷新页面…`,
|
||
);
|
||
// Prefer staying inside an agent chat context when the user is on an
|
||
// agent thread URL — otherwise fall back to the global new chat.
|
||
const hash = typeof window !== "undefined" ? window.location.hash : "";
|
||
const agentMatch = hash.match(/#\/page\/workspace\/agents\/([^/]+)\//);
|
||
const iframeMatch = hash.match(/#\/page\/workspace\/chats_iframe\//);
|
||
const target = agentMatch
|
||
? `/page/workspace/agents/${agentMatch[1]}/chats/new`
|
||
: iframeMatch
|
||
? "/page/workspace/chats_iframe/new"
|
||
: "/page/workspace/chats/new";
|
||
// First navigate to a safe URL so the post-reload page lands on a
|
||
// valid route. Then full-reload so TanStack Query cache, context
|
||
// providers and any other state captured under the previous user's
|
||
// identity get rebuilt against the current login.
|
||
if (typeof window !== "undefined") {
|
||
window.location.hash = target;
|
||
window.setTimeout(() => {
|
||
window.location.reload();
|
||
}, 900);
|
||
} else {
|
||
navigate(target, { replace: true });
|
||
}
|
||
return;
|
||
}
|
||
toast.error(message);
|
||
},
|
||
onFinish(state) {
|
||
listeners.current.onFinish?.(state.values);
|
||
void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
|
||
},
|
||
});
|
||
|
||
// Optimistic messages shown before the server stream responds
|
||
const [optimisticMessages, setOptimisticMessages] = useState<Message[]>([]);
|
||
const [isUploading, setIsUploading] = useState(false);
|
||
const sendInFlightRef = useRef(false);
|
||
// Carries the ask time of an in-flight send until the server-assigned human
|
||
// message id shows up, so we can bind the timestamp to the real id (see the
|
||
// reconciliation effect below). ``known`` is the set of human ids that
|
||
// already existed at send time, used to spot the newly-arrived one.
|
||
const pendingAskTimeRef = useRef<{ ts: string; known: Set<string> } | null>(
|
||
null,
|
||
);
|
||
// Track message count before sending so we know when server has responded
|
||
const prevMsgCountRef = useRef(thread.messages.length);
|
||
|
||
// Keep a ref to the latest `thread` so the threadId-change effect can stop
|
||
// an in-flight stream without re-running on every render that produces a
|
||
// new `thread` identity.
|
||
const threadStreamRef = useRef(thread);
|
||
threadStreamRef.current = thread;
|
||
|
||
// Reset thread-local pending UI state when the caller actually switches AWAY
|
||
// from a thread (threadId becomes nullish). This is the "click 新对话 / open
|
||
// a fresh chat" signal — abort the in-flight SSE and clear optimistic state.
|
||
//
|
||
// We deliberately do NOT reset on every threadId change. During a normal
|
||
// "user just sent the first message on /chats/new" flow, useThreadStream
|
||
// sees threadId transition from undefined (the landing state) to the
|
||
// server-assigned thread id once onCreated fires. Stopping the stream and
|
||
// clearing optimistic messages in that case is exactly what made submitted
|
||
// questions visually disappear — the live run that just started would be
|
||
// aborted by the very effect intended to reset stale state.
|
||
useEffect(() => {
|
||
if (threadId != null) {
|
||
// Forward direction: starting or continuing with a real thread.
|
||
// No reset needed; the upstream useStream will load history for this id.
|
||
return;
|
||
}
|
||
const prevThread = threadStreamRef.current;
|
||
if (prevThread?.isLoading) {
|
||
try {
|
||
prevThread.stop();
|
||
} catch {
|
||
// best-effort; nothing useful to do if the SDK fails to abort
|
||
}
|
||
}
|
||
startedRef.current = false;
|
||
sendInFlightRef.current = false;
|
||
prevMsgCountRef.current = 0;
|
||
setOptimisticMessages([]);
|
||
setIsUploading(false);
|
||
}, [threadId]);
|
||
|
||
// Clear optimistic when server messages arrive (count increases)
|
||
useEffect(() => {
|
||
if (
|
||
optimisticMessages.length > 0 &&
|
||
thread.messages.length > prevMsgCountRef.current
|
||
) {
|
||
setOptimisticMessages([]);
|
||
}
|
||
}, [thread.messages.length, optimisticMessages.length]);
|
||
|
||
// Bind a just-sent question's ask time to the server-assigned human message
|
||
// id once it appears. Persists to localStorage so the time shows on every
|
||
// question and survives reloads, independent of the backend echoing it back.
|
||
useEffect(() => {
|
||
const pending = pendingAskTimeRef.current;
|
||
if (!pending) return;
|
||
for (const message of thread.messages) {
|
||
if (
|
||
message.type === "human" &&
|
||
message.id &&
|
||
!message.id.startsWith("opt-") &&
|
||
!pending.known.has(message.id)
|
||
) {
|
||
rememberAskTime(message.id, pending.ts);
|
||
pendingAskTimeRef.current = null;
|
||
break;
|
||
}
|
||
}
|
||
}, [thread.messages]);
|
||
|
||
const sendMessage = useCallback(
|
||
async (
|
||
threadId: string,
|
||
message: PromptInputMessage,
|
||
extraContext?: Record<string, unknown>,
|
||
options?: SendMessageOptions,
|
||
) => {
|
||
if (sendInFlightRef.current) {
|
||
return;
|
||
}
|
||
sendInFlightRef.current = true;
|
||
|
||
const text = message.text.trim();
|
||
// Wall-clock time the question was asked. Stored on the human message so
|
||
// the chat can show "几点提问" and have it survive a reload (it round-trips
|
||
// through the checkpoint inside additional_kwargs, same as `files`).
|
||
const clientTs = new Date().toISOString();
|
||
// Remember which human messages already exist so the reconciliation
|
||
// effect can bind ``clientTs`` to the new one once the server returns it.
|
||
pendingAskTimeRef.current = {
|
||
ts: clientTs,
|
||
known: new Set(
|
||
thread.messages
|
||
.filter((m) => m.type === "human" && m.id)
|
||
.map((m) => m.id as string),
|
||
),
|
||
};
|
||
|
||
// Capture current count before showing optimistic messages
|
||
prevMsgCountRef.current = thread.messages.length;
|
||
|
||
// Build optimistic files list with uploading status
|
||
const optimisticFiles: FileInMessage[] = (message.files ?? []).map(
|
||
(f) => ({
|
||
filename: f.filename ?? "",
|
||
size: 0,
|
||
status: "uploading" as const,
|
||
}),
|
||
);
|
||
|
||
const hideFromUI = options?.additionalKwargs?.hide_from_ui === true;
|
||
const optimisticAdditionalKwargs = {
|
||
...options?.additionalKwargs,
|
||
client_ts: clientTs,
|
||
...(optimisticFiles.length > 0 ? { files: optimisticFiles } : {}),
|
||
};
|
||
|
||
const newOptimistic: Message[] = [];
|
||
if (!hideFromUI) {
|
||
newOptimistic.push({
|
||
type: "human",
|
||
id: `opt-human-${Date.now()}`,
|
||
content: text ? [{ type: "text", text }] : "",
|
||
additional_kwargs: optimisticAdditionalKwargs,
|
||
});
|
||
}
|
||
|
||
if (optimisticFiles.length > 0 && !hideFromUI) {
|
||
// Mock AI message while files are being uploaded
|
||
newOptimistic.push({
|
||
type: "ai",
|
||
id: `opt-ai-${Date.now()}`,
|
||
content: t.uploads.uploadingFiles,
|
||
additional_kwargs: { element: "task" },
|
||
});
|
||
}
|
||
setOptimisticMessages(newOptimistic);
|
||
|
||
// Only fire onStart immediately for an existing persisted thread.
|
||
// Brand-new chats should wait for onCreated(meta.thread_id) so URL sync
|
||
// uses the real server-generated thread id.
|
||
if (threadIdRef.current) {
|
||
_handleOnStart(threadId);
|
||
}
|
||
|
||
let uploadedFileInfo: UploadedFileInfo[] = [];
|
||
|
||
try {
|
||
// Upload files first if any
|
||
if (message.files && message.files.length > 0) {
|
||
setIsUploading(true);
|
||
try {
|
||
const filePromises = message.files.map((fileUIPart) =>
|
||
promptInputFilePartToFile(fileUIPart),
|
||
);
|
||
|
||
const conversionResults = await Promise.all(filePromises);
|
||
const files = conversionResults.filter(
|
||
(file): file is File => file !== null,
|
||
);
|
||
const failedConversions = conversionResults.length - files.length;
|
||
|
||
if (failedConversions > 0) {
|
||
throw new Error(
|
||
`Failed to prepare ${failedConversions} attachment(s) for upload. Please retry.`,
|
||
);
|
||
}
|
||
|
||
if (!threadId) {
|
||
throw new Error("Thread is not ready for file upload.");
|
||
}
|
||
|
||
if (files.length > 0) {
|
||
const uploadResponse = await uploadFiles(threadId, files);
|
||
uploadedFileInfo = uploadResponse.files;
|
||
|
||
// Update optimistic human message with uploaded status + paths
|
||
const uploadedFiles: FileInMessage[] = uploadedFileInfo.map(
|
||
(info) => ({
|
||
filename: info.filename,
|
||
size: info.size,
|
||
path: info.virtual_path,
|
||
status: "uploaded" as const,
|
||
}),
|
||
);
|
||
setOptimisticMessages((messages) => {
|
||
if (messages.length > 1 && messages[0]) {
|
||
const humanMessage: Message = messages[0];
|
||
return [
|
||
{
|
||
...humanMessage,
|
||
additional_kwargs: {
|
||
...humanMessage.additional_kwargs,
|
||
files: uploadedFiles,
|
||
},
|
||
},
|
||
...messages.slice(1),
|
||
];
|
||
}
|
||
return messages;
|
||
});
|
||
}
|
||
} catch (error) {
|
||
const errorMessage =
|
||
error instanceof Error
|
||
? error.message
|
||
: "Failed to upload files.";
|
||
toast.error(errorMessage);
|
||
setOptimisticMessages([]);
|
||
throw error;
|
||
} finally {
|
||
setIsUploading(false);
|
||
}
|
||
}
|
||
|
||
// Build files metadata for submission (included in additional_kwargs)
|
||
const filesForSubmit: FileInMessage[] = uploadedFileInfo.map(
|
||
(info) => ({
|
||
filename: info.filename,
|
||
size: info.size,
|
||
path: info.virtual_path,
|
||
status: "uploaded" as const,
|
||
}),
|
||
);
|
||
|
||
const ragModeEnabled =
|
||
localSettings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
|
||
if (ragModeEnabled) {
|
||
lockThreadRagMode(threadId);
|
||
}
|
||
|
||
const contextCompressionEnabled =
|
||
localSettings.display.contextCompressionEnabled ?? false;
|
||
|
||
const mergedContext = {
|
||
...context,
|
||
...extraContext,
|
||
};
|
||
|
||
await thread.submit(
|
||
{
|
||
messages: [
|
||
{
|
||
type: "human",
|
||
content: [
|
||
{
|
||
type: "text",
|
||
text,
|
||
},
|
||
],
|
||
additional_kwargs: {
|
||
...options?.additionalKwargs,
|
||
client_ts: clientTs,
|
||
...(filesForSubmit.length > 0
|
||
? { files: filesForSubmit }
|
||
: {}),
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
threadId: threadId,
|
||
streamSubgraphs: true,
|
||
streamResumable: true,
|
||
config: {
|
||
recursion_limit: 1000,
|
||
},
|
||
context: {
|
||
...mergedContext,
|
||
thinking_enabled: mergedContext.mode !== "flash",
|
||
is_plan_mode:
|
||
mergedContext.mode === "pro" || mergedContext.mode === "ultra",
|
||
subagent_enabled: mergedContext.mode === "ultra",
|
||
reasoning_effort:
|
||
mergedContext.reasoning_effort ??
|
||
(mergedContext.mode === "ultra"
|
||
? "high"
|
||
: mergedContext.mode === "pro"
|
||
? "medium"
|
||
: mergedContext.mode === "thinking"
|
||
? "low"
|
||
: undefined),
|
||
memory_injection_enabled:
|
||
mergedContext.memory_injection_enabled ?? true,
|
||
rag_mode_enabled: ragModeEnabled,
|
||
summarization_enabled: contextCompressionEnabled,
|
||
thread_id: threadId,
|
||
},
|
||
},
|
||
);
|
||
void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
|
||
} catch (error) {
|
||
setOptimisticMessages([]);
|
||
setIsUploading(false);
|
||
throw error;
|
||
} finally {
|
||
sendInFlightRef.current = false;
|
||
}
|
||
},
|
||
[thread, _handleOnStart, t.uploads.uploadingFiles, context, localSettings.display.ragModeEnabled, queryClient],
|
||
);
|
||
|
||
// Merge thread with optimistic messages for display
|
||
const mergedThread =
|
||
optimisticMessages.length > 0
|
||
? ({
|
||
...thread,
|
||
messages: [...thread.messages, ...optimisticMessages],
|
||
} as typeof thread)
|
||
: thread;
|
||
|
||
// 第 4 个返回值 `onStreamThreadId` = 底层 useStream 当前实际绑定的线程 id（新建/未保存时为 null）。
|
||
// 调用方据此判断「流是否已切到全新线程」，避免在切换会话的那一帧把消息发进上一个会话
|
||
// （submit 的 threadId 选项仅在 hook 线程为 null/undefined 时才生效）。
|
||
return [mergedThread, sendMessage, isUploading, onStreamThreadId] as const;
|
||
}
|
||
|
||
export function useThreads(
|
||
params: Parameters<ThreadsClient["search"]>[0] = {
|
||
limit: 50,
|
||
sortBy: "updated_at",
|
||
sortOrder: "desc",
|
||
select: ["thread_id", "updated_at", "values", "metadata"],
|
||
},
|
||
) {
|
||
const apiClient = getAPIClient();
|
||
return useQuery<AgentThread[]>({
|
||
queryKey: ["threads", "search", params],
|
||
queryFn: async () => {
|
||
const maxResults = params.limit;
|
||
const initialOffset = params.offset ?? 0;
|
||
const DEFAULT_PAGE_SIZE = 50;
|
||
|
||
// Preserve prior semantics: if a non-positive limit is explicitly provided,
|
||
// delegate to a single search call with the original parameters.
|
||
if (maxResults !== undefined && maxResults <= 0) {
|
||
const response =
|
||
await apiClient.threads.search<AgentThreadState>(params);
|
||
return response as AgentThread[];
|
||
}
|
||
|
||
const pageSize =
|
||
typeof maxResults === "number" && maxResults > 0
|
||
? Math.min(DEFAULT_PAGE_SIZE, maxResults)
|
||
: DEFAULT_PAGE_SIZE;
|
||
|
||
const threads: AgentThread[] = [];
|
||
let offset = initialOffset;
|
||
|
||
while (true) {
|
||
if (typeof maxResults === "number" && threads.length >= maxResults) {
|
||
break;
|
||
}
|
||
|
||
const currentLimit =
|
||
typeof maxResults === "number"
|
||
? Math.min(pageSize, maxResults - threads.length)
|
||
: pageSize;
|
||
|
||
if (typeof maxResults === "number" && currentLimit <= 0) {
|
||
break;
|
||
}
|
||
|
||
const response = (await apiClient.threads.search<AgentThreadState>({
|
||
...params,
|
||
limit: currentLimit,
|
||
offset,
|
||
})) as AgentThread[];
|
||
|
||
threads.push(...response);
|
||
|
||
if (response.length < currentLimit) {
|
||
break;
|
||
}
|
||
|
||
offset += response.length;
|
||
}
|
||
|
||
// Safety net on top of the backend's system-thread exclusion: drop
|
||
// machine-created threads (scheduled tasks, roundtable workers,
|
||
// notebooks) in case an older backend still returns them.
|
||
return threads.filter((t) => {
|
||
const metadata = t.metadata as Record<string, unknown> | null;
|
||
if (metadata?.system) return false;
|
||
const threadType = metadata?.thread_type;
|
||
return (
|
||
threadType !== "notebook" &&
|
||
threadType !== "scheduler" &&
|
||
threadType !== "roundtable"
|
||
);
|
||
});
|
||
},
|
||
refetchOnWindowFocus: false,
|
||
});
|
||
}
|
||
|
||
export interface ThreadsPageResult {
|
||
threads: AgentThread[];
|
||
hasMore: boolean;
|
||
}
|
||
|
||
/**
|
||
* Apply ``transform`` to the thread array inside every cached
|
||
* ``["threads", "search"]`` entry. The sidebar queries cache a plain
|
||
* ``AgentThread[]`` while the paged chats list (`useThreadsPage`) caches a
|
||
* ``ThreadsPageResult`` object under the same key prefix, so fuzzy
|
||
* ``setQueriesData`` updaters must handle both shapes.
|
||
*/
|
||
function updateCachedThreadLists(
|
||
queryClient: QueryClient,
|
||
transform: (threads: AgentThread[]) => AgentThread[],
|
||
) {
|
||
queryClient.setQueriesData<AgentThread[] | ThreadsPageResult | undefined>(
|
||
{ queryKey: ["threads", "search"], exact: false },
|
||
(oldData) => {
|
||
if (Array.isArray(oldData)) {
|
||
return transform(oldData);
|
||
}
|
||
if (oldData && Array.isArray(oldData.threads)) {
|
||
return { ...oldData, threads: transform(oldData.threads) };
|
||
}
|
||
return oldData;
|
||
},
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Server-side paginated conversation list for the chats page. Unlike
|
||
* `useThreads` (which loads a bounded recent window for the sidebar), this
|
||
* fetches exactly one page per request so a long history is never pulled in
|
||
* one go. `search` matches thread titles on the backend; one extra row is
|
||
* over-fetched only to detect whether a next page exists. The query key stays
|
||
* under ["threads", "search"] so existing invalidations refresh pages too.
|
||
*/
|
||
export function useThreadsPage(options: {
|
||
page: number;
|
||
pageSize: number;
|
||
search?: string;
|
||
metadata?: Record<string, unknown>;
|
||
}) {
|
||
const { page, pageSize, search, metadata } = options;
|
||
const normalizedSearch = search?.trim() ?? "";
|
||
return useQuery<ThreadsPageResult>({
|
||
queryKey: [
|
||
"threads",
|
||
"search",
|
||
"paged",
|
||
page,
|
||
pageSize,
|
||
normalizedSearch,
|
||
metadata ?? null,
|
||
],
|
||
queryFn: async () => {
|
||
// Direct fetch instead of the LangGraph SDK: the SDK's threads.search
|
||
// drops fields it doesn't know about, and `query` (title search) is a
|
||
// gateway extension.
|
||
const response = await apiFetch(
|
||
`${getLangGraphBaseURL()}/threads/search`,
|
||
{
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
limit: pageSize + 1,
|
||
offset: (page - 1) * pageSize,
|
||
metadata: metadata ?? {},
|
||
query: normalizedSearch || undefined,
|
||
}),
|
||
},
|
||
);
|
||
if (!response.ok) {
|
||
throw new Error("Failed to load conversations");
|
||
}
|
||
const rows = (await response.json()) as AgentThread[];
|
||
return {
|
||
threads: rows.slice(0, pageSize),
|
||
hasMore: rows.length > pageSize,
|
||
};
|
||
},
|
||
placeholderData: (previous) => previous,
|
||
refetchOnWindowFocus: false,
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Total number of conversations matching the same filters as
|
||
* `useThreadsPage`, via the lightweight `/threads/count` endpoint — powers
|
||
* the "共 N 条 / X 页" display without fetching any rows. Depends only on the
|
||
* filters (not the page), so paging doesn't refire it.
|
||
*/
|
||
export function useThreadsCount(options: {
|
||
search?: string;
|
||
metadata?: Record<string, unknown>;
|
||
}) {
|
||
const normalizedSearch = options.search?.trim() ?? "";
|
||
return useQuery<number>({
|
||
queryKey: [
|
||
"threads",
|
||
"search",
|
||
"count",
|
||
normalizedSearch,
|
||
options.metadata ?? null,
|
||
],
|
||
queryFn: async () => {
|
||
const response = await apiFetch(
|
||
`${getLangGraphBaseURL()}/threads/count`,
|
||
{
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
metadata: options.metadata ?? {},
|
||
query: normalizedSearch || undefined,
|
||
}),
|
||
},
|
||
);
|
||
if (!response.ok) {
|
||
throw new Error("Failed to count conversations");
|
||
}
|
||
const data = (await response.json()) as { total: number };
|
||
return data.total;
|
||
},
|
||
refetchOnWindowFocus: false,
|
||
});
|
||
}
|
||
|
||
export function useDeleteThread() {
|
||
const queryClient = useQueryClient();
|
||
const apiClient = getAPIClient();
|
||
return useMutation({
|
||
mutationFn: async ({ threadId }: { threadId: string }) => {
|
||
await apiClient.threads.delete(threadId);
|
||
|
||
const response = await apiFetch(
|
||
`${getBackendBaseURL()}/api/threads/${encodeURIComponent(threadId)}`,
|
||
{
|
||
method: "DELETE",
|
||
},
|
||
);
|
||
|
||
if (!response.ok) {
|
||
const error = await response
|
||
.json()
|
||
.catch(() => ({ detail: "Failed to delete local thread data." }));
|
||
throw new Error(error.detail ?? "Failed to delete local thread data.");
|
||
}
|
||
},
|
||
onSuccess(_, { threadId }) {
|
||
updateCachedThreadLists(queryClient, (threads) =>
|
||
threads.filter((t) => t.thread_id !== threadId),
|
||
);
|
||
},
|
||
onSettled() {
|
||
void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
|
||
},
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Delete a conversation turn (a user question together with its answer) from a
|
||
* thread. Hits the Gateway endpoint that removes the question and every
|
||
* following message up to the next question from the latest checkpoint, and
|
||
* returns the ids that were actually removed. The live `useStream` cache is not
|
||
* auto-refreshed by this call — callers hide the returned ids locally (see
|
||
* `MessageList`) so the removal shows immediately; a reload then reads the
|
||
* persisted, already-trimmed state.
|
||
*/
|
||
export function useDeleteMessage() {
|
||
return useMutation({
|
||
mutationFn: async ({
|
||
threadId,
|
||
messageId,
|
||
}: {
|
||
threadId: string;
|
||
messageId: string;
|
||
}): Promise<string[]> => {
|
||
const response = await apiFetch(
|
||
`${getBackendBaseURL()}/api/threads/${encodeURIComponent(
|
||
threadId,
|
||
)}/messages/${encodeURIComponent(messageId)}`,
|
||
{
|
||
method: "DELETE",
|
||
},
|
||
);
|
||
|
||
if (!response.ok) {
|
||
const error = await response
|
||
.json()
|
||
.catch(() => ({ detail: "删除消息失败。" }));
|
||
throw new Error(error.detail ?? "删除消息失败。");
|
||
}
|
||
|
||
const body = (await response.json().catch(() => ({}))) as {
|
||
deleted_ids?: string[];
|
||
};
|
||
// Fall back to the requested id so the caller can always hide something.
|
||
return body.deleted_ids?.length ? body.deleted_ids : [messageId];
|
||
},
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Merge metadata into a conversation's record via the Gateway
|
||
* `PATCH /api/threads/{id}` route. Used to persist per-conversation flags such
|
||
* as `is_pinned` (置顶) and `is_favorite` (收藏) — a conversation belongs to a
|
||
* single user, so these live directly on the thread metadata (no join table).
|
||
* Updates the `["threads", "search"]` cache optimistically so the UI reflects
|
||
* the toggle immediately, mirroring `useRenameThread`.
|
||
*/
|
||
export function useUpdateThreadMetadata() {
|
||
const queryClient = useQueryClient();
|
||
return useMutation({
|
||
mutationFn: async ({
|
||
threadId,
|
||
metadata,
|
||
}: {
|
||
threadId: string;
|
||
metadata: Record<string, unknown>;
|
||
}) => {
|
||
const response = await apiFetch(
|
||
`${getBackendBaseURL()}/api/threads/${encodeURIComponent(threadId)}`,
|
||
{
|
||
method: "PATCH",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ metadata }),
|
||
},
|
||
);
|
||
if (!response.ok) {
|
||
const error = await response
|
||
.json()
|
||
.catch(() => ({ detail: "更新对话失败。" }));
|
||
throw new Error(error.detail ?? "更新对话失败。");
|
||
}
|
||
},
|
||
onSuccess(_, { threadId, metadata }) {
|
||
updateCachedThreadLists(queryClient, (threads) =>
|
||
threads.map((t) =>
|
||
t.thread_id === threadId
|
||
? {
|
||
...t,
|
||
metadata: {
|
||
...(t.metadata as Record<string, unknown> | null),
|
||
...metadata,
|
||
},
|
||
}
|
||
: t,
|
||
),
|
||
);
|
||
},
|
||
});
|
||
}
|
||
|
||
/** Toggle a conversation's pinned (置顶) flag. */
|
||
export function useToggleThreadPin() {
|
||
const { mutate, ...rest } = useUpdateThreadMetadata();
|
||
return {
|
||
...rest,
|
||
toggle: (threadId: string, pinned: boolean) =>
|
||
mutate({ threadId, metadata: { is_pinned: pinned } }),
|
||
};
|
||
}
|
||
|
||
/** Toggle a conversation's favorite (收藏) flag. */
|
||
export function useToggleThreadFavorite() {
|
||
const { mutate, ...rest } = useUpdateThreadMetadata();
|
||
return {
|
||
...rest,
|
||
toggle: (threadId: string, favorite: boolean) =>
|
||
mutate({ threadId, metadata: { is_favorite: favorite } }),
|
||
};
|
||
}
|
||
|
||
export function useRenameThread() {
|
||
const queryClient = useQueryClient();
|
||
const apiClient = getAPIClient();
|
||
return useMutation({
|
||
mutationFn: async ({
|
||
threadId,
|
||
title,
|
||
}: {
|
||
threadId: string;
|
||
title: string;
|
||
}) => {
|
||
await apiClient.threads.updateState(threadId, {
|
||
values: { title },
|
||
});
|
||
},
|
||
onSuccess(_, { threadId, title }) {
|
||
updateCachedThreadLists(queryClient, (threads) =>
|
||
threads.map((t) =>
|
||
t.thread_id === threadId
|
||
? {
|
||
...t,
|
||
values: {
|
||
...t.values,
|
||
title,
|
||
},
|
||
}
|
||
: t,
|
||
),
|
||
);
|
||
},
|
||
});
|
||
}
|