[Search][Playground] Update UI

x-pack/plugins/enterprise_search/public/applications/applications/components/playground/playground.tsx

@@ -9,11 +9,8 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { FormattedMessage } from '@kbn/i18n-react';
-
 import { KibanaLogic } from '../../../shared/kibana';
 import { EnterpriseSearchApplicationsPageTemplate } from '../layout/page_template';
 
@@ -31,32 +28,9 @@ export const Playground: React.FC = () => {
             defaultMessage: 'Playground',
           }),
         ]}
-        pageHeader={{
-          pageTitle: (
-            <EuiFlexGroup>
-              <EuiFlexItem grow={false}>
-                <FormattedMessage
-                  id="xpack.enterpriseSearch.content.playground.headerTitle"
-                  defaultMessage="Playground"
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiBetaBadge
-                  label={i18n.translate(
-                    'xpack.enterpriseSearch.content.playground.headerTitle.techPreview',
-                    {
-                      defaultMessage: 'TECH PREVIEW',
-                    }
-                  )}
-                  color="hollow"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          ),
-          rightSideItems: [<searchPlayground.PlaygroundToolbar />],
-        }}
         pageViewTelemetry="Playground"
         restrictWidth={false}
+        panelled={false}
         customPageSections
         bottomBorder="extended"
         docLink="playground"

x-pack/plugins/search_playground/__mocks__/search_playground_mock.ts

@@ -12,7 +12,6 @@ export type Start = jest.Mocked<SearchPlaygroundPluginStart>;
 const createStartMock = (): Start => {
   const startContract: Start = {
     PlaygroundProvider: jest.fn(),
-    PlaygroundToolbar: jest.fn(),
     Playground: jest.fn(),
     PlaygroundHeaderDocs: jest.fn(),
   };

x-pack/plugins/search_playground/public/analytics/constants.ts

@@ -13,24 +13,21 @@ export enum AnalyticsEvents {
   chatRegenerateMessages = 'chat_regenerate_messages',
   citationDetailsExpanded = 'citation_details_expanded',
   citationDetailsCollapsed = 'citation_details_collapsed',
-  editContextFlyoutOpened = 'edit_context_flyout_opened',
   editContextFieldToggled = 'edit_context_field_toggled',
   editContextDocSizeChanged = 'edit_context_doc_size_changed',
-  editContextSaved = 'edit_context_saved',
   genAiConnectorAdded = 'gen_ai_connector_added',
   genAiConnectorCreated = 'gen_ai_connector_created',
   genAiConnectorExists = 'gen_ai_connector_exists',
   genAiConnectorSetup = 'gen_ai_connector_setup',
   includeCitations = 'include_citations',
   instructionsFieldChanged = 'instructions_field_changed',
+  queryFieldsUpdated = 'view_query_fields_updated',
+  queryModeLoaded = 'query_mode_loaded',
   modelSelected = 'model_selected',
   retrievalDocsFlyoutOpened = 'retrieval_docs_flyout_opened',
   sourceFieldsLoaded = 'source_fields_loaded',
   sourceIndexUpdated = 'source_index_updated',
-  startNewChatPageLoaded = 'start_new_chat_page_loaded',
-  viewQueryFlyoutOpened = 'view_query_flyout_opened',
-  viewQueryFieldsUpdated = 'view_query_fields_updated',
-  viewQuerySaved = 'view_query_saved',
+  setupChatPageLoaded = 'start_new_chat_page_loaded',
   viewCodeFlyoutOpened = 'view_code_flyout_opened',
   viewCodeLanguageChange = 'view_code_language_change',
 }

x-pack/plugins/search_playground/public/chat_playground_overview.tsx

@@ -5,15 +5,13 @@
  * 2.0.
  */
 
-import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
-import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem, EuiPageTemplate, EuiTitle } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiPageTemplate } from '@elastic/eui';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from './utils/query_client';
 import { PlaygroundProvider } from './providers/playground_provider';
 
 import { App } from './components/app';
-import { PlaygroundToolbar } from './embeddable';
-import { PlaygroundHeaderDocs } from './components/playground_header_docs';
 import { useKibana } from './hooks/use_kibana';
 
 export const ChatPlaygroundOverview: React.FC = () => {
@@ -27,46 +25,18 @@ export const ChatPlaygroundOverview: React.FC = () => {
   );
 
   return (
-    <PlaygroundProvider>
-      <EuiPageTemplate
-        offset={0}
-        restrictWidth={false}
-        data-test-subj="svlPlaygroundPage"
-        grow={false}
-      >
-        <EuiPageTemplate.Header
-          css={{ '.euiPageHeaderContent > .euiFlexGroup': { flexWrap: 'wrap' } }}
-          pageTitle={
-            <EuiFlexGroup>
-              <EuiFlexItem grow={false}>
-                <EuiTitle
-                  css={{ whiteSpace: 'nowrap' }}
-                  data-test-subj="chat-playground-home-page-title"
-                >
-                  <h2>
-                    <FormattedMessage
-                      id="xpack.searchPlayground.pageTitle"
-                      defaultMessage="Playground"
-                    />
-                  </h2>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiBetaBadge
-                  label={i18n.translate('xpack.searchPlayground.pageTitle.techPreview', {
-                    defaultMessage: 'TECH PREVIEW',
-                  })}
-                  color="hollow"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          }
-          data-test-subj="chat-playground-home-page"
-          rightSideItems={[<PlaygroundHeaderDocs />, <PlaygroundToolbar />]}
-        />
-        <App />
-        {embeddableConsole}
-      </EuiPageTemplate>
-    </PlaygroundProvider>
+    <QueryClientProvider client={queryClient}>
+      <PlaygroundProvider>
+        <EuiPageTemplate
+          offset={0}
+          restrictWidth={false}
+          data-test-subj="svlPlaygroundPage"
+          grow={false}
+        >
+          <App showDocs />
+          {embeddableConsole}
+        </EuiPageTemplate>
+      </PlaygroundProvider>
+    </QueryClientProvider>
   );
 };

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

@@ -5,28 +5,61 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 
-import { StartNewChat } from './start_new_chat';
+import { useFormContext } from 'react-hook-form';
+import { QueryMode } from './query_mode/query_mode';
+import { SetupPage } from './setup_page/setup_page';
+import { Header } from './header';
+import { useLoadConnectors } from '../hooks/use_load_connectors';
+import { ChatForm, ChatFormFields } from '../types';
 import { Chat } from './chat';
 
-export const App: React.FC = () => {
-  const [showStartPage, setShowStartPage] = useState(true);
+export interface AppProps {
+  showDocs?: boolean;
+}
+
+export enum ViewMode {
+  chat = 'chat',
+  query = 'query',
+}
+
+export const App: React.FC<AppProps> = ({ showDocs = false }) => {
+  const [showSetupPage, setShowSetupPage] = useState(true);
+  const [selectedMode, setSelectedMode] = useState<ViewMode>(ViewMode.chat);
+  const { watch } = useFormContext<ChatForm>();
+  const { data: connectors } = useLoadConnectors();
+  const hasSelectedIndices = watch(ChatFormFields.indices).length;
+  const handleModeChange = (id: string) => setSelectedMode(id as ViewMode);
+
+  useEffect(() => {
+    if (showSetupPage && connectors?.length && hasSelectedIndices) {
+      setShowSetupPage(false);
+    }
+  }, [connectors, hasSelectedIndices, showSetupPage]);
 
   return (
-    <KibanaPageTemplate.Section
-      alignment="top"
-      restrictWidth={false}
-      grow
-      css={{
-        position: 'relative',
-      }}
-      contentProps={{ css: { display: 'flex', flexGrow: 1, position: 'absolute', inset: 0 } }}
-      paddingSize="none"
-      className="eui-fullHeight"
-    >
-      {showStartPage ? <StartNewChat onStartClick={() => setShowStartPage(false)} /> : <Chat />}
-    </KibanaPageTemplate.Section>
+    <>
+      <Header
+        showDocs={showDocs}
+        onModeChange={handleModeChange}
+        selectedMode={selectedMode}
+        isActionsDisabled={showSetupPage}
+      />
+      <KibanaPageTemplate.Section
+        alignment="top"
+        restrictWidth={false}
+        grow
+        css={{
+          position: 'relative',
+        }}
+        contentProps={{ css: { display: 'flex', flexGrow: 1, position: 'absolute', inset: 0 } }}
+        paddingSize="none"
+        className="eui-fullHeight"
+      >
+        {showSetupPage ? <SetupPage /> : selectedMode === ViewMode.chat ? <Chat /> : <QueryMode />}
+      </KibanaPageTemplate.Section>
+    </>
   );
 };

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

@@ -13,6 +13,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
+  EuiHideFor,
   EuiHorizontalRule,
   EuiSpacer,
   useEuiTheme,
@@ -50,14 +51,12 @@ export const Chat = () => {
   const { euiTheme } = useEuiTheme();
   const {
     control,
-    watch,
     formState: { isValid, isSubmitting },
     resetField,
     handleSubmit,
     getValues,
   } = useFormContext<ChatForm>();
   const { messages, append, stop: stopRequest, setMessages, reload, error } = useChat();
-  const selectedIndicesCount = watch(ChatFormFields.indices, []).length;
   const messagesRef = useAutoBottomScroll();
   const [isRegenerating, setIsRegenerating] = useState<boolean>(false);
   const usageTracker = useUsageTracker();
@@ -123,7 +122,6 @@ export const Chat = () => {
         <EuiFlexItem
           grow={2}
           css={{
-            borderRight: euiTheme.border.thin,
             paddingTop: euiTheme.size.l,
             paddingBottom: euiTheme.size.l,
             // don't allow the chat to shrink below 66.6% of the screen
@@ -149,14 +147,15 @@ export const Chat = () => {
             >
               <EuiHorizontalRule margin="none" />
 
-              <EuiSpacer size="m" />
+              <EuiSpacer size="s" />
 
-              <EuiFlexGroup>
+              <EuiFlexGroup responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButtonEmpty
                     iconType="sparkles"
                     disabled={isToolBarActionsDisabled}
                     onClick={regenerateMessages}
+                    size="xs"
                     data-test-subj="regenerateActionButton"
                   >
                     <FormattedMessage
@@ -170,6 +169,7 @@ export const Chat = () => {
                     iconType="refresh"
                     disabled={isToolBarActionsDisabled}
                     onClick={handleClearChat}
+                    size="xs"
                     data-test-subj="clearChatActionButton"
                   >
                     <FormattedMessage
@@ -180,7 +180,7 @@ export const Chat = () => {
                 </EuiFlexItem>
               </EuiFlexGroup>
 
-              <EuiSpacer size="m" />
+              <EuiSpacer size="s" />
 
               <Controller
                 name={ChatFormFields.question}
@@ -234,9 +234,11 @@ export const Chat = () => {
           </EuiFlexGroup>
         </EuiFlexItem>
 
-        <EuiFlexItem grow={1} css={{ flexBasis: 0, minWidth: '33.3%' }}>
-          <ChatSidebar selectedIndicesCount={selectedIndicesCount} />
-        </EuiFlexItem>
+        <EuiHideFor sizes={['xs', 's']}>
+          <EuiFlexItem grow={1} css={{ flexBasis: 0, minWidth: '33.3%' }}>
+            <ChatSidebar />
+          </EuiFlexItem>
+        </EuiHideFor>
       </EuiFlexGroup>
     </EuiForm>
   );