Mini Kabibi Habibi

layout cxui_generate_bar {
    constant:
        bar_title: '$$$/CxUI/Generate/Bar/Title=Generate Bar';

        bar_button_height: 35;
        bar_button_width:  38;
        edit_text_height:  17;
        text_button_height: bar_button_height - 7;

        drag_bar_width: 12;

    interface:
        showOptionsFlyoutButton:  false;
        showGenFillReferenceFlyoutButton: false;
        showGenerateImageReferenceFlyoutButton: false;
        showServicePickerButton: false;
        showPromptBox: true;

    view cxui_bar_window(name: bar_title,
                         placement: place_row,
                         margin: 0,
                         spacing: 0) {
        cxui_background_view(placement: place_row,
                             margin: 0, spacing: 0,
                             horizontal: align_fill,
                             vertical: align_fill) {
            cxui_drag_bar(identifier: @drag,
                          width: drag_bar_width,
                          horizontal: align_left,
                          vertical: align_fill);

            TView(width: 3);

            row(margin: 0,
                spacing: 0,
                horizontal: align_fill,
                vertical: align_fill) {

                /* This row's only purpose is to provide the gap between EditText and IconButton */
                row(horizontal : align_fill,
                    vertical: align_fill,
                    margin: [ 0, gTinyGap, 0, gTinyGap ],
                    spacing: gGap) {

                    TOptional(bind: @showPromptBox, vertical: align_center) {
                        /* The edit text font doesn't vary and the default height is a little tight so we have our own constant for it */
                        synthetic_fill_prompt(identifier: @prompt,
                                              default: '$$$/SyntheticFill/InitialPrompt=What would you like to generate? (Optional)',
                                              sample: '$$$/SyntheticFill/PromptSample=A brown felt cowboy hat with a blue silk ribbon',
                                              horizontal: align_fill,
                                              vertical: align_center,
                                              frame: 2,
                                              height: edit_text_height,
                                              maxChars: 500);
                    }

                    TOptional(bind: @showGenFillReferenceFlyoutButton) {
                        TFlyoutIconButton(identifier : @genFillReferenceFlyoutButton,
                                        horizontal: align_left,
                                        vertical: align_fill, flyoutControlId: @grfi,
                                        tooltip: '$$$/CxUI/Generate/Bar/GenFill/ReferenceImage/Tooltip=Edit your reference image.') {
                        TCustomDrawFlyoutControl(identifier: @grfi, richtooltip: true,
                                                    vertical: align_fill,
                                                    width: bar_button_width,
                                                    height: bar_button_height);
                        }
                    }

                    //flyoutControlId should be same as identifier of TCustomDrawFlyoutControl
                    TOptional(bind: @showGenerateImageReferenceFlyoutButton) {
                        TFlyoutIconButton(identifier : @generateImageReferenceFlyoutButton,
                                        horizontal: align_left,
                                        vertical: align_fill,
                                        tooltip: '$$$/CxUI/Generate/Bar/GenImage/ReferenceImage/Tooltip=Edit your reference image.',
                                        flyoutControlId: @generateImageReferenceFlyout)  {
                        TCustomDrawFlyoutControl(identifier: @generateImageReferenceFlyout,
                                                    vertical: align_fill,
                                                    width: bar_button_width,
                                                    height: bar_button_height,
                                                    richtooltip: true);
                        }
                    }

                    TOptional(bind: @showServicePickerButton) {
                        TFlyoutIconButton(identifier : @servicePickerFlyoutButton,
                                horizontal: align_left,
                                vertical: align_fill,
                                iconRootName: 'gen_ai_firefly_icon',
                                flyoutControlId: @servicePickerFlyout,
                                tooltip: '$$$/CxUI/Generate/Bar/ServicePicker/Tooltip=Choose a model.')
                        {
                           TCustomDrawFlyoutControl(identifier: @servicePickerFlyout, vertical: align_fill,
                                                    width: bar_button_width, height: bar_button_height);
                        }
                    }

                    //flyoutControlId should be same as identifier of TCustomDrawFlyoutControl, if used
                    TOptional(bind: @showOptionsFlyoutButton) {
                        TFlyoutIconButton(identifier : @optionsFlyoutButton,
                                          horizontal: align_left,
                                          vertical: align_fill,
                                          tooltip: '$$$/CxUI/Generate/Bar/GenImage/StyleEffects/Tooltip=Edit your style effects',
                                          flyoutControlId: @generateImageEffectsFlyout) {
                            TCustomDrawFlyoutControl(identifier: @generateImageEffectsFlyout,
                                                     vertical: align_fill,
                                                     width: bar_button_width,
                                                     height: bar_button_height,
                                                     richtooltip: true);
                        }
                    }

                }
                TPunchButton(identifier: @more,
                             dataType: 'int32',
                             width: bar_button_width,
                             height: bar_button_height,
                             horizontal: align_left,
                             vertical: align_center,
                             button_style: 'context_bar',
                             iconRootName: 'CxUI_More',
                             tooltip: '$$$/CxUI/Bar/Common/Button/More/Tooltip=More options');
                row(margin: [gMargin, gGap, gMargin, gGap],
                            horizontal: align_left,
                            vertical: align_fill) {
                            
                            TNarrowGroupSeparator(width: 1,
                                                  vertical: align_fill,
                                                  style: 'invert');
                }
                TIconButton(identifier: @cancel_generate,
                            dataType: 'int32',
                            button_style: 'context_bar',
                            fontColorFromTheme: true,
                            layoverText: '$$$/CxUI/Generate/Bar/Button/Back=Cancel',
                            layoverTextPosition: align_center,
                            width: bar_button_width,
                            height: bar_button_height,
                            horizontal: align_left,
                            vertical: align_center);

                /* TIconButton will add additional width from the layoverText parameter */
                TIconButton(identifier: @gen_button,
                                width: bar_button_width,
                                height: bar_button_height,
                                horizontal: align_left,
                                vertical: align_center,
                                dataType: 'int32',
                                button_style: 'context_bar_emphasized',
                                alignIconTextTogether: true,
                                fontColorFromTheme: true,
                                iconRootName: 'CxUI_GenFill',
                                layoverText: '$$$/CxUI/Generate/Bar/GenerateButtonLabel=Generate',
                                layoverTextPosition: align_right,
                                tooltip: '$$$/CxUI/Generate/Bar/GenToolTip=Generate variations');
            }
        }
    }
}