-
+ const getFormattedOutput = () => {
+ return constructPrompt({
+ query,
+ currentFeedback,
+ currentHtml,
+ });
+ };
- {/* Main Content */}
-
- {/* Version Switcher - Separate row on mobile */}
- navigateHistory('prev')}
- onNext={() => navigateHistory('next')}
- />
+ // Save the HTML to the server
+ await fetch(
+ `/api/apps/${history[historyIndex].sessionId}/${version}`,
+ {
+ method: "POST",
+ body: data.html,
+ },
+ );
+ }
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ toast.error("Failed to apply edit");
+ } finally {
+ setIsApplying(false);
+ }
+ };
- {/* Main Input Row */}
-
-
- {/* Version Switcher - Only visible on desktop */}
- navigateHistory('prev')}
- onNext={() => navigateHistory('next')}
- />
+ const navigateHistory = (direction: "prev" | "next") => {
+ const newIndex = direction === "prev" ? historyIndex - 1 : historyIndex + 1;
+ if (newIndex >= 0 && newIndex < history.length) {
+ setHistoryIndex(newIndex);
+ setCurrentHtml(history[newIndex].html);
+ setCurrentFeedback(history[newIndex].feedback || "");
+ }
+ };
- mode === 'query' ? setQuery(e.target.value) : setCurrentFeedback(e.target.value)}
- className="flex-1 p-2 border rounded"
- placeholder={mode === 'query' ? "Describe your app..." : "Enter your feedback..."}
- onKeyDown={(e) => {
- if (e.key === 'Enter' && !e.shiftKey) {
- e.preventDefault();
- mode === 'query' ? generateHtml() : submitFeedback();
- }
- }}
- />
-
-
-
-
- {/* Left Column - Code View */}
-
-
-
+ useEffect(() => {
+ const handleKeyPress = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ setIsOverlayOpen(false);
+ }
+ };
- {/* Right Column - Preview */}
-
-
- {currentHtml || ''}
-
-
-
-
-
-
+ window.addEventListener("keydown", handleKeyPress);
+ return () => window.removeEventListener("keydown", handleKeyPress);
+ }, []);
- {/* Sliding Debug Overlay */}
-
-
-
- {
- // The HTML is already saved when generated
- }}
- />
-
-
-
-
-
-
-
-
- Prompt
- -
- {getFormattedOutput()}
-
-
- {/* Left column */}
-
-
-
- {/* Right column */}
-
- Powered by
- 
-
-
-
-
-
- {history[historyIndex]?.usage && (
-
- {(history[historyIndex].usage.total_time * 1000).toFixed(0)}ms • {Math.round(history[historyIndex].usage.total_tokens / history[historyIndex].usage.total_time)} tokens/sec • llama-3.3-70b-specdec
-
- )}
-
-