From f59e343553878029d846e5eae2963fc9c3481b13 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Wed, 6 Dec 2023 22:06:16 -0500
Subject: types

---
 src/client/views/PropertiesView.tsx | 85 +++++++++++++++++++++++++++----------
 1 file changed, 62 insertions(+), 23 deletions(-)

(limited to 'src/client/views/PropertiesView.tsx')

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>
-- 
cgit v1.2.3-70-g09d2