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

Almost ready

Browse source
This commit is contained in:
Glen Maddern 2025-06-25 22:14:36 +10:00
commit 0d0f30f4aa
3 changed files with 56 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
examples/chat-ui/index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>use-mcp chat</title>
</head>
<body>
<div id="root"></div>

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

@ -1,5 +1,5 @@
import { useState } from 'react'
import { ChevronDown, ChevronRight, Wrench } from 'lucide-react'
import { ChevronDown, Wrench } from 'lucide-react'
import { type ToolCallMessage } from '../../types'
interface ToolCallMessageProps {
@ -9,36 +9,43 @@ interface ToolCallMessageProps {
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
const json = JSON.stringify(message.toolArgs)
const argsPreview = json.substring(0, 100)
const shouldTruncate = json.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">
<div className={`flex-shrink-0 h-full ${shouldTruncate ? 'mt-1' : 'mt-2.5'}`}>
<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>
<div className="flex items-center gap-2 mb-1 overflow-hidden">
<span className="font-medium text-blue-800 text-sm flex-shrink-0">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>
{!shouldTruncate && (
<div className={`text-sm text-blue-700 font-mono bg-blue-100 p-2 rounded ml-auto`}>
<span className={'truncate'}>{argsPreview}</span>
</div>
)}
</div>
{shouldTruncate && (
<div
className={`text-sm text-blue-700 font-mono bg-blue-100 p-2 rounded cursor-pointer hover:bg-blue-200`}
onClick={() => setExpanded(!expanded)}
>
{expanded ? (
<pre className="mt-2 whitespace-pre-wrap break-words max-h-64 overflow-y-auto">
{JSON.stringify(message.toolArgs, null, 2)}
</pre>
) : (
<div className="flex items-start justify-between">
<span className={'truncate'}>{argsPreview}</span>
<button className="ml-2 flex-shrink-0">{<ChevronDown size={14} />}</button>
</div>
)}
</div>
)}
</div>
</div>
)

53
examples/chat-ui/src/components/messages/ToolResultMessage.tsx
View file

@ -1,5 +1,5 @@
import { useState } from 'react'
import { ChevronDown, ChevronRight, CheckCircle } from 'lucide-react'
import { CheckCircle, ChevronDown } from 'lucide-react'
import { type ToolResultMessage } from '../../types'
interface ToolResultMessageProps {
@ -9,38 +9,43 @@ interface ToolResultMessageProps {
const ToolResultMessage: React.FC<ToolResultMessageProps> = ({ message }) => {
const [expanded, setExpanded] = useState(false)
const resultPreview = JSON.stringify(message.toolResult).substring(0, 100)
const shouldTruncate = JSON.stringify(message.toolResult).length > 100
const json = JSON.stringify(message.toolResult)
const resultPreview = json.substring(0, 48)
const shouldTruncate = json.length > 48
return (
<div className="flex gap-3 py-3 px-4 bg-green-50 border border-green-200 rounded-lg">
<div className="flex-shrink-0 mt-1">
<div className={`flex-shrink-0 h-full ${shouldTruncate ? 'mt-1' : 'mt-2.5'}`}>
<CheckCircle size={16} className="text-green-600" />
</div>
<div className="flex-grow min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className="font-medium text-green-800 text-sm">Tool Result</span>
<div className="flex items-center gap-2 mb-1 overflow-hidden">
<span className="font-medium text-green-800 text-sm flex-shrink-0">Tool Result</span>
<span className="text-green-600 text-sm font-mono bg-green-100 px-2 py-0.5 rounded">{message.toolName}</span>
</div>
<div
className={`text-sm text-green-700 font-mono bg-green-100 p-2 rounded ${shouldTruncate ? 'cursor-pointer hover:bg-green-200' : ''}`}
onClick={() => shouldTruncate && setExpanded(!expanded)}
>
<div className="flex items-start justify-between">
<span className={expanded ? '' : 'truncate'}>
{expanded ? JSON.stringify(message.toolResult, null, 2) : `${resultPreview}${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.toolResult, null, 2)}
</pre>
{!shouldTruncate && (
<div className={`text-sm text-green-700 font-mono bg-green-100 p-2 rounded ml-auto`}>
<span className={'truncate'}>{resultPreview}</span>
</div>
)}
</div>
{shouldTruncate && (
<div
className={`text-sm text-green-700 font-mono bg-green-100 p-2 rounded cursor-pointer hover:bg-green-200`}
onClick={() => setExpanded(!expanded)}
>
{expanded ? (
<pre className="mt-2 whitespace-pre-wrap break-words max-h-64 overflow-y-auto">
{JSON.stringify(message.toolResult, null, 2)}
</pre>
) : (
<div className="flex items-start justify-between">
<span className={'truncate'}>{resultPreview}</span>
<button className="ml-2 flex-shrink-0">{<ChevronDown size={14} />}</button>
</div>
)}
</div>
)}
</div>
</div>
)