Crystal/SillyBubble
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add toggle for AI character selection parameter

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Sven Olderaan 2025-03-16 16:21:53 +01:00
parent 7d6dc1c4cd
commit c8af3ab3cb
2 changed files with 79 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
example.html
View File

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

80
index.js
View File

@ -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, '&lt;').replace(/>/g, '&gt;')}</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