From bc93d18f7ee24dab40e3252e4ca4e6c51ca813f9 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 4 Feb 2025 22:10:39 -0700 Subject: [PATCH] Update SubmitButton.tsx --- .../ChatContent/ChatInput/ChatInput.tsx | 3 +- .../ChatContent/ChatInput/SubmitButton.tsx | 49 +++++++++---------- .../ChatContent/ChatInput/useChatInputFlow.ts | 19 ++++--- web/src/context/Chats/NewChatProvider.tsx | 28 +++++++++-- 4 files changed, 63 insertions(+), 36 deletions(-) diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx index ddd5e088a..eb203c1ea 100644 --- a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx +++ b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/ChatInput.tsx @@ -25,7 +25,8 @@ export const ChatInput: React.FC<{}> = React.memo(({}) => { const { onSubmitPreflight } = useChatInputFlow({ disableSendButton, - inputValue + inputValue, + setInputValue }); const onPressEnter = useMemoizedFn((e: React.KeyboardEvent) => { diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/SubmitButton.tsx b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/SubmitButton.tsx index 613715cbe..4a85532a1 100644 --- a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/SubmitButton.tsx +++ b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/SubmitButton.tsx @@ -13,30 +13,36 @@ interface SubmitButtonProps { const animationIcon = { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, - exit: { opacity: 0, scale: 0.8 } + exit: { opacity: 0, scale: 0.8 }, + transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] } +}; + +const buttonAnimation = { + whileHover: { scale: 1.085 }, + whileTap: { scale: 0.9 }, + transition: { duration: 0.24, ease: 'easeInOut' } }; export const SubmitButton: React.FC = React.memo( - ({ disableSendButton, onSubmitPreflight }) => { + ({ disableSendButton, loading, onSubmitPreflight }) => { const { styles } = useStyles(); - const [loading, setLoading] = useState(false); - - const onTest = () => { - setLoading(!loading); - }; - const tooltipText = loading ? 'Stop' : 'Send message'; const tooltipShortcuts = loading ? [] : ['⌘', '↵']; return ( - - + ); } @@ -65,26 +71,17 @@ const useStyles = createStyles(({ token, css }) => ({ align-items: center; justify-content: center; cursor: pointer; - transition: all 0.2s ease; background: ${token.colorBgContainer}; border: 0.5px solid ${token.colorBorder}; padding: 0; outline: none; - - .material-symbols { - transition: color 0.2s ease; - } + transition: all 0.2s ease-in-out; &:not(:disabled):hover { border-color: ${token.colorPrimary}; - transform: scale(1.075); box-shadow: ${token.boxShadowTertiary}; } - &:not(:disabled):active { - transform: scale(0.95); - } - &:disabled { cursor: not-allowed; } @@ -98,12 +95,12 @@ const useStyles = createStyles(({ token, css }) => ({ } `, loading: css` - background: ${token.colorText}; - border: 0.5px solid ${token.colorBorder}; + background: ${token.colorText} !important; + border: 0.5px solid ${token.colorText} !important; color: ${token.colorBgLayout}; &:hover { - background: ${token.colorTextSecondary}; + background: ${token.colorTextSecondary} !important; border-color: ${token.colorTextSecondary} !important; } diff --git a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/useChatInputFlow.ts b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/useChatInputFlow.ts index 9a70d65e0..b85c85f79 100644 --- a/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/useChatInputFlow.ts +++ b/web/src/app/app/_layouts/ChatLayout/ChatContainer/ChatContent/ChatInput/useChatInputFlow.ts @@ -7,10 +7,12 @@ type FlowType = 'followup-chat' | 'followup-metric' | 'followup-dashboard' | 'ne export const useChatInputFlow = ({ disableSendButton, - inputValue + inputValue, + setInputValue }: { disableSendButton: boolean; inputValue: string; + setInputValue: (value: string) => void; }) => { const hasChat = useChatContextSelector((x) => x.hasChat); const selectedFileType = useChatContextSelector((x) => x.selectedFileType); @@ -32,29 +34,34 @@ export const useChatInputFlow = ({ switch (flow) { case 'followup-chat': - return onFollowUpChat({ prompt: inputValue, messageId: currentMessageId! }); + await onFollowUpChat({ prompt: inputValue, messageId: currentMessageId! }); + break; case 'followup-metric': - return onStartChatFromFile({ + await onStartChatFromFile({ prompt: inputValue, fileId: selectedFileId!, fileType: 'metric' }); - + break; case 'followup-dashboard': - return onStartChatFromFile({ + await onStartChatFromFile({ prompt: inputValue, fileId: selectedFileId!, fileType: 'dashboard' }); + break; case 'new': - return onStartNewChat(inputValue); + await onStartNewChat(inputValue); + break; default: const _exhaustiveCheck: never = flow; return _exhaustiveCheck; } + + setInputValue(''); }); return { onSubmitPreflight }; diff --git a/web/src/context/Chats/NewChatProvider.tsx b/web/src/context/Chats/NewChatProvider.tsx index 3dc84a0c8..901c51ce8 100644 --- a/web/src/context/Chats/NewChatProvider.tsx +++ b/web/src/context/Chats/NewChatProvider.tsx @@ -17,28 +17,50 @@ export const useBusterNewChat = () => { setPrompt(prompt); }); - const onSelectSearchAsset = useMemoizedFn((asset: BusterSearchResult) => {}); + const onSelectSearchAsset = useMemoizedFn(async (asset: BusterSearchResult) => { + setLoadingNewChat(true); + console.log('select search asset'); + await new Promise((resolve) => setTimeout(resolve, 1000)); + setLoadingNewChat(false); + onSetPrompt(''); + }); const onStartNewChat = useMemoizedFn(async (prompt: string) => { setLoadingNewChat(true); + console.log('start new chat'); await new Promise((resolve) => setTimeout(resolve, 1000)); setLoadingNewChat(false); + onSetPrompt(''); }); const onStartChatFromFile = useMemoizedFn( - async ({}: { prompt: string; fileId: string; fileType: FileType }) => {} + async ({}: { prompt: string; fileId: string; fileType: FileType }) => { + setLoadingNewChat(true); + console.log('start chat from file'); + await new Promise((resolve) => setTimeout(resolve, 1000)); + setLoadingNewChat(false); + onSetPrompt(''); + } ); const onFollowUpChat = useMemoizedFn( async ({ prompt, messageId }: { prompt: string; messageId: string }) => { setLoadingNewChat(true); + console.log('follow up chat'); await new Promise((resolve) => setTimeout(resolve, 1000)); setLoadingNewChat(false); + onSetPrompt(''); } ); const onReplaceMessageInChat = useMemoizedFn( - async ({ prompt, messageId }: { prompt: string; messageId: string }) => {} + async ({ prompt, messageId }: { prompt: string; messageId: string }) => { + setLoadingNewChat(true); + console.log('replace message in chat'); + await new Promise((resolve) => setTimeout(resolve, 1000)); + setLoadingNewChat(false); + onSetPrompt(''); + } ); const onSetSelectedChatDataSource = useMemoizedFn((dataSource: BusterDatasetListItem | null) => {