From 8a0ae4e42d217a222d6a127ec640d5f1113832a0 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Mon, 16 Oct 2023 17:08:24 -0400 Subject: text box --- src/client/views/PropertiesView.tsx | 2 +- src/client/views/nodes/trails/PresBox.scss | 24 +++++++++ src/client/views/nodes/trails/PresBox.tsx | 63 ++++++++++++++++++++++-- src/client/views/nodes/trails/PresElementBox.tsx | 35 +++++++++++++ src/client/views/pdf/GPTPopup/GPTPopup.scss | 4 +- 5 files changed, 122 insertions(+), 6 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index cb45ece42..984906ed0 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1266,7 +1266,7 @@ export class PropertiesView extends React.Component { Doc.GetProto(LinkManager.currentLink).link_description = value; if (LinkManager.currentLink.show_description === undefined) { - LinkManager.currentLink['show_description'] = !LinkManager.currentLink['show_description']; + LinkManager.currentLink.show_description = !LinkManager.currentLink.show_description; } } }); diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 0b51813a5..ac0d58368 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -15,6 +15,30 @@ //overflow: hidden; transition: 0.7s opacity ease; + .presBox-chatbox { + position: fixed; + bottom: 8px; + right: 8px; + width: 300px; + min-height: 100px; + border-radius: 16px; + padding: 16px; + gap: 8px; + z-index: 999; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #ffffff; + box-shadow: 0 2px 5px #7474748d; + + input { + resize: vertical; + // min-height: 125px; + border: none; + outline: none; + } + } + .presBox-listCont { position: relative; height: calc(100% - 67px); diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 383b400c8..ebf9c211c 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -37,7 +37,9 @@ import { FieldView, FieldViewProps } from '../FieldView'; import { ScriptingBox } from '../ScriptingBox'; import './PresBox.scss'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; -const { Howl } = require('howler'); +import { IconButton, Type } from 'browndash-components'; +import { AiOutlineSend } from 'react-icons/ai'; +import { gptTrailSlideCustomization } from '../../../apis/gpt/GPT'; export interface pinDataTypes { scrollable?: boolean; @@ -105,7 +107,24 @@ export class PresBox extends ViewBoxBaseComponent() { @observable _treeViewMap: Map = new Map(); @observable _presKeyEvents: boolean = false; @observable _forceKeyEvents: boolean = false; - @computed get isTreeOrStack() { + + // GPT + @observable chatActive: boolean = false; + @observable chatInput: string = ''; + public slideToModify: Doc | null = null; + + @action + setChatInput = (input: string) => { + this.chatInput = input; + }; + + @action + public setChatActive = (active: boolean) => { + this.chatActive = active; + }; + + @computed + get isTreeOrStack() { return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(StrCast(this.layoutDoc._type_collection) as any); } @computed get isTree() { @@ -241,6 +260,28 @@ export class PresBox extends ViewBoxBaseComponent() { } }; + @action + customizeWithGPT = async (input: string) => { + // const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect'; + if (!this.slideToModify) return; + + try { + const res = await gptTrailSlideCustomization(input); + if (typeof res === 'string') { + const resObj = JSON.parse(res); + console.log('Result ', resObj); + // this.activeItem + for (let key in resObj) { + if (resObj[key]) { + this.slideToModify[key] = resObj[key]; + } + } + } + } catch (err) { + console.error(err); + } + }; + //TODO: al: it seems currently that tempMedia doesn't stop onslidechange after clicking the button; the time the tempmedia stop depends on the start & end time // TODO: to handle child slides (entering into subtrail and exiting), also the next() and back() functions // No more frames in current doc and next slide is defined, therefore move to next slide @@ -2661,7 +2702,6 @@ export class PresBox extends ViewBoxBaseComponent() { /> ) : null} - {/* { // if the document type is a presentation, then the collection stacking view has a "+ new slide" button at the bottom of the stack {'Click on document to pin to presentaiton or make a marquee selection to pin your desired view'}}> @@ -2671,6 +2711,23 @@ export class PresBox extends ViewBoxBaseComponent() { } */} + {/* presbox chatbox */} + {this.chatActive && ( +
+ this.setChatInput(e.target.value)} /> +
+ } + onClick={() => { + this.customizeWithGPT(this.chatInput); + }} + /> +
+
+ )} ); } diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 82ed9e8d5..534a0f2aa 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -28,6 +28,7 @@ import React = require('react'); import { TreeView } from '../../collections/TreeView'; import { BranchingTrailManager } from '../../../util/BranchingTrailManager'; import { MultiToggle, Type } from 'browndash-components'; +import { gptTrailSlideCustomization } from '../../../apis/gpt/GPT'; /** * This class models the view a document added to presentation will have in the presentation. * It involves some functionality for its buttons and options. @@ -434,6 +435,27 @@ export class PresElementBox extends ViewBoxBaseComponent() { return width; } + // GPT + + @action + customizeWithGPT = async (input: string) => { + const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect'; + + try { + const res = await gptTrailSlideCustomization(testInput); + if (typeof res === 'string') { + const resObj = JSON.parse(res); + console.log('Result ', resObj); + + for (let key in resObj) { + this.rootDoc[key] = resObj[key]; + } + } + } catch (err) { + console.error(err); + } + }; + @computed get presButtons() { const presBox = this.presBox; const presBoxColor = StrCast(presBox?._backgroundColor); @@ -537,6 +559,19 @@ export class PresElementBox extends ViewBoxBaseComponent() { ); + items.push( + Customize}> +
{ + PresBox.Instance.setChatActive(true); + PresBox.Instance.slideToModify = this.rootDoc; + // this.customizeWithGPT(''); + }}> + e.stopPropagation()} /> +
+ + ); return items; } diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss index 5d966395c..48659d0e7 100644 --- a/src/client/views/pdf/GPTPopup/GPTPopup.scss +++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss @@ -11,8 +11,8 @@ $highlightedText: #82e0ff; right: 10px; width: 250px; min-height: 200px; - border-radius: 15px; - padding: 15px; + border-radius: 16px; + padding: 16px; padding-bottom: 0; z-index: 999; display: flex; -- cgit v1.2.3-70-g09d2