Working on tool call display

examples/chat-ui/src/components/ToolCallMessage.tsx

@@ -0,0 +1,53 @@
+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