| |
| |
| |
| |
|
|
| import React, { useState, useEffect } from 'react' |
| import { motion, AnimatePresence } from 'framer-motion' |
| import { |
| Wrench, Search, Calculator, Code2, |
| Play, Loader2, ChevronDown, ChevronUp, CheckCircle, XCircle, |
| } from 'lucide-react' |
| import clsx from 'clsx' |
| import toast from 'react-hot-toast' |
| import { toolsAPI } from '../../services/api' |
| import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' |
| import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism' |
|
|
| const TOOLS = [ |
| { |
| id: 'web_search', |
| label: 'Web Search', |
| icon: Search, |
| placeholder: 'Enter search query…', |
| example: 'latest AI research 2025', |
| color: 'text-blue-400', |
| }, |
| { |
| id: 'calculator', |
| label: 'Calculator', |
| icon: Calculator, |
| placeholder: 'Math expression…', |
| example: 'sqrt(144) + 2**10', |
| color: 'text-yellow-400', |
| }, |
| { |
| id: 'code_executor', |
| label: 'Code Runner', |
| icon: Code2, |
| placeholder: 'Python code…', |
| example: 'print([x**2 for x in range(10)])', |
| color: 'text-green-400', |
| multiline: true, |
| }, |
| ] |
|
|
| export default function ToolsPanel() { |
| const [expanded, setExpanded] = useState(true) |
| const [activeTool, setActiveTool] = useState('calculator') |
| const [argument, setArgument] = useState('') |
| const [result, setResult] = useState(null) |
| const [loading, setLoading] = useState(false) |
|
|
| const tool = TOOLS.find((t) => t.id === activeTool) |
|
|
| const run = async () => { |
| if (!argument.trim()) return |
| setLoading(true) |
| setResult(null) |
| try { |
| const data = await toolsAPI.executeTool(activeTool, argument.trim()) |
| setResult(data) |
| if (!data.success) toast.error('Tool returned an error') |
| } catch (err) { |
| toast.error(err.message) |
| } finally { |
| setLoading(false) |
| } |
| } |
|
|
| const loadExample = () => { |
| setArgument(tool.example) |
| } |
|
|
| return ( |
| <div className="bg-jarvis-surface border-t border-jarvis-border"> |
| {/* Header */} |
| <div |
| className="flex items-center justify-between px-4 py-2.5 cursor-pointer |
| hover:bg-jarvis-panel/30 transition-colors" |
| onClick={() => setExpanded((v) => !v)} |
| > |
| <div className="flex items-center gap-2"> |
| <Wrench size={13} className="text-jarvis-accent" /> |
| <span className="text-xs font-medium text-jarvis-text">Tool Executor</span> |
| <span className="text-[10px] font-mono text-jarvis-dim">Direct access</span> |
| </div> |
| {expanded ? <ChevronDown size={13} className="text-jarvis-dim" /> : |
| <ChevronUp size={13} className="text-jarvis-dim" />} |
| </div> |
| |
| <AnimatePresence> |
| {expanded && ( |
| <motion.div |
| initial={{ height: 0 }} |
| animate={{ height: 'auto' }} |
| exit={{ height: 0 }} |
| className="overflow-hidden" |
| > |
| <div className="px-4 pb-4 space-y-3"> |
| {/* Tool selector */} |
| <div className="flex gap-2"> |
| {TOOLS.map((t) => { |
| const Icon = t.icon |
| return ( |
| <button |
| key={t.id} |
| onClick={() => { setActiveTool(t.id); setArgument(''); setResult(null) }} |
| className={clsx( |
| 'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs', |
| 'border transition-all duration-150', |
| activeTool === t.id |
| ? 'bg-jarvis-accent/10 border-jarvis-accent/30 text-jarvis-accent' |
| : 'border-jarvis-border text-jarvis-dim hover:border-jarvis-muted hover:text-jarvis-muted', |
| )} |
| > |
| <Icon size={11} /> |
| {t.label} |
| </button> |
| ) |
| })} |
| </div> |
| |
| {/* Input */} |
| <div className="flex gap-2"> |
| {tool.multiline ? ( |
| <textarea |
| value={argument} |
| onChange={(e) => setArgument(e.target.value)} |
| placeholder={tool.placeholder} |
| rows={3} |
| className="flex-1 input-field text-xs font-mono resize-none py-2" |
| /> |
| ) : ( |
| <input |
| type="text" |
| value={argument} |
| onChange={(e) => setArgument(e.target.value)} |
| onKeyDown={(e) => e.key === 'Enter' && run()} |
| placeholder={tool.placeholder} |
| className="flex-1 input-field text-xs font-mono" |
| /> |
| )} |
| |
| <div className="flex flex-col gap-1"> |
| <button |
| onClick={run} |
| disabled={!argument.trim() || loading} |
| className="btn-accent text-xs py-2 px-3 flex items-center gap-1" |
| > |
| {loading ? <Loader2 size={12} className="animate-spin" /> : <Play size={12} />} |
| Run |
| </button> |
| <button |
| onClick={loadExample} |
| className="btn-ghost text-[10px] py-1 px-2" |
| > |
| Example |
| </button> |
| </div> |
| </div> |
| |
| {/* Result */} |
| <AnimatePresence> |
| {result && ( |
| <motion.div |
| initial={{ opacity: 0, y: 4 }} |
| animate={{ opacity: 1, y: 0 }} |
| className={clsx( |
| 'panel p-3 rounded-lg', |
| result.success ? 'border-jarvis-success/20' : 'border-jarvis-error/20', |
| )} |
| > |
| <div className="flex items-center gap-1.5 mb-2"> |
| {result.success |
| ? <CheckCircle size={12} className="text-jarvis-success" /> |
| : <XCircle size={12} className="text-jarvis-error" />} |
| <span className={clsx( |
| 'text-[10px] font-mono uppercase tracking-widest', |
| result.success ? 'text-jarvis-success' : 'text-jarvis-error', |
| )}> |
| {result.success ? 'Success' : 'Error'} |
| </span> |
| </div> |
| |
| {activeTool === 'code_executor' ? ( |
| <SyntaxHighlighter |
| language="text" |
| style={oneDark} |
| customStyle={{ margin: 0, padding: '8px', background: '#070c18', fontSize: '11px', borderRadius: '6px' }} |
| > |
| {result.result} |
| </SyntaxHighlighter> |
| ) : ( |
| <p className="text-xs text-jarvis-text font-mono whitespace-pre-wrap"> |
| {result.result} |
| </p> |
| )} |
| </motion.div> |
| )} |
| </AnimatePresence> |
| </div> |
| </motion.div> |
| )} |
| </AnimatePresence> |
| </div> |
| ) |
| } |
|
|
