diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/DocumentButtonBar.scss | 9 | ||||
| -rw-r--r-- | src/client/views/DocumentButtonBar.tsx | 84 | ||||
| -rw-r--r-- | src/client/views/FilterPanel.scss | 92 | ||||
| -rw-r--r-- | src/client/views/FilterPanel.tsx | 248 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 11 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.scss | 40 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 450 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCarouselView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/global/globalScripts.ts | 191 | ||||
| -rw-r--r-- | src/client/views/nodes/FontIconBox/FontIconBox.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.scss | 24 | ||||
| -rw-r--r-- | src/client/views/nodes/IconTagBox.tsx | 121 | ||||
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.scss | 92 | ||||
| -rw-r--r-- | src/client/views/pdf/GPTPopup/GPTPopup.tsx | 373 |
16 files changed, 1390 insertions, 355 deletions
diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 11614d627..ede277aae 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -29,6 +29,11 @@ $linkGap: 3px; background: black; height: 20px; align-items: center; + + .tags { + width: 40px; + + } } .documentButtonBar-followTypes { width: 20px; @@ -153,6 +158,10 @@ $linkGap: 3px; &:hover { background-color: $black; + + .documentButtonBar-pinTypes { + display: flex; + } } } diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index f14fd033b..ccde1de80 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -9,7 +9,7 @@ import * as React from 'react'; import { FaEdit } from 'react-icons/fa'; import { returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick } from '../../ClientUtils'; import { emptyFunction } from '../../Utils'; -import { Doc, DocListCast } from '../../fields/Doc'; +import { Doc } from '../../fields/Doc'; import { Cast, DocCast } from '../../fields/Types'; import { DocUtils, IsFollowLinkScript } from '../documents/DocUtils'; import { CalendarManager } from '../util/CalendarManager'; @@ -264,25 +264,82 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( } @computed + get calendarButton() { + const targetDoc = this.view0?.Document; + return !targetDoc ? null : ( + <Tooltip title={<div className="dash-calendar-button">Open calendar menu</div>}> + <div + className="documentButtonBar-icon" + style={{ color: 'white' }} + onClick={() => { + CalendarManager.Instance.open(this.view0, targetDoc); + }}> + <FontAwesomeIcon className="documentdecorations-icon" icon={faCalendarDays as IconLookup} /> + </div> + </Tooltip> + ); + } + + /** + * Allows for both the keywords and the icon tags to be shown using a quasi- multitoggle + */ + @computed get keywordButton() { - return !DocumentView.Selected().length ? null : ( + const targetDoc = this.view0?.Document; + + const metaBtn = (name: string, icon: IconProp) => { + const tooltip = `Toggle ${name}`; + return ( + <Tooltip title={<div className="dash-tooltip">{tooltip}</div>}> + <div className="documentButtonBar-pinIcon"> + <FontAwesomeIcon + className="documentdecorations-icon" + style={{ width: 20 }} + key={icon.toString()} + size="sm" + icon={icon} + onClick={e => { + if (name === 'tags'){ + (targetDoc && (targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags)) + } else { + (targetDoc && (targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels)) + } + + + + + }} + /> + </div> + </Tooltip> + ); + }; + + + + + return !targetDoc ? null : ( + <div className='documentButtonBar-icon'> + <div className="documentButtonBar-pinTypes" style = {{width: '40px'}}> + {metaBtn('tags', 'star')} + {metaBtn("keywords", 'id-card')} + </div> + <Tooltip title={<div className="dash-keyword-button">Open keyword menu</div>}> <div className="documentButtonBar-icon" style={{ color: 'white' }} - onClick={undoable(e => { - const showing = DocumentView.Selected().some(dv => dv.layoutDoc._layout_showTags); - DocumentView.Selected().forEach(dv => { - dv.layoutDoc._layout_showTags = !showing; - if (e.shiftKey) - DocListCast(dv.Document[Doc.LayoutFieldKey(dv.Document) + '_annotations']).forEach(doc => { - if (doc.face) doc.hidden = showing; - }); - }); - }, 'show Doc tags')}> + onClick={() => { + // targetDoc[DocData].showIconTags = !targetDoc[DocData].showIconTags; + }} + > + + <FontAwesomeIcon className="documentdecorations-icon" icon="tag" /> </div> </Tooltip> + </div> + ); } @@ -455,10 +512,11 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => ( {!DocumentView.Selected().some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>} <div className="documentButtonBar-button">{this.pinButton}</div> <div className="documentButtonBar-button">{this.recordButton}</div> + <div className="documentButtonBar-button">{this.calendarButton}</div> <div className="documentButtonBar-button">{this.keywordButton}</div> {!Doc.UserDoc().documentLinksButton_fullMenu ? null : <div className="documentButtonBar-button">{this.shareButton}</div>} <div className="documentButtonBar-button">{this.menuButton}</div> </div> ); } -} +}
\ No newline at end of file diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss index d6d2956aa..508b1ee1f 100644 --- a/src/client/views/FilterPanel.scss +++ b/src/client/views/FilterPanel.scss @@ -1,3 +1,4 @@ + .filterBox-flyout { display: block; text-align: left; @@ -228,6 +229,97 @@ vertical-align: middle; } +.filterHotKey-button { + pointer-events: auto; + width: 100%; //width: 25px; + border-radius: 5px; + margin-top: 8px; + border-color: #d3d3d3; + border-style: solid; + border-width: thin; + transition: all 0.3s ease-out; + display: flex; + flex-direction: row; + padding: 5px; + + + &:hover{ + border-color: #e9e9e9; + background-color: #6d6c6c + } + + .hotKey-icon, .hotKey-close{ + background-color: transparent; + border-radius: 10%; + padding: 5px; + + + &:hover{ + background-color: #616060; + } + } + + .hotKey-close{ + right: 30px; + position: fixed; + padding-top: 10px; + +} + + .hotkey-title{ + top: 6px; + position: relative; + cursor: text; + + } + + .hotkey-title-input{ + background-color: transparent; + border: none; + border-color: transparent; + outline: none; + cursor: text; + + } +} + +.hotKeyButtons { + position: relative; + width: 100%; + +} + +.hotKey-icon-button { + + background-color: transparent; + + +} + +.icon-panel { + position: absolute; + z-index: 10000; + border-color: black; + border-style: solid; + border-width: medium; + border-radius: 10%; + background-color: #323232; + + .icon-panel-button{ + background-color: #323232; + border-radius: 10%; + + + &:hover{ + background-color:#7a7878 + } + } + + + +} + + // .sliderBox-outerDiv { // width: 30%;// width: calc(100% - 14px); // 14px accounts for handles that are at the max value of the slider that would extend outside the box // height: 40; // height: 100%; diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index 2f6d1fbaa..8133a4d0d 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -1,20 +1,27 @@ /* eslint-disable react/jsx-props-no-spreading */ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Tooltip } from '@mui/material'; import { action, computed, makeObservable, observable, ObservableMap } from 'mobx'; -import { observer } from 'mobx-react'; +import { observer, useLocalObservable } from 'mobx-react'; import * as React from 'react'; +import { useEffect, useRef } from 'react'; import { Handles, Rail, Slider, Ticks, Tracks } from 'react-compound-slider'; import { AiOutlineMinusSquare, AiOutlinePlusSquare } from 'react-icons/ai'; import { CiCircleRemove } from 'react-icons/ci'; import { Doc, DocListCast, Field, FieldType, LinkedTo, StrListCast } from '../../fields/Doc'; +import { DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; import { RichTextField } from '../../fields/RichTextField'; +import { DocCast, StrCast } from '../../fields/Types'; +import { Button, CurrentUserUtils } from '../util/CurrentUserUtils'; import { SearchUtil } from '../util/SearchUtil'; import { SnappingManager } from '../util/SnappingManager'; import { undoable } from '../util/UndoManager'; import { FieldsDropdown } from './FieldsDropdown'; import './FilterPanel.scss'; import { DocumentView } from './nodes/DocumentView'; +import { ButtonType } from './nodes/FontIconBox/FontIconBox'; import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components'; import { ObservableReactComponent } from './ObservableReactComponent'; @@ -25,10 +32,12 @@ interface filterProps { @observer export class FilterPanel extends ObservableReactComponent<filterProps> { @observable _selectedFacetHeaders = new Set<string>(); + public static Instance: FilterPanel; constructor(props: filterProps) { super(props); makeObservable(this); + FilterPanel.Instance = this; } /** @@ -211,12 +220,66 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2)); }; + /** + * Allows users to add a filter hotkey to the properties panel. Will also update the multitoggle at the top menu and the + * icontags tht are displayed on the documents themselves + * @param hotKey tite of the new hotkey + */ + addHotkey = (hotKey: string) => { + const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); + const filter = DocCast(buttons.Filter); + + const newKey: Button = { + title: hotKey, + icon: 'bolt', + toolTip: `Click to toggle the ${hotKey}'s group's visibility`, + btnType: ButtonType.ToggleButton, + expertMode: false, + toolType: 'bolt', + funcs: {}, + scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' }, + }; + + const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); + + Doc.UserDoc().myFilterHotKeyTitles = new List<string>(currHotKeys.concat(hotKey)); + + Doc.UserDoc()[hotKey] = 'bolt'; + + const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter); + newBtn.isSystem = newBtn[DocData].isSystem = undefined; + + const subDocs = DocListCast(filter.data); + const opts = subDocs[subDocs.length - 1]; + Doc.AddDocToList(filter, 'data', newBtn, opts, true); + }; + + /** + * Renders the newly formed hotkey icon buttons + * @returns the buttons to be rendered + */ + hotKeyButtons = () => { + const selected = DocumentView.SelectedDocs().lastElement(); + const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); + + // Selecting a button should make it so that the icon on the top filter panel becomes said icon + const buttons = hotKeys.map((hotKey, i) => ( + <Tooltip key={hotKey} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}> + <HotKeyIconButton hotKey={hotKey} selected={selected} /> + </Tooltip> + )); + + return buttons; + }; + + // @observable iconPanelMap: Map<string, number> = new Map(); + render() { return ( <div className="filterBox-treeView"> <div className="filterBox-select"> <div style={{ width: '100%' }}> - <FieldsDropdown Document={this.Document} selectFunc={this.facetClick} showPlaceholder placeholder="add a filter" addedFields={['acl_Guest', LinkedTo]} /> + <FieldsDropdown Document={this.Document} selectFunc={this.facetClick} showPlaceholder placeholder="add a filter" addedFields={['acl_Guest', LinkedTo, 'Star', 'Heart', 'Bolt', 'Cloud']} /> </div> {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */} {/* <div className="filterBox-select-bool"> @@ -277,6 +340,15 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { ) )} </div> + <div> + <div className="filterBox-select"> + <div style={{ width: '100%' }}> + <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo]} /> + </div> + </div> + </div> + + <div>{this.hotKeyButtons()}</div> </div> ); } @@ -385,3 +457,175 @@ export class FilterPanel extends ObservableReactComponent<filterProps> { return undefined; } } + +interface HotKeyButtonProps { + hotKey: string; + selected?: Doc; +} + +/** + * Renders the buttons that correspond to each icon tag in the properties view. Allows users to change the icon, + * title, and delete. + */ +const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, selected }) => { + const state = useLocalObservable(() => ({ + isActive: false, + isEditing: false, + myHotKey: hotKey, + + toggleActive() { + this.isActive = !this.isActive; + }, + deactivate() { + this.isActive = false; + }, + startEditing() { + this.isEditing = true; + }, + stopEditing() { + this.isEditing = false; + }, + setHotKey(newHotKey: string) { + this.myHotKey = newHotKey; + }, + })); + + const panelRef = useRef<HTMLDivElement>(null); + const inputRef = useRef<HTMLInputElement>(null); + + const handleClick = () => { + state.toggleActive(); + }; + + const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); + const buttons = DocCast(Doc.UserDoc().myContextMenuBtns); + const filter = DocCast(buttons.Filter); + + /** + * The doc of the button in the context menu that corresponds to the current hotkey + * @returns + */ + const myHotKeyDoc = () => { + const hotKeyDocs = DocListCast(filter.data); + return hotKeyDocs.filter(k => StrCast(k.title) === hotKey)[0]; + }; + + /** + * Removes a hotkey from list + */ + const removeHotKey = () => { + Doc.RemoveDocFromList(filter, 'data', myHotKeyDoc()); + }; + + /** + * Deselects if the user clicks outside the button + * @param event + */ + const handleClickOutside = (event: MouseEvent) => { + if (panelRef.current && !panelRef.current.contains(event.target as Node)) { + state.deactivate(); + if (state.isEditing) { + state.stopEditing(); + + updateFromInput(); + } + } + }; + + /** + * Updates the list of hotkeys based on the users input. replaces the old title with the new one and then assigns this new + * hotkey with the current icon + */ + const updateFromInput = undoable(() => { + const myDoc = myHotKeyDoc(); + Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.map(k => (k === hotKey ? state.myHotKey : k))); + Doc.UserDoc()[state.myHotKey] = StrCast(Doc.UserDoc()[hotKey]); + Doc.UserDoc()[hotKey] = ''; + myDoc.title = state.myHotKey; + myDoc.toolTip = `Click to toggle the ${state.myHotKey}'s group's visibility`; + }, ''); + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const iconOpts = ['star', 'heart', 'bolt', 'satellite', 'palette', 'robot', 'lightbulb', 'highlighter', 'book', 'chalkboard']; + + /** + * Panel of icons the user can choose from to represent their tag + */ + const iconPanel = iconOpts.map((icon, i) => ( + <button + key={i} + onClick={undoable((e: React.MouseEvent) => { + e.stopPropagation; + Doc.UserDoc()[hotKey] = icon; + myHotKeyDoc().icon = icon; + }, '')} + className="icon-panel-button"> + <FontAwesomeIcon icon={icon as any} color={SnappingManager.userColor} /> + </button> + )); + + /** + * Actually renders the buttons + */ + + return ( + <div + className={`filterHotKey-button`} + onClick={e => { + e.stopPropagation(); + state.startEditing(); + setTimeout(() => inputRef.current?.focus(), 0); + }}> + <div className={`hotKey-icon-button ${state.isActive ? 'active' : ''}`} ref={panelRef}> + <Tooltip title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}> + <button + type="button" + className="hotKey-icon" + onClick={(e: React.MouseEvent) => { + e.stopPropagation(); + handleClick(); + }}> + <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl" color={SnappingManager.userColor} /> + </button> + </Tooltip> + {state.isActive && <div className="icon-panel">{iconPanel}</div>} + </div> + {state.isEditing ? ( + <input + ref={inputRef} + type="text" + value={state.myHotKey.toUpperCase()} + onChange={e => state.setHotKey(e.target.value)} + onBlur={() => { + state.stopEditing(); + updateFromInput(); + }} + onKeyDown={e => { + if (e.key === 'Enter') { + state.stopEditing(); + updateFromInput(); + } + }} + className="hotkey-title-input" + /> + ) : ( + <p className="hotkey-title">{hotKey.toUpperCase()}</p> + )} + <button + className="hotKey-close" + onClick={(e: React.MouseEvent) => { + e.stopPropagation(); + Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); + removeHotKey(); + }}> + <FontAwesomeIcon icon={'x' as any} color={SnappingManager.userColor} /> + </button> + </div> + ); +}); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 393abea53..8b8f85dfb 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -546,6 +546,10 @@ export class MainView extends ObservableReactComponent<object> { fa.faRobot, fa.faSatellite, fa.faStar, + fa.faCloud, + fa.faBolt, + fa.faLightbulb, + fa.faX, ] ); } diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index daa8e1720..e940ba6f9 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -54,7 +54,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps private _widthUndo?: UndoManager.Batch; // eslint-disable-next-line no-use-before-define - public static Instance: PropertiesView | undefined; + public static Instance: PropertiesView; constructor(props: PropertiesViewProps) { super(props); makeObservable(this); diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 262f888fb..13fef101a 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -9,6 +9,7 @@ import { BsArrowDown, BsArrowDownUp, BsArrowUp } from 'react-icons/bs'; import { FaFilter } from 'react-icons/fa'; import { ClientUtils, DashColor, lightOrDark } from '../../ClientUtils'; import { Doc, Opt, StrListCast } from '../../fields/Doc'; +import { DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { ScriptField } from '../../fields/ScriptField'; import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../fields/Types'; @@ -19,12 +20,12 @@ import { SnappingManager } from '../util/SnappingManager'; import { undoable, UndoManager } from '../util/UndoManager'; import { TreeSort } from './collections/TreeSort'; import { Colors } from './global/globalEnums'; -import { TagsView } from './TagsView'; -import { CollectionFreeFormDocumentView } from './nodes/CollectionFreeFormDocumentView'; import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; import { FieldViewProps } from './nodes/FieldView'; +import { IconTagBox } from './nodes/IconTagBox'; import { StyleProp } from './StyleProp'; import './StyleProvider.scss'; +import { TagsView } from './TagsView'; function toggleLockedPosition(doc: Doc) { UndoManager.RunInBatch(() => Doc.toggleLockedPosition(doc), 'toggleBackground'); @@ -366,6 +367,11 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & ); }; const tags = () => props?.DocumentView?.() ? <TagsView Views={[props.DocumentView()]}/> : null; + + const iconTags = () => { + if (doc && doc![DocData].showIconTags) + {return (<IconTagBox doc= {doc}></IconTagBox>)} + } return ( <> {paint()} @@ -373,6 +379,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & {filter()} {audio()} {tags()} + {iconTags()} </> ); } diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index cc797d0bd..5ccc3d9a8 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -12,7 +12,6 @@ height: 35px; border-radius: 50%; background-color: $dark-gray; - // border-color: $medium-blue; margin: 5px; // transform: translateY(-50px); } } @@ -20,7 +19,6 @@ .card-wrapper { display: grid; grid-template-columns: repeat(10, 1fr); - // width: 100%; transform-origin: top left; position: absolute; @@ -31,39 +29,17 @@ transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } -.card-button-container { - display: flex; - padding: 3px; - // width: 300px; - background-color: rgb(218, 218, 218); /* Background color of the container */ - border-radius: 50px; /* Rounds the corners of the container */ - transform: translateY(75px); - // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */ - align-items: center; /* Centers buttons vertically */ - justify-content: start; /* Centers buttons horizontally */ -} - -// button:hover { -// transform: translateY(-50px); -// } +.no-card-span{ + position: relative; + width: fit-content; + text-align: center; + font-size: 65px; + -// .card-wrapper::after { -// content: ""; -// width: 100%; /* Forces wrapping */ -// } -// .card-wrapper > .card-item:nth-child(10n)::after { -// content: ""; -// width: 100%; /* Forces wrapping after every 10th item */ -// } +} -// .card-row{ -// display: flex; -// position: absolute; -// align-items: center; -// transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); -// } .card-item-inactive, .card-item-active, @@ -74,11 +50,11 @@ flex-direction: column; } + .card-item-inactive { opacity: 0.5; } .card-item-active { - position: absolute; z-index: 100; } diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 28a769896..fced9fd37 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -2,15 +2,17 @@ import { IReactionDisposer, ObservableMap, action, computed, makeObservable, obs import { observer } from 'mobx-react'; import * as React from 'react'; import { ClientUtils, DashColor, returnFalse, returnZero } from '../../../ClientUtils'; -import { numberRange } from '../../../Utils'; -import { Doc, NumListCast } from '../../../fields/Doc'; +import { emptyFunction } from '../../../Utils'; +import { Doc, StrListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; -import { BoolCast, Cast, DateCast, NumCast, RTFCast, ScriptCast, StrCast } from '../../../fields/Types'; +import { BoolCast, DateCast, DocCast, NumCast, RTFCast, ScriptCast, StrCast } from '../../../fields/Types'; import { URLField } from '../../../fields/URLField'; import { gptImageLabel } from '../../apis/gpt/GPT'; import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; +import { dropActionType } from '../../util/DropActionTypes'; +import { SelectionManager } from '../../util/SelectionManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoable } from '../../util/UndoManager'; @@ -25,8 +27,18 @@ enum cardSortings { Type = 'type', Color = 'color', Custom = 'custom', + Chat = 'chat', + Tag = 'tag', None = '', } + +/** + * New view type specifically for studying more dynamically. Allows you to reorder docs however you see fit, easily + * sort and filter using presets, and customize your experience with chat gpt. + * + * This file contains code as to how the docs are to be rendered (there place geographically and also in regards to sorting), + * and callback functions for the gpt popup + */ @observer export class CollectionCardView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; @@ -35,14 +47,12 @@ export class CollectionCardView extends CollectionSubView() { private _textToDoc = new Map<string, Doc>(); @observable _forceChildXf = false; - @observable _isLoading = false; @observable _hoveredNodeIndex = -1; @observable _docRefs = new ObservableMap<Doc, DocumentView>(); @observable _maxRowCount = 10; - - static getButtonGroup(groupFieldKey: 'chat' | 'star' | 'idea' | 'like', doc: Doc): number | undefined { - return Cast(doc[groupFieldKey], 'number', null); - } + @observable _docDraggedIndex: number = -1; + @observable _isACardBeingDragged: boolean = false; + @observable overIndex: number = -1; static imageUrlToBase64 = async (imageUrl: string): Promise<string> => { try { @@ -61,22 +71,44 @@ export class CollectionCardView extends CollectionSubView() { } }; - protected createDashEventsTarget = (ele: HTMLDivElement | null) => { - this._dropDisposer?.(); - if (ele) { - this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc); - } - }; - constructor(props: SubCollectionViewProps) { super(props); makeObservable(this); + this.setRegenerateCallback(); } - componentDidMount(): void { + /** + * Callback to ensure gpt's text versions of the child docs are updated + */ + setRegenerateCallback = () => GPTPopup.Instance.setRegenerateCallback(this.childPairStringListAndUpdateSortDesc); + + /** + * update's gpt's doc-text list and initializes callbacks + */ + @action + childPairStringListAndUpdateSortDesc = async () => { + const sortDesc = await this.childPairStringList(); // Await the promise to get the string result + GPTPopup.Instance.setSortDesc(sortDesc.join()); + GPTPopup.Instance.onSortComplete = (sortResult: string, questionType: string, tag?: string) => this.processGptOutput(sortResult, questionType, tag); + GPTPopup.Instance.onQuizRandom = () => this.quizMode(); + }; + + componentDidMount() { + this.Document.childFilters_boolean = 'OR'; + this.childDocsWithoutLinks.forEach(c => { + c[DocData].showIconTags = true; + }); + + // Reaction to cardSort changes this._disposers.sort = reaction( - () => ({ cardSort: this.cardSort, field: this.cardSort_customField }), - ({ cardSort, field }) => (cardSort === cardSortings.Custom && field === 'chat' ? this.openChatPopup() : GPTPopup.Instance.setVisible(false)) + () => GPTPopup.Instance.visible, + isVis => { + if (isVis) { + this.openChatPopup(); + } else { + this.Document.cardSort = this.cardSort === cardSortings.Chat ? '' : this.Document.cardSort; + } + } ); } @@ -92,6 +124,7 @@ export class CollectionCardView extends CollectionSubView() { @computed get cardSort() { return StrCast(this.Document.cardSort) as cardSortings; } + /** * how much to scale down the contents of the view so that everything will fit */ @@ -100,41 +133,28 @@ export class CollectionCardView extends CollectionSubView() { return (this._childDocumentWidth * length) / this._props.PanelWidth(); } - @computed get translateWrapperX() { - let translate = 0; - - if (this.inactiveDocs().length !== this.childDocsWithoutLinks.length && this.inactiveDocs().length < 10) { - translate += this.panelWidth() / 2; - } - return translate; - } - /** * The child documents to be rendered-- either all of them except the Links or the docs in the currently active * custom group */ @computed get childDocsWithoutLinks() { - const regularDocs = this.childDocs.filter(l => l.type !== DocumentType.LINK); - const activeGroups = NumListCast(this.Document.cardSort_visibleSortGroups); - - if (activeGroups.length > 0 && this.cardSort === cardSortings.Custom) { - return regularDocs.filter(doc => { - // Get the group number for the current index - const groupNumber = CollectionCardView.getButtonGroup(this.cardSort_customField, doc); - // Check if the group number is in the active groups - return groupNumber !== undefined && activeGroups.includes(groupNumber); - }); - } - - // Default return for non-custom cardSort or other cases, filtering out links - return regularDocs; + return this.childDocs.filter(l => l.type !== DocumentType.LINK); } /** - * Determines the order in which the cards will be rendered depending on the current sort type + * When in quiz mode, randomly selects a document */ - @computed get sortedDocs() { - return this.sort(this.childDocsWithoutLinks, this.cardSort, BoolCast(this.layoutDoc.sortDesc)); + quizMode = () => { + const randomIndex = Math.floor(Math.random() * this.childDocs.length); + SelectionManager.DeselectAll(); + DocumentView.SelectView(DocumentView.getDocumentView(this.childDocs[randomIndex]), false); + }; + + /** + * Number of rows of cards to be rendered + */ + @computed get numRows() { + return Math.ceil(this.sortedDocs.length / 10); } @action @@ -170,6 +190,8 @@ export class CollectionCardView extends CollectionSubView() { * @returns */ rotate = (amCards: number, index: number) => { + if (amCards == 1) return 0; + const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2)); const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2))); @@ -205,24 +227,116 @@ export class CollectionCardView extends CollectionSubView() { }; /** - * Translates the selected node to the middle fo the screen - * @param index - * @returns + * When dragging a card, determines the index the card should be set to if dropped + * @param mouseX mouse's x location + * @param mouseY mouses' y location + * @returns the card's new index + */ + findCardDropIndex = (mouseX: number, mouseY: number) => { + const amCardsTotal = this.sortedDocs.length; + let index = 0; + const cardWidth = amCardsTotal < this._maxRowCount ? this._props.PanelWidth() / amCardsTotal : this._props.PanelWidth() / this._maxRowCount; + + // Calculate the adjusted X position accounting for the initial offset + let adjustedX = mouseX; + + const amRows = Math.ceil(amCardsTotal / this._maxRowCount); + const rowHeight = this._props.PanelHeight() / amRows; + const currRow = Math.floor((mouseY - 100) / rowHeight); //rows start at 0 + + if (adjustedX < 0) { + return 0; // Before the first column + } + + if (amCardsTotal < this._maxRowCount) { + index = Math.floor(adjustedX / cardWidth); + } else if (currRow != amRows - 1) { + index = Math.floor(adjustedX / cardWidth) + currRow * this._maxRowCount; + } else { + const rowAmCards = amCardsTotal - currRow * this._maxRowCount; + const offset = ((this._maxRowCount - rowAmCards) / 2) * cardWidth; + adjustedX = mouseX - offset; + + index = Math.floor(adjustedX / cardWidth) + currRow * this._maxRowCount; + } + return index; + }; + + /** + * Checks to see if a card is being dragged and calls the appropriate methods if so + * @param e the current pointer event + */ + + @action + onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => { + if (DragManager.docsBeingDragged.length != 0) { + this._isACardBeingDragged = true; + + const newIndex = this.findCardDropIndex(e.clientX, e.clientY); + + if (newIndex !== this._docDraggedIndex && newIndex != -1) { + this._docDraggedIndex = newIndex; + } + } + }; + + /** + * Resets all the doc dragging vairables once a card is dropped + * @param e + * @param de drop event + * @returns true if a card has been dropped, falls if not + */ + onInternalDrop = undoable((e: Event, de: DragManager.DropEvent) => { + if (de.complete.docDragData) { + this._isACardBeingDragged = false; + this._docDraggedIndex = -1; + e.stopPropagation(); + return true; + } + return false; + }, ''); + + @computed get sortedDocs() { + return this.sort(this.childDocsWithoutLinks, this.cardSort, BoolCast(this.Document.cardSort_isDesc), this._docDraggedIndex); + } + + /** + * Used to determine how to sort cards based on tags. The lestmost tags are given lower values while cards to the right are + * given higher values. Decimals are used to determine placement for cards with multiple tags + * @param doc the doc whose value is being determined + * @returns its value based on its tags */ - translateSelected = (index: number): number => { - // if (this.isSelected(index)) { - const middleOfPanel = this._props.PanelWidth() / 2; - const scaledNodeWidth = this.panelWidth() * 1.25; - // Calculate the position of the node's left edge before scaling - const nodeLeftEdge = index * this.panelWidth(); - // Find the center of the node after scaling - const scaledNodeCenter = nodeLeftEdge + scaledNodeWidth / 2; + tagValue = (doc: Doc) => { + const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); - // Calculate the translation needed to align the scaled node's center with the panel's center - const translation = middleOfPanel - scaledNodeCenter - scaledNodeWidth - scaledNodeWidth / 4; + const isTagActive = (buttonID: number) => { + return BoolCast(doc[StrCast(Doc.UserDoc()[keys[buttonID]])]); + }; - return translation; + let base = ''; + let fraction = ''; + + for (let i = 0; i < keys.length; i++) { + if (isTagActive(i)) { + if (base === '') { + base = i.toString(); // First active tag becomes the base + } else { + fraction += i.toString(); // Subsequent active tags become part of the fraction + } + } + } + + // If no tag was active, return 0 by default + if (base === '') { + return 0; + } + + // Construct the final number by appending the fraction if it exists + const numberString = fraction ? `${base}.${fraction}` : base; + + // Convert the result to a number and return + return Number(numberString); }; /** @@ -233,35 +347,42 @@ export class CollectionCardView extends CollectionSubView() { * @param isDesc * @returns */ - sort = (docs: Doc[], sortType: cardSortings, isDesc: boolean) => { - if (sortType === cardSortings.None) return docs; + sort = (docs: Doc[], sortType: cardSortings, isDesc: boolean, dragIndex: number) => { docs.sort((docA, docB) => { const [typeA, typeB] = (() => { switch (sortType) { - case cardSortings.Time: - return [DateCast(docA.author_date)?.date ?? Date.now(), - DateCast(docB.author_date)?.date ?? Date.now()]; - case cardSortings.Color: - return [DashColor(StrCast(docA.backgroundColor)).hsv().toString(), // If docA.type is undefined, use an empty string - DashColor(StrCast(docB.backgroundColor)).hsv().toString()]; // If docB.type is undefined, use an empty string - case cardSortings.Custom: - return [CollectionCardView.getButtonGroup(this.cardSort_customField, docA)??0, - CollectionCardView.getButtonGroup(this.cardSort_customField, docB)??0]; - default: return [StrCast(docA.type), // If docA.type is undefined, use an empty string - StrCast(docB.type)]; // If docB.type is undefined, use an empty string - } // prettier-ignore + case cardSortings.Time: + return [DateCast(docA.author_date)?.date ?? Date.now(), DateCast(docB.author_date)?.date ?? Date.now()]; + case cardSortings.Color: { + const d1 = DashColor(StrCast(docA.backgroundColor)); + const d2 = DashColor(StrCast(docB.backgroundColor)); + return [d1.hsv().hue(), d2.hsv().hue()]; + } + case cardSortings.Tag: + return [this.tagValue(docA) ?? 9999, this.tagValue(docB) ?? 9999]; + case cardSortings.Chat: + return [NumCast(docA.chatIndex) ?? 9999, NumCast(docB.chatIndex) ?? 9999]; + default: + return [StrCast(docA.type), StrCast(docB.type)]; + } })(); const out = typeA < typeB ? -1 : typeA > typeB ? 1 : 0; - return isDesc ? -out : out; // Reverse the sort order if descending is true + return isDesc ? out : -out; }); + if (dragIndex != -1) { + const draggedDoc = DragManager.docsBeingDragged[0]; + const originalIndex = docs.findIndex(doc => doc === draggedDoc); + + docs.splice(originalIndex, 1); + docs.splice(dragIndex, 0, draggedDoc); + } - return docs; + return [...docs]; // need to spread docs into a new object list since sort() modifies the incoming list which confuses mobx caching }; displayDoc = (doc: Doc, screenToLocalTransform: () => Transform) => ( <DocumentView - // eslint-disable-next-line react/jsx-props-no-spreading {...this._props} ref={action((r: DocumentView) => r?.ContentDiv && this._docRefs.set(doc, r))} Document={doc} @@ -273,10 +394,12 @@ export class CollectionCardView extends CollectionSubView() { LayoutTemplate={this._props.childLayoutTemplate} LayoutTemplateString={this._props.childLayoutString} ScreenToLocalTransform={screenToLocalTransform} // makes sure the box wrapper thing is in the right spot - isContentActive={this.isChildContentActive} + isContentActive={emptyFunction} isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive} PanelWidth={this.panelWidth} PanelHeight={this.panelHeight(doc)} + dragAction={(this.Document.childDragAction ?? this._props.childDragAction) as dropActionType} + dontHideOnDrag /> ); @@ -286,11 +409,11 @@ export class CollectionCardView extends CollectionSubView() { * @returns */ overflowAmCardsCalc = (index: number) => { - if (this.inactiveDocs().length < this._maxRowCount) { - return this.inactiveDocs().length; + if (this.sortedDocs.length < this._maxRowCount) { + return this.sortedDocs.length; } // 13 - 3 = 10 - const totalCards = this.inactiveDocs().length; + const totalCards = this.sortedDocs.length; // if 9 or less if (index < totalCards - (totalCards % 10)) { return this._maxRowCount; @@ -323,22 +446,17 @@ export class CollectionCardView extends CollectionSubView() { * @returns */ calculateTranslateY = (isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) => { - if (isSelected) return 50 * this.fitContentScale; - const trans = isHovered ? this.translateHover(realIndex) : 0; + const rowHeight = (this._props.PanelHeight() * this.fitContentScale) / this.numRows; + const rowIndex = Math.trunc(realIndex / this._maxRowCount); + const rowToCenterShift = this.numRows / 2 - rowIndex; + if (isSelected) return rowToCenterShift * rowHeight - rowHeight / 2; + if (amCards == 1) return 50 * this.fitContentScale; + // const trans = isHovered ? this.translateHover(realIndex) : 0; + const trans = 0; return trans + this.translateY(amCards, calcRowIndex, realIndex); }; /** - * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt - * @param childPairIndex - * @param buttonID - * @param doc - */ - toggleButton = undoable((buttonID: number, doc: Doc) => { - this.cardSort_customField && (doc[this.cardSort_customField] = buttonID); - }, 'toggle custom button'); - - /** * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words. * Image documents are converted to bse64 and gpt generates a description for them. all other documents use their title. This string is * inputted into the gpt prompt to sort everything together @@ -355,6 +473,7 @@ export class CollectionCardView extends CollectionSubView() { }; const docTextPromises = this.childDocsWithoutLinks.map(async doc => { const docText = (await docToText(doc)) ?? ''; + doc['gptInputText'] = docText; this._textToDoc.set(docText.replace(/\n/g, ' ').trim(), doc); return `======${docText.replace(/\n/g, ' ').trim()}======`; }); @@ -377,75 +496,104 @@ export class CollectionCardView extends CollectionSubView() { image[DocData].description = response.trim(); return response; // Return the response from gptImageLabel } catch (error) { - console.log('bad things have happened'); + console.log(error); } return ''; }; /** - * Converts the gpt output into a hashmap that can be used for sorting. lists are seperated by ==== while elements within the list are seperated by ~~~~~~ + * Processes gpt's output depending on the type of question the user asked. Converts gpt's string output to + * usable code * @param gptOutput */ - processGptOutput = (gptOutput: string) => { + @action + processGptOutput = undoable((gptOutput: string, questionType: string, tag?: string) => { // Split the string into individual list items const listItems = gptOutput.split('======').filter(item => item.trim() !== ''); + + if (questionType === '2' || questionType === '4') { + this.childDocs.forEach(d => { + d['chatFilter'] = false; + }); + } + + if (questionType === '6') { + this.Document.cardSort = 'chat'; + } + listItems.forEach((item, index) => { - // Split the item by '~~~~~~' to get all descriptors - const parts = item.split('~~~~~~').map(part => part.trim()); - - parts.forEach(part => { - // Find the corresponding Doc in the textToDoc map - const doc = this._textToDoc.get(part); - if (doc) { - doc.chat = index; + const normalizedItem = item.trim(); + // find the corresponding Doc in the textToDoc map + const doc = this._textToDoc.get(normalizedItem); + + if (doc) { + switch (questionType) { + case '6': + doc.chatIndex = index; + break; + case '1': { + const allHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); + + let myTag = ''; + + if (tag) { + for (let i = 0; i < allHotKeys.length; i++) { + if (tag.includes(allHotKeys[i])) { + myTag = StrCast(Doc.UserDoc()[allHotKeys[i]]); + break; + } else if (tag.includes(StrCast(Doc.UserDoc()[allHotKeys[i]]))) { + myTag = StrCast(Doc.UserDoc()[allHotKeys[i]]); + break; + } + } + + if (myTag != '') { + doc[myTag] = true; + } + } + break; + } + case '2': + case '4': + doc['chatFilter'] = true; + Doc.setDocFilter(DocCast(this.Document.embedContainer), 'chatFilter', true, 'match'); + break; } - }); + } else { + console.warn(`No matching document found for item: ${normalizedItem}`); + } }); - }; + }, ''); + /** * Opens up the chat popup and starts the process for smart sorting. */ openChatPopup = async () => { GPTPopup.Instance.setVisible(true); - GPTPopup.Instance.setMode(GPTPopupMode.SORT); - const sortDesc = await this.childPairStringList(); // Await the promise to get the string result + GPTPopup.Instance.setMode(GPTPopupMode.CARD); GPTPopup.Instance.setCardsDoneLoading(true); // Set dataDoneLoading to true after data is loaded - GPTPopup.Instance.setSortDesc(sortDesc.join()); - GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult); + await this.childPairStringListAndUpdateSortDesc(); }; /** - * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups - * @param childPairIndex - * @param doc - * @returns - */ - renderButtons = (doc: Doc, cardSort: cardSortings) => { - if (cardSort !== cardSortings.Custom) return ''; - const amButtons = Math.max(4, this.childDocs?.reduce((set, d) => this.cardSort_customField && set.add(NumCast(d[this.cardSort_customField])), new Set<number>()).size ?? 0); - const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc); - const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6; - return ( - <div className="card-button-container" style={{ width: `${totalWidth}px` }}> - {numberRange(amButtons).map(i => ( - <button - key={i} - type="button" - style={{ backgroundColor: activeButtonIndex === i ? '#4476f7' : '#323232' }} // - onClick={() => this.toggleButton(i, doc)} - /> - ))} - </div> - ); - }; - /** * Actually renders all the cards */ - renderCards = () => { + @computed get renderCards() { + const sortedDocs = this.sortedDocs; const anySelected = this.childDocs.some(doc => DocumentView.SelectedDocs().includes(doc)); + const isEmpty = this.childDocsWithoutLinks.length === 0; + + if (isEmpty) { + return ( + <span className="no-card-span" style={{ width: ` ${this._props.PanelWidth()}px`, height: ` ${this._props.PanelHeight()}px` }}> + Sorry ! There are no cards in this group + </span> + ); + } + // Map sorted documents to their rendered components - return this.sortedDocs.map((doc, index) => { - const realIndex = this.sortedDocs.filter(sortDoc => !DocumentView.SelectedDocs().includes(sortDoc)).indexOf(doc); + return sortedDocs.map((doc, index) => { + const realIndex = sortedDocs.indexOf(doc); const calcRowIndex = this.overflowIndexCalc(realIndex); const amCards = this.overflowAmCardsCalc(realIndex); const isSelected = DocumentView.SelectedDocs().includes(doc); @@ -459,6 +607,12 @@ export class CollectionCardView extends CollectionSubView() { .scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0); // prettier-ignore }; + const translateIfSelected = () => { + const indexInRow = index % this._maxRowCount; + const rowIndex = Math.trunc(index / this._maxRowCount); + const rowCenterIndex = Math.min(this._maxRowCount, sortedDocs.length - rowIndex * this._maxRowCount) / 2; + return (rowCenterIndex - indexInRow) * 100 - 50; + }; return ( <div key={doc[Id]} @@ -471,29 +625,34 @@ export class CollectionCardView extends CollectionSubView() { SnappingManager.SetIsResizing(undefined); this._forceChildXf = !this._forceChildXf; }), - 700 + 900 ); }} style={{ width: this.panelWidth(), - height: 'max-content', // this.panelHeight(childPair.layout)(), + height: 'max-content', transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px) - translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px) + translateX(calc(${(isSelected ? translateIfSelected() : 0) + '% + ' + this.translateOverflowX(realIndex, amCards) + 'px'})) rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg) - scale(${isSelected ? 1.25 : 1})`, + scale(${isSelected ? 2 : this._hoveredNodeIndex === index ? 1.05 : 1})`, }} onMouseEnter={() => this.setHoveredNodeIndex(index)}> {this.displayDoc(doc, childScreenToLocal)} - {this.renderButtons(doc, this.cardSort)} </div> ); }); - }; + } + render() { + const isEmpty = this.childDocsWithoutLinks.length === 0; + const transformValue = `scale(${1 / this.fitContentScale})`; + const heightValue = `${100 * this.fitContentScale}%`; + return ( <div + onPointerMove={e => this.onPointerMove(e)} className="collectionCardView-outer" - ref={this.createDashEventsTarget} + ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} style={{ background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string, color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string, @@ -501,11 +660,12 @@ export class CollectionCardView extends CollectionSubView() { <div className="card-wrapper" style={{ - transform: ` scale(${1 / this.fitContentScale}) translateX(${this.translateWrapperX}px)`, - height: `${100 * this.fitContentScale}%`, + ...(!isEmpty && { transform: transformValue }), + ...(!isEmpty && { height: heightValue }), + gridAutoRows: `${100 / this.numRows}%`, }} onMouseLeave={() => this.setHoveredNodeIndex(-1)}> - {this.renderCards()} + {this.renderCards} </div> </div> ); diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 5d71177c3..ad868fd1e 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -29,7 +29,7 @@ enum practiceVal { export class CollectionCarouselView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore - get starField() { return this.fieldKey + "_star"; } // prettier-ignore + get starField() { return "star"; } // prettier-ignore _fadeTimer: NodeJS.Timeout | undefined; _resetter: IReactionDisposer | undefined; diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 934ed6c3e..2047d658f 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -2,14 +2,13 @@ import { Colors } from 'browndash-components'; import { action, runInAction } from 'mobx'; import { aggregateBounds } from '../../../Utils'; -import { Doc, DocListCast, FieldType, NumListCast, Opt } from '../../../fields/Doc'; +import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; import { InkTool } from '../../../fields/InkField'; -import { List } from '../../../fields/List'; import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; import { Gestures } from '../../../pen-gestures/GestureTypes'; -import { DocumentType } from '../../documents/DocumentTypes'; +import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; import { LinkManager } from '../../util/LinkManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { UndoManager, undoable } from '../../util/UndoManager'; @@ -36,9 +35,12 @@ import { ImageBox } from '../nodes/ImageBox'; import { VideoBox } from '../nodes/VideoBox'; import { WebBox } from '../nodes/WebBox'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; - // import { InkTranscription } from '../InkTranscription'; - +import { Docs } from '../../documents/Documents'; +import { SnappingManager } from '../../util/SnappingManager'; +import { MainView } from '../MainView'; +import { PropertiesView } from '../PropertiesView'; +import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup'; // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function IsNoneSelected() { return DocumentView.Selected().length <= 0; @@ -135,20 +137,25 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function showFreeform(attr: 'hcenter' | 'vcenter' | 'grid' | 'snaplines' | 'clusters' | 'viewAll' | 'fitOnce', checkResult?: boolean, persist?: boolean) { const selected = DocumentView.SelectedDocs().lastElement(); + + function isAttrFiltered(attribute: string) { + return StrListCast(selected._childFilters).some(filter => filter.includes(attribute)); + } + // prettier-ignore - const map: Map<'flashcards' | 'hcenter' | 'vcenter' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'like' | 'star' | 'idea' | 'chat' | '1' | '2' | '3' | '4', + const map: Map<'flashcards' | 'hcenter' | 'vcenter' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'chat' | 'up' | 'down' | 'pile' | 'toggle-chat' | 'tag', { waitForRender?: boolean; checkResult: (doc: Doc) => boolean; setDoc: (doc: Doc, dv: DocumentView) => void; }> = new Map([ ['grid', { - checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false), - setDoc: (doc:Doc) => { doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid; }, + checkResult: (doc: Doc) => BoolCast(doc?._freeform_backgroundGrid, false), + setDoc: (doc: Doc) => { doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid; }, }], ['snaplines', { - checkResult: (doc:Doc) => BoolCast(doc?._freeform_snapLines, false), - setDoc: (doc:Doc) => { doc._freeform_snapLines = !doc._freeform_snapLines; }, + checkResult: (doc: Doc) => BoolCast(doc?._freeform_snapLines, false), + setDoc: (doc: Doc) => { doc._freeform_snapLines = !doc._freeform_snapLines; }, }], ['viewAll', { checkResult: (doc: Doc) => BoolCast(doc?._freeform_fitContentsToBox, false), @@ -168,120 +175,126 @@ ScriptingGlobals.add(function showFreeform(attr: 'hcenter' | 'vcenter' | 'grid' }], ['clusters', { waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire - checkResult: (doc:Doc) => BoolCast(doc?._freeform_useClusters, false), - setDoc: (doc:Doc) => { doc._freeform_useClusters = !doc._freeform_useClusters; }, + checkResult: (doc: Doc) => BoolCast(doc?._freeform_useClusters, false), + setDoc: (doc: Doc) => { doc._freeform_useClusters = !doc._freeform_useClusters; }, }], ['flashcards', { checkResult: (doc: Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false), - setDoc: (doc: Doc, dv: DocumentView) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards, + setDoc: (doc: Doc, dv: DocumentView) => { Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards}, // prettier-ignore }], ['time', { checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "time", - setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "time", + setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort === "time" ? doc.cardSort = '' : doc.cardSort = 'time'}, // prettier-ignore }], ['docType', { checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "type", - setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "type", + setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort === "type" ? doc.cardSort = '' : doc.cardSort = 'type'}, // prettier-ignore }], ['color', { checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "color", - setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "color", + setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort === "color" ? doc.cardSort = '' : doc.cardSort = 'color'}, // prettier-ignore }], - ['links', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "links", - setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "links", + ['tag', { + checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "tag", + setDoc: (doc: Doc, dv: DocumentView) => { doc.cardSort === "tag" ? doc.cardSort = '' : doc.cardSort = 'tag'}, // prettier-ignore }], - ['like', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "like", + ['up', { + checkResult: (doc: Doc) => BoolCast(!doc?.cardSort_isDesc), setDoc: (doc: Doc, dv: DocumentView) => { - doc.cardSort = "custom"; - doc.cardSort_customField = "like"; - doc.cardSort_visibleSortGroups = new List<number>(); - } + doc.cardSort_isDesc = false; + }, }], - ['star', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "star", + ['down', { + checkResult: (doc: Doc) => BoolCast(doc?.cardSort_isDesc), setDoc: (doc: Doc, dv: DocumentView) => { - doc.cardSort = "custom"; - doc.cardSort_customField = "star"; - doc.cardSort_visibleSortGroups = new List<number>(); - } + doc.cardSort_isDesc = true; + }, }], - ['idea', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "idea", + ['toggle-chat', { + checkResult: (doc: Doc) => GPTPopup.Instance.visible, setDoc: (doc: Doc, dv: DocumentView) => { - doc.cardSort = "custom"; - doc.cardSort_customField = "idea"; - doc.cardSort_visibleSortGroups = new List<number>(); - } + if (GPTPopup.Instance.visible){ + doc.cardSort = '' + GPTPopup.Instance.setVisible(false); + + } else { + GPTPopup.Instance.setVisible(true); + GPTPopup.Instance.setMode(GPTPopupMode.CARD); + GPTPopup.Instance.setCardsDoneLoading(true); + + } + + + }, }], - ['chat', { - checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "chat", + ['pile', { + checkResult: (doc: Doc) => doc._type_collection == CollectionViewType.Freeform, setDoc: (doc: Doc, dv: DocumentView) => { - doc.cardSort = "custom"; - doc.cardSort_customField = "chat"; - doc.cardSort_visibleSortGroups = new List<number>(); + doc._type_collection = CollectionViewType.Freeform; + const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), { + _width: 250, + _height: 200, + _layout_fitWidth: false, + _layout_autoHeight: true, + }); + + + const iconMap: { [key: number]: string } = { + 0: 'star', + 1: 'heart', + 2: 'cloud', + 3: 'bolt' + }; + + for (let i=0; i<4; i++){ + if (isAttrFiltered(iconMap[i])){ + newCol[iconMap[i]] = true + } + } + + newCol && dv.ComponentView?.addDocument?.(newCol); + DocumentView.showDocument(newCol, { willZoomCentered: true }) + }, }], ]); - for (let i = 0; i < 8; i++) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - map.set((i + 1 + '') as any, { - checkResult: (doc: Doc) => NumListCast(doc?.cardSort_visibleSortGroups).includes(i), - setDoc: (doc: Doc, dv: DocumentView) => { - const list = NumListCast(doc.cardSort_visibleSortGroups); - doc.cardSort_visibleSortGroups = new List<number>(list.includes(i) ? list.filter(d => d !== i) : [...list, i]); - }, - }); - } if (checkResult) { return map.get(attr)?.checkResult(selected); } + const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} }; DocumentView.Selected().map(dv => map.get(attr)?.setDoc(dv.layoutDoc, dv)); setTimeout(() => batch.end(), 100); return undefined; }); -ScriptingGlobals.add(function cardHasLabel(label: string) { +/** + * Applies a filter to the selected document (or, if the settins button is pressed, opens the filter panel) + */ +// eslint-disable-next-line prefer-arrow-callback +ScriptingGlobals.add(function handleTags(value: string, checkResult?: boolean) { const selected = DocumentView.SelectedDocs().lastElement(); - const labelNum = Number(label) - 1; - return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.cardSort_customField)] == labelNum)); -}, ''); -// ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) { -// // const editorView = RichTextMenu.Instance?.TextView?.EditorView; -// const selected = SelectionManager.Docs.lastElement(); -// // prettier-ignore -// const map: Map<'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([ -// ['time', { -// checkResult: (doc:Doc) => StrCast(doc?.cardSort), -// setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time", -// }], -// ['docType', { -// checkResult: (doc:Doc) => StrCast(doc?.cardSort), -// setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type", -// }], -// ['color', { -// checkResult: (doc:Doc) => StrCast(doc?.cardSort), -// setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color", -// }], -// // ['custom', { -// // checkResult: () => RichTextMenu.Instance.textAlign, -// // setDoc: () => value && editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, value):(Doc.UserDoc().textAlign = value), -// // }] -// // , -// ]); - -// if (checkResult) { -// return map.get(attr)?.checkResult(selected); -// } - -// console.log('hey') -// SelectionManager.Views.map(dv => map.get(attr)?.setDoc(dv.layoutDoc, dv)); -// console.log('success') -// }); + function isAttrFiltered(attr: string) { + return StrListCast(selected._childFilters).some(filter => filter.includes(attr)); + } + + if (checkResult) { + return value === 'opts' ? PropertiesView.Instance?.openFilters : isAttrFiltered(value); + } + + if (value != 'opts') { + isAttrFiltered(value) ? Doc.setDocFilter(selected, value, true, 'remove') : Doc.setDocFilter(selected, value, true, 'match'); + } else { + SnappingManager.PropertiesWidth < 5 && SnappingManager.SetPropertiesWidth(0); + SnappingManager.SetPropertiesWidth(MainView.Instance.propertiesWidth() < 15 ? 250 : 0); + PropertiesView.Instance?.CloseAll(); + PropertiesView.Instance.openFilters = true; + } + + return undefined; +}, ''); // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: string | number, checkResult?: boolean) { @@ -316,6 +329,7 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh ]); if (checkResult) { + // console.log(map.get(attr)?.checkResult() + "font check result") return map.get(attr)?.checkResult(); } map.get(attr)?.setDoc?.(); @@ -476,6 +490,7 @@ function setActiveTool(tool: InkTool | Gestures, keepPrim: boolean, checkResult? ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); +// eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function activeEraserTool() { return StrCast(Doc.UserDoc().activeEraserTool, InkTool.StrokeEraser); }, 'returns the current eraser tool'); diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 7a09ad9e2..f53a7d163 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -192,7 +192,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() { } else { text = script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result as string; // text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); - getStyle = (val: string) => ({ fontFamily: val }); + if (this.Document.title === 'Font') getStyle = (val: string) => ({ fontFamily: val }); // bcz: major hack to style the font dropdown items --- needs to become part of the dropdown's metadata } // Get items to place into the list diff --git a/src/client/views/nodes/IconTagBox.scss b/src/client/views/nodes/IconTagBox.scss new file mode 100644 index 000000000..211a961c1 --- /dev/null +++ b/src/client/views/nodes/IconTagBox.scss @@ -0,0 +1,24 @@ +@import '../global/globalCssVariables.module.scss'; + +.card-button-container { + display: flex; + padding: 3px; + position: absolute; + pointer-events: none; + background-color: rgb(218, 218, 218); + border-radius: 50px; + transform: translateY(25px); + align-items: center; + justify-content: start; + + button { + pointer-events: auto; + transform: translateY(-7.5px); + width: 30px; + height: 30px; + border-radius: 50%; + background-color: $dark-gray; + margin: 5px; + background-color: transparent; + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx new file mode 100644 index 000000000..f86372ec0 --- /dev/null +++ b/src/client/views/nodes/IconTagBox.tsx @@ -0,0 +1,121 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Tooltip } from '@mui/material'; +import { computed } from 'mobx'; +import { observer } from 'mobx-react'; +import React from 'react'; +import { numberRange } from '../../../Utils'; +import { Doc, StrListCast } from '../../../fields/Doc'; +import { DocData } from '../../../fields/DocSymbols'; +import { BoolCast, DocCast, NumCast, StrCast } from '../../../fields/Types'; +import { CollectionViewType } from '../../documents/DocumentTypes'; +import { SnappingManager } from '../../util/SnappingManager'; +import { undoable } from '../../util/UndoManager'; +import { MainView } from '../MainView'; +import { ObservableReactComponent } from '../ObservableReactComponent'; +import { PropertiesView } from '../PropertiesView'; +import './IconTagBox.scss'; + +export interface IconTagProps { + doc: Doc; +} + +/** + * Renders the icon tags that rest under the document. The icons rendered are determined by the values of + * each icon in the userdoc. + */ +@observer +export class IconTagBox extends ObservableReactComponent<IconTagProps> { + @computed + get currentScale() { + return NumCast((this._props.doc.embedContainer as Doc)?._freeform_scale, 1); + } + + constructor(props: IconTagProps) { + super(props); + } + + componentDidUpdate(): void { + this._props.doc[DocData].tagHeight = 36 * this.currentScale; + } + + /** + * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups + * @param doc + * @param cardSort + * @returns + */ + renderButtons = (doc: Doc): JSX.Element | null => { + const amButtons = StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length + 1; + + const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles); + + const totalWidth = (amButtons - 1) * 35 + (amButtons - 1) * 2 * 5 + 6; + + const iconMap = (buttonID: number) => { + return StrCast(Doc.UserDoc()[keys[buttonID]]) as IconProp; + }; + + const isCard = DocCast(this._props.doc.embedContainer).type_collection === CollectionViewType.Card; + + return ( + <div + className="card-button-container" + style={{ + transformOrigin: 'top left', + transform: `scale(${isCard ? 2 : 0.6 / this.currentScale}) + translateY(${doc[DocData].showLabels ? NumCast(doc[DocData].keywordHeight) * (1 - this.currentScale) : 0}px) + `, + width: `${totalWidth}px`, + fontSize: '50px', + }}> + {numberRange(amButtons - 1).map(i => ( + <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from the {iconMap(i).toString()} group</div>}> + <button key={i} type="button" onClick={() => this.toggleButton(doc, iconMap(i))}> + {this.getButtonIcon(doc, iconMap(i))} + </button> + </Tooltip> + ))} + </div> + ); + }; + + /** + * Opens the filter panel in the properties menu + */ + + openHotKeyMenu = () => { + SnappingManager.PropertiesWidth < 5 && SnappingManager.SetPropertiesWidth(0); + SnappingManager.SetPropertiesWidth(MainView.Instance.propertiesWidth() < 15 ? 250 : 0); + + PropertiesView.Instance.CloseAll(); + PropertiesView.Instance.openFilters = true; + }; + + /** + * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt + * @param childPairIndex + * @param buttonID + * @param doc + */ + toggleButton = undoable((doc: Doc, icon: string) => { + BoolCast(doc[icon]) ? (doc[icon] = false) : (doc[icon] = true); + }, 'toggle card tag'); + + /** + * Determines whether or not the given icon is active depending on the doc's data + * @param doc + * @param icon + * @returns + */ + getButtonIcon = (doc: Doc, icon: IconProp): JSX.Element => { + const isActive = doc[icon.toString()]; + const color = isActive ? '#4476f7' : '#323232'; + + return <FontAwesomeIcon icon={icon} style={{ color, height: '30px', width: '30px' }} />; + }; + + render() { + return <>{this.renderButtons(this._props.doc)}</>; + } +} diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss index 6d8793f82..0247dc10c 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.scss +++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss @@ -7,10 +7,13 @@ $highlightedText: #82e0ff; .summary-box { position: fixed; - bottom: 10px; - right: 10px; + top: 115px; + left: 75px; width: 250px; + height: 200px; min-height: 200px; + min-width: 180px; + border-radius: 16px; padding: 16px; padding-bottom: 0; @@ -21,6 +24,18 @@ $highlightedText: #82e0ff; background-color: #ffffff; box-shadow: 0 2px 5px #7474748d; color: $textgrey; + resize: both; /* Allows resizing */ + overflow: auto; + + .resize-handle { + width: 10px; + height: 10px; + background: #ccc; + position: absolute; + right: 0; + bottom: 0; + cursor: se-resize; + } .summary-heading { display: flex; @@ -51,25 +66,76 @@ $highlightedText: #82e0ff; .content-wrapper { padding-top: 10px; min-height: 50px; - max-height: 150px; + // max-height: 150px; overflow-y: auto; + height: 100% } .btns-wrapper-gpt { - height: 50px; + height: 100%; display: flex; justify-content: center; align-items: center; - transform: translateY(30px); + flex-direction: column; + + .inputWrapper{ + display: flex; + justify-content: center; + align-items: center; + height: 60px; + position: absolute; + bottom: 0; + width: 100%; + background-color: white; + + } .searchBox-input{ - transform: translateY(-15px); - height: 50px; + height: 40px; border-radius: 10px; + position: absolute; + bottom: 10px; border-color: #5b97ff; + width: 90% } + .chat-wrapper { + display: flex; + flex-direction: column; + width: 100%; + max-height: calc(100vh - 80px); + overflow-y: auto; + padding-bottom: 60px; + } + + .chat-bubbles { + margin-top: 20px; + display: flex; + flex-direction: column; + flex-grow: 1; + } + + .chat-bubble { + padding: 10px; + margin-bottom: 10px; + border-radius: 10px; + max-width: 60%; + } + + .user-message { + background-color: #283d53; + align-self: flex-end; + color: whitesmoke; + } + + .chat-message { + background-color: #367ae7; + align-self: flex-start; + color:whitesmoke; + } + + .summarizing { @@ -78,16 +144,14 @@ $highlightedText: #82e0ff; } - } - button { - font-size: 9px; - padding: 10px; - color: #ffffff; - background-color: $button; - border-radius: 5px; + + + } + + .text-btn { &:hover { background-color: $button; diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx index a37e73e27..ed3f99377 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx +++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx @@ -3,7 +3,7 @@ import { Button, IconButton, Type } from 'browndash-components'; import { action, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { CgClose } from 'react-icons/cg'; +import { CgClose, CgCornerUpLeft } from 'react-icons/cg'; import ReactLoading from 'react-loading'; import { TypeAnimation } from 'react-type-animation'; import { ClientUtils } from '../../../../ClientUtils'; @@ -11,13 +11,14 @@ import { Doc } from '../../../../fields/Doc'; import { NumCast, StrCast } from '../../../../fields/Types'; import { Networking } from '../../../Network'; import { GPTCallType, gptAPICall, gptImageCall } from '../../../apis/gpt/GPT'; -import { Docs } from '../../../documents/Documents'; import { DocUtils } from '../../../documents/DocUtils'; +import { Docs } from '../../../documents/Documents'; +import { SettingsManager } from '../../../util/SettingsManager'; +import { SnappingManager } from '../../../util/SnappingManager'; import { ObservableReactComponent } from '../../ObservableReactComponent'; +import { DocumentView } from '../../nodes/DocumentView'; import { AnchorMenu } from '../AnchorMenu'; import './GPTPopup.scss'; -import { SettingsManager } from '../../../util/SettingsManager'; -import { SnappingManager } from '../../../util/SnappingManager'; export enum GPTPopupMode { SUMMARY, @@ -25,7 +26,15 @@ export enum GPTPopupMode { IMAGE, FLASHCARD, DATA, + CARD, SORT, + QUIZ, +} + +export enum GPTQuizType { + CURRENT = 0, + CHOOSE = 1, + MULTIPLE = 2, } interface GPTPopupProps {} @@ -34,6 +43,8 @@ interface GPTPopupProps {} export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { // eslint-disable-next-line no-use-before-define static Instance: GPTPopup; + private messagesEndRef: React.RefObject<HTMLDivElement>; + @observable private chatMode: boolean = false; private correlatedColumns: string[] = []; @@ -140,7 +151,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { this.sortDesc = t; }; - @observable onSortComplete?: (sortResult: string) => void; + @observable onSortComplete?: (sortResult: string, questionType: string, tag?: string) => void; + @observable onQuizRandom?: () => void; @observable cardsDoneLoading = false; @action setCardsDoneLoading(done: boolean) { @@ -148,22 +160,157 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { this.cardsDoneLoading = done; } + @observable sortRespText: string = ''; + + @action setSortRespText(resp: string) { + this.sortRespText = resp; + } + + @observable chatSortPrompt: string = ''; + + sortPromptChanged = action((e: React.ChangeEvent<HTMLInputElement>) => { + this.chatSortPrompt = e.target.value; + }); + + @observable quizAnswer: string = ''; + + quizAnswerChanged = action((e: React.ChangeEvent<HTMLInputElement>) => { + this.quizAnswer = e.target.value; + }); + + @observable conversationArray: string[] = ['Hi! In this pop up, you can ask ChatGPT questions about your documents and filter / sort them. ']; + + /** + * When the cards are in quiz mode in the card view, allows gpt to determine whether the user's answer was correct + * @returns + */ + generateQuiz = async () => { + this.setLoading(true); + this.setSortDone(false); + + const quizType = this.quizMode; + + const selected = DocumentView.SelectedDocs().lastElement(); + + const questionText = 'Question: ' + StrCast(selected['gptInputText']); + + if (StrCast(selected['gptRubric']) === '') { + const rubricText = 'Rubric: ' + (await this.generateRubric(StrCast(selected['gptInputText']), selected)); + } + + const rubricText = 'Rubric: ' + StrCast(selected['gptRubric']); + const queryText = questionText + ' UserAnswer: ' + this.quizAnswer + '. ' + 'Rubric' + rubricText; + + try { + const res = await gptAPICall(queryText, GPTCallType.QUIZ); + if (!res) { + console.error('GPT call failed'); + return; + } + console.log(res); + this.setQuizResp(res); + this.conversationArray.push(res); + + this.setLoading(false); + this.setSortDone(true); + } catch (err) { + console.error('GPT call failed'); + } + + if (this.onQuizRandom) { + this.onQuizRandom(); + } + }; + + /** + * Generates a rubric by which to compare the user's answer to + * @param inputText user's answer + * @param doc the doc the user is providing info about + * @returns gpt's response + */ + generateRubric = async (inputText: string, doc: Doc) => { + try { + const res = await gptAPICall(inputText, GPTCallType.RUBRIC); + doc['gptRubric'] = res; + return res; + } catch (err) { + console.error('GPT call failed'); + } + }; + + @observable private regenerateCallback: (() => Promise<void>) | null = null; + + /** + * Callback function that causes the card view to update the childpair string list + * @param callback + */ + @action public setRegenerateCallback(callback: () => Promise<void>) { + this.regenerateCallback = callback; + } + public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false; public createFilteredDoc: (axes?: string[]) => boolean = () => false; public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; + @observable quizRespText: string = ''; + + @action setQuizResp(resp: string) { + this.quizRespText = resp; + } + /** - * Sorts cards in the CollectionCardDeckView + * Generates a response to the user's question depending on the type of their question */ - generateSort = async () => { + generateCard = async () => { + console.log(this.chatSortPrompt + 'USER PROMPT'); this.setLoading(true); this.setSortDone(false); + if (this.regenerateCallback) { + await this.regenerateCallback(); + } + try { - const res = await gptAPICall(this.sortDesc, GPTCallType.SORT); + // const res = await gptAPICall(this.sortDesc, GPTCallType.SORT, this.chatSortPrompt); + const questionType = await gptAPICall(this.chatSortPrompt, GPTCallType.TYPE); + const questionNumber = questionType.split(' ')[0]; + console.log(questionType); + let res = ''; + + switch (questionNumber) { + case '1': + case '2': + case '4': + res = await gptAPICall(this.sortDesc, GPTCallType.SUBSET, this.chatSortPrompt); + break; + case '6': + res = await gptAPICall(this.sortDesc, GPTCallType.SORT, this.chatSortPrompt); + break; + default: + const selected = DocumentView.SelectedDocs().lastElement(); + const questionText = StrCast(selected!['gptInputText']); + + res = await gptAPICall(questionText, GPTCallType.INFO, this.chatSortPrompt); + break; + } + // Trigger the callback with the result if (this.onSortComplete) { - this.onSortComplete(res || 'Something went wrong :('); + this.onSortComplete(res || 'Something went wrong :(', questionNumber, questionType.split(' ').slice(1).join(' ')); + + let explanation = res; + + if (questionType != '5' && questionType != '3') { + // Extract explanation surrounded by ------ at the top or both at the top and bottom + const explanationMatch = res.match(/------\s*([\s\S]*?)\s*(?:------|$)/) || []; + explanation = explanationMatch[1] ? explanationMatch[1].trim() : 'No explanation found'; + } + + // Set the extracted explanation to sortRespText + this.setSortRespText(explanation); + this.conversationArray.push(this.sortRespText); + this.scrollToBottom(); + console.log(res); } } catch (err) { @@ -305,67 +452,143 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { super(props); makeObservable(this); GPTPopup.Instance = this; + this.messagesEndRef = React.createRef(); } + scrollToBottom = () => { + setTimeout(() => { + // Code to execute after 1 second (1000 ms) + if (this.messagesEndRef.current) { + this.messagesEndRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' }); + } + }, 50); + }; + componentDidUpdate = () => { if (this.loading) { this.setDone(false); } }; + @observable quizMode: GPTQuizType = GPTQuizType.CURRENT; + @action setQuizMode(g: GPTQuizType) { + this.quizMode = g; + } + + cardMenu = () => ( + <div className="btns-wrapper-gpt"> + <Button + tooltip="Have ChatGPT sort, tag, define, or filter your cards for you!" + text="Modify/Sort Cards!" + onClick={() => this.setMode(GPTPopupMode.SORT)} + color={StrCast(Doc.UserDoc().userVariantColor)} + type={Type.TERT} + style={{ + width: '100%', + height: '40%', + textAlign: 'center', + color: '#ffffff', + fontSize: '16px', + marginBottom: '10px', + }} + /> + <Button + tooltip="Test your knowledge with ChatGPT!" + text="Quiz Cards!" + onClick={() => { + this.conversationArray = ['Define the selected card!']; + this.setMode(GPTPopupMode.QUIZ); + if (this.onQuizRandom) { + this.onQuizRandom(); + } + }} + color={StrCast(Doc.UserDoc().userVariantColor)} + type={Type.TERT} + style={{ + width: '100%', + textAlign: 'center', + color: '#ffffff', + fontSize: '16px', + height: '40%', + }} + /> + </div> + ); + + handleKeyPress = async (e: React.KeyboardEvent, isSort: boolean) => { + if (e.key === 'Enter') { + e.stopPropagation(); + + if (isSort) { + this.conversationArray.push(this.chatSortPrompt); + await this.generateCard(); + this.chatSortPrompt = ''; + } else { + this.conversationArray.push(this.quizAnswer); + await this.generateQuiz(); + this.quizAnswer = ''; + } + + this.scrollToBottom(); + } + }; + + cardActual = (opt: GPTPopupMode) => { + const isSort = opt === GPTPopupMode.SORT; + return ( + <div className="btns-wrapper-gpt"> + <div className="chat-wrapper"> + <div className="chat-bubbles"> + {this.conversationArray.map((message, index) => ( + <div key={index} className={`chat-bubble ${index % 2 === 1 ? 'user-message' : 'chat-message'}`}> + {message} + </div> + ))} + {(!this.cardsDoneLoading || this.loading) && <div className={`chat-bubble chat-message`}>...</div>} + </div> + + <div ref={this.messagesEndRef} style={{ height: '100px' }} /> + </div> + + <div className="inputWrapper"> + <input + className="searchBox-input" + defaultValue="" + value={isSort ? this.chatSortPrompt : this.quizAnswer} // Controlled input + autoComplete="off" + onChange={isSort ? this.sortPromptChanged : this.quizAnswerChanged} + onKeyDown={e => { + this.handleKeyPress(e, isSort); + }} + type="text" + placeholder={`${isSort ? 'Have ChatGPT sort, tag, define, or filter your cards for you!' : 'Define the selected card!'}`} + /> + </div> + </div> + ); + }; + sortBox = () => ( - <> - <div> - {this.heading('SORTING')} - {this.loading ? ( + <div style={{ height: '80%' }}> + {this.heading(this.mode === GPTPopupMode.SORT ? 'SORTING' : 'QUIZ')} + <> + {!this.cardsDoneLoading ? ( <div className="content-wrapper"> <div className="loading-spinner"> <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> - <span>Loading...</span> + {this.loading ? <span>Loading...</span> : <span>Reading Cards...</span>} </div> </div> + ) : this.mode === GPTPopupMode.CARD ? ( + this.cardMenu() ) : ( - <> - {!this.cardsDoneLoading ? ( - <div className="content-wrapper"> - <div className="loading-spinner"> - <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} /> - <span>Reading Cards...</span> - </div> - </div> - ) : ( - !this.sortDone && ( - <div className="btns-wrapper-gpt"> - <Button - tooltip="Have ChatGPT sort your cards for you!" - text="Sort!" - onClick={this.generateSort} - color={StrCast(Doc.UserDoc().userVariantColor)} - type={Type.TERT} - style={{ - width: '90%', // Almost as wide as the container - textAlign: 'center', - color: '#ffffff', // White text - fontSize: '16px', // Adjust font size as needed - }} - /> - </div> - ) - )} - - {this.sortDone && ( - <div> - <div className="content-wrapper"> - <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : 'Sorting done! Feel free to move things around / regenerate :) !'}</p> - <IconButton tooltip="Generate Again" onClick={() => this.setSortDone(false)} icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} color={StrCast(Doc.UserDoc().userVariantColor)} /> - </div> - </div> - )} - </> - )} - </div> - </> + this.cardActual(this.mode) + ) // Call the functions to render JSX + } + </> + </div> ); + imageBox = () => ( <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> {this.heading('GENERATED IMAGE')} @@ -511,14 +734,52 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> { heading = (headingText: string) => ( <div className="summary-heading"> <label className="summary-text">{headingText}</label> - {this.loading ? <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> : <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={() => this.setVisible(false)} />} + {this.loading ? ( + <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> + ) : ( + <> + {(this.mode === GPTPopupMode.SORT || this.mode === GPTPopupMode.QUIZ) && ( + <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="back" icon={<CgCornerUpLeft size="16px" />} onClick={() => (this.mode = GPTPopupMode.CARD)} style={{ right: '50px', position: 'absolute' }} /> + )} + <IconButton + color={StrCast(SettingsManager.userVariantColor)} + tooltip="close" + icon={<CgClose size="16px" />} + onClick={() => { + this.setVisible(false); + }} + /> + </> + )} </div> ); render() { + let content; + + switch (this.mode) { + case GPTPopupMode.SUMMARY: + content = this.summaryBox(); + break; + case GPTPopupMode.DATA: + content = this.dataAnalysisBox(); + break; + case GPTPopupMode.IMAGE: + content = this.imageBox(); + break; + case GPTPopupMode.SORT: + case GPTPopupMode.CARD: + case GPTPopupMode.QUIZ: + content = this.sortBox(); + break; + default: + content = null; + } + return ( <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}> - {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.DATA ? this.dataAnalysisBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : this.mode === GPTPopupMode.SORT ? this.sortBox() : null} + {content} + <div className="resize-handle" /> </div> ); } |