fastapi-fullstack 0.1.7__py3-none-any.whl

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

@@ -0,0 +1,234 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+import { useChat, useLocalChat } 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, useAuthStore } from "@/stores";
+import { useConversations } from "@/hooks";
+{%- endif %}
+
+{%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
+interface ChatContainerProps {
+  useLocalStorage?: boolean;
+}
+
+export function ChatContainer({ useLocalStorage = false }: ChatContainerProps) {
+  const { isAuthenticated } = useAuthStore();
+
+  const shouldUseLocal = useLocalStorage || !isAuthenticated;
+
+  if (shouldUseLocal) {
+    return <LocalChatContainer />;
+  }
+
+  return <AuthenticatedChatContainer />;
+}
+
+function AuthenticatedChatContainer() {
+  const { currentConversationId, currentMessages } = useConversationStore();
+  const { addMessage: addChatMessage } = useChatStore();
+  const { fetchConversations } = useConversations();
+  const prevConversationIdRef = useRef<string | null | undefined>(undefined);
+
+  const handleConversationCreated = useCallback((conversationId: string) => {
+    fetchConversations();
+  }, [fetchConversations]);
+
+  const {
+    messages,
+    isConnected,
+    isProcessing,
+    connect,
+    disconnect,
+    sendMessage,
+    clearMessages,
+  } = useChat({
+    conversationId: currentConversationId,
+    onConversationCreated: handleConversationCreated,
+  });
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // Clear messages when conversation changes, but NOT when going from null to a new ID
+  // (that happens when a new chat is saved - we want to keep the messages)
+  useEffect(() => {
+    const prevId = prevConversationIdRef.current;
+    const currId = currentConversationId;
+
+    // Skip initial mount
+    if (prevId === undefined) {
+      prevConversationIdRef.current = currId;
+      return;
+    }
+
+    // Clear messages when:
+    // 1. Going from a conversation to null (new chat)
+    // 2. Switching between two different conversations
+    // Do NOT clear when going from null to a conversation (new chat being saved)
+    const shouldClear =
+      currId === null || // Going to new chat
+      (prevId !== null && prevId !== currId); // Switching between conversations
+
+    if (shouldClear) {
+      clearMessages();
+    }
+
+    prevConversationIdRef.current = currId;
+  }, [currentConversationId, clearMessages]);
+
+  // Load messages from conversation store when switching to a saved conversation
+  useEffect(() => {
+    if (currentMessages.length > 0) {
+      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]);
+
+  useEffect(() => {
+    connect();
+    return () => disconnect();
+  }, [connect, disconnect]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <ChatUI
+      messages={messages}
+      isConnected={isConnected}
+      isProcessing={isProcessing}
+      sendMessage={sendMessage}
+      clearMessages={clearMessages}
+      messagesEndRef={messagesEndRef}
+    />
+  );
+}
+{%- endif %}
+
+function LocalChatContainer() {
+  const {
+    messages,
+    isConnected,
+    isProcessing,
+    connect,
+    disconnect,
+    sendMessage,
+    clearMessages,
+  } = useLocalChat();
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    connect();
+    return () => disconnect();
+  }, [connect, disconnect]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <ChatUI
+      messages={messages}
+      isConnected={isConnected}
+      isProcessing={isProcessing}
+      sendMessage={sendMessage}
+      clearMessages={clearMessages}
+      messagesEndRef={messagesEndRef}
+    />
+  );
+}
+
+{%- if not (cookiecutter.enable_conversation_persistence and cookiecutter.use_database) %}
+export function ChatContainer() {
+  return <LocalChatContainer />;
+}
+{%- endif %}
+
+interface ChatUIProps {
+  messages: import("@/types").ChatMessage[];
+  isConnected: boolean;
+  isProcessing: boolean;
+  sendMessage: (content: string) => void;
+  clearMessages: () => void;
+  messagesEndRef: React.RefObject<HTMLDivElement | null>;
+}
+
+function ChatUI({
+  messages,
+  isConnected,
+  isProcessing,
+  sendMessage,
+  clearMessages,
+  messagesEndRef,
+}: ChatUIProps) {
+  return (
+    <div className="flex flex-col h-full max-w-4xl mx-auto w-full">
+      <div className="flex-1 overflow-y-auto px-2 py-4 sm:px-4 sm: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-14 h-14 sm:w-16 sm:h-16 rounded-full bg-secondary flex items-center justify-center">
+              <Bot className="h-7 w-7 sm:h-8 sm:w-8" />
+            </div>
+            <div className="text-center px-4">
+              <p className="text-base sm: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>
+
+      <div className="px-2 pb-2 sm:px-4 sm:pb-4">
+        <div className="rounded-xl border bg-card shadow-sm p-3 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-8 px-3"
+            >
+              <RotateCcw className="h-3.5 w-3.5 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,72 @@
+"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]);
+
+  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 message..."
+        disabled={disabled}
+        rows={1}
+        className="w-full resize-none bg-transparent pr-14 text-sm sm:text-base 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-10 w-10 rounded-lg"
+      >
+        {isProcessing ? (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        ) : (
+          <Send className="h-5 w-5" />
+        )}
+        <span className="sr-only">Send message</span>
+      </Button>
+    </form>
+  );
+}

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

@@ -0,0 +1,328 @@
+{%- 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 { Sheet, SheetContent, SheetHeader, SheetTitle, SheetClose } from "@/components/ui";
+import { cn } from "@/lib/utils";
+import { useChatSidebarStore } from "@/stores";
+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-3 text-sm transition-colors cursor-pointer min-h-[44px]",
+        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-8 w-8 p-0 opacity-0 group-hover:opacity-100 touch:opacity-100",
+            showMenu && "opacity-100"
+          )}
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowMenu(!showMenu);
+          }}
+        >
+          <MoreVertical className="h-4 w-4" />
+        </Button>
+
+        {showMenu && (
+          <>
+            <div
+              className="fixed inset-0 z-10"
+              onClick={() => setShowMenu(false)}
+            />
+            <div className="absolute right-0 top-8 z-20 w-40 rounded-md border bg-popover shadow-lg">
+              <button
+                className="flex w-full items-center gap-2 px-3 py-3 text-sm hover:bg-secondary min-h-[44px]"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsEditing(true);
+                  setShowMenu(false);
+                }}
+              >
+                <Pencil className="h-4 w-4" />
+                Rename
+              </button>
+              <button
+                className="flex w-full items-center gap-2 px-3 py-3 text-sm hover:bg-secondary min-h-[44px]"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onArchive();
+                  setShowMenu(false);
+                }}
+              >
+                <Archive className="h-4 w-4" />
+                Archive
+              </button>
+              <button
+                className="flex w-full items-center gap-2 px-3 py-3 text-sm text-destructive hover:bg-destructive/10 min-h-[44px]"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                  setShowMenu(false);
+                }}
+              >
+                <Trash2 className="h-4 w-4" />
+                Delete
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface ConversationListProps {
+  conversations: Conversation[];
+  currentConversationId: string | null;
+  isLoading: boolean;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+  onArchive: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  onNewChat: () => void;
+  onNavigate?: () => void;
+}
+
+function ConversationList({
+  conversations = [],
+  currentConversationId,
+  isLoading,
+  onSelect,
+  onDelete,
+  onArchive,
+  onRename,
+  onNewChat,
+  onNavigate,
+}: ConversationListProps) {
+  const activeConversations = (conversations ?? []).filter((c) => !c.is_archived);
+
+  const handleSelect = (id: string) => {
+    onSelect(id);
+    onNavigate?.();
+  };
+
+  const handleNewChat = () => {
+    onNewChat();
+    onNavigate?.();
+  };
+
+  return (
+    <>
+      <div className="p-3">
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full justify-start gap-2 h-10"
+          onClick={handleNewChat}
+        >
+          <MessageSquarePlus className="h-4 w-4" />
+          New Chat
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-3 pb-3 scrollbar-thin">
+        {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={() => handleSelect(conversation.id)}
+                onDelete={() => onDelete(conversation.id)}
+                onArchive={() => onArchive(conversation.id)}
+                onRename={(title) => onRename(conversation.id, title)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+interface ConversationSidebarProps {
+  className?: string;
+}
+
+export function ConversationSidebar({ className }: ConversationSidebarProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const { isOpen, close } = useChatSidebarStore();
+  const {
+    conversations,
+    currentConversationId,
+    isLoading,
+    fetchConversations,
+    selectConversation,
+    deleteConversation,
+    archiveConversation,
+    renameConversation,
+    startNewChat,
+  } = useConversations();
+
+  useEffect(() => {
+    fetchConversations();
+  }, [fetchConversations]);
+
+  const listProps = {
+    conversations,
+    currentConversationId,
+    isLoading,
+    onSelect: selectConversation,
+    onDelete: deleteConversation,
+    onArchive: archiveConversation,
+    onRename: renameConversation,
+    onNewChat: startNewChat,
+  };
+
+  if (isCollapsed) {
+    return (
+      <div
+        className={cn(
+          "hidden md:flex flex-col items-center border-r bg-background py-4 w-12",
+          className
+        )}
+      >
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-10 w-10 p-0 mb-4"
+          onClick={() => setIsCollapsed(false)}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-10 w-10 p-0"
+          onClick={startNewChat}
+          title="New Chat"
+        >
+          <MessageSquarePlus className="h-4 w-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <aside
+        className={cn(
+          "hidden md: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 h-12">
+          <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>
+        <ConversationList {...listProps} />
+      </aside>
+
+      <Sheet open={isOpen} onOpenChange={close}>
+        <SheetContent side="left" className="w-80 p-0">
+          <SheetHeader className="h-12 px-4">
+            <SheetTitle>Conversations</SheetTitle>
+            <SheetClose onClick={close} />
+          </SheetHeader>
+          <div className="flex flex-col h-[calc(100%-48px)]">
+            <ConversationList {...listProps} onNavigate={close} />
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+{%- else %}
+export {};
+{%- endif %}

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

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui";
+import { Check, Copy } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface CopyButtonProps {
+  text: string;
+  className?: string;
+  size?: "sm" | "default";
+}
+
+export function CopyButton({ text, className, size = "sm" }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      console.error("Failed to copy text");
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size={size}
+      className={cn(
+        "h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
+        className
+      )}
+      onClick={handleCopy}
+      title={copied ? "Copied!" : "Copy"}
+    >
+      {copied ? (
+        <Check className="h-3.5 w-3.5 text-green-500" />
+      ) : (
+        <Copy className="h-3.5 w-3.5" />
+      )}
+    </Button>
+  );
+}

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

@@ -0,0 +1,11 @@
+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";
+export { LocalConversationSidebar, ChatSidebarToggle } from "./local-conversation-sidebar";
+export { CopyButton } from "./copy-button";
+export { MarkdownContent } from "./markdown-content";
+{%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
+export { ConversationSidebar } from "./conversation-sidebar";
+{%- endif %}