Merge pull request elastic#41 from CoenWarmer/storybook

x-pack/plugins/observability_ai_assistant/public/components/action_menu_item/action_menu_item.tsx

@@ -10,13 +10,15 @@ import React, { useState } from 'react';
 import { ObservabilityAIAssistantChatServiceProvider } from '../../context/observability_ai_assistant_chat_service_provider';
 import { useAbortableAsync } from '../../hooks/use_abortable_async';
 import { useConversation } from '../../hooks/use_conversation';
+import { useGenAIConnectors } from '../../hooks/use_genai_connectors';
 import { useObservabilityAIAssistant } from '../../hooks/use_observability_ai_assistant';
 import { EMPTY_CONVERSATION_TITLE } from '../../i18n';
 import { AssistantAvatar } from '../assistant_avatar';
 import { ChatFlyout } from '../chat/chat_flyout';
 
 export function ObservabilityAIAssistantActionMenuItem() {
   const service = useObservabilityAIAssistant();
+  const connectors = useGenAIConnectors();
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -34,6 +36,7 @@ export function ObservabilityAIAssistantActionMenuItem() {
 
   const { conversation, displayedMessages, setDisplayedMessages, save } = useConversation({
     conversationId,
+    connectorId: connectors.selectedConnector,
   });
 
   if (!service.isEnabled()) {

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_timeline.stories.tsx

@@ -78,14 +78,20 @@ const defaultProps: ComponentProps<typeof Component> = {
         trigger: MessageRole.Assistant,
       },
       actions: {
-        canEdit: true,
+        canEdit: false,
+        canCopy: true,
+        canGiveFeedback: true,
+        canRegenerate: true,
       },
     }),
     buildFunctionChatItem({
       content: '{ "message": "The arguments are wrong" }',
       error: new Error(),
       actions: {
         canRegenerate: false,
+        canEdit: true,
+        canGiveFeedback: false,
+        canCopy: true,
       },
     }),
     buildAssistantChatItem({
@@ -98,6 +104,9 @@ const defaultProps: ComponentProps<typeof Component> = {
       },
       actions: {
         canEdit: true,
+        canCopy: true,
+        canGiveFeedback: true,
+        canRegenerate: true,
       },
     }),
     buildFunctionChatItem({

x-pack/plugins/observability_ai_assistant/public/components/chat/conversation_list.tsx

@@ -28,6 +28,10 @@ const titleClassName = css`
   text-transform: uppercase;
 `;
 
+const newChatButtonWrapperClassName = css`
+  padding-bottom: 5px;
+`;
+
 export function ConversationList({
   selected,
   onClickNewChat,
@@ -101,6 +105,7 @@ export function ConversationList({
                       isActive={conversation.id === selected}
                       isDisabled={loading}
                       href={conversation.href}
+                      wrapText
                       extraAction={
                         conversation.id
                           ? {
@@ -135,7 +140,7 @@ export function ConversationList({
         <EuiFlexItem grow={false}>
           <EuiPanel paddingSize="s" hasBorder={false} hasShadow={false}>
             <EuiFlexGroup alignItems="center">
-              <EuiFlexItem grow>
+              <EuiFlexItem grow className={newChatButtonWrapperClassName}>
                 <NewChatButton onClick={onClickNewChat} />
               </EuiFlexItem>
             </EuiFlexGroup>

x-pack/plugins/observability_ai_assistant/public/components/chat/function_list_popover.tsx

@@ -5,19 +5,25 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   EuiButtonEmpty,
-  EuiContextMenu,
-  EuiContextMenuPanel,
+  EuiHighlight,
   EuiPopover,
+  EuiSelectable,
+  EuiSelectableOption,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
+import type { EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option';
 import { i18n } from '@kbn/i18n';
-import { FunctionDefinition } from '../../../common/types';
 import { useObservabilityAIAssistantChatService } from '../../hooks/use_observability_ai_assistant_chat_service';
 
+interface FunctionListOption {
+  label: string;
+  searchableLabel: string;
+}
+
 export function FunctionListPopover({
   selectedFunctionName,
   onSelectFunction,
@@ -27,17 +33,78 @@ export function FunctionListPopover({
   onSelectFunction: (func: string) => void;
   disabled: boolean;
 }) {
-  const chatService = useObservabilityAIAssistantChatService();
+  const { getFunctions } = useObservabilityAIAssistantChatService();
+  const filterRef = useRef<HTMLInputElement | null>(null);
+
+  const [functionOptions, setFunctionOptions] = useState<
+    Array<EuiSelectableOption<FunctionListOption>>
+  >([]);
 
   const [isFunctionListOpen, setIsFunctionListOpen] = useState(false);
 
   const handleClickFunctionList = () => {
     setIsFunctionListOpen(!isFunctionListOpen);
   };
 
-  const handleSelectFunction = (func: FunctionDefinition) => {
+  const handleSelectFunction = (func: EuiSelectableOption<FunctionListOption>) => {
     setIsFunctionListOpen(false);
-    onSelectFunction(func.options.name);
+    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 = getFunctions().map((func) => ({
+      label: func.options.name,
+      searchableLabel: func.options.descriptionForUser,
+      checked:
+        func.options.name === selectedFunctionName
+          ? ('on' as EuiSelectableOptionCheckedType)
+          : ('off' as EuiSelectableOptionCheckedType),
+    }));
+
+    setFunctionOptions(options);
+  }, [getFunctions, selectedFunctionName]);
+
+  const renderCountryOption = (
+    option: EuiSelectableOption<FunctionListOption>,
+    searchValue: string
+  ) => {
+    return (
+      <>
+        <EuiText size="s">
+          <p>
+            <strong>
+              <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>{' '}
+            </strong>
+          </p>
+        </EuiText>
+        <EuiSpacer size="xs" />
+        <EuiText size="s">
+          <p style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>
+            <EuiHighlight search={searchValue}>{option.searchableLabel || ''}</EuiHighlight>
+          </p>
+        </EuiText>
+      </>
+    );
   };
 
   return (
@@ -53,43 +120,51 @@ export function FunctionListPopover({
         >
           {selectedFunctionName
             ? selectedFunctionName
-            : i18n.translate('xpack.observabilityAiAssistant.prompt.callFunction', {
+            : i18n.translate('xpack.observabilityAiAssistant.prompt.functionList.callFunction', {
                 defaultMessage: 'Call function',
               })}
         </EuiButtonEmpty>
       }
       closePopover={handleClickFunctionList}
-      css={{ maxWidth: 400 }}
       panelPaddingSize="none"
       isOpen={isFunctionListOpen}
     >
-      <EuiContextMenuPanel size="s">
-        <EuiContextMenu
-          initialPanelId={0}
-          panels={[
-            {
-              id: 0,
-              width: 500,
-              items: chatService.getFunctions().map((func) => ({
-                name: (
-                  <>
-                    <EuiText size="s">
-                      <p>
-                        <strong>{func.options.name}</strong>
-                      </p>
-                    </EuiText>
-                    <EuiSpacer size="xs" />
-                    <EuiText size="s">
-                      <p>{func.options.descriptionForUser}</p>
-                    </EuiText>
-                  </>
-                ),
-                onClick: () => handleSelectFunction(func),
-              })),
-            },
-          ]}
-        />
-      </EuiContextMenuPanel>
+      <EuiSelectable
+        aria-label={i18n.translate(
+          'xpack.observabilityAiAssistant.prompt.functionList.functionList',
+          {
+            defaultMessage: 'Function list',
+          }
+        )}
+        listProps={{
+          isVirtualized: false,
+          showIcons: false,
+        }}
+        options={functionOptions}
+        renderOption={renderCountryOption}
+        searchable
+        searchProps={{
+          'data-test-subj': 'searchFiltersList',
+          inputRef: (node) => (filterRef.current = node),
+          placeholder: i18n.translate('xpack.observabilityAiAssistant.prompt.functionList.filter', {
+            defaultMessage: 'Filter',
+          }),
+        }}
+        singleSelection
+        onChange={(functions) => {
+          const selectedFunction = functions.filter((fn) => fn.checked !== 'off');
+          if (selectedFunction && selectedFunction.length === 1) {
+            handleSelectFunction({ ...selectedFunction[0], checked: 'on' });
+          }
+        }}
+      >
+        {(list, search) => (
+          <div style={{ overflow: 'hidden' }}>
+            {search}
+            <div style={{ width: 500, height: 350, overflowY: 'scroll' }}>{list}</div>
+          </div>
+        )}
+      </EuiSelectable>
     </EuiPopover>
   );
 }

x-pack/plugins/observability_ai_assistant/public/hooks/use_conversation.ts

@@ -7,7 +7,7 @@
 import { i18n } from '@kbn/i18n';
 import { merge, omit } from 'lodash';
 import { Dispatch, SetStateAction, useState } from 'react';
-import type { Conversation, Message } from '../../common';
+import { type Conversation, type Message } from '../../common';
 import type { ConversationCreateRequest } from '../../common/types';
 import { ObservabilityAIAssistantChatService } from '../types';
 import { useAbortableAsync, type AbortableAsyncState } from './use_abortable_async';
@@ -18,14 +18,16 @@ import { createNewConversation } from './use_timeline';
 export function useConversation({
   conversationId,
   chatService,
+  connectorId,
 }: {
   conversationId?: string;
   chatService?: ObservabilityAIAssistantChatService;
+  connectorId: string | undefined;
 }): {
   conversation: AbortableAsyncState<ConversationCreateRequest | Conversation | undefined>;
   displayedMessages: Message[];
   setDisplayedMessages: Dispatch<SetStateAction<Message[]>>;
-  save: (messages: Message[]) => Promise<Conversation>;
+  save: (messages: Message[], handleRefreshConversations?: () => void) => Promise<Conversation>;
 } {
   const service = useObservabilityAIAssistant();
 
@@ -67,11 +69,12 @@ export function useConversation({
     conversation,
     displayedMessages,
     setDisplayedMessages,
-    save: (messages: Message[]) => {
+    save: (messages: Message[], handleRefreshConversations?: () => void) => {
       const conversationObject = conversation.value!;
+
       return conversationId
         ? service
-            .callApi(`POST /internal/observability_ai_assistant/conversation/{conversationId}`, {
+            .callApi(`PUT /internal/observability_ai_assistant/conversation/{conversationId}`, {
               signal: null,
               params: {
                 path: {
@@ -100,14 +103,38 @@ export function useConversation({
               throw err;
             })
         : service
-            .callApi(`PUT /internal/observability_ai_assistant/conversation`, {
+            .callApi(`POST /internal/observability_ai_assistant/conversation`, {
               signal: null,
               params: {
                 body: {
                   conversation: merge({}, conversationObject, { messages }),
                 },
               },
             })
+            .then((nextConversation) => {
+              if (connectorId) {
+                service
+                  .callApi(
+                    `PUT /internal/observability_ai_assistant/conversation/{conversationId}/auto_title`,
+                    {
+                      signal: null,
+                      params: {
+                        path: {
+                          conversationId: nextConversation.conversation.id,
+                        },
+                        body: {
+                          connectorId,
+                        },
+                      },
+                    }
+                  )
+                  .then(() => {
+                    handleRefreshConversations?.();
+                    return conversation.refresh();
+                  });
+              }
+              return nextConversation;
+            })
             .catch((err) => {
               notifications.toasts.addError(err, {
                 title: i18n.translate('xpack.observabilityAiAssistant.errorCreatingConversation', {