Skip to content

Commit 473937b

Browse files
zacharyparikhkibanamachinechrisbmar
authored
[Agent Builder] 9.3 - New Conversation Input Designs and UI Polishes (#244446)
## Summary Adds new designs for the input action menus https://github.com/user-attachments/assets/691217b0-d0f1-419d-b317-b57f827e7792 ### Additional changes UI Polishes - Input border radius - Thinking accordion chevron icon - Increase font size of user message and assistant message from 14px to 16px ### 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) - [ ] ... --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Chris <50221462+chrisbmar@users.noreply.github.com>
1 parent 8804c10 commit 473937b

30 files changed

Lines changed: 699 additions & 422 deletions

File tree

‎x-pack/platform/plugins/shared/onechat/moon.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ dependsOn:
9090
- '@kbn/licensing-types'
9191
- '@kbn/licensing-plugin'
9292
- '@kbn/lens-embeddable-utils'
93-
- '@kbn/ai-assistant-connector-selector-action'
9493
- '@kbn/elastic-assistant'
9594
- '@kbn/react-kibana-mount'
9695
- '@kbn/react-query'

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import { appPaths } from '../../../utils/app_paths';
4848
import { isValidAgentAvatarColor } from '../../../utils/color';
4949
import { labels } from '../../../utils/i18n';
5050
import { zodResolver } from '../../../utils/zod_resolver';
51-
import { AgentAvatar } from '../agent_avatar';
51+
import { AgentAvatar } from '../../common/agent_avatar';
5252
import { agentFormSchema } from './agent_form_validation';
5353
import { AgentSettingsTab } from './tabs/settings_tab';
5454
import { ToolsTab } from './tabs/tools_tab';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { searchParamNames } from '../../../search_param_names';
3232
import { appPaths } from '../../../utils/app_paths';
3333
import { FilterOptionWithMatchesBadge } from '../../common/filter_option_with_matches_badge';
3434
import { Labels } from '../../common/labels';
35-
import { AgentAvatar } from '../agent_avatar';
35+
import { AgentAvatar } from '../../common/agent_avatar';
3636
import { useUiPrivileges } from '../../../hooks/use_ui_privileges';
3737

3838
const columnNames = {

x-pack/platform/plugins/shared/onechat/public/application/components/agents/agent_avatar.tsx renamed to x-pack/platform/plugins/shared/onechat/public/application/components/common/agent_avatar.tsx

File renamed without changes.

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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 type { EuiIconProps } from '@elastic/eui';
9+
import { EuiIcon } from '@elastic/eui';
10+
import type { SVGProps } from 'react';
11+
import React from 'react';
12+
13+
// Copied from x-pack/solutions/search/packages/shared-ui/src/v2_icons/robot.tsx
14+
15+
const iconType: React.FC<SVGProps<SVGSVGElement>> = (props) => (
16+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" {...props}>
17+
<path d="M8.14062 10.1279C8.33131 9.93073 8.64571 9.92389 8.84473 10.1133C9.04442 10.3037 9.05251 10.6204 8.8623 10.8203L8.5 10.4756L8.86133 10.8213L8.86035 10.8223L8.8584 10.8232L8.85449 10.8281C8.85175 10.8309 8.8484 10.8343 8.84473 10.8379C8.83688 10.8456 8.82656 10.8551 8.81445 10.8662C8.79019 10.8885 8.7574 10.9175 8.71582 10.9502C8.63226 11.0159 8.51258 11.0993 8.35742 11.1807C8.04514 11.3445 7.59082 11.5 7 11.5C6.40918 11.5 5.95486 11.3445 5.64258 11.1807C5.48742 11.0993 5.36774 11.0159 5.28418 10.9502C5.2426 10.9175 5.20981 10.8885 5.18555 10.8662C5.17345 10.8551 5.16312 10.8456 5.15527 10.8379C5.1516 10.8343 5.14825 10.8309 5.14551 10.8281L5.1416 10.8232L5.13965 10.8223L5.1377 10.8203C4.94749 10.6204 4.95558 10.3037 5.15527 10.1133C5.35429 9.92389 5.66869 9.93073 5.85938 10.1279L5.86133 10.1299C5.86828 10.1363 5.88278 10.1489 5.90332 10.165C5.94479 10.1976 6.01311 10.2454 6.10742 10.2949C6.29514 10.3934 6.59097 10.5 7 10.5C7.40903 10.5 7.70486 10.3934 7.89258 10.2949C7.98689 10.2454 8.05521 10.1976 8.09668 10.165C8.11722 10.1489 8.13172 10.1363 8.13867 10.1299L8.14062 10.1279Z" />
18+
<path d="M5 7C5.55228 7 6 7.44772 6 8C6 8.55229 5.55228 9 5 9C4.44772 9 4 8.55229 4 8C4 7.44772 4.44772 7 5 7Z" />
19+
<path d="M9 7C9.55229 7 10 7.44772 10 8C10 8.55229 9.55229 9 9 9C8.44771 9 8 8.55229 8 8C8 7.44772 8.44771 7 9 7Z" />
20+
<path
21+
fillRule="evenodd"
22+
clipRule="evenodd"
23+
d="M7 0C7.82843 0 8.5 0.671573 8.5 1.5C8.5 2.15281 8.08218 2.70597 7.5 2.91211V4H9C10.6569 4 12 5.34315 12 7H13L13.1025 7.00488C13.6067 7.05621 14 7.48232 14 8V11C14 11.5523 13.5523 12 13 12H12V13C12 13.5523 11.5523 14 11 14H3C2.44772 14 2 13.5523 2 13V12H1C0.447715 12 0 11.5523 0 11V8C0 7.44772 0.447715 7 1 7H2C2 5.34315 3.34315 4 5 4H6.5V2.91211C5.91782 2.70597 5.5 2.15281 5.5 1.5C5.5 0.671573 6.17157 0 7 0ZM5 5C3.89543 5 3 5.89543 3 7V13H11V7C11 5.96435 10.2128 5.113 9.2041 5.01074L9 5H5ZM1 11H2V8H1V11ZM12 11H13V8H12V11ZM7 1C6.72386 1 6.5 1.22386 6.5 1.5C6.5 1.77614 6.72386 2 7 2C7.27614 2 7.5 1.77614 7.5 1.5C7.5 1.22386 7.27614 1 7 1Z"
24+
/>
25+
</svg>
26+
);
27+
28+
export const RobotIcon = ({ size = 'm', ...rest }: Omit<EuiIconProps, 'type'>) => {
29+
return <EuiIcon type={iconType} size={size} {...rest} />;
30+
};

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

Lines changed: 0 additions & 147 deletions
This file was deleted.

‎x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation.styles.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ const maxConversationWidthStyles = css`
1212
max-width: 800px;
1313
`;
1414

15+
export const conversationElementPaddingStyles = css`
16+
padding: 0px 16px 16px;
17+
`;
18+
1519
// Ensures the conversation element is always 100% of it's parent or 800px, whichever is smaller.
1620
export const conversationElementWidthStyles = css`
1721
width: 100%;
@@ -25,10 +29,14 @@ export const fullWidthAndHeightStyles = css`
2529

2630
const ROUNDED_BORDER_RADIUS = '6px';
2731
export const ROUNDED_BORDER_RADIUS_LARGE = '12px';
32+
const ROUNDED_BORDER_RADIUS_EXTRA_LARGE = '16px';
2833

2934
export const roundedBorderRadiusStyles = css`
3035
border-radius: ${ROUNDED_BORDER_RADIUS};
3136
`;
37+
export const borderRadiusXlStyles = css`
38+
border-radius: ${ROUNDED_BORDER_RADIUS_EXTRA_LARGE};
39+
`;
3240

3341
export const conversationBackgroundStyles = (euiTheme: EuiThemeComputed<{}>) => css`
3442
background: linear-gradient(

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ import { useSendMessage } from '../../context/send_message/send_message_context'
1818
import { useConversationScrollActions } from '../../hooks/use_conversation_scroll_actions';
1919
import { useConversationStatus } from '../../hooks/use_conversation';
2020
import { useSendPredefinedInitialMessage } from '../../hooks/use_initial_message';
21-
import { conversationElementWidthStyles, fullWidthAndHeightStyles } from './conversation.styles';
21+
import {
22+
conversationElementPaddingStyles,
23+
conversationElementWidthStyles,
24+
fullWidthAndHeightStyles,
25+
} from './conversation.styles';
2226
import { ScrollButton } from './scroll_button';
2327
import { useAppLeave } from '../../context/app_leave_context';
2428
import { useNavigationAbort } from '../../hooks/use_navigation_abort';
@@ -92,13 +96,16 @@ export const Conversation: React.FC<{}> = () => {
9296
ref={scrollContainerRef}
9397
css={scrollableStyles}
9498
>
95-
<EuiFlexItem css={conversationElementWidthStyles}>
99+
<EuiFlexItem css={[conversationElementWidthStyles, conversationElementPaddingStyles]}>
96100
<ConversationRounds scrollContainerHeight={scrollContainerHeight} />
97101
</EuiFlexItem>
98102
</EuiFlexGroup>
99103
{showScrollButton && <ScrollButton onClick={scrollToMostRecentRoundBottom} />}
100104
</EuiFlexItem>
101-
<EuiFlexItem css={conversationElementWidthStyles} grow={false}>
105+
<EuiFlexItem
106+
css={[conversationElementWidthStyles, conversationElementPaddingStyles]}
107+
grow={false}
108+
>
102109
<ConversationInput onSubmit={scrollToMostRecentRoundTop} />
103110
</EuiFlexItem>
104111
</EuiFlexGroup>

0 commit comments

Comments
 (0)