modelcontextprotocol/use-mcp
Watch
1
0
Fork
You've already forked use-mcp
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Big sigh, finally getting control of my markup

Browse source
This commit is contained in:
Glen Maddern 2025-06-25 19:01:30 +10:00
commit ba845e7852
1 changed files with 253 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

47
examples/chat-ui/src/components/ToolCallMessage.tsx
View file

@ -1,47 +0,0 @@
import { useState } from 'react'
import { ChevronDown, ChevronRight, Wrench } from 'lucide-react'
import { type ToolCallMessage } from '../types'
interface ToolCallMessageProps {
message: ToolCallMessage
}
const ToolCallMessage: React.FC<ToolCallMessageProps> = ({ message }) => {
const [expanded, setExpanded] = useState(false)
const argsPreview = JSON.stringify(message.toolArgs).substring(0, 100)
const shouldTruncate = JSON.stringify(message.toolArgs).length > 100
return (
<div className="flex gap-3 py-3 px-4 bg-blue-50 border border-blue-200 rounded-lg">
<div className="flex-shrink-0 mt-1">
<Wrench size={16} className="text-blue-600" />
</div>
<div className="flex-grow min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className="font-medium text-blue-800 text-sm">Tool Call</span>
<span className="text-blue-600 text-sm font-mono bg-blue-100 px-2 py-0.5 rounded">{message.toolName}</span>
</div>
<div
className={`text-sm text-blue-700 font-mono bg-blue-100 p-2 rounded ${shouldTruncate ? 'cursor-pointer hover:bg-blue-200' : ''}`}
onClick={() => shouldTruncate && setExpanded(!expanded)}
>
<div className="flex items-start justify-between">
<span className={expanded ? '' : 'truncate'}>
{expanded ? JSON.stringify(message.toolArgs, null, 2) : `${argsPreview}${shouldTruncate ? '...' : ''}`}
</span>
{shouldTruncate && (
<button className="ml-2 flex-shrink-0">{expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}</button>
)}
</div>
{expanded && shouldTruncate && (
<pre className="mt-2 whitespace-pre-wrap break-words max-h-64 overflow-y-auto">{JSON.stringify(message.toolArgs, null, 2)}</pre>
)}
</div>
</div>
</div>
)
}
export default ToolCallMessage