thepopebot 1.1.2 → 1.2.3

package/lib/chat/components/icons.jsx

@@ -0,0 +1,482 @@
+'use client';
+
+export function PlusIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M5 12h14" />
+      <path d="M12 5v14" />
+    </svg>
+  );
+}
+
+export function TrashIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+    </svg>
+  );
+}
+
+export function SendIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="m5 12 7-7 7 7" />
+      <path d="M12 19V5" />
+    </svg>
+  );
+}
+
+export function StopIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      width={size}
+      height={size}
+    >
+      <rect x="6" y="6" width="12" height="12" rx="1" />
+    </svg>
+  );
+}
+
+export function MessageIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+    </svg>
+  );
+}
+
+export function SquarePenIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
+    </svg>
+  );
+}
+
+export function PanelLeftIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M9 3v18" />
+    </svg>
+  );
+}
+
+export function SearchIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.35-4.35" />
+    </svg>
+  );
+}
+
+export function BellIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+    </svg>
+  );
+}
+
+export function SwarmIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      {/* Three hexagons in a triangular cluster */}
+      <path d="M9.5 2L12 4.5L9.5 7L5 7L2.5 4.5L5 2Z" />
+      <path d="M19 2L21.5 4.5L19 7L14.5 7L12 4.5L14.5 2Z" />
+      <path d="M14.25 7L16.75 9.5L14.25 12L9.75 12L7.25 9.5L9.75 7Z" />
+    </svg>
+  );
+}
+
+export function PaperclipIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+    </svg>
+  );
+}
+
+export function XIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
+export function FileTextIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+      <path d="M10 9H8" />
+      <path d="M16 13H8" />
+      <path d="M16 17H8" />
+    </svg>
+  );
+}
+
+export function ClockIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  );
+}
+
+export function ZapIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M13 2 3 14h9l-1 10 10-12h-9l1-10z" />
+    </svg>
+  );
+}
+
+export function RefreshIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+      <path d="M21 3v5h-5" />
+      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+      <path d="M8 16H3v5" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function SettingsIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function KeyIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" />
+      <path d="m21 2-9.6 9.6" />
+      <circle cx="7.5" cy="15.5" r="5.5" />
+    </svg>
+  );
+}
+
+export function CopyIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}
+
+export function CheckIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export function SpinnerIcon({ size = 16, className = '' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+      className={`animate-spin ${className}`}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+export function SunIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  );
+}
+
+export function MoonIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+    </svg>
+  );
+}
+
+export function LogOutIcon({ size = 16 }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={size}
+      height={size}
+    >
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" x2="9" y1="12" y2="12" />
+    </svg>
+  );
+}

package/lib/chat/components/index.js

@@ -0,0 +1,19 @@
+export { ChatPage } from './chat-page.js';
+export { ChatsPage } from './chats-page.js';
+export { NotificationsPage } from './notifications-page.js';
+export { SwarmPage } from './swarm-page.js';
+export { CronsPage } from './crons-page.js';
+export { TriggersPage } from './triggers-page.js';
+export { PageLayout } from './page-layout.js';
+export { SettingsLayout } from './settings-layout.js';
+export { SettingsSecretsPage } from './settings-secrets-page.js';
+export { AppSidebar } from './app-sidebar.js';
+export { SidebarHistory } from './sidebar-history.js';
+export { SidebarHistoryItem } from './sidebar-history-item.js';
+export { SidebarUserNav } from './sidebar-user-nav.js';
+export { Chat } from './chat.js';
+export { Messages } from './messages.js';
+export { PreviewMessage, ThinkingMessage } from './message.js';
+export { ChatInput } from './chat-input.js';
+export { ChatHeader } from './chat-header.js';
+export { Greeting } from './greeting.js';

package/lib/chat/components/message.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Streamdown } from "streamdown";
+import { cn } from "../utils.js";
+import { SpinnerIcon, FileTextIcon } from "./icons.js";
+function PreviewMessage({ message, isLoading }) {
+  const isUser = message.role === "user";
+  const text = message.parts?.filter((p) => p.type === "text").map((p) => p.text).join("\n") || message.content || "";
+  const fileParts = message.parts?.filter((p) => p.type === "file") || [];
+  const imageParts = fileParts.filter((p) => p.mediaType?.startsWith("image/"));
+  const otherFileParts = fileParts.filter((p) => !p.mediaType?.startsWith("image/"));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex gap-4 w-full",
+        isUser ? "justify-end" : "justify-start"
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "max-w-[85%] rounded-xl px-4 py-3 text-sm leading-relaxed",
+            isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground"
+          ),
+          children: [
+            imageParts.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: imageParts.map((part, i) => /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: part.url,
+                alt: "attachment",
+                className: "max-h-64 max-w-full rounded-lg object-contain"
+              },
+              i
+            )) }),
+            otherFileParts.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: otherFileParts.map((part, i) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs",
+                  isUser ? "bg-primary-foreground/20" : "bg-foreground/10"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(FileTextIcon, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { className: "max-w-[150px] truncate", children: part.name || part.mediaType || "file" })
+                ]
+              },
+              i
+            )) }),
+            text ? isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: text }) : /* @__PURE__ */ jsx(Streamdown, { mode: isLoading ? "streaming" : "static", children: text }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function ThinkingMessage() {
+  return /* @__PURE__ */ jsx("div", { className: "flex gap-4 w-full justify-start", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-xl bg-muted px-4 py-3 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
+    /* @__PURE__ */ jsx("span", { children: "Thinking..." })
+  ] }) });
+}
+export {
+  PreviewMessage,
+  ThinkingMessage
+};

package/lib/chat/components/message.jsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { Streamdown } from 'streamdown';
+import { cn } from '../utils.js';
+import { SpinnerIcon, FileTextIcon } from './icons.js';
+
+export function PreviewMessage({ message, isLoading }) {
+  const isUser = message.role === 'user';
+
+  // Extract text from parts (AI SDK v5+) or fall back to content
+  const text =
+    message.parts
+      ?.filter((p) => p.type === 'text')
+      .map((p) => p.text)
+      .join('\n') ||
+    message.content ||
+    '';
+
+  // Extract file parts
+  const fileParts = message.parts?.filter((p) => p.type === 'file') || [];
+  const imageParts = fileParts.filter((p) => p.mediaType?.startsWith('image/'));
+  const otherFileParts = fileParts.filter((p) => !p.mediaType?.startsWith('image/'));
+
+  return (
+    <div
+      className={cn(
+        'flex gap-4 w-full',
+        isUser ? 'justify-end' : 'justify-start'
+      )}
+    >
+      <div
+        className={cn(
+          'max-w-[85%] rounded-xl px-4 py-3 text-sm leading-relaxed',
+          isUser
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-muted text-foreground'
+        )}
+      >
+        {imageParts.length > 0 && (
+          <div className="mb-2 flex flex-wrap gap-2">
+            {imageParts.map((part, i) => (
+              <img
+                key={i}
+                src={part.url}
+                alt="attachment"
+                className="max-h-64 max-w-full rounded-lg object-contain"
+              />
+            ))}
+          </div>
+        )}
+        {otherFileParts.length > 0 && (
+          <div className="mb-2 flex flex-wrap gap-2">
+            {otherFileParts.map((part, i) => (
+              <div
+                key={i}
+                className={cn(
+                  'inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs',
+                  isUser
+                    ? 'bg-primary-foreground/20'
+                    : 'bg-foreground/10'
+                )}
+              >
+                <FileTextIcon size={12} />
+                <span className="max-w-[150px] truncate">
+                  {part.name || part.mediaType || 'file'}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+        {text ? (
+          isUser ? (
+            <div className="whitespace-pre-wrap break-words">{text}</div>
+          ) : (
+            <Streamdown mode={isLoading ? 'streaming' : 'static'}>{text}</Streamdown>
+          )
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function ThinkingMessage() {
+  return (
+    <div className="flex gap-4 w-full justify-start">
+      <div className="flex items-center gap-2 rounded-xl bg-muted px-4 py-3 text-sm text-muted-foreground">
+        <SpinnerIcon size={14} />
+        <span>Thinking...</span>
+      </div>
+    </div>
+  );
+}