mirror of
https://github.com/open-webui/docs
synced 2025-06-16 11:28:36 +00:00
Update filter.mdx
This commit is contained in:
parent
3d04ba0c94
commit
d845b844aa
@ -68,6 +68,52 @@ class Filter:
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
### 🆕 🧲 Toggle Filter Example: Adding Interactivity and Icons (New in Open WebUI 0.6.10)
|
||||||
|
|
||||||
|
Filters can do more than simply modify text—they can expose UI toggles and display custom icons. For instance, you might want a filter that can be turned on/off with a user interface button, and displays a special icon in Open WebUI’s message input UI.
|
||||||
|
|
||||||
|
Here’s how you could create such a toggle filter:
|
||||||
|
|
||||||
|
```python
|
||||||
|
from pydantic import BaseModel, Field
|
||||||
|
from typing import Optional
|
||||||
|
|
||||||
|
class Filter:
|
||||||
|
class Valves(BaseModel):
|
||||||
|
pass
|
||||||
|
|
||||||
|
def __init__(self):
|
||||||
|
self.valves = self.Valves()
|
||||||
|
self.toggle = True
|
||||||
|
# TIP: Use SVG Data URI!
|
||||||
|
self.icon = """data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS02Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiAxOHYtNS4yNW0wIDBhNi4wMSA2LjAxIDAgMCAwIDEuNS0uMTg5bS0xLjUuMTg5YTYuMDEgNi4wMSAwIDAgMS0xLjUtLjE4OW0zLjc1IDcuNDc4YTEyLjA2IDEyLjA2IDAgMCAxLTQuNSAwbTMuNzUgMi4zODNhMTQuNDA2IDE0LjQwNiAwIDAgMS0zIDBNMTQuMjUgMTh2LS4xOTJjMC0uOTgzLjY1OC0xLjgyMyAxLjUwOC0yLjMxNmE3LjUgNy41IDAgMSAwLTcuNTE3IDBjLjg1LjQ5MyAxLjUwOSAxLjMzMyAxLjUwOSAyLjMxNlYxOCIgLz4KPC9zdmc+Cg=="""
|
||||||
|
pass
|
||||||
|
|
||||||
|
async def inlet(
|
||||||
|
self, body: dict, __event_emitter__, __user__: Optional[dict] = None
|
||||||
|
) -> dict:
|
||||||
|
await __event_emitter__(
|
||||||
|
{
|
||||||
|
"type": "status",
|
||||||
|
"data": {
|
||||||
|
"description": "Toggled!!",
|
||||||
|
"done": True,
|
||||||
|
"hidden": False,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
return body
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 🖼️ What’s happening?
|
||||||
|
- **toggle = True** creates a switch UI in Open WebUI—users can manually enable or disable the filter in real time.
|
||||||
|
- **icon** (with a Data URI) will show up as a little image next to the filter’s name. You can use any SVG as long as it’s Data URI encoded!
|
||||||
|
- **The `inlet` function** uses the `__event_emitter__` special argument to broadcast feedback/status to the UI, such as a little toast/notification that reads "Toggled!!"
|
||||||
|
|
||||||
|
You can use these mechanisms to make your filters dynamic, interactive, and visually unique within Open WebUI’s plugin ecosystem.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### 🎯 Key Components Explained
|
### 🎯 Key Components Explained
|
||||||
|
|
||||||
#### 1️⃣ **`Valves` Class (Optional Settings)**
|
#### 1️⃣ **`Valves` Class (Optional Settings)**
|
||||||
|
Loading…
Reference in New Issue
Block a user