Skip to content

Commit 2ff8033

Browse files
chrisbmarchrisbmar
committed
conversation view wip - tbc in future pr
1 parent c977817 commit 2ff8033

1 file changed

Lines changed: 94 additions & 47 deletions

File tree

  • x-pack/platform/plugins/shared/agent_builder/public/application/components/layout/unified_sidebar/views

‎x-pack/platform/plugins/shared/agent_builder/public/application/components/layout/unified_sidebar/views/conversation_view.tsx‎

Lines changed: 94 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,43 +7,77 @@
77

88
import React, { useCallback } from 'react';
99
import { Link } from 'react-router-dom-v5-compat';
10+
import { useLocation } from 'react-router-dom';
1011

11-
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiHorizontalRule } from '@elastic/eui';
12+
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiHorizontalRule, useEuiTheme } from '@elastic/eui';
1213
import { css } from '@emotion/react';
1314
import { i18n } from '@kbn/i18n';
1415

1516
import { appPaths } from '../../../../utils/app_paths';
16-
import { getAgentIdFromPath } from '../../../../route_config';
17+
import { getAgentIdFromPath, getConversationIdFromPath } from '../../../../route_config';
1718
import { AgentSelector } from '../agent_selector';
19+
import { SidebarConversationList } from './sidebar_conversation_list';
1820

1921
const labels = {
2022
customize: i18n.translate('xpack.agentBuilder.sidebar.conversation.customize', {
2123
defaultMessage: 'Customize',
2224
}),
23-
conversationsTitle: i18n.translate('xpack.agentBuilder.sidebar.conversation.conversationsTitle', {
24-
defaultMessage: 'Conversations',
25-
}),
26-
newConversation: i18n.translate('xpack.agentBuilder.sidebar.conversation.newConversation', {
27-
defaultMessage: '+ New conversation',
28-
}),
2925
manageComponents: i18n.translate('xpack.agentBuilder.sidebar.conversation.manageComponents', {
3026
defaultMessage: 'Manage components',
3127
}),
28+
recentChats: i18n.translate('xpack.agentBuilder.sidebar.conversation.recentChats', {
29+
defaultMessage: 'Recent chats',
30+
}),
3231
};
3332

34-
interface ConversationSidebarViewProps {
35-
pathname: string;
36-
}
33+
// TODO: fix these values once the UI is complete for the header and footer or use a resizeObserver to get the height of the header and footer which is more dynamic
34+
const HEADER_HEIGHT = 120; // Agent selector (~56px) + Customize link (~18px) + hr margin (~16px)
35+
const FOOTER_HEIGHT = 50; // hr margin (~16px) + Manage link (~18px) + padding
36+
37+
const containerStyles = css`
38+
position: relative;
39+
height: 100%;
40+
width: 100%;
41+
`;
3742

38-
export const ConversationSidebarView: React.FC<ConversationSidebarViewProps> = ({ pathname }) => {
43+
const linkStyles = css`
44+
text-decoration: none;
45+
color: inherit;
46+
&:hover {
47+
text-decoration: underline;
48+
}
49+
`;
50+
51+
export const ConversationSidebarView: React.FC = () => {
52+
const { pathname } = useLocation();
3953
const agentId = getAgentIdFromPath(pathname) ?? 'elastic-ai-agent';
54+
const conversationId = getConversationIdFromPath(pathname);
55+
const { euiTheme } = useEuiTheme();
56+
57+
const headerStyles = css`
58+
padding: ${euiTheme.size.base};
59+
`;
60+
const scrollableStyles = css`
61+
position: absolute;
62+
top: ${HEADER_HEIGHT}px;
63+
bottom: ${FOOTER_HEIGHT}px;
64+
padding: ${euiTheme.size.base};
65+
left: 0;
66+
right: 0;
67+
overflow-y: auto;
68+
`;
69+
70+
const footerStyles = css`
71+
position: absolute;
72+
bottom: 0;
73+
left: 0;
74+
right: 0;
75+
padding: ${euiTheme.size.base};
76+
`;
4077

41-
const linkStyles = css`
42-
text-decoration: none;
43-
color: inherit;
44-
&:hover {
45-
text-decoration: underline;
46-
}
78+
const recentChatsStyles = css`
79+
padding: 0 ${euiTheme.size.s};
80+
font-weight: ${euiTheme.font.weight.semiBold};
4781
`;
4882

4983
const getNavigationPath = useCallback(
@@ -52,36 +86,49 @@ export const ConversationSidebarView: React.FC<ConversationSidebarViewProps> = (
5286
);
5387

5488
return (
55-
<EuiFlexGroup direction="column" gutterSize="s">
56-
<AgentSelector agentId={agentId} getNavigationPath={getNavigationPath} />
57-
58-
<EuiFlexItem grow={false}>
59-
<Link to={appPaths.agent.instructions({ agentId })} css={linkStyles}>
60-
<EuiText size="s">{labels.customize}</EuiText>
61-
</Link>
62-
</EuiFlexItem>
63-
64-
<EuiHorizontalRule margin="s" />
65-
66-
<EuiFlexItem grow={false}>
67-
<EuiText size="xs" color="subdued">
68-
<strong>{labels.conversationsTitle}</strong>
69-
</EuiText>
70-
</EuiFlexItem>
71-
72-
<EuiFlexItem grow={false}>
73-
<Link to={appPaths.agent.root({ agentId })} css={linkStyles}>
74-
<EuiText size="s">{labels.newConversation}</EuiText>
75-
</Link>
76-
</EuiFlexItem>
89+
<div css={containerStyles}>
90+
{/* Header */}
91+
<EuiFlexGroup direction="column" gutterSize="s" css={headerStyles}>
92+
<EuiFlexItem grow={false}>
93+
<AgentSelector agentId={agentId} getNavigationPath={getNavigationPath} />
94+
</EuiFlexItem>
95+
<EuiFlexItem grow={false}>
96+
<Link to={appPaths.agent.instructions({ agentId })} css={linkStyles}>
97+
<EuiText size="s">{labels.customize}</EuiText>
98+
</Link>
99+
</EuiFlexItem>
100+
<EuiFlexItem grow={false}>
101+
<EuiHorizontalRule margin="none" />
102+
</EuiFlexItem>
103+
</EuiFlexGroup>
77104

78-
<EuiHorizontalRule margin="s" />
105+
{/* Scrollable conversation list */}
106+
<div css={scrollableStyles}>
107+
<EuiFlexGroup direction="column" gutterSize="s">
108+
<EuiFlexItem grow={false} css={recentChatsStyles}>
109+
<EuiText size="xs" color="disabled" css={{ fontWeight: euiTheme.font.weight.semiBold }}>
110+
{labels.recentChats}
111+
</EuiText>
112+
</EuiFlexItem>
113+
<EuiFlexItem grow={false}>
114+
<SidebarConversationList agentId={agentId} currentConversationId={conversationId} />
115+
</EuiFlexItem>
116+
</EuiFlexGroup>
117+
</div>
79118

80-
<EuiFlexItem grow={false}>
81-
<Link to={appPaths.manage.agents} css={linkStyles}>
82-
<EuiText size="s">{labels.manageComponents}</EuiText>
83-
</Link>
84-
</EuiFlexItem>
85-
</EuiFlexGroup>
119+
{/* Footer */}
120+
<div css={footerStyles}>
121+
<EuiFlexGroup direction="column" gutterSize="s">
122+
<EuiFlexItem grow={false}>
123+
<EuiHorizontalRule margin="none" />
124+
</EuiFlexItem>
125+
<EuiFlexItem grow={false}>
126+
<Link to={appPaths.manage.agents} css={linkStyles}>
127+
<EuiText size="s">{labels.manageComponents}</EuiText>
128+
</Link>
129+
</EuiFlexItem>
130+
</EuiFlexGroup>
131+
</div>
132+
</div>
86133
);
87134
};

0 commit comments

Comments
 (0)