[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/prompt-history.tsx" "use client" import { formatDistanceToNow } from "date-fns" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" interface HistoryItem { original: string enhanced: string timestamp: Date } interface PromptHistoryProps { history: HistoryItem[] onSelect: (item: HistoryItem) => void } export function PromptHistory({ history, onSelect }: PromptHistoryProps) { if (history.length === 0) { return ( Prompt History Your enhanced prompts will be saved here

No history yet

Enhanced prompts will appear here after you use the enhancer

) } return ( Prompt History Your previous enhanced prompts

{history.map((item, index) => ( onSelect(item)}>

{item.original.substring(0, 60)} {item.original.length > 60 ? "..." : ""} {formatDistanceToNow(item.timestamp, { addSuffix: true })}

))}

) } [V0_FILE]typescriptreact:file="components/enhancement-settings.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/components/ui/use-toast" export function EnhancementSettings() { const [settings, setSettings] = useState({ specificityLevel: 75, includeExamples: true, addStructure: true, clarifyRequirements: true, optimizeForModel: "gpt-4o", focusOnPerformance: false, suggestTesting: true, }) const { toast } = useToast() const handleSaveSettings = () => { // In a real app, you would save these settings to localStorage or a backend toast({ title: "Settings saved", description: "Your enhancement preferences have been updated.", }) } return ( Enhancement Settings Customize how your prompts are enhanced

Specificity Level {settings.specificityLevel}%

setSettings({ ...settings, specificityLevel: value[0] })} />

Higher values will produce more detailed and specific prompts

Include Code Examples

Add example snippets to clarify intent

setSettings({ ...settings, includeExamples: checked })} />

Add Structure

Organize prompts into clear sections

setSettings({ ...settings, addStructure: checked })} />

Clarify Requirements

Identify and expand on ambiguous requirements

setSettings({ ...settings, clarifyRequirements: checked })} />

Focus on Performance

Emphasize performance considerations in prompts

setSettings({ ...settings, focusOnPerformance: checked })} />

Suggest Testing Approaches

Include testing considerations in enhanced prompts

setSettings({ ...settings, suggestTesting: checked })} />

Optimize For Model

Tailor prompts for specific AI model capabilities

) } [V0_FILE]typescriptreact:file="lib/enhance-prompt.ts" import { generateText } from "ai" import { openai } from "@ai-sdk/openai" /** * Enhances a coding prompt to make it more effective for code generation * * @param originalPrompt The user's original prompt * @returns Enhanced prompt optimized for code generation */ export async function enhancePrompt(originalPrompt: string): Promise { try { const { text } = await generateText({ model: openai("gpt-4o"), system: `You are a prompt engineering expert specializing in coding prompts. Your task is to enhance user prompts to make them more effective for code generation. Follow these guidelines: 1. Add structure with clear sections (requirements, functionality, UI, etc.) 2. Improve specificity by adding technical details and constraints 3. Clarify ambiguous requirements 4. Add context for better code organization 5. Specify expected outputs and edge cases 6. Maintain the original intent of the prompt 7. Focus on making the prompt actionable for code generation 8. Do not add unnecessary verbosity`, prompt: `Enhance this coding prompt to make it more effective for generating high-quality code: "${originalPrompt}" Return only the enhanced prompt without explanations or additional text.`, }) return text.trim() } catch (error) { console.error("Error enhancing prompt:", error) throw new Error("Failed to enhance prompt") } } [V0_FILE]typescriptreact:file="lib/encryption.ts" /** * Utility functions for encrypting and decrypting sensitive data * using the Web Crypto API */ // Generate a random encryption key if one doesn't exist async function getEncryptionKey(): Promise { // Use a consistent salt for deriving the key const salt = new TextEncoder().encode("openai-api-key-manager-salt") // Create a device-specific key based on browser fingerprinting // This is a simplified approach - in production you might want more sophisticated fingerprinting const deviceInfo = [ navigator.userAgent, navigator.language, screen.colorDepth, screen.width + "x" + screen.height, ].join("|") // Convert device info to bytes const deviceBytes = new TextEncoder().encode(deviceInfo) // Derive a key using PBKDF2 const keyMaterial = await window.crypto.subtle.importKey("raw", deviceBytes, { name: "PBKDF2" }, false, ["deriveKey"]) // Derive the actual encryption key return window.crypto.subtle.deriveKey( { name: "PBKDF2", salt, iterations: 100000, hash: "SHA-256", }, keyMaterial, { name: "AES-GCM", length: 256 }, false, ["encrypt", "decrypt"], ) } /** * Encrypts a string using AES-GCM encryption * @param data The string to encrypt * @returns A base64-encoded encrypted string */ export async function encryptData(data: string): Promise { try { const key = await getEncryptionKey() // Generate a random initialization vector const iv = window.crypto.getRandomValues(new Uint8Array(12)) // Encrypt the data const encodedData = new TextEncoder().encode(data) const encryptedData = await window.crypto.subtle.encrypt( { name: "AES-GCM", iv, }, key, encodedData, ) // Combine the IV and encrypted data const result = new Uint8Array(iv.length + encryptedData.byteLength) result.set(iv) result.set(new Uint8Array(encryptedData), iv.length) // Convert to base64 for storage return btoa(String.fromCharCode(...result)) } catch (error) { console.error("Encryption error:", error) throw new Error("Failed to encrypt data") } } /** * Decrypts a previously encrypted string * @param encryptedData The base64-encoded encrypted string * @returns The decrypted string */ export async function decryptData(encryptedData: string): Promise { try { const key = await getEncryptionKey() // Convert from base64 const encryptedBytes = Uint8Array.from(atob(encryptedData), (c) => c.charCodeAt(0)) // Extract the IV (first 12 bytes) const iv = encryptedBytes.slice(0, 12) const data = encryptedBytes.slice(12) // Decrypt the data const decryptedData = await window.crypto.subtle.decrypt( { name: "AES-GCM", iv, }, key, data, ) // Convert the decrypted data back to a string return new TextDecoder().decode(decryptedData) } catch (error) { console.error("Decryption error:", error) throw new Error("Failed to decrypt data") } } [V0_FILE]typescriptreact:file="app/api/test-openai-key/route.ts" import { NextResponse } from "next/server" export async function POST(request: Request) { try { const { apiKey } = await request.json() if (!apiKey) { return NextResponse.json({ error: "API key is required" }, { status: 400 }) } // Test the API key with a minimal request to OpenAI const response = await fetch("https://api.openai.com/v1/models", { method: "GET", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, }) if (!response.ok) { const error = await response.json() return NextResponse.json({ error: error.error?.message || "Invalid API key" }, { status: 401 }) } // If we get here, the key is valid return NextResponse.json({ success: true }) } catch (error) { console.error("Error testing OpenAI API key:", error) return NextResponse.json({ error: "Failed to validate API key" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/enhance/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Sparkles, ArrowRight, RefreshCw, Lightbulb, History } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/components/ui/use-toast" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { decryptData } from "@/lib/encryption" import { PromptHistoryItem } from "@/components/prompt-history-item" import { PromptTips } from "@/components/prompt-tips" import { DiffView } from "@/components/diff-view" export default function EnhancePage() { const [originalPrompt, setOriginalPrompt] = useState("") const [enhancedPrompt, setEnhancedPrompt] = useState("") const [enhancementNotes, setEnhancementNotes] = useState([]) const [isEnhancing, setIsEnhancing] = useState(false) const [apiKey, setApiKey] = useState(null) const [history, setHistory] = useState>([]) const [selectedTab, setSelectedTab] = useState("enhance") const router = useRouter() const { toast } = useToast() // Check for API key on component mount useEffect(() => { const checkApiKey = async () => { try { const encryptedKey = localStorage.getItem("openai_api_key") if (!encryptedKey) { // Redirect to home if no API key is found router.push("/") return } // Decrypt and validate the API key const key = await decryptData(encryptedKey) // Test the API key const response = await fetch("/api/test-openai-key", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ apiKey: key }), }) if (!response.ok) { throw new Error("Invalid API key") } setApiKey(key) } catch (error) { console.error("API key validation error:", error) toast({ title: "Authentication Required", description: "Please provide a valid OpenAI API key to access this page.", variant: "destructive", }) router.push("/") } } checkApiKey() // Load history from localStorage const savedHistory = localStorage.getItem("prompt_history") if (savedHistory) { try { const parsedHistory = JSON.parse(savedHistory) setHistory( parsedHistory.map((item: any) => ({ ...item, timestamp: new Date(item.timestamp), })), ) } catch (e) { console.error("Error loading history:", e) } } }, [router, toast]) const enhancePrompt = async () => { if (!originalPrompt.trim() || !apiKey) { toast({ title: "Input Required", description: "Please enter a prompt to enhance.", variant: "destructive", }) return } setIsEnhancing(true) setEnhancedPrompt("") setEnhancementNotes([]) try { const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}`, }, body: JSON.stringify({ model: "gpt-4o", messages: [ { role: "system", content: `You are a prompt engineering expert. Analyze the user's prompt and provide an enhanced version that will produce better results. Return your response in the following JSON format: { "enhancedPrompt": "The improved prompt text", "notes": ["Note 1 about what was improved", "Note 2 about what was improved", ...] } Focus on making these improvements: 1. Add more specificity and detail 2. Clarify ambiguous instructions 3. Improve structure and organization 4. Add constraints and requirements 5. Specify the desired format and style 6. Remove unnecessary words or redundancies Your response must be valid JSON.`, }, { role: "user", content: originalPrompt, }, ], temperature: 0.7, }), }) if (!response.ok) { throw new Error(`Error: ${response.status}`) } const data = await response.json() const content = data.choices[0].message.content // Parse the JSON response try { const parsedResponse = JSON.parse(content) setEnhancedPrompt(parsedResponse.enhancedPrompt) setEnhancementNotes(parsedResponse.notes) // Add to history const newHistoryItem = { original: originalPrompt, enhanced: parsedResponse.enhancedPrompt, timestamp: new Date(), } const updatedHistory = [newHistoryItem, ...history] setHistory(updatedHistory) // Save to localStorage localStorage.setItem("prompt_history", JSON.stringify(updatedHistory.slice(0, 20))) } catch (e) { console.error("Error parsing response:", e) toast({ title: "Processing Error", description: "Failed to parse the enhancement response. Please try again.", variant: "destructive", }) } } catch (error) { console.error("Error enhancing prompt:", error) toast({ title: "Enhancement Failed", description: "Failed to enhance your prompt. Please check your API key and try again.", variant: "destructive", }) } finally { setIsEnhancing(false) } } const iterativeEnhance = async () => { if (!enhancedPrompt) { toast({ title: "No Enhanced Prompt", description: "Please enhance a prompt first before refining it further.", variant: "destructive", }) return } // Use the enhanced prompt as the new original prompt setOriginalPrompt(enhancedPrompt) setEnhancedPrompt("") setEnhancementNotes([]) // Automatically trigger enhancement after a short delay setTimeout(() => { enhancePrompt() }, 100) } const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text) toast({ title: "Copied to Clipboard", description: "The prompt has been copied to your clipboard.", }) } const loadFromHistory = (item: { original: string; enhanced: string }) => { setOriginalPrompt(item.original) setEnhancedPrompt(item.enhanced) setSelectedTab("enhance") } if (!apiKey) { return (

Authentication Required Please provide a valid OpenAI API key to access this page.

) } return (

Prompt Enhancement Studio

Analyze and improve your prompts for better results

Enhance History Tips & Examples

Original Prompt Enter your prompt to enhance

setOriginalPrompt(e.target.value)}
                />
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" onClick={() => setOriginalPrompt("")} disabled={!originalPrompt.trim()}>
                  Clear
                </Button>
                <Button onClick={enhancePrompt} disabled={isEnhancing || !originalPrompt.trim()}>
                  {isEnhancing ? (
                    <>
                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                      Enhancing...
                    </>
                  ) : (
                    <>
                      <Sparkles className="mr-2 h-4 w-4" />
                      Enhance Prompt
                    </>
                  )}
                </Button>
              </CardFooter>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Enhanced Prompt</CardTitle>
                <CardDescription>Improved version of your prompt</CardDescription>
              </CardHeader>
              <CardContent>
                <Textarea
                  placeholder="Your enhanced prompt will appear here..."
                  className="min-h-[200px]"
                  value={enhancedPrompt}
                  onChange={(e) => setEnhancedPrompt(e.target.value)}
                />
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" onClick={() => copyToClipboard(enhancedPrompt)} disabled={!enhancedPrompt}>
                  Copy
                </Button>
                <Button onClick={iterativeEnhance} disabled={!enhancedPrompt}>
                  <ArrowRight className="mr-2 h-4 w-4" />
                  Refine Further
                </Button>
              </CardFooter>
            </Card>
          </div>

{enhancedPrompt && (
            <>
              <Card>
                <CardHeader>
                  <CardTitle>Comparison View</CardTitle>
                  <CardDescription>See what changed in your prompt</CardDescription>
                </CardHeader>
                <CardContent>
                  <DiffView original={originalPrompt} enhanced={enhancedPrompt} />
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Enhancement Notes</CardTitle>
                  <CardDescription>What was improved in your prompt</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {enhancementNotes.map((note, index) => (
                      <li key={index} className="flex items-start">
                        <Badge variant="outline" className="mr-2 mt-0.5">
                          {index + 1}
                        </Badge>
                        <span>{note}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            </>
          )}
        </TabsContent>

<TabsContent value="history">
          <Card>
            <CardHeader>
              <CardTitle>Prompt History</CardTitle>
              <CardDescription>Your previously enhanced prompts</CardDescription>
            </CardHeader>
            <CardContent>
              {history.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  <History className="mx-auto h-12 w-12 opacity-20 mb-2" />
                  <p>No prompt history yet</p>
                  <p className="text-sm">Enhanced prompts will appear here</p>
                </div>
              ) : (
                <ScrollArea className="h-[500px] pr-4">
                  <div className="space-y-4">
                    {history.map((item, index) => (
                      <PromptHistoryItem key={index} item={item} onSelect={loadFromHistory} />
                    ))}
                  </div>
                </ScrollArea>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="tips">
          <PromptTips />
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/prompt-history-item.tsx"
"use client"

import type React from "react"

import { formatDistanceToNow } from "date-fns"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowUpRight, Copy } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"

interface PromptHistoryItemProps {
  item: {
    original: string
    enhanced: string
    timestamp: Date
  }
  onSelect: (item: { original: string; enhanced: string }) => void
}

export function PromptHistoryItem({ item, onSelect }: PromptHistoryItemProps) {
  const { toast } = useToast()

const copyToClipboard = (text: string, e: React.MouseEvent) => {
    e.stopPropagation()
    navigator.clipboard.writeText(text)
    toast({
      title: "Copied to Clipboard",
      description: "The prompt has been copied to your clipboard.",
    })
  }

return (
    <Card className="cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => onSelect(item)}>
      <CardHeader className="p-4 pb-2">
        <div className="flex justify-between items-center">
          <span className="text-sm text-muted-foreground">
            {formatDistanceToNow(item.timestamp, { addSuffix: true })}
          </span>
          <Button variant="ghost" size="sm" onClick={() => onSelect(item)}>
            <ArrowUpRight className="h-4 w-4" />
            <span className="sr-only">Load</span>
          </Button>
        </div>
      </CardHeader>
      <CardContent className="p-4 pt-0">
        <div className="space-y-3">
          <div>
            <div className="flex justify-between items-center mb-1">
              <span className="text-xs font-medium">Original</span>
              <Button
                variant="ghost"
                size="sm"
                className="h-6 w-6 p-0"
                onClick={(e) => copyToClipboard(item.original, e)}
              >
                <Copy className="h-3 w-3" />
                <span className="sr-only">Copy original</span>
              </Button>
            </div>
            <div className="text-sm line-clamp-2 text-muted-foreground">{item.original}</div>
          </div>

<div>
            <div className="flex justify-between items-center mb-1">
              <span className="text-xs font-medium">Enhanced</span>
              <Button
                variant="ghost"
                size="sm"
                className="h-6 w-6 p-0"
                onClick={(e) => copyToClipboard(item.enhanced, e)}
              >
                <Copy className="h-3 w-3" />
                <span className="sr-only">Copy enhanced</span>
              </Button>
            </div>
            <div className="text-sm line-clamp-2">{item.enhanced}</div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/diff-view.tsx"
"use client"

import { useState, useEffect } from "react"
import { diffWords } from "diff"
import { Card } from "@/components/ui/card"

interface DiffViewProps {
  original: string
  enhanced: string
}

export function DiffView({ original, enhanced }: DiffViewProps) {
  const [diff, setDiff] = useState<any[]>([])

useEffect(() => {
    if (original && enhanced) {
      const differences = diffWords(original, enhanced)
      setDiff(differences)
    }
  }, [original, enhanced])

return (
    <div className="space-y-4">
      <Card className="p-4 text-sm font-mono whitespace-pre-wrap">
        {diff.map((part, index) => {
          // Added text (in enhanced but not in original)
          if (part.added) {
            return (
              <span key={index} className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
                {part.value}
              </span>
            )
          }
          // Removed text (in original but not in enhanced)
          if (part.removed) {
            return (
              <span key={index} className="bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 line-through">
                {part.value}
              </span>
            )
          }
          // Unchanged text
          return <span key={index}>{part.value}</span>
        })}
      </Card>

<div className="flex text-xs text-muted-foreground">
        <div className="flex items-center mr-4">
          <span className="inline-block w-3 h-3 bg-green-100 dark:bg-green-900/30 mr-1"></span>
          <span>Added</span>
        </div>
        <div className="flex items-center">
          <span className="inline-block w-3 h-3 bg-red-100 dark:bg-red-900/30 mr-1"></span>
          <span>Removed</span>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/diff.d.ts"
declare module "diff" {
  export function diffWords(
    oldStr: string,
    newStr: string,
  ): Array<{
    value: string
    added?: boolean
    removed?: boolean
  }>
}

[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
"use client"

import * as React from "react"
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ className, children, ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleContent
    ref={ref}
    className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden"
    {...props}
  >
    {children}
  </CollapsiblePrimitive.CollapsibleContent>
))
CollapsibleContent.displayName = "CollapsibleContent"

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

[V0_FILE]typescriptreact:file="components/prompt-tips.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Button } from "@/components/ui/button"
import { Copy } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { InteractivePrinciplesGuide } from "@/components/interactive-principles-guide"

export function PromptTips() {
  const { toast } = useToast()

const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    toast({
      title: "Copied to Clipboard",
      description: "The example has been copied to your clipboard.",
    })
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Prompt Engineering Best Practices</CardTitle>
        <CardDescription>Learn how to craft effective prompts for better results</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="principles">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="principles">Principles</TabsTrigger>
            <TabsTrigger value="techniques">Techniques</TabsTrigger>
            <TabsTrigger value="examples">Examples</TabsTrigger>
          </TabsList>

<TabsContent value="techniques">
            <ScrollArea className="h-[500px] pr-4">
              <div className="space-y-6 py-4">
                <div>
                  <h3 className="text-lg font-medium">Role Prompting</h3>
                  <p className="text-muted-foreground mt-1">
                    Ask the model to assume a specific role or perspective. This helps frame the response in the context
                    of that role's expertise.
                  </p>
                  <div className="bg-muted p-3 rounded-md mt-2 text-sm">
                    <p>
                      <strong>Example:</strong> "As an experienced software architect, review this system design and
                      suggest improvements..."
                    </p>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-medium">Chain-of-Thought</h3>
                  <p className="text-muted-foreground mt-1">
                    Ask the model to work through a problem step by step. This is particularly useful for complex
                    reasoning tasks.
                  </p>
                  <div className="bg-muted p-3 rounded-md mt-2 text-sm">
                    <p>
                      <strong>Example:</strong> "Think through this problem step by step: How would you design a
                      scalable authentication system for a multi-tenant SaaS application?"
                    </p>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-medium">Few-Shot Learning</h3>
                  <p className="text-muted-foreground mt-1">
                    Provide a few examples of the input-output pairs you expect. This helps the model understand the
                    pattern you want it to follow.
                  </p>
                  <div className="bg-muted p-3 rounded-md mt-2 text-sm">
                    <p>
                      <strong>Example:</strong>
                    </p>
                    <p>Input: "Create a login form"</p>
                    <p>Output: [Detailed component with validation]</p>
                    <p>Input: "Build a navigation menu"</p>
                    <p>Output: [Responsive navigation component]</p>
                    <p>Now, input: "Design a user profile page"</p>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-medium">Persona-Based Prompting</h3>
                  <p className="text-muted-foreground mt-1">
                    Define a specific user persona that the model should target in its response. This helps tailor the
                    content to a specific audience.
                  </p>
                  <div className="bg-muted p-3 rounded-md mt-2 text-sm">
                    <p>
                      <strong>Example:</strong> "Create documentation for a REST API that will be used by junior
                      developers who are familiar with JavaScript but new to API integration."
                    </p>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-medium">Template Prompting</h3>
                  <p className="text-muted-foreground mt-1">
                    Use a consistent template structure for similar tasks. This helps maintain consistency across
                    multiple prompts.
                  </p>
                  <div className="bg-muted p-3 rounded-md mt-2 text-sm">
                    <p>
                      <strong>Example:</strong>
                    </p>
                    <p>Task: [Specific task]</p>
                    <p>Context: [Relevant background]</p>
                    <p>Requirements: [List of requirements]</p>
                    <p>Format: [Desired output format]</p>
                    <p>Constraints: [Any limitations]</p>
                  </div>
                </div>
              </div>
            </ScrollArea>
          </TabsContent>

<TabsContent value="examples">
            <ScrollArea className="h-[500px] pr-4">
              <div className="space-y-6 py-4">
                <Card className="border border-muted">
                  <CardHeader className="pb-2">
                    <div className="flex justify-between">
                      <CardTitle className="text-base">React Component Example</CardTitle>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-8 w-8 p-0"
                        onClick={() => copyToClipboard(reactComponentExample)}
                      >
                        <Copy className="h-4 w-4" />
                        <span className="sr-only">Copy</span>
                      </Button>
                    </div>
                    <CardDescription>Before and after enhancement</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div>
                        <h4 className="text-sm font-medium">Original Prompt:</h4>
                        <p className="text-sm text-muted-foreground mt-1 bg-muted p-2 rounded">
                          Create a dropdown menu component.
                        </p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium">Enhanced Prompt:</h4>
                        <p className="text-sm mt-1 bg-muted p-2 rounded">{reactComponentExample}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="border border-muted">
                  <CardHeader className="pb-2">
                    <div className="flex justify-between">
                      <CardTitle className="text-base">API Integration Example</CardTitle>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-8 w-8 p-0"
                        onClick={() => copyToClipboard(apiIntegrationExample)}
                      >
                        <Copy className="h-4 w-4" />
                        <span className="sr-only">Copy</span>
                      </Button>
                    </div>
                    <CardDescription>Before and after enhancement</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div>
                        <h4 className="text-sm font-medium">Original Prompt:</h4>
                        <p className="text-sm text-muted-foreground mt-1 bg-muted p-2 rounded">
                          Show me how to fetch data from an API.
                        </p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium">Enhanced Prompt:</h4>
                        <p className="text-sm mt-1 bg-muted p-2 rounded">{apiIntegrationExample}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="border border-muted">
                  <CardHeader className="pb-2">
                    <div className="flex justify-between">
                      <CardTitle className="text-base">Database Query Example</CardTitle>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-8 w-8 p-0"
                        onClick={() => copyToClipboard(databaseQueryExample)}
                      >
                        <Copy className="h-4 w-4" />
                        <span className="sr-only">Copy</span>
                      </Button>
                    </div>
                    <CardDescription>Before and after enhancement</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      <div>
                        <h4 className="text-sm font-medium">Original Prompt:</h4>
                        <p className="text-sm text-muted-foreground mt-1 bg-muted p-2 rounded">
                          Write a query to get user data.
                        </p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium">Enhanced Prompt:</h4>
                        <p className="text-sm mt-1 bg-muted p-2 rounded">{databaseQueryExample}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </ScrollArea>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}

// Example prompts for the Examples tab
const reactComponentExample = `Create a responsive dropdown menu component using React and Tailwind CSS with the following specifications:

1. FUNCTIONALITY:
  - The dropdown should toggle open/closed when clicking a trigger button
  - Include support for both hover and click interactions
  - Implement keyboard navigation (arrow keys, escape to close)
  - Add proper focus management for accessibility

2. VISUAL DESIGN:
  - Style using Tailwind CSS classes
  - Include a subtle animation for opening/closing
  - Support both light and dark mode
  - Add a small arrow/chevron indicator that rotates when open

3. COMPONENT STRUCTURE:
  - Create a reusable component that accepts custom menu items as children
  - Include TypeScript types/interfaces for all props
  - Implement proper event handling for clicks outside to close

4. ACCESSIBILITY:
  - Add appropriate ARIA attributes
  - Ensure keyboard navigability
  - Include proper focus management

Please provide the complete component code with comments explaining key implementation details.
`

const apiIntegrationExample = `I want to fetch data from the JSONPlaceholder API's /todos endpoint and display it in a React component. The component should:

1.  Fetch the data on component mount.
2.  Display a loading state while fetching.
3.  Handle potential errors gracefully (e.g., display an error message).
4.  Display the data in a simple list format.
5.  Use async/await for cleaner code.
6.  Include TypeScript types for the API response.

Please provide the complete React component code.
`

const databaseQueryExample = `I need a SQL query to retrieve all users from a "users" table who have a role of "admin" and whose last login was within the last 7 days. The table has the following columns:

-   id (INT, primary key)
-   username (VARCHAR)
-   email (VARCHAR)
-   password (VARCHAR)
-   role (VARCHAR)
-   last\_login (TIMESTAMP)
-   created\_at (TIMESTAMP)
-   updated\_at (TIMESTAMP)

The query should:

1.  Select all columns from the "users" table.
2.  Filter users by "role" = 'admin'.
3.  Filter users whose "last\_login" is within the last 7 days.
4.  Be compatible with PostgreSQL.

Please provide the SQL query.
`

[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isQuickEdit="true"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }

[V0_FILE]typescriptreact:file="package.json" isQuickEdit="true"
{
  "dependencies": {
    "diff": "^5.1.0",
    "date-fns": "^2.30.0",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-popover": "^1.0.7"
  }
}

[V0_FILE]typescriptreact:file="components/info-popover.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { HelpCircle } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

interface InfoPopoverProps {
  /**
   * The content to display in the popover
   */
  content: React.ReactNode
  /**
   * Optional title for the popover
   */
  title?: string
  /**
   * Optional description text below the title
   */
  description?: string
  /**
   * Optional CSS class for the trigger button
   */
  triggerClassName?: string
  /**
   * Optional CSS class for the popover content
   */
  contentClassName?: string
  /**
   * Optional icon to use instead of the default HelpCircle
   */
  icon?: React.ReactNode
  /**
   * Optional position for the popover
   */
  position?: "top" | "right" | "bottom" | "left"
  /**
   * Optional size for the icon
   */
  iconSize?: "sm" | "md" | "lg"
  /**
   * Optional width for the popover content
   */
  width?: "auto" | "sm" | "md" | "lg" | "xl"
  /**
   * Whether to show the popover on hover (in addition to click)
   */
  showOnHover?: boolean
  /**
   * Optional ID for accessibility
   */
  id?: string
  /**
   * Optional aria-label for the trigger button
   */
  ariaLabel?: string
}

export function InfoPopover({
  content,
  title,
  description,
  triggerClassName,
  contentClassName,
  icon,
  position = "right",
  iconSize = "md",
  width = "md",
  showOnHover = true,
  id,
  ariaLabel = "More information",
}: InfoPopoverProps) {
  const [isOpen, setIsOpen] = useState(false)

// Map iconSize to actual size classes
  const iconSizeClasses = {
    sm: "h-4 w-4",
    md: "h-5 w-5",
    lg: "h-6 w-6",
  }

// Map width to actual width classes
  const widthClasses = {
    auto: "w-auto",
    sm: "w-60",
    md: "w-80",
    lg: "w-96",
    xl: "w-[30rem]",
  }

// Map position to align and side values
  const positionProps = {
    top: { align: "center" as const, side: "top" as const },
    right: { align: "start" as const, side: "right" as const },
    bottom: { align: "center" as const, side: "bottom" as const },
    left: { align: "start" as const, side: "left" as const },
  }

// Handle mouse enter/leave for hover functionality
  const handleMouseEnter = () => {
    if (showOnHover) {
      setIsOpen(true)
    }
  }

const handleMouseLeave = () => {
    if (showOnHover) {
      setIsOpen(false)
    }
  }

return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <div className="inline-block" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        <PopoverTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className={cn(
              "rounded-full p-0 hover:bg-muted/80 focus-visible:ring-1 focus-visible:ring-ring",
              isOpen && "bg-muted text-primary",
              triggerClassName,
            )}
            id={id}
            aria-label={ariaLabel}
          >
            {icon || <HelpCircle className={iconSizeClasses[iconSize]} />}
          </Button>
        </PopoverTrigger>
      </div>
      <PopoverContent
        className={cn("p-0 shadow-md", widthClasses[width], contentClassName)}
        align={positionProps[position].align}
        side={positionProps[position].side}
        sideOffset={8}
      >
        <div className="space-y-2 p-4">
          {title && <h4 className="font-medium">{title}</h4>}
          {description && <p className="text-sm text-muted-foreground">{description}</p>}
          <div className={cn(!title && !description && "mt-0", "mt-2")}>{content}</div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

[V0_FILE]typescriptreact:file="app/info-popover-demo/page.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { InfoPopover } from "@/components/info-popover"
import { AlertCircle, Info, HelpCircle, BookOpen } from "lucide-react"
import Image from "next/image"

export default function InfoPopoverDemo() {
  return (
    <div className="container mx-auto py-10 px-4 space-y-10">
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold">Info Popover Component</h1>
        <p className="text-muted-foreground">A reusable component for displaying helpful information in popovers</p>
      </div>

<div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Basic Usage</CardTitle>
            <CardDescription>Simple text popover with default settings</CardDescription>
          </CardHeader>
          <CardContent className="flex items-center gap-2">
            <span>Need help with this feature?</span>
            <InfoPopover
              content={
                <p className="text-sm">
                  This is a basic info popover that provides additional context when users need help.
                </p>
              }
              title="Help Information"
              description="Here's some helpful information about this feature."
            />
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Custom Icons</CardTitle>
            <CardDescription>Using different icons for different contexts</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-wrap items-center gap-4">
            <div className="flex items-center gap-1">
              <span>Info</span>
              <InfoPopover
                icon={<Info className="h-5 w-5" />}
                content={<p className="text-sm">Informational message about a feature.</p>}
                title="Information"
              />
            </div>
            <div className="flex items-center gap-1">
              <span>Warning</span>
              <InfoPopover
                icon={<AlertCircle className="h-5 w-5 text-amber-500" />}
                content={<p className="text-sm">Warning about potential issues.</p>}
                title="Warning"
                triggerClassName="text-amber-500 hover:text-amber-600"
              />
            </div>
            <div className="flex items-center gap-1">
              <span>Help</span>
              <InfoPopover
                icon={<HelpCircle className="h-5 w-5 text-blue-500" />}
                content={<p className="text-sm">Help and guidance for users.</p>}
                title="Help"
                triggerClassName="text-blue-500 hover:text-blue-600"
              />
            </div>
            <div className="flex items-center gap-1">
              <span>Docs</span>
              <InfoPopover
                icon={<BookOpen className="h-5 w-5 text-green-500" />}
                content={<p className="text-sm">Documentation and reference materials.</p>}
                title="Documentation"
                triggerClassName="text-green-500 hover:text-green-600"
              />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Different Positions</CardTitle>
            <CardDescription>Popovers can appear in different positions</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-wrap justify-center items-center gap-8 py-8">
            <InfoPopover
              content={<p className="text-sm">Popover appears above the icon</p>}
              title="Top Position"
              position="top"
            />
            <InfoPopover
              content={<p className="text-sm">Popover appears to the right of the icon</p>}
              title="Right Position"
              position="right"
            />
            <InfoPopover
              content={<p className="text-sm">Popover appears below the icon</p>}
              title="Bottom Position"
              position="bottom"
            />
            <InfoPopover
              content={<p className="text-sm">Popover appears to the left of the icon</p>}
              title="Left Position"
              position="left"
            />
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Different Sizes</CardTitle>
            <CardDescription>Icons and popovers in various sizes</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-wrap items-center gap-6">
            <div className="flex items-center gap-1">
              <span>Small</span>
              <InfoPopover
                content={<p className="text-sm">Small icon and narrow popover</p>}
                iconSize="sm"
                width="sm"
              />
            </div>
            <div className="flex items-center gap-1">
              <span>Medium</span>
              <InfoPopover
                content={<p className="text-sm">Medium icon and standard popover</p>}
                iconSize="md"
                width="md"
              />
            </div>
            <div className="flex items-center gap-1">
              <span>Large</span>
              <InfoPopover content={<p className="text-sm">Large icon and wide popover</p>} iconSize="lg" width="lg" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Rich Content</CardTitle>
            <CardDescription>Popovers can contain various types of content</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center gap-2">
              <span>With image and links</span>
              <InfoPopover
                content={
                  <div className="space-y-3">
                    <div className="aspect-video relative overflow-hidden rounded-md">
                      <Image
                        src="/placeholder.svg?height=200&width=400"
                        alt="Example image"
                        width={400}
                        height={200}
                        className="object-cover"
                      />
                    </div>
                    <p className="text-sm">This popover contains an image and links.</p>
                    <div className="text-sm text-blue-500 hover:underline">
                      <a href="#" onClick={(e) => e.preventDefault()}>
                        Learn more
                      </a>
                    </div>
                  </div>
                }
                title="Rich Content Example"
                width="lg"
              />
            </div>

<div className="flex items-center gap-2">
              <span>With list and code</span>
              <InfoPopover
                content={
                  <div className="space-y-3">
                    <p className="text-sm">Key features:</p>
                    <ul className="text-sm list-disc pl-5 space-y-1">
                      <li>Customizable appearance</li>
                      <li>Multiple positioning options</li>
                      <li>Support for rich content</li>
                    </ul>
                    <div className="bg-muted p-2 rounded text-xs font-mono">
                      {"<InfoPopover content={<p>Hello world</p>} />"}
                    </div>
                  </div>
                }
                title="Advanced Usage"
                width="lg"
              />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Form Integration</CardTitle>
            <CardDescription>Using popovers to explain form fields</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <label htmlFor="api-key" className="text-sm font-medium">
                    API Key
                  </label>
                  <InfoPopover
                    content={
                      <p className="text-sm">
                        Your API key is a secret identifier that authenticates your requests. Keep it confidential and
                        never share it publicly.
                      </p>
                    }
                    title="About API Keys"
                    iconSize="sm"
                  />
                </div>
                <input
                  id="api-key"
                  type="password"
                  placeholder="Enter your API key"
                  className="w-full px-3 py-2 border rounded-md text-sm"
                />
              </div>

<div className="space-y-2">
                <div className="flex items-center gap-2">
                  <label htmlFor="model" className="text-sm font-medium">
                    AI Model
                  </label>
                  <InfoPopover
                    content={
                      <div className="space-y-2">
                        <p className="text-sm">Different models have different capabilities and pricing:</p>
                        <ul className="text-sm list-disc pl-5 space-y-1">
                          <li>
                            <strong>GPT-4o:</strong> Most capable, best for complex tasks
                          </li>
                          <li>
                            <strong>GPT-3.5:</strong> Faster and more cost-effective
                          </li>
                        </ul>
                      </div>
                    }
                    title="Model Selection"
                    iconSize="sm"
                  />
                </div>
                <select id="model" className="w-full px-3 py-2 border rounded-md text-sm">
                  <option value="gpt-4o">GPT-4o</option>
                  <option value="gpt-3.5">GPT-3.5 Turbo</option>
                </select>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]javascript:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // DeDevs custom colors
        dedevs: {
          pink: "#f300a8",
          "pink-light": "#ff4dc1",
          "pink-dark": "#c00086",
          cyan: "#00d3f9",
          "cyan-light": "#4de2ff",
          "cyan-dark": "#00a7c6",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      backgroundImage: {
        "dedevs-gradient": "linear-gradient(to right, #f300a8, #00d3f9)",
      },
    },
  },
  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
}

[V0_FILE]typescriptreact:file="app/header-demo/page.tsx"
export default function HeaderDemo() {
  return (
    <div className="container mx-auto py-10 px-4 space-y-10">
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold text-dedevs-gradient">DeDevs Prompter Header</h1>
        <p className="text-muted-foreground">A responsive header component with vibrant DeDevs branding</p>
      </div>

<div className="space-y-6">
        <div className="prose dark:prose-invert max-w-none">
          <h2>Color Scheme</h2>
          <p>The header uses a vibrant color scheme with the following primary colors:</p>
          <div className="flex flex-wrap gap-4 not-prose my-6">
            <div className="flex flex-col items-center">
              <div className="w-20 h-20 rounded-md bg-dedevs-pink"></div>
              <span className="mt-2 text-sm font-mono">#f300a8</span>
            </div>
            <div className="flex flex-col items-center">
              <div className="w-20 h-20 rounded-md bg-dedevs-cyan"></div>
              <span className="mt-2 text-sm font-mono">#00d3f9</span>
            </div>
            <div className="flex flex-col items-center">
              <div className="w-20 h-20 rounded-md bg-gradient-to-r from-dedevs-pink to-dedevs-cyan"></div>
              <span className="mt-2 text-sm font-mono">Gradient</span>
            </div>
          </div>

<h2>Header Features</h2>
          <ul>
            <li>Responsive design that adapts to all screen sizes</li>
            <li>Vibrant color scheme with magenta-to-cyan gradient</li>
            <li>Mobile-friendly navigation with slide-out menu</li>
            <li>Active link highlighting</li>
            <li>Dark mode support with theme toggle</li>
            <li>Scroll-aware styling (header changes on scroll)</li>
            <li>Accessible with proper ARIA attributes</li>
          </ul>

<h2>Usage Instructions</h2>
          <p>
            The header component is designed to be placed at the top of your application layout. It automatically
            handles responsive behavior and theme switching.
          </p>

<pre className="bg-muted p-4 rounded-md overflow-x-auto">
            <code>{`import { SiteHeader } from "@/components/site-header"

export default function Layout({ children }) {
  return (
    <>
      <SiteHeader />
      <main>{children}</main>
    </>
  )
}`}</code>
          </pre>

<h2>Custom Utility Classes</h2>
          <p>The following utility classes are available for using the DeDevs color scheme in your application:</p>
          <ul>
            <li>
              <code>text-dedevs-gradient</code> - Applies the gradient to text
            </li>
            <li>
              <code>btn-dedevs-gradient</code> - Creates a gradient button
            </li>
            <li>
              <code>bg-dedevs-pink</code>, <code>bg-dedevs-cyan</code> - Solid background colors
            </li>
            <li>
              <code>from-dedevs-pink</code>, <code>to-dedevs-cyan</code> - For custom gradients
            </li>
          </ul>

<div className="not-prose my-6 flex flex-wrap gap-4">
            <button className="px-4 py-2 rounded-md btn-dedevs-gradient">Gradient Button</button>
            <div className="px-4 py-2 rounded-md bg-white dark:bg-gray-800 border">
              <span className="text-dedevs-gradient font-bold">Gradient Text</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/dedevs-button.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        gradient:
          "bg-gradient-to-r from-dedevs-pink to-dedevs-cyan text-white hover:from-dedevs-pink-dark hover:to-dedevs-cyan-dark",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const DeDevsButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
  },
)
DeDevsButton.displayName = "DeDevsButton"

export { DeDevsButton, buttonVariants }

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 322 100% 47.8%;
    --primary-foreground: 210 40% 98%;

--secondary: 190 100% 48.8%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 322 100% 20%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 322 100% 47.8%;

--radius: 0.5rem;
  }  
  
  /* Dark mode styles are kept for reference but won't be used without the theme toggle */
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 322 100% 47.8%;
    --primary-foreground: 210 40% 98%;

--secondary: 190 100% 48.8%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 322 100% 20%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 322 100% 47.8%;
  }

/* Previously base */
  .light {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 322 100% 47.8%;
    --primary-foreground: 210 40% 98%;

--secondary: 190 100% 48.8%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 322 100% 95%;
    --accent-foreground: 322 100% 47.8%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 322 100% 47.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

@layer utilities {
  .animate-collapsible-down {
    animation: collapsible-down 0.2s ease-out;
  }
  .animate-collapsible-up {
    animation: collapsible-up 0.2s ease-out;
  }
}

/* Custom button styles with DeDevs gradient */
.btn-dedevs-gradient {
  @apply bg-gradient-to-r from-dedevs-pink to-dedevs-cyan text-white hover:from-dedevs-pink-dark hover:to-dedevs-cyan-dark transition-all duration-300;
}

/* Custom text gradient */
.text-dedevs-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-dedevs-pink to-dedevs-cyan;
}

[V0_FILE]typescriptreact:file="components/interactive-principles-guide.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Lightbulb, Sparkles, MessageSquare, Layers, Target, RefreshCw } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { DiffView } from "@/components/diff-view"
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select"

interface Principle {
  id: string
  title: string
  description: string
  icon: React.ReactNode
  examples: {
    before: string
    after: string
  }[]
  enhancementFunction: (prompt: string) => string
}

export function InteractivePrinciplesGuide() {
  const [selectedCategory, setSelectedCategory] = useState("clarity")
  const [userPrompt, setUserPrompt] = useState<Record<string, string>>({})
  const [enhancedPrompt, setEnhancedPrompt] = useState<Record<string, string>>({})
  const [activeExample, setActiveExample] = useState<Record<string, number>>({})

// Initialize user prompts with the first example for each principle
  useEffect(() => {
    const initialPrompts: Record<string, string> = {}
    const initialExamples: Record<string, number> = {}

principles.forEach((category) => {
      category.items.forEach((principle) => {
        initialPrompts[principle.id] = principle.examples[0].before
        initialExamples[principle.id] = 0
      })
    })

setUserPrompt(initialPrompts)
    setActiveExample(initialExamples)
  }, [])

const applyPrinciple = (principleId: string, principle: Principle) => {
    if (!userPrompt[principleId]) return

const enhanced = principle.enhancementFunction(userPrompt[principleId])
    setEnhancedPrompt({
      ...enhancedPrompt,
      [principleId]: enhanced,
    })
  }

const loadExample = (principleId: string, principle: Principle, index: number) => {
    setUserPrompt({
      ...userPrompt,
      [principleId]: principle.examples[index].before,
    })

setEnhancedPrompt({
      ...enhancedPrompt,
      [principleId]: principle.examples[index].after,
    })

setActiveExample({
      ...activeExample,
      [principleId]: index,
    })
  }

// Find the selected category object
  const selectedCategoryObj = principles.find((category) => category.id === selectedCategory) || principles[0]

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Lightbulb className="h-5 w-5" />
          Prompt Engineering Principles
        </CardTitle>
        <CardDescription>Interactive guide to help you craft more effective prompts</CardDescription>

{/* Dropdown menu for principle categories */}
        <div className="mt-4">
          <Select value={selectedCategory} onValueChange={setSelectedCategory}>
            <SelectTrigger className="w-full">
              <div className="flex items-center gap-2">
                {selectedCategoryObj.icon}
                <span>{selectedCategoryObj.name}</span>
              </div>
            </SelectTrigger>
            <SelectContent>
              {principles.map((category) => (
                <SelectItem key={category.id} value={category.id}>
                  <div className="flex items-center gap-2">
                    {category.icon}
                    <span>{category.name}</span>
                    <span className="text-xs text-muted-foreground ml-2">
                      ({category.items.length} principle{category.items.length !== 1 ? "s" : ""})
                    </span>
                  </div>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          <div className="flex items-center gap-2 mb-4">
            <div className="flex items-center gap-1 text-sm font-medium">
              {selectedCategoryObj.icon}
              <span>{selectedCategoryObj.name}</span>
            </div>
            <span className="text-xs text-muted-foreground">
              - {selectedCategoryObj.items.length} principle{selectedCategoryObj.items.length !== 1 ? "s" : ""}
            </span>
          </div>

<ScrollArea className="h-[600px] pr-4">
            <div className="space-y-6">
              {selectedCategoryObj.items.map((principle) => (
                <PrincipleCard
                  key={principle.id}
                  principle={principle}
                  userPrompt={userPrompt[principle.id] || ""}
                  enhancedPrompt={enhancedPrompt[principle.id] || ""}
                  activeExampleIndex={activeExample[principle.id] || 0}
                  onPromptChange={(value) => setUserPrompt({ ...userPrompt, [principle.id]: value })}
                  onApplyPrinciple={() => applyPrinciple(principle.id, principle)}
                  onLoadExample={(index) => loadExample(principle.id, principle, index)}
                />
              ))}
            </div>
          </ScrollArea>
        </div>
      </CardContent>
    </Card>
  )
}

interface PrincipleCardProps {
  principle: Principle
  userPrompt: string
  enhancedPrompt: string
  activeExampleIndex: number
  onPromptChange: (value: string) => void
  onApplyPrinciple: () => void
  onLoadExample: (index: number) => void
}

function PrincipleCard({
  principle,
  userPrompt,
  enhancedPrompt,
  activeExampleIndex,
  onPromptChange,
  onApplyPrinciple,
  onLoadExample,
}: PrincipleCardProps) {
  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-lg">
          {principle.icon}
          {principle.title}
        </CardTitle>
        <CardDescription>{principle.description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex flex-wrap gap-2">
          {principle.examples.map((example, index) => (
            <Badge
              key={index}
              variant={activeExampleIndex === index ? "default" : "outline"}
              className="cursor-pointer"
              onClick={() => onLoadExample(index)}
            >
              Example {index + 1}
            </Badge>
          ))}
        </div>

<div className="grid md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <h4 className="text-sm font-medium">Your Prompt</h4>
            <Textarea
              value={userPrompt}
              onChange={(e) => onPromptChange(e.target.value)}
              placeholder="Enter your prompt here..."
              className="min-h-[120px]"
            />
            <Button onClick={onApplyPrinciple} className="w-full" disabled={!userPrompt.trim()}>
              <Sparkles className="mr-2 h-4 w-4" />
              Apply {principle.title}
            </Button>
          </div>

<div className="space-y-2">
            <h4 className="text-sm font-medium">Enhanced Prompt</h4>
            <Textarea
              value={enhancedPrompt}
              readOnly
              placeholder="Enhanced prompt will appear here..."
              className="min-h-[120px] bg-muted/50"
            />
          </div>
        </div>

{userPrompt && enhancedPrompt && (
          <div className="pt-2">
            <h4 className="text-sm font-medium mb-2">Comparison</h4>
            <DiffView original={userPrompt} enhanced={enhancedPrompt} />
          </div>
        )}
      </CardContent>
    </Card>
  )
}

// Principle categories with their items
const principles = [
  {
    id: "clarity",
    name: "Clarity",
    icon: <MessageSquare className="h-4 w-4" />,
    items: [
      {
        id: "be-specific",
        title: "Be Specific and Clear",
        description: "Clearly state what you want. Vague prompts lead to vague responses.",
        icon: <Target className="h-4 w-4" />,
        examples: [
          {
            before: "Create a login form.",
            after:
              "Create a React login form with email and password fields, validation, error messages, and a submit button that calls an API endpoint.",
          },
          {
            before: "Write code for a website.",
            after:
              "Write HTML, CSS, and JavaScript code for a responsive landing page for a fitness app, including a hero section, features list, and contact form.",
          },
        ],
        enhancementFunction: (prompt: string) => {
          // Simple enhancement function for demonstration
          if (prompt.length < 30) {
            return (
              prompt +
              " Please include specific details about the technology stack, required features, design preferences, and any constraints that should be considered."
            )
          }

// If the prompt is already somewhat detailed
          return (
            prompt.replace(/\./g, ",") +
            ". Please ensure the solution is detailed, with clear specifications for implementation, visual design, and functionality."
          )
        },
      },
      {
        id: "use-examples",
        title: "Use Examples",
        description: "Provide examples of the kind of response you're looking for to clarify expectations.",
        icon: <Layers className="h-4 w-4" />,
        examples: [
          {
            before: "Generate a function to validate email addresses.",
            after:
              "Generate a function to validate email addresses. For example, it should accept 'user@example.com' but reject 'user@example' and 'user.example.com'. The function should return a boolean and handle edge cases like empty strings.",
          },
          {
            before: "Create a color palette for my website.",
            after:
              "Create a color palette for my website with 5 colors. For example, I like how Stripe uses a primary blue (#635BFF) with supporting colors. My brand is focused on sustainability and nature.",
          },
        ],
        enhancementFunction: (prompt: string) => {
          // Add examples to the prompt
          if (!prompt.includes("For example") && !prompt.includes("for example")) {
            return (
              prompt +
              " For example, I'd like to see something similar to [specific example relevant to the request], but adapted to my specific needs with [particular customization]."
            )
          }

// If already has examples, enhance them
          return (
            prompt +
            " Please provide multiple variations or approaches to solve this problem, with explanations of the trade-offs between them."
          )
        },
      },
    ],
  },
  {
    id: "specificity",
    name: "Specificity",
    icon: <Target className="h-4 w-4" />,
    items: [
      {
        id: "define-format",
        title: "Define the Format",
        description: "Specify the format you want for the response, such as a table, JSON, or markdown.",
        icon: <Layers className="h-4 w-4" />,
        examples: [
          {
            before: "List the top 5 JavaScript frameworks.",
            after:
              "List the top 5 JavaScript frameworks in a markdown table with columns for name, GitHub stars, key features, and learning curve (rated easy/medium/hard).",
          },
          {
            before: "Give me data about popular programming languages.",
            after:
              'Provide information about the top 3 programming languages in JSON format with the following structure: [{"name": "language name", "usagePercentage": number, "popularFrameworks": ["framework1", "framework2"], "learningCurve": "easy/medium/hard"}]',
          },
        ],
        enhancementFunction: (prompt: string) => {
          // Add format specification
          if (
            !prompt.includes("format") &&
            !prompt.includes("table") &&
            !prompt.includes("JSON") &&
            !prompt.includes("markdown")
          ) {
            return (
              prompt +
              " Please provide the response in a structured format, preferably as a markdown table or JSON object with clearly defined properties."
            )
          }

// If format is already specified, enhance it
          return (
            prompt +
            " Ensure the formatting is consistent and optimized for readability, with clear headings and organized sections."
          )
        },
      },
      {
        id: "set-constraints",
        title: "Set Constraints",
        description: "Establish boundaries for the response, such as word count, technical level, or tone.",
        icon: <Layers className="h-4 w-4" />,
        examples: [
          {
            before: "Explain how databases work.",
            after:
              "Explain how relational databases work in under 300 words, using analogies suitable for a high school student with no prior technical knowledge.",
          },
          {
            before: "Write a blog post about AI.",
            after:
              "Write a 500-word technical blog post about large language models for an audience of senior software engineers. Use a professional tone, include code examples in Python, and focus on recent advancements in the field.",
          },
        ],
        enhancementFunction: (prompt: string) => {
          // Add constraints
          if (!prompt.includes("words") && !prompt.includes("technical") && !prompt.includes("tone")) {
            return (
              prompt +
              " Please limit the response to approximately 300-500 words, with a technical depth appropriate for [beginner/intermediate/advanced] users, and maintain a [formal/conversational/instructional] tone throughout."
            )
          }

// If constraints are already specified, refine them
          return (
            prompt +
            " Additionally, ensure the content is well-structured with clear headings, concise paragraphs, and actionable takeaways."
          )
        },
      },
    ],
  },
  {
    id: "context",
    name: "Context",
    icon: <Layers className="h-4 w-4" />,
    items: [
      {
        id: "provide-background",
        title: "Provide Background Information",
        description: "Give relevant background information to help the model understand your specific situation.",
        icon: <Layers className="h-4 w-4" />,
        examples: [
          {
            before: "Help me debug my React component.",
            after:
              "Help me debug my React functional component that uses hooks. I'm getting this error: 'React Hook useEffect has a missing dependency'. I'm using useEffect to fetch data when a user ID changes, but the linter is warning me about missing dependencies.",
          },
          {
            before: "Suggest database improvements.",
            after:
              "Suggest improvements for my PostgreSQL database that's experiencing slow query performance. We have a table with 10 million rows of user transaction data, indexed on user_id and transaction_date. Queries filtering by date range and grouping by user are taking over 30 seconds to complete.",
          },
        ],
        enhancementFunction: (prompt: string) => {
          // Add background information
          if (prompt.split(" ").length < 15) {
            return (
              prompt +
              " For context, I'm working on [type of project/application], using [technologies/frameworks], and my specific goal is to [objective]. The current situation is [description of current state/problem]."
            )
          }

// If already has some context, enhance it
          return (
            prompt +
            " Additional context that might be helpful: my technical environment includes [relevant technologies], my experience level is [beginner/intermediate/advanced], and any solution needs to consider [specific constraints or requirements]."
          )
        },
      },
      {
        id: "specify-audience",
        title: "Specify the Audience",
        description: "Clarify who the response is for to get appropriate terminology and explanations.",
        icon: <Layers className="h-4 w-4" />,
        examples: [
          {
            before: "Explain how machine learning works.",
            after:
              "Explain how machine learning works to a team of marketers who have basic technical knowledge but no experience with data science. Use marketing-relevant examples and avoid complex mathematical explanations.",
          },
          {
            before: "Write documentation for my API.",
            after:
              "Write documentation for my REST API that will be used by junior frontend developers who are familiar with JavaScript but have limited experience with API integration. Include basic examples using fetch and explain common HTTP status codes they might encounter.",
          },
        ],
        enhancementFunction: (prompt: string) => {
          // Add audience specification
          if (!prompt.includes("audience") && !prompt.includes("for a") && !prompt.includes("who are")) {
            return (
              prompt +
              " This is intended for an audience of [description of audience], who have [level of knowledge/experience] and are primarily interested in [their main concerns/interests]."
            )
          }

// If audience is already specified, refine it
          return (
            prompt +
            " When addressing this audience, please use appropriate terminology, relevant examples, and a tone that will resonate with them specifically."
          )
        },
      },
    ],
  },
  {
    id: "iteration",
    name: "Iteration",
    icon: <RefreshCw className="h-4 w-4" />,
    items: [
      {
        id: "refine-gradually",
        title: "Refine Gradually",
        description: "Start with a basic prompt and iteratively refine it based on the responses.",
        icon: <RefreshCw className="h-4 w-4" />,
        examples: [
          {
            before: "Write a function to sort an array.",
            after:
              "I'm iteratively refining my request: First, I need a JavaScript function to sort an array of objects by a specific property. The previous solution worked, but now I need to handle nested properties like 'user.profile.age' and support both ascending and descending order with a parameter.",
          },
          {
            before: "Create a landing page.",
            after:
              "Based on your previous design for a SaaS landing page, I'd like to refine it further. The hero section looks great, but can we make the call-to-action more prominent? Also, the feature section would work better as a grid layout instead of the current list format, and I'd like to add customer testimonials between the features and pricing sections.",
          },
        ],
        enhancementFunction: (prompt: string) => {
          // Transform into an iterative refinement
          return (
            "I'm iteratively refining my request: " +
            prompt +
            " Based on this initial request, I'd like to see a first version, which I can then provide feedback on to further refine and improve."
          )
        },
      },
      {
        id: "feedback-loop",
        title: "Create Feedback Loops",
        description: "Provide feedback on what aspects of the response work well and what needs improvement.",
        icon: <RefreshCw className="h-4 w-4" />,
        examples: [
          {
            before: "Rewrite this function to be more efficient.",
            after:
              "I like how you simplified my database query function, especially the use of prepared statements for security. However, it's still not handling connection pooling effectively. Could you revise it to properly release connections back to the pool and add error handling specifically for connection timeout scenarios?",
          },
          {
            before: "Improve this CSS.",
            after:
              "Thanks for the responsive CSS improvements. The mobile layout works great now, and I appreciate the use of CSS variables for the color scheme. However, the animations are too resource-intensive on mobile devices. Could you optimize them to be more performance-friendly while maintaining a similar visual effect? Also, the form elements still don't align properly in Safari.",
          },
        ],
        enhancementFunction: (prompt: string) => {
          // Transform into feedback
          return (
            "Regarding the previous response about " +
            prompt +
            " I appreciate [specific aspect that was good], which effectively addressed my needs. However, I'd like to see improvements in [specific aspect to improve], perhaps by [suggested approach]. Additionally, could you also address [new aspect] which wasn't covered in the initial response?"
          )
        },
      },
    ],
  },
]

[V0_FILE]typescriptreact:file="components/api-key-manager.tsx" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Eye, EyeOff, Key, Shield } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Switch } from "@/components/ui/switch"
import { useToast } from "@/components/ui/use-toast"
import { encryptData, decryptData } from "@/lib/encryption"
import { InfoPopover } from "@/components/info-popover"

interface ApiKeyManagerProps {
  onApiKeyChange?: (apiKey: string | null) => void
  onSaveSuccess?: () => void
}

export function ApiKeyManager({ onApiKeyChange, onSaveSuccess }: ApiKeyManagerProps) {
  const [apiKey, setApiKey] = useState("")
  const [showApiKey, setShowApiKey] = useState(false)
  const [isSaved, setIsSaved] = useState(false)
  const [rememberKey, setRememberKey] = useState(true)
  const { toast } = useToast()

// Load saved API key on component mount
  useEffect(() => {
    const loadSavedApiKey = async () => {
      try {
        const encryptedKey = localStorage.getItem("openai_api_key")
        if (encryptedKey) {
          const decryptedKey = await decryptData(encryptedKey)
          setApiKey(decryptedKey)
          setIsSaved(true)
          if (onApiKeyChange) onApiKeyChange(decryptedKey)
        }
      } catch (error) {
        console.error("Error loading API key:", error)
        localStorage.removeItem("openai_api_key")
      }
    }

loadSavedApiKey()
  }, [onApiKeyChange])

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newKey = e.target.value
    setApiKey(newKey)
  }

const saveApiKey = async () => {
    if (!apiKey) {
      toast({
        title: "API Key Required",
        description: "Please enter an OpenAI API key to save.",
        variant: "destructive",
      })
      return
    }

try {
      if (rememberKey) {
        // Encrypt the API key before storing
        const encryptedKey = await encryptData(apiKey)
        localStorage.setItem("openai_api_key", encryptedKey)
      } else {
        // If user doesn't want to remember, remove from storage
        localStorage.removeItem("openai_api_key")
      }

setIsSaved(true)
      if (onApiKeyChange) onApiKeyChange(apiKey)

toast({
        title: "API Key Saved",
        description: rememberKey
          ? "Your API key has been securely saved in this browser."
          : "Your API key will be used for this session only.",
      })

// Call the onSaveSuccess callback after successful save
      if (onSaveSuccess) {
        onSaveSuccess()
      }
    } catch (error) {
      toast({
        title: "Error Saving API Key",
        description: "Failed to save your API key. Please try again.",
        variant: "destructive",
      })
    }
  }

const clearApiKey = () => {
    setApiKey("")
    setIsSaved(false)
    localStorage.removeItem("openai_api_key")
    if (onApiKeyChange) onApiKeyChange(null)

toast({
      title: "API Key Removed",
      description: "Your OpenAI API key has been removed from this browser.",
    })
  }

return (
    <Card className="w-full">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <CardTitle className="text-lg">
              <Key className="h-5 w-5 inline mr-2" />
              OpenAI API Key
            </CardTitle>
          </div>
          <InfoPopover
            content={
              <div className="space-y-3">
                <p className="text-sm">
                  An OpenAI API key is required to use the prompt enhancement features. You can get one from your OpenAI
                  account dashboard.
                </p>
                <p className="text-sm">
                  Your API key is stored securely in your browser using encryption. It's never sent to our servers.
                </p>
                <a
                  href="https://platform.openai.com/api-keys"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm text-blue-500 hover:underline block mt-2"
                >
                  Get an API key from OpenAI →
                </a>
              </div>
            }
            title="About API Keys"
            description="Required for using OpenAI's services"
          />
        </div>
        <CardDescription>Required to use the prompt enhancement features</CardDescription>
      </CardHeader>

<CardContent className="space-y-4 pb-3">
        <div className="space-y-2">
          <div className="flex items-center gap-2">
            <Label htmlFor="apiKey">Your OpenAI API Key</Label>
            <InfoPopover
              content={
                <div className="space-y-2">
                  <p className="text-sm">
                    Enter your OpenAI API key here. You can find your API key in your OpenAI account dashboard.
                  </p>
                </div>
              }
              title="API Key"
              iconSize="sm"
            />
          </div>
          <div className="relative">
            <Input
              id="apiKey"
              type={showApiKey ? "text" : "password"}
              placeholder="Enter your OpenAI API key"
              value={apiKey}
              onChange={handleInputChange}
              className="pr-10"
              aria-describedby="api-key-description"
            />
            <button
              type="button"
              onClick={() => setShowApiKey(!showApiKey)}
              className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-500"
              aria-label={showApiKey ? "Hide API key" : "Show API key"}
            >
              {showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </button>
          </div>
          <p id="api-key-description" className="text-xs text-muted-foreground">
            Enter your API key from the OpenAI platform
          </p>
        </div>

<div className="flex items-center space-x-2">
          <Switch id="remember-key" checked={rememberKey} onCheckedChange={setRememberKey} />
          <div className="flex items-center gap-2">
            <Label htmlFor="remember-key" className="text-sm cursor-pointer">
              Remember API key in this browser
            </Label>
            <InfoPopover
              content={
                <p className="text-sm">
                  When enabled, your API key will be encrypted and stored in your browser's local storage. This means
                  you won't need to enter it again when you return to this page.
                </p>
              }
              title="Remember API Key"
              iconSize="sm"
            />
          </div>
        </div>

<Alert className="py-2">
          <Shield className="h-4 w-4" />
          <AlertTitle className="text-sm">Security Note</AlertTitle>
          <AlertDescription className="text-xs">
            Your API key will be encrypted before storing in your browser. Never share your API key or expose it in
            client-side code.
          </AlertDescription>
        </Alert>
      </CardContent>

<CardFooter className="flex justify-between pt-0">
        <Button variant="outline" onClick={clearApiKey} disabled={!apiKey} size="sm">
          Clear
        </Button>
        <Button onClick={saveApiKey} disabled={!apiKey || isSaved} size="sm">
          {isSaved ? "Update" : "Save"}
        </Button>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Sparkles, ArrowRight, RefreshCw, Lightbulb, History, ChevronDown, ChevronUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { ApiKeyManager } from "@/components/api-key-manager"
import { PromptHistoryItem } from "@/components/prompt-history-item"
import { PromptTips } from "@/components/prompt-tips"
import { DiffView } from "@/components/diff-view"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { InfoPopover } from "@/components/info-popover"

export default function HomePage() {
  const [originalPrompt, setOriginalPrompt] = useState("")
  const [enhancedPrompt, setEnhancedPrompt] = useState("")
  const [enhancementNotes, setEnhancementNotes] = useState<string[]>([])
  const [isEnhancing, setIsEnhancing] = useState(false)
  const [apiKey, setApiKey] = useState<string | null>(null)
  const [history, setHistory] = useState<Array<{ original: string; enhanced: string; timestamp: Date }>>([])
  const [selectedTab, setSelectedTab] = useState("enhance")
  const [isApiKeyOpen, setIsApiKeyOpen] = useState(true)
  const { toast } = useToast()

// Load history from localStorage on component mount
  useEffect(() => {
    const savedHistory = localStorage.getItem("prompt_history")
    if (savedHistory) {
      try {
        const parsedHistory = JSON.parse(savedHistory)
        setHistory(
          parsedHistory.map((item: any) => ({
            ...item,
            timestamp: new Date(item.timestamp),
          })),
        )
      } catch (e) {
        console.error("Error loading history:", e)
      }
    }
  }, [])

const handleApiKeyChange = (key: string | null) => {
    setApiKey(key)
    // Don't auto-close the API key section when a key is provided
    // This allows users to see the confirmation and make additional changes if needed
  }

const [enhancementMethod, setEnhancementMethod] = useState("balanced")

// Enhancement methods with descriptions and examples
  const enhancementMethods = {
    balanced: {
      name: "Balanced Enhancement",
      description: "A well-rounded approach that improves clarity, specificity, and structure.",
      example: {
        before: "Create a login page.",
        after:
          "Create a responsive login page with email and password fields, validation, error handling, and a 'forgot password' option. Use modern design principles and ensure it's accessible.",
      },
    },
    clarity: {
      name: "Clarity Enhancement",
      description: "Focuses on making the prompt more clear and understandable.",
      example: {
        before: "Write a story.",
        after:
          "Craft a short story about a time-traveling detective solving a mystery in Victorian London. Include vivid descriptions of the setting and characters.",
      },
    },
    specificity: {
      name: "Specificity Improvement",
      description: "Adds detailed requirements and constraints to the prompt.",
      example: {
        before: "Make a website.",
        after:
          "Develop a responsive e-commerce website for selling handmade jewelry, including product listings, a shopping cart, and secure checkout using Stripe integration.",
      },
    },
    context: {
      name: "Contextual Enrichment",
      description: "Adds relevant background information and context.",
      example: {
        before: "Fix the bug.",
        after:
          "Identify and resolve the bug in the user authentication module that causes session timeouts after 5 minutes, ensuring secure login functionality and providing informative error messages.",
      },
    },
    iterative: {
      name: "Iterative Refinement",
      description: "Structures the prompt for ongoing improvement and feedback.",
      example: {
        before: "Create a logo.",
        after:
          "Design a minimalist logo for a tech startup called 'Quantum', incorporating the company name and a visual representation of its AI services. This is the first iteration, and I'll provide feedback on color schemes and typography.",
      },
    },
  }

function getEnhancementInstructions(method: string) {
    switch (method) {
      case "clarity":
        return "Focus on making the prompt more clear and understandable. Eliminate ambiguity, use precise language, and ensure the intent is obvious."
      case "specificity":
        return "Focus on adding detailed requirements, constraints, and parameters. Be explicit about what's needed, including formats, styles, and technical specifications."
      case "context":
        return "Focus on adding relevant background information and context. Include details about the purpose, audience, and environment where the result will be used."
      case "iterative":
        return "Structure the prompt for ongoing improvement. Frame it as part of an iterative process, indicating areas for future refinement and feedback."
      default: // balanced
        return "Balance improvements across clarity, specificity, structure, and context. Create a well-rounded enhancement that addresses multiple aspects of prompt quality."
    }
  }

const enhancePrompt = async () => {
    if (!originalPrompt.trim() || !apiKey) {
      if (!apiKey) {
        setIsApiKeyOpen(true)
        toast({
          title: "API Key Required",
          description: "Please enter your OpenAI API key to enhance prompts.",
          variant: "destructive",
        })
      } else {
        toast({
          title: "Input Required",
          description: "Please enter a prompt to enhance.",
          variant: "destructive",
        })
      }
      return
    }

setIsEnhancing(true)
    setEnhancedPrompt("")
    setEnhancementNotes([])

try {
      const systemPrompt = `You are a prompt engineering expert. Analyze the user's prompt and provide an enhanced version that will produce better results.

I want you to focus on ${enhancementMethods[enhancementMethod as keyof typeof enhancementMethods].name.toLowerCase()}.
${getEnhancementInstructions(enhancementMethod)}

Return your response in the following JSON format without any markdown formatting, backticks, or additional text:
{
 "enhancedPrompt": "The improved prompt text",
 "notes": ["Note 1 about what was improved", "Note 2 about what was improved", ...]
}

IMPORTANT: Return ONLY the JSON object. Do not include any explanation text, markdown formatting, or code block syntax like \`\`\`json or \`\`\`.`

const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
          model: "gpt-4o",
          messages: [
            {
              role: "system",
              content: systemPrompt,
            },
            {
              role: "user",
              content: originalPrompt,
            },
          ],
          temperature: 0.7,
        }),
      })

if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        const errorMessage = errorData.error?.message || `Error: ${response.status}`

// Handle API errors without specific validation
        toast({
          title: "API Error",
          description: errorMessage || "An error occurred while communicating with the OpenAI API.",
          variant: "destructive",
        })

throw new Error(errorMessage)
      }

const data = await response.json()
      const content = data.choices[0].message.content

// Parse the JSON response
      try {
        // First, try to clean the response if it contains markdown code blocks
        let cleanedContent = content

// Remove markdown code block syntax if present
        if (cleanedContent.includes("```json")) {
          cleanedContent = cleanedContent.replace(/```json\s*/, "").replace(/\s*```\s*$/, "")
        } else if (cleanedContent.includes("```")) {
          cleanedContent = cleanedContent.replace(/```\s*/, "").replace(/\s*```\s*$/, "")
        }

// Try to parse the cleaned content
        const parsedResponse = JSON.parse(cleanedContent)

// Validate that the response has the expected structure
        if (!parsedResponse.enhancedPrompt || !Array.isArray(parsedResponse.notes)) {
          throw new Error("Response is missing required fields")
        }

setEnhancedPrompt(parsedResponse.enhancedPrompt)
        setEnhancementNotes(parsedResponse.notes)

// Add to history
        const newHistoryItem = {
          original: originalPrompt,
          enhanced: parsedResponse.enhancedPrompt,
          timestamp: new Date(),
        }

const updatedHistory = [newHistoryItem, ...history]
        setHistory(updatedHistory)

// Save to localStorage
        localStorage.setItem("prompt_history", JSON.stringify(updatedHistory.slice(0, 20)))
      } catch (e) {
        console.error("Error parsing response:", e)
        console.error("Raw content:", content)
        toast({
          title: "Processing Error",
          description:
            "Failed to parse the enhancement response. The API returned an invalid format. Please try again.",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error enhancing prompt:", error)
    } finally {
      setIsEnhancing(false)
    }
  }

const iterativeEnhance = async () => {
    if (!enhancedPrompt) {
      toast({
        title: "No Enhanced Prompt",
        description: "Please enhance a prompt first before refining it further.",
        variant: "destructive",
      })
      return
    }

// Use the enhanced prompt as the new original prompt
    setOriginalPrompt(enhancedPrompt)
    setEnhancedPrompt("")
    setEnhancementNotes([])

// Automatically trigger enhancement after a short delay
    setTimeout(() => {
      enhancePrompt()
    }, 100)
  }

const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    toast({
      title: "Copied to Clipboard",
      description: "The prompt has been copied to your clipboard.",
    })
  }

const loadFromHistory = (item: { original: string; enhanced: string }) => {
    setOriginalPrompt(item.original)
    setEnhancedPrompt(item.enhanced)
    setSelectedTab("enhance")
  }

const handleApiKeyClick = () => {
    setIsApiKeyOpen(true)
  }

// Handle collapsible state change
  const handleCollapsibleChange = () => {
    setIsApiKeyOpen(!isApiKeyOpen)
  }

// Update the ApiKeyManager component usage to include the onSaveSuccess prop
  const handleApiKeySaved = () => {
    // Automatically collapse the API key section after successful save
    setIsApiKeyOpen(false)
  }

return (
    <div className="container mx-auto py-6 px-4 space-y-6">
      <header>
        <h1 className="text-3xl font-bold">Prompt Enhancement Studio</h1>
        <p className="text-muted-foreground">Analyze and improve your prompts for better results</p>
      </header>

<Collapsible open={isApiKeyOpen} onOpenChange={handleCollapsibleChange} className="w-full">
        <div className="flex justify-between items-center">
          <h2
            className="text-xl font-semibold cursor-pointer hover:text-dedevs-pink transition-colors"
            onClick={handleApiKeyClick}
          >
            OpenAI API Key
          </h2>
          <CollapsibleTrigger asChild>
            <Button variant="ghost" size="sm">
              {isApiKeyOpen ? (
                <>
                  <ChevronUp className="h-4 w-4 mr-2" />
                  Hide
                </>
              ) : (
                <>
                  <ChevronDown className="h-4 w-4 mr-2" />
                  {apiKey ? "Show API Key Settings" : "Set API Key"}
                </>
              )}
            </Button>
          </CollapsibleTrigger>
        </div>

<Tabs value={selectedTab} onValueChange={setSelectedTab} className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="enhance">
            <Sparkles className="mr-2 h-4 w-4" />
            Enhance
          </TabsTrigger>
          <TabsTrigger value="history">
            <History className="mr-2 h-4 w-4" />
            History
          </TabsTrigger>
        </TabsList>

<TabsContent value="enhance" className="space-y-6">
          <div className="grid md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Original Prompt</CardTitle>
                <CardDescription>Enter your prompt to enhance</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <label htmlFor="enhancement-method" className="text-sm font-medium">
                        Enhancement Method
                      </label>
                      <InfoPopover
                        content={
                          <div className="space-y-3">
                            <p className="text-sm">
                              Choose how you want your prompt to be enhanced. Each method focuses on different aspects
                              of prompt quality.
                            </p>
                            <ul className="text-sm list-disc pl-5 space-y-1">
                              <li>
                                <strong>Balanced:</strong> Improves multiple aspects
                              </li>
                              <li>
                                <strong>Clarity:</strong> Makes intent clearer
                              </li>
                              <li>
                                <strong>Specificity:</strong> Adds detailed requirements
                              </li>
                              <li>
                                <strong>Context:</strong> Adds background information
                              </li>
                              <li>
                                <strong>Iterative:</strong> Structures for ongoing refinement
                              </li>
                            </ul>
                          </div>
                        }
                        title="Enhancement Methods"
                        description="Select the approach that best fits your needs"
                        iconSize="sm"
                        width="md"
                      />
                    </div>
                    <Select value={enhancementMethod} onValueChange={setEnhancementMethod}>
                      <SelectTrigger id="enhancement-method" className="w-full">
                        <SelectValue placeholder="Select enhancement method" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="balanced">Balanced Enhancement</SelectItem>
                        <SelectItem value="clarity">Clarity Enhancement</SelectItem>
                        <SelectItem value="specificity">Specificity Improvement</SelectItem>
                        <SelectItem value="context">Contextual Enrichment</SelectItem>
                        <SelectItem value="iterative">Iterative Refinement</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <label htmlFor="prompt-input" className="text-sm font-medium">
                        Your Prompt
                      </label>
                      <InfoPopover
                        content={
                          <div className="space-y-3">
                            <p className="text-sm">
                              Enter the prompt you want to enhance. The system will analyze it and suggest improvements
                              based on your selected enhancement method.
                            </p>
                            <div className="space-y-1">
                              <p className="text-sm font-medium">Example:</p>
                              <div className="bg-muted p-2 rounded text-xs">
                                <p className="opacity-70">Original:</p>
                                <p>
                                  {
                                    enhancementMethods[enhancementMethod as keyof typeof enhancementMethods].example
                                      .before
                                  }
                                </p>
                                <p className="opacity-70 mt-2">Enhanced:</p>
                                <p>
                                  {
                                    enhancementMethods[enhancementMethod as keyof typeof enhancementMethods].example
                                      .after
                                  }
                                </p>
                              </div>
                            </div>
                          </div>
                        }
                        title="Prompt Input"
                        description="What you want the AI to help you with"
                        iconSize="sm"
                        position="top"
                      />
                    </div>
                    <InfoPopover
                      content={
                        <div className="space-y-2">
                          <h4 className="font-medium">
                            {enhancementMethods[enhancementMethod as keyof typeof enhancementMethods].name}
                          </h4>
                          <p className="text-sm text-muted-foreground">
                            {enhancementMethods[enhancementMethod as keyof typeof enhancementMethods].description}
                          </p>
                          <div className="mt-4 space-y-2">
                            <div className="space-y-1">
                              <h5 className="text-xs font-medium">Example Before:</h5>
                              <p className="text-xs bg-muted p-2 rounded">
                                {
                                  enhancementMethods[enhancementMethod as keyof typeof enhancementMethods].example
                                    .before
                                }
                              </p>
                            </div>
                            <div className="space-y-1">
                              <h5 className="text-xs font-medium">Example After:</h5>
                              <p className="text-xs bg-muted p-2 rounded">
                                {enhancementMethods[enhancementMethod as keyof typeof enhancementMethods].example.after}
                              </p>
                            </div>
                          </div>
                        </div>
                      }
                      title="Selected Method"
                      width="md"
                    />
                  </div>
                  <Textarea
                    id="prompt-input"
                    placeholder="Enter your prompt here..."
                    className="min-h-[200px]"
                    value={originalPrompt}
                    onChange={(e) => setOriginalPrompt(e.target.value)}
                  />
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" onClick={() => setOriginalPrompt("")} disabled={!originalPrompt.trim()}>
                  Clear
                </Button>
                <Button onClick={enhancePrompt} disabled={isEnhancing || !originalPrompt.trim()}>
                  {isEnhancing ? (
                    <>
                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                      Enhancing...
                    </>
                  ) : (
                    <>
                      <Sparkles className="mr-2 h-4 w-4" />
                      Enhance Prompt
                    </>
                  )}
                </Button>
              </CardFooter>
            </Card>

<Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle>Enhanced Prompt</CardTitle>
                    <CardDescription>Improved version of your prompt</CardDescription>
                  </div>
                  <InfoPopover
                    content={
                      <div className="space-y-3">
                        <p className="text-sm">
                          This is your enhanced prompt after applying the selected enhancement method. You can:
                        </p>
                        <ul className="text-sm list-disc pl-5 space-y-1">
                          <li>Copy it to use elsewhere</li>
                          <li>Edit it manually if needed</li>
                          <li>Refine it further with another enhancement pass</li>
                        </ul>
                      </div>
                    }
                    title="Enhanced Prompt"
                    position="left"
                  />
                </div>
              </CardHeader>
              <CardContent>
                <Textarea
                  placeholder="Your enhanced prompt will appear here..."
                  className="min-h-[200px]"
                  value={enhancedPrompt}
                  onChange={(e) => setEnhancedPrompt(e.target.value)}
                />
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" onClick={() => copyToClipboard(enhancedPrompt)} disabled={!enhancedPrompt}>
                  Copy
                </Button>
                <Button onClick={iterativeEnhance} disabled={!enhancedPrompt}>
                  <ArrowRight className="mr-2 h-4 w-4" />
                  Refine Further
                </Button>
              </CardFooter>
            </Card>
          </div>

{enhancedPrompt && (
            <>
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>Comparison View</CardTitle>
                      <CardDescription>See what changed in your prompt</CardDescription>
                    </div>
                    <InfoPopover
                      content={
                        <div className="space-y-2">
                          <p className="text-sm">
                            This view highlights the differences between your original prompt and the enhanced version:
                          </p>
                          <ul className="text-sm list-disc pl-5 space-y-1">
                            <li>
                              <span className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 px-1 rounded">
                                Green
                              </span>{" "}
                              text shows additions
                            </li>
                            <li>
                              <span className="bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 line-through px-1 rounded">
                                Red
                              </span>{" "}
                              text shows removals
                            </li>
                          </ul>
                        </div>
                      }
                      title="Diff View"
                      position="left"
                    />
                  </div>
                </CardHeader>
                <CardContent>
                  <DiffView original={originalPrompt} enhanced={enhancedPrompt} />
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>Enhancement Notes</CardTitle>
                      <CardDescription>What was improved in your prompt</CardDescription>
                    </div>
                    <InfoPopover
                      content={
                        <p className="text-sm">
                          These notes explain the specific improvements made to your prompt, helping you understand the
                          enhancement process and learn prompt engineering techniques.
                        </p>
                      }
                      title="Enhancement Notes"
                      position="left"
                    />
                  </div>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {enhancementNotes.map((note, index) => (
                      <li key={index} className="flex items-start">
                        <Badge variant="outline" className="mr-2 mt-0.5">
                          {index + 1}
                        </Badge>
                        <span>{note}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            </>
          )}
        </TabsContent>

<TabsContent value="history">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Prompt History</CardTitle>
                  <CardDescription>Your previously enhanced prompts</CardDescription>
                </div>
                <InfoPopover
                  content={
                    <div className="space-y-2">
                      <p className="text-sm">This section shows your previously enhanced prompts. You can:</p>
                      <ul className="text-sm list-disc pl-5 space-y-1">
                        <li>Click on any item to load it back into the editor</li>
                        <li>Copy individual prompts to your clipboard</li>
                        <li>See when each prompt was enhanced</li>
                      </ul>
                      <p className="text-sm mt-2">
                        Your history is stored locally in your browser and is not sent to any server.
                      </p>
                    </div>
                  }
                  title="Prompt History"
                />
              </div>
            </CardHeader>
            <CardContent>
              {history.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  <History className="mx-auto h-12 w-12 opacity-20 mb-2" />
                  <p>No prompt history yet</p>
                  <p className="text-sm">Enhanced prompts will appear here</p>
                </div>
              ) : (
                <ScrollArea className="h-[500px] pr-4">
                  <div className="space-y-4">
                    {history.map((item, index) => (
                      <PromptHistoryItem key={index} item={item} onSelect={loadFromHistory} />
                    ))}
                  </div>
                </ScrollArea>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

<div className="mt-10 space-y-4">
        <div className="flex items-center gap-2">
          <Lightbulb className="h-5 w-5" />
          <h2 className="text-2xl font-bold">Tips & Examples</h2>
        </div>
        <p className="text-muted-foreground">
          Learn how to craft more effective prompts with these guidelines and examples
        </p>
        <PromptTips />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/site-header.tsx"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Code, Menu, Github, Twitter, Home } from "lucide-react"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { cn } from "@/lib/utils"

export function SiteHeader() {
  const [isScrolled, setIsScrolled] = useState(false)
  const pathname = usePathname()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

// Handle scroll effect for header
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

// Close mobile menu when route changes
  useEffect(() => {
    setIsMobileMenuOpen(false)
  }, [pathname])

return (
    <header
      className={cn(
        "sticky top-0 z-50 w-full transition-all duration-200",
        isScrolled ? "bg-gray-950/90 backdrop-blur-md border-b shadow-sm" : "bg-gray-950 border-b border-transparent",
      )}
    >
      <div className="container flex h-16 items-center justify-between">
        {/* Logo with outline effect */}
        <div className="flex items-center gap-2">
          <Link href="/" className="flex items-center gap-2">
            <div className="rounded-lg bg-[#000000] p-1.5 text-white ring-2 ring-dedevs-pink/30 ring-offset-1 ring-offset-background transition-all hover:ring-dedevs-cyan/50">
              <Code className="h-5 w-5" />
            </div>
          </Link>
        </div>

{/* Right Side Actions */}
        <div className="flex items-center gap-2">
          <Link href="https://x.com/DeDevsClub" target="_blank" rel="noopener noreferrer" className="hidden sm:flex">
            <div className="rounded-lg bg-[#000000] p-1.5 text-white ring-2 ring-dedevs-pink/30 ring-offset-1 ring-offset-background transition-all hover:ring-dedevs-cyan/50">
              <Twitter className="h-5 w-5" />
            </div>
          </Link>

{/* Mobile Menu */}
          <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
            <SheetTrigger asChild>
              <div className="sm:hidden rounded-lg bg-[#000000] p-1.5 text-white ring-2 ring-dedevs-pink/30 ring-offset-1 ring-offset-background transition-all hover:ring-dedevs-cyan/50">
                <Menu className="h-5 w-5" />
              </div>
            </SheetTrigger>
            <SheetContent side="right" className="w-[240px] h-[224px] rounded-lg sm:w-[300px] justify-between">
              <div className="flex flex-col h-full">
                <div className="flex items-center justify-center py-4">DeDevs | Prompter</div>

<div className="mt-auto pb-8">
                  <Link
                    href="https://dedevs.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center py-2 px-3 rounded-md text-sm font-medium text-muted-foreground hover:bg-muted"
                  >
                    <Home className="h-4 w-4 mr-2" />
                    DeDevs Club
                  </Link>
                  <Link
                    href="https://x.com/DeDevsClub"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center py-2 px-3 rounded-md text-sm font-medium text-muted-foreground hover:bg-muted"
                  >
                    <Twitter className="h-4 w-4 mr-2" />X (fka Twitter)
                  </Link>
                  <Link
                    href="https://github.com/DeDevsClub/dedevs-prompter"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center py-2 px-3 rounded-md text-sm font-medium text-muted-foreground hover:bg-muted"
                  >
                    <Github className="h-4 w-4 mr-2" />
                    GitHub Repository
                  </Link>
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import "@/app/globals.css"
import { Inter } from "next/font/google"
import { Toaster } from "@/components/ui/toaster"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"

const inter = Inter({ subsets: ["latin"] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="relative flex min-h-screen flex-col">
          <SiteHeader />
          <main className="flex-1">{children}</main>
          <SiteFooter />
        </div>
        <Toaster />
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/site-footer.tsx" isQuickEdit="true"
"use client"

import Link from "next/link"
import { Heart } from "lucide-react"
import { cn } from "@/lib/utils"

export function SiteFooter() {
  return (
    <footer className="w-full border-t bg-background py-4 md:py-6">
      <div className="container flex flex-wrap items-center justify-center sm:justify-between gap-x-4 gap-y-2 text-sm">
        <div className="flex items-center">
          <span className="text-muted-foreground">© {new Date().getFullYear()} DeDevs Prompter</span>
        </div>

<div className="flex items-center gap-1">
          <span className="text-muted-foreground">Created with</span>
          <Heart className="h-4 w-4 text-dedevs-pink" fill="#f300a8" />
          <span className="text-muted-foreground">by</span>
          <Link
            href="https://dedevs.club"
            target="_blank"
            rel="noopener noreferrer"
            className={cn(
              "font-medium transition-colors",
              "bg-clip-text text-transparent bg-gradient-to-r from-dedevs-pink to-dedevs-cyan",
              "hover:from-dedevs-pink-light hover:to-dedevs-cyan-light",
            )}
          >
            DeDevs Club
          </Link>
        </div>
      </div>
    </footer>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from bunsdev

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bunsdev

More Templates Like This