Skip to content

Commit a2ac01d

Browse files
viduni94kibanamachine
viduni94
and
kibanamachine
authored
[Agent Builder][Obs AI] AI Insights common elements (#244579)
Closes elastic/obs-ai-team#423 ## Summary This PR adds the common UI components and the common attachment for Observability AI Insights with Agent Builder. ### Checklist - [x] 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) - [x] 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) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
1 parent acbc950 commit a2ac01d

File tree

17 files changed

+386
-4
lines changed

17 files changed

+386
-4
lines changed

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1118,6 +1118,7 @@ x-pack/platform/test/task_manager_claimer_update_by_query/plugins/sample_task_pl
11181118
x-pack/platform/test/ui_capabilities/common/plugins/foo_plugin @elastic/kibana-security
11191119
x-pack/platform/test/usage_collection/plugins/application_usage_test @elastic/kibana-core
11201120
x-pack/platform/test/usage_collection/plugins/stack_management_usage_test @elastic/kibana-management
1121+
x-pack/solutions/observability/packages/agent-builder @elastic/obs-ai-team
11211122
x-pack/solutions/observability/packages/alert-details @elastic/obs-ux-management-team
11221123
x-pack/solutions/observability/packages/alerting-test-data @elastic/obs-ux-management-team
11231124
x-pack/solutions/observability/packages/get-padded-alert-time-range-util @elastic/obs-ux-management-team

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -783,6 +783,7 @@
783783
"@kbn/object-utils": "link:src/platform/packages/shared/kbn-object-utils",
784784
"@kbn/object-versioning": "link:src/platform/packages/shared/kbn-object-versioning",
785785
"@kbn/object-versioning-utils": "link:src/platform/packages/shared/kbn-object-versioning-utils",
786+
"@kbn/observability-agent-builder": "link:x-pack/solutions/observability/packages/agent-builder",
786787
"@kbn/observability-agent-plugin": "link:x-pack/solutions/observability/plugins/observability_agent",
787788
"@kbn/observability-ai-assistant-app-plugin": "link:x-pack/solutions/observability/plugins/observability_ai_assistant_app",
788789
"@kbn/observability-ai-assistant-management-plugin": "link:x-pack/platform/plugins/private/observability_ai_assistant_management",

‎tsconfig.base.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1522,6 +1522,8 @@
15221522
"@kbn/object-versioning/*": ["src/platform/packages/shared/kbn-object-versioning/*"],
15231523
"@kbn/object-versioning-utils": ["src/platform/packages/shared/kbn-object-versioning-utils"],
15241524
"@kbn/object-versioning-utils/*": ["src/platform/packages/shared/kbn-object-versioning-utils/*"],
1525+
"@kbn/observability-agent-builder": ["x-pack/solutions/observability/packages/agent-builder"],
1526+
"@kbn/observability-agent-builder/*": ["x-pack/solutions/observability/packages/agent-builder/*"],
15251527
"@kbn/observability-agent-plugin": ["x-pack/solutions/observability/plugins/observability_agent"],
15261528
"@kbn/observability-agent-plugin/*": ["x-pack/solutions/observability/plugins/observability_agent/*"],
15271529
"@kbn/observability-ai-assistant-app-plugin": ["x-pack/solutions/observability/plugins/observability_ai_assistant_app"],

‎x-pack/solutions/observability/packages/agent-builder/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
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+
export { AiInsight } from './src/components/ai_insight';

‎x-pack/solutions/observability/packages/agent-builder/jest.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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+
module.exports = {
9+
preset: '@kbn/test',
10+
rootDir: '../../../../..',
11+
roots: ['<rootDir>/x-pack/solutions/observability/packages/agent-builder'],
12+
};

‎x-pack/solutions/observability/packages/agent-builder/kibana.jsonc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "shared-browser",
3+
"id": "@kbn/observability-agent-builder",
4+
"owner": ["@elastic/obs-ai-team"],
5+
"group": "observability",
6+
"visibility": "private"
7+
}

‎x-pack/solutions/observability/packages/agent-builder/moon.yml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# This file is generated by the @kbn/moon package. Any manual edits will be erased!
2+
# To extend this, write your extensions/overrides to 'moon.extend.yml'
3+
# then regenerate this file with: 'node scripts/regenerate_moon_projects.js --update --filter @kbn/observability-agent-builder'
4+
5+
$schema: https://moonrepo.dev/schemas/project.json
6+
id: '@kbn/observability-agent-builder'
7+
type: unknown
8+
owners:
9+
defaultOwner: '@elastic/obs-ai-team'
10+
toolchain:
11+
default: node
12+
language: typescript
13+
project:
14+
name: '@kbn/observability-agent-builder'
15+
description: Moon project for @kbn/observability-agent-builder
16+
channel: ''
17+
owner: '@elastic/obs-ai-team'
18+
metadata:
19+
sourceRoot: x-pack/solutions/observability/packages/agent-builder
20+
dependsOn:
21+
- '@kbn/i18n'
22+
tags:
23+
- shared-browser
24+
- package
25+
- prod
26+
- group-observability
27+
- private
28+
- jest-unit-tests
29+
fileGroups:
30+
src:
31+
- '**/*.ts'
32+
- '**/*.tsx'
33+
- '!target/**/*'
34+
tasks:
35+
jest:
36+
args:
37+
- '--config'
38+
- $projectRoot/jest.config.js
39+
inputs:
40+
- '@group(src)'
41+
jestCI:
42+
args:
43+
- '--config'
44+
- $projectRoot/jest.config.js
45+
inputs:
46+
- '@group(src)'

‎x-pack/solutions/observability/packages/agent-builder/package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "@kbn/observability-agent-builder",
3+
"description": "Agent builder UI components for Observability",
4+
"private": true,
5+
"version": "1.0.0",
6+
"license": "Elastic License 2.0"
7+
}

‎x-pack/solutions/observability/packages/agent-builder/src/components/ai_insight.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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 React, { useState } from 'react';
9+
import {
10+
EuiIcon,
11+
EuiAccordion,
12+
EuiFlexGroup,
13+
EuiFlexItem,
14+
EuiPanel,
15+
EuiSpacer,
16+
EuiText,
17+
EuiSkeletonText,
18+
EuiMarkdownFormat,
19+
useEuiTheme,
20+
} from '@elastic/eui';
21+
import { StartConversationButton } from './start_conversation_button';
22+
23+
export interface AiInsightProps {
24+
title: string;
25+
description?: string;
26+
content?: string;
27+
onStartConversation?: () => void;
28+
onOpen?: () => void;
29+
startButtonLabel?: string;
30+
isLoading?: boolean;
31+
error?: string;
32+
['data-test-subj']?: string;
33+
}
34+
35+
export function AiInsight({
36+
title,
37+
description,
38+
content,
39+
onStartConversation,
40+
onOpen,
41+
startButtonLabel,
42+
isLoading,
43+
error,
44+
'data-test-subj': dataTestSubj,
45+
}: AiInsightProps) {
46+
const { euiTheme } = useEuiTheme();
47+
const [isOpen, setIsOpen] = useState(false);
48+
49+
return (
50+
<EuiPanel hasBorder={true} hasShadow={false} paddingSize="m">
51+
<EuiAccordion
52+
id="agentBuilderAiInsight"
53+
arrowProps={{ css: { alignSelf: 'flex-start' } }}
54+
buttonContent={
55+
<EuiFlexGroup
56+
wrap
57+
responsive={false}
58+
gutterSize="m"
59+
alignItems="flexStart"
60+
data-test-subj={dataTestSubj}
61+
>
62+
<EuiFlexItem grow={false}>
63+
<EuiIcon
64+
type="sparkles"
65+
color={euiTheme.colors.primary}
66+
style={{ marginTop: 6 }}
67+
size="l"
68+
/>
69+
</EuiFlexItem>
70+
<EuiFlexItem>
71+
<EuiText css={{ marginTop: 2, marginBottom: 1 }}>
72+
<h5>{title}</h5>
73+
</EuiText>
74+
<EuiText size="s" css={{ color: euiTheme.colors.textSubdued }}>
75+
<span>{description}</span>
76+
</EuiText>
77+
</EuiFlexItem>
78+
</EuiFlexGroup>
79+
}
80+
isLoading={false}
81+
isDisabled={false}
82+
forceState={isOpen ? 'open' : 'closed'}
83+
onToggle={(open) => {
84+
setIsOpen(open);
85+
if (open && onOpen) {
86+
onOpen();
87+
}
88+
}}
89+
>
90+
<EuiSpacer size="m" />
91+
<EuiPanel hasBorder={false} hasShadow={false} color="subdued">
92+
{isLoading ? (
93+
<EuiSkeletonText lines={3} />
94+
) : error ? (
95+
<EuiText size="s" color="danger">
96+
<p>{error}</p>
97+
</EuiText>
98+
) : (
99+
<EuiMarkdownFormat textSize="s">{content ?? ''}</EuiMarkdownFormat>
100+
)}
101+
</EuiPanel>
102+
103+
{onStartConversation && Boolean(content && content.trim()) ? (
104+
<>
105+
<EuiSpacer size="m" />
106+
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
107+
<EuiFlexItem grow={false}>
108+
<StartConversationButton onClick={onStartConversation}>
109+
{startButtonLabel}
110+
</StartConversationButton>
111+
</EuiFlexItem>
112+
</EuiFlexGroup>
113+
</>
114+
) : null}
115+
</EuiAccordion>
116+
</EuiPanel>
117+
);
118+
}

‎x-pack/solutions/observability/packages/agent-builder/src/components/start_conversation_button.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 React from 'react';
9+
import { i18n } from '@kbn/i18n';
10+
import { EuiButton } from '@elastic/eui';
11+
import { robotIconType } from '../icons/robot_icon';
12+
13+
export function StartConversationButton(props: React.ComponentProps<typeof EuiButton>) {
14+
return (
15+
<EuiButton
16+
data-test-subj="aiAgentStartConversationButton"
17+
fill
18+
iconType={robotIconType}
19+
size="s"
20+
{...props}
21+
>
22+
{i18n.translate('observabilityAgentBuilder.aiInsight.startConversationButton.label', {
23+
defaultMessage: 'Start conversation',
24+
})}
25+
</EuiButton>
26+
);
27+
}

0 commit comments

Comments
 (0)