Function ExamplePanel

frontend/components/chat-example-panel.tsx:59–180

({
    setInput,
    setFiles,
}: {
    setInput: (input: string) => void
    setFiles: (files: File[]) => void
})

}

export default function ExamplePanel({
    setInput,
    setFiles,
}: {
    setInput: (input: string) => void
    setFiles: (files: File[]) => void
}) {
    const handleReplicateFlowchart = async () => {
        setInput("Replicate this flowchart.")

        try {
            const response = await fetch("/example.png")
            const blob = await response.blob()
            const file = new File([blob], "example.png", { type: "image/png" })
            setFiles([file])
        } catch (error) {
            console.error("Error loading example image:", error)
        }
    }

    const handleReplicateArchitecture = async () => {
        setInput("Replicate this in aws style")

        try {
            const response = await fetch("/architecture.png")
            const blob = await response.blob()
            const file = new File([blob], "architecture.png", {
                type: "image/png",
            })
            setFiles([file])
        } catch (error) {
            console.error("Error loading architecture image:", error)
        }
    }

    const handlePdfExample = async () => {
        setInput("Summarize this paper as a diagram")

        try {
            const response = await fetch("/chain-of-thought.txt")
            const blob = await response.blob()
            const file = new File([blob], "chain-of-thought.txt", {
                type: "text/plain",
            })
            setFiles([file])
        } catch (error) {
            console.error("Error loading text file:", error)
        }
    }

    return (
        <div className="py-6 px-2 animate-fade-in">
            {/* Welcome section */}
            <div className="text-center mb-6">
                <h2 className="text-lg font-semibold text-foreground mb-2">
                    Create diagrams with AI
                </h2>
                <p className="text-sm text-muted-foreground max-w-xs mx-auto">