OmniBox
Description
An omnibox search component
Omnibox provides a powerful input field for switching between a chat and a search interaction. For search, it also provides support for parsing and visual rendering of logical operators like AND, OR, NOT, parenthesis, and quotes.
Samples
Search (with FileDropArea)
Chat
Chat with locked model
Search & Chat
API reference
public class OmniBox : IComponent, IHasBackgroundColor, ITabIndexA heavyweight omni-search / autocomplete component with inline filter chips, multiple search modes (search/chat) and async value providers.
- Namespace
- Tesserae
- Implements
- IComponent, IHasBackgroundColor, ITabIndex
Constructors
| Name | Description |
|---|---|
| OmniBox | Initializes a new instance of this class. |
Properties
| Name | Description |
|---|---|
| InlineFilterChips | Gets or sets the inline filter chips. |
| CurrentSearchQuery | What the box says right now, parsed - the same SearchQuery pressing Enter would raise, chips included. For a host that answers as the query is typed rather than on Enter. |
| ContextToAdd | Gets the cards currently shown in the context row, in the order they were added. |
| HasContextToAdd | Returns a value indicating whether the context row currently holds any card. |
| SelectedModel | Gets or sets the selected model. |
| ActiveMode | Which half of a SearchAndChat box is showing. Setting it switches the box and moves its own toggle with it, so a host that drives the mode from somewhere else - a control in a page header - and the box never disagree. On a box that is only search or only chat this is that mode and setting it does nothing. |
| ActiveModeObservable | Follows ActiveMode - what a host with a mode control of its own, or a header that shows different things in each mode, listens to. |
| SelectedThinkingEffort | Gets or sets the selected thinking effort. |
| IsModelLocked | Returns a value indicating whether the component is model locked. |
| IsGenerating | Returns a value indicating whether the component is generating. |
| AllowSendWhileGenerating | Gets or sets whether a message typed while IsGenerating is set is sent instead of the trigger stopping the reply in flight — for a host that queues it for the turn in progress. The trigger still offers "stop" while the input is empty. |
| GeneratingText | Gets or sets the label shown next to the spinner while generating (defaults to "Generating"). The elapsed time is appended after it, e.g. "Generating, 1m 25s". Setting it updates the footer immediately when a generation is in progress. |
| TabIndex | Sets the keyboard tab order of the component. |
| IsEnabled | Gets or sets a value indicating whether the component is interactive (enabled). |
| SearchText | Gets or sets the search text. |
| ChatText | Gets or sets the chat text. |
| SearchPlaceholder | Gets or sets the search placeholder. |
| ChatPlaceholder | Gets or sets the chat placeholder. |
| Background | Gets or sets the CSS background of the component. |
public ObservableList<InlineFilterChip> InlineFilterChips { get; }Gets or sets the inline filter chips.
public SearchQuery CurrentSearchQueryWhat the box says right now, parsed - the same SearchQuery pressing Enter would raise, chips included. For a host that answers as the query is typed rather than on Enter.
public IReadOnlyList<ContextCard> ContextToAddGets the cards currently shown in the context row, in the order they were added.
public bool HasContextToAddReturns a value indicating whether the context row currently holds any card.
public Mode ActiveMode { get ; set ; }Which half of a SearchAndChat box is showing. Setting it switches the box and moves its own toggle with it, so a host that drives the mode from somewhere else - a control in a page header - and the box never disagree. On a box that is only search or only chat this is that mode and setting it does nothing.
public IObservable<Mode> ActiveModeObservableFollows ActiveMode - what a host with a mode control of its own, or a header that shows different things in each mode, listens to.
public ThinkingEffort SelectedThinkingEffortGets or sets the selected thinking effort.
public bool IsModelLockedReturns a value indicating whether the component is model locked.
public bool IsGenerating { get ; set ; }Returns a value indicating whether the component is generating.
public bool AllowSendWhileGenerating { get ; set ; }Gets or sets whether a message typed while IsGenerating is set is sent instead of the trigger stopping the reply in flight — for a host that queues it for the turn in progress. The trigger still offers "stop" while the input is empty.
public string GeneratingText { get ; set ; }Gets or sets the label shown next to the spinner while generating (defaults to "Generating"). The elapsed time is appended after it, e.g. "Generating, 1m 25s". Setting it updates the footer immediately when a generation is in progress.
public bool IsEnabled { get ; set ; }Gets or sets a value indicating whether the component is interactive (enabled).
public string SearchPlaceholder { get ; set ; }Gets or sets the search placeholder.
public string ChatPlaceholder { get ; set ; }Gets or sets the chat placeholder.
Methods
| Name | Description |
|---|---|
| ParseQuery | Parses the query. |
| RegisterSnap | Registers a snap-handler that can convert recognized input into an inline filter chip. |
| RegisterSnaps | Registers multiple snap-handlers in one call. |
| RegisterFilterSnap | Registers a filter snap handler that creates an inline filter chip. |
| RegisterFilterSnaps | Registers multiple filter snap handlers in one call. |
| EnableChatMentions | Enables an "@mention" style inline picker in the chat input: typing Trigger (default @) at a word boundary shows a picker anchored at the text caret, live-filters as more is typed, and forwards Arrow Up/Down, Enter/Tab and Escape to the callbacks below. This is a thin, UI-agnostic hook — wire it up to any anchored picker (for example a ToolAgentSelector via its ShowInlineAt/Filter/ MoveHighlight/ActivateHighlighted methods). |
| WithContextToAdd | Shows the given ContextCards as the context that will go with the next message, in a wrapping row inside the box just below the input and above the footer. Chat modes only. Each card's remove button is wired to this row, so the (x) takes the card out of the box (any handler the caller registered with OnRemove still runs, which is where the underlying context gets dropped). A card that should not be removable can call NoRemove after being handed over. The row is left alone when a message is sent - call ClearContext from the chat handler to empty it. |
| AddContext | Adds one more card to the context row, keeping the cards already there. |
| RemoveContext | Takes one card out of the context row. Does nothing if the card isn't in it. |
| ClearContext | Empties the context row. Call it from the chat handler once the context has been sent along with the message. |
| CaretClientX | The viewport-relative horizontal position of the text caret in whichever input is currently active (the search box or the chat box), clamped to that input's bounds. Returns double.NaN when there is no active input to measure — for example before the OmniBox has been rendered. |
| OnSearch | Registers a callback invoked when the search event fires. |
| OnChat | Registers a callback invoked when the chat event fires. |
| OnStop | Registers a callback invoked when the stop event fires. |
| OnModelChanged | Registers a callback invoked when the model changed event fires. |
| SetModels | Sets the models of the component. |
| LockModel | Locks the OmniBox to the given model option so users cannot pick another. |
| SetThinkingEffort | Sets the thinking effort of the component. |
| NoModeToggle | Takes the Search/Chat toggle out of the box's own footer, for a host that puts one somewhere of its own. ActiveMode still switches the box, and still reports which half is showing. |
| OnInput | Registers a callback invoked when the input event fires. |
| OnKeyDown | Registers a callback invoked when the key down event fires. |
| OnKeyUp | Registers a callback invoked when the key up event fires. |
| OnKeyPress | Registers a callback invoked when the key press event fires. |
| OnFocus | Registers a callback invoked when the focus event fires. |
| OnBlur | Registers a callback invoked when the blur event fires. |
| WithHistory | Returns the component configured with the given history. |
| WithHelp | Enables a help button next to the search input that opens a popup listing the registered filter snaps (and snaps), each with the trigger word and an example value (or the description as a fallback). When showSyntax is true, the popup also includes a "Query syntax" section describing the boolean operators (AND, OR, NOT), grouping with parentheses, and exact-phrase quoting, with a short example next to each. Recent searches are reached via the separate history button configured with WithHistory. |
| WithAskAI | Adds a primary-styled action button at the end of the search input — the way out of a search that isn't finding it, over to whatever answers the question instead. The button follows the box's roundness, so a box made round with Rounded gets a pill. Search modes only: in SearchAndChat the button sits at the end of the footer and hides itself while the box is in chat mode. Calling this again updates the button that is already there; passing a null or empty text hides it. |
| Render | Renders the component's root HTML element. |
| SetKeyboardShortcut | Registers a global keyboard shortcut that focuses the OmniBox search input when pressed, and renders a visual chip showing the shortcut on the right side of the search box. In SearchAndChat mode, pressing the shortcut also switches the active mode to Search. Modifier names are case-insensitive ("Ctrl", "Cmd", "Meta", "Alt", "Shift"). Example: SetKeyboardShortcut("Ctrl", "K"). |
| SetSearchRightText | Sets the search right text of the component. |
| SetSearchText | Sets the search text of the component. |
| SetSearchPlaceholder | Sets the search placeholder of the component. |
| SetChatText | Sets the chat text of the component. |
| SetChatPlaceholder | Sets the chat placeholder of the component. |
| SetChatHeader | Replaces the component rendered inside the box above the chat input — the place for whatever the message is being written against, e.g. a compact ContextCards group of the attached documents. Passing null empties the slot, which then takes up no space. |
| Rounded | Renders the box with rounded corners (defaults to a fully rounded "pill" shape). The radius carries over to everything that meets the box's outline — the search container, the buttons at its ends and the "Ask AI" button added with WithAskAI — and the pill shape also drops the vertical dividers between them, so the contents sit inside the curve. |
| Disabled | Disables the component. |
| Focus | Moves keyboard focus to the component. |
| Height | Gets or sets the CSS height of the component. |
| H | Shortcut for setting the height in pixels. |
public static SearchQuery ParseQuery(string input, bool tokenIgnoreCase = false)Parses the query.
public OmniBox RegisterSnap(SnapHandler snap)Registers a snap-handler that can convert recognized input into an inline filter chip.
public OmniBox RegisterSnaps(params SnapHandler[] snaps)Registers multiple snap-handlers in one call.
public OmniBox RegisterFilterSnap(FilterSnapHandler filter)Registers a filter snap handler that creates an inline filter chip.
public OmniBox RegisterFilterSnaps(params FilterSnapHandler[] filters)Registers multiple filter snap handlers in one call.
public OmniBox EnableChatMentions(ChatMention mention)Enables an "@mention" style inline picker in the chat input: typing Trigger (default @) at a word boundary shows a picker anchored at the text caret, live-filters as more is typed, and forwards Arrow Up/Down, Enter/Tab and Escape to the callbacks below. This is a thin, UI-agnostic hook — wire it up to any anchored picker (for example a ToolAgentSelector via its ShowInlineAt/Filter/ MoveHighlight/ActivateHighlighted methods).
| Overload | |
|---|---|
| WithContextToAdd(ContextCard[]) | Shows the given ContextCards as the context that will go with the next message, in a wrapping row inside the box just below the input and above the footer. Chat modes only. Each card's remove button is wired to this row, so the (x) takes the card out of the box (any handler the caller registered with OnRemove still runs, which is where the underlying context gets dropped). A card that should not be removable can call NoRemove after being handed over. The row is left alone when a message is sent - call ClearContext from the chat handler to empty it. |
| WithContextToAdd(IEnumerable<ContextCard>) | Shows the given context cards as the context for the next message, replacing whatever the row held before. |
WithContextToAdd(ContextCard[])
public OmniBox WithContextToAdd(params ContextCard[] context)Shows the given ContextCards as the context that will go with the next message, in a wrapping row inside the box just below the input and above the footer. Chat modes only. Each card's remove button is wired to this row, so the (x) takes the card out of the box (any handler the caller registered with OnRemove still runs, which is where the underlying context gets dropped). A card that should not be removable can call NoRemove after being handed over. The row is left alone when a message is sent - call ClearContext from the chat handler to empty it.
Parameters
- context ContextCard[]
public OmniBox AddContext(ContextCard card)Adds one more card to the context row, keeping the cards already there.
public OmniBox RemoveContext(ContextCard card)Takes one card out of the context row. Does nothing if the card isn't in it.
public OmniBox ClearContext()Empties the context row. Call it from the chat handler once the context has been sent along with the message.
public double CaretClientX()The viewport-relative horizontal position of the text caret in whichever input is currently active (the search box or the chat box), clamped to that input's bounds. Returns double.NaN when there is no active input to measure — for example before the OmniBox has been rendered.
Remarks
Used by companions that want to track where the user is typing, e.g. PixelAvatar attached with AttachTo.
public OmniBox OnSearch(SearchEventHandler onSearch)Registers a callback invoked when the search event fires.
public OmniBox OnChat(ChatEventHandler onChat)Registers a callback invoked when the chat event fires.
public OmniBox OnStop(StopEventHandler onStop)Registers a callback invoked when the stop event fires.
public OmniBox OnModelChanged(ModelChangedEventHandler onModelChanged)Registers a callback invoked when the model changed event fires.
| Overload | |
|---|---|
| SetModels(ModelOption[]) | Sets the models of the component. |
| SetModels(IEnumerable<ModelOption>) | Sets the models of the component. |
public OmniBox LockModel(ModelOption model)Locks the OmniBox to the given model option so users cannot pick another.
public OmniBox SetThinkingEffort(ThinkingEffort effort)Sets the thinking effort of the component.
public OmniBox NoModeToggle()Takes the Search/Chat toggle out of the box's own footer, for a host that puts one somewhere of its own. ActiveMode still switches the box, and still reports which half is showing.
public OmniBox OnInput(ComponentEventHandler<OmniBox, Event> onInput)Registers a callback invoked when the input event fires.
public OmniBox OnKeyDown(ComponentEventHandler<OmniBox, KeyboardEvent> onKeyDown)Registers a callback invoked when the key down event fires.
public OmniBox OnKeyUp(ComponentEventHandler<OmniBox, KeyboardEvent> onKeyUp)Registers a callback invoked when the key up event fires.
public OmniBox OnKeyPress(ComponentEventHandler<OmniBox, KeyboardEvent> onKeyPress)Registers a callback invoked when the key press event fires.
public OmniBox OnFocus(ComponentEventHandler<OmniBox, Event> onFocus)Registers a callback invoked when the focus event fires.
public OmniBox OnBlur(ComponentEventHandler<OmniBox, Event> onBlur)Registers a callback invoked when the blur event fires.
public OmniBox WithHistory(Func<Task<SearchQuery[]>> historyFetcher)Returns the component configured with the given history.
public OmniBox WithHelp(bool showSyntax = false)Enables a help button next to the search input that opens a popup listing the registered filter snaps (and snaps), each with the trigger word and an example value (or the description as a fallback). When showSyntax is true, the popup also includes a "Query syntax" section describing the boolean operators (AND, OR, NOT), grouping with parentheses, and exact-phrase quoting, with a short example next to each. Recent searches are reached via the separate history button configured with WithHistory.
public OmniBox WithAskAI(string text = "Ask AI", UIcons icon = UIcons.Beacon, Action<OmniBox> onClick = null)Adds a primary-styled action button at the end of the search input — the way out of a search that isn't finding it, over to whatever answers the question instead. The button follows the box's roundness, so a box made round with Rounded gets a pill. Search modes only: in SearchAndChat the button sits at the end of the footer and hides itself while the box is in chat mode. Calling this again updates the button that is already there; passing a null or empty text hides it.
Parameters
- text
- The button label, e.g. "Ask AI".
- icon
- The icon shown before the label.
- onClick
- Called with this OmniBox when the button is clicked — read
SearchTextfrom it to know what was typed.
public OmniBox SetKeyboardShortcut(params string[] keys)Registers a global keyboard shortcut that focuses the OmniBox search input when pressed, and renders a visual chip showing the shortcut on the right side of the search box. In SearchAndChat mode, pressing the shortcut also switches the active mode to Search. Modifier names are case-insensitive ("Ctrl", "Cmd", "Meta", "Alt", "Shift"). Example: SetKeyboardShortcut("Ctrl", "K").
public OmniBox SetSearchRightText(string text)Sets the search right text of the component.
public OmniBox SetSearchText(string text)Sets the search text of the component.
public OmniBox SetSearchPlaceholder(string text)Sets the search placeholder of the component.
public OmniBox SetChatText(string text)Sets the chat text of the component.
public OmniBox SetChatPlaceholder(string text)Sets the chat placeholder of the component.
public OmniBox SetChatHeader(IComponent component)Replaces the component rendered inside the box above the chat input — the place for whatever the message is being written against, e.g. a compact ContextCards group of the attached documents. Passing null empties the slot, which then takes up no space.
public OmniBox Rounded(BorderRadius radius = BorderRadius.Full)Renders the box with rounded corners (defaults to a fully rounded "pill" shape). The radius carries over to everything that meets the box's outline — the search container, the buttons at its ends and the "Ask AI" button added with WithAskAI — and the pill shape also drops the vertical dividers between them, so the contents sit inside the curve.
Parameters
- radius
- The border radius to apply. Defaults to
Full.
public OmniBox Height(UnitSize unitSize)Gets or sets the CSS height of the component.
Events
| Name | Description |
|---|---|
| Stopped | Raised when stopped occurs. |
| Input | Raised when input occurs. |
| KeyDown | Raised when key down occurs. |
| KeyUp | Raised when key up occurs. |
| KeyPress | Raised when key press occurs. |
| ReceivedFocus | Raised when received focus occurs. |
| LostFocus | Raised when lost focus occurs. |
public event ComponentEventHandler<OmniBox, KeyboardEvent> KeyDownRaised when key down occurs.
public event ComponentEventHandler<OmniBox, KeyboardEvent> KeyUpRaised when key up occurs.
public event ComponentEventHandler<OmniBox, KeyboardEvent> KeyPressRaised when key press occurs.
public event ComponentEventHandler<OmniBox, Event> ReceivedFocusRaised when received focus occurs.
ToolAgentSelector
A trigger button with a searchable popup for enabling agents and tools, grouped under "Agents" and "Tools" sections, with a count badge on the trigger. It is meant for one of OmniBox.FooterItems's slots, and can also be driven inline (ShowInlineAt) to back an "@mention" style picker inside a chat input.
public sealed class ToolAgentSelector : Layer<ToolAgentSelector>A trigger button with a searchable popup for enabling agents and tools, shown grouped under "Agents" and "Tools" sections. Selecting items updates a count badge on the trigger. Designed to be dropped into one of FooterItems's slots, and can also be driven inline (see ShowInlineAt) to back an "@mention" style picker inside a chat input.
- Namespace
- Tesserae
- Inheritance
- Layer<ToolAgentSelector> → ToolAgentSelector
Constructors
| Name | Description |
|---|---|
| ToolAgentSelector | Initializes a new instance of this class. |
Properties
| Name | Description |
|---|---|
| SelectedItems | Gets every currently selected item, agents first, then tools. |
| SelectedCount | Gets the number of currently selected items. |
public Item[] SelectedItemsGets every currently selected item, agents first, then tools.
Methods
| Name | Description |
|---|---|
| Render | Renders the component's root HTML element. |
| Agents | Sets the items shown under the "Agents" section (replaces any previously set). |
| Tools | Sets the items shown under the "Tools" section (replaces any previously set). |
| Compact | Hides item descriptions, rendering a denser list of icon + title rows only. |
| OnChange | Registers a callback invoked whenever the selection changes. |
| Show | Shows the popup anchored below the trigger button. |
| ShowInlineAt | Shows the popup anchored at an explicit viewport position (for example, next to a text caret), without moving focus or toggling the trigger button's pressed state. Used to back an "@mention" style picker. |
| Hide | Hides the popup. |
| Filter | Filters the visible items by the given free-text query (matches title or description). Used both by the built-in search box and externally, to drive the popup from an inline "@" mention as the user types. |
| MoveHighlight | Moves the keyboard-navigation highlight forward (positive) or backward (negative) among the currently visible items, wrapping around at either end. |
| ActivateHighlighted | Toggles the selection of the currently highlighted item (defaulting to the first visible item if none is highlighted yet). Returns true if an item was toggled. |
public override HTMLElement Render()Renders the component's root HTML element.
public ToolAgentSelector Agents(params Item[] items)Sets the items shown under the "Agents" section (replaces any previously set).
public ToolAgentSelector Tools(params Item[] items)Sets the items shown under the "Tools" section (replaces any previously set).
public ToolAgentSelector Compact(bool value = true)Hides item descriptions, rendering a denser list of icon + title rows only.
public ToolAgentSelector OnChange(Action<ToolAgentSelector> handler)Registers a callback invoked whenever the selection changes.
public override ToolAgentSelector Show()Shows the popup anchored below the trigger button.
public ToolAgentSelector ShowInlineAt(double clientX, double clientY)Shows the popup anchored at an explicit viewport position (for example, next to a text caret), without moving focus or toggling the trigger button's pressed state. Used to back an "@mention" style picker.
public ToolAgentSelector Filter(string text)Filters the visible items by the given free-text query (matches title or description). Used both by the built-in search box and externally, to drive the popup from an inline "@" mention as the user types.
public void MoveHighlight(int direction)Moves the keyboard-navigation highlight forward (positive) or backward (negative) among the currently visible items, wrapping around at either end.
Events
| Name | Description |
|---|---|
| SelectionChanged | Raised whenever an item's selected state changes. |