added loading animation

1 files changed, 11 insertions, 17 deletions

diff --git a/src/client/views/nodes/ChatBox/ChatBox.tsx b/src/client/views/nodes/ChatBox/ChatBox.tsx
index 7e238e28b..fdc0e3a17 100644
--- a/src/client/views/nodes/ChatBox/ChatBox.tsx
+++ b/src/client/views/nodes/ChatBox/ChatBox.tsx
@@ -33,13 +33,13 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable.deep current_message: AssistantMessage | undefined = undefined;
 
     @observable isLoading: boolean = false;
-    @observable isUploadingDocs: boolean = false;
     @observable uploadProgress: number = 0; // Track progress percentage
     @observable currentStep: string = ''; // Track current step name
     @observable expandedScratchpadIndex: number | null = null;
     @observable inputValue: string = '';
     @observable private linked_docs_to_add: ObservableSet<Doc> = observable.set();
     @observable private linked_csv_files: { filename: string; id: string; text: string }[] = [];
+    @observable private isUploadingDocs: boolean = false;
     private openai: OpenAI;
     private vectorstore_id: string;
     private vectorstore: Vectorstore;
@@ -76,21 +76,25 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     addDocToVectorstore = async (newLinkedDoc: Doc) => {
-        this.isUploadingDocs = true;
         this.uploadProgress = 0;
         this.currentStep = 'Initializing...';
+        this.isUploadingDocs = true;
 
-        await this.vectorstore.addAIDoc(newLinkedDoc, this.updateProgress);
-
-        runInAction(() => {
+        try {
+            await this.vectorstore.addAIDoc(newLinkedDoc, this.updateProgress);
+        } catch (error) {
+            console.error('Error uploading document:', error);
+            this.currentStep = 'Error during upload';
+        } finally {
             this.isUploadingDocs = false;
             this.uploadProgress = 0;
             this.currentStep = '';
-        });
+        }
     };
 
     @action
     updateProgress = (progress: number, step: string) => {
+        console.log('Progress:', progress, step);
         this.uploadProgress = progress;
         this.currentStep = step;
     };
@@ -394,17 +398,11 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         observe(this.linked_docs_to_add, change => {
             if (change.type === 'add') {
-                runInAction(() => {
-                    this.isUploadingDocs = true;
-                });
                 if (PDFCast(change.newValue.data)) {
                     this.addDocToVectorstore(change.newValue);
                 } else if (CsvCast(change.newValue.data)) {
                     this.addCSVForAnalysis(change.newValue);
                 }
-                runInAction(() => {
-                    this.isUploadingDocs = false;
-                });
             } else if (change.type === 'delete') {
                 console.log('Deleted docs: ', change.oldValue);
             }
@@ -495,6 +493,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         console.log('Follow-up question clicked:', question);
         this.inputValue = question;
     };
+
     render() {
         return (
             <div className="chat-box">
@@ -506,11 +505,6 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         </div>
                     </div>
                 )}
-                {this.isUploadingDocs && (
-                    <div className="uploading-overlay">
-                        <div className="spinner"></div>
-                    </div>
-                )}
                 <div className="chat-header">
                     <h2>{this.userName()}'s AI Assistant</h2>
                 </div>