thepopebot 1.1.2 → 1.2.3

package/lib/chat/components/settings-secrets-page.jsx

@@ -0,0 +1,264 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { KeyIcon, CopyIcon, CheckIcon, TrashIcon, RefreshIcon } from './icons.js';
+import { createNewApiKey, getApiKeys, deleteApiKey } from '../actions.js';
+
+function timeAgo(ts) {
+  if (!ts) return 'Never';
+  const seconds = Math.floor((Date.now() - ts) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+
+function formatDate(ts) {
+  if (!ts) return '—';
+  return new Date(ts).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground"
+    >
+      {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+      {copied ? 'Copied' : 'Copy'}
+    </button>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Section wrapper — reusable for each secrets section
+// ─────────────────────────────────────────────────────────────────────────────
+
+function Section({ title, description, children }) {
+  return (
+    <div className="pb-8 mb-8 border-b border-border last:border-b-0 last:pb-0 last:mb-0">
+      <h2 className="text-base font-medium mb-1">{title}</h2>
+      {description && (
+        <p className="text-sm text-muted-foreground mb-4">{description}</p>
+      )}
+      {children}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// API Key section
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ApiKeySection() {
+  const [currentKey, setCurrentKey] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [newKey, setNewKey] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [confirmRegenerate, setConfirmRegenerate] = useState(false);
+  const [error, setError] = useState(null);
+
+  const loadKey = async () => {
+    try {
+      const result = await getApiKeys();
+      setCurrentKey(result);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadKey();
+  }, []);
+
+  const handleCreate = async () => {
+    if (creating) return;
+    setCreating(true);
+    setError(null);
+    setConfirmRegenerate(false);
+    try {
+      const result = await createNewApiKey();
+      if (result.error) {
+        setError(result.error);
+      } else {
+        setNewKey(result.key);
+        await loadKey();
+      }
+    } catch {
+      setError('Failed to create API key');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirmDelete) {
+      setConfirmDelete(true);
+      setTimeout(() => setConfirmDelete(false), 3000);
+      return;
+    }
+    try {
+      await deleteApiKey();
+      setCurrentKey(null);
+      setNewKey(null);
+      setConfirmDelete(false);
+    } catch {
+      // ignore
+    }
+  };
+
+  const handleRegenerate = () => {
+    if (!confirmRegenerate) {
+      setConfirmRegenerate(true);
+      setTimeout(() => setConfirmRegenerate(false), 3000);
+      return;
+    }
+    handleCreate();
+  };
+
+  if (loading) {
+    return <div className="h-14 animate-pulse rounded-md bg-border/50" />;
+  }
+
+  return (
+    <div>
+      {error && (
+        <p className="text-sm text-destructive mb-4">{error}</p>
+      )}
+
+      {/* New key banner */}
+      {newKey && (
+        <div className="rounded-lg border border-green-500/30 bg-green-500/5 p-4 mb-4">
+          <div className="flex items-start justify-between gap-3 mb-2">
+            <p className="text-sm font-medium text-green-600 dark:text-green-400">
+              API key created — copy it now. You won't be able to see it again.
+            </p>
+            <button
+              onClick={() => setNewKey(null)}
+              className="text-xs text-muted-foreground hover:text-foreground shrink-0"
+            >
+              Dismiss
+            </button>
+          </div>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 rounded-md bg-muted px-3 py-2 text-xs font-mono break-all select-all">
+              {newKey}
+            </code>
+            <CopyButton text={newKey} />
+          </div>
+        </div>
+      )}
+
+      {currentKey ? (
+        <div className="rounded-lg border bg-card p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="shrink-0 rounded-md bg-muted p-2">
+                <KeyIcon size={16} />
+              </div>
+              <div>
+                <code className="text-sm font-mono">{currentKey.keyPrefix}...</code>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  Created {formatDate(currentKey.createdAt)}
+                  {currentKey.lastUsedAt && (
+                    <span className="ml-2">· Last used {timeAgo(currentKey.lastUsedAt)}</span>
+                  )}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleRegenerate}
+                disabled={creating}
+                className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border ${
+                  confirmRegenerate
+                    ? 'border-yellow-500 text-yellow-600 hover:bg-yellow-500/10'
+                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
+                } disabled:opacity-50`}
+              >
+                <RefreshIcon size={12} />
+                {creating ? 'Generating...' : confirmRegenerate ? 'Confirm regenerate' : 'Regenerate'}
+              </button>
+              <button
+                onClick={handleDelete}
+                className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium border ${
+                  confirmDelete
+                    ? 'border-destructive text-destructive hover:bg-destructive/10'
+                    : 'border-border text-muted-foreground hover:text-destructive hover:border-destructive/50'
+                }`}
+              >
+                <TrashIcon size={12} />
+                {confirmDelete ? 'Confirm delete' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-lg border border-dashed bg-card p-6 flex flex-col items-center text-center">
+          <p className="text-sm text-muted-foreground mb-3">No API key configured</p>
+          <button
+            onClick={handleCreate}
+            disabled={creating}
+            className="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium bg-foreground text-background hover:bg-foreground/90 disabled:opacity-50 disabled:pointer-events-none"
+          >
+            {creating ? 'Creating...' : 'Create API key'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main page
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SettingsSecretsPage() {
+  return (
+    <div>
+      <Section
+        title="API Key"
+        description="Authenticates external requests to /api endpoints. Pass via the x-api-key header."
+      >
+        <ApiKeySection />
+      </Section>
+
+      {/* Future sections go here, e.g.:
+      <Section title="GitHub Token" description="...">
+        <GitHubTokenSection />
+      </Section>
+      */}
+    </div>
+  );
+}

package/lib/chat/components/sidebar-history-item.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { MessageIcon, TrashIcon } from "./icons.js";
+import { SidebarMenuButton, SidebarMenuItem, useSidebar } from "./ui/sidebar.js";
+import { useChatNav } from "./chat-nav-context.js";
+import { cn } from "../utils.js";
+function SidebarHistoryItem({ chat, isActive, onDelete }) {
+  const { navigateToChat } = useChatNav();
+  const { setOpenMobile } = useSidebar();
+  const [showDelete, setShowDelete] = useState(false);
+  return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative group",
+      onMouseEnter: () => setShowDelete(true),
+      onMouseLeave: () => setShowDelete(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          SidebarMenuButton,
+          {
+            isActive,
+            onClick: () => {
+              navigateToChat(chat.id);
+              setOpenMobile(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx(MessageIcon, { size: 14 }),
+              /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: chat.title })
+            ]
+          }
+        ),
+        showDelete && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "absolute right-1 top-1/2 -translate-y-1/2 rounded-md p-1",
+              "text-muted-foreground hover:text-destructive hover:bg-muted"
+            ),
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete(chat.id);
+            },
+            "aria-label": "Delete chat",
+            children: /* @__PURE__ */ jsx(TrashIcon, { size: 14 })
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  SidebarHistoryItem
+};

package/lib/chat/components/sidebar-history-item.jsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useState } from 'react';
+import { MessageIcon, TrashIcon } from './icons.js';
+import { SidebarMenuButton, SidebarMenuItem, useSidebar } from './ui/sidebar.js';
+import { useChatNav } from './chat-nav-context.js';
+import { cn } from '../utils.js';
+
+export function SidebarHistoryItem({ chat, isActive, onDelete }) {
+  const { navigateToChat } = useChatNav();
+  const { setOpenMobile } = useSidebar();
+  const [showDelete, setShowDelete] = useState(false);
+
+  return (
+    <SidebarMenuItem>
+      <div
+        className="relative group"
+        onMouseEnter={() => setShowDelete(true)}
+        onMouseLeave={() => setShowDelete(false)}
+      >
+        <SidebarMenuButton
+          isActive={isActive}
+          onClick={() => {
+            navigateToChat(chat.id);
+            setOpenMobile(false);
+          }}
+        >
+          <MessageIcon size={14} />
+          <span className="truncate flex-1">{chat.title}</span>
+        </SidebarMenuButton>
+
+        {showDelete && (
+          <button
+            className={cn(
+              'absolute right-1 top-1/2 -translate-y-1/2 rounded-md p-1',
+              'text-muted-foreground hover:text-destructive hover:bg-muted'
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(chat.id);
+            }}
+            aria-label="Delete chat"
+          >
+            <TrashIcon size={14} />
+          </button>
+        )}
+      </div>
+    </SidebarMenuItem>
+  );
+}

package/lib/chat/components/sidebar-history.js

@@ -0,0 +1,92 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { SidebarHistoryItem } from "./sidebar-history-item.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu } from "./ui/sidebar.js";
+import { useChatNav } from "./chat-nav-context.js";
+import { getChats, deleteChat } from "../actions.js";
+function groupChatsByDate(chats) {
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today.getTime() - 864e5);
+  const last7Days = new Date(today.getTime() - 7 * 864e5);
+  const last30Days = new Date(today.getTime() - 30 * 864e5);
+  const groups = {
+    Today: [],
+    Yesterday: [],
+    "Last 7 Days": [],
+    "Last 30 Days": [],
+    Older: []
+  };
+  for (const chat of chats) {
+    const date = new Date(chat.updatedAt);
+    if (date >= today) {
+      groups.Today.push(chat);
+    } else if (date >= yesterday) {
+      groups.Yesterday.push(chat);
+    } else if (date >= last7Days) {
+      groups["Last 7 Days"].push(chat);
+    } else if (date >= last30Days) {
+      groups["Last 30 Days"].push(chat);
+    } else {
+      groups.Older.push(chat);
+    }
+  }
+  return groups;
+}
+function SidebarHistory() {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { activeChatId, navigateToChat } = useChatNav();
+  const loadChats = async () => {
+    try {
+      const result = await getChats();
+      setChats(result);
+    } catch (err) {
+      console.error("Failed to load chats:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    loadChats();
+  }, [activeChatId]);
+  useEffect(() => {
+    const handler = () => loadChats();
+    window.addEventListener("chatsupdated", handler);
+    return () => window.removeEventListener("chatsupdated", handler);
+  }, []);
+  const handleDelete = async (chatId) => {
+    const { success } = await deleteChat(chatId);
+    if (success) {
+      setChats((prev) => prev.filter((c) => c.id !== chatId));
+      if (chatId === activeChatId) {
+        navigateToChat(null);
+      }
+    }
+  };
+  if (loading && chats.length === 0) {
+    return /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 px-2", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-8 animate-pulse rounded-md bg-border/50" }, i)) }) }) });
+  }
+  if (chats.length === 0) {
+    return /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx("p", { className: "px-4 py-2 text-sm text-muted-foreground", children: "No chats yet. Start a conversation!" }) }) });
+  }
+  const grouped = groupChatsByDate(chats);
+  return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(grouped).map(
+    ([label, groupChats]) => groupChats.length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+      /* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }),
+      /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: groupChats.map((chat) => /* @__PURE__ */ jsx(
+        SidebarHistoryItem,
+        {
+          chat,
+          isActive: chat.id === activeChatId,
+          onDelete: handleDelete
+        },
+        chat.id
+      )) }) })
+    ] }, label)
+  ) });
+}
+export {
+  SidebarHistory
+};

package/lib/chat/components/sidebar-history.jsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { SidebarHistoryItem } from './sidebar-history-item.js';
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu } from './ui/sidebar.js';
+import { useChatNav } from './chat-nav-context.js';
+import { getChats, deleteChat } from '../actions.js';
+
+function groupChatsByDate(chats) {
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today.getTime() - 86400000);
+  const last7Days = new Date(today.getTime() - 7 * 86400000);
+  const last30Days = new Date(today.getTime() - 30 * 86400000);
+
+  const groups = {
+    Today: [],
+    Yesterday: [],
+    'Last 7 Days': [],
+    'Last 30 Days': [],
+    Older: [],
+  };
+
+  for (const chat of chats) {
+    const date = new Date(chat.updatedAt);
+    if (date >= today) {
+      groups.Today.push(chat);
+    } else if (date >= yesterday) {
+      groups.Yesterday.push(chat);
+    } else if (date >= last7Days) {
+      groups['Last 7 Days'].push(chat);
+    } else if (date >= last30Days) {
+      groups['Last 30 Days'].push(chat);
+    } else {
+      groups.Older.push(chat);
+    }
+  }
+
+  return groups;
+}
+
+export function SidebarHistory() {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { activeChatId, navigateToChat } = useChatNav();
+
+  const loadChats = async () => {
+    try {
+      const result = await getChats();
+      setChats(result);
+    } catch (err) {
+      console.error('Failed to load chats:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Load chats on mount and refresh when navigating between pages
+  useEffect(() => {
+    loadChats();
+  }, [activeChatId]);
+
+  // Reload when chats change (new chat created or title updated)
+  useEffect(() => {
+    const handler = () => loadChats();
+    window.addEventListener('chatsupdated', handler);
+    return () => window.removeEventListener('chatsupdated', handler);
+  }, []);
+
+  const handleDelete = async (chatId) => {
+    const { success } = await deleteChat(chatId);
+    if (success) {
+      setChats((prev) => prev.filter((c) => c.id !== chatId));
+      if (chatId === activeChatId) {
+        navigateToChat(null);
+      }
+    }
+  };
+
+  if (loading && chats.length === 0) {
+    return (
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <div className="flex flex-col gap-2 px-2">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="h-8 animate-pulse rounded-md bg-border/50" />
+            ))}
+          </div>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    );
+  }
+
+  if (chats.length === 0) {
+    return (
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <p className="px-4 py-2 text-sm text-muted-foreground">
+            No chats yet. Start a conversation!
+          </p>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    );
+  }
+
+  const grouped = groupChatsByDate(chats);
+
+  return (
+    <>
+      {Object.entries(grouped).map(
+        ([label, groupChats]) =>
+          groupChats.length > 0 && (
+            <SidebarGroup key={label}>
+              <SidebarGroupLabel>{label}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {groupChats.map((chat) => (
+                    <SidebarHistoryItem
+                      key={chat.id}
+                      chat={chat}
+                      isActive={chat.id === activeChatId}
+                      onDelete={handleDelete}
+                    />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )
+      )}
+    </>
+  );
+}

package/lib/chat/components/sidebar-user-nav.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { signOut } from "next-auth/react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./ui/dropdown-menu.js";
+import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from "./ui/sidebar.js";
+import { SettingsIcon, SunIcon, MoonIcon, LogOutIcon } from "./icons.js";
+import { cn } from "../utils.js";
+function SidebarUserNav({ user, collapsed }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(SidebarMenuButton, { className: cn(collapsed ? "justify-center" : "justify-between"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("flex items-center overflow-hidden", collapsed ? "" : "gap-2"), children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium", children: (user?.email?.[0] || "U").toUpperCase() }),
+        !collapsed && /* @__PURE__ */ jsx("span", { className: "truncate text-sm", children: user?.email || "User" })
+      ] }),
+      !collapsed && /* @__PURE__ */ jsxs("svg", { className: "size-4 text-muted-foreground", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+        /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", side: "top", className: "w-56", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
+        window.location.href = "/settings";
+      }, children: [
+        /* @__PURE__ */ jsx(SettingsIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Settings" })
+      ] }),
+      mounted && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme(theme === "dark" ? "light" : "dark"), children: [
+        theme === "dark" ? /* @__PURE__ */ jsx(SunIcon, { size: 14 }) : /* @__PURE__ */ jsx(MoonIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2", children: theme === "dark" ? "Light Mode" : "Dark Mode" })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => signOut({ callbackUrl: "/" }),
+          className: "text-destructive",
+          children: [
+            /* @__PURE__ */ jsx(LogOutIcon, { size: 14 }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Sign Out" })
+          ]
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  SidebarUserNav
+};