fastapi-fullstack 0.1.2__py3-none-any.whl

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

@@ -0,0 +1,261 @@
+{%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
+"use client";
+
+import { useEffect, useState } from "react";
+import { useConversations } from "@/hooks";
+import { Button } from "@/components/ui";
+import { cn } from "@/lib/utils";
+import {
+  MessageSquarePlus,
+  MessageSquare,
+  Trash2,
+  Archive,
+  MoreVertical,
+  Pencil,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import type { Conversation } from "@/types";
+
+interface ConversationItemProps {
+  conversation: Conversation;
+  isActive: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+  onArchive: () => void;
+  onRename: (title: string) => void;
+}
+
+function ConversationItem({
+  conversation,
+  isActive,
+  onSelect,
+  onDelete,
+  onArchive,
+  onRename,
+}: ConversationItemProps) {
+  const [showMenu, setShowMenu] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(conversation.title || "");
+
+  const handleRename = () => {
+    if (editTitle.trim()) {
+      onRename(editTitle.trim());
+    }
+    setIsEditing(false);
+  };
+
+  const displayTitle =
+    conversation.title ||
+    `Chat ${new Date(conversation.created_at).toLocaleDateString()}`;
+
+  return (
+    <div
+      className={cn(
+        "group relative flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors cursor-pointer",
+        isActive
+          ? "bg-secondary text-secondary-foreground"
+          : "text-muted-foreground hover:bg-secondary/50 hover:text-secondary-foreground"
+      )}
+      onClick={onSelect}
+    >
+      <MessageSquare className="h-4 w-4 shrink-0" />
+      {isEditing ? (
+        <input
+          type="text"
+          value={editTitle}
+          onChange={(e) => setEditTitle(e.target.value)}
+          onBlur={handleRename}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleRename();
+            if (e.key === "Escape") setIsEditing(false);
+          }}
+          className="flex-1 bg-transparent outline-none text-foreground"
+          autoFocus
+          onClick={(e) => e.stopPropagation()}
+        />
+      ) : (
+        <span className="flex-1 truncate">{displayTitle}</span>
+      )}
+
+      <div className="relative">
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn(
+            "h-6 w-6 p-0 opacity-0 group-hover:opacity-100",
+            showMenu && "opacity-100"
+          )}
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowMenu(!showMenu);
+          }}
+        >
+          <MoreVertical className="h-3.5 w-3.5" />
+        </Button>
+
+        {showMenu && (
+          <>
+            <div
+              className="fixed inset-0 z-10"
+              onClick={() => setShowMenu(false)}
+            />
+            <div className="absolute right-0 top-6 z-20 w-36 rounded-md border bg-popover shadow-lg">
+              <button
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-secondary"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsEditing(true);
+                  setShowMenu(false);
+                }}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+                Rename
+              </button>
+              <button
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-secondary"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onArchive();
+                  setShowMenu(false);
+                }}
+              >
+                <Archive className="h-3.5 w-3.5" />
+                Archive
+              </button>
+              <button
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-destructive/10"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                  setShowMenu(false);
+                }}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+                Delete
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface ConversationSidebarProps {
+  className?: string;
+}
+
+export function ConversationSidebar({ className }: ConversationSidebarProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const {
+    conversations,
+    currentConversationId,
+    isLoading,
+    fetchConversations,
+    selectConversation,
+    deleteConversation,
+    archiveConversation,
+    renameConversation,
+    startNewChat,
+  } = useConversations();
+
+  useEffect(() => {
+    fetchConversations();
+  }, [fetchConversations]);
+
+  const activeConversations = conversations.filter((c) => !c.is_archived);
+
+  if (isCollapsed) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center border-r bg-background py-4 w-12",
+          className
+        )}
+      >
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0 mb-4"
+          onClick={() => setIsCollapsed(false)}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={startNewChat}
+          title="New Chat"
+        >
+          <MessageSquarePlus className="h-4 w-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <aside
+      className={cn(
+        "flex w-64 shrink-0 flex-col border-r bg-background",
+        className
+      )}
+    >
+      <div className="flex items-center justify-between border-b px-4 py-3">
+        <h2 className="font-semibold text-sm">Conversations</h2>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={() => setIsCollapsed(true)}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <div className="p-3">
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full justify-start gap-2"
+          onClick={startNewChat}
+        >
+          <MessageSquarePlus className="h-4 w-4" />
+          New Chat
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-3 pb-3">
+        {isLoading && conversations.length === 0 ? (
+          <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+            Loading...
+          </div>
+        ) : activeConversations.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-8 text-center text-sm text-muted-foreground">
+            <MessageSquare className="h-8 w-8 mb-2 opacity-50" />
+            <p>No conversations yet</p>
+            <p className="text-xs mt-1">Start a new chat to begin</p>
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {activeConversations.map((conversation) => (
+              <ConversationItem
+                key={conversation.id}
+                conversation={conversation}
+                isActive={conversation.id === currentConversationId}
+                onSelect={() => selectConversation(conversation.id)}
+                onDelete={() => deleteConversation(conversation.id)}
+                onArchive={() => archiveConversation(conversation.id)}
+                onRename={(title) => renameConversation(conversation.id, title)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+}
+{%- else %}
+// Conversation sidebar - not configured (enable_conversation_persistence is false)
+{%- endif %}

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

@@ -0,0 +1,8 @@
+export { ChatContainer } from "./chat-container";
+export { MessageList } from "./message-list";
+export { MessageItem } from "./message-item";
+export { ToolCallCard } from "./tool-call-card";
+export { ChatInput } from "./chat-input";
+{%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
+export { ConversationSidebar } from "./conversation-sidebar";
+{%- endif %}

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

@@ -0,0 +1,63 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ChatMessage } from "@/types";
+import { ToolCallCard } from "./tool-call-card";
+import { User, Bot } from "lucide-react";
+
+interface MessageItemProps {
+  message: ChatMessage;
+}
+
+export function MessageItem({ message }: MessageItemProps) {
+  const isUser = message.role === "user";
+
+  return (
+    <div
+      className={cn(
+        "flex gap-4 py-4",
+        isUser && "flex-row-reverse"
+      )}
+    >
+      {/* Avatar */}
+      <div
+        className={cn(
+          "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+          isUser ? "bg-primary text-primary-foreground" : "bg-orange-500/10 text-orange-500"
+        )}
+      >
+        {isUser ? <User className="h-4 w-4" /> : <Bot className="h-4 w-4" />}
+      </div>
+
+      {/* Content */}
+      <div className={cn(
+        "flex-1 space-y-2 overflow-hidden max-w-[85%]",
+        isUser && "flex flex-col items-end"
+      )}>
+        {/* Text content */}
+        <div className={cn(
+          "rounded-2xl px-4 py-2.5",
+          isUser
+            ? "bg-primary text-primary-foreground rounded-tr-sm"
+            : "bg-muted rounded-tl-sm"
+        )}>
+          <p className="whitespace-pre-wrap break-words text-sm">
+            {message.content}
+            {message.isStreaming && (
+              <span className="inline-block w-1.5 h-4 ml-1 bg-current animate-pulse rounded-full" />
+            )}
+          </p>
+        </div>
+
+        {/* Tool calls */}
+        {message.toolCalls && message.toolCalls.length > 0 && (
+          <div className="space-y-2 w-full">
+            {message.toolCalls.map((toolCall) => (
+              <ToolCallCard key={toolCall.id} toolCall={toolCall} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ChatMessage } from "@/types";
+import { MessageItem } from "./message-item";
+
+interface MessageListProps {
+  messages: ChatMessage[];
+}
+
+export function MessageList({ messages }: MessageListProps) {
+  return (
+    <div className="space-y-4">
+      {messages.map((message) => (
+        <MessageItem key={message.id} message={message} />
+      ))}
+    </div>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/chat/tool-call-card.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui";
+import type { ToolCall } from "@/types";
+import { Wrench, CheckCircle, Loader2, AlertCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ToolCallCardProps {
+  toolCall: ToolCall;
+}
+
+export function ToolCallCard({ toolCall }: ToolCallCardProps) {
+  const statusConfig = {
+    pending: { icon: Loader2, color: "text-muted-foreground", animate: true },
+    running: { icon: Loader2, color: "text-blue-500", animate: true },
+    completed: { icon: CheckCircle, color: "text-green-500", animate: false },
+    error: { icon: AlertCircle, color: "text-red-500", animate: false },
+  };
+
+  const { icon: StatusIcon, color, animate } = statusConfig[toolCall.status];
+
+  return (
+    <Card className="bg-muted/50">
+      <CardHeader className="py-2 px-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Wrench className="h-4 w-4 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium">
+              {toolCall.name}
+            </CardTitle>
+          </div>
+          <StatusIcon
+            className={cn("h-4 w-4", color, animate && "animate-spin")}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="py-2 px-3 space-y-2">
+        {/* Arguments */}
+        <div>
+          <p className="text-xs text-muted-foreground mb-1">Arguments:</p>
+          <pre className="text-xs bg-background p-2 rounded overflow-x-auto">
+            {JSON.stringify(toolCall.args, null, 2)}
+          </pre>
+        </div>
+
+        {/* Result */}
+        {toolCall.result !== undefined && (
+          <div>
+            <p className="text-xs text-muted-foreground mb-1">Result:</p>
+            <pre className="text-xs bg-background p-2 rounded overflow-x-auto">
+              {typeof toolCall.result === "string"
+                ? toolCall.result
+                : JSON.stringify(toolCall.result, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/icons/google-icon.tsx

@@ -0,0 +1,32 @@
+{%- if cookiecutter.enable_oauth_google %}
+import { SVGProps } from "react";
+
+export function GoogleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      />
+    </svg>
+  );
+}
+{%- else %}
+// Google icon component - OAuth not enabled
+{%- endif %}

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

@@ -0,0 +1,3 @@
+{%- if cookiecutter.enable_oauth_google %}
+export { GoogleIcon } from "./google-icon";
+{%- endif %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/language-switcher.tsx

@@ -0,0 +1,97 @@
+{%- if cookiecutter.enable_i18n %}
+'use client';
+
+import { useLocale } from 'next-intl';
+import { useRouter, usePathname } from 'next/navigation';
+import { locales, type Locale, getLocaleLabel } from '@/i18n';
+
+/**
+ * Language switcher dropdown component.
+ * Allows users to switch between available locales.
+ */
+export function LanguageSwitcher() {
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleChange = (newLocale: Locale) => {
+    // Remove the current locale from pathname and add the new one
+    const segments = pathname.split('/');
+    segments[1] = newLocale;
+    const newPath = segments.join('/');
+    router.push(newPath);
+  };
+
+  return (
+    <div className="relative">
+      <select
+        value={locale}
+        onChange={(e) => handleChange(e.target.value as Locale)}
+        className="appearance-none bg-transparent border border-gray-300 dark:border-gray-600 rounded-md px-3 py-1.5 pr-8 text-sm cursor-pointer hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        aria-label="Select language"
+      >
+        {locales.map((loc) => (
+          <option key={loc} value={loc}>
+            {getLocaleLabel(loc)}
+          </option>
+        ))}
+      </select>
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
+        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Compact language switcher with flag icons.
+ */
+export function LanguageSwitcherCompact() {
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const flags: Record<Locale, string> = {
+    en: '🇬🇧',
+    pl: '🇵🇱',
+  };
+
+  const handleChange = (newLocale: Locale) => {
+    const segments = pathname.split('/');
+    segments[1] = newLocale;
+    const newPath = segments.join('/');
+    router.push(newPath);
+  };
+
+  return (
+    <div className="flex gap-1">
+      {locales.map((loc) => (
+        <button
+          key={loc}
+          onClick={() => handleChange(loc)}
+          className={`px-2 py-1 rounded-md text-lg transition-opacity ${
+            locale === loc
+              ? 'opacity-100 bg-gray-100 dark:bg-gray-800'
+              : 'opacity-50 hover:opacity-75'
+          }`}
+          aria-label={getLocaleLabel(loc)}
+          aria-pressed={locale === loc}
+        >
+          {flags[loc]}
+        </button>
+      ))}
+    </div>
+  );
+}
+{%- else %}
+// i18n is disabled - no language switcher component
+export function LanguageSwitcher() {
+  return null;
+}
+
+export function LanguageSwitcherCompact() {
+  return null;
+}
+{%- endif %}

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/layout/header.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { useAuth } from "@/hooks";
+import { Button } from "@/components/ui";
+import { ThemeToggle } from "@/components/theme";
+import { ROUTES } from "@/lib/constants";
+import { LogOut, User } from "lucide-react";
+
+export function Header() {
+  const { user, isAuthenticated, logout } = useAuth();
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-14 items-center justify-end px-6">
+        <div className="flex items-center gap-3">
+          <ThemeToggle />
+          {isAuthenticated ? (
+            <>
+              <Button variant="ghost" size="sm" asChild>
+                <Link href={ROUTES.PROFILE} className="flex items-center gap-2">
+                  <User className="h-4 w-4" />
+                  <span className="max-w-32 truncate">{user?.email}</span>
+                </Link>
+              </Button>
+              <Button variant="ghost" size="sm" onClick={logout}>
+                <LogOut className="h-4 w-4" />
+                <span className="sr-only">Logout</span>
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="ghost" size="sm" asChild>
+                <Link href={ROUTES.LOGIN}>Login</Link>
+              </Button>
+              <Button size="sm" asChild>
+                <Link href={ROUTES.REGISTER}>Register</Link>
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { Header } from "./header";
+export { Sidebar } from "./sidebar";

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/components/layout/sidebar.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { ROUTES } from "@/lib/constants";
+import { LayoutDashboard, MessageSquare } from "lucide-react";
+
+const navigation = [
+  { name: "Dashboard", href: ROUTES.DASHBOARD, icon: LayoutDashboard },
+  { name: "Chat", href: ROUTES.CHAT, icon: MessageSquare },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="hidden w-64 shrink-0 border-r bg-background md:block">
+      <div className="flex h-full flex-col">
+        <div className="flex h-14 items-center border-b px-4">
+          <Link href={ROUTES.HOME} className="flex items-center gap-2 font-semibold">
+            <span>{{ cookiecutter.project_name }}</span>
+          </Link>
+        </div>
+        <nav className="flex-1 space-y-1 p-4">
+          {navigation.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.name}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-secondary text-secondary-foreground"
+                    : "text-muted-foreground hover:bg-secondary/50 hover:text-secondary-foreground"
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                {item.name}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,7 @@
+{%- if cookiecutter.use_frontend %}
+export { ThemeProvider } from "./theme-provider";
+export { ThemeToggle } from "./theme-toggle";
+{%- else %}
+/* Theme components - frontend not configured */
+export {};
+{%- endif %}