add studio
This commit is contained in:
parent
24c4817c5f
commit
c45c8785a9
@ -1,41 +1,10 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useAuth } from '@/hooks/useAuth'
|
|
||||||
import { Header } from '@/components/layout/Header'
|
import { Header } from '@/components/layout/Header'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Zap, Target, Layers, BarChart3, Check } from 'lucide-react'
|
import { Zap, Target, Layers, BarChart3, Check } from 'lucide-react'
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const { user, loading } = useAuth()
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (user) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen">
|
|
||||||
<Header />
|
|
||||||
<div className="max-w-4xl mx-auto px-4 py-12 text-center">
|
|
||||||
<h1 className="text-3xl font-bold text-foreground mb-4">
|
|
||||||
Welcome to your Prompt Studio!
|
|
||||||
</h1>
|
|
||||||
<p className="text-muted-foreground mb-8">
|
|
||||||
Start building, testing, and managing your AI prompts.
|
|
||||||
</p>
|
|
||||||
<Button size="lg">
|
|
||||||
Create Your First Prompt
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen">
|
<div className="min-h-screen">
|
||||||
<Header />
|
<Header />
|
||||||
@ -52,7 +21,7 @@ export default function Home() {
|
|||||||
Version control, collaboration tools, and analytics in one professional platform.
|
Version control, collaboration tools, and analytics in one professional platform.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
<Button size="lg" onClick={() => window.location.href = '/signup'}>
|
<Button size="lg" onClick={() => window.location.href = '/studio'}>
|
||||||
Start Building
|
Start Building
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" size="lg">
|
<Button variant="outline" size="lg">
|
||||||
@ -208,4 +177,4 @@ export default function Home() {
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
324
src/app/studio/page.tsx
Normal file
324
src/app/studio/page.tsx
Normal file
@ -0,0 +1,324 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useAuth } from '@/hooks/useAuth'
|
||||||
|
import { Header } from '@/components/layout/Header'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import { Textarea } from '@/components/ui/textarea'
|
||||||
|
import { LoadingSpinner } from '@/components/ui/loading-spinner'
|
||||||
|
import {
|
||||||
|
Play,
|
||||||
|
Save,
|
||||||
|
Copy,
|
||||||
|
Settings,
|
||||||
|
FileText,
|
||||||
|
Folder,
|
||||||
|
Plus,
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
MoreHorizontal,
|
||||||
|
Zap,
|
||||||
|
History
|
||||||
|
} from 'lucide-react'
|
||||||
|
|
||||||
|
export default function StudioPage() {
|
||||||
|
const { user, loading } = useAuth()
|
||||||
|
const [promptContent, setPromptContent] = useState('')
|
||||||
|
const [promptTitle, setPromptTitle] = useState('Untitled Prompt')
|
||||||
|
const [testResult, setTestResult] = useState('')
|
||||||
|
const [isRunning, setIsRunning] = useState(false)
|
||||||
|
const [isSaving, setIsSaving] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Redirect to sign in if not authenticated
|
||||||
|
if (!loading && !user) {
|
||||||
|
window.location.href = '/signin'
|
||||||
|
}
|
||||||
|
}, [user, loading])
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<LoadingSpinner size="lg" />
|
||||||
|
<p className="mt-4 text-muted-foreground">Loading Studio...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-2xl font-bold text-foreground mb-4">Authentication Required</h1>
|
||||||
|
<p className="text-muted-foreground mb-6">Please sign in to access the Prompt Studio</p>
|
||||||
|
<Button onClick={() => window.location.href = '/signin'}>
|
||||||
|
Sign In
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRunPrompt = async () => {
|
||||||
|
if (!promptContent.trim()) return
|
||||||
|
|
||||||
|
setIsRunning(true)
|
||||||
|
setTestResult('')
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Simulate API call for now
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||||
|
|
||||||
|
// Mock response
|
||||||
|
setTestResult(`Test result for: "${promptContent.substring(0, 50)}${promptContent.length > 50 ? '...' : ''}"\n\nThis is a simulated response from the AI model. In a real implementation, this would be the actual output from your chosen AI provider (OpenAI, Anthropic, etc.).\n\nResponse quality: Good\nToken usage: 150 tokens\nLatency: 1.2s`)
|
||||||
|
} catch (error) {
|
||||||
|
setTestResult('Error: Failed to run prompt. Please try again.')
|
||||||
|
} finally {
|
||||||
|
setIsRunning(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSavePrompt = async () => {
|
||||||
|
setIsSaving(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Simulate save operation
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||||
|
|
||||||
|
// In real implementation, save to database via API
|
||||||
|
console.log('Saving prompt:', { title: promptTitle, content: promptContent })
|
||||||
|
|
||||||
|
// Show success feedback (you could add a toast notification here)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to save prompt:', error)
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyToClipboard = (text: string) => {
|
||||||
|
navigator.clipboard.writeText(text)
|
||||||
|
// You could add a toast notification here
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<div className="flex h-[calc(100vh-4rem)]">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="w-80 border-r bg-muted/30 p-4 overflow-y-auto">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-foreground">Prompt Studio</h2>
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
New
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search */}
|
||||||
|
<div className="relative mb-4">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder="Search prompts..."
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Filter className="h-4 w-4 mr-1" />
|
||||||
|
Filter
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Folder className="h-4 w-4 mr-1" />
|
||||||
|
All
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Prompt List */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="p-3 rounded-lg bg-accent border cursor-pointer hover:bg-accent/80">
|
||||||
|
<h3 className="font-medium text-sm text-foreground truncate">Welcome Message Generator</h3>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">Generate personalized welcome messages...</p>
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<span className="text-xs text-muted-foreground">2 hours ago</span>
|
||||||
|
<span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">v1.2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 rounded-lg border cursor-pointer hover:bg-accent/50">
|
||||||
|
<h3 className="font-medium text-sm text-foreground truncate">Code Review Assistant</h3>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">Help review code and suggest improvements...</p>
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<span className="text-xs text-muted-foreground">1 day ago</span>
|
||||||
|
<span className="text-xs bg-secondary text-secondary-foreground px-2 py-0.5 rounded">v2.1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 rounded-lg border cursor-pointer hover:bg-accent/50">
|
||||||
|
<h3 className="font-medium text-sm text-foreground truncate">Email Marketing Copy</h3>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">Create compelling email subject lines...</p>
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<span className="text-xs text-muted-foreground">3 days ago</span>
|
||||||
|
<span className="text-xs bg-secondary text-secondary-foreground px-2 py-0.5 rounded">v1.0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="flex-1 flex flex-col">
|
||||||
|
{/* Toolbar */}
|
||||||
|
<div className="border-b p-4 flex items-center justify-between bg-background">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Input
|
||||||
|
value={promptTitle}
|
||||||
|
onChange={(e) => setPromptTitle(e.target.value)}
|
||||||
|
className="text-lg font-semibold border-none p-0 h-auto bg-transparent focus-visible:ring-0"
|
||||||
|
placeholder="Prompt title..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => copyToClipboard(promptContent)}
|
||||||
|
disabled={!promptContent}
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4 mr-2" />
|
||||||
|
Copy
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={handleSavePrompt}
|
||||||
|
disabled={!promptContent || isSaving}
|
||||||
|
>
|
||||||
|
{isSaving ? (
|
||||||
|
<LoadingSpinner size="sm" className="mr-2" />
|
||||||
|
) : (
|
||||||
|
<Save className="h-4 w-4 mr-2" />
|
||||||
|
)}
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={handleRunPrompt}
|
||||||
|
disabled={!promptContent || isRunning}
|
||||||
|
>
|
||||||
|
{isRunning ? (
|
||||||
|
<LoadingSpinner size="sm" className="mr-2" />
|
||||||
|
) : (
|
||||||
|
<Play className="h-4 w-4 mr-2" />
|
||||||
|
)}
|
||||||
|
Run Test
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
<Settings className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Editor */}
|
||||||
|
<div className="flex-1 flex">
|
||||||
|
{/* Prompt Editor */}
|
||||||
|
<div className="flex-1 p-6">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<Label htmlFor="prompt-editor" className="text-base font-medium">
|
||||||
|
Prompt Content
|
||||||
|
</Label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button size="sm" variant="ghost">
|
||||||
|
<History className="h-4 w-4 mr-1" />
|
||||||
|
History
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="ghost">
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Textarea
|
||||||
|
id="prompt-editor"
|
||||||
|
value={promptContent}
|
||||||
|
onChange={(e) => setPromptContent(e.target.value)}
|
||||||
|
placeholder="Enter your prompt here...
|
||||||
|
|
||||||
|
For example:
|
||||||
|
You are a helpful assistant that helps users write professional emails.
|
||||||
|
|
||||||
|
Given the following context:
|
||||||
|
- Recipient: {{recipient}}
|
||||||
|
- Purpose: {{purpose}}
|
||||||
|
- Tone: {{tone}}
|
||||||
|
|
||||||
|
Please write a professional email that..."
|
||||||
|
className="flex-1 min-h-[400px] resize-none font-mono text-sm"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between mt-4 text-sm text-muted-foreground">
|
||||||
|
<span>{promptContent.length} characters</span>
|
||||||
|
<span>~{Math.ceil(promptContent.length / 4)} tokens</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Results Panel */}
|
||||||
|
<div className="w-1/2 border-l p-6">
|
||||||
|
<div className="h-full flex flex-col">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<Label className="text-base font-medium">Test Results</Label>
|
||||||
|
{testResult && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => copyToClipboard(testResult)}
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4 mr-1" />
|
||||||
|
Copy
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 bg-muted/30 rounded-lg p-4 overflow-y-auto">
|
||||||
|
{isRunning ? (
|
||||||
|
<div className="flex items-center justify-center h-full">
|
||||||
|
<div className="text-center">
|
||||||
|
<LoadingSpinner size="lg" />
|
||||||
|
<p className="mt-4 text-muted-foreground">Running your prompt...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : testResult ? (
|
||||||
|
<pre className="whitespace-pre-wrap text-sm text-foreground font-mono">
|
||||||
|
{testResult}
|
||||||
|
</pre>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center h-full text-center">
|
||||||
|
<div>
|
||||||
|
<Zap className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Click "Run Test" to see your prompt results
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user