Skip to content

Commit

Permalink
Merge pull request elastic#17 from joemcelroy/add-pick-indices
Browse files Browse the repository at this point in the history
Edit Query Support
  • Loading branch information
joemcelroy authored Feb 22, 2024
2 parents 1cf4e33 + 9dfb211 commit a1a3660
Show file tree
Hide file tree
Showing 17 changed files with 963 additions and 288 deletions.
168 changes: 83 additions & 85 deletions packages/kbn-ai-playground/components/chat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';

Expand All @@ -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;

Expand All @@ -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]),
},
}
);
Expand All @@ -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>
);
};
1 change: 1 addition & 0 deletions packages/kbn-ai-playground/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@

export * from './chat';
export * from './empty_index';
export * from './view_query/view_query_action';
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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]);
};
Expand Down
Loading

0 comments on commit a1a3660

Please sign in to comment.