diff --git a/example.html b/example.html
index 86e924c..0867eec 100644
--- a/example.html
+++ b/example.html
@@ -15,6 +15,11 @@
<label for="sillybubble_render_in_collapse">Render bubbles in collapsed tool calls</label>
</div>
+ <div class="sillybubble_block flex-container">
+ <input id="sillybubble_use_character_param" type="checkbox" />
+ <label for="sillybubble_use_character_param">Let AI choose character (expose character parameter to AI)</label>
+ </div>
+
<div class="sillybubble_block flex-container">
<label for="sillybubble_image_url">Image Service URL (full URL including https://):</label>
<input id="sillybubble_image_url" type="text" class="text_pole" placeholder="https://calista.the.sexiest.cat/image.php" />
@@ -68,21 +73,33 @@
<li>"Include functions in context" is checked</li>
<li>The function appears in the function list</li>
</ol>
- <p><strong>🚨 REQUIRED SETUP:</strong> You MUST add the following to your system prompt or character card:</p>
- <pre>You have access to a function called generateChatBubbleImage(text, character, bubble_type, style) that creates character-styled chat bubbles.
+ <p><strong>🚨 REQUIRED SETUP:</strong> You MUST add one of the following to your system prompt or character card (depending on your settings):</p>
+
+ <p><strong>If "Let AI choose character" is disabled (default):</strong></p>
+ <pre>You have access to a function called generateChatBubbleImage(text, bubble_type) that creates styled chat bubbles.
+
+The function parameters are:
+- text: The text to display in the chat bubble (required string)
+- bubble_type: The type of bubble to use (optional string: "speech" or "thought")
+
+When you want to create a chat bubble, call this function with the text you want to display.
+Example usage:
+generateChatBubbleImage("Hello world!")
+generateChatBubbleImage("I'm thinking...", "thought")</pre>
+
+ <p><strong>If "Let AI choose character" is enabled:</strong></p>
+ <pre>You have access to a function called generateChatBubbleImage(text, character, bubble_type) that creates character-styled chat bubbles.
The function parameters are:
- text: The text to display in the chat bubble (required string)
- character: The character to use for the bubble (optional string: "Example", "Bianca", etc.)
- bubble_type: The type of bubble to use (optional string: "speech" or "thought")
-- style: Legacy parameter for visual style (optional string: "default", "modern", "retro", or "minimal")
When you want to create a chat bubble, call this function with the text you want to display.
Example usage:
generateChatBubbleImage("Hello world!")
generateChatBubbleImage("Hello from Bianca", "Bianca")
-generateChatBubbleImage("I'm thinking...", "Example", "thought")
-generateChatBubbleImage("Hello in retro style", null, null, "retro")</pre>
+generateChatBubbleImage("I'm thinking...", "Example", "thought")</pre>
<p><strong>ALTERNATIVE:</strong> If the AI can't call the function directly, you can instruct it to respond with Markdown formatted like this:</p>
<pre></pre>
</div>
diff --git a/index.js b/index.js
index 146b90c..52dd9bf 100644
--- a/index.js
+++ b/index.js
@@ -13,7 +13,8 @@ const defaultSettings = {
default_character: "Example",
default_bubble_type: "speech",
enabled: true,
- render_in_collapse: true // Setting to enable/disable rendering in collapsed tool calls
+ render_in_collapse: true, // Setting to enable/disable rendering in collapsed tool calls
+ use_character_param: false // Whether to expose the character parameter to the AI
};
// Make sure settings exist
@@ -87,6 +88,7 @@ function loadSettings() {
$("#sillybubble_default_character").val(extension_settings[extensionName].default_character).trigger("input");
$("#sillybubble_default_bubble_type").val(extension_settings[extensionName].default_bubble_type).trigger("input");
$("#sillybubble_render_in_collapse").prop("checked", extension_settings[extensionName].render_in_collapse).trigger("input");
+ $("#sillybubble_use_character_param").prop("checked", extension_settings[extensionName].use_character_param).trigger("input");
}
// Handle enable/disable toggle
@@ -142,18 +144,36 @@ function onRenderInCollapseInput(event) {
processToolCallMessages();
}
+// Handle use character parameter toggle
+function onUseCharacterParamInput(event) {
+ const value = Boolean($(event.target).prop("checked"));
+ extension_settings[extensionName].use_character_param = value;
+ saveSettingsDebounced();
+
+ // Re-register the function tool with updated schema when the setting is toggled
+ registerFunctionTool();
+}
+
// Test function to visualize a bubble
function onTestButtonClick() {
const testText = "This is a test chat bubble generated by SillyBubble!";
- const character = extension_settings[extensionName].default_character;
+ const useCharParam = extension_settings[extensionName].use_character_param;
+ const character = useCharParam ? extension_settings[extensionName].default_character : null;
const bubbleType = extension_settings[extensionName].default_bubble_type;
const markdown = generateChatBubbleImage(testText, null, character, bubbleType);
+
+ // Determine what parameters to display in the test popup
+ let paramInfo = `<p>Using bubble type: <strong>${bubbleType}</strong></p>`;
+ if (useCharParam) {
+ paramInfo = `<p>Using character: <strong>${character}</strong>, bubble type: <strong>${bubbleType}</strong></p>`;
+ }
+
const testPopup = `
<div class="sillybubble-test">
<p>Generated Markdown:</p>
<pre>${markdown.replace(/</g, '<').replace(/>/g, '>')}</pre>
- <p>Using character: <strong>${character}</strong>, bubble type: <strong>${bubbleType}</strong></p>
+ ${paramInfo}
<p>Preview (if connected to image service):</p>
<div>${markdown}</div>
</div>
@@ -173,28 +193,37 @@ function registerFunctionTool() {
// Check if registerFunctionTool exists in context
if (typeof context.registerFunctionTool === 'function') {
+ // Create properties object for schema
+ const properties = {
+ text: {
+ type: 'string',
+ description: 'The text to display in the chat bubble'
+ },
+ bubble_type: {
+ type: 'string',
+ description: 'The type of bubble to use (speech, thought). Defaults to speech.'
+ }
+ };
+
+ // Only add character parameter if enabled in settings
+ if (extension_settings[extensionName].use_character_param) {
+ properties.character = {
+ type: 'string',
+ description: 'The character to display (Example, Bianca, etc.). Each character has its own bubble style.'
+ };
+ }
+
+ // Always include style parameter for backward compatibility
+ properties.style = {
+ type: 'string',
+ description: 'Legacy parameter: The visual style of the chat bubble (default, modern, retro, minimal).'
+ };
+
// Define parameter schema following JSON schema format
const bubbleSchema = Object.freeze({
$schema: 'http://json-schema.org/draft-04/schema#',
type: 'object',
- properties: {
- text: {
- type: 'string',
- description: 'The text to display in the chat bubble'
- },
- style: {
- type: 'string',
- description: 'Legacy parameter: The visual style of the chat bubble (default, modern, retro, minimal). Prefer using character parameter instead.'
- },
- character: {
- type: 'string',
- description: 'The character to display (Example, Bianca, etc.). Each character has its own bubble style.'
- },
- bubble_type: {
- type: 'string',
- description: 'The type of bubble to use (speech, thought). Defaults to speech.'
- },
- },
+ properties: properties,
required: ['text']
});
@@ -202,11 +231,15 @@ function registerFunctionTool() {
context.registerFunctionTool({
name: 'generateChatBubbleImage',
displayName: 'Chat Bubble Image',
- description: 'Creates a markdown image link with the text displayed as a character-styled chat bubble. Use when you want to visually style messages or display text in a speech or thought bubble.',
+ description: 'Creates a markdown image link with the text displayed as a styled chat bubble. Use when you want to visually style messages or display text in a speech or thought bubble.',
parameters: bubbleSchema,
action: async (args) => {
if (!args?.text) return '';
- return generateChatBubbleImage(args.text, args.style, args.character, args.bubble_type);
+
+ // Only pass character if the setting is enabled
+ const character = extension_settings[extensionName].use_character_param ? args.character : null;
+
+ return generateChatBubbleImage(args.text, args.style, character, args.bubble_type);
},
formatMessage: () => '',
});
@@ -439,6 +472,7 @@ jQuery(async () => {
$("#sillybubble_default_character").on("input", onDefaultCharacterInput);
$("#sillybubble_default_bubble_type").on("input", onDefaultBubbleTypeInput);
$("#sillybubble_render_in_collapse").on("input", onRenderInCollapseInput);
+ $("#sillybubble_use_character_param").on("input", onUseCharacterParamInput);
$("#sillybubble_test_button").on("click", onTestButtonClick);
// Initial attempt to register the function tool