AI ThoughtChain Components
5 ComponentsThe ThoughtChain component is used to visualize and track the call chain of Actions and Tools invoked by an Agent.
Dec. 14, 2024, 4:50 a.m.
A series of thought chain components built with Tailwind CSS, inspired by Ant Design X's ThoughtChain component. Used to visualize and track the chain of actions and tools called by AI agents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Size Variants - ThoughtChain</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<style>
.thought-item::before {
content: '';
position: absolute;
left: 50%;
top: 40px;
bottom: -20px;
width: 2px;
background-color: #e5e7eb;
transform: translateX(-50%);
}
.thought-item:last-child::before {
display: none;
}
</style>
</head>
<body class="bg-gray-50">
<div class="max-w-4xl mx-auto p-6">
<div class="mb-6">
<a href="../index.html" class="text-blue-500 hover:text-blue-600 flex items-center gap-1">
<i class="ri-arrow-left-line"></i>
<span>Back to Home</span>
</a>
</div>
<!-- Size Variants -->
<div class="grid grid-cols-3 gap-6">
<!-- Large Size -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Large Size</h3>
<div class="space-y-8">
<div class="thought-item relative flex flex-col items-center">
<div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-xl font-medium">1</span>
</div>
<div class="w-full bg-gray-50 rounded-lg p-4 mt-4">
<div class="text-lg font-medium text-gray-900 mb-2">Large Title</div>
<p class="text-base text-gray-600">Detailed description with more content and information.</p>
</div>
</div>
<div class="thought-item relative flex flex-col items-center">
<div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-xl font-medium">2</span>
</div>
<div class="w-full bg-gray-50 rounded-lg p-4 mt-4">
<div class="text-lg font-medium text-gray-900 mb-2">Large Title</div>
<p class="text-base text-gray-600">Detailed description with more content and information.</p>
</div>
</div>
</div>
</div>
<!-- Default Size -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Default Size</h3>
<div class="space-y-6">
<div class="thought-item relative flex flex-col items-center">
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-lg font-medium">1</span>
</div>
<div class="w-full bg-gray-50 rounded-lg p-3 mt-3">
<div class="text-base font-medium text-gray-900 mb-1">Default Title</div>
<p class="text-sm text-gray-600">Standard description text.</p>
</div>
</div>
<div class="thought-item relative flex flex-col items-center">
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-lg font-medium">2</span>
</div>
<div class="w-full bg-gray-50 rounded-lg p-3 mt-3">
<div class="text-base font-medium text-gray-900 mb-1">Default Title</div>
<p class="text-sm text-gray-600">Standard description text.</p>
</div>
</div>
</div>
</div>
<!-- Small Size -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">Small Size</h3>
<div class="space-y-4">
<div class="thought-item relative flex flex-col items-center">
<div class="w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-base font-medium">1</span>
</div>
<div class="w-full bg-gray-50 rounded-lg p-2 mt-2">
<div class="text-sm font-medium text-gray-900 mb-1">Small Title</div>
<p class="text-xs text-gray-600">Compact description.</p>
</div>
</div>
<div class="thought-item relative flex flex-col items-center">
<div class="w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-base font-medium">2</span>
</div>
<div class="w-full bg-gray-50 rounded-lg p-2 mt-2">
<div class="text-sm font-medium text-gray-900 mb-1">Small Title</div>
<p class="text-xs text-gray-600">Compact description.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Demo Controls -->
<div class="mt-8 flex items-center justify-center gap-4">
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
Toggle Size
</button>
</div>
</div>
</body>
</html>
Dec. 14, 2024, 4:51 a.m.
A series of thought chain components built with Tailwind CSS, inspired by Ant Design X's ThoughtChain component. Used to visualize and track the chain of actions and tools called by AI agents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Style - ThoughtChain</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<style>
.thought-item {
transition: all 0.2s ease;
}
.thought-item::before {
content: '';
position: absolute;
left: 15px;
top: 40px;
bottom: -20px;
width: 2px;
background-color: #e5e7eb;
}
.thought-item:last-child::before {
display: none;
}
</style>
</head>
<body class="bg-gray-50">
<div class="max-w-3xl mx-auto p-6">
<div class="mb-6">
<a href="../index.html" class="text-blue-500 hover:text-blue-600 flex items-center gap-1">
<i class="ri-arrow-left-line"></i>
<span>Back to Home</span>
</a>
</div>
<!-- ThoughtChain Container -->
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="space-y-6">
<!-- Thought Item 1 -->
<div class="thought-item relative pl-8">
<div class="absolute left-0 top-2 w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-lg font-medium">1</span>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h3 class="font-medium text-gray-900">Thought Chain Item Title</h3>
<span class="text-sm text-gray-500">Step 1</span>
</div>
<p class="text-gray-600">Description of the current thought or action being taken by the AI agent.</p>
</div>
</div>
<!-- Thought Item 2 -->
<div class="thought-item relative pl-8">
<div class="absolute left-0 top-2 w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-lg font-medium">2</span>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h3 class="font-medium text-gray-900">Thought Chain Item Title</h3>
<span class="text-sm text-gray-500">Step 2</span>
</div>
<p class="text-gray-600">Description of the current thought or action being taken by the AI agent.</p>
</div>
</div>
<!-- Thought Item 3 -->
<div class="thought-item relative pl-8">
<div class="absolute left-0 top-2 w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-lg font-medium">3</span>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h3 class="font-medium text-gray-900">Thought Chain Item Title</h3>
<span class="text-sm text-gray-500">Step 3</span>
</div>
<p class="text-gray-600">Description of the current thought or action being taken by the AI agent.</p>
</div>
</div>
<!-- Thought Item 4 -->
<div class="thought-item relative pl-8">
<div class="absolute left-0 top-2 w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500">
<span class="text-lg font-medium">4</span>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h3 class="font-medium text-gray-900">Thought Chain Item Title</h3>
<span class="text-sm text-gray-500">Step 4</span>
</div>
<p class="text-gray-600">Description of the current thought or action being taken by the AI agent.</p>
</div>
</div>
</div>
</div>
<!-- Demo Controls -->
<div class="mt-8 flex items-center justify-center gap-4">
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
Add Item
</button>
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
Clear All
</button>
</div>
</div>
</body>
</html>
Dec. 14, 2024, 4:50 a.m.
A series of thought chain components built with Tailwind CSS, inspired by Ant Design X's ThoughtChain component. Used to visualize and track the chain of actions and tools called by AI agents.
Dec. 14, 2024, 4:50 a.m.
A series of thought chain components built with Tailwind CSS, inspired by Ant Design X's ThoughtChain component. Used to visualize and track the chain of actions and tools called by AI agents.
Dec. 14, 2024, 4:51 a.m.
A series of thought chain components built with Tailwind CSS, inspired by Ant Design X's ThoughtChain component. Used to visualize and track the chain of actions and tools called by AI agents.
Copied to clipboard