updated pricing card & nav

Author: Gerome-Elassaad

app/api/chat/codeInterpreter.ts

@@ -0,0 +1,62 @@
+import 'server-only';
+
+import { Sandbox } from '@e2b/code-interpreter';
+
+const E2B_API_KEY = process.env.E2B_API_KEY;
+if (!E2B_API_KEY) {
+  throw new Error('E2B_API_KEY environment variable not found');
+}
+
+const sandboxTimeout = 10 * 60 * 1000;
+
+export async function evaluateCode(
+  sessionID: string,
+  code: string,
+) {
+  const sandbox = await getSandbox(sessionID);
+
+  // Execute the code in a Jupyter Notebook in the sandbox.
+  // https://e2b.dev/docs/code-interpreter/execution
+  const execution = await sandbox.runCode(code, {
+    // We can also use callbacks to handle streaming stdout, stderr, and results from the sandbox.
+    // This is useful if you want to stream the results to client directly.
+    // onStdout,
+    // onStderr,
+    // onResult,
+  });
+
+  return {
+    results: execution.results,
+    stdout: execution.logs.stdout,
+    stderr: execution.logs.stderr,
+    error: execution.error,
+  };
+}
+
+
+async function getSandbox(sessionID: string) {
+  const sandboxes = await Sandbox.list();
+
+  const sandboxID = sandboxes.find(sandbox => sandbox.metadata?.sessionID === sessionID)?.sandboxId;
+
+  if (sandboxID) {
+    const sandbox = await Sandbox.connect(sandboxID, {
+        apiKey: E2B_API_KEY,
+      })
+    await sandbox.setTimeout(sandboxTimeout);
+    return sandbox;
+  } else {
+    const sandbox = await Sandbox.create({
+        apiKey: E2B_API_KEY,
+        metadata: {
+          sessionID,
+        },
+        timeoutMs: sandboxTimeout
+    });
+    return sandbox;
+  }
+}
+
+export function nonEmpty<T>(value: T | null | undefined): value is T {
+  return value !== null && value !== undefined;
+}

app/page.tsx

@@ -342,7 +342,11 @@ export default function Home() {
         />
       )}
 
-      <Sidebar onStateChange={setSidebarOpen} userName={userTeam?.name} userPlan={userTeam?.tier} />
+      <Sidebar
+        onStateChange={setSidebarOpen}
+        userName={userTeam?.name}
+        userPlan={userTeam?.tier}
+      />
 
 
       {/* Main content with left margin to account for collapsed sidebar */}
@@ -420,4 +424,4 @@ export default function Home() {
       </div>
     </main>
   )
-}
+}

components/navbar.tsx

@@ -1,4 +1,3 @@
-// File: components/navbar.tsx
 import Logo from './logo'
 import { Button } from '@/components/ui/button'
 import {
@@ -116,7 +115,7 @@ export function NavBar({
               <DropdownMenuSeparator />
               <DropdownMenuItem
                 onClick={() => {
-                  window.open('https://codinit.dev', '_blank')
+                  window.open('https://codinit.dev/codinit-beta', '_blank')
                 }}
               >
                 <Image

components/pricing.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { PricingCard } from "@/components/ui/pricing-card"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog"
+
+interface PricingModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function PricingModal({ isOpen, onClose }: PricingModalProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-7xl">
+        <DialogHeader className="text-left md:text-center">
+          <DialogTitle className="mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl">
+            Plans made for every developer
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground lg:text-lg mb-6 md:mb-8 lg:mb-12">
+            Start building with our powerful tools. Upgrade anytime as your needs grow.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="rounded-xl flex flex-col justify-between border p-1">
+          <div className="flex flex-col gap-4 md:flex-row">
+            <PricingCard
+              title="Free / Open Source"
+              price="$0 / forever"
+              description="Perfect for individual developers and open source projects."
+              buttonText="Current Plan"
+              buttonVariant="outline"
+              features={[
+                "Unlimited code generation",
+                "All AI models included",
+                "Community support",
+                "Self-hosted deployment",
+                "GitHub integration",
+                "Open source license",
+              ]}
+            />
+
+            <PricingCard
+              title="Pro Developer"
+              price="$9.99 / month"
+              description="Enhanced features for professional developers and teams."
+              buttonText="Start Pro Trial"
+              buttonVariant="default"
+              features={[
+                "Advanced AI models (GPT-4, Claude)",
+                "Priority code generation",
+                "Private cloud hosting",
+                "Advanced debugging tools",
+                "Custom component libraries",
+                "Priority support",
+                "Team collaboration",
+                "Usage analytics",
+              ]}
+            />
+
+            <PricingCard
+              title="Enterprise"
+              price="Custom / month"
+              description="Custom solutions for large development teams and organizations."
+              buttonText="Contact Sales"
+              buttonVariant="default"
+              highlight
+              badge="Most Popular"
+              features={[
+                "Custom AI model fine-tuning",
+                "On-premises deployment",
+                "SSO & enterprise security",
+                "Dedicated support manager",
+                "Custom integrations",
+                "SLA guarantees",
+                "White-label options",
+                "Custom training & onboarding",
+              ]}
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

components/sidebar.tsx

@@ -9,17 +9,12 @@ import {
   Search, 
   Settings, 
   HelpCircle, 
-  User, 
   LogOut,
-  Plus,
-  Calendar,
-  Archive,
-  Star,
-  ChevronDown,
   MoreHorizontal,
   CreditCardIcon
 } from 'lucide-react';
 import Logo from './logo';
+import { PricingModal } from './pricing';
 
 export interface SidebarProps {
   children?: ReactNode;
@@ -157,10 +152,9 @@ const DefaultSidebarContent: React.FC<{
   session: Session | null;
 }> = ({ userName, userPlan, session }) => {
   const [searchQuery, setSearchQuery] = useState('');
+  const [isPricingModalOpen, setIsPricingModalOpen] = useState(false);
 
-  const recentChats = [
-    ''
-  ];
+  const recentChats: string[] = [];
 
   return (
     <div className="flex flex-col h-full bg-background text-foreground">
@@ -220,11 +214,6 @@ const DefaultSidebarContent: React.FC<{
               </div>
             </div>
 
-            {/* Last 30 Days */}
-            <div className="mb-4">
-              <div className="flex items-center gap-2 mb-2">
-                <h4 className="text-xs text-muted-foreground">Last 30 days</h4>
-              </div>
               <div className="space-y-1">
                 {recentChats.slice(1, 6).map((chat, index) => (
                   <div
@@ -257,15 +246,15 @@ const DefaultSidebarContent: React.FC<{
             </div>
           </div>
         </div>
-      </div>
+      
 
       {/* Footer */}
       <div className="border-t">
         {/* Get free tokens, Go Pro, Settings and Help */}
         <div className="p-4 space-y-1">
           <button className="flex items-center gap-2 text-sm text-green-400 hover:text-green-300 transition-colors w-full">
         <div className="w-2 h-2 bg-green-400 rounded-full"></div>
-        Get free tokens
+        <span className="text-sm">Get free tokens</span>
           </button>
           <button className="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-accent transition-colors">
         <CreditCardIcon className="w-4 h-4 text-muted-foreground" />
@@ -287,7 +276,7 @@ const DefaultSidebarContent: React.FC<{
           <div className="flex items-center gap-3">
             <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center flex-shrink-0">
               <span className="text-white font-medium text-sm">
-                {session?.user.user_metadata?.name?.[0] || 'G'}
+                {session?.user.user_metadata?.name?.[0] || ''}
               </span>
             </div>
             <div className="flex-1 min-w-0">
@@ -303,8 +292,13 @@ const DefaultSidebarContent: React.FC<{
             </button>
           </div>
         </div>
-      </div>
+      <PricingModal
+        isOpen={isPricingModalOpen}
+        onClose={() => setIsPricingModalOpen(false)}
+      />
+    </div>
   );
 };
 
+
 export default Sidebar;

components/ui/pricing-card.tsx

@@ -10,6 +10,8 @@ interface PricingCardProps {
   highlight?: boolean;
   highlightLabel?: string;
   buttonVariant?: "default" | "outline";
+  buttonText?: string;
+  badge?: string;
 }
 
 export function PricingCard({
@@ -19,6 +21,8 @@ export function PricingCard({
   features,
   highlight = false,
   buttonVariant = "outline",
+  buttonText = "Get Started",
+  badge,
 }: PricingCardProps) {
   return (
     <div
@@ -29,13 +33,20 @@ export function PricingCard({
       <div className={highlight ? "grid gap-6 sm:grid-cols-2" : ""}>
         <div className="space-y-4">
           <div>
-            <h2 className="font-medium">{title}</h2>
+            <div className="flex justify-between">
+              <h2 className="font-medium">{title}</h2>
+              {badge && (
+                <div className="text-sm font-bold bg-primary text-primary-foreground rounded-full px-3 py-1">
+                  {badge}
+                </div>
+              )}
+            </div>
             <span className="my-3 block text-2xl font-semibold">{price}</span>
             <p className="text-muted-foreground text-sm">{description}</p>
           </div>
 
           <Button asChild className="w-full" variant={buttonVariant}>
-            <Link href="">Get Started</Link>
+            <Link href="">{buttonText}</Link>
           </Button>
         </div>
       </div>

components/ui/spinner.tsx

@@ -0,0 +1,15 @@
+function Spinner() {
+  return (
+    <svg
+      className="animate-spin h-4 w-4 text-white-800"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+  );
+}
+
+export default Spinner;