[Agent Builder] Tech preview badges

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

@@ -16,6 +16,7 @@ import { AgentsList } from './agents_list';
 import { useNavigation } from '../../../hooks/use_navigation';
 import { appPaths } from '../../../utils/app_paths';
 import { DeleteAgentProvider } from '../../../context/delete_agent_context';
+import { TechPreviewTitle } from '../../common/tech_preview';
 
 export const OnechatAgents = () => {
   const { euiTheme } = useEuiTheme();
@@ -42,9 +43,13 @@ export const OnechatAgents = () => {
       <KibanaPageTemplate>
         <KibanaPageTemplate.Header
           css={headerStyles}
-          pageTitle={i18n.translate('xpack.onechat.agents.title', {
-            defaultMessage: 'Agents',
-          })}
+          pageTitle={
+            <TechPreviewTitle
+              title={i18n.translate('xpack.onechat.agents.title', {
+                defaultMessage: 'Agents',
+              })}
+            />
+          }
           description={
             <FormattedMessage
               id="xpack.onechat.agents.description"

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

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiBetaBadge, EuiFlexGroup } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+const techPreviewLabel = i18n.translate('xpack.onechat.techPreviewLabel', {
+  defaultMessage: 'Tech preview',
+});
+
+const badgeAnchorStyles = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TechPreviewBadge: React.FC<{ iconOnly?: boolean }> = ({ iconOnly = false }) => {
+  return (
+    <EuiBetaBadge
+      iconType={iconOnly ? 'flask' : undefined}
+      label={techPreviewLabel}
+      anchorProps={{ css: badgeAnchorStyles }}
+    />
+  );
+};
+
+export const TechPreviewTitle: React.FC<{ title: string }> = ({ title }) => {
+  return (
+    <EuiFlexGroup component="span" gutterSize="s" alignItems="center">
+      {title}
+      <TechPreviewBadge />
+    </EuiFlexGroup>
+  );
+};

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

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { docLinks } from '../../../../common/doc_links';
+import { TechPreviewBadge } from './tech_preview';
+
+export const WelcomeText: React.FC<{}> = () => {
+  const labels = {
+    container: i18n.translate('xpack.onechat.newConversationPrompt.container', {
+      defaultMessage: 'New conversation welcome prompt',
+    }),
+    title: i18n.translate('xpack.onechat.newConversationPrompt.title', {
+      defaultMessage: 'Welcome to Elastic Agent Builder',
+    }),
+    subtitle: (
+      <FormattedMessage
+        id="xpack.onechat.newConversationPrompt.subtitle"
+        defaultMessage="Work interactively with your AI {agentsLink} using the chat interface. Your selected agent answers questions by searching your data with its assigned {toolsLink}."
+        values={{
+          agentsLink: (
+            <EuiLink href={docLinks.agentBuilderAgents} target="_blank">
+              {i18n.translate('xpack.onechat.newConversationPrompt.agentsLinkText', {
+                defaultMessage: 'agents',
+              })}
+            </EuiLink>
+          ),
+          toolsLink: (
+            <EuiLink href={docLinks.tools} target="_blank">
+              {i18n.translate('xpack.onechat.newConversationPrompt.toolsLinkText', {
+                defaultMessage: 'tools',
+              })}
+            </EuiLink>
+          ),
+        }}
+      />
+    ),
+  };
+  return (
+    <EuiFlexGroup
+      direction="column"
+      alignItems="center"
+      justifyContent="center"
+      aria-label={labels.container}
+    >
+      <EuiFlexItem grow={false}>
+        <EuiIcon color="primary" size="xxl" type="logoElastic" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <TechPreviewBadge />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiTitle>
+          <h2>{labels.title}</h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText textAlign="center" color="subdued">
+          <p>{labels.subtitle}</p>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

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

@@ -10,101 +10,25 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiText,
-  EuiTitle,
-  EuiLink,
-  EuiButton,
   useEuiFontSize,
   useEuiTheme,
 } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import React from 'react';
 import { css } from '@emotion/react';
-import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useNavigation } from '../../hooks/use_navigation';
 import { appPaths } from '../../utils/app_paths';
 import { ConversationContentWithMargins } from './conversation_grid';
 import { ConversationInputForm } from './conversation_input/conversation_input_form';
 import { useConversationGridCenterColumnWidth } from './conversation_grid.styles';
 import { docLinks } from '../../../../common/doc_links';
+import { WelcomeText } from '../common/welcome_text';
 
 const fullHeightStyles = css`
   height: 100%;
 `;
 
-const WelcomeText: React.FC<{}> = () => {
-  const labels = {
-    container: i18n.translate('xpack.onechat.newConversationPrompt.container', {
-      defaultMessage: 'New conversation welcome prompt',
-    }),
-    title: i18n.translate('xpack.onechat.newConversationPrompt.title', {
-      defaultMessage: 'Welcome to Elastic Agent Builder',
-    }),
-    subtitle: (
-      <FormattedMessage
-        id="xpack.onechat.newConversationPrompt.subtitle"
-        defaultMessage="Work interactively with your AI {agentsLink} using the chat interface. Your selected agent answers questions by searching your data with its assigned {toolsLink}."
-        values={{
-          agentsLink: (
-            <EuiLink href={docLinks.agentBuilderAgents} target="_blank">
-              {i18n.translate('xpack.onechat.newConversationPrompt.agentsLinkText', {
-                defaultMessage: 'agents',
-              })}
-            </EuiLink>
-          ),
-          toolsLink: (
-            <EuiLink href={docLinks.tools} target="_blank">
-              {i18n.translate('xpack.onechat.newConversationPrompt.toolsLinkText', {
-                defaultMessage: 'tools',
-              })}
-            </EuiLink>
-          ),
-        }}
-      />
-    ),
-  };
-  return (
-    <EuiFlexGroup
-      direction="column"
-      alignItems="center"
-      justifyContent="center"
-      aria-label={labels.container}
-    >
-      <EuiFlexItem grow={false}>
-        <EuiIcon color="primary" size="xxl" type="logoElastic" />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiTitle>
-          <h2>{labels.title}</h2>
-        </EuiTitle>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiText textAlign="center" color="subdued">
-          <p>{labels.subtitle}</p>
-        </EuiText>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiButton
-          href={docLinks.agentBuilder}
-          target="_blank"
-          size="m"
-          aria-label={i18n.translate(
-            'xpack.onechat.newConversationPrompt.agentBuilderDocsAriaLabel',
-            {
-              defaultMessage: 'Read Agent Builder documentation',
-            }
-          )}
-        >
-          {i18n.translate('xpack.onechat.newConversationPrompt.agentBuilderDocs', {
-            defaultMessage: 'Read the docs',
-          })}
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
-
 const cards: Array<{
   key: string;
   title: ReactNode;

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

@@ -19,6 +19,7 @@ import { appPaths } from '../../utils/app_paths';
 import { labels } from '../../utils/i18n';
 import { OnechatToolsTable } from './table/tools_table';
 import { McpConnectionButton } from './mcp_server/mcp_connection_button';
+import { TechPreviewTitle } from '../common/tech_preview';
 export const OnechatTools = () => {
   const { euiTheme } = useEuiTheme();
   const { createTool } = useToolsActions();
@@ -27,7 +28,7 @@ export const OnechatTools = () => {
   return (
     <KibanaPageTemplate>
       <KibanaPageTemplate.Header
-        pageTitle={labels.tools.title}
+        pageTitle={<TechPreviewTitle title={labels.tools.title} />}
         description={
           <FormattedMessage
             id="xpack.onechat.tools.toolsDescription"

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

@@ -125,8 +125,10 @@ export const getNavigationTreeDefinition = ({
                   link: 'dashboards',
                 },
                 {
+                  badgeTypeV2: 'techPreview',
                   iconV2: agentsIcon,
                   link: 'agent_builder',
+                  withBadge: true,
                 },
                 {
                   badgeOptions: {

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

@@ -100,6 +100,8 @@ export const navigationTree = ({ isAppRegistered }: ApplicationStart): Navigatio
           {
             iconV2: agentsIcon, // Temp svg until we have icon in EUI
             link: 'agent_builder',
+            withBadge: true,
+            badgeTypeV2: 'techPreview',
           },
           {
             link: 'workflows',