1 files changed, 42 insertions, 0 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 64b2a9d65..fb2d811f4 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -40,6 +40,7 @@ import { PropertiesSection } from './PropertiesSection';
 import './PropertiesView.scss';
 import { DefaultStyleProvider } from './StyleProvider';
 import { FaFillDrip } from 'react-icons/fa';
+import { GeneratedResponse } from '../apis/gpt/customization';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 interface PropertiesViewProps {
@@ -90,6 +91,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable openAppearance: boolean = true;
     @observable openTransform: boolean = true;
     @observable openFilters: boolean = false;
+    @observable openStyling: boolean = true;
+
+    // GPT styling
+    @observable generatedStyles: GeneratedResponse[] = [];
+    @observable inputDocs: Doc[] = [];
+    @observable selectedStyle: number = -1;
+
+    @action
+    setGeneratedStyles = (responses: GeneratedResponse[]) => (this.generatedStyles = responses);
+    setInputDocs = (docs: Doc[]) => (this.inputDocs = docs);
 
     //Pres Trails booleans:
     @observable openPresTransitions: boolean = true;
@@ -1161,6 +1172,36 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         }
     };
 
+    @action
+    styleCollection = (i: number) => {
+        this.selectedStyle = i;
+        const resObj = this.generatedStyles[i];
+        if (this.selectedDoc && this.selectedDoc.type === 'collection') {
+            this.selectedDoc.backgroundColor = resObj.collectionBackgroundColor;
+            resObj.documentsWithColors.forEach((elem, i) => (this.inputDocs[i].backgroundColor = elem.color));
+        }
+    };
+
+    // GPT styling
+    @computed get stylingSubMenu() {
+        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 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>
+                                  {style.documentsWithColors.map(c => (
+                                      <div style={{ width: '24px', height: '24px', backgroundColor: c.color, borderRadius: '2px' }}></div>
+                                  ))}
+                              </div>
+                          ))
+                        : 'Generating styles...'}
+                </div>
+            </PropertiesSection>
+        );
+    }
+
     @computed get filtersSubMenu() {
         return (
             <PropertiesSection title="Filters" isOpen={this.openFilters} setIsOpen={bool => (this.openFilters = bool)} onDoubleClick={() => this.CloseAll()}>
@@ -1739,6 +1780,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
                         <div className="propertiesView-name">{this.editableTitle}</div>
                         <div className="propertiesView-type"> {this.currentType} </div>
+                        {this.stylingSubMenu}
                         {this.optionsSubMenu}
                         {this.linksSubMenu}
                         {!LinkManager.currentLink || !this.openLinks ? null : this.linkProperties}