[Search] [Playground] present message when no documents are returned (#…

…183219) ## Summary Happens when index uses bm25 retrieval. Currently if no documents are returned, no message appears and confusing to the user happened and how they can improve it. With this change, it tells them what happened and a link to how to improve this. <img width="1018" alt="image" src="https://github.com/elastic/kibana/assets/49480/88564932-377f-4c7a-9c83-f7b3d0651a73"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Liam Thompson <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · May 13, 2024 · 3e743fe · 3e743fe
1 parent 5ef0536
commit 3e743fe
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
@@ -961,6 +961,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
@@ -651,6 +651,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"