Completed agent functionality - recognition of all documents on canvas

1 files changed, 27 insertions, 2 deletions

diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index 732c4d637..195e85412 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -49,6 +49,8 @@ import { AgentDocumentManager } from '../utils/AgentDocumentManager';
 import { AiOutlineSend } from 'react-icons/ai';
 import { SnappingManager } from '../../../../util/SnappingManager';
 import { Button, Size, Type } from '@dash/components';
+import { MdLink, MdViewModule } from 'react-icons/md';
+import { Tooltip } from '@mui/material';
 
 dotenv.config();
 
@@ -105,6 +107,12 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._inputValue = input;
     });
 
+    @action
+    toggleCanvasMode = () => {
+        const newMode = !this.docManager.getCanvasMode();
+        this.docManager.setCanvasMode(newMode);
+    };
+
     /**
      * Constructor initializes the component, sets up OpenAI, vector store, and agent instances,
      * and observes changes in the chat history to save the state in dataDoc.
@@ -1438,8 +1446,25 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 )}
                 <div className="chat-header">
                     <h2>{this.userName()}&apos;s AI Assistant</h2>
-                    <div className="font-size-control" onClick={this.toggleFontSizeModal}>
-                        {this.renderFontSizeIcon()}
+                    <div className="header-controls">
+                        <Tooltip title={
+                            <div className="dash-tooltip">
+                                {this.docManager.getCanvasMode() 
+                                    ? "Click to limit scope to linked documents"
+                                    : "Click to expand scope to all documents on canvas"
+                                }
+                            </div>
+                        } placement="bottom">
+                            <div 
+                                className={`canvas-mode-toggle ${this.docManager.getCanvasMode() ? 'canvas-active' : ''}`}
+                                onClick={this.toggleCanvasMode}
+                            >
+                                {this.docManager.getCanvasMode() ? <MdViewModule /> : <MdLink />}
+                            </div>
+                        </Tooltip>
+                        <div className="font-size-control" onClick={this.toggleFontSizeModal}>
+                            {this.renderFontSizeIcon()}
+                        </div>
                     </div>
                     {this._isFontSizeModalOpen && (
                         <div className="font-size-modal">