Merge pull request #20 from yansavitski/ai-playground-start-chat-page

Ai playground start chat page

packages/kbn-ai-playground/components/chat.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { Controller, useFormContext } from 'react-hook-form';
 import {
@@ -33,12 +33,14 @@ import {
 
 import { MessageList } from './message_list/message_list';
 import { QuestionInput } from './question_input';
+import { StartNewChat } from './start_new_chat';
 
 import { TelegramIcon } from './telegram_icon';
 
 import { transformFromChatMessages } from '../utils/transformToMessages';
 
 export const Chat = () => {
+  const [showStartPage, setShowStartPage] = useState(true);
   const { euiTheme } = useEuiTheme();
   const {
     control,
@@ -79,6 +81,10 @@ export const Chat = () => {
     [messages]
   );
 
+  if (showStartPage) {
+    return <StartNewChat onStartClick={() => setShowStartPage(false)} />;
+  }
+
   return (
     <EuiForm
       component="form"

packages/kbn-ai-playground/components/index.ts

@@ -8,6 +8,5 @@
  */
 
 export * from './chat';
-export * from './empty_index';
 export * from './view_query/view_query_action';
 export * from './view_code/view_code_action';

packages/kbn-ai-playground/components/sources_panel/create_index_callout.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { EuiButton, EuiCallOut, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { useChatContext } from '../../hooks/useChatContext';
+
+export const CreateIndexCallout: React.FC = () => {
+  const { navigateToIndexPage } = useChatContext();
+
+  return (
+    <EuiCallOut
+      title={i18n.translate('aiPlayground.sources.createIndexCallout.headerText', {
+        defaultMessage: 'Create an index',
+      })}
+      color="primary"
+      iconType="iInCircle"
+    >
+      <EuiText size="s">
+        <p>
+          <FormattedMessage
+            id="aiPlayground.sources.createIndexCallout.description"
+            defaultMessage="You can not continue without having at least one index with data to search."
+          />
+        </p>
+      </EuiText>
+      <EuiSpacer size="l" />
+      <EuiButton
+        color="primary"
+        iconType="plusInCircle"
+        fill
+        size="s"
+        onClick={navigateToIndexPage}
+      >
+        <FormattedMessage
+          id="aiPlayground.sources.createIndexCallout."
+          defaultMessage="Create an index"
+        />
+      </EuiButton>
+    </EuiCallOut>
+  );
+};

packages/kbn-ai-playground/components/sources_panel/sources_panel_for_start_chat.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+import { AddIndicesField } from './add_indices_field';
+import { IndicesTable } from './indices_table';
+import { StartChatPanel } from '../start_chat_panel';
+import { CreateIndexCallout } from './create_index_callout';
+import { useSourceIndicesField } from '../../hooks/useSourceIndicesField';
+import { useQueryIndices } from '../../hooks/useQueryIndices';
+import { i18n } from '@kbn/i18n';
+
+export const SourcesPanelForStartChat: React.FC = () => {
+  const { selectedIndices, removeIndex, addIndex } = useSourceIndicesField();
+  const { indices, isLoading } = useQueryIndices();
+
+  return (
+    <StartChatPanel
+      title={i18n.translate('aiPlayground.emptyPrompts.sources.title', {
+        defaultMessage: 'Select sources',
+      })}
+      description={i18n.translate('aiPlayground.emptyPrompts.sources.description', {
+        defaultMessage: 'Where should the data for this chat experience be retrieved from?',
+      })}
+      isValid={!!selectedIndices.length}
+    >
+      {!!selectedIndices?.length && (
+        <EuiFlexItem>
+          <IndicesTable indices={selectedIndices} onRemoveClick={removeIndex} />
+        </EuiFlexItem>
+      )}
+
+      {isLoading && (
+        <EuiFlexGroup justifyContent="center" alignItems="center">
+          <EuiLoadingSpinner size="l" />
+        </EuiFlexGroup>
+      )}
+
+      {!isLoading && !!indices?.length && (
+        <EuiFlexItem>
+          <AddIndicesField selectedIndices={selectedIndices} onIndexSelect={addIndex} />
+        </EuiFlexItem>
+      )}
+
+      {!isLoading && !indices?.length && <CreateIndexCallout />}
+    </StartChatPanel>
+  );
+};

packages/kbn-ai-playground/components/sources_panel/sources_panel_sidebar.tsx

@@ -9,7 +9,7 @@
 import React, { useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { IndexName } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import { useSourceIndicesField } from '../../hooks/useSourceIndicesField';
 import { useController } from 'react-hook-form';
 import { useIndicesFields } from '../../hooks/useIndicesFields';
 import { createQuery, getDefaultQueryFields } from '../../lib/create_query';
@@ -18,10 +18,7 @@ import { AddIndicesField } from './add_indices_field';
 import { IndicesList } from './indices_list';
 
 export const SourcesPanelSidebar: React.FC = () => {
-  const {
-    field: { value: selectedIndices, onChange },
-  } = useController({ name: ChatFormFields.indices, defaultValue: [] });
-
+  const { selectedIndices, removeIndex, addIndex } = useSourceIndicesField();
   const { fields } = useIndicesFields(selectedIndices || []);
 
   const {
@@ -38,13 +35,6 @@ export const SourcesPanelSidebar: React.FC = () => {
     }
   }, [selectedIndices, fields, elasticsearchQueryOnChange]);
 
-  const addIndex = (newIndex: IndexName) => {
-    onChange([...selectedIndices, newIndex]);
-  };
-  const removeIndex = (index: IndexName) => {
-    onChange(selectedIndices.filter((indexName: string) => indexName !== index));
-  };
-
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem>

packages/kbn-ai-playground/components/start_chat_panel.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+interface StartChatPanelProps {
+  title: string;
+  description: string | React.ReactNode;
+  isValid?: boolean;
+}
+
+export const StartChatPanel: React.FC<StartChatPanelProps> = ({
+  title,
+  description,
+  children,
+  isValid,
+}) => (
+  <EuiPanel hasBorder paddingSize="l">
+    <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+      <EuiTitle size="xs">
+        <h5>{title}</h5>
+      </EuiTitle>
+
+      {isValid && (
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiIcon type="check" color="success" />
+
+            <EuiText size="xs" color="success">
+              <p>
+                <FormattedMessage
+                  id="aiPlayground.startChatPanel.verified"
+                  defaultMessage="Completed"
+                />
+              </p>
+            </EuiText>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+
+    <EuiSpacer size="s" />
+
+    <EuiFlexGroup direction="column" gutterSize="xl">
+      <EuiText size="s">
+        <p>{description}</p>
+      </EuiText>
+
+      {children}
+    </EuiFlexGroup>
+  </EuiPanel>
+);