thepopebot 1.1.2 → 1.2.3

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

@@ -0,0 +1,214 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { SquarePenIcon, PanelLeftIcon, MessageIcon, BellIcon, SwarmIcon, ClockIcon, ZapIcon } from './icons.js';
+import { getUnreadNotificationCount } from '../actions.js';
+import { SidebarHistory } from './sidebar-history.js';
+import { SidebarUserNav } from './sidebar-user-nav.js';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  useSidebar,
+} from './ui/sidebar.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+import { useChatNav } from './chat-nav-context.js';
+
+export function AppSidebar({ user }) {
+  const { navigateToChat } = useChatNav();
+  const { state, open, setOpenMobile, toggleSidebar } = useSidebar();
+  const collapsed = state === 'collapsed';
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  useEffect(() => {
+    getUnreadNotificationCount()
+      .then((count) => setUnreadCount(count))
+      .catch(() => {});
+  }, []);
+
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        {/* Top row: brand name + toggle icon (open) or just toggle icon (collapsed) */}
+        <div className={collapsed ? 'flex justify-center' : 'flex items-center justify-between'}>
+          {!collapsed && (
+            <span className="px-2 font-semibold text-lg">The Pope Bot</span>
+          )}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                className="inline-flex shrink-0 items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-background hover:text-foreground"
+                onClick={toggleSidebar}
+              >
+                <PanelLeftIcon size={16} />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side={collapsed ? 'right' : 'bottom'}>
+              {collapsed ? 'Open sidebar' : 'Close sidebar'}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        <SidebarMenu>
+          {/* New chat */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => {
+                    navigateToChat(null);
+                    setOpenMobile(false);
+                  }}
+                >
+                  <SquarePenIcon size={16} />
+                  {!collapsed && <span>New chat</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">New chat</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Chats history */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => {
+                    window.location.href = '/chats';
+                  }}
+                >
+                  <MessageIcon size={16} />
+                  {!collapsed && <span>Chats</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Chats</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Notifications */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => {
+                    window.location.href = '/notifications';
+                  }}
+                >
+                  <BellIcon size={16} />
+                  {!collapsed && (
+                    <span className="flex items-center gap-2">
+                      Notifications
+                      {unreadCount > 0 && (
+                        <span className="inline-flex items-center justify-center rounded-full bg-destructive px-1.5 py-0.5 text-[10px] font-medium leading-none text-destructive-foreground">
+                          {unreadCount}
+                        </span>
+                      )}
+                    </span>
+                  )}
+                  {collapsed && unreadCount > 0 && (
+                    <span className="absolute -top-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground">
+                      {unreadCount}
+                    </span>
+                  )}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Notifications</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Swarm */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => {
+                    window.location.href = '/swarm';
+                  }}
+                >
+                  <SwarmIcon size={16} />
+                  {!collapsed && <span>Swarm</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Swarm</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Cron Jobs */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => {
+                    window.location.href = '/crons';
+                  }}
+                >
+                  <ClockIcon size={16} />
+                  {!collapsed && <span>Cron Jobs</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Cron Jobs</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+          {/* Triggers */}
+          <SidebarMenuItem>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarMenuButton
+                  className={collapsed ? 'justify-center' : ''}
+                  onClick={() => {
+                    window.location.href = '/triggers';
+                  }}
+                >
+                  <ZapIcon size={16} />
+                  {!collapsed && <span>Triggers</span>}
+                </SidebarMenuButton>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right">Triggers</TooltipContent>
+              )}
+            </Tooltip>
+          </SidebarMenuItem>
+
+        </SidebarMenu>
+      </SidebarHeader>
+
+      {!collapsed && (
+        <SidebarContent>
+          <SidebarGroup className="pt-0">
+            <SidebarGroupLabel>Chats</SidebarGroupLabel>
+          </SidebarGroup>
+          <SidebarHistory />
+        </SidebarContent>
+      )}
+
+      {/* Spacer when collapsed to push footer down */}
+      {collapsed && <div className="flex-1" />}
+
+      <SidebarFooter>
+        {user && <SidebarUserNav user={user} collapsed={collapsed} />}
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/lib/chat/components/chat-header.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { SidebarTrigger } from "./ui/sidebar.js";
+function ChatHeader({ chatId }) {
+  return /* @__PURE__ */ jsx("header", { className: "sticky top-0 flex items-center gap-2 bg-background px-2 py-1.5 md:px-2 z-10", children: /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(SidebarTrigger, {}) }) });
+}
+export {
+  ChatHeader
+};

package/lib/chat/components/chat-header.jsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { SidebarTrigger } from './ui/sidebar.js';
+
+export function ChatHeader({ chatId }) {
+  return (
+    <header className="sticky top-0 flex items-center gap-2 bg-background px-2 py-1.5 md:px-2 z-10">
+      {/* Mobile-only: open sidebar sheet */}
+      <div className="md:hidden">
+        <SidebarTrigger />
+      </div>
+    </header>
+  );
+}

package/lib/chat/components/chat-input.js

@@ -0,0 +1,230 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback, useState } from "react";
+import { SendIcon, StopIcon, PaperclipIcon, XIcon, FileTextIcon } from "./icons.js";
+import { cn } from "../utils.js";
+const ACCEPTED_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+  "application/pdf",
+  "text/plain",
+  "text/markdown",
+  "text/csv",
+  "text/html",
+  "text/css",
+  "text/javascript",
+  "text/x-python",
+  "text/x-typescript",
+  "application/json"
+];
+const MAX_FILES = 5;
+function isAcceptedType(file) {
+  if (ACCEPTED_TYPES.includes(file.type)) return true;
+  const ext = file.name?.split(".").pop()?.toLowerCase();
+  const textExts = ["txt", "md", "csv", "json", "js", "ts", "jsx", "tsx", "py", "html", "css", "yml", "yaml", "xml", "sh", "bash", "rb", "go", "rs", "java", "c", "cpp", "h", "hpp"];
+  return textExts.includes(ext);
+}
+function getEffectiveType(file) {
+  if (ACCEPTED_TYPES.includes(file.type) && file.type !== "") return file.type;
+  const ext = file.name?.split(".").pop()?.toLowerCase();
+  const extMap = {
+    txt: "text/plain",
+    md: "text/markdown",
+    csv: "text/csv",
+    json: "application/json",
+    js: "text/javascript",
+    ts: "text/x-typescript",
+    jsx: "text/javascript",
+    tsx: "text/x-typescript",
+    py: "text/x-python",
+    html: "text/html",
+    css: "text/css",
+    yml: "text/plain",
+    yaml: "text/plain",
+    xml: "text/plain",
+    sh: "text/plain",
+    bash: "text/plain",
+    rb: "text/plain",
+    go: "text/plain",
+    rs: "text/plain",
+    java: "text/plain",
+    c: "text/plain",
+    cpp: "text/plain",
+    h: "text/plain",
+    hpp: "text/plain"
+  };
+  return extMap[ext] || file.type || "text/plain";
+}
+function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles }) {
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isStreaming = status === "streaming" || status === "submitted";
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+  }, []);
+  useEffect(() => {
+    adjustHeight();
+  }, [input, adjustHeight]);
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+  const handleFiles = useCallback((fileList) => {
+    const newFiles = Array.from(fileList).filter(isAcceptedType);
+    if (newFiles.length === 0) return;
+    newFiles.forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFiles((current) => {
+          if (current.length >= MAX_FILES) return current;
+          return [...current, { file, previewUrl: reader.result }];
+        });
+      };
+      reader.readAsDataURL(file);
+    });
+  }, [setFiles]);
+  const removeFile = (index) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+  const handleSubmit = (e) => {
+    if (e) e.preventDefault();
+    if (!input.trim() && files.length === 0 || isStreaming) return;
+    onSubmit();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer?.files?.length) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+  const canSend = input.trim() || files.length > 0;
+  return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-2 pb-4 md:px-4", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: "relative", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col rounded-xl border bg-muted p-2 transition-colors",
+        isDragging ? "border-primary bg-primary/5" : "border-border"
+      ),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        files.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex gap-2 overflow-x-auto px-1 py-1", children: files.map((f, i) => {
+          const isImage = f.file.type.startsWith("image/");
+          return /* @__PURE__ */ jsxs("div", { className: "group relative flex-shrink-0", children: [
+            isImage ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: f.previewUrl,
+                alt: f.file.name,
+                className: "h-16 w-16 rounded-lg object-cover"
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center gap-1.5 rounded-lg bg-foreground/10 px-3", children: [
+              /* @__PURE__ */ jsx(FileTextIcon, { size: 14 }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate text-xs", children: f.file.name })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeFile(i),
+                className: "absolute -right-1.5 -top-1.5 hidden rounded-full bg-foreground p-0.5 text-background group-hover:flex items-center justify-center",
+                "aria-label": `Remove ${f.file.name}`,
+                children: /* @__PURE__ */ jsx(XIcon, { size: 10 })
+              }
+            )
+          ] }, i);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => fileInputRef.current?.click(),
+              className: "inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:text-foreground",
+              "aria-label": "Attach files",
+              disabled: isStreaming,
+              children: /* @__PURE__ */ jsx(PaperclipIcon, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              accept: "image/*,application/pdf,text/*,application/json,.md,.csv,.json,.js,.ts,.jsx,.tsx,.py,.html,.css,.yml,.yaml,.xml,.sh,.rb,.go,.rs,.java,.c,.cpp,.h",
+              className: "hidden",
+              onChange: (e) => {
+                if (e.target.files?.length) handleFiles(e.target.files);
+                e.target.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: "Send a message...",
+              rows: 1,
+              className: cn(
+                "flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-foreground",
+                "placeholder:text-muted-foreground focus:outline-none",
+                "max-h-[200px]"
+              ),
+              disabled: isStreaming
+            }
+          ),
+          isStreaming ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: stop,
+              className: "inline-flex items-center justify-center rounded-lg bg-foreground p-2 text-background hover:opacity-80",
+              "aria-label": "Stop generating",
+              children: /* @__PURE__ */ jsx(StopIcon, { size: 16 })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: !canSend,
+              className: cn(
+                "inline-flex items-center justify-center rounded-lg p-2",
+                canSend ? "bg-foreground text-background hover:opacity-80" : "bg-muted-foreground/20 text-muted-foreground cursor-not-allowed"
+              ),
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsx(SendIcon, { size: 16 })
+            }
+          )
+        ] })
+      ]
+    }
+  ) }) });
+}
+export {
+  ChatInput
+};