AI Function Call Display

"use client";

import React from "react";
import { Code2, Hash, Terminal } from "lucide-react";

export default function AIFunctionCall() {
    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-xl mx-auto overflow-hidden">
            <div className="flex items-center gap-2 px-4 py-3 bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800">
                <Code2 className="h-4 w-4 text-blue-500" />
                <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">Tool Invocations</span>
            </div>

            <div className="p-4 space-y-4 font-mono text-xs">
                <div className="space-y-2">
                    <div className="flex items-center gap-2 text-zinc-400">
                        <Terminal className="h-3 w-3" />
                        <span>CALLING: global_search</span>
                    </div>
                    <div className="p-3 rounded-lg bg-zinc-950 text-blue-400 border border-zinc-800">
                        <pre>
                            <code>{`{
  "query": "AAPL historical revenue Q3",
  "limit": 5,
  "depth": "thorough"
}`}</code>
                        </pre>
                    </div>
                </div>

                <div className="space-y-2">
                    <div className="flex items-center gap-2 text-emerald-500">
                        <Hash className="h-3 w-3" />
                        <span>RESPONSE: 200 OK</span>
                    </div>
                    <div className="p-3 rounded-lg bg-emerald-500/5 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">
                        <p>"Found 4 relevant records. Total revenue for Q3 2024 reported at $94.9B, up 6% YoY..."</p>
                    </div>
                </div>
            </div>
        </div>
    );
}