[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="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 <32779855+leemthompo@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

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

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`,
     },
   });
 };

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;
   };
 }
 

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;
   }
 }
 

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"
             >

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();
+  });
+});

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"

x-pack/plugins/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');
   });

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"