From 8ff34d5335093c4ff85473227f39b3e83133d999 Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Tue, 22 Jul 2025 13:44:08 -0400
Subject: Completed agent functionality - recognition of all documents on
 canvas

---
 .../nodes/chatbot/chatboxcomponents/ChatBox.scss   | 33 ++++++++++++++++++++++
 .../nodes/chatbot/chatboxcomponents/ChatBox.tsx    | 29 +++++++++++++++++--
 2 files changed, 60 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes/chatbot/chatboxcomponents')

diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
index 0bacc70c2..f6d340360 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -58,6 +58,13 @@ $font-size-xlarge: 18px;
             text-align: center;
         }
 
+        .header-controls {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .canvas-mode-toggle,
         .font-size-control {
             display: flex;
             align-items: center;
@@ -79,6 +86,32 @@ $font-size-xlarge: 18px;
             }
         }
 
+        .canvas-mode-toggle {
+            position: relative;
+            
+            // Visual indicator for active state
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: -2px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 4px;
+                height: 4px;
+                border-radius: 50%;
+                background-color: rgba(255, 255, 255, 0.7);
+                opacity: 0;
+                transition: opacity 0.2s ease;
+            }
+
+            // Show indicator when canvas mode is active
+            &.canvas-active::after {
+                opacity: 1;
+            }
+
+
+        }
+
         .font-size-modal {
             position: absolute;
             top: 100%;
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">
-- 
cgit v1.2.3-70-g09d2