add initial complete webui, more ai commands for moderation, add api

webui/app/account/page.tsx

@@ -0,0 +1,725 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  User,
+  Bot,
+  Brain,
+  Settings,
+  CloudSun,
+  Smartphone,
+  Heart,
+  Cat,
+  Dices,
+  Thermometer,
+  BarChart3,
+  LogOut,
+  Edit3,
+  Save,
+  X,
+  Network,
+  Cpu,
+  Languages,
+  Bug,
+  Lightbulb,
+  ExternalLink,
+  Quote,
+  Info,
+  Shuffle,
+  Rainbow,
+  Database,
+  Hash,
+  Download,
+  Archive
+} from "lucide-react";
+import { RiTelegram2Line } from "react-icons/ri";
+import { motion } from "framer-motion";
+import { ModelPicker } from "@/components/account/model-picker";
+import { useAuth } from "@/contexts/auth-context";
+import { FaLastfm } from "react-icons/fa";
+import { TiInfinity } from "react-icons/ti";
+
+interface CommandCard {
+  id: string;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  title: string;
+  description: string;
+  commands: string[];
+  category: "ai" | "entertainment" | "utility" | "media" | "admin" | "animals";
+  gradient: string;
+  enabled: boolean;
+}
+
+const allCommands: CommandCard[] = [
+  {
+    id: "ai-ask-think",
+    icon: Brain,
+    title: "AI Chats",
+    description: "Chat with AI models and use deep thinking",
+    commands: ["/ask", "/think"],
+    category: "ai",
+    gradient: "from-purple-500 to-pink-500",
+    enabled: true
+  },
+  {
+    id: "ai-custom",
+    icon: Bot,
+    title: "Custom AI Model",
+    description: "Use your personally configured AI model",
+    commands: ["/ai"],
+    category: "ai",
+    gradient: "from-indigo-500 to-purple-500",
+    enabled: true
+  },
+  {
+    id: "ai-stats",
+    icon: BarChart3,
+    title: "AI Statistics",
+    description: "View your AI usage statistics",
+    commands: ["/aistats"],
+    category: "ai",
+    gradient: "from-purple-600 to-indigo-600",
+    enabled: true
+  },
+  {
+    id: "games-dice",
+    icon: Dices,
+    title: "Interactive Emojis",
+    description: "Roll dice, play slots, and other interactive emojis",
+    commands: ["/dice", "/slot", "/ball", "/dart", "/bowling"],
+    category: "entertainment",
+    gradient: "from-green-500 to-teal-500",
+    enabled: true
+  },
+  {
+    id: "fun-random",
+    icon: Shuffle,
+    title: "Fun Commands",
+    description: "Random numbers and fun responses",
+    commands: ["/random", "/furry", "/gay"],
+    category: "entertainment",
+    gradient: "from-pink-500 to-rose-500",
+    enabled: true
+  },
+  {
+    id: "infinite-dice",
+    icon: TiInfinity,
+    title: "Infinite Dice",
+    description: "Sends an infinite dice sticker",
+    commands: ["/idice"],
+    category: "entertainment",
+    gradient: "from-yellow-500 to-orange-500",
+    enabled: true
+  },
+  {
+    id: "animals-basic",
+    icon: Cat,
+    title: "Animal Pictures",
+    description: "Get random cute animal pictures",
+    commands: ["/cat", "/dog", "/duck", "/fox"],
+    category: "animals",
+    gradient: "from-orange-500 to-red-500",
+    enabled: true
+  },
+  {
+    id: "soggy-cat",
+    icon: Heart,
+    title: "Soggy Cat",
+    description: "Wet cats!",
+    commands: ["/soggy", "/soggycat"],
+    category: "animals",
+    gradient: "from-blue-500 to-purple-500",
+    enabled: true
+  },
+  {
+    id: "weather",
+    icon: CloudSun,
+    title: "Weather",
+    description: "Get current weather for any location",
+    commands: ["/weather", "/clima"],
+    category: "utility",
+    gradient: "from-blue-500 to-cyan-500",
+    enabled: true
+  },
+  {
+    id: "device-specs",
+    icon: Smartphone,
+    title: "Device Specifications",
+    description: "Look up phone specifications via GSMArena",
+    commands: ["/device", "/d"],
+    category: "utility",
+    gradient: "from-slate-500 to-gray-500",
+    enabled: true
+  },
+  {
+    id: "http-status",
+    icon: Network,
+    title: "HTTP Status Codes",
+    description: "Look up HTTP status codes and meanings",
+    commands: ["/http", "/httpcat"],
+    category: "utility",
+    gradient: "from-emerald-500 to-green-500",
+    enabled: true
+  },
+  {
+    id: "codename-lookup",
+    icon: Hash,
+    title: "Codename Lookup",
+    description: "Look up codenames and meanings",
+    commands: ["/codename", "/whatis"],
+    category: "utility",
+    gradient: "from-teal-500 to-cyan-500",
+    enabled: true
+  },
+  {
+    id: "info-commands",
+    icon: Info,
+    title: "Information",
+    description: "Get chat and user information",
+    commands: ["/chatinfo", "/userinfo"],
+    category: "utility",
+    gradient: "from-indigo-500 to-blue-500",
+    enabled: true
+  },
+  {
+    id: "quotes",
+    icon: Quote,
+    title: "Random Quotes",
+    description: "Get random quotes",
+    commands: ["/quote"],
+    category: "utility",
+    gradient: "from-amber-500 to-yellow-500",
+    enabled: true
+  },
+  {
+    id: "youtube-download",
+    icon: Download,
+    title: "Video Downloads",
+    description: "Download videos from YouTube and 1000+ platforms",
+    commands: ["/yt", "/ytdl", "/video", "/dl"],
+    category: "media",
+    gradient: "from-red-500 to-pink-500",
+    enabled: true
+  },
+  {
+    id: "lastfm",
+    icon: FaLastfm,
+    title: "Last.fm Integration",
+    description: "Connect your music listening history",
+    commands: ["/last", "/lfm", "/setuser"],
+    category: "media",
+    gradient: "from-violet-500 to-purple-500",
+    enabled: true
+  },
+  {
+    id: "mlp-content",
+    icon: Database,
+    title: "MLP Database",
+    description: "My Little Pony content and information",
+    commands: ["/mlp", "/mlpchar", "/mlpep", "/mlpcomic"],
+    category: "media",
+    gradient: "from-fuchsia-500 to-pink-500",
+    enabled: true
+  },
+  {
+    id: "modarchive",
+    icon: Archive,
+    title: "Mod Archive",
+    description: "Access classic tracker music files",
+    commands: ["/modarchive", "/tma"],
+    category: "media",
+    gradient: "from-cyan-500 to-blue-500",
+    enabled: true
+  },
+  {
+    id: "random-pony",
+    icon: Rainbow,
+    title: "Random Pony Art",
+    description: "Get random My Little Pony artwork",
+    commands: ["/rpony", "/randompony", "/mlpart"],
+    category: "media",
+    gradient: "from-pink-500 to-purple-500",
+    enabled: true
+  },
+];
+
+const categoryColors = {
+  ai: "bg-purple-500/10 text-purple-600 border-purple-200 dark:border-purple-800",
+  entertainment: "bg-green-500/10 text-green-600 border-green-200 dark:border-green-800",
+  utility: "bg-blue-500/10 text-blue-600 border-blue-200 dark:border-blue-800",
+  media: "bg-red-500/10 text-red-600 border-red-200 dark:border-red-800",
+  admin: "bg-orange-500/10 text-orange-600 border-orange-200 dark:border-orange-800",
+  animals: "bg-emerald-500/10 text-emerald-600 border-emerald-200 dark:border-emerald-800"
+};
+
+const languageOptions = [
+  { code: 'en', name: 'English', flag: '🇺🇸' },
+  { code: 'pt', name: 'Português', flag: '🇧🇷' },
+];
+
+export default function AccountPage() {
+  const [editingTemp, setEditingTemp] = useState(false);
+  const [tempValue, setTempValue] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [reportTab, setReportTab] = useState("bug");
+  const [commands, setCommands] = useState<CommandCard[]>(allCommands);
+
+  const { user, loading, logout, refreshUser } = useAuth();
+
+  useEffect(() => {
+    if (user) {
+      setTempValue(user.aiTemperature.toString());
+      setCommands(allCommands.map(cmd => ({
+        ...cmd,
+        enabled: !user.disabledCommands.includes(cmd.id)
+      })));
+    }
+  }, [user]);
+
+  const updateSetting = async (setting: string, value: boolean | number | string) => {
+    try {
+      const response = await fetch('/api/user/settings', {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ [setting]: value }),
+        credentials: 'include'
+      });
+
+      if (response.ok) {
+        await refreshUser();
+      }
+    } catch (error) {
+      console.error('Error updating setting:', error);
+    }
+  };
+
+  const saveTemperature = () => {
+    const temp = parseFloat(tempValue);
+    if (temp >= 0.1 && temp <= 2.0) {
+      updateSetting('aiTemperature', temp);
+      setEditingTemp(false);
+    }
+  };
+
+  const toggleCommand = async (commandId: string) => {
+    if (!user) return;
+
+    const commandToToggle = commands.find(cmd => cmd.id === commandId);
+    if (!commandToToggle) return;
+
+    const newEnabledState = !commandToToggle.enabled;
+
+    setCommands(prev => prev.map(cmd =>
+      cmd.id === commandId ? { ...cmd, enabled: newEnabledState } : cmd
+    ));
+
+    try {
+      let newDisabledCommands: string[];
+
+      if (newEnabledState) {
+        newDisabledCommands = user.disabledCommands.filter(id => id !== commandId);
+      } else {
+        newDisabledCommands = [...user.disabledCommands, commandId];
+      }
+
+      const response = await fetch('/api/user/settings', {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ disabledCommands: newDisabledCommands }),
+        credentials: 'include'
+      });
+
+      if (response.ok) {
+        await refreshUser();
+      } else {
+        setCommands(prev => prev.map(cmd =>
+          cmd.id === commandId ? { ...cmd, enabled: !newEnabledState } : cmd
+        ));
+        console.error('Failed to update command state');
+      }
+    } catch (error) {
+      setCommands(prev => prev.map(cmd =>
+        cmd.id === commandId ? { ...cmd, enabled: !newEnabledState } : cmd
+      ));
+      console.error('Error updating command state:', error);
+    }
+  };
+
+  const filteredCommands = selectedCategory
+    ? commands.filter(cmd => cmd.category === selectedCategory)
+    : commands;
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold mb-4">Authentication Required</h1>
+          <Button onClick={() => window.location.href = '/login'}>
+            Go to Login
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full min-h-screen bg-background">
+      <div className="container mx-auto px-6 py-8">
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center gap-4">
+          <div className="w-16 h-16 rounded-full bg-primary/10 items-center justify-center hidden md:flex">
+            <User className="w-8 h-8 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold">Welcome back, {user.firstName}!</h1>
+            <p className="text-muted-foreground">@{user.username}</p>
+          </div>
+        </div>
+        <Button variant="outline" onClick={logout} className="gap-2">
+          <LogOut className="w-4 h-4" />
+          Logout
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <motion.div
+          className="p-6 rounded-lg border bg-gradient-to-br from-purple-500/10 to-pink-500/10"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: 0.1 }}
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <BarChart3 className="w-8 h-8 text-purple-600" />
+            <h3 className="text-xl font-semibold">AI Usage</h3>
+          </div>
+          <div className="space-y-2">
+            <p className="text-2xl font-bold">{user.aiRequests}</p>
+            <p className="text-sm text-muted-foreground">Total AI Requests</p>
+            <p className="text-lg">{user.aiCharacters.toLocaleString()}</p>
+            <p className="text-sm text-muted-foreground">Characters Generated</p>
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="p-6 rounded-lg border bg-gradient-to-br from-blue-500/10 to-cyan-500/10"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: 0.2 }}
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <Settings className="w-8 h-8 text-blue-600" />
+            <h3 className="text-xl font-semibold">AI Settings</h3>
+          </div>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm">AI Enabled</span>
+              <Button
+                size="sm"
+                variant={user.aiEnabled ? "default" : "outline"}
+                onClick={() => updateSetting('aiEnabled', !user.aiEnabled)}
+                className="h-8 px-3"
+              >
+                {user.aiEnabled ? "ON" : "OFF"}
+              </Button>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm">Show Thinking</span>
+              <Button
+                size="sm"
+                variant={user.showThinking ? "default" : "outline"}
+                onClick={() => updateSetting('showThinking', !user.showThinking)}
+                className="h-8 px-3"
+              >
+                {user.showThinking ? "ON" : "OFF"}
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="p-6 rounded-lg border bg-gradient-to-br from-green-500/10 to-emerald-500/10"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: 0.3 }}
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <Thermometer className="w-8 h-8 text-green-600" />
+            <h3 className="text-xl font-semibold">Temperature</h3>
+          </div>
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              {editingTemp ? (
+                <>
+                  <Input
+                    type="number"
+                    min="0.1"
+                    max="2.0"
+                    step="0.1"
+                    value={tempValue}
+                    onChange={(e) => setTempValue(e.target.value)}
+                    className="h-8 w-20"
+                  />
+                  <Button size="sm" onClick={saveTemperature} className="h-8 w-8 p-0">
+                    <Save className="w-4 h-4" />
+                  </Button>
+                  <Button size="sm" variant="outline" onClick={() => setEditingTemp(false)} className="h-8 w-8 p-0">
+                    <X className="w-4 h-4" />
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <span className="text-2xl font-bold">{user.aiTemperature}</span>
+                  <Button size="sm" variant="outline" onClick={() => setEditingTemp(true)} className="h-8 w-8 p-0">
+                    <Edit3 className="w-4 h-4" />
+                  </Button>
+                </>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">Controls randomness in AI responses. Lower values (0.1-0.5) = more focused, higher values (0.7-2.0) = more creative.</p>
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="p-6 rounded-lg border bg-gradient-to-br from-teal-500/10 to-cyan-500/10"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: 0.4 }}
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <Languages className="w-8 h-8 text-teal-600" />
+            <h3 className="text-xl font-semibold">Language Options</h3>
+          </div>
+          <div className="space-y-3">
+            <div className="grid grid-cols-1 gap-2">
+              {languageOptions.map((lang) => (
+                <Button
+                  key={lang.code}
+                  variant={user.languageCode === lang.code ? "default" : "outline"}
+                  onClick={() => updateSetting('languageCode', lang.code)}
+                  className="justify-start gap-3 h-10"
+                >
+                  <span className="text-lg">{lang.flag}</span>
+                  <span>{lang.name}</span>
+                </Button>
+              ))}
+            </div>
+            <p className="text-xs text-muted-foreground">Choose your preferred language for bot responses and interface text.</p>
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="p-6 rounded-lg border bg-gradient-to-br from-indigo-500/10 to-violet-500/10 col-span-1 md:col-span-2"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: 0.5 }}
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <Cpu className="w-8 h-8 text-indigo-600" />
+            <h3 className="text-xl font-semibold">My Model</h3>
+          </div>
+          <div className="space-y-3">
+            <ModelPicker
+              value={user.customAiModel}
+              onValueChange={(newModel) => updateSetting('customAiModel', newModel)}
+              className="w-full"
+            />
+            <p className="text-xs text-muted-foreground">Your selected AI model for custom /ai commands. Different models have varying capabilities, speeds, and response styles.</p>
+          </div>
+        </motion.div>
+
+        <motion.div
+          className="p-6 rounded-lg border bg-gradient-to-br from-orange-500/10 to-red-500/10 col-span-1 md:col-span-2"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: 0.6 }}
+        >
+          <div className="flex items-center gap-3 mb-4">
+            <Bug className="w-8 h-8 text-orange-600" />
+            <h3 className="text-xl font-semibold">Report An Issue</h3>
+          </div>
+          <div className="space-y-4">
+            <Tabs value={reportTab} onValueChange={setReportTab}>
+              <TabsList className="grid w-full grid-cols-2 gap-2">
+                <TabsTrigger value="bug" className="gap-2">
+                  <Bug className="w-4 h-4" />
+                  Bug Report
+                </TabsTrigger>
+                <TabsTrigger value="feature" className="gap-2">
+                  <Lightbulb className="w-4 h-4" />
+                  Feature Request
+                </TabsTrigger>
+              </TabsList>
+              <div className="mt-4">
+                <TabsContent value="bug" className="space-y-12">
+                  <p className="text-sm text-muted-foreground">Found a bug or issue? Report it to help us improve Kowalski.</p>
+                  <Button asChild className="w-full gap-2">
+                    <a
+                      href="https://libre-cloud.atlassian.net/jira/software/c/form/4a535b59-dc7e-4b55-b905-a79ff831928e?atlOrigin=eyJpIjoiNzQwYTcxZDdmMjJkNDljNzgzNTY2MjliYjliMjMzMDkiLCJwIjoiaiJ9"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Bug className="w-4 h-4" />
+                      Report Bug
+                      <ExternalLink className="w-4 h-4" />
+                    </a>
+                  </Button>
+                </TabsContent>
+                <TabsContent value="feature" className="space-y-12">
+                  <p className="text-sm text-muted-foreground">Have an idea for a new feature? Let us know what you&apos;d like to see!</p>
+                  <Button asChild className="w-full gap-2">
+                    <a
+                      href="https://libre-cloud.atlassian.net/jira/software/c/form/5ce1e6e9-9618-4b46-94ee-122e7bde2ba1?atlOrigin=eyJpIjoiZjMwZTc3MDVlY2MwNDBjODliYWNhMTgzN2ZjYzI5MDAiLCJwIjoiaiJ9"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Lightbulb className="w-4 h-4" />
+                      Request Feature
+                      <ExternalLink className="w-4 h-4" />
+                    </a>
+                  </Button>
+                </TabsContent>
+              </div>
+            </Tabs>
+          </div>
+        </motion.div>
+
+      </div>
+
+      <motion.div
+        className="mb-6"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.7 }}
+      >
+        <h2 className="text-2xl font-bold mb-4">Command Management</h2>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            variant={selectedCategory === null ? "default" : "outline"}
+            onClick={() => setSelectedCategory(null)}
+            className="mb-2"
+          >
+            All Commands
+          </Button>
+          {Object.entries(categoryColors).map(([category, colorClass]) => (
+            <Button
+              key={category}
+              variant={selectedCategory === category ? "default" : "outline"}
+              onClick={() => setSelectedCategory(category)}
+              className={`mb-2 capitalize ${selectedCategory === category ? '' : colorClass}`}
+            >
+              {category === "ai" ? "AI" : category}
+            </Button>
+          ))}
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3, delay: 0.8 }}
+      >
+        {filteredCommands.map((command) => (
+          <div
+            key={command.id}
+            className={`p-4 rounded-lg border transition-all duration-200 ${
+              command.enabled
+                ? 'bg-card hover:shadow-md shadow-sm'
+                : 'bg-muted/30 border-muted-foreground/20'
+            }`}
+          >
+            <div className="flex items-start justify-between mb-3">
+              <div className={`w-10 h-10 rounded-lg bg-gradient-to-br ${command.gradient} flex items-center justify-center ${
+                command.enabled ? '' : 'grayscale opacity-50'
+              }`}>
+                <command.icon className="w-5 h-5 text-white" />
+              </div>
+              <div className="flex items-center space-x-2">
+                <div
+                  className={`w-11 h-6 rounded-full cursor-pointer transition-colors duration-200 ${
+                    command.enabled
+                      ? 'bg-green-500 dark:bg-green-600'
+                      : 'bg-gray-300 dark:bg-gray-600'
+                  }`}
+                  onClick={() => toggleCommand(command.id)}
+                >
+                  <div className={`w-5 h-5 rounded-full shadow-sm transition-transform duration-200 ${
+                    command.enabled
+                      ? 'translate-x-5 bg-white dark:bg-gray-100'
+                      : 'translate-x-0.5 bg-white dark:bg-gray-200'
+                  } mt-0.5`} />
+                </div>
+              </div>
+            </div>
+
+            <h3 className={`text-base font-semibold mb-2 ${command.enabled ? '' : 'text-muted-foreground'}`}>
+              {command.title}
+            </h3>
+            <p className={`text-sm mb-3 ${command.enabled ? 'text-muted-foreground' : 'text-muted-foreground/60'}`}>
+              {command.description}
+            </p>
+
+            <div className="flex items-center justify-between">
+              <div className="flex flex-wrap gap-1">
+                {command.commands.slice(0, 2).map((cmd, idx) => (
+                  <code key={idx} className={`px-1.5 py-0.5 rounded text-xs ${
+                    command.enabled
+                      ? 'bg-muted text-foreground'
+                      : 'bg-muted-foreground/10 text-muted-foreground/60'
+                  }`}>
+                    {cmd}
+                  </code>
+                ))}
+                {command.commands.length > 2 && (
+                  <span className={`text-xs ${command.enabled ? 'text-muted-foreground' : 'text-muted-foreground/60'}`}>
+                    +{command.commands.length - 2}
+                  </span>
+                )}
+              </div>
+              <div className={`px-2 py-1 rounded-full text-xs border ${
+                command.enabled
+                  ? categoryColors[command.category]
+                  : 'bg-muted-foreground/10 text-muted-foreground/60 border-muted-foreground/20'
+              }`}>
+                {command.category === "ai" ? "AI" : command.category}
+              </div>
+            </div>
+          </div>
+        ))}
+      </motion.div>
+
+      <motion.div
+        className="mt-12 text-center"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 1.0 }}
+      >
+        <div className="inline-flex items-center gap-16 p-6 px-8 rounded-lg bg-muted/50 border">
+          <span className="font-medium">Ready to start using Kowalski?</span>
+          <Button asChild>
+            <a href="https://t.me/KowalskiNodeBot" target="_blank" rel="noopener noreferrer">
+              <RiTelegram2Line />
+              Open on Telegram
+            </a>
+          </Button>
+        </div>
+      </motion.div>
+      </div>
+    </div>
+  );
+}