working on merge conflicts

1 files changed, 31 insertions, 18 deletions

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 = '';
                                         }