feat: UI + Logic Improvements

apps/masterbots.ai/app/actions/ai-executers.ts

@@ -4,7 +4,7 @@ import { parseWordwareResponse } from '@/components/shared/wordware-chat'
 import { wordwareFlows } from '@/lib/constants/wordware-flows'
 import type { aiTools } from '@/lib/helpers/ai-schemas'
 import { validateAndSanitizeJson } from '@/lib/helpers/ai-streams'
-import { WordWareDescribeDAtaResponse } from '@/types/wordware-flows.types'
+import type { WordWareDescribeDAtaResponse } from '@/types/wordware-flows.types'
 import axios from 'axios'
 import type { z } from 'zod'
 import { subtractChatbotMetadataLabels } from '.'

apps/masterbots.ai/app/auth/forgot-password/page.tsx

@@ -1,10 +1,43 @@
+'use client'
+
 import ForgotPasswordForm from '@/components/auth/forgot-password-form'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
 
 export default function ForgotPasswordPage() {
   return (
-    <div className="container max-w-md mx-auto mt-10">
-      <h1 className="mb-4 text-2xl font-bold">Forgot Password</h1>
-      <ForgotPasswordForm />
-    </div>
+    <motion.div
+      className="flex flex-col min-h-[calc(100vh-4rem)] items-center py-6 sm:py-10"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* Logo container with animation */}
+      <motion.div
+        className="w-full max-w-[320px] sm:max-w-[500px] md:max-w-[726px] relative aspect-[726/200] mb-6 sm:mb-10"
+        initial={{ y: 20 }}
+        animate={{ y: 0 }}
+        transition={{ duration: 0.4, delay: 0.1 }}
+      >
+        <Image
+          src="/images/masterbotslogo.png"
+          fill
+          priority
+          alt="Masterbots Logo"
+          className="object-contain"
+        />
+      </motion.div>
+
+      {/* Form container with animation and enhanced responsiveness */}
+      <motion.div
+        className="w-full max-w-[min(100%,400px)] px-4 space-y-6"
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.2 }}
+      >
+          <h1 className="mb-4 text-2xl font-bold">Forgot Password</h1>
+          <ForgotPasswordForm />
+      </motion.div>
+    </motion.div>
   )
-}
+}

apps/masterbots.ai/app/auth/reset-password/page.tsx

@@ -1,17 +1,50 @@
+'use client'
+
 import { Suspense } from 'react'
 import ResetPasswordForm from '@/components/auth/reset-password-form'
+import { motion } from 'framer-motion'
+import Image from 'next/image'
 
 export default function ResetPasswordPage({
   searchParams
 }: {
   searchParams: { token: string }
 }) {
   return (
-    <div className="container max-w-md mx-auto mt-10">
-      <h1 className="mb-4 text-2xl font-bold">Reset Password</h1>
-      <Suspense fallback={<div>Loading...</div>}>
-        <ResetPasswordForm token={searchParams.token} />
-      </Suspense>
-    </div>
+    <motion.div
+      className="flex flex-col min-h-[calc(100vh-4rem)] items-center py-6 sm:py-10"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* Logo container with animation */}
+      <motion.div
+        className="w-full max-w-[320px] sm:max-w-[500px] md:max-w-[726px] relative aspect-[726/200] mb-6 sm:mb-10"
+        initial={{ y: 20 }}
+        animate={{ y: 0 }}
+        transition={{ duration: 0.4, delay: 0.1 }}
+      >
+        <Image
+          src="/images/masterbotslogo.png"
+          fill
+          priority
+          alt="Masterbots Logo"
+          className="object-contain"
+        />
+      </motion.div>
+
+      {/* Form container with animation and enhanced responsiveness */}
+      <motion.div
+        className="w-full max-w-[min(100%,400px)] px-4 space-y-6"
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.2 }}
+      >
+          <h1 className="mb-4 text-2xl font-bold">Reset Password</h1>
+          <Suspense fallback={<div>Loading...</div>}>
+            <ResetPasswordForm token={searchParams.token} />
+          </Suspense>
+      </motion.div>
+    </motion.div>
   )
-}
+}

apps/masterbots.ai/app/auth/signin/page.tsx

@@ -1,3 +1,5 @@
+// app/auth/signin/page.tsx
+
 'use client'
 
 import Link from 'next/link'
@@ -10,36 +12,40 @@ export default function SignInPage() {
   const verified = searchParams.get('verified')
 
   return (
-    <div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center py-10">
-      <div
-        className="relative flex justify-center w-full max-w-[726px] py-4 text-center "
-        style={{ height: 200 }}
-      >
+    <div className="flex flex-col min-h-[calc(100vh-4rem)] items-center py-6 sm:py-10">
+      <div className="w-full max-w-[320px] sm:max-w-[500px] md:max-w-[726px] relative aspect-[726/200] mb-6 sm:mb-10">
         <Image
           src="/images/masterbotslogo.png"
-          fill={true}
+          fill
+          priority
           alt="Masterbots Logo"
-          style={{ maxWidth: 726, objectFit: 'contain' }}
-          className="flex self-center"
+          className="object-contain"
         />
       </div>
-      <div className="max-w-md mx-auto space-y-6">
+
+      <div className="w-full max-w-[min(100%,400px)] px-4 space-y-6">
         {verified && (
           <div className="p-4 text-sm text-center text-green-800 rounded-lg bg-green-50 dark:bg-green-900/30 dark:text-green-200">
             <p className="font-medium">Email verified successfully!</p>
             <p>Please sign in to access your account.</p>
           </div>
         )}
+
         <div className="space-y-2 text-center">
-          <p className="text-muted-foreground">
+          <p className="text-sm sm:text-base text-muted-foreground">
             Enter your email and password to access your account.
           </p>
         </div>
+
         <SignInForm />
+
         <div className="space-y-4">
           <div className="text-sm text-center text-muted-foreground">
             Don&apos;t have an account?{' '}
-            <Link href="/auth/signup" className="underline" prefetch={false}>
+            <Link 
+              href="/auth/signup" 
+              className="underline transition-colors hover:text-primary" 
+            >
               Sign up
             </Link>
           </div>

apps/masterbots.ai/app/auth/signup/page.tsx

@@ -1,29 +1,60 @@
+'use client'
+
 import Image from 'next/image'
 import SignUpForm from '@/components/auth/signup-form'
+import { motion } from 'framer-motion'
 
 export default function SignUpPage() {
   return (
-    <div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center py-10">
-      <div
-        className="relative flex justify-center w-full max-w-[726px] py-4 text-center "
-        style={{ height: 200 }}
+    <motion.div 
+      className="flex flex-col min-h-[calc(100vh-4rem)] items-center py-6 sm:py-10"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* Logo container with animation */}
+      <motion.div 
+        className="w-full max-w-[320px] sm:max-w-[500px] md:max-w-[726px] relative aspect-[726/200] mb-6 sm:mb-10"
+        initial={{ y: 20 }}
+        animate={{ y: 0 }}
+        transition={{ duration: 0.4, delay: 0.1 }}
       >
         <Image
           src="/images/masterbotslogo.png"
-          fill={true}
+          fill
+          priority
           alt="Masterbots Logo"
-          style={{ maxWidth: 726, objectFit: 'contain' }}
-          className="flex self-center"
+          className="object-contain"
         />
-      </div>
-      <div className="max-w-md mx-auto space-y-6">
+      </motion.div>
+
+      {/* Form container with animation and enhanced responsiveness */}
+      <motion.div 
+        className="w-full max-w-[min(100%,400px)] px-4 space-y-6"
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.2 }}
+      >
         <div className="space-y-2 text-center">
-          <p className="text-muted-foreground">
+          <p className="text-sm sm:text-base text-muted-foreground">
             Enter your email and password to create your account.
           </p>
         </div>
+
         <SignUpForm />
-      </div>
-    </div>
+
+        {/* Optional: Add terms and conditions notice */}
+        <p className="mt-6 text-xs text-center text-muted-foreground">
+          By creating an account, you agree to our{' '}
+          <a href="/terms#terms" className="underline hover:text-primary">
+            Terms of Service
+          </a>{' '}
+          and{' '}
+          <a href="/terms#privacy" className="underline hover:text-primary">
+            Privacy Policy
+          </a>
+        </p>
+      </motion.div>
+    </motion.div>
   )
 }

apps/masterbots.ai/app/u/[slug]/t/page.tsx

@@ -1,7 +1,7 @@
 import { getBrowseThreads, getUserInfoFromBrowse } from '@/services/hasura'
 import BrowseUserDetails from '@/components/routes/browse/browse-user-details'
 import BrowseSpecificThreadList from '@/components/routes/browse/browse-specific-thread-list'
-import { Metadata } from 'next'
+import type { Metadata } from 'next'
 import { generateMetadataFromSEO } from '@/lib/metadata'
 
 const PAGE_SIZE = 50
@@ -19,7 +19,7 @@ export default async function BotThreadsPage({
     limit: PAGE_SIZE
   })
   return (
-    <div className="w-full py-5">
+    <div className="w-full">
       <BrowseUserDetails user={threads?.[0].user} />
       <BrowseSpecificThreadList
         initialThreads={threads}

apps/masterbots.ai/components/auth/forgot-password-form.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { useState } from 'react'
+import type React from 'react'
+import { useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'

apps/masterbots.ai/components/auth/reset-password-form.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import React from 'react'
+import type React from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { toast } from 'react-hot-toast'
 import { useRouter } from 'next/navigation'
-import PasswordStrengthMeter from '@/components/shared/password-strength-meter'
+import { PasswordStrengthMeter } from '@/components/shared/password-strength-meter'
 import { isPasswordStrong } from '@/lib/password'
 import { Eye, EyeOff } from 'lucide-react'
 import { useSetState } from 'react-use'
@@ -146,3 +146,4 @@ export default function ResetPasswordForm({ token }: { token: string }) {
     </form>
   )
 }
+

apps/masterbots.ai/components/auth/signin-form.tsx

@@ -9,11 +9,12 @@ import { signIn } from 'next-auth/react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
 
 export default function SignInForm() {
   const router = useRouter()
-
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [showPassword, setShowPassword] = useState(false)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -54,7 +55,22 @@ export default function SignInForm() {
         <Label htmlFor="password" variant="required">
           Password
         </Label>
-        <Input id="password" name="password" type="password" required />
+        <div className="relative">
+          <Input 
+            id="password" 
+            name="password" 
+            type={showPassword ? 'text' : 'password'} 
+            required 
+            className="pr-10"
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600"
+          >
+            {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+          </button>
+        </div>
       </div>
       <Button type="submit" className="w-full">
         Sign In
@@ -77,4 +93,4 @@ export default function SignInForm() {
       )}
     </form>
   )
-}
+}