Displays tools
This commit is contained in:
Seif Ghazi
parent
15dbb56887
commit
1228c3929e
3 changed files with 162 additions and 9 deletions
|
|
@ -5,11 +5,8 @@ go 1.20
|
|||
require (
|
||||
github.com/gorilla/handlers v1.5.2
|
||||
github.com/gorilla/mux v1.8.1
|
||||
github.com/joho/godotenv v1.5.1
|
||||
github.com/mattn/go-sqlite3 v1.14.28
|
||||
)
|
||||
|
||||
require (
|
||||
github.com/felixge/httpsnoop v1.0.3 // indirect
|
||||
github.com/joho/godotenv v1.5.1 // indirect
|
||||
github.com/mattn/go-sqlite3 v1.14.28 // indirect
|
||||
)
|
||||
require github.com/felixge/httpsnoop v1.0.3 // indirect
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ import {
|
|||
Wifi,
|
||||
Calendar,
|
||||
List,
|
||||
FileText
|
||||
FileText,
|
||||
Wrench
|
||||
} from 'lucide-react';
|
||||
import { MessageContent } from './MessageContent';
|
||||
import { formatJSON } from '../utils/formatters';
|
||||
|
|
@ -39,6 +40,15 @@ interface Request {
|
|||
type: string;
|
||||
cache_control?: { type: string };
|
||||
}>;
|
||||
tools?: Array<{
|
||||
name: string;
|
||||
description: string;
|
||||
input_schema?: {
|
||||
type: string;
|
||||
properties?: Record<string, any>;
|
||||
required?: string[];
|
||||
};
|
||||
}>;
|
||||
max_tokens?: number;
|
||||
temperature?: number;
|
||||
stream?: boolean;
|
||||
|
|
@ -242,6 +252,36 @@ export default function RequestDetailContent({ request, onGrade }: RequestDetail
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Tools */}
|
||||
{request.body.tools && request.body.tools.length > 0 && (
|
||||
<div className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<div
|
||||
className="bg-gray-50 px-6 py-4 border-b border-gray-200 cursor-pointer"
|
||||
onClick={() => toggleSection('tools')}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-lg font-semibold text-gray-900 flex items-center space-x-3">
|
||||
<Wrench className="w-5 h-5 text-indigo-600" />
|
||||
<span>Available Tools</span>
|
||||
<span className="text-xs bg-indigo-50 text-indigo-700 px-2 py-1 rounded-full border border-indigo-200">
|
||||
{request.body.tools.length} tools
|
||||
</span>
|
||||
</h4>
|
||||
<ChevronDown className={`w-5 h-5 text-gray-500 transition-transform ${
|
||||
expandedSections.tools ? 'rotate-180' : ''
|
||||
}`} />
|
||||
</div>
|
||||
</div>
|
||||
{expandedSections.tools && (
|
||||
<div className="p-6 space-y-4">
|
||||
{request.body.tools.map((tool, index) => (
|
||||
<ToolCard key={index} tool={tool} index={index} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Conversation */}
|
||||
{request.body.messages && (
|
||||
<div className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
|
||||
|
|
@ -787,3 +827,107 @@ function ResponseDetails({ response }: { response: NonNullable<Request['response
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Tool Card Component
|
||||
function ToolCard({ tool, index }: { tool: any; index: number }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [copiedSchema, setCopiedSchema] = useState(false);
|
||||
|
||||
const handleCopySchema = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(formatJSON(tool.input_schema));
|
||||
setCopiedSchema(true);
|
||||
setTimeout(() => setCopiedSchema(false), 2000);
|
||||
} catch (error) {
|
||||
console.error('Failed to copy schema:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Parse description to identify code blocks and format them
|
||||
const formatDescription = (description: string) => {
|
||||
// Split by code blocks (text between backticks)
|
||||
const parts = description.split(/(`[^`]+`)/g);
|
||||
|
||||
return parts.map((part, i) => {
|
||||
if (part.startsWith('`') && part.endsWith('`')) {
|
||||
// Code inline
|
||||
const code = part.slice(1, -1);
|
||||
return (
|
||||
<code key={i} className="bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-xs font-mono">
|
||||
{code}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
// Return non-code parts as plain text
|
||||
return <span key={i}>{part}</span>;
|
||||
});
|
||||
};
|
||||
|
||||
const isLongDescription = tool.description.length > 300;
|
||||
const displayDescription = expanded ? tool.description : tool.description.slice(0, 300);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-xl overflow-hidden">
|
||||
<div className="p-5">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center border border-gray-200 shadow-sm">
|
||||
<Wrench className="w-5 h-5 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-lg font-bold text-gray-900">{tool.name}</h5>
|
||||
<span className="text-xs text-gray-500">Tool #{index + 1}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-sm max-w-none">
|
||||
<div className="text-sm text-gray-700 leading-relaxed space-y-2">
|
||||
<div className="whitespace-pre-wrap">
|
||||
{formatDescription(displayDescription)}
|
||||
{isLongDescription && !expanded && '...'}
|
||||
</div>
|
||||
{isLongDescription && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="text-blue-600 hover:text-blue-700 text-xs font-medium mt-2"
|
||||
>
|
||||
{expanded ? 'Show less' : 'Show more'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tool.input_schema && (
|
||||
<div className="mt-4">
|
||||
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
||||
<div className="bg-gray-50 px-4 py-2 border-b border-gray-200 flex items-center justify-between">
|
||||
<span className="text-xs font-semibold text-gray-700 flex items-center space-x-2">
|
||||
<Settings className="w-3.5 h-3.5" />
|
||||
<span>Input Schema</span>
|
||||
</span>
|
||||
<button
|
||||
onClick={handleCopySchema}
|
||||
className="p-1 text-gray-500 hover:text-gray-700 transition-colors"
|
||||
title="Copy schema"
|
||||
>
|
||||
{copiedSchema ? (
|
||||
<Check className="w-3.5 h-3.5 text-green-600" />
|
||||
) : (
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<pre className="text-xs text-gray-700 overflow-x-auto font-mono">
|
||||
{formatJSON(tool.input_schema)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -61,6 +61,15 @@ interface Request {
|
|||
type: string;
|
||||
cache_control?: { type: string };
|
||||
}>;
|
||||
tools?: Array<{
|
||||
name: string;
|
||||
description: string;
|
||||
input_schema?: {
|
||||
type: string;
|
||||
properties?: Record<string, any>;
|
||||
required?: string[];
|
||||
};
|
||||
}>;
|
||||
max_tokens?: number;
|
||||
temperature?: number;
|
||||
stream?: boolean;
|
||||
|
|
@ -231,13 +240,16 @@ export default function Index() {
|
|||
}
|
||||
};
|
||||
|
||||
const loadConversations = async (loadMore = false) => {
|
||||
const loadConversations = async (modelFilter: string = "all", loadMore = false) => {
|
||||
setIsFetching(true);
|
||||
const pageToFetch = loadMore ? conversationsCurrentPage + 1 : 1;
|
||||
try {
|
||||
const url = new URL('/api/conversations', window.location.origin);
|
||||
url.searchParams.append("page", pageToFetch.toString());
|
||||
url.searchParams.append("limit", itemsPerPage.toString());
|
||||
if (modelFilter !== "all") {
|
||||
url.searchParams.append("model", modelFilter);
|
||||
}
|
||||
|
||||
const response = await fetch(url.toString());
|
||||
if (!response.ok) {
|
||||
|
|
@ -500,7 +512,7 @@ export default function Index() {
|
|||
if (viewMode === 'requests') {
|
||||
loadRequests(modelFilter);
|
||||
} else {
|
||||
loadConversations();
|
||||
loadConversations(modelFilter);
|
||||
}
|
||||
}, [viewMode, modelFilter]);
|
||||
|
||||
|
|
@ -807,7 +819,7 @@ export default function Index() {
|
|||
{hasMoreConversations && (
|
||||
<div className="p-3 text-center border-t border-gray-100">
|
||||
<button
|
||||
onClick={() => loadConversations(true)}
|
||||
onClick={() => loadConversations(modelFilter, true)}
|
||||
disabled={isFetching}
|
||||
className="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded hover:bg-gray-200 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue