fixed dropping image onto image boxes. re-enabled rag tool

4 files changed, 45 insertions, 24 deletions

diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index fe4f0b1a2..59e093683 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -40,7 +40,7 @@
     max-height: 100%;
     pointer-events: inherit;
     background: transparent;
-    z-index: -10000;
+    // z-index: -10000; // bcz: not sure why this was here.  it broke dropping images on the image box alternate bullseye icon.
 
     img {
         height: auto;
@@ -129,7 +129,12 @@
     right: 0;
     bottom: 0;
     z-index: 2;
+    transform-origin: bottom right;
     cursor: default;
+    > svg {
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .imageBox-fader img {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 697577955..ff6baf199 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,11 +1,12 @@
+import { Button, Colors, Size, Type } from '@dash/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Slider, Tooltip } from '@mui/material';
 import axios from 'axios';
-import { Colors, Button, Type, Size } from '@dash/components';
 import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
+import { AiOutlineSend } from 'react-icons/ai';
 import ReactLoading from 'react-loading';
 import { ClientUtils, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
@@ -16,12 +17,14 @@ import { ObjectField } from '../../../fields/ObjectField';
 import { Cast, DocCast, ImageCast, NumCast, RTFCast, StrCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
+import { Upload } from '../../../server/SharedMediaTypes';
 import { emptyFunction } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DocUtils, FollowLinkScript } from '../../documents/DocUtils';
 import { Networking } from '../../Network';
 import { DragManager } from '../../util/DragManager';
+import { SettingsManager } from '../../util/SettingsManager';
 import { SnappingManager } from '../../util/SnappingManager';
 import { undoable, undoBatch } from '../../util/UndoManager';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
@@ -32,6 +35,9 @@ import { MarqueeAnnotator } from '../MarqueeAnnotator';
 import { OverlayView } from '../OverlayView';
 import { AnchorMenu } from '../pdf/AnchorMenu';
 import { PinDocView, PinProps } from '../PinFuncs';
+import { DrawingFillHandler } from '../smartdraw/DrawingFillHandler';
+import { FireflyImageData } from '../smartdraw/FireflyConstants';
+import { SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
 import { StickerPalette } from '../smartdraw/StickerPalette';
 import { StyleProp } from '../StyleProp';
 import { DocumentView } from './DocumentView';
@@ -39,12 +45,6 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
 import { OpenWhere } from './OpenWhere';
-import { Upload } from '../../../server/SharedMediaTypes';
-import { SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
-import { SettingsManager } from '../../util/SettingsManager';
-import { AiOutlineSend } from 'react-icons/ai';
-import { FireflyImageData } from '../smartdraw/FireflyConstants';
-import { DrawingFillHandler } from '../smartdraw/DrawingFillHandler';
 
 export class ImageEditorData {
     // eslint-disable-next-line no-use-before-define
@@ -83,7 +83,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _getAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = () => undefined;
     private _overlayIconRef = React.createRef<HTMLDivElement>();
-    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+    private _mainCont: HTMLDivElement | null = null;
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     imageRef: HTMLImageElement | null = null; // <video> ref
     marqueeref = React.createRef<MarqueeAnnotator>();
@@ -108,6 +108,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
 
     protected createDropTarget = (ele: HTMLDivElement) => {
+        this._mainCont = ele;
         this._dropDisposer?.();
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document));
     };
@@ -157,8 +158,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             () => this.layoutDoc.layout_scrollTop,
             sTop => {
                 this._forcedScroll = true;
-                !this._ignoreScroll && this._mainCont.current && (this._mainCont.current.scrollTop = NumCast(sTop));
-                this._mainCont.current?.scrollTo({ top: NumCast(sTop) });
+                !this._ignoreScroll && this._mainCont && (this._mainCont.scrollTop = NumCast(sTop));
+                this._mainCont?.scrollTo({ top: NumCast(sTop) });
                 this._forcedScroll = false;
             },
             { fireImmediately: true }
@@ -381,7 +382,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     // updateIcon = () => new Promise<void>(res => res());
     updateIcon = (usePanelDimensions?: boolean) => {
-        const contentDiv = this._mainCont.current;
+        const contentDiv = this._mainCont;
         return !contentDiv
             ? new Promise<void>(res => res())
             : UpdateIcon(
@@ -423,6 +424,20 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const nativeOrientation = NumCast(this.dataDoc[this.fieldKey + '_nativeOrientation'], 1);
         return { nativeWidth, nativeHeight, nativeOrientation };
     }
+    private _sideBtnWidth = 35;
+    /**
+     * How much the content of the view is being scaled based on its nesting and its fit-to-width settings
+     */
+    @computed get viewScaling() { return this.ScreenToLocalBoxXf().Scale * ( this._props.NativeDimScaling?.() || 1); } // prettier-ignore
+    /**
+     * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size.
+     */
+    @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth, 0.5 * Math.min(NumCast(this.Document.width)))* this.viewScaling; } // prettier-ignore
+    /**
+     * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content
+     */
+    @computed get uiBtnScaling() { return Math.min(this.maxWidgetSize / this._sideBtnWidth, 1); } // prettier-ignore
+
     @computed get overlayImageIcon() {
         const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`];
         return (
@@ -451,9 +466,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         })
                     }
                     style={{
-                        display: (this._props.isContentActive() !== false && SnappingManager.CanEmbed) || this.dataDoc[this.fieldKey + '_alternates'] ? 'block' : 'none',
-                        width: 'min(10%, 25px)',
-                        height: 'min(10%, 25px)',
+                        display: this._props.isContentActive() && (SnappingManager.CanEmbed || this.dataDoc[this.fieldKey + '_alternates']) ? 'block' : 'none',
+                        transform: `scale(${this.uiBtnScaling})`,
+                        width: this._sideBtnWidth,
+                        height: this._sideBtnWidth,
                         background: usePath === undefined ? 'white' : usePath === 'alternate' ? 'black' : 'gray',
                         color: usePath === undefined ? 'black' : 'white',
                     }}>
@@ -510,7 +526,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     this._isHovering = false;
                 })}
                 key={this.layoutDoc[Id]}
-                ref={this.createDropTarget}
                 onPointerDown={this.marqueeDown}>
                 <div className="imageBox-fader" style={{ opacity: backAlpha }}>
                     <img
@@ -531,7 +546,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         </div>
                     )}
                 </div>
-                {this.overlayImageIcon}
             </div>
         );
     }
@@ -739,12 +753,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             <div
                 className="imageBox"
                 onContextMenu={this.specificContextMenu}
-                ref={this._mainCont}
+                ref={this.createDropTarget}
                 onScroll={action(() => {
                     if (!this._forcedScroll) {
-                        if (this.layoutDoc._layout_scrollTop || this._mainCont.current?.scrollTop) {
+                        if (this.layoutDoc._layout_scrollTop || this._mainCont?.scrollTop) {
                             this._ignoreScroll = true;
-                            this.layoutDoc._layout_scrollTop = this._mainCont.current?.scrollTop;
+                            this.layoutDoc._layout_scrollTop = this._mainCont?.scrollTop;
                             this._ignoreScroll = false;
                         }
                     }
@@ -786,8 +800,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         <ReactLoading type="spin" height={50} width={50} color={'blue'} />
                     </div>
                 ) : null}
+                {this.overlayImageIcon}
                 {this.annotationLayer}
-                {!this._mainCont.current || !this.DocumentView || !this._annotationLayer.current ? null : (
+                {!this._mainCont || !this.DocumentView || !this._annotationLayer.current ? null : (
                     <MarqueeAnnotator
                         Document={this.Document}
                         ref={this.marqueeref}
@@ -802,7 +817,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         savedAnnotations={this.savedAnnotations}
                         selectionText={returnEmptyString}
                         annotationLayer={this._annotationLayer.current}
-                        marqueeContainer={this._mainCont.current}
+                        marqueeContainer={this._mainCont}
                         highlightDragSrcColor=""
                         anchorMenuCrop={this.crop}
                         // anchorMenuFlashcard={() => this.getImageDesc()}
diff --git a/src/client/views/nodes/chatbot/agentsystem/Agent.ts b/src/client/views/nodes/chatbot/agentsystem/Agent.ts
index 2ed808622..e93fb87db 100644
--- a/src/client/views/nodes/chatbot/agentsystem/Agent.ts
+++ b/src/client/views/nodes/chatbot/agentsystem/Agent.ts
@@ -23,6 +23,7 @@ import { Doc } from '../../../../../fields/Doc';
 import { parsedDoc } from '../chatboxcomponents/ChatBox';
 import { WebsiteInfoScraperTool } from '../tools/WebsiteInfoScraperTool';
 import { Upload } from '../../../../../server/SharedMediaTypes';
+import { RAGTool } from '../tools/RAGTool';
 //import { CreateTextDocTool } from '../tools/CreateTextDocumentTool';
 
 dotenv.config();
@@ -77,7 +78,7 @@ export class Agent {
         // Define available tools for the assistant
         this.tools = {
             calculate: new CalculateTool(),
-            // rag: new RAGTool(this.vectorstore),
+            rag: new RAGTool(this.vectorstore),
             dataAnalysis: new DataAnalysisTool(csvData),
             websiteInfoScraper: new WebsiteInfoScraperTool(addLinkedUrlDoc),
             searchTool: new SearchTool(addLinkedUrlDoc),
diff --git a/src/client/views/nodes/chatbot/vectorstore/Vectorstore.ts b/src/client/views/nodes/chatbot/vectorstore/Vectorstore.ts
index ef24e59bc..7027aceb4 100644
--- a/src/client/views/nodes/chatbot/vectorstore/Vectorstore.ts
+++ b/src/client/views/nodes/chatbot/vectorstore/Vectorstore.ts
@@ -39,7 +39,7 @@ export class Vectorstore {
      * @param doc_ids A function that returns a list of document IDs.
      */
     constructor(id: string, doc_ids: () => string[]) {
-        const pineconeApiKey = '51738e9a-bea2-4c11-b6bf-48a825e774dc';
+        const pineconeApiKey = process.env.PINECONE_API_KEY || '51738e9a-bea2-4c11-b6bf-48a825e774dc';
         if (!pineconeApiKey) {
             throw new Error('PINECONE_API_KEY is not defined.');
         }