Skip to content

Commit

Permalink
fix loading
Browse files Browse the repository at this point in the history
  • Loading branch information
stephmilovic committed Aug 13, 2024
1 parent 6905d68 commit d230696
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,14 @@ import React, {
useMemo,
useRef,
} from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
import {
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingLogo,
EuiPanel,
EuiText,
} from '@elastic/eui';
import { HttpSetup } from '@kbn/core-http-browser';
import { euiThemeVars } from '@kbn/ui-theme';
import { css } from '@emotion/react';
Expand All @@ -33,6 +40,7 @@ interface Props {
isAssistantEnabled: boolean;
isSettingsModalVisible: boolean;
isWelcomeSetup: boolean;
isLoading: boolean;
refetchCurrentUserConversations: () => Promise<
QueryObserverResult<Record<string, Conversation>, unknown>
>;
Expand All @@ -50,6 +58,7 @@ export const AssistantBody: FunctionComponent<Props> = ({
setCurrentSystemPromptId,
http,
isAssistantEnabled,
isLoading,
isSettingsModalVisible,
isWelcomeSetup,
refetchCurrentUserConversations,
Expand Down Expand Up @@ -103,7 +112,12 @@ export const AssistantBody: FunctionComponent<Props> = ({
return (
<EuiFlexGroup direction="column" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
{isWelcomeSetup ? (
{isLoading ? (
<EuiEmptyPrompt
data-test-subj="animatedLogo"
icon={<EuiLoadingLogo logo="logoSecurity" size="xl" />}
/>
) : isWelcomeSetup ? (
<WelcomeSetup
currentConversation={currentConversation}
handleOnConversationSelected={handleOnConversationSelected}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const testProps = {
ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
DOC_LINK_VERSION: 'master',
},
isLoading: false,
isDisabled: false,
isSettingsModalVisible: false,
onConversationSelected,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
EuiPanel,
EuiConfirmModal,
EuiToolTip,
EuiSkeletonTitle,
} from '@elastic/eui';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
Expand All @@ -33,6 +34,7 @@ interface OwnProps {
selectedConversation: Conversation | undefined;
defaultConnector?: AIConnector;
isDisabled: boolean;
isLoading: boolean;
isSettingsModalVisible: boolean;
onToggleShowAnonymizedValues: () => void;
setIsSettingsModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
Expand Down Expand Up @@ -62,6 +64,7 @@ export const AssistantHeader: React.FC<Props> = ({
selectedConversation,
defaultConnector,
isDisabled,
isLoading,
isSettingsModalVisible,
onToggleShowAnonymizedValues,
setIsSettingsModalVisible,
Expand Down Expand Up @@ -145,6 +148,7 @@ export const AssistantHeader: React.FC<Props> = ({
return (
<>
<FlyoutNavigation
isLoading={isLoading}
isExpanded={!!chatHistoryVisible}
setIsExpanded={setChatHistoryVisible}
onConversationCreate={onConversationCreate}
Expand Down Expand Up @@ -197,11 +201,15 @@ export const AssistantHeader: React.FC<Props> = ({
overflow: hidden;
`}
>
<AssistantTitle
title={selectedConversation?.title}
selectedConversation={selectedConversation}
refetchCurrentUserConversations={refetchCurrentUserConversations}
/>
{isLoading ? (
<EuiSkeletonTitle data-test-subj="skeletonTitle" size="xs" />
) : (
<AssistantTitle
title={selectedConversation?.title}
selectedConversation={selectedConversation}
refetchCurrentUserConversations={refetchCurrentUserConversations}
/>
)}
</EuiFlexItem>

<EuiFlexItem grow={false}>
Expand Down Expand Up @@ -241,6 +249,7 @@ export const AssistantHeader: React.FC<Props> = ({
button={
<EuiButtonIcon
aria-label="test"
isDisabled={isDisabled}
iconType="boxesVertical"
onClick={onButtonClick}
data-test-subj="chat-context-menu"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations';

export interface FlyoutNavigationProps {
isExpanded: boolean;
isLoading: boolean;
setIsExpanded?: (value: boolean) => void;
children: React.ReactNode;
onConversationCreate?: () => Promise<void>;
Expand All @@ -35,7 +36,14 @@ const VerticalSeparator = styled.div`
*/

export const FlyoutNavigation = memo<FlyoutNavigationProps>(
({ isExpanded, setIsExpanded, children, onConversationCreate, isAssistantEnabled }) => {
({
isLoading,
isExpanded,
setIsExpanded,
children,
onConversationCreate,
isAssistantEnabled,
}) => {
const onToggle = useCallback(
() => setIsExpanded && setIsExpanded(!isExpanded),
[isExpanded, setIsExpanded]
Expand All @@ -44,7 +52,7 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
const toggleButton = useMemo(
() => (
<EuiButtonIcon
disabled={!isAssistantEnabled}
disabled={isLoading || !isAssistantEnabled}
onClick={onToggle}
iconType={isExpanded ? 'arrowEnd' : 'arrowStart'}
size="xs"
Expand All @@ -66,7 +74,7 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
}
/>
),
[isAssistantEnabled, isExpanded, onToggle]
[isAssistantEnabled, isExpanded, isLoading, onToggle]
);

return (
Expand Down Expand Up @@ -99,7 +107,7 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
color="primary"
iconType="newChat"
onClick={onConversationCreate}
disabled={!isAssistantEnabled}
disabled={isLoading || !isAssistantEnabled}
>
{NEW_CHAT}
</EuiButtonEmpty>
Expand Down
19 changes: 18 additions & 1 deletion x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,18 @@ const AssistantComponent: React.FC<Props> = ({
Object.keys(conversations).length > 0,
});

const isInitialLoad = useMemo(() => {
return (
(!isFetchedAnonymizationFields && !isFetchedCurrentUserConversations && !isFetchedPrompts) ||
!(currentConversation && currentConversation?.id !== '')
);
}, [
currentConversation,
isFetchedAnonymizationFields,
isFetchedCurrentUserConversations,
isFetchedPrompts,
]);

// Welcome setup state
const isWelcomeSetup = useMemo(
() =>
Expand All @@ -158,7 +170,10 @@ const AssistantComponent: React.FC<Props> = ({
: (connectors?.length ?? 0) === 0,
[connectors?.length, conversations]
);
const isDisabled = isWelcomeSetup || !isAssistantEnabled;
const isDisabled = useMemo(
() => isWelcomeSetup || !isAssistantEnabled || isInitialLoad,
[isWelcomeSetup, isAssistantEnabled, isInitialLoad]
);

// Settings modal state (so it isn't shared between assistant instances like Timeline)
const [isSettingsModalVisible, setIsSettingsModalVisible] = useState(false);
Expand Down Expand Up @@ -438,6 +453,7 @@ const AssistantComponent: React.FC<Props> = ({
>
<EuiFlyoutHeader hasBorder>
<AssistantHeader
isLoading={isInitialLoad}
selectedConversation={currentConversation}
defaultConnector={defaultConnector}
isDisabled={isDisabled || isLoadingChatSend}
Expand Down Expand Up @@ -502,6 +518,7 @@ const AssistantComponent: React.FC<Props> = ({
handleOnConversationSelected={handleOnConversationSelected}
http={http}
isAssistantEnabled={isAssistantEnabled}
isLoading={isInitialLoad}
isSettingsModalVisible={isSettingsModalVisible}
isWelcomeSetup={isWelcomeSetup}
refetchCurrentUserConversations={refetchCurrentUserConversations}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export const ConnectorSelector: React.FC<Props> = React.memo(
<EuiButtonEmpty
data-test-subj="addNewConnectorButton"
href="#"
isDisabled={localIsDisabled}
iconType="plus"
size="xs"
>
Expand All @@ -91,7 +92,7 @@ export const ConnectorSelector: React.FC<Props> = React.memo(
</EuiFlexGroup>
),
};
}, []);
}, [localIsDisabled]);

const connectorOptions = useMemo(
() =>
Expand Down Expand Up @@ -188,6 +189,7 @@ export const ConnectorSelector: React.FC<Props> = React.memo(
<EuiButtonEmpty
data-test-subj="addNewConnectorButton"
iconType="plusInCircle"
isDisabled={localIsDisabled}
size="xs"
onClick={() => setIsConnectorModalVisible(true)}
>
Expand Down

0 comments on commit d230696

Please sign in to comment.