LiquidAI/LFM2-MCP

1import type React from "react";2import { extractToolCallContent } from "../utils";3 4const ToolCallIndicator: React.FC<{5  content: string;6  isRunning: boolean;7  hasError: boolean;8}> = ({ content, isRunning, hasError }) => (9  <div10    className={`transition-all duration-500 ease-in-out rounded-lg p-4 ${11      isRunning12        ? "bg-gradient-to-r from-yellow-900/30 to-orange-900/30 border border-yellow-600/50"13        : hasError14          ? "bg-gradient-to-r from-red-900/30 to-rose-900/30 border border-red-600/50"15          : "bg-gradient-to-r from-green-900/30 to-emerald-900/30 border border-green-600/50"16    }`}17  >18    <div className="flex items-start space-x-3">19      <div className="flex-shrink-0">20        <div className="relative w-6 h-6">21          {/* Spinner for running */}22          <div23            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${24              isRunning ? "opacity-100" : "opacity-0 pointer-events-none"25            }`}26          >27            <div className="w-6 h-6 bg-green-400/0 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin"></div>28          </div>29 30          {/* Cross for error */}31          <div32            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${33              hasError ? "opacity-100" : "opacity-0 pointer-events-none"34            }`}35          >36            <div className="w-6 h-6 bg-red-400/100 rounded-full flex items-center justify-center transition-colors duration-500 ease-in-out">37              <span className="text-xs text-gray-900 font-bold">✗</span>38            </div>39          </div>40 41          {/* Tick for success */}42          <div43            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${44              !isRunning && !hasError45                ? "opacity-100"46                : "opacity-0 pointer-events-none"47            }`}48          >49            <div className="w-6 h-6 bg-green-400/100 rounded-full flex items-center justify-center transition-colors duration-500 ease-in-out">50              <span className="text-xs text-gray-900 font-bold">✓</span>51            </div>52          </div>53        </div>54      </div>55      <div className="flex-grow min-w-0">56        <div className="flex items-center space-x-2 mb-2">57          <span58            className={`font-semibold text-sm transition-colors duration-500 ease-in-out ${59              isRunning60                ? "text-yellow-400"61                : hasError62                  ? "text-red-400"63                  : "text-green-400"64            }`}65          >66            🔧 Tool Call67          </span>68          {isRunning && (69            <span className="text-yellow-300 text-xs animate-pulse">70              Running...71            </span>72          )}73        </div>74        <div className="bg-gray-800/50 rounded p-2 mb-2">75          <code className="text-xs text-gray-300 font-mono break-all">76            {extractToolCallContent(content) ?? "..."}77          </code>78        </div>79        <p80          className={`text-xs transition-colors duration-500 ease-in-out ${81            isRunning82              ? "text-yellow-200"83              : hasError84                ? "text-red-200"85                : "text-green-200"86          }`}87        >88          {isRunning89            ? "Executing tool call..."90            : hasError91              ? "Tool call failed"92              : "Tool call completed"}93        </p>94      </div>95    </div>96  </div>97);98export default ToolCallIndicator;99