u/Silentoplayz

Texting Bubbles: Open WebUI replies arrive as text-message bubbles, with typing dots in between

Texting Bubbles: Open WebUI replies arrive as text-message bubbles, with typing dots in between

I built a pair of functions that make a model reply the way a person texts: a few short messages, each in its own chat bubble, popping in one after another with typing dots while the next one is on its way.

This started with u/kvyb's Qwen3.8-27B-Humanlike-Chat 2.0 post on r/LocalLLaMA. Their side-by-side screenshots of the model texting in chat bubbles made me want that look in Open WebUI, for any model.

What each one does

  • Texting Bubbles changes how replies look. Every paragraph of a reply becomes its own bubble. While the reply streams in, each bubble appears whole after a short typing pause, so you never watch a message spell itself out.
  • Texting Bubbles Filter changes how the model writes. It adds a short instruction to the system prompt (76 tokens with OpenAI's cl100k_base tokenizer) asking for one to four short, casual messages with a blank line between them. Without the filter, a model still gets bubbles, one per paragraph of its normal reply.

What it handles

  • Lists, quotes, tables, math, code blocks and embeds each get their own bubble. Code blocks keep Open WebUI's colors and their Copy button.
  • The Copy and Regenerate buttons, the follow-up suggestions and late status lines (like token stats) wait until the last bubble appears.
  • Reloading mid-reply picks up where it left off, and older chats open with all their bubbles at once.
  • Two colors you pick yourself under Settings > Interface: Assistant Message Bubble Color for replies and User Message Bubble Color for your own messages. The text turns black or white, whichever reads better on that color.
  • Your own messages can get the texting look too: turn on the User Messages valve and a message you send with several paragraphs splits into a bubble per paragraph.
  • Light mode, dark mode, and right-to-left text such as Arabic.
  • The reply is still saved as one message, so the model's context, Copy, Edit and Regenerate all work on the whole turn.
  • A Bubble Shape setting: Rounded, Grouped (tighter corners between bubbles sent in a row), or Tails (grouped, plus a tail on the last bubble, like a phone's messaging app).

Models that already text

Some models, like 2.0, put a single line break between their short messages instead of a blank line. Thanks to kvyb's tip, the filter has a Split Short Lines valve for them: set it to a word limit such as 15, and every line of that many words or fewer gets its own bubble as the reply streams in. Lists, tables, code and math are left alone. Turn Add Instruction off for a model like that, since it doesn't need the texting prompt. The split adds a blank line after each short line, and that blank line is saved in the reply.

With my other functions

  • Message Loading Indicator (https://openwebui.com/posts/4fdc6152-552f-4c98-9fe3-bdbbad4b395b): the style you picked there (Spinner, Equalizer, Shimmer Lines and the rest) shows inside the bubble in place of the typing dots. You see it while the model loads before its first word, and again between messages. With it set to Default, or not installed, you get typing dots.
  • Interface Toggles: its Assistant Message Bubbles setting skips its outer bubble on replies Texting Bubbles shows, so the bubbles don't end up inside a second bubble.

Setting it up

  1. Import both functions under Admin Panel > Functions and turn them on.
  2. Open the model that should text under Workspace > Models, tick Texting Bubbles Filter under Filters, and save. To make every model text, set the filter to global instead.
  3. To keep bubbles to certain models, list them in Texting Bubbles' Model IDs valve. Left empty, every model gets bubbles.
  4. Reload Open WebUI in your browser. If the bubbles don't show, do a hard refresh.

The typing pause is 600 ms plus 18 ms per character, up to 3.5 seconds, and you can change all three numbers or turn pauses off in the valves.

Limits

  • Needs Open WebUI v0.11.0 or later.
  • Needs Render Markdown in Assistant Messages, which is on by default. With it off, replies show as plain text without bubbles.
  • A reply with a raw HTML block or a ::: callout stays a normal reply.
  • Smaller models sometimes ignore the instruction and add headings or --- dividers. Texting Bubbles hides the dividers and shows headings as plain text, so those replies still get bubbles.
  • Turn Texting Bubbles off before you delete it. Open WebUI doesn't tell a function when it's deleted, so a deleted one keeps serving its script until the server restarts.

Bug reports and ideas are welcome here or on the function pages. I'd also love to see what bubble colors people pick.

Edit: Texting Bubbles v1.1.0 adds user message bubbles with their own color, and a Bubble Shape setting under Settings > Interface with grouped corners and messaging-app tails that mirror for right-to-left chats. The filter's v1.1.0 adds Split Short Lines for models that already text. Update both from the links above.

Replies arrive one bubble at a time, with typing dots in between, so you never watch a message type itself out.

Dark mode with the Tails shape and a blue color for my own messages. Each paragraph, in replies and in what I send, gets its own bubble.

Light mode with the Tails shape and a blue color for my own messages. Each paragraph, in replies and in what I send, gets its own bubble.

Mid-reply: finished messages show right away, and typing dots hold the place of the next one.

Code blocks and tables get bubbles too. Code keeps Open WebUI's colors and its Copy button.

With my Message Loading Indicator function installed, the style you picked (here, Equalizer) shows in the bubble while the reply waits for its first word.

Bubble Shape: Rounded.

Bubble Shape: Grouped. Bubbles sent in a row get tighter corners, so they read as one turn.

Bubble Shape: Tails. Grouped, plus a tail on the last bubble, like a phone's messaging app.

The same thing at phone width, in Open WebUI's mobile layout.

Phone width, dark mode.

Phone width, light mode.

Each person picks their own reply color, message color and bubble shape under Settings > Interface. Saved in their browser.

Texting Bubbles valves: default colors and shape for everyone, which models get bubbles, splitting your own messages, and the typing pause timing.

Texting Bubbles Filter valves: turn the texting instruction on or off, edit it, and Split Short Lines for models that already text.

reddit.com
u/Silentoplayz — 12 days ago

M20 3.0 Battery - Out of Stock

Does anyone know when the M20 3.0 battery will be available to purchase again? July has already passed. I certainly hope they don't expect it to be available separately from the bike itself until July 2027!

u/Silentoplayz — 1 month ago

Theme Designer Pro — Preset Gallery is now on GitHub

Since sharing Theme Designer Pro here a few weeks ago, I've been building out a preset repository so you don't have to start from scratch.

🔗 github.com/silentoplayz/theme-designer-pro-presets

It's a collection of themes, Canvas FX animations, CSS presets, and gradient packs, all importable directly through Theme Designer Pro's Import button or via drag-and-drop.

What's in the repo:

  • Themes — full multi-mode color schemes (dark, light, OLED, her) with custom CSS and Canvas FX baked in
  • Canvas FX — standalone background animations you can mix into any theme
  • CSS Presets — standalone style overrides (glassmorphism, typography, layout tweaks)
  • Gradients — static and animated gradient backgrounds in linear, radial, and mesh types
  • Bundles — combined files for importing multiple presets at once, including an everything.json that loads the entire gallery

Each theme includes an updateUrl pointing to its raw file on GitHub, so Theme Designer Pro can check for newer versions. The repo has JSON Schema validation on every push and PR, along with contribution templates and a contributing guide.

A note on quality: The gallery is still a work in progress. Not every preset has been fully reviewed yet. Some Canvas FX scripts, CSS presets, gradients, and themes may not meet the bar I'm aiming for. I'm actively curating, but it takes time. I'm very much aware that a smaller gallery of great presets beats a large gallery of mixed quality.

With that said, I'd love to see what you've made. If you've been using Theme Designer Pro and have a theme you're happy with, the easiest way to contribute is the Theme Submission form — no git required. Just paste your exported JSON and a bot validates it and opens a PR for you. For Canvas FX, CSS, or gradients, the repo has PR templates that walk you through it. I haven't seen anyone share their creations yet, and I know there are some good ones out there.

github.com
u/Silentoplayz — 4 months ago

I got tired of manually configuring every Ollama model in Open WebUI, so I vibecoded a tool that generates it all from the API metadata.

Every time you pull a new Ollama model, it shows up in Open WebUI as something like hf.co/unsloth/Qwen3-VL-8B-Instruct-1M-GGUF:Q8_K_XL. No description, no tags, no display name, no suggestion prompts, no profile image. Manually setting all of that up for one model is tedious. Doing it for 30+ models is painful.

Ollama Model Card Generator is an admin tool that queries the Ollama API for every installed model's metadata and uses it to auto-populate everything: descriptions, human-readable names, capability tags, inference parameters, system prompts, suggestion prompts, profile images, and more. One chat message. All your models. Fully configured.

Here's what it does:

🪪 Rich Model Cards

Generates detailed model cards from Ollama's /api/show metadata, including architecture, parameter count, context length, quantization, capabilities, inference defaults, system prompt, template, license, token IDs, and digest. Cards use inline markdown (bold, code, emoji section headers) and render cleanly in Open WebUI's description tooltip.

✏️ Smart Display Names

Converts raw model IDs into clean, human-readable names with intelligent rules:

Raw ID Display Name
hf.co/unsloth/Qwen3-VL-8B-Instruct-1M-GGUF:Q8_K_XL Qwen3 VL 8B 1M (Q8_K_XL)
gemma4:26b-a4b-it-q4_K_M Gemma 4 26B A4B IT (Q4_K_M)
deepseek-r1:14b DeepSeek R1 14B
nomic-embed-text:latest Nomic Embed Text

Strips HuggingFace paths, user prefixes, -GGUF suffixes, :latest tags, and the instruct keyword. Splits version numbers (gemma4 → Gemma 4). Smart-cases acronyms (VL, QAT, DPO, MoE). Extracts quantization into parentheses with a toggle to hide it.

🏷️ Auto-Tagging (20+ Tag Types)

Detects and applies tags from multiple sources:

  • Capabilities: Vision, Thinking, Tools, Code, Completion, Embedding
  • Structure: MoE, Long Context (≥100K), Quantized, Instruct, Chat, Reasoning, Abliterated
  • Vendors: Google, Meta, Qwen, DeepSeek, Microsoft, Mistral, IBM, NVIDIA, Cohere, AI2, and 10+ more
  • Sources: Unsloth, Bartowski, OpenBMB, Huihui AI, HuggingFace

Tags merge with existing ones by default, so nothing gets accidentally overwritten.

⚡ Auto-Configuration

Beyond model cards and tags, the tool auto-populates:

  • Capability flags: Vision on/off, usage reporting
  • Inference parameters: num_ctx, temperature, stop tokens extracted from the Ollama Modelfile. Also sets function_calling: native for tool-capable models and reasoning_tags: true for thinking models
  • System prompt: Extracted from the Modelfile and populated independently (has its own overwrite valve)
  • Suggestion prompts: Capability-aware clickable starters. Vision models get image prompts, code models get code prompts, thinking models get reasoning prompts, and all chat models get general prompts
  • Profile images: Matched from a local directory by vendor tag, with subdirectory support for model-specific icons (e.g., mistral/nemo.png beats generic mistral.jpg for Mistral Nemo)
  • Embedding models: Auto-hidden from the chat selector
  • Sharded models: Auto-disabled (BF16/F16 vision models with split GGUF files that Ollama can't load)

🏗️ Workspace Model Creation

Create fully-enriched workspace models that wrap your raw Ollama models:

  • Workspace ID: {model_id} (Workspace) with base_model_id pointing to the original
  • Inherits the full model card, tags, capabilities, params, system prompt, display name, suggestion prompts, and profile image
  • Optionally auto-hides the raw base model from the selector
  • Batch mode: create workspace models for all installed models at once

🔒 26 Valves, Full Control

Every feature is independently toggleable. Every auto-configuration has an overwrite_* companion valve that's off by default, so existing customizations are never accidentally replaced. You can preview everything with generate_model_card before committing anything to the database. There's also a show_status_updates valve if you want it to run silently.

⚠️ Read This Before Running

This tool writes directly to your Open WebUI database. The apply_* and create_* functions will modify model entries (descriptions, names, tags, params, system prompts, and more). If you've spent time hand-tuning your model configurations, running this without understanding the valves can undo that work.

A few things to keep in mind:

  • Preview first. Use generate_model_card or generate_all_model_cards to see what the tool would generate without touching the database.
  • Overwrite valves are off by default. The tool won't replace existing descriptions, tags, names, params, or system prompts unless you explicitly enable the corresponding overwrite_* valve. But it will fill in anything that's currently blank.
  • The LLM decides which tool to call. If you say "set up all my models" and the tool is enabled, the model may call apply_all_model_cards on its own. Be specific about what you're asking for.
  • There's no undo. Once the tool writes to the database, there's no built-in rollback. If you're unsure, start with a single model (apply_model_card) before running the batch version.

🚀 Quick Start

  1. Install from Open WebUI Community (or import the tool manually under Workspace → Tools)
  2. Enable the tool on any model under Workspace → Models → [model] → Tools
  3. (Optional) Set profile_image_dir in valves to a folder with vendor icons
  4. Chat as admin: "Apply model cards to all installed Ollama models"
  5. Done. Every model now has a description, display name, tags, params, and more.

For workspace models: "Create workspace models for all installed Ollama models"

MIT Licensed · Zero external dependencies · Admin-only access · 6 tool functions · 26 configurable valves

If you're managing a bunch of Ollama models and tired of configuring each one by hand, give it a try. Feedback and feature requests welcome. 🙏

Tool Page · Buy me a coffee

reddit.com
u/Silentoplayz — 5 months ago

Open WebUI doesn't look like this by default. (Theme Designer Pro v1.5.2)

Since then, I mass-updated the tool and it's become an entirely different beast. v1.5.2 is a full-blown theming IDE that lives inside a single Open WebUI tool. Zero external dependencies. No Docker rebuilds. Just ask your AI to "launch the theme designer" and it appears.

Here's what's new since v1.2:

🎨 Gradient Background Builder (NEW)

Design rich CSS gradient backgrounds with a visual builder, linear or radial types, draggable color stops, adjustable intensity, and optional smooth animation. Comes with 12 built-in gradient presets (Midnight, Aurora, Neon, etc.). The gradient layer integrates with the structural transparency system so your UI panels become semi-transparent over the gradient.

🎇 Canvas FX Animations (MASSIVE UPGRADE)

Inject interactive JavaScript animations directly into the background of Open WebUI. Animations run on a dedicated Background Web Worker using OffscreenCanvas for zero-lag performance. Includes an iframe mouse-event bridge so animations respond to your cursor even when hovering over the tool's own interface. Save/load/export animation scripts from a built-in preset gallery.

🔄 OTA Theme Update System (NEW)

Themes can now include a Theme Update URL pointing to a remote JSON file. Hit the ⟳ button (or the global "Updates" header button) to check all your themes at once. The tool performs a semantic version comparison and shows you current vs. available version, author, and changelog — then lets you one-click update. This is the foundation for a community theme ecosystem.

🌐 Community Theme Import via URL (NEW)

Import themes directly from the web. Paste a URL to a remote theme.json file (e.g., a GitHub raw link) and the tool fetches, validates, checks for duplicates, and adds it to your library. Combined with OTA updates, this means you can subscribe to someone's theme and stay current.

🎯 Manual Variable Overrides Editor (NEW)

A brand new raw CSS code editor in the Style Overrides tab that lets you write CSS custom property declarations directly (e.g. --color-gray-800: #1a1a2e;). These are injected after the generated palette for maximum priority. Each mode has its own separate overrides, and the library shows an "Overrides" tag on themes that use it.

📦 JSON Viewer & Clipboard Import

  • JSON View button in the header shows your full theme state as formatted JSON with Copy/Collapse controls.
  • Ctrl+V with JSON on your clipboard triggers an import dialog with automatic structure detection, duplicate checking, and a security warning for embedded Canvas FX scripts.

🔍 Theme Library Overhaul

  • Search by name, author, or description
  • Tag Filter — show only themes with Custom CSS, Canvas FX, Manual Overrides, or URL-linked themes
  • Sort — Default, A→Z, Z→A
  • Rich Tooltips — hover any theme card to see name, version, author, description, and color-coded feature tags
  • Duplicate Detection on all import paths (file, URL, clipboard)

👩‍💻 IDE-Grade Code Editor

The Custom CSS, Canvas FX, and Manual Overrides editors now feature Tab trapping (2-space indent), smart auto-indentation, auto-closing pairs (brackets, quotes, parentheses), and a synced line number gutter.

🔄 Selective Sync Upgrades

The sync modal now includes Gradient Background as a syncable option (alongside Palette, Overrides, CSS, Canvas, and Auth Visibility). Each option shows colored delta badges indicating what actually differs between modes.

Other Improvements

  • Auth page theming now supports Gradient Backgrounds
  • Tonal ramp click-to-copy
  • Full keyboard shortcuts: Ctrl+Z/Y undo/redo, Ctrl+V image paste extraction, Escape close modals, Enter confirm actions, double-click slider labels to reset

Quick Start (30 seconds)

  1. Install the tool from https://openwebui.com/posts/theme_designer_pro_49fac49a
  2. Go to Settings → Admin Settings → Interface → Artifacts → Toggle ON iframe Sandbox: Allow Same Origin
  3. In any chat, ask your AI: "Launch the Theme Designer"
  4. Done. Your themes persist across page refreshes and container restarts via a lightweight bootloader.

MIT Licensed · No external dependencies · All data stored in browser localStorage (never touches your backend)

If you've built any cool themes, drop them in the comments. I'd love to see what people create. And if you have feature requests, I'm all ears. 🙏

Previous post (v1.2) · Tool Page · Buy me a coffee

u/Silentoplayz — 5 months ago