From 272b457873ac0d8d445eac824272f5ed6511c27f Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Thu, 22 May 2025 20:04:56 -0400
Subject: reactive backgrounds

---
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx | 81 +++++++++++++----------
 1 file changed, 47 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index 9ffc13e6e..593c0ac63 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -1,4 +1,4 @@
-import { action, makeObservable, observable, reaction } from 'mobx';
+import { action, makeObservable, observable, reaction, computed } from 'mobx';
 import * as React from 'react';
 import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
@@ -438,7 +438,6 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         prompt = 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background';
         }
         const dimensions = FireflyImageDimensions.Square;
-      
         SmartDrawHandler.CreateWithFirefly(prompt, dimensions)
           .then(action(doc => {
             if (doc instanceof Doc) {
@@ -542,31 +541,37 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         return false;
     };
 
+    @computed get regenPrompt() {
+        const slots = DocListCast(this.dataDoc[this.fieldKey]);
+        
+        const unwrap = (items: Doc[]): Doc[] =>
+            items.flatMap(d =>
+                d.$type === DocumentType.COL
+                    ? unwrap(DocListCast(d[Doc.LayoutDataKey(d)]))
+                    : [d]
+            );
+    
+        const allDocs: Doc[] = unwrap(slots);
+        const internalTagsSet = new Set<string>();
+        
+        allDocs.forEach(doc => {
+            const tags = StrListCast(doc.$tags_chat ?? new List<string>());
+            tags.forEach(tag => internalTagsSet.add(tag));
+        });
+    
+        const internalTags = Array.from(internalTagsSet).join(', ');
+    
+        return internalTags
+            ? `Create a new scrapbook background featuring: ${internalTags}`
+            : 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background';
+    }
        
     render() {
 
         /*const internalTags = DocListCast(this.dataDoc[this.fieldKey])
         .flatMap(ph => StrListCast(ph.$tags_chat))
         .join(' ');*/
-        const slots = DocListCast(this.dataDoc[this.fieldKey]);
 
-        // 2) recursive unwrap:
-        const unwrap = (items: Doc[]): Doc[] =>
-            items.flatMap(d =>
-            d.$type === DocumentType.COL
-                ? unwrap(DocListCast(d[Doc.LayoutDataKey(d)]))
-                : [d]
-            );
-
-        // 3) produce a flat list of every doc, unwrapping any number of nested COLs
-        const allDocs: Doc[] = unwrap(slots);
-       const internalTags = ''
-
-        const regenPrompt = internalTags
-            ? `Create a new background using these tags: ${internalTags}`
-            : 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background';
-        
-     
         
         return (
         <div style={{ background: 'beige', width: '100%', height: '100%' }}>
@@ -604,20 +609,28 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
               }}
               onPointerDown={e => e.stopPropagation()}
             >
-              <button
-                type="button"
-                title="Regenerate Background"
-                onClick={() => this.generateAiImageCorrect(regenPrompt)}
-                style={{
-                  background: 'white',
-                  border: '1px solid #ccc',
-                  borderRadius: 4,
-                  padding: '4px 8px',
-                  cursor: 'pointer',
-                }}
-              >
-                <FontAwesomeIcon icon={faRedoAlt} /> Regenerate
-              </button>
+            <button
+            type="button"
+            title="Regenerate Background"
+            onClick={() => this.generateAiImageCorrect(this.regenPrompt)}
+            style={{
+                color: 'black',
+                background: 'white',
+                border: '1px solid #ccc',
+                borderRadius: 4,
+                padding: '4px 8px',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+                whiteSpace: 'nowrap',
+                overflow: 'visible', // important
+                fontSize: '14px',
+            }}
+            >
+            <FontAwesomeIcon icon={faRedoAlt} />
+            <span>Regenerate Background</span>
+            </button>
             </div>
           )}
 
-- 
cgit v1.2.3-70-g09d2