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

Implement SillyBubble extension for dynamic chat bubble images

Browse Source 
- Create extension for generating dynamic chat bubble images via markdown
- Add function that AI models can call to generate properly formatted markdown links
- Implement URL encoding for text parameters
- Add configurable settings for image service URL and bubble styles
- Include test functionality to preview generated bubble markdown

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sven Olderaan
2025-03-14 20:20:30 +01:00
parent 36b800f6bc
commit c4a1e493c9
7 changed files with 295 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
example.html
View File

@ -1,19 +1,42 @@
<!-- You might want to add additional HTML elements to ST.
It's good practice to separate it out from your code -->
<div class="example-extension-settings">
<div class="sillybubble-settings">
<div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header">
<b>Extension Example</b>
<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="example-extension_block flex-container">
<input id="my_button" class="menu_button" type="submit" value="Example Button" />
<div class="sillybubble_block flex-container">
<input id="sillybubble_enabled" type="checkbox" />
<label for="sillybubble_enabled">Enable SillyBubble</label>
</div>
<div class="example-extension_block flex-container">
<input id="example_setting" type="checkbox" />
<label for="example_setting">This is an example</label>
<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>
<hr class="sysHR" />