create-supyagent-app 0.1.12 → 0.1.14

package/templates/base/src/components/supyagent/tools/discord.tsx

@@ -0,0 +1,174 @@
+import React from "react";
+import { MessageSquare, Hash, Shield, Users } from "lucide-react";
+
+interface GuildData {
+  id?: string;
+  name?: string;
+  owner?: boolean;
+  member_count?: number;
+  icon?: string;
+}
+
+interface ChannelData {
+  id?: string;
+  name?: string;
+  type?: number;
+  position?: number;
+  member_count?: number;
+}
+
+interface MessageData {
+  id?: string;
+  content?: string;
+  author?: { username?: string; id?: string };
+  timestamp?: string;
+  channel_id?: string;
+}
+
+interface DiscordRendererProps {
+  data: unknown;
+}
+
+function isGuildData(data: unknown): data is GuildData {
+  return typeof data === "object" && data !== null && "name" in data && ("owner" in data || "member_count" in data || "icon" in data);
+}
+
+function isChannelData(data: unknown): data is ChannelData {
+  return typeof data === "object" && data !== null && "name" in data && ("type" in data || "position" in data);
+}
+
+function isMessageData(data: unknown): data is MessageData {
+  return typeof data === "object" && data !== null && ("content" in data || "author" in data) && "id" in data;
+}
+
+function formatRelativeDate(dateStr: string): string {
+  try {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return dateStr;
+  }
+}
+
+function GuildCard({ guild }: { guild: GuildData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <div className="flex items-center gap-2">
+        <Shield className="h-4 w-4 text-muted-foreground shrink-0" />
+        <span className="text-sm font-medium text-foreground flex-1">{guild.name}</span>
+        {guild.owner && (
+          <span className="rounded-full bg-yellow-500/10 px-2 py-0.5 text-xs text-yellow-600">Owner</span>
+        )}
+      </div>
+      {guild.member_count !== undefined && (
+        <div className="flex items-center gap-1 pl-6 text-xs text-muted-foreground">
+          <Users className="h-3 w-3" />
+          {guild.member_count} members
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChannelCard({ channel }: { channel: ChannelData }) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-border bg-card p-3">
+      <Hash className="h-4 w-4 text-muted-foreground shrink-0" />
+      <span className="text-sm text-foreground flex-1">{channel.name || channel.id}</span>
+      {channel.member_count !== undefined && (
+        <span className="text-xs text-muted-foreground">{channel.member_count} members</span>
+      )}
+    </div>
+  );
+}
+
+function MessageCard({ message }: { message: MessageData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-center gap-2">
+        <MessageSquare className="h-4 w-4 text-muted-foreground shrink-0" />
+        {message.author?.username && (
+          <span className="text-xs font-medium text-foreground">{message.author.username}</span>
+        )}
+        {message.timestamp && (
+          <span className="text-xs text-muted-foreground ml-auto">{formatRelativeDate(message.timestamp)}</span>
+        )}
+      </div>
+      {message.content && (
+        <p className="text-sm text-foreground line-clamp-3">{message.content}</p>
+      )}
+    </div>
+  );
+}
+
+export function DiscordRenderer({ data }: DiscordRendererProps) {
+  // Guilds
+  if (typeof data === "object" && data !== null && "guilds" in data) {
+    const guilds = (data as any).guilds;
+    if (Array.isArray(guilds)) {
+      return (
+        <div className="space-y-1.5">
+          {guilds.filter(isGuildData).map((g, i) => <GuildCard key={g.id || i} guild={g} />)}
+        </div>
+      );
+    }
+  }
+
+  // Channels
+  if (typeof data === "object" && data !== null && "channels" in data) {
+    const channels = (data as any).channels;
+    if (Array.isArray(channels)) {
+      return (
+        <div className="space-y-1.5">
+          {channels.filter(isChannelData).map((c, i) => <ChannelCard key={c.id || i} channel={c} />)}
+        </div>
+      );
+    }
+  }
+
+  // Messages
+  if (typeof data === "object" && data !== null && "messages" in data) {
+    const messages = (data as any).messages;
+    if (Array.isArray(messages)) {
+      return (
+        <div className="space-y-2">
+          {messages.filter(isMessageData).map((m, i) => <MessageCard key={m.id || i} message={m} />)}
+        </div>
+      );
+    }
+  }
+
+  // Single message
+  if (isMessageData(data)) return <MessageCard message={data} />;
+
+  // Array
+  if (Array.isArray(data)) {
+    const guilds = data.filter(isGuildData);
+    if (guilds.length > 0) {
+      return (
+        <div className="space-y-1.5">{guilds.map((g, i) => <GuildCard key={g.id || i} guild={g} />)}</div>
+      );
+    }
+    const messages = data.filter(isMessageData);
+    if (messages.length > 0) {
+      return (
+        <div className="space-y-2">{messages.map((m, i) => <MessageCard key={m.id || i} message={m} />)}</div>
+      );
+    }
+  }
+
+  return (
+    <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}

package/templates/base/src/components/supyagent/tools/docs.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { FileText, ExternalLink } from "lucide-react";
+
+interface DocData {
+  documentId?: string;
+  title?: string;
+  body?: { content?: unknown };
+  revisionId?: string;
+  url?: string;
+  content?: string;
+}
+
+interface DocsRendererProps {
+  data: unknown;
+}
+
+function isDocData(data: unknown): data is DocData {
+  return typeof data === "object" && data !== null && ("documentId" in data || "title" in data);
+}
+
+function extractTextContent(body: unknown): string | null {
+  if (!body || typeof body !== "object") return null;
+  const content = (body as any).content;
+  if (!Array.isArray(content)) return null;
+
+  const texts: string[] = [];
+  for (const element of content) {
+    if (element?.paragraph?.elements) {
+      for (const el of element.paragraph.elements) {
+        if (el?.textRun?.content) {
+          texts.push(el.textRun.content);
+        }
+      }
+    }
+  }
+  return texts.length > 0 ? texts.join("").trim() : null;
+}
+
+function DocCard({ doc }: { doc: DocData }) {
+  const docUrl = doc.url || (doc.documentId ? `https://docs.google.com/document/d/${doc.documentId}` : null);
+  const textContent = doc.content || extractTextContent(doc.body);
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-2">
+      <div className="flex items-start gap-2">
+        <FileText className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">
+            {docUrl ? (
+              <a href={docUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {doc.title || "Untitled document"}
+              </a>
+            ) : (
+              doc.title || "Untitled document"
+            )}
+          </p>
+        </div>
+        {docUrl && (
+          <a href={docUrl} target="_blank" rel="noopener noreferrer" className="shrink-0 text-muted-foreground hover:text-foreground">
+            <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+        )}
+      </div>
+      {textContent && (
+        <p className="text-xs text-muted-foreground line-clamp-4 whitespace-pre-wrap">{textContent}</p>
+      )}
+    </div>
+  );
+}
+
+export function DocsRenderer({ data }: DocsRendererProps) {
+  if (isDocData(data)) {
+    return <DocCard doc={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const docs = data.filter(isDocData);
+    if (docs.length > 0) {
+      return (
+        <div className="space-y-2">
+          {docs.map((doc, i) => (
+            <DocCard key={doc.documentId || i} doc={doc} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  return (
+    <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}

package/templates/base/src/components/supyagent/tools/drive.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { FileText, Folder, Image, Film, FileSpreadsheet, ExternalLink, Users as UsersIcon } from "lucide-react";
+
+interface DriveFileData {
+  id?: string;
+  name?: string;
+  mimeType?: string;
+  modifiedTime?: string;
+  size?: string | number;
+  webViewLink?: string;
+  shared?: boolean;
+}
+
+interface DriveRendererProps {
+  data: unknown;
+}
+
+function isDriveFile(data: unknown): data is DriveFileData {
+  return typeof data === "object" && data !== null && ("name" in data || "mimeType" in data);
+}
+
+function getFileIcon(mimeType?: string) {
+  if (!mimeType) return FileText;
+  if (mimeType.includes("folder")) return Folder;
+  if (mimeType.includes("image")) return Image;
+  if (mimeType.includes("video")) return Film;
+  if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) return FileSpreadsheet;
+  return FileText;
+}
+
+function formatFileSize(size: string | number | undefined): string | null {
+  if (size === undefined) return null;
+  const bytes = typeof size === "string" ? parseInt(size, 10) : size;
+  if (isNaN(bytes)) return null;
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1073741824) return `${(bytes / 1048576).toFixed(1)} MB`;
+  return `${(bytes / 1073741824).toFixed(1)} GB`;
+}
+
+function FileCard({ file }: { file: DriveFileData }) {
+  const Icon = getFileIcon(file.mimeType);
+  const sizeStr = formatFileSize(file.size);
+
+  return (
+    <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-3">
+      <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm text-foreground truncate">
+          {file.webViewLink ? (
+            <a href={file.webViewLink} target="_blank" rel="noopener noreferrer" className="hover:underline">
+              {file.name || "Untitled"}
+            </a>
+          ) : (
+            file.name || "Untitled"
+          )}
+        </p>
+        <div className="flex items-center gap-2">
+          {file.modifiedTime && (
+            <span className="text-xs text-muted-foreground">
+              {new Date(file.modifiedTime).toLocaleDateString()}
+            </span>
+          )}
+          {sizeStr && (
+            <span className="text-xs text-muted-foreground">{sizeStr}</span>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-1.5 shrink-0">
+        {file.shared && (
+          <span title="Shared">
+            <UsersIcon className="h-3.5 w-3.5 text-muted-foreground" />
+          </span>
+        )}
+        {file.webViewLink && (
+          <a href={file.webViewLink} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-foreground">
+            <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function DriveRenderer({ data }: DriveRendererProps) {
+  if (isDriveFile(data)) {
+    return <FileCard file={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const files = data.filter(isDriveFile);
+    if (files.length > 0) {
+      return (
+        <div className="space-y-1.5">
+          {files.map((file, i) => (
+            <FileCard key={file.id || i} file={file} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  if (typeof data === "object" && data !== null && "files" in data) {
+    const files = (data as { files: unknown[] }).files;
+    if (Array.isArray(files)) {
+      const driveFiles = files.filter(isDriveFile);
+      if (driveFiles.length > 0) {
+        return (
+          <div className="space-y-1.5">
+            {driveFiles.map((file, i) => (
+              <FileCard key={file.id || i} file={file} />
+            ))}
+          </div>
+        );
+      }
+    }
+  }
+
+  return (
+    <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}

package/templates/base/src/components/supyagent/tools/generic.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface GenericRendererProps {
+  data: unknown;
+}
+
+export function GenericRenderer({ data }: GenericRendererProps) {
+  if (data === null || data === undefined) {
+    return (
+      <p className="text-sm text-muted-foreground italic">No data returned</p>
+    );
+  }
+
+  return (
+    <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}

package/templates/base/src/components/supyagent/tools/github.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import { CircleDot, GitPullRequest, GitMerge, Clock } from "lucide-react";
+
+interface GithubItemData {
+  title?: string;
+  number?: number;
+  state?: string;
+  html_url?: string;
+  body?: string;
+  user?: { login?: string };
+  created_at?: string;
+  pull_request?: unknown;
+  merged?: boolean;
+  labels?: Array<{ name: string; color?: string }>;
+}
+
+interface GitHubRendererProps {
+  data: unknown;
+}
+
+function isGithubItem(data: unknown): data is GithubItemData {
+  return typeof data === "object" && data !== null && ("title" in data || "number" in data);
+}
+
+function formatRelativeDate(dateStr: string): string {
+  try {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffDays === 0) return "today";
+    if (diffDays === 1) return "yesterday";
+    if (diffDays < 30) return `${diffDays}d ago`;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return dateStr;
+  }
+}
+
+function getStateInfo(item: GithubItemData) {
+  const isPR = !!item.pull_request;
+
+  if (isPR && item.merged) {
+    return { icon: GitMerge, color: "text-purple-500", label: "Merged" };
+  }
+  if (item.state === "open") {
+    return {
+      icon: isPR ? GitPullRequest : CircleDot,
+      color: "text-green-500",
+      label: "Open",
+    };
+  }
+  return {
+    icon: isPR ? GitPullRequest : CircleDot,
+    color: "text-destructive",
+    label: "Closed",
+  };
+}
+
+function GithubCard({ item }: { item: GithubItemData }) {
+  const { icon: StateIcon, color: stateColor, label: stateLabel } = getStateInfo(item);
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <StateIcon className={`h-4 w-4 mt-0.5 shrink-0 ${stateColor}`} />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">
+            {item.html_url ? (
+              <a href={item.html_url} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {item.title}
+              </a>
+            ) : (
+              item.title
+            )}
+            {item.number && (
+              <span className="text-muted-foreground font-normal"> #{item.number}</span>
+            )}
+          </p>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span className={`text-xs ${stateColor}`}>{stateLabel}</span>
+            {item.user?.login && (
+              <span className="text-xs text-muted-foreground">{item.user.login}</span>
+            )}
+            {item.created_at && (
+              <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                <Clock className="h-3 w-3" />
+                {formatRelativeDate(item.created_at)}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      {item.labels && item.labels.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {item.labels.map((label) => (
+            <span
+              key={label.name}
+              className="rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground"
+              style={
+                label.color
+                  ? { borderColor: `#${label.color}`, color: `#${label.color}` }
+                  : undefined
+              }
+            >
+              {label.name}
+            </span>
+          ))}
+        </div>
+      )}
+      {item.body && (
+        <p className="text-xs text-muted-foreground line-clamp-2">{item.body}</p>
+      )}
+    </div>
+  );
+}
+
+export function GitHubRenderer({ data }: GitHubRendererProps) {
+  if (isGithubItem(data)) {
+    return <GithubCard item={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const items = data.filter(isGithubItem);
+    if (items.length > 0) {
+      return (
+        <div className="space-y-2">
+          {items.map((item, i) => (
+            <GithubCard key={item.number || i} item={item} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  return (
+    <pre className="rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto">
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+}