1 files changed, 28 insertions, 1 deletions
diff --git a/src/client/views/nodes/ChatBox/ChatBox.tsx b/src/client/views/nodes/ChatBox/ChatBox.tsx
index 345bfd8d1..7e238e28b 100644
--- a/src/client/views/nodes/ChatBox/ChatBox.tsx
+++ b/src/client/views/nodes/ChatBox/ChatBox.tsx
@@ -23,6 +23,7 @@ import { chunk } from 'lodash';
 import { DocUtils } from '../../../documents/DocUtils';
 import { createRef } from 'react';
 import { ClientUtils } from '../../../../ClientUtils';
+import { ProgressBar } from './ProgressBar';
 
 dotenv.config();
 
@@ -33,6 +34,8 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @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();
@@ -73,7 +76,23 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     addDocToVectorstore = async (newLinkedDoc: Doc) => {
-        await this.vectorstore.addAIDoc(newLinkedDoc);
+        this.isUploadingDocs = true;
+        this.uploadProgress = 0;
+        this.currentStep = 'Initializing...';
+
+        await this.vectorstore.addAIDoc(newLinkedDoc, this.updateProgress);
+
+        runInAction(() => {
+            this.isUploadingDocs = false;
+            this.uploadProgress = 0;
+            this.currentStep = '';
+        });
+    };
+
+    @action
+    updateProgress = (progress: number, step: string) => {
+        this.uploadProgress = progress;
+        this.currentStep = step;
     };
 
     @action
@@ -481,6 +500,14 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             <div className="chat-box">
                 {this.isUploadingDocs && (
                     <div className="uploading-overlay">
+                        <div className="progress-container">
+                            <ProgressBar progress={this.uploadProgress} />
+                            <div className="step-name">{this.currentStep}</div>
+                        </div>
+                    </div>
+                )}
+                {this.isUploadingDocs && (
+                    <div className="uploading-overlay">
                         <div className="spinner"></div>
                     </div>
                 )}