create-supyagent-app 0.1.21 → 0.1.22

package/package.json

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

package/templates/base/src/components/chat-input.tsx

@@ -1,18 +1,33 @@
 "use client";
 
-import { ArrowUp, Square } from "lucide-react";
+import { ArrowUp, Square, Paperclip, X } from "lucide-react";
 import { useState, useRef, useEffect, useCallback } from "react";
-import type { FormEvent, KeyboardEvent } from "react";
+import type { FormEvent, KeyboardEvent, DragEvent, ClipboardEvent } from "react";
 
 interface ChatInputProps {
-  sendMessage: (message: { text: string }) => Promise<void>;
+  sendMessage: (message: {
+    text: string;
+    files?: Array<{ type: "file"; url: string; mediaType: string; filename?: string }>;
+  }) => Promise<void>;
   isLoading: boolean;
   stop: () => void;
 }
 
+function readFileAsDataURL(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
 export function ChatInput({ sendMessage, isLoading, stop }: ChatInputProps) {
   const [input, setInput] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const adjustHeight = useCallback(() => {
     const textarea = textareaRef.current;
@@ -25,12 +40,43 @@ export function ChatInput({ sendMessage, isLoading, stop }: ChatInputProps) {
     adjustHeight();
   }, [input, adjustHeight]);
 
-  const handleSubmit = (e: FormEvent) => {
+  const addFiles = useCallback((newFiles: FileList | File[]) => {
+    const imageFiles = Array.from(newFiles).filter((f) =>
+      f.type.startsWith("image/")
+    );
+    if (imageFiles.length > 0) {
+      setFiles((prev) => [...prev, ...imageFiles]);
+    }
+  }, []);
+
+  const removeFile = useCallback((index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    if (!input.trim() || isLoading) return;
-    sendMessage({ text: input });
+    if ((!input.trim() && files.length === 0) || isLoading) return;
+
+    let fileUIParts:
+      | Array<{ type: "file"; url: string; mediaType: string; filename?: string }>
+      | undefined;
+    if (files.length > 0) {
+      fileUIParts = await Promise.all(
+        files.map(async (f) => ({
+          type: "file" as const,
+          url: await readFileAsDataURL(f),
+          mediaType: f.type,
+          filename: f.name,
+        }))
+      );
+    }
+
+    sendMessage({
+      text: input,
+      ...(fileUIParts ? { files: fileUIParts } : {}),
+    });
     setInput("");
-    // Reset height
+    setFiles([]);
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
@@ -39,44 +85,126 @@ export function ChatInput({ sendMessage, isLoading, stop }: ChatInputProps) {
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      if (input.trim() && !isLoading) {
+      if ((input.trim() || files.length > 0) && !isLoading) {
         handleSubmit(e as unknown as FormEvent);
       }
     }
   };
 
+  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
+    const items = e.clipboardData?.files;
+    if (items && items.length > 0) {
+      addFiles(items);
+    }
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: DragEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: DragEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer.files.length > 0) {
+      addFiles(e.dataTransfer.files);
+    }
+  };
+
+  const hasContent = input.trim() || files.length > 0;
+
   return (
     <form
       onSubmit={handleSubmit}
-      className="relative flex items-end rounded-xl border border-border bg-card focus-within:border-ring focus-within:ring-1 focus-within:ring-ring transition-colors"
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`relative flex flex-col rounded-xl border bg-card transition-colors ${
+        isDragging
+          ? "border-ring ring-1 ring-ring"
+          : "border-border focus-within:border-ring focus-within:ring-1 focus-within:ring-ring"
+      }`}
     >
-      <textarea
-        ref={textareaRef}
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="Send a message..."
-        rows={1}
-        className="flex-1 resize-none bg-transparent px-4 py-3 text-sm text-foreground placeholder-muted-foreground outline-none max-h-[200px]"
-      />
-      <div className="p-2">
-        {isLoading ? (
+      {/* File previews */}
+      {files.length > 0 && (
+        <div className="flex gap-2 px-3 pt-3 pb-0 flex-wrap">
+          {files.map((file, i) => (
+            <div key={`${file.name}-${i}`} className="relative group">
+              <img
+                src={URL.createObjectURL(file)}
+                alt={file.name}
+                className="h-16 w-16 rounded-lg object-cover border border-border"
+              />
+              <button
+                type="button"
+                onClick={() => removeFile(i)}
+                className="absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full bg-muted border border-border flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-accent"
+              >
+                <X className="h-3 w-3 text-muted-foreground" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-end">
+        {/* Paperclip button */}
+        <div className="p-2">
           <button
             type="button"
-            onClick={stop}
-            className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+            onClick={() => fileInputRef.current?.click()}
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+            title="Attach image"
           >
-            <Square className="h-3.5 w-3.5" />
+            <Paperclip className="h-4 w-4" />
           </button>
-        ) : (
-          <button
-            type="submit"
-            disabled={!input.trim()}
-            className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground disabled:opacity-30 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors"
-          >
-            <ArrowUp className="h-4 w-4" />
-          </button>
-        )}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            className="hidden"
+            onChange={(e) => {
+              if (e.target.files) addFiles(e.target.files);
+              e.target.value = "";
+            }}
+          />
+        </div>
+
+        <textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          placeholder="Send a message..."
+          rows={1}
+          className="flex-1 resize-none bg-transparent py-3 text-sm text-foreground placeholder-muted-foreground outline-none max-h-[200px]"
+        />
+        <div className="p-2">
+          {isLoading ? (
+            <button
+              type="button"
+              onClick={stop}
+              className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+            >
+              <Square className="h-3.5 w-3.5" />
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={!hasContent}
+              className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground disabled:opacity-30 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors"
+            >
+              <ArrowUp className="h-4 w-4" />
+            </button>
+          )}
+        </div>
       </div>
     </form>
   );

package/templates/base/src/components/chat-message.tsx

@@ -72,6 +72,34 @@ export function ChatMessage({ message, addToolApprovalResponse }: ChatMessagePro
             return <MarkdownContent key={i} text={(part as any).text} />;
           }
 
+          if (part.type === "file") {
+            const filePart = part as { type: "file"; mediaType?: string; url: string; filename?: string };
+            if (filePart.mediaType?.startsWith("image/")) {
+              return (
+                <img
+                  key={i}
+                  src={filePart.url}
+                  alt={filePart.filename || "Image"}
+                  className="rounded-lg max-w-full max-h-96 object-contain"
+                />
+              );
+            }
+            if (filePart.mediaType?.startsWith("audio/")) {
+              return <audio key={i} controls src={filePart.url} className="w-full max-w-md" />;
+            }
+            return (
+              <a
+                key={i}
+                href={filePart.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-primary hover:underline"
+              >
+                {filePart.filename || "Download file"}
+              </a>
+            );
+          }
+
           if (isToolUIPart(part)) {
             return <ToolMessage key={i} part={part} addToolApprovalResponse={addToolApprovalResponse} />;
           }

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

@@ -26,6 +26,9 @@ import { CalendlyRenderer } from "./tools/calendly";
 import { TwilioRenderer } from "./tools/twilio";
 import { LinkedInRenderer } from "./tools/linkedin";
 import { BashRenderer } from "./tools/bash";
+import { ImageRenderer } from "./tools/image";
+import { AudioRenderer } from "./tools/audio";
+import { VideoRenderer } from "./tools/video";
 import { GenericRenderer } from "./tools/generic";
 
 export interface ToolRendererProps {
@@ -64,6 +67,9 @@ const renderers: Record<string, ComponentType<ToolRendererProps>> = {
   twilio: TwilioRenderer,
   linkedin: LinkedInRenderer,
   bash: BashRenderer,
+  image: ImageRenderer,
+  audio: AudioRenderer,
+  video: VideoRenderer,
 };
 
 export function getToolRenderer(formatterType: string): ComponentType<ToolRendererProps> {

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

@@ -0,0 +1,92 @@
+import React from "react";
+import { ExternalLink, Loader2 } from "lucide-react";
+
+interface AudioRendererProps {
+  data: unknown;
+}
+
+export function AudioRenderer({ data }: AudioRendererProps) {
+  if (typeof data !== "object" || data === null) {
+    return (
+      <p className="text-sm text-muted-foreground italic">No data returned</p>
+    );
+  }
+
+  const d = data as Record<string, unknown>;
+
+  if (d.error) {
+    return (
+      <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3">
+        <p className="text-sm text-destructive">{String(d.error)}</p>
+      </div>
+    );
+  }
+
+  if (d.status === "processing" || (d.poll_url && !d.audio_url)) {
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-border bg-card p-4">
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">Processing audio...</span>
+      </div>
+    );
+  }
+
+  // TTS result — audio player
+  if (typeof d.audio_url === "string") {
+    return (
+      <div className="space-y-2">
+        <audio controls className="w-full max-w-md">
+          <source src={d.audio_url} />
+        </audio>
+        <a
+          href={d.audio_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+        >
+          <ExternalLink className="h-3 w-3" />
+          Download audio
+        </a>
+      </div>
+    );
+  }
+
+  // STT result — transcription text
+  if (d.result && typeof d.result === "object") {
+    const result = d.result as Record<string, unknown>;
+    if (typeof result.text === "string") {
+      return (
+        <div className="space-y-2">
+          <div className="rounded-lg border border-border bg-card p-3">
+            <p className="text-sm text-foreground whitespace-pre-wrap">{result.text}</p>
+          </div>
+          {result.tokens_used != null && (
+            <p className="text-xs text-muted-foreground">
+              Tokens used: {String(result.tokens_used)}
+            </p>
+          )}
+        </div>
+      );
+    }
+  }
+
+  // OCR-like text result at top level
+  if (typeof d.text === "string") {
+    return (
+      <div className="rounded-lg border border-border bg-card p-3">
+        <p className="text-sm text-foreground whitespace-pre-wrap">{d.text}</p>
+        {d.tokens_used != null && (
+          <p className="text-xs text-muted-foreground mt-2">
+            Tokens used: {String(d.tokens_used)}
+          </p>
+        )}
+      </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/image.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { ExternalLink, Loader2 } from "lucide-react";
+
+interface ImageRendererProps {
+  data: unknown;
+}
+
+export function ImageRenderer({ data }: ImageRendererProps) {
+  if (typeof data !== "object" || data === null) {
+    return (
+      <p className="text-sm text-muted-foreground italic">No data returned</p>
+    );
+  }
+
+  const d = data as Record<string, unknown>;
+
+  if (d.error) {
+    return (
+      <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3">
+        <p className="text-sm text-destructive">{String(d.error)}</p>
+      </div>
+    );
+  }
+
+  if (d.status === "processing" || (d.poll_url && !d.image_url)) {
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-border bg-card p-4">
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">Generating image...</span>
+      </div>
+    );
+  }
+
+  if (typeof d.image_url === "string") {
+    return (
+      <div className="space-y-2">
+        <a
+          href={d.image_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block"
+        >
+          <img
+            src={d.image_url}
+            alt="Generated image"
+            className="rounded-lg max-w-full max-h-96 object-contain border border-border"
+          />
+        </a>
+        <a
+          href={d.image_url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+        >
+          <ExternalLink className="h-3 w-3" />
+          Open full size
+        </a>
+      </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/video.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { ExternalLink, Loader2 } from "lucide-react";
+
+interface VideoRendererProps {
+  data: unknown;
+}
+
+export function VideoRenderer({ data }: VideoRendererProps) {
+  if (typeof data !== "object" || data === null) {
+    return (
+      <p className="text-sm text-muted-foreground italic">No data returned</p>
+    );
+  }
+
+  const d = data as Record<string, unknown>;
+
+  if (d.error) {
+    return (
+      <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3">
+        <p className="text-sm text-destructive">{String(d.error)}</p>
+      </div>
+    );
+  }
+
+  if (d.status === "processing" || (d.poll_url && !d.answer && !d.result)) {
+    const eta = typeof d.estimated_time_seconds === "number"
+      ? ` (~${d.estimated_time_seconds}s)`
+      : "";
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-border bg-card p-4">
+        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">Processing video...{eta}</span>
+      </div>
+    );
+  }
+
+  // Video understanding — text answer
+  if (typeof d.answer === "string") {
+    return (
+      <div className="rounded-lg border border-border bg-card p-3">
+        <p className="text-sm text-foreground whitespace-pre-wrap">{d.answer}</p>
+      </div>
+    );
+  }
+
+  // Video generation — playable result
+  if (d.result && typeof d.result === "object") {
+    const result = d.result as Record<string, unknown>;
+    const videoUrl = typeof result.output === "string"
+      ? result.output
+      : typeof result.url === "string"
+        ? result.url
+        : typeof result.video_url === "string"
+          ? result.video_url
+          : null;
+
+    if (videoUrl) {
+      return (
+        <div className="space-y-2">
+          <video
+            controls
+            className="rounded-lg max-w-full max-h-96 border border-border"
+          >
+            <source src={videoUrl} />
+          </video>
+          <a
+            href={videoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+          >
+            <ExternalLink className="h-3 w-3" />
+            Open video
+          </a>
+        </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>
+  );
+}