fastapi-fullstack 0.1.7__py3-none-any.whl

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

@@ -0,0 +1,295 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetClose } from "@/components/ui";
+import { cn } from "@/lib/utils";
+import { useLocalChatStore, useChatSidebarStore } from "@/stores";
+import type { LocalConversation } from "@/stores/local-chat-store";
+import {
+  MessageSquarePlus,
+  MessageSquare,
+  Trash2,
+  MoreVertical,
+  Pencil,
+  ChevronLeft,
+  ChevronRight,
+  PanelLeftClose,
+  PanelLeft,
+} from "lucide-react";
+
+interface LocalConversationItemProps {
+  conversation: LocalConversation;
+  isActive: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+  onRename: (title: string) => void;
+}
+
+function LocalConversationItem({
+  conversation,
+  isActive,
+  onSelect,
+  onDelete,
+  onRename,
+}: LocalConversationItemProps) {
+  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.createdAt).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 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>
+  );
+}
+
+function ConversationList({ onNavigate }: { onNavigate?: () => void }) {
+  const {
+    conversations,
+    currentConversationId,
+    selectConversation,
+    deleteConversation,
+    renameConversation,
+    createConversation,
+  } = useLocalChatStore();
+
+  const handleSelect = (id: string) => {
+    selectConversation(id);
+    onNavigate?.();
+  };
+
+  const handleNewChat = () => {
+    createConversation();
+    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">
+        {conversations.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">
+            {conversations.map((conversation) => (
+              <LocalConversationItem
+                key={conversation.id}
+                conversation={conversation}
+                isActive={conversation.id === currentConversationId}
+                onSelect={() => handleSelect(conversation.id)}
+                onDelete={() => deleteConversation(conversation.id)}
+                onRename={(title) => renameConversation(conversation.id, title)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="border-t px-3 py-2">
+        <p className="text-xs text-muted-foreground text-center">
+          Stored in browser
+        </p>
+      </div>
+    </>
+  );
+}
+
+interface LocalConversationSidebarProps {
+  className?: string;
+}
+
+export function LocalConversationSidebar({
+  className,
+}: LocalConversationSidebarProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const { isOpen, close } = useChatSidebarStore();
+
+  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={() => {
+            useLocalChatStore.getState().createConversation();
+          }}
+          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">Local Chats</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 />
+      </aside>
+
+      <Sheet open={isOpen} onOpenChange={close}>
+        <SheetContent side="left" className="w-80 p-0">
+          <SheetHeader className="h-12 px-4">
+            <SheetTitle>Local Chats</SheetTitle>
+            <SheetClose onClick={close} />
+          </SheetHeader>
+          <div className="flex flex-col h-[calc(100%-48px)]">
+            <ConversationList onNavigate={close} />
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+export function ChatSidebarToggle() {
+  const { toggle, isOpen } = useChatSidebarStore();
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-10 w-10 p-0 md:hidden"
+      onClick={toggle}
+    >
+      {isOpen ? (
+        <PanelLeftClose className="h-5 w-5" />
+      ) : (
+        <PanelLeft className="h-5 w-5" />
+      )}
+      <span className="sr-only">Toggle chat list</span>
+    </Button>
+  );
+}

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

@@ -0,0 +1,167 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import { CopyButton } from "./copy-button";
+
+interface MarkdownContentProps {
+  content: string;
+}
+
+export function MarkdownContent({ content }: MarkdownContentProps) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeHighlight]}
+      components={% raw %}{{{% endraw %}
+        pre({ children, ...props }) {
+          const codeElement = children as React.ReactElement<{
+            children?: string;
+          }>;
+          const codeContent =
+            typeof codeElement?.props?.children === "string"
+              ? codeElement.props.children
+              : "";
+
+          return (
+            <div className="group relative">
+              <pre
+                className="overflow-x-auto rounded-lg bg-muted/50 p-3 text-xs"
+                {...props}
+              >
+                {children}
+              </pre>
+              {codeContent && (
+                <div className="absolute right-2 top-2">
+                  <CopyButton text={codeContent} className="opacity-100" />
+                </div>
+              )}
+            </div>
+          );
+        },
+        code({ className, children, ...props }) {
+          const isInline = !className;
+          if (isInline) {
+            return (
+              <code
+                className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono"
+                {...props}
+              >
+                {children}
+              </code>
+            );
+          }
+          return (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          );
+        },
+        a({ href, children, ...props }) {
+          return (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary underline hover:text-primary/80"
+              {...props}
+            >
+              {children}
+            </a>
+          );
+        },
+        p({ children, ...props }) {
+          return (
+            <p className="mb-2 last:mb-0" {...props}>
+              {children}
+            </p>
+          );
+        },
+        ul({ children, ...props }) {
+          return (
+            <ul className="mb-2 ml-4 list-disc last:mb-0" {...props}>
+              {children}
+            </ul>
+          );
+        },
+        ol({ children, ...props }) {
+          return (
+            <ol className="mb-2 ml-4 list-decimal last:mb-0" {...props}>
+              {children}
+            </ol>
+          );
+        },
+        li({ children, ...props }) {
+          return (
+            <li className="mb-1" {...props}>
+              {children}
+            </li>
+          );
+        },
+        h1({ children, ...props }) {
+          return (
+            <h1 className="mb-2 text-lg font-bold" {...props}>
+              {children}
+            </h1>
+          );
+        },
+        h2({ children, ...props }) {
+          return (
+            <h2 className="mb-2 text-base font-bold" {...props}>
+              {children}
+            </h2>
+          );
+        },
+        h3({ children, ...props }) {
+          return (
+            <h3 className="mb-2 text-sm font-bold" {...props}>
+              {children}
+            </h3>
+          );
+        },
+        blockquote({ children, ...props }) {
+          return (
+            <blockquote
+              className="mb-2 border-l-2 border-muted-foreground/50 pl-3 italic"
+              {...props}
+            >
+              {children}
+            </blockquote>
+          );
+        },
+        table({ children, ...props }) {
+          return (
+            <div className="mb-2 overflow-x-auto">
+              <table className="min-w-full text-sm" {...props}>
+                {children}
+              </table>
+            </div>
+          );
+        },
+        th({ children, ...props }) {
+          return (
+            <th
+              className="border-b border-muted px-2 py-1 text-left font-semibold"
+              {...props}
+            >
+              {children}
+            </th>
+          );
+        },
+        td({ children, ...props }) {
+          return (
+            <td className="border-b border-muted/50 px-2 py-1" {...props}>
+              {children}
+            </td>
+          );
+        },
+        hr({ ...props }) {
+          return <hr className="my-3 border-muted" {...props} />;
+        },
+      {% raw %}}}{% endraw %}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

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

@@ -0,0 +1,79 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ChatMessage } from "@/types";
+import { ToolCallCard } from "./tool-call-card";
+import { MarkdownContent } from "./markdown-content";
+import { CopyButton } from "./copy-button";
+import { User, Bot } from "lucide-react";
+
+interface MessageItemProps {
+  message: ChatMessage;
+}
+
+export function MessageItem({ message }: MessageItemProps) {
+  const isUser = message.role === "user";
+
+  return (
+    <div
+      className={cn(
+        "group flex gap-2 sm:gap-4 py-3 sm:py-4",
+        isUser && "flex-row-reverse"
+      )}
+    >
+      <div
+        className={cn(
+          "flex-shrink-0 w-8 h-8 sm:w-9 sm:h-9 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 sm:h-5 sm:w-5" />}
+      </div>
+
+      <div className={cn(
+        "flex-1 space-y-2 overflow-hidden max-w-[88%] sm:max-w-[85%]",
+        isUser && "flex flex-col items-end"
+      )}>
+        {/* Only show message bubble if there's content or if it's streaming without tool calls */}
+        {(message.content || (message.isStreaming && (!message.toolCalls || message.toolCalls.length === 0))) && (
+          <div className={cn(
+            "relative rounded-2xl px-3 py-2 sm:px-4 sm:py-2.5",
+            isUser
+              ? "bg-primary text-primary-foreground rounded-tr-sm"
+              : "bg-muted rounded-tl-sm"
+          )}>
+            {isUser ? (
+              <p className="whitespace-pre-wrap break-words text-sm">
+                {message.content}
+              </p>
+            ) : (
+              <div className="text-sm prose-sm max-w-none">
+                <MarkdownContent content={message.content} />
+                {message.isStreaming && (
+                  <span className="inline-block w-1.5 h-4 ml-1 bg-current animate-pulse rounded-full" />
+                )}
+              </div>
+            )}
+
+            {!isUser && message.content && !message.isStreaming && (
+              <div className="absolute -right-1 -top-1 sm:opacity-0 sm:group-hover:opacity-100">
+                <CopyButton
+                  text={message.content}
+                  className="bg-background/80 hover:bg-background shadow-sm"
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        {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,79 @@
+"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";
+import { CopyButton } from "./copy-button";
+
+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];
+
+  const argsText = JSON.stringify(toolCall.args, null, 2);
+  const resultText =
+    toolCall.result !== undefined
+      ? typeof toolCall.result === "string"
+        ? toolCall.result
+        : JSON.stringify(toolCall.result, null, 2)
+      : "";
+
+  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 className="group relative">
+          <div className="flex items-center justify-between mb-1">
+            <p className="text-xs text-muted-foreground">Arguments:</p>
+            <CopyButton
+              text={argsText}
+              className="opacity-0 group-hover:opacity-100"
+            />
+          </div>
+          <pre className="text-xs bg-background p-2 rounded overflow-x-auto">
+            {argsText}
+          </pre>
+        </div>
+
+        {/* Result */}
+        {toolCall.result !== undefined && (
+          <div className="group relative">
+            <div className="flex items-center justify-between mb-1">
+              <p className="text-xs text-muted-foreground">Result:</p>
+              <CopyButton
+                text={resultText}
+                className="opacity-0 group-hover:opacity-100"
+              />
+            </div>
+            <pre className="text-xs bg-background p-2 rounded overflow-x-auto max-h-48 overflow-y-auto">
+              {resultText}
+            </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 %}