|
|
|
|
|
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 { |
|
|
|
|
|
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(); |
|
|
} |
