···
console.log('Executing tool call:', func, args);
if (window.toolCallbacks[func]) {
365
-
// Handle parameter name variations
366
-
if (func === 'updateStyle' && args.styleObj) {
367
-
// Convert styleObj to the expected parameter name
368
-
return window.toolCallbacks[func](args.selector, args.styleObj);
370
-
// Use all argument values in order
371
-
return window.toolCallbacks[func](...Object.values(args));
366
+
// Handle different function signatures
367
+
if (func === 'removeElement') {
368
+
// removeElement expects just a selector
369
+
const selector = args.selector || Object.keys(args)[0] || Object.values(args)[0];
370
+
return window.toolCallbacks[func](selector);
371
+
} else if (func === 'updateStyle' && args.styleObj) {
372
+
return window.toolCallbacks[func](args.selector, args.styleObj);
373
+
} else if (func === 'executeJS') {
374
+
return window.toolCallbacks[func](args.code);
375
+
} else if (func === 'updateElement') {
376
+
return window.toolCallbacks[func](args.selector, args.newContent);
377
+
} else if (func === 'replaceElement') {
378
+
return window.toolCallbacks[func](args.selector, args.newHTML);
379
+
} else if (func === 'addElement') {
380
+
return window.toolCallbacks[func](args.parentSelector, args.newHTML, args.position);
382
+
// Fallback: use all argument values in order
383
+
return window.toolCallbacks[func](...Object.values(args));
386
+
return { success: false, message: `Error executing ${func}: ${error.message}` };
return { success: false, message: `Unknown tool: ${func}` };
···
402
-
content: `Here is the current HTML page:\n\n${currentPageHTML}\n\nUser request: "${userPrompt}"\n\nIMPORTANT: You must respond with ONLY one of these two formats:\n\nFORMAT 1 - Tool calls (for precise modifications):\n{"tool_calls": [{"function": "functionName", "arguments": {"param": "value"}}]}\n\nFORMAT 2 - Raw HTML (to append to page):\n<div>Your HTML content here</div>\n\nDO NOT include any explanatory text, markdown formatting, or additional commentary. Respond with ONLY the JSON or HTML.\n\nAvailable tools:\n1. replaceElement(selector, newHTML) - Replace an element\n2. updateElement(selector, newContent) - Update element content \n3. addElement(parentSelector, newHTML, position) - Add element\n4. removeElement(selector) - Remove an element\n5. updateStyle(selector, styleObj) - Update CSS styles\n6. executeJS(code) - Run JavaScript code\n\nUse DOS/retro aesthetic with flat colors: #000000 (black), #ffffff (white), #c0c0c0 (gray), #000080 (blue), #ff0000 (red). Use monospace fonts.`,
417
+
content: `Here is the current HTML page:\n\n${currentPageHTML}\n\nUser request: "${userPrompt}"\n\nIMPORTANT: You must respond with ONLY one of these two formats:\n\nFORMAT 1 - Tool calls (for precise modifications):\n{"tool_calls": [{"function": "functionName", "arguments": {"param": "value"}}]}\n\nFORMAT 2 - Raw HTML (to append to page):\n<div>Your HTML content here</div>\n\nDO NOT include any explanatory text, markdown formatting, or additional commentary. Respond with ONLY the JSON or HTML.\n\nAvailable tools with correct argument formats:\n1. removeElement: {"function": "removeElement", "arguments": {"selector": ".class-name"}}\n2. updateElement: {"function": "updateElement", "arguments": {"selector": ".class-name", "newContent": "new content"}}\n3. replaceElement: {"function": "replaceElement", "arguments": {"selector": ".class-name", "newHTML": "<div>new html</div>"}}\n4. addElement: {"function": "addElement", "arguments": {"parentSelector": ".parent", "newHTML": "<div>content</div>", "position": "beforeend"}}\n5. updateStyle: {"function": "updateStyle", "arguments": {"selector": ".class-name", "styleObj": {"color": "#000000"}}}\n6. executeJS: {"function": "executeJS", "arguments": {"code": "console.log('hello');"}}\n\nUse DOS/retro aesthetic with flat colors: #000000 (black), #ffffff (white), #c0c0c0 (gray), #000080 (blue), #ff0000 (red). Use monospace fonts.`,
···
console.log('Tool call result:', result);
statusDiv.textContent = `EXECUTED ${results.length} COMMANDS`;
483
+
// Send feedback to AI about tool results
484
+
setTimeout(() => sendToolFeedback(userPrompt, results), 100);
throw new Error("Invalid tool call format");
···
document.getElementById("codeEditor").value = "";
document.getElementById("statusDisplay").textContent = "";
520
+
async function sendToolFeedback(originalPrompt, toolResults) {
521
+
const statusDiv = document.getElementById("statusDisplay");
524
+
statusDiv.textContent = "SENDING FEEDBACK TO AI...";
526
+
const currentPageHTML = document.documentElement.outerHTML;
527
+
const resultsText = toolResults.map(r =>
528
+
`${r.success ? '✓' : '✗'} ${r.message}${r.result ? ` (result: ${r.result})` : ''}`
531
+
const response = await fetch(
532
+
"https://ai.hackclub.com/chat/completions",
536
+
"Content-Type": "application/json",
538
+
body: JSON.stringify({
542
+
content: `Previous request: "${originalPrompt}"\n\nTool execution results:\n${resultsText}\n\nCurrent page state:\n${currentPageHTML}\n\nBased on the tool results, do you need to make any follow-up modifications? If everything looks good, respond with "COMPLETE". If you need to make adjustments, respond with tool calls or HTML.\n\nIMPORTANT: Respond with ONLY one of these formats:\n- "COMPLETE" (if satisfied)\n- {"tool_calls": [...]} (for modifications)\n- Raw HTML (to append content)\n\nDO NOT include explanatory text.`,
549
+
if (!response.ok) {
550
+
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
553
+
const data = await response.json();
554
+
let followUpContent;
556
+
if (data.choices && data.choices[0] && data.choices[0].message) {
557
+
followUpContent = data.choices[0].message.content;
558
+
} else if (data.content) {
559
+
followUpContent = data.content;
560
+
} else if (data.response) {
561
+
followUpContent = data.response;
563
+
throw new Error("Unexpected API response format");
566
+
followUpContent = followUpContent.trim();
567
+
console.log('Follow-up response:', followUpContent);
569
+
if (followUpContent === "COMPLETE") {
570
+
statusDiv.textContent = "AI SATISFIED - TASK COMPLETE";
571
+
setTimeout(() => statusDiv.textContent = "", 3000);
575
+
// Process follow-up commands
576
+
statusDiv.textContent = "AI MAKING ADJUSTMENTS...";
578
+
// Try to parse as tool calls
580
+
const jsonMatch = followUpContent.match(/\{[\s\S]*"tool_calls"[\s\S]*\}/);
582
+
const toolResponse = JSON.parse(jsonMatch[0]);
583
+
if (toolResponse.tool_calls && Array.isArray(toolResponse.tool_calls)) {
584
+
const followUpResults = [];
585
+
for (const toolCall of toolResponse.tool_calls) {
586
+
const result = executeToolCall(toolCall);
587
+
followUpResults.push(result);
588
+
console.log('Follow-up tool result:', result);
590
+
statusDiv.textContent = `AI EXECUTED ${followUpResults.length} ADJUSTMENTS`;
594
+
let cleanCode = followUpContent
595
+
.replace(/```html\n?/g, "")
596
+
.replace(/```\n?/g, "");
597
+
document.querySelector(".content").innerHTML += cleanCode;
598
+
statusDiv.textContent = "AI ADDED FOLLOW-UP CONTENT";
601
+
console.log('Follow-up parsing error:', error);
602
+
statusDiv.textContent = "AI FEEDBACK ERROR";
605
+
setTimeout(() => statusDiv.textContent = "", 4000);
608
+
statusDiv.textContent = `FEEDBACK ERROR: ${error.message}`;
609
+
console.error('Feedback error:', error);
610
+
setTimeout(() => statusDiv.textContent = "", 3000);
// Handle Ctrl+Enter in textarea
dunkirk.sh