Merge branch 'moreUpgrading' into dataViz-annotations

1 files changed, 18 insertions, 15 deletions

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index d830ba8a9..db21d9a3d 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -1,10 +1,10 @@
-import React = require('react');
+import * as React from 'react';
 import './GPTPopup.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import ReactLoading from 'react-loading';
-import Typist from 'react-typist';
+import { TypeAnimation } from 'react-type-animation';
 import { Doc } from '../../../../fields/Doc';
 import { DocUtils, Docs } from '../../../documents/Documents';
 import { Button, IconButton, Type } from 'browndash-components';
@@ -14,6 +14,7 @@ import { AnchorMenu } from '../AnchorMenu';
 import { gptImageCall } from '../../../apis/gpt/GPT';
 import { Networking } from '../../../Network';
 import { Utils } from '../../../../Utils';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
 
 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
@@ -177,6 +178,7 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
 
     constructor(props: GPTPopupProps) {
         super(props);
+        makeObservable(this);
         GPTPopup.Instance = this;
     }
 
@@ -243,17 +245,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
                         ))}