fastapi-fullstack 0.1.2__py3-none-any.whl

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/page.tsx

@@ -0,0 +1,73 @@
+import Link from "next/link";
+import { Button, Card, CardHeader, CardTitle, CardContent } from "@/components/ui";
+import { ROUTES } from "@/lib/constants";
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto py-16 px-4">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold mb-4">
+            {{ cookiecutter.project_name }}
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            {{ cookiecutter.project_description }}
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto">
+          {% if cookiecutter.use_jwt %}
+          <Card>
+            <CardHeader>
+              <CardTitle>Authentication</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-4 text-muted-foreground">
+                Secure JWT-based authentication system
+              </p>
+              <div className="flex gap-2">
+                <Button asChild>
+                  <Link href={ROUTES.LOGIN}>Login</Link>
+                </Button>
+                <Button variant="outline" asChild>
+                  <Link href={ROUTES.REGISTER}>Register</Link>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+          {% endif %}
+
+          {% if cookiecutter.enable_ai_agent %}
+          <Card>
+            <CardHeader>
+              <CardTitle>AI Assistant</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-4 text-muted-foreground">
+                Chat with our AI assistant powered by PydanticAI
+              </p>
+              <Button asChild>
+                <Link href={ROUTES.CHAT}>Start Chat</Link>
+              </Button>
+            </CardContent>
+          </Card>
+          {% endif %}
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Dashboard</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="mb-4 text-muted-foreground">
+                View your dashboard and manage your account
+              </p>
+              <Button variant="outline" asChild>
+                <Link href={ROUTES.DASHBOARD}>Go to Dashboard</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/app/providers.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+import { ThemeProvider } from "@/components/theme";
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000, // 1 minute
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>{children}</ThemeProvider>
+    </QueryClientProvider>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/auth/index.ts

@@ -0,0 +1,2 @@
+export { LoginForm } from "./login-form";
+export { RegisterForm } from "./register-form";

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/auth/login-form.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useAuth } from "@/hooks";
+import { Button, Input, Label, Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui";
+import { ApiError } from "@/lib/api-client";
+import { ROUTES } from "@/lib/constants";
+{%- if cookiecutter.enable_oauth_google %}
+import { GoogleIcon } from "@/components/icons/google-icon";
+{%- endif %}
+
+export function LoginForm() {
+  const { login } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+{%- if cookiecutter.enable_oauth_google %}
+  const [isOAuthLoading, setIsOAuthLoading] = useState(false);
+{%- endif %}
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+
+    try {
+      await login({ email, password });
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message);
+      } else {
+        setError("Login failed. Please try again.");
+      }
+      setIsLoading(false);
+    }
+  };
+
+{%- if cookiecutter.enable_oauth_google %}
+
+  const handleGoogleLogin = () => {
+    setIsOAuthLoading(true);
+    // Redirect to backend OAuth endpoint
+    window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/oauth/google/login`;
+  };
+{%- endif %}
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle className="text-2xl text-center">Login</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? "Logging in..." : "Login"}
+          </Button>
+        </form>
+
+{%- if cookiecutter.enable_oauth_google %}
+
+        <div className="relative my-6">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
+          </div>
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full"
+          onClick={handleGoogleLogin}
+          disabled={isOAuthLoading || isLoading}
+        >
+          <GoogleIcon className="mr-2 h-4 w-4" />
+          {isOAuthLoading ? "Redirecting..." : "Continue with Google"}
+        </Button>
+{%- endif %}
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Don&apos;t have an account?{" "}
+          <Link href={ROUTES.REGISTER} className="text-primary hover:underline">
+            Register
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/auth/register-form.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks";
+import { Button, Input, Label, Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui";
+import { ApiError } from "@/lib/api-client";
+import { ROUTES } from "@/lib/constants";
+{%- if cookiecutter.enable_oauth_google %}
+import { GoogleIcon } from "@/components/icons/google-icon";
+{%- endif %}
+
+export function RegisterForm() {
+  const router = useRouter();
+  const { register } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+{%- if cookiecutter.enable_oauth_google %}
+  const [isOAuthLoading, setIsOAuthLoading] = useState(false);
+{%- endif %}
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await register({ email, password, name: name || undefined });
+      router.push(ROUTES.LOGIN + "?registered=true");
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message);
+      } else {
+        setError("Registration failed. Please try again.");
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+{%- if cookiecutter.enable_oauth_google %}
+
+  const handleGoogleSignUp = () => {
+    setIsOAuthLoading(true);
+    // Redirect to backend OAuth endpoint
+    window.location.href = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/oauth/google/login`;
+  };
+{%- endif %}
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader>
+        <CardTitle className="text-2xl text-center">Create Account</CardTitle>
+      </CardHeader>
+      <CardContent>
+{%- if cookiecutter.enable_oauth_google %}
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full mb-6"
+          onClick={handleGoogleSignUp}
+          disabled={isOAuthLoading || isLoading}
+        >
+          <GoogleIcon className="mr-2 h-4 w-4" />
+          {isOAuthLoading ? "Redirecting..." : "Sign up with Google"}
+        </Button>
+
+        <div className="relative mb-6">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">Or register with email</span>
+          </div>
+        </div>
+{%- endif %}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name (optional)</Label>
+            <Input
+              id="name"
+              type="text"
+              placeholder="John Doe"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              disabled={isLoading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              disabled={isLoading}
+            />
+          </div>
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? "Creating account..." : "Register"}
+          </Button>
+        </form>
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{" "}
+          <Link href={ROUTES.LOGIN} className="text-primary hover:underline">
+            Login
+          </Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/chat/chat-container.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+import { useChat } from "@/hooks";
+import { MessageList } from "./message-list";
+import { ChatInput } from "./chat-input";
+import { Button } from "@/components/ui";
+import { Wifi, WifiOff, RotateCcw, Bot } from "lucide-react";
+{%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
+import { useConversationStore, useChatStore } from "@/stores";
+import { useConversations } from "@/hooks";
+{%- endif %}
+
+export function ChatContainer() {
+{%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
+  const { currentConversationId, currentMessages } = useConversationStore();
+  const { addMessage: addChatMessage } = useChatStore();
+  const { fetchConversations } = useConversations();
+
+  // Load history when conversation changes
+  useEffect(() => {
+    if (currentMessages.length > 0) {
+      // Convert stored messages to chat messages format
+      currentMessages.forEach((msg) => {
+        addChatMessage({
+          id: msg.id,
+          role: msg.role,
+          content: msg.content,
+          timestamp: new Date(msg.created_at),
+          toolCalls: msg.tool_calls?.map((tc) => ({
+            id: tc.tool_call_id,
+            name: tc.tool_name,
+            args: tc.args,
+            result: tc.result,
+            status: tc.status === "failed" ? "error" : tc.status,
+          })),
+        });
+      });
+    }
+  }, [currentMessages, addChatMessage]);
+
+  const handleConversationCreated = useCallback((conversationId: string) => {
+    // Refresh conversation list when a new conversation is created
+    fetchConversations();
+  }, [fetchConversations]);
+
+  const {
+    messages,
+    isConnected,
+    isProcessing,
+    connect,
+    disconnect,
+    sendMessage,
+    clearMessages,
+  } = useChat({
+    conversationId: currentConversationId,
+    onConversationCreated: handleConversationCreated,
+  });
+{%- else %}
+  const {
+    messages,
+    isConnected,
+    isProcessing,
+    connect,
+    disconnect,
+    sendMessage,
+    clearMessages,
+  } = useChat();
+{%- endif %}
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    connect();
+    return () => disconnect();
+  }, [connect, disconnect]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <div className="flex flex-col h-full max-w-4xl mx-auto">
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-4 py-6 scrollbar-thin">
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-4">
+            <div className="w-16 h-16 rounded-full bg-secondary flex items-center justify-center">
+              <Bot className="h-8 w-8" />
+            </div>
+            <div className="text-center">
+              <p className="text-lg font-medium text-foreground">AI Assistant</p>
+              <p className="text-sm">Start a conversation to get help</p>
+            </div>
+          </div>
+        ) : (
+          <MessageList messages={messages} />
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input area */}
+      <div className="px-4 pb-6">
+        <div className="rounded-xl border bg-card shadow-sm p-4">
+          <ChatInput
+            onSend={sendMessage}
+            disabled={!isConnected || isProcessing}
+            isProcessing={isProcessing}
+          />
+          <div className="flex items-center justify-between mt-3 pt-3 border-t">
+            <div className="flex items-center gap-2">
+              {isConnected ? (
+                <Wifi className="h-3.5 w-3.5 text-green-500" />
+              ) : (
+                <WifiOff className="h-3.5 w-3.5 text-red-500" />
+              )}
+              <span className="text-xs text-muted-foreground">
+                {isConnected ? "Connected" : "Disconnected"}
+              </span>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={clearMessages}
+              className="text-xs h-7 px-2"
+            >
+              <RotateCcw className="h-3 w-3 mr-1.5" />
+              Reset
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/chat/chat-input.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Button } from "@/components/ui";
+import { Send, Loader2 } from "lucide-react";
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  isProcessing?: boolean;
+}
+
+export function ChatInput({ onSend, disabled, isProcessing }: ChatInputProps) {
+  const [message, setMessage] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!isProcessing && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [isProcessing]);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
+    }
+  }, [message]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (message.trim() && !disabled) {
+      onSend(message.trim());
+      setMessage("");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="relative">
+      <textarea
+        ref={textareaRef}
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Type a command or request..."
+        disabled={disabled}
+        rows={1}
+        className="w-full resize-none bg-transparent pr-12 text-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      />
+      <Button
+        type="submit"
+        size="icon"
+        disabled={disabled || !message.trim()}
+        className="absolute right-0 top-0 h-8 w-8 rounded-lg"
+      >
+        {isProcessing ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <Send className="h-4 w-4" />
+        )}
+        <span className="sr-only">Send message</span>
+      </Button>
+    </form>
+  );
+}