Fix function registration for AI visibility

- Add isPublic flag to make function visible to AI
- Add explicit context registration for better compatibility
- Add debug logs to help track registration status
- Improve documentation with SillyTavern-specific setup instructions
- Add warning styles for important setup notes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

example.html

@@ -37,6 +37,15 @@
                     <li><code>text</code>: The text to display in the bubble</li>
                     <li><code>style</code>: (Optional) Bubble style</li>
                 </ul>
+                <div class="sillybubble_important">
+                    <p><strong>Important:</strong> Make sure function calling is enabled in SillyTavern's AI settings and the model you're using supports function calling.</p>
+                    <p>In SillyTavern's AI settings, verify that:</p>
+                    <ol>
+                        <li>Function calling is enabled</li>
+                        <li>"Include functions in context" is checked</li>
+                        <li>The function appears in the function list</li>
+                    </ol>
+                </div>
             </div>
 
             <hr class="sysHR" />

index.js

@@ -119,11 +119,26 @@ jQuery(async () => {
         required: false,
       }
     ],
+    isPublic: true, // Make sure function is exposed to the AI
     run: async function(text, style) {
       return generateChatBubbleImage(text, style);
     }
   });
   
+  // Log to console to verify registration
+  console.log(`[${extensionName}] Function registered: generateChatBubbleImage`);
+  
+  // Add to context if needed - this might be required to expose to AI
+  try {
+    const context = getContext();
+    if (context && typeof context.addExtensionFunction === 'function') {
+      context.addExtensionFunction('generateChatBubbleImage', generateChatBubbleImage);
+      console.log(`[${extensionName}] Function added to context: generateChatBubbleImage`);
+    }
+  } catch (error) {
+    console.error(`[${extensionName}] Error adding function to context:`, error);
+  }
+  
   // Load settings
   loadSettings();
 });

style.css

@@ -35,6 +35,17 @@
   font-family: monospace;
 }
 
+.sillybubble_important {
+  margin-top: 10px;
+  padding: 10px;
+  border-left: 3px solid #e74c3c;
+  background-color: rgba(231, 76, 60, 0.1);
+}
+
+.sillybubble_important strong {
+  color: #e74c3c;
+}
+
 .sillybubble-test pre {
   background-color: rgba(0, 0, 0, 0.1);
   padding: 10px;