Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/javascript/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ The following table displays the targets for the individual components across Lu
|--------------------------------------|-------------------------------------------------------------------------------------|-------------------------------------------------------------|
| `targets.APP` | Target id for application | [Documentation](./capabilities#application) |
| `targets.ASK_AI_SEARCH_BANNER` | Target id for the Ask AI search banner displayed on the search page. | [Documentation](./capabilities#ask-ai-search-banner) |
| `targets.ASK_AI_SEARCH_BANNER_RESULTS` | Target id for the Ask AI answer displayed on the search page. | [Documentation](./capabilities#ask-ai-search-banner-results) |
| `targets.BOOKMARKS` | Target id for the bookmarks/app launcher component | [Documentation](./capabilities#bookmarks) |
| `targets.BOOKMARKS_ITEMS` | Target id for the bookmarks displayed inside the app launcher | [Documentation](./capabilities#bookmarks-items) |
| `targets.CONTRIBUTION_BUTTON` | Target id for the contribution button. | [Documentation](./capabilities#contribution-button) |
Expand Down
29 changes: 27 additions & 2 deletions docs/javascript/capabilities.md
Original file line number Diff line number Diff line change
Expand Up @@ -724,18 +724,43 @@ Target that allows customizing the Ask AI search banner.
| ------------- | -----------------------------------|
| Target ID | `ask-ai-search-banner` |
| Description | Target the Ask AI search banner. |
| Placements | Compatible with placements: `UNDER`. Customizations will be added right below the Ask AI search banner on the search page. |
| Placements | Compatible with placements: `UNDER`. Customizations will be added below the Ask AI search banner on the search page, outside of the answer block. |
| Disable | Can be disabled. Disabling this component prevents banner to be rendered in the search page. |
| Changing text | No compatibility. |

**Note:** Customizations added to this target are only displayed when the Ask AI search banner itself is displayed. If the banner is disabled or not available for the current user, the customizations will not be rendered.

**Note:** Customizations added to this target are rendered outside of the collapsible area of the answer and only when the Ask AI search banner itself is displayed. They stay fully visible whether the answer is collapsed or expanded, and their height is not taken into account when deciding if the answer has to be truncated with a "Show more" button. To render a customization inside the collapsible area instead, use the [Ask AI search banner results](#ask-ai-search-banner-results) target.

Customizations are rendered as soon as the banner is displayed, but stay hidden until the answer has finished streaming. This allows components such as extensions to pre-load their data while the answer is being generated.

#### Use cases

- [Display a message under the Ask AI search banner](./use-cases#display-a-message-under-the-ask-ai-search-banner)
- [Disable the Ask AI search banner](./use-cases#disable-the-ask-ai-search-banner)


### Ask AI Search banner results

Target that allows customizing the Ask AI answer displayed on the search page, at the end of the answer content.

#### Compatibility

| | |
| ------------- | -----------------------------------|
| Target ID | `ask-ai-search-banner-results` |
| Description | Target the Ask AI answer content. |
| Placements | Compatible with placements: `UNDER`. Customizations will be added at the end of the Ask AI answer, inside the collapsible area. |
| Disable | No compatibility. |
| Changing text | No compatibility. |

**Note:** Customizations added to this target are rendered inside the collapsible area of the answer and only when the Ask AI search banner itself is displayed. They are therefore truncated and faded out along with the answer when it is collapsed, and only fully visible once the user clicks on "Show more". Use the [Ask AI search banner](#ask-ai-search-banner) target to render a customization that always stays visible.

Customizations are rendered as soon as the banner is displayed, but stay hidden until the answer has finished streaming. This allows components such as extensions to pre-load their data while the answer is being generated.

#### Use cases

- [Display a message at the end of the Ask AI answer](./use-cases#display-a-message-at-the-end-of-the-ask-ai-answer)


### Settings button

Expand Down
32 changes: 30 additions & 2 deletions docs/javascript/use-cases.md
Original file line number Diff line number Diff line change
Expand Up @@ -636,7 +636,7 @@ Adding this code snippet to the application will hide the Ask AI search banner f

## Display a message under the Ask AI search banner

The `ASK_AI_SEARCH_BANNER` target allows adding customizations right below the Ask AI search banner on the search page. This is useful to display a disclaimer or guidelines about how to use Ask AI on your site.
The `ASK_AI_SEARCH_BANNER` target allows adding customizations below the Ask AI search banner on the search page, outside of the answer block. This is useful to display a disclaimer or guidelines about how to use Ask AI on your site.

```js
window.lumapps.customize(({ targets, components, render, placement, constants }) => {
Expand All @@ -656,7 +656,35 @@ window.lumapps.customize(({ targets, components, render, placement, constants })
});
```

**Note:** the customization is only rendered when the Ask AI search banner itself is displayed. If the banner has been disabled with `window.lumapps.disable('ask-ai-search-banner')`, nothing will be rendered.
**Notes:** the customization is only rendered when the Ask AI search banner itself is displayed. If the banner has been disabled with `window.lumapps.disable('ask-ai-search-banner')`, nothing will be rendered.

The customization is rendered outside of the collapsible area of the answer, so it stays fully visible whether the answer is collapsed or expanded. To render it inside the answer instead, use the `ASK_AI_SEARCH_BANNER_RESULTS` target described below.

## Display a message at the end of the Ask AI answer

The `ASK_AI_SEARCH_BANNER_RESULTS` target allows adding customizations at the end of the Ask AI answer content, inside the collapsible area. This is useful to display information that belongs to the answer itself, such as related resources.

```js
window.lumapps.customize(({ targets, components, render, placement, constants }) => {
const { Message } = components;
const { Kind } = constants;

render({
placement: placement.UNDER,
target: targets.ASK_AI_SEARCH_BANNER_RESULTS,
toRender: Message({
className: 'customizations-wrapper',
kind: Kind.info,
children: 'Need more details? Reach out to the support team.',
hasBackground: true,
}),
});
});
```

**Note:** since the customization is rendered inside the collapsible area, it is truncated and faded out with the answer when the latter is collapsed, and only fully visible once the user clicks on "Show more".

Both targets can be used at the same time: the `ASK_AI_SEARCH_BANNER_RESULTS` customization is displayed at the end of the answer, and the `ASK_AI_SEARCH_BANNER` one below the whole block.

## Add links to other administration tools

Expand Down