create-supyagent-app 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-supyagent-app",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "Create a supyagent-powered chatbot app",
   "type": "module",
   "bin": {

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

@@ -1,15 +1,26 @@
 import React from "react";
-import { Users, Building2, Mail, Phone } from "lucide-react";
+import {
+  Users,
+  Building2,
+  Mail,
+  Phone,
+  Globe,
+  Briefcase,
+  DollarSign,
+  Calendar,
+} from "lucide-react";
+
+/* ------------------------------------------------------------------ */
+/*  Interfaces                                                        */
+/* ------------------------------------------------------------------ */
 
 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;
@@ -22,38 +33,114 @@ interface HubspotContactData {
 
 interface HubspotCompanyData {
   id?: string;
+  name?: string;
+  domain?: string;
+  industry?: string;
+  employeeCount?: number | null;
+  createdAt?: string;
+  updatedAt?: string;
+  /** Legacy shape: raw HubSpot properties */
   properties?: {
     name?: string;
     domain?: string;
     industry?: string;
     phone?: string;
+    numberofemployees?: string;
     [key: string]: unknown;
   };
 }
 
+interface HubspotDealData {
+  id?: string;
+  name?: string;
+  amount?: number | null;
+  stage?: string;
+  closeDate?: string;
+  pipeline?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
 interface HubSpotRendererProps {
   data: unknown;
 }
 
+/* ------------------------------------------------------------------ */
+/*  Type guards                                                       */
+/* ------------------------------------------------------------------ */
+
 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;
+  const d = data as any;
+  // Flat shape from Supyagent API (has domain at top level)
+  if ("domain" in d && !("email" in d) && !("amount" in d)) return true;
+  // Legacy raw HubSpot properties shape
+  const props = d.properties;
   return props && ("name" in props || "domain" in props);
 }
 
+function isHubspotDeal(data: unknown): data is HubspotDealData {
+  if (typeof data !== "object" || data === null) return false;
+  const d = data as any;
+  return ("amount" in d || "stage" in d || "closeDate" in d) && !("email" in d);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                           */
+/* ------------------------------------------------------------------ */
+
+function formatCurrency(value: number): string {
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value);
+  } catch {
+    return `$${value.toLocaleString()}`;
+  }
+}
+
+function formatDate(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+function getStageBadge(stage?: string) {
+  if (!stage) return null;
+  const s = stage.toLowerCase();
+  if (s === "closedwon" || s === "closed won")
+    return { label: "Won", className: "text-green-500 bg-green-500/10" };
+  if (s === "closedlost" || s === "closed lost")
+    return { label: "Lost", className: "text-red-400 bg-red-400/10" };
+  // Custom stage IDs — show as "In Progress"
+  if (/^\d+$/.test(stage))
+    return { label: "In Progress", className: "text-blue-400 bg-blue-400/10" };
+  return { label: stage, className: "text-muted-foreground bg-muted" };
+}
+
+/* ------------------------------------------------------------------ */
+/*  Cards                                                             */
+/* ------------------------------------------------------------------ */
+
 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;
@@ -92,107 +179,252 @@ function ContactCard({ contact }: { contact: HubspotContactData }) {
 
 function CompanyCard({ company }: { company: HubspotCompanyData }) {
   const p = company.properties || {};
+  // Support both flat shape (name at top level) and legacy (properties.name)
+  const name = company.name || p.name;
+  const domain = company.domain || p.domain;
+  const industry = company.industry || p.industry;
+  const phone = p.phone;
+  const employeeCount =
+    company.employeeCount ?? (p.numberofemployees ? Number(p.numberofemployees) : null);
 
   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>
+          <p className="text-sm font-medium text-foreground">
+            {name || "Unknown company"}
+          </p>
+          {industry && (
+            <p className="text-xs text-muted-foreground">{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>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 pl-6 text-xs text-muted-foreground">
+        {domain && (
+          <span className="flex items-center gap-1">
+            <Globe className="h-3 w-3" />
+            {domain}
+          </span>
         )}
-        {p.phone && (
-          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+        {phone && (
+          <span className="flex items-center gap-1">
             <Phone className="h-3 w-3" />
-            {p.phone}
+            {phone}
+          </span>
+        )}
+        {employeeCount != null && employeeCount > 0 && (
+          <span className="flex items-center gap-1">
+            <Users className="h-3 w-3" />
+            {employeeCount.toLocaleString()} employees
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DealCard({ deal }: { deal: HubspotDealData }) {
+  const stageBadge = getStageBadge(deal.stage);
+
+  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.name || "Untitled deal"}
+          </p>
+          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+            {deal.amount != null && (
+              <span className="flex items-center gap-1 text-xs font-medium text-foreground">
+                <DollarSign className="h-3 w-3" />
+                {formatCurrency(deal.amount)}
+              </span>
+            )}
+            {stageBadge && (
+              <span
+                className={`rounded-full px-2 py-0.5 text-xs ${stageBadge.className}`}
+              >
+                {stageBadge.label}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-x-4 gap-y-1 pl-6 text-xs text-muted-foreground">
+        {deal.closeDate && (
+          <span className="flex items-center gap-1">
+            <Calendar className="h-3 w-3" />
+            Close: {formatDate(deal.closeDate)}
           </span>
         )}
+        {deal.pipeline && deal.pipeline !== "default" && (
+          <span>{deal.pipeline}</span>
+        )}
       </div>
     </div>
   );
 }
 
+/* ------------------------------------------------------------------ */
+/*  List wrapper with optional paging indicator                       */
+/* ------------------------------------------------------------------ */
+
+function ListWrapper({
+  children,
+  hasMore,
+}: {
+  children: React.ReactNode;
+  hasMore?: boolean;
+}) {
+  return (
+    <div className="space-y-2">
+      {children}
+      {hasMore && (
+        <p className="text-xs text-muted-foreground text-center pt-1">
+          More results available
+        </p>
+      )}
+    </div>
+  );
+}
+
+function hasPaging(data: unknown): boolean {
+  if (typeof data !== "object" || data === null) return false;
+  const paging = (data as any).paging;
+  return paging && typeof paging === "object" && paging.next;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Renderer                                                          */
+/* ------------------------------------------------------------------ */
+
 export function HubSpotRenderer({ data }: HubSpotRendererProps) {
   // Single contact
   if (isHubspotContact(data)) {
     return <ContactCard contact={data} />;
   }
 
+  // Single deal
+  if (isHubspotDeal(data)) {
+    return <DealCard deal={data} />;
+  }
+
   // Single company
   if (isHubspotCompany(data)) {
     return <CompanyCard company={data} />;
   }
 
-  // Array
+  // Flat array
   if (Array.isArray(data)) {
+    const deals = data.filter(isHubspotDeal);
+    if (deals.length > 0) {
+      return (
+        <ListWrapper>
+          {deals.map((d, i) => (
+            <DealCard key={d.id || i} deal={d} />
+          ))}
+        </ListWrapper>
+      );
+    }
     const contacts = data.filter(isHubspotContact);
     if (contacts.length > 0) {
       return (
-        <div className="space-y-2">
+        <ListWrapper>
           {contacts.map((c, i) => (
             <ContactCard key={c.id || i} contact={c} />
           ))}
-        </div>
+        </ListWrapper>
       );
     }
     const companies = data.filter(isHubspotCompany);
     if (companies.length > 0) {
       return (
-        <div className="space-y-2">
+        <ListWrapper>
           {companies.map((c, i) => (
             <CompanyCard key={c.id || i} company={c} />
           ))}
-        </div>
+        </ListWrapper>
       );
     }
   }
 
-  // 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);
+  // Wrapper objects: { contacts: [...] }, { companies: [...] }, { deals: [...] }
+  if (typeof data === "object" && data !== null) {
+    const d = data as any;
+    const more = hasPaging(data);
+
+    if ("contacts" in d && Array.isArray(d.contacts)) {
+      const valid = d.contacts.filter(isHubspotContact);
       if (valid.length > 0) {
         return (
-          <div className="space-y-2">
-            {valid.map((c, i) => (
+          <ListWrapper hasMore={more}>
+            {valid.map((c: HubspotContactData, i: number) => (
               <ContactCard key={c.id || i} contact={c} />
             ))}
-          </div>
+          </ListWrapper>
         );
       }
     }
-  }
 
-  // Object with results array
-  if (typeof data === "object" && data !== null && "results" in data) {
-    const results = (data as any).results;
-    if (Array.isArray(results)) {
+    if ("companies" in d && Array.isArray(d.companies)) {
+      const valid = d.companies.filter(isHubspotCompany);
+      if (valid.length > 0) {
+        return (
+          <ListWrapper hasMore={more}>
+            {valid.map((c: HubspotCompanyData, i: number) => (
+              <CompanyCard key={c.id || i} company={c} />
+            ))}
+          </ListWrapper>
+        );
+      }
+    }
+
+    if ("deals" in d && Array.isArray(d.deals)) {
+      const valid = d.deals.filter(isHubspotDeal);
+      if (valid.length > 0) {
+        return (
+          <ListWrapper hasMore={more}>
+            {valid.map((deal: HubspotDealData, i: number) => (
+              <DealCard key={deal.id || i} deal={deal} />
+            ))}
+          </ListWrapper>
+        );
+      }
+    }
+
+    // Raw HubSpot shape: { results: [...] }
+    if ("results" in d && Array.isArray(d.results)) {
+      const results = d.results;
+      const deals = results.filter(isHubspotDeal);
+      if (deals.length > 0) {
+        return (
+          <ListWrapper hasMore={more}>
+            {deals.map((deal: HubspotDealData, i: number) => (
+              <DealCard key={deal.id || i} deal={deal} />
+            ))}
+          </ListWrapper>
+        );
+      }
       const contacts = results.filter(isHubspotContact);
       if (contacts.length > 0) {
         return (
-          <div className="space-y-2">
-            {contacts.map((c, i) => (
+          <ListWrapper hasMore={more}>
+            {contacts.map((c: HubspotContactData, i: number) => (
               <ContactCard key={c.id || i} contact={c} />
             ))}
-          </div>
+          </ListWrapper>
         );
       }
       const companies = results.filter(isHubspotCompany);
       if (companies.length > 0) {
         return (
-          <div className="space-y-2">
-            {companies.map((c, i) => (
+          <ListWrapper hasMore={more}>
+            {companies.map((c: HubspotCompanyData, i: number) => (
               <CompanyCard key={c.id || i} company={c} />
             ))}
-          </div>
+          </ListWrapper>
         );
       }
     }

package/templates/package-json/package.json.tmpl

@@ -17,7 +17,7 @@
     "{{aiProviderPackage}}": "{{aiProviderVersion}}",
     "@prisma/client": "^6.2.0",
     "@radix-ui/react-collapsible": "^1.1.0",
-    "@supyagent/sdk": "^0.1.12",
+    "@supyagent/sdk": "^0.1.13",
     "class-variance-authority": "^0.7.0",
     "ai": "^6.0.0",
     "clsx": "^2.1.0",