[8.12] Tweaks to prompt editor (elastic#174030) (elastic#175664)

# Backport This will backport the following commits from `main` to `8.12`: - [Tweaks to prompt editor (elastic#174030)](elastic#174030)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: kibanamachine <[email protected]>
kibanamachine · Jan 26, 2024 · 9419256 · 9419256
1 parent f51584c
commit 9419256
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 157 deletions.
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
@@ -27,7 +27,7 @@ import type { UseGenAIConnectorsResult } from '../../hooks/use_genai_connectors'
 import type { UseKnowledgeBaseResult } from '../../hooks/use_knowledge_base';
 import { type Conversation, type Message, MessageRole } from '../../../common/types';
 import { ChatHeader } from './chat_header';
-import { ChatPromptEditor } from './chat_prompt_editor';
+import { PromptEditor } from '../prompt_editor/prompt_editor';
 import { ChatTimeline } from './chat_timeline';
 import { Feedback } from '../feedback_buttons';
 import { IncorrectLicensePanel } from './incorrect_license_panel';
@@ -210,7 +210,7 @@ export function ChatBody({
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiPanel hasBorder={false} hasShadow={false} paddingSize="m">
-            <ChatPromptEditor
+            <PromptEditor
               hidden={connectors.loading || connectors.connectors?.length === 0}
               loading={isLoading}
               disabled
@@ -253,6 +253,7 @@ export function ChatBody({
                   chatState={state}
                   hasConnector={!!connectors.connectors?.length}
                   onEdit={(editedMessage, newMessage) => {
+                    setStickToBottom(true);
                     const indexOf = messages.indexOf(editedMessage);
                     next(messages.slice(0, indexOf).concat(newMessage));
                   }}
@@ -308,14 +309,14 @@ export function ChatBody({
             color="subdued"
             className={promptEditorContainerClassName}
           >
-            <ChatPromptEditor
+            <PromptEditor
               disabled={!connectors.selectedConnector || !hasCorrectLicense}
               hidden={connectors.loading || connectors.connectors?.length === 0}
               loading={isLoading}
+              onChangeHeight={handleChangeHeight}
               onSendTelemetry={(eventWithPayload) =>
                 sendEvent(chatService.analytics, eventWithPayload)
               }
-              onChangeHeight={handleChangeHeight}
               onSubmit={(message) => {
                 setStickToBottom(true);
                 return next(messages.concat(message));

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
@@ -127,6 +127,7 @@ export function ChatItem({
 
   const handleInlineEditSubmit = (newMessage: Message) => {
     handleToggleEdit();
+
     return onEditSubmit(newMessage);
   };
 

diff --git a/...ervability_ai_assistant/public/components/chat/chat_item_content_inline_prompt_editor.tsx b/...ervability_ai_assistant/public/components/chat/chat_item_content_inline_prompt_editor.tsx
@@ -6,10 +6,11 @@
  */
 
 import React from 'react';
-import { EuiPanel } from '@elastic/eui';
+import { noop } from 'lodash';
 import { css } from '@emotion/css';
+import { EuiPanel } from '@elastic/eui';
 import { MessageText } from '../message_panel/message_text';
-import { ChatPromptEditor } from './chat_prompt_editor';
+import { PromptEditor } from '../prompt_editor/prompt_editor';
 import type { Message } from '../../../common';
 import type { ChatActionClickHandler } from './types';
 import type { TelemetryEventTypeWithPayload } from '../../analytics';
@@ -59,14 +60,14 @@ export function ChatItemContentInlinePromptEditor({
       hasShadow={false}
       className={editorContainerClassName}
     >
-      <ChatPromptEditor
+      <PromptEditor
         disabled={false}
         hidden={false}
         loading={false}
         initialFunctionCall={functionCall}
         initialContent={content}
         initialRole={role}
-        onChangeHeight={() => {}}
+        onChangeHeight={noop}
         onSubmit={onSubmit}
         onSendTelemetry={onSendTelemetry}
       />

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
@@ -120,9 +120,9 @@ export function ChatTimeline({
             key={index}
             consolidatedItem={item}
             onActionClick={onActionClick}
+            onEditSubmit={onEdit}
             onFeedback={onFeedback}
             onRegenerate={onRegenerate}
-            onEditSubmit={onEdit}
             onSendTelemetry={onSendTelemetry}
             onStopGenerating={onStopGenerating}
           />

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/function_list_popover.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/function_list_popover.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   EuiBetaBadge,
   EuiButtonIcon,
@@ -42,8 +42,6 @@ export function FunctionListPopover({
   const { getFunctions } = useObservabilityAIAssistantChatService();
   const functions = getFunctions();
 
-  const filterRef = useRef<HTMLInputElement | null>(null);
-
   const [functionOptions, setFunctionOptions] = useState<
     Array<EuiSelectableOption<FunctionListOption>>
   >(mapFunctions({ functions, selectedFunctionName }));
@@ -65,69 +63,19 @@ export function FunctionListPopover({
     onSelectFunction(func.label);
   };
 
-  useEffect(() => {
-    const keyboardListener = (event: KeyboardEvent) => {
-      if (event.shiftKey && event.code === 'Digit4') {
-        setIsFunctionListOpen(true);
-      }
-    };
-
-    window.addEventListener('keyup', keyboardListener);
-
-    return () => {
-      window.removeEventListener('keyup', keyboardListener);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isFunctionListOpen && filterRef.current) {
-      filterRef.current.focus();
-    }
-  }, [isFunctionListOpen]);
-
   useEffect(() => {
     const options = mapFunctions({ functions, selectedFunctionName });
     if (options.length !== functionOptions.length) {
       setFunctionOptions(options);
     }
   }, [functionOptions.length, functions, selectedFunctionName]);
 
-  const renderFunctionOption = (
-    option: EuiSelectableOption<FunctionListOption>,
-    searchValue: string
-  ) => {
-    return (
-      <EuiFlexGroup gutterSize="xs" direction="column">
-        <EuiFlexItem grow={false}>
-          <EuiFlexGroup gutterSize="xs">
-            <EuiFlexItem grow={false}>
-              <EuiText size="s">
-                <strong>
-                  <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>{' '}
-                  <EuiBetaBadge label="beta" size="s" style={{ verticalAlign: 'middle' }} />
-                </strong>
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false} />
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText
-            size="xs"
-            style={{ textOverflow: 'ellipsis', overflow: 'hidden', marginBottom: 4 }}
-          >
-            <EuiHighlight search={searchValue}>{option.searchableLabel || ''}</EuiHighlight>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  };
-
   return (
     <EuiPopover
       anchorPosition="downLeft"
       button={
         <EuiToolTip
+          key={mode} // this is added to prevent the tooltip from flickering when the mode stays the same
           content={
             mode === 'prompt'
               ? i18n.translate(
@@ -144,6 +92,10 @@ export function FunctionListPopover({
           display="block"
         >
           <EuiButtonIcon
+            aria-label={i18n.translate(
+              'xpack.observabilityAiAssistant.functionListPopover.euiButtonIcon.selectAFunctionLabel',
+              { defaultMessage: 'Select function' }
+            )}
             data-test-subj="observabilityAiAssistantFunctionListPopoverButton"
             disabled={disabled}
             iconType={selectedFunctionName ? 'cross' : 'plusInCircle'}
@@ -154,6 +106,7 @@ export function FunctionListPopover({
       }
       closePopover={handleClickFunctionList}
       css={{ maxWidth: 400 }}
+      initialFocus="#searchFilterList"
       panelPaddingSize="none"
       isOpen={isFunctionListOpen}
     >
@@ -173,7 +126,7 @@ export function FunctionListPopover({
         searchable
         searchProps={{
           'data-test-subj': 'searchFiltersList',
-          inputRef: (node) => (filterRef.current = node),
+          id: 'searchFilterList',
           placeholder: i18n.translate('xpack.observabilityAiAssistant.prompt.functionList.filter', {
             defaultMessage: 'Filter',
           }),
@@ -215,3 +168,34 @@ function mapFunctions({
           : ('off' as EuiSelectableOptionCheckedType),
     }));
 }
+
+function renderFunctionOption(
+  option: EuiSelectableOption<FunctionListOption>,
+  searchValue: string
+) {
+  return (
+    <EuiFlexGroup gutterSize="xs" direction="column">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <EuiText size="s">
+              <strong>
+                <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>{' '}
+                <EuiBetaBadge label="beta" size="s" style={{ verticalAlign: 'middle' }} />
+              </strong>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false} />
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText
+          size="xs"
+          style={{ textOverflow: 'ellipsis', overflow: 'hidden', marginBottom: 4 }}
+        >
+          <EuiHighlight search={searchValue}>{option.searchableLabel || ''}</EuiHighlight>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/...nents/chat/chat_prompt_editor.stories.tsx → ...s/prompt_editor/prompt_editor.stories.tsx b/...nents/chat/chat_prompt_editor.stories.tsx → ...s/prompt_editor/prompt_editor.stories.tsx
@@ -7,17 +7,17 @@
 
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
-import { ChatPromptEditor as Component, ChatPromptEditorProps } from './chat_prompt_editor';
+import { PromptEditor as Component, PromptEditorProps } from './prompt_editor';
 import { KibanaReactStorybookDecorator } from '../../utils/storybook_decorator';
 
 /*
-  JSON Schema validation in the ChatPromptEditor compponent does not work
+  JSON Schema validation in the PromptEditor compponent does not work
   when rendering the component from within Storybook.
   
 */
 export default {
   component: Component,
-  title: 'app/Molecules/ChatPromptEditor',
+  title: 'app/Molecules/PromptEditor',
   argTypes: {},
   parameters: {
     backgrounds: {
@@ -28,11 +28,11 @@ export default {
   decorators: [KibanaReactStorybookDecorator],
 };
 
-const Template: ComponentStory<typeof Component> = (props: ChatPromptEditorProps) => {
+const Template: ComponentStory<typeof Component> = (props: PromptEditorProps) => {
   return <Component {...props} />;
 };
 
 const defaultProps = {};
 
-export const ChatPromptEditor = Template.bind({});
-ChatPromptEditor.args = defaultProps;
+export const PromptEditor = Template.bind({});
+PromptEditor.args = defaultProps;
-Original file line number
+Diff line change
@@ Expand Up / @@ -127,6 +127,7 @@ export function ChatItem({ @@
       const handleInlineEditSubmit = (newMessage: Message) => {
         handleToggleEdit();
         return onEditSubmit(newMessage);
       };
@@ Expand Down @@