create-better-t-stack 3.9.0 → 3.11.0

package/templates/auth/better-auth/web/react/tanstack-router/src/components/{user-menu.tsx → user-menu.tsx.hbs}

@@ -1,16 +1,18 @@
+import { Link, useNavigate } from "@tanstack/react-router";
+
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { authClient } from "@/lib/auth-client";
-import { useNavigate } from "@tanstack/react-router";
+
 import { Button } from "./ui/button";
 import { Skeleton } from "./ui/skeleton";
-import { Link } from "@tanstack/react-router";
 
 export default function UserMenu() {
   const navigate = useNavigate();
@@ -22,25 +24,24 @@ export default function UserMenu() {
 
   if (!session) {
     return (
-      <Button variant="outline" asChild>
-        <Link to="/login">Sign In</Link>
-      </Button>
+      <Link to="/login">
+        <Button variant="outline">Sign In</Button>
+      </Link>
     );
   }
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">{session.user.name}</Button>
+      <DropdownMenuTrigger render={<Button variant="outline" />}>
+        {session.user.name}
       </DropdownMenuTrigger>
       <DropdownMenuContent className="bg-card">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Button
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
+          <DropdownMenuItem
             variant="destructive"
-            className="w-full"
             onClick={() => {
               authClient.signOut({
                 fetchOptions: {
@@ -54,8 +55,8 @@ export default function UserMenu() {
             }}
           >
             Sign Out
-          </Button>
-        </DropdownMenuItem>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/templates/auth/better-auth/web/react/tanstack-start/src/components/{user-menu.tsx → user-menu.tsx.hbs}

@@ -1,16 +1,18 @@
+import { Link, useNavigate } from "@tanstack/react-router";
+
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { authClient } from "@/lib/auth-client";
-import { useNavigate } from "@tanstack/react-router";
+
 import { Button } from "./ui/button";
 import { Skeleton } from "./ui/skeleton";
-import { Link } from "@tanstack/react-router";
 
 export default function UserMenu() {
   const navigate = useNavigate();
@@ -22,25 +24,24 @@ export default function UserMenu() {
 
   if (!session) {
     return (
-      <Button variant="outline" asChild>
-        <Link to="/login">Sign In</Link>
-      </Button>
+      <Link to="/login">
+        <Button variant="outline">Sign In</Button>
+      </Link>
     );
   }
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">{session.user.name}</Button>
+      <DropdownMenuTrigger render={<Button variant="outline" />}>
+        {session.user.name}
       </DropdownMenuTrigger>
       <DropdownMenuContent className="bg-card">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Button
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
+          <DropdownMenuItem
             variant="destructive"
-            className="w-full"
             onClick={() => {
               authClient.signOut({
                 fetchOptions: {
@@ -54,8 +55,8 @@ export default function UserMenu() {
             }}
           >
             Sign Out
-          </Button>
-        </DropdownMenuItem>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/templates/backend/convex/packages/backend/convex/README.md

@@ -6,7 +6,7 @@ See https://docs.convex.dev/functions for more.
 A query function that takes two arguments looks like:
 
 ```ts
-// functions.js
+// convex/myFunctions.ts
 import { query } from "./_generated/server";
 import { v } from "convex/values";
 
@@ -36,7 +36,7 @@ export const myQueryFunction = query({
 Using this query function in a React component looks like:
 
 ```ts
-const data = useQuery(api.functions.myQueryFunction, {
+const data = useQuery(api.myFunctions.myQueryFunction, {
   first: 10,
   second: "hello",
 });
@@ -45,7 +45,7 @@ const data = useQuery(api.functions.myQueryFunction, {
 A mutation function looks like:
 
 ```ts
-// functions.js
+// convex/myFunctions.ts
 import { mutation } from "./_generated/server";
 import { v } from "convex/values";
 
@@ -73,7 +73,7 @@ export const myMutationFunction = mutation({
 Using this mutation function in a React component looks like:
 
 ```ts
-const mutation = useMutation(api.functions.myMutationFunction);
+const mutation = useMutation(api.myFunctions.myMutationFunction);
 function handleButtonPress() {
   // fire and forget, the most common way to use mutations
   mutation({ first: "Hello!", second: "me" });

package/templates/backend/convex/packages/backend/convex/convex.config.ts.hbs

@@ -0,0 +1,17 @@
+import { defineApp } from "convex/server";
+{{#if (eq auth "better-auth")}}
+import betterAuth from "@convex-dev/better-auth/convex.config";
+{{/if}}
+{{#if (includes examples "ai")}}
+import agent from "@convex-dev/agent/convex.config";
+{{/if}}
+
+const app = defineApp();
+{{#if (eq auth "better-auth")}}
+app.use(betterAuth);
+{{/if}}
+{{#if (includes examples "ai")}}
+app.use(agent);
+{{/if}}
+
+export default app;

package/templates/backend/convex/packages/backend/convex/tsconfig.json.hbs

@@ -1,7 +1,7 @@
 {
   /* This TypeScript project config describes the environment that
    * Convex functions run in and is used to typecheck them.
-   * You can modify it, but some settings required to use Convex.
+   * You can modify it, but some settings are required to use Convex.
    */
   "compilerOptions": {
     /* These settings are not required by Convex and can be modified. */

package/templates/examples/ai/convex/packages/backend/convex/agent.ts.hbs

@@ -0,0 +1,9 @@
+import { Agent } from "@convex-dev/agent";
+import { google } from "@ai-sdk/google";
+import { components } from "./_generated/api";
+
+export const chatAgent = new Agent(components.agent, {
+  name: "Chat Agent",
+  languageModel: google("gemini-2.5-flash"),
+  instructions: "You are a helpful AI assistant. Be concise and friendly in your responses.",
+});

package/templates/examples/ai/convex/packages/backend/convex/chat.ts.hbs

@@ -0,0 +1,67 @@
+import {
+  createThread,
+  listUIMessages,
+  saveMessage,
+  syncStreams,
+  vStreamArgs,
+} from "@convex-dev/agent";
+import { paginationOptsValidator } from "convex/server";
+import { v } from "convex/values";
+
+import { components, internal } from "./_generated/api";
+import { internalAction, mutation, query } from "./_generated/server";
+import { chatAgent } from "./agent";
+
+export const createNewThread = mutation({
+  args: {},
+  handler: async (ctx) => {
+    const threadId = await createThread(ctx, components.agent, {});
+    return threadId;
+  },
+});
+
+export const listMessages = query({
+  args: {
+    threadId: v.string(),
+    paginationOpts: paginationOptsValidator,
+    streamArgs: vStreamArgs,
+  },
+  handler: async (ctx, args) => {
+    const paginated = await listUIMessages(ctx, components.agent, args);
+    const streams = await syncStreams(ctx, components.agent, args);
+    return { ...paginated, streams };
+  },
+});
+
+export const sendMessage = mutation({
+  args: {
+    threadId: v.string(),
+    prompt: v.string(),
+  },
+  handler: async (ctx, { threadId, prompt }) => {
+    const { messageId } = await saveMessage(ctx, components.agent, {
+      threadId,
+      prompt,
+    });
+    await ctx.scheduler.runAfter(0, internal.chat.generateResponseAsync, {
+      threadId,
+      promptMessageId: messageId,
+    });
+    return messageId;
+  },
+});
+
+export const generateResponseAsync = internalAction({
+  args: {
+    threadId: v.string(),
+    promptMessageId: v.string(),
+  },
+  handler: async (ctx, { threadId, promptMessageId }) => {
+    await chatAgent.streamText(
+      ctx,
+      { threadId },
+      { promptMessageId },
+      { saveStreamDeltas: true },
+    );
+  },
+});

package/templates/examples/ai/native/bare/app/(drawer)/ai.tsx.hbs

@@ -1,3 +1,301 @@
+{{#if (eq backend "convex")}}
+import { Ionicons } from "@expo/vector-icons";
+import {
+  useUIMessages,
+  useSmoothText,
+  type UIMessage,
+} from "@convex-dev/agent/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import { useMutation } from "convex/react";
+import { useRef, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  ActivityIndicator,
+} from "react-native";
+
+import { Container } from "@/components/container";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { NAV_THEME } from "@/lib/constants";
+
+function MessageContent({
+  text,
+  isStreaming,
+  textColor,
+}: {
+  text: string;
+  isStreaming: boolean;
+  textColor: string;
+}) {
+  const [visibleText] = useSmoothText(text, {
+    startStreaming: isStreaming,
+  });
+  return <Text style={[styles.messageText, { color: textColor }]}>{visibleText}</Text>;
+}
+
+export default function AIScreen() {
+  const { colorScheme } = useColorScheme();
+  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
+  const [input, setInput] = useState("");
+  const [threadId, setThreadId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  const createThread = useMutation(api.chat.createNewThread);
+  const sendMessage = useMutation(api.chat.sendMessage);
+
+  const { results: messages } = useUIMessages(
+    api.chat.listMessages,
+    threadId ? { threadId } : "skip",
+    { initialNumItems: 50, stream: true },
+  );
+
+  const hasStreamingMessage = messages?.some(
+    (m: UIMessage) => m.status === "streaming",
+  );
+
+  useEffect(() => {
+    scrollViewRef.current?.scrollToEnd({ animated: true });
+  }, [messages]);
+
+  async function onSubmit() {
+    const value = input.trim();
+    if (!value || isLoading) return;
+
+    setIsLoading(true);
+    setInput("");
+
+    try {
+      let currentThreadId = threadId;
+      if (!currentThreadId) {
+        currentThreadId = await createThread();
+        setThreadId(currentThreadId);
+      }
+
+      await sendMessage({ threadId: currentThreadId, prompt: value });
+    } catch (error) {
+      console.error("Failed to send message:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <Container>
+      <KeyboardAvoidingView
+        style={styles.container}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <Text style={[styles.headerTitle, { color: theme.text }]}>
+              AI Chat
+            </Text>
+            <Text style={[styles.headerSubtitle, { color: theme.text, opacity: 0.7 }]}>
+              Chat with our AI assistant
+            </Text>
+          </View>
+          <ScrollView
+            ref={scrollViewRef}
+            style={styles.scrollView}
+            showsVerticalScrollIndicator={false}
+          >
+            {!messages || messages.length === 0 ? (
+              <View style={styles.emptyContainer}>
+                <Text style={[styles.emptyText, { color: theme.text, opacity: 0.7 }]}>
+                  Ask me anything to get started!
+                </Text>
+              </View>
+            ) : (
+              <View style={styles.messagesList}>
+                {messages.map((message: UIMessage) => (
+                  <View
+                    key={message.key}
+                    style={[
+                      styles.messageCard,
+                      {
+                        backgroundColor: message.role === "user"
+                          ? theme.primary + "20"
+                          : theme.card,
+                        borderColor: theme.border,
+                        alignSelf: message.role === "user" ? "flex-end" : "flex-start",
+                        marginLeft: message.role === "user" ? 32 : 0,
+                        marginRight: message.role === "user" ? 0 : 32,
+                      },
+                    ]}
+                  >
+                    <Text style={[styles.messageRole, { color: theme.text }]}>
+                      {message.role === "user" ? "You" : "AI Assistant"}
+                    </Text>
+                    <MessageContent
+                      text={message.text ?? ""}
+                      isStreaming={message.status === "streaming"}
+                      textColor={theme.text}
+                    />
+                  </View>
+                ))}
+                {isLoading && !hasStreamingMessage && (
+                  <View
+                    style={[
+                      styles.messageCard,
+                      {
+                        backgroundColor: theme.card,
+                        borderColor: theme.border,
+                        alignSelf: "flex-start",
+                        marginRight: 32,
+                      },
+                    ]}
+                  >
+                    <Text style={[styles.messageRole, { color: theme.text }]}>
+                      AI Assistant
+                    </Text>
+                    <View style={styles.loadingContainer}>
+                      <ActivityIndicator size="small" color={theme.primary} />
+                      <Text style={[styles.loadingText, { color: theme.text, opacity: 0.7 }]}>
+                        Thinking...
+                      </Text>
+                    </View>
+                  </View>
+                )}
+              </View>
+            )}
+          </ScrollView>
+          <View style={[styles.inputContainer, { borderTopColor: theme.border }]}>
+            <View style={styles.inputRow}>
+              <TextInput
+                value={input}
+                onChangeText={setInput}
+                placeholder="Type your message..."
+                placeholderTextColor={theme.text}
+                style={[
+                  styles.input,
+                  {
+                    color: theme.text,
+                    borderColor: theme.border,
+                    backgroundColor: theme.background,
+                  },
+                ]}
+                onSubmitEditing={(e) => {
+                  e.preventDefault();
+                  onSubmit();
+                }}
+                editable={!isLoading}
+                autoFocus={true}
+                multiline
+              />
+              <TouchableOpacity
+                onPress={onSubmit}
+                disabled={!input.trim() || isLoading}
+                style={[
+                  styles.sendButton,
+                  {
+                    backgroundColor: input.trim() && !isLoading ? theme.primary : theme.border,
+                    opacity: input.trim() && !isLoading ? 1 : 0.5,
+                  },
+                ]}
+              >
+                <Ionicons
+                  name="send"
+                  size={20}
+                  color="#ffffff"
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  header: {
+    marginBottom: 16,
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  headerSubtitle: {
+    fontSize: 14,
+  },
+  scrollView: {
+    flex: 1,
+    marginBottom: 16,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  emptyText: {
+    fontSize: 16,
+    textAlign: "center",
+  },
+  messagesList: {
+    gap: 8,
+    paddingBottom: 16,
+  },
+  messageCard: {
+    borderWidth: 1,
+    padding: 12,
+    maxWidth: "80%",
+  },
+  messageRole: {
+    fontSize: 12,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  messageText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  loadingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  loadingText: {
+    fontSize: 14,
+  },
+  inputContainer: {
+    borderTopWidth: 1,
+    paddingTop: 12,
+  },
+  inputRow: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    padding: 8,
+    fontSize: 14,
+    minHeight: 36,
+    maxHeight: 100,
+  },
+  sendButton: {
+    padding: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+{{else}}
 import { useRef, useEffect, useState } from "react";
 import {
   View,
@@ -104,8 +402,8 @@ export default function AIScreen() {
                     style={[
                       styles.messageCard,
                       {
-                        backgroundColor: message.role === "user" 
-                          ? theme.primary + "20" 
+                        backgroundColor: message.role === "user"
+                          ? theme.primary + "20"
                           : theme.card,
                         borderColor: theme.border,
                         alignSelf: message.role === "user" ? "flex-end" : "flex-start",
@@ -284,4 +582,4 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
 });
-
+{{/if}}