From fd922d7898ed7a405ed47a7e48b85c582d787c07 Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Fri, 10 Jan 2025 15:07:42 -0500
Subject: working on merge conflicts

---
 src/client/views/nodes/DocumentView.scss |  2 ++
 src/client/views/nodes/ImageBox.scss     |  8 ++++--
 src/client/views/nodes/ImageBox.tsx      | 49 ++++++++++++++++++++------------
 3 files changed, 39 insertions(+), 20 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index a3d47290a..e71f391c6 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -276,11 +276,13 @@
     right: 0;
     top: 0;
     overflow-y: scroll;
+    scrollbar-width: thin;
 }
 
 .documentView-editorView {
     width: 100%;
     overflow-y: scroll;
+    scrollbar-width: thin;
     justify-items: center;
     background-color: rgb(223, 223, 223);
 
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 1b6b3c85a..759f2584b 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -144,16 +144,20 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 5 0 0 5;
-    gap: 5px;
+    text-align: center;
 
     .imageBox-aiView-img {
         width: 100%;
+        padding: 5px;
 
         &:hover {
             filter: brightness(0.8);
         }
     }
+
+    .imageBox-aiView-caption {
+        font-size: 7px;
+    }
 }
 
 .imageBox-aiView {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 9838af4d0..8a7fb99b1 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -536,23 +536,35 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
 
     componentAIViewHistory = () => {
+        const imgs: FireflyImageData[] = this.dataDoc.ai_firefly_history ? JSON.parse(StrCast(this.dataDoc.ai_firefly_history)) : [];
         return (
-            <div className="imageBox-aiView-history">
-                <Button text="Clear History" type={Type.SEC} size={Size.XSMALL} />
-                {this._prevImgs.map(img => (
-                    <div key={img.pathname}>
-                        <img
-                            className="imageBox-aiView-img"
-                            src={img.href}
-                            onClick={() => {
-                                this.dataDoc[this.fieldKey] = new ImageField(img.pathname);
-                                this.dataDoc.ai_firefly_prompt = img.prompt;
-                                this.dataDoc.ai_firefly_seed = img.seed;
-                            }}
-                        />
-                        <text>{img.prompt}</text>
-                    </div>
-                ))}
+            <div className="imageBox-aiView-history" ref={this.createDashEventsTarget}>
+                <Button
+                    text="Clear History"
+                    type={Type.SEC}
+                    style={{ marginTop: '5px' }}
+                    size={Size.XSMALL}
+                    onClick={action(() => {
+                        this._prevImgs = [];
+                        this.dataDoc.ai_firefly_history = undefined;
+                    })}
+                />
+                {imgs.length >= 2 &&
+                    imgs.map(img => (
+                        <div>
+                            <img
+                                key={img.pathname}
+                                className="imageBox-aiView-img"
+                                src={img.href}
+                                onClick={() => {
+                                    this.dataDoc[this.fieldKey] = new ImageField(img.pathname);
+                                    this.dataDoc.ai_firefly_prompt = img.prompt;
+                                    this.dataDoc.ai_firefly_seed = img.seed;
+                                }}
+                            />
+                            <text className="imageBox-aiView-caption">{img.prompt.replace(/ ~~~/g, ',')}</text>
+                        </div>
+                    ))}
             </div>
         );
     };
@@ -562,6 +574,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const showRegenerate = this.Document[DocData].ai;
         return (
             <div className="imageBox-aiView">
+                Edit Image with AI
                 {showRegenerate && (
                     <div className="imageBox-aiView-regenerate-container">
                         <div className="imageBox-aiView-regenerate">
@@ -587,9 +600,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                             const imgField = new ImageField(url);
                                             this._prevImgs.length === 0 &&
                                                 this._prevImgs.push({ prompt: StrCast(this.dataDoc.ai_firefly_prompt), seed: this.dataDoc.ai_firefly_seed as number, href: this.paths.lastElement(), pathname: field.url.pathname });
-                                            this._prevImgs.unshift({ prompt: newImgs[0].prompt, seed: newImgs[0].seed, href: this.paths.lastElement(), pathname: url });
-                                            this.dataDoc.ai_firefly_history = `${this._prevImgs}`;
                                             this.dataDoc[this.fieldKey] = imgField;
+                                            this._prevImgs.unshift({ prompt: newImgs[0].prompt, seed: newImgs[0].seed, href: this.paths.lastElement(), pathname: url });
+                                            this.dataDoc.ai_firefly_history = JSON.stringify(this._prevImgs);
                                             this._regenerateLoading = false;
                                             this._regenInput = '';
                                         }
-- 
cgit v1.2.3-70-g09d2