Catch non-existent files in studio functions (#944)

* Catch non-existent files in studio functions * handle context unavailable on the FE --------- Co-authored-by: anastasiia <[email protected]> Co-authored-by: Anastasiia Solop <[email protected]>
BloopAI · Sep 12, 2023 · 002b9ba · 002b9ba
1 parent a4dbfbb
commit 002b9ba
Show file tree

Hide file tree

Showing 16 changed files with 327 additions and 284 deletions.
diff --git a/client/src/icons/WarningSign.tsx b/client/src/icons/WarningSign.tsx
@@ -0,0 +1,31 @@
+import IconWrapper from './Wrapper';
+
+const RawIcon = (
+  <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.83975 2.88134C8.80444 1.22758 11.1939 1.22758 12.1586 2.88134L18.0069 12.907C18.9791 14.5736 17.7769 16.6666 15.8475 16.6666H4.15092C2.22145 16.6666 1.01927 14.5736 1.99147 12.907L7.83975 2.88134ZM10 6.66666C10.4603 6.66666 10.8334 7.03975 10.8334 7.49999V9.99999C10.8334 10.4602 10.4603 10.8333 10 10.8333C9.53978 10.8333 9.16669 10.4602 9.16669 9.99999V7.49999C9.16669 7.03975 9.53978 6.66666 10 6.66666ZM8.95835 12.5C8.95835 11.9247 9.42472 11.4583 10 11.4583C10.5753 11.4583 11.0417 11.9247 11.0417 12.5C11.0417 13.0753 10.5753 13.5417 10 13.5417C9.42472 13.5417 8.95835 13.0753 8.95835 12.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const BoxedIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.83975 2.88134C8.80444 1.22758 11.1939 1.22758 12.1586 2.88134L18.0069 12.907C18.9791 14.5736 17.7769 16.6666 15.8475 16.6666H4.15092C2.22145 16.6666 1.01927 14.5736 1.99147 12.907L7.83975 2.88134ZM10 6.66666C10.4603 6.66666 10.8334 7.03975 10.8334 7.49999V9.99999C10.8334 10.4602 10.4603 10.8333 10 10.8333C9.53978 10.8333 9.16669 10.4602 9.16669 9.99999V7.49999C9.16669 7.03975 9.53978 6.66666 10 6.66666ZM8.95835 12.5C8.95835 11.9247 9.42472 11.4583 10 11.4583C10.5753 11.4583 11.0417 11.9247 11.0417 12.5C11.0417 13.0753 10.5753 13.5417 10 13.5417C9.42472 13.5417 8.95835 13.0753 8.95835 12.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default IconWrapper(RawIcon, BoxedIcon);
diff --git a/client/src/icons/index.ts b/client/src/icons/index.ts
@@ -128,3 +128,4 @@ export { default as MinusSignInCircle } from './MinusSignInCircle';
 export { default as Pen } from './Pen';
 export { default as TemplateAdd } from './TemplateAdd';
 export { default as Card } from './Card';
+export { default as WarningSign } from './WarningSign';
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
@@ -355,5 +355,6 @@
 	"Manage subscription": "Manage subscription",
 	"Usage resets in": "Usage resets in",
 	"You've run out of free usage for today, please wait for your quota to reset or upgrade for unlimited usage": "You've run out of free usage for today, please wait for your quota to reset or upgrade for unlimited usage",
+	"This file is currently unavailable. Ability to generate will be resumed as soon as this issue is resolved.": "This file is currently unavailable. Ability to generate will be resumed as soon as this issue is resolved.",
 	"Search code studio...": "Search code studio..."
 }
diff --git a/client/src/locales/es.json b/client/src/locales/es.json
@@ -355,5 +355,6 @@
 	"Your quota resets every 24 hours, upgrade for unlimited uses": "Tu cuota se restablece cada 24 horas, actualiza para solicitudes ilimitadas",
 	"Manage subscription": "Administrar suscripción",
 	"Usage resets in": "Restablecimiento de uso en",
+	"This file is currently unavailable. Ability to generate will be resumed as soon as this issue is resolved.": "Este archivo no está disponible actualmente. La capacidad de generar se reanudará tan pronto como se resuelva este problema.",
 	"Search code studio...": "Código de búsqueda Studio ..."
 }
diff --git a/client/src/locales/ja.json b/client/src/locales/ja.json
@@ -353,5 +353,6 @@
 	"Your quota resets every 24 hours, upgrade for unlimited uses": "あなたのクオータは24時間ごとにリセットされます、無制限のリクエストにアップグレードしてください",
 	"Manage subscription": "サブスクリプションを管理します",
 	"You've run out of free usage for today, please wait for your quota to reset or upgrade for unlimited usage": "今日は無料の使用法がなくなっています。クォータがリセットまたはアップグレードされるのを待ってください。",
+	"This file is currently unavailable. Ability to generate will be resumed as soon as this issue is resolved.": "このファイルは現在利用できません。 生成能力は、この問題が解決されるとすぐに再開されます。",
 	"Search code studio...": "コードスタジオを検索..."
-}
+}
diff --git a/client/src/locales/zh-CN.json b/client/src/locales/zh-CN.json
@@ -361,5 +361,6 @@
 	"Your quota resets every 24 hours, upgrade for unlimited uses": "您的配额每24小时重置一次，升级以获得无限请求",
 	"Manage subscription": "管理订阅",
 	"You've run out of free usage for today, please wait for your quota to reset or upgrade for unlimited usage": "您今天的免费使用时间用完了，请等待您的配额重置或升级无限制",
+	"This file is currently unavailable. Ability to generate will be resumed as soon as this issue is resolved.": "此文件当前不可用。 一旦解决此问题，就会恢复产生的能力。",
 	"Search code studio...": "搜索代码工作室..."
 }
diff --git a/client/src/pages/HomeTab/CodeStudiosSection/CodeStudioCard.tsx b/client/src/pages/HomeTab/CodeStudiosSection/CodeStudioCard.tsx
@@ -26,7 +26,6 @@ type Props = {
   refetchStudios: () => void;
   most_common_ext: string;
   handleRename: () => void;
-  showCodeStudioIndexingPopup: () => void;
   isIndexing: boolean;
 };
 
@@ -38,20 +37,15 @@ const CodeStudioCard = ({
   most_common_ext,
   handleRename,
   isIndexing,
-  showCodeStudioIndexingPopup,
 }: Props) => {
   const { t } = useTranslation();
   const { locale } = useContext(LocaleContext);
   const { handleAddStudioTab, handleRemoveTab } = useContext(TabsContext);
   const { refetchQuota } = useContext(PersonalQuotaContext.Handlers);
 
   const handleClick = useCallback(() => {
-    if (!isIndexing) {
-      handleAddStudioTab(name, id);
-      refetchQuota();
-    } else {
-      showCodeStudioIndexingPopup();
-    }
+    handleAddStudioTab(name, id);
+    refetchQuota();
   }, [name, handleAddStudioTab, isIndexing, refetchQuota]);
 
   const dropdownItems = useMemo(() => {

diff --git a/client/src/pages/HomeTab/CodeStudiosSection/index.tsx b/client/src/pages/HomeTab/CodeStudiosSection/index.tsx
@@ -10,7 +10,6 @@ type Props = {
   isFiltered?: boolean;
   showAll: () => void;
   refetchStudios: () => void;
-  showCodeStudioIndexingPopup: () => void;
   handleRename: (studio: CodeStudioShortType) => void;
   repositories?: RepoType[];
 };
@@ -25,7 +24,6 @@ const CodeStudiosSection = ({
   refetchStudios,
   handleRename,
   repositories,
-  showCodeStudioIndexingPopup,
 }: Props) => {
   return (
     <div className="p-8 overflow-x-auto relative">
@@ -42,7 +40,6 @@ const CodeStudiosSection = ({
               {...cs}
               refetchStudios={refetchStudios}
               handleRename={() => handleRename(cs)}
-              showCodeStudioIndexingPopup={showCodeStudioIndexingPopup}
               isIndexing={
                 !!repositories?.find(
                   (r) =>

diff --git a/client/src/pages/HomeTab/Content.tsx b/client/src/pages/HomeTab/Content.tsx
@@ -105,10 +105,6 @@ const HomePage = ({ randomKey }: { randomKey?: any }) => {
     setAddReposOpen('studio');
   }, []);
 
-  const showCodeStudioIndexingPopup = useCallback(() => {
-    setPopupOpen('studio');
-  }, []);
-
   return (
     <PageTemplate renderPage="home">
       <div className="w-full flex flex-col mx-auto max-w-6.5xl">
@@ -145,7 +141,6 @@ const HomePage = ({ randomKey }: { randomKey?: any }) => {
               refetchStudios={refreshCodeStudios}
               handleRename={handleRename}
               repositories={repositories}
-              showCodeStudioIndexingPopup={showCodeStudioIndexingPopup}
             />
           )}
           {!!search &&

diff --git a/client/src/pages/StudioTab/Content.tsx b/client/src/pages/StudioTab/Content.tsx
@@ -307,6 +307,9 @@ const ContentContainer = ({
                   setIsHistoryOpen={setIsHistoryOpen}
                   isPreviewing={!!previewingState}
                   handleRestore={handleRestore}
+                  hasContextError={stateToShow.token_counts?.per_file?.includes(
+                    null,
+                  )}
                   isActiveTab={isActive}
                 />
               ) : rightPanel.type === StudioRightPanelType.FILE ? (

diff --git a/client/src/pages/StudioTab/ContextPanel/ContextFileRow.tsx b/client/src/pages/StudioTab/ContextPanel/ContextFileRow.tsx
@@ -16,15 +16,21 @@ import FileIcon from '../../../components/FileIcon';
 import LinesBadge from '../LinesBadge';
 import TokensUsageBadge from '../TokensUsageBadge';
 import Button from '../../../components/Button';
-import { EyeCut, Eye, TrashCanFilled, PlusSignInBubble } from '../../../icons';
+import {
+  EyeCut,
+  Eye,
+  TrashCanFilled,
+  PlusSignInBubble,
+  WarningSign,
+} from '../../../icons';
 import Tooltip from '../../../components/Tooltip';
 import RelatedFilesDropdown from '../RelatedFilesDropdown';
 
 type Props = StudioContextFile & {
   contextFiles: StudioContextFile[];
   setRightPanel: Dispatch<SetStateAction<StudioRightPanelDataType>>;
   repoFull?: RepoType;
-  tokens: number;
+  tokens: number | null;
   onFileHide: (
     path: string,
     repo: string,
@@ -87,10 +93,34 @@ const ContextFileRow = ({
       className="w-full overflow-x-auto border-b border-bg-base bg-bg-sub group cursor-pointer flex-shrink-0 select-none"
       onClick={handleClick}
     >
-      <div className={`max-w-full flex gap-3 items-center py-3 px-8`}>
-        <div className="rounded bg-bg-base">
-          <FileIcon filename={path} noMargin />
-        </div>
+      <div className={`max-w-full flex gap-2 items-center py-3 px-8`}>
+        {tokens === null ? (
+          <Tooltip
+            text={
+              <div className="max-w-xs text-left">
+                {t(
+                  'This file is currently unavailable. Ability to generate will be resumed as soon as this issue is resolved.',
+                )}
+              </div>
+            }
+            placement={'top'}
+          >
+            <div
+              className={`rounded flex items-center justify-center p-1 bg-warning-100 relative`}
+            >
+              <FileIcon filename={path} noMargin />
+              <div className="absolute -bottom-3 -right-2 text-warning-300">
+                <WarningSign raw sizeClassName="w-3.5 h-3.5" />
+              </div>
+            </div>
+          </Tooltip>
+        ) : (
+          <div
+            className={`rounded flex items-center justify-center p-1 bg-bg-base`}
+          >
+            <FileIcon filename={path} noMargin />
+          </div>
+        )}
         <div className="flex items-center gap-2 flex-1">
           <p
             className={`body-s-strong text-label-title ellipsis ${
@@ -111,11 +141,13 @@ const ContextFileRow = ({
           {/*  branch={branch}*/}
           {/*/>*/}
         </div>
-        <div className="w-16 flex items-center flex-shrink-0">
-          <TokensUsageBadge tokens={tokens} />
-        </div>
+        {tokens !== null && (
+          <div className="w-16 flex items-center flex-shrink-0">
+            <TokensUsageBadge tokens={tokens} />
+          </div>
+        )}
         <div onClick={(e) => e.stopPropagation()}>
-          {repoFull && !isPreviewing && (
+          {repoFull && !isPreviewing && tokens !== null && (
             <RelatedFilesDropdown
               selectedFiles={contextFiles}
               onFileAdded={onFileAdded}
@@ -144,25 +176,27 @@ const ContextFileRow = ({
         </div>
         {!isPreviewing && (
           <>
-            <Button
-              variant="tertiary"
-              size="tiny"
-              onlyIcon
-              title={hidden ? t('Show file') : t('Hide file')}
-              className={
-                'opacity-50 group-hover:opacity-100 group-focus:opacity-100'
-              }
-              onClick={(e) => {
-                e.stopPropagation();
-                onFileHide(path, repo, branch, !hidden);
-              }}
-            >
-              {hidden ? (
-                <EyeCut raw sizeClassName="w-3.5 h-3.5" />
-              ) : (
-                <Eye raw sizeClassName="w-3.5 h-3.5" />
-              )}
-            </Button>
+            {tokens !== null && (
+              <Button
+                variant="tertiary"
+                size="tiny"
+                onlyIcon
+                title={hidden ? t('Show file') : t('Hide file')}
+                className={
+                  'opacity-50 group-hover:opacity-100 group-focus:opacity-100'
+                }
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onFileHide(path, repo, branch, !hidden);
+                }}
+              >
+                {hidden ? (
+                  <EyeCut raw sizeClassName="w-3.5 h-3.5" />
+                ) : (
+                  <Eye raw sizeClassName="w-3.5 h-3.5" />
+                )}
+              </Button>
+            )}
             <Button
               variant="tertiary"
               size="tiny"

diff --git a/client/src/pages/StudioTab/ContextPanel/index.tsx b/client/src/pages/StudioTab/ContextPanel/index.tsx
@@ -24,7 +24,7 @@ type Props = {
   setAddContextOpen: Dispatch<SetStateAction<boolean>>;
   studioId: string;
   contextFiles: StudioContextFile[];
-  tokensPerFile: number[];
+  tokensPerFile: (number | null)[];
   onFileRemove: (
     f:
       | { path: string; repo: string; branch: string | null }

diff --git a/client/src/pages/StudioTab/RightPanel/index.tsx b/client/src/pages/StudioTab/RightPanel/index.tsx
@@ -15,6 +15,7 @@ type Props = {
   refetchCodeStudio: () => Promise<void>;
   handleRestore: () => void;
   isPreviewing: boolean;
+  hasContextError: boolean;
   isActiveTab: boolean;
 };
 
@@ -27,6 +28,7 @@ const RightPanel = ({
   setIsHistoryOpen,
   isPreviewing,
   handleRestore,
+  hasContextError,
   isActiveTab,
 }: Props) => {
   useTranslation();
@@ -57,7 +59,7 @@ const RightPanel = ({
         studioId={studioId}
         messages={messages}
         refetchCodeStudio={refetchCodeStudio}
-        isTokenLimitExceeded={tokensTotal > TOKEN_LIMIT}
+        isTokenLimitExceeded={tokensTotal > TOKEN_LIMIT || hasContextError}
         setIsHistoryOpen={setIsHistoryOpen}
         isPreviewing={isPreviewing}
         handleRestore={handleRestore}

diff --git a/client/src/types/api.ts b/client/src/types/api.ts
@@ -262,7 +262,11 @@ export type CodeStudioType = {
   modified_at: string;
   messages: CodeStudioMessageType[];
   context: StudioContextFile[];
-  token_counts: { total: number; per_file: []; messages: number };
+  token_counts: {
+    total: number;
+    per_file: (number | null)[];
+    messages: number;
+  };
 };
 
 export interface SuggestionsResponse {

diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
@@ -47,6 +47,8 @@ module.exports = {
         "bg-highlight": "rgb(var(--bg-highlight))",
         "bg-highlight/25": "rgba(var(--bg-highlight), 0.25)",
         "danger-300": "#FB7185",
+        "warning-100": "#F0A892",
+        "warning-300": "#ED6E47",
         sky: '#0EA4E9',
         violet: '#8B5CF6',
         pink: '#EC4899',