create-supyagent-app 0.1.12 → 0.1.14

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

@@ -0,0 +1,135 @@
+import React from "react";
+import { MessageSquare, Hash, Reply } from "lucide-react";
+
+interface SlackMessageData {
+  text?: string;
+  channel?: string;
+  user?: string;
+  ts?: string;
+  ok?: boolean;
+  reactions?: Array<{ name: string; count?: number }>;
+  thread_ts?: string;
+  reply_count?: number;
+  channels?: Array<{ id?: string; name?: string; num_members?: number; memberCount?: number }>;
+}
+
+interface SlackRendererProps {
+  data: unknown;
+}
+
+function isSlackMessage(data: unknown): data is SlackMessageData {
+  return typeof data === "object" && data !== null && ("text" in data || "channel" in data);
+}
+
+function isChannelList(data: unknown): data is { channels: Array<{ id?: string; name?: string; num_members?: number; memberCount?: number }> } {
+  return typeof data === "object" && data !== null && "channels" in data && Array.isArray((data as any).channels);
+}
+
+function MessageBubble({ message }: { message: SlackMessageData }) {
+  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.channel && (
+          <span className="flex items-center gap-0.5 text-xs text-muted-foreground">
+            <Hash className="h-3 w-3" />
+            {message.channel}
+          </span>
+        )}
+        {message.user && (
+          <span className="text-xs font-medium text-foreground">{message.user}</span>
+        )}
+        {message.thread_ts && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Reply className="h-3 w-3" />
+            {message.reply_count ? `${message.reply_count} replies` : "Thread"}
+          </span>
+        )}
+      </div>
+      {message.text && (
+        <p className="text-sm text-foreground">{message.text}</p>
+      )}
+      {message.reactions && message.reactions.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 pt-1">
+          {message.reactions.map((reaction) => (
+            <span
+              key={reaction.name}
+              className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+            >
+              :{reaction.name}:
+              {reaction.count && reaction.count > 1 && (
+                <span className="font-medium">{reaction.count}</span>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChannelCard({ channel }: { channel: { id?: string; name?: string; num_members?: number; memberCount?: number } }) {
+  const members = channel.num_members ?? channel.memberCount;
+  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>
+      {members !== undefined && (
+        <span className="text-xs text-muted-foreground">{members} members</span>
+      )}
+    </div>
+  );
+}
+
+export function SlackRenderer({ data }: SlackRendererProps) {
+  // Channel list response
+  if (isChannelList(data)) {
+    const channels = (data as any).channels;
+    return (
+      <div className="space-y-1.5">
+        {channels.map((ch: any, i: number) => (
+          <ChannelCard key={ch.id || i} channel={ch} />
+        ))}
+      </div>
+    );
+  }
+
+  if (isSlackMessage(data)) {
+    return <MessageBubble message={data} />;
+  }
+
+  if (Array.isArray(data)) {
+    const messages = data.filter(isSlackMessage);
+    if (messages.length > 0) {
+      return (
+        <div className="space-y-2">
+          {messages.map((msg, i) => (
+            <MessageBubble key={msg.ts || i} message={msg} />
+          ))}
+        </div>
+      );
+    }
+  }
+
+  if (typeof data === "object" && data !== null && "messages" in data) {
+    const messages = (data as { messages: unknown[] }).messages;
+    if (Array.isArray(messages)) {
+      const slackMsgs = messages.filter(isSlackMessage);
+      if (slackMsgs.length > 0) {
+        return (
+          <div className="space-y-2">
+            {slackMsgs.map((msg, i) => (
+              <MessageBubble key={msg.ts || i} message={msg} />
+            ))}
+          </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/slides.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Presentation, ExternalLink } from "lucide-react";
+
+interface SlidesData {
+  presentationId?: string;
+  title?: string;
+  url?: string;
+  slides?: unknown[];
+  pageSize?: unknown;
+}
+
+interface SlidesRendererProps {
+  data: unknown;
+}
+
+function isSlidesData(data: unknown): data is SlidesData {
+  return typeof data === "object" && data !== null && ("presentationId" in data || ("title" in data && "slides" in data));
+}
+
+function SlidesCard({ presentation }: { presentation: SlidesData }) {
+  const slideUrl = presentation.url || (presentation.presentationId ? `https://docs.google.com/presentation/d/${presentation.presentationId}` : null);
+  const slideCount = presentation.slides?.length;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3">
+      <div className="flex items-start gap-2">
+        <Presentation 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">
+            {slideUrl ? (
+              <a href={slideUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {presentation.title || "Presentation"}
+              </a>
+            ) : (
+              presentation.title || "Presentation"
+            )}
+          </p>
+          {slideCount !== undefined && (
+            <p className="text-xs text-muted-foreground">
+              {slideCount} {slideCount === 1 ? "slide" : "slides"}
+            </p>
+          )}
+        </div>
+        {slideUrl && (
+          <a href={slideUrl} 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>
+  );
+}
+
+export function SlidesRenderer({ data }: SlidesRendererProps) {
+  if (isSlidesData(data)) {
+    return <SlidesCard presentation={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>
+  );
+}

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

@@ -0,0 +1,235 @@
+import React from "react";
+import { CreditCard, User, FileText, Clock, RefreshCw } from "lucide-react";
+
+interface StripeCustomerData {
+  id?: string;
+  name?: string;
+  email?: string;
+  phone?: string;
+  created?: number;
+}
+
+interface StripeInvoiceData {
+  id?: string;
+  number?: string;
+  amount_due?: number;
+  amount_paid?: number;
+  currency?: string;
+  status?: string;
+  customer_name?: string;
+  due_date?: number;
+}
+
+interface StripeSubscriptionData {
+  id?: string;
+  status?: string;
+  plan?: { nickname?: string; amount?: number; currency?: string; interval?: string };
+  current_period_start?: number;
+  current_period_end?: number;
+}
+
+interface StripeBalanceData {
+  available?: Array<{ amount: number; currency: string }>;
+  pending?: Array<{ amount: number; currency: string }>;
+}
+
+interface StripeRendererProps {
+  data: unknown;
+}
+
+function isCustomer(data: unknown): data is StripeCustomerData {
+  return typeof data === "object" && data !== null && ("email" in data || "name" in data) && !("amount_due" in data) && !("plan" in data);
+}
+
+function isInvoice(data: unknown): data is StripeInvoiceData {
+  return typeof data === "object" && data !== null && ("number" in data || "amount_due" in data);
+}
+
+function isSubscription(data: unknown): data is StripeSubscriptionData {
+  return typeof data === "object" && data !== null && "plan" in data && "status" in data;
+}
+
+function isBalance(data: unknown): data is StripeBalanceData {
+  return typeof data === "object" && data !== null && ("available" in data || "pending" in data);
+}
+
+function formatAmount(amount: number, currency: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: "currency", currency: currency.toUpperCase() }).format(amount / 100);
+  } catch {
+    return `${(amount / 100).toFixed(2)} ${currency.toUpperCase()}`;
+  }
+}
+
+function formatUnixDate(ts: number): string {
+  try {
+    return new Date(ts * 1000).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+  } catch {
+    return String(ts);
+  }
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  paid: "bg-green-500/10 text-green-500",
+  active: "bg-green-500/10 text-green-500",
+  open: "bg-blue-500/10 text-blue-500",
+  draft: "bg-muted text-muted-foreground",
+  void: "bg-muted text-muted-foreground",
+  uncollectible: "bg-destructive/10 text-destructive",
+  past_due: "bg-destructive/10 text-destructive",
+  canceled: "bg-destructive/10 text-destructive",
+  trialing: "bg-yellow-500/10 text-yellow-600",
+};
+
+function StatusBadge({ status }: { status: string }) {
+  return (
+    <span className={`rounded-full px-2 py-0.5 text-xs ${STATUS_STYLES[status] || "bg-muted text-muted-foreground"}`}>
+      {status}
+    </span>
+  );
+}
+
+function CustomerCard({ customer }: { customer: StripeCustomerData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <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">{customer.name || "Unnamed customer"}</p>
+          {customer.email && <p className="text-xs text-muted-foreground">{customer.email}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InvoiceCard({ invoice }: { invoice: StripeInvoiceData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <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">{invoice.number || invoice.id}</p>
+          {invoice.customer_name && <p className="text-xs text-muted-foreground">{invoice.customer_name}</p>}
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          {invoice.amount_due !== undefined && invoice.currency && (
+            <span className="text-sm font-medium text-foreground">{formatAmount(invoice.amount_due, invoice.currency)}</span>
+          )}
+          {invoice.status && <StatusBadge status={invoice.status} />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SubscriptionCard({ sub }: { sub: StripeSubscriptionData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+      <div className="flex items-start gap-2">
+        <RefreshCw 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">
+            {sub.plan?.nickname || "Subscription"}
+            {sub.plan?.amount !== undefined && sub.plan?.currency && (
+              <span className="text-muted-foreground font-normal"> {formatAmount(sub.plan.amount, sub.plan.currency)}/{sub.plan.interval}</span>
+            )}
+          </p>
+          {sub.current_period_end && (
+            <p className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock className="h-3 w-3" />
+              Renews {formatUnixDate(sub.current_period_end)}
+            </p>
+          )}
+        </div>
+        {sub.status && <StatusBadge status={sub.status} />}
+      </div>
+    </div>
+  );
+}
+
+function BalanceDisplay({ balance }: { balance: StripeBalanceData }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-2">
+      <div className="flex items-center gap-2">
+        <CreditCard className="h-4 w-4 text-muted-foreground" />
+        <span className="text-sm font-medium text-foreground">Balance</span>
+      </div>
+      <div className="grid grid-cols-2 gap-4 pl-6">
+        {balance.available && balance.available.length > 0 && (
+          <div>
+            <p className="text-xs text-muted-foreground">Available</p>
+            {balance.available.map((b, i) => (
+              <p key={i} className="text-sm font-medium text-foreground">{formatAmount(b.amount, b.currency)}</p>
+            ))}
+          </div>
+        )}
+        {balance.pending && balance.pending.length > 0 && (
+          <div>
+            <p className="text-xs text-muted-foreground">Pending</p>
+            {balance.pending.map((b, i) => (
+              <p key={i} className="text-sm font-medium text-foreground">{formatAmount(b.amount, b.currency)}</p>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function StripeRenderer({ data }: StripeRendererProps) {
+  // Balance
+  if (isBalance(data)) return <BalanceDisplay balance={data} />;
+
+  // List response {data: [...]}
+  if (typeof data === "object" && data !== null && "data" in data && Array.isArray((data as any).data)) {
+    const items = (data as any).data as unknown[];
+    const invoices = items.filter(isInvoice);
+    if (invoices.length > 0) {
+      return (
+        <div className="space-y-1.5">
+          {invoices.map((inv, i) => <InvoiceCard key={inv.id || i} invoice={inv} />)}
+        </div>
+      );
+    }
+    const subs = items.filter(isSubscription);
+    if (subs.length > 0) {
+      return (
+        <div className="space-y-1.5">
+          {subs.map((s, i) => <SubscriptionCard key={s.id || i} sub={s} />)}
+        </div>
+      );
+    }
+    const customers = items.filter(isCustomer);
+    if (customers.length > 0) {
+      return (
+        <div className="space-y-1.5">
+          {customers.map((c, i) => <CustomerCard key={c.id || i} customer={c} />)}
+        </div>
+      );
+    }
+  }
+
+  // Single items
+  if (isInvoice(data)) return <InvoiceCard invoice={data} />;
+  if (isSubscription(data)) return <SubscriptionCard sub={data} />;
+  if (isCustomer(data)) return <CustomerCard customer={data} />;
+
+  // Array
+  if (Array.isArray(data)) {
+    const invoices = data.filter(isInvoice);
+    if (invoices.length > 0) {
+      return <div className="space-y-1.5">{invoices.map((inv, i) => <InvoiceCard key={inv.id || i} invoice={inv} />)}</div>;
+    }
+    const customers = data.filter(isCustomer);
+    if (customers.length > 0) {
+      return <div className="space-y-1.5">{customers.map((c, i) => <CustomerCard key={c.id || i} customer={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/telegram.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { MessageSquare, User, Clock } from "lucide-react";
+
+interface TelegramMessageData {
+  message_id?: number;
+  text?: string;
+  from?: { username?: string; first_name?: string; last_name?: string };
+  chat?: { title?: string; username?: string; type?: string };
+  date?: number;
+}
+
+interface TelegramRendererProps {
+  data: unknown;
+}
+
+function isTelegramMessage(data: unknown): data is TelegramMessageData {
+  return typeof data === "object" && data !== null && ("text" in data || "message_id" in data);
+}
+
+function formatUnixDate(ts: number): string {
+  try {
+    const date = new Date(ts * 1000);
+    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 String(ts);
+  }
+}
+
+function MessageCard({ message }: { message: TelegramMessageData }) {
+  const fromName = message.from
+    ? [message.from.first_name, message.from.last_name].filter(Boolean).join(" ") || message.from.username
+    : undefined;
+
+  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" />
+        {fromName && (
+          <span className="flex items-center gap-1 text-xs font-medium text-foreground">
+            <User className="h-3 w-3" />
+            {fromName}
+          </span>
+        )}
+        {message.chat?.title && (
+          <span className="text-xs text-muted-foreground">{message.chat.title}</span>
+        )}
+        {message.date && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground ml-auto">
+            <Clock className="h-3 w-3" />
+            {formatUnixDate(message.date)}
+          </span>
+        )}
+      </div>
+      {message.text && (
+        <p className="text-sm text-foreground line-clamp-3">{message.text}</p>
+      )}
+    </div>
+  );
+}
+
+export function TelegramRenderer({ data }: TelegramRendererProps) {
+  // {messages: [...]}
+  if (typeof data === "object" && data !== null && "messages" in data) {
+    const msgs = (data as any).messages;
+    if (Array.isArray(msgs)) {
+      return (
+        <div className="space-y-2">
+          {msgs.filter(isTelegramMessage).map((m, i) => <MessageCard key={m.message_id || i} message={m} />)}
+        </div>
+      );
+    }
+  }
+
+  // {result: [...]} (Bot API shape)
+  if (typeof data === "object" && data !== null && "result" in data) {
+    const result = (data as any).result;
+    if (Array.isArray(result)) {
+      const msgs = result.filter(isTelegramMessage);
+      if (msgs.length > 0) {
+        return (
+          <div className="space-y-2">
+            {msgs.map((m, i) => <MessageCard key={m.message_id || i} message={m} />)}
+          </div>
+        );
+      }
+    }
+  }
+
+  if (isTelegramMessage(data)) return <MessageCard message={data} />;
+
+  if (Array.isArray(data)) {
+    const msgs = data.filter(isTelegramMessage);
+    if (msgs.length > 0) {
+      return (
+        <div className="space-y-2">
+          {msgs.map((m, i) => <MessageCard key={m.message_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/twilio.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { Phone, ArrowUpRight, ArrowDownLeft, Clock } from "lucide-react";
+
+interface TwilioMessageData {
+  sid?: string;
+  from?: string;
+  to?: string;
+  body?: string;
+  status?: string;
+  direction?: string;
+  date_sent?: string;
+  date_created?: string;
+}
+
+interface TwilioRendererProps {
+  data: unknown;
+}
+
+function isTwilioMessage(data: unknown): data is TwilioMessageData {
+  return typeof data === "object" && data !== null && ("body" in data || "sid" in data) && ("from" in data || "to" 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;
+  }
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  delivered: "bg-green-500/10 text-green-500",
+  sent: "bg-green-500/10 text-green-500",
+  received: "bg-blue-500/10 text-blue-500",
+  failed: "bg-destructive/10 text-destructive",
+  undelivered: "bg-destructive/10 text-destructive",
+  queued: "bg-yellow-500/10 text-yellow-600",
+  sending: "bg-blue-500/10 text-blue-500",
+};
+
+function MessageCard({ message }: { message: TwilioMessageData }) {
+  const isInbound = message.direction?.includes("inbound");
+  const DirectionIcon = isInbound ? ArrowDownLeft : ArrowUpRight;
+  const dateStr = message.date_sent || message.date_created;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-center gap-2">
+        <Phone className="h-4 w-4 text-muted-foreground shrink-0" />
+        <DirectionIcon className="h-3 w-3 text-muted-foreground shrink-0" />
+        <div className="flex items-center gap-1.5 flex-1 min-w-0">
+          {message.from && <span className="text-xs text-muted-foreground">{message.from}</span>}
+          <span className="text-xs text-muted-foreground">→</span>
+          {message.to && <span className="text-xs text-muted-foreground">{message.to}</span>}
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          {message.status && (
+            <span className={`rounded-full px-2 py-0.5 text-xs ${STATUS_STYLES[message.status] || "bg-muted text-muted-foreground"}`}>
+              {message.status}
+            </span>
+          )}
+          {dateStr && (
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock className="h-3 w-3" />
+              {formatRelativeDate(dateStr)}
+            </span>
+          )}
+        </div>
+      </div>
+      {message.body && (
+        <p className="text-sm text-foreground line-clamp-3">{message.body}</p>
+      )}
+    </div>
+  );
+}
+
+export function TwilioRenderer({ data }: TwilioRendererProps) {
+  // {messages: [...]}
+  if (typeof data === "object" && data !== null && "messages" in data) {
+    const msgs = (data as any).messages;
+    if (Array.isArray(msgs)) {
+      return (
+        <div className="space-y-1.5">
+          {msgs.filter(isTwilioMessage).map((m, i) => <MessageCard key={m.sid || i} message={m} />)}
+        </div>
+      );
+    }
+  }
+
+  if (isTwilioMessage(data)) return <MessageCard message={data} />;
+
+  if (Array.isArray(data)) {
+    const msgs = data.filter(isTwilioMessage);
+    if (msgs.length > 0) {
+      return (
+        <div className="space-y-1.5">
+          {msgs.map((m, i) => <MessageCard key={m.sid || 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>
+  );
+}