Merge branch 'master' into sophie-ai-images

1 files changed, 51 insertions, 23 deletions

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 9b754588a..42562986f 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -1,19 +1,20 @@
-import React = require('react');
-import './GPTPopup.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
+import { Button, IconButton, Type } from 'browndash-components';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
+import * as React from 'react';
+import { CgClose } from 'react-icons/cg';
 import ReactLoading from 'react-loading';
-import Typist from 'react-typist';
+import { TypeAnimation } from 'react-type-animation';
+import { Utils } from '../../../../Utils';
 import { Doc } from '../../../../fields/Doc';
-import { DocUtils, Docs } from '../../../documents/Documents';
-import { Button, IconButton, Type } from 'browndash-components';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { CgClose } from 'react-icons/cg';
-import { AnchorMenu } from '../AnchorMenu';
-import { gptImageCall } from '../../../apis/gpt/GPT';
 import { Networking } from '../../../Network';
-import { Utils } from '../../../../Utils';
+import { gptImageCall } from '../../../apis/gpt/GPT';
+import { DocUtils, Docs } from '../../../documents/Documents';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { AnchorMenu } from '../AnchorMenu';
+import './GPTPopup.scss';
 
 export enum GPTPopupMode {
     SUMMARY,
@@ -24,7 +25,7 @@ export enum GPTPopupMode {
 interface GPTPopupProps {}
 
 @observer
-export class GPTPopup extends React.Component<GPTPopupProps> {
+export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     static Instance: GPTPopup;
 
     @observable
@@ -128,7 +129,7 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
         } catch (err) {
             console.log(err);
         }
-        GPTPopup.Instance.setLoading(false);
+        this.setLoading(false);
     };
 
     /**
@@ -179,6 +180,7 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
 
     constructor(props: GPTPopupProps) {
         super(props);
+        makeObservable(this);
         GPTPopup.Instance = this;
     }
 
@@ -213,6 +215,31 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
         );
     };
 
+    data = () => {
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                {this.heading('GENERATED IMAGE')}
+                <div className="image-content-wrapper">
+                    {this.imgUrls.map(rawSrc => (
+                        <div className="img-wrapper">
+                            <div className="img-container">
+                                <img key={rawSrc[0]} src={rawSrc[0]} width={150} height={150} alt="dalle generation" />
+                            </div>
+                            <div className="btn-container">
+                                <Button text="Save Image" onClick={() => this.transferToImage(rawSrc[1])} color={StrCast(Doc.UserDoc().userColor)} type={Type.TERT} />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                {!this.loading && (
+                    <>
+                        <IconButton tooltip="Generate Again" onClick={this.generateImage} icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} color={StrCast(Doc.UserDoc().userVariantColor)} />
+                    </>
+                )}
+            </div>
+        );
+    };
+
     summaryBox = () => (
         <>
             <div>
@@ -220,17 +247,18 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
                 <div className="content-wrapper">
                     {!this.loading &&
                         (!this.done ? (
-                            <Typist
-                                key={this.text}
-                                avgTypingDelay={15}
-                                cursor={{ hideWhenDone: true }}
-                                onTypingDone={() => {
-                                    setTimeout(() => {
-                                        this.setDone(true);
-                                    }, 500);
-                                }}>
-                                {this.text}
-                            </Typist>
+                            <TypeAnimation
+                                speed={50}
+                                sequence={[
+                                    this.text,
+                                    () => {
+                                        setTimeout(() => {
+                                            this.setDone(true);
+                                        }, 500);
+                                    },
+                                ]}
+                                //cursor={{ hideWhenDone: true }}
+                            />
                         ) : (
                             this.text
                         ))}