create-supyagent-app 0.1.26 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-supyagent-app",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Create a supyagent-powered chatbot app",
   "type": "module",
   "bin": {
@@ -10,6 +10,10 @@
     "dist",
     "templates"
   ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  },
   "dependencies": {
     "@clack/prompts": "^0.8.0",
     "nypm": "^0.4.0",
@@ -19,9 +23,5 @@
     "tsup": "^8.3.0",
     "typescript": "^5.7.0"
   },
-  "license": "MIT",
-  "scripts": {
-    "build": "tsup",
-    "clean": "rm -rf dist"
-  }
-}
+  "license": "MIT"
+}

package/templates/base/src/components/supyagent/tool-message.tsx

@@ -20,6 +20,7 @@ import {
   humanizeToolName,
   getProviderLabel,
   getProviderFromToolName,
+  resolveToolName,
   ToolInput,
 } from "@supyagent/sdk/react";
 import { getToolRenderer } from "./tool-renderers";
@@ -30,9 +31,10 @@ interface ToolMessageProps {
 }
 
 export function ToolMessage({ part, addToolApprovalResponse }: ToolMessageProps) {
-  const toolName = extractToolName(part);
+  const rawToolName = extractToolName(part);
   const state = extractState(part);
   const args = extractArgs(part);
+  const toolName = resolveToolName(rawToolName, args);
 
   const toolState = resolveState(state);
   const isDone = toolState === "output-available";

package/templates/base/src/components/supyagent/tool-renderers.tsx

@@ -29,6 +29,8 @@ import { BashRenderer } from "./tools/bash";
 import { ImageRenderer } from "./tools/image";
 import { AudioRenderer } from "./tools/audio";
 import { VideoRenderer } from "./tools/video";
+import { WhatsAppRenderer } from "./tools/whatsapp";
+import { BrowserRenderer } from "./tools/browser";
 import { GenericRenderer } from "./tools/generic";
 
 export interface ToolRendererProps {
@@ -70,6 +72,8 @@ const renderers: Record<string, ComponentType<ToolRendererProps>> = {
   image: ImageRenderer,
   audio: AudioRenderer,
   video: VideoRenderer,
+  whatsapp: WhatsAppRenderer,
+  browser: BrowserRenderer,
 };
 
 export function getToolRenderer(formatterType: string): ComponentType<ToolRendererProps> {

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

@@ -0,0 +1,134 @@
+import React from "react";
+import { Globe, ExternalLink, FileText, Image } from "lucide-react";
+
+interface BrowserData {
+  url?: string;
+  title?: string;
+  content?: string;
+  text?: string;
+  markdown?: string;
+  screenshot_url?: string;
+  screenshot?: string;
+  status?: number | string;
+  links?: Array<{ text?: string; href?: string }>;
+}
+
+interface BrowserRendererProps {
+  data: unknown;
+}
+
+function isBrowserData(data: unknown): data is BrowserData {
+  if (typeof data !== "object" || data === null) return false;
+  return "url" in data || "content" in data || "text" in data || "markdown" in data || "screenshot_url" in data || "screenshot" in data;
+}
+
+function getDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace("www.", "");
+  } catch {
+    return url;
+  }
+}
+
+export function BrowserRenderer({ data }: BrowserRendererProps) {
+  if (!isBrowserData(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>
+    );
+  }
+
+  const content = data.content || data.text || data.markdown || "";
+  const screenshotUrl = data.screenshot_url || data.screenshot;
+
+  return (
+    <div className="space-y-2">
+      {/* URL Header */}
+      {data.url && (
+        <div className="rounded-lg border border-border bg-card overflow-hidden">
+          <div className="flex items-center gap-2 px-3 py-2">
+            <Globe className="h-4 w-4 text-muted-foreground shrink-0" />
+            <div className="min-w-0 flex-1">
+              {data.title && (
+                <p className="text-sm font-medium text-foreground truncate">{data.title}</p>
+              )}
+              <p className="text-xs text-muted-foreground truncate">{getDomain(data.url)}</p>
+            </div>
+            {data.status && (
+              <span className={`inline-flex rounded-full px-2 py-0.5 text-xs ${
+                Number(data.status) >= 200 && Number(data.status) < 300
+                  ? "text-green-500 bg-green-500/10"
+                  : Number(data.status) >= 400
+                    ? "text-destructive bg-destructive/10"
+                    : "text-muted-foreground bg-muted"
+              }`}>
+                {data.status}
+              </span>
+            )}
+            <a href={data.url} 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>
+      )}
+
+      {/* Screenshot */}
+      {screenshotUrl && (
+        <div className="rounded-lg border border-border bg-background overflow-hidden">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 bg-muted border-b border-border">
+            <Image className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground">Screenshot</span>
+          </div>
+          <div className="p-2">
+            <img
+              src={screenshotUrl}
+              alt={data.title || "Page screenshot"}
+              className="w-full rounded border border-border"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Extracted content */}
+      {content && (
+        <div className="rounded-lg border border-border bg-background overflow-hidden">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 bg-muted border-b border-border">
+            <FileText className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground">Extracted content</span>
+          </div>
+          <pre className="p-3 text-xs text-foreground overflow-x-auto max-h-80 overflow-y-auto font-mono whitespace-pre-wrap">
+            {content}
+          </pre>
+        </div>
+      )}
+
+      {/* Links */}
+      {data.links && data.links.length > 0 && (
+        <div className="rounded-lg border border-border bg-card p-3 space-y-1">
+          <p className="text-xs font-medium text-muted-foreground mb-1.5">Links ({data.links.length})</p>
+          <div className="space-y-1 max-h-40 overflow-y-auto">
+            {data.links.slice(0, 20).map((link, i) => (
+              <div key={i} className="flex items-center gap-1.5">
+                <ExternalLink className="h-3 w-3 text-muted-foreground shrink-0" />
+                {link.href ? (
+                  <a href={link.href} target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline truncate">
+                    {link.text || link.href}
+                  </a>
+                ) : (
+                  <span className="text-xs text-foreground truncate">{link.text}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {!data.url && !content && !screenshotUrl && (
+        <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>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+import React from "react";
+import { MessageCircle, User, Clock } from "lucide-react";
+
+interface WhatsAppMessageData {
+  id?: string;
+  from?: string;
+  to?: string;
+  body?: string;
+  text?: string;
+  timestamp?: number | string;
+  type?: string;
+  status?: string;
+  contact_name?: string;
+  profile_name?: string;
+}
+
+interface WhatsAppRendererProps {
+  data: unknown;
+}
+
+function isWhatsAppMessage(data: unknown): data is WhatsAppMessageData {
+  return typeof data === "object" && data !== null && ("body" in data || "text" in data || "from" in data);
+}
+
+function formatTimestamp(ts: number | string): string {
+  try {
+    const date = typeof ts === "number"
+      ? new Date(ts > 1e12 ? ts : ts * 1000)
+      : new Date(ts);
+    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: WhatsAppMessageData }) {
+  const sender = message.profile_name || message.contact_name || message.from;
+  const body = message.body || message.text;
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-3 space-y-1.5">
+      <div className="flex items-center gap-2">
+        <MessageCircle className="h-4 w-4 text-muted-foreground shrink-0" />
+        {sender && (
+          <span className="flex items-center gap-1 text-xs font-medium text-foreground">
+            <User className="h-3 w-3" />
+            {sender}
+          </span>
+        )}
+        {message.type && message.type !== "text" && (
+          <span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+            {message.type}
+          </span>
+        )}
+        {message.status && (
+          <span className={`inline-flex rounded-full px-2 py-0.5 text-xs ${
+            message.status === "delivered" || message.status === "read"
+              ? "text-green-500 bg-green-500/10"
+              : "text-muted-foreground bg-muted"
+          }`}>
+            {message.status}
+          </span>
+        )}
+        {message.timestamp && (
+          <span className="flex items-center gap-1 text-xs text-muted-foreground ml-auto">
+            <Clock className="h-3 w-3" />
+            {formatTimestamp(message.timestamp)}
+          </span>
+        )}
+      </div>
+      {body && (
+        <p className="text-sm text-foreground line-clamp-3">{body}</p>
+      )}
+    </div>
+  );
+}
+
+export function WhatsAppRenderer({ data }: WhatsAppRendererProps) {
+  // {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(isWhatsAppMessage).map((m, i) => <MessageCard key={m.id || i} message={m} />)}
+        </div>
+      );
+    }
+  }
+
+  // Single message
+  if (isWhatsAppMessage(data)) return <MessageCard message={data} />;
+
+  // Array of messages
+  if (Array.isArray(data)) {
+    const msgs = data.filter(isWhatsAppMessage);
+    if (msgs.length > 0) {
+      return (
+        <div className="space-y-2">
+          {msgs.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>
+  );
+}