Add HTML fallback and improve bubble rendering in collapsed tool calls

- Create image_html.php as fallback when GD not available - Add test.html page to demonstrate different bubble styles - Update index.js to support rendering bubbles in collapsed tool calls - Improve example.html settings page with new options - Add reference/ to .gitignore 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-03-16 12:49:14 +01:00
parent 0e532e81f4
commit a907c4d073
5 changed files with 313 additions and 7 deletions
--- a/image_html.php
+++ b/image_html.php
@ -0,0 +1,114 @@
+<?php
+/**
+ * SillyBubble HTML Fallback
+ * 
+ * Creates a chat bubble using HTML/CSS when the GD library is not available
+ * Accepts the same parameters as image.php
+ */
+
+// Get the text from the URL parameter
+$text = isset($_GET['q']) ? $_GET['q'] : 'Hello world!';
+$style = isset($_GET['style']) ? strtolower($_GET['style']) : 'default';
+
+// Decode URL-encoded text
+$text = htmlspecialchars(urldecode($text));
+
+// Define styles
+$styles = [
+    'default' => [
+        'background' => '#c8dcff',
+        'border' => '#96aade',
+        'text' => '#000000',
+    ],
+    'modern' => [
+        'background' => '#646464',
+        'border' => '#464646',
+        'text' => '#ffffff',
+    ],
+    'retro' => [
+        'background' => '#fff0c8',
+        'border' => '#dcb48c',
+        'text' => '#64321e',
+    ],
+    'minimal' => [
+        'background' => '#f5f5f5',
+        'border' => '#c8c8c8',
+        'text' => '#323232',
+    ]
+];
+
+// Use default style if specified style doesn't exist
+if (!isset($styles[$style])) {
+    $style = 'default';
+}
+
+// CSS for different shapes
+$shapeCSS = [
+    'default' => 'border-radius: 10px;',
+    'modern' => 'border-radius: 10px;',
+    'retro' => 'border-radius: 0;',
+    'minimal' => 'border-radius: 0;',
+];
+
+// Output HTML/CSS
+header('Content-Type: text/html');
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat Bubble</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: transparent;
+        }
+        .bubble-container {
+            max-width: 600px;
+            position: relative;
+            padding: 20px;
+        }
+        .bubble {
+            position: relative;
+            background-color: <?php echo $styles[$style]['background']; ?>;
+            border: 1px solid <?php echo $styles[$style]['border']; ?>;
+            color: <?php echo $styles[$style]['text']; ?>;
+            padding: 20px;
+            <?php echo $shapeCSS[$style]; ?>
+            font-family: Arial, sans-serif;
+            line-height: 1.5;
+        }
+        .bubble:after {
+            content: '';
+            position: absolute;
+            bottom: -15px;
+            left: 50px;
+            border-width: 15px 15px 0;
+            border-style: solid;
+            border-color: <?php echo $styles[$style]['background']; ?> transparent;
+        }
+        .bubble:before {
+            content: '';
+            position: absolute;
+            bottom: -16px;
+            left: 49px;
+            border-width: 16px 16px 0;
+            border-style: solid;
+            border-color: <?php echo $styles[$style]['border']; ?> transparent;
+        }
+    </style>
+</head>
+<body>
+    <div class="bubble-container">
+        <div class="bubble">
+            <?php echo nl2br($text); ?>
+        </div>
+    </div>
+</body>
+</html>