Merge branch 'agent-paper-main' into lanyi-expanded-agent-paper-main

16 files changed, 842 insertions, 383 deletions

diff --git a/src/client/views/DictationButton.tsx b/src/client/views/DictationButton.tsx
index fc3165f67..882e857c5 100644
--- a/src/client/views/DictationButton.tsx
+++ b/src/client/views/DictationButton.tsx
@@ -1,9 +1,10 @@
-import { makeObservable, observable, action } from 'mobx';
+import { Toggle, ToggleType } from '@dash/components';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import './DictationButton.scss';
 import { DictationManager } from '../util/DictationManager';
 import { SnappingManager } from '../util/SnappingManager';
+import './DictationButton.scss';
 
 export interface DictationButtonProps {
     setInput: (val: string) => void;
@@ -26,9 +27,21 @@ export class DictationButton extends React.Component<DictationButtonProps> {
 
     render() {
         return (
-            <button
-                className={`dictation-button ${this._isRecording ? 'recording' : ''}`}
-                title="Record"
+            <Toggle
+                // className={`dictation-button ${this._isRecording ? 'recording' : ''}`}
+                // title="Record"
+                tooltip={`Dictation: ${this._isRecording ? 'on' : 'off'}`}
+                icon={
+                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+                        <line x1="12" y1="19" x2="12" y2="23"></line>
+                        <line x1="8" y1="23" x2="16" y2="23"></line>
+                    </svg>
+                }
+                color={SnappingManager.userVariantColor}
+                toggleType={ToggleType.BUTTON}
+                toggleStatus={this._isRecording}
                 onClick={action(() => {
                     if (!this._isRecording) {
                         this._isRecording = true;
@@ -49,14 +62,8 @@ export class DictationButton extends React.Component<DictationButtonProps> {
                     } else {
                         this.stopDictation();
                     }
-                })}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-                    <line x1="12" y1="19" x2="12" y2="23"></line>
-                    <line x1="8" y1="23" x2="16" y2="23"></line>
-                </svg>
-            </button>
+                })}
+            />
         );
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormController.ts b/src/client/views/collections/collectionFreeForm/CollectionFreeFormController.ts
new file mode 100644
index 000000000..6752b46b8
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormController.ts
@@ -0,0 +1,7 @@
+import { CollectionFreeFormView } from './CollectionFreeFormView';
+
+export class TutorialController {
+    public static startTutorial(kind: 'links' | 'pins' | 'presentation') {
+        CollectionFreeFormView.showTutorial(kind);
+    }
+}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 437888ef2..48cab9c7b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -3,30 +3,43 @@ import { IReactionDisposer, action, makeObservable, observable, reaction } from
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { SettingsManager } from '../../../util/SettingsManager';
+import { ButtonType } from '../../nodes/FontIconBox/FontIconBox';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
+export interface InfoButton {
+    targetState?: infoState;
+    // DocumentOptions fields a button can set
+    title?: string;
+    toolTip?: string;
+    btnType?: ButtonType;
 
+    // fields that do not correspond to DocumentOption fields
+    scripts?: { script?: string; onClick?: string; onDoubleClick?: string };
+}
 /**
  * An Fsa Arc.  The first array element is a test condition function that will be observed.
  * The second array element is a function that will be invoked when the first test function
  * returns a truthy value
  */
-// eslint-disable-next-line no-use-before-define
 export type infoArc = [() => unknown, (res?: unknown) => infoState];
 
 export const StateMessage = Symbol('StateMessage');
 export const StateMessageGIF = Symbol('StateMessageGIF');
 export const StateEntryFunc = Symbol('StateEntryFunc');
+export const StateMessageButton = Symbol('StateMessageButton');
 export class infoState {
     [StateMessage]: string = '';
     [StateMessageGIF]?: string = '';
+    [StateMessageButton]?: InfoButton[];
     [StateEntryFunc]?: () => unknown;
     [key: string]: infoArc;
-    constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => unknown) {
+
+    constructor(message: string, arcs?: { [key: string]: infoArc }, messageGif?: string, buttons?: InfoButton[], entryFunc?: () => unknown) {
         this[StateMessage] = message;
-        Object.assign(this, arcs);
+        Object.assign(this, arcs ?? {});
         this[StateMessageGIF] = messageGif;
         this[StateEntryFunc] = entryFunc;
+        this[StateMessageButton] = buttons;
     }
 }
 
@@ -42,16 +55,17 @@ export class infoState {
  */
 export function InfoState(
     msg: string, //
-    arcs: { [key: string]: infoArc },
+    arcs?: { [key: string]: infoArc },
     gif?: string,
+    button?: InfoButton[],
     entryFunc?: () => unknown
 ) {
-    return new infoState(msg, arcs, gif, entryFunc);
+    return new infoState(msg, arcs, gif, button, entryFunc);
 }
 
 export interface CollectionFreeFormInfoStateProps {
     infoState: infoState;
-    next: (state: infoState) => unknown;
+    next: (state: infoState) => unknown; // Ensure it's properly defined
     close: () => void;
 }
 
@@ -68,6 +82,10 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     get State() {
         return this._props.infoState;
     }
+
+    set State(value: infoState) {
+        this._props.infoState = value;
+    }
     get Arcs() {
         return Object.keys(this.State ?? []).map(key => this.State?.[key]);
     }
@@ -97,6 +115,9 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
 
     render() {
         const gif = this.State?.[StateMessageGIF];
+        const buttons = this.State?.[StateMessageButton];
+        console.log('Rendering CollectionFreeFormInfoState with state:', this.props.infoState);
+        console.log(buttons);
         return (
             <div className="collectionFreeform-infoUI">
                 <p className="collectionFreeform-infoUI-msg">
@@ -110,9 +131,27 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
                         {this._expanded ? 'Less...' : 'More...'}
                     </button>
                 </p>
+
                 <div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
                     <img src={`/assets/${gif}`} alt="state message gif" />
                 </div>
+
+                {/* Render the buttons for skipping */}
+                <div className={'collectionFreeform-' + (!buttons || buttons.length === 0 ? 'hidden' : 'infoUI-button-container')}>
+                    {buttons?.map((button, index) => (
+                        <button
+                            key={index}
+                            type="button"
+                            className="collectionFreeform-infoUI-skip-button"
+                            onClick={action(() => {
+                                console.log('Attempting transition to:', button.targetState);
+                                this.props.next(button.targetState as infoState); // ✅ Use the prop instead
+                            })}>
+                            {button.title}
+                        </button>
+                    ))}
+                </div>
+
                 <div className="collectionFreeform-infoUI-close">
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(() => this.props.close())} />
                 </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 89d2bf2c3..147c900be 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -1,284 +1,393 @@
-import { makeObservable, observable, runInAction } from 'mobx';
+import { action, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast, FieldResult, FieldType } from '../../../../fields/Doc';
+import { CollectionFreeFormView } from '.';
+import { Doc, DocListCast } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
-import { StrCast } from '../../../../fields/Types';
-import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
-import { TopBar } from '../../topbar/TopBar';
-import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
-import { CollectionFreeFormView } from './CollectionFreeFormView';
-import './CollectionFreeFormView.scss';
+import { ButtonType } from '../../nodes/FontIconBox/FontIconBox';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { CollectionFreeFormInfoState, InfoButton, infoState, InfoState } from './CollectionFreeFormInfoState';
 
 export interface CollectionFreeFormInfoUIProps {
-    Doc: Doc;
-    layoutDoc: Doc;
+    Document: Doc;
+    LayoutDoc: Doc;
     childDocs: () => Doc[];
     close: () => void;
 }
 
 @observer
 export class CollectionFreeFormInfoUI extends ObservableReactComponent<CollectionFreeFormInfoUIProps> {
+    private _originalBackground: string | undefined;
+    private _tutorialStates: { [key: string]: infoState } = {};
+
     public static Init() {
-        CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => (
-            //
-            <CollectionFreeFormInfoUI Doc={doc} layoutDoc={layout} childDocs={childDocs} close={close} />
-        ));
+        CollectionFreeFormView.SetInfoUICreator((doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => <CollectionFreeFormInfoUI Document={doc} LayoutDoc={layout} childDocs={childDocs} close={close} />);
     }
-    _firstDocPos = { x: 0, y: 0 };
 
     constructor(props: CollectionFreeFormInfoUIProps) {
         super(props);
         makeObservable(this);
-        this._currState = this.setupStates();
+        this._tutorialStates = {}; // Initialize an empty object
+        this.currState = this.setupStates(); // Call setupStates() here
     }
-    _originalbackground: string | undefined;
 
     @observable _currState: infoState | undefined = undefined;
-    get currState() { return this._currState; } // prettier-ignore
-    set currState(val) { runInAction(() => {this._currState = val;}); } // prettier-ignore
+    @observable _nextState: infoState | undefined = undefined; // Track next state
+
+    get currState() {
+        return this._currState;
+    }
+
+    set currState(val) {
+        runInAction(() => (this._currState = val));
+    }
 
-    componentWillUnmount(): void {
-        this._props.Doc.$backgroundColor = this._originalbackground;
+    componentWillUnmount() {
+        this._props.Document.backgroundColor = this._originalBackground;
     }
 
-    setCurrState = (state: infoState) => {
-        if (state) {
-            this.currState = state;
-            this.currState[StateEntryFunc]?.();
-        }
+    skipToState = action((newState: infoState) => (this._currState = newState));
+
+    createNextButton = (newState: ReturnType<typeof InfoState>) => {
+        return {
+            title: 'Next',
+            toolTip: 'Next',
+            btnType: ButtonType.ClickButton,
+            scripts: {
+                onClick: `this.skipToState(${newState})`,
+            },
+            targetState: newState,
+        };
     };
 
     setupStates = () => {
-        this._originalbackground = StrCast(this._props.Doc.$backgroundColor);
-        //  state entry functions
-        // const setBackground = (colour: string) => () => {this._props.Doc.$backgroundColor = colour;} // prettier-ignore
-        // const setOpacity = (opacity: number) => () => {this._props.layoutDoc.opacity = opacity;} // prettier-ignore
-        //  arc transition trigger conditions
-        const firstDoc = () => (this._props.childDocs().length ? this._props.childDocs()[0] : undefined);
-        const numDocs = () => this._props.childDocs().length;
+        let docCounter = this._props.childDocs().length;
+        let lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+        let linkCounter = Doc.Links(lastDocCreated)?.length;
+        let presentationCounter = DocListCast(Doc.ActivePresentation?.data).length;
+        this._originalBackground = this._props.Document.backgroundColor as string;
+
+        this._tutorialStates.multipleDocs = InfoState(
+            "Let's create a new link! Click the link icon on one document and connect it to another.",
+            {
+                linkStarted: [
+                    () => DocumentLinksButton.StartLink,
+                    () => {
+                        linkCounter = Doc.Links(lastDocCreated).length;
+                        // eslint-disable-next-line no-use-before-define
+                        return startedLink;
+                    },
+                ],
+                // docCreated: [() => this._props.childDocs().length > docCounter, () => {
+                //     docCounter += 1
+                //     lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]
+                //     // eslint-disable-next-line no-use-before-define
+                // return this.tutorialStates.makePresentation}]
+            },
+            'dash-create-link-board.gif'
+        );
 
-        let docX: FieldResult<FieldType>;
-        let docY: FieldResult<FieldType>;
+        this._tutorialStates.presentDocs = InfoState(
+            "Select a document then click the 'pin' button in the top left to create your presentation.",
+            {
+                docPinned: [
+                    () => DocListCast(Doc.ActivePresentation?.data).length > presentationCounter,
+                    () => {
+                        presentationCounter++;
+                        // eslint-disable-next-line no-use-before-define
+                        return pinnedDoc;
+                    },
+                ],
+            },
+            'pin-explanation.gif'
+        );
 
-        const docNewX = () => firstDoc()?.x;
-        const docNewY = () => firstDoc()?.y;
+        this._tutorialStates.nestedCollections = InfoState(
+            "Want to learn how to create a nested collection? Click the : button and add a 'collection' doc",
+            {
+                docCreated: [
+                    () => this._props.childDocs().length > docCounter,
+                    () => {
+                        docCounter += 1;
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                        // eslint-disable-next-line no-use-before-define
+                        return marqueeSelection;
+                    },
+                ],
+            },
+            'dash-nested-collection.gif'
+        );
 
-        const linkStart = () => DocumentLinksButton.StartLink;
-        const linkUnstart = () => !DocumentLinksButton.StartLink;
+        this._tutorialStates.makePresentation = InfoState('Add a new document to create a presentation!', {
+            docCreated: [
+                () => this._props.childDocs().length > docCounter,
+                () => {
+                    docCounter += 1;
+                    lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                    return this._tutorialStates.presentDocs;
+                },
+            ],
+        });
 
-        const numDocLinks = () => Doc.Links(firstDoc())?.length;
-        const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
+        const skipToLinksButton: InfoButton = {
+            title: 'Links Tutorial',
+            toolTip: 'Skip',
+            btnType: ButtonType.ClickButton,
+            scripts: {
+                onClick: 'this.skipToState(this.tutorialStates.multipleDocs)',
+            },
+            targetState: this._tutorialStates.multipleDocs,
+        };
+
+        const skipToPinsButton: InfoButton = {
+            title: 'Pins Tutorial',
+            toolTip: 'Skip',
+            btnType: ButtonType.ClickButton,
+            scripts: {
+                onClick: 'this.skipToState(this.tutorialStates.makePresentation)',
+            },
+            targetState: this._tutorialStates.makePresentation,
+        };
 
-        const activeTool = () => Doc.ActiveTool;
+        // const skipToPresentationButton: Button = {
+        //     title: "Collections Tutorial",
+        //     toolTip: "Skip",
+        //     btnType: ButtonType.ClickButton,
+        //     scripts: {
+        //         onClick: "this.skipToState(this.tutorialStates.nestedCollections)"
+        //     },
+        //     targetState: this.tutorialStates.nestedCollections
+        // };
 
-        const pin = () => DocListCast(Doc.ActivePresentation?.data);
+        const ending = InfoState("If you have any more questions, feel free to ask Dash's AI Bot!");
 
-        let trail: number;
+        // Traditional tutorial
 
-        const presentationMode = () => Doc.ActivePresentation?.presentation_status;
+        const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', { docRemoved: [() => this._props.childDocs().length === 1, () => this._tutorialStates.start] }, 'documentation.png');
 
-        // set of states
-        const start = InfoState(
-            'Click anywhere and begin typing to create your first text document.',
-            {
-                docCreated: [() => numDocs(), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    // eslint-disable-next-line no-use-before-define
-                    return oneDoc;
-                }],
-            }
-        ); // prettier-ignore
-
-        const oneDoc = InfoState(
-            'Hello world! You can drag and drop to move your document around.',
+        const penMode = InfoState("You're in pen mode! Click and drag to draw your first masterpiece, then click the Ink button once you're done.", {
+            activePen: [() => Doc.ActiveTool !== InkTool.Ink, () => completed],
+        });
+
+        const briefArtisticFeature = InfoState("Finally, want to explore the art feature of Dash? Click the 'Ink' button on the hotbar then click the pen button.", {
+            penModeActivated: [() => Doc.ActiveTool === InkTool.Ink, () => penMode],
+        });
+
+        const activatePresentation = InfoState('Lastly, click the linked node and start the presentation!', {
+            presentation: [() => Doc.ActivePresentation?.presentation_status === 'auto', () => briefArtisticFeature],
+        });
+
+        const deletePresentation = InfoState(
+            "Cool! Click 'setOnClick to follow primary link' for your non-presentation doc and try deleting the presentation.",
             {
-                // docCreated: [() => numDocs() > 1, () => multipleDocs],
-                docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX !== docNewX()) || (docY && docY !== docNewY()), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    // eslint-disable-next-line no-use-before-define
-                    return movedDoc;
-                }],
-            }
-        ); // prettier-ignore
-
-        const movedDoc = InfoState(
-            'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (":")',
+                docRemoved: [
+                    () => this._props.childDocs().length < docCounter,
+                    () => {
+                        docCounter -= 1;
+                        return activatePresentation;
+                    },
+                ],
+            },
+            'onclick-node.gif'
+        );
+
+        const trailedPresentation = InfoState(
+            'Try linking your presentation to the last doc you created (now highlighted).',
             {
-                // eslint-disable-next-line no-use-before-define
-                docCreated: [() => numDocs() === 2, () => multipleDocs],
-                docDeleted: [() => numDocs() < 1, () => start],
+                linkAdd: [
+                    () => Doc.Links(lastDocCreated)?.length > linkCounter,
+                    () => {
+                        linkCounter += 1;
+                        return deletePresentation;
+                    },
+                ],
+                docAdded: [
+                    () => this._props.childDocs().length > docCounter,
+                    () => {
+                        docCounter += 1;
+                        // Last doc that is not the presentation
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 2];
+                        linkCounter = Doc.Links(lastDocCreated)?.length;
+                        return deletePresentation;
+                    },
+                ],
             },
-            'dash-colon-menu.gif',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
+            'link-presentation.gif'
+        );
 
-        const multipleDocs = InfoState(
-            'Let\'s create a new link. Click the link icon on one of your documents.',
+        const pinnedPresentation = InfoState(
+            'Want to see something cool? Zoom out, click the trail button on the presentation, and drag it inside the canvas.',
             {
-                // eslint-disable-next-line no-use-before-define
-                linkStarted: [() => linkStart(), () => startedLink],
-                docRemoved: [() => numDocs() < 2, () => oneDoc],
+                docAdded: [
+                    () => this._props.childDocs().length > docCounter,
+                    () => {
+                        docCounter += 1;
+                        // Last doc that is not the presentation
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 2];
+                        Doc.HighlightDoc(lastDocCreated);
+                        linkCounter = Doc.Links(lastDocCreated)?.length;
+                        return trailedPresentation;
+                    },
+                ],
             },
-            'dash-create-link-board.gif'
-        ); // prettier-ignore
+            'dash-trail-explanation.gif'
+        );
 
-        const startedLink = InfoState(
-            'Now click the highlighted link icon on your other document.',
+        const pinnedDoc2 = InfoState('You pinned another doc. Press autoplay to the right to show your presentation!', {
+            autoPresentation: [() => Doc.ActivePresentation?.presentation_status === 'auto', () => pinnedPresentation],
+        });
+
+        const pinnedDoc = InfoState('You just pinned your doc. Pin another doc to add to the presentation!', {
+            addedDoc: [
+                () => this._props.childDocs().length > docCounter,
+                () => {
+                    docCounter += 1;
+                    lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                    return pinnedDoc;
+                },
+            ],
+            docPinned: [
+                () => DocListCast(Doc.ActivePresentation?.data).length > presentationCounter,
+                () => {
+                    presentationCounter++;
+                    return pinnedDoc2;
+                },
+            ],
+        });
+
+        const editLink = InfoState(
+            "Want to make your link visible? Click 'show link'.",
             {
-                linkUnstart: [() => linkUnstart(), () => multipleDocs],
-                // eslint-disable-next-line no-use-before-define
-                linkCreated: [() => numDocLinks(), () => madeLink],
-                docRemoved: [() => numDocs() < 2, () => oneDoc],
+                docCreated: [
+                    () => this._props.childDocs().length > docCounter,
+                    () => {
+                        docCounter += 1;
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                        return this._tutorialStates.makePresentation;
+                    },
+                ],
             },
-            'dash-create-link-board.gif'
-        ); // prettier-ignore
+            'show-link.gif'
+        );
 
         const madeLink = InfoState(
             'You made your first link! You can view your links by selecting the blue dot.',
             {
-                linkCreated: [() => !numDocLinks(), () => multipleDocs],
-                linkViewed: [() => linkMenuOpen(), () => {
-                    alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
-                    // eslint-disable-next-line no-use-before-define
-                    return viewedLink;
-                }],
+                linkViewed: [
+                    () => DocButtonState.Instance.LinkEditorDocView,
+                    () => {
+                        docCounter = this._props.childDocs().length;
+                        return editLink;
+                    },
+                ],
             },
             'dash-following-link.gif'
-        ); // prettier-ignore
+        );
 
-        const viewedLink = InfoState(
-            'Great work. You are now ready to create your own hypermedia world. Click the ? icon in the top right corner to learn more.',
+        const startedLink = InfoState(
+            'Now click the highlighted link icon on your other document.',
             {
-                linkDeleted: [() => !numDocLinks(), () => multipleDocs],
-                docRemoved: [() => numDocs() < 2, () => oneDoc],
-                docCreated: [() => numDocs() === 3, () => {
-                    trail = pin().length;
-                    // eslint-disable-next-line no-use-before-define
-                    return presentDocs;
-                }],
-                // eslint-disable-next-line no-use-before-define
-                activePen: [() => activeTool() === InkTool.Ink, () => penMode],
+                linkAdd: [
+                    () => Doc.Links(lastDocCreated)?.length > linkCounter,
+                    () => {
+                        linkCounter += 1;
+                        return madeLink;
+                    },
+                ],
             },
-            'documentation.png',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
+            'dash-create-link-board.gif'
+        );
 
-        const presentDocs = InfoState(
-            'Another document! You could make a presentation. Click the pin icon in the top left corner.',
+        this._tutorialStates.movedDoc = InfoState(
+            "Great moves! Try creating a second document.", 
             {
-                docPinned: [
-                    () => pin().length > trail,
+                docCreated: [
+                    () => this._props.childDocs().length > docCounter, 
                     () => {
-                        trail = pin().length;
-                        // eslint-disable-next-line no-use-before-define
-                        return pinnedDoc1;
+                        docCounter += 1
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1]
+                        return this._tutorialStates.multipleDocs
+                    }
+                ],
+            },
+            'dash-colon-menu.gif'); // prettier-ignore
+
+        this._tutorialStates.start = InfoState(
+            "Welcome to Dash! Click anywhere and begin typing ':' to create your first document.",
+            {
+                docCreated: [
+                    () => this._props.childDocs().length > docCounter,
+                    () => {
+                        docCounter += 1;
+                        lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                        return this._tutorialStates.movedDoc;
                     },
                 ],
-                docRemoved: [() => numDocs() < 3, () => viewedLink],
             },
-            '/assets/dash-pin-with-view.gif'
+            undefined,
+            [skipToLinksButton, skipToPinsButton]
         );
 
-        const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
-            // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode],
-            activePen: [() => activeTool() !== InkTool.Ink, () => viewedLink],
-        }); // prettier-ignore
-
-        // const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', {
-        //     docsRemoved: [() => numDocs() == 3, () => demos],
-        // }); // prettier-ignore
+        // Information on created nested collections
+        const createdMarquee = InfoState(
+            'Next, right click and drag a square to create the collection',
+            {
+                marqueeMade: [
+                    () => this._props.childDocs().length < docCounter,
+                    () => {
+                        docCounter -= 1;
+                        return ending;
+                    },
+                ],
+            },
+            'dash-create-collection-marquee.gif'
+        );
 
-        const pinnedDoc1 = InfoState('You just pinned your doc.', {
-            docPinned: [
-                () => pin().length > trail,
+        const marqueeSelection = InfoState('Want an easier way to make a collection of docs? First add two docs you want to make a collection of', {
+            marqueeMade: [
+                () => this._props.childDocs().length > docCounter,
                 () => {
-                    trail = pin().length;
-                    // eslint-disable-next-line no-use-before-define
-                    return pinnedDoc2;
+                    docCounter += 1;
+                    lastDocCreated = this._props.childDocs()[this.props.childDocs().length - 1];
+                    return createdMarquee;
                 },
             ],
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            // eslint-disable-next-line no-use-before-define
-            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
 
-        const pinnedDoc2 = InfoState(`You pinned another doc.`, {
-            docPinned: [
-                () => pin().length > trail,
-                () => {
-                    trail = pin().length;
-                    // eslint-disable-next-line no-use-before-define
-                    return pinnedDoc3;
-                },
-            ],
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            // eslint-disable-next-line no-use-before-define
-            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-        });
+        // Explanation of importing
 
-        const pinnedDoc3 = InfoState(`You pinned yet another doc.`, {
-            docPinned: [
-                () => pin().length > trail,
-                () => {
-                    trail = pin().length;
-                    return pinnedDoc2;
-                },
-            ],
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            // eslint-disable-next-line no-use-before-define
-            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-        });
+        const easierImport = InfoState('Or, for easier access, you can drag any of the accepted file types from your computer or a webpage and drop it into your dashboard. This includes images, videos, audio, pdfs, and more!', {}, 'dash-', [
+            this.createNextButton(ending),
+        ]);
 
-        // const openedTrail = InfoState('This is your trails tab.', {
-        //     trailView: [() => presentationMode() === 'edit', () => editPresentationMode],
-        // });
-
-        // const editPresentationMode = InfoState('You are editing your presentation.', {
-        //     manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-        //     autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-        //     docRemoved: [() => numDocs() < 3, () => demos],
-        //     docCreated: [() => numDocs() == 4, () => completed],
-        // });
-
-        const manualPresentationMode = InfoState("You're in manual presentation mode.", {
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            // eslint-disable-next-line no-use-before-define
-            autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-            // eslint-disable-next-line no-use-before-define
-            docCreated: [() => numDocs() === 4, () => completed],
-        });
+        this._tutorialStates.importFile = InfoState('Want to learn how to import a file? Import using the import menu on the left hand side', {}, 'dash-import.gif', [this.createNextButton(easierImport)]);
 
-        const autoPresentationMode = InfoState("You're in auto presentation mode.", {
-            // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
-            manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => viewedLink],
-            // eslint-disable-next-line no-use-before-define
-            docCreated: [() => numDocs() === 4, () => completed],
-        });
+        // Editing documents
+
+        // Accessed by right-clicking anywhere on the target document or selecting the three bars menu at the bottom of the document chrome
 
-        const completed = InfoState(
-            'Eager to learn more? Click the ? icon in the top right corner to read our full documentation.',
-            { docRemoved: [() => numDocs() === 1, () => oneDoc] },
-            'documentation.png',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
+        const extraContentsOfDoc = InfoState('Lastly, all documents also have a context-sensitive toolbar. The toolbar contents vary depending on the document type.', {}, 'context-toolbar.png', [this.createNextButton(ending)]);
 
-        return start;
+        const contentsofDoc = InfoState('You can access the context of a doc through right-clicking anywhere on the target document or selecting the three bars menu at the bottom of the document chrome', {}, 'dash-context-menu.gif', [
+            this.createNextButton(extraContentsOfDoc),
+        ]);
+
+        const propertiesofDoc = InfoState('You can also access the properties of a doc through the double arrows in the top right or the single arrow on the right edge of the screen', {}, 'dash-properties-pane.gif', [
+            this.createNextButton(contentsofDoc),
+        ]);
+
+        this._tutorialStates.editingDocuments = InfoState('Want to learn how to edit a document? Either left or right click the document', {}, 'document-chrome.png', [this.createNextButton(propertiesofDoc)]);
+        return this._tutorialStates.start;
     };
 
     render() {
-        return !this.currState ? null : <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
+        return !this.currState ? null : (
+            <CollectionFreeFormInfoState
+                next={this.skipToState} // This ensures skipToState is passed correctly
+                close={this._props.close}
+                infoState={this.currState}
+            />
+        );
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6e9e503f4..a447a6ae4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -93,6 +93,8 @@ export interface collectionFreeformViewProps {
 
 @observer
 export class CollectionFreeFormView extends CollectionSubView<Partial<collectionFreeformViewProps>>() {
+    private static _infoUIInstance: CollectionFreeFormInfoUI | null = null;
+    
     public get displayName() {
         return 'CollectionFreeFormView(' + (this.Document.title?.toString() ?? '') + ')';
     } // this makes mobx trace() statements more descriptive
@@ -1754,11 +1756,49 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     static SetInfoUICreator(func: (doc: Doc, layout: Doc, childDocs: () => Doc[], close: () => void) => JSX.Element) {
         CollectionFreeFormView._infoUI = func;
     }
-    infoUI = () =>
+    /**
+   * Called from TutorialTool in Agent system
+   */
+  public static showTutorial(kind: 'links' | 'pins' | 'presentation') {
+        const ui = CollectionFreeFormView._infoUIInstance;
+        if (!ui) return;
+        switch (kind) {
+          case 'links':
+            ui.skipToState((ui).tutorialStates.multipleDocs);
+            ui._nextState
+            break;
+          case 'pins':
+            ui.skipToState((ui).tutorialStates.presentDocs);
+            ui._nextState
+            break;
+          case 'presentation':
+            ui.skipToState((ui).tutorialStates.makePresentation);
+            ui._nextState
+            break;
+        }
+      }
+
+    infoUI = () => {
         Doc.IsInfoUIDisabled || this.Document.annotationOn || this._props.renderDepth
             ? null //
             : CollectionFreeFormView._infoUI?.(this.Document, this.layoutDoc, this.childDocsFunc, this.closeInfo) || null;
 
+      if (Doc.IsInfoUIDisabled || this.Document.annotationOn || this._props.renderDepth) {
+        return null;
+      }
+      const creator = CollectionFreeFormView._infoUI;
+      if (!creator) return null;
+      const element = creator(this.Document, this.layoutDoc, this.childDocsFunc, this.closeInfo);
+      // attach ref so we can call skipToState(...) later
+      return React.isValidElement(element)
+        ? React.cloneElement(element, {
+            ref: (r: CollectionFreeFormInfoUI) => {
+              CollectionFreeFormView._infoUIInstance = r;
+            }
+          })
+        : element;
+        
+    };
     componentDidMount() {
         this._props.setContentViewBox?.(this);
         super.componentDidMount?.();
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 78bacdcac..fb2346bd1 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -49,7 +49,6 @@ import { gptImageLabel } from '../../apis/gpt/GPT';
 
 const DefaultPath = '/assets/unknown-file-icon-hi.png';
 export class ImageEditorData {
-    // eslint-disable-next-line no-use-before-define
     private static _instance: ImageEditorData;
     private static get imageData() { return (ImageEditorData._instance ?? new ImageEditorData()).imageData; } // prettier-ignore
     @observable imageData: { rootDoc: Doc | undefined; open: boolean; source: string; addDoc: Opt<(doc: Doc | Doc[], annotationKey?: string) => boolean> } = observable({ rootDoc: undefined, open: false, source: '', addDoc: undefined });
diff --git a/src/client/views/nodes/chatbot/agentsystem/Agent.ts b/src/client/views/nodes/chatbot/agentsystem/Agent.ts
index d1248d098..3acdc6aa8 100644
--- a/src/client/views/nodes/chatbot/agentsystem/Agent.ts
+++ b/src/client/views/nodes/chatbot/agentsystem/Agent.ts
@@ -7,17 +7,14 @@ import { AnswerParser } from '../response_parsers/AnswerParser';
 import { StreamedAnswerParser } from '../response_parsers/StreamedAnswerParser';
 import { BaseTool } from '../tools/BaseTool';
 import { CalculateTool } from '../tools/CalculateTool';
-//import { CreateAnyDocumentTool } from '../tools/CreateAnyDocTool';
 import { DataAnalysisTool } from '../tools/DataAnalysisTool';
 import { DocumentMetadataTool } from '../tools/DocumentMetadataTool';
-import { ImageCreationTool } from '../tools/ImageCreationTool';
 import { NoTool } from '../tools/NoTool';
 import { SearchTool } from '../tools/SearchTool';
 import { Parameter, ParametersType, TypeMap } from '../types/tool_types';
 import { AgentMessage, ASSISTANT_ROLE, AssistantMessage, Observation, PROCESSING_TYPE, ProcessingInfo, TEXT_TYPE } from '../types/types';
 import { Vectorstore } from '../vectorstore/Vectorstore';
 import { getReactPrompt } from './prompts';
-//import { DictionaryTool } from '../tools/DictionaryTool';
 import { ChatCompletionMessageParam } from 'openai/resources';
 import { Doc } from '../../../../../fields/Doc';
 import { ChatBox, parsedDoc } from '../chatboxcomponents/ChatBox';
@@ -32,7 +29,7 @@ import { FileNamesTool } from '../tools/FileNamesTool';
 import { CreateNewTool } from '../tools/CreateNewTool';
 import { SortDocsTool} from '../tools/SortDocsTool';
 import { TagDocsTool } from '../tools/TagDocsTool';
-//import { CreateTextDocTool } from '../tools/CreateTextDocumentTool';
+import { GPTTutorialTool } from '../tools/TutorialTool';
 
 dotenv.config();
 
@@ -55,6 +52,7 @@ export class Agent {
     private streamedAnswerParser: StreamedAnswerParser = new StreamedAnswerParser();
     private tools: Record<string, BaseTool<ReadonlyArray<Parameter>>>;
     private _docManager: AgentDocumentManager;
+    private is_dash_doc_assistant: boolean;
     // Dynamic tool registry for tools created at runtime
     private dynamicToolRegistry: Map<string, BaseTool<ReadonlyArray<Parameter>>> = new Map();
     // Callback for notifying when tools are created and need reload
@@ -79,7 +77,8 @@ export class Agent {
         csvData: () => { filename: string; id: string; text: string }[],
         createImage: (result: Upload.FileInformation & Upload.InspectionResults, options: DocumentOptions) => void,
         createCSVInDash: (url: string, title: string, id: string, data: string) => void,
-        docManager: AgentDocumentManager
+        docManager: AgentDocumentManager,
+        isDashDocAssistant: boolean
     ) {
         // Initialize OpenAI client with API key from environment
         this.client = new OpenAI({ apiKey: process.env.OPENAI_KEY, dangerouslyAllowBrowser: true });
@@ -87,6 +86,7 @@ export class Agent {
         this._history = history;
         this._csvData = csvData;
         this._docManager = docManager;
+        this.is_dash_doc_assistant = isDashDocAssistant;
 
         // Initialize dynamic tool registry
         this.dynamicToolRegistry = new Map();
@@ -105,6 +105,7 @@ export class Agent {
             codebaseSummarySearch: new CodebaseSummarySearchTool(this.vectorstore),
             fileContent: new FileContentTool(this.vectorstore),
             fileNames: new FileNamesTool(this.vectorstore),
+            generateTutorialNode: new GPTTutorialTool(this._docManager),
             sortDocs: new SortDocsTool(this._docManager),
             tagDocs: new TagDocsTool(this._docManager),
         };
@@ -146,7 +147,7 @@ export class Agent {
 
                     const instance: BaseTool<ReadonlyArray<Parameter>> = new ToolClass();
 
-                    // Prefer the tool’s self-declared name (matches <action> tag)
+                    // Prefer the tool's self-declared name (matches <action> tag)
                     const key = (instance.name || '').trim() || legacyKey;
 
                     // Check for duplicates
@@ -301,7 +302,7 @@ export class Agent {
             ignoreAttributes: false,
             attributeNamePrefix: '@_',
             textNodeName: '_text',
-            isArray: name => ['query', 'url'].indexOf(name) !== -1,
+            isArray: name => name === 'url',
             processEntities: false, // Disable processing of entities
             stopNodes: ['*.entity'], // Do not process any entities
         });
@@ -763,7 +764,7 @@ export class Agent {
         const docSummaries = () => JSON.stringify(this._docManager.listDocs);
         const chatHistory = this._history();
 
-        return getReactPrompt(allTools, docSummaries, chatHistory);
+        return getReactPrompt(allTools, docSummaries, chatHistory, this.is_dash_doc_assistant);
     }
 
     /**
diff --git a/src/client/views/nodes/chatbot/agentsystem/prompts.ts b/src/client/views/nodes/chatbot/agentsystem/prompts.ts
index fcb4ab450..b7678bd08 100644
--- a/src/client/views/nodes/chatbot/agentsystem/prompts.ts
+++ b/src/client/views/nodes/chatbot/agentsystem/prompts.ts
@@ -10,7 +10,7 @@
 import { BaseTool } from '../tools/BaseTool';
 import { Parameter } from '../types/tool_types';
 
-export function getReactPrompt(tools: BaseTool<ReadonlyArray<Parameter>>[], summaries: () => string, chatHistory: string): string {
+export function getReactPrompt(tools: BaseTool<ReadonlyArray<Parameter>>[], summaries: () => string, chatHistory: string, isDashDocAssistant?: boolean): string {
     const toolDescriptions = tools
         .map(
             tool => `
@@ -21,11 +21,21 @@ export function getReactPrompt(tools: BaseTool<ReadonlyArray<Parameter>>[], summ
         )
         .join('\n');
 
+    const dashDocContext = isDashDocAssistant
+        ? `
+    <dash_doc_assistant_context>
+        <point>You are acting as a help assistant for a software application called Dash.</point>
+        <point>All user queries, unless otherwise specified, should be interpreted as questions about how to use Dash or about Dash's functionality.</point>
+        <point>You should prioritize using the 'generateTutorialNode' tool to answer user questions about Dash.</point>
+    </dash_doc_assistant_context>
+    `
+        : '';
+
     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>
-
+    ${dashDocContext}
     <critical_points>
         <point>**STRUCTURE**: Always use the correct stage tags (e.g., <stage number="2" role="assistant">) for every response. Use only even-numbered assisntant stages for your responses.</point>
         <point>**STOP after every stage and wait for input. Do not combine multiple stages in one response.**</point>
@@ -189,7 +199,7 @@ export function getReactPrompt(tools: BaseTool<ReadonlyArray<Parameter>>[], summ
                 <action_input>
                     <action_input_description>Getting information from the relevant websites about Qatar's tourism impact during the World Cup.</action_input_description>
                     <inputs>
-                        <urls>[***URLS to search elided, but they will be comma seperated double quoted strings"]</urls>
+                        <chunk_ids>[***CHUNK IDS to search elided, but they will be comma separated double quoted strings"]</chunk_ids>
                     </inputs>
                 </action_input>
             </stage>
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
index 4a916e86c..0bacc70c2 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -183,7 +183,6 @@ $font-size-xlarge: 18px;
         box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
         position: relative;
         align-items: center;
-        gap: 12px;
         z-index: 5;
         transition: padding 0.2s ease;
 
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index 6e6ef6212..636b77b38 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -7,11 +7,12 @@
  * with support for follow-up questions and citation management.
  */
 
-import dotenv from 'dotenv';
+import { Button, Size, Type } from '@dash/components';
 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 { AiOutlineSend } from 'react-icons/ai';
 import { v4 as uuidv4 } from 'uuid';
 import { ClientUtils, OmitKeys } from '../../../../../ClientUtils';
 import { Doc, DocListCast, Opt } from '../../../../../fields/Doc';
@@ -19,34 +20,33 @@ import { DocData, DocViews } from '../../../../../fields/DocSymbols';
 import { Id } from '../../../../../fields/FieldSymbols';
 import { RichTextField } from '../../../../../fields/RichTextField';
 import { ScriptField } from '../../../../../fields/ScriptField';
-import { CsvCast, DocCast, NumCast, PDFCast, RTFCast, StrCast, VideoCast, AudioCast } from '../../../../../fields/Types';
+import { AudioCast, CsvCast, DocCast, NumCast, PDFCast, RTFCast, StrCast, VideoCast } from '../../../../../fields/Types';
+import { Upload } from '../../../../../server/SharedMediaTypes';
+import { DocServer } from '../../../../DocServer';
 import { DocUtils } from '../../../../documents/DocUtils';
 import { CollectionViewType, DocumentType } from '../../../../documents/DocumentTypes';
 import { Docs, DocumentOptions } from '../../../../documents/Documents';
-import { DocServer } from '../../../../DocServer';
 import { DocumentManager } from '../../../../util/DocumentManager';
 import { ImageUtils } from '../../../../util/Import & Export/ImageUtils';
 import { LinkManager } from '../../../../util/LinkManager';
 import { CompileError, CompileScript } from '../../../../util/Scripting';
+import { SnappingManager } from '../../../../util/SnappingManager';
 import { DictationButton } from '../../../DictationButton';
 import { ViewBoxAnnotatableComponent } from '../../../DocComponent';
 import { AudioBox } from '../../AudioBox';
 import { DocumentView, DocumentViewInternal } from '../../DocumentView';
 import { FieldView, FieldViewProps } from '../../FieldView';
+import { OpenWhere } from '../../OpenWhere';
 import { PDFBox } from '../../PDFBox';
 import { ScriptingBox } from '../../ScriptingBox';
 import { VideoBox } from '../../VideoBox';
 import { Agent } from '../agentsystem/Agent';
 import { supportedDocTypes } from '../types/tool_types';
 import { ASSISTANT_ROLE, AssistantMessage, CHUNK_TYPE, Citation, ProcessingInfo, SimplifiedChunk, TEXT_TYPE } from '../types/types';
+import { AgentDocumentManager } from '../utils/AgentDocumentManager';
 import { Vectorstore } from '../vectorstore/Vectorstore';
 import './ChatBox.scss';
 import MessageComponentBox from './MessageComponent';
-import { OpenWhere } from '../../OpenWhere';
-import { Upload } from '../../../../../server/SharedMediaTypes';
-import { AgentDocumentManager } from '../utils/AgentDocumentManager';
-
-dotenv.config();
 
 export type parsedDocData = {
     doc_type: string;
@@ -57,6 +57,7 @@ export type parsedDocData = {
     data_useCors?: boolean;
 };
 export type parsedDoc = DocumentOptions & parsedDocData;
+
 /**
  * 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,
@@ -123,7 +124,15 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.vectorstore = new Vectorstore(this.vectorstore_id, this.docManager);
 
         // Create an agent with the vectorstore
-        this.agent = new Agent(this.vectorstore, this.retrieveFormattedHistory.bind(this), this.retrieveCSVData.bind(this), this.createImageInDash.bind(this), this.createCSVInDash.bind(this), this.docManager);
+        this.agent = new Agent(
+            this.vectorstore,
+            this.retrieveFormattedHistory.bind(this),
+            this.retrieveCSVData.bind(this),
+            this.createImageInDash.bind(this),
+            this.createCSVInDash.bind(this),
+            this.docManager,
+            this.dataDoc.is_dash_doc_assistant === 'true'
+        );
 
         // Set up the tool created callback
         this.agent.setToolCreatedCallback(this.handleToolCreated);
@@ -373,7 +382,6 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             };
                         }
                     });
-                    this.scrollToBottom();
                 };
 
                 const onAnswerUpdate = (answerUpdate: string) => {
@@ -381,41 +389,33 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         if (this._current_message) {
                             this._current_message = {
                                 ...this._current_message,
-                                content: [{ text: answerUpdate, type: TEXT_TYPE.NORMAL, index: 0, citation_ids: [] }],
+                                content: [{ index: 0, type: TEXT_TYPE.NORMAL, text: answerUpdate, citation_ids: null }],
                             };
                         }
                     });
                 };
 
-                // Send the user's question to the assistant and get the final message
-                const finalMessage = await this.agent.askAgent(trimmedText, onProcessingUpdate, onAnswerUpdate);
+                // Get the response from the agent
+                let userQuery = trimmedText;
+                if (this.dataDoc.is_dash_doc_assistant) {
+                    userQuery = `The user is asking a question about Dash functionality. Their question is: "${trimmedText}". You should use the generateTutorialNode tool to answer this question.`;
+                }
+                const response = await this.agent.askAgent(userQuery, onProcessingUpdate, onAnswerUpdate);
 
-                // Update the history with the final assistant message
+                // Push the final message to history
                 runInAction(() => {
-                    if (this._current_message) {
-                        this._history.push({ ...finalMessage });
-                        this._current_message = undefined;
-                        this.dataDoc.data = JSON.stringify(this._history);
-                    }
+                    this._history.push(response);
+                    this._isLoading = false;
+                    this._current_message = undefined;
                 });
-            } catch (err) {
-                console.error('Error:', err);
-                // Handle error in processing
-                runInAction(() =>
-                    this._history.push({
-                        role: ASSISTANT_ROLE.ASSISTANT,
-                        content: [{ index: 0, type: TEXT_TYPE.ERROR, text: `Sorry, I encountered an error while processing your request: ${err} `, citation_ids: null }],
-                        processing_info: [],
-                    })
-                );
-            } finally {
+            } catch (error) {
+                console.error('Error in askGPT:', error);
                 runInAction(() => {
                     this._isLoading = false;
+                    this._current_message = undefined;
                 });
-                this.scrollToBottom();
             }
         }
-        this.scrollToBottom();
     };
 
     /**
@@ -488,7 +488,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const data = (doc as parsedDocData).data;
         const ndoc = (() => {
             switch (doc.doc_type) {
-                default:           
+                default:
                 case supportedDocTypes.note:       return Docs.Create.TextDocument(data as string, options);
                 case supportedDocTypes.comparison: return this.createComparison(JSON.parse(data as string) as parsedDoc[], options);
                 case supportedDocTypes.flashcard:  return this.createFlashcard(JSON.parse(data as string) as  parsedDoc[], options);
@@ -499,23 +499,23 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 case supportedDocTypes.web:       {
                     // Create web document with enhanced safety options
                     const webOptions = { 
-                        ...options, 
+                        ...options,
                         data_useCors: true
                     };
-                    
+
                     // If iframe_sandbox was passed from AgentDocumentManager, add it to the options
                     if ('_iframe_sandbox' in options) {
                         webOptions._iframe_sandbox = options._iframe_sandbox;
                     }
-                    
+
                     return Docs.Create.WebDocument(data as string, webOptions);
                 }
                 case supportedDocTypes.dataviz:    return Docs.Create.DataVizDocument('/users/rz/Downloads/addresses.csv', options);
                 case supportedDocTypes.pdf:        return Docs.Create.PdfDocument(data as string, options);
                 case supportedDocTypes.video:      return Docs.Create.VideoDocument(data as string, options);
                 case supportedDocTypes.diagram:    return Docs.Create.DiagramDocument(undefined, { text: data as unknown as RichTextField, ...options}); // text: can take a string or RichTextField but it's typed for RichTextField.
-                
-                // case supportedDocumentTypes.dataviz: 
+
+                // case supportedDocumentTypes.dataviz:
                 // {
                 //     const { fileUrl, id } = await Networking.PostToServer('/createCSV', {
                 //         filename: (options.title as string).replace(/\s+/g, '') + '.csv',
@@ -540,7 +540,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     const arr = this.createCollectionWithChildren(JSON.parse(data as string) as parsedDoc[], true).filter(d=>d).map(d => d!);
                     const collOpts = {  _width:300, _height: 300, _layout_fitWidth: true,  _freeform_backgroundGrid: true, ...options,  };
                     return (() => {
-                            switch (options.type_collection) {
+                        switch (options.type_collection) {
                                 case CollectionViewType.Tree:        return Docs.Create.TreeDocument(arr, collOpts);
                                 case CollectionViewType.Stacking:    return Docs.Create.StackingDocument(arr, collOpts);
                                 case CollectionViewType.Masonry:     return Docs.Create.MasonryDocument(arr, collOpts);
@@ -549,9 +549,9 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                 case CollectionViewType.Carousel3D:  return Docs.Create.Carousel3DDocument(arr, collOpts);
                                 case CollectionViewType.Multicolumn: return Docs.Create.CarouselDocument(arr, collOpts);
                                 default:                             return Docs.Create.FreeformDocument(arr, collOpts);
-                            }
-                        })();
-                    }
+                        }
+                    })();
+                }
                 // case supportedDocumentTypes.map:        return Docs.Create.MapDocument([], options);
                 // case supportedDocumentTypes.button:     return Docs.Create.ButtonDocument(options);
                 // case supportedDocumentTypes.trail:      return Docs.Create.PresDocument(options);
@@ -559,8 +559,8 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         })();
 
         if (ndoc) {
-            ndoc.x = NumCast((options.x as number) ?? 0) + (insideCol ? 0 : NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc.width)) + 100;
-            ndoc.y = NumCast(options.y as number) + (insideCol ? 0 : NumCast(this.layoutDoc.y));
+            ndoc.x = ((options.x as number) ?? 0) + (insideCol ? 0 : NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc.width)) + 100;
+            ndoc.y = ((options.y as number) ?? 0) + (insideCol ? 0 : NumCast(this.layoutDoc.y));
         }
         return ndoc;
     };
@@ -714,7 +714,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         // If specific indexes are provided, filter segments by those indexes
         if (indexesOfSegments && indexesOfSegments.length > 0) {
-            segments = original_segments.filter((segment: any) => indexesOfSegments.includes(segment.index));
+            segments = original_segments.filter(segment => indexesOfSegments.includes(segment.index));
         }
 
         // If no segments match the indexes, use all segments
@@ -723,7 +723,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
 
         // First try to find an exact match
-        const exactMatch = segments.find((segment: any) => segment.text && segment.text.includes(citationText));
+        const exactMatch = segments.find(segment => segment.text && segment.text.includes(citationText));
 
         if (exactMatch) {
             return exactMatch.start;
@@ -832,7 +832,8 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         existingDoc._width = x2 - x1;
                         existingDoc._height = y2 - y1;
                     }
-                    const highlightDoc = existingDoc ?? this.createImageCitationHighlight(x1, y1, x2, y2, citation, annotationKey, doc);
+                    // const highlightDoc =
+                    existingDoc ?? this.createImageCitationHighlight(x1, y1, x2, y2, citation, annotationKey, doc);
 
                     //doc.layout_scroll = y1;
                     doc._layout_curPage = foundChunk.startPage + 1;
@@ -1068,7 +1069,9 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         {
                             index: 0,
                             type: TEXT_TYPE.NORMAL,
-                            text: `Hey, ${this.userName()}! Welcome to Your Friendly Assistant. Link a document or ask questions to get started.`,
+                            text: this.dataDoc.is_dash_doc_assistant
+                                ? 'Welcome to your help assistant for Dash. Ask any Dash-related questions to get started.'
+                                : `Hey, ${this.userName()}! Welcome to Your Friendly Assistant. Link a document or ask questions to get started.`,
                             citation_ids: null,
                         },
                     ],
@@ -1409,7 +1412,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     </div>
                 )}
                 <div className="chat-header">
-                    <h2>{this.userName()}&apos;s AI Assistant</h2>
+                    <h2>{StrCast(this.dataDoc.title) || `${this.userName()}'s AI Assistant`}</h2>
                     <div className="font-size-control" onClick={this.toggleFontSizeModal}>
                         {this.renderFontSizeIcon()}
                     </div>
@@ -1456,16 +1459,16 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             disabled={this._isLoading}
                         />
                     </div>
-                    <button className="submit-button" onClick={() => this._dictation?.stopDictation()} type="submit" disabled={this._isLoading || !this._inputValue.trim()}>
-                        {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>
+                    <Button
+                        // className="submit-button"
+                        onClick={() => this._dictation?.stopDictation()}
+                        type={Type.PRIM}
+                        tooltip="Send to AI"
+                        color={SnappingManager.userVariantColor}
+                        inactive={this._isLoading || !this._inputValue.trim()}
+                        icon={<AiOutlineSend />}
+                        size={Size.LARGE}
+                    />
                     <DictationButton ref={this.setDictationRef} setInput={this.setChatInput} inputRef={this._textInputRef} />
                 </form>
                 {/* Popup for citation */}
diff --git a/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts b/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
index a55f901e1..da4a4ae29 100644
--- a/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
+++ b/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
@@ -1,16 +1,7 @@
-import { Doc, FieldType } from '../../../../../fields/Doc';
-import { DocData } from '../../../../../fields/DocSymbols';
+import { Parameter, ParametersType, supportedDocTypes, ToolInfo } from '../types/tool_types';
 import { Observation } from '../types/types';
-import { ParametersType, ToolInfo, Parameter } from '../types/tool_types';
-import { BaseTool } from './BaseTool';
-import { DocumentOptions } from '../../../../documents/Documents';
-import { CollectionFreeFormDocumentView } from '../../../nodes/CollectionFreeFormDocumentView';
-import { v4 as uuidv4 } from 'uuid';
-import { LinkManager } from '../../../../util/LinkManager';
-import { DocCast, StrCast } from '../../../../../fields/Types';
-import { supportedDocTypes } from '../types/tool_types';
-import { parsedDoc } from '../chatboxcomponents/ChatBox';
 import { AgentDocumentManager } from '../utils/AgentDocumentManager';
+import { BaseTool } from './BaseTool';
 
 // Define the parameters for the DocumentMetadataTool
 const parameterDefinitions: ReadonlyArray<Parameter> = [
@@ -598,7 +589,7 @@ export class DocumentMetadataTool extends BaseTool<DocumentMetadataToolParamsTyp
                             message: string;
                             fieldName?: string;
                             originalFieldName?: string;
-                            newValue?: any;
+                            newValue?: string | number | boolean | object;
                             warning?: string;
                         }[] = [];
 
diff --git a/src/client/views/nodes/chatbot/tools/TutorialTool.ts b/src/client/views/nodes/chatbot/tools/TutorialTool.ts
new file mode 100644
index 000000000..1624f0439
--- /dev/null
+++ b/src/client/views/nodes/chatbot/tools/TutorialTool.ts
@@ -0,0 +1,212 @@
+import { BaseTool } from './BaseTool';
+import { Observation } from '../types/types';
+import { ParametersType, ToolInfo } from '../types/tool_types';
+import { schema } from '../../../../views/nodes/formattedText/schema_rts';
+import { v4 as uuidv4 } from 'uuid';
+import { gptTutorialAPICall } from '../../../../apis/gpt/TutorialGPT';
+import { parsedDoc } from '../chatboxcomponents/ChatBox';
+import { Id } from '../../../../../fields/FieldSymbols';
+import { Doc } from '../../../../../fields/Doc';
+import { RichTextField } from '../../../../../fields/RichTextField';
+import { DocumentViewInternal } from '../../DocumentView';
+import { Docs } from '../../../../documents/Documents';
+import { OpenWhere } from '../../OpenWhere';
+import { CollectionFreeFormView } from '../../../collections/collectionFreeForm/CollectionFreeFormView';
+import { AgentDocumentManager } from '../utils/AgentDocumentManager';
+import { Node as ProseMirrorNode } from 'prosemirror-model';
+
+const generateTutorialNodeToolParams = [
+    {
+        name: 'query',
+        type: 'string',
+        description: 'The user query that asks how to use the environment',
+        required: true,
+    },
+] as const;
+
+const generateTutorialNodeToolInfo: ToolInfo<typeof generateTutorialNodeToolParams> = {
+    name: 'generateTutorialNode',
+    description: "Generates a tutorial text node based on the user's query about Dash functionality. Use this when the user asks for help or tutorials on how to use Dash features.",
+    parameterRules: generateTutorialNodeToolParams,
+    citationRules: "No citation needed for this tool's output.",
+};
+
+interface FormattedDocument {
+    doc: ProseMirrorNode;
+    plainText: string;
+}
+
+const applyFormatting = (markdownText: string): FormattedDocument => {
+    const lines = markdownText.split('\n');
+    const nodes: ProseMirrorNode[] = [];
+    let plainText = '';
+    let i = 0;
+    let currentListItems: ProseMirrorNode[] = [];
+    let currentParagraph: ProseMirrorNode[] = [];
+    let currentOrderedListItems: ProseMirrorNode[] = [];
+    let inOrderedList = false;
+    let inBulletList = false;
+
+    const processBoldText = (text: string): ProseMirrorNode[] => {
+        const boldRegex = /\*\*(.*?)\*\*/g;
+        const parts: ProseMirrorNode[] = [];
+        let lastIndex = 0;
+        let match;
+
+        while ((match = boldRegex.exec(text)) !== null) {
+            if (match.index > lastIndex) {
+                parts.push(schema.text(text.substring(lastIndex, match.index)));
+            }
+            parts.push(schema.text(match[1], [schema.marks.strong.create()]));
+            lastIndex = match.index + match[0].length;
+        }
+        if (lastIndex < text.length) {
+            parts.push(schema.text(text.substring(lastIndex)));
+        }
+        return parts.length > 0 ? parts : [schema.text(text)];
+    };
+
+    const flushListItems = (): void => {
+        if (currentListItems.length > 0) {
+            nodes.push(schema.nodes.ordered_list.create({ mapStyle: 'bullet' }, currentListItems));
+            nodes.push(schema.nodes.paragraph.create());
+            currentListItems = [];
+            inBulletList = false;
+        }
+        if (currentOrderedListItems.length > 0) {
+            nodes.push(schema.nodes.ordered_list.create({ mapStyle: 'number' }, currentOrderedListItems));
+            nodes.push(schema.nodes.paragraph.create());
+            currentOrderedListItems = [];
+            inOrderedList = false;
+        }
+    };
+
+    const flushParagraph = (): void => {
+        if (currentParagraph.length > 0) {
+            nodes.push(schema.nodes.paragraph.create({}, currentParagraph));
+            currentParagraph = [];
+        }
+    };
+
+    const processHeader = (line: string): boolean => {
+        const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headerMatch) {
+            const level = Math.min(headerMatch[1].length, 6); // Cap at h6
+            const textContent = headerMatch[2];
+            flushParagraph();
+            nodes.push(schema.nodes.heading.create({ level }, processBoldText(textContent)));
+            plainText += textContent + '\n';
+            return true;
+        }
+        return false;
+    };
+
+    while (i < lines.length) {
+        const line = lines[i].trim();
+        if (line) {
+            if (processHeader(line)) {
+                flushListItems();
+                flushParagraph();
+            } else if (line.startsWith('- ')) {
+                flushParagraph();
+                if (!inBulletList) {
+                    flushListItems();
+                    inBulletList = true;
+                }
+                const textContent = line.replace('- ', '');
+                currentListItems.push(schema.nodes.list_item.create({}, schema.nodes.paragraph.create({}, processBoldText(textContent))));
+                plainText += textContent + '\n';
+            } else if (/^\d+\.\s+/.test(line)) {
+                flushParagraph();
+                if (!inOrderedList) {
+                    flushListItems();
+                    inOrderedList = true;
+                }
+                const textContent = line.replace(/^\d+\.\s+/, '');
+                currentOrderedListItems.push(schema.nodes.list_item.create({}, schema.nodes.paragraph.create({}, processBoldText(textContent))));
+                plainText += textContent + '\n';
+            } else {
+                flushListItems();
+                currentParagraph = currentParagraph.concat(processBoldText(line));
+                plainText += line + '\n';
+            }
+        } else {
+            flushListItems();
+            flushParagraph();
+            nodes.push(schema.nodes.paragraph.create());
+            plainText += '\n';
+        }
+        i++;
+    }
+    flushListItems();
+    flushParagraph();
+
+    const doc = schema.nodes.doc.create({}, nodes);
+    return { doc, plainText: plainText.trim() };
+};
+
+export class GPTTutorialTool extends BaseTool<typeof generateTutorialNodeToolParams> {
+    private _docManager: AgentDocumentManager;
+
+    constructor(docManager: AgentDocumentManager) {
+        super(generateTutorialNodeToolInfo);
+        this._docManager = docManager;
+    }
+
+    async execute(args: ParametersType<typeof generateTutorialNodeToolParams>): Promise<Observation[]> {
+        const chunkId = uuidv4();
+        try {
+            const query = (args.query || '').trim();
+            if (!query) {
+                return [{ type: 'text', text: `<chunk chunk_id="${chunkId}" chunk_type="error">Please provide a query.</chunk>` }];
+            }
+            const markdown = await gptTutorialAPICall(query);
+            const { doc, plainText } = applyFormatting(markdown);
+
+            // Build the ProseMirror‐in‐JSON + plain-text for RichTextField
+            const rtfData = {
+                doc: doc.toJSON ? doc.toJSON() : doc,
+                selection: { type: 'text', anchor: 0, head: 0 },
+                storedMarks: [],
+            };
+            const rtf = new RichTextField(JSON.stringify(rtfData), plainText);
+
+            // Create and show the TextDocument directly:
+            const formattedDoc = Docs.Create.TextDocument(rtf, {
+                title: 'Tutorial Node',
+                _width: 600,
+                _layout_fitWidth: true,
+                _layout_autoHeight: true,
+                text_fontSize: '16px',
+            });
+            DocumentViewInternal.addDocTabFunc(formattedDoc, OpenWhere.addRight);
+
+            // If user asked about linking/pinning/presentation, also fire the in-app tutorial:
+            const q = query.toLowerCase();
+            if (q.includes('link')) {
+                Doc.IsInfoUIDisabled = false;
+                CollectionFreeFormView.showTutorial('links');
+            } else if (q.includes('presentation')) {
+                Doc.IsInfoUIDisabled = false;
+                CollectionFreeFormView.showTutorial('presentation');
+            } else if (q.includes('pin')) {
+                Doc.IsInfoUIDisabled = false;
+                CollectionFreeFormView.showTutorial('pins');
+            }
+
+            return [
+                {
+                    type: 'text',
+                    text: `<chunk chunk_id="${chunkId}" chunk_type="tutorial_node_creation">Created tutorial node with ID ${formattedDoc[Id]}.</chunk>`,
+                },
+            ];
+        } catch (error) {
+            return [
+                {
+                    type: 'text',
+                    text: `<chunk chunk_id="${chunkId}" chunk_type="error">Error generating tutorial node: ${error}</chunk>`,
+                },
+            ];
+        }
+    }
+}
diff --git a/src/client/views/nodes/chatbot/utils/AgentDocumentManager.ts b/src/client/views/nodes/chatbot/utils/AgentDocumentManager.ts
index 3c8b49f33..dcb708450 100644
--- a/src/client/views/nodes/chatbot/utils/AgentDocumentManager.ts
+++ b/src/client/views/nodes/chatbot/utils/AgentDocumentManager.ts
@@ -1,7 +1,5 @@
 import { action, computed, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
-import { v4 as uuidv4 } from 'uuid';
-import { Doc, StrListCast } from '../../../../../fields/Doc';
+import { Doc, FieldResult, StrListCast } from '../../../../../fields/Doc';
 import { DocData } from '../../../../../fields/DocSymbols';
 import { Id } from '../../../../../fields/FieldSymbols';
 import { List } from '../../../../../fields/List';
@@ -30,7 +28,7 @@ export class AgentDocumentManager {
     @observable private documentsById: ObservableMap<string, AgentDocument>;
     private chatBox: ChatBox;
     private chatBoxDocument: Doc | null = null;
-    private fieldMetadata: Record<string, any> = {};
+    private fieldMetadata: Record<string, any> = {}; // bcz: CHANGE any to a proper type!
     @observable private simplifiedChunks: ObservableMap<string, SimplifiedChunk>;
 
     /**
@@ -103,6 +101,7 @@ export class AgentDocumentManager {
         for (const [fieldName, fieldInfo] of documentOptionsEntries) {
             // Extract field information
             const fieldData: Record<string, any> = {
+                // bcz: CHANGE any to a proper type!
                 name: fieldName,
                 withoutUnderscore: fieldName.startsWith('_') ? fieldName.substring(1) : fieldName,
                 description: '',
@@ -223,6 +222,7 @@ export class AgentDocumentManager {
         const dataDoc = agentDoc.dataDoc;
 
         const metadata: Record<string, any> = {
+            // bcz: CHANGE any to a proper type!
             id: layoutDoc[Id] || dataDoc[Id] || '',
             title: layoutDoc.title || '',
             type: layoutDoc.type || '',
@@ -235,7 +235,7 @@ export class AgentDocumentManager {
 
         // Process all known field definitions
         Object.keys(this.fieldMetadata).forEach(fieldName => {
-            const fieldDef = this.fieldMetadata[fieldName];
+            // const fieldDef = this.fieldMetadata[fieldName];
             const strippedName = fieldName.startsWith('_') ? fieldName.substring(1) : fieldName;
 
             // Check if field exists on layout document
@@ -307,7 +307,7 @@ export class AgentDocumentManager {
      * @param value The field value to format
      * @returns A JSON-friendly representation of the field value
      */
-    private formatFieldValue(value: any): any {
+    private formatFieldValue(value: FieldResult | undefined) {
         if (value === undefined || value === null) {
             return null;
         }
@@ -330,12 +330,12 @@ export class AgentDocumentManager {
                 if (rtfObj.doc && rtfObj.doc.content) {
                     // Recursively extract text from the content
                     let plainText = '';
-                    const extractText = (node: any) => {
+                    const extractText = (node: { text: string; content?: unknown[] }) => {
                         if (node.text) {
                             plainText += node.text;
                         }
                         if (node.content && Array.isArray(node.content)) {
-                            node.content.forEach((child: any) => extractText(child));
+                            node.content.forEach(child => extractText(child as { text: string; content?: unknown[] }));
                         }
                     };
 
@@ -351,7 +351,7 @@ export class AgentDocumentManager {
                         };
                     }
                 }
-            } catch (e) {
+            } catch {
                 // If parsing fails, just treat as a regular string
             }
         }
@@ -366,7 +366,7 @@ export class AgentDocumentManager {
             try {
                 // Try to convert to JSON string
                 return JSON.stringify(value);
-            } catch (e) {
+            } catch {
                 return '[Complex Object]';
             }
         }
@@ -381,26 +381,24 @@ export class AgentDocumentManager {
      * @param fieldValue The string value to convert
      * @returns The converted value with the appropriate type
      */
-    private convertFieldValue(fieldName: string, fieldValue: any): any {
+    private convertFieldValue(fieldName: string, fieldValueIn: string | number | boolean): FieldResult | undefined {
         // If fieldValue is already a number or boolean, we don't need to convert it from string
-        if (typeof fieldValue === 'number' || typeof fieldValue === 'boolean') {
-            return fieldValue;
+        if (typeof fieldValueIn === 'number' || typeof fieldValueIn === 'boolean') {
+            return fieldValueIn;
         }
 
         // If fieldValue is a string "true" or "false", convert to boolean
-        if (typeof fieldValue === 'string') {
-            if (fieldValue.toLowerCase() === 'true') {
+        if (typeof fieldValueIn === 'string') {
+            if (fieldValueIn.toLowerCase() === 'true') {
                 return true;
             }
-            if (fieldValue.toLowerCase() === 'false') {
+            if (fieldValueIn.toLowerCase() === 'false') {
                 return false;
             }
         }
 
-        // If fieldValue is not a string (and not a number or boolean), convert it to string
-        if (typeof fieldValue !== 'string') {
-            fieldValue = String(fieldValue);
-        }
+        // coerce fieldvValue to a string
+        const fieldValue = typeof fieldValueIn !== 'string' ? String(fieldValueIn) : fieldValueIn;
 
         // Special handling for text field - convert to proper RichTextField format
         if (fieldName === 'text') {
@@ -408,7 +406,7 @@ export class AgentDocumentManager {
                 // Check if it's already a valid JSON RichTextField
                 JSON.parse(fieldValue);
                 return fieldValue;
-            } catch (e) {
+            } catch {
                 // It's a plain text string, so convert it to RichTextField format
                 const rtf = {
                     doc: {
@@ -462,21 +460,21 @@ export class AgentDocumentManager {
             // Try to convert to date (stored as number timestamp)
             try {
                 return new Date(fieldValue).getTime();
-            } catch (e) {
+            } catch {
                 return fieldValue;
             }
         } else if (fieldType.includes('list') || fieldType.includes('array')) {
             // Try to parse as JSON array
             try {
-                return JSON.parse(fieldValue);
-            } catch (e) {
+                return JSON.parse(fieldValue) as FieldResult; //  bcz: this needs to be typed properly.  Dash fields can't accept a generic 'objext'
+            } catch {
                 return fieldValue;
             }
         } else if (fieldType === 'json' || fieldType === 'object') {
             // Try to parse as JSON object
             try {
-                return JSON.parse(fieldValue);
-            } catch (e) {
+                return JSON.parse(fieldValue) as FieldResult; //  bcz: this needs to be typed properly.  Dash fields can't accept a generic 'objext'
+            } catch {
                 return fieldValue;
             }
         }
@@ -492,6 +490,7 @@ export class AgentDocumentManager {
     public getAllFieldMetadata() {
         // Start with our already populated fieldMetadata from the DocumentOptions class
         const result: Record<string, any> = {
+            // bcz: CHANGE any to a proper type!
             fieldCount: Object.keys(this.fieldMetadata).length,
             fields: {},
             fieldsByType: {
@@ -526,6 +525,7 @@ export class AgentDocumentManager {
 
             // Create structured field metadata
             const fieldData: Record<string, any> = {
+                // bcz: CHANGE any to a proper type!
                 name: fieldName,
                 displayName: strippedName,
                 description: fieldInfo.description || '',
@@ -618,12 +618,12 @@ export class AgentDocumentManager {
         message: string;
         fieldName?: string;
         originalFieldName?: string;
-        newValue?: any;
+        newValue?: string | number | boolean | object;
         warning?: string;
     } {
         // Normalize field name (handle with/without underscore)
         let normalizedFieldName = fieldName.startsWith('_') ? fieldName : fieldName;
-        const strippedFieldName = fieldName.startsWith('_') ? fieldName.substring(1) : fieldName;
+        // const strippedFieldName = fieldName.startsWith('_') ? fieldName.substring(1) : fieldName;
 
         // Handle common field name aliases (width → _width, height → _height)
         // Many document fields use '_' prefix for layout properties
@@ -690,7 +690,7 @@ export class AgentDocumentManager {
             }
 
             // Set the field value on the target document
-            targetDoc[normalizedFieldName] = convertedValue;
+            targetDoc[normalizedFieldName] = convertedValue; //  bcz: converteValue needs to be typed properly.  Dash fields can't accept a generic 'objext'
 
             return {
                 success: true,
@@ -712,19 +712,19 @@ export class AgentDocumentManager {
      * @param documentId Optional ID of a specific document to get metadata for
      * @returns Document metadata or metadata for all documents
      */
-    public getDocumentMetadata(documentId?: string): any {
+    public getDocumentMetadata(documentId?: string) {
         if (documentId) {
             console.log(`Returning document metadata for docID, ${documentId}:`, this.extractDocumentMetadata(documentId));
             return this.extractDocumentMetadata(documentId);
         } else {
             // Get metadata for all documents
-            const documentsMetadata: Record<string, Record<string, any>> = {};
-            for (const documentId of this.documentsById.keys()) {
-                const metadata = this.extractDocumentMetadata(documentId);
+            const documentsMetadata: Record<string, Record<string, any>> = {}; // bcz: CHANGE any to a proper type!
+            for (const docid of this.documentsById.keys()) {
+                const metadata = this.extractDocumentMetadata(docid);
                 if (metadata) {
-                    documentsMetadata[documentId] = metadata;
+                    documentsMetadata[docid] = metadata;
                 } else {
-                    console.warn(`No metadata found for document with ID: ${documentId}`);
+                    console.warn(`No metadata found for document with ID: ${docid}`);
                 }
             }
             return {
@@ -842,7 +842,7 @@ export class AgentDocumentManager {
      * @returns The ID of the created document
      */
 
-    public async createDocInDash(docType: string, data: string, options?: any): Promise<string> {
+    public async createDocInDash(docType: string, data: string, options?: DocumentOptions): Promise<string> {
         // Validate doc_type
         if (!this.isValidDocType(docType)) {
             throw new Error(`Invalid document type: ${docType}`);
@@ -1054,13 +1054,13 @@ export class AgentDocumentManager {
                     endPage: chunk.metadata.end_page,
                     location: chunk.metadata.location,
                 } as SimplifiedChunk);
-            } else if (docType === 'csv') {
+            } else if (docType === 'csv' && 'row_start' in chunk.metadata && 'row_end' in chunk.metadata && 'col_start' in chunk.metadata && 'col_end' in chunk.metadata) {
                 simplifiedChunks.push({
                     ...baseChunk,
-                    rowStart: (chunk.metadata as any).row_start,
-                    rowEnd: (chunk.metadata as any).row_end,
-                    colStart: (chunk.metadata as any).col_start,
-                    colEnd: (chunk.metadata as any).col_end,
+                    rowStart: chunk.metadata.row_start,
+                    rowEnd: chunk.metadata.row_end,
+                    colStart: chunk.metadata.col_start,
+                    colEnd: chunk.metadata.col_end,
                 } as SimplifiedChunk);
             } else {
                 // Default for other document types
@@ -1077,7 +1077,7 @@ export class AgentDocumentManager {
      * @returns The simplified chunk if found, undefined otherwise
      */
     @action
-    public getSimplifiedChunkById(chunkId: string): any | undefined {
+    public getSimplifiedChunkById(chunkId: string) {
         return { foundChunk: this.simplifiedChunks.get(chunkId), doc: this.getDocument(this.simplifiedChunks.get(chunkId)?.doc_id || chunkId), dataDoc: this.getDataDocument(this.simplifiedChunks.get(chunkId)?.doc_id || chunkId) };
     }
 
@@ -1098,7 +1098,7 @@ export class AgentDocumentManager {
      * @param doc The document containing original media segments
      * @returns Array of media segments or empty array if none exist
      */
-    public getOriginalSegments(doc: Doc): any[] {
+    public getOriginalSegments(doc: Doc): { text: string; index: string; start: number }[] {
         if (!doc || !doc.original_segments) {
             return [];
         }
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 9c37428ee..6e0d58932 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -1,4 +1,4 @@
-import { Button, IconButton, Toggle, ToggleType, Type } from '@dash/components';
+import { Button, IconButton, Size, Toggle, ToggleType, Type } from '@dash/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -9,7 +9,10 @@ import ReactLoading from 'react-loading';
 import { TypeAnimation } from 'react-type-animation';
 import { ClientUtils } from '../../../../ClientUtils';
 import { Doc } from '../../../../fields/Doc';
+import { List } from '../../../../fields/List';
 import { NumCast, StrCast } from '../../../../fields/Types';
+import { ImageField } from '../../../../fields/URLField';
+import { Upload } from '../../../../server/SharedMediaTypes';
 import { Networking } from '../../../Network';
 import { DataSeperator, DescriptionSeperator, DocSeperator, GPTCallType, GPTDocCommand, gptAPICall, gptImageCall } from '../../../apis/gpt/GPT';
 import { DocUtils } from '../../../documents/DocUtils';
@@ -21,17 +24,14 @@ import { DictationButton } from '../../DictationButton';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { TagItem } from '../../TagsView';
 import { ChatSortField, docSortings } from '../../collections/CollectionSubView';
+import { ComparisonBox } from '../../nodes/ComparisonBox';
 import { DocumentView, DocumentViewInternal } from '../../nodes/DocumentView';
+import { OpenWhere } from '../../nodes/OpenWhere';
+import { DrawingFillHandler } from '../../smartdraw/DrawingFillHandler';
+import { FireflyImageDimensions } from '../../smartdraw/FireflyConstants';
 import { SmartDrawHandler } from '../../smartdraw/SmartDrawHandler';
 import { AnchorMenu } from '../AnchorMenu';
 import './GPTPopup.scss';
-import { FireflyImageDimensions } from '../../smartdraw/FireflyConstants';
-import { Upload } from '../../../../server/SharedMediaTypes';
-import { OpenWhere } from '../../nodes/OpenWhere';
-import { DrawingFillHandler } from '../../smartdraw/DrawingFillHandler';
-import { ImageField } from '../../../../fields/URLField';
-import { List } from '../../../../fields/List';
-import { ComparisonBox } from '../../nodes/ComparisonBox';
 
 export enum GPTPopupMode {
     SUMMARY, // summary of seleted document text
@@ -45,7 +45,6 @@ export enum GPTPopupMode {
 
 @observer
 export class GPTPopup extends ObservableReactComponent<object> {
-    // eslint-disable-next-line no-use-before-define
     static Instance: GPTPopup;
     static ChatTag = '#chat'; // tag used by GPT popup to filter docs
     private _askDictation: DictationButton | null = null;
@@ -530,14 +529,14 @@ export class GPTPopup extends ObservableReactComponent<object> {
                     style={{ color: 'black' }}
                     placeholder={placeholder}
                 />
-                <Button //
-                    text="Send"
-                    type={Type.TERT}
+                <Button //\
+                    type={Type.PRIM}
+                    tooltip="Send to AI"
                     icon={<AiOutlineSend />}
                     iconPlacement="right"
-                    color={SettingsManager.userColor}
-                    background={SettingsManager.userVariantColor}
+                    background={SnappingManager.userVariantColor}
                     onClick={() => this.callGpt(this._mode)}
+                    size={Size.LARGE}
                 />
                 <DictationButton ref={this.setDictationRef} setInput={onChange} />
             </div>
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index ca177c746..9bae92586 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -238,3 +238,10 @@
         font-weight: bold;
     }
 }
+
+.topbar-right .dropdown-container {
+    width: 30px !important;
+    display: inline-flex !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 18e30b3c2..9b24219cf 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,11 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, IconButton, isDark, Size, Type } from '@dash/components';
+import { Button, Dropdown, DropdownType, IconButton, isDark, Size, Type } from '@dash/components';
 import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Flip } from 'react-awesome-reveal';
 import { FaBug } from 'react-icons/fa';
-import { returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils';
+import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils';
 import { Doc, DocListCast, returnEmptyDoclist } from '../../../fields/Doc';
 import { AclAdmin, DashVersion } from '../../../fields/DocSymbols';
 import { StrCast } from '../../../fields/Types';
@@ -27,6 +26,8 @@ import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
 import { ObservableReactComponent } from '../ObservableReactComponent';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider';
 import './TopBar.scss';
+import { OpenWhere } from '../nodes/OpenWhere';
+import { Docs } from '../../documents/Documents';
 
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
@@ -84,7 +85,7 @@ export class TopBar extends ObservableReactComponent<object> {
                 {Doc.ActiveDashboard ? (
                     <IconButton
                         onClick={this.navigateToHome}
-                        icon={<FontAwesomeIcon icon={DocListCast(Doc.MySharedDocs.data_dashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'portrait' : 'home'} />}
+                        icon={<FontAwesomeIcon icon={DocListCast(Doc.MySharedDocs?.data_dashboards)?.some(dash => !DocListCast(Doc.MySharedDocs?.viewed)?.includes(dash)) ? 'portrait' : 'home'} />}
                         color={this.color}
                         background={this.backgroundColor}
                     />
@@ -196,18 +197,53 @@ export class TopBar extends ObservableReactComponent<object> {
                         onClick={() => SharingManager.Instance.open(undefined, Doc.ActiveDashboard)}
                     />
                 ) : null}
-                <IconButton tooltip="Issue Reporter ⌘I" size={Size.SMALL} color={this.color} background={this.backgroundColor} onClick={ReportManager.Instance.open} icon={<FaBug />} />
-                <Flip key={this._flipDocumentation}>
-                    <IconButton
-                        tooltip="Documentation ⌘D"
-                        size={Size.SMALL}
-                        color={this.color}
-                        background={this.backgroundColor}
-                        onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}
-                        icon={<FontAwesomeIcon icon="question-circle" />}
-                    />
-                </Flip>
-                <IconButton tooltip="Settings ⌘⇧S" size={Size.SMALL} color={this.color} background={this.backgroundColor} onClick={SettingsManager.Instance.openMgr} icon={<FontAwesomeIcon icon="cog" />} />
+                <IconButton tooltip="Issue Reporter ⌘I" size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
+                {/* <IconButton tooltip="Documentation ⌘D" size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} /> */}
+                <Dropdown
+                    iconProvider={() => <FontAwesomeIcon icon="question-circle" />}
+                    dropdownType={DropdownType.CLICK}
+                    background={this.backgroundColor}
+                    style={{ padding: 0, minWidth: 'unset', margin: 0, width: 30, display: 'inline-flex' }}
+                    toolTip="Help"
+                    placement="bottom"
+                    items={[
+                        {
+                            val: 'documentation',
+                            text: 'Documentation',
+                            tooltip: 'Documentation ⌘D',
+                            onClick: () => {
+                                window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank');
+                            },
+                        },
+                        {
+                            val: 'tutorial',
+                            text: 'Tutorial',
+                            onClick: () => {
+                                Doc.IsInfoUIDisabled = false;
+                            },
+                        },
+                        {
+                            val: 'tutorialagent',
+                            text: 'Ask AI!',
+                            onClick: () => {
+                                const userEmail = ClientUtils.CurrentUserEmail();
+                                const userName = userEmail.split('@')[0];
+                                const doc = Docs.Create.ChatDocument({
+                                    chat: 'Welcome to your help assistant for Dash. Ask any Dash-related questions to get started.',
+                                    title: `${userName}'s Dash Help Assistant`,
+                                    is_dash_doc_assistant: 'true',
+                                });
+                                DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight);
+                            },
+                        },
+                    ]}
+                    width={30}
+                    size={Size.SMALL}
+                    color={this.color}
+                    closeOnSelect={true}
+                    onPointerLeave={() => {}}
+                />
+                <IconButton tooltip="Settings ⌘⇧S" size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.openMgr} icon={<FontAwesomeIcon icon="cog" />} style={{ margin: 0, padding: 0 }} />
                 <IconButton
                     size={Size.SMALL}
                     onClick={ServerStats.Instance.open}