@theihtisham/ai-agent-starter-kit 1.0.0

package/src/components/billing/pricing-table.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils/helpers';
+import { PLANS, type Plan } from '@/lib/stripe/plans';
+
+interface PricingTableProps {
+  currentPlanId?: string;
+  onSelectPlan: (plan: Plan) => void;
+}
+
+export function PricingTable({ currentPlanId, onSelectPlan }: PricingTableProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      {PLANS.map((plan) => {
+        const isCurrent = plan.id === currentPlanId;
+        const isPopular = plan.id === 'pro';
+
+        return (
+          <Card
+            key={plan.id}
+            className={cn(
+              'relative flex flex-col',
+              isPopular && 'border-primary shadow-lg scale-105',
+              isCurrent && 'ring-2 ring-primary',
+            )}
+          >
+            {isPopular && (
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                <Badge>Most Popular</Badge>
+              </div>
+            )}
+            <CardHeader className="text-center">
+              <CardTitle className="text-xl">{plan.name}</CardTitle>
+              <CardDescription>
+                <span className="text-3xl font-bold text-foreground">${plan.price}</span>
+                <span className="text-muted-foreground">/mo</span>
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex-1">
+              <ul className="space-y-2 text-sm">
+                <li className="flex items-center gap-2">
+                  <span className="text-green-500">&#10003;</span>
+                  Up to {plan.features.maxAgents} agents
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-green-500">&#10003;</span>
+                  {plan.features.maxMessages.toLocaleString()} messages/mo
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-green-500">&#10003;</span>
+                  {(plan.features.maxTokens / 1000000).toFixed(0)}M tokens
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className={plan.features.tools ? 'text-green-500' : 'text-muted-foreground'}>
+                    {plan.features.tools ? '&#10003;' : '&#10007;'}
+                  </span>
+                  Tool calling
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className={plan.features.apiAccess ? 'text-green-500' : 'text-muted-foreground'}>
+                    {plan.features.apiAccess ? '&#10003;' : '&#10007;'}
+                  </span>
+                  API access
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className={plan.features.customTools ? 'text-green-500' : 'text-muted-foreground'}>
+                    {plan.features.customTools ? '&#10003;' : '&#10007;'}
+                  </span>
+                  Custom tools
+                </li>
+                <li className="flex items-center gap-2">
+                  <span className="text-green-500">&#10003;</span>
+                  {plan.features.support} support
+                </li>
+              </ul>
+            </CardContent>
+            <CardFooter>
+              <Button
+                className="w-full"
+                variant={isCurrent ? 'outline' : isPopular ? 'default' : 'secondary'}
+                disabled={isCurrent}
+                onClick={() => onSelectPlan(plan)}
+              >
+                {isCurrent ? 'Current Plan' : plan.price === 0 ? 'Get Started Free' : 'Upgrade Now'}
+              </Button>
+            </CardFooter>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/billing/usage-meter.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils/helpers';
+
+interface UsageMeterProps {
+  label: string;
+  used: number;
+  limit: number;
+  unit?: string;
+  className?: string;
+}
+
+export function UsageMeter({ label, used, limit, unit = '', className }: UsageMeterProps) {
+  const percentage = limit > 0 ? Math.min((used / limit) * 100, 100) : 0;
+  const isNearLimit = percentage > 80;
+  const isAtLimit = percentage >= 100;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex items-center justify-between text-sm">
+        <span className="font-medium">{label}</span>
+        <span className={cn(
+          'text-muted-foreground',
+          isAtLimit && 'text-destructive font-medium',
+          isNearLimit && !isAtLimit && 'text-yellow-600',
+        )}>
+          {used.toLocaleString()}{unit} / {limit.toLocaleString()}{unit}
+        </span>
+      </div>
+      <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
+        <div
+          className={cn(
+            'h-full rounded-full transition-all duration-500',
+            isAtLimit ? 'bg-destructive' : isNearLimit ? 'bg-yellow-500' : 'bg-primary',
+          )}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useRef, useEffect, type FormEvent } from 'react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils/helpers';
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  onStop?: () => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  placeholder?: string;
+}
+
+export function ChatInput({ onSend, onStop, disabled, isLoading, placeholder }: ChatInputProps) {
+  const [message, setMessage] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px';
+    }
+  }, [message]);
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const trimmed = message.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setMessage('');
+    if (textareaRef.current) textareaRef.current.style.height = 'auto';
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex items-end gap-2 p-4 border-t bg-background">
+      <textarea
+        ref={textareaRef}
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder ?? 'Type your message...'}
+        disabled={disabled}
+        rows={1}
+        className={cn(
+          'flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'max-h-[200px]',
+        )}
+      />
+      {isLoading ? (
+        <Button type="button" variant="destructive" size="sm" onClick={onStop}>
+          Stop
+        </Button>
+      ) : (
+        <Button type="submit" size="sm" disabled={disabled || !message.trim()}>
+          Send
+        </Button>
+      )}
+    </form>
+  );
+}

package/src/components/chat/chat-interface.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { ChatMessage } from './chat-message';
+import { ChatInput } from './chat-input';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'system' | 'tool';
+  content: string;
+}
+
+interface ChatInterfaceProps {
+  agentId: string;
+  chatId?: string;
+  initialMessages?: Message[];
+}
+
+export function ChatInterface({ agentId, chatId, initialMessages = [] }: ChatInterfaceProps) {
+  const [messages, setMessages] = useState<Message[]>(initialMessages);
+  const [isLoading, setIsLoading] = useState(false);
+  const [streamingContent, setStreamingContent] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, streamingContent, scrollToBottom]);
+
+  const handleSend = async (content: string) => {
+    const userMessage: Message = {
+      id: crypto.randomUUID(),
+      role: 'user',
+      content,
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setIsLoading(true);
+    setStreamingContent('');
+
+    const abortController = new AbortController();
+    abortRef.current = abortController;
+
+    try {
+      const response = await fetch(`/api/agents/${agentId}/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: content, chatId }),
+        signal: abortController.signal,
+      });
+
+      if (!response.ok) throw new Error('Failed to send message');
+      if (!response.body) throw new Error('No response body');
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let assistantContent = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.split('\n');
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const data = line.slice(6).trim();
+          if (data === '[DONE]') continue;
+
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.type === 'text') {
+              assistantContent += parsed.content;
+              setStreamingContent(assistantContent);
+            }
+          } catch {
+            // Skip malformed JSON
+          }
+        }
+      }
+
+      const assistantMessage: Message = {
+        id: crypto.randomUUID(),
+        role: 'assistant',
+        content: assistantContent,
+      };
+
+      setMessages((prev) => [...prev, assistantMessage]);
+      setStreamingContent('');
+    } catch (err) {
+      if ((err as Error).name !== 'AbortError') {
+        const errorMessage: Message = {
+          id: crypto.randomUUID(),
+          role: 'assistant',
+          content: 'Sorry, an error occurred. Please try again.',
+        };
+        setMessages((prev) => [...prev, errorMessage]);
+      }
+    } finally {
+      setIsLoading(false);
+      abortRef.current = null;
+    }
+  };
+
+  const handleStop = () => {
+    abortRef.current?.abort();
+    setIsLoading(false);
+    if (streamingContent) {
+      setMessages((prev) => [
+        ...prev,
+        { id: crypto.randomUUID(), role: 'assistant', content: streamingContent },
+      ]);
+      setStreamingContent('');
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto">
+        {messages.length === 0 && !isLoading && (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            <p>Start a conversation with this agent</p>
+          </div>
+        )}
+        {messages.map((msg) => (
+          <ChatMessage key={msg.id} role={msg.role} content={msg.content} />
+        ))}
+        {streamingContent && (
+          <ChatMessage role="assistant" content={streamingContent} isStreaming />
+        )}
+        {isLoading && !streamingContent && (
+          <div className="px-4 py-3">
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+      <ChatInput
+        onSend={handleSend}
+        onStop={handleStop}
+        isLoading={isLoading}
+        disabled={isLoading}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { cn } from '@/lib/utils/helpers';
+import { Avatar } from '@/components/ui/avatar';
+import { MarkdownRenderer } from './markdown-renderer';
+
+interface ChatMessageProps {
+  role: 'user' | 'assistant' | 'system' | 'tool';
+  content: string;
+  isStreaming?: boolean;
+  metadata?: Record<string, unknown>;
+}
+
+export function ChatMessage({ role, content, isStreaming }: ChatMessageProps) {
+  const isUser = role === 'user';
+  const isTool = role === 'tool';
+
+  return (
+    <div className={cn('flex gap-3 px-4 py-3', isUser ? 'justify-end' : 'justify-start')}>
+      {!isUser && (
+        <Avatar
+          className="h-8 w-8 shrink-0"
+          fallback={isTool ? '🔧' : 'AI'}
+        />
+      )}
+      <div
+        className={cn(
+          'max-w-[80%] rounded-lg px-4 py-2.5 text-sm',
+          isUser
+            ? 'bg-primary text-primary-foreground'
+            : isTool
+              ? 'bg-muted/50 border'
+              : 'bg-muted',
+        )}
+      >
+        {isUser ? (
+          <p className="whitespace-pre-wrap">{content}</p>
+        ) : (
+          <MarkdownRenderer content={content} />
+        )}
+        {isStreaming && (
+          <span className="inline-block w-2 h-4 ml-1 bg-current animate-pulse" />
+        )}
+      </div>
+      {isUser && (
+        <Avatar className="h-8 w-8 shrink-0" fallback="You" />
+      )}
+    </div>
+  );
+}

package/src/components/chat/chat-sidebar.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import Link from 'next/link';
+import { cn } from '@/lib/utils/helpers';
+
+interface ChatSidebarProps {
+  chats: { id: string; title: string; updatedAt: string; _count: { messages: number } }[];
+  activeChatId?: string;
+  agentId: string;
+  onNewChat?: () => void;
+}
+
+export function ChatSidebar({ chats, activeChatId, agentId, onNewChat }: ChatSidebarProps) {
+  return (
+    <div className="flex flex-col h-full w-64 border-r bg-background">
+      <div className="p-3 border-b">
+        <button
+          onClick={onNewChat}
+          className="w-full rounded-md border border-dashed border-input p-2 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+        >
+          + New Chat
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {chats.length === 0 ? (
+          <div className="p-4 text-sm text-muted-foreground text-center">
+            No conversations yet
+          </div>
+        ) : (
+          <div className="p-2 space-y-1">
+            {chats.map((chat) => (
+              <Link
+                key={chat.id}
+                href={`/agents/${agentId}?chat=${chat.id}`}
+                className={cn(
+                  'flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent',
+                  activeChatId === chat.id && 'bg-accent text-accent-foreground',
+                )}
+              >
+                <span className="truncate flex-1">{chat.title}</span>
+                <span className="text-xs text-muted-foreground">{chat._count.messages}</span>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/code-block.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+interface CodeBlockProps {
+  code: string;
+  language: string;
+}
+
+export function CodeBlock({ code, language }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="my-2 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800">
+        <span className="text-xs text-zinc-400 font-mono">{language}</span>
+        <button
+          onClick={handleCopy}
+          className="text-xs text-zinc-400 hover:text-zinc-200 transition-colors"
+        >
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+      <pre className="p-4 overflow-x-auto">
+        <code className={cn('text-sm text-zinc-100 font-mono', `language-${language}`)}>
+          {code}
+        </code>
+      </pre>
+    </div>
+  );
+}

package/src/components/chat/markdown-renderer.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { CodeBlock } from './code-block';
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  const components = useMemo(() => ({
+    code({ className, children, ...props }: React.ComponentPropsWithoutRef<'code'> & { className?: string }) {
+      const match = /language-(\w+)/.exec(className ?? '');
+      const isInline = !match;
+
+      if (isInline) {
+        return (
+          <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono" {...props}>
+            {children}
+          </code>
+        );
+      }
+
+      return (
+        <CodeBlock language={match[1] ?? 'text'} code={String(children).replace(/\n$/, '')} />
+      );
+    },
+    pre({ children }: React.ComponentPropsWithoutRef<'pre'>) {
+      return <>{children}</>;
+    },
+    a({ href, children }: React.ComponentPropsWithoutRef<'a'>) {
+      return (
+        <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary underline hover:text-primary/80">
+          {children}
+        </a>
+      );
+    },
+    table({ children }: React.ComponentPropsWithoutRef<'table'>) {
+      return (
+        <div className="my-2 overflow-auto rounded border">
+          <table className="w-full text-sm">{children}</table>
+        </div>
+      );
+    },
+  }), []);
+
+  return (
+    <div className="prose prose-sm dark:prose-invert max-w-none break-words">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/components/chat/streaming-text.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+
+interface StreamingTextProps {
+  text: string;
+  speed?: number;
+  className?: string;
+}
+
+export function StreamingText({ text, speed = 10, className }: StreamingTextProps) {
+  const [displayedText, setDisplayedText] = useState('');
+  const indexRef = useRef(0);
+
+  useEffect(() => {
+    if (indexRef.current >= text.length) return;
+
+    const interval = setInterval(() => {
+      if (indexRef.current < text.length) {
+        setDisplayedText(text.slice(0, indexRef.current + 1));
+        indexRef.current += 1;
+      } else {
+        clearInterval(interval);
+      }
+    }, speed);
+
+    return () => clearInterval(interval);
+  }, [text, speed]);
+
+  // Reset when text changes completely
+  useEffect(() => {
+    if (!text.startsWith(displayedText)) {
+      setDisplayedText(text);
+      indexRef.current = text.length;
+    }
+  }, [text, displayedText]);
+
+  return (
+    <span className={className}>
+      {displayedText}
+      {indexRef.current < text.length && (
+        <span className="inline-block w-1.5 h-4 ml-0.5 bg-current animate-pulse" />
+      )}
+    </span>
+  );
+}

package/src/components/dashboard/agent-card.tsx

@@ -0,0 +1,52 @@
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+interface AgentCardProps {
+  id: string;
+  name: string;
+  description?: string;
+  model: string;
+  isPublic: boolean;
+  messageCount: number;
+  lastUsed?: string | null;
+}
+
+export function AgentCard({ id, name, description, model, isPublic, messageCount, lastUsed }: AgentCardProps) {
+  return (
+    <Card className="group hover:shadow-md transition-shadow">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle className="text-lg">
+              <Link href={`/agents/${id}`} className="hover:text-primary transition-colors">
+                {name}
+              </Link>
+            </CardTitle>
+            {description && (
+              <CardDescription className="mt-1 line-clamp-2">{description}</CardDescription>
+            )}
+          </div>
+          {isPublic && <Badge variant="secondary">Public</Badge>}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 text-sm text-muted-foreground">
+            <span className="font-mono text-xs bg-muted px-2 py-0.5 rounded">{model}</span>
+            <span>{messageCount} messages</span>
+          </div>
+          <Link href={`/agents/${id}`}>
+            <Button variant="outline" size="sm">Chat</Button>
+          </Link>
+        </div>
+        {lastUsed && (
+          <p className="text-xs text-muted-foreground mt-2">
+            Last used {lastUsed}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}