refactor: Relocate handleClear Logic: Move the chat and diagram clearing logic to ChatPanel (or a Server Action) and have ChatInput call the onClearChat prop. Introduce a clearDiagram method in DiagramContext.

This commit is contained in:
dayuan.jiang
2025-03-27 08:09:22 +00:00
parent 7e0790d60f
commit 6c8b5c48a2
3 changed files with 16 additions and 10 deletions

View File

@@ -40,7 +40,7 @@ export function ChatInput({
showHistory = false, showHistory = false,
onToggleHistory = () => {}, onToggleHistory = () => {},
}: ChatInputProps) { }: ChatInputProps) {
const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram(); const { diagramHistory } = useDiagram();
const textareaRef = useRef<HTMLTextAreaElement>(null); const textareaRef = useRef<HTMLTextAreaElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
@@ -132,14 +132,6 @@ export function ChatInput({
// Handle clearing conversation and diagram // Handle clearing conversation and diagram
const handleClear = () => { const handleClear = () => {
onClearChat(); onClearChat();
onDisplayChart(`<mxfile host="embed.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36" version="26.1.1">
<diagram name="Page-1" id="NsivuNt5aJDXaP8udwGv">
<mxGraphModel dx="394" dy="700" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
</root>
</mxGraphModel>
</diagram>
</mxfile>`);
setShowClearDialog(false); setShowClearDialog(false);
}; };

View File

@@ -20,6 +20,7 @@ export default function ChatPanel() {
loadDiagram: onDisplayChart, loadDiagram: onDisplayChart,
handleExport: onExport, handleExport: onExport,
resolverRef, resolverRef,
clearDiagram,
} = useDiagram(); } = useDiagram();
const onFetchChart = () => { const onFetchChart = () => {
@@ -123,7 +124,10 @@ export default function ChatPanel() {
status={status} status={status}
onSubmit={onFormSubmit} onSubmit={onFormSubmit}
onChange={handleInputChange} onChange={handleInputChange}
onClearChat={() => setMessages([])} onClearChat={() => {
setMessages([]);
clearDiagram();
}}
files={files} files={files}
onFileChange={handleFileChange} onFileChange={handleFileChange}
showHistory={showHistory} showHistory={showHistory}

View File

@@ -13,6 +13,7 @@ interface DiagramContextType {
resolverRef: React.Ref<((value: string) => void) | null>; resolverRef: React.Ref<((value: string) => void) | null>;
drawioRef: React.Ref<DrawIoEmbedRef | null>; drawioRef: React.Ref<DrawIoEmbedRef | null>;
handleDiagramExport: (data: any) => void; handleDiagramExport: (data: any) => void;
clearDiagram: () => void;
} }
const DiagramContext = createContext<DiagramContextType | undefined>(undefined); const DiagramContext = createContext<DiagramContextType | undefined>(undefined);
@@ -59,6 +60,14 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
} }
}; };
const clearDiagram = () => {
const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`;
loadDiagram(emptyDiagram);
setChartXML(emptyDiagram);
setLatestSvg("");
setDiagramHistory([]);
};
return ( return (
<DiagramContext.Provider <DiagramContext.Provider
value={{ value={{
@@ -70,6 +79,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
resolverRef, resolverRef,
drawioRef, drawioRef,
handleDiagramExport, handleDiagramExport,
clearDiagram,
}} }}
> >
{children} {children}