@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

package/src/templates/web/ai-platform/template/src/app/chat/page.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Send, Bot, User, Loader2, Sparkles } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import Link from 'next/link'
+
+interface Message {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  timestamp: Date
+}
+
+const MODELS = [
+  { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
+  { id: 'claude-3-5-sonnet', name: 'Claude 3.5 Sonnet', provider: 'Anthropic' },
+  { id: 'gpt-4o-mini', name: 'GPT-4o Mini', provider: 'OpenAI' },
+]
+
+export default function ChatPage() {
+  const { user, loading: authLoading } = useAuth()
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [selectedModel, setSelectedModel] = useState(MODELS[0].id)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!input.trim() || isLoading) return
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: input,
+      timestamp: new Date(),
+    }
+
+    setMessages(prev => [...prev, userMessage])
+    setInput('')
+    setIsLoading(true)
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: [...messages, userMessage].map(m => ({
+            role: m.role,
+            content: m.content,
+          })),
+          model: selectedModel,
+        }),
+      })
+
+      const data = await response.json()
+
+      const assistantMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: data.content || 'Sorry, I could not process your request.',
+        timestamp: new Date(),
+      }
+
+      setMessages(prev => [...prev, assistantMessage])
+    } catch (error) {
+      console.error('Chat error:', error)
+      const errorMessage: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: 'Sorry, there was an error processing your request. Please try again.',
+        timestamp: new Date(),
+      }
+      setMessages(prev => [...prev, errorMessage])
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-slate-900 flex items-center justify-center">
+        <Loader2 className="w-8 h-8 text-purple-400 animate-spin" />
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-slate-900 flex items-center justify-center">
+        <Card className="p-8 bg-white/5 border-white/10 text-center max-w-md">
+          <Bot className="w-16 h-16 text-purple-400 mx-auto mb-4" />
+          <h2 className="text-2xl font-bold text-white mb-2">Sign in to Chat</h2>
+          <p className="text-gray-400 mb-6">
+            Create an account to start chatting with AI models.
+          </p>
+          <div className="flex gap-2 justify-center">
+            <Link href="/login">
+              <Button variant="outline" className="border-white/20 text-white">Sign In</Button>
+            </Link>
+            <Link href="/signup">
+              <Button className="bg-purple-600 hover:bg-purple-700">Sign Up</Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-screen bg-slate-900 flex flex-col">
+      {/* Header */}
+      <header className="border-b border-white/10 bg-black/20 px-4 py-3">
+        <div className="max-w-4xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Link href="/" className="flex items-center gap-2 text-white">
+              <Bot className="w-6 h-6 text-purple-400" />
+              <span className="font-bold">AI Chat</span>
+            </Link>
+          </div>
+          <select
+            value={selectedModel}
+            onChange={(e) => setSelectedModel(e.target.value)}
+            className="bg-white/10 border border-white/20 rounded-lg px-3 py-1.5 text-white text-sm focus:ring-2 focus:ring-purple-500"
+          >
+            {MODELS.map((model) => (
+              <option key={model.id} value={model.id} className="bg-slate-800">
+                {model.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </header>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-4 py-6">
+        <div className="max-w-4xl mx-auto space-y-6">
+          {messages.length === 0 && (
+            <div className="text-center py-20">
+              <Sparkles className="w-16 h-16 text-purple-400 mx-auto mb-4" />
+              <h2 className="text-2xl font-bold text-white mb-2">Start a Conversation</h2>
+              <p className="text-gray-400">Ask me anything or try one of these prompts:</p>
+              <div className="flex flex-wrap gap-2 justify-center mt-4">
+                {['Explain quantum computing', 'Write a Python function', 'Help me brainstorm'].map((prompt) => (
+                  <button
+                    key={prompt}
+                    onClick={() => setInput(prompt)}
+                    className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-gray-300 hover:bg-white/10 transition text-sm"
+                  >
+                    {prompt}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={`flex gap-4 ${message.role === 'user' ? 'justify-end' : ''}`}
+            >
+              {message.role === 'assistant' && (
+                <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center flex-shrink-0">
+                  <Bot className="w-5 h-5 text-purple-400" />
+                </div>
+              )}
+              <div
+                className={`max-w-2xl rounded-lg px-4 py-3 ${
+                  message.role === 'user'
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-white/5 text-gray-200'
+                }`}
+              >
+                <p className="whitespace-pre-wrap">{message.content}</p>
+              </div>
+              {message.role === 'user' && (
+                <div className="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center flex-shrink-0">
+                  <User className="w-5 h-5 text-blue-400" />
+                </div>
+              )}
+            </div>
+          ))}
+
+          {isLoading && (
+            <div className="flex gap-4">
+              <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center">
+                <Bot className="w-5 h-5 text-purple-400" />
+              </div>
+              <div className="bg-white/5 rounded-lg px-4 py-3">
+                <Loader2 className="w-5 h-5 text-purple-400 animate-spin" />
+              </div>
+            </div>
+          )}
+
+          <div ref={messagesEndRef} />
+        </div>
+      </div>
+
+      {/* Input */}
+      <div className="border-t border-white/10 bg-black/20 px-4 py-4">
+        <form onSubmit={handleSubmit} className="max-w-4xl mx-auto flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type your message..."
+            className="flex-1 bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            disabled={isLoading}
+          />
+          <Button
+            type="submit"
+            disabled={!input.trim() || isLoading}
+            className="bg-purple-600 hover:bg-purple-700"
+          >
+            {isLoading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : (
+              <Send className="w-5 h-5" />
+            )}
+          </Button>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/ai-platform/template/src/app/dashboard/page.tsx

@@ -0,0 +1,142 @@
+import { Suspense } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { MessageSquare, Zap, Key, CreditCard, BarChart, Settings } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+async function getUsageStats(userId: string) {
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return {
+    apiCalls: 1234,
+    tokensUsed: 45678,
+    modelsUsed: 3,
+    creditsRemaining: 850,
+  }
+}
+
+function StatCard({ title, value, icon: Icon, description }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<{ className?: string }>
+  description?: string
+}) {
+  return (
+    <Card className="p-6 bg-white/5 border-white/10">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-400">{title}</p>
+          <p className="text-2xl font-bold text-white">{value}</p>
+          {description && <p className="text-xs text-gray-500 mt-1">{description}</p>}
+        </div>
+        <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
+          <Icon className="h-6 w-6 text-purple-400" />
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+async function UsageStats({ userId }: { userId: string }) {
+  const stats = await getUsageStats(userId)
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <StatCard title="API Calls" value={stats.apiCalls.toLocaleString()} icon={Zap} description="This month" />
+      <StatCard title="Tokens Used" value={`${(stats.tokensUsed / 1000).toFixed(1)}K`} icon={MessageSquare} description="This month" />
+      <StatCard title="Models Used" value={stats.modelsUsed} icon={BarChart} />
+      <StatCard title="Credits" value={stats.creditsRemaining} icon={CreditCard} description="Remaining" />
+    </div>
+  )
+}
+
+function StatsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      {[...Array(4)].map((_, i) => (
+        <Card key={i} className="p-6 bg-white/5 border-white/10">
+          <div className="animate-pulse">
+            <div className="h-4 bg-gray-700 rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-gray-700 rounded w-1/3"></div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function DashboardPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-white">Dashboard</h1>
+            <p className="text-gray-400 mt-1">Welcome back, {user.name || user.email}</p>
+          </div>
+          <Link href="/chat">
+            <Button className="bg-purple-600 hover:bg-purple-700">
+              <MessageSquare className="w-4 h-4 mr-2" />
+              New Chat
+            </Button>
+          </Link>
+        </div>
+
+        {/* Stats */}
+        <Suspense fallback={<StatsSkeleton />}>
+          <UsageStats userId={user.id} />
+        </Suspense>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <Card className="p-6 bg-white/5 border-white/10">
+            <div className="flex items-center mb-4">
+              <Key className="h-6 w-6 text-purple-400 mr-3" />
+              <h3 className="text-lg font-semibold text-white">API Keys</h3>
+            </div>
+            <p className="text-gray-400 mb-4">
+              Manage your API keys for programmatic access.
+            </p>
+            <Button className="w-full" variant="outline">Manage Keys</Button>
+          </Card>
+
+          <Card className="p-6 bg-white/5 border-white/10">
+            <div className="flex items-center mb-4">
+              <CreditCard className="h-6 w-6 text-purple-400 mr-3" />
+              <h3 className="text-lg font-semibold text-white">Billing</h3>
+            </div>
+            <p className="text-gray-400 mb-4">
+              View usage and manage your subscription.
+            </p>
+            <Button className="w-full" variant="outline">View Billing</Button>
+          </Card>
+
+          <Card className="p-6 bg-white/5 border-white/10">
+            <div className="flex items-center mb-4">
+              <Settings className="h-6 w-6 text-purple-400 mr-3" />
+              <h3 className="text-lg font-semibold text-white">Settings</h3>
+            </div>
+            <p className="text-gray-400 mb-4">
+              Configure your account preferences.
+            </p>
+            <Button className="w-full" variant="outline">Open Settings</Button>
+          </Card>
+        </div>
+
+        {/* Recent Activity */}
+        <Card className="p-6 bg-white/5 border-white/10">
+          <h3 className="text-lg font-semibold text-white mb-4">Recent Conversations</h3>
+          <div className="text-center py-8 text-gray-500">
+            <MessageSquare className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>No recent conversations. Start a new chat!</p>
+            <Link href="/chat">
+              <Button className="mt-4 bg-purple-600 hover:bg-purple-700">Start Chatting</Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/ai-platform/template/src/app/globals.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: oklch(60% 0.25 295);
+  --color-background: oklch(15% 0.02 256);
+  --color-foreground: oklch(95% 0 0);
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --radius: 0.5rem;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}

package/src/templates/web/ai-platform/template/src/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}} - AI Platform',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          {children}
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

package/src/templates/web/ai-platform/template/src/app/page.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import { Bot, Sparkles, Zap, MessageSquare, Code, Brain, ArrowRight, User, LogOut } from 'lucide-react'
+import Link from 'next/link'
+
+const FEATURES = [
+  {
+    icon: MessageSquare,
+    title: 'AI Chat',
+    description: 'Conversational AI with multiple model support',
+    color: 'blue',
+  },
+  {
+    icon: Code,
+    title: 'Code Generation',
+    description: 'Generate and refactor code with AI assistance',
+    color: 'green',
+  },
+  {
+    icon: Brain,
+    title: 'Custom Models',
+    description: 'Fine-tune and deploy your own AI models',
+    color: 'purple',
+  },
+  {
+    icon: Zap,
+    title: 'API Access',
+    description: 'Integrate AI capabilities into your applications',
+    color: 'orange',
+  },
+]
+
+const MODELS = [
+  { name: 'GPT-4o', provider: 'OpenAI', status: 'available' },
+  { name: 'Claude 3.5', provider: 'Anthropic', status: 'available' },
+  { name: 'Gemini Pro', provider: 'Google', status: 'coming_soon' },
+  { name: 'Llama 3', provider: 'Meta', status: 'available' },
+]
+
+export default function Home() {
+  const { user, signOut, loading } = useAuth()
+
+  const projectName = "{{titleCaseName}}"
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      {/* Header */}
+      <header className="border-b border-white/10 bg-black/20 backdrop-blur-sm sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <Link href="/" className="flex items-center gap-2">
+              <Bot className="w-8 h-8 text-purple-400" />
+              <span className="text-2xl font-bold text-white">{projectName}</span>
+            </Link>
+
+            <nav className="hidden md:flex items-center gap-6">
+              <Link href="/models" className="text-gray-300 hover:text-white transition">
+                Models
+              </Link>
+              <Link href="/playground" className="text-gray-300 hover:text-white transition">
+                Playground
+              </Link>
+              <Link href="/docs" className="text-gray-300 hover:text-white transition">
+                Docs
+              </Link>
+            </nav>
+
+            <div className="flex items-center gap-4">
+              {loading ? (
+                <div className="text-sm text-gray-400">Loading...</div>
+              ) : user ? (
+                <div className="flex items-center gap-2">
+                  <Link href="/dashboard">
+                    <Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
+                      <User className="w-4 h-4 mr-2" />
+                      Dashboard
+                    </Button>
+                  </Link>
+                  <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-gray-400 hover:text-white">
+                    <LogOut className="w-4 h-4" />
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex gap-2">
+                  <Link href="/login">
+                    <Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
+                      Sign In
+                    </Button>
+                  </Link>
+                  <Link href="/signup">
+                    <Button size="sm" className="bg-purple-600 hover:bg-purple-700">
+                      Get Started
+                    </Button>
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="max-w-7xl mx-auto px-4 py-16">
+        {/* Hero */}
+        <div className="text-center mb-20">
+          <div className="inline-flex items-center px-4 py-2 rounded-full bg-purple-500/20 text-purple-300 text-sm mb-6">
+            <Sparkles className="w-4 h-4 mr-2" />
+            AI-Powered Platform
+          </div>
+          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
+            Build with <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">AI</span>
+          </h1>
+          <p className="text-xl text-gray-300 max-w-2xl mx-auto mb-8">
+            Access powerful AI models, build intelligent applications, and scale effortlessly.
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Link href="/chat">
+              <Button size="lg" className="bg-purple-600 hover:bg-purple-700">
+                <MessageSquare className="w-5 h-5 mr-2" />
+                Try AI Chat
+              </Button>
+            </Link>
+            <Link href="/playground">
+              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+                Open Playground
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        {/* Features */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
+          {FEATURES.map((feature) => (
+            <Card key={feature.title} className="p-6 bg-white/5 border-white/10 backdrop-blur-sm hover:bg-white/10 transition">
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 bg-${feature.color}-500/20`}>
+                <feature.icon className={`w-6 h-6 text-${feature.color}-400`} />
+              </div>
+              <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
+              <p className="text-gray-400 text-sm">{feature.description}</p>
+            </Card>
+          ))}
+        </div>
+
+        {/* Available Models */}
+        <div className="mb-20">
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h2 className="text-3xl font-bold text-white mb-2">Available Models</h2>
+              <p className="text-gray-400">Access leading AI models from top providers</p>
+            </div>
+            <Link href="/models">
+              <Button variant="ghost" className="text-purple-400 hover:text-purple-300">
+                View All
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </Link>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {MODELS.map((model) => (
+              <Card key={model.name} className="p-4 bg-white/5 border-white/10">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="font-semibold text-white">{model.name}</h3>
+                  <span className={`text-xs px-2 py-1 rounded ${
+                    model.status === 'available'
+                      ? 'bg-green-500/20 text-green-400'
+                      : 'bg-yellow-500/20 text-yellow-400'
+                  }`}>
+                    {model.status === 'available' ? 'Available' : 'Coming Soon'}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-400">{model.provider}</p>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* CTA */}
+        <Card className="p-12 bg-gradient-to-r from-purple-600 to-pink-600 border-0 text-center">
+          <h2 className="text-3xl font-bold text-white mb-4">Ready to Build?</h2>
+          <p className="text-white/80 mb-8 max-w-md mx-auto">
+            Start building AI-powered applications today. Free tier available.
+          </p>
+          <Link href="/signup">
+            <Button size="lg" variant="secondary">
+              Get Started Free
+              <ArrowRight className="w-5 h-5 ml-2" />
+            </Button>
+          </Link>
+        </Card>
+      </div>
+    </main>
+  )
+}

package/src/templates/web/ai-platform/template/src/components/providers/app-providers.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import { DLLProvider } from '@digilogiclabs/app-sdk'
+
+interface AppProvidersProps {
+  children: React.ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+      <DLLProvider
+        config={{
+          auth: {
+            provider: 'supabase',
+          },
+          payments: {
+            provider: 'stripe',
+          },
+        }}
+      >
+        {children}
+      </DLLProvider>
+    </ThemeProvider>
+  )
+}