@tellet/create 0.8.0

package/template/components/chat/Markdown.tsx

@@ -0,0 +1,136 @@
+import { type ReactNode } from "react";
+
+function parseLine(line: string): ReactNode {
+  // Bold
+  let parts = line.split(/\*\*(.+?)\*\*/g);
+  if (parts.length > 1) {
+    return parts.map((part, i) =>
+      i % 2 === 1 ? <strong key={i}>{part}</strong> : part
+    );
+  }
+
+  // Inline code
+  parts = line.split(/`(.+?)`/g);
+  if (parts.length > 1) {
+    return parts.map((part, i) =>
+      i % 2 === 1 ? (
+        <code
+          key={i}
+          className="bg-bg-tertiary text-accent px-1 py-0.5 rounded text-xs"
+        >
+          {part}
+        </code>
+      ) : (
+        part
+      )
+    );
+  }
+
+  return line;
+}
+
+export function Markdown({ content }: { content: string }) {
+  const lines = content.split("\n");
+  const elements: ReactNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Code block
+    if (line.startsWith("```")) {
+      const lang = line.slice(3).trim();
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++; // skip closing ```
+      elements.push(
+        <pre
+          key={elements.length}
+          className="bg-bg-tertiary border border-border rounded-lg p-3 my-2 overflow-x-auto"
+        >
+          <code className="text-xs text-text-primary">{codeLines.join("\n")}</code>
+        </pre>
+      );
+      continue;
+    }
+
+    // Heading
+    if (line.startsWith("### ")) {
+      elements.push(
+        <p key={elements.length} className="font-semibold text-sm mt-2 mb-1">
+          {line.slice(4)}
+        </p>
+      );
+      i++;
+      continue;
+    }
+
+    if (line.startsWith("## ")) {
+      elements.push(
+        <p key={elements.length} className="font-semibold mt-2 mb-1">
+          {line.slice(3)}
+        </p>
+      );
+      i++;
+      continue;
+    }
+
+    // Bullet list
+    if (line.match(/^[-*] /)) {
+      const items: string[] = [];
+      while (i < lines.length && lines[i].match(/^[-*] /)) {
+        items.push(lines[i].replace(/^[-*] /, ""));
+        i++;
+      }
+      elements.push(
+        <ul key={elements.length} className="list-disc list-inside space-y-0.5 my-1">
+          {items.map((item, j) => (
+            <li key={j} className="text-sm">
+              {parseLine(item)}
+            </li>
+          ))}
+        </ul>
+      );
+      continue;
+    }
+
+    // Numbered list
+    if (line.match(/^\d+\. /)) {
+      const items: string[] = [];
+      while (i < lines.length && lines[i].match(/^\d+\. /)) {
+        items.push(lines[i].replace(/^\d+\. /, ""));
+        i++;
+      }
+      elements.push(
+        <ol key={elements.length} className="list-decimal list-inside space-y-0.5 my-1">
+          {items.map((item, j) => (
+            <li key={j} className="text-sm">
+              {parseLine(item)}
+            </li>
+          ))}
+        </ol>
+      );
+      continue;
+    }
+
+    // Empty line
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+
+    // Regular paragraph
+    elements.push(
+      <p key={elements.length} className="text-sm">
+        {parseLine(line)}
+      </p>
+    );
+    i++;
+  }
+
+  return <div className="space-y-1">{elements}</div>;
+}

package/template/components/dashboard/AgentChat.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { Markdown } from "@/components/chat/Markdown";
+
+interface ChatMessage {
+  role: "user" | "assistant";
+  content: string;
+}
+
+interface AgentChatProps {
+  agent: { id: string; name: string; role: string };
+  onClose: () => void;
+}
+
+export function AgentChat({ agent, onClose }: AgentChatProps) {
+  const [input, setInput] = useState("");
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [streaming, setStreaming] = useState(false);
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const send = async () => {
+    const text = input.trim();
+    if (!text || streaming) return;
+    setInput("");
+    setMessages((p) => [...p, { role: "user", content: text }]);
+    setStreaming(true);
+    setMessages((p) => [...p, { role: "assistant", content: "" }]);
+
+    try {
+      const res = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message: text,
+          agent_id: agent.id,
+          conversation_id: conversationId,
+        }),
+      });
+      const reader = res.body?.getReader();
+      const decoder = new TextDecoder();
+      if (!reader) return;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        for (const line of decoder
+          .decode(value)
+          .split("\n")
+          .filter((l) => l.startsWith("data: "))) {
+          try {
+            const data = JSON.parse(line.slice(6));
+            if (data.text) {
+              setMessages((p) => {
+                const u = [...p];
+                const last = u[u.length - 1];
+                if (last.role === "assistant")
+                  u[u.length - 1] = { ...last, content: last.content + data.text };
+                return u;
+              });
+            }
+            if (data.conversation_id) setConversationId(data.conversation_id);
+          } catch {}
+        }
+      }
+    } catch {
+      setMessages((p) => {
+        const u = [...p];
+        u[u.length - 1] = { role: "assistant", content: "Something went wrong." };
+        return u;
+      });
+    } finally {
+      setStreaming(false);
+    }
+  };
+
+  const roleLabel = agent.role.replace("_", " ");
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="fixed inset-0 bg-black/30 z-40"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+      />
+      <motion.div
+        className="fixed top-0 right-0 h-full w-full max-w-[440px] z-50 border-l border-border bg-bg-primary shadow-2xl flex flex-col"
+        initial={{ x: "100%" }}
+        animate={{ x: 0 }}
+        exit={{ x: "100%" }}
+        transition={{ type: "spring", damping: 25, stiffness: 200 }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-full bg-accent/10 text-accent text-xs font-bold flex items-center justify-center">
+              {agent.name[0]}
+            </div>
+            <div>
+              <p className="text-sm font-semibold">{agent.name}</p>
+              <p className="text-[11px] text-text-tertiary capitalize">{roleLabel}</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-text-tertiary hover:text-text-secondary transition-colors cursor-pointer"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
+          {messages.length === 0 && (
+            <div className="text-center py-12">
+              <div className="w-12 h-12 rounded-full bg-accent/10 text-accent mx-auto mb-3 flex items-center justify-center text-lg font-bold">
+                {agent.name[0]}
+              </div>
+              <p className="text-sm text-text-secondary">
+                Chat with {agent.name}
+              </p>
+              <p className="text-xs text-text-tertiary mt-1 capitalize">
+                {roleLabel}
+              </p>
+            </div>
+          )}
+          {messages.map((m, i) => (
+            <div
+              key={i}
+              className={cn("flex", m.role === "user" ? "justify-end" : "justify-start")}
+            >
+              <div
+                className={cn(
+                  "rounded-xl px-3 py-2 max-w-[85%] text-sm leading-relaxed",
+                  m.role === "user"
+                    ? "bg-accent text-white"
+                    : "bg-bg-secondary text-text-primary border border-border"
+                )}
+              >
+                {m.content ? <Markdown content={m.content} /> : (
+                  <span className="inline-flex gap-1">
+                    <span className="w-1.5 h-1.5 rounded-full bg-text-tertiary animate-pulse" />
+                    <span className="w-1.5 h-1.5 rounded-full bg-text-tertiary animate-pulse [animation-delay:150ms]" />
+                    <span className="w-1.5 h-1.5 rounded-full bg-text-tertiary animate-pulse [animation-delay:300ms]" />
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+          <div ref={endRef} />
+        </div>
+
+        {/* Input */}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            send();
+          }}
+          className="px-4 py-3 border-t border-border flex gap-2"
+        >
+          <input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type a message..."
+            disabled={streaming}
+            className="flex-1 rounded-lg bg-bg-secondary border border-border px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-accent disabled:opacity-50"
+          />
+          <button
+            type="submit"
+            disabled={streaming || !input.trim()}
+            className="rounded-lg bg-accent px-3 py-2 text-white text-sm hover:bg-accent-hover disabled:opacity-50 cursor-pointer transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+            </svg>
+          </button>
+        </form>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

package/template/components/dashboard/AgentsListClient.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { AgentChat } from "./AgentChat";
+
+interface Agent {
+  id: string;
+  name: string;
+  role: string;
+  model: string;
+  status: string;
+  system_prompt: string;
+}
+
+export function AgentsListClient({ agents }: { agents: Agent[] }) {
+  const [chatAgent, setChatAgent] = useState<Agent | null>(null);
+
+  if (!agents || agents.length === 0) {
+    return (
+      <div className="rounded-lg border border-dashed border-border bg-bg-secondary/20 p-8 text-center">
+        <p className="text-text-secondary text-sm">No agents configured.</p>
+        <p className="text-text-tertiary text-xs mt-1">
+          Check your tellet.json and run the database migration.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="grid gap-4">
+        {agents.map((agent) => (
+          <div
+            key={agent.id}
+            className="rounded-xl border border-border bg-bg-secondary/50 p-5"
+          >
+            <div className="flex items-center gap-4">
+              <div className="w-10 h-10 rounded-full bg-accent/10 text-accent text-sm font-bold flex items-center justify-center">
+                {agent.name[0]}
+              </div>
+              <div className="flex-1">
+                <p className="font-semibold">{agent.name}</p>
+                <p className="text-sm text-text-secondary capitalize">
+                  {agent.role.replace("_", " ")} &middot; {agent.model}
+                </p>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2">
+                  <span
+                    className={`w-2 h-2 rounded-full ${
+                      agent.status === "active" ? "bg-green-400" : "bg-text-tertiary"
+                    }`}
+                  />
+                  <span className="text-xs text-text-secondary capitalize">
+                    {agent.status}
+                  </span>
+                </div>
+                <button
+                  onClick={() => setChatAgent(agent)}
+                  className="text-xs text-text-secondary border border-border rounded-lg px-3 py-1.5 hover:border-accent hover:text-accent transition-colors cursor-pointer"
+                >
+                  Chat now
+                </button>
+              </div>
+            </div>
+            <div className="mt-4 rounded-lg bg-bg-primary border border-border p-3">
+              <p className="text-xs text-text-tertiary uppercase tracking-wider mb-1">
+                System Prompt
+              </p>
+              <p className="text-sm text-text-secondary leading-relaxed line-clamp-3">
+                {agent.system_prompt}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {chatAgent && (
+        <AgentChat
+          agent={chatAgent}
+          onClose={() => setChatAgent(null)}
+        />
+      )}
+    </>
+  );
+}

package/template/components/dashboard/DashboardAgentGrid.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState } from "react";
+import { AgentChat } from "./AgentChat";
+
+interface Agent {
+  id: string;
+  name: string;
+  role: string;
+  status: string;
+}
+
+const roleColors: Record<string, string> = {
+  customer_support: "bg-green-500/10 text-green-400 border-green-500/20",
+  marketing: "bg-blue-500/10 text-blue-400 border-blue-500/20",
+  sales: "bg-amber-500/10 text-amber-400 border-amber-500/20",
+  operations: "bg-purple-500/10 text-purple-400 border-purple-500/20",
+  development: "bg-cyan-500/10 text-cyan-400 border-cyan-500/20",
+  analytics: "bg-rose-500/10 text-rose-400 border-rose-500/20",
+};
+
+export function DashboardAgentGrid({ agents }: { agents: Agent[] }) {
+  const [chatAgent, setChatAgent] = useState<Agent | null>(null);
+
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {agents.map((agent) => (
+          <div
+            key={agent.id}
+            className="rounded-xl border border-border bg-bg-secondary/50 p-5 transition-colors hover:border-border-hover"
+          >
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-lg font-semibold">{agent.name}</span>
+              <span
+                className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${
+                  roleColors[agent.role] || "bg-bg-tertiary text-text-secondary border-border"
+                }`}
+              >
+                {agent.role.replace("_", " ")}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span
+                  className={`w-2 h-2 rounded-full ${
+                    agent.status === "active" ? "bg-green-400" : "bg-text-tertiary"
+                  }`}
+                />
+                <span className="text-xs text-text-secondary capitalize">
+                  {agent.status}
+                </span>
+              </div>
+              <button
+                onClick={() => setChatAgent(agent)}
+                className="text-xs text-text-secondary border border-border rounded-lg px-3 py-1.5 hover:border-accent hover:text-accent transition-colors cursor-pointer"
+              >
+                Chat
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {chatAgent && (
+        <AgentChat
+          agent={chatAgent}
+          onClose={() => setChatAgent(null)}
+        />
+      )}
+    </>
+  );
+}