4ff645abd0
- Intercept tool call messages in chat and render markdown images - Add setting to toggle feature on/off - Add proper styling for rendered images - Handle mutation observer for new messages - Hide rendered images when details element is opened 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
72 lines
3.7 KiB
HTML
72 lines
3.7 KiB
HTML
<div class="sillybubble-settings">
|
|
<div class="inline-drawer">
|
|
<div class="inline-drawer-toggle inline-drawer-header">
|
|
<b>SillyBubble - Chat Bubbles</b>
|
|
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
|
|
</div>
|
|
<div class="inline-drawer-content">
|
|
<div class="sillybubble_block flex-container">
|
|
<input id="sillybubble_enabled" type="checkbox" />
|
|
<label for="sillybubble_enabled">Enable SillyBubble</label>
|
|
</div>
|
|
|
|
<div class="sillybubble_block flex-container">
|
|
<input id="sillybubble_render_in_collapse" type="checkbox" />
|
|
<label for="sillybubble_render_in_collapse">Render bubbles in collapsed tool calls</label>
|
|
</div>
|
|
|
|
<div class="sillybubble_block flex-container">
|
|
<label for="sillybubble_image_url">Image Service URL:</label>
|
|
<input id="sillybubble_image_url" type="text" class="text_pole" />
|
|
</div>
|
|
|
|
<div class="sillybubble_block flex-container">
|
|
<label for="sillybubble_default_style">Default Bubble Style:</label>
|
|
<select id="sillybubble_default_style" class="text_pole">
|
|
<option value="default">Default</option>
|
|
<option value="modern">Modern</option>
|
|
<option value="retro">Retro</option>
|
|
<option value="minimal">Minimal</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="sillybubble_block flex-container">
|
|
<input id="sillybubble_test_button" class="menu_button" type="submit" value="Test Chat Bubble" />
|
|
</div>
|
|
|
|
<div class="sillybubble_info">
|
|
<p>This extension provides a function for AI models to generate chat bubbles.</p>
|
|
<p>Function name: <code>generateChatBubbleImage</code></p>
|
|
<p>Parameters:</p>
|
|
<ul>
|
|
<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>
|
|
<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, style) that creates chat bubbles with the given text.
|
|
|
|
The function parameters are:
|
|
- text: The text to display in the chat bubble (required string)
|
|
- style: Visual style of the bubble (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 in retro style", "retro")</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>
|
|
</div>
|
|
|
|
<hr class="sysHR" />
|
|
</div>
|
|
</div>
|
|
</div> |