OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

输入框状态剥离，避免受长信息列表渲染影响；覆写滚动条状态动作，不再强制拉到最底

Browse Source
This commit is contained in:
Huarch
2026-06-03 15:01:24 +08:00
parent 888132a60f
commit fa3e6b6e84
3 changed files with 90 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/chat/AgentComposer.tsx
+41 -17
View File
@@ -28,44 +28,65 @@ import BoltRounded from "@mui/icons-material/BoltRounded";
import AutoAwesomeRounded from "@mui/icons-material/AutoAwesomeRounded";
import type { AgentModel } from "@/lib/chatStream";
export type AgentComposerHandle = {
focus: () => void;
clear: () => void;
append: (text: string) => void;
setValue: (value: string) => void;
getValue: () => string;
};
type AgentComposerProps = {
input: string;
inputRef: React.RefObject<HTMLInputElement | null>;
isHydrating?: boolean;
isStreaming: boolean;
isListening: boolean;
isSttSupported: boolean;
presets: string[];
onInputChange: (value: string) => void;
onSend: () => void;
onSend: (prompt: string) => void;
onAbort: () => void;
onStartListening: () => void;
onStopListening: () => void;
onPresetSelect: (prompt: string) => void;
selectedModel: AgentModel;
onModelChange: (model: AgentModel) => void;
};
export const AgentComposer = ({
input,
inputRef,
export const AgentComposer = React.forwardRef<AgentComposerHandle, AgentComposerProps>(function AgentComposer({
isHydrating = false,
isStreaming,
isListening,
isSttSupported,
presets,
onInputChange,
onSend,
onAbort,
onStartListening,
onStopListening,
onPresetSelect,
selectedModel,
onModelChange,
}: AgentComposerProps) => {
}, ref) {
const theme = useTheme();
const canSend = input.trim().length > 0 && !isStreaming && !isHydrating;
const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
const [input, setInput] = React.useState("");
const [isPresetOpen, setIsPresetOpen] = React.useState(false);
const canSend = input.trim().length > 0 && !isStreaming && !isHydrating;
React.useImperativeHandle(
ref,
() => ({
focus: () => inputRef.current?.focus(),
clear: () => setInput(""),
append: (text: string) => setInput((prev) => prev + text),
setValue: (value: string) => setInput(value),
getValue: () => input,
}),
[input],
);
const handleSend = React.useCallback(() => {
const prompt = input.trim();
if (!prompt || isStreaming || isHydrating) return;
setInput("");
onSend(prompt);
}, [input, isHydrating, isStreaming, onSend]);
return (
<Box sx={{ px: 2, pb: 2, pt: 1, zIndex: 10 }}>
@@ -121,8 +142,11 @@ export const AgentComposer = ({
size="medium"
clickable
onClick={() => {
onPresetSelect(prompt);
setInput(prompt);
setIsPresetOpen(false);
window.setTimeout(() => {
inputRef.current?.focus();
}, 0);
}}
sx={{
height: 32,
@@ -165,11 +189,11 @@ export const AgentComposer = ({
<TextField
inputRef={inputRef}
value={input}
onChange={(event) => onInputChange(event.target.value)}
onChange={(event) => setInput(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
onSend();
handleSend();
}
}}
placeholder={isHydrating ? "正在加载对话记录..." : "描述你的分析目标，或点击上方指令库..."}
@@ -362,7 +386,7 @@ export const AgentComposer = ({
<motion.div key="send" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
<IconButton
disabled={!canSend}
onClick={onSend}
onClick={handleSend}
aria-label="发送"
size="small"
sx={{
@@ -397,4 +421,4 @@ export const AgentComposer = ({
</Box>
</Box>
);
};
});
src/components/chat/AgentWorkspace.tsx
+6
View File
@@ -23,6 +23,8 @@ 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;
@@ -155,6 +157,8 @@ export const AgentWorkspace = ({
branchGroups,
branchTransition,
isStreaming,
scrollContainerRef,
onScroll,
bottomRef,
speakingMessageId,
speechState,
@@ -216,6 +220,8 @@ export const AgentWorkspace = ({
return (
<Box
ref={scrollContainerRef}
onScroll={onScroll}
sx={{
flex: 1,
overflowY: "auto",
src/components/chat/GlobalChatbox.tsx
+43 -30
View File
@@ -10,7 +10,7 @@ import { Box, Drawer, alpha, useTheme } from "@mui/material";
import type { AgentModel } from "@/lib/chatStream";
import { useProjectStore } from "@/store/projectStore";
import { AgentComposer } from "./AgentComposer";
import { AgentComposer, type AgentComposerHandle } from "./AgentComposer";
import { AgentHeader } from "./AgentHeader";
import { AgentHistoryPanel } from "./AgentHistoryPanel";
import { AgentWorkspace } from "./AgentWorkspace";
@@ -22,7 +22,6 @@ import { useAgentChatSession } from "./hooks/useAgentChatSession";
import { useAgentToolActions } from "./hooks/useAgentToolActions";
export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
const [input, setInput] = useState("");
const [width, setWidth] = useState(520);
const [isResizing, setIsResizing] = useState(false);
const [isHistoryOpen, setIsHistoryOpen] = useState(false);
@@ -31,8 +30,10 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
);
const bottomRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement | null>(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);
@@ -47,7 +48,7 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
} = useSpeechSynthesis();
const handleSpeechResult = useCallback((text: string) => {
setInput((prev) => prev + text);
composerRef.current?.append(text);
}, []);
const {
@@ -83,9 +84,22 @@ 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(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages, isStreaming]);
if (!shouldAutoScrollRef.current) return;
scrollToBottom(isStreaming ? "auto" : "smooth");
}, [isStreaming, messages, scrollToBottom]);
useEffect(() => {
if (!open) {
@@ -96,38 +110,33 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
hasResetForOpenRef.current = true;
const timer = window.setTimeout(() => {
shouldAutoScrollRef.current = true;
createSession();
setInput("");
composerRef.current?.clear();
setIsHistoryOpen(false);
inputRef.current?.focus();
bottomRef.current?.scrollIntoView({ behavior: "auto" });
composerRef.current?.focus();
scrollToBottom("auto");
}, 0);
return () => window.clearTimeout(timer);
}, [createSession, isHydrating, open]);
}, [createSession, isHydrating, open, scrollToBottom]);
const handleSend = useCallback(() => {
const prompt = input.trim();
if (!prompt || isStreaming) return;
setInput("");
const handleSend = useCallback((prompt: string) => {
if (isStreaming) return;
shouldAutoScrollRef.current = true;
void sendPrompt(prompt);
}, [input, isStreaming, sendPrompt]);
const handlePresetPromptSelect = useCallback((prompt: string) => {
setInput(prompt);
window.setTimeout(() => {
inputRef.current?.focus();
}, 0);
}, []);
}, [isStreaming, sendPrompt]);
const handleNewConversation = useCallback(() => {
handleStopSpeech();
stopListening();
shouldAutoScrollRef.current = true;
createSession();
setInput("");
composerRef.current?.clear();
window.setTimeout(() => {
inputRef.current?.focus();
composerRef.current?.focus();
scrollToBottom("auto");
}, 0);
}, [createSession, handleStopSpeech, stopListening]);
}, [createSession, handleStopSpeech, scrollToBottom, stopListening]);
const handleHistoryToggle = useCallback(() => {
setIsHistoryOpen((prev) => !prev);
@@ -135,12 +144,17 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
const handleSelectSession = useCallback(
(storageSessionId: string) => {
setInput("");
shouldAutoScrollRef.current = true;
composerRef.current?.clear();
void switchSession(storageSessionId);
},
[switchSession],
);
const handleWorkspaceScroll = useCallback(() => {
syncAutoScrollState();
}, [syncAutoScrollState]);
const handleDeleteSession = useCallback(
(storageSessionId: string) => {
void removeSession(storageSessionId);
@@ -320,6 +334,8 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
branchGroups={branchGroups}
branchTransition={branchTransition}
isStreaming={isStreaming}
scrollContainerRef={workspaceRef}
onScroll={handleWorkspaceScroll}
bottomRef={bottomRef}
speakingMessageId={speakingMessageId}
speechState={speechState}
@@ -334,19 +350,16 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
/>
<AgentComposer
input={input}
inputRef={inputRef}
ref={composerRef}
isHydrating={isHydrating}
isStreaming={isStreaming}
isListening={isListening}
isSttSupported={isSttSupported}
presets={PRESET_PROMPTS}
onInputChange={setInput}
onSend={handleSend}
onAbort={abort}
onStartListening={startListening}
onStopListening={stopListening}
onPresetSelect={handlePresetPromptSelect}
selectedModel={selectedModel}
onModelChange={setSelectedModel}
/>