File size: 3,186 Bytes
88d00ff 4671081 88d00ff 4671081 88d00ff 4671081 88d00ff 4671081 88d00ff |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
// Simulate streaming response with tool calls
function simulateAgentResponse(container) {
const messages = [
"Let me check that for you...",
"I'll need to use some tools to find the answer.",
{ tool: "search_api", params: { query: "latest AI models" } },
"Found some information!",
{ tool: "data_analysis", params: { dataset: "ai_research" } },
"Here's what I discovered...",
"The latest models include GPT-4, Claude 3, and Gemini."
];
let index = 0;
function addNextMessage() {
if (index >= messages.length) return;
const message = messages[index];
const messageElement = document.createElement('div');
if (typeof message === 'string') {
messageElement.className = 'p-4 mb-2 bg-white rounded-lg shadow-sm';
messageElement.textContent = message;
} else {
// Tool call
messageElement.className = 'p-4 mb-2 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200 tool-call';
messageElement.innerHTML = `
<div class="flex items-center text-blue-700 mb-2">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 relative">
<i data-feather="cpu" class="w-4 h-4 text-blue-600"></i>
<div class="absolute inset-0 rounded-full bg-blue-200 opacity-50 animate-ping"></div>
</div>
<div class="flex items-center">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium mr-2">工具调用</span>
<span class="font-semibold">执行中...</span>
</div>
</div>
<div class="bg-white rounded-lg p-3 border border-blue-100 shadow-sm">
<div class="flex items-center mb-2">
<i data-feather="box" class="w-3 h-3 text-gray-500 mr-1"></i>
<span class="text-sm font-medium text-gray-700">工具名称</span>
</div>
<div class="bg-gray-50 rounded px-2 py-1 mb-3 font-mono text-sm text-gray-800 border-l-2 border-blue-400">${message.tool}</div>
<div class="flex items-center mb-2">
<i data-feather="settings" class="w-3 h-3 text-gray-500 mr-1"></i>
<span class="text-sm font-medium text-gray-700">参数配置</span>
</div>
<div class="bg-gray-50 rounded p-2 font-mono text-xs text-gray-800 max-h-20 overflow-y-auto border border-gray-200">
<pre class="whitespace-pre-wrap">${JSON.stringify(message.params, null, 2)}</pre>
</div>
</div>
`;
}
container.appendChild(messageElement);
container.scrollTop = container.scrollHeight;
index++;
if (index < messages.length) {
setTimeout(addNextMessage, Math.random() * 1000 + 500);
}
}
addNextMessage();
} |