switched the collection's ai view to be the same as the image box's

1 files changed, 50 insertions, 45 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6e9e503f4..b45409a75 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,4 +1,4 @@
-import { Button, Colors, Type } from '@dash/components';
+import { Button, Colors, NumberDropdown, Size, Type } from '@dash/components';
 import { Slider } from '@mui/material';
 import { Bezier } from 'bezier-js';
 import { Property } from 'csstype';
@@ -2162,58 +2162,63 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         );
     }
 
+    @observable private _regenerateLoading = false;
     @observable private _regenInput = '';
+    @observable private _canInteract = true;
     @observable private _drawingFillInput = '';
     @observable private _regenLoading = false;
     @observable private _drawingFillLoading = false;
-    @observable private _fireflyRefStrength = 50;
+    @observable private _fireflyRefStrength = 0;
 
     componentAIView = () => {
         return (
-            <div className="collectionfreeformview-aiView" onPointerDown={e => e.stopPropagation()}>
-                <div className="collectionfreeformview-aiView-options-container">
-                    <span className="collectionfreeformview-aiView-subtitle">Firefly:</span>
-                    <div className="collectionfreeformview-aiView-options">
-                        <input
-                            className="collectionfreeformview-aiView-prompt"
-                            placeholder={this._drawingFillInput || StrCast(this.Document.title) || 'Describe image'}
-                            type="text"
-                            value={this._drawingFillInput}
-                            onChange={action(e => (this._drawingFillInput = e.target.value))}
+            <div className="imageBox-aiView">
+                <div className="imageBox-aiView-regenerate">
+                    <input
+                        style={{ color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}
+                        className="imageBox-aiView-input"
+                        aria-label="Edit instructions input"
+                        type="text"
+                        value={this._regenInput || StrCast(this.Document.title)}
+                        onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
+                        placeholder={this._regenInput || StrCast(this.Document.title)}
+                    />
+                    <div className="imageBox-aiView-regenerate-createBtn">
+                        <Button
+                            text="Create"
+                            type={Type.TERT}
+                            size={Size.XSMALL}
+                            color={SnappingManager.userColor}
+                            background={SnappingManager.userBackgroundColor}
+                            // style={{ alignSelf: 'flex-end' }}
+                            icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                            iconPlacement="right"
+                            onClick={action(() => {
+                                this._regenerateLoading = true;
+                                DrawingFillHandler.drawingToImage(this.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title))?.then(action(() => (this._regenerateLoading = false)));
+                            })}
+                        />
+                    </div>
+                    <div>
+                        <NumberDropdown
+                            color={SnappingManager.userColor}
+                            background={SnappingManager.userBackgroundColor}
+                            numberDropdownType="slider"
+                            showPlusMinus={false}
+                            formLabel="similarity"
+                            tooltip="structure similarity of created images to current image"
+                            type={Type.PRIM}
+                            width={75}
+                            min={0}
+                            max={100}
+                            number={this._fireflyRefStrength}
+                            size={Size.XXSMALL}
+                            setNumber={undoable(
+                                action(val => this._canInteract && (this._fireflyRefStrength = val as number)),
+                                `${this.Document.title} button set from list`
+                            )}
+                            fillWidth
                         />
-                        <div className="collectionFreeFormView-aiView-strength">
-                            <span className="collectionFreeFormView-aiView-similarity">Similarity</span>
-                            <Slider
-                                className="collectionfreeformview-aiView-slider"
-                                sx={{
-                                    '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
-                                    '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
-                                    '& .MuiSlider-thumb': { color: SettingsManager.userVariantColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
-                                }}
-                                min={1}
-                                max={100}
-                                step={1}
-                                size="small"
-                                value={this._fireflyRefStrength}
-                                onChange={action((e, val) => (this._fireflyRefStrength = val as number))}
-                                valueLabelDisplay="auto"
-                            />
-                        </div>
-                        <div className="collectionFreeFormView-aiView-send">
-                            <Button
-                                text="Send"
-                                type={Type.SEC}
-                                icon={this._drawingFillLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                                iconPlacement="right"
-                                onClick={undoable(
-                                    action(() => {
-                                        this._drawingFillLoading = true;
-                                        DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(action(() => (this._drawingFillLoading = false)));
-                                    }),
-                                    'create image'
-                                )}
-                            />
-                        </div>
                     </div>
                 </div>
             </div>