create-supyagent-app 0.1.13 → 0.1.14

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

@@ -0,0 +1,154 @@
+import React from "react";
+import { Briefcase, DollarSign } from "lucide-react";
+
+interface PipedriveDealData {
+  id?: number;
+  title?: string;
+  value?: number;
+  currency?: string;
+  status?: string;
+  stage_id?: number;
+  stage_name?: string;
+  person_name?: string;
+  org_name?: string;
+  owner_name?: string;
+}
+
+interface PipedriveRendererProps {
+  data: unknown;
+}
+
+function isPipedriveDeal(data: unknown): data is PipedriveDealData {
+  return typeof data === "object" && data !== null && ("title" in data || "value" in data || "status" in data) && !("subject" in data);
+}
+
+function formatCurrency(value: number, currency?: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency: currency || "USD",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value);
+  } catch {
+    return `${currency || "$"}${value.toLocaleString()}`;
+  }
+}
+
+function getStatusBadge(status?: string) {
+  switch (status) {
+    case "won":
+      return { label: "Won", className: "text-green-500 bg-green-500/10" };
+    case "lost":
+      return { label: "Lost", className: "text-destructive bg-destructive/10" };
+    case "open":
+      return { label: "Open", className: "text-primary bg-primary/10" };
+    case "deleted":
+      return { label: "Deleted", className: "text-muted-foreground bg-muted" };
+    default:
+      return status ? { label: status, className: "text-muted-foreground bg-muted" } : null;
+  }
+}
+
+function DealCard({ deal }: { deal: PipedriveDealData }) {
+  const statusBadge = getStatusBadge(deal.status);
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <Briefcase 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">{deal.title || "Untitled deal"}</p>
+          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+            {deal.value !== undefined && (
+              <span className="flex items-center gap-1 text-xs font-medium text-foreground">
+                <DollarSign className="h-3 w-3" />
+                {formatCurrency(deal.value, deal.currency)}
+              </span>
+            )}
+            {statusBadge && (
+              <span className={`rounded-full px-2 py-0.5 text-xs ${statusBadge.className}`}>
+                {statusBadge.label}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 pl-6 text-xs text-muted-foreground">
+        {deal.person_name && <span>{deal.person_name}</span>}
+        {deal.org_name && <span>{deal.org_name}</span>}
+        {deal.stage_name && <span>{deal.stage_name}</span>}
+      </div>
+    </div>
+  );
+}
+
+export function PipedriveRenderer({ data }: PipedriveRendererProps) {
+  if (isPipedriveDeal(data)) {
+    return <DealCard deal={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const deals = data.filter(isPipedriveDeal);
+    if (deals.length > 0) {
+      return (
+        <div className="space-y-2">
+          {deals.map((deal, i) => (
+            <DealCard key={deal.id || i} deal={deal} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  // Supyagent API shape: { deals: [...], pagination }
+  if (typeof data === "object" && data !== null && "deals" in data) {
+    const items = (data as any).deals;
+    if (Array.isArray(items)) {
+      const deals = items.filter(isPipedriveDeal);
+      if (deals.length > 0) {
+        return (
+          <div className="space-y-2">
+            {deals.map((deal, i) => (
+              <DealCard key={deal.id || i} deal={deal} />
+            ))}
+          </div>
+        );
+      }
+    }
+  }
+
+  // Single deal wrapper: { deal: {...} }
+  if (typeof data === "object" && data !== null && "deal" in data) {
+    const item = (data as any).deal;
+    if (isPipedriveDeal(item)) {
+      return <DealCard deal={item} />;
+    }
+  }
+
+  // Raw Pipedrive shape: { data: [...] }
+  if (typeof data === "object" && data !== null && "data" in data) {
+    const items = (data as any).data;
+    if (Array.isArray(items)) {
+      const deals = items.filter(isPipedriveDeal);
+      if (deals.length > 0) {
+        return (
+          <div className="space-y-2">
+            {deals.map((deal, i) => (
+              <DealCard key={deal.id || i} deal={deal} />
+            ))}
+          </div>
+        );
+      }
+    }
+    if (isPipedriveDeal(items)) {
+      return <DealCard deal={items} />;
+    }
+  }
+
+  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/resend.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { Send, Clock } from "lucide-react";
+
+interface ResendEmailData {
+  id?: string;
+  to?: string | string[];
+  from?: string;
+  subject?: string;
+  created_at?: string;
+  last_event?: string;
+}
+
+interface ResendRendererProps {
+  data: unknown;
+}
+
+function isResendData(data: unknown): data is ResendEmailData {
+  return typeof data === "object" && data !== null && ("id" in data || "to" in data) && ("subject" in data || "from" in data || "created_at" in data);
+}
+
+function formatRecipients(to: string | string[] | undefined): string {
+  if (!to) return "Unknown";
+  if (Array.isArray(to)) return to.join(", ");
+  return to;
+}
+
+function formatTimestamp(dateStr: string): string {
+  try {
+    const date = new Date(dateStr);
+    return date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+  } catch {
+    return dateStr;
+  }
+}
+
+function ResendCard({ email }: { email: ResendEmailData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-2">
+      <div className="flex items-start gap-2">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-500/10 shrink-0">
+          <Send className="h-4 w-4 text-green-500" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">Email sent</p>
+          {email.subject && (
+            <p className="text-xs text-muted-foreground truncate">{email.subject}</p>
+          )}
+        </div>
+      </div>
+      <div className="pl-10 space-y-1 text-xs text-muted-foreground">
+        <p>
+          <span className="text-foreground">To:</span> {formatRecipients(email.to)}
+        </p>
+        {email.from && (
+          <p>
+            <span className="text-foreground">From:</span> {email.from}
+          </p>
+        )}
+        {email.created_at && (
+          <p className="flex items-center gap-1">
+            <Clock className="h-3 w-3" />
+            {formatTimestamp(email.created_at)}
+          </p>
+        )}
+        {email.last_event && (
+          <span className="inline-block rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground capitalize">
+            {email.last_event}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ResendRenderer({ data }: ResendRendererProps) {
+  if (isResendData(data)) {
+    return <ResendCard email={data} />;
+  }
+
+  if (typeof data === "object" && data !== null && "data" in data) {
+    const inner = (data as any).data;
+    if (isResendData(inner)) {
+      return <ResendCard email={inner} />;
+    }
+  }
+
+  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/salesforce.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import { User, Briefcase, Mail, Phone, Building2, Calendar } from "lucide-react";
+
+interface SalesforceContactData {
+  Id?: string;
+  Name?: string;
+  Title?: string;
+  Email?: string;
+  Phone?: string;
+  Account?: { Name?: string } | null;
+  AccountName?: string;
+}
+
+interface SalesforceOpportunityData {
+  Id?: string;
+  Name?: string;
+  Amount?: number;
+  StageName?: string;
+  CloseDate?: string;
+  Probability?: number;
+}
+
+interface SalesforceRendererProps {
+  data: unknown;
+}
+
+function isContact(data: unknown): data is SalesforceContactData {
+  if (typeof data !== "object" || data === null) return false;
+  return "Name" in data && ("Email" in data || "Phone" in data || "Title" in data);
+}
+
+function isOpportunity(data: unknown): data is SalesforceOpportunityData {
+  if (typeof data !== "object" || data === null) return false;
+  return "Name" in data && ("StageName" in data || "Amount" in data || "CloseDate" in data);
+}
+
+function ContactCard({ contact }: { contact: SalesforceContactData }) {
+  const account = contact.AccountName || contact.Account?.Name;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <User 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">{contact.Name}</p>
+          {contact.Title && <p className="text-xs text-muted-foreground">{contact.Title}</p>}
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 pl-6">
+        {contact.Email && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Mail className="h-3 w-3" />
+            {contact.Email}
+          </span>
+        )}
+        {contact.Phone && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Phone className="h-3 w-3" />
+            {contact.Phone}
+          </span>
+        )}
+        {account && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Building2 className="h-3 w-3" />
+            {account}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function OpportunityCard({ opp }: { opp: SalesforceOpportunityData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-start gap-2">
+        <Briefcase 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">{opp.Name}</p>
+          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+            {opp.Amount !== undefined && (
+              <span className="text-xs font-medium text-foreground">
+                {new Intl.NumberFormat(undefined, { style: "currency", currency: "USD" }).format(opp.Amount)}
+              </span>
+            )}
+            {opp.StageName && (
+              <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                {opp.StageName}
+              </span>
+            )}
+            {opp.CloseDate && (
+              <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                <Calendar className="h-3 w-3" />
+                {opp.CloseDate}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      {opp.Probability !== undefined && (
+        <div className="pl-6 space-y-0.5">
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">Probability</span>
+            <span className="text-xs font-medium text-foreground">{opp.Probability}%</span>
+          </div>
+          <div className="h-1.5 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full rounded-full bg-primary transition-all"
+              style={{ width: `${Math.min(100, opp.Probability)}%` }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function SalesforceRenderer({ data }: SalesforceRendererProps) {
+  // {records: [...]}
+  if (typeof data === "object" && data !== null && "records" in data) {
+    const records = (data as any).records;
+    if (Array.isArray(records)) {
+      const contacts = records.filter(isContact);
+      const opps = records.filter(isOpportunity);
+      if (opps.length > 0 && contacts.length === 0) {
+        return (
+          <div className="space-y-1.5">
+            {opps.map((o, i) => <OpportunityCard key={o.Id || i} opp={o} />)}
+          </div>
+        );
+      }
+      if (contacts.length > 0) {
+        return (
+          <div className="space-y-1.5">
+            {contacts.map((c, i) => <ContactCard key={c.Id || i} contact={c} />)}
+          </div>
+        );
+      }
+    }
+  }
+
+  // Single
+  if (isOpportunity(data)) return <OpportunityCard opp={data} />;
+  if (isContact(data)) return <ContactCard contact={data} />;
+
+  // Array
+  if (Array.isArray(data)) {
+    const contacts = data.filter(isContact);
+    if (contacts.length > 0) {
+      return <div className="space-y-1.5">{contacts.map((c, i) => <ContactCard key={c.Id || i} contact={c} />)}</div>;
+    }
+    const opps = data.filter(isOpportunity);
+    if (opps.length > 0) {
+      return <div className="space-y-1.5">{opps.map((o, i) => <OpportunityCard key={o.Id || i} opp={o} />)}</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/search.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { ExternalLink, Search } from "lucide-react";
+
+interface SearchResult {
+  title?: string;
+  link?: string;
+  url?: string;
+  snippet?: string;
+  description?: string;
+  position?: number;
+}
+
+interface SearchData {
+  results?: SearchResult[];
+  organic?: SearchResult[];
+  answer?: string;
+  answerBox?: { answer?: string; snippet?: string; title?: string };
+  relatedSearches?: Array<{ query?: string }>;
+  related_searches?: Array<{ query?: string }>;
+}
+
+interface SearchRendererProps {
+  data: unknown;
+}
+
+function isSearchData(data: unknown): data is SearchData {
+  if (typeof data !== "object" || data === null) return false;
+  return "results" in data || "organic" in data || "answer" in data || "answerBox" in data;
+}
+
+function isSearchResult(data: unknown): data is SearchResult {
+  return typeof data === "object" && data !== null && ("title" in data || "link" in data || "url" in data);
+}
+
+function getDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace("www.", "");
+  } catch {
+    return url;
+  }
+}
+
+function ResultCard({ result }: { result: SearchResult }) {
+  const href = result.link || result.url;
+  const snippet = result.snippet || result.description;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <div className="flex items-start gap-2">
+        <div className="min-w-0 flex-1">
+          {href ? (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm font-medium text-primary hover:underline"
+            >
+              {result.title || href}
+            </a>
+          ) : (
+            <p className="text-sm font-medium text-foreground">{result.title}</p>
+          )}
+          {href && (
+            <p className="text-xs text-muted-foreground truncate">{getDomain(href)}</p>
+          )}
+        </div>
+        {href && (
+          <a href={href} target="_blank" rel="noopener noreferrer" className="shrink-0 text-muted-foreground hover:text-foreground">
+            <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+        )}
+      </div>
+      {snippet && (
+        <p className="text-xs text-muted-foreground line-clamp-2">{snippet}</p>
+      )}
+    </div>
+  );
+}
+
+export function SearchRenderer({ data }: SearchRendererProps) {
+  if (isSearchData(data)) {
+    const results = data.results || data.organic || [];
+    const answerText = data.answer || data.answerBox?.answer || data.answerBox?.snippet;
+    const related = data.relatedSearches || data.related_searches;
+
+    return (
+      <div className="space-y-3">
+        {answerText && (
+          <div className="rounded-lg border border-border bg-card p-3">
+            <p className="text-sm text-foreground">{answerText}</p>
+            {data.answerBox?.title && (
+              <p className="text-xs text-muted-foreground mt-1">{data.answerBox.title}</p>
+            )}
+          </div>
+        )}
+
+        {results.length > 0 && (
+          <div className="space-y-2">
+            {results.filter(isSearchResult).map((result, i) => (
+              <ResultCard key={result.link || result.url || i} result={result} />
+            ))}
+          </div>
+        )}
+
+        {related && related.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {related.map((r, i) => (
+              <span
+                key={i}
+                className="inline-flex items-center gap-1 rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground"
+              >
+                <Search className="h-3 w-3" />
+                {r.query}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Array of results
+  if (Array.isArray(data)) {
+    const results = data.filter(isSearchResult);
+    if (results.length > 0) {
+      return (
+        <div className="space-y-2">
+          {results.map((result, i) => (
+            <ResultCard key={result.link || result.url || i} result={result} />
+          ))}
+        </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/sheets.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { Table2, ExternalLink } from "lucide-react";
+
+interface SheetsData {
+  spreadsheetId?: string;
+  title?: string;
+  url?: string;
+  values?: unknown[][];
+  range?: string;
+  updatedRange?: string;
+  updatedRows?: number;
+  updatedColumns?: number;
+  updatedCells?: number;
+  sheets?: Array<{ properties?: { title?: string; sheetId?: number } }>;
+}
+
+interface SheetsRendererProps {
+  data: unknown;
+}
+
+function isSheetsData(data: unknown): data is SheetsData {
+  return typeof data === "object" && data !== null && ("spreadsheetId" in data || "values" in data || "range" in data || "updatedRange" in data);
+}
+
+function SheetsTable({ values }: { values: unknown[][] }) {
+  if (values.length === 0) return null;
+
+  const headers = values[0] as string[];
+  const rows = values.slice(1);
+
+  return (
+    <div className="overflow-x-auto rounded-lg border border-border">
+      <table className="w-full text-xs">
+        <thead>
+          <tr className="border-b border-border bg-muted">
+            {headers.map((header, i) => (
+              <th key={i} className="px-3 py-2 text-left font-medium text-foreground whitespace-nowrap">
+                {String(header)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, rowIdx) => (
+            <tr key={rowIdx} className="border-b border-border last:border-0">
+              {headers.map((_, colIdx) => (
+                <td key={colIdx} className="px-3 py-1.5 text-muted-foreground whitespace-nowrap">
+                  {String((row as unknown[])[colIdx] ?? "")}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function SheetsCard({ sheet }: { sheet: SheetsData }) {
+  const sheetUrl = sheet.url || (sheet.spreadsheetId ? `https://docs.google.com/spreadsheets/d/${sheet.spreadsheetId}` : null);
+
+  return (
+    <div className="space-y-2">
+      <div className="rounded-lg border border-border bg-card p-3">
+        <div className="flex items-start gap-2">
+          <Table2 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">
+              {sheetUrl ? (
+                <a href={sheetUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                  {sheet.title || "Spreadsheet"}
+                </a>
+              ) : (
+                sheet.title || "Spreadsheet"
+              )}
+            </p>
+            {(sheet.updatedRange || sheet.range) && (
+              <p className="text-xs text-muted-foreground">
+                {sheet.updatedRange || sheet.range}
+                {sheet.updatedCells !== undefined && ` \u00B7 ${sheet.updatedCells} cells updated`}
+              </p>
+            )}
+          </div>
+          {sheetUrl && (
+            <a href={sheetUrl} target="_blank" rel="noopener noreferrer" className="shrink-0 text-muted-foreground hover:text-foreground">
+              <ExternalLink className="h-3.5 w-3.5" />
+            </a>
+          )}
+        </div>
+      </div>
+
+      {sheet.values && sheet.values.length > 0 && (
+        <SheetsTable values={sheet.values} />
+      )}
+    </div>
+  );
+}
+
+export function SheetsRenderer({ data }: SheetsRendererProps) {
+  if (isSheetsData(data)) {
+    return <SheetsCard sheet={data} />;
+  }
+
+  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>
+  );
+}