[8.14] [Ent Search] Update Playground copy (#181951) (#182003)

# Backport

This will backport the following commits from `main` to `8.14`:
- [[Ent Search] Update Playground copy
(#181951)](#181951)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Liam
Thompson","email":"32779855+leemthompo@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-04-29T15:54:05Z","message":"[Ent
Search] Update Playground copy
(#181951)","sha":"7fa867cdd70251b30e007888840a66ccd5f57098","branchLabelMapping":{"^v8.15.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:EnterpriseSearch","v8.14.0","v8.15.0"],"title":"[Ent
Search] Update Playground
copy","number":181951,"url":"#181951
Search] Update Playground copy
(#181951)","sha":"7fa867cdd70251b30e007888840a66ccd5f57098"}},"sourceBranch":"main","suggestedTargetBranches":["8.14"],"targetPullRequestStates":[{"branch":"8.14","label":"v8.14.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.15.0","branchLabelMappingKey":"^v8.15.0$","isSourceBranch":true,"state":"MERGED","url":"#181951
Search] Update Playground copy
(#181951)","sha":"7fa867cdd70251b30e007888840a66ccd5f57098"}}]}]
BACKPORT-->

Co-authored-by: Liam Thompson <32779855+leemthompo@users.noreply.github.com>

x-pack/plugins/search_playground/public/components/chat.tsx

@@ -76,7 +76,7 @@ export const Chat = () => {
       {
         id: uuidv4(),
         role: MessageRole.system,
-        content: 'You can start chat now',
+        content: 'Welcome to Playground! Ask a question to get started.',
       },
       ...transformFromChatMessages(messages),
     ],

x-pack/plugins/search_playground/public/components/chat_sidebar.tsx

@@ -30,14 +30,14 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({ selectedIndicesCount }
     {
       id: useGeneratedHtmlId({ prefix: 'summarizationAccordion' }),
       title: i18n.translate('xpack.searchPlayground.sidebar.summarizationTitle', {
-        defaultMessage: 'Summarization',
+        defaultMessage: 'Model settings',
       }),
       children: <SummarizationPanel />,
     },
     {
       id: useGeneratedHtmlId({ prefix: 'sourcesAccordion' }),
       title: i18n.translate('xpack.searchPlayground.sidebar.sourceTitle', {
-        defaultMessage: 'Sources',
+        defaultMessage: 'Indices',
       }),
       extraAction: !!selectedIndicesCount && (
         <EuiText size="xs">

x-pack/plugins/search_playground/public/components/edit_context/edit_context_action.tsx

@@ -25,7 +25,7 @@ export const EditContextAction: React.FC = () => {
       <EuiButtonEmpty onClick={() => setShowFlyout(true)} disabled={selectedIndices?.length === 0}>
         <FormattedMessage
           id="xpack.searchPlayground.editContext.actionButtonLabel"
-          defaultMessage="Edit Context"
+          defaultMessage="Edit context"
         />
       </EuiButtonEmpty>
     </>

x-pack/plugins/search_playground/public/components/edit_context/edit_context_flyout.tsx

@@ -15,6 +15,7 @@ import {
   EuiButtonEmpty,
   EuiButton,
   EuiFlyoutFooter,
+  EuiLink,
   EuiSpacer,
   EuiText,
   EuiPanel,
@@ -26,6 +27,7 @@ import {
 import { useController, useFormContext } from 'react-hook-form';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { docLinks } from '../../../common/doc_links';
 import { ChatForm, ChatFormFields } from '../../types';
 import { useIndicesFields } from '../../hooks/use_indices_fields';
 import { getDefaultSourceFields } from '../../utils/create_query';
@@ -77,7 +79,7 @@ export const EditContextFlyout: React.FC<EditContextFlyoutProps> = ({ onClose })
           <h2>
             <FormattedMessage
               id="xpack.searchPlayground.editContext.flyout.title"
-              defaultMessage="Edit Context"
+              defaultMessage="Edit context"
             />
           </h2>
         </EuiTitle>
@@ -86,8 +88,18 @@ export const EditContextFlyout: React.FC<EditContextFlyoutProps> = ({ onClose })
           <p>
             <FormattedMessage
               id="xpack.searchPlayground.editContext.flyout.description"
-              defaultMessage="Documents retrieved and selected fields will be used to build the context."
+              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}
+              target="_blank"
+              data-test-subj="context-optimization-documentation-link"
+            >
+              <FormattedMessage
+                id="xpack.searchPlayground.editContext.flyout.learnMoreLink"
+                defaultMessage=" Learn more."
+              />
+            </EuiLink>
           </p>
         </EuiText>
       </EuiFlyoutHeader>
@@ -100,7 +112,7 @@ export const EditContextFlyout: React.FC<EditContextFlyoutProps> = ({ onClose })
                   prepend={i18n.translate(
                     'xpack.searchPlayground.editContext.flyout.docsRetrievedCount',
                     {
-                      defaultMessage: 'Retrieved Documents',
+                      defaultMessage: 'Retrieved documents',
                     }
                   )}
                   options={[
@@ -125,7 +137,7 @@ export const EditContextFlyout: React.FC<EditContextFlyoutProps> = ({ onClose })
                 <h5>
                   <FormattedMessage
                     id="xpack.searchPlayground.editContext.flyout.table.title"
-                    defaultMessage="Selected Fields"
+                    defaultMessage="Selected fields"
                   />
                 </h5>
               </EuiText>

x-pack/plugins/search_playground/public/components/message_list/retrieval_docs_flyout.tsx

@@ -92,7 +92,7 @@ export const RetrievalDocsFlyout: React.FC<RetrievalDocsFlyoutProps> = ({
           <p>
             {i18n.translate('xpack.searchPlayground.chat.message.assistant.retrievalDoc.subtitle', {
               defaultMessage:
-                'The documents that were referenced in order to create an answer to your query. You can change the context field using the Edit Context button.',
+                'The documents that were referenced in order to create an answer to your query. You can change the context field using the Edit context button.',
             })}
           </p>
         </EuiText>

x-pack/plugins/search_playground/public/components/set_up_connector_panel_for_start_chat.tsx

@@ -52,12 +52,12 @@ export const SetUpConnectorPanelForStartChat: React.FC = () => {
         <>
           <StartChatPanel
             title={i18n.translate('xpack.searchPlayground.emptyPrompts.setUpConnector.title', {
-              defaultMessage: 'Set up a Gen AI connector',
+              defaultMessage: 'Connect to LLM',
             })}
             description={
               <FormattedMessage
                 id="xpack.searchPlayground.emptyPrompts.setUpConnector.description"
-                defaultMessage="A large-language model is required to use a chat bot. Set up a connection to your LLM provider to continue."
+                defaultMessage="You need to connect to a large-language model to use this feature. Start by adding connection details for your LLM provider."
               />
             }
           >
@@ -70,7 +70,7 @@ export const SetUpConnectorPanelForStartChat: React.FC = () => {
                 >
                   <FormattedMessage
                     id="xpack.searchPlayground.emptyPrompts.setUpConnector.btn"
-                    defaultMessage="Set up GenAI connector"
+                    defaultMessage="Connect"
                   />
                 </EuiButton>
               </EuiFlexItem>

x-pack/plugins/search_playground/public/components/sources_panel/add_indices_field.tsx

@@ -45,7 +45,7 @@ export const AddIndicesField: React.FC<AddIndicesFieldProps> = ({
       <EuiComboBox
         singleSelection={{ asPlainText: true }}
         placeholder={i18n.translate('xpack.searchPlayground.sources.addIndex.placeholder', {
-          defaultMessage: 'Select new data source',
+          defaultMessage: 'Search for index',
         })}
         async
         isLoading={isLoading}

x-pack/plugins/search_playground/public/components/sources_panel/create_index_callout.tsx

@@ -40,7 +40,7 @@ export const CreateIndexCallout: React.FC = () => {
         <p>
           <FormattedMessage
             id="xpack.searchPlayground.sources.createIndexCallout.description"
-            defaultMessage="You can not continue without having at least one index with data to search."
+            defaultMessage="You need at least one index with data to search. "
           />
         </p>
       </EuiText>

x-pack/plugins/search_playground/public/components/sources_panel/sources_panel_for_start_chat.tsx

@@ -28,10 +28,11 @@ export const SourcesPanelForStartChat: React.FC = () => {
   return (
     <StartChatPanel
       title={i18n.translate('xpack.searchPlayground.emptyPrompts.sources.title', {
-        defaultMessage: 'Select sources',
+        defaultMessage: 'Select indices',
       })}
       description={i18n.translate('xpack.searchPlayground.emptyPrompts.sources.description', {
-        defaultMessage: 'Where should the data for this chat experience be retrieved from?',
+        defaultMessage:
+          "Select the Elasticsearch indices you'd like to query, providing additional context for the LLM.",
       })}
       isValid={!!selectedIndices.length}
     >

x-pack/plugins/search_playground/public/components/sources_panel/sources_panel_sidebar.tsx

@@ -20,7 +20,7 @@ export const SourcesPanelSidebar: React.FC = () => {
       <EuiFlexItem>
         <EuiCallOut
           title={i18n.translate('xpack.searchPlayground.sources.callout', {
-            defaultMessage: 'Changes here will reset your custom query',
+            defaultMessage: 'Changes update the query used to search your data',
           })}
           iconType="warning"
           size="s"

x-pack/plugins/search_playground/public/components/start_new_chat.tsx

@@ -5,7 +5,15 @@
  * 2.0.
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTitle, useEuiTheme } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -51,6 +59,16 @@ export const StartNewChat: React.FC<StartNewChatProps> = ({ onStartClick }) => {
             <EuiIcon type="discuss" size="xl" />
           </EuiFlexGroup>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.searchPlayground.startNewChat.description"
+                defaultMessage="Combine your Elasticsearch data with the power of large language models for retrieval augmented generation (RAG). Use the UI to view and edit the Elasticsearch queries used to search your data, then download the code to integrate into your own application."
+              />
+            </p>
+          </EuiText>
+        </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
           <SetUpConnectorPanelForStartChat />

x-pack/plugins/search_playground/public/components/summarization_panel/instructions_field.tsx

@@ -26,7 +26,7 @@ export const InstructionsField: React.FC<InstructionsFieldProps> = ({ value, onC
         <EuiToolTip
           content={i18n.translate('xpack.searchPlayground.sidebar.instructionsField.help', {
             defaultMessage:
-              'This is the instruction or question you want the AI to respond to. Be clear and specific for the best results.',
+              'These preliminary instructions and guidelines define the behavior of the model. Be clear and specific for best results.',
           })}
         >
           <>

x-pack/plugins/search_playground/public/components/summarization_panel/summarization_model.tsx

@@ -13,7 +13,6 @@ import {
   EuiFlexItem,
   EuiFormRow,
   EuiIcon,
-  EuiIconTip,
   EuiSuperSelect,
   EuiText,
   EuiToolTip,
@@ -102,13 +101,8 @@ export const SummarizationModel: React.FC<SummarizationModelProps> = ({
         <>
           <FormattedMessage
             id="xpack.searchPlayground.sidebar.summarizationModel.label"
-            defaultMessage="Summarization Model"
+            defaultMessage="Model"
           />{' '}
-          <EuiIconTip
-            content={i18n.translate('xpack.searchPlayground.sidebar.summarizationModel.help', {
-              defaultMessage: 'The large language model used to summarize your documents.',
-            })}
-          />
         </>
       }
       labelAppend={

x-pack/plugins/search_playground/public/components/view_code/view_code_flyout.tsx

@@ -70,7 +70,7 @@ export const ViewCodeFlyout: React.FC<ViewCodeFlyoutProps> = ({ onClose }) => {
           <h2>
             <FormattedMessage
               id="xpack.searchPlayground.viewCode.flyout.title"
-              defaultMessage="View Code"
+              defaultMessage="Application code"
             />
           </h2>
         </EuiTitle>
@@ -79,7 +79,7 @@ export const ViewCodeFlyout: React.FC<ViewCodeFlyoutProps> = ({ onClose }) => {
           <p>
             <FormattedMessage
               id="xpack.searchPlayground.viewCode.flyout.subtitle"
-              defaultMessage="Copy the code into your app to use this. Modify the code as needed to fit your use case."
+              defaultMessage="Here's the code used to render this search experience. You can integrate it into your own application, modifying as needed."
             />
           </p>
         </EuiText>

x-pack/plugins/search_playground/public/components/view_query/view_query_action.tsx

@@ -23,7 +23,7 @@ export const ViewQueryAction: React.FC = () => {
       <EuiButtonEmpty onClick={() => setShowFlyout(true)} disabled={selectedIndices?.length === 0}>
         <FormattedMessage
           id="xpack.searchPlayground.viewQuery.actionButtonLabel"
-          defaultMessage="View Query"
+          defaultMessage="View query"
         />
       </EuiButtonEmpty>
     </>

x-pack/plugins/search_playground/public/components/view_query/view_query_flyout.tsx

@@ -83,7 +83,7 @@ export const ViewQueryFlyout: React.FC<ViewQueryFlyoutProps> = ({ onClose }) =>
           <h2>
             <FormattedMessage
               id="xpack.searchPlayground.viewQuery.flyout.title"
-              defaultMessage="Customise your Elasticsearch Query"
+              defaultMessage="Customize your Elasticsearch query"
             />
           </h2>
         </EuiTitle>
@@ -92,8 +92,8 @@ export const ViewQueryFlyout: React.FC<ViewQueryFlyoutProps> = ({ onClose }) =>
           <p>
             <FormattedMessage
               id="xpack.searchPlayground.viewQuery.flyout.description"
-              defaultMessage="The query that will be used to search your data. You can customise it by choosing which
-            fields to search on."
+              defaultMessage="This query will be used to search your indices. Customize by choosing which
+            fields in your Elasticsearch documents to search."
             />
           </p>
         </EuiText>
@@ -117,7 +117,7 @@ export const ViewQueryFlyout: React.FC<ViewQueryFlyoutProps> = ({ onClose }) =>
                 <h5>
                   <FormattedMessage
                     id="xpack.searchPlayground.viewQuery.flyout.table.title"
-                    defaultMessage="Selected Fields"
+                    defaultMessage="Fields to search (per index)"
                   />
                 </h5>
               </EuiText>