Merge branch 'nathan-starter' of https://github.com/brown-dash/Dash-Web into nathan-starter

55 files changed, 4354 insertions, 1165 deletions

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index e743f01f5..eeac57a5e 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -111,7 +111,7 @@ let lastResp = '';
  * @param inputText Text to process
  * @returns AI Output
  */
-const gptAPICall = async (inputTextIn: string, callType: GPTCallType, prompt?: any, dontCache?: boolean) => {
+const gptAPICall = async (inputTextIn: string, callType: GPTCallType, prompt?: string, dontCache?: boolean) => {
     const inputText = [GPTCallType.SUMMARY, GPTCallType.FLASHCARD, GPTCallType.QUIZ].includes(callType) ? inputTextIn + '.' : inputTextIn;
     const opts: GPTCallOpts = callTypeMap[callType];
     if (lastCall === inputText && dontCache !== true) return lastResp;
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 59a121de7..e79207b04 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -32,6 +32,7 @@ export enum DocumentType {
     ANNOPALETTE = 'annopalette',
     LOADING = 'loading',
     SIMULATION = 'simulation', // physics simulation
+    MESSAGE = 'message', // chat message
 
     // special purpose wrappers that either take no data or are compositions of lower level types
     LINK = 'link',
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 0a7047128..951632d71 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -817,6 +817,11 @@ export namespace Docs {
         export function RTFDocument(field: RichTextField, options: DocumentOptions = {}, fieldKey: string = 'text') {
             return InstanceFromProto(Prototypes.get(DocumentType.RTF), field, options, undefined, fieldKey);
         }
+
+        export function MessageDocument(field: string, options: DocumentOptions = {}, fieldKey: string = 'data') {
+            return InstanceFromProto(Prototypes.get(DocumentType.MESSAGE), field, options, undefined, fieldKey);
+        }
+
         export function TextDocument(text: string, options: DocumentOptions = {}, fieldKey: string = 'text') {
             const rtf = {
                 doc: {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 556c8f072..7670827f8 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -386,7 +386,7 @@ pie title Minerals in my tap water
             {key: "Button",     creator: Docs.Create.ButtonDocument,                        opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, title_custom: true,  waitForDoubleClickToClick: 'never'}, scripts: {onClick: FollowLinkScript()?.script.originalScript ?? ""}},
             {key: "Script",     creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }},
             {key: "DataViz",    creator: opts => Docs.Create.DataVizDocument("/users/rz/Downloads/addresses.csv", opts),   opts: { _width: 300, _height: 300 }},
-            {key: "Chat",       creator: Docs.Create.ChatDocument,                          opts: { _width: 300, _height: 300, }},
+            {key: "Chat",       creator: Docs.Create.ChatDocument,                          opts: { _width: 500, _height: 500, }},
             {key: "Header",     creator: headerTemplate,                                    opts: { _width: 300, _height: 120, _header_pointerEvents: "all", _header_height: 50, _header_fontSize: 9,_layout_autoHeightMargins: 50, _layout_autoHeight: true, treeView_HideUnrendered: true}},
             {key: "ViewSlide",  creator: slideView,                                         opts: { _width: 400, _height: 300, _xMargin: 3, _yMargin: 3,}},
             {key: "Trail",      creator: Docs.Create.PresDocument,                          opts: { _width: 400, _height: 30, _type_collection: CollectionViewType.Stacking, _layout_dontCenter:'xy', dropAction: dropActionType.embed, treeView_HideTitle: true, _layout_fitWidth:true, layout_boxShadow: "0 0" }},
diff --git a/src/client/util/SnappingManager.ts b/src/client/util/SnappingManager.ts
index 95ccc7735..5f6c7d9ac 100644
--- a/src/client/util/SnappingManager.ts
+++ b/src/client/util/SnappingManager.ts
@@ -28,6 +28,7 @@ export class SnappingManager {
     @observable _lastBtnId: string = '';
     @observable _propertyWid: number = 0;
     @observable _printToConsole: boolean = false;
+    @observable _hideDecorations: boolean = false;
 
     private constructor() {
         SnappingManager._manager = this;
@@ -59,6 +60,7 @@ export class SnappingManager {
     public static get LastPressedBtn() { return this.Instance._lastBtnId; } // prettier-ignore
     public static get PropertiesWidth(){ return this.Instance._propertyWid; } // prettier-ignore
     public static get PrintToConsole() { return this.Instance._printToConsole; } // prettier-ignore
+    public static get HideDecorations(){ return this.Instance._hideDecorations; } // prettier-ignore
 
     public static SetLongPress      = (press: boolean) => runInAction(() => {this.Instance._longPress = press}); // prettier-ignore
     public static SetShiftKey       = (down: boolean) => runInAction(() => {this.Instance._shiftKey = down}); // prettier-ignore
@@ -75,6 +77,7 @@ export class SnappingManager {
     public static SetLastPressedBtn = (id:string)      =>runInAction(() => {this.Instance._lastBtnId = id}); // prettier-ignore
     public static SetPropertiesWidth= (wid:number)     =>runInAction(() => {this.Instance._propertyWid = wid}); // prettier-ignore
     public static SetPrintToConsole = (state:boolean)  =>runInAction(() => {this.Instance._printToConsole = state}); // prettier-ignore
+    public static SetHideDecorations= (state:boolean)  =>runInAction(() => {this.Instance._hideDecorations = state}); // prettier-ignore
 
     public static userColor: string | undefined;
     public static userVariantColor: string | undefined;
diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts
index ce0e7768b..07d3bb708 100644
--- a/src/client/util/UndoManager.ts
+++ b/src/client/util/UndoManager.ts
@@ -43,7 +43,6 @@ export function undoable<T>(fn: (...args: any[]) => T, batchName: string): (...a
     return function (...fargs) {
         const batch = UndoManager.StartBatch(batchName);
         try {
-            // eslint-disable-next-line prefer-rest-params
             return fn.apply(undefined, fargs);
         } finally {
             batch.end();
@@ -51,9 +50,9 @@ export function undoable<T>(fn: (...args: any[]) => T, batchName: string): (...a
     };
 }
 
-// eslint-disable-next-line no-redeclare, @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function undoBatch(target: any, key: string | symbol, descriptor?: TypedPropertyDescriptor<any>): any;
-// eslint-disable-next-line no-redeclare, @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function undoBatch(target: any, key?: string | symbol, descriptor?: TypedPropertyDescriptor<(...args: any[]) => unknown>): any {
     if (!key) {
         return function (...fargs: unknown[]) {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 1c0d51e17..62f2de776 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -63,7 +63,6 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     @observable private _accumulatedTitle = '';
     @observable private _titleControlString: string = '$title';
     @observable private _editingTitle = false;
-    @observable private _hidden = false;
     @observable private _isRotating: boolean = false;
     @observable private _isRounding: boolean = false;
     @observable private _showLayoutAcl: boolean = false;
@@ -202,16 +201,14 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
         dragData.removeDocument = dragDocView._props.removeDocument;
         dragData.isDocDecorationMove = true;
         dragData.canEmbed = dragTitle;
-        this._hidden = true;
+        SnappingManager.SetHideDecorations(true);
         DragManager.StartDocumentDrag(
             DocumentView.Selected().map(dv => dv.ContentDiv!),
             dragData,
             e.x,
             e.y,
             {
-                dragComplete: action(() => {
-                    this._hidden = false;
-                }),
+                dragComplete: () => SnappingManager.SetHideDecorations(false),
                 hideSource: true,
             }
         );
@@ -653,7 +650,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
         this._forceRender;
         const { b, r, x, y } = this.Bounds;
         const seldocview = DocumentView.Selected().lastElement();
-        if (SnappingManager.IsDragging || r - x < 1 || x === Number.MAX_VALUE || !seldocview || this._hidden || isNaN(r) || isNaN(b) || isNaN(x) || isNaN(y)) {
+        if (SnappingManager.IsDragging || r - x < 1 || x === Number.MAX_VALUE || !seldocview || SnappingManager.HideDecorations || isNaN(r) || isNaN(b) || isNaN(x) || isNaN(y)) {
             setTimeout(
                 action(() => {
                     this._editingTitle = false;
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index e34b66963..11425e477 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -1,3 +1,4 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
 import { action, computed, makeObservable, observable, ObservableMap } from 'mobx';
@@ -12,18 +13,15 @@ import { DocData } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
 import { RichTextField } from '../../fields/RichTextField';
-import { DocCast, StrCast } from '../../fields/Types';
-import { Button, CurrentUserUtils } from '../util/CurrentUserUtils';
+import { StrCast } from '../../fields/Types';
 import { SearchUtil } from '../util/SearchUtil';
 import { SnappingManager } from '../util/SnappingManager';
 import { undoable } from '../util/UndoManager';
 import { FieldsDropdown } from './FieldsDropdown';
 import './FilterPanel.scss';
 import { DocumentView } from './nodes/DocumentView';
-import { ButtonType } from './nodes/FontIconBox/FontIconBox';
 import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
 import { ObservableReactComponent } from './ObservableReactComponent';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 interface HotKeyButtonProps {
     hotKey: Doc;
@@ -159,6 +157,7 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey /*, sel
 
 interface filterProps {
     Document: Doc;
+    addHotKey: (hotKey: string) => void;
 }
 
 @observer
@@ -357,33 +356,6 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
     };
 
     /**
-     * Allows users to add a filter hotkey to the properties panel. Will also update the multitoggle at the top menu and the
-     * icontags tht are displayed on the documents themselves
-     * @param hotKey tite of the new hotkey
-     */
-    addHotkey = (hotKey: string) => {
-        const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
-        const filter = DocCast(buttons.Filter);
-        const title = hotKey.startsWith('#') ? hotKey.substring(1) : hotKey;
-
-        const newKey: Button = {
-            title,
-            icon: 'question',
-            toolTip: `Click to toggle the ${title}'s group's visibility`,
-            btnType: ButtonType.ToggleButton,
-            expertMode: false,
-            toolType: '#' + title,
-            funcs: {},
-            scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' },
-        };
-
-        const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter);
-        newBtn.isSystem = newBtn[DocData].isSystem = undefined;
-
-        Doc.AddToFilterHotKeys(newBtn);
-    };
-
-    /**
      * Renders the newly formed hotkey icon buttons
      * @returns the buttons to be rendered
      */
@@ -472,7 +444,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
                 <div>
                     <div className="filterBox-select">
                         <div style={{ width: '100%' }}>
-                            <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo]} />
+                            <FieldsDropdown Document={this.Document} selectFunc={this._props.addHotKey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo]} />
                         </div>
                     </div>
                 </div>
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 5fddaec9a..afeecaa63 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -70,7 +70,6 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil
     @observable private _strokes: InkData[] = [];
     @observable private _palette?: JSX.Element = undefined;
     @observable private _clipboardDoc?: JSX.Element = undefined;
-    @observable private _possibilities: JSX.Element[] = [];
 
     @computed private get height(): number {
         return 2 * Math.max(this._pointerY && this._thumbY ? this._thumbY - this._pointerY : 100, 100);
@@ -209,8 +208,8 @@ export class GestureOverlay extends ObservableReactComponent<React.PropsWithChil
         const intersectArray: string[] = [];
         const scribbleBounds = InkField.getBounds(scribble);
         for (let i = 0; i < scribble.length - 3; i += 4) {  // for each segment of scribble
+            const scribbleSeg = InkField.Segment(scribble, i);
             for (let j = 0; j < inkStroke.length - 3; j += 4) { // for each segment of ink stroke
-                const scribbleSeg = InkField.Segment(scribble, i);
                 const strokeSeg = InkField.Segment(inkStroke, j);
                 const strokeBounds = InkField.getBounds(strokeSeg.points.map(pt => ({ X: pt.x, Y: pt.y })));
                 if (intersectRect(scribbleBounds, strokeBounds)) {
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 17eea585a..2a59f6dc3 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -29,7 +29,7 @@ import { CollectionSchemaView } from './collections/collectionSchema/CollectionS
 import { SchemaRowBox } from './collections/collectionSchema/SchemaRowBox';
 import './global/globalScripts';
 import { AudioBox } from './nodes/AudioBox';
-import { ChatBox } from './nodes/ChatBox/ChatBox';
+import { ChatBox } from './nodes/chatbot/chatboxcomponents/ChatBox';
 import { ComparisonBox } from './nodes/ComparisonBox';
 import { DataVizBox } from './nodes/DataVizBox/DataVizBox';
 import { DiagramBox } from './nodes/DiagramBox';
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index fc159d96b..e469531b0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -20,6 +20,7 @@ import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { Docs } from '../documents/Documents';
 import { CalendarManager } from '../util/CalendarManager';
 import { CaptureManager } from '../util/CaptureManager';
+import { Button, CurrentUserUtils } from '../util/CurrentUserUtils';
 import { DocumentManager } from '../util/DocumentManager';
 import { DragManager } from '../util/DragManager';
 import { dropActionType } from '../util/DropActionTypes';
@@ -62,6 +63,7 @@ import { DocCreatorMenu } from './nodes/DataVizBox/DocCreatorMenu';
 import { SchemaCSVPopUp } from './nodes/DataVizBox/SchemaCSVPopUp';
 import { DocButtonState } from './nodes/DocumentLinksButton';
 import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
+import { ButtonType } from './nodes/FontIconBox/FontIconBox';
 import { ImageEditorData as ImageEditor } from './nodes/ImageBox';
 import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import { LinkDocPreview, LinkInfo } from './nodes/LinkDocPreview';
@@ -864,6 +866,33 @@ export class MainView extends ObservableReactComponent<object> {
         return true;
     };
 
+    /**
+     * Allows users to add a filter hotkey to the properties panel. Will also update the multitoggle at the top menu and the
+     * icontags tht are displayed on the documents themselves
+     * @param hotKey tite of the new hotkey
+     */
+    addHotKey = (hotKey: string) => {
+        const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
+        const filter = DocCast(buttons.Filter);
+        const title = hotKey.startsWith('#') ? hotKey.substring(1) : hotKey;
+
+        const newKey: Button = {
+            title,
+            icon: 'question',
+            toolTip: `Click to toggle the ${title}'s group's visibility`,
+            btnType: ButtonType.ToggleButton,
+            expertMode: false,
+            toolType: '#' + title,
+            funcs: {},
+            scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' },
+        };
+
+        const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter);
+        newBtn.isSystem = newBtn[DocData].isSystem = undefined;
+
+        Doc.AddToFilterHotKeys(newBtn);
+    };
+
     @computed get mainInnerContent() {
         const leftMenuFlyoutWidth = this._leftMenuFlyoutWidth + this.leftMenuWidth();
         const width = this.propertiesWidth() + leftMenuFlyoutWidth;
@@ -892,7 +921,7 @@ export class MainView extends ObservableReactComponent<object> {
                         )}
                         <div className="properties-container" style={{ width: this.propertiesWidth(), color: SnappingManager.userColor }}>
                             <div style={{ display: this.propertiesWidth() < 10 ? 'none' : undefined }}>
-                                <PropertiesView styleProvider={DefaultStyleProvider} addDocTab={DocumentViewInternal.addDocTabFunc} width={this.propertiesWidth()} height={this.propertiesHeight()} />
+                                <PropertiesView styleProvider={DefaultStyleProvider} addHotKey={this.addHotKey} addDocTab={DocumentViewInternal.addDocTabFunc} width={this.propertiesWidth()} height={this.propertiesHeight()} />
                             </div>
                         </div>
                     </div>
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index c6dccb4fb..789333995 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -50,6 +50,7 @@ interface PropertiesViewProps {
     height: number;
     styleProvider?: StyleProviderFuncType;
     addDocTab: (doc: Doc, where: OpenWhere) => boolean;
+    addHotKey: (hotKey: string) => void;
 }
 
 @observer
@@ -1287,7 +1288,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         return (
             <PropertiesSection title="Filters" isOpen={this.openFilters} setIsOpen={action(bool => { this.openFilters = bool; })} onDoubleClick={this.CloseAll}>
                 <div className="propertiesView-content filters" style={{ position: 'relative', height: 'auto' }}>
-                    <FilterPanel Document={this.selectedDoc ?? Doc.ActiveDashboard!} />
+                    <FilterPanel Document={this.selectedDoc ?? Doc.ActiveDashboard!} addHotKey={this._props.addHotKey}/>
                 </div>
             </PropertiesSection>
         ); // prettier-ignore
diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index e413c13e2..8ab91a6b5 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -181,7 +181,7 @@ export class ScriptingRepl extends ObservableReactComponent<object> {
                     this.maybeScrollToBottom();
                     return;
                 }
-                const result = undoable(() => script.run({}, err => this.commands.push({ command: this.commandString, result: err })), 'run:' + this.commandString)();
+                const result = undoable(() => script.run({}, err => this.commands.push({ command: this.commandString, result: err as string })), 'run:' + this.commandString)();
                 if (result.success) {
                     this.commands.push({ command: this.commandString, result: result.result });
                     this.commandsHistory.push(this.commandString);
diff --git a/src/client/views/TagsView.tsx b/src/client/views/TagsView.tsx
index 9858e7b61..072cae3af 100644
--- a/src/client/views/TagsView.tsx
+++ b/src/client/views/TagsView.tsx
@@ -84,9 +84,7 @@ export class TagItem extends ObservableReactComponent<TagItemProps> {
      */
     public static allDocsWithTag = (tag: string) => DocListCast(TagItem.findTagCollectionDoc(tag)?.[DocData].docs);
 
-    public static docHasTag = (doc: Doc, tag: string) => {
-        return StrListCast(doc?.tags).includes(tag);
-    };
+    public static docHasTag = (doc: Doc, tag: string) => StrListCast(doc?.tags).includes(tag);
     /**
      * Adds a tag to the metadata of this document and adds the Doc to the corresponding tag collection Doc (or creates it)
      * @param tag tag string
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index a9ab9de26..92c69c3cf 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -22,6 +22,7 @@ import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import { computedFn } from 'mobx-utils';
+import { DocumentDecorations } from '../DocumentDecorations';
 
 enum cardSortings {
     Time = 'time',
@@ -411,15 +412,14 @@ export class CollectionCardView extends CollectionSubView() {
     translateOverflowX = (realIndex: number, calcRowCards: number) => (realIndex < this._maxRowCount ? 0 : (this._maxRowCount - calcRowCards) * (this.childPanelWidth() / 2));
 
     /**
-     * Determines how far to translate a card in the y direction depending on its index, whether or not its being hovered, or if it's selected
-     * @param isHovered
-     * @param isActive
-     * @param realIndex
-     * @param amCards
-     * @param calcRowIndex
-     * @returns
+     * Determines how far to translate a card in the y direction depending on its index and if it's selected
+     * @param isActive whether the card is focused for interaction
+     * @param realIndex index of card from start of deck
+     * @param amCards ??
+     * @param calcRowIndex index of card from start of row
+     * @returns Y translation of card
      */
-    calculateTranslateY = (isHovered: boolean, isActive: boolean, realIndex: number, amCards: number, calcRowIndex: number) => {
+    calculateTranslateY = (isActive: boolean, realIndex: number, amCards: number, calcRowIndex: number) => {
         const rowHeight = (this._props.PanelHeight() * this.fitContentScale) / this.numRows;
         const rowIndex = Math.trunc(realIndex / this._maxRowCount);
         const rowToCenterShift = this.numRows / 2 - rowIndex;
@@ -567,10 +567,10 @@ export class CollectionCardView extends CollectionSubView() {
         } else {
             // otherwise, turn off documentDecorations becase we're in a selection transition and want to avoid artifacts.
             // Turn them back on when the animation has completed and the render and backend structures are in synch
-            SnappingManager.SetIsResizing(doc[Id]);
+            SnappingManager.SetHideDecorations(true);
             setTimeout(
                 action(() => {
-                    SnappingManager.SetIsResizing(undefined);
+                    SnappingManager.SetHideDecorations(false);
                     this._forceChildXf++;
                 }),
                 1000
@@ -592,9 +592,8 @@ export class CollectionCardView extends CollectionSubView() {
 
         // Map sorted documents to their rendered components
         return this.sortedDocs.map((doc, index) => {
-            const realIndex = this.sortedDocs.indexOf(doc);
-            const calcRowIndex = this.overflowIndexCalc(realIndex);
-            const amCards = this.overflowAmCardsCalc(realIndex);
+            const calcRowIndex = this.overflowIndexCalc(index);
+            const amCards = this.overflowAmCardsCalc(index);
             const view = DocumentView.getDocumentView(doc, this.DocumentView?.());
 
             const childScreenToLocal = this.childScreenToLocal(doc, index, calcRowIndex, !!view?.IsContentActive, amCards);
@@ -617,8 +616,8 @@ export class CollectionCardView extends CollectionSubView() {
                     style={{
                         width: this.childPanelWidth(),
                         height: 'max-content',
-                        transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, !!view?.IsContentActive, realIndex, amCards, calcRowIndex)}px)
-                                    translateX(calc(${view?.IsContentActive ? translateIfSelected() : 0}% + ${this.translateOverflowX(realIndex, amCards)}px))
+                        transform: `translateY(${this.calculateTranslateY(!!view?.IsContentActive, index, amCards, calcRowIndex)}px)
+                                    translateX(calc(${view?.IsContentActive ? translateIfSelected() : 0}% + ${this.translateOverflowX(index, amCards)}px))
                                     rotate(${!view?.IsContentActive ? this.rotate(amCards, calcRowIndex) : 0}deg)
                                     scale(${view?.IsContentActive ? `${Math.min(hscale, vscale) * 100}%` : this._hoveredNodeIndex === index ? 1.1 : 1})`,
                     }} // prettier-ignore
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index d1304b8f4..e1786d2c9 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -31,17 +31,17 @@ import { ScriptingRepl } from '../ScriptingRepl';
 import { UndoStack } from '../UndoStack';
 import './CollectionDockingView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
-import { TabHTMLElement } from './TabDocView';
+import { TabDocView, TabHTMLElement } from './TabDocView';
 
 @observer
 export class CollectionDockingView extends CollectionSubView() {
-    static tabClass: unknown = null;
+    static tabClass?: typeof TabDocView;
     /**
      * Initialize by assigning the add split method to DocumentView and by
      * configuring golden layout to render its documents using the specified React component
      * @param ele - typically would be set to TabDocView
      */
-    public static Init(ele: unknown) {
+    public static Init(ele: typeof TabDocView) {
         this.tabClass = ele;
         DocumentView.addSplit = CollectionDockingView.AddSplit;
     }
@@ -544,7 +544,7 @@ export class CollectionDockingView extends CollectionSubView() {
     tabCreated = (tab: { contentItem: { element: HTMLElement[] } }) => {
         this.tabMap.add(tab);
         // InitTab is added to the tab's HTMLElement in TabDocView
-        const tabdocviewContent = tab.contentItem.element[0]?.firstChild?.firstChild as unknown as TabHTMLElement;
+        const tabdocviewContent = tab.contentItem.element[0]?.firstChild?.firstChild as TabHTMLElement;
         tabdocviewContent?.InitTab?.(tab); // have to explicitly initialize tabs that reuse contents from previous tabs (ie, when dragging a tab around a new tab is created for the old content)
     };
 
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 8c6a6b551..226d06f37 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { lightOrDark, returnEmptyString } from '../../../ClientUtils';
@@ -87,12 +87,16 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV
     };
 
     componentDidMount(): void {
-        this._ele && this.props.refList.push(this._ele);
+        runInAction(() => {
+            this._ele && this.props.refList.push(this._ele);
+        });
     }
 
     componentWillUnmount() {
-        this._ele && this.props.refList.splice(this._props.refList.indexOf(this._ele), 1);
-        this._ele = null;
+        runInAction(() => {
+            this._ele && this.props.refList.splice(this._props.refList.indexOf(this._ele), 1);
+            this._ele = null;
+        });
     }
 
     @undoBatch
@@ -248,10 +252,7 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV
                                     <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.addTextNote} placeholder={"Type ':' for commands"} contents="+ Node" menuCallback={this.menuCallback} />
                                 </div>
                                 <div className="collectionNoteTakingView-addDocumentButton" style={{ color: lightOrDark(this._props.backgroundColor?.()) }}>
-                                    {
-                                        // eslint-disable-next-line react/jsx-props-no-spreading
-                                        <EditableView {...this._props.editableViewProps()} />
-                                    }
+                                    <EditableView {...this._props.editableViewProps()} />
                                 </div>
                             </div>
                         ) : null}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index c17371151..51add85a8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -46,7 +46,6 @@ export function InfoState(
     gif?: string,
     entryFunc?: () => unknown
 ) {
-    // eslint-disable-next-line new-cap
     return new infoState(msg, arcs, gif, entryFunc);
 }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d2bc8f2c2..4043091d5 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -138,7 +138,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine);
     }
     @computed get childPointerEvents() {
-        return SnappingManager.IsResizing
+        return falseSnappingManager.IsResizing
             ? 'none'
             : (this._props.childPointerEvents?.() ??
                   (this._props.viewDefDivClick || //
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 6c3f4eaff..903e04ad7 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -4,6 +4,7 @@ import { runInAction } from 'mobx';
 import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { InkTool } from '../../../fields/InkField';
+import { List } from '../../../fields/List';
 import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
 import { Gestures } from '../../../pen-gestures/GestureTypes';
@@ -16,7 +17,6 @@ import { UndoManager, undoable } from '../../util/UndoManager';
 import { GestureOverlay } from '../GestureOverlay';
 import { InkTranscription } from '../InkTranscription';
 import { InkingStroke } from '../InkingStroke';
-import { MainView } from '../MainView';
 import { PropertiesView } from '../PropertiesView';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm';
 import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
@@ -40,6 +40,7 @@ import { VideoBox } from '../nodes/VideoBox';
 import { WebBox } from '../nodes/WebBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
 import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
+import { OpenWhere } from '../nodes/OpenWhere';
 
 // eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function IsNoneSelected() {
@@ -241,31 +242,15 @@ ScriptingGlobals.add(function showFreeform(
         ['pile', {
             checkResult: (doc: Doc) => doc._type_collection == CollectionViewType.Freeform,
             setDoc: (doc: Doc, dv: DocumentView) => {
-                doc._type_collection = CollectionViewType.Freeform;
                 const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), {
+                    title: doc.title + "_carousel",
                     _width: 250,
                     _height: 200,
                     _layout_fitWidth: false,
                     _layout_autoHeight: true,
+                    childFilters: new List<string>(StrListCast(doc.childFilters))
                 });
-
-
-                const iconMap: { [key: number]: string } = {
-                    0: 'star',
-                    1: 'heart',
-                    2: 'cloud',
-                    3: 'bolt'
-                };
-
-                for (let i=0; i<4; i++){
-                    if (isAttrFiltered(iconMap[i])){
-                        newCol[iconMap[i]] = true
-                    }
-                }
-
-                    newCol && dv.ComponentView?.addDocument?.(newCol);
-                    DocumentView.showDocument(newCol, { willZoomCentered: true })
-
+                dv._props.addDocTab?.(newCol, OpenWhere.addRight);
             },
         }],
     ]);
@@ -301,7 +286,7 @@ ScriptingGlobals.add(function setTagFilter(tag: string, added: boolean, checkRes
         added ? Doc.setDocFilter(selected, 'tags', tag, 'check') : Doc.setDocFilter(selected, 'tags', tag, 'remove');
     } else {
         SnappingManager.PropertiesWidth < 5 && SnappingManager.SetPropertiesWidth(0);
-        SnappingManager.SetPropertiesWidth(MainView.Instance.propertiesWidth() < 15 ? 250 : 0);
+        SnappingManager.SetPropertiesWidth(SnappingManager.PropertiesWidth < 15 ? 250 : 0);
         PropertiesView.Instance?.CloseAll();
         runInAction(() => (PropertiesView.Instance.openFilters = SnappingManager.PropertiesWidth > 5));
     }
diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss
deleted file mode 100644
index f1ad3d074..000000000
--- a/src/client/views/nodes/ChatBox/ChatBox.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-$background-color: #f8f9fa;
-$text-color: #333;
-$input-background: #fff;
-$button-color: #007bff;
-$button-hover-color: darken($button-color, 10%);
-$shadow-color: rgba(0, 0, 0, 0.075);
-$border-radius: 8px;
-
-.chatBox {
-    display: flex;
-    flex-direction: column;
-    width: 100%; /* Adjust the width as needed, could be in percentage */
-    height: 100%; /* Adjust the height as needed, could be in percentage */
-    background-color: $background-color;
-    font-family: 'Helvetica Neue', Arial, sans-serif;
-    //margin: 20px auto;
-    //overflow: hidden;
-
-    .scroll-box {
-        flex-grow: 1;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        height: 100%;
-        padding: 10px;
-        display: flex;
-        flex-direction: column-reverse;
-    
-        &::-webkit-scrollbar {
-          width: 8px;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: darken($background-color, 10%);
-          border-radius: $border-radius;
-        }
-    
-
-        .chat-content {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .messages {
-            display: flex;
-            flex-direction: column;
-            .message {
-                padding: 10px;
-                margin-bottom: 10px;
-                border-radius: $border-radius;
-                background-color: lighten($background-color, 5%);
-                box-shadow: 0 2px 5px $shadow-color;
-                //display: flex;
-                align-items: center;
-                max-width: 70%;
-                word-break: break-word;
-                .message-footer { // Assuming this is the container for the toggle button
-                    //max-width: 70%;
-                    
-            
-                    .toggle-logs-button {
-                        margin-top: 10px; // Padding on sides to align with the text above
-                        width: 95%;
-                        //display: block; // Ensures the button extends the full width of its container
-                        text-align: center; // Centers the text inside the button
-                        //padding: 8px 0; // Adequate padding for touch targets
-                        background-color: $button-color;
-                        color: #fff;
-                        border: none;
-                        border-radius: $border-radius;
-                        cursor: pointer;
-                        //transition: background-color 0.3s;
-                        //margin-top: 10px; // Adds space above the button
-                        box-shadow: 0 2px 4px $shadow-color; // Consistent shadow with other elements
-                        &:hover {
-                            background-color: $button-hover-color;
-                        }
-                    }
-                    .tool-logs {
-                        width: 100%;
-                        background-color: $input-background;
-                        color: $text-color;
-                        margin-top: 5px;
-                        //padding: 10px;
-                        //border-radius: $border-radius;
-                        //box-shadow: inset 0 2px 4px $shadow-color;
-                        //transition: opacity 1s ease-in-out;
-                        font-family: monospace;
-                        overflow-x: auto;
-                        max-height: 150px; // Ensuring it does not grow too large
-                        overflow-y: auto;
-                    }
-                    
-                }   
-                
-                .custom-link {
-                    color: lightblue;
-                    text-decoration: underline;
-                    cursor: pointer;
-                  }
-                &.user {
-                align-self: flex-end;
-                background-color: $button-color;
-                color: #fff;
-                }
-        
-                &.chatbot {
-                align-self: flex-start;
-                background-color: $input-background;
-                color: $text-color;
-                }
-        
-                span {
-                flex-grow: 1;
-                padding-right: 10px;
-                }
-        
-                img {
-                max-width: 50px;
-                max-height: 50px;
-                border-radius: 50%;
-                }
-            }
-        }
-        padding-bottom: 0;
-    }
-
-    .chat-form {
-        display: flex;
-        flex-grow: 1;
-        //height: 50px;
-        bottom: 0;
-        width: 100%;
-        padding: 10px;
-        background-color: $input-background;
-        box-shadow: inset 0 -1px 2px $shadow-color;
-        
-        input[type="text"] {
-            flex-grow: 1;
-            border: 1px solid darken($input-background, 10%);
-            border-radius: $border-radius;
-            padding: 8px 12px;
-            margin-right: 10px;
-        }
-
-        button {
-            padding: 8px 16px;
-      background-color: $button-color;
-      color: #fff;
-      border: none;
-      border-radius: $border-radius;
-      cursor: pointer;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: $button-hover-color;
-      }
-        }
-        margin-bottom: 0;
-    }
-}
-
-.initializing-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba($background-color, 0.95);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.5em;
-    color: $text-color;
-    z-index: 10; // Ensure it's above all other content (may be better solution)
-
-    &::before {
-        content: 'Initializing...';
-        font-weight: bold;
-    }
-}
-
-
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.4);
-
-    .modal-content {
-        background-color: $input-background;
-        color: $text-color;
-        padding: 20px;
-        border-radius: $border-radius;
-        box-shadow: 0 2px 10px $shadow-color;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: auto;
-        min-width: 300px;
-
-        h4 {
-            margin-bottom: 15px;
-        }
-
-        p {
-            margin-bottom: 20px;
-        }
-
-        button {
-            padding: 10px 20px;
-            background-color: $button-color;
-            color: #fff;
-            border: none;
-            border-radius: $border-radius;
-            cursor: pointer;
-            margin: 5px;
-            transition: background-color 0.3s;
-
-            &:hover {
-                background-color: $button-hover-color;
-            }
-        }
-    }
-}
diff --git a/src/client/views/nodes/ChatBox/ChatBox.tsx b/src/client/views/nodes/ChatBox/ChatBox.tsx
deleted file mode 100644
index 880c332ac..000000000
--- a/src/client/views/nodes/ChatBox/ChatBox.tsx
+++ /dev/null
@@ -1,609 +0,0 @@
-import { MathJaxContext } from 'better-react-mathjax';
-import { action, makeObservable, observable, observe, reaction, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
-import OpenAI, { ClientOptions } from 'openai';
-import { ImageFile, Message } from 'openai/resources/beta/threads/messages';
-import { RunStep } from 'openai/resources/beta/threads/runs/steps';
-import * as React from 'react';
-import { Doc } from '../../../../fields/Doc';
-import { Id } from '../../../../fields/FieldSymbols';
-import { CsvCast, DocCast, PDFCast, StrCast } from '../../../../fields/Types';
-import { CsvField } from '../../../../fields/URLField';
-import { Networking } from '../../../Network';
-import { DocUtils } from '../../../documents/DocUtils';
-import { DocumentType } from '../../../documents/DocumentTypes';
-import { Docs } from '../../../documents/Documents';
-import { DocumentManager } from '../../../util/DocumentManager';
-import { LinkManager } from '../../../util/LinkManager';
-import { ViewBoxAnnotatableComponent } from '../../DocComponent';
-import { FieldView, FieldViewProps } from '../FieldView';
-import './ChatBox.scss';
-import MessageComponent from './MessageComponent';
-import { ANNOTATION_LINK_TYPE, ASSISTANT_ROLE, AssistantMessage, DOWNLOAD_TYPE } from './types';
-
-@observer
-export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
-    @observable modalStatus = false;
-    @observable currentFile = { url: '' };
-    @observable history: AssistantMessage[] = [];
-    @observable.deep current_message: AssistantMessage | undefined = undefined;
-
-    @observable isLoading: boolean = false;
-    @observable isInitializing: boolean = true;
-    @observable expandedLogIndex: number | null = null;
-    @observable linked_docs_to_add: Doc[] = [];
-
-    private openai: OpenAI;
-    private interim_history: string = '';
-    private assistantID: string = '';
-    private threadID: string = '';
-    private _oldWheel: any;
-    private vectorStoreID: string = '';
-    private mathJaxConfig: any;
-    private linkedCsvIDs: string[] = [];
-
-    public static LayoutString(fieldKey: string) {
-        return FieldView.LayoutString(ChatBox, fieldKey);
-    }
-    constructor(props: FieldViewProps) {
-        super(props);
-        makeObservable(this);
-        this.openai = this.initializeOpenAI();
-        this.history = [];
-        this.threadID = StrCast(this.dataDoc.thread_id);
-        this.assistantID = StrCast(this.dataDoc.assistant_id);
-        this.vectorStoreID = StrCast(this.dataDoc.vector_store_id);
-        this.openai = this.initializeOpenAI();
-        if (this.assistantID === '' || this.threadID === '' || this.vectorStoreID === '') {
-            this.createAssistant();
-        } else {
-            this.retrieveCsvUrls();
-            this.isInitializing = false;
-        }
-        this.mathJaxConfig = {
-            loader: { load: ['input/asciimath'] },
-            tex: {
-                inlineMath: [
-                    ['$', '$'],
-                    ['\\(', '\\)'],
-                ],
-                displayMath: [
-                    ['$$', '$$'],
-                    ['[', ']'],
-                ],
-            },
-        };
-        reaction(
-            () => this.history.map((msg: AssistantMessage) => ({ role: msg.role, text: msg.text, image: msg.image, tool_logs: msg.tool_logs, links: msg.links })),
-            serializableHistory => {
-                this.dataDoc.data = JSON.stringify(serializableHistory);
-            }
-        );
-    }
-
-    toggleToolLogs = (index: number) => {
-        this.expandedLogIndex = this.expandedLogIndex === index ? null : index;
-    };
-
-    retrieveCsvUrls() {
-        const linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.Document)
-            .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
-            .map(d => DocCast(d?.annotationOn, d))
-            .filter(d => d);
-
-        linkedDocs.forEach(doc => {
-            const aiFieldId = StrCast(doc[this.Document[Id] + '_ai_field_id']);
-            if (CsvCast(doc.data)) {
-                this.linkedCsvIDs.push(StrCast(aiFieldId));
-                console.log(this.linkedCsvIDs);
-            }
-        });
-    }
-
-    initializeOpenAI() {
-        const configuration: ClientOptions = {
-            apiKey: process.env.OPENAI_KEY,
-            dangerouslyAllowBrowser: true,
-        };
-        return new OpenAI(configuration);
-    }
-
-    onPassiveWheel = (e: WheelEvent) => {
-        if (this._props.isContentActive()) {
-            e.stopPropagation();
-        }
-    };
-
-    createLink = (linkInfo: string, startIndex: number, endIndex: number, linkType: ANNOTATION_LINK_TYPE, annotationIndex: number = 0) => {
-        const text = this.interim_history;
-        const subString = this.current_message?.text.substring(startIndex, endIndex) ?? '';
-        if (!text) return;
-        const textToDisplay = `${annotationIndex}`;
-        let fileInfo = linkInfo;
-        const fileName = subString.split('/')[subString.split('/').length - 1];
-        if (linkType === ANNOTATION_LINK_TYPE.DOWNLOAD_FILE) {
-            fileInfo = linkInfo + '!!!' + fileName;
-        }
-
-        const formattedLink = `[${textToDisplay}](${fileInfo}~~~${linkType})`;
-        console.log(formattedLink);
-        const newText = text.replace(subString, formattedLink);
-        runInAction(() => {
-            this.interim_history = newText;
-            console.log(newText);
-            this.current_message?.links?.push({
-                start: startIndex,
-                end: endIndex,
-                url: linkType === ANNOTATION_LINK_TYPE.DOWNLOAD_FILE ? fileName : linkInfo,
-                id: linkType === ANNOTATION_LINK_TYPE.DOWNLOAD_FILE ? linkInfo : undefined,
-                link_type: linkType,
-            });
-        });
-    };
-
-    @action
-    createAssistant = async () => {
-        this.isInitializing = true;
-        try {
-            const vectorStore = await this.openai.beta.vectorStores.create({
-                name: 'Vector Store for Assistant',
-            });
-            const assistant = await this.openai.beta.assistants.create({
-                name: 'Document Analyser Assistant',
-                instructions: `
-                You will analyse documents with which you are provided. You will answer questions and provide insights based on the information in the documents.
-                For writing math formulas:
-                You have a MathJax render environment.
-                - Write all in-line equations within a single dollar sign, $, to render them as TeX (this means any time you want to use a dollar sign to represent a dollar sign itself, you must escape it with a backslash: "$");
-                - Use a double dollar sign, $$, to render equations on a new line;
-                Example: $$x^2 + 3x$$ is output for "x² + 3x" to appear as TeX.`,
-                model: 'gpt-4-turbo',
-                tools: [{ type: 'file_search' }, { type: 'code_interpreter' }],
-                tool_resources: {
-                    file_search: {
-                        vector_store_ids: [vectorStore.id],
-                    },
-                    code_interpreter: {
-                        file_ids: this.linkedCsvIDs,
-                    },
-                },
-            });
-            const thread = await this.openai.beta.threads.create();
-
-            runInAction(() => {
-                this.dataDoc.assistant_id = assistant.id;
-                this.dataDoc.thread_id = thread.id;
-                this.dataDoc.vector_store_id = vectorStore.id;
-                this.assistantID = assistant.id;
-                this.threadID = thread.id;
-                this.vectorStoreID = vectorStore.id;
-                this.isInitializing = false;
-            });
-        } catch (error) {
-            console.error('Initialization failed:', error);
-            this.isInitializing = false;
-        }
-    };
-
-    @action
-    runAssistant = async (inputText: string) => {
-        // Ensure an assistant and thread are created
-        if (!this.assistantID || !this.threadID || !this.vectorStoreID) {
-            await this.createAssistant();
-            console.log('Assistant and thread created:', this.assistantID, this.threadID);
-        }
-        let currentText: string = '';
-        let currentToolCallMessage: string = '';
-
-        // Send the user's input to the assistant
-        await this.openai.beta.threads.messages.create(this.threadID, {
-            role: 'user',
-            content: inputText,
-        });
-
-        // Listen to the streaming responses
-        const stream = this.openai.beta.threads.runs
-            .stream(this.threadID, {
-                assistant_id: this.assistantID,
-            })
-            .on('runStepCreated', (runStep: RunStep) => {
-                currentText = '';
-                runInAction(() => {
-                    this.current_message = { role: ASSISTANT_ROLE.ASSISTANT, text: currentText, tool_logs: '', links: [] };
-                });
-                this.isLoading = true;
-            })
-            .on('toolCallDelta', (toolCallDelta, snapshot) => {
-                this.isLoading = false;
-                if (toolCallDelta.type === 'code_interpreter') {
-                    if (toolCallDelta.code_interpreter?.input) {
-                        currentToolCallMessage += toolCallDelta.code_interpreter.input;
-                        runInAction(() => {
-                            if (this.current_message) {
-                                this.current_message.tool_logs = currentToolCallMessage;
-                            }
-                        });
-                    }
-                    if (toolCallDelta.code_interpreter?.outputs) {
-                        currentToolCallMessage += '\n Code interpreter output:';
-                        toolCallDelta.code_interpreter.outputs.forEach(output => {
-                            if (output.type === 'logs') {
-                                runInAction(() => {
-                                    if (this.current_message) {
-                                        this.current_message.tool_logs += '\n|' + output.logs;
-                                    }
-                                });
-                            }
-                        });
-                    }
-                }
-            })
-            .on('textDelta', (textDelta, snapshot) => {
-                this.isLoading = false;
-                currentText += textDelta.value;
-                runInAction(() => {
-                    if (this.current_message) {
-                        // this.current_message = {...this.current_message, text: current_text};
-                        this.current_message.text = currentText;
-                    }
-                });
-            })
-            .on('messageDone', async event => {
-                console.log(event);
-                const textItem = event.content.find(item => item.type === 'text');
-                if (textItem && textItem.type === 'text') {
-                    const { text } = textItem;
-                    console.log(text.value);
-                    try {
-                        runInAction(() => {
-                            this.interim_history = text.value;
-                        });
-                    } catch (e) {
-                        console.error('Error parsing JSON response:', e);
-                    }
-
-                    const { annotations } = text;
-                    console.log('Annotations: ' + annotations);
-                    let index = 0;
-                    annotations.forEach(async annotation => {
-                        console.log(' ' + annotation);
-                        console.log(' ' + annotation.text);
-                        if (annotation.type === 'file_path') {
-                            const { file_path: filePath } = annotation;
-                            const fileToDownload = filePath.file_id;
-                            console.log(fileToDownload);
-                            if (filePath) {
-                                console.log(filePath);
-                                console.log(fileToDownload);
-                                this.createLink(fileToDownload, annotation.start_index, annotation.end_index, ANNOTATION_LINK_TYPE.DOWNLOAD_FILE);
-                            }
-                        } else {
-                            const { file_citation: fileCitation } = annotation;
-                            if (fileCitation) {
-                                const citedFile = await this.openai.files.retrieve(fileCitation.file_id);
-                                const citationUrl = citedFile.filename;
-                                this.createLink(citationUrl, annotation.start_index, annotation.end_index, ANNOTATION_LINK_TYPE.DASH_DOC, index);
-                                index++;
-                            }
-                        }
-                    });
-                    runInAction(() => {
-                        if (this.current_message) {
-                            console.log('current message: ' + this.current_message.text);
-                            this.current_message.text = this.interim_history;
-                            this.history.push({ ...this.current_message });
-                            this.current_message = undefined;
-                        }
-                    });
-                }
-            })
-            .on('toolCallDone', toolCall => {
-                runInAction(() => {
-                    if (this.current_message && currentToolCallMessage) {
-                        this.current_message.tool_logs = currentToolCallMessage;
-                    }
-                });
-            })
-            .on('imageFileDone', (content: ImageFile, snapshot: Message) => {
-                console.log('Image file done:', content);
-            })
-            .on('end', () => {
-                console.log('Streaming done');
-            });
-    };
-
-    @action
-    goToLinkedDoc = async (link: string) => {
-        const linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.Document)
-            .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
-            .map(d => DocCast(d?.annotationOn, d))
-            .filter(d => d);
-
-        const linkedDoc = linkedDocs.find(doc => {
-            const docUrl = CsvCast(doc.data, PDFCast(doc.data)).url.pathname.replace('/files/pdfs/', '').replace('/files/csvs/', '');
-            console.log('URL: ' + docUrl + ' Citation URL: ' + link);
-            return link === docUrl;
-        });
-
-        if (linkedDoc) {
-            await DocumentManager.Instance.showDocument(DocCast(linkedDoc), { willZoomCentered: true }, () => {});
-        }
-    };
-
-    @action
-    askGPT = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
-        event.preventDefault();
-
-        const textInput = event.currentTarget.elements.namedItem('messageInput') as HTMLInputElement;
-        const trimmedText = textInput.value.trim();
-
-        if (!this.assistantID || !this.threadID) {
-            try {
-                await this.createAssistant();
-            } catch (err) {
-                console.error('Error:', err);
-            }
-        }
-
-        if (trimmedText) {
-            try {
-                textInput.value = '';
-                runInAction(() => {
-                    this.history.push({ role: ASSISTANT_ROLE.USER, text: trimmedText });
-                });
-                await this.runAssistant(trimmedText);
-                this.dataDoc.data = this.history.toString();
-            } catch (err) {
-                console.error('Error:', err);
-            }
-        }
-    };
-
-    @action
-    uploadLinks = async (linkedDocs: Doc[]) => {
-        if (this.isInitializing) {
-            console.log('Initialization in progress, upload aborted.');
-            return;
-        }
-        const urls = linkedDocs.map(doc => CsvCast(doc.data, PDFCast(doc.data)).url.pathname);
-        const csvUrls = urls.filter(url => url.endsWith('.csv'));
-        console.log(this.assistantID, this.threadID, urls);
-
-        const { openai_file_ids: openaiFileIds } = await Networking.PostToServer('/uploadPDFToVectorStore', { urls, threadID: this.threadID, assistantID: this.assistantID, vector_store_id: this.vectorStoreID });
-
-        linkedDocs.forEach((doc, i) => {
-            doc[this.Document[Id] + '_ai_field_id'] = openaiFileIds[i];
-            console.log('AI Field ID: ' + openaiFileIds[i]);
-        });
-
-        if (csvUrls.length > 0) {
-            for (let i = 0; i < csvUrls.length; i++) {
-                this.linkedCsvIDs.push(openaiFileIds[urls.indexOf(csvUrls[i])]);
-            }
-            console.log('linked csvs:' + this.linkedCsvIDs);
-            await this.openai.beta.assistants.update(this.assistantID, {
-                tools: [{ type: 'file_search' }, { type: 'code_interpreter' }],
-                tool_resources: {
-                    file_search: {
-                        vector_store_ids: [this.vectorStoreID],
-                    },
-                    code_interpreter: {
-                        file_ids: this.linkedCsvIDs,
-                    },
-                },
-            });
-        }
-    };
-
-    downloadToComputer = (url: string, fileName: string) => {
-        fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
-            .then(res => res.blob())
-            .then(res => {
-                const aElement = document.createElement('a');
-                aElement.setAttribute('download', fileName);
-                const href = URL.createObjectURL(res);
-                aElement.href = href;
-                aElement.setAttribute('target', '_blank');
-                aElement.click();
-                URL.revokeObjectURL(href);
-            });
-    };
-
-    createDocumentInDash = async (url: string) => {
-        const fileSuffix = url.substring(url.lastIndexOf('.') + 1);
-        console.log(fileSuffix);
-        let doc: Doc | null = null;
-        switch (fileSuffix) {
-            case 'pdf':
-                doc = DocCast(await DocUtils.DocumentFromType('pdf', url, {}));
-                break;
-            case 'csv':
-                doc = DocCast(await DocUtils.DocumentFromType('csv', url, {}));
-                break;
-            case 'png':
-            case 'jpg':
-            case 'jpeg':
-                doc = DocCast(await DocUtils.DocumentFromType('image', url, {}));
-                break;
-            default:
-                console.error('Unsupported file type:', fileSuffix);
-                break;
-        }
-        if (doc) {
-            doc && this._props.addDocument?.(doc);
-            await DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {});
-        }
-    };
-
-    downloadFile = async (fileInfo: string, downloadType: DOWNLOAD_TYPE) => {
-        try {
-            console.log(fileInfo);
-            const [fileId, fileName] = fileInfo.split(/!!!/);
-            const { file_path: filePath } = await Networking.PostToServer('/downloadFileFromOpenAI', { file_id: fileId, file_name: fileName });
-            const fileLink = CsvCast(new CsvField(filePath)).url.href;
-            if (downloadType === DOWNLOAD_TYPE.DASH) {
-                this.createDocumentInDash(fileLink);
-            } else {
-                this.downloadToComputer(fileLink, fileName);
-            }
-        } catch (error) {
-            console.error('Error downloading file:', error);
-        }
-    };
-
-    handleDownloadToDevice = () => {
-        this.downloadFile(this.currentFile.url, DOWNLOAD_TYPE.DEVICE);
-        this.modalStatus = false; // Close the modal after the action
-        this.currentFile = { url: '' }; // Reset the current file
-    };
-
-    handleAddToDash = () => {
-        // Assuming `downloadFile` is a method that handles adding to Dash
-        this.downloadFile(this.currentFile.url, DOWNLOAD_TYPE.DASH);
-        this.modalStatus = false; // Close the modal after the action
-        this.currentFile = { url: '' }; // Reset the current file
-    };
-
-    renderModal = () => {
-        if (!this.modalStatus) return null;
-
-        return (
-            <div className="modal">
-                <div className="modal-content">
-                    <h4>File Actions</h4>
-                    <p>Choose an action for the file:</p>
-                    <button type="button" onClick={this.handleDownloadToDevice}>
-                        Download to Device
-                    </button>
-                    <button type="button" onClick={this.handleAddToDash}>
-                        Add to Dash
-                    </button>
-                    <button
-                        type="button"
-                        onClick={() => {
-                            this.modalStatus = false;
-                        }}>
-                        Cancel
-                    </button>
-                </div>
-            </div>
-        );
-    };
-    @action
-    showModal = () => {
-        this.modalStatus = true;
-    };
-
-    @action
-    setCurrentFile = (file: { url: string }) => {
-        this.currentFile = file;
-    };
-
-    componentDidMount() {
-        this._props.setContentViewBox?.(this);
-        if (this.dataDoc.data) {
-            try {
-                const storedHistory = JSON.parse(StrCast(this.dataDoc.data));
-                runInAction(() => {
-                    this.history = storedHistory.map((msg: AssistantMessage) => ({
-                        role: msg.role,
-                        text: msg.text,
-                        quote: msg.quote,
-                        tool_logs: msg.tool_logs,
-                        image: msg.image,
-                    }));
-                });
-            } catch (e) {
-                console.error('Failed to parse history from dataDoc:', e);
-            }
-        }
-        reaction(
-            () => {
-                const linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.Document)
-                    .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
-                    .map(d => DocCast(d?.annotationOn, d))
-                    .filter(d => d);
-                return linkedDocs;
-            },
-
-            linked => this.linked_docs_to_add.push(...linked.filter(linkedDoc => !this.linked_docs_to_add.includes(linkedDoc)))
-        );
-
-        observe(
-            // right now this skips during initialization which is necessary because it would be blank
-            // However, it will upload the same link twice when it is
-            this.linked_docs_to_add,
-            change => {
-                // observe pushes/splices on a user link DB 'data' field (should only happen for local changes)
-                switch (change.type as any) {
-                    case 'splice':
-                        if ((change as any).addedCount > 0) {
-                            // maybe check here if its already in the urls datadoc array so doesn't add twice
-                            console.log((change as any).added as Doc[]);
-                            this.uploadLinks((change as any).added as Doc[]);
-                        }
-                        // (change as any).removed.forEach((link: any) => remLinkFromDoc(toRealField(link)));
-                        break;
-                    case 'update': // let oldValue = change.oldValue;
-                    default:
-                }
-            },
-            true
-        );
-    }
-
-    render() {
-        return (
-            <MathJaxContext config={this.mathJaxConfig}>
-                <div className="chatBox">
-                    {this.isInitializing && <div className="initializing-overlay">Initializing...</div>}
-                    {this.renderModal()}
-                    <div
-                        className="scroll-box chat-content"
-                        ref={r => {
-                            this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
-                            this._oldWheel = r;
-                            r?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
-                        }}>
-                        <div className="messages">
-                            {this.history.map((message, index) => (
-                                <MessageComponent
-                                    key={index}
-                                    message={message}
-                                    toggleToolLogs={this.toggleToolLogs}
-                                    expandedLogIndex={this.expandedLogIndex}
-                                    index={index}
-                                    showModal={this.showModal}
-                                    goToLinkedDoc={this.goToLinkedDoc}
-                                    setCurrentFile={this.setCurrentFile}
-                                />
-                            ))}
-                            {!this.current_message ? null : (
-                                <MessageComponent
-                                    key={this.history.length}
-                                    message={this.current_message}
-                                    toggleToolLogs={this.toggleToolLogs}
-                                    expandedLogIndex={this.expandedLogIndex}
-                                    index={this.history.length}
-                                    showModal={this.showModal}
-                                    goToLinkedDoc={this.goToLinkedDoc}
-                                    setCurrentFile={this.setCurrentFile}
-                                    isCurrent
-                                />
-                            )}
-                        </div>
-                    </div>
-                    <form onSubmit={this.askGPT} className="chat-form">
-                        <input type="text" name="messageInput" autoComplete="off" placeholder="Type a message..." />
-                        <button type="submit">Send</button>
-                    </form>
-                </div>
-            </MathJaxContext>
-        );
-    }
-}
-
-Docs.Prototypes.TemplateMap.set(DocumentType.CHAT, {
-    layout: { view: ChatBox, dataField: 'data' },
-    options: { acl: '', chat: '', chat_history: '', chat_thread_id: '', chat_assistant_id: '', chat_vector_store_id: '' },
-});
diff --git a/src/client/views/nodes/ChatBox/MessageComponent.scss b/src/client/views/nodes/ChatBox/MessageComponent.scss
deleted file mode 100644
index 6fcc0e5e7..000000000
--- a/src/client/views/nodes/ChatBox/MessageComponent.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-MessageComponent-citation {
-    color: lightblue;
-    vertical-align: super;
-    font-size: smaller;
-}
-MessageComponent-file_path {
-    color: lightblue;
-    vertical-align: baseline;
-    font-size: inherit;
-}
diff --git a/src/client/views/nodes/ChatBox/MessageComponent.tsx b/src/client/views/nodes/ChatBox/MessageComponent.tsx
deleted file mode 100644
index f27a18891..000000000
--- a/src/client/views/nodes/ChatBox/MessageComponent.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-/* eslint-disable react/require-default-props */
-import { MathJax, MathJaxContext } from 'better-react-mathjax';
-import { observer } from 'mobx-react';
-import React from 'react';
-import * as Tb from 'react-icons/tb';
-import ReactMarkdown from 'react-markdown';
-import './MessageComponent.scss';
-import { AssistantMessage } from './types';
-
-const TbCircles = [
-    Tb.TbCircleNumber0Filled,
-    Tb.TbCircleNumber1Filled,
-    Tb.TbCircleNumber2Filled,
-    Tb.TbCircleNumber3Filled,
-    Tb.TbCircleNumber4Filled,
-    Tb.TbCircleNumber5Filled,
-    Tb.TbCircleNumber6Filled,
-    Tb.TbCircleNumber7Filled,
-    Tb.TbCircleNumber8Filled,
-    Tb.TbCircleNumber9Filled,
-];
-interface MessageComponentProps {
-    message: AssistantMessage;
-    toggleToolLogs: (index: number) => void;
-    expandedLogIndex: number | null;
-    index: number;
-    showModal: () => void;
-    goToLinkedDoc: (url: string) => void;
-    setCurrentFile: (file: { url: string }) => void;
-    isCurrent?: boolean;
-}
-
-const LinkRendererWrapper = (goToLinkedDoc: (url: string) => void, showModal: () => void, setCurrentFile: (file: { url: string }) => void) =>
-    function LinkRenderer({ href, children }: { href?: string; children?: React.ReactNode }) {
-        const Children = TbCircles[Number(children)]; // pascal case variable needed to convert IconType to JSX.Element tag
-        const [, aurl, linkType] = href?.match(/([a-zA-Z0-9_.!-]+)~~~(citation|file_path)/) ?? [undefined, href, null];
-        const renderType = (content: JSX.Element | null, click: (url: string) => void):JSX.Element => (
-            // eslint-disable-next-line jsx-a11y/anchor-is-valid
-            <a className={`MessageComponent-${linkType}`}
-                href="#"
-                onClick={e => {
-                    e.preventDefault();
-                    aurl && click(aurl);
-                }}>
-                {content}
-            </a> 
-        ); // prettier-ignore
-        switch (linkType) {
-            case 'citation':   return renderType(<Children />, (url: string) => goToLinkedDoc(url));
-            case 'file_path':  return renderType(null, (url: string) => { showModal(); setCurrentFile({ url }); });
-            default:           return null;
-        } // prettier-ignore
-    };
-
-const MessageComponent: React.FC<MessageComponentProps> = function ({ message, toggleToolLogs, expandedLogIndex, goToLinkedDoc, index, showModal, setCurrentFile, isCurrent = false }) {
-    // const messageClass = `${message.role} ${isCurrent ? 'current-message' : ''}`;
-    return (
-        <div className={`message ${message.role}`}>
-            <MathJaxContext>
-                <MathJax dynamic hideUntilTypeset="every">
-                    <ReactMarkdown components={{ a: LinkRendererWrapper(goToLinkedDoc, showModal, setCurrentFile) }}>{message.text}</ReactMarkdown>
-                </MathJax>
-            </MathJaxContext>
-            {message.image && <img src={message.image} alt="" />}
-            <div className="message-footer">
-                {message.tool_logs && (
-                    <button type="button" className="toggle-logs-button" onClick={() => toggleToolLogs(index)}>
-                        {expandedLogIndex === index ? 'Hide Code Interpreter Logs' : 'Show Code Interpreter Logs'}
-                    </button>
-                )}
-                {expandedLogIndex === index && (
-                    <div className="tool-logs">
-                        <pre>{message.tool_logs}</pre>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default observer(MessageComponent);
diff --git a/src/client/views/nodes/ChatBox/types.ts b/src/client/views/nodes/ChatBox/types.ts
deleted file mode 100644
index 8212a7050..000000000
--- a/src/client/views/nodes/ChatBox/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export enum ASSISTANT_ROLE {
-    USER = 'User',
-    ASSISTANT = 'Assistant',
-}
-
-export enum ANNOTATION_LINK_TYPE {
-    DASH_DOC = 'citation',
-    DOWNLOAD_FILE = 'file_path',
-}
-
-export enum DOWNLOAD_TYPE {
-    DASH = 'dash',
-    DEVICE = 'device',
-}
-
-export interface AssistantMessage {
-    role: ASSISTANT_ROLE;
-    text: string;
-    quote?: string;
-    image?: string;
-    tool_logs?: string;
-    links?: { start: number; end: number; url: string; id?: string; link_type: ANNOTATION_LINK_TYPE }[];
-}
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 39a2e3a31..c1446a77a 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -274,7 +274,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 return;
             }
             this._outputValue = res;
-        } catch (err) {
+        } catch {
             console.error('GPT call failed');
         }
     };
@@ -301,7 +301,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             return targetDoc || layoutString ? (
                 <>
                     <DocumentView
-                        // eslint-disable-next-line react/jsx-props-no-spreading
                         {...this._props}
                         fitWidth={undefined}
                         NativeHeight={returnZero}
@@ -342,7 +341,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[1]);
                 // if there is text from the pdf ai cards, put the question on the front side.
-                // eslint-disable-next-line prefer-destructuring
                 newDoc[DocData].text = dataSplit[1];
                 this.addDoc(newDoc, this.fieldKey + '_0');
             }
@@ -350,7 +348,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[0]);
                 // if there is text from the pdf ai cards, put the answer on the alternate side.
-                // eslint-disable-next-line prefer-destructuring
                 newDoc[DocData].text = dataSplit[0];
                 this.addDoc(newDoc, this.fieldKey + '_1');
             }
diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index 62798bc2f..7e91df7ab 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable react/no-array-index-key */
-/* eslint-disable react/require-default-props */
 import * as React from 'react';
 import { useEffect, useState, useRef } from 'react';
 import './ProgressBar.scss';
diff --git a/src/client/views/nodes/chatbot/agentsystem/Agent.ts b/src/client/views/nodes/chatbot/agentsystem/Agent.ts
new file mode 100644
index 000000000..ccf9caf15
--- /dev/null
+++ b/src/client/views/nodes/chatbot/agentsystem/Agent.ts
@@ -0,0 +1,277 @@
+import dotenv from 'dotenv';
+import { XMLBuilder, XMLParser } from 'fast-xml-parser';
+import OpenAI from 'openai';
+import { ChatCompletionMessageParam } from 'openai/resources';
+import { AnswerParser } from '../response_parsers/AnswerParser';
+import { StreamedAnswerParser } from '../response_parsers/StreamedAnswerParser';
+import { CalculateTool } from '../tools/CalculateTool';
+import { CreateCSVTool } from '../tools/CreateCSVTool';
+import { DataAnalysisTool } from '../tools/DataAnalysisTool';
+import { NoTool } from '../tools/NoTool';
+import { RAGTool } from '../tools/RAGTool';
+import { SearchTool } from '../tools/SearchTool';
+import { WebsiteInfoScraperTool } from '../tools/WebsiteInfoScraperTool';
+import { AgentMessage, AssistantMessage, PROCESSING_TYPE, ProcessingInfo, Tool } from '../types/types';
+import { Vectorstore } from '../vectorstore/Vectorstore';
+import { getReactPrompt } from './prompts';
+
+dotenv.config();
+
+/**
+ * The Agent class handles the interaction between the assistant and the tools available,
+ * processes user queries, and manages the communication flow between the tools and OpenAI.
+ */
+export class Agent {
+    // Private properties
+    private client: OpenAI;
+    private tools: Record<string, Tool<any>>; // bcz: need a real type here
+    private messages: AgentMessage[] = [];
+    private interMessages: AgentMessage[] = [];
+    private vectorstore: Vectorstore;
+    private _history: () => string;
+    private _summaries: () => string;
+    private _csvData: () => { filename: string; id: string; text: string }[];
+    private actionNumber: number = 0;
+    private thoughtNumber: number = 0;
+    private processingNumber: number = 0;
+    private processingInfo: ProcessingInfo[] = [];
+    private streamedAnswerParser: StreamedAnswerParser = new StreamedAnswerParser();
+
+    /**
+     * The constructor initializes the agent with the vector store and toolset, and sets up the OpenAI client.
+     * @param _vectorstore Vector store instance for document storage and retrieval.
+     * @param summaries A function to retrieve document summaries.
+     * @param history A function to retrieve chat history.
+     * @param csvData A function to retrieve CSV data linked to the assistant.
+     * @param addLinkedUrlDoc A function to add a linked document from a URL.
+     * @param createCSVInDash A function to create a CSV document in the dashboard.
+     */
+    constructor(
+        _vectorstore: Vectorstore,
+        summaries: () => string,
+        history: () => string,
+        csvData: () => { filename: string; id: string; text: string }[],
+        addLinkedUrlDoc: (url: string, id: string) => void,
+        createCSVInDash: (url: string, title: string, id: string, data: string) => void
+    ) {
+        // Initialize OpenAI client with API key from environment
+        this.client = new OpenAI({ apiKey: process.env.OPENAI_KEY, dangerouslyAllowBrowser: true });
+        this.vectorstore = _vectorstore;
+        this._history = history;
+        this._summaries = summaries;
+        this._csvData = csvData;
+
+        // Define available tools for the assistant
+        this.tools = {
+            calculate: new CalculateTool(),
+            rag: new RAGTool(this.vectorstore),
+            dataAnalysis: new DataAnalysisTool(csvData),
+            websiteInfoScraper: new WebsiteInfoScraperTool(addLinkedUrlDoc),
+            searchTool: new SearchTool(addLinkedUrlDoc),
+            createCSV: new CreateCSVTool(createCSVInDash),
+            no_tool: new NoTool(),
+        };
+    }
+
+    /**
+     * This method handles the conversation flow with the assistant, processes user queries,
+     * and manages the assistant's decision-making process, including tool actions.
+     * @param question The user's question.
+     * @param onProcessingUpdate Callback function for processing updates.
+     * @param onAnswerUpdate Callback function for answer updates.
+     * @param maxTurns The maximum number of turns to allow in the conversation.
+     * @returns The final response from the assistant.
+     */
+    async askAgent(question: string, onProcessingUpdate: (processingUpdate: ProcessingInfo[]) => void, onAnswerUpdate: (answerUpdate: string) => void, maxTurns: number = 30): Promise<AssistantMessage> {
+        console.log(`Starting query: ${question}`);
+
+        // Push user's question to message history
+        this.messages.push({ role: 'user', content: question });
+
+        // Retrieve chat history and generate system prompt
+        const chatHistory = this._history();
+        const systemPrompt = getReactPrompt(Object.values(this.tools), this._summaries, chatHistory);
+
+        // Initialize intermediate messages
+        this.interMessages = [{ role: 'system', content: systemPrompt }];
+        this.interMessages.push({ role: 'user', content: `<stage number="1" role="user"><query>${question}</query></stage>` });
+
+        // Setup XML parser and builder
+        const parser = new XMLParser({
+            ignoreAttributes: false,
+            attributeNamePrefix: '@_',
+            textNodeName: '_text',
+            isArray: (name /* , jpath, isLeafNode, isAttribute */) => ['query', 'url'].indexOf(name) !== -1,
+        });
+        const builder = new XMLBuilder({ ignoreAttributes: false, attributeNamePrefix: '@_' });
+
+        let currentAction: string | undefined;
+        this.processingInfo = [];
+
+        // Conversation loop (up to maxTurns)
+        for (let i = 2; i < maxTurns; i += 2) {
+            console.log(this.interMessages);
+            console.log(`Turn ${i}/${maxTurns}`);
+
+            // Execute a step in the conversation and get the result
+            const result = await this.execute(onProcessingUpdate, onAnswerUpdate);
+            this.interMessages.push({ role: 'assistant', content: result });
+
+            let parsedResult;
+            try {
+                // Parse XML result from the assistant
+                parsedResult = parser.parse(result);
+            } catch (error) {
+                throw new Error(`Error parsing response: ${error}`);
+            }
+
+            // Extract the stage from the parsed result
+            const stage = parsedResult.stage;
+            if (!stage) {
+                throw new Error(`Error: No stage found in response`);
+            }
+
+            // Handle different stage elements (thoughts, actions, inputs, answers)
+            for (const key in stage) {
+                if (key === 'thought') {
+                    // Handle assistant's thoughts
+                    console.log(`Thought: ${stage[key]}`);
+                    this.processingNumber++;
+                } else if (key === 'action') {
+                    // Handle action stage
+                    currentAction = stage[key] as string;
+                    console.log(`Action: ${currentAction}`);
+
+                    if (this.tools[currentAction]) {
+                        // Prepare the next action based on the current tool
+                        const nextPrompt = [
+                            {
+                                type: 'text',
+                                text: `<stage number="${i + 1}" role="user">` + builder.build({ action_rules: this.tools[currentAction].getActionRule() }) + `</stage>`,
+                            },
+                        ];
+                        this.interMessages.push({ role: 'user', content: nextPrompt });
+                        break;
+                    } else {
+                        // Handle error in case of an invalid action
+                        console.log('Error: No valid action');
+                        this.interMessages.push({ role: 'user', content: `<stage number="${i + 1}" role="system-error-reporter">No valid action, try again.</stage>` });
+                        break;
+                    }
+                } else if (key === 'action_input') {
+                    // Handle action input stage
+                    const actionInput = stage[key];
+                    console.log(`Action input:`, actionInput.inputs);
+
+                    if (currentAction) {
+                        try {
+                            // Process the action with its input
+                            const observation = (await this.processAction(currentAction, actionInput.inputs)) as any; // bcz: really need a type here
+                            const nextPrompt = [{ type: 'text', text: `<stage number="${i + 1}" role="user"> <observation>` }, ...observation, { type: 'text', text: '</observation></stage>' }];
+                            console.log(observation);
+                            this.interMessages.push({ role: 'user', content: nextPrompt });
+                            this.processingNumber++;
+                            break;
+                        } catch (error) {
+                            throw new Error(`Error processing action: ${error}`);
+                        }
+                    } else {
+                        throw new Error('Error: Action input without a valid action');
+                    }
+                } else if (key === 'answer') {
+                    // If an answer is found, end the query
+                    console.log('Answer found. Ending query.');
+                    this.streamedAnswerParser.reset();
+                    const parsedAnswer = AnswerParser.parse(result, this.processingInfo);
+                    return parsedAnswer;
+                }
+            }
+        }
+
+        throw new Error('Reached maximum turns. Ending query.');
+    }
+
+    /**
+     * Executes a step in the conversation, processing the assistant's response and parsing it in real-time.
+     * @param onProcessingUpdate Callback for processing updates.
+     * @param onAnswerUpdate Callback for answer updates.
+     * @returns The full response from the assistant.
+     */
+    private async execute(onProcessingUpdate: (processingUpdate: ProcessingInfo[]) => void, onAnswerUpdate: (answerUpdate: string) => void): Promise<string> {
+        // Stream OpenAI response for real-time updates
+        const stream = await this.client.chat.completions.create({
+            model: 'gpt-4o',
+            messages: this.interMessages as ChatCompletionMessageParam[],
+            temperature: 0,
+            stream: true,
+        });
+
+        let fullResponse: string = '';
+        let currentTag: string = '';
+        let currentContent: string = '';
+        let isInsideTag: boolean = false;
+
+        // Process each chunk of the streamed response
+        for await (const chunk of stream) {
+            const content = chunk.choices[0]?.delta?.content || '';
+            fullResponse += content;
+
+            // Parse the streamed content character by character
+            for (const char of content) {
+                if (currentTag === 'answer') {
+                    // Handle answer parsing for real-time updates
+                    currentContent += char;
+                    const streamedAnswer = this.streamedAnswerParser.parse(char);
+                    onAnswerUpdate(streamedAnswer);
+                    continue;
+                } else if (char === '<') {
+                    // Start of a new tag
+                    isInsideTag = true;
+                    currentTag = '';
+                    currentContent = '';
+                } else if (char === '>') {
+                    // End of the tag
+                    isInsideTag = false;
+                    if (currentTag.startsWith('/')) {
+                        currentTag = '';
+                    }
+                } else if (isInsideTag) {
+                    // Append characters to the tag name
+                    currentTag += char;
+                } else if (currentTag === 'thought' || currentTag === 'action_input_description') {
+                    // Handle processing information for thought or action input description
+                    currentContent += char;
+                    const current_info = this.processingInfo.find(info => info.index === this.processingNumber);
+                    if (current_info) {
+                        current_info.content = currentContent.trim();
+                        onProcessingUpdate(this.processingInfo);
+                    } else {
+                        this.processingInfo.push({
+                            index: this.processingNumber,
+                            type: currentTag === 'thought' ? PROCESSING_TYPE.THOUGHT : PROCESSING_TYPE.ACTION,
+                            content: currentContent.trim(),
+                        });
+                        onProcessingUpdate(this.processingInfo);
+                    }
+                }
+            }
+        }
+
+        return fullResponse;
+    }
+
+    /**
+     * Processes a specific action by invoking the appropriate tool with the provided inputs.
+     * @param action The action to perform.
+     * @param actionInput The inputs for the action.
+     * @returns The result of the action.
+     */
+    private async processAction(action: string, actionInput: unknown): Promise<unknown> {
+        if (!(action in this.tools)) {
+            throw new Error(`Unknown action: ${action}`);
+        }
+
+        const tool = this.tools[action];
+        return await tool.execute(actionInput);
+    }
+}
diff --git a/src/client/views/nodes/chatbot/agentsystem/prompts.ts b/src/client/views/nodes/chatbot/agentsystem/prompts.ts
new file mode 100644
index 000000000..f5aec3130
--- /dev/null
+++ b/src/client/views/nodes/chatbot/agentsystem/prompts.ts
@@ -0,0 +1,216 @@
+/**
+ * @file prompts.ts
+ * @description This file contains functions that generate prompts for various AI tasks, including
+ * generating system messages for structured AI assistant interactions and summarizing document chunks.
+ * It defines prompt structures to ensure the AI follows specific guidelines for response formatting,
+ * tool usage, and citation rules, with a rigid structure in mind for tasks such as answering user queries
+ * and summarizing content from provided text chunks.
+ */
+
+import { Tool } from '../types/types';
+
+export function getReactPrompt(tools: Tool[], summaries: () => string, chatHistory: string): string {
+    const toolDescriptions = tools
+        .map(
+            tool => `
+        <tool>
+            <title>${tool.name}</title>
+            <brief_summary>${tool.briefSummary}</brief_summary>
+        </tool>`
+        )
+        .join('\n');
+
+    return `<system_message>
+    <task>
+        You are an advanced AI assistant equipped with tools to answer user queries efficiently. You operate in a loop that is RIGIDLY structured and requires the use of specific tags and formats for your responses. Your goal is to provide accurate and well-structured answers to user queries. Below are the guidelines and information you can use to structure your approach to accomplishing this task.
+    </task>
+
+    <critical_points>
+        <point>**STRUCTURE**: Always use the correct stage tags (e.g., <stage number="2" role="assistant">) for every response. Use only even-numbered stages for your responses.</point>
+        <point>**STOP after every stage and wait for input. Do not combine multiple stages in one response.**</point>
+        <point>If a tool is needed, select the most appropriate tool based on the query.</point>
+        <point>**If one tool does not yield satisfactory results or fails twice, try another tool that might work better for the query.** This often happens with the rag tool, which may not yeild great results. If this happens, try the search tool.</point>
+        <point>Ensure that **ALL answers follow the answer structure**: grounded text wrapped in <grounded_text> tags with corresponding citations, normal text in <normal_text> tags, and three follow-up questions at the end.</point>
+        <point>If you use a tool that will do something (i.e. creating a CSV), and want to also use a tool that will provide you with information (i.e. RAG), use the tool that will provide you with information first. Then proceed with the tool that will do something.</point>
+    </critical_points>
+
+    <thought_structure>
+        <thought>
+            <description>
+                Always provide a thought before each action to explain why you are choosing the next step or tool. This helps clarify your reasoning for the action you will take.
+            </description>
+        </thought>
+    </thought_structure>
+
+    <action_input_structure>
+        <action_input>
+            <action_input_description>
+                Always describe what the action will do in the <action_input_description> tag. Be clear about how the tool will process the input and why it is appropriate for this stage.
+            </action_input_description>
+            <inputs>
+                <description>
+                    Provide the actual inputs for the action in the <inputs> tag. Ensure that each input is specific to the tool being used. Inputs should match the expected parameters for the tool (e.g., a search term for the website scraper, document references for RAG).
+                </description>
+            </inputs>
+        </action_input>
+    </action_input_structure>
+
+    <answer_structure>
+        ALL answers must follow this structure and everything must be witin the <answer> tag:
+        <answer>
+            <grounded_text> - All information derived from tools or user documents must be wrapped in these tags with proper citation. This should not be word for word, but paraphrased from the text.</grounded_text>
+            <normal_text> - Use this tag for text not derived from tools or user documents. It should only be for narrative-like text or extremely common knowledge information.</normal_text>
+            <citations>
+                <citation> - Provide proper citations for each <grounded_text>, referencing the tool or document chunk used. ENSURE THAT THERE IS A CITATION WHOSE INDEX MATCHES FOR EVERY GROUNDED TEXT CITATION INDEX. </citation>
+            </citations>
+            <follow_up_questions> - Provide exactly three user-perspective follow-up questions.</follow_up_questions>
+            <loop_summary> - Summarize the actions and tools used in the conversation.</loop_summary>
+        </answer>
+    </answer_structure>
+
+    <grounded_text_guidelines>
+        <step>**Wrap ALL tool-based information** in <grounded_text> tags and provide citations.</step>
+        <step>Use separate <grounded_text> tags for distinct information or when switching to a different tool or document.</step>
+        <step>Ensure that **EVERY** <grounded_text> tag includes a citation index aligned with a citation that you provide that references the source of the information.</step>
+        <step>There should be a one-to-one relationship between <grounded_text> tags and citations.</step>
+        <step>Over-citing is discouraged—only cite the information that is directly relevant to the user's query.</step>
+        <step>Paraphrase the information in the <grounded_text> tags, but ensure that the meaning is preserved.</step>
+        <step>Do not include the full text of the chunk in the citation—only the relevant excerpt.</step>
+        <step>For text chunks, the citation content must reflect the exact subset of the original chunk that is relevant to the grounded_text tag.</step>
+        <step>Do not use citations from previous interactions. Only use citations from the current action loop.</step>
+    </grounded_text_guidelines>
+
+    <normal_text_guidelines>
+        <step>Wrap general information or reasoning **not derived from tools or documents** in <normal_text> tags.</step>
+        <step>Never put information derived from user documents or tools in <normal_text> tags—use <grounded_text> for those.</step>
+    </normal_text_guidelines>
+
+    <operational_process>
+        <step>Carefully analyze the user query and determine if a tool is necessary to provide an accurate answer.</step>
+        <step>If a tool is needed, choose the most appropriate one and **stop after the action** to wait for system input.</step>
+        <step>If no tool is needed, use the 'no_tool' action but follow the structure.</step>
+        <step>When all observations are complete, format the final answer using <grounded_text> and <normal_text> tags with appropriate citations.</step>
+        <step>Include exactly three follow-up questions from the user's perspective.</step>
+        <step>Provide a loop summary at the end of the conversation.</step>
+    </operational_process>
+
+    <tools>
+        ${toolDescriptions}
+        <note>If no external tool is required, use 'no_tool', but if there might be relevant external information, use the appropriate tool.</note>
+    </tools>
+
+    <summaries>
+        ${summaries()}
+    </summaries>
+
+    <chat_history>
+        ${chatHistory}
+    </chat_history>
+
+    <example_interaction>
+        <interaction description="Correct use of RAG and website scraping tools">
+            <stage number="1" role="user">
+                <query>Can you provide key moments from the 2022 World Cup and its impact on tourism in Qatar?</query>
+            </stage>
+
+            <stage number="2" role="assistant">
+                <thought>
+                    I will use the RAG tool to retrieve key moments from the user's World Cup documents. Afterward, I will use the website scraper tool to gather tourism impact data on Qatar.
+                </thought>
+                <action>rag</action>
+            </stage>
+
+            <stage number="3" role="user">
+                <action_rules>***Action rules omitted***</action_rules>
+            </stage>
+
+            <stage number="4" role="assistant">
+                <action_input>
+                    <action_input_description>Searching user documents for key moments from the 2022 World Cup.</action_input_description>
+                    <inputs>
+                        <hypothetical_document_chunk>Key moments from the 2022 World Cup. Goals, assists, big wins, big losses.</hypothetical_document_chunk>
+                    </inputs>
+                </action_input>
+            </stage>
+
+            <stage number="5" role="user">
+                <observation>
+                    <chunk chunk_id="1234" chunk_type="text">
+                        The 2022 FIFA World Cup saw Argentina win, with Lionel Messi's performance being a key highlight. It was widely celebrated as a historical moment in sports.
+                    </chunk>
+                </observation>
+            </stage>
+
+            <stage number="6" role="assistant">
+                <thought>
+                    With key moments from the World Cup retrieved, I will now use the website scraper tool to gather data on Qatar's tourism impact during the World Cup.
+                </thought>
+                <action>websiteInfoScraper</action>
+            </stage>
+
+            <stage number="7" role="user">
+                <action_rules>***Action rules omitted***</action_rules>
+            </stage>
+
+            <stage number="8" role="assistant">
+                <action_input>
+                    <action_input_description>Scraping websites for information about Qatar's tourism impact during the 2022 World Cup.</action_input_description>
+                    <inputs>
+                        <query>Tourism impact of the 2022 World Cup in Qatar</query>
+                    </inputs>
+                </action_input>
+            </stage>
+
+            <stage number="9" role="user">
+                <observation>
+                    <chunk chunk_id="5678" chunk_type="url">
+                        <url>https://www.qatartourism.com/world-cup-impact</url>
+                        <overview>During the 2022 World Cup, Qatar saw a 40% increase in tourism, with over 1.5 million visitors attending.</overview>
+                    </chunk>
+                </observation>
+            </stage>
+
+            <stage number="10" role="assistant">
+                <thought>
+                    Now that I have gathered both key moments from the World Cup and tourism impact data from Qatar, I will summarize the information in my final response.
+                </thought>
+                <answer>
+                    <grounded_text citation_index="1">**The 2022 World Cup** saw Argentina crowned champions, with **Lionel Messi** leading his team to victory, marking a historic moment in sports.</grounded_text>
+                    <grounded_text citation_index="2">**Qatar** experienced a **40% increase in tourism** during the World Cup, welcoming over **1.5 million visitors**, significantly boosting its economy.</grounded_text>
+                    <normal_text>Moments like **Messi’s triumph** often become ingrained in the legacy of World Cups, immortalizing these tournaments in both sports and cultural memory. The **long-term implications** of the World Cup on Qatar's **economy, tourism**, and **global image** remain important areas of interest as the country continues to build on the momentum generated by hosting this prestigious event.</normal_text>
+                    <citations>
+                        <citation index="1" chunk_id="1234" type="text">Key moments from the 2022 World Cup.</citation>
+                        <citation index="2" chunk_id="5678" type="url"></citation>
+                    </citations>
+                    <follow_up_questions>
+                        <question>What long-term effects has the World Cup had on Qatar's economy and infrastructure?</question>
+                        <question>Can you compare Qatar's tourism numbers with previous World Cup hosts?</question>
+                        <question>How has Qatar’s image on the global stage evolved post-World Cup?</question>
+                    </follow_up_questions>
+                    <loop_summary>
+                        The assistant first used the RAG tool to extract key moments from the user documents about the 2022 World Cup. Then, the assistant utilized the website scraping tool to gather data on Qatar's tourism impact. Both tools provided valuable information, and no additional tools were needed. 
+                    </loop_summary>
+                </answer>
+            </stage>
+        </interaction>
+    </example_interaction>
+
+    <final_instruction>
+        Process the user's query according to these rules. Ensure your final answer is comprehensive, well-structured, and includes citations where appropriate.
+    </final_instruction>
+</system_message>`;
+}
+
+export function getSummarizedChunksPrompt(chunks: string): string {
+    return `Please provide a comprehensive summary of what you think the document from which these chunks originated. 
+                    Ensure the summary captures the main ideas and key points from all provided chunks. Be concise and brief and only provide the summary in paragraph form.
+
+                    Text chunks:
+                    \`\`\`
+                    ${chunks}
+                    \`\`\``;
+}
+
+export function getSummarizedSystemPrompt(): string {
+    return 'You are an AI assistant tasked with summarizing a document. You are provided with important chunks from the document and provide a summary, as best you can, of what the document will contain overall. Be concise and brief with your response.';
+}
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
new file mode 100644
index 000000000..50111f678
--- /dev/null
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -0,0 +1,277 @@
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+$primary-color: #4a90e2;
+$secondary-color: #f5f8fa;
+$text-color: #333;
+$light-text-color: #777;
+$border-color: #e1e8ed;
+$shadow-color: rgba(0, 0, 0, 0.1);
+$transition: all 0.3s ease;
+.chat-box {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: #fff;
+    font-family:
+        'Atkinson Hyperlegible',
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px $shadow-color;
+    position: relative;
+
+    .chat-header {
+        background-color: $primary-color;
+        color: white;
+        padding: 15px;
+        text-align: center;
+        box-shadow: 0 2px 4px $shadow-color;
+        height: fit-content;
+
+        h2 {
+            margin: 0;
+            font-size: 1.3em;
+            font-weight: 500;
+        }
+    }
+
+    .chat-messages {
+        flex-grow: 1;
+        overflow-y: auto;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px; // Added to give space between elements
+
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: $border-color;
+            border-radius: 3px;
+        }
+    }
+
+    .chat-input {
+        display: flex;
+        padding: 20px;
+        border-top: 1px solid $border-color;
+        background-color: #fff;
+
+        input {
+            flex-grow: 1;
+            padding: 12px 15px;
+            border: 1px solid $border-color;
+            border-radius: 24px;
+            font-size: 15px;
+            transition: $transition;
+
+            &:focus {
+                outline: none;
+                border-color: $primary-color;
+                box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+            }
+        }
+
+        .submit-button {
+            background-color: $primary-color;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            margin-left: 10px;
+            cursor: pointer;
+            transition: $transition;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+
+            &:hover {
+                background-color: darken($primary-color, 10%);
+            }
+
+            &:disabled {
+                background-color: $light-text-color;
+                cursor: not-allowed;
+            }
+
+            .spinner {
+                height: 24px;
+                width: 24px;
+                border: 3px solid rgba(255, 255, 255, 0.3);
+                border-top: 3px solid #fff;
+                border-radius: 50%;
+                animation: spin 2s linear infinite;
+            }
+        }
+    }
+    .citation-popup {
+        position: fixed;
+        bottom: 50px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 10px 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+        animation: fadeIn 0.3s ease-in-out;
+
+        p {
+            margin: 0;
+            font-size: 14px;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.message {
+    max-width: 80%;
+    margin-bottom: 20px;
+    padding: 16px 20px;
+    border-radius: 18px;
+    font-size: 15px;
+    line-height: 1.5;
+    box-shadow: 0 2px 4px $shadow-color;
+    word-wrap: break-word; // To handle long words
+
+    &.user {
+        align-self: flex-end;
+        background-color: $primary-color;
+        color: white;
+        border-bottom-right-radius: 4px;
+    }
+
+    &.chatbot {
+        align-self: flex-start;
+        background-color: $secondary-color;
+        color: $text-color;
+        border-bottom-left-radius: 4px;
+    }
+
+    .toggle-info {
+        background-color: transparent;
+        color: $primary-color;
+        border: 1px solid $primary-color;
+        width: 100%;
+        height: fit-content;
+        border-radius: 8px;
+        padding: 10px 16px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: $transition;
+        margin-top: 10px;
+
+        &:hover {
+            background-color: rgba($primary-color, 0.1);
+        }
+    }
+}
+
+.follow-up-questions {
+    margin-top: 15px;
+
+    h4 {
+        font-size: 15px;
+        font-weight: 600;
+        margin-bottom: 10px;
+    }
+
+    .questions-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .follow-up-button {
+        background-color: #fff;
+        color: $primary-color;
+        border: 1px solid $primary-color;
+        border-radius: 8px;
+        padding: 10px 16px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: $transition;
+        text-align: left;
+        white-space: normal;
+        word-wrap: break-word;
+        width: 100%;
+        height: fit-content;
+
+        &:hover {
+            background-color: $primary-color;
+            color: #fff;
+        }
+    }
+}
+
+.citation-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.1);
+    color: $text-color;
+    font-size: 12px;
+    font-weight: bold;
+    margin-left: 5px;
+    cursor: pointer;
+    transition: $transition;
+    vertical-align: middle;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+}
+
+.uploading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width: 768px) {
+    .chat-box {
+        border-radius: 0;
+    }
+
+    .message {
+        max-width: 90%;
+    }
+}
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
new file mode 100644
index 000000000..44c231c87
--- /dev/null
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -0,0 +1,757 @@
+/**
+ * @file ChatBox.tsx
+ * @description This file defines the ChatBox component, which manages user interactions with
+ * an AI assistant. It handles document uploads, chat history, message input, and integration
+ * with the OpenAI API. The ChatBox is MobX-observable and tracks the progress of tasks such as
+ * document analysis and AI-driven summaries. It also maintains real-time chat functionality
+ * with support for follow-up questions and citation management.
+ */
+
+import dotenv from 'dotenv';
+import { ObservableSet, action, computed, makeObservable, observable, observe, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import OpenAI, { ClientOptions } from 'openai';
+import * as React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { ClientUtils } from '../../../../../ClientUtils';
+import { Doc, DocListCast } from '../../../../../fields/Doc';
+import { DocData, DocViews } from '../../../../../fields/DocSymbols';
+import { CsvCast, DocCast, PDFCast, RTFCast, StrCast } from '../../../../../fields/Types';
+import { Networking } from '../../../../Network';
+import { DocUtils } from '../../../../documents/DocUtils';
+import { DocumentType } from '../../../../documents/DocumentTypes';
+import { Docs } from '../../../../documents/Documents';
+import { DocumentManager } from '../../../../util/DocumentManager';
+import { LinkManager } from '../../../../util/LinkManager';
+import { ViewBoxAnnotatableComponent } from '../../../DocComponent';
+import { DocumentView } from '../../DocumentView';
+import { FieldView, FieldViewProps } from '../../FieldView';
+import { PDFBox } from '../../PDFBox';
+import { Agent } from '../agentsystem/Agent';
+import { ASSISTANT_ROLE, AssistantMessage, CHUNK_TYPE, Citation, ProcessingInfo, SimplifiedChunk, TEXT_TYPE } from '../types/types';
+import { Vectorstore } from '../vectorstore/Vectorstore';
+import './ChatBox.scss';
+import MessageComponentBox from './MessageComponent';
+import { ProgressBar } from './ProgressBar';
+
+dotenv.config();
+
+/**
+ * ChatBox is the main class responsible for managing the interaction between the user and the assistant,
+ * handling documents, and integrating with OpenAI for tasks such as document analysis, chat functionality,
+ * and vector store interactions.
+ */
+@observer
+export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    // MobX observable properties to track UI state and data
+    @observable history: AssistantMessage[] = [];
+    @observable.deep current_message: AssistantMessage | undefined = undefined;
+    @observable isLoading: boolean = false;
+    @observable uploadProgress: number = 0;
+    @observable currentStep: string = '';
+    @observable expandedScratchpadIndex: number | null = null;
+    @observable inputValue: string = '';
+    @observable private linked_docs_to_add: ObservableSet = observable.set();
+    @observable private linked_csv_files: { filename: string; id: string; text: string }[] = [];
+    @observable private isUploadingDocs: boolean = false;
+    @observable private citationPopup: { text: string; visible: boolean } = { text: '', visible: false };
+
+    // Private properties for managing OpenAI API, vector store, agent, and UI elements
+    private openai: OpenAI;
+    private vectorstore_id: string;
+    private vectorstore: Vectorstore;
+    private agent: Agent;
+    private messagesRef: React.RefObject<HTMLDivElement>;
+
+    /**
+     * Static method that returns the layout string for the field.
+     * @param fieldKey Key to get the layout string.
+     */
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(ChatBox, fieldKey);
+    }
+
+    /**
+     * 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.
+     * @param props The properties passed to the component.
+     */
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this); // Enable MobX observables
+
+        // Initialize OpenAI, vectorstore, and agent
+        this.openai = this.initializeOpenAI();
+        if (StrCast(this.dataDoc.vectorstore_id) == '') {
+            this.vectorstore_id = uuidv4();
+            this.dataDoc.vectorstore_id = this.vectorstore_id;
+        } else {
+            this.vectorstore_id = StrCast(this.dataDoc.vectorstore_id);
+        }
+        this.vectorstore = new Vectorstore(this.vectorstore_id, this.retrieveDocIds);
+        this.agent = new Agent(this.vectorstore, this.retrieveSummaries, this.retrieveFormattedHistory, this.retrieveCSVData, this.addLinkedUrlDoc, this.createCSVInDash);
+        this.messagesRef = React.createRef<HTMLDivElement>();
+
+        // Reaction to update dataDoc when chat history changes
+        reaction(
+            () =>
+                this.history.map((msg: AssistantMessage) => ({
+                    role: msg.role,
+                    content: msg.content,
+                    follow_up_questions: msg.follow_up_questions,
+                    citations: msg.citations,
+                })),
+            serializableHistory => {
+                this.dataDoc.data = JSON.stringify(serializableHistory);
+            }
+        );
+    }
+
+    /**
+     * Adds a document to the vectorstore for AI-based analysis.
+     * Handles the upload progress and errors during the process.
+     * @param newLinkedDoc The new document to add.
+     */
+    @action
+    addDocToVectorstore = async (newLinkedDoc: Doc) => {
+        this.uploadProgress = 0;
+        this.currentStep = 'Initializing...';
+        this.isUploadingDocs = true;
+
+        try {
+            // Add the document to the vectorstore
+            await this.vectorstore.addAIDoc(newLinkedDoc, this.updateProgress);
+        } catch (error) {
+            console.error('Error uploading document:', error);
+            this.currentStep = 'Error during upload';
+        } finally {
+            this.isUploadingDocs = false;
+            this.uploadProgress = 0;
+            this.currentStep = '';
+        }
+    };
+
+    /**
+     * Updates the upload progress and the current step in the UI.
+     * @param progress The percentage of the progress.
+     * @param step The current step name.
+     */
+    @action
+    updateProgress = (progress: number, step: string) => {
+        this.uploadProgress = progress;
+        this.currentStep = step;
+    };
+
+    /**
+     * Adds a CSV file for analysis by sending it to OpenAI and generating a summary.
+     * @param newLinkedDoc The linked document representing the CSV file.
+     * @param id Optional ID for the document.
+     */
+    @action
+    addCSVForAnalysis = async (newLinkedDoc: Doc, id?: string) => {
+        if (!newLinkedDoc.chunk_simpl) {
+            // Convert document text to CSV data
+            const csvData: string = StrCast(newLinkedDoc.text);
+
+            // Generate a summary using OpenAI API
+            const completion = await this.openai.chat.completions.create({
+                messages: [
+                    {
+                        role: 'system',
+                        content:
+                            'You are an AI assistant tasked with summarizing the content of a CSV file. You will be provided with the data from the CSV file and your goal is to generate a concise summary that captures the main themes, trends, and key points represented in the data.',
+                    },
+                    {
+                        role: 'user',
+                        content: `Please provide a comprehensive summary of the CSV file based on the provided data. Ensure the summary highlights the most important information, patterns, and insights. Your response should be in paragraph form and be concise.
+                    CSV Data:
+                    ${csvData}
+                    **********
+                    Summary:`,
+                    },
+                ],
+                model: 'gpt-3.5-turbo',
+            });
+
+            const csvId = id ?? uuidv4();
+
+            // Add CSV details to linked files
+            this.linked_csv_files.push({
+                filename: CsvCast(newLinkedDoc.data).url.pathname,
+                id: csvId,
+                text: csvData,
+            });
+
+            // Add a chunk for the CSV and assign the summary
+            const chunkToAdd = {
+                chunkId: csvId,
+                chunkType: CHUNK_TYPE.CSV,
+            };
+            newLinkedDoc.chunk_simpl = JSON.stringify({ chunks: [chunkToAdd] });
+            newLinkedDoc.summary = completion.choices[0].message.content!;
+        }
+    };
+
+    /**
+     * Toggles the tool logs, expanding or collapsing the scratchpad at the given index.
+     * @param index Index of the tool log to toggle.
+     */
+    @action
+    toggleToolLogs = (index: number) => {
+        this.expandedScratchpadIndex = this.expandedScratchpadIndex === index ? null : index;
+    };
+
+    /**
+     * Initializes the OpenAI API client using the API key from environment variables.
+     * @returns OpenAI client instance.
+     */
+    initializeOpenAI() {
+        const configuration: ClientOptions = {
+            apiKey: process.env.OPENAI_KEY,
+            dangerouslyAllowBrowser: true,
+        };
+        return new OpenAI(configuration);
+    }
+
+    /**
+     * Adds a scroll event listener to detect user scrolling and handle passive wheel events.
+     */
+    addScrollListener = () => {
+        if (this.messagesRef.current) {
+            this.messagesRef.current.addEventListener('wheel', this.onPassiveWheel, { passive: false });
+        }
+    };
+
+    /**
+     * Removes the scroll event listener from the chat messages container.
+     */
+    removeScrollListener = () => {
+        if (this.messagesRef.current) {
+            this.messagesRef.current.removeEventListener('wheel', this.onPassiveWheel);
+        }
+    };
+
+    /**
+     * Scrolls the chat messages container to the bottom, ensuring the latest message is visible.
+     */
+    scrollToBottom = () => {
+        // if (this.messagesRef.current) {
+        //     this.messagesRef.current.scrollTop = this.messagesRef.current.scrollHeight;
+        // }
+    };
+
+    /**
+     * Event handler for detecting wheel scrolling and stopping the event propagation.
+     * @param e The wheel event.
+     */
+    onPassiveWheel = (e: WheelEvent) => {
+        if (this._props.isContentActive()) {
+            e.stopPropagation();
+        }
+    };
+
+    /**
+     * Sends the user's input to OpenAI, displays the loading indicator, and updates the chat history.
+     * @param event The form submission event.
+     */
+    @action
+    askGPT = async (event: React.FormEvent): Promise<void> => {
+        event.preventDefault();
+        this.inputValue = '';
+
+        // Extract the user's message
+        const textInput = (event.currentTarget as HTMLFormElement).elements.namedItem('messageInput') as HTMLInputElement;
+        const trimmedText = textInput.value.trim();
+
+        if (trimmedText) {
+            try {
+                textInput.value = '';
+                // Add the user's message to the history
+                this.history.push({
+                    role: ASSISTANT_ROLE.USER,
+                    content: [{ index: 0, type: TEXT_TYPE.NORMAL, text: trimmedText, citation_ids: null }],
+                    processing_info: [],
+                });
+                this.isLoading = true;
+                this.current_message = {
+                    role: ASSISTANT_ROLE.ASSISTANT,
+                    content: [],
+                    citations: [],
+                    processing_info: [],
+                };
+
+                // Define callbacks for real-time processing updates
+                const onProcessingUpdate = (processingUpdate: ProcessingInfo[]) => {
+                    runInAction(() => {
+                        if (this.current_message) {
+                            this.current_message = {
+                                ...this.current_message,
+                                processing_info: processingUpdate,
+                            };
+                        }
+                    });
+                    this.scrollToBottom();
+                };
+
+                const onAnswerUpdate = (answerUpdate: string) => {
+                    runInAction(() => {
+                        if (this.current_message) {
+                            this.current_message = {
+                                ...this.current_message,
+                                content: [{ text: answerUpdate, type: TEXT_TYPE.NORMAL, index: 0, citation_ids: [] }],
+                            };
+                        }
+                    });
+                };
+
+                // Send the user's question to the assistant and get the final message
+                const finalMessage = await this.agent.askAgent(trimmedText, onProcessingUpdate, onAnswerUpdate);
+
+                // Update the history with the final assistant message
+                runInAction(() => {
+                    if (this.current_message) {
+                        this.history.push({ ...finalMessage });
+                        this.current_message = undefined;
+                        this.dataDoc.data = JSON.stringify(this.history);
+                    }
+                });
+            } catch (err) {
+                console.error('Error:', err);
+                // Handle error in processing
+                this.history.push({
+                    role: ASSISTANT_ROLE.ASSISTANT,
+                    content: [{ index: 0, type: TEXT_TYPE.ERROR, text: 'Sorry, I encountered an error while processing your request.', citation_ids: null }],
+                    processing_info: [],
+                });
+            } finally {
+                this.isLoading = false;
+                this.scrollToBottom();
+            }
+        }
+        this.scrollToBottom();
+    };
+
+    /**
+     * Updates the citations for a given message in the chat history.
+     * @param index The index of the message in the history.
+     * @param citations The list of citations to add to the message.
+     */
+    @action
+    updateMessageCitations = (index: number, citations: Citation[]) => {
+        if (this.history[index]) {
+            this.history[index].citations = citations;
+        }
+    };
+
+    /**
+     * Adds a linked document from a URL for future reference and analysis.
+     * @param url The URL of the document to add.
+     * @param id The unique identifier for the document.
+     */
+    @action
+    addLinkedUrlDoc = async (url: string, id: string) => {
+        const doc = Docs.Create.WebDocument(url, { data_useCors: true });
+
+        const linkDoc = Docs.Create.LinkDocument(this.Document, doc);
+        LinkManager.Instance.addLink(linkDoc);
+        let canDisplay;
+
+        try {
+            // Fetch the URL content through the proxy
+            const { data } = await Networking.PostToServer('/proxyFetch', { url });
+
+            // Simulating header behavior since we can't fetch headers via proxy
+            const xFrameOptions = data.headers?.['x-frame-options'];
+
+            if (xFrameOptions && xFrameOptions.toUpperCase() === 'SAMEORIGIN') {
+                canDisplay = false;
+            } else {
+                canDisplay = true;
+            }
+        } catch (error) {
+            console.error('Error fetching the URL from the server:', error);
+        }
+
+        const chunkToAdd = {
+            chunkId: id,
+            chunkType: CHUNK_TYPE.URL,
+            url: url,
+            canDisplay: canDisplay,
+        };
+
+        doc.chunk_simpl = JSON.stringify({ chunks: [chunkToAdd] });
+    };
+
+    /**
+     * Getter to retrieve the current user's name from the client utils.
+     */
+    @computed
+    get userName() {
+        return ClientUtils.CurrentUserEmail;
+    }
+
+    /**
+     * Creates a CSV document in the dashboard and adds it for analysis.
+     * @param url The URL of the CSV.
+     * @param title The title of the CSV document.
+     * @param id The unique ID for the document.
+     * @param data The CSV data content.
+     */
+    @action
+    createCSVInDash = async (url: string, title: string, id: string, data: string) => {
+        const doc = DocCast(await DocUtils.DocumentFromType('csv', url, { title: title, text: RTFCast(data) }));
+
+        const linkDoc = Docs.Create.LinkDocument(this.Document, doc);
+        LinkManager.Instance.addLink(linkDoc);
+
+        doc && this._props.addDocument?.(doc);
+        await DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {});
+
+        this.addCSVForAnalysis(doc, id);
+    };
+
+    /**
+     * Event handler to manage citations click in the message components.
+     * @param citation The citation object clicked by the user.
+     */
+    @action
+    handleCitationClick = (citation: Citation) => {
+        const currentLinkedDocs: Doc[] = this.linkedDocs;
+
+        const chunkId = citation.chunk_id;
+
+        // Loop through the linked documents to find the matching chunk and handle its display
+        for (const doc of currentLinkedDocs) {
+            if (doc.chunk_simpl) {
+                const docChunkSimpl = JSON.parse(StrCast(doc.chunk_simpl)) as { chunks: SimplifiedChunk[] };
+                const foundChunk = docChunkSimpl.chunks.find(chunk => chunk.chunkId === chunkId);
+                if (foundChunk) {
+                    // Handle different types of chunks (image, text, table, etc.)
+                    switch (foundChunk.chunkType) {
+                        case CHUNK_TYPE.IMAGE:
+                        case CHUNK_TYPE.TABLE:
+                            {
+                                const values = foundChunk.location?.replace(/[[\]]/g, '').split(',');
+
+                                if (values?.length !== 4) {
+                                    console.error('Location string must contain exactly 4 numbers');
+                                    return;
+                                }
+
+                                const x1 = parseFloat(values[0]) * Doc.NativeWidth(doc);
+                                const y1 = parseFloat(values[1]) * Doc.NativeHeight(doc) + foundChunk.startPage * Doc.NativeHeight(doc);
+                                const x2 = parseFloat(values[2]) * Doc.NativeWidth(doc);
+                                const y2 = parseFloat(values[3]) * Doc.NativeHeight(doc) + foundChunk.startPage * Doc.NativeHeight(doc);
+
+                                const annotationKey = Doc.LayoutFieldKey(doc) + '_annotations';
+
+                                const existingDoc = DocListCast(doc[DocData][annotationKey]).find(d => d.citation_id === citation.citation_id);
+                                const highlightDoc = existingDoc ?? this.createImageCitationHighlight(x1, y1, x2, y2, citation, annotationKey, doc);
+
+                                DocumentManager.Instance.showDocument(highlightDoc, { willZoomCentered: true }, () => {});
+                            }
+                            break;
+                        case CHUNK_TYPE.TEXT:
+                            this.citationPopup = { text: citation.direct_text ?? 'No text available', visible: true };
+                            setTimeout(() => (this.citationPopup.visible = false), 3000); // Hide after 3 seconds
+
+                            DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {
+                                const firstView = Array.from(doc[DocViews])[0] as DocumentView;
+                                (firstView.ComponentView as PDFBox)?.gotoPage?.(foundChunk.startPage);
+                                (firstView.ComponentView as PDFBox)?.search?.(citation.direct_text ?? '');
+                            });
+                            break;
+                        case CHUNK_TYPE.URL:
+                            if (!foundChunk.canDisplay) {
+                                window.open(StrCast(doc.displayUrl), '_blank');
+                            } else if (foundChunk.canDisplay) {
+                                DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {});
+                            }
+                            break;
+                        case CHUNK_TYPE.CSV:
+                            DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {});
+                            break;
+                        default:
+                            console.error('Chunk type not recognized:', foundChunk.chunkType);
+                            break;
+                    }
+                }
+            }
+        }
+    };
+
+    /**
+     * Creates an annotation highlight on a PDF document for image citations.
+     * @param x1 X-coordinate of the top-left corner of the highlight.
+     * @param y1 Y-coordinate of the top-left corner of the highlight.
+     * @param x2 X-coordinate of the bottom-right corner of the highlight.
+     * @param y2 Y-coordinate of the bottom-right corner of the highlight.
+     * @param citation The citation object to associate with the highlight.
+     * @param annotationKey The key used to store the annotation.
+     * @param pdfDoc The document where the highlight is created.
+     * @returns The highlighted document.
+     */
+    createImageCitationHighlight = (x1: number, y1: number, x2: number, y2: number, citation: Citation, annotationKey: string, pdfDoc: Doc): Doc => {
+        const highlight_doc = Docs.Create.FreeformDocument([], {
+            x: x1,
+            y: y1,
+            _width: x2 - x1,
+            _height: y2 - y1,
+            backgroundColor: 'rgba(255, 255, 0, 0.5)',
+        });
+        highlight_doc[DocData].citation_id = citation.citation_id;
+        Doc.AddDocToList(pdfDoc[DocData], annotationKey, highlight_doc);
+        highlight_doc.annotationOn = pdfDoc;
+        Doc.SetContainer(highlight_doc, pdfDoc);
+        return highlight_doc;
+    };
+
+    /**
+     * Lifecycle method that triggers when the component updates.
+     * Ensures the chat is scrolled to the bottom when new messages are added.
+     */
+    componentDidUpdate() {
+        this.scrollToBottom();
+    }
+
+    /**
+     * Lifecycle method that triggers when the component mounts.
+     * Initializes scroll listeners, sets up document reactions, and loads chat history from dataDoc if available.
+     */
+    componentDidMount() {
+        this._props.setContentViewBox?.(this);
+        if (this.dataDoc.data) {
+            try {
+                const storedHistory = JSON.parse(StrCast(this.dataDoc.data));
+                runInAction(() => {
+                    this.history.push(
+                        ...storedHistory.map((msg: AssistantMessage) => ({
+                            role: msg.role,
+                            content: msg.content,
+                            follow_up_questions: msg.follow_up_questions,
+                            citations: msg.citations,
+                        }))
+                    );
+                });
+            } catch (e) {
+                console.error('Failed to parse history from dataDoc:', e);
+            }
+        } else {
+            // Default welcome message
+            runInAction(() => {
+                this.history.push({
+                    role: ASSISTANT_ROLE.ASSISTANT,
+                    content: [
+                        {
+                            index: 0,
+                            type: TEXT_TYPE.NORMAL,
+                            text: `Hey, ${this.userName()}! Welcome to Your Friendly Assistant. Link a document or ask questions to get started.`,
+                            citation_ids: null,
+                        },
+                    ],
+                    processing_info: [],
+                });
+            });
+        }
+
+        // Set up reactions for linked documents
+        reaction(
+            () => {
+                const linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.Document)
+                    .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
+                    .map(d => DocCast(d?.annotationOn, d))
+                    .filter(d => d);
+                return linkedDocs;
+            },
+            linked => linked.forEach(doc => this.linked_docs_to_add.add(doc))
+        );
+
+        // Observe changes to linked documents and handle document addition
+        observe(this.linked_docs_to_add, change => {
+            if (change.type === 'add') {
+                if (PDFCast(change.newValue.data)) {
+                    this.addDocToVectorstore(change.newValue);
+                } else if (CsvCast(change.newValue.data)) {
+                    this.addCSVForAnalysis(change.newValue);
+                }
+            } else if (change.type === 'delete') {
+                // Handle document removal
+            }
+        });
+        this.addScrollListener();
+    }
+
+    /**
+     * Lifecycle method that triggers when the component unmounts.
+     * Removes scroll listeners to avoid memory leaks.
+     */
+    componentWillUnmount() {
+        this.removeScrollListener();
+    }
+
+    /**
+     * Getter that retrieves all linked documents for the current document.
+     */
+    @computed
+    get linkedDocs() {
+        return LinkManager.Instance.getAllRelatedLinks(this.Document)
+            .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
+            .map(d => DocCast(d?.annotationOn, d))
+            .filter(d => d);
+    }
+
+    /**
+     * Getter that retrieves document IDs of linked documents that have AI-related content.
+     */
+    @computed
+    get docIds() {
+        return LinkManager.Instance.getAllRelatedLinks(this.Document)
+            .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
+            .map(d => DocCast(d?.annotationOn, d))
+            .filter(d => d)
+            .filter(d => d.ai_doc_id)
+            .map(d => StrCast(d.ai_doc_id));
+    }
+
+    /**
+     * Getter that retrieves summaries of all linked documents.
+     */
+    @computed
+    get summaries(): string {
+        return (
+            LinkManager.Instance.getAllRelatedLinks(this.Document)
+                .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
+                .map(d => DocCast(d?.annotationOn, d))
+                .filter(d => d)
+                .filter(d => d.summary)
+                .map((doc, index) => {
+                    if (PDFCast(doc.data)) {
+                        return `<summary file_name="${PDFCast(doc.data).url.pathname}" applicable_tools=["rag"]>${doc.summary}</summary>`;
+                    } else if (CsvCast(doc.data)) {
+                        return `<summary file_name="${CsvCast(doc.data).url.pathname}" applicable_tools=["dataAnalysis"]>${doc.summary}</summary>`;
+                    } else {
+                        return `${index + 1}) ${doc.summary}`;
+                    }
+                })
+                .join('\n') + '\n'
+        );
+    }
+
+    /**
+     * Getter that retrieves all linked CSV files for analysis.
+     */
+    @computed
+    get linkedCSVs(): { filename: string; id: string; text: string }[] {
+        return this.linked_csv_files;
+    }
+
+    /**
+     * Getter that formats the entire chat history as a string for the agent's system message.
+     */
+    @computed
+    get formattedHistory(): string {
+        let history = '<chat_history>\n';
+        for (const message of this.history) {
+            history += `<${message.role}>${message.content.map(content => content.text).join(' ')}`;
+            if (message.loop_summary) {
+                history += `<loop_summary>${message.loop_summary}</loop_summary>`;
+            }
+            history += `</${message.role}>\n`;
+        }
+        history += '</chat_history>';
+        return history;
+    }
+
+    // Other helper methods for retrieving document data and processing
+
+    retrieveSummaries = () => {
+        return this.summaries;
+    };
+
+    retrieveCSVData = () => {
+        return this.linkedCSVs;
+    };
+
+    retrieveFormattedHistory = () => {
+        return this.formattedHistory;
+    };
+
+    retrieveDocIds = () => {
+        return this.docIds;
+    };
+
+    /**
+     * Handles follow-up questions when the user clicks on them.
+     * Automatically sets the input value to the clicked follow-up question.
+     * @param question The follow-up question clicked by the user.
+     */
+    @action
+    handleFollowUpClick = (question: string) => {
+        this.inputValue = question;
+    };
+
+    /**
+     * Renders the chat interface, including the message list, input field, and other UI elements.
+     */
+    render() {
+        return (
+            <div className="chat-box">
+                {this.isUploadingDocs && (
+                    <div className="uploading-overlay">
+                        <div className="progress-container">
+                            <ProgressBar />
+                            <div className="step-name">{this.currentStep}</div>
+                        </div>
+                    </div>
+                )}
+                <div className="chat-header">
+                    <h2>{this.userName()}&apos;s AI Assistant</h2>
+                </div>
+                <div className="chat-messages" ref={this.messagesRef}>
+                    {this.history.map((message, index) => (
+                        <MessageComponentBox key={index} message={message} index={index} onFollowUpClick={this.handleFollowUpClick} onCitationClick={this.handleCitationClick} updateMessageCitations={this.updateMessageCitations} />
+                    ))}
+                    {this.current_message && (
+                        <MessageComponentBox
+                            key={this.history.length}
+                            message={this.current_message}
+                            index={this.history.length}
+                            onFollowUpClick={this.handleFollowUpClick}
+                            onCitationClick={this.handleCitationClick}
+                            updateMessageCitations={this.updateMessageCitations}
+                        />
+                    )}
+                </div>
+                <form onSubmit={this.askGPT} className="chat-input">
+                    <input type="text" name="messageInput" autoComplete="off" placeholder="Type your message here..." value={this.inputValue} onChange={e => (this.inputValue = e.target.value)} />
+                    <button className="submit-button" type="submit" disabled={this.isLoading}>
+                        {this.isLoading ? (
+                            <div className="spinner"></div>
+                        ) : (
+                            <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round">
+                                <line x1="22" y1="2" x2="11" y2="13"></line>
+                                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                            </svg>
+                        )}
+                    </button>
+                </form>
+                {/* Popup for citation */}
+                {this.citationPopup.visible && (
+                    <div className="citation-popup">
+                        <p>
+                            <strong>Text from your document: </strong> {this.citationPopup.text}
+                        </p>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+/**
+ * Register the ChatBox component as the template for CHAT document types.
+ */
+Docs.Prototypes.TemplateMap.set(DocumentType.CHAT, {
+    layout: { view: ChatBox, dataField: 'data' },
+    options: { acl: '', chat: '', chat_history: '', chat_thread_id: '', chat_assistant_id: '', chat_vector_store_id: '' },
+});
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx
new file mode 100644
index 000000000..d48f46963
--- /dev/null
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/MessageComponent.tsx
@@ -0,0 +1,155 @@
+/**
+ * @file MessageComponentBox.tsx
+ * @description This file defines the MessageComponentBox component, which renders the content
+ * of an AssistantMessage. It supports rendering various message types such as grounded text,
+ * normal text, and follow-up questions. The component uses React and MobX for state management
+ * and includes functionality for handling citation and follow-up actions, as well as displaying
+ * agent processing information.
+ */
+
+import React, { useState } from 'react';
+import { observer } from 'mobx-react';
+import { AssistantMessage, Citation, MessageContent, PROCESSING_TYPE, ProcessingInfo, TEXT_TYPE } from '../types/types';
+import ReactMarkdown from 'react-markdown';
+
+/**
+ * Props for the MessageComponentBox.
+ * @interface MessageComponentProps
+ * @property {AssistantMessage} message - The message data to display.
+ * @property {number} index - The index of the message.
+ * @property {Function} onFollowUpClick - Callback to handle follow-up question clicks.
+ * @property {Function} onCitationClick - Callback to handle citation clicks.
+ * @property {Function} updateMessageCitations - Function to update message citations.
+ */
+interface MessageComponentProps {
+    message: AssistantMessage;
+    index: number;
+    onFollowUpClick: (question: string) => void;
+    onCitationClick: (citation: Citation) => void;
+    updateMessageCitations: (index: number, citations: Citation[]) => void;
+}
+
+/**
+ * MessageComponentBox displays the content of an AssistantMessage including text, citations,
+ * processing information, and follow-up questions.
+ * @param {MessageComponentProps} props - The props for the component.
+ */
+const MessageComponentBox: React.FC<MessageComponentProps> = ({ message, index, onFollowUpClick, onCitationClick, updateMessageCitations }) => {
+    // State for managing whether the dropdown is open or closed for processing info
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+
+    /**
+     * Renders the content of the message based on the type (e.g., grounded text, normal text).
+     * @param {MessageContent} item - The content item to render.
+     * @returns {JSX.Element} JSX element rendering the content.
+     */
+    const renderContent = (item: MessageContent) => {
+        const i = item.index;
+
+        // Handle grounded text with citations
+        if (item.type === TEXT_TYPE.GROUNDED) {
+            const citation_ids = item.citation_ids || [];
+            return (
+                <span key={i} className="grounded-text">
+                    <ReactMarkdown>{item.text}</ReactMarkdown>
+                    {citation_ids.map((id, idx) => {
+                        const citation = message.citations?.find(c => c.citation_id === id);
+                        if (!citation) return null;
+                        return (
+                            <button key={i + idx} className="citation-button" onClick={() => onCitationClick(citation)}>
+                                {i + 1}
+                            </button>
+                        );
+                    })}
+                </span>
+            );
+        }
+
+        // Handle normal text
+        else if (item.type === TEXT_TYPE.NORMAL) {
+            return (
+                <span key={i} className="normal-text">
+                    <ReactMarkdown>{item.text}</ReactMarkdown>
+                </span>
+            );
+        }
+
+        // Handle query type content
+        else if ('query' in item) {
+            return (
+                <span key={i} className="query-text">
+                    <ReactMarkdown>{JSON.stringify(item.query)}</ReactMarkdown>
+                </span>
+            );
+        }
+
+        // Fallback for any other content type
+        else {
+            return (
+                <span key={i}>
+                    <ReactMarkdown>{JSON.stringify(item)}</ReactMarkdown>
+                </span>
+            );
+        }
+    };
+
+    // Check if the message contains processing information (thoughts/actions)
+    const hasProcessingInfo = message.processing_info && message.processing_info.length > 0;
+
+    /**
+     * Renders processing information such as thoughts or actions during message handling.
+     * @param {ProcessingInfo} info - The processing information to render.
+     * @returns {JSX.Element | null} JSX element rendering the processing info or null.
+     */
+    const renderProcessingInfo = (info: ProcessingInfo) => {
+        if (info.type === PROCESSING_TYPE.THOUGHT) {
+            return (
+                <div key={info.index} className="dropdown-item">
+                    <strong>Thought:</strong> {info.content}
+                </div>
+            );
+        } else if (info.type === PROCESSING_TYPE.ACTION) {
+            return (
+                <div key={info.index} className="dropdown-item">
+                    <strong>Action:</strong> {info.content}
+                </div>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <div className={`message ${message.role}`}>
+            {/* Processing Information Dropdown */}
+            {hasProcessingInfo && (
+                <div className="processing-info">
+                    <button className="toggle-info" onClick={() => setDropdownOpen(!dropdownOpen)}>
+                        {dropdownOpen ? 'Hide Agent Thoughts/Actions' : 'Show Agent Thoughts/Actions'}
+                    </button>
+                    {dropdownOpen && <div className="info-content">{message.processing_info.map(renderProcessingInfo)}</div>}
+                    <br />
+                </div>
+            )}
+
+            {/* Message Content */}
+            <div className="message-content">{message.content && message.content.map(messageFragment => <React.Fragment key={messageFragment.index}>{renderContent(messageFragment)}</React.Fragment>)}</div>
+
+            {/* Follow-up Questions Section */}
+            {message.follow_up_questions && message.follow_up_questions.length > 0 && (
+                <div className="follow-up-questions">
+                    <h4>Follow-up Questions:</h4>
+                    <div className="questions-list">
+                        {message.follow_up_questions.map((question, idx) => (
+                            <button key={idx} className="follow-up-button" onClick={() => onFollowUpClick(question)}>
+                                {question}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Export the observer-wrapped component to allow MobX to react to state changes
+export default observer(MessageComponentBox);
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.scss
new file mode 100644
index 000000000..ff5be4a38
--- /dev/null
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.scss
@@ -0,0 +1,69 @@
+.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: 0;
+    left: 0;
+    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: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    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/chatbot/chatboxcomponents/ProgressBar.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.tsx
new file mode 100644
index 000000000..240862f8b
--- /dev/null
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.tsx
@@ -0,0 +1,30 @@
+/**
+ * @file ProgressBar.tsx
+ * @description This file defines the ProgressBar component, which displays a loading spinner
+ * to indicate progress during ongoing tasks or processing. The animation consists of two
+ * bouncing elements that create a pulsating effect, providing a visual cue for active progress.
+ * The component is styled using the accompanying `ProgressBar.scss` for smooth animation.
+ */
+
+import React from 'react';
+import './ProgressBar.scss';
+
+/**
+ * ProgressBar is a functional React component that displays a loading spinner
+ * to indicate progress or ongoing processing. It uses two bouncing elements
+ * to create a smooth animation that represents an active state.
+ *
+ * The animation consists of two divs (`double-bounce1` and `double-bounce2`),
+ * each of which will bounce in and out of view, creating a pulsating effect.
+ */
+export const ProgressBar: React.FC = () => {
+    return (
+        <div className="spinner-container">
+            {/* Spinner div containing two bouncing elements */}
+            <div className="spinner">
+                <div className="double-bounce1"></div> {/* First bouncing element */}
+                <div className="double-bounce2"></div> {/* Second bouncing element */}
+            </div>
+        </div>
+    );
+};
diff --git a/src/client/views/nodes/chatbot/response_parsers/AnswerParser.ts b/src/client/views/nodes/chatbot/response_parsers/AnswerParser.ts
new file mode 100644
index 000000000..ed78cc7cb
--- /dev/null
+++ b/src/client/views/nodes/chatbot/response_parsers/AnswerParser.ts
@@ -0,0 +1,134 @@
+/**
+ * @file AnswerParser.ts
+ * @description This file defines the AnswerParser class, which processes structured XML-like responses
+ * from the AI system, parsing grounded text, normal text, citations, follow-up questions, and loop summaries.
+ * The parser converts the XML response into an AssistantMessage format, extracting key information like
+ * citations and processing steps for further use in the assistant's workflow.
+ */
+
+import { v4 as uuid } from 'uuid';
+import { ASSISTANT_ROLE, AssistantMessage, Citation, ProcessingInfo, TEXT_TYPE, getChunkType } from '../types/types';
+
+export class AnswerParser {
+    static parse(xml: string, processingInfo: ProcessingInfo[]): AssistantMessage {
+        const answerRegex = /<answer>([\s\S]*?)<\/answer>/;
+        const citationsRegex = /<citations>([\s\S]*?)<\/citations>/;
+        const citationRegex = /<citation index="([^"]+)" chunk_id="([^"]+)" type="([^"]+)">([\s\S]*?)<\/citation>/g;
+        const followUpQuestionsRegex = /<follow_up_questions>([\s\S]*?)<\/follow_up_questions>/;
+        const questionRegex = /<question>(.*?)<\/question>/g;
+        const groundedTextRegex = /<grounded_text citation_index="([^"]+)">([\s\S]*?)<\/grounded_text>/g;
+        const normalTextRegex = /<normal_text>([\s\S]*?)<\/normal_text>/g;
+        const loopSummaryRegex = /<loop_summary>([\s\S]*?)<\/loop_summary>/;
+
+        const answerMatch = answerRegex.exec(xml);
+        const citationsMatch = citationsRegex.exec(xml);
+        const followUpQuestionsMatch = followUpQuestionsRegex.exec(xml);
+        const loopSummaryMatch = loopSummaryRegex.exec(xml);
+
+        if (!answerMatch) {
+            throw new Error('Invalid XML: Missing <answer> tag.');
+        }
+
+        let rawTextContent = answerMatch[1].trim();
+        const content: AssistantMessage['content'] = [];
+        const citations: Citation[] = [];
+        let contentIndex = 0;
+
+        // Remove citations and follow-up questions from rawTextContent
+        if (citationsMatch) {
+            rawTextContent = rawTextContent.replace(citationsMatch[0], '').trim();
+        }
+        if (followUpQuestionsMatch) {
+            rawTextContent = rawTextContent.replace(followUpQuestionsMatch[0], '').trim();
+        }
+        if (loopSummaryMatch) {
+            rawTextContent = rawTextContent.replace(loopSummaryMatch[0], '').trim();
+        }
+
+        // Parse citations
+        let citationMatch;
+        const citationMap = new Map<string, string>();
+        if (citationsMatch) {
+            const citationsContent = citationsMatch[1];
+            while ((citationMatch = citationRegex.exec(citationsContent)) !== null) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const [_, index, chunk_id, type, direct_text] = citationMatch;
+                const citation_id = uuid();
+                citationMap.set(index, citation_id);
+                citations.push({
+                    direct_text: direct_text.trim(),
+                    type: getChunkType(type),
+                    chunk_id,
+                    citation_id,
+                });
+            }
+        }
+
+        rawTextContent = rawTextContent.replace(normalTextRegex, '$1');
+
+        // Parse text content (normal and grounded)
+        let lastIndex = 0;
+        let match;
+
+        while ((match = groundedTextRegex.exec(rawTextContent)) !== null) {
+            const [fullMatch, citationIndex, groundedText] = match;
+
+            // Add normal text that is before the grounded text
+            if (match.index > lastIndex) {
+                const normalText = rawTextContent.slice(lastIndex, match.index).trim();
+                if (normalText) {
+                    content.push({
+                        index: contentIndex++,
+                        type: TEXT_TYPE.NORMAL,
+                        text: normalText,
+                        citation_ids: null,
+                    });
+                }
+            }
+
+            // Add grounded text
+            const citation_ids = citationIndex.split(',').map(index => citationMap.get(index) || '');
+            content.push({
+                index: contentIndex++,
+                type: TEXT_TYPE.GROUNDED,
+                text: groundedText.trim(),
+                citation_ids,
+            });
+
+            lastIndex = match.index + fullMatch.length;
+        }
+
+        // Add any remaining normal text after the last grounded text
+        if (lastIndex < rawTextContent.length) {
+            const remainingText = rawTextContent.slice(lastIndex).trim();
+            if (remainingText) {
+                content.push({
+                    index: contentIndex++,
+                    type: TEXT_TYPE.NORMAL,
+                    text: remainingText,
+                    citation_ids: null,
+                });
+            }
+        }
+
+        const followUpQuestions: string[] = [];
+        if (followUpQuestionsMatch) {
+            const questionsText = followUpQuestionsMatch[1];
+            let questionMatch;
+            while ((questionMatch = questionRegex.exec(questionsText)) !== null) {
+                followUpQuestions.push(questionMatch[1].trim());
+            }
+        }
+
+        const assistantResponse: AssistantMessage = {
+            role: ASSISTANT_ROLE.ASSISTANT,
+            content,
+            follow_up_questions: followUpQuestions,
+            citations,
+            processing_info: processingInfo,
+            loop_summary: loopSummaryMatch ? loopSummaryMatch[1].trim() : undefined,
+        };
+
+        return assistantResponse;
+    }
+}
diff --git a/src/client/views/nodes/chatbot/response_parsers/StreamedAnswerParser.ts b/src/client/views/nodes/chatbot/response_parsers/StreamedAnswerParser.ts
new file mode 100644
index 000000000..dbd568faa
--- /dev/null
+++ b/src/client/views/nodes/chatbot/response_parsers/StreamedAnswerParser.ts
@@ -0,0 +1,79 @@
+/**
+ * @file StreamedAnswerParser.ts
+ * @description This file defines the StreamedAnswerParser class, which parses incoming character streams
+ * to extract grounded or normal text based on the tags found in the input stream. It maintains state
+ * between grounded text and normal text sections, handling buffered input and ensuring proper text formatting
+ * for AI assistant responses.
+ */
+
+enum ParserState {
+    Outside,
+    InGroundedText,
+    InNormalText,
+}
+
+export class StreamedAnswerParser {
+    private state: ParserState = ParserState.Outside;
+    private buffer: string = '';
+    private result: string = '';
+    private isStartOfLine: boolean = true;
+
+    public parse(char: string): string {
+        switch (this.state) {
+            case ParserState.Outside:
+                if (char === '<') {
+                    this.buffer = '<';
+                } else if (char === '>') {
+                    if (this.buffer.startsWith('<grounded_text')) {
+                        this.state = ParserState.InGroundedText;
+                    } else if (this.buffer.startsWith('<normal_text')) {
+                        this.state = ParserState.InNormalText;
+                    }
+                    this.buffer = '';
+                } else {
+                    this.buffer += char;
+                }
+                break;
+
+            case ParserState.InGroundedText:
+            case ParserState.InNormalText:
+                if (char === '<') {
+                    this.buffer = '<';
+                } else if (this.buffer.startsWith('</grounded_text') && char === '>') {
+                    this.state = ParserState.Outside;
+                    this.buffer = '';
+                } else if (this.buffer.startsWith('</normal_text') && char === '>') {
+                    this.state = ParserState.Outside;
+                    this.buffer = '';
+                } else if (this.buffer.startsWith('<')) {
+                    this.buffer += char;
+                } else {
+                    this.processChar(char);
+                }
+                break;
+        }
+
+        return this.result.trim();
+    }
+
+    private processChar(char: string): void {
+        if (this.isStartOfLine && char === ' ') {
+            // Skip leading spaces
+            return;
+        }
+        if (char === '\n') {
+            this.result += char;
+            this.isStartOfLine = true;
+        } else {
+            this.result += char;
+            this.isStartOfLine = false;
+        }
+    }
+
+    public reset(): void {
+        this.state = ParserState.Outside;
+        this.buffer = '';
+        this.result = '';
+        this.isStartOfLine = true;
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/BaseTool.ts b/src/client/views/nodes/chatbot/tools/BaseTool.ts
new file mode 100644
index 000000000..a77f567a5
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/BaseTool.ts
@@ -0,0 +1,32 @@
+/**
+ * @file BaseTool.ts
+ * @description This file defines the abstract BaseTool class, which serves as a blueprint
+ * for tool implementations in the AI assistant system. Each tool has a name, description,
+ * parameters, and citation rules. The BaseTool class provides a structure for executing actions
+ * and retrieving action rules for use within the assistant's workflow.
+ */
+
+import { Tool } from '../types/types';
+
+export abstract class BaseTool<T extends Record<string, unknown> = Record<string, unknown>> implements Tool<T> {
+    constructor(
+        public name: string,
+        public description: string,
+        public parameters: Record<string, unknown>,
+        public citationRules: string,
+        public briefSummary: string
+    ) {}
+
+    abstract execute(args: T): Promise<unknown>;
+
+    getActionRule(): Record<string, unknown> {
+        return {
+            [this.name]: {
+                name: this.name,
+                citationRules: this.citationRules,
+                description: this.description,
+                parameters: this.parameters,
+            },
+        };
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/CalculateTool.ts b/src/client/views/nodes/chatbot/tools/CalculateTool.ts
new file mode 100644
index 000000000..77ab1b39b
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/CalculateTool.ts
@@ -0,0 +1,26 @@
+import { BaseTool } from './BaseTool';
+
+export class CalculateTool extends BaseTool<{ expression: string }> {
+    constructor() {
+        super(
+            'calculate',
+            'Perform a calculation',
+            {
+                expression: {
+                    type: 'string',
+                    description: 'The mathematical expression to evaluate',
+                    required: 'true',
+                    max_inputs: '1',
+                },
+            },
+            'Provide a mathematical expression to calculate that would work with JavaScript eval().',
+            'Runs a calculation and returns the number - uses JavaScript so be sure to use floating point syntax if necessary'
+        );
+    }
+
+    async execute(args: { expression: string }): Promise<unknown> {
+        // Note: Using eval() can be dangerous. Consider using a safer alternative.
+        const result = eval(args.expression);
+        return [{ type: 'text', text: result.toString() }];
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/CreateCSVTool.ts b/src/client/views/nodes/chatbot/tools/CreateCSVTool.ts
new file mode 100644
index 000000000..d3ded0de0
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/CreateCSVTool.ts
@@ -0,0 +1,51 @@
+import { BaseTool } from './BaseTool';
+import { Networking } from '../../../../Network';
+
+export class CreateCSVTool extends BaseTool<{ csvData: string; filename: string }> {
+    private _handleCSVResult: (url: string, filename: string, id: string, data: string) => void;
+
+    constructor(handleCSVResult: (url: string, title: string, id: string, data: string) => void) {
+        super(
+            'createCSV',
+            'Creates a CSV file from raw CSV data and saves it to the server',
+            {
+                type: 'object',
+                properties: {
+                    csvData: {
+                        type: 'string',
+                        description: 'A string of comma-separated values representing the CSV data.',
+                    },
+                    filename: {
+                        type: 'string',
+                        description: 'The base name of the CSV file to be created. Should end in ".csv".',
+                    },
+                },
+                required: ['csvData', 'filename'],
+            },
+            'Provide a CSV string and a filename to create a CSV file.',
+            'Creates a CSV file from the provided CSV string and saves it to the server with a unique identifier, returning the file URL and UUID.'
+        );
+        this._handleCSVResult = handleCSVResult;
+    }
+
+    async execute(args: { csvData: string; filename: string }): Promise<unknown> {
+        try {
+            console.log('Creating CSV file:', args.filename, ' with data:', args.csvData);
+            // Post the raw CSV data to the createCSV endpoint on the server
+            const { fileUrl, id } = await Networking.PostToServer('/createCSV', { filename: args.filename, data: args.csvData });
+
+            // Handle the result by invoking the callback
+            this._handleCSVResult(fileUrl, args.filename, id, args.csvData);
+
+            return [
+                {
+                    type: 'text',
+                    text: `File successfully created: ${fileUrl}. \nNow a CSV file with this data and the name ${args.filename} is available as a user doc.`,
+                },
+            ];
+        } catch (error) {
+            console.error('Error creating CSV file:', error);
+            throw new Error('Failed to create CSV file.');
+        }
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/CreateCollectionTool.ts b/src/client/views/nodes/chatbot/tools/CreateCollectionTool.ts
new file mode 100644
index 000000000..1e479a62c
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/CreateCollectionTool.ts
@@ -0,0 +1,36 @@
+import { DocCast } from '../../../../../fields/Types';
+import { DocServer } from '../../../../DocServer';
+import { Docs } from '../../../../documents/Documents';
+import { DocumentView } from '../../DocumentView';
+import { OpenWhere } from '../../OpenWhere';
+import { BaseTool } from './BaseTool';
+
+export class GetDocsContentTool extends BaseTool<{ title: string; document_ids: string[] }> {
+    private _docView: DocumentView;
+    constructor(docView: DocumentView) {
+        super(
+            'retrieveDocs',
+            'Retrieves the contents of all Documents that the user is interacting with in Dash ',
+            {
+                title: {
+                    type: 'string',
+                    description: 'the title of the collection that you will be making',
+                    required: 'true',
+                    max_inputs: '1',
+                },
+            },
+            'Provide a mathematical expression to calculate that would work with JavaScript eval().',
+            'Runs a calculation and returns the number - uses JavaScript so be sure to use floating point syntax if necessary'
+        );
+        this._docView = docView;
+    }
+
+    async execute(args: { title: string; document_ids: string[] }): Promise<unknown> {
+        // Note: Using eval() can be dangerous. Consider using a safer alternative.
+        const docs = args.document_ids.map(doc_id => DocCast(DocServer.GetCachedRefField(doc_id)));
+        const collection = Docs.Create.FreeformDocument(docs, { title: args.title });
+        this._docView._props.addDocTab(collection, OpenWhere.addRight); //in future, create popup prompting user where to add
+        return [{ type: 'text', text: 'Collection created in Dash called ' + args.title }];
+    }
+}
+//export function create_collection(docView: DocumentView, document_ids: string[], title: string): string {}
diff --git a/src/client/views/nodes/chatbot/tools/DataAnalysisTool.ts b/src/client/views/nodes/chatbot/tools/DataAnalysisTool.ts
new file mode 100644
index 000000000..2e663fed1
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/DataAnalysisTool.ts
@@ -0,0 +1,59 @@
+import { BaseTool } from './BaseTool';
+
+export class DataAnalysisTool extends BaseTool<{ csv_file_name: string | string[] }> {
+    private csv_files_function: () => { filename: string; id: string; text: string }[];
+
+    constructor(csv_files: () => { filename: string; id: string; text: string }[]) {
+        super(
+            'dataAnalysis',
+            'Analyzes, and provides insights, from one or more CSV files',
+            {
+                csv_file_name: {
+                    type: 'string',
+                    description: 'Name(s) of the CSV file(s) to analyze',
+                    required: 'true',
+                    max_inputs: '3',
+                },
+            },
+            'Provide the name(s) of up to 3 CSV files to analyze based on the user query and whichever available CSV files may be relevant.',
+            'Provides the full CSV file text for your analysis based on the user query and the available CSV file(s). '
+        );
+        this.csv_files_function = csv_files;
+    }
+
+    getFileContent(filename: string): string | undefined {
+        const files = this.csv_files_function();
+        const file = files.find(f => f.filename === filename);
+        return file?.text;
+    }
+
+    getFileID(filename: string): string | undefined {
+        const files = this.csv_files_function();
+        const file = files.find(f => f.filename === filename);
+        return file?.id;
+    }
+
+    async execute(args: { csv_file_name: string | string[] }): Promise<unknown> {
+        const filenames = Array.isArray(args.csv_file_name) ? args.csv_file_name : [args.csv_file_name];
+        const results = [];
+
+        for (const filename of filenames) {
+            const fileContent = this.getFileContent(filename);
+            const fileID = this.getFileID(filename);
+
+            if (fileContent && fileID) {
+                results.push({
+                    type: 'text',
+                    text: `<chunk chunk_id=${fileID} chunk_type=csv>${fileContent}</chunk>`,
+                });
+            } else {
+                results.push({
+                    type: 'text',
+                    text: `File not found: ${filename}`,
+                });
+            }
+        }
+
+        return results;
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/GetDocsTool.ts b/src/client/views/nodes/chatbot/tools/GetDocsTool.ts
new file mode 100644
index 000000000..903f3f69c
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/GetDocsTool.ts
@@ -0,0 +1,29 @@
+import { DocCast } from '../../../../../fields/Types';
+import { DocServer } from '../../../../DocServer';
+import { Docs } from '../../../../documents/Documents';
+import { DocumentView } from '../../DocumentView';
+import { OpenWhere } from '../../OpenWhere';
+import { BaseTool } from './BaseTool';
+
+export class GetDocsTool extends BaseTool<{ title: string; document_ids: string[] }> {
+    private _docView: DocumentView;
+    constructor(docView: DocumentView) {
+        super(
+            'retrieveDocs',
+            'Retrieves the contents of all Documents that the user is interacting with in Dash',
+            {},
+            'No need to provide anything. Just run the tool and it will retrieve the contents of all Documents that the user is interacting with in Dash.',
+            'Returns the the documents in Dash in JSON form. This will include the title of the document, the location in the FreeFormDocument, and the content of the document, any applicable data fields, the layout of the document, etc.'
+        );
+        this._docView = docView;
+    }
+
+    async execute(args: { title: string; document_ids: string[] }): Promise<unknown> {
+        // Note: Using eval() can be dangerous. Consider using a safer alternative.
+        const docs = args.document_ids.map(doc_id => DocCast(DocServer.GetCachedRefField(doc_id)));
+        const collection = Docs.Create.FreeformDocument(docs, { title: args.title });
+        this._docView._props.addDocTab(collection, OpenWhere.addRight); //in future, create popup prompting user where to add
+        return [{ type: 'text', text: 'Collection created in Dash called ' + args.title }];
+    }
+}
+//export function create_collection(docView: DocumentView, document_ids: string[], title: string): string {}
diff --git a/src/client/views/nodes/chatbot/tools/NoTool.ts b/src/client/views/nodes/chatbot/tools/NoTool.ts
new file mode 100644
index 000000000..edd3160ec
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/NoTool.ts
@@ -0,0 +1,19 @@
+// tools/NoTool.ts
+import { BaseTool } from './BaseTool';
+
+export class NoTool extends BaseTool<Record<string, unknown>> {
+    constructor() {
+        super(
+            'no_tool',
+            'Use this when no external tool or action is required to answer the question.',
+            {},
+            'When using the "no_tool" action, simply provide an empty <action_input> element. The observation will always be "No tool used. Proceed with answering the question."',
+            'Use when no external tool or action is required to answer the question.'
+        );
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async execute(args: object): Promise<unknown> {
+        return [{ type: 'text', text: 'No tool used. Proceed with answering the question.' }];
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/RAGTool.ts b/src/client/views/nodes/chatbot/tools/RAGTool.ts
new file mode 100644
index 000000000..4cc2f26ff
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/RAGTool.ts
@@ -0,0 +1,79 @@
+import { Networking } from '../../../../Network';
+import { RAGChunk } from '../types/types';
+import { Vectorstore } from '../vectorstore/Vectorstore';
+import { BaseTool } from './BaseTool';
+
+export class RAGTool extends BaseTool {
+    constructor(private vectorstore: Vectorstore) {
+        super(
+            'rag',
+            'Perform a RAG search on user documents',
+            {
+                hypothetical_document_chunk: {
+                    type: 'string',
+                    description: "A detailed prompt representing an ideal chunk to embed and compare against document vectors to retrieve the most relevant content for answering the user's query.",
+                    required: 'true',
+                },
+            },
+            `
+            When using the RAG tool, the structure must adhere to the format described in the ReAct prompt. Below are additional guidelines specifically for RAG-based responses:
+
+            1. **Grounded Text Guidelines**:
+                - Each <grounded_text> tag must correspond to exactly one citation, ensuring a one-to-one relationship.
+                - Always cite a **subset** of the chunk, never the full text. The citation should be as short as possible while providing the relevant information (typically one to two sentences).
+                - Do not paraphrase the chunk text in the citation; use the original subset directly from the chunk.
+                - If multiple citations are needed for different sections of the response, create new <grounded_text> tags for each.
+
+            2. **Citation Guidelines**:
+                - The citation must include only the relevant excerpt from the chunk being referenced.
+                - Use unique citation indices and reference the chunk_id for the source of the information.
+                - For text chunks, the citation content must reflect the **exact subset** of the original chunk that is relevant to the grounded_text tag.
+
+            **Example**:
+
+            <answer>
+                <grounded_text citation_index="1">
+                    Artificial Intelligence is revolutionizing various sectors, with healthcare seeing transformations in diagnosis and treatment planning.
+                </grounded_text>
+                <grounded_text citation_index="2">
+                    Based on recent data, AI has drastically improved mammogram analysis, achieving 99% accuracy at a rate 30 times faster than human radiologists.
+                </grounded_text>
+
+                <citations>
+                    <citation index="1" chunk_id="abc123" type="text">Artificial Intelligence is revolutionizing various industries, especially in healthcare.</citation>
+                    <citation index="2" chunk_id="abc124" type="table"></citation>
+                </citations>
+
+                <follow_up_questions>
+                    <question>How can AI enhance patient outcomes in fields outside radiology?</question>
+                    <question>What are the challenges in implementing AI systems across different hospitals?</question>
+                    <question>How might AI-driven advancements impact healthcare costs?</question>
+                </follow_up_questions>
+            </answer>
+            `,
+
+            `Performs a RAG (Retrieval-Augmented Generation) search on user documents and returns a set of document chunks (text or images) to provide a grounded response based on user documents.`
+        );
+    }
+
+    async execute(args: { hypothetical_document_chunk: string }): Promise<unknown> {
+        const relevantChunks = await this.vectorstore.retrieve(args.hypothetical_document_chunk);
+        const formatted_chunks = await this.getFormattedChunks(relevantChunks);
+        return formatted_chunks;
+    }
+
+    async getFormattedChunks(relevantChunks: RAGChunk[]): Promise<unknown> {
+        try {
+            const { formattedChunks } = await Networking.PostToServer('/formatChunks', { relevantChunks });
+
+            if (!formattedChunks) {
+                throw new Error('Failed to format chunks');
+            }
+
+            return formattedChunks;
+        } catch (error) {
+            console.error('Error formatting chunks:', error);
+            throw error;
+        }
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/SearchTool.ts b/src/client/views/nodes/chatbot/tools/SearchTool.ts
new file mode 100644
index 000000000..3a4668422
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/SearchTool.ts
@@ -0,0 +1,53 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Networking } from '../../../../Network';
+import { BaseTool } from './BaseTool';
+
+export class SearchTool extends BaseTool<{ query: string | string[] }> {
+    private _addLinkedUrlDoc: (url: string, id: string) => void;
+    private _max_results: number;
+    constructor(addLinkedUrlDoc: (url: string, id: string) => void, max_results: number = 5) {
+        super(
+            'searchTool',
+            'Search the web to find a wide range of websites related to a query or multiple queries',
+            {
+                query: {
+                    type: 'string',
+                    description: 'The search query or queries to use for finding websites',
+                    required: 'true',
+                    max_inputs: '3',
+                },
+            },
+            'Provide up to 3 search queries to find a broad range of websites. This tool is intended to help you identify relevant websites, but not to be used for providing the final answer. Use this information to determine which specific website to investigate further.',
+            'Returns a list of websites and their overviews based on the search queries, helping to identify which websites might contain relevant information.'
+        );
+        this._addLinkedUrlDoc = addLinkedUrlDoc;
+        this._max_results = max_results;
+    }
+
+    async execute(args: { query: string | string[] }): Promise<unknown> {
+        const queries = Array.isArray(args.query) ? args.query : [args.query];
+        const allResults = [];
+
+        for (const query of queries) {
+            try {
+                const { results } = await Networking.PostToServer('/getWebSearchResults', { query, max_results: this._max_results });
+                const data: { type: string; text: string }[] = results.map((result: { url: string; snippet: string }) => {
+                    const id = uuidv4();
+                    return {
+                        type: 'text',
+                        text: `<chunk chunk_id="${id}" chunk_type="text">
+                                <url>${result.url}</url>
+                                <overview>${result.snippet}</overview>
+                            </chunk>`,
+                    };
+                });
+                allResults.push(...data);
+            } catch (error) {
+                console.log(error);
+                allResults.push({ type: 'text', text: `An error occurred while performing the web search for query: ${query}` });
+            }
+        }
+
+        return allResults;
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/WebsiteInfoScraperTool.ts b/src/client/views/nodes/chatbot/tools/WebsiteInfoScraperTool.ts
new file mode 100644
index 000000000..1efb389b8
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/WebsiteInfoScraperTool.ts
@@ -0,0 +1,84 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Networking } from '../../../../Network';
+import { BaseTool } from './BaseTool';
+
+export class WebsiteInfoScraperTool extends BaseTool<{ url: string | string[] }> {
+    private _addLinkedUrlDoc: (url: string, id: string) => void;
+
+    constructor(addLinkedUrlDoc: (url: string, id: string) => void) {
+        super(
+            'websiteInfoScraper',
+            'Scrape detailed information from specific websites relevant to the user query',
+            {
+                url: {
+                    type: 'string',
+                    description: 'The URL(s) of the website(s) to scrape',
+                    required: true,
+                    max_inputs: 3,
+                },
+            },
+            `
+            Your task is to provide a comprehensive response to the user's prompt using the content scraped from relevant websites. Ensure you follow these guidelines for structuring your response:
+
+            1. Grounded Text Tag Structure:
+               - Wrap all text derived from the scraped website(s) in <grounded_text> tags.
+               - **Do not include non-sourced information** in <grounded_text> tags.
+               - Use a single <grounded_text> tag for content derived from a single website. If citing multiple websites, create new <grounded_text> tags for each.
+               - Ensure each <grounded_text> tag has a citation index corresponding to the scraped URL.
+
+            2. Citation Tag Structure:
+               - Create a <citation> tag for each distinct piece of information used from the website(s).
+               - Each <citation> tag must reference a URL chunk using the chunk_id attribute.
+               - For URL-based citations, leave the citation content empty, but reference the chunk_id and type as 'url'.
+
+            3. Structural Integrity Checks:
+               - Ensure all opening and closing tags are matched properly.
+               - Verify that all citation_index attributes in <grounded_text> tags correspond to valid citations.
+               - Do not over-cite—cite only the most relevant parts of the websites.
+
+            Example Usage:
+
+            <answer>
+                <grounded_text citation_index="1">
+                Based on data from the World Bank, economic growth has stabilized in recent years, following a surge in investments.
+                </grounded_text>
+                <grounded_text citation_index="2">
+                According to information retrieved from the International Monetary Fund, the inflation rate has been gradually decreasing since 2020.
+                </grounded_text>
+
+                <citations>
+                    <citation index="1" chunk_id="1234" type="url"></citation>
+                    <citation index="2" chunk_id="5678" type="url"></citation>
+                </citations>
+
+                <follow_up_questions>
+                    <question>What are the long-term economic impacts of increased investments on GDP?</question>
+                    <question>How might inflation trends affect future monetary policy?</question>
+                    <question>Are there additional factors that could influence economic growth beyond investments and inflation?</question>
+                </follow_up_questions>
+            </answer>
+            `,
+            'Returns the text content of the webpages for further analysis and grounding.'
+        );
+        this._addLinkedUrlDoc = addLinkedUrlDoc;
+    }
+
+    async execute(args: { url: string | string[] }): Promise<unknown> {
+        const urls = Array.isArray(args.url) ? args.url : [args.url];
+        const results = [];
+
+        for (const url of urls) {
+            try {
+                const { website_plain_text } = await Networking.PostToServer('/scrapeWebsite', { url });
+                const id = uuidv4();
+                this._addLinkedUrlDoc(url, id);
+                results.push({ type: 'text', text: `<chunk chunk_id=${id} chunk_type=url>\n${website_plain_text}\n</chunk>\n` });
+            } catch (error) {
+                console.log(error);
+                results.push({ type: 'text', text: `An error occurred while scraping the website: ${url}` });
+            }
+        }
+
+        return results;
+    }
+}
diff --git a/src/client/views/nodes/chatbot/tools/WikipediaTool.ts b/src/client/views/nodes/chatbot/tools/WikipediaTool.ts
new file mode 100644
index 000000000..692dff749
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/WikipediaTool.ts
@@ -0,0 +1,36 @@
+import { v4 as uuidv4 } from 'uuid';
+import { Networking } from '../../../../Network';
+import { BaseTool } from './BaseTool';
+
+export class WikipediaTool extends BaseTool<{ title: string }> {
+    private _addLinkedUrlDoc: (url: string, id: string) => void;
+    constructor(addLinkedUrlDoc: (url: string, id: string) => void) {
+        super(
+            'wikipedia',
+            'Search Wikipedia and return a summary',
+            {
+                title: {
+                    type: 'string',
+                    description: 'The title of the Wikipedia article to search',
+                    required: true,
+                },
+            },
+            'Provide simply the title you want to search on Wikipedia and nothing more. If re-using this tool, try a different title for different information.',
+            'Returns a summary from searching an article title on Wikipedia'
+        );
+        this._addLinkedUrlDoc = addLinkedUrlDoc;
+    }
+
+    async execute(args: { title: string }): Promise<unknown> {
+        try {
+            const { text } = await Networking.PostToServer('/getWikipediaSummary', { title: args.title });
+            const id = uuidv4();
+            const url = `https://en.wikipedia.org/wiki/${args.title.replace(/ /g, '_')}`;
+            this._addLinkedUrlDoc(url, id);
+            return [{ type: 'text', text: `<chunk chunk_id=${id} chunk_type=csv}> ${text} </chunk>` }];
+        } catch (error) {
+            console.log(error);
+            return [{ type: 'text', text: 'An error occurred while fetching the article.' }];
+        }
+    }
+}
diff --git a/src/client/views/nodes/chatbot/types/types.ts b/src/client/views/nodes/chatbot/types/types.ts
new file mode 100644
index 000000000..2bc7f4952
--- /dev/null
+++ b/src/client/views/nodes/chatbot/types/types.ts
@@ -0,0 +1,128 @@
+export enum ASSISTANT_ROLE {
+    USER = 'user',
+    ASSISTANT = 'assistant',
+}
+
+export enum TEXT_TYPE {
+    NORMAL = 'normal',
+    GROUNDED = 'grounded',
+    ERROR = 'error',
+}
+
+export enum CHUNK_TYPE {
+    TEXT = 'text',
+    IMAGE = 'image',
+    TABLE = 'table',
+    URL = 'url',
+    CSV = 'CSV',
+}
+
+export enum PROCESSING_TYPE {
+    THOUGHT = 'thought',
+    ACTION = 'action',
+    //eventually migrate error to here
+}
+
+export function getChunkType(type: string): CHUNK_TYPE {
+    switch (type.toLowerCase()) {
+        case 'text':
+            return CHUNK_TYPE.TEXT;
+            break;
+        case 'image':
+            return CHUNK_TYPE.IMAGE;
+            break;
+        case 'table':
+            return CHUNK_TYPE.TABLE;
+            break;
+        case 'CSV':
+            return CHUNK_TYPE.CSV;
+            break;
+        case 'url':
+            return CHUNK_TYPE.URL;
+            break;
+        default:
+            return CHUNK_TYPE.TEXT;
+            break;
+    }
+}
+
+export interface ProcessingInfo {
+    index: number;
+    type: PROCESSING_TYPE;
+    content: string;
+}
+
+export interface MessageContent {
+    index: number;
+    type: TEXT_TYPE;
+    text: string;
+    citation_ids: string[] | null;
+}
+
+export interface Citation {
+    direct_text?: string;
+    type: CHUNK_TYPE;
+    chunk_id: string;
+    citation_id: string;
+    url?: string;
+}
+export interface AssistantMessage {
+    role: ASSISTANT_ROLE;
+    content: MessageContent[];
+    follow_up_questions?: string[];
+    citations?: Citation[];
+    processing_info: ProcessingInfo[];
+    loop_summary?: string;
+}
+
+export interface RAGChunk {
+    id: string;
+    values: number[];
+    metadata: {
+        text: string;
+        type: CHUNK_TYPE;
+        original_document: string;
+        file_path: string;
+        doc_id: string;
+        location: string;
+        start_page: number;
+        end_page: number;
+        base64_data?: string | undefined;
+        page_width?: number | undefined;
+        page_height?: number | undefined;
+    };
+}
+
+export interface SimplifiedChunk {
+    chunkId: string;
+    startPage: number;
+    endPage: number;
+    location?: string;
+    chunkType: CHUNK_TYPE;
+    url?: string;
+    canDisplay?: boolean;
+}
+
+export interface AI_Document {
+    purpose: string;
+    file_name: string;
+    num_pages: number;
+    summary: string;
+    chunks: RAGChunk[];
+    type: string;
+}
+
+export interface Tool<T extends Record<string, unknown> = Record<string, unknown>> {
+    name: string;
+    description: string;
+    parameters: Record<string, unknown>;
+    citationRules: string;
+    briefSummary: string;
+    execute: (args: T) => Promise<unknown>;
+    getActionRule: () => Record<string, unknown>;
+}
+
+export interface AgentMessage {
+    role: 'system' | 'user' | 'assistant';
+    content: string | { type: string; text?: string; image_url?: { url: string } }[];
+}
diff --git a/src/client/views/nodes/chatbot/vectorstore/Vectorstore.ts b/src/client/views/nodes/chatbot/vectorstore/Vectorstore.ts
new file mode 100644
index 000000000..f96f55997
--- /dev/null
+++ b/src/client/views/nodes/chatbot/vectorstore/Vectorstore.ts
@@ -0,0 +1,269 @@
+/**
+ * @file Vectorstore.ts
+ * @description This file defines the Vectorstore class, which integrates with Pinecone for vector-based document indexing and Cohere for text embeddings.
+ * It handles tasks such as AI document management, document chunking, and retrieval of relevant document sections based on user queries.
+ * The class supports adding documents to the vectorstore, managing document status, and querying Pinecone for document chunks matching a query.
+ */
+
+import { Index, IndexList, Pinecone, PineconeRecord, QueryResponse, RecordMetadata } from '@pinecone-database/pinecone';
+import { CohereClient } from 'cohere-ai';
+import { EmbedResponse } from 'cohere-ai/api';
+import dotenv from 'dotenv';
+import { Doc } from '../../../../../fields/Doc';
+import { CsvCast, PDFCast, StrCast } from '../../../../../fields/Types';
+import { Networking } from '../../../../Network';
+import { AI_Document, CHUNK_TYPE, RAGChunk } from '../types/types';
+
+dotenv.config();
+
+/**
+ * The Vectorstore class integrates with Pinecone for vector-based document indexing and retrieval,
+ * and Cohere for text embedding. It handles AI document management, uploads, and query-based retrieval.
+ */
+export class Vectorstore {
+    private pinecone: Pinecone; // Pinecone client for managing the vector index.
+    private index!: Index; // The specific Pinecone index used for document chunks.
+    private cohere: CohereClient; // Cohere client for generating embeddings.
+    private indexName: string = 'pdf-chatbot'; // Default name for the index.
+    private _id: string; // Unique ID for the Vectorstore instance.
+    private _doc_ids: string[] = []; // List of document IDs handled by this instance.
+
+    documents: AI_Document[] = []; // Store the documents indexed in the vectorstore.
+
+    /**
+     * Constructor initializes the Pinecone and Cohere clients, sets up the document ID list,
+     * and initializes the Pinecone index.
+     * @param id The unique identifier for the vectorstore instance.
+     * @param doc_ids A function that returns a list of document IDs.
+     */
+    constructor(id: string, doc_ids: () => string[]) {
+        const pineconeApiKey = process.env.PINECONE_API_KEY;
+        if (!pineconeApiKey) {
+            throw new Error('PINECONE_API_KEY is not defined.');
+        }
+
+        // Initialize Pinecone and Cohere clients with API keys from the environment.
+        this.pinecone = new Pinecone({ apiKey: pineconeApiKey });
+        this.cohere = new CohereClient({ token: process.env.COHERE_API_KEY });
+        this._id = id;
+        this._doc_ids = doc_ids();
+        this.initializeIndex();
+    }
+
+    /**
+     * Initializes the Pinecone index by checking if it exists, and creating it if not.
+     * The index is set to use the cosine metric for vector similarity.
+     */
+    private async initializeIndex() {
+        const indexList: IndexList = await this.pinecone.listIndexes();
+
+        // Check if the index already exists, otherwise create it.
+        if (!indexList.indexes?.some(index => index.name === this.indexName)) {
+            await this.pinecone.createIndex({
+                name: this.indexName,
+                dimension: 1024,
+                metric: 'cosine',
+                spec: {
+                    serverless: {
+                        cloud: 'aws',
+                        region: 'us-east-1',
+                    },
+                },
+            });
+        }
+
+        // Set the index for future use.
+        this.index = this.pinecone.Index(this.indexName);
+    }
+
+    /**
+     * Adds an AI document to the vectorstore. This method handles document chunking, uploading to the
+     * vectorstore, and updating the progress for long-running tasks like file uploads.
+     * @param doc The document to be added to the vectorstore.
+     * @param progressCallback Callback to update the progress of the upload.
+     */
+    async addAIDoc(doc: Doc, progressCallback: (progress: number, step: string) => void) {
+        console.log('Adding AI Document:', doc);
+        const ai_document_status: string = StrCast(doc.ai_document_status);
+
+        // Skip if the document is already in progress or completed.
+        if (ai_document_status !== undefined && ai_document_status.trim() !== '' && ai_document_status !== '{}') {
+            if (ai_document_status === 'IN PROGRESS') {
+                console.log('Already in progress.');
+                return;
+            }
+            if (!this._doc_ids.includes(StrCast(doc.ai_doc_id))) {
+                this._doc_ids.push(StrCast(doc.ai_doc_id));
+            }
+        } else {
+            // Start processing the document.
+            doc.ai_document_status = 'PROGRESS';
+            console.log(doc);
+
+            // Get the local file path (CSV or PDF).
+            const local_file_path: string = CsvCast(doc.data)?.url?.pathname ?? PDFCast(doc.data)?.url?.pathname;
+            console.log('Local File Path:', local_file_path);
+
+            if (local_file_path) {
+                console.log('Creating AI Document...');
+                // Start the document creation process by sending the file to the server.
+                const { jobId } = await Networking.PostToServer('/createDocument', { file_path: local_file_path });
+
+                // Poll the server for progress updates.
+                const inProgress = true;
+                let result: (AI_Document & { doc_id: string }) | null = null; // bcz: is this the correct type??
+                while (inProgress) {
+                    // Polling interval for status updates.
+                    await new Promise(resolve => setTimeout(resolve, 2000));
+
+                    // Check if the job is completed.
+                    const resultResponse = await Networking.FetchFromServer(`/getResult/${jobId}`);
+                    const resultResponseJson = JSON.parse(resultResponse);
+                    if (resultResponseJson.status === 'completed') {
+                        console.log('Result here:', resultResponseJson);
+                        result = resultResponseJson;
+                        break;
+                    }
+
+                    // Fetch progress information and update the progress callback.
+                    const progressResponse = await Networking.FetchFromServer(`/getProgress/${jobId}`);
+                    const progressResponseJson = JSON.parse(progressResponse);
+                    if (progressResponseJson) {
+                        const progress = progressResponseJson.progress;
+                        const step = progressResponseJson.step;
+                        progressCallback(progress, step);
+                    }
+                }
+                if (!result) {
+                    console.error('Error processing document.');
+                    return;
+                }
+
+                // Once completed, process the document and add it to the vectorstore.
+                console.log('Document JSON:', result);
+                this.documents.push(result);
+                await this.indexDocument(result);
+                console.log(`Document added: ${result.file_name}`);
+
+                // Update document metadata such as summary, purpose, and vectorstore ID.
+                doc.summary = result.summary;
+                doc.ai_doc_id = result.doc_id;
+                this._doc_ids.push(result.doc_id);
+                doc.ai_purpose = result.purpose;
+
+                if (!doc.vectorstore_id) {
+                    doc.vectorstore_id = JSON.stringify([this._id]);
+                } else {
+                    doc.vectorstore_id = JSON.stringify(JSON.parse(StrCast(doc.vectorstore_id)).concat([this._id]));
+                }
+
+                if (!doc.chunk_simpl) {
+                    doc.chunk_simpl = JSON.stringify({ chunks: [] });
+                }
+
+                // Process each chunk of the document and update the document's chunk_simpl field.
+                result.chunks.forEach((chunk: RAGChunk) => {
+                    const chunkToAdd = {
+                        chunkId: chunk.id,
+                        startPage: chunk.metadata.start_page,
+                        endPage: chunk.metadata.end_page,
+                        location: chunk.metadata.location,
+                        chunkType: chunk.metadata.type as CHUNK_TYPE,
+                        text: chunk.metadata.text,
+                    };
+                    const new_chunk_simpl = JSON.parse(StrCast(doc.chunk_simpl));
+                    new_chunk_simpl.chunks = new_chunk_simpl.chunks.concat(chunkToAdd);
+                    doc.chunk_simpl = JSON.stringify(new_chunk_simpl);
+                });
+
+                // Mark the document status as completed.
+                doc.ai_document_status = 'COMPLETED';
+            }
+        }
+    }
+
+    /**
+     * Indexes the processed document by uploading the document's vector chunks to the Pinecone index.
+     * @param document The processed document containing its chunks and metadata.
+     */
+    private async indexDocument(document: AI_Document) {
+        console.log('Uploading vectors to content namespace...');
+
+        // Prepare Pinecone records for each chunk in the document.
+        const pineconeRecords: PineconeRecord[] = (document.chunks as RAGChunk[]).map(chunk => ({
+            id: chunk.id,
+            values: chunk.values,
+            metadata: { ...chunk.metadata } as RecordMetadata,
+        }));
+
+        // Upload the records to Pinecone.
+        await this.index.upsert(pineconeRecords);
+    }
+
+    /**
+     * Retrieves the top K document chunks relevant to the user's query.
+     * This involves embedding the query using Cohere, then querying Pinecone for matching vectors.
+     * @param query The search query string.
+     * @param topK The number of top results to return (default is 10).
+     * @returns A list of document chunks that match the query.
+     */
+    async retrieve(query: string, topK: number = 10): Promise<RAGChunk[]> {
+        console.log(`Retrieving chunks for query: ${query}`);
+        try {
+            // Generate an embedding for the query using Cohere.
+            const queryEmbeddingResponse: EmbedResponse = await this.cohere.embed({
+                texts: [query],
+                model: 'embed-english-v3.0',
+                inputType: 'search_query',
+            });
+
+            let queryEmbedding: number[];
+
+            // Extract the embedding from the response.
+            if (Array.isArray(queryEmbeddingResponse.embeddings)) {
+                queryEmbedding = queryEmbeddingResponse.embeddings[0];
+            } else if (queryEmbeddingResponse.embeddings && 'embeddings' in queryEmbeddingResponse.embeddings) {
+                queryEmbedding = (queryEmbeddingResponse.embeddings as { embeddings: number[][] }).embeddings[0];
+            } else {
+                throw new Error('Invalid embedding response format');
+            }
+
+            if (!Array.isArray(queryEmbedding)) {
+                throw new Error('Query embedding is not an array');
+            }
+
+            // Query the Pinecone index using the embedding and filter by document IDs.
+            const queryResponse: QueryResponse = await this.index.query({
+                vector: queryEmbedding,
+                filter: {
+                    doc_id: { $in: this._doc_ids },
+                },
+                topK,
+                includeValues: true,
+                includeMetadata: true,
+            });
+
+            // Map the results into RAGChunks and return them.
+            return queryResponse.matches.map(
+                match =>
+                    ({
+                        id: match.id,
+                        values: match.values as number[],
+                        metadata: match.metadata as {
+                            text: string;
+                            type: string;
+                            original_document: string;
+                            file_path: string;
+                            doc_id: string;
+                            location: string;
+                            start_page: number;
+                            end_page: number;
+                        },
+                    }) as RAGChunk
+            );
+        } catch (error) {
+            console.error(`Error retrieving chunks: ${error}`);
+            return [];
+        }
+    }
+}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index a9bc5ee70..6f05ddf96 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -97,9 +97,8 @@ export namespace Field {
         });
         return script;
     }
-    export function toString(fieldIn: unknown) {
-        const field = fieldIn as FieldType;
-        if (typeof field === 'string' || typeof field === 'number' || typeof field === 'boolean') return String(field);
+    export function toString(field: FieldResult<FieldType> | FieldType | undefined) {
+        if (field instanceof Promise || typeof field === 'string' || typeof field === 'number' || typeof field === 'boolean') return String(field);
         return field?.[ToString]?.() || '';
     }
     export function IsField(field: unknown): field is FieldType;
@@ -111,7 +110,7 @@ export namespace Field {
     export function Copy(field: unknown) {
         return field instanceof ObjectField ? ObjectField.MakeCopy(field) : (field as FieldType);
     }
-    UndoManager.SetFieldPrinter(toString);
+    UndoManager.SetFieldPrinter((val: unknown) => (IsField(val) ? toString(val) : ''));
 }
 export type FieldType = number | string | boolean | ObjectField | RefField;
 export type Opt<T> = T | undefined;
@@ -337,7 +336,6 @@ export class Doc extends RefField {
         if (!id || forceSave) {
             DocServer.CreateDocField(docProxy);
         }
-        // eslint-disable-next-line no-constructor-return
         return docProxy; // need to return the proxy from the constructor so that all our added fields will get called
     }
 
@@ -464,8 +462,6 @@ export class Doc extends RefField {
             });
     }
 }
-
-// eslint-disable-next-line no-redeclare
 export namespace Doc {
     export let SelectOnLoad: Doc | undefined;
     export function SetSelectOnLoad(doc: Doc | undefined) {
@@ -661,7 +657,6 @@ export namespace Doc {
                     if (reversed) list.splice(0, 0, doc);
                     else list.push(doc);
                 } else {
-                    // eslint-disable-next-line no-lonely-if
                     if (reversed) list.splice(before ? list.length - ind + 1 : list.length - ind, 0, doc);
                     else list.splice(before ? ind : ind + 1, 0, doc);
                 }
@@ -1194,7 +1189,6 @@ export namespace Doc {
         return Cast(Doc.UserDoc().myLinkDatabase, Doc, null);
     }
     export function SetUserDoc(doc: Doc) {
-        // eslint-disable-next-line no-return-assign
         return (manager._user_doc = doc);
     }
 
diff --git a/src/fields/RichTextUtils.ts b/src/fields/RichTextUtils.ts
index b3534dde7..8c073c87b 100644
--- a/src/fields/RichTextUtils.ts
+++ b/src/fields/RichTextUtils.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-namespace */
 /* eslint-disable no-await-in-loop */
 /* eslint-disable no-use-before-define */
 import { AssertionError } from 'assert';
@@ -175,7 +174,6 @@ export namespace RichTextUtils {
             const indentMap = new Map<ListGroup, BulletPosition[]>();
             let globalOffset = 0;
             const nodes: Node[] = [];
-            // eslint-disable-next-line no-restricted-syntax
             for (const element of structured) {
                 if (Array.isArray(element)) {
                     lists.push(element);
@@ -374,11 +372,9 @@ export namespace RichTextUtils {
         const marksToStyle = async (nodes: (Node | null)[]): Promise<docsV1.Schema$Request[]> => {
             const requests: docsV1.Schema$Request[] = [];
             let position = 1;
-            // eslint-disable-next-line no-restricted-syntax
             for (const node of nodes) {
                 if (node === null) {
                     position += 2;
-                    // eslint-disable-next-line no-continue
                     continue;
                 }
                 const { marks, attrs, nodeSize } = node;
@@ -390,9 +386,7 @@ export namespace RichTextUtils {
                 };
                 let mark: Mark;
                 const markMap = BuildMarkMap(marks);
-                // eslint-disable-next-line no-restricted-syntax
                 for (const markName of Object.keys(schema.marks)) {
-                    // eslint-disable-next-line no-cond-assign
                     if (ignored.includes(markName) || !(mark = markMap[markName])) {
                         continue;
                     }
diff --git a/src/server/ApiManagers/AssistantManager.ts b/src/server/ApiManagers/AssistantManager.ts
index b42314e41..b7d4191ca 100644
--- a/src/server/ApiManagers/AssistantManager.ts
+++ b/src/server/ApiManagers/AssistantManager.ts
@@ -1,13 +1,31 @@
+/**
+ * @file AssistantManager.ts
+ * @description This file defines the AssistantManager class, responsible for managing various
+ * API routes related to the Assistant functionality. It provides features such as file handling,
+ * web scraping, and integration with third-party APIs like OpenAI and Google Custom Search.
+ * It also handles job tracking and progress reporting for tasks like document creation and web scraping.
+ * Utility functions for path manipulation and file operations are included, along with
+ * a mechanism for handling retry logic during API calls.
+ */
+
+import { Readability } from '@mozilla/readability';
+import axios from 'axios';
+import { spawn } from 'child_process';
 import * as fs from 'fs';
-import { createReadStream, writeFile } from 'fs';
+import { writeFile } from 'fs';
+import { google } from 'googleapis';
+import { JSDOM } from 'jsdom';
 import OpenAI from 'openai';
 import * as path from 'path';
+import * as puppeteer from 'puppeteer';
 import { promisify } from 'util';
 import * as uuid from 'uuid';
-import { filesDirectory, publicDirectory } from '../SocketData';
+import { AI_Document } from '../../client/views/nodes/chatbot/types/types';
 import { Method } from '../RouteManager';
+import { filesDirectory, publicDirectory } from '../SocketData';
 import ApiManager, { Registration } from './ApiManager';
 
+// Enumeration of directories where different file types are stored
 export enum Directory {
     parsed_files = 'parsed_files',
     images = 'images',
@@ -17,115 +35,514 @@ export enum Directory {
     pdf_thumbnails = 'pdf_thumbnails',
     audio = 'audio',
     csv = 'csv',
+    chunk_images = 'chunk_images',
+    scrape_images = 'scrape_images',
 }
 
+// In-memory job tracking
+const jobResults: { [key: string]: unknown } = {};
+const jobProgress: { [key: string]: unknown } = {};
+
+/**
+ * Constructs a normalized path to a file in the server's file system.
+ * @param directory The directory where the file is stored.
+ * @param filename The name of the file.
+ * @returns The full normalized path to the file.
+ */
 export function serverPathToFile(directory: Directory, filename: string) {
     return path.normalize(`${filesDirectory}/${directory}/${filename}`);
 }
 
+/**
+ * Constructs a normalized path to a directory in the server's file system.
+ * @param directory The directory to access.
+ * @returns The full normalized path to the directory.
+ */
 export function pathToDirectory(directory: Directory) {
     return path.normalize(`${filesDirectory}/${directory}`);
 }
 
+/**
+ * Constructs the client-accessible URL for a file.
+ * @param directory The directory where the file is stored.
+ * @param filename The name of the file.
+ * @returns The URL path to the file.
+ */
 export function clientPathToFile(directory: Directory, filename: string) {
     return `/files/${directory}/${filename}`;
 }
 
+// Promisified versions of filesystem functions
 const writeFileAsync = promisify(writeFile);
 const readFileAsync = promisify(fs.readFile);
 
+/**
+ * Class responsible for handling various API routes related to the Assistant functionality.
+ * This class extends `ApiManager` and handles registration of routes and secure request handlers.
+ */
 export default class AssistantManager extends ApiManager {
+    /**
+     * Registers all API routes and initializes necessary services like OpenAI and Google Custom Search.
+     * @param register The registration method to register routes and handlers.
+     */
     protected initialize(register: Registration): void {
-        const openai = new OpenAI({ apiKey: process.env.OPENAI_KEY, dangerouslyAllowBrowser: true });
+        // Initialize Google Custom Search API
+        const customsearch = google.customsearch('v1');
+
+        // Register Wikipedia summary API route
+        register({
+            method: Method.POST,
+            subscription: '/getWikipediaSummary',
+            secureHandler: async ({ req, res }) => {
+                const { title } = req.body;
+                try {
+                    // Fetch summary from Wikipedia using axios
+                    const response = await axios.get('https://en.wikipedia.org/w/api.php', {
+                        params: {
+                            action: 'query',
+                            list: 'search',
+                            srsearch: title,
+                            format: 'json',
+                        },
+                    });
+                    const summary = response.data.query.search[0]?.snippet || 'No article found with that title.';
+                    res.send({ text: summary });
+                } catch (error) {
+                    console.error('Error retrieving Wikipedia summary:', error);
+                    res.status(500).send({
+                        error: 'Error retrieving article summary from Wikipedia.',
+                    });
+                }
+            },
+        });
 
+        // Register Google Web Search Results API route
         register({
             method: Method.POST,
-            subscription: '/uploadPDFToVectorStore',
+            subscription: '/getWebSearchResults',
             secureHandler: async ({ req, res }) => {
-                const { urls, threadID, assistantID, vector_store_id } = req.body;
-
-                const csvFilesIds: string[] = [];
-                const otherFileIds: string[] = [];
-                const allFileIds: string[] = [];
-
-                const fileProcesses = urls.map(async (source: string) => {
-                    const fullPath = path.join(publicDirectory, source);
-                    const fileData = await openai.files.create({ file: createReadStream(fullPath), purpose: 'assistants' });
-                    allFileIds.push(fileData.id);
-                    if (source.endsWith('.csv')) {
-                        console.log(source);
-                        csvFilesIds.push(fileData.id);
+                const { query, max_results } = req.body;
+                try {
+                    // Fetch search results using Google Custom Search API
+                    const response = await customsearch.cse.list({
+                        q: query,
+                        cx: process.env._CLIENT_GOOGLE_SEARCH_ENGINE_ID,
+                        key: process.env._CLIENT_GOOGLE_API_KEY,
+                        safe: 'active',
+                        num: max_results,
+                    });
+
+                    const results =
+                        response.data.items?.map(item => ({
+                            url: item.link,
+                            snippet: item.snippet,
+                        })) || [];
+
+                    res.send({ results });
+                } catch (error) {
+                    console.error('Error performing web search:', error);
+                    res.status(500).send({
+                        error: 'Failed to perform web search',
+                    });
+                }
+            },
+        });
+
+        // Axios instance with custom headers for scraping
+        const axiosInstance = axios.create({
+            headers: {
+                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+            },
+        });
+
+        /**
+         * Utility function to introduce delay (used for retries).
+         * @param ms Delay in milliseconds.
+         */
+        const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+        /**
+         * Function to fetch a URL with retry logic, handling rate limits.
+         * Retries a request if it fails due to rate limits (HTTP status 429).
+         * @param url The URL to fetch.
+         * @param retries The number of retry attempts.
+         * @param backoff Initial backoff time in milliseconds.
+         */
+        const fetchWithRetry = async (url: string, retries = 3, backoff = 300): Promise<unknown> => {
+            try {
+                const response = await axiosInstance.get(url);
+                return response.data;
+            } catch (error) {
+                if (retries > 0 && (error as { response: { status: number } }).response?.status === 429) {   // bcz: don't know the error type
+                    console.log(`Rate limited. Retrying in ${backoff}ms...`);
+                    await delay(backoff);
+                    return fetchWithRetry(url, retries - 1, backoff * 2);
+                } // prettier-ignore
+                throw error;
+            }
+        };
+
+        // Register a proxy fetch API route
+        register({
+            method: Method.POST,
+            subscription: '/proxyFetch',
+            secureHandler: async ({ req, res }) => {
+                const { url } = req.body;
+
+                if (!url) {
+                    res.status(400).send({ error: 'No URL provided' });
+                    return;
+                }
+
+                try {
+                    const data = await fetchWithRetry(url);
+                    res.send({ data });
+                } catch (error) {
+                    console.error('Error fetching the URL:', error);
+                    res.status(500).send({
+                        error: 'Failed to fetch the URL',
+                    });
+                }
+            },
+        });
+
+        // Register an API route to scrape website content using Puppeteer and JSDOM
+        register({
+            method: Method.POST,
+            subscription: '/scrapeWebsite',
+            secureHandler: async ({ req, res }) => {
+                const { url } = req.body;
+                try {
+                    // Launch Puppeteer browser to navigate to the webpage
+                    const browser = await puppeteer.launch({
+                        args: ['--no-sandbox', '--disable-setuid-sandbox'],
+                    });
+                    const page = await browser.newPage();
+                    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
+                    await page.goto(url, { waitUntil: 'networkidle2' });
+
+                    // Extract HTML content
+                    const htmlContent = await page.content();
+                    await browser.close();
+
+                    // Parse HTML content using JSDOM
+                    const dom = new JSDOM(htmlContent, { url });
+
+                    // Extract readable content using Mozilla's Readability API
+                    const reader = new Readability(dom.window.document);
+                    const article = reader.parse();
+
+                    if (article) {
+                        const plainText = article.textContent;
+                        res.send({ website_plain_text: plainText });
                     } else {
-                        openai.beta.vectorStores.files.create(vector_store_id, { file_id: fileData.id });
-                        otherFileIds.push(fileData.id);
+                        res.status(500).send({ error: 'Failed to extract readable content' });
                     }
-                });
-                try {
-                    await Promise.all(fileProcesses).then(() => {
-                        res.send({ vector_store_id: vector_store_id, openai_file_ids: allFileIds });
+                } catch (error) {
+                    console.error('Error scraping website:', error);
+                    res.status(500).send({
+                        error: 'Failed to scrape website',
                     });
+                }
+            },
+        });
+
+        register({
+            method: Method.POST,
+            subscription: '/createDocument',
+            secureHandler: async ({ req, res }) => {
+                const { file_path } = req.body;
+                const public_path = path.join(publicDirectory, file_path); // Resolve the file path in the public directory
+                const file_name = path.basename(file_path); // Extract the file name from the path
+
+                try {
+                    // Read the file data and encode it as base64
+                    const file_data: string = fs.readFileSync(public_path, { encoding: 'base64' });
+
+                    // Generate a unique job ID for tracking
+                    const jobId = uuid.v4();
+
+                    // Spawn the Python process and track its progress/output
+                    // eslint-disable-next-line no-use-before-define
+                    spawnPythonProcess(jobId, file_name, file_data);
+
+                    // Send the job ID back to the client for tracking
+                    res.send({ jobId });
                 } catch (error) {
-                    res.status(500).send({ error: 'Failed to process files' + error });
+                    console.error('Error initiating document creation:', error);
+                    res.status(500).send({
+                        error: 'Failed to initiate document creation',
+                    });
                 }
             },
         });
 
+        // Register an API route to check the progress of a document creation job
+        register({
+            method: Method.GET,
+            subscription: '/getProgress/:jobId',
+            secureHandler: async ({ req, res }) => {
+                const { jobId } = req.params; // Get the job ID from the URL parameters
+                // Check if the job progress is available
+                if (jobProgress[jobId]) {
+                    res.json(jobProgress[jobId]);
+                } else {
+                    res.json({
+                        step: 'Processing Document...',
+                        progress: '0',
+                    });
+                }
+            },
+        });
+
+        // Register an API route to get the final result of a document creation job
+        register({
+            method: Method.GET,
+            subscription: '/getResult/:jobId',
+            secureHandler: async ({ req, res }) => {
+                const { jobId } = req.params; // Get the job ID from the URL parameters
+                // Check if the job result is available
+                if (jobResults[jobId]) {
+                    const result = jobResults[jobId] as AI_Document & { status: string };
+
+                    // If the result contains image or table chunks, save the base64 data as image files
+                    if (result.chunks && Array.isArray(result.chunks)) {
+                        for (const chunk of result.chunks) {
+                            if (chunk.metadata && (chunk.metadata.type === 'image' || chunk.metadata.type === 'table')) {
+                                const files_directory = '/files/chunk_images/';
+                                const directory = path.join(publicDirectory, files_directory);
+
+                                // Ensure the directory exists or create it
+                                if (!fs.existsSync(directory)) {
+                                    fs.mkdirSync(directory);
+                                }
+
+                                const fileName = path.basename(chunk.metadata.file_path); // Get the file name from the path
+                                const filePath = path.join(directory, fileName); // Create the full file path
+
+                                // Check if the chunk contains base64 encoded data
+                                if (chunk.metadata.base64_data) {
+                                    // Decode the base64 data and write it to a file
+                                    const buffer = Buffer.from(chunk.metadata.base64_data, 'base64');
+                                    await fs.promises.writeFile(filePath, buffer);
+
+                                    // Update the file path in the chunk's metadata
+                                    chunk.metadata.file_path = path.join(files_directory, fileName);
+                                    chunk.metadata.base64_data = undefined; // Remove the base64 data from the metadata
+                                } else {
+                                    console.warn(`No base64_data found for chunk: ${fileName}`);
+                                }
+                            }
+                        }
+                        result.status = 'completed';
+                    } else {
+                        result.status = 'pending';
+                    }
+                    res.json(result); // Send the result back to the client
+                } else {
+                    res.status(202).send({ status: 'pending' });
+                }
+            },
+        });
+
+        // Register an API route to format chunks (e.g., text or image chunks) for display
         register({
             method: Method.POST,
-            subscription: '/downloadFileFromOpenAI',
+            subscription: '/formatChunks',
             secureHandler: async ({ req, res }) => {
-                const { file_id, file_name } = req.body;
-                //let files_directory: string;
-                let files_directory = '/files/openAIFiles/';
-                switch (file_name.split('.').pop()) {
-                    case 'pdf':
-                        files_directory = '/files/pdfs/';
-                        break;
-                    case 'csv':
-                        files_directory = '/files/csv/';
-                        break;
-                    case 'png':
-                    case 'jpg':
-                    case 'jpeg':
-                        files_directory = '/files/images/';
-                        break;
-                    default:
-                        break;
+                const { relevantChunks } = req.body; // Get the relevant chunks from the request body
+
+                // Initialize an array to hold the formatted content
+                const content: { type: string; text?: string; image_url?: { url: string } }[] = [{ type: 'text', text: '<chunks>' }];
+
+                for (const chunk of relevantChunks) {
+                    // Format each chunk by adding its metadata and content
+                    content.push({
+                        type: 'text',
+                        text: `<chunk chunk_id=${chunk.id} chunk_type="${chunk.metadata.type}">`,
+                    });
+
+                    // If the chunk is an image or table, read the corresponding file and encode it as base64
+                    if (chunk.metadata.type === 'image' || chunk.metadata.type === 'table') {
+                        try {
+                            const filePath = serverPathToFile(Directory.chunk_images, chunk.metadata.file_path); // Get the file path
+                            const imageBuffer = await readFileAsync(filePath); // Read the image file
+                            const base64Image = imageBuffer.toString('base64'); // Convert the image to base64
+
+                            // Add the base64-encoded image to the content array
+                            if (base64Image) {
+                                content.push({
+                                    type: 'image_url',
+                                    image_url: {
+                                        url: `data:image/jpeg;base64,${base64Image}`,
+                                    },
+                                });
+                            } else {
+                                console.log(`Failed to encode image for chunk ${chunk.id}`);
+                            }
+                        } catch (error) {
+                            console.error(`Error reading image file for chunk ${chunk.id}:`, error);
+                        }
+                    }
+
+                    // Add the chunk's text content to the formatted content
+                    content.push({ type: 'text', text: `${chunk.metadata.text}\n</chunk>\n` });
                 }
 
-                const directory = path.join(publicDirectory, files_directory);
+                content.push({ type: 'text', text: '</chunks>' });
 
-                if (!fs.existsSync(directory)) {
-                    fs.mkdirSync(directory);
+                // Send the formatted content back to the client
+                res.send({ formattedChunks: content });
+            },
+        });
+
+        // Register an API route to create and save a CSV file on the server
+        register({
+            method: Method.POST,
+            subscription: '/createCSV',
+            secureHandler: async ({ req, res }) => {
+                const { filename, data } = req.body;
+
+                // Validate that both the filename and data are provided
+                if (!filename || !data) {
+                    res.status(400).send({ error: 'Filename and data fields are required.' });
+                    return;
                 }
-                const file = await openai.files.content(file_id);
-                const new_file_name = `${uuid.v4()}-${file_name}`;
-                const file_path = path.join(directory, new_file_name);
-                const file_array_buffer = await file.arrayBuffer();
-                const bufferView = new Uint8Array(file_array_buffer);
+
                 try {
-                    const written_file = await writeFileAsync(file_path, bufferView);
-                    console.log(written_file);
-                    console.log(file_path);
-                    console.log(file_array_buffer);
-                    console.log(bufferView);
-                    const file_object = new File([bufferView], file_name);
-                    //DashUploadUtils.upload(file_object, 'openAIFiles');
-                    res.send({ file_path: path.join(files_directory, new_file_name) });
-                    /* res.send( {
-                        source: "file",
-                        result: {
-                                  accessPaths: {
-                                      agnostic: {client: path.join('/files/openAIFiles/', `${uuid.v4()}-${file_name}`)}
-                                  },
-                                  rawText: "",
-                                  duration: 0,
-                              },
-                    } ); */
+                    // Generate a UUID for the file to ensure unique naming
+                    const uuidv4 = uuid.v4();
+                    const fullFilename = `${uuidv4}-${filename}`; // Prefix the file name with the UUID
+
+                    // Get the full server path where the file will be saved
+                    const serverFilePath = serverPathToFile(Directory.csv, fullFilename);
+
+                    // Write the CSV data (which is a raw string) to the file
+                    await writeFileAsync(serverFilePath, data, 'utf8');
+
+                    // Construct the client-accessible URL for the file
+                    const fileUrl = clientPathToFile(Directory.csv, fullFilename);
+
+                    // Send the file URL and UUID back to the client
+                    res.send({ fileUrl, id: uuidv4 });
                 } catch (error) {
-                    res.status(500).send({ error: 'Failed to write file' + error });
+                    console.error('Error creating CSV file:', error);
+                    res.status(500).send({
+                        error: 'Failed to create CSV file.',
+                    });
                 }
             },
         });
     }
 }
+
+function spawnPythonProcess(jobId: string, file_name: string, file_data: string) {
+    const venvPath = path.join(__dirname, '../chunker/venv');
+    const requirementsPath = path.join(__dirname, '../chunker/requirements.txt');
+    const pythonScriptPath = path.join(__dirname, '../chunker/pdf_chunker.py');
+
+    function runPythonScript() {
+        const pythonPath = process.platform === 'win32' ? path.join(venvPath, 'Scripts', 'python') : path.join(venvPath, 'bin', 'python3');
+
+        const pythonProcess = spawn(pythonPath, [pythonScriptPath, jobId, file_name, file_data]);
+
+        let pythonOutput = '';
+        let stderrOutput = '';
+
+        pythonProcess.stdout.on('data', data => {
+            pythonOutput += data.toString();
+        });
+
+        pythonProcess.stderr.on('data', data => {
+            stderrOutput += data.toString();
+            const lines = stderrOutput.split('\n');
+            lines.forEach(line => {
+                if (line.trim()) {
+                    try {
+                        const parsedOutput = JSON.parse(line);
+                        if (parsedOutput.job_id && parsedOutput.progress !== undefined) {
+                            jobProgress[parsedOutput.job_id] = {
+                                step: parsedOutput.step,
+                                progress: parsedOutput.progress,
+                            };
+                        } else if (parsedOutput.progress !== undefined) {
+                            jobProgress[jobId] = {
+                                step: parsedOutput.step,
+                                progress: parsedOutput.progress,
+                            };
+                        }
+                    } catch (err) {
+                        console.error('Progress log from Python:', line, err);
+                    }
+                }
+            });
+        });
+
+        pythonProcess.on('close', code => {
+            if (code === 0) {
+                try {
+                    const finalResult = JSON.parse(pythonOutput);
+                    jobResults[jobId] = finalResult;
+                    jobProgress[jobId] = { step: 'Complete', progress: 100 };
+                } catch (err) {
+                    console.error('Error parsing final JSON result:', err);
+                }
+            } else {
+                console.error(`Python process exited with code ${code}`);
+                jobResults[jobId] = { error: 'Python process failed' };
+            }
+        });
+    }
+    // Check if venv exists
+    if (!fs.existsSync(venvPath)) {
+        console.log('Virtual environment not found. Creating and setting up...');
+
+        // Create venv
+        const createVenvProcess = spawn('python', ['-m', 'venv', venvPath]);
+
+        createVenvProcess.on('close', code => {
+            if (code !== 0) {
+                console.error(`Failed to create virtual environment. Exit code: ${code}`);
+                return;
+            }
+
+            console.log('Virtual environment created. Installing requirements...');
+
+            // Determine the pip path based on the OS
+            const pipPath = process.platform === 'win32' ? path.join(venvPath, 'Scripts', 'pip.exe') : path.join(venvPath, 'bin', 'pip3'); // Try 'pip3' for Unix-like systems
+
+            if (!fs.existsSync(pipPath)) {
+                console.error(`pip executable not found at ${pipPath}`);
+                return;
+            }
+
+            // Install requirements
+            const installRequirementsProcess = spawn(pipPath, ['install', '-r', requirementsPath]);
+
+            installRequirementsProcess.stdout.on('data', data => {
+                console.log(`pip stdout: ${data}`);
+            });
+
+            installRequirementsProcess.stderr.on('data', data => {
+                console.error(`pip stderr: ${data}`);
+            });
+
+            installRequirementsProcess.on('error', error => {
+                console.error(`Error starting pip process: ${error}`);
+            });
+
+            installRequirementsProcess.on('close', closecode => {
+                if (closecode !== 0) {
+                    console.error(`Failed to install requirements. Exit code: ${closecode}`);
+                    return;
+                }
+
+                console.log('Requirements installed. Running Python script...');
+                runPythonScript();
+            });
+        });
+    } else {
+        console.log('Virtual environment found. Running Python script...');
+        runPythonScript();
+    }
+}
diff --git a/src/server/chunker/pdf_chunker.py b/src/server/chunker/pdf_chunker.py
new file mode 100644
index 000000000..4fe3b9dbf
--- /dev/null
+++ b/src/server/chunker/pdf_chunker.py
@@ -0,0 +1,843 @@
+import asyncio
+import concurrent
+import sys
+
+from tqdm.asyncio import tqdm_asyncio  # Progress bar for async tasks
+import PIL
+from anthropic import Anthropic  # For language model API
+from packaging.version import parse  # Version checking
+import pytesseract  # OCR library for text extraction from images
+import re
+import dotenv  # For environment variable loading
+from lxml import etree  # XML parsing
+from tqdm import tqdm  # Progress bar for non-async tasks
+import fitz  # PyMuPDF, PDF processing library
+from PIL import Image, ImageDraw  # Image processing
+from typing import List, Dict, Any, TypedDict  # Typing for function annotations
+from ultralyticsplus import YOLO  # Object detection model (YOLO)
+import base64
+import io
+import json
+import os
+import uuid  # For generating unique IDs
+from enum import Enum  # Enums for types like document type and purpose
+import cohere  # Embedding client
+import numpy as np
+from PyPDF2 import PdfReader  # PDF text extraction
+from openai import OpenAI  # OpenAI client for text completion
+from sklearn.cluster import KMeans  # Clustering for summarization
+import warnings
+
+# Silence specific warnings
+warnings.filterwarnings('ignore', message="Valid config keys have changed")
+warnings.filterwarnings('ignore', message="torch.load")
+
+dotenv.load_dotenv()  # Load environment variables
+
+# Fix for newer versions of PIL
+if parse(PIL.__version__) >= parse('10.0.0'):
+    Image.LINEAR = Image.BILINEAR
+
+# Global dictionary to track progress of document processing jobs
+current_progress = {}
+
+def update_progress(job_id, step, progress_value):
+    """
+    Output the progress in JSON format to stdout for the Node.js process to capture.
+
+    :param job_id: The unique identifier for the processing job.
+    :param step: The current step of the job.
+    :param progress_value: The percentage of completion for the current step.
+    """
+    progress_data = {
+        "job_id": job_id,
+        "step": step,
+        "progress": progress_value
+    }
+    print(json.dumps(progress_data), file=sys.stderr)  # Use stderr for progress logs
+    sys.stderr.flush()  # Ensure it's sent immediately
+
+
+class ElementExtractor:
+    """
+    A class that uses a YOLO model to extract tables and images from a PDF page.
+    """
+
+    def __init__(self, output_folder: str):
+        """
+        Initializes the ElementExtractor with the output folder for saving images and the YOLO model.
+
+        :param output_folder: Path to the folder where extracted elements will be saved.
+        """
+        self.output_folder = output_folder
+        self.model = YOLO('keremberke/yolov8m-table-extraction')  # Load YOLO model for table extraction
+        self.model.overrides['conf'] = 0.25  # Set confidence threshold for detection
+        self.model.overrides['iou'] = 0.45  # Set Intersection over Union (IoU) threshold
+        self.padding = 5  # Padding around detected elements
+
+    async def extract_elements(self, page, padding: int = 20) -> List[Dict[str, Any]]:
+        """
+        Asynchronously extract tables and images from a PDF page.
+
+        :param page: A Page object representing a PDF page.
+        :param padding: Padding around the extracted elements.
+        :return: A list of dictionaries containing the extracted elements.
+        """
+        tasks = [
+            asyncio.create_task(self.extract_tables(page.image, page.page_num)),  # Extract tables from the page
+            asyncio.create_task(self.extract_images(page.page, page.image, page.page_num))  # Extract images from the page
+        ]
+        results = await asyncio.gather(*tasks)  # Wait for both tasks to complete
+        return [item for sublist in results for item in sublist]  # Flatten and return results
+
+    async def extract_tables(self, img: Image.Image, page_num: int) -> List[Dict[str, Any]]:
+        """
+        Asynchronously extract tables from a given page image using the YOLO model.
+
+        :param img: The image of the PDF page.
+        :param page_num: The current page number.
+        :return: A list of dictionaries with metadata about the detected tables.
+        """
+        results = self.model.predict(img, verbose=False)  # Predict table locations using YOLO
+        tables = []
+
+        for idx, box in enumerate(results[0].boxes):
+            x1, y1, x2, y2 = map(int, box.xyxy[0])  # Extract bounding box coordinates
+
+            # Draw a red rectangle on the full page image around the table
+            page_with_outline = img.copy()
+            draw = ImageDraw.Draw(page_with_outline)
+            draw.rectangle(
+                [max(0, x1 + self.padding), max(0, y1 + self.padding), min(page_with_outline.width, x2 + self.padding),
+                 min(page_with_outline.height, y2 + self.padding)], outline="red", width=2)  # Draw red outline
+
+            # Save the full page with the red outline
+            table_filename = f"table_page{page_num + 1}_{idx + 1}.png"
+            table_path = os.path.join(self.output_folder, table_filename)
+            page_with_outline.save(table_path)
+
+            # Convert the full-page image with red outline to base64
+            base64_data = self.image_to_base64(page_with_outline)
+
+            tables.append({
+                'metadata': {
+                    "type": "table",
+                    "location": [x1 / img.width, y1 / img.height, x2 / img.width, y2 / img.height],
+                    "file_path": table_path,
+                    "start_page": page_num,
+                    "end_page": page_num,
+                    "base64_data": base64_data,
+                }
+            })
+
+        return tables
+
+    async def extract_images(self, page: fitz.Page, img: Image.Image, page_num: int) -> List[Dict[str, Any]]:
+        """
+        Asynchronously extract embedded images from a PDF page.
+
+        :param page: A fitz.Page object representing the PDF page.
+        :param img: The image of the PDF page.
+        :param page_num: The current page number.
+        :return: A list of dictionaries with metadata about the detected images.
+        """
+        images = []
+        image_list = page.get_images(full=True)  # Get a list of images on the page
+
+        if not image_list:
+            return images
+
+        for img_index, img_info in enumerate(image_list):
+            xref = img_info[0]  # XREF of the image in the PDF
+            base_image = page.parent.extract_image(xref)  # Extract the image by its XREF
+            image_bytes = base_image["image"]
+            image = Image.open(io.BytesIO(image_bytes))  # Convert bytes to PIL image
+            width_ratio = img.width / page.rect.width  # Scale factor for width
+            height_ratio = img.height / page.rect.height  # Scale factor for height
+
+            # Get image coordinates or default to page rectangle
+            rect_list = page.get_image_rects(xref)
+            if rect_list:
+                rect = rect_list[0]
+                x1, y1, x2, y2 = rect
+            else:
+                rect = page.rect
+                x1, y1, x2, y2 = rect
+
+            # Draw a red rectangle on the full page image around the embedded image
+            page_with_outline = img.copy()
+            draw = ImageDraw.Draw(page_with_outline)
+            draw.rectangle([x1 * width_ratio, y1 * height_ratio, x2 * width_ratio, y2 * height_ratio],
+                            outline="red", width=2)  # Draw red outline
+
+            # Save the full page with the red outline
+            image_filename = f"image_page{page_num + 1}_{img_index + 1}.png"
+            image_path = os.path.join(self.output_folder, image_filename)
+            page_with_outline.save(image_path)
+
+            # Convert the full-page image with red outline to base64
+            base64_data = self.image_to_base64(page_with_outline)
+
+            images.append({
+                'metadata': {
+                    "type": "image",
+                    "location": [x1 / page.rect.width, y1 / page.rect.height, x2 / page.rect.width,
+                                    y2 / page.rect.height],
+                    "file_path": image_path,
+                    "start_page": page_num,
+                    "end_page": page_num,
+                    "base64_data": base64_data,
+                }
+            })
+
+        return images
+
+    @staticmethod
+    def image_to_base64(image: Image.Image) -> str:
+        """
+        Convert a PIL image to a base64-encoded string.
+
+        :param image: The PIL image to be converted.
+        :return: The base64-encoded string of the image.
+        """
+        buffered = io.BytesIO()
+        image.save(buffered, format="PNG")  # Save image as PNG to an in-memory buffer
+        return base64.b64encode(buffered.getvalue()).decode('utf-8')  # Convert to base64 and return
+
+
+class ChunkMetaData(TypedDict):
+    """
+    A TypedDict that defines the metadata structure for chunks of text and visual elements.
+    """
+    text: str
+    type: str
+    original_document: str
+    file_path: str
+    doc_id: str
+    location: str
+    start_page: int
+    end_page: int
+    base64_data: str
+
+
+class Chunk(TypedDict):
+    """
+    A TypedDict that defines the structure for a document chunk, including metadata and embeddings.
+    """
+    id: str
+    values: List[float]
+    metadata: ChunkMetaData
+
+
+class Page:
+    """
+    A class that represents a single PDF page, handling its image representation and element masking.
+    """
+
+    def __init__(self, page: fitz.Page, page_num: int):
+        """
+        Initializes the Page with its page number and the image representation of the page.
+
+        :param page: A fitz.Page object representing the PDF page.
+        :param page_num: The number of the page in the PDF.
+        """
+        self.page = page
+        self.page_num = page_num
+        # Get high-resolution image of the page (for table/image extraction)
+        self.pix = page.get_pixmap(matrix=fitz.Matrix(2, 2))
+        self.image = Image.frombytes("RGB", [self.pix.width, self.pix.height], self.pix.samples)
+        self.masked_image = self.image.copy()  # Image with masked elements (tables/images)
+        self.draw = ImageDraw.Draw(self.masked_image)
+        self.elements = []  # List to store extracted elements
+
+    def add_element(self, element):
+        """
+        Adds a detected element (table/image) to the page and masks its location on the page image.
+
+        :param element: A dictionary containing metadata about the detected element.
+        """
+        self.elements.append(element)
+        # Mask the element on the page image by drawing a white rectangle over its location
+        x1, y1, x2, y2 = [coord * self.image.width if i % 2 == 0 else coord * self.image.height
+                          for i, coord in enumerate(element['metadata']['location'])]
+        self.draw.rectangle([x1, y1, x2, y2], fill="white")  # Draw a white rectangle to mask the element
+
+
+class PDFChunker:
+    """
+    The main class responsible for chunking PDF files into text and visual elements (tables/images).
+    """
+
+    def __init__(self, output_folder: str = "output", image_batch_size: int = 5) -> None:
+        """
+        Initializes the PDFChunker with an output folder and an element extractor for visual elements.
+
+        :param output_folder: Folder to store the output files (extracted tables/images).
+        :param image_batch_size: The batch size for processing visual elements.
+        """
+        self.client = Anthropic(api_key=os.getenv("ANTHROPIC_API_KEY"))  # Initialize the Anthropic API client
+        self.output_folder = output_folder
+        self.image_batch_size = image_batch_size  # Batch size for image processing
+        self.element_extractor = ElementExtractor(output_folder)  # Initialize the element extractor
+
+    async def chunk_pdf(self, file_data: bytes, file_name: str, doc_id: str, job_id: str) -> List[Dict[str, Any]]:
+        """
+        Processes a PDF file, extracting text and visual elements, and returning structured chunks.
+
+        :param file_data: The binary data of the PDF file.
+        :param file_name: The name of the PDF file.
+        :param doc_id: The unique document ID for this job.
+        :param job_id: The unique job ID for the processing task.
+        :return: A list of structured chunks containing text and visual elements.
+        """
+        with fitz.open(stream=file_data, filetype="pdf") as pdf_document:
+            num_pages = len(pdf_document)  # Get the total number of pages in the PDF
+            pages = [Page(pdf_document[i], i) for i in tqdm(range(num_pages), desc="Initializing Pages")]  # Initialize each page
+
+            update_progress(job_id, "Extracting tables and images...", 0)
+            await self.extract_and_mask_elements(pages, job_id)  # Extract and mask elements (tables/images)
+
+            update_progress(job_id, "Processing tables and images...", 0)
+            await self.process_visual_elements(pages, self.image_batch_size, job_id)  # Process visual elements
+
+            update_progress(job_id, "Extracting text...", 0)
+            page_texts = await self.extract_text_from_masked_pages(pages, job_id)  # Extract text from masked pages
+
+            update_progress(job_id, "Processing text...", 0)
+            text_chunks = self.chunk_text_with_metadata(page_texts, max_words=1000, job_id=job_id)  # Chunk text into smaller parts
+
+            # Combine text and visual elements into a unified structure (chunks)
+            chunks = self.combine_chunks(text_chunks, [elem for page in pages for elem in page.elements], file_name,
+                                         doc_id)
+
+        return chunks
+
+    async def extract_and_mask_elements(self, pages: List[Page], job_id: str):
+        """
+        Extract visual elements (tables and images) from each page and mask them on the page.
+
+        :param pages: A list of Page objects representing the PDF pages.
+        :param job_id: The unique job ID for the processing task.
+        """
+        total_pages = len(pages)
+        tasks = []
+
+        for i, page in enumerate(pages):
+            tasks.append(asyncio.create_task(self.element_extractor.extract_elements(page)))  # Extract elements asynchronously
+            progress = ((i + 1) / total_pages) * 100  # Calculate progress
+            update_progress(job_id, "Extracting tables and images...", progress)
+
+        # Gather all extraction results
+        results = await asyncio.gather(*tasks)
+
+        # Mask the detected elements on the page images
+        for page, elements in zip(pages, results):
+            for element in elements:
+                page.add_element(element)  # Mask each extracted element on the page
+
+    async def process_visual_elements(self, pages: List[Page], image_batch_size: int, job_id: str) -> List[Dict[str, Any]]:
+        """
+        Process extracted visual elements in batches, generating summaries or descriptions.
+
+        :param pages: A list of Page objects representing the PDF pages.
+        :param image_batch_size: The batch size for processing visual elements.
+        :param job_id: The unique job ID for the processing task.
+        :return: A list of processed elements with metadata and generated summaries.
+        """
+        pre_elements = [element for page in pages for element in page.elements]  # Flatten list of elements
+        processed_elements = []
+        total_batches = (len(pre_elements) // image_batch_size) + 1  # Calculate total number of batches
+
+        loop = asyncio.get_event_loop()
+        with concurrent.futures.ThreadPoolExecutor() as executor:
+            # Process elements in batches
+            for i in tqdm(range(0, len(pre_elements), image_batch_size), desc="Processing Visual Elements"):
+                batch = pre_elements[i:i + image_batch_size]
+                # Run image summarization in a separate thread
+                summaries = await loop.run_in_executor(
+                    executor, self.batch_summarize_images,
+                    {j + 1: element.get('metadata').get('base64_data') for j, element in enumerate(batch)}
+                )
+
+                # Append generated summaries to the elements
+                for j, elem in enumerate(batch, start=1):
+                    if j in summaries:
+                        elem['metadata']['text'] = re.sub(r'^(Image|Table):\s*', '', summaries[j])
+                        processed_elements.append(elem)
+
+                progress = ((i // image_batch_size) + 1) / total_batches * 100  # Calculate progress
+                update_progress(job_id, "Processing tables and images...", progress)
+
+        return processed_elements
+
+    async def extract_text_from_masked_pages(self, pages: List[Page], job_id: str) -> Dict[int, str]:
+        """
+        Extract text from masked page images (where tables and images have been masked out).
+
+        :param pages: A list of Page objects representing the PDF pages.
+        :param job_id: The unique job ID for the processing task.
+        :return: A dictionary mapping page numbers to extracted text.
+        """
+        total_pages = len(pages)
+        tasks = []
+
+        for i, page in enumerate(pages):
+            tasks.append(asyncio.create_task(self.extract_text(page.masked_image, page.page_num)))  # Perform OCR on each page
+            progress = ((i + 1) / total_pages) * 100  # Calculate progress
+            update_progress(job_id, "Extracting text...", progress)
+
+        # Return extracted text from each page
+        return dict(await asyncio.gather(*tasks))
+
+    @staticmethod
+    async def extract_text(image: Image.Image, page_num: int) -> (int, str):
+        """
+        Perform OCR on the provided image to extract text.
+
+        :param image: The PIL image of the page.
+        :param page_num: The current page number.
+        :return: A tuple containing the page number and the extracted text.
+        """
+        result = pytesseract.image_to_string(image)  # Extract text using Tesseract OCR
+        return page_num + 1, result.strip()  # Return the page number and extracted text
+
+    def chunk_text_with_metadata(self, page_texts: Dict[int, str], max_words: int, job_id: str) -> List[Dict[str, Any]]:
+        """
+        Break the extracted text into smaller chunks with metadata (e.g., page numbers).
+
+        :param page_texts: A dictionary mapping page numbers to extracted text.
+        :param max_words: The maximum number of words allowed in a chunk.
+        :param job_id: The unique job ID for the processing task.
+        :return: A list of dictionaries containing text chunks with metadata.
+        """
+        chunks = []
+        current_chunk = ""
+        current_start_page = 0
+        total_words = 0
+
+        def add_chunk(chunk_text, start_page, end_page):
+            # Add a chunk of text with metadata
+            chunks.append({
+                "text": chunk_text.strip(),
+                "start_page": start_page,
+                "end_page": end_page
+            })
+
+        total_pages = len(page_texts)
+        for i, (page_num, text) in enumerate(tqdm(page_texts.items(), desc="Chunking Text")):
+            sentences = self.split_into_sentences(text)
+            for sentence in sentences:
+                word_count = len(sentence.split())
+                # If adding this sentence exceeds max_words, create a new chunk
+                if total_words + word_count > max_words:
+                    add_chunk(current_chunk, current_start_page, page_num)
+                    current_chunk = sentence + " "
+                    current_start_page = page_num
+                    total_words = word_count
+                else:
+                    current_chunk += sentence + " "
+                    total_words += word_count
+            current_chunk += "\n\n"
+
+            progress = ((i + 1) / total_pages) * 100  # Calculate progress
+            update_progress(job_id, "Processing text...", progress)
+
+        # Add the last chunk if there is leftover text
+        if current_chunk.strip():
+            add_chunk(current_chunk, current_start_page, page_num)
+
+        return chunks
+
+    @staticmethod
+    def split_into_sentences(text):
+        """
+        Split the text into sentences using regular expressions.
+
+        :param text: The raw text to be split into sentences.
+        :return: A list of sentences.
+        """
+        return re.split(r'(?<=[.!?])\s+', text)
+
+    @staticmethod
+    def combine_chunks(text_chunks: List[Dict[str, Any]], visual_elements: List[Dict[str, Any]], pdf_path: str,
+                       doc_id: str) -> List[Chunk]:
+        """
+        Combine text and visual chunks into a unified list.
+
+        :param text_chunks: A list of dictionaries containing text chunks with metadata.
+        :param visual_elements: A list of dictionaries containing visual elements (tables/images) with metadata.
+        :param pdf_path: The path to the original PDF file.
+        :param doc_id: The unique document ID for this job.
+        :return: A list of Chunk objects representing the combined data.
+        """
+        combined_chunks = []
+        # Add text chunks
+        for text_chunk in text_chunks:
+            chunk_metadata: ChunkMetaData = {
+                "text": text_chunk["text"],
+                "type": "text",
+                "original_document": pdf_path,
+                "file_path": "",
+                "location": "",
+                "start_page": text_chunk["start_page"],
+                "end_page": text_chunk["end_page"],
+                "base64_data": "",
+                "doc_id": doc_id,
+            }
+            chunk_dict: Chunk = {
+                "id": str(uuid.uuid4()),  # Generate a unique ID for the chunk
+                "values": [],
+                "metadata": chunk_metadata,
+            }
+            combined_chunks.append(chunk_dict)
+
+        # Add visual chunks (tables/images)
+        for elem in visual_elements:
+            visual_chunk_metadata: ChunkMetaData = {
+                "type": elem['metadata']['type'],
+                "file_path": elem['metadata']['file_path'],
+                "text": elem['metadata'].get('text', ''),
+                "start_page": elem['metadata']['start_page'],
+                "end_page": elem['metadata']['end_page'],
+                "location": str(elem['metadata']['location']),
+                "base64_data": elem['metadata']['base64_data'],
+                "doc_id": doc_id,
+                "original_document": pdf_path,
+            }
+            visual_chunk_dict: Chunk = {
+                "id": str(uuid.uuid4()),  # Generate a unique ID for the visual chunk
+                "values": [],
+                "metadata": visual_chunk_metadata,
+            }
+            combined_chunks.append(visual_chunk_dict)
+
+        return combined_chunks
+
+    def batch_summarize_images(self, images: Dict[int, str]) -> Dict[int, str]:
+        """
+        Summarize images or tables by generating descriptive text.
+
+        :param images: A dictionary mapping image numbers to base64-encoded image data.
+        :return: A dictionary mapping image numbers to their generated summaries.
+        """
+        # Prompt for the AI model to summarize images and tables
+        prompt = f"""<instruction>
+    <task>
+        You are tasked with summarizing a series of {len(images)} images and tables for use in a RAG (Retrieval-Augmented Generation) system. 
+        Your goal is to create concise, informative summaries that capture the essential content of each image or table. 
+        These summaries will be used for embedding, so they should be descriptive and relevant. The image or table will be outlined in red on an image of the full page that it is on. Where necessary, use the context of the full page to heklp with the summary but don't summarize other content on the page.
+    </task>
+
+    <steps>
+        <step>Identify whether it's an image or a table.</step>
+        <step>Examine its content carefully.</step>
+        <step>
+            Write a detailed summary that captures the main points or visual elements:
+            <details>
+                <table>After summarizing what the table is about, include the column headers, a detailed summary of the data, and any notable data trends.</table>
+                <image>Describe the main subjects, actions, or notable features.</image>
+            </details>
+        </step>
+        <step>Focus on writing summaries that would make it easy to retrieve the content if compared to a user query using vector similarity search.</step>
+        <step>Keep summaries concise and include important words that may help with retrieval (but do not include numbers and numerical data).</step>
+    </steps>
+
+    <important_notes>
+        <note>Avoid using special characters like &amp;, &lt;, &gt;, &quot;, &apos;, $, %, etc. Instead, use their word equivalents:</note>
+        <note>Use "and" instead of &amp;.</note>
+        <note>Use "dollars" instead of $.</note>
+        <note>Use "percent" instead of %.</note>
+        <note>Refrain from using quotation marks &quot; or apostrophes &apos; unless absolutely necessary.</note>
+        <note>Ensure your output is in valid XML format.</note>
+    </important_notes>
+
+    <formatting>
+        <note>Enclose all summaries within a root element called &lt;summaries&gt;.</note>
+        <note>Use &lt;summary&gt; tags to enclose each individual summary.</note>
+        <note>Include an attribute 'number' in each &lt;summary&gt; tag to indicate the sequence, matching the provided image numbers.</note>
+        <note>Start each summary by indicating whether it's an image or a table (e.g., "This image shows..." or "The table presents...").</note>
+        <note>If an image is completely blank, leave the summary blank (e.g., &lt;summary number="3"&gt;&lt;/summary&gt;).</note>
+    </formatting>
+
+    <example>
+        <note>Do not replicate the example below—stay grounded to the content of the table or image and describe it completely and accurately.</note>
+        <output>
+            &lt;summaries&gt;
+            &lt;summary number="1"&gt;
+            The image shows two men shaking hands on stage at a formal event. The man on the left, in a dark suit and glasses, has a professional appearance, possibly an academic or business figure. The man on the right, Tim Cook, CEO of Apple, is recognizable by his silver hair and dark blue blazer. Cook holds a document titled "Tsinghua SEM EMBA," suggesting a link to Tsinghua University’s Executive MBA program. The backdrop displays English and Chinese text about business management and education, with the event dated October 23, 2014.
+            &lt;/summary&gt;
+            &lt;summary number="2"&gt;
+            The table compares the company's assets between December 30, 2023, and September 30, 2023. Key changes include an increase in cash and cash equivalents, while marketable securities had a slight rise. Accounts receivable and vendor non-trade receivables decreased. Inventories and other current assets saw minor fluctuations. Non-current assets like marketable securities slightly declined, while property, plant, and equipment remained stable. Total assets showed minimal change, holding steady at around three hundred fifty-three billion dollars.
+            &lt;/summary&gt;
+            &lt;summary number="3"&gt;
+            The table outlines the company's shareholders' equity as of December 30, 2023, versus September 30, 2023. Common stock and additional paid-in capital increased, and retained earnings shifted from a deficit to a positive figure. Accumulated other comprehensive loss decreased. Overall, total shareholders' equity rose significantly, while total liabilities and equity remained nearly unchanged at about three hundred fifty-three billion dollars.
+            &lt;/summary&gt;
+            &lt;summary number="4"&gt;
+            The table details the company's liabilities as of December 30, 2023, compared to September 30, 2023. Current liabilities decreased due to lower accounts payable and other current liabilities, while deferred revenue slightly increased. Commercial paper significantly decreased, and term debt rose modestly. Non-current liabilities were stable, with minimal changes in term debt and other non-current liabilities. Total liabilities dropped from two hundred ninety billion dollars to two hundred seventy-nine billion dollars.
+            &lt;/summary&gt;
+            &lt;summary number="5"&gt;
+            &lt;/summary&gt;
+            &lt;/summaries&gt;
+        </output>
+    </example>
+
+    <final_notes>
+        <note>Process each image or table in the order provided.</note>
+        <note>Maintain consistent formatting throughout your response.</note>
+        <note>Ensure the output is in full, valid XML format with the root &lt;summaries&gt; element and each summary being within a &lt;summary&gt; element with the summary number specified as well.</note>
+    </final_notes>
+</instruction>
+        """
+        content = []
+        for number, img in images.items():
+            content.append({"type": "text", "text": f"\nImage {number}:\n"})
+            content.append({"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": img}})
+
+        messages = [
+            {"role": "user", "content": content}
+        ]
+
+        try:
+            response = self.client.messages.create(
+                model='claude-3-5-sonnet-20240620',
+                system=prompt,
+                max_tokens=400 * len(images),  # Increased token limit for more detailed summaries
+                messages=messages,
+                temperature=0,
+                extra_headers={"anthropic-beta": "max-tokens-3-5-sonnet-2024-07-15"}
+            )
+
+            # Parse the response
+            text = response.content[0].text
+            #print(text)
+            # Attempt to parse and fix the XML if necessary
+            parser = etree.XMLParser(recover=True)
+            root = etree.fromstring(text, parser=parser)
+            # Check if there were errors corrected
+            # if parser.error_log:
+            #     #print("XML Parsing Errors:")
+            #     for error in parser.error_log:
+            #         #print(error)
+            # Extract summaries
+            summaries = {}
+            for summary in root.findall('summary'):
+                number = int(summary.get('number'))
+                content = summary.text.strip() if summary.text else ""
+                if content:  # Only include non-empty summaries
+                    summaries[number] = content
+
+            return summaries
+
+        except Exception:
+            #print(f"Error in batch_summarize_images: {str(e)}")
+            #print("Returning placeholder summaries")
+            return {number: "Error: No summary available" for number in images}
+
+class DocumentType(Enum):
+    """
+    Enum representing different types of documents that can be processed.
+    """
+    PDF = "pdf"  # PDF file type
+    CSV = "csv"  # CSV file type
+    TXT = "txt"  # Plain text file type
+    HTML = "html"  # HTML file type
+
+
+class FileTypeNotSupportedException(Exception):
+    """
+    Exception raised when a file type is unsupported during document processing.
+    """
+
+    def __init__(self, file_extension: str):
+        """
+        Initialize the exception with the unsupported file extension.
+
+        :param file_extension: The file extension that triggered the exception.
+        """
+        self.file_extension = file_extension
+        self.message = f"File type '{file_extension}' is not supported."
+        super().__init__(self.message)  # Call the parent class constructor with the message
+
+
+class Document:
+    """
+    Represents a document being processed, such as a PDF, handling chunking, embedding, and summarization.
+    """
+
+    def __init__(self, file_data: bytes, file_name: str, job_id: str):
+        """
+        Initialize the Document with file data, file name, and job ID.
+
+        :param file_data: The binary data of the file being processed.
+        :param file_name: The name of the file being processed.
+        :param job_id: The job ID associated with this document processing task.
+        """
+        self.file_data = file_data
+        self.file_name = file_name
+        self.job_id = job_id
+        self.type = self._get_document_type(file_name)  # Determine the document type (PDF, CSV, etc.)
+        self.doc_id = job_id  # Use the job ID as the document ID
+        self.chunks = []  # List to hold text and visual chunks
+        self.num_pages = 0  # Number of pages in the document (if applicable)
+        self.summary = ""  # The generated summary for the document
+
+        self._process()  # Start processing the document
+
+    def _process(self):
+        """
+        Process the document: extract chunks, embed them, and generate a summary.
+        """
+        pdf_chunker = PDFChunker(output_folder="output")  # Initialize the PDF chunker
+        self.chunks = asyncio.run(pdf_chunker.chunk_pdf(self.file_data, self.file_name, self.doc_id, self.job_id))  # Extract chunks
+
+        self.num_pages = self._get_pdf_pages()  # Get the number of pages in the document
+        self._embed_chunks()  # Embed the text chunks into embeddings
+        self.summary = self._generate_summary()  # Generate a summary for the document
+
+    def _get_document_type(self, file_name: str) -> DocumentType:
+        """
+        Determine the document type based on its file extension.
+
+        :param file_name: The name of the file being processed.
+        :return: The DocumentType enum value corresponding to the file extension.
+        """
+        _, extension = os.path.splitext(file_name)  # Split the file name to get the extension
+        extension = extension.lower().lstrip('.')  # Convert to lowercase and remove leading period
+        try:
+            return DocumentType(extension)  # Try to match the extension to a DocumentType
+        except ValueError:
+            raise FileTypeNotSupportedException(extension)  # Raise exception if file type is unsupported
+
+    def _get_pdf_pages(self) -> int:
+        """
+        Get the total number of pages in the PDF document.
+
+        :return: The number of pages in the PDF.
+        """
+        pdf_file = io.BytesIO(self.file_data)  # Convert the file data to an in-memory binary stream
+        pdf_reader = PdfReader(pdf_file)  # Initialize PDF reader
+        return len(pdf_reader.pages)  # Return the number of pages in the PDF
+
+    def _embed_chunks(self) -> None:
+        """
+        Embed the text chunks using the Cohere API.
+        """
+        co = cohere.Client(os.getenv("COHERE_API_KEY"))  # Initialize Cohere client with API key
+        batch_size = 90  # Batch size for embedding
+        chunks_len = len(self.chunks)  # Total number of chunks to embed
+        for i in tqdm(range(0, chunks_len, batch_size), desc="Embedding Chunks"):
+            batch = self.chunks[i: min(i + batch_size, chunks_len)]  # Get batch of chunks
+            texts = [chunk['metadata']['text'] for chunk in batch]  # Extract text from each chunk
+            chunk_embs_batch = co.embed(
+                texts=texts,
+                model="embed-english-v3.0",  # Use Cohere's embedding model
+                input_type="search_document"  # Specify input type
+            )
+            for j, emb in enumerate(chunk_embs_batch.embeddings):
+                self.chunks[i + j]['values'] = emb  # Store the embeddings in the corresponding chunks
+
+    def _generate_summary(self) -> str:
+        """
+        Generate a summary of the document using KMeans clustering and a language model.
+
+        :return: The generated summary of the document.
+        """
+        num_clusters = min(10, len(self.chunks))  # Set number of clusters for KMeans, capped at 10
+        kmeans = KMeans(n_clusters=num_clusters, random_state=42)  # Initialize KMeans with 10 clusters
+        doc_chunks = [chunk['values'] for chunk in self.chunks if 'values' in chunk]  # Extract embeddings
+        cluster_labels = kmeans.fit_predict(doc_chunks)  # Assign each chunk to a cluster
+
+        # Select representative chunks from each cluster
+        selected_chunks = []
+        for i in range(num_clusters):
+            cluster_chunks = [chunk for chunk, label in zip(self.chunks, cluster_labels) if label == i]  # Get all chunks in this cluster
+            cluster_embs = [emb for emb, label in zip(doc_chunks, cluster_labels) if label == i]  # Get embeddings for this cluster
+            centroid = kmeans.cluster_centers_[i]  # Get the centroid of the cluster
+            distances = [np.linalg.norm(np.array(emb) - centroid) for emb in cluster_embs]  # Compute distance to centroid
+            closest_chunk = cluster_chunks[np.argmin(distances)]  # Select chunk closest to the centroid
+            selected_chunks.append(closest_chunk)
+
+        # Combine selected chunks into a summary
+        combined_text = "\n\n".join([chunk['metadata']['text'] for chunk in selected_chunks])  # Concatenate chunk texts
+
+        client = OpenAI()  # Initialize OpenAI client for text generation
+        completion = client.chat.completions.create(
+            model="gpt-3.5-turbo",  # Specify the language model
+            messages=[
+                {"role": "system",
+                 "content": "You are an AI assistant tasked with summarizing a document. You are provided with important chunks from the document and provide a summary, as best you can, of what the document will contain overall. Be concise and brief with your response."},
+                {"role": "user", "content": f"""Please provide a comprehensive summary of what you think the document from which these chunks were sampled would be. 
+                    Ensure the summary captures the main ideas and key points from all provided chunks. Be concise and brief and only provide the summary in paragraph form.
+
+                    Sample text chunks:
+                    ```
+                    {combined_text}
+                    ```
+                    **********
+                    Summary:
+                    """}
+            ],
+            max_tokens=300  # Set max tokens for the summary
+        )
+        return completion.choices[0].message.content.strip()  # Return the generated summary
+
+    def to_json(self) -> str:
+        """
+        Return the document's data in JSON format.
+
+        :return: JSON string representing the document's metadata, chunks, and summary.
+        """
+        return json.dumps({
+            "file_name": self.file_name,
+            "num_pages": self.num_pages,
+            "summary": self.summary,
+            "chunks": self.chunks,
+            "type": self.type.value,
+            "doc_id": self.doc_id
+        }, indent=2)  # Convert the document's attributes to JSON format
+
+
+def process_document(file_data, file_name, job_id):
+    """
+    Top-level function to process a document and return the JSON output.
+
+    :param file_data: The binary data of the file being processed.
+    :param file_name: The name of the file being processed.
+    :param job_id: The job ID for this document processing task.
+    :return: The processed document's data in JSON format.
+    """
+    new_document = Document(file_data, file_name, job_id)  # Create a new Document object
+    return new_document.to_json()  # Return the document's JSON data
+
+
+def main():
+    """
+    Main entry point for the script, called with arguments from Node.js.
+    """
+    if len(sys.argv) != 4:
+        print(json.dumps({"error": "Invalid arguments"}), file=sys.stderr)  # Print error if incorrect number of arguments
+        return
+
+    job_id = sys.argv[1]  # Get the job ID from command-line arguments
+    file_name = sys.argv[2]  # Get the file name from command-line arguments
+    file_data = sys.argv[3]  # Get the base64-encoded file data from command-line arguments
+
+    try:
+        # Decode the base64 file data
+        file_bytes = base64.b64decode(file_data)
+
+        # Process the document
+        document_result = process_document(file_bytes, file_name, job_id)
+
+        # Output the final result as JSON to stdout
+        print(document_result)
+        sys.stdout.flush()
+
+    except Exception as e:
+        # Print errors to stderr so they don't interfere with JSON output
+        print(json.dumps({"error": str(e)}), file=sys.stderr)
+        sys.stderr.flush()
+
+
+if __name__ == "__main__":
+    main()  # Execute the main function when the script is run
diff --git a/src/server/chunker/requirements.txt b/src/server/chunker/requirements.txt
new file mode 100644
index 000000000..20bd486e5
--- /dev/null
+++ b/src/server/chunker/requirements.txt
@@ -0,0 +1,15 @@
+anthropic==0.34.0
+cohere==5.8.0
+python-dotenv==1.0.1
+pymupdf==1.22.2
+lxml==5.3.0
+layoutparser==0.3.4
+numpy==1.26.4
+openai==1.40.6
+Pillow==10.4.0
+pytesseract==0.3.10
+PyPDF2==3.0.1
+scikit-learn==1.5.1
+tqdm==4.66.5
+ultralyticsplus==0.0.28
+easyocr==1.7.0
\ No newline at end of file
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index 1e25a8a27..effe94219 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -61,27 +61,6 @@ export namespace WebSocket {
         Database.Instance.getDocuments(ids, callback);
     }
 
-    const pendingOps = new Map<string, { diff: Diff; socket: Socket }[]>();
-
-    function dispatchNextOp(id: string): unknown {
-        const next = pendingOps.get(id)?.shift();
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const nextOp = (res: boolean) => dispatchNextOp(id);
-        if (next) {
-            const { diff, socket } = next;
-            // ideally, we'd call the Database update method for all actions, but for now we handle list insertion/removal on our own
-            switch (diff.diff.$addToSet ? 'add' : diff.diff.$remFromSet ? 'rem' : 'set') {
-                case 'add': return GetRefFieldLocal(id, (result) => addToListField(socket, diff, result, nextOp)); // prettier-ignore
-                case 'rem': return GetRefFieldLocal(id, (result) => remFromListField(socket, diff, result, nextOp)); // prettier-ignore
-                default:    return Database.Instance.update(id, diff.diff, 
-                                                            () => nextOp(socket.broadcast.emit(MessageStore.UpdateField.Message, diff)),
-                                                            false
-                                                        ); // prettier-ignore
-            }
-        }
-        return !pendingOps.get(id)?.length && pendingOps.delete(id);
-    }
-
     function addToListField(socket: Socket, diff: Diff, listDoc: serializedDoctype | undefined, cb: (res: boolean) => void): void {
         const $addToSet = diff.diff.$addToSet as serializedFieldsType;
         const updatefield = Array.from(Object.keys($addToSet ?? {}))[0];
@@ -181,6 +160,27 @@ export namespace WebSocket {
         } else cb(false);
     }
 
+    const pendingOps = new Map<string, { diff: Diff; socket: Socket }[]>();
+
+    function dispatchNextOp(id: string): unknown {
+        const next = pendingOps.get(id)?.shift();
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const nextOp = (res: boolean) => dispatchNextOp(id);
+        if (next) {
+            const { diff, socket } = next;
+            // ideally, we'd call the Database update method for all actions, but for now we handle list insertion/removal on our own
+            switch (diff.diff.$addToSet ? 'add' : diff.diff.$remFromSet ? 'rem' : 'set') {
+                case 'add': return GetRefFieldLocal(id, (result) => addToListField(socket, diff, result, nextOp)); // prettier-ignore
+                case 'rem': return GetRefFieldLocal(id, (result) => remFromListField(socket, diff, result, nextOp)); // prettier-ignore
+                default:    return Database.Instance.update(id, diff.diff, 
+                                                            () => nextOp(socket.broadcast.emit(MessageStore.UpdateField.Message, diff)),
+                                                            false
+                                                        ); // prettier-ignore
+            }
+        }
+        return !pendingOps.get(id)?.length && pendingOps.delete(id);
+    }
+
     function UpdateField(socket: Socket, diff: Diff) {
         const curUser = socketMap.get(socket);
         if (curUser) {