UI
The UI aptitude provides access to the Olive Helps search bar and global search.
Starting with the v0.25 release of Olive Helps, if a Loop utilizes listenSearchbar or listenGlobalSearch, the search bar will focus when the Loop is selected from the dropdown. If a Loop does not use these methods, the search bar will not focus when the Loop is selected from the dropdown.
API
Example
Permissions

listenGlobalSearch

Creates a listener receiving updates whenever the user enters a search in the Olive Helps Global Search. The Global Search is different from the search bar at the top of Olive Helps, and is triggered by using Command+O on Mac or Ctrl+O on Windows.
1
import { ui } from '@oliveai/ldk';
2
3
ui.listenGlobalSearch((text) => {
4
// Code to run using the text that the user
5
// entered into the Global Search
6
})
Copied!

listenSearchbar

Creates a listener receiving updates whenever the user enters a search in the Olive Helps Searchbar. The searchbar can be found at the top of Olive Helps, by clicking the magnifying glass icon.
1
import { ui } from '@oliveai/ldk';
2
3
ui.listenSearchbar((text) => {
4
// Code to run using the text that the user
5
// entered into the Searchbar
6
})
Copied!

loopOpenHandler

Registers a handler function for the Olive Helps Loop Open Button. This function runs when you open the Searchbar, click All, and select your loop. Click here for more detail.
1
import { ui } from '@oliveai/ldk';
2
3
ui.loopOpenHandler(() => {
4
// Code to run when the user selects your loop
5
// from the Searchbar list
6
})
Copied!
In this example, we trigger a whisper to show when the user selects your loop from the Searchbar list
1
import { ui } from '@oliveai/ldk';
2
3
ui.loopOpenHandler(() =>
4
whisper.create({
5
label: 'Start Whisper',
6
components: [
7
{
8
type: whisper.WhisperComponentType.Markdown,
9
body: "I'm a whisper that only opens when loopOpenHandler is called",
10
},
11
],
12
})
13
);
Copied!
In this example, we open a whisper when the user enters "/example" in either the Global Search or the Searchbar.
1
import { ui } from '@oliveai/ldk';
2
3
const searchHandler = (text) => {
4
if (text === '/example') {
5
whisper.create({
6
label: 'Start Whisper',
7
components: [
8
{
9
type: whisper.WhisperComponentType.Markdown,
10
body: "I'm a whisper that only opens when loopOpenHandler is called",
11
},
12
],
13
})
14
}
15
};
16
17
ui.listenGlobalSearch(text => handler(text));
18
ui.listenSearchbar(text => handler(text));
Copied!
To use the UI aptitude, simply set the following permissions in your package.json under the ldk object.
1
...
2
"ldk": {
3
"permissions": {
4
"ui": {},
5
...
6
}
7
},
8
...
Copied!
Last modified 28d ago
Copy link