Merge branch 'agent-paper-main' of https://github.com/brown-dash/Dash-Web into joanne-tutorialagent

5 files changed, 44 insertions, 111 deletions

diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
index 2d7e5c120..4a916e86c 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -50,7 +50,7 @@ $font-size-xlarge: 18px;
         position: relative;
 
         h2 {
-            margin: 0;
+            margin: 0px;
             font-size: 1.25rem;
             font-weight: 600;
             letter-spacing: 0.01em;
@@ -103,7 +103,7 @@ $font-size-xlarge: 18px;
                 margin-bottom: 4px;
 
                 &:last-child {
-                    margin-bottom: 0;
+                    margin-bottom: 0px;
                 }
 
                 &:hover {
@@ -191,8 +191,8 @@ $font-size-xlarge: 18px;
             content: '';
             position: absolute;
             top: -5px;
-            left: 0;
-            right: 0;
+            left: 0px;
+            right: 0px;
             height: 5px;
             background: linear-gradient(to top, rgba(0, 0, 0, 0.06), transparent);
             pointer-events: none;
@@ -457,11 +457,11 @@ $font-size-xlarge: 18px;
                 margin: 8px 0;
 
                 &:first-child {
-                    margin-top: 0;
+                    margin-top: 0px;
                 }
 
                 &:last-child {
-                    margin-bottom: 0;
+                    margin-bottom: 0px;
                 }
             }
 
@@ -521,8 +521,8 @@ $font-size-xlarge: 18px;
             border-bottom: 1px dashed #e5e7eb;
 
             &:last-child {
-                margin-bottom: 0;
-                padding-bottom: 0;
+                margin-bottom: 0px;
+                padding-bottom: 0px;
                 border-bottom: none;
             }
 
@@ -581,7 +581,7 @@ $font-size-xlarge: 18px;
 
     .message-content {
         background-color: inherit;
-        padding: 0;
+        padding: 0px;
         border-radius: 8px;
         font-size: 14px;
         line-height: 1.6;
@@ -679,7 +679,7 @@ $font-size-xlarge: 18px;
         }
 
         &:active {
-            background-color: darken($primary-light, 3%);
+            background-color: color.adjust($primary-light, $lightness: -3%);
         }
     }
 }
@@ -708,10 +708,10 @@ $font-size-xlarge: 18px;
 
 .uploading-overlay {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
     background-color: rgba(255, 255, 255, 0.92);
     display: flex;
     justify-content: center;
@@ -954,10 +954,10 @@ $font-size-xlarge: 18px;
 /* Tool Reload Modal Styles */
 .tool-reload-modal-overlay {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
@@ -969,7 +969,7 @@ $font-size-xlarge: 18px;
 .tool-reload-modal {
     background: white;
     border-radius: 12px;
-    padding: 0;
+    padding: 0px;
     min-width: 400px;
     max-width: 500px;
     box-shadow:
@@ -995,7 +995,7 @@ $font-size-xlarge: 18px;
     border-bottom: 1px solid #e2e8f0;
 
     h3 {
-        margin: 0;
+        margin: 0px;
         font-size: 18px;
         font-weight: 600;
         color: #1a202c;
@@ -1019,7 +1019,7 @@ $font-size-xlarge: 18px;
         color: #4a5568;
 
         &:last-child {
-            margin-bottom: 0;
+            margin-bottom: 0px;
         }
 
         strong {
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index 3f61d9ea6..19459b025 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -13,8 +13,8 @@ import OpenAI, { ClientOptions } from 'openai';
 import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { ClientUtils, OmitKeys } from '../../../../../ClientUtils';
-import { Doc, Opt } from '../../../../../fields/Doc';
-import { DocViews } from '../../../../../fields/DocSymbols';
+import { Doc, DocListCast, Opt } from '../../../../../fields/Doc';
+import { DocData, DocViews } from '../../../../../fields/DocSymbols';
 import { Id } from '../../../../../fields/FieldSymbols';
 import { RichTextField } from '../../../../../fields/RichTextField';
 import { ScriptField } from '../../../../../fields/ScriptField';
@@ -492,7 +492,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 case supportedDocTypes.image:      return Docs.Create.ImageDocument(data as string, options);
                 case supportedDocTypes.equation:   return Docs.Create.EquationDocument(data as string, options);
                 case supportedDocTypes.notetaking: return Docs.Create.NoteTakingDocument([], options);
-                case supportedDocTypes.web:        
+                case supportedDocTypes.web:       {
                     // Create web document with enhanced safety options
                     const webOptions = { 
                         ...options,
@@ -501,10 +501,11 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
                     // If iframe_sandbox was passed from AgentDocumentManager, add it to the options
                     if ('_iframe_sandbox' in options) {
-                        (webOptions as any)._iframe_sandbox = options._iframe_sandbox;
+                        webOptions._iframe_sandbox = options._iframe_sandbox;
                     }
 
                     return Docs.Create.WebDocument(data as string, webOptions);
+                }
                 case supportedDocTypes.dataviz:    return Docs.Create.DataVizDocument('/users/rz/Downloads/addresses.csv', options);
                 case supportedDocTypes.pdf:        return Docs.Create.PdfDocument(data as string, options);
                 case supportedDocTypes.video:      return Docs.Create.VideoDocument(data as string, options);
@@ -635,7 +636,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     handleCitationClick = async (citation: Citation) => {
         try {
             // Extract values from MobX proxy object if needed
-            const chunkId = typeof citation.chunk_id === 'object' ? (citation.chunk_id as any).toString() : citation.chunk_id;
+            const chunkId = typeof citation.chunk_id === 'object' ? (citation.chunk_id as unknown as object).toString() : citation.chunk_id;
 
             // For debugging
             console.log('Citation clicked:', {
@@ -677,7 +678,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 }
                 this.handleOtherChunkTypes(foundChunk, citation, doc, dataDoc);
                 // Show the chunk text in citation popup
-                let chunkText = citation.direct_text || 'Text content not available';
+                const chunkText = citation.direct_text || 'Text content not available';
                 this.showCitationPopup(chunkText);
 
                 // Also navigate to the document
@@ -836,14 +837,16 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 }
                 break;
             case CHUNK_TYPE.TEXT:
-                this._citationPopup = { text: citation.direct_text ?? 'No text available', visible: true };
-                this.startCitationPopupTimer();
+                {
+                    this._citationPopup = { text: citation.direct_text ?? 'No text available', visible: true };
+                    this.startCitationPopupTimer();
 
-                // Check if the document is a PDF (has a PDF viewer component)
-                const isPDF = PDFCast(dataDoc!.data) !== null || dataDoc!.type === DocumentType.PDF;
+                    // Check if the document is a PDF (has a PDF viewer component)
+                    const isPDF = PDFCast(dataDoc!.data) !== null || dataDoc!.type === DocumentType.PDF;
 
-                // First ensure document is fully visible before trying to access its views
-                this.ensureDocumentIsVisible(dataDoc!, isPDF, citation, foundChunk, doc);
+                    // First ensure document is fully visible before trying to access its views
+                    this.ensureDocumentIsVisible(dataDoc!, isPDF, citation, foundChunk, doc);
+                }
                 break;
             case CHUNK_TYPE.CSV:
             case CHUNK_TYPE.URL:
@@ -1160,6 +1163,9 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._inputValue = question;
     };
 
+    _dictation: DictationButton | null = null;
+    setInputRef = (r: HTMLInputElement) => (this._textInputRef = r);
+    setDictationRef = (r: DictationButton) => (this._dictation = r);
     /**
      * Handles tool creation notification and shows the reload modal
      * @param toolName The name of the tool that was created
@@ -1210,8 +1216,6 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }, 100);
     };
 
-    _dictation: DictationButton | null = null;
-
     /**
      * Toggles the font size modal visibility
      */
@@ -1440,9 +1444,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 <form onSubmit={this.askGPT} className="chat-input">
                     <div className="input-container">
                         <input
-                            ref={r => {
-                                this._textInputRef = r;
-                            }}
+                            ref={this.setInputRef}
                             type="text"
                             name="messageInput"
                             autoComplete="off"
@@ -1492,7 +1494,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                     The tool <strong>{this._toolReloadModal.toolName}</strong> has been created and saved successfully.
                                 </p>
                                 <p>To make the tool available for future use, the page needs to be reloaded to rebuild the application bundle.</p>
-                                <p>Click "Reload Page" to complete the tool installation.</p>
+                                <p>Click &quot;Reload Page&quot; to complete the tool installation.</p>
                             </div>
                             <div className="tool-reload-modal-actions">
                                 <button className="reload-button primary" onClick={this.handleReloadConfirmation}>
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.scss
deleted file mode 100644
index 77d452830..000000000
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.spinner-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-}
-
-.spinner {
-    width: 60px;
-    height: 60px;
-    position: relative;
-    margin-bottom: 20px; // Space between spinner and text
-}
-
-.double-bounce1,
-.double-bounce2 {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: #4a90e2;
-    opacity: 0.6;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    animation: bounce 2s infinite ease-in-out;
-}
-
-.double-bounce2 {
-    animation-delay: -1s;
-}
-
-@keyframes bounce {
-    0%,
-    100% {
-        transform: scale(0);
-    }
-    50% {
-        transform: scale(1);
-    }
-}
-
-.uploading-overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    background-color: rgba(255, 255, 255, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.progress-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.step-name {
-    font-size: 18px;
-    color: #333;
-    text-align: center;
-    width: 100%;
-    margin-top: -10px; // Adjust to move the text closer to the spinner
-}
diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss
index 1b2f76bbe..3ef3c2cef 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.scss
+++ b/src/client/views/nodes/formattedText/DashFieldView.scss
@@ -53,7 +53,7 @@
 .dashFieldView,
 .dashFieldView-active {
     .dashFieldView-select {
-        height: 10p;
+        height: 100%;
         font-size: 12px;
         background: transparent;
         opacity: 0;
@@ -61,7 +61,7 @@
     }
 }
 
-.dashFieldView {
+.dashFieldView-active {
     &:hover {
         .dashFieldView-select {
             opacity: unset;
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index d700a705a..6e3bdc5e8 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -263,7 +263,7 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
         return (
             <div
                 // eslint-disable-next-line no-use-before-define
-                className={`${DashFieldView.name}${this.isRowActive() ? '-active' : ''}`}
+                className={`dashFieldView${this.isRowActive() ? '-active' : ''}`}
                 ref={this._fieldRef}
                 style={{
                     // width: this._props.width,