i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 22:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: remove stepCounterRef prop and manage step counter internally

Browse Source
This commit is contained in:
dayuan.jiang
2025-03-25 04:23:38 +00:00
parent dedb5855c3
commit 21537f6e7b
2 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/chat-message-display.tsx
View File

@@ -14,7 +14,6 @@ interface ChatMessageDisplayProps {
setInput: (input: string) => void; setInput: (input: string) => void;
setFiles: (files: FileList | undefined) => void; setFiles: (files: FileList | undefined) => void;
onDisplayChart: (xml: string) => void; onDisplayChart: (xml: string) => void;
stepCounterRef: React.MutableRefObject<number>;
} }
export function ChatMessageDisplay({ export function ChatMessageDisplay({
@@ -23,10 +22,9 @@ export function ChatMessageDisplay({
setInput, setInput,
setFiles, setFiles,
onDisplayChart, onDisplayChart,
stepCounterRef,
}: ChatMessageDisplayProps) { }: ChatMessageDisplayProps) {
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const stepCounterRef = useRef<number>(0);
useEffect(() => { useEffect(() => {
if (messagesEndRef.current) { if (messagesEndRef.current) {
messagesEndRef.current.scrollIntoView({ behavior: "smooth" }); messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -39,18 +37,24 @@ export function ChatMessageDisplay({
switch (toolInvocation.toolName) { switch (toolInvocation.toolName) {
case "display_diagram": { case "display_diagram": {
switch (toolInvocation.state) { switch (toolInvocation.state) {
case "partial-call": { case "partial-call":
const currentXml = toolInvocation.args?.xml || ""; {
const currentXml = toolInvocation.args?.xml || "";
// Increment the step counter // Increment the step counter
stepCounterRef.current += 1; stepCounterRef.current += 1;
// Determine whether to show details based on a simple threshold // Determine whether to show details based on a simple threshold
if ( if (stepCounterRef.current % 20 === 0) {
stepCounterRef.current >= 50 && const convertedXml =
stepCounterRef.current % 20 === 0 convertToLegalXml(currentXml);
) { // if "/root" in convertedXml
onDisplayChart(convertToLegalXml(currentXml)); if (convertedXml.includes("/root")) {
onDisplayChart(convertedXml);
console.log("converted xml", convertedXml);
}
// if convertedXml changed
}
} }
return ( return (
<div <div
@@ -68,7 +72,6 @@ export function ChatMessageDisplay({
</div> </div>
</div> </div>
); );
}
case "call": case "call":
return ( return (
<div <div

3
components/chat-panel.tsx
View File

@@ -27,7 +27,7 @@ export default function ChatPanel({
onAddToHistory = () => {}, onAddToHistory = () => {},
}: ChatPanelProps) { }: ChatPanelProps) {
// Add a step counter to track updates // Add a step counter to track updates
const stepCounterRef = useRef<number>(0);
// Add state for file attachments // Add state for file attachments
const [files, setFiles] = useState<FileList | undefined>(undefined); const [files, setFiles] = useState<FileList | undefined>(undefined);
// Add state for showing the history dialog // Add state for showing the history dialog
@@ -109,7 +109,6 @@ export default function ChatPanel({
setInput={setInput} setInput={setInput}
setFiles={handleFileChange} setFiles={handleFileChange}
onDisplayChart={onDisplayChart} onDisplayChart={onDisplayChart}
stepCounterRef={stepCounterRef}
/> />
</CardContent> </CardContent>