Merge pull request elastic#17 from joemcelroy/add-pick-indices

Edit Query Support

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

@@ -8,7 +8,7 @@
 
 import React, { useMemo } from 'react';
 
-import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import {
   EuiButtonIcon,
   EuiFlexGroup,
@@ -22,6 +22,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { i18n } from '@kbn/i18n';
 
+import { ChatSidebar } from './chat_sidebar';
 import { useChat } from '../hooks/useChat';
 import { ChatForm, ChatFormFields, MessageRole } from '../types';
 
@@ -31,18 +32,16 @@ import { QuestionInput } from './question_input';
 import { TelegramIcon } from './telegram_icon';
 
 import { transformFromChatMessages } from '../utils/transformToMessages';
-import { ChatSidebar } from '@kbn/ai-playground/components/chat_sidebar';
 
 export const Chat = () => {
   const { euiTheme } = useEuiTheme();
-  const form = useForm<ChatForm>();
   const {
     control,
     watch,
     formState: { isValid, isSubmitting },
     resetField,
     handleSubmit,
-  } = form;
+  } = useFormContext<ChatForm>();
   const { messages, append, stop: stopRequest } = useChat();
   const selectedIndicesCount = watch(ChatFormFields.indices, []).length;
 
@@ -55,6 +54,7 @@ export const Chat = () => {
           indices: data[ChatFormFields.indices].join(),
           api_key: data[ChatFormFields.openAIKey],
           citations: data[ChatFormFields.citations].toString(),
+          elasticsearchQuery: JSON.stringify(data[ChatFormFields.elasticsearchQuery]),
         },
       }
     );
@@ -74,90 +74,88 @@ export const Chat = () => {
   );
 
   return (
-    <FormProvider {...form}>
-      <EuiForm
-        component="form"
-        css={{ display: 'flex', flexGrow: 1 }}
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <EuiFlexGroup gutterSize="none">
-          <EuiFlexItem
-            grow={2}
-            css={{
-              borderRight: euiTheme.border.thin,
-              paddingTop: euiTheme.size.l,
-              paddingBottom: euiTheme.size.l,
-            }}
-          >
-            <EuiFlexGroup direction="column" className="eui-fullHeight">
-              {/* // Set scroll at the border of parent element*/}
-              <EuiFlexItem
-                grow={1}
-                className="eui-yScroll"
-                css={{ paddingLeft: euiTheme.size.l, paddingRight: euiTheme.size.l }}
-                tabIndex={0}
-              >
-                <MessageList messages={chatMessages} />
-              </EuiFlexItem>
+    <EuiForm
+      component="form"
+      css={{ display: 'flex', flexGrow: 1 }}
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <EuiFlexGroup gutterSize="none">
+        <EuiFlexItem
+          grow={2}
+          css={{
+            borderRight: euiTheme.border.thin,
+            paddingTop: euiTheme.size.l,
+            paddingBottom: euiTheme.size.l,
+          }}
+        >
+          <EuiFlexGroup direction="column" className="eui-fullHeight">
+            {/* // Set scroll at the border of parent element*/}
+            <EuiFlexItem
+              grow={1}
+              className="eui-yScroll"
+              css={{ paddingLeft: euiTheme.size.l, paddingRight: euiTheme.size.l }}
+              tabIndex={0}
+            >
+              <MessageList messages={chatMessages} />
+            </EuiFlexItem>
 
-              <EuiFlexItem
-                grow={false}
-                css={{ paddingLeft: euiTheme.size.l, paddingRight: euiTheme.size.l }}
-              >
-                <EuiHorizontalRule margin="none" />
+            <EuiFlexItem
+              grow={false}
+              css={{ paddingLeft: euiTheme.size.l, paddingRight: euiTheme.size.l }}
+            >
+              <EuiHorizontalRule margin="none" />
 
-                <EuiSpacer size="m" />
+              <EuiSpacer size="m" />
 
-                <Controller
-                  name={ChatFormFields.question}
-                  control={control}
-                  defaultValue=""
-                  rules={{
-                    required: true,
-                    validate: (rule) => !!rule?.trim(),
-                  }}
-                  render={({ field }) => (
-                    <QuestionInput
-                      value={field.value}
-                      onChange={field.onChange}
-                      isDisabled={isSubmitting}
-                      button={
-                        isSubmitting ? (
-                          <EuiButtonIcon
-                            aria-label={i18n.translate('aiPlayground.chat.stopButtonAriaLabel', {
-                              defaultMessage: 'Stop request',
-                            })}
-                            display="base"
-                            size="s"
-                            iconType="stop"
-                            onClick={stopRequest}
-                          />
-                        ) : (
-                          <EuiButtonIcon
-                            aria-label={i18n.translate('aiPlayground.chat.sendButtonAriaLabel', {
-                              defaultMessage: 'Send a question',
-                            })}
-                            display={isValid ? 'base' : 'empty'}
-                            size="s"
-                            type="submit"
-                            isLoading={isSubmitting}
-                            isDisabled={!isValid}
-                            iconType={TelegramIcon}
-                          />
-                        )
-                      }
-                    />
-                  )}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
+              <Controller
+                name={ChatFormFields.question}
+                control={control}
+                defaultValue=""
+                rules={{
+                  required: true,
+                  validate: (rule) => !!rule?.trim(),
+                }}
+                render={({ field }) => (
+                  <QuestionInput
+                    value={field.value}
+                    onChange={field.onChange}
+                    isDisabled={isSubmitting}
+                    button={
+                      isSubmitting ? (
+                        <EuiButtonIcon
+                          aria-label={i18n.translate('aiPlayground.chat.stopButtonAriaLabel', {
+                            defaultMessage: 'Stop request',
+                          })}
+                          display="base"
+                          size="s"
+                          iconType="stop"
+                          onClick={stopRequest}
+                        />
+                      ) : (
+                        <EuiButtonIcon
+                          aria-label={i18n.translate('aiPlayground.chat.sendButtonAriaLabel', {
+                            defaultMessage: 'Send a question',
+                          })}
+                          display={isValid ? 'base' : 'empty'}
+                          size="s"
+                          type="submit"
+                          isLoading={isSubmitting}
+                          isDisabled={!isValid}
+                          iconType={TelegramIcon}
+                        />
+                      )
+                    }
+                  />
+                )}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
 
-          <EuiFlexItem grow={1}>
-            <ChatSidebar selectedIndicesCount={selectedIndicesCount} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiForm>
-    </FormProvider>
+        <EuiFlexItem grow={1}>
+          <ChatSidebar selectedIndicesCount={selectedIndicesCount} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiForm>
   );
 };

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

@@ -9,3 +9,4 @@
 
 export * from './chat';
 export * from './empty_index';
+export * from './view_query/view_query_action';

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

@@ -9,9 +9,9 @@
 import { EuiComboBox, EuiFormRow } from '@elastic/eui';
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { useQueryIndices } from '../../hooks/useQueryIndices';
 import { EuiComboBoxOptionOption } from '@elastic/eui/src/components/combo_box/types';
 import { IndexName } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import { useQueryIndices } from '../../hooks/useQueryIndices';
 
 interface AddIndicesFieldProps {
   selectedIndices: IndexName[];

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

@@ -1,23 +1,43 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { IndicesList } from './indices_list';
-import { AddIndicesField } from './add_indices_field';
 import { IndexName } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { useController } from 'react-hook-form';
+import { useIndicesFields } from '../../hooks/useIndicesFields';
+import { createQuery, getDefaultQueryFields } from '../../lib/create_query';
 import { ChatFormFields } from '../../types';
+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 { fields } = useIndicesFields(selectedIndices || []);
+
+  const {
+    field: { onChange: elasticsearchQueryOnChange },
+  } = useController({
+    name: ChatFormFields.elasticsearchQuery,
+    defaultValue: {},
+  });
+
+  useEffect(() => {
+    if (fields) {
+      const defaultFields = getDefaultQueryFields(fields);
+      elasticsearchQueryOnChange(createQuery(defaultFields, fields));
+    }
+  }, [selectedIndices, fields, elasticsearchQueryOnChange]);
+
   const addIndex = (newIndex: IndexName) => {
     onChange([...selectedIndices, newIndex]);
   };