@digilogiclabs/create-saas-app 2.10.0 → 2.12.0

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

@@ -0,0 +1,186 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Bot, MessageSquare, Code, Eye, Sparkles, Zap } from 'lucide-react'
+import Link from 'next/link'
+
+interface Model {
+  id: string
+  name: string
+  provider: 'OpenAI' | 'Anthropic' | 'Google'
+  description: string
+  capabilities: { label: string; icon: React.ComponentType<{ className?: string }> }[]
+  pricing: string
+  badge: string
+}
+
+const MODELS: Model[] = [
+  {
+    id: 'gpt-4o',
+    name: 'GPT-4o',
+    provider: 'OpenAI',
+    description: 'Most capable OpenAI model with vision and advanced reasoning.',
+    capabilities: [
+      { label: 'Chat', icon: MessageSquare },
+      { label: 'Code', icon: Code },
+      { label: 'Vision', icon: Eye },
+    ],
+    pricing: '~2.5M tokens/$1',
+    badge: 'bg-green-500/20 text-green-400',
+  },
+  {
+    id: 'gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    provider: 'OpenAI',
+    description: 'Fast and affordable for everyday tasks and simple queries.',
+    capabilities: [
+      { label: 'Chat', icon: MessageSquare },
+      { label: 'Code', icon: Code },
+    ],
+    pricing: '~16.6M tokens/$1',
+    badge: 'bg-green-500/20 text-green-400',
+  },
+  {
+    id: 'claude-3-5-sonnet',
+    name: 'Claude 3.5 Sonnet',
+    provider: 'Anthropic',
+    description: 'Excellent at analysis, writing, and complex reasoning tasks.',
+    capabilities: [
+      { label: 'Chat', icon: MessageSquare },
+      { label: 'Code', icon: Code },
+      { label: 'Vision', icon: Eye },
+      { label: 'Analysis', icon: Sparkles },
+    ],
+    pricing: '~3.3M tokens/$1',
+    badge: 'bg-orange-500/20 text-orange-400',
+  },
+  {
+    id: 'claude-3-haiku',
+    name: 'Claude 3 Haiku',
+    provider: 'Anthropic',
+    description: 'Fastest Anthropic model, great for quick responses and automation.',
+    capabilities: [
+      { label: 'Chat', icon: MessageSquare },
+      { label: 'Code', icon: Code },
+    ],
+    pricing: '~20M tokens/$1',
+    badge: 'bg-orange-500/20 text-orange-400',
+  },
+  {
+    id: 'gemini-1-5-pro',
+    name: 'Gemini 1.5 Pro',
+    provider: 'Google',
+    description: 'Long context window with multimodal support from Google.',
+    capabilities: [
+      { label: 'Chat', icon: MessageSquare },
+      { label: 'Code', icon: Code },
+      { label: 'Vision', icon: Eye },
+      { label: 'Analysis', icon: Sparkles },
+    ],
+    pricing: '~4M tokens/$1',
+    badge: 'bg-blue-500/20 text-blue-400',
+  },
+  {
+    id: 'gemini-flash',
+    name: 'Gemini Flash',
+    provider: 'Google',
+    description: 'Ultra-fast responses with efficient token usage.',
+    capabilities: [
+      { label: 'Chat', icon: MessageSquare },
+      { label: 'Code', icon: Code },
+    ],
+    pricing: '~26.6M tokens/$1',
+    badge: 'bg-blue-500/20 text-blue-400',
+  },
+]
+
+const PROVIDERS = ['All', 'OpenAI', 'Anthropic', 'Google'] as const
+
+export default function ModelsPage() {
+  const [filter, setFilter] = useState<string>('All')
+
+  const filteredModels = filter === 'All'
+    ? MODELS
+    : MODELS.filter(m => m.provider === filter)
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">AI Models</h1>
+          <p className="text-muted-foreground mt-1">
+            Browse available models and find the right one for your use case.
+          </p>
+        </div>
+
+        {/* Filter */}
+        <div className="flex flex-wrap gap-2 mb-8">
+          {PROVIDERS.map((provider) => (
+            <Button
+              key={provider}
+              variant={filter === provider ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setFilter(provider)}
+            >
+              {provider}
+            </Button>
+          ))}
+        </div>
+
+        {/* Models Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredModels.map((model) => (
+            <Card key={model.id} className="p-6 bg-secondary border-border flex flex-col">
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
+                    <Bot className="w-5 h-5 text-primary" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-foreground">{model.name}</h3>
+                    <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${model.badge}`}>
+                      {model.provider}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <p className="text-sm text-muted-foreground mb-4 flex-1">
+                {model.description}
+              </p>
+
+              {/* Capabilities */}
+              <div className="flex flex-wrap gap-2 mb-4">
+                {model.capabilities.map((cap) => (
+                  <span
+                    key={cap.label}
+                    className="inline-flex items-center gap-1 text-xs px-2 py-1 bg-muted rounded-md text-muted-foreground"
+                  >
+                    <cap.icon className="w-3 h-3" />
+                    {cap.label}
+                  </span>
+                ))}
+              </div>
+
+              {/* Pricing */}
+              <div className="flex items-center gap-1 text-sm text-muted-foreground mb-4">
+                <Zap className="w-4 h-4 text-primary" />
+                <span>{model.pricing}</span>
+              </div>
+
+              {/* Action */}
+              <Link href={`/chat?model=${model.id}`}>
+                <Button className="w-full">
+                  <MessageSquare className="w-4 h-4 mr-2" />
+                  Try in Chat
+                </Button>
+              </Link>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,251 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Play, Loader2, Clock, Hash, Bot } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import Link from 'next/link'
+
+const MODELS = [
+  { id: 'gpt-4o', name: 'GPT-4o' },
+  { id: 'gpt-4o-mini', name: 'GPT-4o Mini' },
+  { id: 'claude-3-5-sonnet', name: 'Claude 3.5 Sonnet' },
+  { id: 'claude-3-haiku', name: 'Claude 3 Haiku' },
+  { id: 'gemini-1-5-pro', name: 'Gemini 1.5 Pro' },
+  { id: 'gemini-flash', name: 'Gemini Flash' },
+]
+
+const DEMO_RESPONSES: Record<string, string> = {
+  'gpt-4o': 'This is a simulated response from GPT-4o. In production, this would connect to the OpenAI API and return a real completion based on your prompt and parameters.',
+  'gpt-4o-mini': 'This is a simulated response from GPT-4o Mini. This model is optimized for speed and cost-efficiency while maintaining good quality output.',
+  'claude-3-5-sonnet': 'This is a simulated response from Claude 3.5 Sonnet. Known for nuanced analysis and careful reasoning, this model excels at complex tasks.',
+  'claude-3-haiku': 'This is a simulated response from Claude 3 Haiku. Designed for fast, concise responses ideal for automation and quick queries.',
+  'gemini-1-5-pro': 'This is a simulated response from Gemini 1.5 Pro. With its large context window, this model handles long documents and complex multi-turn conversations well.',
+  'gemini-flash': 'This is a simulated response from Gemini Flash. Optimized for ultra-fast inference, this model provides quick responses at minimal cost.',
+}
+
+export default function PlaygroundPage() {
+  const { user, loading: authLoading } = useAuth()
+  const [model, setModel] = useState(MODELS[0].id)
+  const [systemPrompt, setSystemPrompt] = useState('You are a helpful AI assistant.')
+  const [userMessage, setUserMessage] = useState('')
+  const [temperature, setTemperature] = useState(0.7)
+  const [maxTokens, setMaxTokens] = useState(1024)
+  const [response, setResponse] = useState('')
+  const [isRunning, setIsRunning] = useState(false)
+  const [tokenCount, setTokenCount] = useState<number | null>(null)
+  const [responseTime, setResponseTime] = useState<number | null>(null)
+
+  const handleRun = async () => {
+    if (!userMessage.trim() || isRunning) return
+
+    setIsRunning(true)
+    setResponse('')
+    setTokenCount(null)
+    setResponseTime(null)
+
+    const start = Date.now()
+
+    await new Promise(resolve => setTimeout(resolve, 500 + Math.random() * 500))
+
+    const demoResponse = DEMO_RESPONSES[model] || 'Response from the selected model.'
+    const fullResponse = `${demoResponse}\n\nParameters used:\n- Model: ${model}\n- Temperature: ${temperature}\n- Max Tokens: ${maxTokens}\n- System Prompt: "${systemPrompt}"\n- User Message: "${userMessage}"`
+
+    setResponse(fullResponse)
+    setTokenCount(Math.floor(fullResponse.split(/\s+/).length * 1.3))
+    setResponseTime(Date.now() - start)
+    setIsRunning(false)
+  }
+
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <Loader2 className="w-8 h-8 text-primary animate-spin" />
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <Card className="p-8 bg-secondary border-border text-center max-w-md">
+          <Bot className="w-16 h-16 text-primary mx-auto mb-4" />
+          <h2 className="text-2xl font-bold text-foreground mb-2">Sign in to use Playground</h2>
+          <p className="text-muted-foreground mb-6">
+            Create an account to test AI models in the playground.
+          </p>
+          <div className="flex gap-2 justify-center">
+            <Link href="/login">
+              <Button variant="outline">Sign In</Button>
+            </Link>
+            <Link href="/signup">
+              <Button>Sign Up</Button>
+            </Link>
+          </div>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">API Playground</h1>
+          <p className="text-muted-foreground mt-1">
+            Test different models and parameters before integrating into your app.
+          </p>
+        </div>
+
+        {/* Split Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Left Panel - Request */}
+          <Card className="p-6 bg-secondary border-border">
+            <h2 className="text-lg font-semibold text-foreground mb-4">Request</h2>
+
+            {/* Model Selection */}
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+                Model
+              </label>
+              <select
+                value={model}
+                onChange={(e) => setModel(e.target.value)}
+                className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-foreground text-sm focus:ring-2 focus:ring-ring"
+              >
+                {MODELS.map((m) => (
+                  <option key={m.id} value={m.id} className="bg-card">
+                    {m.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* System Prompt */}
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+                System Prompt
+              </label>
+              <textarea
+                value={systemPrompt}
+                onChange={(e) => setSystemPrompt(e.target.value)}
+                rows={3}
+                className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-foreground text-sm placeholder-muted-foreground focus:ring-2 focus:ring-ring resize-none"
+                placeholder="You are a helpful assistant..."
+              />
+            </div>
+
+            {/* User Message */}
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+                User Message
+              </label>
+              <textarea
+                value={userMessage}
+                onChange={(e) => setUserMessage(e.target.value)}
+                rows={4}
+                className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-foreground text-sm placeholder-muted-foreground focus:ring-2 focus:ring-ring resize-none"
+                placeholder="Enter your message..."
+              />
+            </div>
+
+            {/* Temperature */}
+            <div className="mb-4">
+              <div className="flex items-center justify-between mb-1.5">
+                <label className="text-sm font-medium text-muted-foreground">Temperature</label>
+                <span className="text-sm text-foreground font-mono">{temperature.toFixed(1)}</span>
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.1"
+                value={temperature}
+                onChange={(e) => setTemperature(parseFloat(e.target.value))}
+                className="w-full accent-primary"
+              />
+              <div className="flex justify-between text-xs text-muted-foreground mt-1">
+                <span>Precise</span>
+                <span>Creative</span>
+              </div>
+            </div>
+
+            {/* Max Tokens */}
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+                Max Tokens
+              </label>
+              <input
+                type="number"
+                value={maxTokens}
+                onChange={(e) => setMaxTokens(parseInt(e.target.value) || 0)}
+                min={1}
+                max={4096}
+                className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-foreground text-sm focus:ring-2 focus:ring-ring"
+              />
+            </div>
+
+            {/* Run Button */}
+            <Button
+              className="w-full"
+              onClick={handleRun}
+              disabled={!userMessage.trim() || isRunning}
+            >
+              {isRunning ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Running...
+                </>
+              ) : (
+                <>
+                  <Play className="w-4 h-4 mr-2" />
+                  Run
+                </>
+              )}
+            </Button>
+          </Card>
+
+          {/* Right Panel - Response */}
+          <Card className="p-6 bg-secondary border-border flex flex-col">
+            <h2 className="text-lg font-semibold text-foreground mb-4">Response</h2>
+
+            {/* Response Area */}
+            <div className="bg-muted rounded-lg p-4 flex-1 min-h-[300px] font-mono text-sm text-foreground whitespace-pre-wrap overflow-auto">
+              {isRunning ? (
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  Generating response...
+                </div>
+              ) : response ? (
+                response
+              ) : (
+                <span className="text-muted-foreground">
+                  Response will appear here after you click Run.
+                </span>
+              )}
+            </div>
+
+            {/* Metadata */}
+            {(tokenCount !== null || responseTime !== null) && (
+              <div className="flex gap-4 mt-4 pt-4 border-t border-border">
+                {tokenCount !== null && (
+                  <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                    <Hash className="w-4 h-4" />
+                    <span>{tokenCount} tokens</span>
+                  </div>
+                )}
+                {responseTime !== null && (
+                  <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                    <Clock className="w-4 h-4" />
+                    <span>{responseTime}ms</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,190 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { User, Key, CreditCard, Copy, Eye, EyeOff, Trash2, Plus, Zap } from 'lucide-react'
+
+const MOCK_KEYS = [
+  { id: '1', name: 'Production', key: 'sk-proj-abc...xyz', created: '2026-01-15', lastUsed: '2 hours ago' },
+  { id: '2', name: 'Development', key: 'sk-proj-def...uvw', created: '2026-02-20', lastUsed: '3 days ago' },
+]
+
+export default function SettingsPage() {
+  const [activeTab, setActiveTab] = useState<'profile' | 'keys' | 'billing'>('profile')
+  const [name, setName] = useState('Test User')
+  const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set())
+
+  const toggleReveal = (id: string) => {
+    setRevealedKeys(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const tabs = [
+    { id: 'profile' as const, label: 'Profile', icon: User },
+    { id: 'keys' as const, label: 'API Keys', icon: Key },
+    { id: 'billing' as const, label: 'Billing', icon: CreditCard },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-8">
+        <h1 className="text-3xl font-bold text-foreground mb-8">Settings</h1>
+
+        {/* Tabs */}
+        <div className="flex gap-1 mb-8 border-b border-border" role="tablist">
+          {tabs.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              role="tab"
+              aria-selected={activeTab === id}
+              onClick={() => setActiveTab(id)}
+              className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px ${
+                activeTab === id
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <Icon className="w-4 h-4" />
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {/* Profile Tab */}
+        {activeTab === 'profile' && (
+          <Card className="p-6 bg-secondary border-border">
+            <h2 className="text-lg font-semibold text-foreground mb-6">Profile Information</h2>
+            <div className="space-y-4 max-w-md">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-1.5">Name</label>
+                <input
+                  id="name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1.5">Email</label>
+                <input
+                  id="email"
+                  type="email"
+                  value="user@example.com"
+                  readOnly
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-muted text-muted-foreground cursor-not-allowed"
+                />
+                <p className="text-xs text-muted-foreground mt-1">Contact support to change your email.</p>
+              </div>
+              <Button className="mt-4">Save Changes</Button>
+            </div>
+          </Card>
+        )}
+
+        {/* API Keys Tab */}
+        {activeTab === 'keys' && (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <p className="text-sm text-muted-foreground">
+                API keys allow programmatic access to the platform. Keep them secret.
+              </p>
+              <Button size="sm">
+                <Plus className="w-4 h-4 mr-1" />
+                Create Key
+              </Button>
+            </div>
+
+            <div className="space-y-3">
+              {MOCK_KEYS.map((apiKey) => (
+                <Card key={apiKey.id} className="p-4 bg-secondary border-border">
+                  <div className="flex items-center justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-1">
+                        <span className="font-medium text-foreground">{apiKey.name}</span>
+                        <span className="text-xs text-muted-foreground">Created {apiKey.created}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <code className="text-sm bg-muted px-2 py-0.5 rounded font-mono text-muted-foreground">
+                          {revealedKeys.has(apiKey.id) ? 'sk-proj-abcdef1234567890xyz' : apiKey.key}
+                        </code>
+                        <button
+                          onClick={() => toggleReveal(apiKey.id)}
+                          className="text-muted-foreground hover:text-foreground"
+                          aria-label={revealedKeys.has(apiKey.id) ? 'Hide key' : 'Show key'}
+                        >
+                          {revealedKeys.has(apiKey.id) ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                        </button>
+                        <button className="text-muted-foreground hover:text-foreground" aria-label="Copy key">
+                          <Copy className="w-4 h-4" />
+                        </button>
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-1">Last used {apiKey.lastUsed}</p>
+                    </div>
+                    <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive/80" aria-label="Delete key">
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Billing Tab */}
+        {activeTab === 'billing' && (
+          <div className="space-y-6">
+            <Card className="p-6 bg-secondary border-border">
+              <div className="flex items-center justify-between mb-4">
+                <div>
+                  <h2 className="text-lg font-semibold text-foreground">Free Tier</h2>
+                  <p className="text-sm text-muted-foreground">Your current plan</p>
+                </div>
+                <span className="text-xs px-2.5 py-1 rounded-full bg-primary/10 text-primary font-medium">Active</span>
+              </div>
+
+              <div className="mb-4">
+                <div className="flex items-center justify-between text-sm mb-1">
+                  <span className="text-muted-foreground">Token usage this month</span>
+                  <span className="text-foreground font-medium">45,678 / 100,000</span>
+                </div>
+                <div className="w-full h-2 rounded-full bg-muted overflow-hidden">
+                  <div className="h-full rounded-full bg-primary" style={{ width: '46%' }} />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-3 gap-4 pt-4 border-t border-border">
+                <div>
+                  <p className="text-xs text-muted-foreground">API Calls</p>
+                  <p className="text-lg font-bold text-foreground">1,234</p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">Models Used</p>
+                  <p className="text-lg font-bold text-foreground">3</p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">Avg Response</p>
+                  <p className="text-lg font-bold text-foreground">1.2s</p>
+                </div>
+              </div>
+            </Card>
+
+            <Card className="p-6 bg-gradient-to-r from-brand-from/10 via-brand-via/10 to-brand-to/10 border-primary/20">
+              <div className="flex items-center gap-3 mb-3">
+                <Zap className="w-5 h-5 text-primary" />
+                <h3 className="font-semibold text-foreground">Upgrade to Pro</h3>
+              </div>
+              <p className="text-sm text-muted-foreground mb-4">
+                Get 1M tokens/month, all models, priority support, and custom fine-tuning.
+              </p>
+              <Button>Upgrade — $29/month</Button>
+            </Card>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}