added tutorial tool, still need to integrate with metadatatool

2 files changed, 59 insertions, 6 deletions

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 35a3da312..2200d11d5 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 00114a3f9..7754b0ba2 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,12 +1,12 @@
 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 { Doc, DocListCast, returnEmptyDoclist } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt, returnEmptyDoclist } from '../../../fields/Doc';
 import { AclAdmin, DashVersion } from '../../../fields/DocSymbols';
 import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
@@ -27,6 +27,12 @@ import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
 import { ObservableReactComponent } from '../ObservableReactComponent';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider';
 import './TopBar.scss';
+import { OpenWhere } from '../nodes/OpenWhere';
+import { ChatBox } from '../nodes/chatbot/chatboxcomponents/ChatBox';
+import { FieldViewProps } from '../nodes/FieldView';
+import { FocusViewOptions } from '../nodes/FocusViewOptions';
+import { PinProps } from '../PinFuncs';
+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
@@ -197,10 +203,50 @@ export class TopBar extends ObservableReactComponent<object> {
                     />
                 ) : null}
                 <IconButton tooltip="Issue Reporter ⌘I" size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
-                <Flip key={this._flipDocumentation}>
-                    <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" />} />
-                </Flip>
-                <IconButton tooltip="Settings ⌘⇧S" size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.openMgr} icon={<FontAwesomeIcon icon="cog" />} />
+                {/* <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 doc = Docs.Create.ChatDocument({
+                                    chat: 'Welcome to your help assistant for Dash. Ask any Dash-related questions to get started.',
+                                    title: 'Dash Documentation 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}