From f59e343553878029d846e5eae2963fc9c3481b13 Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Wed, 6 Dec 2023 22:06:16 -0500 Subject: types --- src/client/views/PropertiesView.scss | 6 ++ src/client/views/PropertiesView.tsx | 85 ++++++++++++++++------ .../collectionFreeForm/CollectionFreeFormView.tsx | 21 +----- src/client/views/nodes/trails/PresBox.tsx | 4 - 4 files changed, 72 insertions(+), 44 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index ffcad0e7e..874e2a366 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -16,6 +16,12 @@ background-color: #3b3c3e; } } +.styling-chatbox { + color: #000000; + width: 100%; + outline: none; + border: none; +} .propertiesView { height: 100%; width: 250; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 6c193f5a7..e48574857 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -39,9 +39,10 @@ import { PropertiesDocContextSelector } from './PropertiesDocContextSelector'; import { PropertiesSection } from './PropertiesSection'; import './PropertiesView.scss'; import { DefaultStyleProvider } from './StyleProvider'; -import { FaFillDrip } from 'react-icons/fa'; -import { GeneratedResponse, generatePalette } from '../apis/gpt/customization'; +import { FaFillDrip, FaRegHeart } from 'react-icons/fa'; +import { GeneratedResponse, StyleInput, generatePalette } from '../apis/gpt/customization'; import { ExtractColors } from './ExtractColors'; +import ReactTextareaAutosize from 'react-textarea-autosize'; const _global = (window /* browser */ || global) /* node */ as any; interface PropertiesViewProps { @@ -95,26 +96,50 @@ export class PropertiesView extends React.Component { @observable openStyling: boolean = true; // GPT styling - public styleInput: any; + public styleInput: StyleInput | undefined; + @observable loadingStyles: boolean = false; @observable generatedStyles: GeneratedResponse[] = []; @observable inputDocs: Doc[] = []; @observable selectedStyle: number = -1; @observable useImageData = false; + @observable chatInput: string = ''; + + @action + setChatInput = (input: string) => { + this.chatInput = input; + }; + + @action + setLoading = (loading: boolean) => { + this.loadingStyles = loading; + }; + @action gptStyling = async () => { - this.generatedStyles = []; + // this.generatedStyles = []; this.selectedStyle = -1; + this.setLoading(true); + console.log('Style input: ', this.styleInput); + + if (!this.styleInput) return; + try { - const res = await generatePalette(this.styleInput, this.useImageData); + let res: any; + if (this.generatedStyles.length === 0) { + res = await generatePalette(this.styleInput, this.useImageData, this.chatInput); + } else { + res = await generatePalette(this.styleInput, this.useImageData, this.chatInput, this.generatedStyles); + } if (typeof res === 'string') { - console.log(res); + console.log('Generated palettes: ', res); const resObj = JSON.parse(res) as GeneratedResponse[]; this.setGeneratedStyles(resObj); } } catch (err) { console.error(err); } + this.setLoading(false); }; @action @@ -1206,24 +1231,38 @@ export class PropertiesView extends React.Component { return ( (this.openStyling = bool)} onDoubleClick={() => this.CloseAll()}>
- {this.generatedStyles.length > 0 - ? this.generatedStyles.map((style, i) => ( -
this.styleCollection(i)}> -
- {ExtractColors.sortColors(style.documentsWithColors.map(doc => ExtractColors.hexToFinalColor(doc.color))).map(c => ( -
- ))} -
- )) - : 'Generating styles...'} -
+ {this.generatedStyles.length > 0 && + this.generatedStyles.map((style, i) => ( +
this.styleCollection(i)}> +
+ {ExtractColors.sortColors(style.documentsWithColors.map(doc => ExtractColors.hexToFinalColor(doc.color))).map(c => ( +
+ ))} + {/* {}}/> */} +
+ ))} + {this.loadingStyles && 'Generating styles...'} + { + this.setChatInput(e.target.value); + }} + onKeyDown={e => { + e.stopPropagation(); + }} + /> +
- - (this.useImageData = e.target.checked))} /> + + (this.useImageData = e.target.checked))} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index f5ba0de96..2ac8f6291 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -52,7 +52,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso import './CollectionFreeFormView.scss'; import { MarqueeView } from './MarqueeView'; import React = require('react'); -import { DocumentWithColor, GeneratedResponse, generatePalette } from '../../../apis/gpt/customization'; +import { DocumentWithColor, GeneratedResponse, generatePalette, StyleInput, StyleInputDocument } from '../../../apis/gpt/customization'; import { PropertiesView } from '../../PropertiesView'; import { MainView } from '../../MainView'; import { ExtractColors } from '../../ExtractColors'; @@ -1824,6 +1824,8 @@ export class CollectionFreeFormView extends CollectionSubView ({ + const gptInput: StyleInputDocument[] = inputDocs.map((doc, i) => ({ id: i, textContent: (doc.text as RichTextField)?.Text, textSize: 16, @@ -1858,21 +1860,6 @@ export class CollectionFreeFormView extends CollectionSubView (inputDocs[i].backgroundColor = elem.color)); - // } - // } catch (err) { - // console.error(err); - // } }; onContextMenu = (e: React.MouseEvent) => { diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 19f271246..f1b501506 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -2812,10 +2812,6 @@ export class PresBox extends ViewBoxBaseComponent() { this.stopDictation(true); e.stopPropagation(); }} - onKeyPress={e => e.stopPropagation()} - onPointerDown={e => e.stopPropagation()} - onClick={e => e.stopPropagation()} - onPointerUp={e => e.stopPropagation()} /> {/* this.setChatInput(e.target.value)} /> */}
-- cgit v1.2.3-70-g09d2