@digilogiclabs/create-saas-app 1.12.0 → 1.13.0

package/src/templates/web/ui-auth-payments-ai/template/src/app/page.tsx

@@ -36,7 +36,18 @@ import {
   FileText
 } from 'lucide-react'
 import { useAuth } from '@digilogiclabs/saas-factory-auth'
-import { AITextGenerator, AIAudioGenerator, AIVideoGenerator, AIChat, AIProvider } from '@digilogiclabs/saas-factory-ai'
+import { 
+  AIProvider,
+  AIChat,
+  AITextGenerator,
+  AIAudioGenerator, 
+  AIVideoGenerator,
+  AISetupStatus,
+  getAIConfigFromEnv,
+  validateAIConfig,
+  type ChatMessage,
+  type QuickStartOptions 
+} from '@digilogiclabs/saas-factory-ai'
 import Link from 'next/link'
 import { useState } from 'react'
 
@@ -49,7 +60,7 @@ export default function Home() {
   
   // Modern design tokens
   const animations = useAnimationTokens()
-  const glass = useGlassmorphism()
+  const glass = useGlassmorphism({ intensity: 'medium', border: true, accent: true })
   
   const projectName = "{{projectName}}"
   const projectDescription = "{{description}}"
@@ -118,75 +129,63 @@ export default function Home() {
     }
   ]
 
-  const renderAITool = () => {
-    const aiConfig = {
-      apiKey: process.env.NEXT_PUBLIC_AI_API_KEY || '',
-      provider: 'openai' as const,
-      model: 'gpt-4'
-    }
+  const aiConfig = getAIConfigFromEnv()
 
+  const renderAITool = () => {
     switch (activeAITool) {
       case 'chat':
         return (
           <div className={`${glass.card} ${glass.border} rounded-2xl p-6 h-96`}>
-            <AIProvider config={aiConfig}>
-              <AIChat
-                placeholder="Ask me anything..."
-                showTypingIndicator={true}
-                enableFileUpload={true}
-                maxMessages={50}
-                className="h-full"
-              />
-            </AIProvider>
+            <AIChat
+              placeholder="Ask me anything..."
+              showTypingIndicator={true}
+              enableFileUpload={true}
+              maxMessages={50}
+              className="h-full"
+            />
           </div>
         )
       case 'text':
         return (
           <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AIProvider config={aiConfig}>
-              <AITextGenerator
-                placeholder="Describe what you want to generate..."
-                maxLength={2000}
-                showWordCount={true}
-                templates={[
-                  'Blog post',
-                  'Product description',
-                  'Email',
-                  'Social media post',
-                  'Technical documentation'
-                ]}
-                className="min-h-64"
-              />
-            </AIProvider>
+            <AITextGenerator
+              placeholder="Describe what you want to generate..."
+              maxLength={2000}
+              showWordCount={true}
+              templates={[
+                'Blog post',
+                'Product description',
+                'Email',
+                'Social media post',
+                'Technical documentation'
+              ]}
+              className="min-h-64"
+            />
           </div>
         )
       case 'audio':
         return (
           <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AIProvider config={aiConfig}>
-              <AIAudioGenerator
-                placeholder="Describe the audio you want to create..."
-                supportedFormats={['mp3', 'wav', 'ogg']}
-                maxDuration={300}
-                showWaveform={true}
-                className="min-h-64"
-              />
-            </AIProvider>
+            <AIAudioGenerator
+              placeholder="Describe the audio you want to create..."
+              supportedFormats={['mp3', 'wav', 'ogg']}
+              maxDuration={300}
+              showWaveform={true}
+              className="min-h-64"
+            />
           </div>
         )
       case 'video':
         return (
           <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
-            <AIProvider config={aiConfig}>
-              <AIVideoGenerator
-                placeholder="Describe the video you want to create..."
-                supportedFormats={['mp4', 'webm']}
-                maxDuration={60}
-                resolution="1080p"
-                showPreview={true}
-                className="min-h-64"
-              />
-            </AIProvider>
+            <AIVideoGenerator
+              placeholder="Describe the video you want to create..."
+              supportedFormats={['mp4', 'webm']}
+              maxDuration={60}
+              resolution="1080p"
+              showPreview={true}
+              className="min-h-64"
+            />
           </div>
         )
       default:
@@ -195,12 +194,13 @@ export default function Home() {
   }
 
   return (
-    <PageTransition type="fade" duration={300}>
-      <OfflineWrapper
-        cacheStrategy="stale-while-revalidate"
-        showOfflineIndicator={true}
-        backgroundSync={true}
-      >
+    <AIProvider config={aiConfig}>
+      <PageTransition type="fade" duration={300}>
+        <OfflineWrapper
+          cacheStrategy="stale-while-revalidate"
+          showOfflineIndicator={true}
+          backgroundSync={true}
+        >
         <PullToRefresh 
           onRefresh={handleRefresh}
           threshold={80}
@@ -213,6 +213,9 @@ export default function Home() {
             <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
             <div className="relative z-10">
               <MobileContainer className="py-8">
+                {/* AI Configuration Status */}
+                <AISetupStatus className="mb-6" />
+                
                 {/* Simple Auth Status */}
                 {user && (
                   <div className="flex justify-end mb-8">
@@ -286,7 +289,7 @@ export default function Home() {
                           `}
                         >
                           <div className={`mx-auto w-12 h-12 rounded-xl flex items-center justify-center mb-3 ${
-                            isActive ? 'bg-white/20' : `${glass.accent}`
+                            isActive ? 'bg-white/20' : glass.accent
                           }`}>
                             <Icon className={`h-6 w-6 ${isActive ? 'text-white' : `text-${tool.color}-400`}`} />
                           </div>
@@ -376,5 +379,6 @@ export default function Home() {
         </PullToRefresh>
       </OfflineWrapper>
     </PageTransition>
+    </AIProvider>
   )
 }

package/src/templates/web/ui-auth-payments-ai/template/src/app/setup/page.tsx

@@ -53,6 +53,11 @@ interface ServiceConfig {
 export default function SetupPage() {
   const animations = useAnimationTokens()
   const glass = useGlassmorphism()
+  
+  // Static glassmorphism classes to avoid template literal corruption
+  const glassCard = "bg-white/10 backdrop-blur-lg border border-white/20"
+  const glassCardRounded = "bg-white/10 backdrop-blur-lg border border-white/20 rounded-2xl"
+  const glassBackground = "bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20"
   const [copiedVar, setCopiedVar] = useState<string | null>(null)
 
   const projectName = "{{projectName}}"
@@ -340,14 +345,14 @@ const response = await openai.chat.completions.create({
 
   return (
     <PageTransition type="slide" direction="up" duration={300}>
-      <main className={`min-h-screen ${glass.background.primary} relative overflow-hidden`}>
-        <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
+      <main className={`min-h-screen ${glassBackground} relative overflow-hidden`}>
+        <div className="absolute inset-0 bg-gradient-to-tr from-purple-500/10 to-blue-500/10 opacity-30" />
         <div className="relative z-10">
           <MobileContainer className="py-8">
             {/* Header */}
             <div className="flex items-center justify-between mb-8">
               <div className="flex items-center gap-4">
-                <Link href="/" className={`${glass.card} ${glass.border} p-2 rounded-xl ${animations.hover.scale}`}>
+                <Link href="/" className={`${glassCard} p-2 rounded-xl ${animations.hover.scale}`}>
                   <ArrowLeft className="w-5 h-5" />
                 </Link>
                 <div>
@@ -355,13 +360,13 @@ const response = await openai.chat.completions.create({
                   <p className="text-gray-600 dark:text-gray-300">{templateName}</p>
                 </div>
               </div>
-              <div className={`${glass.card} ${glass.border} px-4 py-2 rounded-xl`}>
+              <div className={`${glassCard} px-4 py-2 rounded-xl`}>
                 <span className="text-sm font-medium">{projectName}</span>
               </div>
             </div>
 
             {/* Template Overview */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+            <div className={`${glassCardRounded} p-6 mb-8`}>
               <div className="flex items-center gap-4 mb-4">
                 <div className={`w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center`}>
                   <Zap className="w-6 h-6 text-white" />
@@ -392,7 +397,7 @@ const response = await openai.chat.completions.create({
             </div>
 
             {/* Quick Start */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+            <div className={`${glassCardRounded} p-6 mb-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                 <Zap className="w-5 h-5 text-yellow-400" />
                 Quick Start
@@ -422,7 +427,7 @@ const response = await openai.chat.completions.create({
             </div>
 
             {/* Environment Variables */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-8`}>
+            <div className={`${glassCardRounded} p-6 mb-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                 <Key className="w-5 h-5 text-blue-400" />
                 Environment Variables
@@ -461,7 +466,7 @@ const response = await openai.chat.completions.create({
                 const ServiceIcon = service.icon
                 
                 return (
-                  <div key={service.name} className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
+                  <div key={service.name} className={`${glassCardRounded} p-6`}>
                     <div className="flex items-start justify-between mb-4">
                       <div className="flex items-center gap-3">
                         <div className={`w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center`}>
@@ -559,7 +564,7 @@ const response = await openai.chat.completions.create({
             </div>
 
             {/* Next Steps */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mt-8`}>
+            <div className={`${glassCardRounded} p-6 mt-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                 <Zap className="w-5 h-5 text-yellow-400" />
                 Next Steps
@@ -570,7 +575,7 @@ const response = await openai.chat.completions.create({
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Link 
                   href="/dev-setup"
-                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
                 >
                   <Code2 className="w-8 h-8 text-purple-400 mb-2" />
                   <h4 className="font-medium">Development & Deployment</h4>
@@ -578,7 +583,7 @@ const response = await openai.chat.completions.create({
                 </Link>
                 <Link 
                   href="/"
-                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
                 >
                   <Zap className="w-8 h-8 text-blue-400 mb-2" />
                   <h4 className="font-medium">Start Building</h4>
@@ -588,7 +593,7 @@ const response = await openai.chat.completions.create({
             </div>
 
             {/* Additional Resources */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mt-8`}>
+            <div className={`${glassCardRounded} p-6 mt-8`}>
               <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                 <BookOpen className="w-5 h-5 text-green-400" />
                 Additional Resources
@@ -596,7 +601,7 @@ const response = await openai.chat.completions.create({
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <a 
                   href="https://docs.digilogiclabs.com" 
-                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
                 >
                   <FileText className="w-8 h-8 text-blue-400 mb-2" />
                   <h4 className="font-medium">Documentation</h4>
@@ -604,7 +609,7 @@ const response = await openai.chat.completions.create({
                 </a>
                 <a 
                   href="https://github.com/digilogiclabs/examples" 
-                  className={`${glass.card} ${glass.border} p-4 rounded-xl ${animations.hover.scale} block`}
+                  className={`${glassCard} p-4 rounded-xl ${animations.hover.scale} block`}
                 >
                   <Code2 className="w-8 h-8 text-purple-400 mb-2" />
                   <h4 className="font-medium">Examples</h4>

package/src/templates/web/ui-auth-payments-ai/template/src/lib/supabase/server.ts

@@ -0,0 +1,72 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextRequest, NextResponse } from 'next/server'
+
+export function createSupabaseServerClient(request: NextRequest) {
+  let response = NextResponse.next({
+    request: {
+      headers: request.headers,
+    },
+  })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return request.cookies.get(name)?.value
+        },
+        set(name: string, value: string, options: any) {
+          request.cookies.set({
+            name,
+            value,
+            ...options,
+          })
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          })
+          response.cookies.set({
+            name,
+            value,
+            ...options,
+          })
+        },
+        remove(name: string, options: any) {
+          request.cookies.set({
+            name,
+            value: '',
+            ...options,
+          })
+          response = NextResponse.next({
+            request: {
+              headers: request.headers,
+            },
+          })
+          response.cookies.set({
+            name,
+            value: '',
+            ...options,
+          })
+        },
+      },
+    }
+  )
+
+  return { supabase, response }
+}
+
+export function createSupabaseServerComponentClient() {
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return require('next/headers').cookies().get(name)?.value
+        },
+      },
+    }
+  )
+}

package/src/templates/web/ui-auth-payments-audio/template/package.json

@@ -17,9 +17,9 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.2",
-    "@digilogiclabs/saas-factory-auth": "^1.0.0",
-    "@digilogiclabs/saas-factory-payments": "^1.0.0",
+    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-auth": "^1.0.1",
+    "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "stripe": "^14.0.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",

package/src/templates/web/ui-auth-payments-video/template/package.json

@@ -17,9 +17,9 @@
     "next": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@digilogiclabs/saas-factory-ui": "^0.18.2",
-    "@digilogiclabs/saas-factory-auth": "^1.0.0",
-    "@digilogiclabs/saas-factory-payments": "^1.0.0",
+    "@digilogiclabs/saas-factory-ui": "^0.18.4",
+    "@digilogiclabs/saas-factory-auth": "^1.0.1",
+    "@digilogiclabs/saas-factory-payments": "^1.1.0",
     "stripe": "^14.0.0",
     "tailwindcss": "^3.3.0",
     "autoprefixer": "^10.4.16",