Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Search][Playground] Update UI #187608

Merged
merged 31 commits into from
Jul 10, 2024
Merged
Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
3470850
Update setup page
yansavitski Jun 18, 2024
a8b9cdf
Set playground template panelled and move header to plugin
yansavitski Jun 18, 2024
b02bd89
Update header sizes
yansavitski Jun 18, 2024
bdcd5d1
Update input actions space
yansavitski Jun 19, 2024
c634ead
Add create index button in setup page
yansavitski Jun 21, 2024
3bf7f93
Update sidebar
yansavitski Jun 25, 2024
0e1b338
Add data action button
yansavitski Jun 25, 2024
a861d24
Update chat sidebar
yansavitski Jun 25, 2024
df9525b
Update query mode and fix bugs
yansavitski Jul 4, 2024
f2b2fc2
Add callout for empty index
yansavitski Jul 4, 2024
6f7af76
Fix add indices in query mode
yansavitski Jul 4, 2024
e436ca6
Update query fields after adding new index
yansavitski Jul 4, 2024
d34b330
Merge branch 'main' of github.com:elastic/kibana into playground-ui-u…
yansavitski Jul 4, 2024
270a2ae
Fix source fields update after merge
yansavitski Jul 4, 2024
5a97b53
Update ftr for ess
yansavitski Jul 8, 2024
3425998
Fix es3 ftr tests
yansavitski Jul 8, 2024
07118b7
Fix pr checks
yansavitski Jul 8, 2024
74b6ffd
Merge branch 'main' of github.com:elastic/kibana into playground-ui-u…
yansavitski Jul 8, 2024
e9dc061
Update message list color
yansavitski Jul 8, 2024
e03e152
Update transform function
yansavitski Jul 8, 2024
1dbc4a1
Use merge fields
yansavitski Jul 8, 2024
5b4a3e1
Merge branch 'main' of github.com:elastic/kibana into playground-ui-u…
yansavitski Jul 8, 2024
5dd043f
Fix check types
yansavitski Jul 9, 2024
d3f6008
Revert "Update transform function"
yansavitski Jul 9, 2024
b441061
fix issue with indices not existing
joemcelroy Jul 9, 2024
d3d65f2
FIx reset query after goes to chat mode
yansavitski Jul 9, 2024
0c6d783
Add callout for no source fields
yansavitski Jul 9, 2024
51fe5ef
Update index flyout tests
yansavitski Jul 9, 2024
aa28fbb
Fix using old version of addIndex function in useEffect
yansavitski Jul 9, 2024
9a67631
Update page template for serverless
yansavitski Jul 10, 2024
0630948
Move header docs to the left
yansavitski Jul 10, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,8 @@ import React from 'react';

import { useValues } from 'kea';

import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { FormattedMessage } from '@kbn/i18n-react';

import { KibanaLogic } from '../../../shared/kibana';
import { EnterpriseSearchApplicationsPageTemplate } from '../layout/page_template';

Expand All @@ -31,32 +28,9 @@ export const Playground: React.FC = () => {
defaultMessage: 'Playground',
}),
]}
pageHeader={{
pageTitle: (
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<FormattedMessage
id="xpack.enterpriseSearch.content.playground.headerTitle"
defaultMessage="Playground"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBetaBadge
label={i18n.translate(
'xpack.enterpriseSearch.content.playground.headerTitle.techPreview',
{
defaultMessage: 'TECH PREVIEW',
}
)}
color="hollow"
/>
</EuiFlexItem>
</EuiFlexGroup>
),
rightSideItems: [<searchPlayground.PlaygroundToolbar />],
}}
pageViewTelemetry="Playground"
restrictWidth={false}
panelled={false}
customPageSections
bottomBorder="extended"
docLink="playground"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export type Start = jest.Mocked<SearchPlaygroundPluginStart>;
const createStartMock = (): Start => {
const startContract: Start = {
PlaygroundProvider: jest.fn(),
PlaygroundToolbar: jest.fn(),
Playground: jest.fn(),
PlaygroundHeaderDocs: jest.fn(),
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,21 @@ export enum AnalyticsEvents {
chatRegenerateMessages = 'chat_regenerate_messages',
citationDetailsExpanded = 'citation_details_expanded',
citationDetailsCollapsed = 'citation_details_collapsed',
editContextFlyoutOpened = 'edit_context_flyout_opened',
editContextFieldToggled = 'edit_context_field_toggled',
editContextDocSizeChanged = 'edit_context_doc_size_changed',
editContextSaved = 'edit_context_saved',
genAiConnectorAdded = 'gen_ai_connector_added',
genAiConnectorCreated = 'gen_ai_connector_created',
genAiConnectorExists = 'gen_ai_connector_exists',
genAiConnectorSetup = 'gen_ai_connector_setup',
includeCitations = 'include_citations',
instructionsFieldChanged = 'instructions_field_changed',
queryFieldsUpdated = 'view_query_fields_updated',
queryModeLoaded = 'query_mode_loaded',
modelSelected = 'model_selected',
retrievalDocsFlyoutOpened = 'retrieval_docs_flyout_opened',
sourceFieldsLoaded = 'source_fields_loaded',
sourceIndexUpdated = 'source_index_updated',
startNewChatPageLoaded = 'start_new_chat_page_loaded',
viewQueryFlyoutOpened = 'view_query_flyout_opened',
viewQueryFieldsUpdated = 'view_query_fields_updated',
viewQuerySaved = 'view_query_saved',
setupChatPageLoaded = 'start_new_chat_page_loaded',
viewCodeFlyoutOpened = 'view_code_flyout_opened',
viewCodeLanguageChange = 'view_code_language_change',
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@
* 2.0.
*/

import { i18n } from '@kbn/i18n';
import React, { useMemo } from 'react';
import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem, EuiPageTemplate, EuiTitle } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiPageTemplate } from '@elastic/eui';
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from './utils/query_client';
import { PlaygroundProvider } from './providers/playground_provider';

import { App } from './components/app';
import { PlaygroundToolbar } from './embeddable';
import { PlaygroundHeaderDocs } from './components/playground_header_docs';
import { useKibana } from './hooks/use_kibana';

export const ChatPlaygroundOverview: React.FC = () => {
Expand All @@ -27,46 +25,18 @@ export const ChatPlaygroundOverview: React.FC = () => {
);

return (
<PlaygroundProvider>
<EuiPageTemplate
offset={0}
restrictWidth={false}
data-test-subj="svlPlaygroundPage"
grow={false}
>
<EuiPageTemplate.Header
css={{ '.euiPageHeaderContent > .euiFlexGroup': { flexWrap: 'wrap' } }}
pageTitle={
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiTitle
css={{ whiteSpace: 'nowrap' }}
data-test-subj="chat-playground-home-page-title"
>
<h2>
<FormattedMessage
id="xpack.searchPlayground.pageTitle"
defaultMessage="Playground"
/>
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBetaBadge
label={i18n.translate('xpack.searchPlayground.pageTitle.techPreview', {
defaultMessage: 'TECH PREVIEW',
})}
color="hollow"
/>
</EuiFlexItem>
</EuiFlexGroup>
}
data-test-subj="chat-playground-home-page"
rightSideItems={[<PlaygroundHeaderDocs />, <PlaygroundToolbar />]}
/>
<App />
{embeddableConsole}
</EuiPageTemplate>
</PlaygroundProvider>
<QueryClientProvider client={queryClient}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not put the QueryClient as part of the PlaygroundProvider?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved it here to use useSourceFields hook in the playground provider, to avoid bugs when the hook is unmounted and the index is changed. This hook used queryClient so I moved it to the parent component. But then I figured out that it affected a lot more and needed extra time to fix some bugs so I returned changes. I forgot to return this one as well. I can revert these changes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot that i've added a load connectors hook in playground provider, so query client provider needs to be defined in upper component

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you think it still could be incapsulated in the PlaygroundProvider still? just the PlaygroundProvider is two components, for the hook and the queryClientProvider?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if its not possible, i would just create a new provider component for QueryClient thats in our providers folder vs making the QueryClient instantiation in a util.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can add queryClientProvide in PlaygroundProvide, but in that case need to find another place to load connector and set models

<PlaygroundProvider>
<EuiPageTemplate
offset={0}
restrictWidth={false}
data-test-subj="svlPlaygroundPage"
grow={false}
>
<App showDocs />
{embeddableConsole}
</EuiPageTemplate>
</PlaygroundProvider>
</QueryClientProvider>
);
};
67 changes: 50 additions & 17 deletions x-pack/plugins/search_playground/public/components/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,61 @@
* 2.0.
*/

import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';

import { StartNewChat } from './start_new_chat';
import { useFormContext } from 'react-hook-form';
import { QueryMode } from './query_mode/query_mode';
import { SetupPage } from './setup_page/setup_page';
import { Header } from './header';
import { useLoadConnectors } from '../hooks/use_load_connectors';
import { ChatForm, ChatFormFields } from '../types';
import { Chat } from './chat';

export const App: React.FC = () => {
const [showStartPage, setShowStartPage] = useState(true);
export interface AppProps {
showDocs?: boolean;
}

export enum ViewMode {
chat = 'chat',
query = 'query',
}

export const App: React.FC<AppProps> = ({ showDocs = false }) => {
const [showSetupPage, setShowSetupPage] = useState(true);
const [selectedMode, setSelectedMode] = useState<ViewMode>(ViewMode.chat);
const { watch } = useFormContext<ChatForm>();
const { data: connectors } = useLoadConnectors();
const hasSelectedIndices = watch(ChatFormFields.indices).length;
const handleModeChange = (id: string) => setSelectedMode(id as ViewMode);

useEffect(() => {
if (showSetupPage && connectors?.length && hasSelectedIndices) {
setShowSetupPage(false);
}
}, [connectors, hasSelectedIndices, showSetupPage]);

return (
<KibanaPageTemplate.Section
alignment="top"
restrictWidth={false}
grow
css={{
position: 'relative',
}}
contentProps={{ css: { display: 'flex', flexGrow: 1, position: 'absolute', inset: 0 } }}
paddingSize="none"
className="eui-fullHeight"
>
{showStartPage ? <StartNewChat onStartClick={() => setShowStartPage(false)} /> : <Chat />}
</KibanaPageTemplate.Section>
<>
<Header
showDocs={showDocs}
onModeChange={handleModeChange}
selectedMode={selectedMode}
isActionsDisabled={showSetupPage}
/>
<KibanaPageTemplate.Section
alignment="top"
restrictWidth={false}
grow
css={{
position: 'relative',
}}
contentProps={{ css: { display: 'flex', flexGrow: 1, position: 'absolute', inset: 0 } }}
paddingSize="none"
className="eui-fullHeight"
>
{showSetupPage ? <SetupPage /> : selectedMode === ViewMode.chat ? <Chat /> : <QueryMode />}
</KibanaPageTemplate.Section>
</>
);
};
20 changes: 11 additions & 9 deletions x-pack/plugins/search_playground/public/components/chat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiForm,
EuiHideFor,
EuiHorizontalRule,
EuiSpacer,
useEuiTheme,
Expand Down Expand Up @@ -50,14 +51,12 @@ export const Chat = () => {
const { euiTheme } = useEuiTheme();
const {
control,
watch,
formState: { isValid, isSubmitting },
resetField,
handleSubmit,
getValues,
} = useFormContext<ChatForm>();
const { messages, append, stop: stopRequest, setMessages, reload, error } = useChat();
const selectedIndicesCount = watch(ChatFormFields.indices, []).length;
const messagesRef = useAutoBottomScroll();
const [isRegenerating, setIsRegenerating] = useState<boolean>(false);
const usageTracker = useUsageTracker();
Expand Down Expand Up @@ -123,7 +122,6 @@ export const Chat = () => {
<EuiFlexItem
grow={2}
css={{
borderRight: euiTheme.border.thin,
paddingTop: euiTheme.size.l,
paddingBottom: euiTheme.size.l,
// don't allow the chat to shrink below 66.6% of the screen
Expand All @@ -149,14 +147,15 @@ export const Chat = () => {
>
<EuiHorizontalRule margin="none" />

<EuiSpacer size="m" />
<EuiSpacer size="s" />

<EuiFlexGroup>
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
iconType="sparkles"
disabled={isToolBarActionsDisabled}
onClick={regenerateMessages}
size="xs"
data-test-subj="regenerateActionButton"
>
<FormattedMessage
Expand All @@ -170,6 +169,7 @@ export const Chat = () => {
iconType="refresh"
disabled={isToolBarActionsDisabled}
onClick={handleClearChat}
size="xs"
data-test-subj="clearChatActionButton"
>
<FormattedMessage
Expand All @@ -180,7 +180,7 @@ export const Chat = () => {
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="m" />
<EuiSpacer size="s" />

<Controller
name={ChatFormFields.question}
Expand Down Expand Up @@ -234,9 +234,11 @@ export const Chat = () => {
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem grow={1} css={{ flexBasis: 0, minWidth: '33.3%' }}>
<ChatSidebar selectedIndicesCount={selectedIndicesCount} />
</EuiFlexItem>
<EuiHideFor sizes={['xs', 's']}>
<EuiFlexItem grow={1} css={{ flexBasis: 0, minWidth: '33.3%' }}>
<ChatSidebar />
</EuiFlexItem>
</EuiHideFor>
</EuiFlexGroup>
</EuiForm>
);
Expand Down
Loading