feat: enhance upload file and warning.

marsiandeployer · Apr 10, 2023 · aefb520 · aefb520
1 parent 91ff626
commit aefb520
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 42 deletions.
diff --git a/chatfiles-ui/components/Chat/Chat.tsx b/chatfiles-ui/components/Chat/Chat.tsx
@@ -9,6 +9,8 @@ import {ChatMessage} from './ChatMessage';
 import {ErrorMessageDiv} from './ErrorMessageDiv';
 import {ModelSelect} from './ModelSelect';
 import {Upload} from "@/components/Chat/Upload";
+import {CHAT_FILES_MAX_SIZE} from "@/utils/app/const";
+import {humanFileSize} from "@/utils/app/files";
 
 interface Props {
   conversation: Conversation;
@@ -48,7 +50,7 @@ export const Chat: FC<Props> = memo(
     const [showSettings, setShowSettings] = useState<boolean>(false);
     const [isUploading, setIsUploading] = useState<boolean>(false);
     const [errorMsg, setErrorMsg] = useState<string>();
-    const [isUploadSuccess, setIsUploadSuccess] = useState(false);
+    const [isUploadSuccess, setIsUploadSuccess] = useState(true);
 
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const chatContainerRef = useRef<HTMLDivElement>(null);
@@ -148,6 +150,22 @@ export const Chat: FC<Props> = memo(
             >
               {(conversation.index?.indexName.length === 0) && (conversation.messages.length === 0) ? (
                 <>
+                  {!isUploadSuccess ? (
+                      <>
+                        <div id="alert-2" className="flex p-4 mb-4 text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
+                          <svg aria-hidden="true" className="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd"></path></svg>
+                          <span className="sr-only">Error</span>
+                          <div className="ml-3 text-sm font-medium">
+                            {errorMsg}.
+                          </div>
+                          <button type="button" onClick={() => handleIsUploadSuccess(true)} className="ml-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-2" aria-label="Close">
+                            <span className="sr-only">Close</span>
+                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
+                          </button>
+                        </div>
+                      </>
+                  ): undefined}
+
                   <div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
                     <div className="flex h-full flex-col space-y-4 rounded border border-neutral-200 p-4 dark:border-neutral-600">
                       <Upload onIndexChange={(index) =>
@@ -158,6 +176,14 @@ export const Chat: FC<Props> = memo(
                           handleIsUploadSuccess={handleIsUploadSuccess}
                           handleUploadError={handleUploadError}
                           />
+                      {CHAT_FILES_MAX_SIZE != 0 &&
+                          <>
+                            <p className="mt-2 px-8 text-xs text-gray-500 dark:text-gray-400">This environment is only for trial and supports a maximum file size of {humanFileSize(CHAT_FILES_MAX_SIZE)}.</p>
+                            <p className="mt-2 px-8 text-xs text-gray-500 dark:text-gray-400">If you need to upload larger files, please deploy your own chatfiles by:
+                              <a className="text-xs text-gray-500 dark:text-gray-400 underline" href="https://github.com/guangzhengli/ChatFiles"> Chatfiles </a>
+                            </p>
+                          </>
+                      }
                     </div>
                   </div>
                   {isUploading ? (
@@ -177,21 +203,6 @@ export const Chat: FC<Props> = memo(
                         </div>
                       </>
                   ): undefined}
-                  {isUploadSuccess ? (
-                      <>
-                        <div id="alert-2" className="flex p-4 mb-4 text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-                          <svg aria-hidden="true" className="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
-                          <span className="sr-only">Error</span>
-                          <div className="ml-3 text-sm font-medium">
-                            ${errorMsg}.
-                          </div>
-                          <button type="button" className="ml-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-2" aria-label="Close">
-                            <span className="sr-only">Close</span>
-                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                          </button>
-                        </div>
-                      </>
-                  ): undefined}
                 </>
               ) : (
                 <>

diff --git a/chatfiles-ui/components/Chat/ChatInput.tsx b/chatfiles-ui/components/Chat/ChatInput.tsx
@@ -155,6 +155,20 @@ export const ChatInput: FC<Props> = ({
           </button>
         </div>
       </div>
+      <div className="px-3 pt-2 pb-3 text-center text-[12px] text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
+        <a
+            href="https://github.com/guangzhengli/ChatFiles"
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+        >
+          ChatFiles
+        </a>
+        {' '}
+        {t(
+            "aims to establish embeddings for ChatGPT and facilitate its ability to engage in document-based conversations.",
+        )}
+      </div>
     </div>
   );
 };
diff --git a/chatfiles-ui/components/Chat/Upload.tsx b/chatfiles-ui/components/Chat/Upload.tsx
@@ -1,10 +1,11 @@
 import {LlamaIndex} from "@/types";
 import { CHAT_FILES_MAX_SIZE } from "@/utils/app/const";
+import {humanFileSize} from "@/utils/app/files";
 
 interface Props {
     onIndexChange: (index: LlamaIndex) => void;
     handleIsUploading: (isUploading: boolean) => void;
-    handleIsUploadSuccess: (isUploading: boolean) => void;
+    handleIsUploadSuccess: (isUploadSuccess: boolean) => void;
     handleUploadError: (error: string) => void;
 }
 export const Upload = ({onIndexChange, handleIsUploading, handleIsUploadSuccess, handleUploadError}: Props) => {
@@ -49,16 +50,6 @@ export const Upload = ({onIndexChange, handleIsUploading, handleIsUploadSuccess,
         }
         return true;
       };
-
-      function humanFileSize(size: number): string {
-        const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-        let i = 0;
-        while (size >= 1024 && i < units.length - 1) {
-          size /= 1024;
-          i++;
-        }
-        return `${size.toFixed(2)} ${units[i]}`;
-      }
 
     return (
         <div className="flex items-center justify-center w-full">
@@ -72,7 +63,7 @@ export const Upload = ({onIndexChange, handleIsUploading, handleIsUploadSuccess,
                     </svg>
                     <p className="mb-2 text-sm text-gray-500 dark:text-gray-400"><span className="font-semibold">Click to upload</span> or
                         drag and drop</p>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">TXT, PDF, EPUB...</p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">File supported types: TXT, PDF, EPUB, Markdown...</p>
                 </div>
                 <input id="dropzone-file" type="file" className="hidden" onChange={(e) => {
                     if (e.target.files && e.target.files[0]) {

diff --git a/chatfiles-ui/utils/app/const.ts b/chatfiles-ui/utils/app/const.ts
@@ -8,17 +8,5 @@ export const CHAT_FILES_SERVER_HOST =
     process.env.CHAT_FILES_SERVER_HOST || 'http://127.0.0.1:5000';
 
 export const CHAT_FILES_MAX_SIZE =
-  getIntFromEnv('CHAT_FILES_MAX_SIZE', 0);
-
-function getIntFromEnv(name: string, defaultValue: number): number {
-  const value = process.env[name];
-  if (value === undefined) {
-    return defaultValue;
-  }
-  const parsedValue = parseInt(value, 10);
-  if (isNaN(parsedValue)) {
-    throw new Error(`Invalid value for environment variable ${name}: ${value}`);
-  }
-  return parsedValue;
-}
+    parseInt(process.env.NEXT_PUBLIC_CHAT_FILES_MAX_SIZE || '') || 0;
 
diff --git a/chatfiles-ui/utils/app/files.ts b/chatfiles-ui/utils/app/files.ts
@@ -0,0 +1,9 @@
+export const humanFileSize = (size: number): string => {
+    const units = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    let i = 0;
+    while (size >= 1024 && i < units.length - 1) {
+        size /= 1024;
+        i++;
+    }
+    return `${size.toFixed(0)} ${units[i]}`;
+}
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -15,6 +15,6 @@ services:
     environment:
       - OPENAI_API_KEY=${OPENAI_API_KEY}
       - CHAT_FILES_SERVER_HOST=http://chatfiles:5000
-      - CHAT_FILES_MAX_SIZE=0
+      - NEXT_PUBLIC_CHAT_FILES_MAX_SIZE=0
     depends_on:
       - chatfiles