[8.14] [Search] [Playground] present message when no documents are re…

…turned (#183219) (#183251) # Backport This will backport the following commits from `main` to `8.14`: - [[Search] [Playground] present message when no documents are returned (#183219)](#183219)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Joe McElroy <joseph.mcelroy@elastic.co>
elastic · May 13, 2024 · b75bb78 · b75bb78
1 parent 57b5dc4
commit b75bb78
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 6 deletions.
diff --git a/docs/playground/playground-query.asciidoc b/docs/playground/playground-query.asciidoc
@@ -48,4 +48,21 @@ Refer to <<playground-context, Optimize context>> for more information.
 Retrievers make it easier to compose and test different retrieval strategies in your search pipelines. 
 ====
 // TODO: uncomment and add to note once following page is live
-//Refer to {ref}/retrievers-overview.html[documentation] for a high level overview of retrievers.
+Refer to {ref}/retrievers-overview.html[documentation] for a high level overview of retrievers.
+[float]
+[[playground-hidden-fields]]
+=== Hidden fields
+
+The query editor shows fields which make sense for the user to search on, but not all fields in your documents are visible from the editor.
+
+Available field types:
+
+- Semantic fields like `sparse_vector` or `dense_vector` fields where the embeddings have been created from a inference processor
+- `text` fields
+
+Hidden Field Types:
+
+- non `text` fields like `keyword` fields
+- fields that are not indexed
+- semantic fields where the embeddings have not been created from a inference processor
+- nested fields
diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts
@@ -955,6 +955,10 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
     },
     playground: {
       chatPlayground: `${KIBANA_DOCS}playground.html`,
+      retrievalOptimize: `${KIBANA_DOCS}playground-query.html#playground-query-relevance`,
+      retrieval: `${KIBANA_DOCS}playground-query.html`,
+      context: `${KIBANA_DOCS}playground-context.html`,
+      hiddenFields: `${KIBANA_DOCS}playground-query.html#playground-hidden-fields`,
     },
   });
 };
diff --git a/packages/kbn-doc-links/src/types.ts b/packages/kbn-doc-links/src/types.ts
@@ -650,6 +650,10 @@ export interface DocLinks {
   };
   readonly playground: {
     readonly chatPlayground: string;
+    readonly retrievalOptimize: string;
+    readonly retrieval: string;
+    readonly context: string;
+    readonly hiddenFields: string;
   };
 }
 

diff --git a/x-pack/plugins/search_playground/common/doc_links.ts b/x-pack/plugins/search_playground/common/doc_links.ts
@@ -9,11 +9,19 @@ import { DocLinks } from '@kbn/doc-links';
 
 class PlaygroundDocLinks {
   public chatPlayground: string = '';
+  public retrievalOptimize: string = '';
+  public retrieval: string = '';
+  public context: string = '';
+  public hiddenFields: string = '';
 
   constructor() {}
 
   setDocLinks(newDocLinks: DocLinks) {
     this.chatPlayground = newDocLinks.playground.chatPlayground;
+    this.retrievalOptimize = newDocLinks.playground.retrievalOptimize;
+    this.retrieval = newDocLinks.playground.retrieval;
+    this.context = newDocLinks.playground.context;
+    this.hiddenFields = newDocLinks.playground.hiddenFields;
   }
 }
 

diff --git a/x-pack/plugins/search_playground/public/components/edit_context/edit_context_flyout.tsx b/x-pack/plugins/search_playground/public/components/edit_context/edit_context_flyout.tsx
@@ -103,7 +103,7 @@ export const EditContextFlyout: React.FC<EditContextFlyoutProps> = ({ onClose })
               defaultMessage="Context is the information you provide to the LLM, by selecting fields from your Elasticsearch documents. Optimize context for better results."
             />
             <EuiLink
-              href={docLinks.chatPlayground}
+              href={docLinks.context}
               target="_blank"
               data-test-subj="context-optimization-documentation-link"
             >

diff --git a/x-pack/plugins/search_playground/public/components/message_list/assistant_message.test.tsx b/x-pack/plugins/search_playground/public/components/message_list/assistant_message.test.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AssistantMessage } from './assistant_message';
+import { FormProvider, useForm } from 'react-hook-form';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+
+// for tooltip
+jest.mock('../../hooks/use_llms_models', () => ({
+  useLLMsModels: () => [
+    { value: 'model1', promptTokenLimit: 100 },
+    { value: 'model2', promptTokenLimit: 200 },
+  ],
+}));
+
+const MockFormProvider = ({ children }: { children: React.ReactElement }) => {
+  const methods = useForm({
+    values: {
+      indices: ['index1', 'index2'],
+    },
+  });
+  return (
+    <IntlProvider locale="en">
+      <FormProvider {...methods}>{children}</FormProvider>
+    </IntlProvider>
+  );
+};
+
+describe('AssistantMessage component', () => {
+  const mockMessage = {
+    content: 'Test content',
+    createdAt: new Date(),
+    citations: [],
+    retrievalDocs: [{ content: '', metadata: { _id: '1', _index: 'index', _score: 1 } }],
+    inputTokens: { context: 20, total: 10 },
+  };
+
+  it('renders message content correctly', () => {
+    const { getByText } = render(
+      <MockFormProvider>
+        <AssistantMessage message={mockMessage} />
+      </MockFormProvider>
+    );
+    expect(getByText('Test content')).toBeInTheDocument();
+    expect(screen.getByTestId('retrieval-docs-comment')).toBeInTheDocument();
+    expect(screen.getByTestId('retrieval-docs-button')).toHaveTextContent('1 document sources');
+    expect(screen.getByTestId('token-tooltip-button')).toHaveTextContent('10 tokens sent');
+  });
+
+  it('renders message content correctly with no retrieval docs', () => {
+    const { getByText } = render(
+      <MockFormProvider>
+        <AssistantMessage
+          message={{
+            ...mockMessage,
+            retrievalDocs: [],
+          }}
+        />
+      </MockFormProvider>
+    );
+    expect(getByText('Test content')).toBeInTheDocument();
+    expect(screen.queryByTestId('retrieval-docs-comment')).not.toBeInTheDocument();
+    expect(screen.getByTestId('retrieval-docs-comment-no-docs')).toBeInTheDocument();
+  });
+
+  it('renders message content correctly with citations', () => {
+    render(
+      <MockFormProvider>
+        <AssistantMessage
+          message={{
+            ...mockMessage,
+            citations: [
+              { content: 'Citation content', metadata: { _id: '1', _index: 'index', _score: 1 } },
+            ],
+          }}
+        />
+      </MockFormProvider>
+    );
+
+    expect(screen.getByTestId('assistant-message-citations')).toBeInTheDocument();
+  });
+});
diff --git a/x-pack/plugins/search_playground/public/components/message_list/assistant_message.tsx b/x-pack/plugins/search_playground/public/components/message_list/assistant_message.tsx
@@ -13,6 +13,7 @@ import {
   EuiButtonEmpty,
   EuiComment,
   EuiFlexGroup,
+  EuiLink,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -21,6 +22,7 @@ import { i18n } from '@kbn/i18n';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
+import { docLinks } from '../../../common/doc_links';
 import { RetrievalDocsFlyout } from './retrieval_docs_flyout';
 import type { AIMessage as AIMessageType } from '../../types';
 
@@ -52,6 +54,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
         <EuiComment
           username={username}
           timelineAvatar="dot"
+          data-test-subj="retrieval-docs-comment"
           event={
             <>
               <EuiText size="s">
@@ -68,6 +71,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
                 css={{ blockSize: 'auto' }}
                 size="s"
                 flush="left"
+                data-test-subj="retrieval-docs-button"
                 onClick={() => setIsDocsFlyoutOpen(true)}
               >
                 <FormattedMessage
@@ -87,11 +91,50 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
           }
         />
       )}
+      {retrievalDocs?.length === 0 && (
+        <EuiComment
+          username={username}
+          timelineAvatar="dot"
+          data-test-subj="retrieval-docs-comment-no-docs"
+          event={
+            <>
+              <EuiText size="s">
+                <p>
+                  <FormattedMessage
+                    id="xpack.searchPlayground.chat.message.assistant.noRetrievalDocs"
+                    defaultMessage="Unable to retrieve documents based on the provided question and query."
+                  />
+                  {` `}
+                </p>
+              </EuiText>
+
+              <EuiLink
+                href={docLinks.retrievalOptimize}
+                target="_blank"
+                data-test-subj="retrieval-optimization-documentation-link"
+              >
+                <FormattedMessage
+                  id="xpack.searchPlayground.chat.message.assistant.noRetrievalDocs.learnMore"
+                  defaultMessage=" Learn more."
+                />
+              </EuiLink>
+
+              {isDocsFlyoutOpen && (
+                <RetrievalDocsFlyout
+                  onClose={() => setIsDocsFlyoutOpen(false)}
+                  retrievalDocs={retrievalDocs}
+                />
+              )}
+            </>
+          }
+        />
+      )}
       <EuiComment
         username={username}
         event={i18n.translate('xpack.searchPlayground.chat.message.assistant.event.responded', {
           defaultMessage: 'responded',
         })}
+        data-test-subj="assistant-message"
         timestamp={
           createdAt &&
           i18n.translate('xpack.searchPlayground.chat.message.assistant.createdAt', {
@@ -137,7 +180,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
         {!!citations?.length && (
           <>
             <EuiSpacer size="l" />
-            <EuiTitle size="xs">
+            <EuiTitle size="xs" data-test-subj="assistant-message-citations">
               <p>
                 <FormattedMessage
                   id="xpack.searchPlayground.chat.message.assistant.citations.title"

diff --git a/...s/search_playground/public/components/sources_panel/sources_panel_for_start_chat.test.tsx b/...s/search_playground/public/components/sources_panel/sources_panel_for_start_chat.test.tsx
@@ -101,7 +101,7 @@ describe('SourcesPanelForStartChat component', () => {
       noFieldsIndicesWarning: 'index1',
     });
 
-    render(<SourcesPanelForStartChat />);
+    render(<SourcesPanelForStartChat />, { wrapper: Wrapper });
     expect(screen.getByTestId('NoIndicesFieldsMessage')).toBeInTheDocument();
     expect(screen.getByTestId('NoIndicesFieldsMessage')).toHaveTextContent('index1');
   });

diff --git a/x-pack/plugins/search_playground/public/components/view_query/view_query_flyout.tsx b/x-pack/plugins/search_playground/public/components/view_query/view_query_flyout.tsx
@@ -144,6 +144,17 @@ export const ViewQueryFlyout: React.FC<ViewQueryFlyoutProps> = ({ onClose }) =>
               defaultMessage="This query will be used to search your indices. Customize by choosing which
             fields in your Elasticsearch documents to search."
             />
+            {` `}
+            <EuiLink
+              href={docLinks.retrievalOptimize}
+              target="_blank"
+              data-test-subj="query-optimize-documentation-link"
+            >
+              <FormattedMessage
+                id="xpack.searchPlayground.viewQuery.flyout.learnMoreQueryOptimizeLink"
+                defaultMessage="Learn more."
+              />
+            </EuiLink>
           </p>
         </EuiText>
       </EuiFlyoutHeader>
@@ -236,9 +247,9 @@ export const ViewQueryFlyout: React.FC<ViewQueryFlyoutProps> = ({ onClose }) =>
                             </EuiFlexItem>
                             <EuiFlexItem grow={false}>
                               <EuiLink
-                                href={docLinks.chatPlayground}
+                                href={docLinks.hiddenFields}
                                 target="_blank"
-                                data-test-subj="context-optimization-documentation-link"
+                                data-test-subj="hidden-fields-documentation-link"
                               >
                                 <FormattedMessage
                                   id="xpack.searchPlayground.viewQuery.flyout.learnMoreLink"