AI Request Log

"use client";

import React, { useState, useEffect } from "react";
import { CheckCircle2, AlertCircle, Clock } from "lucide-react";

interface Request {
    id: string;
    method: string;
    path: string;
    status: number;
    time: string;
    duration: string;
}

const mockRequests: Request[] = [
    { id: "1", method: "POST", path: "/v1/chat/completions", status: 200, time: "12:04:22", duration: "842ms" },
    { id: "2", method: "GET", path: "/v1/models", status: 200, time: "12:04:15", duration: "124ms" },
    { id: "3", method: "POST", path: "/v1/embeddings", status: 200, time: "12:03:58", duration: "245ms" },
    { id: "4", method: "POST", path: "/v1/chat/completions", status: 429, time: "12:03:42", duration: "12ms" },
    { id: "5", method: "POST", path: "/v1/images/generations", status: 200, time: "12:03:10", duration: "4.2s" },
];

export default function AIRequestLog() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 shadow-sm w-full max-w-2xl mx-auto overflow-hidden">
            <div className="px-4 py-3 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between bg-zinc-50 dark:bg-zinc-900">
                <h3 className="text-xs font-bold uppercase tracking-wider text-zinc-500">Real-time API Logs</h3>
                <span className="flex items-center gap-1.5 text-[10px] font-medium text-emerald-500">
                    <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
                    Live
                </span>
            </div>
            <div className="divide-y divide-zinc-200 dark:divide-zinc-800 font-mono text-[11px]">
                {mockRequests.map((req) => (
                    <div key={req.id} className="flex items-center gap-4 px-4 py-2.5 hover:bg-zinc-50/50 dark:hover:bg-zinc-900/50 transition-colors">
                        <span className="text-zinc-400 w-14 shrink-0">{req.time}</span>
                        <span className={`w-10 font-bold ${req.status === 200 ? "text-emerald-500" : "text-red-500"}`}>{req.status}</span>
                        <span className="text-blue-500 font-bold w-10 shrink-0">{req.method}</span>
                        <span className="text-zinc-900 dark:text-zinc-100 truncate flex-1">{req.path}</span>
                        <span className="text-zinc-400 w-16 text-right shrink-0">{req.duration}</span>
                    </div>
                ))}
            </div>
        </div>
    );
}