mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 14:22:28 +08:00
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:
@@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user