From c8af3ab3cb7b509145f5dc85e85f0ae1c9a4e1b6 Mon Sep 17 00:00:00 2001 From: Sven Olderaan Date: Sun, 16 Mar 2025 16:21:53 +0100 Subject: [PATCH] Add toggle for AI character selection parameter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add setting to control whether AI can choose character - Modify function schema based on user settings - Only expose character parameter to AI when setting is enabled - Update test function to reflect current settings - Provide separate documentation for each setting mode - Default is character selection disabled, set by extension user 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- example.html | 27 ++++++++++++++---- index.js | 80 +++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 79 insertions(+), 28 deletions(-) diff --git a/example.html b/example.html index 86e924c..0867eec 100644 --- a/example.html +++ b/example.html @@ -15,6 +15,11 @@ +
+ + +
+
@@ -68,21 +73,33 @@
  • "Include functions in context" is checked
  • The function appears in the function list
    • -

    🚨 REQUIRED SETUP: You MUST add the following to your system prompt or character card:

    - 
    You have access to a function called generateChatBubbleImage(text, character, bubble_type, style) that creates character-styled chat bubbles.
+                    
    🚨 REQUIRED SETUP: You MUST add one of the following to your system prompt or character card (depending on your settings):
    
+                    
+                    
    If "Let AI choose character" is disabled (default):
    
+                    
    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")
    
+
+                    
    If "Let AI choose character" is enabled:
    
+                    
    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")
    
+generateChatBubbleImage("I'm thinking...", "Example", "thought")

    ALTERNATIVE: If the AI can't call the function directly, you can instruct it to respond with Markdown formatted like this:

    ![](image.php?q=Hello%20world)
    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 = `

    Using bubble type: ${bubbleType}

    `; + if (useCharParam) { + paramInfo = `

    Using character: ${character}, bubble type: ${bubbleType}

    `; + } + const testPopup = `

    Generated Markdown:

    ${markdown.replace(//g, '>')}
    -

    Using character: ${character}, bubble type: ${bubbleType}

    + ${paramInfo}

    Preview (if connected to image service):

    ${markdown}
    @@ -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