Tesserae - Omni Box

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.

API reference

class

OmniBox

public class OmniBox : IComponent, IHasBackgroundColor, ITabIndex

A heavyweight omni-search / autocomplete component with inline filter chips, multiple search modes (search/chat) and async value providers.

Constructors

Constructor

OmniBox

public OmniBox(Config config)

Initializes a new instance of this class.

Properties

Property

OmniBox.InlineFilterChips

public ObservableList<InlineFilterChip> InlineFilterChips { get; }

Gets or sets the inline filter chips.

Property

OmniBox.SelectedModel

public ModelOption SelectedModel

Gets or sets the selected model.

Property

OmniBox.SelectedThinkingEffort

public ThinkingEffort SelectedThinkingEffort

Gets or sets the selected thinking effort.

Property

OmniBox.IsModelLocked

public bool IsModelLocked

Returns a value indicating whether the component is model locked.

Property

OmniBox.IsGenerating

public bool IsGenerating { get ; set ; }

Returns a value indicating whether the component is generating.

Property

OmniBox.TabIndex

public int TabIndex { set ; }

Sets the keyboard tab order of the component.

Property

OmniBox.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets a value indicating whether the component is interactive (enabled).

Property

OmniBox.SearchText

public string SearchText { get ; set ; }

Gets or sets the search text.

Property

OmniBox.ChatText

public string ChatText { get ; set ; }

Gets or sets the chat text.

Property

OmniBox.SearchPlaceholder

public string SearchPlaceholder { get ; set ; }

Gets or sets the search placeholder.

Property

OmniBox.ChatPlaceholder

public string ChatPlaceholder { get ; set ; }

Gets or sets the chat placeholder.

Property

OmniBox.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Methods

Method

OmniBox.ParseQuery

public static SearchQuery ParseQuery(string input, bool tokenIgnoreCase = false)

Parses the query.

Method

OmniBox.RegisterSnap

public OmniBox RegisterSnap(SnapHandler snap)

Registers a snap-handler that can convert recognized input into an inline filter chip.

Method

OmniBox.RegisterSnaps

public OmniBox RegisterSnaps(params SnapHandler[] snaps)

Registers multiple snap-handlers in one call.

Method

OmniBox.RegisterFilterSnap

public OmniBox RegisterFilterSnap(FilterSnapHandler filter)

Registers a filter snap handler that creates an inline filter chip.

Method

OmniBox.RegisterFilterSnaps

public OmniBox RegisterFilterSnaps(params FilterSnapHandler[] filters)

Registers multiple filter snap handlers in one call.

Method

OmniBox.OnSearch

public OmniBox OnSearch(SearchEventHandler onSearch)

Registers a callback invoked when the search event fires.

Method

OmniBox.OnChat

public OmniBox OnChat(ChatEventHandler onChat)

Registers a callback invoked when the chat event fires.

Method

OmniBox.OnStop

public OmniBox OnStop(StopEventHandler onStop)

Registers a callback invoked when the stop event fires.

Method

OmniBox.OnModelChanged

public OmniBox OnModelChanged(ModelChangedEventHandler onModelChanged)

Registers a callback invoked when the model changed event fires.

Method

OmniBox.SetModels

public OmniBox SetModels(params ModelOption[] models)

Sets the models of the component.

Method

OmniBox.SetModels

public OmniBox SetModels(IEnumerable<ModelOption> models)

Sets the models of the component.

Method

OmniBox.LockModel

public OmniBox LockModel(ModelOption model)

Locks the OmniBox to the given model option so users cannot pick another.

Method

OmniBox.SetThinkingEffort

public OmniBox SetThinkingEffort(ThinkingEffort effort)

Sets the thinking effort of the component.

Method

OmniBox.OnInput

public OmniBox OnInput(ComponentEventHandler<OmniBox, Event> onInput)

Registers a callback invoked when the input event fires.

Method

OmniBox.OnKeyDown

public OmniBox OnKeyDown(ComponentEventHandler<OmniBox, KeyboardEvent> onKeyDown)

Registers a callback invoked when the key down event fires.

Method

OmniBox.OnKeyUp

public OmniBox OnKeyUp(ComponentEventHandler<OmniBox, KeyboardEvent> onKeyUp)

Registers a callback invoked when the key up event fires.

Method

OmniBox.OnKeyPress

public OmniBox OnKeyPress(ComponentEventHandler<OmniBox, KeyboardEvent> onKeyPress)

Registers a callback invoked when the key press event fires.

Method

OmniBox.OnFocus

public OmniBox OnFocus(ComponentEventHandler<OmniBox, Event> onFocus)

Registers a callback invoked when the focus event fires.

Method

OmniBox.OnBlur

public OmniBox OnBlur(ComponentEventHandler<OmniBox, Event> onBlur)

Registers a callback invoked when the blur event fires.

Method

OmniBox.WithHistory

public OmniBox WithHistory(Func<Task<SearchQuery[]>> historyFetcher)

Returns the component configured with the given history.

Method

OmniBox.Render

public HTMLElement Render()

Renders the component's root HTML element.

Method

OmniBox.SetKeyboardShortcut

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: .

Method

OmniBox.SetSearchRightText

public OmniBox SetSearchRightText(string text)

Sets the search right text of the component.

Method

OmniBox.SetSearchText

public OmniBox SetSearchText(string text)

Sets the search text of the component.

Method

OmniBox.SetSearchPlaceholder

public OmniBox SetSearchPlaceholder(string text)

Sets the search placeholder of the component.

Method

OmniBox.SetChatText

public OmniBox SetChatText(string text)

Sets the chat text of the component.

Method

OmniBox.SetChatPlaceholder

public OmniBox SetChatPlaceholder(string text)

Sets the chat placeholder of the component.

Method

OmniBox.Disabled

public OmniBox Disabled(bool value = true)

Disables the component.

Method

OmniBox.Focus

public OmniBox Focus()

Moves keyboard focus to the component.

Method

OmniBox.Height

public OmniBox Height(UnitSize unitSize)

Gets or sets the CSS height of the component.

Method

OmniBox.H

public OmniBox H(int unitSize)

Shortcut for setting the height in pixels.

Events

Event

OmniBox.Stopped

public event StopEventHandler Stopped

Raised when stopped occurs.

Event

OmniBox.Input

public event ComponentEventHandler<OmniBox, Event> Input

Raised when input occurs.

Event

OmniBox.KeyDown

public event ComponentEventHandler<OmniBox, KeyboardEvent> KeyDown

Raised when key down occurs.

Event

OmniBox.KeyUp

public event ComponentEventHandler<OmniBox, KeyboardEvent> KeyUp

Raised when key up occurs.

Event

OmniBox.KeyPress

public event ComponentEventHandler<OmniBox, KeyboardEvent> KeyPress

Raised when key press occurs.

Event

OmniBox.ReceivedFocus

public event ComponentEventHandler<OmniBox, Event> ReceivedFocus

Raised when received focus occurs.

Event

OmniBox.LostFocus

public event ComponentEventHandler<OmniBox, Event> LostFocus

Raised when lost focus occurs.

Samples

Search (with FileDropArea)

omni-box-search-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var attBtnForSearch = Button(UIcons.PaperclipVertical).Tooltip("Add attachment");
            var searchModeSample = OmniBox(new OmniBox.Config(OmniBox.Mode.Search)
            {
                PlaceholderSearch =    "Type something like: potato AND ( tomato OR banana) AND NOT apple",
                SearchFooter = new OmniBox.FooterItems
                {
                    LeftSide = new[]
                    {
                        Button(UIcons.Rocket).OnClick(() => Toast().Success("Lift off 🚀"))
                    },
                    RightSide = new[]
                    {
                        attBtnForSearch
                    }
                },
                SuggestionsFetcher = async (query) =>
                {
                    if (string.IsNullOrWhiteSpace(query)) return Array.Empty<OmniBox.OmniBoxSuggestionItem>();

                    await Task.Delay(150); // Simulate network

                    var items = new List<OmniBox.OmniBoxSuggestionItem>();
                    var q = query.ToLower();

                    if ("dataset / curiosity-prod".Contains(q) || "dataset / tesserae-docs".Contains(q) || "dataset / build-logs".Contains(q))
                    {
                        items.Add(new OmniBox.OmniBoxSuggestionItem(TextBlock("dataset / curiosity-prod"), Icon(UIcons.Table), Icon(UIcons.Check).Foreground(Theme.Primary.Foreground), null, "DATASETS"));
                        items.Add(new OmniBox.OmniBoxSuggestionItem(TextBlock("dataset / tesserae-docs"), Icon(UIcons.Table), null, null, "DATASETS"));
                        items.Add(new OmniBox.OmniBoxSuggestionItem(TextBlock("dataset / build-logs"), Icon(UIcons.Table), Icon(UIcons.Check).Foreground(Theme.Primary.Foreground), null, "DATASETS"));
                    }

                    items.Add(new OmniBox.OmniBoxSuggestionItem(TextBlock("a-model / Document.v3"), Icon(UIcons.Document), null, null, "SCHEMAS"));
                    items.Add(new OmniBox.OmniBoxSuggestionItem(TextBlock("a-model / Embedding.v1"), Icon(UIcons.Document), null, null, "SCHEMAS"));

                    return items.ToArray();
                }
            })
            .WS()
            .WithHistory(async () => {
                return new[]
                {
                    OmniBox.ParseQuery("apple"),
                    OmniBox.ParseQuery("orange"),
                    OmniBox.ParseQuery("tomato"),
                    OmniBox.ParseQuery("banana"),
                    OmniBox.ParseQuery("potato AND ( tomato OR banana) AND NOT apple"),
                };
            })
            .OnSearch((s, q) =>
            {
                Toast().Information($"Searched for: {q.RawQuery} (Parsed into {q.Tokens?.Count ?? 0} tokens)");
            })
            .SetSearchText("potato AND ( tomato OR banana) AND NOT apple");

            var fileDropAreaOnSearch = FileDropArea(searchModeSample).OnFilesDropped((s, files) =>
            {
                Toast().Information($"Dropped files on search box: {string.Join(", ", files.Select(f => f.name))}");
            }).SetAccepts("*");

            searchModeSample.InlineFilterChips.Add(new OmniBox.InlineFilterChip("Tag: Red", "var(--tss-danger-background-color)", "var(--tss-danger-foreground-color)"));
            searchModeSample.InlineFilterChips.Add(new OmniBox.InlineFilterChip("Author: Jules", onClick:(_)=> Toast().Success("hi!")));
            searchModeSample.InlineFilterChips.Add(new OmniBox.InlineFilterChip(Button("IComponent")));
            searchModeSample.SetSearchRightText("124 results");

            attBtnForSearch.OnClick((s, e) => fileDropAreaOnSearch.OpenFileSelection());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(Label("Search (with FileDropArea)").SetContent(fileDropAreaOnSearch.WS()));
        }
    }
}

Chat

omni-box-chat-sample.js

using System.Linq;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var attBtnForChat = Button(UIcons.PaperclipVertical).Tooltip("Add attachment");

            var chatModeSample = OmniBox(new OmniBox.Config(OmniBox.Mode.Chat)
            {
                PlaceholderChat = "Ask me anything",
                ChatFooter = new OmniBox.FooterItems
                {
                    LeftSide = new[]
                    {
                        Button(UIcons.Rocket).OnClick(() => Toast().Success("Lift off 🚀"))
                    },
                    RightSide = new[]
                    {
                        attBtnForChat
                    }
                }

            })
            .WS()
            .SetModels(
                new OmniBox.ModelOption("Opus 4.7"),
                new OmniBox.ModelOption("Opus 4.7", "1M"),
                new OmniBox.ModelOption("Sonnet 4.6"),
                new OmniBox.ModelOption("Haiku 4.5"))
            .SetThinkingEffort(OmniBox.ThinkingEffort.High)
            .OnModelChanged((s, model, effort) =>
            {
                Toast().Information($"Selected {model.Name} with {effort} thinking effort");
            })
            .OnChat((s, q) =>
            {
                s.IsGenerating = true;
                window.setTimeout((_) =>
                {
                    if (s.IsGenerating) // Make sure it wasn't cancelled
                    {
                        s.IsGenerating = false;
                        Toast().Information(q.Text);
                    }
                }, 5000);
            })
            .OnStop(s =>
            {
                s.IsGenerating = false;
            });

            var fileDropAreaOnChat = FileDropArea(chatModeSample).OnFilesDropped((s, files) =>
            {
                Toast().Information($"Dropped files on chat box: {string.Join(", ", files.Select(f => f.name))}");
            }).SetAccepts("*");

            attBtnForChat.OnClick((s, e) => fileDropAreaOnChat.OpenFileSelection());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(Label("Chat").SetContent(fileDropAreaOnChat.WS()));
        }
    }
}

Chat with locked model

omni-box-locked-model-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var lockedModel = new OmniBox.ModelOption("Sonnet 4.6");
            var lockedChatModeSample = OmniBox(new OmniBox.Config(OmniBox.Mode.Chat)
            {
                PlaceholderChat = "This chat has a locked model"
            })
            .WS()
            .LockModel(lockedModel)
            .SetThinkingEffort(OmniBox.ThinkingEffort.Medium);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(Label("Chat with locked model").SetContent(lockedChatModeSample.WS()));
        }
    }
}

Search & Chat

omni-box-search-and-chat-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var searchAndChatModeSample = OmniBox(new OmniBox.Config(OmniBox.Mode.SearchAndChat)
            {
                PlaceholderChat   = "Ask me anything",
                PlaceholderSearch = "Search for anything",
                ChatFooter = new OmniBox.FooterItems { LeftSide = new IComponent[]
                {
                    Dropdown().ML(16).Searchable().Items(DropdownItem("Consult Documents", icon: UIcons.Book).Selected(),
                                                  DropdownItem("Find a flight", icon: UIcons.AirplaneJourney),
                                                  DropdownItem("Book a hotel", icon: UIcons.Hotel))
                }
                }
            })
            .WS()
            .OnSearch((s, q) =>
            {
                Toast().Information($"Searched for: {q.RawQuery} (Parsed into {q.Tokens?.Count ?? 0} tokens)");
            })
            .OnChat((s, q) =>
            {
                s.IsGenerating = true;
                window.setTimeout((_) =>
                {
                    if (s.IsGenerating) // Make sure it wasn't cancelled
                    {
                        s.IsGenerating = false;
                        Toast().Information(q.Text);
                    }
                }, 5000);
            })
            .OnStop(s =>
            {
                s.IsGenerating = false;
            })
            .WithHistory(async () => {
                return new OmniBox.SearchQuery[0];
            });

            document.body.style.overflow = "hidden";
            MountCenteredToBody(Label("Search & Chat").SetContent(searchAndChatModeSample.WS()));
        }
    }
}

OmniBox

Description

API reference

Constructors

OmniBox

Properties

OmniBox.InlineFilterChips

OmniBox.SelectedModel

OmniBox.SelectedThinkingEffort

OmniBox.IsModelLocked

OmniBox.IsGenerating

OmniBox.TabIndex

OmniBox.IsEnabled

OmniBox.SearchText

OmniBox.ChatText

OmniBox.SearchPlaceholder

OmniBox.ChatPlaceholder

OmniBox.Background

Methods

OmniBox.ParseQuery

OmniBox.RegisterSnap

OmniBox.RegisterSnaps

OmniBox.RegisterFilterSnap

OmniBox.RegisterFilterSnaps

OmniBox.OnSearch

OmniBox.OnChat

OmniBox.OnStop

OmniBox.OnModelChanged

OmniBox.SetModels

OmniBox.SetModels

OmniBox.LockModel

OmniBox.SetThinkingEffort

OmniBox.OnInput

OmniBox.OnKeyDown

OmniBox.OnKeyUp

OmniBox.OnKeyPress

OmniBox.OnFocus

OmniBox.OnBlur

OmniBox.WithHistory

OmniBox.Render

OmniBox.SetKeyboardShortcut

OmniBox.SetSearchRightText

OmniBox.SetSearchText

OmniBox.SetSearchPlaceholder

OmniBox.SetChatText

OmniBox.SetChatPlaceholder

OmniBox.Disabled

OmniBox.Focus

OmniBox.Height

OmniBox.H

Events

OmniBox.Stopped

OmniBox.Input

OmniBox.KeyDown

OmniBox.KeyUp

OmniBox.KeyPress

OmniBox.ReceivedFocus

OmniBox.LostFocus

Samples

Search (with FileDropArea)

Chat

Chat with locked model

Search & Chat

See also