Skip to content

Commit

Permalink
Merge pull request elastic#35 from CoenWarmer/storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@CoenWarmer
CoenWarmer authored Aug 10, 2023
2 parents 6e54fab + f53df04 commit 797cdb8
Show file tree
Hide file tree
Showing 5 changed files with 224 additions and 179 deletions.
25 changes: 17 additions & 8 deletions x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ export interface ChatItemProps extends ChatTimelineItem {
}

const normalMessageClassName = css`
.euiCommentEvent__header {
padding: 4px 8px;
}
.euiCommentEvent__body {
padding: 0;
}
Expand All @@ -42,17 +46,17 @@ const normalMessageClassName = css`
`;

const noPanelMessageClassName = css`
.euiCommentEvent {
border: none;
}
.euiCommentEvent__header {
background: transparent;
border-block-end: none;
}
.euiCommentEvent__body {
padding: 0;
}
.euiCommentEvent {
border: none;
display: none;
}
`;

Expand Down Expand Up @@ -89,6 +93,10 @@ export function ChatItem({
const actions = [canCopy, collapsed, canCopy].filter(Boolean);

const noBodyMessageClassName = css`
.euiCommentEvent__header {
padding: 4px 8px;
}
.euiCommentEvent__body {
padding: 0;
height: ${expanded ? 'fit-content' : '0px'};
Expand All @@ -106,7 +114,7 @@ export function ChatItem({

const handleToggleEdit = () => {
if (collapsed) {
setExpanded(false);
setExpanded(!expanded);
}
setEditing(!editing);
};
Expand Down Expand Up @@ -155,9 +163,10 @@ export function ChatItem({
actions={
<ChatItemActions
canCopy={canCopy}
collapsed={collapsed}
canEdit={canEdit}
isCollapsed={expanded}
collapsed={collapsed}
editing={editing}
expanded={expanded}
onCopyToClipboard={handleCopyToClipboard}
onToggleEdit={handleToggleEdit}
onToggleExpand={handleToggleExpand}
Expand Down
157 changes: 70 additions & 87 deletions x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item_actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,21 @@ import React, { useEffect, useState } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiButtonIcon, EuiPopover, EuiText } from '@elastic/eui';

export interface ChatItemAction {
id: string;
label: string;
icon: string;
handler: () => void;
}

export function ChatItemActions({
canCopy,
canEdit,
collapsed,
canCopy,
isCollapsed,
editing,
expanded,
onToggleEdit,
onToggleExpand,
onCopyToClipboard,
}: {
canCopy: boolean;
canEdit: boolean;
collapsed: boolean;
canCopy: boolean;
isCollapsed: boolean;
editing: boolean;
expanded: boolean;
onToggleEdit: () => void;
onToggleExpand: () => void;
onCopyToClipboard: () => void;
Expand All @@ -47,85 +42,73 @@ export function ChatItemActions({
};
}, [isPopoverOpen]);

const actions: ChatItemAction[] = [
...(canEdit
? [
{
id: 'edit',
icon: 'documentEdit',
label: '',
handler: () => {
onToggleEdit();
},
},
]
: []),
...(collapsed
? [
{
id: 'expand',
icon: isCollapsed ? 'eyeClosed' : 'eye',
label: '',
handler: () => {
onToggleExpand();
},
},
]
: []),
...(canCopy
? [
{
id: 'copy',
icon: 'copyClipboard',
label: i18n.translate(
'xpack.observabilityAiAssistant.chatTimeline.actions.copyMessage',
{
defaultMessage: 'Copied message',
}
),
handler: () => {
onCopyToClipboard();
},
},
]
: []),
];
return (
<>
{actions.map(({ id, icon, label, handler }) =>
label ? (
<EuiPopover
key={id}
button={
<EuiButtonIcon
aria-label={label}
key={id}
iconType={icon}
onClick={() => {
setIsPopoverOpen(id);
handler();
}}
color="text"
/>
{canEdit ? (
<EuiButtonIcon
aria-label={i18n.translate(
'xpack.observabilityAiAssistant.chatTimeline.actions.editPrompt',
{
defaultMessage: 'Edit prompt',
}
)}
color="text"
display={editing ? 'fill' : 'empty'}
iconType="documentEdit"
onClick={onToggleEdit}
/>
) : null}

{collapsed ? (
<EuiButtonIcon
aria-label={i18n.translate(
'xpack.observabilityAiAssistant.chatTimeline.actions.inspectPrompt',
{
defaultMessage: 'Inspect prompt',
}
isOpen={isPopoverOpen === id}
closePopover={() => setIsPopoverOpen(undefined)}
panelPaddingSize="s"
>
<EuiText size="s">
<p>{label}</p>
</EuiText>
</EuiPopover>
) : (
<EuiButtonIcon
aria-label={label}
key={id}
iconType={icon}
onClick={handler}
color="text"
/>
)
)}
)}
color="text"
display={expanded ? 'fill' : 'empty'}
iconType={expanded ? 'eyeClosed' : 'eye'}
onClick={onToggleExpand}
/>
) : null}

{canCopy ? (
<EuiPopover
button={
<EuiButtonIcon
aria-label={i18n.translate(
'xpack.observabilityAiAssistant.chatTimeline.actions.copyMessage',
{
defaultMessage: 'Copy message',
}
)}
color="text"
iconType="copyClipboard"
display={isPopoverOpen === 'copy' ? 'fill' : 'empty'}
onClick={() => {
setIsPopoverOpen('copy');
onCopyToClipboard();
}}
/>
}
isOpen={isPopoverOpen === 'copy'}
panelPaddingSize="s"
closePopover={() => setIsPopoverOpen(undefined)}
>
<EuiText size="s">
<p>
{i18n.translate(
'xpack.observabilityAiAssistant.chatTimeline.actions.copyMessageSuccessful',
{
defaultMessage: 'Copied message',
}
)}
</p>
</EuiText>
</EuiPopover>
) : null}
</>
);
}
22 changes: 14 additions & 8 deletions x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,14 +103,17 @@ export function ChatPromptEditor({
await onSubmit({
'@timestamp': new Date().toISOString(),
message: {
role: MessageRole.Function,
role: MessageRole.User,
function_call: {
name: selectedFunctionName,
trigger: MessageRole.User,
arguments: currentPayload,
},
},
});

setFunctionPayload(undefined);
setSelectedFunctionName(undefined);
} else {
await onSubmit({
'@timestamp': new Date().toISOString(),
Expand All @@ -126,8 +129,8 @@ export function ChatPromptEditor({
useEffect(() => {
const keyboardListener = (event: KeyboardEvent) => {
if (!event.shiftKey && event.key === keys.ENTER) {
handleSubmit();
event.preventDefault();
handleSubmit();
}
};

Expand Down Expand Up @@ -188,8 +191,6 @@ export function ChatPromptEditor({
fullWidth
height="120px"
languageId="json"
value={functionPayload || ''}
onChange={handleChangeFunctionPayload}
isCopyable
languageConfiguration={{
autoClosingPairs: [
Expand All @@ -199,6 +200,9 @@ export function ChatPromptEditor({
},
],
}}
editorDidMount={(editor) => {
editor.focus();
}}
options={{
accessibilitySupport: 'off',
acceptSuggestionOnEnter: 'on',
Expand All @@ -223,18 +227,20 @@ export function ChatPromptEditor({
wrappingIndent: 'indent',
}}
transparentBackground
value={functionPayload || ''}
onChange={handleChangeFunctionPayload}
/>
</EuiPanel>
) : (
<EuiTextArea
resize="vertical"
rows={1}
fullWidth
inputRef={textAreaRef}
placeholder={i18n.translate('xpack.observabilityAiAssistant.prompt.placeholder', {
defaultMessage: 'Press ‘$’ for function recommendations',
})}
resize="vertical"
rows={1}
value={prompt}
inputRef={textAreaRef}
onChange={handleChange}
/>
)}
Expand All @@ -245,12 +251,12 @@ export function ChatPromptEditor({
<EuiSpacer size="xl" />
<EuiButtonIcon
aria-label="Submit"
isLoading={loading}
disabled={selectedFunctionName ? false : !prompt || loading || disabled}
display={
selectedFunctionName ? (functionPayload ? 'fill' : 'base') : prompt ? 'fill' : 'base'
}
iconType="kqlFunction"
isLoading={loading}
size="m"
onClick={handleSubmit}
/>
Expand Down
8 changes: 6 additions & 2 deletions x-pack/plugins/observability_ai_assistant/public/hooks/use_timeline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import type { ObservabilityAIAssistantService, PendingMessage } from '../types';
import { getTimelineItemsfromConversation } from '../utils/get_timeline_items_from_conversation';
import type { UseGenAIConnectorsResult } from './use_genai_connectors';
import { getAssistantSetupMessage } from '../service/get_assistant_setup_message';

import { useObservabilityAIAssistant } from './use_observability_ai_assistant';
export function createNewConversation(): ConversationCreateRequest {
return {
'@timestamp': new Date().toISOString(),
Expand Down Expand Up @@ -54,6 +54,9 @@ export function useTimeline({
onChatComplete: (messages: Message[]) => void;
knowledgeBaseAvailable: boolean;
}): UseTimelineResult {
const { getFunctions } = useObservabilityAIAssistant();
const functions = getFunctions();

const connectorId = connectors.selectedConnector;

const hasConnector = !!connectorId;
Expand All @@ -63,10 +66,11 @@ export function useTimeline({
messages,
currentUser,
hasConnector,
functions,
});

return items;
}, [messages, currentUser, hasConnector]);
}, [messages, currentUser, hasConnector, functions]);

const [subscription, setSubscription] = useState<Subscription | undefined>();

Expand Down
Loading

0 comments on commit 797cdb8

Please sign in to comment.