Merge pull request elastic#36 from CoenWarmer/storybook

CoenWarmer · Aug 10, 2023 · 90dc879 · 90dc879
2 parents 797cdb8 + f7ce6a7
commit 90dc879
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 148 deletions.
diff --git a/x-pack/plugins/observability_ai_assistant/common/types.ts b/x-pack/plugins/observability_ai_assistant/common/types.ts
@@ -28,7 +28,7 @@ export interface Message {
     function_call?: {
       name: string;
       arguments?: string;
-      trigger: MessageRole.Assistant | MessageRole.User | MessageRole.Elastic;
+      trigger: MessageRole;
     };
     data?: string;
   };

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item.tsx
@@ -113,8 +113,8 @@ export function ChatItem({
   };
 
   const handleToggleEdit = () => {
-    if (collapsed) {
-      setExpanded(!expanded);
+    if (collapsed && !expanded) {
+      setExpanded(true);
     }
     setEditing(!editing);
   };

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx
@@ -15,6 +15,7 @@ import {
   EuiSpacer,
   EuiPanel,
   keys,
+  EuiFocusTrap,
 } from '@elastic/eui';
 import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 import { i18n } from '@kbn/i18n';
@@ -43,6 +44,8 @@ export function ChatPromptEditor({
   const { getFunctions } = useObservabilityAIAssistant();
   const functions = getFunctions();
 
+  const isFocusTrapEnabled = Boolean(initialPrompt);
+
   const [prompt, setPrompt] = useState(initialPrompt);
 
   const [selectedFunctionName, setSelectedFunctionName] = useState<string | undefined>(
@@ -103,7 +106,8 @@ export function ChatPromptEditor({
         await onSubmit({
           '@timestamp': new Date().toISOString(),
           message: {
-            role: MessageRole.User,
+            role: MessageRole.Assistant,
+            content: '',
             function_call: {
               name: selectedFunctionName,
               trigger: MessageRole.User,
@@ -128,7 +132,7 @@ export function ChatPromptEditor({
 
   useEffect(() => {
     const keyboardListener = (event: KeyboardEvent) => {
-      if (!event.shiftKey && event.key === keys.ENTER) {
+      if (!event.shiftKey && event.key === keys.ENTER && (prompt || selectedFunctionName)) {
         event.preventDefault();
         handleSubmit();
       }
@@ -139,7 +143,7 @@ export function ChatPromptEditor({
     return () => {
       window.removeEventListener('keypress', keyboardListener);
     };
-  }, [handleSubmit]);
+  }, [handleSubmit, prompt, selectedFunctionName]);
 
   useEffect(() => {
     const textarea = textAreaRef.current;
@@ -155,112 +159,114 @@ export function ChatPromptEditor({
   });
 
   return (
-    <EuiFlexGroup gutterSize="s" responsive={false}>
-      <EuiFlexItem grow>
-        <EuiFlexGroup direction="column" gutterSize="s">
-          <EuiFlexItem>
-            <EuiFlexGroup responsive={false}>
-              <EuiFlexItem grow>
-                <FunctionListPopover
-                  functions={functions}
-                  selectedFunctionName={selectedFunctionName}
-                  onSelectFunction={handleSelectFunction}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                {selectedFunctionName ? (
-                  <EuiButtonEmpty
-                    iconType="cross"
-                    iconSide="right"
-                    size="xs"
-                    onClick={handleClearSelection}
-                  >
-                    {i18n.translate('xpack.observabilityAiAssistant.prompt.emptySelection', {
-                      defaultMessage: 'Empty selection',
-                    })}
-                  </EuiButtonEmpty>
-                ) : null}
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            {selectedFunctionName ? (
-              <EuiPanel borderRadius="none" color="subdued" hasShadow={false} paddingSize="xs">
-                <CodeEditor
-                  aria-label="payloadEditor"
+    <EuiFocusTrap disabled={!isFocusTrapEnabled}>
+      <EuiFlexGroup gutterSize="s" responsive={false}>
+        <EuiFlexItem grow>
+          <EuiFlexGroup direction="column" gutterSize="s">
+            <EuiFlexItem>
+              <EuiFlexGroup responsive={false}>
+                <EuiFlexItem grow>
+                  <FunctionListPopover
+                    functions={functions}
+                    selectedFunctionName={selectedFunctionName}
+                    onSelectFunction={handleSelectFunction}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  {selectedFunctionName ? (
+                    <EuiButtonEmpty
+                      iconType="cross"
+                      iconSide="right"
+                      size="xs"
+                      onClick={handleClearSelection}
+                    >
+                      {i18n.translate('xpack.observabilityAiAssistant.prompt.emptySelection', {
+                        defaultMessage: 'Empty selection',
+                      })}
+                    </EuiButtonEmpty>
+                  ) : null}
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              {selectedFunctionName ? (
+                <EuiPanel borderRadius="none" color="subdued" hasShadow={false} paddingSize="xs">
+                  <CodeEditor
+                    aria-label="payloadEditor"
+                    fullWidth
+                    height="120px"
+                    languageId="json"
+                    isCopyable
+                    languageConfiguration={{
+                      autoClosingPairs: [
+                        {
+                          open: '{',
+                          close: '}',
+                        },
+                      ],
+                    }}
+                    editorDidMount={(editor) => {
+                      editor.focus();
+                    }}
+                    options={{
+                      accessibilitySupport: 'off',
+                      acceptSuggestionOnEnter: 'on',
+                      automaticLayout: true,
+                      autoClosingQuotes: 'always',
+                      autoIndent: 'full',
+                      contextmenu: true,
+                      fontSize: 12,
+                      formatOnPaste: true,
+                      formatOnType: true,
+                      inlineHints: { enabled: true },
+                      lineNumbers: 'on',
+                      minimap: { enabled: false },
+                      model,
+                      overviewRulerBorder: false,
+                      quickSuggestions: true,
+                      scrollbar: { alwaysConsumeMouseWheel: false },
+                      scrollBeyondLastLine: false,
+                      suggestOnTriggerCharacters: true,
+                      tabSize: 2,
+                      wordWrap: 'on',
+                      wrappingIndent: 'indent',
+                    }}
+                    transparentBackground
+                    value={functionPayload || ''}
+                    onChange={handleChangeFunctionPayload}
+                  />
+                </EuiPanel>
+              ) : (
+                <EuiTextArea
                   fullWidth
-                  height="120px"
-                  languageId="json"
-                  isCopyable
-                  languageConfiguration={{
-                    autoClosingPairs: [
-                      {
-                        open: '{',
-                        close: '}',
-                      },
-                    ],
-                  }}
-                  editorDidMount={(editor) => {
-                    editor.focus();
-                  }}
-                  options={{
-                    accessibilitySupport: 'off',
-                    acceptSuggestionOnEnter: 'on',
-                    automaticLayout: true,
-                    autoClosingQuotes: 'always',
-                    autoIndent: 'full',
-                    contextmenu: true,
-                    fontSize: 12,
-                    formatOnPaste: true,
-                    formatOnType: true,
-                    inlineHints: { enabled: true },
-                    lineNumbers: 'on',
-                    minimap: { enabled: false },
-                    model,
-                    overviewRulerBorder: false,
-                    quickSuggestions: true,
-                    scrollbar: { alwaysConsumeMouseWheel: false },
-                    scrollBeyondLastLine: false,
-                    suggestOnTriggerCharacters: true,
-                    tabSize: 2,
-                    wordWrap: 'on',
-                    wrappingIndent: 'indent',
-                  }}
-                  transparentBackground
-                  value={functionPayload || ''}
-                  onChange={handleChangeFunctionPayload}
+                  inputRef={textAreaRef}
+                  placeholder={i18n.translate('xpack.observabilityAiAssistant.prompt.placeholder', {
+                    defaultMessage: 'Press ‘$’ for function recommendations',
+                  })}
+                  resize="vertical"
+                  rows={1}
+                  value={prompt}
+                  onChange={handleChange}
                 />
-              </EuiPanel>
-            ) : (
-              <EuiTextArea
-                fullWidth
-                inputRef={textAreaRef}
-                placeholder={i18n.translate('xpack.observabilityAiAssistant.prompt.placeholder', {
-                  defaultMessage: 'Press ‘$’ for function recommendations',
-                })}
-                resize="vertical"
-                rows={1}
-                value={prompt}
-                onChange={handleChange}
-              />
-            )}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiSpacer size="xl" />
-        <EuiButtonIcon
-          aria-label="Submit"
-          disabled={selectedFunctionName ? false : !prompt || loading || disabled}
-          display={
-            selectedFunctionName ? (functionPayload ? 'fill' : 'base') : prompt ? 'fill' : 'base'
-          }
-          iconType="kqlFunction"
-          isLoading={loading}
-          size="m"
-          onClick={handleSubmit}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiSpacer size="xl" />
+          <EuiButtonIcon
+            aria-label="Submit"
+            disabled={selectedFunctionName ? false : !prompt || loading || disabled}
+            display={
+              selectedFunctionName ? (functionPayload ? 'fill' : 'base') : prompt ? 'fill' : 'base'
+            }
+            iconType="kqlFunction"
+            isLoading={loading}
+            size="m"
+            onClick={handleSubmit}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFocusTrap>
   );
 }
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_timeline.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_timeline.tsx
@@ -7,7 +7,7 @@
 
 import { EuiCommentList } from '@elastic/eui';
 import type { AuthenticatedUser } from '@kbn/security-plugin/common';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { type Message } from '../../../common';
 import type { Feedback } from '../feedback_buttons';
 import { ChatItem } from './chat_item';
@@ -16,7 +16,7 @@ export interface ChatTimelineItem
   extends Pick<Message, '@timestamp'>,
     Pick<Message['message'], 'role' | 'content' | 'function_call'> {
   id: string;
-  title: string;
+  title: ReactNode;
   loading: boolean;
   canCopy: boolean;
   canEdit: boolean;