create-better-t-stack 3.4.1 → 3.4.2-canary.281ca96d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "3.4.1",
+  "version": "3.4.2-canary.281ca96d",
   "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
   "type": "module",
   "license": "MIT",

package/templates/api/orpc/server/package.json.hbs

@@ -2,18 +2,14 @@
   "name": "@{{projectName}}/api",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "default": "./src/index.ts"
     },
     "./*": {
-      "types": "./dist/*.d.ts",
       "default": "./src/*.ts"
     }
   },
   "type": "module",
-  "scripts": {
-    "build": "tsdown"
-  },
+  "scripts": {},
   "devDependencies": {},
   "peerDependencies": {
     "typescript": "^5"

package/templates/api/orpc/server/tsconfig.json.hbs

@@ -5,9 +5,6 @@
     "declarationMap": true,
     "sourceMap": true,
     "outDir": "dist",
-    "composite": true{{#if (eq serverDeploy "wrangler")}},
-    "types": [
-      "../../apps/server/worker-configuration.d.ts"
-    ]{{/if}}
+    "composite": true
   }
 }

package/templates/api/trpc/server/package.json.hbs

@@ -2,18 +2,14 @@
   "name": "@{{projectName}}/api",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "default": "./src/index.ts"
     },
     "./*": {
-      "types": "./dist/*.d.ts",
       "default": "./src/*.ts"
     }
   },
   "type": "module",
-  "scripts": {
-    "build": "tsdown"
-  },
+  "scripts": {},
   "devDependencies": {},
   "peerDependencies": {
     "typescript": "^5"

package/templates/api/trpc/server/tsconfig.json.hbs

@@ -5,9 +5,6 @@
     "declarationMap": true,
     "sourceMap": true,
     "outDir": "dist",
-    "composite": true{{#if (eq serverDeploy "wrangler")}},
-    "types": [
-      "../../apps/server/worker-configuration.d.ts"
-    ]{{/if}}
+    "composite": true
   }
 }

package/templates/auth/better-auth/server/base/package.json.hbs

@@ -2,18 +2,14 @@
   "name": "@{{projectName}}/auth",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "default": "./src/index.ts"
     },
     "./*": {
-      "types": "./dist/*.d.ts",
       "default": "./src/*.ts"
     }
   },
   "type": "module",
-  "scripts": {
-    "build": "tsdown"
-  },
+  "scripts": {},
   "devDependencies": {},
   "peerDependencies": {
     "typescript": "^5"

package/templates/auth/better-auth/server/base/tsconfig.json.hbs

@@ -5,9 +5,6 @@
     "declarationMap": true,
     "sourceMap": true,
     "outDir": "dist",
-    "composite": true{{#if (eq serverDeploy "wrangler")}},
-    "types": [
-      "../../apps/server/worker-configuration.d.ts"
-    ]{{/if}}
+    "composite": true
   }
 }

package/templates/db/base/package.json.hbs

@@ -3,17 +3,13 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "default": "./src/index.ts"
     },
     "./*": {
-      "types": "./dist/*.d.ts",
       "default": "./src/*.ts"
     }
   },
-  "scripts": {
-    "build": "tsdown"
-  },
+  "scripts": {},
   "devDependencies": {},
   "peerDependencies": {
     "typescript": "^5"

package/templates/db/base/tsconfig.json.hbs

@@ -5,9 +5,6 @@
     "declarationMap": true,
     "sourceMap": true,
     "outDir": "dist",
-    "composite": true{{#if (eq serverDeploy "wrangler")}},
-    "types": [
-      "../../apps/server/worker-configuration.d.ts"
-    ]{{/if}}
+    "composite": true
   }
 }

package/templates/db/drizzle/sqlite/drizzle.config.ts.hbs

@@ -16,13 +16,6 @@ export default defineConfig({
   // DOCS: https://orm.drizzle.team/docs/guides/d1-http-with-drizzle-kit
   dialect: "sqlite",
   driver: "d1-http",
-  {{#if (eq serverDeploy "wrangler")}}
-  dbCredentials: {
-    accountId: process.env.CLOUDFLARE_ACCOUNT_ID!,
-    databaseId: process.env.CLOUDFLARE_DATABASE_ID!,
-    token: process.env.CLOUDFLARE_D1_TOKEN!,
-  },
-  {{/if}}
   {{else}}
   dialect: "turso",
   dbCredentials: {

package/templates/db/prisma/mongodb/prisma/schema/schema.prisma.hbs

@@ -8,7 +8,7 @@ generator client {
   {{#if (eq runtime "node")}}
   runtime = "nodejs"
   {{/if}}
-  {{#if (eq runtime "workers")}}
+  {{#if (or (eq runtime "workers") (and (eq backend "self") (eq webDeploy "alchemy")))}}
   runtime = "workerd"
   {{/if}}
 }

package/templates/db/prisma/mysql/prisma/schema/schema.prisma.hbs

@@ -1,25 +1,21 @@
 generator client {
-  provider = "prisma-client"
-  output   = "../generated"
-  moduleFormat = "esm"
+  provider      = "prisma-client"
+  output        = "../generated"
+  moduleFormat  = "esm"
   {{#if (eq runtime "bun")}}
-  runtime = "bun"
+  runtime       = "bun"
   {{/if}}
   {{#if (eq runtime "node")}}
-  runtime = "nodejs"
+  runtime       = "nodejs"
   {{/if}}
-  {{#if (eq runtime "workers")}}
-  runtime = "workerd"
-  {{/if}}
-  {{#if (eq dbSetup "planetscale")}}
-  previewFeatures = ["driverAdapters"]
+  {{#if (or (eq runtime "workers") (and (eq backend "self") (eq webDeploy "alchemy")))}}
+  runtime       = "workerd"
   {{/if}}
 }
 
 datasource db {
   provider = "mysql"
-  url      = env("DATABASE_URL")
   {{#if (eq dbSetup "planetscale")}}
   relationMode = "prisma"
   {{/if}}
-}
+}

package/templates/db/prisma/mysql/prisma.config.ts.hbs

@@ -1,18 +1,21 @@
 import path from "node:path";
-import type { PrismaConfig } from "prisma";
-import dotenv from "dotenv";
+import { defineConfig, env } from 'prisma/config'
+import dotenv from 'dotenv'
 
 dotenv.config({
-    {{#if (eq backend "self")}}
-    path: "../../apps/web/.env",
-    {{else}}
-    path: "../../apps/server/.env",
-    {{/if}}
-});
+{{#if (eq backend "self")}}
+path: "../../apps/web/.env",
+{{else}}
+path: "../../apps/server/.env",
+{{/if}}
+})
 
-export default {
-  schema: path.join("prisma", "schema"),
-  migrations: {
-    path: path.join("prisma", "migrations"),
-  }
-} satisfies PrismaConfig;
+export default defineConfig({
+schema: path.join("prisma", "schema"),
+migrations: {
+path: path.join("prisma", "migrations"),
+},
+datasource: {
+url: env('DATABASE_URL'),
+},
+})

package/templates/db/prisma/mysql/src/index.ts.hbs

@@ -1,12 +1,26 @@
 import { PrismaClient } from "../prisma/generated/client";
-{{#if (eq dbSetup "planetscale")}}
-import { PrismaPlanetScale } from '@prisma/adapter-planetscale'
 
-const adapter = new PrismaPlanetScale({ url: process.env.DATABASE_URL })
+{{#if (eq dbSetup "planetscale")}}
+import { PrismaPlanetScale } from "@prisma/adapter-planetscale";
 
-const prisma = new PrismaClient({adapter});
+const adapter = new PrismaPlanetScale({ url: process.env.DATABASE_URL || "" });
+const prisma = new PrismaClient({ adapter });
 {{else}}
-const prisma = new PrismaClient();
+import { PrismaMariaDb } from "@prisma/adapter-mariadb";
+
+const databaseUrl: string = process.env.DATABASE_URL!;
+
+const url: URL = new URL(databaseUrl);
+const connectionConfig = {
+  host: url.hostname,
+  port: parseInt(url.port || "3306"),
+  user: url.username,
+  password: url.password,
+  database: url.pathname.slice(1),
+};
+
+const adapter = new PrismaMariaDb(connectionConfig);
+const prisma = new PrismaClient({ adapter });
 {{/if}}
 
-export default prisma;
+export default prisma;

package/templates/db/prisma/postgres/prisma/schema/schema.prisma.hbs

@@ -8,17 +8,13 @@ generator client {
   {{#if (eq runtime "node")}}
   runtime = "nodejs"
   {{/if}}
-  {{#if (eq runtime "workers")}}
+  {{#if (or (eq runtime "workers") (and (eq backend "self") (eq webDeploy "alchemy")))}}
   runtime = "workerd"
   {{/if}}
 }
 
 datasource db {
   provider = "postgresql"
-  url      = env("DATABASE_URL")
-  {{#if (eq dbSetup "supabase")}}
-  directUrl = env("DIRECT_URL")
-  {{/if}}
   {{#if (eq dbSetup "planetscale")}}
   relationMode = "prisma"
   {{/if}}

package/templates/db/prisma/postgres/prisma.config.ts.hbs

@@ -1,7 +1,7 @@
 import path from "node:path";
-import type { PrismaConfig } from "prisma";
+import { defineConfig, env } from 'prisma/config'
 {{#unless (eq dbSetup "prisma-postgres")}}
-import dotenv from "dotenv";
+import dotenv from 'dotenv'
 
 dotenv.config({
     {{#if (eq backend "self")}}
@@ -9,12 +9,15 @@ dotenv.config({
     {{else}}
     path: "../../apps/server/.env",
     {{/if}}
-});
+})
 {{/unless}}
 
-export default {
-  schema: path.join("prisma", "schema"),
-  migrations: {
-    path: path.join("prisma", "migrations"),
-  }
-} satisfies PrismaConfig;
+export default defineConfig({
+    schema: path.join("prisma", "schema"),
+    migrations: {
+        path: path.join("prisma", "migrations"),
+    },
+    datasource: {
+        url: env('DATABASE_URL'),
+    },
+})

package/templates/db/prisma/postgres/src/index.ts.hbs

@@ -1,10 +1,32 @@
+{{#if (eq runtime "workers")}}
 import { PrismaClient } from "../prisma/generated/client";
-{{#if (and (eq dbSetup "prisma-postgres") (eq orm "prisma"))}}
-import { withAccelerate } from "@prisma/extension-accelerate";
+import { env } from "cloudflare:workers";
+{{#if (eq dbSetup "neon")}}
+import { PrismaNeon } from "@prisma/adapter-neon";
 
-const prisma = new PrismaClient().$extends(withAccelerate());
+const adapter = new PrismaNeon({ connectionString: env.DATABASE_URL || "" });
 {{else}}
-const prisma = new PrismaClient();
+import { PrismaPg } from "@prisma/adapter-pg";
+
+const adapter = new PrismaPg({ connectionString: env.DATABASE_URL || "" });
+{{/if}}
+const prisma = new PrismaClient({ adapter });
+
+export default prisma;
+{{else}}
+import { PrismaClient } from "../prisma/generated/client";
+{{#if (eq dbSetup "neon")}}
+import { PrismaNeon } from "@prisma/adapter-neon";
+import dotenv from "dotenv";
+
+dotenv.config();
+const adapter = new PrismaNeon({ connectionString: process.env.DATABASE_URL || "" });
+{{else}}
+import { PrismaPg } from "@prisma/adapter-pg";
+
+const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL || "" });
 {{/if}}
+const prisma = new PrismaClient({ adapter });
 
 export default prisma;
+{{/if}}

package/templates/db/prisma/sqlite/prisma/schema/schema.prisma.hbs

@@ -8,22 +8,11 @@ generator client {
   {{#if (eq runtime "node")}}
   runtime = "nodejs"
   {{/if}}
-  {{#if (eq runtime "workers")}}
+  {{#if (or (eq runtime "workers") (and (eq backend "self") (eq webDeploy "alchemy")))}}
   runtime = "workerd"
-  {{#if (eq dbSetup "d1")}}
-  previewFeatures = ["driverAdapters"]
-  {{/if}}
-  {{/if}}
-  {{#if (eq dbSetup "turso")}}
-  previewFeatures = ["driverAdapters"]
   {{/if}}
 }
 
 datasource db {
   provider = "sqlite"
-  {{#if (eq dbSetup "turso")}}
-  url      = "file:./local.db"
-  {{else}}
-  url      = env("DATABASE_URL")
-  {{/if}}
 }

package/templates/db/prisma/sqlite/prisma.config.ts.hbs

@@ -1,6 +1,6 @@
 import path from "node:path";
-import type { PrismaConfig } from "prisma";
-import dotenv from "dotenv";
+import { defineConfig, env } from 'prisma/config'
+import dotenv from 'dotenv'
 
 dotenv.config({
     {{#if (eq backend "self")}}
@@ -8,11 +8,14 @@ dotenv.config({
     {{else}}
     path: "../../apps/server/.env",
     {{/if}}
-});
+})
 
-export default {
-  schema: path.join("prisma", "schema"),
-  migrations: {
-    path: path.join("prisma", "migrations"),
-  }
-} satisfies PrismaConfig;
+export default defineConfig({
+    schema: path.join("prisma", "schema"),
+    migrations: {
+        path: path.join("prisma", "migrations"),
+    },
+    datasource: {
+        url: env('DATABASE_URL'),
+    },
+})

package/templates/db/prisma/sqlite/src/index.ts.hbs

@@ -1,28 +1,24 @@
 {{#if (eq dbSetup "d1")}}
-import { env } from "cloudflare:workers";
-import { PrismaD1 } from "@prisma/adapter-d1";
 import { PrismaClient } from "../prisma/generated/client";
+import { PrismaD1 } from "@prisma/adapter-d1";
+import { env } from "cloudflare:workers";
 
 const adapter = new PrismaD1(env.DB);
 const prisma = new PrismaClient({ adapter });
 
 export default prisma;
-{{else if (eq dbSetup "turso")}}
-import { PrismaLibSQL } from "@prisma/adapter-libsql";
+{{else}}
 import { PrismaClient } from "../prisma/generated/client";
+import { PrismaLibSql } from "@prisma/adapter-libsql";
 
-const adapter = new PrismaLibSQL({
-	url: process.env.DATABASE_URL || "",
-	authToken: process.env.DATABASE_AUTH_TOKEN,
+const adapter = new PrismaLibSql({
+url: process.env.DATABASE_URL || "",
+{{#if (eq dbSetup "turso")}}
+authToken: process.env.DATABASE_AUTH_TOKEN,
+{{/if}}
 });
 
 const prisma = new PrismaClient({ adapter });
 
 export default prisma;
-{{else}}
-import { PrismaClient } from "../prisma/generated/client";
-
-const prisma = new PrismaClient();
-
-export default prisma;
-{{/if}}
+{{/if}}

package/templates/deploy/alchemy/alchemy.run.ts.hbs

@@ -18,11 +18,9 @@ import { Vite } from "alchemy/cloudflare";
 {{/if}}
 {{#if (eq serverDeploy "alchemy")}}
 import { Worker } from "alchemy/cloudflare";
-{{#if (eq dbSetup "d1")}}
-import { D1Database } from "alchemy/cloudflare";
-{{/if}}
 {{/if}}
-{{#if (and (eq serverDeploy "alchemy") (eq dbSetup "d1"))}}
+{{#if (and (or (eq serverDeploy "alchemy") (and (eq webDeploy "alchemy") (eq backend "self"))) (eq dbSetup "d1"))}}
+import { D1Database } from "alchemy/cloudflare";
 import { Exec } from "alchemy/os";
 {{/if}}
 import { config } from "dotenv";
@@ -37,7 +35,7 @@ config({ path: "./.env" });
 
 const app = await alchemy("{{projectName}}");
 
-{{#if (and (eq serverDeploy "alchemy") (eq dbSetup "d1"))}}
+{{#if (and (or (eq serverDeploy "alchemy") (and (eq webDeploy "alchemy") (eq backend "self"))) (eq dbSetup "d1"))}}
 await Exec("db-generate", {
 	{{#if (and (eq webDeploy "alchemy") (eq serverDeploy "alchemy"))}}cwd: "packages/db",{{/if}}
 	command: "{{packageManager}} run db:generate",
@@ -62,6 +60,38 @@ export const web = await Nextjs("web", {
     {{else if (ne backend "self")}}
     NEXT_PUBLIC_SERVER_URL: process.env.NEXT_PUBLIC_SERVER_URL || "",
     {{/if}}
+    {{#if (eq backend "self")}}
+    {{#if (eq dbSetup "d1")}}
+    DB: db,
+    {{else if (and (ne database "none") (ne dbSetup "none"))}}
+    DATABASE_URL: alchemy.secret(process.env.DATABASE_URL),
+    {{/if}}
+    CORS_ORIGIN: process.env.CORS_ORIGIN || "",
+    {{#if (eq auth "better-auth")}}
+    BETTER_AUTH_SECRET: alchemy.secret(process.env.BETTER_AUTH_SECRET),
+    BETTER_AUTH_URL: process.env.BETTER_AUTH_URL || "",
+    {{/if}}
+    {{#if (eq auth "clerk")}}
+    CLERK_SECRET_KEY: alchemy.secret(process.env.CLERK_SECRET_KEY),
+    {{/if}}
+    {{#if (includes examples "ai")}}
+    GOOGLE_GENERATIVE_AI_API_KEY: alchemy.secret(process.env.GOOGLE_GENERATIVE_AI_API_KEY),
+    {{/if}}
+    {{#if (eq payments "polar")}}
+    POLAR_ACCESS_TOKEN: alchemy.secret(process.env.POLAR_ACCESS_TOKEN),
+    POLAR_SUCCESS_URL: process.env.POLAR_SUCCESS_URL || "",
+    {{/if}}
+    {{#if (eq dbSetup "turso")}}
+    DATABASE_AUTH_TOKEN: alchemy.secret(process.env.DATABASE_AUTH_TOKEN),
+    {{/if}}
+    {{#if (eq database "mysql")}}
+    {{#if (eq orm "drizzle")}}
+    DATABASE_HOST: process.env.DATABASE_HOST || "",
+    DATABASE_USERNAME: process.env.DATABASE_USERNAME || "",
+    DATABASE_PASSWORD: process.env.DATABASE_PASSWORD || "",
+    {{/if}}
+    {{/if}}
+    {{/if}}
   },
   dev: {
     command: "{{packageManager}} run dev"
@@ -104,6 +134,38 @@ export const web = await TanStackStart("web", {
     {{else if (ne backend "self")}}
     VITE_SERVER_URL: process.env.VITE_SERVER_URL || "",
     {{/if}}
+    {{#if (eq backend "self")}}
+    {{#if (eq dbSetup "d1")}}
+    DB: db,
+    {{else if (and (ne database "none") (ne dbSetup "none"))}}
+    DATABASE_URL: alchemy.secret(process.env.DATABASE_URL),
+    {{/if}}
+    CORS_ORIGIN: process.env.CORS_ORIGIN || "",
+    {{#if (eq auth "better-auth")}}
+    BETTER_AUTH_SECRET: alchemy.secret(process.env.BETTER_AUTH_SECRET),
+    BETTER_AUTH_URL: process.env.BETTER_AUTH_URL || "",
+    {{/if}}
+    {{#if (eq auth "clerk")}}
+    CLERK_SECRET_KEY: alchemy.secret(process.env.CLERK_SECRET_KEY),
+    {{/if}}
+    {{#if (includes examples "ai")}}
+    GOOGLE_GENERATIVE_AI_API_KEY: alchemy.secret(process.env.GOOGLE_GENERATIVE_AI_API_KEY),
+    {{/if}}
+    {{#if (eq payments "polar")}}
+    POLAR_ACCESS_TOKEN: alchemy.secret(process.env.POLAR_ACCESS_TOKEN),
+    POLAR_SUCCESS_URL: process.env.POLAR_SUCCESS_URL || "",
+    {{/if}}
+    {{#if (eq dbSetup "turso")}}
+    DATABASE_AUTH_TOKEN: alchemy.secret(process.env.DATABASE_AUTH_TOKEN),
+    {{/if}}
+    {{#if (eq database "mysql")}}
+    {{#if (eq orm "drizzle")}}
+    DATABASE_HOST: process.env.DATABASE_HOST || "",
+    DATABASE_USERNAME: process.env.DATABASE_USERNAME || "",
+    DATABASE_PASSWORD: process.env.DATABASE_PASSWORD || "",
+    {{/if}}
+    {{/if}}
+    {{/if}}
   },
   dev: {
     command: "{{packageManager}} run dev"

package/templates/examples/ai/web/react/next/src/app/ai/page.tsx.hbs

@@ -3,7 +3,7 @@
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
 import { Send } from "lucide-react";
-{{#if (or (eq webDeploy "wrangler") (eq webDeploy "alchemy"))}}
+{{#if (eq webDeploy "alchemy")}}
 import dynamic from "next/dynamic";
 {{else}}
 import { Response } from "@/components/response";
@@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 
-{{#if (or (eq webDeploy "wrangler") (eq webDeploy "alchemy"))}}
+{{#if (eq webDeploy "alchemy")}}
 const Response = dynamic(
   () =>
     import("@/components/response").then((mod) => ({ default: mod.Response })),

package/templates/extras/_npmrc.hbs

@@ -1,5 +1,5 @@
-node-linker=hoisted
+node-linker=isolated
 {{#if (includes frontend "nuxt")}}
 shamefully-hoist=true
 strict-peer-dependencies=false
-{{/if}}
+{{/if}}

package/templates/frontend/native/uniwind/app/(drawer)/_layout.tsx.hbs

@@ -3,7 +3,7 @@ import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { Link } from "expo-router";
 import { Drawer } from "expo-router/drawer";
 import { useThemeColor } from "heroui-native";
-import { Pressable } from "react-native";
+import { Pressable, Text } from "react-native";
 import { ThemeToggle } from "@/components/theme-toggle";
 
 function DrawerLayout() {
@@ -29,9 +29,11 @@ function DrawerLayout() {
         name="index"
         options=\{{
           headerTitle: "Home",
-          drawerLabel: "Home",
-          drawerIcon: ({ size, color }) => (
-            <Ionicons name="home-outline" size={size} color={color} />
+          drawerLabel: ({ color, focused }) => (
+            <Text style=\{{ color: focused ? color : themeColorForeground }}>Home</Text>
+          ),
+          drawerIcon: ({ size, color, focused }) => (
+            <Ionicons name="home-outline" size={size} color={focused ? color : themeColorForeground} />
           ),
         }}
       />
@@ -39,9 +41,11 @@ function DrawerLayout() {
         name="(tabs)"
         options=\{{
           headerTitle: "Tabs",
-          drawerLabel: "Tabs",
-          drawerIcon: ({ size, color }) => (
-            <MaterialIcons name="border-bottom" size={size} color={color} />
+          drawerLabel: ({ color, focused }) => (
+            <Text style=\{{ color: focused ? color : themeColorForeground }}>Tabs</Text>
+          ),
+          drawerIcon: ({ size, color, focused }) => (
+            <MaterialIcons name="border-bottom" size={size} color={focused ? color : themeColorForeground} />
           ),
           headerRight: () => (
             <Link href="/modal" asChild>
@@ -57,9 +61,11 @@ function DrawerLayout() {
         name="todos"
         options=\{{
           headerTitle: "Todos",
-          drawerLabel: "Todos",
-          drawerIcon: ({ size, color }) => (
-            <Ionicons name="checkbox-outline" size={size} color={color} />
+          drawerLabel: ({ color, focused }) => (
+            <Text style=\{{ color: focused ? color : themeColorForeground }}>Todos</Text>
+          ),
+          drawerIcon: ({ size, color, focused }) => (
+            <Ionicons name="checkbox-outline" size={size} color={focused ? color : themeColorForeground} />
           ),
         }}
       />
@@ -69,9 +75,11 @@ function DrawerLayout() {
         name="ai"
         options=\{{
           headerTitle: "AI",
-          drawerLabel: "AI",
-          drawerIcon: ({ size, color }) => (
-            <Ionicons name="chatbubble-ellipses-outline" size={size} color={color} />
+          drawerLabel: ({ color, focused }) => (
+            <Text style=\{{ color: focused ? color : themeColorForeground }}>AI</Text>
+          ),
+          drawerIcon: ({ size, color, focused }) => (
+            <Ionicons name="chatbubble-ellipses-outline" size={size} color={focused ? color : themeColorForeground} />
           ),
         }}
       />