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

1 files changed, 315 insertions, 206 deletions

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}
+            />
+        );
     }
 }