diff --git a/components/chatPanel.tsx b/components/chatPanel.tsx index e2795a4..f520913 100644 --- a/components/chatPanel.tsx +++ b/components/chatPanel.tsx @@ -29,6 +29,8 @@ export default function ChatPanel({ const stepCounterRef = useRef(0); // Add state for file attachments const [files, setFiles] = useState(undefined); + // Add state to control visibility of prompt examples panel + const [showExamples, setShowExamples] = useState(true); // Remove the currentXmlRef and related useEffect const { @@ -70,6 +72,9 @@ export default function ChatPanel({ e.preventDefault(); if (input.trim() && status !== "streaming") { try { + // Hide examples panel after sending a message + setShowExamples(false); + // Fetch chart data before setting input const chartXml = await onFetchChart(); @@ -103,6 +108,30 @@ export default function ChatPanel({ setFiles(newFiles); }; + // New utility function to create a FileList from a File + const createFileList = (file: File): FileList => { + const dt = new DataTransfer(); + dt.items.add(file); + return dt.files; + }; + + // New handler for the "Replicate this flowchart" button + const handleReplicateFlowchart = async () => { + setInput("Replicate this flowchart."); + + try { + // Fetch the example image + const response = await fetch("/example.png"); + const blob = await response.blob(); + const file = new File([blob], "example.png", { type: "image/png" }); + + // Set the file to the files state + setFiles(createFileList(file)); + } catch (error) { + console.error("Error loading example image:", error); + } + }; + // Helper function to render tool invocations const renderToolInvocation = (toolInvocation: any) => { const callId = toolInvocation.toolCallId; @@ -301,6 +330,30 @@ export default function ChatPanel({
+ + {/* Conditionally render Prompt Examples Panel */} + {showExamples && ( +
+

+ Try these examples: +

+
+ + +
+
+ )} +