create-supyagent-app 0.1.36 → 0.1.38

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

@@ -6,10 +6,36 @@ import { ChatMessage } from "./chat-message";
 import { ChatInput } from "./chat-input";
 import { ChatSidebar } from "./chat-sidebar";
 import { useRef, useEffect, useMemo, useState, useCallback } from "react";
-import { ArrowDown } from "lucide-react";
+import { ArrowDown, Mail, MessageSquare, Github, ExternalLink } from "lucide-react";
+import { ContextIndicator } from "@supyagent/sdk/react";
 import { Header } from "./header";
 import Image from "next/image";
 
+interface Integration {
+  provider: string;
+  status: string;
+}
+
+interface MeData {
+  integrations: Integration[];
+  dashboardUrl: string;
+}
+
+const PROVIDER_ICONS: Record<string, React.ReactNode> = {
+  google: <Mail className="h-4 w-4" />,
+  slack: <MessageSquare className="h-4 w-4" />,
+  github: <Github className="h-4 w-4" />,
+  discord: <MessageSquare className="h-4 w-4" />,
+  microsoft: <Mail className="h-4 w-4" />,
+  notion: <ExternalLink className="h-4 w-4" />,
+};
+
+const POPULAR_INTEGRATIONS = [
+  { provider: "google", label: "Google", description: "Gmail, Calendar, Drive" },
+  { provider: "slack", label: "Slack", description: "Messages & channels" },
+  { provider: "github", label: "GitHub", description: "Repos & issues" },
+];
+
 interface ChatProps {
   chatId: string;
   initialMessages: UIMessage[];
@@ -25,7 +51,7 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
     [chatId]
   );
 
-  const { messages, sendMessage, status, stop, addToolApprovalResponse } = useChat({
+  const { messages, sendMessage, status, stop, addToolApprovalResponse, setMessages } = useChat({
     id: chatId,
     transport,
     messages: initialMessages,
@@ -33,10 +59,41 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
   });
 
   const isLoading = status === "submitted" || status === "streaming";
+  const [isCompacting, setIsCompacting] = useState(false);
+
+  const handleCompact = useCallback(async () => {
+    if (isCompacting || isLoading) return;
+    setIsCompacting(true);
+    try {
+      const res = await fetch("/api/chat/compact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ chatId }),
+      });
+      if (res.ok) {
+        const { messages: compactedMessages } = await res.json();
+        setMessages(compactedMessages);
+      }
+    } catch {
+      // Compact failed silently
+    } finally {
+      setIsCompacting(false);
+    }
+  }, [chatId, isCompacting, isLoading, setMessages]);
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const [meData, setMeData] = useState<MeData | null>(null);
+
+  useEffect(() => {
+    fetch("/api/me")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (data) setMeData(data);
+      })
+      .catch(() => {});
+  }, []);
 
   const scrollToBottom = useCallback(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -68,6 +125,9 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
     "What's on my calendar today?",
   ];
 
+  const hasIntegrations = meData && meData.integrations.length > 0;
+  const dashboardUrl = meData?.dashboardUrl || "https://app.supyagent.com";
+
   return (
     <div className="flex h-screen flex-col">
       <Header />
@@ -82,29 +142,106 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
           <div className="mx-auto max-w-3xl space-y-6">
             {messages.length === 0 && (
               <div className="flex h-full min-h-[60vh] items-center justify-center">
-                <div className="text-center max-w-md">
-                  <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted">
-                    <Image src="/logo.png" alt="Supyagent" width={24} height={24} className="opacity-70" />
+                {!hasIntegrations && meData !== null ? (
+                  <div className="text-center max-w-lg">
+                    <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted">
+                      <Image src="/logo.png" alt="Supyagent" width={24} height={24} className="opacity-70" />
+                    </div>
+                    <h1 className="text-xl font-semibold text-foreground">
+                      Get started
+                    </h1>
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      Connect your integrations to start using your AI agent.
+                    </p>
+
+                    <div className="mt-6 space-y-2">
+                      <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-3 text-left">
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">1</span>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-foreground">Connect integrations</p>
+                          <p className="text-xs text-muted-foreground">Link your services to give your agent access</p>
+                        </div>
+                        <a
+                          href={`${dashboardUrl}/integrations`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="shrink-0 rounded-md border border-border px-3 py-1 text-xs font-medium text-foreground hover:bg-muted transition-colors"
+                        >
+                          Open dashboard
+                        </a>
+                      </div>
+                      <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-3 text-left">
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">2</span>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-foreground">Try a command</p>
+                          <p className="text-xs text-muted-foreground">Type <kbd className="rounded bg-muted px-1 py-0.5 text-[10px] font-mono">/</kbd> to see quick actions</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-6">
+                      <p className="mb-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">Popular integrations</p>
+                      <div className="flex justify-center gap-3">
+                        {POPULAR_INTEGRATIONS.map((integration) => (
+                          <a
+                            key={integration.provider}
+                            href={`${dashboardUrl}/integrations`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex flex-col items-center gap-1.5 rounded-lg border border-border bg-card p-3 hover:bg-muted transition-colors w-28"
+                          >
+                            <span className="text-muted-foreground">
+                              {PROVIDER_ICONS[integration.provider]}
+                            </span>
+                            <span className="text-xs font-medium text-foreground">{integration.label}</span>
+                            <span className="text-[10px] text-muted-foreground">{integration.description}</span>
+                          </a>
+                        ))}
+                      </div>
+                    </div>
                   </div>
-                  <h1 className="text-xl font-semibold text-foreground">
-                    Supyagent Chat
-                  </h1>
-                  <p className="mt-2 text-sm text-muted-foreground">
-                    Ask me anything — I can use your connected integrations.
-                  </p>
-                  <div className="mt-6 flex flex-wrap justify-center gap-2">
-                    {suggestions.map((suggestion) => (
-                      <button
-                        key={suggestion}
-                        type="button"
-                        onClick={() => sendMessage({ text: suggestion })}
-                        className="rounded-full border border-border bg-card px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
-                      >
-                        {suggestion}
-                      </button>
-                    ))}
+                ) : (
+                  <div className="text-center max-w-md">
+                    <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted">
+                      <Image src="/logo.png" alt="Supyagent" width={24} height={24} className="opacity-70" />
+                    </div>
+                    <h1 className="text-xl font-semibold text-foreground">
+                      Supyagent Chat
+                    </h1>
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      Ask me anything — I can use your connected integrations.
+                    </p>
+
+                    {hasIntegrations && (
+                      <div className="mt-4 flex justify-center gap-1.5">
+                        {meData.integrations.map((integration) => (
+                          <span
+                            key={integration.provider}
+                            className="flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground"
+                            title={integration.provider}
+                          >
+                            {PROVIDER_ICONS[integration.provider] || (
+                              <span className="text-[10px] font-medium uppercase">{integration.provider.slice(0, 2)}</span>
+                            )}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+
+                    <div className="mt-6 flex flex-wrap justify-center gap-2">
+                      {suggestions.map((suggestion) => (
+                        <button
+                          key={suggestion}
+                          type="button"
+                          onClick={() => sendMessage({ text: suggestion })}
+                          className="rounded-full border border-border bg-card px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                        >
+                          {suggestion}
+                        </button>
+                      ))}
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             )}
             {messages.map((message) => (
@@ -128,10 +265,14 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
 
         <div className="border-t border-border px-4 py-4">
           <div className="mx-auto max-w-3xl">
+            <div className="flex items-center justify-end mb-1.5 min-h-[20px]">
+              <ContextIndicator messages={messages} />
+            </div>
             <ChatInput
               sendMessage={sendMessage}
               isLoading={isLoading}
               stop={stop}
+              onCompact={handleCompact}
             />
           </div>
         </div>

package/templates/base/src/components/header.tsx

@@ -1,9 +1,13 @@
 "use client";
 
 import Image from "next/image";
+import { Sun, Moon } from "lucide-react";
 import { UserButton } from "./user-button";
+import { useTheme } from "./theme-provider";
 
 export function Header() {
+  const { theme, toggleTheme } = useTheme();
+
   return (
     <header className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-card px-4">
       <div className="flex items-center gap-2.5">
@@ -16,7 +20,17 @@ export function Header() {
         />
         <span className="text-sm font-medium text-foreground">Supyagent</span>
       </div>
-      <UserButton />
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={toggleTheme}
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+          title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+        >
+          {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+        </button>
+        <UserButton />
+      </div>
     </header>
   );
 }

package/templates/base/src/components/slash-menu.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import {
+  Mail,
+  Calendar,
+  HardDrive,
+  MessageSquare,
+  Github,
+  Search,
+  Send,
+  CalendarClock,
+  Minimize2,
+} from "lucide-react";
+
+interface SlashCommand {
+  name: string;
+  label: string;
+  description: string;
+  prompt: string;
+  icon: React.ReactNode;
+}
+
+const COMMANDS: SlashCommand[] = [
+  { name: "email", label: "/email", description: "Search my recent emails", prompt: "Search my recent emails", icon: <Mail className="h-4 w-4" /> },
+  { name: "calendar", label: "/calendar", description: "What's on my calendar today?", prompt: "What's on my calendar today?", icon: <Calendar className="h-4 w-4" /> },
+  { name: "drive", label: "/drive", description: "Find files in my Drive", prompt: "Find files in my Drive", icon: <HardDrive className="h-4 w-4" /> },
+  { name: "slack", label: "/slack", description: "Check my Slack messages", prompt: "Check my Slack messages", icon: <MessageSquare className="h-4 w-4" /> },
+  { name: "github", label: "/github", description: "Show my recent GitHub activity", prompt: "Show my recent GitHub activity", icon: <Github className="h-4 w-4" /> },
+  { name: "search", label: "/search", description: "Search the web for...", prompt: "Search the web for ", icon: <Search className="h-4 w-4" /> },
+  { name: "compose", label: "/compose", description: "Draft an email to...", prompt: "Draft an email to ", icon: <Send className="h-4 w-4" /> },
+  { name: "schedule", label: "/schedule", description: "Schedule a meeting for...", prompt: "Schedule a meeting for ", icon: <CalendarClock className="h-4 w-4" /> },
+  { name: "compact", label: "/compact", description: "Compact conversation history", prompt: "__compact__", icon: <Minimize2 className="h-4 w-4" /> },
+];
+
+interface SlashMenuProps {
+  query: string;
+  onSelect: (command: SlashCommand) => void;
+  onClose: () => void;
+}
+
+export function SlashMenu({ query, onSelect, onClose }: SlashMenuProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const filtered = COMMANDS.filter(
+    (cmd) =>
+      cmd.name.startsWith(query.toLowerCase()) ||
+      cmd.description.toLowerCase().includes(query.toLowerCase())
+  );
+
+  // Reset selection when filtered list changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    itemRefs.current[selectedIndex]?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (filtered.length === 0) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev + 1) % filtered.length);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev - 1 + filtered.length) % filtered.length);
+          break;
+        case "Enter":
+          e.preventDefault();
+          onSelect(filtered[selectedIndex]);
+          break;
+        case "Escape":
+          e.preventDefault();
+          onClose();
+          break;
+      }
+    },
+    [filtered, selectedIndex, onSelect, onClose]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  if (filtered.length === 0) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      className="absolute bottom-full left-0 right-0 mb-2 max-h-64 overflow-y-auto rounded-xl border border-border bg-card shadow-lg"
+    >
+      <div className="p-1">
+        {filtered.map((cmd, i) => (
+          <button
+            key={cmd.name}
+            ref={(el) => { itemRefs.current[i] = el; }}
+            type="button"
+            onClick={() => onSelect(cmd)}
+            onMouseEnter={() => setSelectedIndex(i)}
+            className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors ${
+              i === selectedIndex
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted/50"
+            }`}
+          >
+            <span className="shrink-0 text-muted-foreground">{cmd.icon}</span>
+            <div className="flex-1 min-w-0">
+              <span className="text-sm font-medium">{cmd.label}</span>
+              <span className="ml-2 text-xs text-muted-foreground">{cmd.description}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export type { SlashCommand };

package/templates/base/src/components/theme-provider.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from "react";
+
+type Theme = "light" | "dark";
+
+interface ThemeContextValue {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+function getStoredTheme(): Theme {
+  if (typeof window === "undefined") return "dark";
+  const stored = localStorage.getItem("theme");
+  return stored === "light" || stored === "dark" ? stored : "dark";
+}
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement;
+  if (theme === "dark") {
+    root.classList.add("dark");
+  } else {
+    root.classList.remove("dark");
+  }
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("dark");
+
+  useEffect(() => {
+    const initial = getStoredTheme();
+    setTheme(initial);
+    applyTheme(initial);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => {
+      const next = prev === "dark" ? "light" : "dark";
+      localStorage.setItem("theme", next);
+      applyTheme(next);
+      return next;
+    });
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
+  return ctx;
+}