create-supyagent-app 0.1.12 → 0.1.14

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

@@ -0,0 +1,161 @@
+import React from "react";
+import { Mail, Paperclip, Tag } from "lucide-react";
+
+interface EmailData {
+  id?: string;
+  subject?: string;
+  from?: string;
+  to?: string | string[];
+  date?: string;
+  snippet?: string;
+  body?: string;
+  hasAttachments?: boolean;
+  labels?: string[];
+  /** Supyagent API returns labelIds instead of labels */
+  labelIds?: string[];
+  isUnread?: boolean;
+  isStarred?: boolean;
+}
+
+interface GmailRendererProps {
+  data: unknown;
+}
+
+function isEmailData(data: unknown): data is EmailData {
+  return typeof data === "object" && data !== null && ("subject" in data || "from" in data || "snippet" 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 formatRecipients(to: string | string[] | undefined): string | null {
+  if (!to) return null;
+  if (Array.isArray(to)) return to.join(", ");
+  return to;
+}
+
+/** Internal Gmail label IDs that shouldn't be shown as tags */
+const HIDDEN_LABELS = new Set(["INBOX", "UNREAD", "SENT", "DRAFT", "SPAM", "TRASH", "STARRED", "IMPORTANT"]);
+
+function humanizeLabel(label: string): string {
+  // "CATEGORY_UPDATES" → "Updates", "CATEGORY_PERSONAL" → "Personal"
+  if (label.startsWith("CATEGORY_")) return label.slice(9).charAt(0) + label.slice(10).toLowerCase();
+  return label;
+}
+
+function resolveLabels(email: EmailData): string[] {
+  if (email.labels && email.labels.length > 0) return email.labels;
+  if (email.labelIds && email.labelIds.length > 0) {
+    return email.labelIds
+      .filter((id) => !HIDDEN_LABELS.has(id))
+      .map(humanizeLabel);
+  }
+  return [];
+}
+
+function EmailCard({ email }: { email: EmailData }) {
+  const recipients = formatRecipients(email.to);
+  const labels = resolveLabels(email);
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-2">
+      <div className="flex items-start gap-2">
+        <Mail 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 truncate">
+            {email.subject || "No subject"}
+          </p>
+          {email.from && (
+            <p className="text-xs text-muted-foreground truncate">{email.from}</p>
+          )}
+          {recipients && (
+            <p className="text-xs text-muted-foreground truncate">To: {recipients}</p>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          {email.hasAttachments && (
+            <Paperclip className="h-3.5 w-3.5 text-muted-foreground" />
+          )}
+          {email.date && (
+            <span className="text-xs text-muted-foreground">{formatRelativeDate(email.date)}</span>
+          )}
+        </div>
+      </div>
+      {labels.length > 0 && (
+        <div className="flex items-center gap-1.5 flex-wrap">
+          {labels.map((label) => (
+            <span
+              key={label}
+              className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+            >
+              <Tag className="h-2.5 w-2.5" />
+              {label}
+            </span>
+          ))}
+        </div>
+      )}
+      {(email.snippet || email.body) && (
+        <p className="text-xs text-muted-foreground line-clamp-3">
+          {email.snippet || email.body}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function GmailRenderer({ data }: GmailRendererProps) {
+  if (isEmailData(data)) {
+    return <EmailCard email={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const emails = data.filter(isEmailData);
+    if (emails.length > 0) {
+      return (
+        <div className="space-y-2">
+          {emails.map((email, i) => (
+            <EmailCard key={email.id || i} email={email} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  if (typeof data === "object" && data !== null && "messages" in data) {
+    const messages = (data as { messages: unknown[] }).messages;
+    if (Array.isArray(messages)) {
+      const emails = messages.filter(isEmailData);
+      if (emails.length > 0) {
+        return (
+          <div className="space-y-2">
+            {emails.map((email, i) => (
+              <EmailCard key={email.id || i} email={email} />
+            ))}
+          </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/hubspot.tsx

@@ -0,0 +1,206 @@
+import React from "react";
+import { Users, Building2, Mail, Phone } from "lucide-react";
+
+interface HubspotContactData {
+  id?: string;
+  /** Normalized fields returned by Supyagent API */
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  phone?: string;
+  company?: string;
+  /** Raw HubSpot properties (direct HubSpot API shape) */
+  properties?: {
+    firstname?: string;
+    lastname?: string;
+    email?: string;
+    phone?: string;
+    company?: string;
+    [key: string]: unknown;
+  };
+}
+
+interface HubspotCompanyData {
+  id?: string;
+  properties?: {
+    name?: string;
+    domain?: string;
+    industry?: string;
+    phone?: string;
+    [key: string]: unknown;
+  };
+}
+
+interface HubSpotRendererProps {
+  data: unknown;
+}
+
+function isHubspotContact(data: unknown): data is HubspotContactData {
+  if (typeof data !== "object" || data === null) return false;
+  const d = data as any;
+  // Normalized shape from Supyagent API
+  if ("firstName" in d || "lastName" in d || (d.email && d.id)) return true;
+  // Raw HubSpot properties shape
+  const props = d.properties;
+  return props && ("firstname" in props || "lastname" in props || "email" in props);
+}
+
+function isHubspotCompany(data: unknown): data is HubspotCompanyData {
+  if (typeof data !== "object" || data === null) return false;
+  const props = (data as any).properties;
+  return props && ("name" in props || "domain" in props);
+}
+
+function ContactCard({ contact }: { contact: HubspotContactData }) {
+  const p = contact.properties || {};
+  // Support both normalized (firstName) and raw (properties.firstname) shapes
+  const first = contact.firstName || p.firstname;
+  const last = contact.lastName || p.lastname;
+  const email = contact.email || p.email;
+  const phone = contact.phone || p.phone;
+  const company = contact.company || p.company;
+  const name = [first, last].filter(Boolean).join(" ") || "Unknown contact";
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <Users 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">{name}</p>
+          {company && (
+            <p className="text-xs text-muted-foreground">{company}</p>
+          )}
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 pl-6">
+        {email && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Mail className="h-3 w-3" />
+            {email}
+          </span>
+        )}
+        {phone && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Phone className="h-3 w-3" />
+            {phone}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CompanyCard({ company }: { company: HubspotCompanyData }) {
+  const p = company.properties || {};
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <Building2 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">{p.name || "Unknown company"}</p>
+          {p.industry && (
+            <p className="text-xs text-muted-foreground">{p.industry}</p>
+          )}
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 pl-6">
+        {p.domain && (
+          <span className="text-xs text-muted-foreground">{p.domain}</span>
+        )}
+        {p.phone && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Phone className="h-3 w-3" />
+            {p.phone}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function HubSpotRenderer({ data }: HubSpotRendererProps) {
+  // Single contact
+  if (isHubspotContact(data)) {
+    return <ContactCard contact={data} />;
+  }
+
+  // Single company
+  if (isHubspotCompany(data)) {
+    return <CompanyCard company={data} />;
+  }
+
+  // Array
+  if (Array.isArray(data)) {
+    const contacts = data.filter(isHubspotContact);
+    if (contacts.length > 0) {
+      return (
+        <div className="space-y-2">
+          {contacts.map((c, i) => (
+            <ContactCard key={c.id || i} contact={c} />
+          ))}
+        </div>
+      );
+    }
+    const companies = data.filter(isHubspotCompany);
+    if (companies.length > 0) {
+      return (
+        <div className="space-y-2">
+          {companies.map((c, i) => (
+            <CompanyCard key={c.id || i} company={c} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  // Object with contacts array (Supyagent API shape)
+  if (typeof data === "object" && data !== null && "contacts" in data) {
+    const contacts = (data as any).contacts;
+    if (Array.isArray(contacts)) {
+      const valid = contacts.filter(isHubspotContact);
+      if (valid.length > 0) {
+        return (
+          <div className="space-y-2">
+            {valid.map((c, i) => (
+              <ContactCard key={c.id || i} contact={c} />
+            ))}
+          </div>
+        );
+      }
+    }
+  }
+
+  // Object with results array
+  if (typeof data === "object" && data !== null && "results" in data) {
+    const results = (data as any).results;
+    if (Array.isArray(results)) {
+      const contacts = results.filter(isHubspotContact);
+      if (contacts.length > 0) {
+        return (
+          <div className="space-y-2">
+            {contacts.map((c, i) => (
+              <ContactCard key={c.id || i} contact={c} />
+            ))}
+          </div>
+        );
+      }
+      const companies = results.filter(isHubspotCompany);
+      if (companies.length > 0) {
+        return (
+          <div className="space-y-2">
+            {companies.map((c, i) => (
+              <CompanyCard key={c.id || i} company={c} />
+            ))}
+          </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/inbox.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import { Bell, Calendar, Mail, MessageSquare } from "lucide-react";
+
+interface InboxEventData {
+  id?: string;
+  /** Legacy fields */
+  type?: string;
+  title?: string;
+  description?: string;
+  source?: string;
+  timestamp?: string;
+  created_at?: string;
+  read?: boolean;
+  /** Actual API fields */
+  event_type?: string;
+  summary?: string;
+  provider?: string;
+  status?: string;
+  received_at?: string;
+  updated_at?: string;
+  payload?: Record<string, unknown>;
+}
+
+interface InboxRendererProps {
+  data: unknown;
+}
+
+function isInboxEvent(data: unknown): data is InboxEventData {
+  if (typeof data !== "object" || data === null) return false;
+  // Actual API shape
+  if ("event_type" in data || "summary" in data) return true;
+  // Legacy/mock shape
+  if ("title" in data || ("type" in data && "source" in data)) return true;
+  return false;
+}
+
+function resolveEventType(event: InboxEventData): string | undefined {
+  if (event.event_type) {
+    // "email.received" → "email", "message" → "message"
+    return event.event_type.split(".")[0];
+  }
+  return event.type;
+}
+
+function getEventIcon(type?: string) {
+  switch (type) {
+    case "email":
+      return Mail;
+    case "message":
+      return MessageSquare;
+    case "calendar":
+      return Calendar;
+    default:
+      return Bell;
+  }
+}
+
+function formatTimestamp(dateStr: string): string {
+  try {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffHours < 1) return "Just now";
+    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 EventCard({ event }: { event: InboxEventData }) {
+  const eventType = resolveEventType(event);
+  const Icon = getEventIcon(eventType);
+  const timestamp = event.received_at || event.timestamp || event.created_at;
+  const title = event.summary || event.title;
+  const source = event.provider || event.source;
+  const snippet = event.description || (event.payload?.snippet as string) || (event.payload?.text as string);
+  const isUnread = event.status === "unread" || event.read === false;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            {eventType && (
+              <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground capitalize">
+                {eventType}
+              </span>
+            )}
+            {source && (
+              <span className="text-xs text-muted-foreground capitalize">{source}</span>
+            )}
+            {isUnread && (
+              <span className="h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
+            )}
+            {timestamp && (
+              <span className="text-xs text-muted-foreground ml-auto shrink-0">
+                {formatTimestamp(timestamp)}
+              </span>
+            )}
+          </div>
+          {title && (
+            <p className="text-sm font-medium text-foreground mt-1 line-clamp-1">{title}</p>
+          )}
+        </div>
+      </div>
+      {snippet && (
+        <p className="text-xs text-muted-foreground line-clamp-2 pl-6">{snippet}</p>
+      )}
+    </div>
+  );
+}
+
+export function InboxRenderer({ data }: InboxRendererProps) {
+  if (isInboxEvent(data)) {
+    return <EventCard event={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const events = data.filter(isInboxEvent);
+    if (events.length > 0) {
+      return (
+        <div className="space-y-2">
+          {events.map((event, i) => (
+            <EventCard key={event.id || i} event={event} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  if (typeof data === "object" && data !== null && "events" in data) {
+    const events = (data as any).events;
+    if (Array.isArray(events)) {
+      const inboxEvents = events.filter(isInboxEvent);
+      if (inboxEvents.length > 0) {
+        return (
+          <div className="space-y-2">
+            {inboxEvents.map((event, i) => (
+              <EventCard key={event.id || i} event={event} />
+            ))}
+          </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/jira.tsx

@@ -0,0 +1,164 @@
+import React from "react";
+import { CircleDot, SquareKanban, User, ArrowUp, ArrowDown, Minus } from "lucide-react";
+
+interface JiraIssueData {
+  key?: string;
+  id?: string;
+  self?: string;
+  fields?: {
+    summary?: string;
+    status?: { name?: string; statusCategory?: { colorName?: string; key?: string } };
+    priority?: { name?: string; id?: string };
+    assignee?: { displayName?: string; name?: string };
+    issuetype?: { name?: string };
+    created?: string;
+  };
+}
+
+interface JiraProjectData {
+  key?: string;
+  id?: string;
+  name?: string;
+  projectTypeKey?: string;
+  self?: string;
+}
+
+interface JiraRendererProps {
+  data: unknown;
+}
+
+function isJiraIssue(data: unknown): data is JiraIssueData {
+  return typeof data === "object" && data !== null && "key" in data && "fields" in data;
+}
+
+function isJiraProject(data: unknown): data is JiraProjectData {
+  return typeof data === "object" && data !== null && "key" in data && "name" in data && "projectTypeKey" in data;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  blue: "bg-blue-500",
+  green: "bg-green-500",
+  yellow: "bg-yellow-500",
+  "blue-gray": "bg-slate-400",
+  undefined: "bg-muted-foreground",
+};
+
+function PriorityIcon({ name }: { name?: string }) {
+  const lower = (name || "").toLowerCase();
+  if (lower === "highest" || lower === "critical") return <ArrowUp className="h-3 w-3 text-destructive" />;
+  if (lower === "high") return <ArrowUp className="h-3 w-3 text-orange-500" />;
+  if (lower === "low") return <ArrowDown className="h-3 w-3 text-blue-500" />;
+  if (lower === "lowest") return <ArrowDown className="h-3 w-3 text-green-500" />;
+  return <Minus className="h-3 w-3 text-muted-foreground" />;
+}
+
+function IssueCard({ issue }: { issue: JiraIssueData }) {
+  const f = issue.fields || {};
+  const statusColor = f.status?.statusCategory?.colorName || "undefined";
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <CircleDot 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">
+            <span className="text-muted-foreground font-normal">{issue.key}</span>{" "}
+            {f.summary}
+          </p>
+          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+            {f.status?.name && (
+              <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                <span className={`h-1.5 w-1.5 rounded-full ${STATUS_COLORS[statusColor] || STATUS_COLORS.undefined}`} />
+                {f.status.name}
+              </span>
+            )}
+            {f.priority?.name && (
+              <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                <PriorityIcon name={f.priority.name} />
+                {f.priority.name}
+              </span>
+            )}
+            {f.issuetype?.name && (
+              <span className="text-xs text-muted-foreground">{f.issuetype.name}</span>
+            )}
+            {f.assignee && (
+              <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                <User className="h-3 w-3" />
+                {f.assignee.displayName || f.assignee.name}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProjectCard({ project }: { project: JiraProjectData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3">
+      <div className="flex items-start gap-2">
+        <SquareKanban 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">
+            <span className="text-muted-foreground font-normal">{project.key}</span>{" "}
+            {project.name}
+          </p>
+          {project.projectTypeKey && (
+            <p className="text-xs text-muted-foreground">{project.projectTypeKey}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function JiraRenderer({ data }: JiraRendererProps) {
+  // {issues: [...]}
+  if (typeof data === "object" && data !== null && "issues" in data) {
+    const issues = (data as any).issues;
+    if (Array.isArray(issues)) {
+      return (
+        <div className="space-y-1.5">
+          {issues.filter(isJiraIssue).map((iss, i) => <IssueCard key={iss.key || i} issue={iss} />)}
+        </div>
+      );
+    }
+  }
+
+  // {projects: [...]}
+  if (typeof data === "object" && data !== null && "projects" in data) {
+    const projects = (data as any).projects;
+    if (Array.isArray(projects)) {
+      return (
+        <div className="space-y-1.5">
+          {projects.filter(isJiraProject).map((p, i) => <ProjectCard key={p.key || i} project={p} />)}
+        </div>
+      );
+    }
+  }
+
+  // Single issue
+  if (isJiraIssue(data)) return <IssueCard issue={data} />;
+
+  // Single project
+  if (isJiraProject(data)) return <ProjectCard project={data} />;
+
+  // Array
+  if (Array.isArray(data)) {
+    const issues = data.filter(isJiraIssue);
+    if (issues.length > 0) {
+      return (
+        <div className="space-y-1.5">
+          {issues.map((iss, i) => <IssueCard key={iss.key || i} issue={iss} />)}
+        </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>
+  );
+}