[AI Playground] Add layout for playground

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/ai_playground.tsx

@@ -0,0 +1,69 @@
+/*
+ *
+ *  * 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 { i18n } from '@kbn/i18n';
+
+import { EuiFlexGroup, EuiFlexItem, EuiPageTemplate, useEuiTheme } from '@elastic/eui';
+
+import { EnterpriseSearchContentPageTemplate } from '../../layout/page_template';
+import { AIPlaygroundSidebar } from './ai_playground_sidebar';
+
+export const AIPlayground: React.FC = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EnterpriseSearchContentPageTemplate
+      pageChrome={[
+        i18n.translate('xpack.enterpriseSearch.content.aiPlayground.breadcrumb', {
+          defaultMessage: 'AI Playground',
+        }),
+      ]}
+      pageHeader={{
+        pageTitle: i18n.translate('xpack.enterpriseSearch.content.aiPlayground.headerTitle', {
+          defaultMessage: 'AI Playground',
+        }),
+        rightSideItems: [],
+      }}
+      pageViewTelemetry="AI Playground"
+      isLoading={false}
+      customPageSections
+      bottomBorder="extended"
+    >
+      <EuiPageTemplate.Section
+        alignment="top"
+        restrictWidth={false}
+        grow
+        contentProps={{ css: { display: 'flex', flexGrow: 1 } }}
+        paddingSize="none"
+      >
+        <EuiFlexGroup gutterSize="none">
+          <EuiFlexItem
+            grow={2}
+            css={{
+              borderRight: euiTheme.border.thin,
+              padding: euiTheme.size.l,
+            }}
+          >
+            <EuiFlexGroup direction="column" justifyContent="spaceBetween"></EuiFlexGroup>
+          </EuiFlexItem>
+
+          <EuiFlexItem
+            grow={1}
+            css={{
+              padding: euiTheme.size.l,
+            }}
+          >
+            <AIPlaygroundSidebar />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageTemplate.Section>
+    </EnterpriseSearchContentPageTemplate>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/ai_playground_sidebar.tsx

@@ -0,0 +1,60 @@
+/*
+ *
+ *  * 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 { i18n } from '@kbn/i18n';
+import { EuiFormRow, EuiSwitch } from '@elastic/eui';
+
+import { InstructionsField } from './instructions_field';
+
+export const AIPlaygroundSidebar: React.FC = () => {
+  const [prompt, setPrompt] = React.useState('');
+  const [isIncludeCitations, setIncludeCitations] = React.useState<boolean>(true);
+
+  return (
+    <>
+      <InstructionsField
+        label={i18n.translate(
+          'xpack.enterpriseSearch.content.aiPlayground.instructionsField.label',
+          {
+            defaultMessage: 'Instructions',
+          }
+        )}
+        placeholder={i18n.translate(
+          'xpack.enterpriseSearch.content.aiPlayground.instructionsField.placeholder',
+          {
+            defaultMessage: 'Replace me',
+          }
+        )}
+        helpText={i18n.translate(
+          'xpack.enterpriseSearch.content.aiPlayground.instructionsField.help',
+          {
+            defaultMessage:
+              'This is the instruction or question you want the AI to respond to. Be clear and specific for the best results.',
+          }
+        )}
+        value={prompt}
+        onChange={setPrompt}
+      />
+
+      <EuiFormRow>
+        <EuiSwitch
+          label={i18n.translate(
+            'xpack.enterpriseSearch.content.aiPlayground.citationsField.label',
+            {
+              defaultMessage: 'Include citations',
+            }
+          )}
+          checked={isIncludeCitations}
+          onChange={(e) => setIncludeCitations(e.target.checked)}
+        />
+      </EuiFormRow>
+    </>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/components/instructions_field.tsx

@@ -0,0 +1,49 @@
+/*
+ *
+ *  * 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 { EuiFormRow, EuiIcon, EuiTextArea, EuiToolTip } from '@elastic/eui';
+
+interface InstructionsFieldProps {
+  label: string;
+  helpText: string;
+  placeholder: string;
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+export const InstructionsField: React.FC<InstructionsFieldProps> = ({
+  label,
+  value,
+  onChange,
+  placeholder,
+  helpText,
+}) => {
+  const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+    onChange(e.target.value);
+
+  return (
+    <EuiFormRow
+      label={
+        <EuiToolTip content={helpText}>
+          <span>
+            {label} <EuiIcon type="questionInCircle" color="subdued" />
+          </span>
+        </EuiToolTip>
+      }
+    >
+      <EuiTextArea
+        placeholder={placeholder}
+        value={value}
+        onChange={handlePromptChange}
+        fullWidth
+      />
+    </EuiFormRow>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/ai_playground/index.tsx

@@ -0,0 +1,11 @@
+/*
+ *
+ *  * 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.
+ *
+ */
+
+export * from "./components/ai_playground";
+

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/index.tsx

@@ -24,6 +24,7 @@ import { Connectors } from './components/connectors/connectors';
 import { NotFound } from './components/not_found';
 import { SearchIndicesRouter } from './components/search_indices';
 import { Settings } from './components/settings';
+import { AIPlayground } from './components/ai_playground';
 import {
   CONNECTORS_PATH,
   CRAWLERS_PATH,
@@ -32,6 +33,7 @@ import {
   SEARCH_INDICES_PATH,
   SETTINGS_PATH,
   SETUP_GUIDE_PATH,
+  AI_PLAYGROUND_PATH,
 } from './routes';
 
 export const EnterpriseSearchContent: React.FC<InitialAppData> = (props) => {
@@ -86,6 +88,9 @@ export const EnterpriseSearchContentConfigured: React.FC<Required<InitialAppData
       <Route path={SETTINGS_PATH}>
         <Settings />
       </Route>
+      <Route path={AI_PLAYGROUND_PATH}>
+        <AIPlayground />
+      </Route>
       <Route>
         <NotFound />
       </Route>