thepopebot 1.1.2 → 1.2.3

package/lib/chat/components/chats-page.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { PageLayout } from "./page-layout.js";
+import { MessageIcon, TrashIcon, SearchIcon, PlusIcon } from "./icons.js";
+import { getChats, deleteChat } from "../actions.js";
+import { cn } from "../utils.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 timeAgo(date) {
+  const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1e3);
+  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 ChatsPage({ session }) {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState("");
+  const navigateToChat = (id) => {
+    window.location.href = id ? `/chat/${id}` : "/";
+  };
+  const loadChats = async () => {
+    try {
+      const result = await getChats();
+      setChats(result);
+    } catch (err) {
+      console.error("Failed to load chats:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    loadChats();
+  }, []);
+  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));
+    }
+  };
+  const filtered = query ? chats.filter((c) => c.title?.toLowerCase().includes(query.toLowerCase())) : chats;
+  const grouped = groupChatsByDate(filtered);
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Chats" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => navigateToChat(null),
+          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",
+          children: [
+            /* @__PURE__ */ jsx(PlusIcon, { size: 14 }),
+            "New chat"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search your chats...",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          className: "w-full rounded-md border border-input bg-background px-9 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsx(SearchIcon, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
+      filtered.length,
+      " ",
+      filtered.length === 1 ? "chat" : "chats"
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" }, i)) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-8 text-center", children: query ? "No chats match your search." : "No chats yet. Start a conversation!" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: Object.entries(grouped).map(
+      ([label, groupChats]) => groupChats.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border", children: groupChats.map((chat) => /* @__PURE__ */ jsx(
+          ChatRow,
+          {
+            chat,
+            onNavigate: navigateToChat,
+            onDelete: handleDelete
+          },
+          chat.id
+        )) })
+      ] }, label) : null
+    ) })
+  ] });
+}
+function ChatRow({ chat, onNavigate, onDelete }) {
+  const [showDelete, setShowDelete] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative group flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-muted/50 rounded-md",
+      onMouseEnter: () => setShowDelete(true),
+      onMouseLeave: () => setShowDelete(false),
+      onClick: () => onNavigate(chat.id),
+      children: [
+        /* @__PURE__ */ jsx(MessageIcon, { size: 16 }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm truncate block", children: chat.title || "New Chat" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "Last message ",
+            timeAgo(chat.updatedAt)
+          ] })
+        ] }),
+        showDelete && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "shrink-0 rounded-md p-1.5",
+              "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 {
+  ChatsPage
+};

package/lib/chat/components/chats-page.jsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PageLayout } from './page-layout.js';
+import { MessageIcon, TrashIcon, SearchIcon, PlusIcon } from './icons.js';
+import { getChats, deleteChat } from '../actions.js';
+import { cn } from '../utils.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;
+}
+
+function timeAgo(date) {
+  const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 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`;
+}
+
+export function ChatsPage({ session }) {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState('');
+
+  const navigateToChat = (id) => {
+    window.location.href = id ? `/chat/${id}` : '/';
+  };
+
+  const loadChats = async () => {
+    try {
+      const result = await getChats();
+      setChats(result);
+    } catch (err) {
+      console.error('Failed to load chats:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadChats();
+  }, []);
+
+  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));
+    }
+  };
+
+  const filtered = query
+    ? chats.filter((c) => c.title?.toLowerCase().includes(query.toLowerCase()))
+    : chats;
+
+  const grouped = groupChatsByDate(filtered);
+
+  return (
+    <PageLayout session={session}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold">Chats</h1>
+        <button
+          onClick={() => navigateToChat(null)}
+          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"
+        >
+          <PlusIcon size={14} />
+          New chat
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="relative mb-4">
+        <input
+          type="text"
+          placeholder="Search your chats..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="w-full rounded-md border border-input bg-background px-9 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">
+          <SearchIcon size={16} />
+        </div>
+      </div>
+
+      {/* Count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {filtered.length} {filtered.length === 1 ? 'chat' : 'chats'}
+      </p>
+
+      {/* Chat list */}
+      {loading ? (
+        <div className="flex flex-col gap-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-14 animate-pulse rounded-md bg-border/50" />
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-8 text-center">
+          {query ? 'No chats match your search.' : 'No chats yet. Start a conversation!'}
+        </p>
+      ) : (
+        <div className="flex flex-col">
+          {Object.entries(grouped).map(([label, groupChats]) =>
+            groupChats.length > 0 ? (
+              <div key={label} className="mb-4">
+                <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+                  {label}
+                </h2>
+                <div className="flex flex-col divide-y divide-border">
+                  {groupChats.map((chat) => (
+                    <ChatRow
+                      key={chat.id}
+                      chat={chat}
+                      onNavigate={navigateToChat}
+                      onDelete={handleDelete}
+                    />
+                  ))}
+                </div>
+              </div>
+            ) : null
+          )}
+        </div>
+      )}
+    </PageLayout>
+  );
+}
+
+function ChatRow({ chat, onNavigate, onDelete }) {
+  const [showDelete, setShowDelete] = useState(false);
+
+  return (
+    <div
+      className="relative group flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-muted/50 rounded-md"
+      onMouseEnter={() => setShowDelete(true)}
+      onMouseLeave={() => setShowDelete(false)}
+      onClick={() => onNavigate(chat.id)}
+    >
+      <MessageIcon size={16} />
+      <div className="flex-1 min-w-0">
+        <span className="text-sm truncate block">{chat.title || 'New Chat'}</span>
+        <span className="text-xs text-muted-foreground">
+          Last message {timeAgo(chat.updatedAt)}
+        </span>
+      </div>
+      {showDelete && (
+        <button
+          className={cn(
+            'shrink-0 rounded-md p-1.5',
+            '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>
+  );
+}

package/lib/chat/components/crons-page.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { PageLayout } from "./page-layout.js";
+import { ClockIcon, SpinnerIcon, ChevronDownIcon } from "./icons.js";
+import { getSwarmConfig } from "../actions.js";
+function describeCron(schedule) {
+  const parts = schedule.trim().split(/\s+/);
+  if (parts.length !== 5) return schedule;
+  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+  if (minute.startsWith("*/") && hour === "*" && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    const n = parseInt(minute.slice(2), 10);
+    if (n === 1) return "Every minute";
+    return `Every ${n} minutes`;
+  }
+  if (hour.startsWith("*/") && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    const n = parseInt(hour.slice(2), 10);
+    if (n === 1) return "Every hour";
+    return `Every ${n} hours`;
+  }
+  if (minute !== "*" && hour !== "*" && !hour.includes("/") && !minute.includes("/") && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    const h = parseInt(hour, 10);
+    const m = parseInt(minute, 10);
+    const period = h >= 12 ? "PM" : "AM";
+    const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
+    return `Daily at ${displayH}:${String(m).padStart(2, "0")} ${period}`;
+  }
+  if (minute !== "*" && hour !== "*" && dayOfMonth === "*" && month === "*" && dayOfWeek !== "*") {
+    const dayNames = { "0": "Sun", "1": "Mon", "2": "Tue", "3": "Wed", "4": "Thu", "5": "Fri", "6": "Sat" };
+    const days = dayOfWeek.split(",").map((d) => dayNames[d] || d).join(", ");
+    const h = parseInt(hour, 10);
+    const m = parseInt(minute, 10);
+    const period = h >= 12 ? "PM" : "AM";
+    const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
+    return `${days} at ${displayH}:${String(m).padStart(2, "0")} ${period}`;
+  }
+  return schedule;
+}
+const typeBadgeStyles = {
+  agent: "bg-purple-500/10 text-purple-500",
+  command: "bg-blue-500/10 text-blue-500",
+  webhook: "bg-orange-500/10 text-orange-500"
+};
+function CronCard({ cron }) {
+  const [expanded, setExpanded] = useState(false);
+  const type = cron.type || "agent";
+  const disabled = cron.enabled === false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-lg border bg-card transition-opacity ${disabled ? "opacity-60" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "flex items-center gap-3 w-full text-left p-4 hover:bg-accent/50 rounded-lg",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-muted p-2", children: /* @__PURE__ */ jsx(ClockIcon, { size: 16 }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: cron.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono", children: cron.schedule }),
+                  /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-border", children: "|" }),
+                  describeCron(cron.schedule)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${typeBadgeStyles[type] || typeBadgeStyles.agent}`, children: type }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${disabled ? "bg-muted text-muted-foreground" : "bg-green-500/10 text-green-500"}`,
+                    children: disabled ? "disabled" : "enabled"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `transition-transform ${expanded ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }) })
+              ] })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxs("div", { className: "border-t px-4 py-3", children: [
+          type === "agent" && cron.job && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Job prompt" }),
+            /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: cron.job })
+          ] }),
+          type === "command" && cron.command && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Command" }),
+            /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: cron.command })
+          ] }),
+          type === "webhook" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "URL" }),
+              /* @__PURE__ */ jsxs("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto", children: [
+                cron.method && cron.method !== "POST" ? `${cron.method} ` : "",
+                cron.url
+              ] })
+            ] }),
+            cron.vars && Object.keys(cron.vars).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Variables" }),
+              /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: JSON.stringify(cron.vars, null, 2) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CronsPage({ session }) {
+  const [crons, setCrons] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    getSwarmConfig().then((data) => {
+      if (data?.crons) setCrons(data.crons);
+    }).catch(() => {
+    }).finally(() => setLoading(false));
+  }, []);
+  const enabledCount = crons.filter((c) => c.enabled !== false).length;
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Cron Jobs" }),
+      !loading && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
+        crons.length,
+        " job",
+        crons.length !== 1 ? "s" : "",
+        " configured, ",
+        enabledCount,
+        " enabled"
+      ] })
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-lg bg-border/50" }, i)) }) : crons.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(ClockIcon, { size: 24 }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "No cron jobs configured" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-sm", children: [
+        "Add scheduled jobs by editing ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: "config/CRONS.json" }),
+        " in your project."
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: crons.map((cron, i) => /* @__PURE__ */ jsx(CronCard, { cron }, i)) })
+  ] });
+}
+export {
+  CronsPage
+};