diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 85 |
1 files changed, 62 insertions, 23 deletions
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<PropertiesViewProps> { @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<PropertiesViewProps> { return ( <PropertiesSection title="Styling" isOpen={this.openStyling} setIsOpen={bool => (this.openStyling = bool)} onDoubleClick={() => this.CloseAll()}> <div className="propertiesView-content" style={{ position: 'relative', height: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}> - {this.generatedStyles.length > 0 - ? this.generatedStyles.map((style, i) => ( - <div - key={i} - className="propertiesView-palette" - style={{ display: 'flex', gap: '4px', backgroundColor: this.selectedStyle === i ? StrCast(Doc.UserDoc().userVariantColor) : '#00000000' }} - onClick={() => this.styleCollection(i)}> - <div style={{ width: '24px', height: '24px', backgroundColor: style.collectionBackgroundColor, borderRadius: '2px' }}></div> - {ExtractColors.sortColors(style.documentsWithColors.map(doc => ExtractColors.hexToFinalColor(doc.color))).map(c => ( - <div key={c.hex} style={{ width: '24px', height: '24px', backgroundColor: c.hex, borderRadius: '2px' }}></div> - ))} - </div> - )) - : 'Generating styles...'} - <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}> + {this.generatedStyles.length > 0 && + this.generatedStyles.map((style, i) => ( + <div + key={i} + className="propertiesView-palette" + style={{ display: 'flex', gap: '4px', backgroundColor: this.selectedStyle === i ? StrCast(Doc.UserDoc().userVariantColor) : '#00000000' }} + onClick={() => this.styleCollection(i)}> + <div style={{ width: '24px', height: '24px', backgroundColor: style.collectionBackgroundColor, borderRadius: '2px' }}></div> + {ExtractColors.sortColors(style.documentsWithColors.map(doc => ExtractColors.hexToFinalColor(doc.color))).map(c => ( + <div key={c.hex} style={{ width: '24px', height: '24px', backgroundColor: c.hex, borderRadius: '2px' }}></div> + ))} + {/* <FaRegHeart onClick={() => {}}/> */} + </div> + ))} + {this.loadingStyles && 'Generating styles...'} + <ReactTextareaAutosize + minRows={3} + placeholder="Customize..." + className="styling-chatbox" + autoFocus={true} + value={this.chatInput} + onChange={e => { + this.setChatInput(e.target.value); + }} + onKeyDown={e => { + e.stopPropagation(); + }} + /> + <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '16px' }}> <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}> - <label>Use Images </label> - <input type="checkbox" checked={this.useImageData} onChange={action(e => (this.useImageData = e.target.checked))} /> + <label style={{ margin: '0px' }}>Use Images </label> + <input style={{ margin: '0px' }} type="checkbox" checked={this.useImageData} onChange={action(e => (this.useImageData = e.target.checked))} /> </div> <Button text={'Regenerate'} type={Type.TERT} color={StrCast(Doc.UserDoc().userVariantColor)} onClick={this.gptStyling} /> </div> |