imagebox now has basic ai functionalities

4 files changed, 23 insertions, 11 deletions

diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 9490be98c..82195b9c1 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -273,8 +273,9 @@
 
 .documentView-editorView-history {
     position: absolute;
-    left: 0;
+    right: 0;
     top: 0;
+    overflow-y: scroll;
 }
 
 .documentView-editorView {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f79eadde8..622eccc4f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -750,7 +750,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     />
                 </div>
                 {this._showAIEditor && (
-                    <div className="documentView-editorView-history" style={{ height: this.rph(), width: this.rpw() / 2 }}>
+                    <div className="documentView-editorView-history" style={{ height: this.rph(), width: (this._props.PanelWidth() - this.rpw()) / 2 }}>
                         {this._componentView?.componentAIViewHistory?.() ?? null}
                     </div>
                 )}
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 9f1ac11ef..e083f52b4 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -144,17 +144,19 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 5px;
+    padding: 5 0 0 5;
     gap: 5px;
-    overflow-y: scroll;
 
     .imageBox-aiView-img {
         width: 100%;
+
+        &:hover {
+            filter: brightness(0.8);
+        }
     }
 }
 
 .imageBox-aiView {
-    overflow-y: scroll;
     text-align: center;
     font-weight: bold;
     align-content: center;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index fc8b7bc27..09daea6bb 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -533,20 +533,26 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable private _regenInput = '';
     @observable private _canInteract = true;
     @observable private _regenerateLoading = false;
-    @observable private _prevImgUrls: string[] = [];
+    @observable private _prevImgs: { href: string; pathname: string }[] = [];
 
     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))} />
+                {this._prevImgs.map(img => (
+                    <img
+                        className="imageBox-aiView-img"
+                        src={img.href}
+                        onClick={() => {
+                            this.dataDoc[this.fieldKey] = new ImageField(img.pathname);
+                        }}
+                    />
                 ))}
             </div>
         );
     };
 
     componentAIView = () => {
-        const field = Cast(this.dataDoc[this.fieldKey], ImageField);
+        const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey]));
         const showRegenerate = this.Document[DocData].ai;
         return (
             <div className="imageBox-aiView">
@@ -575,8 +581,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                     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]);
+                                            const url = newDocs[0];
+                                            const imgField = new ImageField(url);
+                                            this._prevImgs.length === 0 && this._prevImgs.push({ href: this.paths.lastElement(), pathname: field.url.pathname });
+                                            this.dataDoc[this.fieldKey] = imgField;
+                                            this._prevImgs.unshift({ href: this.paths.lastElement(), pathname: url });
                                             this._regenerateLoading = false;
                                             this._regenInput = '';
                                         });