Skip to content

Commit

Permalink
Merge pull request elastic#13 from yansavitski/ai-playground-update-s…
Browse files Browse the repository at this point in the history
…ources

Ai playground update sources
  • Loading branch information
yansavitski authored Feb 19, 2024
2 parents f892a4b + d874f0b commit accbd15
Show file tree
Hide file tree
Showing 8 changed files with 263 additions and 138 deletions.
14 changes: 4 additions & 10 deletions packages/kbn-ai-playground/components/chat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,20 @@ import {
import { v4 as uuidv4 } from 'uuid';

import { i18n } from '@kbn/i18n';
import { useChat, UseChatHelpers } from '@elastic/ai-assist/dist/react';
import { useChat } from '@elastic/ai-assist/dist/react';

import {
AIPlaygroundPluginStartDeps,
ChatForm,
ChatFormFields,
Message,
MessageRole,
} from '../types';
import { AIPlaygroundPluginStartDeps, ChatForm, ChatFormFields, MessageRole } from '../types';

import { MessageList } from './message_list/message_list';
import { QuestionInput } from './question_input';
import { OpenAIKeyField } from './open_ai_key_field';
import { InstructionsField } from './instructions_field';
import { IncludeCitationsField } from './include_citations_field';
import { SourcesPanelSidebar } from './sources_panel/sources_panel_sidebar';

import { TelegramIcon } from './telegram_icon';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { transformFromChatMessages } from '../utils/transformToMessages';
import { SourcesPanel } from '@kbn/ai-playground/components/sources_panel/sources_panel';

export const Chat = () => {
const { euiTheme } = useEuiTheme();
Expand Down Expand Up @@ -202,7 +196,7 @@ export const Chat = () => {
)}
/>

<SourcesPanel />
<SourcesPanelSidebar />
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
Expand Down
5 changes: 4 additions & 1 deletion packages/kbn-ai-playground/components/empty_index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ import React from 'react';
import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';

import { i18n } from '@kbn/i18n';
import { SourcesPanelEmptyPrompt } from './sources_panel/sources_panel_empty_prompt';

interface EmptyIndexProps {
onCreateIndexClick: () => void;
}

export const EmptyIndex: React.FC<EmptyIndexProps> = ({ onCreateIndexClick }) => {
return (
<EuiFlexGroup gutterSize="l">
<EuiFlexGroup gutterSize="l" direction="column">
<EuiFlexItem>
<EuiPanel>
<EuiEmptyPrompt
Expand Down Expand Up @@ -54,6 +55,8 @@ export const EmptyIndex: React.FC<EmptyIndexProps> = ({ onCreateIndexClick }) =>
/>
</EuiPanel>
</EuiFlexItem>

<SourcesPanelEmptyPrompt />
</EuiFlexGroup>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,40 @@
* 2.0.
*/

import { EuiButtonIcon, EuiComboBox, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiFormRow, EuiSuperSelect } from '@elastic/eui';
import React from 'react';
import { EuiComboBoxOptionOption } from '@elastic/eui/src/components/combo_box/types';
import { i18n } from '@kbn/i18n';

const options = [
{ label: 'search-index1', key: 'id-1' },
{ label: 'search-index1', key: 'id-1' },
];
interface AddIndicesFieldProps {
indices: string[];
selectedIndices: string[];
onIndexSelect: (index: string) => void;
}

export const AddIndicesField = ({ addIndices }) => {
const [selectedIndices, setSelectedIndices] = React.useState<string[]>([]);
const handleAddIndices = () => {
addIndices(selectedIndices);
};
const onChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
setSelectedIndices(
selectedOptions.filter((option) => option && !!option.key).map((option) => option.key)
);
};

return (
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem>
<EuiComboBox
placeholder={i18n.translate('aiPlayground.sources.addIndex.placeholder', {
defaultMessage: 'Add new data source',
})}
fullWidth
options={options}
selectedOptions={selectedIndices.map(
(index) => options.find((option) => option.key === index)!
)}
onChange={onChange}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon display="base" iconType="plusInCircle" size="m" onClick={handleAddIndices} />
</EuiFlexItem>
</EuiFlexGroup>
);
};
export const AddIndicesField: React.FC<AddIndicesFieldProps> = ({
selectedIndices,
indices,
onIndexSelect,
}) => (
<EuiFormRow
fullWidth
label={i18n.translate('aiPlayground.sources.addIndex.label', {
defaultMessage: 'Add index',
})}
labelType="legend"
>
<EuiSuperSelect
placeholder={i18n.translate('aiPlayground.sources.addIndex.placeholder', {
defaultMessage: 'Select new data source',
})}
fullWidth
options={indices.map((index) => ({
value: index,
inputDisplay: index,
disabled: selectedIndices.includes(index),
}))}
onChange={onIndexSelect}
hasDividers
/>
</EuiFormRow>
);
Original file line number Diff line number Diff line change
@@ -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 { EuiFormRow, EuiListGroup, EuiListGroupItem } from '@elastic/eui';
import React from 'react';
import { i18n } from '@kbn/i18n';

interface IndicesListProps {
indices: string[];
onRemoveClick: (index: string) => void;
hasBorder?: boolean;
}

export const IndicesList: React.FC<IndicesListProps> = ({ indices, onRemoveClick, hasBorder }) =>
indices?.length ? (
<EuiFormRow
fullWidth
label={i18n.translate('aiPlayground.sources.indices.label', {
defaultMessage: 'Selected indices',
})}
labelType="legend"
>
<EuiListGroup bordered={hasBorder} maxWidth={false} wrapText>
{indices.map((index) => (
<EuiListGroupItem
key={index}
wrapText
color="primary"
label={index}
size="s"
extraAction={{
alwaysShow: true,
'aria-label': i18n.translate('aiPlayground.sources.indices.removeIndex', {
defaultMessage: 'Remove index from sources',
}),
color: 'text',
iconType: 'minusInCircle',
onClick: () => onRemoveClick(index),
disabled: indices.length === 1,
}}
/>
))}
</EuiListGroup>
</EuiFormRow>
) : null;
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,43 @@
* 2.0.
*/

import { EuiBasicTable } from '@elastic/eui';
import React from 'react';
import { EuiBasicTable, EuiLink } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';

interface IndicesTableProps {
indices: string[];
onRemoveClick: (index: string) => void;
}

export const IndicesTable: React.FC<IndicesTableProps> = ({ onRemoveClick }) => {
return (
<EuiBasicTable
columns={[
{
field: 'name',
name: i18n.translate('aiPlayground.sources.indicesTable.name', {
defaultMessage: 'Name',
}),
},
{
name: 'Actions',
actions: [
{
name: 'remove',
description: i18n.translate(
'aiPlayground.sources.indicesTable.removeActionDescriptions',
{
defaultMessage: 'Remove index from source',
}
),
type: 'icon',
icon: 'cross',
onClick: (index) => onRemoveClick(index.id),
},
],
},
]}
items={[
{ id: '1', name: 'search-index' },
{ id: '2', name: 'search-books' },
]}
/>
);
};
export const IndicesTable: React.FC<IndicesTableProps> = ({ indices, onRemoveClick }) => (
<EuiBasicTable
items={indices.map((index) => ({ index }))}
columns={[
{
field: 'index',
name: i18n.translate('aiPlayground.sources.indices.table.label', {
defaultMessage: 'Selected indices',
}),
truncateText: true,
render: (index: string) => <EuiLink href="#">{index}</EuiLink>,
},
{
actions: [
{
type: 'icon',
name: i18n.translate('aiPlayground.sources.indices.table.remove.label', {
defaultMessage: 'Remove',
}),
description: i18n.translate('aiPlayground.sources.indices.table.remove.description', {
defaultMessage: 'Remove index',
}),
icon: 'minusInCircle',
onClick: (item: { index: string }) => onRemoveClick(item.index),
},
],
},
]}
hasActions
/>
);

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/*
* 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 {
EuiPanel,
EuiTitle,
EuiText,
EuiLink,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
} from '@elastic/eui';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { AddIndicesField } from './add_indices_field';
import { IndicesTable } from './indices_table';

export const SourcesPanelEmptyPrompt: React.FC = () => {
const indices = ['search-index', 'search-books'];
const [selectedIndices, setSelectedIndices] = React.useState<string[]>([]);
const addIndex = (newIndex: string) => {
setSelectedIndices([...selectedIndices, newIndex]);
};
const removeIndex = (index: string) => {
setSelectedIndices(selectedIndices.filter((indexName) => indexName !== index));
};

return (
<EuiPanel hasBorder paddingSize="l">
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="aiPlayground.emptyPrompts.sources.title"
defaultMessage="Select sources"
/>
</h5>
</EuiTitle>

<EuiSpacer size="s" />

<EuiFlexGroup direction="column" gutterSize="xl">
<EuiText size="s">
<p>
<FormattedMessage
id="aiPlayground.emptyPrompts.sources.description"
defaultMessage="Where should the data for this chat experience be retrieved from?"
/>
</p>
</EuiText>

{!!selectedIndices?.length && (
<EuiFlexItem>
<IndicesTable indices={selectedIndices} onRemoveClick={removeIndex} />
</EuiFlexItem>
)}

<EuiFlexItem>
<AddIndicesField
selectedIndices={selectedIndices}
indices={indices}
onIndexSelect={addIndex}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
};
Loading

0 comments on commit accbd15

Please sign in to comment.