[8.14] [Search] [Playground] present message when no documents are returned (#183219) (#183251)

# Backport This will backport the following commits from `main` to `8.14`: - [[Search] [Playground] present message when no documents are returned (#183219)](https://github.com/elastic/kibana/pull/183219)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Joe McElroy <joseph.mcelroy@elastic.co>
2025-04-24 01:38:56 -04:00 · 2024-05-13 07:14:07 -04:00 · 2024-05-13 07:14:07 -04:00 · b75bb780be
commit b75bb780be
parent 57b5dc49d5
9 changed files with 181 additions and 6 deletions
--- 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
--- 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`,
    },
  });
 };
--- 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;
  };
 }

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

--- 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"
            >
--- 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();
+  });
+});
--- 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"
--- a/x-pack/plugins/search_playground/public/components/sources_panel/sources_panel_for_start_chat.test.tsx
+++ b/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');
  });
--- 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"