feat(frontend): 对齐聊天页与消息流类型接口

2026-03-29 00:24:34 +08:00 · 2026-03-29 00:24:34 +08:00 · 43355677f9
parent 662911e93b
commit 43355677f9
6 changed files with 24 additions and 32 deletions
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@ -9,6 +9,7 @@ export default tseslint.config(
  {
    ignores: [
      ".next",
+      "imports/**",
      "src/components/ui/**",
      "src/components/ai-elements/**",
      "*.js",
--- a/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
@ -1,6 +1,5 @@
 "use client";

-import type { UseStream } from "@langchain/langgraph-sdk/react";
 import { BotIcon, PlusSquare } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useCallback } from "react";
@ -22,7 +21,6 @@ import { useAgent } from "@/core/agents";
 import { useI18n } from "@/core/i18n/hooks";
 import { useNotification } from "@/core/notification/hooks";
 import { useLocalSettings } from "@/core/settings";
-import type { AgentThreadState } from "@/core/threads";
 import { useThreadStream } from "@/core/threads/hooks";
 import { textOfMessage } from "@/core/threads/utils";
 import { env } from "@/env";
@ -82,7 +80,6 @@ export default function AgentChatPage() {
  const handleStop = useCallback(async () => {
    await thread.stop();
  }, [thread]);
-  const legacyThread = thread as unknown as UseStream<AgentThreadState>;

  return (
    <ThreadContext.Provider value={{ thread }}>
@ -105,7 +102,7 @@ export default function AgentChatPage() {
            </div>

            <div className="flex w-full items-center text-sm font-medium">
-              <ThreadTitle threadId={threadId} thread={legacyThread} />
+              <ThreadTitle threadId={threadId} thread={thread} />
            </div>
            <div className="mr-4 flex items-center">
              <Tooltip content={t.agents.newChat}>
@ -130,7 +127,7 @@ export default function AgentChatPage() {
              <MessageList
                className={cn("size-full", !isNewThread && "pt-10")}
                threadId={threadId}
-                thread={legacyThread}
+                thread={thread}
              />
            </div>

@ -159,6 +156,7 @@ export default function AgentChatPage() {
                <InputBox
                  className={cn("bg-background/5 w-full -translate-y-4")}
                  isNewThread={isNewThread}
+                  threadId={threadId}
                  autoFocus={isNewThread}
                  status={
                    thread.error
--- a/frontend/src/app/workspace/agents/new/page.tsx
+++ b/frontend/src/app/workspace/agents/new/page.tsx
@ -1,6 +1,5 @@
 "use client";

-import type { UseStream } from "@langchain/langgraph-sdk/react";
 import { ArrowLeftIcon, BotIcon, CheckCircleIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
@ -19,7 +18,6 @@ import { ThreadContext } from "@/components/workspace/messages/context";
 import type { Agent } from "@/core/agents";
 import { checkAgentName, getAgent } from "@/core/agents/api";
 import { useI18n } from "@/core/i18n/hooks";
-import type { AgentThreadState } from "@/core/threads";
 import { useThreadStream } from "@/core/threads/hooks";
 import { uuid } from "@/core/utils/uuid";
 import { cn } from "@/lib/utils";
@ -120,7 +118,6 @@ export default function NewAgentPage() {
  );

  // ── Shared header ──────────────────────────────────────────────────────────
-  const legacyThread = thread as unknown as UseStream<AgentThreadState>;

  const header = (
    <header className="flex shrink-0 items-center gap-3 border-b px-4 py-3">
@ -200,7 +197,7 @@ export default function NewAgentPage() {
              <MessageList
                className="size-full pt-10"
                threadId={threadId}
-                thread={legacyThread}
+                thread={thread}
              />
            </div>

--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@ -1,6 +1,5 @@
 "use client";

-import type { UseStream } from "@langchain/langgraph-sdk/react";
 import { useCallback } from "react";

 import { type PromptInputMessage } from "@/components/ai-elements/prompt-input";
@ -21,7 +20,6 @@ import { Welcome } from "@/components/workspace/welcome";
 import { useI18n } from "@/core/i18n/hooks";
 import { useNotification } from "@/core/notification/hooks";
 import { useLocalSettings } from "@/core/settings";
-import type { AgentThreadState } from "@/core/threads";
 import { useThreadStream } from "@/core/threads/hooks";
 import { textOfMessage } from "@/core/threads/utils";
 import { env } from "@/env";
@ -72,7 +70,6 @@ export default function ChatPage() {
  const handleStop = useCallback(async () => {
    await thread.stop();
  }, [thread]);
-  const legacyThread = thread as unknown as UseStream<AgentThreadState>;

  return (
    <ThreadContext.Provider value={{ thread, isMock }}>
@ -87,7 +84,7 @@ export default function ChatPage() {
            )}
          >
            <div className="flex w-full items-center text-sm font-medium">
-              <ThreadTitle threadId={threadId} thread={legacyThread} />
+              <ThreadTitle threadId={threadId} thread={thread} />
            </div>
            <div className="flex items-center gap-2">
              <TokenUsageIndicator messages={thread.messages} />
@ -100,7 +97,7 @@ export default function ChatPage() {
              <MessageList
                className={cn("size-full", !isNewThread && "pt-10")}
                threadId={threadId}
-                thread={legacyThread}
+                thread={thread}
              />
            </div>
            <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
@ -127,6 +124,7 @@ export default function ChatPage() {
                <InputBox
                  className={cn("bg-background/5 w-full -translate-y-4")}
                  isNewThread={isNewThread}
+                  threadId={threadId}
                  autoFocus={isNewThread}
                  status={
                    thread.error
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@ -91,6 +91,7 @@ export function InputBox({
  extraHeader,
  isNewThread,
  hasSubmitted,
+  threadId: threadIdProp,
  initialValue,
  onContextChange,
  onSubmit,
@ -109,6 +110,7 @@ export function InputBox({
  extraHeader?: React.ReactNode;
  isNewThread?: boolean;
  hasSubmitted?: boolean;
+  threadId?: string;
  initialValue?: string;
  onContextChange?: (
    context: Omit<
@ -126,7 +128,7 @@ export function InputBox({
  const iframeSkill = useIframeSkill();

  const params = useParams();
-  const threadId = params?.thread_id;
+  const threadId = threadIdProp ?? params?.thread_id;
  const { textInput } = usePromptInputController();
  const attachments = usePromptInputAttachments();
  const promptRootRef = useRef<HTMLDivElement | null>(null);
--- a/frontend/src/components/workspace/messages/message-list.tsx
+++ b/frontend/src/components/workspace/messages/message-list.tsx
@ -1,5 +1,4 @@
-import type { Message } from "@langchain/langgraph-sdk";
-import type { UseStream } from "@langchain/langgraph-sdk/react";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";

 import {
  Conversation,
@ -34,23 +33,18 @@ export function MessageList({
  className,
  threadId,
  thread,
-  messagesOverride,
-  suppressThreadLoading = false,
  paddingBottom = 160,
 }: {
  className?: string;
  threadId: string;
-  thread: UseStream<AgentThreadState>;
-  /** When set (e.g. from onFinish), use instead of thread.messages so SSE end shows complete state. */
-  messagesOverride?: Message[];
-  suppressThreadLoading?: boolean;
+  thread: BaseStream<AgentThreadState>;
  paddingBottom?: number;
 }) {
  const { t } = useI18n();
  const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
  const updateSubtask = useUpdateSubtask();
-  const messages = messagesOverride ?? thread.messages;
-  if (thread.isThreadLoading && !suppressThreadLoading && messages.length === 0) {
+  const messages = thread.messages;
+  if (thread.isThreadLoading && messages.length === 0) {
    return <MessageListSkeleton />;
  }
  return (
@ -60,13 +54,15 @@ export function MessageList({
      <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-8 pt-12">
        {groupMessages(messages, (group) => {
          if (group.type === "human" || group.type === "assistant") {
-            return group.messages.map((msg) => (
-              <MessageListItem
-                key={`${group.id}/${msg.id}`}
-                message={msg}
-                isLoading={thread.isLoading}
-              />
-            ));
+            return group.messages.map((msg) => {
+              return (
+                <MessageListItem
+                  key={`${group.id}/${msg.id}`}
+                  message={msg}
+                  isLoading={thread.isLoading}
+                />
+              );
+            });
          } else if (group.type === "assistant:clarification") {
            const message = group.messages[0];
            if (message && hasContent(message)) {