kexsh/agent-chat-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix style

Browse Source
This commit is contained in:
linganmin
2025-04-18 10:30:35 +08:00
parent 89e58cff80
commit 5b7d5ec642
1 changed files with 90 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/thread/messages/tool-calls.tsx
View File

@@ -15,7 +15,7 @@ export function ToolCalls({
if (!toolCalls || toolCalls.length === 0) return null;
return (
<div className="w-full max-w-4xl space-y-4">
<div className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2">
{toolCalls.map((tc, idx) => {
const args = tc.args as Record<string, any>;
const hasArgs = Object.keys(args).length > 0;
@@ -94,96 +94,98 @@ export function ToolResult({ message }: { message: ToolMessage }) {
: contentStr;
return (
<div className="overflow-hidden rounded-lg border border-gray-200">
<div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
<div className="flex flex-wrap items-center justify-between gap-2">
{message.name ? (
<h3 className="font-medium text-gray-900">
Tool Result:{" "}
<code className="rounded bg-gray-100 px-2 py-1">
{message.name}
<div className="mx-auto grid max-w-3xl grid-rows-[1fr_auto] gap-2">
<div className="overflow-hidden rounded-lg border border-gray-200">
<div className="border-b border-gray-200 bg-gray-50 px-4 py-2">
<div className="flex flex-wrap items-center justify-between gap-2">
{message.name ? (
<h3 className="font-medium text-gray-900">
Tool Result:{" "}
<code className="rounded bg-gray-100 px-2 py-1">
{message.name}
</code>
</h3>
) : (
<h3 className="font-medium text-gray-900">Tool Result</h3>
)}
{message.tool_call_id && (
<code className="ml-2 rounded bg-gray-100 px-2 py-1 text-sm">
{message.tool_call_id}
</code>
</h3>
) : (
<h3 className="font-medium text-gray-900">Tool Result</h3>
)}
{message.tool_call_id && (
<code className="ml-2 rounded bg-gray-100 px-2 py-1 text-sm">
{message.tool_call_id}
</code>
)}
)}
</div>
</div>
</div>
<motion.div
className="min-w-full bg-gray-100"
initial={false}
animate={{ height: "auto" }}
transition={{ duration: 0.3 }}
>
<div className="p-3">
<AnimatePresence
mode="wait"
initial={false}
>
<motion.div
key={isExpanded ? "expanded" : "collapsed"}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.2 }}
<motion.div
className="min-w-full bg-gray-100"
initial={false}
animate={{ height: "auto" }}
transition={{ duration: 0.3 }}
>
<div className="p-3">
<AnimatePresence
mode="wait"
initial={false}
>
{isJsonContent ? (
<table className="min-w-full divide-y divide-gray-200">
<tbody className="divide-y divide-gray-200">
{(Array.isArray(parsedContent)
? isExpanded
? parsedContent
: parsedContent.slice(0, 5)
: Object.entries(parsedContent)
).map((item, argIdx) => {
const [key, value] = Array.isArray(parsedContent)
? [argIdx, item]
: [item[0], item[1]];
return (
<tr key={argIdx}>
<td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
{key}
</td>
<td className="px-4 py-2 text-sm text-gray-500">
{isComplexValue(value) ? (
<code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm break-all">
{JSON.stringify(value, null, 2)}
</code>
) : (
String(value)
)}
</td>
</tr>
);
})}
</tbody>
</table>
) : (
<code className="block text-sm">{displayedContent}</code>
)}
</motion.div>
</AnimatePresence>
</div>
{((shouldTruncate && !isJsonContent) ||
(isJsonContent &&
Array.isArray(parsedContent) &&
parsedContent.length > 5)) && (
<motion.button
onClick={() => setIsExpanded(!isExpanded)}
className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-200 py-2 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-600"
initial={{ scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
{isExpanded ? <ChevronUp /> : <ChevronDown />}
</motion.button>
)}
</motion.div>
<motion.div
key={isExpanded ? "expanded" : "collapsed"}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.2 }}
>
{isJsonContent ? (
<table className="min-w-full divide-y divide-gray-200">
<tbody className="divide-y divide-gray-200">
{(Array.isArray(parsedContent)
? isExpanded
? parsedContent
: parsedContent.slice(0, 5)
: Object.entries(parsedContent)
).map((item, argIdx) => {
const [key, value] = Array.isArray(parsedContent)
? [argIdx, item]
: [item[0], item[1]];
return (
<tr key={argIdx}>
<td className="px-4 py-2 text-sm font-medium whitespace-nowrap text-gray-900">
{key}
</td>
<td className="px-4 py-2 text-sm text-gray-500">
{isComplexValue(value) ? (
<code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm break-all">
{JSON.stringify(value, null, 2)}
</code>
) : (
String(value)
)}
</td>
</tr>
);
})}
</tbody>
</table>
) : (
<code className="block text-sm">{displayedContent}</code>
)}
</motion.div>
</AnimatePresence>
</div>
{((shouldTruncate && !isJsonContent) ||
(isJsonContent &&
Array.isArray(parsedContent) &&
parsedContent.length > 5)) && (
<motion.button
onClick={() => setIsExpanded(!isExpanded)}
className="flex w-full cursor-pointer items-center justify-center border-t-[1px] border-gray-200 py-2 text-gray-500 transition-all duration-200 ease-in-out hover:bg-gray-50 hover:text-gray-600"
initial={{ scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
{isExpanded ? <ChevronUp /> : <ChevronDown />}
</motion.button>
)}
</motion.div>
</div>
</div>
);
}