/** * Copyright 2025 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import React, { useState } from 'react'; import { Code2, Play, Copy, Check, MessageCircle } from 'lucide-react'; import Editor from '@monaco-editor/react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import ToggleButton from './ToggleButton'; const CodePreview = ({ output, onCodeChange, fullResponse }) => { const [showCode, setShowCode] = useState(false); const [showReasoning, setShowReasoning] = useState(false); const [isCopied, setIsCopied] = useState(false); const handleCopy = async () => { try { await navigator.clipboard.writeText(output.code); setIsCopied(true); setTimeout(() => setIsCopied(false), 2000); } catch (err) { console.error('Failed to copy code:', err); } }; const renderSketch = (code) => { // Make sure we're working with a string const codeString = typeof code === 'string' ? code : code.toString(); const wrappedCode = codeString.includes('function setup()') ? codeString : ` function setup() { createCanvas(500, 500); ${codeString} } function draw() { // Add default draw function if not present if (typeof window.draw !== 'function') { window.draw = function() {}; } } `; const formattedCodeResponse = ` p5.js Sketch `; return (