deer-flow/frontend/src/app/workspace/chats/[thread_id]/page.tsx

"use client";

import { type HumanMessage } from "@langchain/core/messages";
import { useStream } from "@langchain/langgraph-sdk/react";
import { useQueryClient } from "@tanstack/react-query";
import { useParams, useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";

import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
import { BreadcrumbItem } from "@/components/ui/breadcrumb";
import { InputBox } from "@/components/workspace/input-box";
import { MessageList } from "@/components/workspace/message-list/message-list";
import {
  WorkspaceContainer,
  WorkspaceBody,
  WorkspaceHeader,
  WorkspaceFooter,
} from "@/components/workspace/workspace-container";
import { getLangGraphClient } from "@/core/api";
import type { MessageThread, MessageThreadState } from "@/core/thread";
import { titleOfThread } from "@/core/thread/utils";
import { uuid } from "@/core/utils/uuid";

const langGraphClient = getLangGraphClient();

export default function ChatPage() {
  const router = useRouter();
  const queryClient = useQueryClient();
  const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
  const isNewThread = useMemo(
    () => threadIdFromPath === "new",
    [threadIdFromPath],
  );
  const [threadId, setThreadId] = useState<string | null>(null);
  useEffect(() => {
    if (threadIdFromPath !== "new") {
      setThreadId(threadIdFromPath);
    } else {
      setThreadId(uuid());
    }
  }, [threadIdFromPath]);
  const thread = useStream<MessageThreadState>({
    client: langGraphClient,
    assistantId: "lead_agent",
    threadId: !isNewThread ? threadId : undefined,
    reconnectOnMount: true,
    fetchStateHistory: true,
    onFinish() {
      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
    },
  });
  const handleSubmit = useCallback(
    async (message: PromptInputMessage) => {
      const text = message.text.trim();
      if (isNewThread) {
        router.replace(`/workspace/chats/${threadId}`);
      }
      await thread.submit(
        {
          messages: [
            {
              type: "human",
              content: [
                {
                  type: "text",
                  text,
                },
              ],
            },
          ] as HumanMessage[],
        },
        {
          threadId: isNewThread ? threadId! : undefined,
          streamSubgraphs: true,
          streamResumable: true,
          context: {
            thread_id: threadId!,
            model: "deepseek-v3.2",
            thinking_enabled: true,
          },
        },
      );
      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
    },
    [isNewThread, queryClient, router, thread, threadId],
  );
  const handleStop = useCallback(async () => {
    await thread.stop();
  }, [thread]);
  return (
    <WorkspaceContainer>
      <WorkspaceHeader>
        <BreadcrumbItem className="hidden md:block">
          {isNewThread
            ? "New"
            : titleOfThread(thread as unknown as MessageThread)}
        </BreadcrumbItem>
      </WorkspaceHeader>
      <WorkspaceBody>
        <div className="flex size-full justify-center">
          <MessageList className="size-full" thread={thread} />
        </div>
      </WorkspaceBody>
      <WorkspaceFooter>
        <InputBox
          className="max-w-(--container-width-md)"
          autoFocus={isNewThread}
          status={thread.isLoading ? "streaming" : "ready"}
          onSubmit={handleSubmit}
          onStop={handleStop}
        />
      </WorkspaceFooter>
    </WorkspaceContainer>
  );
}