重构组件,优化性能并移除不必要的属性;撤销滚动条修改;
This commit is contained in:
@@ -85,7 +85,12 @@ const formatToolTitle = (item: ChatProgress) => {
|
||||
return item.title;
|
||||
};
|
||||
|
||||
export const AgentProgressTimeline = ({ progress, isAborted }: { progress: ChatProgress[], isAborted?: boolean }) => {
|
||||
type AgentProgressTimelineProps = {
|
||||
progress: ChatProgress[];
|
||||
isAborted?: boolean;
|
||||
};
|
||||
|
||||
const AgentProgressTimelineInner = ({ progress, isAborted }: AgentProgressTimelineProps) => {
|
||||
const theme = useTheme();
|
||||
const [nowMs, setNowMs] = useState(() => Date.now());
|
||||
|
||||
@@ -356,3 +361,12 @@ export const AgentProgressTimeline = ({ progress, isAborted }: { progress: ChatP
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const AgentProgressTimeline = React.memo(
|
||||
AgentProgressTimelineInner,
|
||||
(prevProps, nextProps) =>
|
||||
prevProps.progress === nextProps.progress &&
|
||||
prevProps.isAborted === nextProps.isAborted,
|
||||
);
|
||||
|
||||
AgentProgressTimeline.displayName = "AgentProgressTimeline";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import React, { useMemo } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
@@ -85,15 +85,21 @@ export const AgentTurn = React.memo(
|
||||
const [editDraft, setEditDraft] = React.useState(message.content);
|
||||
const rootMessageId = message.branchRootId ?? message.id;
|
||||
|
||||
const parsedAssistantSections =
|
||||
!isUser && !isErrorMessage
|
||||
? parseAssistantMessageSections(message.content)
|
||||
: null;
|
||||
const parsedAssistantSections = useMemo(
|
||||
() =>
|
||||
!isUser && !isErrorMessage
|
||||
? parseAssistantMessageSections(message.content)
|
||||
: null,
|
||||
[isErrorMessage, isUser, message.content],
|
||||
);
|
||||
const answerContent = parsedAssistantSections?.answer ?? message.content;
|
||||
const contentSegments: ContentSegment[] =
|
||||
!isUser && !isErrorMessage
|
||||
? parseContentWithToolCalls(answerContent).segments
|
||||
: [{ type: "text", content: answerContent }];
|
||||
const contentSegments: ContentSegment[] = useMemo(
|
||||
() =>
|
||||
!isUser && !isErrorMessage
|
||||
? parseContentWithToolCalls(answerContent).segments
|
||||
: [{ type: "text", content: answerContent }],
|
||||
[answerContent, isErrorMessage, isUser],
|
||||
);
|
||||
|
||||
if (isUser) {
|
||||
return (
|
||||
|
||||
@@ -23,8 +23,6 @@ type AgentWorkspaceProps = {
|
||||
branchGroups: BranchGroup[];
|
||||
branchTransition: BranchTransition | null;
|
||||
isStreaming: boolean;
|
||||
scrollContainerRef: React.RefObject<HTMLDivElement | null>;
|
||||
onScroll: React.UIEventHandler<HTMLDivElement>;
|
||||
bottomRef: React.RefObject<HTMLDivElement | null>;
|
||||
speakingMessageId: string | null;
|
||||
speechState: SpeechState;
|
||||
@@ -157,8 +155,6 @@ export const AgentWorkspace = ({
|
||||
branchGroups,
|
||||
branchTransition,
|
||||
isStreaming,
|
||||
scrollContainerRef,
|
||||
onScroll,
|
||||
bottomRef,
|
||||
speakingMessageId,
|
||||
speechState,
|
||||
@@ -220,8 +216,6 @@ export const AgentWorkspace = ({
|
||||
|
||||
return (
|
||||
<Box
|
||||
ref={scrollContainerRef}
|
||||
onScroll={onScroll}
|
||||
sx={{
|
||||
flex: 1,
|
||||
overflowY: "auto",
|
||||
|
||||
@@ -30,10 +30,8 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
);
|
||||
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const workspaceRef = useRef<HTMLDivElement | null>(null);
|
||||
const composerRef = useRef<AgentComposerHandle | null>(null);
|
||||
const hasResetForOpenRef = useRef(false);
|
||||
const shouldAutoScrollRef = useRef(true);
|
||||
const theme = useTheme();
|
||||
const currentProjectId = useProjectStore((state) => state.currentProjectId);
|
||||
|
||||
@@ -84,20 +82,11 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
getModel: () => selectedModel,
|
||||
});
|
||||
|
||||
const syncAutoScrollState = useCallback(() => {
|
||||
const container = workspaceRef.current;
|
||||
if (!container) return;
|
||||
const distanceFromBottom =
|
||||
container.scrollHeight - container.scrollTop - container.clientHeight;
|
||||
shouldAutoScrollRef.current = distanceFromBottom <= 120;
|
||||
}, []);
|
||||
|
||||
const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
|
||||
bottomRef.current?.scrollIntoView({ behavior });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldAutoScrollRef.current) return;
|
||||
scrollToBottom(isStreaming ? "auto" : "smooth");
|
||||
}, [isStreaming, messages, scrollToBottom]);
|
||||
|
||||
@@ -110,7 +99,6 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
hasResetForOpenRef.current = true;
|
||||
|
||||
const timer = window.setTimeout(() => {
|
||||
shouldAutoScrollRef.current = true;
|
||||
createSession();
|
||||
composerRef.current?.clear();
|
||||
setIsHistoryOpen(false);
|
||||
@@ -122,14 +110,12 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
|
||||
const handleSend = useCallback((prompt: string) => {
|
||||
if (isStreaming) return;
|
||||
shouldAutoScrollRef.current = true;
|
||||
void sendPrompt(prompt);
|
||||
}, [isStreaming, sendPrompt]);
|
||||
|
||||
const handleNewConversation = useCallback(() => {
|
||||
handleStopSpeech();
|
||||
stopListening();
|
||||
shouldAutoScrollRef.current = true;
|
||||
createSession();
|
||||
composerRef.current?.clear();
|
||||
window.setTimeout(() => {
|
||||
@@ -144,17 +130,12 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
|
||||
const handleSelectSession = useCallback(
|
||||
(storageSessionId: string) => {
|
||||
shouldAutoScrollRef.current = true;
|
||||
composerRef.current?.clear();
|
||||
void switchSession(storageSessionId);
|
||||
},
|
||||
[switchSession],
|
||||
);
|
||||
|
||||
const handleWorkspaceScroll = useCallback(() => {
|
||||
syncAutoScrollState();
|
||||
}, [syncAutoScrollState]);
|
||||
|
||||
const handleDeleteSession = useCallback(
|
||||
(storageSessionId: string) => {
|
||||
void removeSession(storageSessionId);
|
||||
@@ -334,8 +315,6 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
branchGroups={branchGroups}
|
||||
branchTransition={branchTransition}
|
||||
isStreaming={isStreaming}
|
||||
scrollContainerRef={workspaceRef}
|
||||
onScroll={handleWorkspaceScroll}
|
||||
bottomRef={bottomRef}
|
||||
speakingMessageId={speakingMessageId}
|
||||
speechState={speechState}
|
||||
|
||||
Reference in New Issue
Block a user