disable generate button with tooltip if context changes are not saved (…

…#981)
BloopAI · Sep 22, 2023 · 9ac3617 · 9ac3617
1 parent 85e6dd1
commit 9ac3617
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 10 deletions.
diff --git a/client/src/components/Button/index.tsx b/client/src/components/Button/index.tsx
@@ -32,6 +32,7 @@ type OnlyIconProps = {
 type TextBtnProps = {
   onlyIcon?: false;
   tooltipPlacement?: never;
+  title?: string;
 };
 
 const variantStylesMap = {
@@ -105,7 +106,7 @@ const Button = forwardRef<
         } transition-all duration-300 ease-in-bounce select-none`,
       [variant, className, size, onlyIcon],
     );
-    return onlyIcon && !rest.disabled ? (
+    return (onlyIcon && !rest.disabled) || title ? (
       <Tooltip text={title} placement={tooltipPlacement}>
         <button {...rest} type={type} ref={ref} className={buttonClassName}>
           {children}

diff --git a/client/src/locales/en.json b/client/src/locales/en.json
@@ -370,5 +370,6 @@
 	"First name is required": "First name is required",
 	"Last name is required": "Last name is required",
 	"Email is required": "Email is required",
-	"Connect GitHub account to continue": "Connect GitHub account to continue"
+	"Connect GitHub account to continue": "Connect GitHub account to continue",
+	"Save context changes before answer generation": "Save context changes before answer generation"
 }
diff --git a/client/src/locales/es.json b/client/src/locales/es.json
@@ -370,5 +370,6 @@
 	"Email is required": "Se requiere correo electrónico",
 	"Last name is required": "Se requiere apellido",
 	"First name is required": "Se requiere el primer nombre",
-	"Connect GitHub account to continue": "Conecte la cuenta GitHub para continuar"
+	"Connect GitHub account to continue": "Conecte la cuenta GitHub para continuar",
+	"Save context changes before answer generation": "Guardar cambios de contexto antes de la generación de respuesta"
 }
diff --git a/client/src/locales/ja.json b/client/src/locales/ja.json
@@ -367,5 +367,6 @@
 	"Email is required": "メールが必要です",
 	"First name is required": "名が必要です",
 	"Last name is required": "姓が必要です",
-	"Connect GitHub account to continue": "githubアカウントを接続して続行します"
+	"Connect GitHub account to continue": "githubアカウントを接続して続行します",
+	"Save context changes before answer generation": "回答生成の前にコンテキストの変更を保存します"
 }
diff --git a/client/src/locales/zh-CN.json b/client/src/locales/zh-CN.json
@@ -375,5 +375,6 @@
 	"Email is required": "需要电子邮件",
 	"First name is required": "需要名字",
 	"Last name is required": "需要姓氏",
-	"Connect GitHub account to continue": "连接github帐户继续"
+	"Connect GitHub account to continue": "连接github帐户继续",
+	"Save context changes before answer generation": "在回答生成之前保存上下文更改"
 }
diff --git a/client/src/pages/StudioTab/Content.tsx b/client/src/pages/StudioTab/Content.tsx
@@ -65,6 +65,7 @@ const ContentContainer = ({
     null,
   );
   const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+  const [isChangeUnsaved, setIsChangeUnsaved] = useState(false);
   const { leftPanelRef, rightPanelRef, dividerRef, containerRef } =
     useResizeableSplitPanel();
   const { updateTabName } = useContext(TabsContext);
@@ -259,6 +260,12 @@ const ContentContainer = ({
     return isHistoryOpen && previewingState ? previewingState : currentState;
   }, [isHistoryOpen, previewingState, currentState]);
 
+  useEffect(() => {
+    if (leftPanel.type !== StudioRightPanelType.FILE) {
+      setIsChangeUnsaved(false);
+    }
+  }, [leftPanel.type]);
+
   return (
     <PageTemplate renderPage="studio">
       <div className="w-screen flex flex-col overflow-auto">
@@ -312,6 +319,7 @@ const ContentContainer = ({
                   setLeftPanel={setLeftPanel}
                   onFileRangesChanged={onFileRangesChanged}
                   isActiveTab={isActive}
+                  setIsChangeUnsaved={setIsChangeUnsaved}
                 />
               ) : null}
               <AddContextModal
@@ -344,6 +352,7 @@ const ContentContainer = ({
                   null,
                 )}
                 isActiveTab={isActive}
+                isChangeUnsaved={isChangeUnsaved}
               />
             </div>
           </div>

diff --git a/client/src/pages/StudioTab/FilePanel/index.tsx b/client/src/pages/StudioTab/FilePanel/index.tsx
@@ -4,6 +4,7 @@ import React, {
   SetStateAction,
   useCallback,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -41,6 +42,7 @@ type Props = {
     branch: string | null,
   ) => void;
   isActiveTab: boolean;
+  setIsChangeUnsaved: Dispatch<SetStateAction<boolean>>;
 };
 
 const HEADER_HEIGHT = 32;
@@ -59,6 +61,7 @@ const FilePanel = ({
   onFileRangesChanged,
   isActiveTab,
   isFileInContext,
+  setIsChangeUnsaved,
 }: Props) => {
   useTranslation();
   const [file, setFile] = useState<File | null>(null);
@@ -149,6 +152,17 @@ const FilePanel = ({
   );
   useKeyboardNavigation(handleKeyEvent, !isActiveTab);
 
+  const hasChanges = useMemo(() => {
+    return (
+      !isFileInContext ||
+      JSON.stringify(initialRanges) !== JSON.stringify(selectedLines)
+    );
+  }, [isFileInContext, initialRanges, selectedLines]);
+
+  useEffect(() => {
+    setIsChangeUnsaved(hasChanges);
+  }, [hasChanges]);
+
   return (
     <div className="flex flex-col w-full flex-1 overflow-auto relative">
       <div className="flex gap-1 px-8 justify-between items-center border-b border-bg-border bg-bg-shade shadow-low h-11.5 flex-shrink-0">

diff --git a/client/src/pages/StudioTab/RightPanel/Conversation/index.tsx b/client/src/pages/StudioTab/RightPanel/Conversation/index.tsx
@@ -38,6 +38,7 @@ type Props = {
   isTokenLimitExceeded: boolean;
   isPreviewing: boolean;
   isActiveTab: boolean;
+  isChangeUnsaved: boolean;
   handleRestore: () => void;
 };
 
@@ -70,6 +71,7 @@ const Conversation = ({
   handleRestore,
   isActiveTab,
   refetchCodeStudio,
+  isChangeUnsaved,
 }: Props) => {
   const { t } = useTranslation();
   const { inputValue } = useContext(StudioContext.Input);
@@ -339,7 +341,12 @@ const Conversation = ({
         if (isPreviewing) {
           handleRestore();
         } else {
-          if (inputValue && !isTokenLimitExceeded && requestsLeft) {
+          if (
+            inputValue &&
+            !isTokenLimitExceeded &&
+            requestsLeft &&
+            !isChangeUnsaved
+          ) {
             onSubmit();
           } else if (!requestsLeft) {
             setUpgradePopupOpen(true);
@@ -352,7 +359,7 @@ const Conversation = ({
         handleCancel();
       }
     },
-    [onSubmit, isLoading, setLeftPanel, isPreviewing],
+    [onSubmit, isLoading, setLeftPanel, isPreviewing, isChangeUnsaved],
   );
   useKeyboardNavigation(handleKeyEvent, !isActiveTab);
 
@@ -434,23 +441,32 @@ const Conversation = ({
               ) : (
                 <Button
                   size="small"
-                  disabled={!inputValue || isTokenLimitExceeded}
+                  disabled={
+                    !inputValue || isTokenLimitExceeded || isChangeUnsaved
+                  }
+                  title={
+                    isChangeUnsaved
+                      ? t('Save context changes before answer generation')
+                      : isTokenLimitExceeded
+                      ? t('Token limit exceeded')
+                      : undefined
+                  }
                   onClick={onSubmit}
                 >
                   <Trans>Generate</Trans>
                   <div className="flex items-center gap-1 flex-shrink-0">
                     <KeyboardChip
                       type="cmd"
                       variant={
-                        !inputValue || isTokenLimitExceeded
+                        !inputValue || isTokenLimitExceeded || isChangeUnsaved
                           ? 'secondary'
                           : 'primary'
                       }
                     />
                     <KeyboardChip
                       type="entr"
                       variant={
-                        !inputValue || isTokenLimitExceeded
+                        !inputValue || isTokenLimitExceeded || isChangeUnsaved
                           ? 'secondary'
                           : 'primary'
                       }

diff --git a/client/src/pages/StudioTab/RightPanel/index.tsx b/client/src/pages/StudioTab/RightPanel/index.tsx
@@ -17,6 +17,7 @@ type Props = {
   isPreviewing: boolean;
   hasContextError: boolean;
   isActiveTab: boolean;
+  isChangeUnsaved: boolean;
 };
 
 const RightPanel = ({
@@ -30,6 +31,7 @@ const RightPanel = ({
   handleRestore,
   hasContextError,
   isActiveTab,
+  isChangeUnsaved,
 }: Props) => {
   useTranslation();
   return (
@@ -64,6 +66,7 @@ const RightPanel = ({
         isPreviewing={isPreviewing}
         handleRestore={handleRestore}
         isActiveTab={isActiveTab}
+        isChangeUnsaved={isChangeUnsaved}
       />
     </>
   );