> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blobhub.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Widgets

> Mapping interactive UI components mapped natively into Playgrounds.

While Workflow Definitions utilize invisible, programmatic backend Components, Playground Definitions are constructed using visually interactive **Widgets**. These widgets run directly in the user interface, reacting to human input or live data streams.

Every widget adheres to a strict interface mapped natively inside the BlobHub frontend. Below is an overview of the supported taxonomy of interactive widgets natively powered by BlobHub.

## Widget Taxonomy

### Data (`widget.message*`, `widget.html`)

Widgets intentionally focused on rendering discrete variables and histories outputted by AI workflows.

* `widget.message`: Singularly renders one complete message object payload (ideal for rendering a final output response). Supports Markdown, JSON, and Raw views.
* `widget.messages`: Capable of mapping and rendering an entire chronological array of message objects dynamically as a scrolling list.
* `widget.html`: Renders a standalone HTML document carried in a `message` session object (its first text content) inside a sandboxed iframe (`allow-scripts`, never `allow-same-origin`).

### Controls (`widget.chat`)

Interactive widgets granting user control over data injection straight into active workflow endpoints or components.

* `widget.chat`: A rich text entry prompt featuring a submission button. Specifically designed to dispatch user messages dynamically to a nominated `workflow_alias` running an agent or chat session.

### Session Objects (`widget.thread`, `widget.graph`)

Widgets that bind to live session objects and render their state in real time.

* `widget.thread`: Renders an append-only thread of messages with live tail. Displays items as they are posted to the thread session object, supporting Markdown, JSON, and Raw views.
* `widget.graph`: Renders an interactive property graph with configurable layout and traversal. Binds to a graph session object and supports complete or subset display modes.

### Financial (`widget.tradingview`)

Targeted components for financial developers and analytical traders.

* `widget.tradingview`: Instantiates a fully functional instance of TV's charting library bound directly to streaming market data or historical symbols provided.

***

## `widget.thread`

Renders an append-only thread of messages with live tail. Items posted to the bound thread session
object appear in the widget in real time as they arrive.

| Port           | Type                                  | Description                                                         |
| -------------- | ------------------------------------- | ------------------------------------------------------------------- |
| `thread`       | `component_alias`                     | The component whose output is the thread session object to display. |
| `content_view` | `choice`: `raw` / `markdown` / `json` | Rendering mode for message content. Default: `markdown`.            |
| `width`        | `integer` (100–2000, step 50)         | Widget width in pixels. Default: `600`.                             |
| `height`       | `integer` (100–2000, step 50)         | Widget height in pixels. Default: `600`.                            |

***

## `widget.graph`

Renders an interactive property graph backed by a graph session object. Supports complete-graph
display or seed-based subset traversal, with a choice of automatic layout algorithms.

| Port               | Type                                                     | Description                                                                                   |
| ------------------ | -------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| `graph`            | `component_alias`                                        | The component whose output is the graph session object to display.                            |
| `start_mode`       | `choice`: `complete` / `subset`                          | Whether to show the full graph or a traversal subset from a seed vertex. Default: `complete`. |
| `seed`             | `text`                                                   | Starting vertex `element_id` for subset traversal. Used only when `start_mode` is `subset`.   |
| `expand_direction` | `choice`: `out` / `in` / `both`                          | Edge direction to follow during subset traversal. Default: `both`.                            |
| `layout`           | `choice`: `force` / `hierarchical` / `grid` / `circular` | Graph layout algorithm. Default: `force`.                                                     |
| `width`            | `integer` (100–2000, step 50)                            | Widget width in pixels. Default: `800`.                                                       |
| `height`           | `integer` (100–2000, step 50)                            | Widget height in pixels. Default: `600`.                                                      |