create-inox-app 0.1.0

package/dist/templates/presets/ai-chat-app/apps/web/components/ai-elements/sources.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+
+export type SourcesProps = ComponentProps<"div">;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+  <Collapsible className={cn("not-prose mb-4 text-xs text-primary", className)} {...props} />
+);
+
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({ className, count, children, ...props }: SourcesTriggerProps) => (
+  <CollapsibleTrigger className={cn("flex items-center gap-2", className)} {...props}>
+    {children ?? (
+      <>
+        <p className="font-medium">Used {count} sources</p>
+        <ChevronDownIcon className="h-4 w-4" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SourcesContent = ({ className, ...props }: SourcesContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "mt-3 flex w-fit flex-col gap-2",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type SourceProps = ComponentProps<"a">;
+
+export const Source = ({ href, title, children, ...props }: SourceProps) => (
+  <a className="flex items-center gap-2" href={href} rel="noreferrer" target="_blank" {...props}>
+    {children ?? (
+      <>
+        <BookIcon className="h-4 w-4" />
+        <span className="block font-medium">{title}</span>
+      </>
+    )}
+  </a>
+);

package/dist/templates/presets/ai-chat-app/apps/web/components/ai-elements/tool.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import type { DynamicToolUIPart, ToolUIPart } from "ai";
+import type { ComponentProps, ReactNode } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  CircleIcon,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { isValidElement } from "react";
+
+import { CodeBlock } from "./code-block";
+
+export type ToolProps = ComponentProps<typeof Collapsible>;
+
+export const Tool = ({ className, ...props }: ToolProps) => (
+  <Collapsible
+    className={cn("group not-prose mb-4 w-full rounded-md border", className)}
+    {...props}
+  />
+);
+
+export type ToolPart = ToolUIPart | DynamicToolUIPart;
+
+export type ToolHeaderProps = {
+  title?: string;
+  className?: string;
+} & (
+  | { type: ToolUIPart["type"]; state: ToolUIPart["state"]; toolName?: never }
+  | {
+      type: DynamicToolUIPart["type"];
+      state: DynamicToolUIPart["state"];
+      toolName: string;
+    }
+);
+
+const statusLabels: Record<ToolPart["state"], string> = {
+  "approval-requested": "Awaiting Approval",
+  "approval-responded": "Responded",
+  "input-available": "Running",
+  "input-streaming": "Pending",
+  "output-available": "Completed",
+  "output-denied": "Denied",
+  "output-error": "Error",
+};
+
+const statusIcons: Record<ToolPart["state"], ReactNode> = {
+  "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
+  "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
+  "input-available": <ClockIcon className="size-4 animate-pulse" />,
+  "input-streaming": <CircleIcon className="size-4" />,
+  "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
+  "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
+  "output-error": <XCircleIcon className="size-4 text-red-600" />,
+};
+
+export const getStatusBadge = (status: ToolPart["state"]) => (
+  <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
+    {statusIcons[status]}
+    {statusLabels[status]}
+  </Badge>
+);
+
+export const ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  toolName,
+  ...props
+}: ToolHeaderProps) => {
+  const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
+
+  return (
+    <CollapsibleTrigger
+      className={cn("flex w-full items-center justify-between gap-4 p-3", className)}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        <WrenchIcon className="size-4 text-muted-foreground" />
+        <span className="text-sm font-medium">{title ?? derivedName}</span>
+        {getStatusBadge(state)}
+      </div>
+      <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+    </CollapsibleTrigger>
+  );
+};
+
+export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const ToolContent = ({ className, ...props }: ToolContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in space-y-4 p-4 text-popover-foreground outline-none",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ToolInputProps = ComponentProps<"div"> & {
+  input: ToolPart["input"];
+};
+
+export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
+  <div className={cn("space-y-2 overflow-hidden", className)} {...props}>
+    <h4 className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+      Parameters
+    </h4>
+    <div className="rounded-md bg-muted/50">
+      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+    </div>
+  </div>
+);
+
+export type ToolOutputProps = ComponentProps<"div"> & {
+  output: ToolPart["output"];
+  errorText: ToolPart["errorText"];
+};
+
+export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+
+  let Output = <div>{output as ReactNode}</div>;
+
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />;
+  } else if (typeof output === "string") {
+    Output = <CodeBlock code={output} language="json" />;
+  }
+
+  return (
+    <div className={cn("space-y-2", className)} {...props}>
+      <h4 className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+        {errorText ? "Error" : "Result"}
+      </h4>
+      <div
+        className={cn(
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+          errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground",
+        )}
+      >
+        {errorText && <div>{errorText}</div>}
+        {Output}
+      </div>
+    </div>
+  );
+};

package/dist/templates/presets/ai-chat-app/apps/web/components/app-sidebar.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { ChevronsUpDown, LogOut, SquarePen } from "lucide-react";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ChatSidebarList } from "@/components/chat-sidebar-list";
+import { useChatSessions } from "@/components/chat-sessions-provider";
+import { authClient } from "@/lib/auth-client";
+
+export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
+  const router = useRouter();
+  const { startNewChat } = useChatSessions();
+  const [mounted, setMounted] = useState(false);
+  const { data: session, isPending } = authClient.useSession();
+
+  useEffect(() => setMounted(true), []);
+
+  const handleSignOut = async () => {
+    await authClient.signOut({
+      fetchOptions: { onSuccess: () => window.location.assign("/login") },
+    });
+  };
+
+  const initials = session?.user?.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              tooltip="New Chat"
+              onClick={() => {
+                startNewChat();
+                router.push("/chat");
+              }}
+            >
+              <SquarePen />
+              <span>New Chat</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <ChatSidebarList />
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            {!mounted || isPending ? (
+              <div className="flex items-center gap-2 px-1 py-1.5">
+                <Skeleton className="size-8 rounded-lg" />
+                <div className="flex-1 space-y-1.5 group-data-[collapsible=icon]:hidden">
+                  <Skeleton className="h-3 w-24" />
+                  <Skeleton className="h-3 w-32" />
+                </div>
+              </div>
+            ) : (
+              <DropdownMenu>
+                <DropdownMenuTrigger render={<SidebarMenuButton size="lg" />}>
+                  <Avatar className="size-8 rounded-lg">
+                    <AvatarFallback className="rounded-lg">{initials ?? "?"}</AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium">{session?.user?.name}</span>
+                    <span className="truncate text-xs text-muted-foreground">
+                      {session?.user?.email}
+                    </span>
+                  </div>
+                  <ChevronsUpDown className="ml-auto size-4" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="top" align="end" sideOffset={4} className="w-56">
+                  <DropdownMenuItem onClick={handleSignOut}>
+                    <LogOut />
+                    Sign out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/dist/templates/presets/ai-chat-app/apps/web/components/chat-sessions-provider.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+
+export type ChatSession = {
+  id: string;
+  title: string;
+  updatedAt: string;
+};
+
+type ChatSessionsContextValue = {
+  sessions: ChatSession[];
+  isLoading: boolean;
+  newChatKey: number;
+  refetch: () => void;
+  addSession: (session: ChatSession) => void;
+  removeSession: (chatId: string) => void;
+  updateTitle: (chatId: string, title: string) => void;
+  startNewChat: () => void;
+};
+
+const ChatSessionsContext = createContext<ChatSessionsContextValue | null>(null);
+
+export const useChatSessions = (): ChatSessionsContextValue => {
+  const ctx = useContext(ChatSessionsContext);
+  if (!ctx) throw new Error("useChatSessions must be used within ChatSessionsProvider");
+  return ctx;
+};
+
+export function ChatSessionsProvider({ children }: { children: React.ReactNode }) {
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [newChatKey, setNewChatKey] = useState(0);
+
+  const fetchSessions = useCallback(async () => {
+    try {
+      const res = await fetch("/api/chat/sessions");
+      if (res.ok) {
+        const data: ChatSession[] = await res.json();
+        setSessions(data);
+      }
+    } catch {
+      // silently fail — sidebar will show empty state
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSessions();
+  }, [fetchSessions]);
+
+  const refetch = useCallback(() => {
+    fetchSessions();
+  }, [fetchSessions]);
+
+  const addSession = useCallback((session: ChatSession) => {
+    setSessions((prev) => [session, ...prev]);
+  }, []);
+
+  const removeSession = useCallback((chatId: string) => {
+    setSessions((prev) => prev.filter((s) => s.id !== chatId));
+  }, []);
+
+  const updateTitle = useCallback((chatId: string, title: string) => {
+    setSessions((prev) => prev.map((s) => (s.id === chatId ? { ...s, title } : s)));
+  }, []);
+
+  const startNewChat = useCallback(() => {
+    setNewChatKey((k) => k + 1);
+  }, []);
+
+  return (
+    <ChatSessionsContext
+      value={{
+        sessions,
+        isLoading,
+        newChatKey,
+        refetch,
+        addSession,
+        removeSession,
+        updateTitle,
+        startNewChat,
+      }}
+    >
+      {children}
+    </ChatSessionsContext>
+  );
+}

package/dist/templates/presets/ai-chat-app/apps/web/components/chat-sidebar-list.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useRef, useState } from "react";
+import { Pencil, X } from "lucide-react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+} from "@/components/ui/sidebar";
+import { useChatSessions, type ChatSession } from "@/components/chat-sessions-provider";
+import { groupByDate } from "@/lib/group-by-date";
+
+function ChatSessionItem({ session }: { session: ChatSession }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { removeSession, updateTitle } = useChatSessions();
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(session.title);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isActive = pathname === `/chat/${session.id}`;
+
+  const handleDelete = async () => {
+    const res = await fetch(`/api/chat/sessions/${session.id}`, { method: "DELETE" });
+    if (res.ok) {
+      removeSession(session.id);
+      if (isActive) router.push("/chat");
+    }
+    setDeleteOpen(false);
+  };
+
+  const handleRename = async () => {
+    const trimmed = renameValue.trim();
+    if (!trimmed || trimmed === session.title) {
+      setIsRenaming(false);
+      return;
+    }
+    const res = await fetch(`/api/chat/sessions/${session.id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title: trimmed }),
+    });
+    if (res.ok) {
+      updateTitle(session.id, trimmed);
+    }
+    setIsRenaming(false);
+  };
+
+  const handleRenameKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleRename();
+    } else if (e.key === "Escape") {
+      setRenameValue(session.title);
+      setIsRenaming(false);
+    }
+  };
+
+  const startRenaming = () => {
+    setRenameValue(session.title);
+    setIsRenaming(true);
+    setTimeout(() => inputRef.current?.select(), 0);
+  };
+
+  return (
+    <SidebarMenuItem>
+      {isRenaming ? (
+        <input
+          ref={inputRef}
+          value={renameValue}
+          onChange={(e) => setRenameValue(e.target.value)}
+          onKeyDown={handleRenameKeyDown}
+          onBlur={handleRename}
+          className="flex h-8 w-full items-center rounded-md border border-sidebar-ring bg-transparent px-2 text-sm outline-hidden"
+        />
+      ) : (
+        <>
+          <SidebarMenuButton isActive={isActive} render={<Link href={`/chat/${session.id}`} />}>
+            <span className="truncate pr-6 group-hover/menu-item:pr-10">{session.title}</span>
+          </SidebarMenuButton>
+          <SidebarMenuAction
+            showOnHover
+            className="right-7"
+            aria-label="Rename"
+            onClick={startRenaming}
+          >
+            <Pencil />
+          </SidebarMenuAction>
+          <SidebarMenuAction showOnHover aria-label="Delete" onClick={() => setDeleteOpen(true)}>
+            <X />
+          </SidebarMenuAction>
+        </>
+      )}
+
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Chat</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete &ldquo;{session.title}&rdquo; and all its messages.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </SidebarMenuItem>
+  );
+}
+
+export function ChatSidebarList() {
+  const { sessions, isLoading } = useChatSessions();
+
+  if (isLoading) {
+    return (
+      <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {Array.from({ length: 5 }).map((_, i) => (
+              <SidebarMenuSkeleton key={i} />
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    );
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <div className="px-4 py-8 text-center text-sm text-muted-foreground group-data-[collapsible=icon]:hidden">
+        No conversations yet
+      </div>
+    );
+  }
+
+  const groups = groupByDate(sessions);
+
+  return (
+    <div className="group-data-[collapsible=icon]:hidden">
+      {groups.map((group) => (
+        <SidebarGroup key={group.label}>
+          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {group.items.map((session) => (
+                <ChatSessionItem key={session.id} session={session} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      ))}
+    </div>
+  );
+}