add in firecrawl search
This commit is contained in:
Developers Digest
@@ -164,9 +164,9 @@ export async function POST(request: NextRequest) {
|
||||
// Install packages using provider method
|
||||
const installResult = await providerInstance.installPackages(packagesToInstall);
|
||||
|
||||
// Get install output
|
||||
const stdout = installResult.stdout;
|
||||
const stderr = installResult.stderr;
|
||||
// Get install output - ensure stdout/stderr are strings
|
||||
const stdout = String(installResult.stdout || '');
|
||||
const stderr = String(installResult.stderr || '');
|
||||
|
||||
if (stdout) {
|
||||
const lines = stdout.split('\n').filter(line => line.trim());
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const { query } = await req.json();
|
||||
|
||||
if (!query) {
|
||||
return NextResponse.json({ error: 'Query is required' }, { status: 400 });
|
||||
}
|
||||
|
||||
// Use Firecrawl search to get top 10 results with screenshots
|
||||
const searchResponse = await fetch('https://api.firecrawl.dev/v1/search', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${process.env.FIRECRAWL_API_KEY}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query,
|
||||
limit: 10,
|
||||
scrapeOptions: {
|
||||
formats: ['markdown', 'screenshot'],
|
||||
onlyMainContent: true,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
if (!searchResponse.ok) {
|
||||
throw new Error('Search failed');
|
||||
}
|
||||
|
||||
const searchData = await searchResponse.json();
|
||||
|
||||
// Format results with screenshots and markdown
|
||||
const results = searchData.data?.map((result: any) => ({
|
||||
url: result.url,
|
||||
title: result.title || result.url,
|
||||
description: result.description || '',
|
||||
screenshot: result.screenshot || null,
|
||||
markdown: result.markdown || '',
|
||||
})) || [];
|
||||
|
||||
return NextResponse.json({ results });
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to perform search' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
+33
-14
@@ -174,11 +174,12 @@ export default function AISandboxPage() {
|
||||
// Mark that we have an initial submission since we're loading with a URL
|
||||
setHasInitialSubmission(true);
|
||||
|
||||
// Clear sessionStorage after reading
|
||||
// Clear sessionStorage after reading
|
||||
sessionStorage.removeItem('targetUrl');
|
||||
sessionStorage.removeItem('selectedStyle');
|
||||
sessionStorage.removeItem('selectedModel');
|
||||
sessionStorage.removeItem('additionalInstructions');
|
||||
// Note: Don't clear siteMarkdown here, it will be cleared when used
|
||||
|
||||
// Set the values in the component state
|
||||
setHomeUrlInput(storedUrl);
|
||||
@@ -2638,20 +2639,37 @@ Tip: I automatically detect and install npm packages from your code imports (lik
|
||||
|
||||
// Screenshot is already being captured in parallel above
|
||||
|
||||
const scrapeResponse = await fetch('/api/scrape-url-enhanced', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url })
|
||||
});
|
||||
let scrapeData;
|
||||
|
||||
if (!scrapeResponse.ok) {
|
||||
throw new Error('Failed to scrape website');
|
||||
}
|
||||
|
||||
const scrapeData = await scrapeResponse.json();
|
||||
|
||||
if (!scrapeData.success) {
|
||||
throw new Error(scrapeData.error || 'Failed to scrape website');
|
||||
// Check if we have pre-scraped markdown content from search results
|
||||
const storedMarkdown = sessionStorage.getItem('siteMarkdown');
|
||||
if (storedMarkdown) {
|
||||
// Use the pre-scraped content
|
||||
scrapeData = {
|
||||
success: true,
|
||||
content: storedMarkdown,
|
||||
title: new URL(url).hostname,
|
||||
source: 'search-result'
|
||||
};
|
||||
sessionStorage.removeItem('siteMarkdown'); // Clear after use
|
||||
addChatMessage('Using cached content from search results...', 'system');
|
||||
} else {
|
||||
// Perform fresh scraping
|
||||
const scrapeResponse = await fetch('/api/scrape-url-enhanced', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url })
|
||||
});
|
||||
|
||||
if (!scrapeResponse.ok) {
|
||||
throw new Error('Failed to scrape website');
|
||||
}
|
||||
|
||||
scrapeData = await scrapeResponse.json();
|
||||
|
||||
if (!scrapeData.success) {
|
||||
throw new Error(scrapeData.error || 'Failed to scrape website');
|
||||
}
|
||||
}
|
||||
|
||||
setUrlStatus(['Website scraped successfully!', 'Generating React app...']);
|
||||
@@ -3580,6 +3598,7 @@ Focus on the key sections and content, making it clean and modern.`;
|
||||
onChange={setAiChatInput}
|
||||
onSubmit={sendChatMessage}
|
||||
placeholder="Describe what you want to build..."
|
||||
showSearchFeatures={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+342
-17
@@ -28,11 +28,25 @@ import HeaderDropdownWrapper from "@/components/shared/header/Dropdown/Wrapper/W
|
||||
import GithubIcon from "@/components/shared/header/Github/_svg/GithubIcon";
|
||||
import ButtonUI from "@/components/ui/shadcn/button"
|
||||
|
||||
interface SearchResult {
|
||||
url: string;
|
||||
title: string;
|
||||
description: string;
|
||||
screenshot: string | null;
|
||||
markdown: string;
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const [url, setUrl] = useState<string>("");
|
||||
const [selectedStyle, setSelectedStyle] = useState<string>("1");
|
||||
const [selectedModel, setSelectedModel] = useState<string>(appConfig.ai.defaultModel);
|
||||
const [isValidUrl, setIsValidUrl] = useState<boolean>(false);
|
||||
const [showSearchTiles, setShowSearchTiles] = useState<boolean>(false);
|
||||
const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
|
||||
const [isSearching, setIsSearching] = useState<boolean>(false);
|
||||
const [hasSearched, setHasSearched] = useState<boolean>(false);
|
||||
const [isFadingOut, setIsFadingOut] = useState<boolean>(false);
|
||||
const [showSelectMessage, setShowSelectMessage] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
|
||||
// Simple URL validation
|
||||
@@ -43,6 +57,12 @@ export default function HomePage() {
|
||||
return urlPattern.test(urlString.toLowerCase());
|
||||
};
|
||||
|
||||
// Check if input is a URL (contains a dot)
|
||||
const isURL = (str: string): boolean => {
|
||||
const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/.*)?$/;
|
||||
return urlPattern.test(str.trim());
|
||||
};
|
||||
|
||||
const styles = [
|
||||
{ id: "1", name: "Glassmorphism", description: "Frosted glass effect" },
|
||||
{ id: "2", name: "Neumorphism", description: "Soft 3D shadows" },
|
||||
@@ -59,20 +79,117 @@ export default function HomePage() {
|
||||
name: appConfig.ai.modelDisplayNames[model] || model,
|
||||
}));
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!url.trim()) {
|
||||
toast.error("Please enter a URL");
|
||||
const handleSubmit = async (selectedResult?: SearchResult) => {
|
||||
const inputValue = url.trim();
|
||||
|
||||
if (!inputValue) {
|
||||
toast.error("Please enter a URL or search term");
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the configuration in sessionStorage
|
||||
sessionStorage.setItem('targetUrl', url);
|
||||
sessionStorage.setItem('selectedStyle', selectedStyle);
|
||||
sessionStorage.setItem('selectedModel', selectedModel);
|
||||
sessionStorage.setItem('autoStart', 'true'); // Set flag to auto-start generation
|
||||
// If it's a search result being selected, fade out and redirect
|
||||
if (selectedResult) {
|
||||
setIsFadingOut(true);
|
||||
|
||||
// Wait for fade animation
|
||||
setTimeout(() => {
|
||||
sessionStorage.setItem('targetUrl', selectedResult.url);
|
||||
sessionStorage.setItem('selectedStyle', selectedStyle);
|
||||
sessionStorage.setItem('selectedModel', selectedModel);
|
||||
sessionStorage.setItem('autoStart', 'true');
|
||||
if (selectedResult.markdown) {
|
||||
sessionStorage.setItem('siteMarkdown', selectedResult.markdown);
|
||||
}
|
||||
router.push('/generation');
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
// Redirect to the generation interface
|
||||
router.push('/generation');
|
||||
// If it's a URL, go straight to generation
|
||||
if (isURL(inputValue)) {
|
||||
sessionStorage.setItem('targetUrl', inputValue);
|
||||
sessionStorage.setItem('selectedStyle', selectedStyle);
|
||||
sessionStorage.setItem('selectedModel', selectedModel);
|
||||
sessionStorage.setItem('autoStart', 'true');
|
||||
router.push('/generation');
|
||||
} else {
|
||||
// It's a search term, fade out if results exist, then search
|
||||
if (hasSearched && searchResults.length > 0) {
|
||||
setIsFadingOut(true);
|
||||
|
||||
setTimeout(async () => {
|
||||
setSearchResults([]);
|
||||
setIsFadingOut(false);
|
||||
setShowSelectMessage(true);
|
||||
|
||||
// Perform new search
|
||||
await performSearch(inputValue);
|
||||
setHasSearched(true);
|
||||
setShowSearchTiles(true);
|
||||
setShowSelectMessage(false);
|
||||
|
||||
// Smooth scroll to carousel
|
||||
setTimeout(() => {
|
||||
const carouselSection = document.querySelector('.carousel-section');
|
||||
if (carouselSection) {
|
||||
carouselSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, 300);
|
||||
}, 500);
|
||||
} else {
|
||||
// First search, no fade needed
|
||||
setShowSelectMessage(true);
|
||||
setIsSearching(true);
|
||||
setHasSearched(true);
|
||||
setShowSearchTiles(true);
|
||||
|
||||
// Scroll to carousel area immediately
|
||||
setTimeout(() => {
|
||||
const carouselSection = document.querySelector('.carousel-section');
|
||||
if (carouselSection) {
|
||||
carouselSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, 100);
|
||||
|
||||
await performSearch(inputValue);
|
||||
setShowSelectMessage(false);
|
||||
setIsSearching(false);
|
||||
|
||||
// Smooth scroll to carousel
|
||||
setTimeout(() => {
|
||||
const carouselSection = document.querySelector('.carousel-section');
|
||||
if (carouselSection) {
|
||||
carouselSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Perform search when user types
|
||||
const performSearch = async (searchQuery: string) => {
|
||||
if (!searchQuery.trim() || isURL(searchQuery)) {
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSearching(true);
|
||||
try {
|
||||
const response = await fetch('/api/search', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query: searchQuery }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setSearchResults(data.results || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
} finally {
|
||||
setIsSearching(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -155,33 +272,83 @@ export default function HomePage() {
|
||||
>
|
||||
|
||||
<div className="p-16 flex gap-12 items-center w-full relative bg-white rounded-20">
|
||||
<Globe />
|
||||
{isURL(url) ? (
|
||||
// Scrape icon for URLs
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-40 flex-shrink-0"
|
||||
>
|
||||
<rect x="3" y="3" width="14" height="14" rx="2" stroke="currentColor" strokeWidth="1.5"/>
|
||||
<path d="M7 10L9 12L13 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
) : (
|
||||
// Search icon for search terms
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-40 flex-shrink-0"
|
||||
>
|
||||
<circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" strokeWidth="1.5"/>
|
||||
<path d="M12.5 12.5L16.5 16.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
|
||||
</svg>
|
||||
)}
|
||||
<input
|
||||
className="flex-1 bg-transparent text-body-input text-accent-black placeholder:text-black-alpha-48 focus:outline-none focus:ring-0 focus:border-transparent"
|
||||
placeholder="example.com"
|
||||
placeholder="Enter URL or search term..."
|
||||
type="text"
|
||||
value={url}
|
||||
disabled={isSearching}
|
||||
onChange={(e) => {
|
||||
setUrl(e.target.value);
|
||||
setIsValidUrl(validateUrl(e.target.value));
|
||||
const value = e.target.value;
|
||||
setUrl(value);
|
||||
setIsValidUrl(validateUrl(value));
|
||||
// Reset search state when input changes
|
||||
if (value.trim() === "") {
|
||||
setShowSearchTiles(false);
|
||||
setHasSearched(false);
|
||||
setSearchResults([]);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
if (e.key === "Enter" && !isSearching) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (url.trim() && !isURL(url)) {
|
||||
setShowSearchTiles(true);
|
||||
}
|
||||
}}
|
||||
onBlur={() => {
|
||||
setTimeout(() => setShowSearchTiles(false), 200);
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
if (!isSearching) {
|
||||
handleSubmit();
|
||||
}
|
||||
}}
|
||||
className={isSearching ? 'pointer-events-none' : ''}
|
||||
>
|
||||
<HeroInputSubmitButton dirty={url.length > 0} />
|
||||
<HeroInputSubmitButton
|
||||
dirty={url.length > 0}
|
||||
buttonText={isURL(url) ? 'Scrape Site' : 'Search'}
|
||||
disabled={isSearching}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Options Section - Only show when valid URL */}
|
||||
<div className={`overflow-hidden transition-all duration-500 ease-in-out ${
|
||||
isValidUrl ? 'max-h-[200px] opacity-100' : 'max-h-0 opacity-0'
|
||||
@@ -255,7 +422,165 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Full-width oval carousel section */}
|
||||
{showSearchTiles && hasSearched && (
|
||||
<section className={`carousel-section relative w-full overflow-hidden mt-32 mb-32 transition-opacity duration-500 ${
|
||||
isFadingOut ? 'opacity-0' : 'opacity-100'
|
||||
}`}>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-gray-50/50 to-white rounded-[50%] transform scale-x-150 -translate-y-24" />
|
||||
|
||||
{isSearching ? (
|
||||
// Loading state with animated skeletons
|
||||
<div className="relative h-[250px] overflow-hidden">
|
||||
{/* Edge fade overlays */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[120px] z-20 pointer-events-none" style={{background: 'linear-gradient(to right, white 0%, white 20%, transparent 100%)'}} />
|
||||
<div className="absolute right-0 top-0 bottom-0 w-[120px] z-20 pointer-events-none" style={{background: 'linear-gradient(to left, white 0%, white 20%, transparent 100%)'}} />
|
||||
|
||||
<div className="flex gap-12 py-4 px-8">
|
||||
{[0, 1, 2, 3, 4].map((index) => (
|
||||
<div
|
||||
key={`loading-${index}`}
|
||||
className="flex-shrink-0 w-[400px] h-[240px] rounded-24 overflow-hidden border-2 border-gray-200/30 bg-white relative"
|
||||
style={{
|
||||
animation: `fadeIn 0.5s ease-out forwards`,
|
||||
animationDelay: `${index * 100}ms`,
|
||||
opacity: 0
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 skeleton-shimmer">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-gray-100 via-gray-50 to-gray-100 skeleton-gradient" />
|
||||
</div>
|
||||
|
||||
{/* Fake browser UI */}
|
||||
<div className="absolute top-0 left-0 right-0 h-8 bg-gray-100 border-b border-gray-200/50 flex items-center px-3 gap-2">
|
||||
<div className="flex gap-1">
|
||||
<div className="w-2 h-2 rounded-full bg-gray-300" />
|
||||
<div className="w-2 h-2 rounded-full bg-gray-300" />
|
||||
<div className="w-2 h-2 rounded-full bg-gray-300" />
|
||||
</div>
|
||||
<div className="flex-1 h-4 bg-gray-200 rounded-sm mx-4" />
|
||||
</div>
|
||||
|
||||
{/* Content skeleton */}
|
||||
<div className="p-4 mt-8">
|
||||
<div className="h-6 bg-gray-200 rounded w-3/4 mb-3" />
|
||||
<div className="h-4 bg-gray-150 rounded w-full mb-2" />
|
||||
<div className="h-4 bg-gray-150 rounded w-5/6 mb-2" />
|
||||
<div className="h-4 bg-gray-150 rounded w-4/6" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Loading text */}
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className="bg-white/95 backdrop-blur-sm rounded-full px-6 py-3 shadow-lg border border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex gap-1">
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700">Searching for sites...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : searchResults.length > 0 ? (
|
||||
// Actual results
|
||||
<div className="relative h-[250px] overflow-hidden">
|
||||
{/* Edge fade overlays */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[120px] z-20 pointer-events-none" style={{background: 'linear-gradient(to right, white 0%, white 20%, transparent 100%)'}} />
|
||||
<div className="absolute right-0 top-0 bottom-0 w-[120px] z-20 pointer-events-none" style={{background: 'linear-gradient(to left, white 0%, white 20%, transparent 100%)'}} />
|
||||
|
||||
<div className="carousel-container absolute left-0 flex gap-12 py-4">
|
||||
{/* Duplicate results for infinite scroll */}
|
||||
{[...searchResults, ...searchResults].map((result, index) => (
|
||||
<button
|
||||
key={`${result.url}-${index}`}
|
||||
onClick={() => handleSubmit(result)}
|
||||
className="flex-shrink-0 w-[400px] h-[240px] rounded-24 overflow-hidden border-2 border-gray-200/50 hover:border-orange-500 transition-all duration-300 hover:shadow-2xl hover:scale-[1.02] cursor-pointer bg-white"
|
||||
>
|
||||
{result.screenshot ? (
|
||||
<img
|
||||
src={result.screenshot}
|
||||
alt={result.title}
|
||||
className="w-full h-full object-cover object-top"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-gray-100 to-gray-50" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// No results state
|
||||
<div className="relative h-[250px] flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg className="w-16 h-16 mx-auto text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500 text-lg">No results found</p>
|
||||
<p className="text-gray-400 text-sm mt-1">Try a different search term</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes infiniteScroll {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
animation: infiniteScroll 30s linear infinite;
|
||||
}
|
||||
|
||||
.carousel-container:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.skeleton-shimmer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton-gradient {
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
`}</style>
|
||||
</HeaderProvider>
|
||||
);
|
||||
}
|
||||
+104
-17
@@ -8,6 +8,13 @@ interface HeroInputProps {
|
||||
onSubmit: () => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
showSearchFeatures?: boolean;
|
||||
}
|
||||
|
||||
function isURL(str: string): boolean {
|
||||
// Check if string contains a dot and looks like a URL
|
||||
const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/.*)?$/;
|
||||
return urlPattern.test(str.trim());
|
||||
}
|
||||
|
||||
export default function HeroInput({
|
||||
@@ -15,10 +22,13 @@ export default function HeroInput({
|
||||
onChange,
|
||||
onSubmit,
|
||||
placeholder = "Describe what you want to build...",
|
||||
className = ""
|
||||
className = "",
|
||||
showSearchFeatures = true
|
||||
}: HeroInputProps) {
|
||||
// const [isFocused, setIsFocused] = useState(false); // Reserved for future focus effects
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const [showTiles, setShowTiles] = useState(false);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const isURLInput = showSearchFeatures ? isURL(value) : false;
|
||||
|
||||
// Reset textarea height when value changes (especially when cleared)
|
||||
useEffect(() => {
|
||||
@@ -26,7 +36,14 @@ export default function HeroInput({
|
||||
textareaRef.current.style.height = 'auto';
|
||||
textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
// Show tiles animation for search terms (only if search features are enabled)
|
||||
if (showSearchFeatures && value.trim() && !isURL(value) && isFocused) {
|
||||
setShowTiles(true);
|
||||
} else {
|
||||
setShowTiles(false);
|
||||
}
|
||||
}, [value, isFocused]);
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
@@ -44,20 +61,52 @@ export default function HeroInput({
|
||||
<div className="relative">
|
||||
<label className="p-16 flex gap-8 items-start w-full relative border-b border-black-alpha-5">
|
||||
<div className="mt-2 flex-shrink-0">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-40"
|
||||
>
|
||||
<circle cx="10" cy="10" r="9.5" stroke="currentColor"/>
|
||||
<path d="M10 2C10 5.5 10 14.5 10 18" stroke="currentColor" strokeLinecap="round"/>
|
||||
<path d="M2 10C5.5 10 14.5 10 18 10" stroke="currentColor" strokeLinecap="round"/>
|
||||
<ellipse cx="10" cy="10" rx="3.5" ry="9.5" stroke="currentColor"/>
|
||||
<ellipse cx="10" cy="10" rx="6" ry="9.5" stroke="currentColor"/>
|
||||
</svg>
|
||||
{showSearchFeatures ? (
|
||||
isURLInput ? (
|
||||
// Link icon for URLs
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-40"
|
||||
>
|
||||
<path d="M9 11L11 9M11 9L15 5M11 9L5 15M15 5L13 3M15 5L17 7" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M7 13L5 15L3 13" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M13 7L15 5L17 7" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
) : (
|
||||
// Search icon for search terms
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-40"
|
||||
>
|
||||
<circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" strokeWidth="1.5"/>
|
||||
<path d="M12.5 12.5L16.5 16.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
|
||||
</svg>
|
||||
)
|
||||
) : (
|
||||
// Default globe icon for generation page
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-40"
|
||||
>
|
||||
<circle cx="10" cy="10" r="9.5" stroke="currentColor"/>
|
||||
<path d="M10 2C10 5.5 10 14.5 10 18" stroke="currentColor" strokeLinecap="round"/>
|
||||
<path d="M2 10C5.5 10 14.5 10 18 10" stroke="currentColor" strokeLinecap="round"/>
|
||||
<ellipse cx="10" cy="10" rx="3.5" ry="9.5" stroke="currentColor"/>
|
||||
<ellipse cx="10" cy="10" rx="6" ry="9.5" stroke="currentColor"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
@@ -115,6 +164,44 @@ export default function HeroInput({
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Animated tiles for search results */}
|
||||
{showTiles && (
|
||||
<div className="mt-16 grid grid-cols-3 gap-12 px-16">
|
||||
{[0, 1, 2].map((index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="tile-animation relative aspect-[4/3] bg-black-alpha-4 rounded-12 overflow-hidden"
|
||||
style={{
|
||||
animationDelay: `${index * 100}ms`
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-black-alpha-4 to-transparent" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-8 h-8 bg-black-alpha-8 rounded-full animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes tileSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tile-animation {
|
||||
animation: tileSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,11 +6,20 @@ import Button from "@/components/shared/button/Button";
|
||||
|
||||
export default function HeroInputSubmitButton({
|
||||
dirty,
|
||||
buttonText = "Re-imagine Site",
|
||||
disabled = false,
|
||||
}: {
|
||||
dirty: boolean;
|
||||
buttonText?: string;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Button className="hero-input-button !p-0 bg-heat-100 hover:bg-heat-200" size="large" variant="primary">
|
||||
<Button
|
||||
className={`hero-input-button !p-0 ${disabled ? 'bg-gray-400 hover:bg-gray-400 cursor-wait' : 'bg-heat-100 hover:bg-heat-200'}`}
|
||||
size="large"
|
||||
variant="primary"
|
||||
disabled={disabled}
|
||||
>
|
||||
<AnimatedWidth>
|
||||
<AnimatePresence initial={false} mode="popLayout">
|
||||
<motion.div
|
||||
@@ -20,7 +29,9 @@ export default function HeroInputSubmitButton({
|
||||
key={dirty ? "dirty" : "clean"}
|
||||
>
|
||||
{dirty ? (
|
||||
<div className="py-8 w-126 text-center text-white">Re-imagine Site</div>
|
||||
<div className="py-8 w-126 text-center text-white">
|
||||
{buttonText}
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-60 py-8 flex-center">
|
||||
<ArrowRight />
|
||||
|
||||
@@ -59,10 +59,20 @@ export default function SidebarInput({ onSubmit, disabled = false }: SidebarInpu
|
||||
<div className="p-4 border-b border-gray-100">
|
||||
{/* URL Input */}
|
||||
<div className="flex gap-3 items-center">
|
||||
<Globe />
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-40 flex-shrink-0"
|
||||
>
|
||||
<rect x="3" y="3" width="14" height="14" rx="2" stroke="currentColor" strokeWidth="1.5"/>
|
||||
<path d="M7 10L9 12L13 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
<input
|
||||
className="flex-1 bg-transparent text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none"
|
||||
placeholder="example.com"
|
||||
placeholder="Enter URL to scrape..."
|
||||
type="text"
|
||||
value={url}
|
||||
disabled={disabled}
|
||||
@@ -150,7 +160,7 @@ export default function SidebarInput({ onSubmit, disabled = false }: SidebarInpu
|
||||
}
|
||||
`}
|
||||
>
|
||||
{disabled ? 'Generating...' : 'Generate Website'}
|
||||
{disabled ? 'Scraping...' : 'Scrape Site'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,6 @@ export class SandboxFactory {
|
||||
// Use environment variable if provider not specified
|
||||
const selectedProvider = provider || process.env.SANDBOX_PROVIDER || 'e2b';
|
||||
|
||||
console.log(`[SandboxFactory] Creating ${selectedProvider} provider`);
|
||||
|
||||
switch (selectedProvider.toLowerCase()) {
|
||||
case 'e2b':
|
||||
|
||||
@@ -11,7 +11,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
*/
|
||||
async reconnect(sandboxId: string): Promise<boolean> {
|
||||
try {
|
||||
console.log(`[E2BProvider] Attempting to reconnect to sandbox ${sandboxId}...`);
|
||||
|
||||
// Try to connect to existing sandbox
|
||||
// Note: E2B SDK doesn't directly support reconnection, but we can try to recreate
|
||||
@@ -27,11 +26,9 @@ export class E2BProvider extends SandboxProvider {
|
||||
|
||||
async createSandbox(): Promise<SandboxInfo> {
|
||||
try {
|
||||
console.log('[E2BProvider] Creating sandbox...');
|
||||
|
||||
// Kill existing sandbox if any
|
||||
if (this.sandbox) {
|
||||
console.log('[E2BProvider] Killing existing sandbox...');
|
||||
try {
|
||||
await this.sandbox.kill();
|
||||
} catch (e) {
|
||||
@@ -44,7 +41,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
this.existingFiles.clear();
|
||||
|
||||
// Create base sandbox
|
||||
console.log(`[E2BProvider] Creating E2B sandbox with ${appConfig.e2b.timeoutMinutes} minute timeout...`);
|
||||
this.sandbox = await Sandbox.create({
|
||||
apiKey: this.config.e2b?.apiKey || process.env.E2B_API_KEY,
|
||||
timeoutMs: this.config.e2b?.timeoutMs || appConfig.e2b.timeoutMs
|
||||
@@ -53,8 +49,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
const sandboxId = (this.sandbox as any).sandboxId || Date.now().toString();
|
||||
const host = (this.sandbox as any).getHost(appConfig.e2b.vitePort);
|
||||
|
||||
console.log(`[E2BProvider] Sandbox created: ${sandboxId}`);
|
||||
console.log(`[E2BProvider] Sandbox host: ${host}`);
|
||||
|
||||
this.sandboxInfo = {
|
||||
sandboxId,
|
||||
@@ -66,7 +60,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
// Set extended timeout on the sandbox instance if method available
|
||||
if (typeof this.sandbox.setTimeout === 'function') {
|
||||
this.sandbox.setTimeout(appConfig.e2b.timeoutMs);
|
||||
console.log(`[E2BProvider] Set sandbox timeout to ${appConfig.e2b.timeoutMinutes} minutes`);
|
||||
}
|
||||
|
||||
return this.sandboxInfo;
|
||||
@@ -82,7 +75,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
throw new Error('No active sandbox');
|
||||
}
|
||||
|
||||
console.log(`[E2BProvider] Executing: ${command}`);
|
||||
|
||||
const result = await this.sandbox.runCode(`
|
||||
import subprocess
|
||||
@@ -125,7 +117,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
if ((this.sandbox as any).files && typeof (this.sandbox as any).files.write === 'function') {
|
||||
// Use the files.write API if available
|
||||
await (this.sandbox as any).files.write(fullPath, Buffer.from(content));
|
||||
console.log(`[E2BProvider] Written file using files.write: ${fullPath}`);
|
||||
} else {
|
||||
// Fallback to Python code execution
|
||||
await this.sandbox.runCode(`
|
||||
@@ -140,7 +131,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
f.write(${JSON.stringify(content)})
|
||||
print(f"✓ Written: ${fullPath}")
|
||||
`);
|
||||
console.log(`[E2BProvider] Written file using Python: ${fullPath}`);
|
||||
}
|
||||
|
||||
this.existingFiles.add(path);
|
||||
@@ -200,7 +190,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
const packageList = packages.join(' ');
|
||||
const flags = appConfig.packages.useLegacyPeerDeps ? '--legacy-peer-deps' : '';
|
||||
|
||||
console.log(`[E2BProvider] Installing packages: ${packageList}`);
|
||||
|
||||
const result = await this.sandbox.runCode(`
|
||||
import subprocess
|
||||
@@ -244,7 +233,6 @@ export class E2BProvider extends SandboxProvider {
|
||||
throw new Error('No active sandbox');
|
||||
}
|
||||
|
||||
console.log('[E2BProvider] Setting up Vite React app...');
|
||||
|
||||
// Write all files in a single Python script
|
||||
const setupScript = `
|
||||
@@ -405,7 +393,6 @@ print('\\nAll files created successfully!')
|
||||
await this.sandbox.runCode(setupScript);
|
||||
|
||||
// Install dependencies
|
||||
console.log('[E2BProvider] Installing dependencies...');
|
||||
await this.sandbox.runCode(`
|
||||
import subprocess
|
||||
|
||||
@@ -424,7 +411,6 @@ else:
|
||||
`);
|
||||
|
||||
// Start Vite dev server
|
||||
console.log('[E2BProvider] Starting Vite dev server...');
|
||||
await this.sandbox.runCode(`
|
||||
import subprocess
|
||||
import os
|
||||
@@ -470,7 +456,6 @@ print('Waiting for server to be ready...')
|
||||
throw new Error('No active sandbox');
|
||||
}
|
||||
|
||||
console.log('[E2BProvider] Restarting Vite server...');
|
||||
|
||||
await this.sandbox.runCode(`
|
||||
import subprocess
|
||||
@@ -511,7 +496,6 @@ print(f'✓ Vite restarted with PID: {process.pid}')
|
||||
|
||||
async terminate(): Promise<void> {
|
||||
if (this.sandbox) {
|
||||
console.log('[E2BProvider] Terminating sandbox...');
|
||||
try {
|
||||
await this.sandbox.kill();
|
||||
} catch (e) {
|
||||
|
||||
@@ -7,11 +7,9 @@ export class VercelProvider extends SandboxProvider {
|
||||
|
||||
async createSandbox(): Promise<SandboxInfo> {
|
||||
try {
|
||||
console.log('[VercelProvider] Creating sandbox...');
|
||||
|
||||
// Kill existing sandbox if any
|
||||
if (this.sandbox) {
|
||||
console.log('[VercelProvider] Stopping existing sandbox...');
|
||||
try {
|
||||
await this.sandbox.stop();
|
||||
} catch (e) {
|
||||
@@ -24,7 +22,6 @@ export class VercelProvider extends SandboxProvider {
|
||||
this.existingFiles.clear();
|
||||
|
||||
// Create Vercel sandbox
|
||||
console.log('[VercelProvider] Creating Vercel sandbox...');
|
||||
|
||||
const sandboxConfig: any = {
|
||||
timeout: 300000, // 5 minutes in ms
|
||||
@@ -34,21 +31,13 @@ export class VercelProvider extends SandboxProvider {
|
||||
|
||||
// Add authentication based on environment variables
|
||||
if (process.env.VERCEL_TOKEN && process.env.VERCEL_TEAM_ID && process.env.VERCEL_PROJECT_ID) {
|
||||
console.log('[VercelProvider] Using personal access token authentication');
|
||||
console.log('[VercelProvider] Team ID:', process.env.VERCEL_TEAM_ID);
|
||||
console.log('[VercelProvider] Project ID:', process.env.VERCEL_PROJECT_ID);
|
||||
console.log('[VercelProvider] Token present:', !!process.env.VERCEL_TOKEN);
|
||||
sandboxConfig.teamId = process.env.VERCEL_TEAM_ID;
|
||||
sandboxConfig.projectId = process.env.VERCEL_PROJECT_ID;
|
||||
sandboxConfig.token = process.env.VERCEL_TOKEN;
|
||||
} else if (process.env.VERCEL_OIDC_TOKEN) {
|
||||
console.log('[VercelProvider] Using OIDC token authentication');
|
||||
} else {
|
||||
console.log('[VercelProvider] No authentication found - relying on default Vercel authentication');
|
||||
console.log('[VercelProvider] Available env vars:', Object.keys(process.env).filter(k => k.startsWith('VERCEL')));
|
||||
}
|
||||
|
||||
console.log('[VercelProvider] Creating sandbox with config:', {
|
||||
runtime: sandboxConfig.runtime,
|
||||
timeout: sandboxConfig.timeout,
|
||||
ports: sandboxConfig.ports,
|
||||
@@ -60,14 +49,12 @@ export class VercelProvider extends SandboxProvider {
|
||||
this.sandbox = await Sandbox.create(sandboxConfig);
|
||||
|
||||
const sandboxId = this.sandbox.sandboxId;
|
||||
console.log(`[VercelProvider] Sandbox created successfully:`, {
|
||||
sandboxId: sandboxId,
|
||||
status: this.sandbox.status
|
||||
});
|
||||
|
||||
// Get the sandbox URL using the correct Vercel Sandbox API
|
||||
const sandboxUrl = this.sandbox.domain(5173);
|
||||
console.log(`[VercelProvider] Sandbox URL: ${sandboxUrl}`);
|
||||
|
||||
this.sandboxInfo = {
|
||||
sandboxId,
|
||||
@@ -89,7 +76,6 @@ export class VercelProvider extends SandboxProvider {
|
||||
throw new Error('No active sandbox');
|
||||
}
|
||||
|
||||
console.log(`[VercelProvider] Executing: ${command}`);
|
||||
|
||||
try {
|
||||
// Parse command into cmd and args (matching PR syntax)
|
||||
@@ -129,7 +115,6 @@ export class VercelProvider extends SandboxProvider {
|
||||
// Vercel sandbox default working directory is /vercel/sandbox
|
||||
const fullPath = path.startsWith('/') ? path : `/vercel/sandbox/${path}`;
|
||||
|
||||
console.log(`[VercelProvider] writeFile called:`, {
|
||||
originalPath: path,
|
||||
fullPath: fullPath,
|
||||
contentLength: content.length,
|
||||
@@ -141,7 +126,6 @@ export class VercelProvider extends SandboxProvider {
|
||||
// Based on Vercel SDK docs, writeFiles expects path and Buffer content
|
||||
try {
|
||||
const buffer = Buffer.from(content, 'utf-8');
|
||||
console.log(`[VercelProvider] Calling sandbox.writeFiles with:`, {
|
||||
path: fullPath,
|
||||
bufferLength: buffer.length,
|
||||
isBuffer: Buffer.isBuffer(buffer)
|
||||
@@ -152,7 +136,6 @@ export class VercelProvider extends SandboxProvider {
|
||||
content: buffer
|
||||
}]);
|
||||
|
||||
console.log(`[VercelProvider] Successfully written: ${fullPath}`);
|
||||
this.existingFiles.add(path);
|
||||
} catch (writeError: any) {
|
||||
// Log detailed error information
|
||||
@@ -165,17 +148,14 @@ export class VercelProvider extends SandboxProvider {
|
||||
});
|
||||
|
||||
// Fallback to command-based approach if writeFiles fails
|
||||
console.log(`[VercelProvider] Attempting command fallback for ${fullPath}`);
|
||||
|
||||
// Ensure directory exists
|
||||
const dir = fullPath.substring(0, fullPath.lastIndexOf('/'));
|
||||
if (dir) {
|
||||
console.log(`[VercelProvider] Creating directory: ${dir}`);
|
||||
const mkdirResult = await this.sandbox.runCommand({
|
||||
cmd: 'mkdir',
|
||||
args: ['-p', dir]
|
||||
});
|
||||
console.log(`[VercelProvider] mkdir result:`, {
|
||||
exitCode: mkdirResult.exitCode,
|
||||
stdout: mkdirResult.stdout,
|
||||
stderr: mkdirResult.stderr
|
||||
@@ -190,20 +170,17 @@ export class VercelProvider extends SandboxProvider {
|
||||
.replace(/`/g, '\\`')
|
||||
.replace(/\n/g, '\\n');
|
||||
|
||||
console.log(`[VercelProvider] Writing file via echo command to: ${fullPath}`);
|
||||
const writeResult = await this.sandbox.runCommand({
|
||||
cmd: 'sh',
|
||||
args: ['-c', `echo "${escapedContent}" > "${fullPath}"`]
|
||||
});
|
||||
|
||||
console.log(`[VercelProvider] Write command result:`, {
|
||||
exitCode: writeResult.exitCode,
|
||||
stdout: writeResult.stdout,
|
||||
stderr: writeResult.stderr
|
||||
});
|
||||
|
||||
if (writeResult.exitCode === 0) {
|
||||
console.log(`[VercelProvider] Successfully written via command: ${fullPath}`);
|
||||
this.existingFiles.add(path);
|
||||
} else {
|
||||
throw new Error(`Failed to write file via command: ${writeResult.stderr}`);
|
||||
@@ -256,7 +233,6 @@ export class VercelProvider extends SandboxProvider {
|
||||
|
||||
const flags = process.env.NPM_FLAGS || '';
|
||||
|
||||
console.log(`[VercelProvider] Installing packages: ${packages.join(' ')}`);
|
||||
|
||||
// Build args array
|
||||
const args = ['install'];
|
||||
@@ -289,19 +265,15 @@ export class VercelProvider extends SandboxProvider {
|
||||
throw new Error('No active sandbox');
|
||||
}
|
||||
|
||||
console.log('[VercelProvider] Setting up Vite React app...');
|
||||
console.log('[VercelProvider] Sandbox details:', {
|
||||
sandboxId: this.sandbox.sandboxId,
|
||||
status: this.sandbox.status
|
||||
});
|
||||
|
||||
// Create directory structure
|
||||
console.log('[VercelProvider] Creating directory structure...');
|
||||
const mkdirResult = await this.sandbox.runCommand({
|
||||
cmd: 'mkdir',
|
||||
args: ['-p', '/vercel/sandbox/src']
|
||||
});
|
||||
console.log('[VercelProvider] mkdir /vercel/sandbox/src result:', {
|
||||
exitCode: mkdirResult.exitCode,
|
||||
stdout: mkdirResult.stdout,
|
||||
stderr: mkdirResult.stderr
|
||||
@@ -330,7 +302,6 @@ export class VercelProvider extends SandboxProvider {
|
||||
}
|
||||
};
|
||||
|
||||
console.log('[VercelProvider] Writing package.json...');
|
||||
await this.writeFile('package.json', JSON.stringify(packageJson, null, 2));
|
||||
|
||||
// Create vite.config.js
|
||||
@@ -442,11 +413,8 @@ body {
|
||||
|
||||
await this.writeFile('src/index.css', indexCss);
|
||||
|
||||
console.log('[VercelProvider] All files created successfully!');
|
||||
|
||||
// Install dependencies
|
||||
console.log('[VercelProvider] Installing dependencies...');
|
||||
console.log('[VercelProvider] Running npm install in /vercel/sandbox');
|
||||
try {
|
||||
const installResult = await this.sandbox.runCommand({
|
||||
cmd: 'npm',
|
||||
@@ -454,14 +422,12 @@ body {
|
||||
cwd: '/vercel/sandbox'
|
||||
});
|
||||
|
||||
console.log('[VercelProvider] npm install result:', {
|
||||
exitCode: installResult.exitCode,
|
||||
stdout: typeof installResult.stdout === 'function' ? 'function' : installResult.stdout,
|
||||
stderr: typeof installResult.stderr === 'function' ? 'function' : installResult.stderr
|
||||
});
|
||||
|
||||
if (installResult.exitCode === 0) {
|
||||
console.log('[VercelProvider] Dependencies installed successfully');
|
||||
} else {
|
||||
console.warn('[VercelProvider] npm install had issues:', installResult.stderr);
|
||||
}
|
||||
@@ -472,7 +438,6 @@ body {
|
||||
responseText: error?.text
|
||||
});
|
||||
// Try alternative approach - run as shell command
|
||||
console.log('[VercelProvider] Trying alternative npm install approach...');
|
||||
try {
|
||||
const altResult = await this.sandbox.runCommand({
|
||||
cmd: 'sh',
|
||||
@@ -480,7 +445,6 @@ body {
|
||||
cwd: '/vercel/sandbox'
|
||||
});
|
||||
if (altResult.exitCode === 0) {
|
||||
console.log('[VercelProvider] Dependencies installed successfully (alternative method)');
|
||||
} else {
|
||||
console.warn('[VercelProvider] Alternative npm install also had issues:', altResult.stderr);
|
||||
}
|
||||
@@ -491,7 +455,6 @@ body {
|
||||
}
|
||||
|
||||
// Start Vite dev server
|
||||
console.log('[VercelProvider] Starting Vite dev server...');
|
||||
|
||||
// Kill any existing Vite processes
|
||||
await this.sandbox.runCommand({
|
||||
@@ -507,7 +470,6 @@ body {
|
||||
cwd: '/vercel/sandbox'
|
||||
});
|
||||
|
||||
console.log('[VercelProvider] Vite dev server started');
|
||||
|
||||
// Wait for Vite to be ready
|
||||
await new Promise(resolve => setTimeout(resolve, 7000));
|
||||
@@ -528,7 +490,6 @@ body {
|
||||
throw new Error('No active sandbox');
|
||||
}
|
||||
|
||||
console.log('[VercelProvider] Restarting Vite server...');
|
||||
|
||||
// Kill existing Vite process
|
||||
await this.sandbox.runCommand({
|
||||
@@ -547,7 +508,6 @@ body {
|
||||
cwd: '/vercel/sandbox'
|
||||
});
|
||||
|
||||
console.log('[VercelProvider] Vite restarted');
|
||||
|
||||
// Wait for Vite to be ready
|
||||
await new Promise(resolve => setTimeout(resolve, 7000));
|
||||
@@ -563,7 +523,6 @@ body {
|
||||
|
||||
async terminate(): Promise<void> {
|
||||
if (this.sandbox) {
|
||||
console.log('[VercelProvider] Terminating sandbox...');
|
||||
try {
|
||||
await this.sandbox.stop();
|
||||
} catch (e) {
|
||||
|
||||
@@ -24,7 +24,6 @@ class SandboxManager {
|
||||
}
|
||||
|
||||
// Try to reconnect to existing sandbox
|
||||
console.log(`[SandboxManager] Attempting to reconnect to sandbox ${sandboxId}`);
|
||||
|
||||
try {
|
||||
const provider = SandboxFactory.create();
|
||||
@@ -41,14 +40,12 @@ class SandboxManager {
|
||||
lastAccessed: new Date()
|
||||
});
|
||||
this.activeSandboxId = sandboxId;
|
||||
console.log(`[SandboxManager] Successfully reconnected to sandbox ${sandboxId}`);
|
||||
return provider;
|
||||
}
|
||||
}
|
||||
|
||||
// For Vercel or if reconnection failed, return the new provider
|
||||
// The caller will need to handle creating a new sandbox
|
||||
console.log(`[SandboxManager] Could not reconnect to ${sandboxId}, returning new provider`);
|
||||
return provider;
|
||||
} catch (error) {
|
||||
console.error(`[SandboxManager] Error reconnecting to sandbox ${sandboxId}:`, error);
|
||||
@@ -67,7 +64,6 @@ class SandboxManager {
|
||||
lastAccessed: new Date()
|
||||
});
|
||||
this.activeSandboxId = sandboxId;
|
||||
console.log(`[SandboxManager] Registered sandbox ${sandboxId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -160,7 +156,6 @@ class SandboxManager {
|
||||
|
||||
for (const id of toDelete) {
|
||||
await this.terminateSandbox(id);
|
||||
console.log(`[SandboxManager] Cleaned up old sandbox ${id}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user