Skip to content

Commit fc3b98e

Browse files
zacharyparikhzacharyparikh
authored
[Agent Builder] Tech preview badges (#237363)
## Summary (Showing both nav versions at the same time just for comparison and saving one image upload) <img width="1862" height="1342" alt="image" src="https://github.com/user-attachments/assets/bd9b9114-2176-41a0-9048-ea8625ea25b6" /> - v1 shows badge at all times - v2 shows badge on hover after a short delay - Show badge on landing page <img width="1862" height="1342" alt="image" src="https://github.com/user-attachments/assets/01f148c7-cfe2-42fe-bf78-583ee080f870" /> <img width="1862" height="1342" alt="image" src="https://github.com/user-attachments/assets/31731db0-0085-466d-a532-7f2179787e55" /> - Agents / tools list pages shows tech preview badge next to the page title ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...
1 parent fddcb96 commit fc3b98e

File tree

7 files changed

+125
-81
lines changed

7 files changed

+125
-81
lines changed

‎x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { AgentsList } from './agents_list';
1616
import { useNavigation } from '../../../hooks/use_navigation';
1717
import { appPaths } from '../../../utils/app_paths';
1818
import { DeleteAgentProvider } from '../../../context/delete_agent_context';
19+
import { TechPreviewTitle } from '../../common/tech_preview';
1920

2021
export const OnechatAgents = () => {
2122
const { euiTheme } = useEuiTheme();
@@ -42,9 +43,13 @@ export const OnechatAgents = () => {
4243
<KibanaPageTemplate>
4344
<KibanaPageTemplate.Header
4445
css={headerStyles}
45-
pageTitle={i18n.translate('xpack.onechat.agents.title', {
46-
defaultMessage: 'Agents',
47-
})}
46+
pageTitle={
47+
<TechPreviewTitle
48+
title={i18n.translate('xpack.onechat.agents.title', {
49+
defaultMessage: 'Agents',
50+
})}
51+
/>
52+
}
4853
description={
4954
<FormattedMessage
5055
id="xpack.onechat.agents.description"

‎x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import { EuiBetaBadge, EuiFlexGroup } from '@elastic/eui';
9+
import { css } from '@emotion/react';
10+
import { i18n } from '@kbn/i18n';
11+
import React from 'react';
12+
13+
const techPreviewLabel = i18n.translate('xpack.onechat.techPreviewLabel', {
14+
defaultMessage: 'Tech preview',
15+
});
16+
17+
const badgeAnchorStyles = css`
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
`;
22+
23+
export const TechPreviewBadge: React.FC<{ iconOnly?: boolean }> = ({ iconOnly = false }) => {
24+
return (
25+
<EuiBetaBadge
26+
iconType={iconOnly ? 'flask' : undefined}
27+
label={techPreviewLabel}
28+
anchorProps={{ css: badgeAnchorStyles }}
29+
/>
30+
);
31+
};
32+
33+
export const TechPreviewTitle: React.FC<{ title: string }> = ({ title }) => {
34+
return (
35+
<EuiFlexGroup component="span" gutterSize="s" alignItems="center">
36+
{title}
37+
<TechPreviewBadge />
38+
</EuiFlexGroup>
39+
);
40+
};

‎x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
8+
import { i18n } from '@kbn/i18n';
9+
import { FormattedMessage } from '@kbn/i18n-react';
10+
import React from 'react';
11+
import { docLinks } from '../../../../common/doc_links';
12+
import { TechPreviewBadge } from './tech_preview';
13+
14+
export const WelcomeText: React.FC<{}> = () => {
15+
const labels = {
16+
container: i18n.translate('xpack.onechat.newConversationPrompt.container', {
17+
defaultMessage: 'New conversation welcome prompt',
18+
}),
19+
title: i18n.translate('xpack.onechat.newConversationPrompt.title', {
20+
defaultMessage: 'Welcome to Elastic Agent Builder',
21+
}),
22+
subtitle: (
23+
<FormattedMessage
24+
id="xpack.onechat.newConversationPrompt.subtitle"
25+
defaultMessage="Work interactively with your AI {agentsLink} using the chat interface. Your selected agent answers questions by searching your data with its assigned {toolsLink}."
26+
values={{
27+
agentsLink: (
28+
<EuiLink href={docLinks.agentBuilderAgents} target="_blank">
29+
{i18n.translate('xpack.onechat.newConversationPrompt.agentsLinkText', {
30+
defaultMessage: 'agents',
31+
})}
32+
</EuiLink>
33+
),
34+
toolsLink: (
35+
<EuiLink href={docLinks.tools} target="_blank">
36+
{i18n.translate('xpack.onechat.newConversationPrompt.toolsLinkText', {
37+
defaultMessage: 'tools',
38+
})}
39+
</EuiLink>
40+
),
41+
}}
42+
/>
43+
),
44+
};
45+
return (
46+
<EuiFlexGroup
47+
direction="column"
48+
alignItems="center"
49+
justifyContent="center"
50+
aria-label={labels.container}
51+
>
52+
<EuiFlexItem grow={false}>
53+
<EuiIcon color="primary" size="xxl" type="logoElastic" />
54+
</EuiFlexItem>
55+
<EuiFlexItem grow={false}>
56+
<TechPreviewBadge />
57+
</EuiFlexItem>
58+
<EuiFlexItem>
59+
<EuiTitle>
60+
<h2>{labels.title}</h2>
61+
</EuiTitle>
62+
</EuiFlexItem>
63+
<EuiFlexItem>
64+
<EuiText textAlign="center" color="subdued">
65+
<p>{labels.subtitle}</p>
66+
</EuiText>
67+
</EuiFlexItem>
68+
</EuiFlexGroup>
69+
);
70+
};

‎x-pack/platform/plugins/shared/onechat/public/application/components/conversations/new_conversation_prompt.tsx‎

Lines changed: 1 addition & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -10,101 +10,25 @@ import {
1010
EuiFlexGroup,
1111
EuiFlexItem,
1212
EuiIcon,
13-
EuiText,
14-
EuiTitle,
15-
EuiLink,
16-
EuiButton,
1713
useEuiFontSize,
1814
useEuiTheme,
1915
} from '@elastic/eui';
2016
import type { ReactNode } from 'react';
2117
import React from 'react';
2218
import { css } from '@emotion/react';
23-
import { i18n } from '@kbn/i18n';
2419
import { FormattedMessage } from '@kbn/i18n-react';
2520
import { useNavigation } from '../../hooks/use_navigation';
2621
import { appPaths } from '../../utils/app_paths';
2722
import { ConversationContentWithMargins } from './conversation_grid';
2823
import { ConversationInputForm } from './conversation_input/conversation_input_form';
2924
import { useConversationGridCenterColumnWidth } from './conversation_grid.styles';
3025
import { docLinks } from '../../../../common/doc_links';
26+
import { WelcomeText } from '../common/welcome_text';
3127

3228
const fullHeightStyles = css`
3329
height: 100%;
3430
`;
3531

36-
const WelcomeText: React.FC<{}> = () => {
37-
const labels = {
38-
container: i18n.translate('xpack.onechat.newConversationPrompt.container', {
39-
defaultMessage: 'New conversation welcome prompt',
40-
}),
41-
title: i18n.translate('xpack.onechat.newConversationPrompt.title', {
42-
defaultMessage: 'Welcome to Elastic Agent Builder',
43-
}),
44-
subtitle: (
45-
<FormattedMessage
46-
id="xpack.onechat.newConversationPrompt.subtitle"
47-
defaultMessage="Work interactively with your AI {agentsLink} using the chat interface. Your selected agent answers questions by searching your data with its assigned {toolsLink}."
48-
values={{
49-
agentsLink: (
50-
<EuiLink href={docLinks.agentBuilderAgents} target="_blank">
51-
{i18n.translate('xpack.onechat.newConversationPrompt.agentsLinkText', {
52-
defaultMessage: 'agents',
53-
})}
54-
</EuiLink>
55-
),
56-
toolsLink: (
57-
<EuiLink href={docLinks.tools} target="_blank">
58-
{i18n.translate('xpack.onechat.newConversationPrompt.toolsLinkText', {
59-
defaultMessage: 'tools',
60-
})}
61-
</EuiLink>
62-
),
63-
}}
64-
/>
65-
),
66-
};
67-
return (
68-
<EuiFlexGroup
69-
direction="column"
70-
alignItems="center"
71-
justifyContent="center"
72-
aria-label={labels.container}
73-
>
74-
<EuiFlexItem grow={false}>
75-
<EuiIcon color="primary" size="xxl" type="logoElastic" />
76-
</EuiFlexItem>
77-
<EuiFlexItem>
78-
<EuiTitle>
79-
<h2>{labels.title}</h2>
80-
</EuiTitle>
81-
</EuiFlexItem>
82-
<EuiFlexItem>
83-
<EuiText textAlign="center" color="subdued">
84-
<p>{labels.subtitle}</p>
85-
</EuiText>
86-
</EuiFlexItem>
87-
<EuiFlexItem grow={false}>
88-
<EuiButton
89-
href={docLinks.agentBuilder}
90-
target="_blank"
91-
size="m"
92-
aria-label={i18n.translate(
93-
'xpack.onechat.newConversationPrompt.agentBuilderDocsAriaLabel',
94-
{
95-
defaultMessage: 'Read Agent Builder documentation',
96-
}
97-
)}
98-
>
99-
{i18n.translate('xpack.onechat.newConversationPrompt.agentBuilderDocs', {
100-
defaultMessage: 'Read the docs',
101-
})}
102-
</EuiButton>
103-
</EuiFlexItem>
104-
</EuiFlexGroup>
105-
);
106-
};
107-
10832
const cards: Array<{
10933
key: string;
11034
title: ReactNode;

‎x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { appPaths } from '../../utils/app_paths';
1919
import { labels } from '../../utils/i18n';
2020
import { OnechatToolsTable } from './table/tools_table';
2121
import { McpConnectionButton } from './mcp_server/mcp_connection_button';
22+
import { TechPreviewTitle } from '../common/tech_preview';
2223
export const OnechatTools = () => {
2324
const { euiTheme } = useEuiTheme();
2425
const { createTool } = useToolsActions();
@@ -27,7 +28,7 @@ export const OnechatTools = () => {
2728
return (
2829
<KibanaPageTemplate>
2930
<KibanaPageTemplate.Header
30-
pageTitle={labels.tools.title}
31+
pageTitle={<TechPreviewTitle title={labels.tools.title} />}
3132
description={
3233
<FormattedMessage
3334
id="xpack.onechat.tools.toolsDescription"

‎x-pack/solutions/search/plugins/enterprise_search/public/navigation_tree.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,10 @@ export const getNavigationTreeDefinition = ({
125125
link: 'dashboards',
126126
},
127127
{
128+
badgeTypeV2: 'techPreview',
128129
iconV2: agentsIcon,
129130
link: 'agent_builder',
131+
withBadge: true,
130132
},
131133
{
132134
badgeOptions: {

‎x-pack/solutions/search/plugins/serverless_search/public/navigation_tree.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ export const navigationTree = ({ isAppRegistered }: ApplicationStart): Navigatio
100100
{
101101
iconV2: agentsIcon, // Temp svg until we have icon in EUI
102102
link: 'agent_builder',
103+
withBadge: true,
104+
badgeTypeV2: 'techPreview',
103105
},
104106
{
105107
link: 'workflows',

0 commit comments

Comments
 (0)