tvi-cli 0.1.4

package/templates/examples/ai/web/svelte/src/routes/ai/+page.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { PUBLIC_SERVER_URL } from '$env/static/public';
+	import { Chat } from '@ai-sdk/svelte';
+
+	const chat = new Chat({
+		api: `${PUBLIC_SERVER_URL}/ai`,
+	});
+
+	let messagesEndElement: HTMLDivElement | null = null;
+
+	$effect(() => {
+		const messageCount = chat.messages.length;
+		if (messageCount > 0) {
+			setTimeout(() => {
+				messagesEndElement?.scrollIntoView({ behavior: 'smooth' });
+			}, 0);
+		}
+	});
+
+</script>
+
+<div class="mx-auto grid h-full w-full max-w-2xl grid-rows-[1fr_auto] overflow-hidden p-4">
+	<div class="mb-4 space-y-4 overflow-y-auto pb-4">
+		{#if chat.messages.length === 0}
+			<div class="mt-8 text-center text-neutral-500">Ask the AI anything to get started!</div>
+		{/if}
+
+		{#each chat.messages as message (message.id)}
+			<div
+				class="w-fit max-w-[85%] rounded-lg p-3 text-sm md:text-base"
+				class:ml-auto={message.role === 'user'}
+				class:bg-indigo-600={message.role === 'user'}
+				class:text-white={message.role === 'user'}
+				class:bg-neutral-700={message.role === 'assistant'}
+				class:text-neutral-100={message.role === 'assistant'}
+			>
+				<p
+					class="mb-1 text-xs font-semibold uppercase tracking-wide"
+					class:text-indigo-200={message.role === 'user'}
+					class:text-neutral-400={message.role === 'assistant'}
+				>
+					{message.role === 'user' ? 'You' : 'AI Assistant'}
+				</p>
+				<div class="whitespace-pre-wrap break-words">
+					{#each message.parts as part, partIndex (partIndex)}
+						{#if part.type === 'text'}
+							{part.text}
+						{:else if part.type === 'tool-invocation'}
+							<pre class="mt-2 rounded bg-neutral-800 p-2 text-xs text-neutral-300"
+								>{JSON.stringify(part.toolInvocation, null, 2)}</pre
+							>
+						{/if}
+					{/each}
+				</div>
+			</div>
+		{/each}
+		<div bind:this={messagesEndElement}></div>
+	</div>
+
+	<form
+		onsubmit={chat.handleSubmit}
+		class="flex w-full items-center space-x-2 border-t border-neutral-700 pt-4"
+	>
+		<input
+			name="prompt"
+			bind:value={chat.input}
+			placeholder="Type your message..."
+			class="flex-1 rounded border border-neutral-600 bg-neutral-800 px-3 py-2 text-neutral-100 placeholder-neutral-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50"
+			autocomplete="off"
+			onkeydown={(e) => {
+				if (e.key === 'Enter' && !e.shiftKey) {
+					e.preventDefault();
+					chat.handleSubmit(e);
+				}
+			}}
+		/>
+		<button
+			type="submit"
+			disabled={!chat.input.trim()}
+			class="inline-flex h-10 w-10 items-center justify-center rounded bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50"
+			aria-label="Send message"
+		>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" />
+				</svg>
+		</button>
+	</form>
+</div>

package/templates/examples/todo/native/nativewind/app/(drawer)/todos.tsx.hbs

@@ -0,0 +1,295 @@
+import { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+  Alert,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+{{#if (eq backend "convex")}}
+import { useMutation, useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api";
+import type { Id } from "@{{projectName}}/backend/convex/_generated/dataModel";
+{{else}}
+import { useMutation, useQuery } from "@tanstack/react-query";
+{{/if}}
+
+import { Container } from "@/components/container";
+{{#unless (eq backend "convex")}}
+{{#if (eq api "orpc")}}
+import { orpc } from "@/utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { trpc } from "@/utils/trpc";
+{{/if}}
+{{/unless}}
+
+export default function TodosScreen() {
+  const [newTodoText, setNewTodoText] = useState("");
+
+  {{#if (eq backend "convex")}}
+  const todos = useQuery(api.todos.getAll);
+  const createTodoMutation = useMutation(api.todos.create);
+  const toggleTodoMutation = useMutation(api.todos.toggle);
+  const deleteTodoMutation = useMutation(api.todos.deleteTodo);
+
+  const handleAddTodo = async () => {
+    const text = newTodoText.trim();
+    if (!text) return;
+    await createTodoMutation({ text });
+    setNewTodoText("");
+  };
+
+  const handleToggleTodo = (id: Id<"todos">, currentCompleted: boolean) => {
+    toggleTodoMutation({ id, completed: !currentCompleted });
+  };
+
+  const handleDeleteTodo = (id: Id<"todos">) => {
+    Alert.alert("Delete Todo", "Are you sure you want to delete this todo?", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: () => deleteTodoMutation({ id }),
+      },
+    ]);
+  };
+  {{else}}
+    {{#if (eq api "orpc")}}
+    const todos = useQuery(orpc.todo.getAll.queryOptions());
+    const createMutation = useMutation(
+      orpc.todo.create.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+          setNewTodoText("");
+        },
+      }),
+    );
+    const toggleMutation = useMutation(
+      orpc.todo.toggle.mutationOptions({
+        onSuccess: () => { todos.refetch() },
+      }),
+    );
+    const deleteMutation = useMutation(
+      orpc.todo.delete.mutationOptions({
+        onSuccess: () => { todos.refetch() },
+      }),
+    );
+    {{/if}}
+    {{#if (eq api "trpc")}}
+    const todos = useQuery(trpc.todo.getAll.queryOptions());
+    const createMutation = useMutation(
+      trpc.todo.create.mutationOptions({
+        onSuccess: () => {
+          todos.refetch();
+          setNewTodoText("");
+        },
+      }),
+    );
+    const toggleMutation = useMutation(
+      trpc.todo.toggle.mutationOptions({
+        onSuccess: () => { todos.refetch() },
+      }),
+    );
+    const deleteMutation = useMutation(
+      trpc.todo.delete.mutationOptions({
+        onSuccess: () => { todos.refetch() },
+      }),
+    );
+    {{/if}}
+
+  const handleAddTodo = () => {
+    if (newTodoText.trim()) {
+      createMutation.mutate({ text: newTodoText });
+    }
+  };
+
+  const handleToggleTodo = (id: number, completed: boolean) => {
+    toggleMutation.mutate({ id, completed: !completed });
+  };
+
+  const handleDeleteTodo = (id: number) => {
+    Alert.alert("Delete Todo", "Are you sure you want to delete this todo?", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: () => deleteMutation.mutate({ id }),
+      },
+    ]);
+  };
+  {{/if}}
+
+  return (
+    <Container>
+      <ScrollView className="flex-1">
+        <View className="px-4 py-6">
+          <View className="mb-6 rounded-lg border border-border p-4 bg-card">
+            <Text className="text-foreground text-2xl font-bold mb-2">
+              Todo List
+            </Text>
+            <Text className="text-muted-foreground mb-4">
+              Manage your tasks efficiently
+            </Text>
+
+            <View className="mb-6">
+              <View className="flex-row items-center space-x-2 mb-2">
+                <TextInput
+                  value={newTodoText}
+                  onChangeText={setNewTodoText}
+                  placeholder="Add a new task..."
+                  placeholderTextColor="#6b7280"
+                  {{#if (eq backend "convex")}}
+                  {{else}}
+                  editable={!createMutation.isPending}
+                  {{/if}}
+                  className="flex-1 border border-border rounded-md px-3 py-2 text-foreground bg-background"
+                  onSubmitEditing={handleAddTodo}
+                  returnKeyType="done"
+                />
+                <TouchableOpacity
+                  onPress={handleAddTodo}
+                  {{#if (eq backend "convex")}}
+                  disabled={!newTodoText.trim()}
+                  {{else}}
+                  disabled={createMutation.isPending || !newTodoText.trim()}
+                  {{/if}}
+                  className={`px-4 py-2 rounded-md ${
+                    {{#if (eq backend "convex")}}
+                    !newTodoText.trim()
+                    {{else}}
+                    createMutation.isPending || !newTodoText.trim()
+                    {{/if}}
+                      ? "bg-muted"
+                      : "bg-primary"
+                  }`}
+                >
+                  {{#if (eq backend "convex")}}
+                  <Text className="text-white font-medium">Add</Text>
+                  {{else}}
+                  {createMutation.isPending ? (
+                    <ActivityIndicator size="small" color="white" />
+                  ) : (
+                    <Text className="text-white font-medium">Add</Text>
+                  )}
+                  {{/if}}
+                </TouchableOpacity>
+              </View>
+            </View>
+
+            {{#if (eq backend "convex")}}
+            {todos === undefined ? (
+              <View className="flex justify-center py-8">
+                <ActivityIndicator size="large" color="#3b82f6" />
+              </View>
+            ) : todos.length === 0 ? (
+              <Text className="py-8 text-center text-muted-foreground">
+                No todos yet. Add one above!
+              </Text>
+            ) : (
+              <View className="space-y-2">
+                {todos.map((todo) => (
+                  <View
+                    key={todo._id}
+                    className="flex-row items-center justify-between rounded-md border border-border p-3 bg-background"
+                  >
+                    <View className="flex-row items-center flex-1">
+                      <TouchableOpacity
+                        onPress={() =>
+                          handleToggleTodo(todo._id, todo.completed)
+                        }
+                        className="mr-3"
+                      >
+                        <Ionicons
+                          name={todo.completed ? "checkbox" : "square-outline"}
+                          size={24}
+                          color={todo.completed ? "#22c55e" : "#6b7280"}
+                        />
+                      </TouchableOpacity>
+                      <Text
+                        className={`flex-1 ${
+                          todo.completed
+                            ? "line-through text-muted-foreground"
+                            : "text-foreground"
+                        }`}
+                      >
+                        {todo.text}
+                      </Text>
+                    </View>
+                    <TouchableOpacity
+                      onPress={() => handleDeleteTodo(todo._id)}
+                      className="ml-2 p-1"
+                    >
+                      <Ionicons
+                        name="trash-outline"
+                        size={20}
+                        color="#ef4444"
+                      />
+                    </TouchableOpacity>
+                  </View>
+                ))}
+              </View>
+            )}
+            {{else}}
+            {todos.isLoading ? (
+              <View className="flex justify-center py-8">
+                <ActivityIndicator size="large" color="#3b82f6" />
+              </View>
+            ) : todos.data?.length === 0 ? (
+              <Text className="py-8 text-center text-muted-foreground">
+                No todos yet. Add one above!
+              </Text>
+            ) : (
+              <View className="space-y-2">
+                {todos.data?.map((todo) => (
+                  <View
+                    key={todo.id}
+                    className="flex-row items-center justify-between rounded-md border border-border p-3 bg-background"
+                  >
+                    <View className="flex-row items-center flex-1">
+                      <TouchableOpacity
+                        onPress={() =>
+                          handleToggleTodo(todo.id, todo.completed)
+                        }
+                        className="mr-3"
+                      >
+                        <Ionicons
+                          name={todo.completed ? "checkbox" : "square-outline"}
+                          size={24}
+                          color={todo.completed ? "#22c55e" : "#6b7280"}
+                        />
+                      </TouchableOpacity>
+                      <Text
+                        className={`flex-1 ${
+                          todo.completed
+                            ? "line-through text-muted-foreground"
+                            : "text-foreground"
+                        }`}
+                      >
+                        {todo.text}
+                      </Text>
+                    </View>
+                    <TouchableOpacity
+                      onPress={() => handleDeleteTodo(todo.id)}
+                      className="ml-2 p-1"
+                    >
+                      <Ionicons
+                        name="trash-outline"
+                        size={20}
+                        color="#ef4444"
+                      />
+                    </TouchableOpacity>
+                  </View>
+                ))}
+              </View>
+            )}
+            {{/if}}
+          </View>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}