1 files changed, 31 insertions, 12 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index f00580d77..fc8b7bc27 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -7,8 +7,8 @@ import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
-import { ClientUtils, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
-import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { ClientUtils, DashColor, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
+import { Doc, DocListCast, Opt, returnEmptyDoclist } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
@@ -34,7 +34,7 @@ import { AnchorMenu } from '../pdf/AnchorMenu';
 import { PinDocView, PinProps } from '../PinFuncs';
 import { StickerPalette } from '../smartdraw/StickerPalette';
 import { StyleProp } from '../StyleProp';
-import { DocumentView } from './DocumentView';
+import { DocumentView, DocumentViewInternal } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
@@ -44,6 +44,7 @@ import { SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
 import { Button } from 'browndash-components';
 import { SettingsManager } from '../../util/SettingsManager';
 import { AiOutlineSend } from 'react-icons/ai';
+import { returnEmptyDocViewList } from '../StyleProvider';
 
 export class ImageEditorData {
     // eslint-disable-next-line no-use-before-define
@@ -532,18 +533,30 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable private _regenInput = '';
     @observable private _canInteract = true;
     @observable private _regenerateLoading = false;
+    @observable private _prevImgUrls: string[] = [];
 
-    componentAIView = (top: number) => {
+    componentAIViewHistory = () => {
+        return (
+            <div className="imageBox-aiView-history">
+                {this._prevImgUrls.map((url: string) => (
+                    <img className="imageBox-aiView-img" src={url} onClick={() => (this.dataDoc[this.fieldKey] = new ImageField(url))} />
+                ))}
+            </div>
+        );
+    };
+
+    componentAIView = () => {
         const field = Cast(this.dataDoc[this.fieldKey], ImageField);
         const showRegenerate = this.Document[DocData].ai;
         return (
-            <div className="imageBox-aiView" style={{ top: top, width: NumCast(this.Document.width), height: NumCast(this.Document.width) - top }}>
+            <div className="imageBox-aiView">
                 Edit Image with AI
                 {showRegenerate && (
                     <div className="imageBox-aiView-regenerate-container">
                         <text className="imageBox-aiView-subtitle">Regenerate AI Image</text>
                         <div className="imageBox-aiView-regenerate">
                             <input
+                                className="imageBox-aiView-input"
                                 aria-label="Edit instructions input"
                                 // className="smartdraw-input"
                                 type="text"
@@ -556,14 +569,20 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                 text="Regenerate"
                                 type={Type.SEC}
                                 // style={{ alignSelf: 'flex-end' }}
-                                icon={this._regenerateLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                                icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                                 iconPlacement="right"
-                                onClick={action(async () => {
-                                    this._regenerateLoading = true;
-                                    await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput);
-                                    this._regenerateLoading = false;
-                                    this._regenInput = '';
-                                })}
+                                onClick={undoable(
+                                    action(async () => {
+                                        this._regenerateLoading = true;
+                                        SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newDocs => {
+                                            this._prevImgUrls.push(this.paths.lastElement());
+                                            this.dataDoc[this.fieldKey] = new ImageField(newDocs[0]);
+                                            this._regenerateLoading = false;
+                                            this._regenInput = '';
+                                        });
+                                    }),
+                                    'regenerate image'
+                                )}
                             />
                             <Button
                                 // style={{ alignSelf: 'flex-end' }}