diff --git a/projects/js-packages/ai-client/changelog/add-ai-assistant-fix-to-bottom b/projects/js-packages/ai-client/changelog/add-ai-assistant-fix-to-bottom new file mode 100644 index 0000000000000..3b58d2321eaa4 --- /dev/null +++ b/projects/js-packages/ai-client/changelog/add-ai-assistant-fix-to-bottom @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +AI Assistant: make container fix to bottom when content is too large to fit the viewport diff --git a/projects/js-packages/ai-client/src/components/ai-control/index.tsx b/projects/js-packages/ai-client/src/components/ai-control/index.tsx index 80ad671cb5a10..fd60332190029 100644 --- a/projects/js-packages/ai-client/src/components/ai-control/index.tsx +++ b/projects/js-packages/ai-client/src/components/ai-control/index.tsx @@ -155,115 +155,117 @@ export function AIControl( ); return ( -
-
- +
+
+
+ -
- - </div> + <div className="jetpack-components-ai-control__input-wrapper"> + <PlainText + value={ value } + onChange={ changeHandler } + placeholder={ placeholder } + className="jetpack-components-ai-control__input" + disabled={ loading || disabled } + ref={ promptUserInputRef } + /> + </div> + + { ( ! showAccept || editRequest ) && value?.length > 0 && ( + <div className="jetpack-components-ai-control__controls-prompt_button_wrapper"> + { ! loading ? ( + <> + { editRequest && ( + <Button + className="jetpack-components-ai-control__controls-prompt_button" + onClick={ () => setEditRequest( false ) } + variant="secondary" + label={ __( 'Cancel', 'jetpack-ai-client' ) } + > + { showButtonLabels ? ( + __( 'Cancel', 'jetpack-ai-client' ) + ) : ( + <Icon icon={ closeSmall } /> + ) } + </Button> + ) } - { ( ! showAccept || editRequest ) && value?.length > 0 && ( - <div className="jetpack-components-ai-control__controls-prompt_button_wrapper"> - { ! loading ? ( - <> - { editRequest && ( <Button className="jetpack-components-ai-control__controls-prompt_button" - onClick={ () => setEditRequest( false ) } - variant="secondary" - label={ __( 'Cancel', 'jetpack-ai-client' ) } + onClick={ sendRequest } + variant="primary" + disabled={ ! value?.length || disabled } + label={ __( 'Send request', 'jetpack-ai-client' ) } > { showButtonLabels ? ( - __( 'Cancel', 'jetpack-ai-client' ) + __( 'Generate', 'jetpack-ai-client' ) ) : ( - <Icon icon={ closeSmall } /> + <Icon icon={ arrowUp } /> ) } </Button> - ) } - + </> + ) : ( <Button className="jetpack-components-ai-control__controls-prompt_button" - onClick={ sendRequest } - variant="primary" - disabled={ ! value?.length || disabled } - label={ __( 'Send request', 'jetpack-ai-client' ) } + onClick={ onStop } + variant="secondary" + label={ __( 'Stop request', 'jetpack-ai-client' ) } > { showButtonLabels ? ( - __( 'Generate', 'jetpack-ai-client' ) + __( 'Stop', 'jetpack-ai-client' ) ) : ( - <Icon icon={ arrowUp } /> + <Icon icon={ closeSmall } /> ) } </Button> - </> - ) : ( - <Button - className="jetpack-components-ai-control__controls-prompt_button" - onClick={ onStop } - variant="secondary" - label={ __( 'Stop request', 'jetpack-ai-client' ) } - > - { showButtonLabels ? ( - __( 'Stop', 'jetpack-ai-client' ) - ) : ( - <Icon icon={ closeSmall } /> - ) } - </Button> - ) } - </div> - ) } + ) } + </div> + ) } - { showAccept && ! editRequest && value?.length > 0 && ( - <div className="jetpack-components-ai-control__controls-prompt_button_wrapper"> - <ButtonGroup> - <Button - className="jetpack-components-ai-control__controls-prompt_button" - label={ __( 'Back to edit', 'jetpack-ai-client' ) } - onClick={ () => setEditRequest( true ) } - tooltipPosition="top" - > - <Icon icon={ arrowLeft } /> - </Button> - <Button - className="jetpack-components-ai-control__controls-prompt_button" - label={ __( 'Discard', 'jetpack-ai-client' ) } - onClick={ discardHandler } - tooltipPosition="top" - > - <Icon icon={ trash } /> - </Button> + { showAccept && ! editRequest && value?.length > 0 && ( + <div className="jetpack-components-ai-control__controls-prompt_button_wrapper"> + <ButtonGroup> + <Button + className="jetpack-components-ai-control__controls-prompt_button" + label={ __( 'Back to edit', 'jetpack-ai-client' ) } + onClick={ () => setEditRequest( true ) } + tooltipPosition="top" + > + <Icon icon={ arrowLeft } /> + </Button> + <Button + className="jetpack-components-ai-control__controls-prompt_button" + label={ __( 'Discard', 'jetpack-ai-client' ) } + onClick={ discardHandler } + tooltipPosition="top" + > + <Icon icon={ trash } /> + </Button> + <Button + className="jetpack-components-ai-control__controls-prompt_button" + label={ __( 'Regenerate', 'jetpack-ai-client' ) } + onClick={ () => onSend?.( value ) } + tooltipPosition="top" + > + <Icon icon={ reusableBlock } /> + </Button> + </ButtonGroup> <Button className="jetpack-components-ai-control__controls-prompt_button" - label={ __( 'Regenerate', 'jetpack-ai-client' ) } - onClick={ () => onSend?.( value ) } - tooltipPosition="top" + onClick={ onAccept } + variant="primary" + label={ acceptLabel } > - <Icon icon={ reusableBlock } /> + { showButtonLabels ? acceptLabel : <Icon icon={ check } /> } </Button> - </ButtonGroup> - <Button - className="jetpack-components-ai-control__controls-prompt_button" - onClick={ onAccept } - variant="primary" - label={ acceptLabel } - > - { showButtonLabels ? acceptLabel : <Icon icon={ check } /> } - </Button> - </div> - ) } + </div> + ) } + </div> + { showGuideLine && ! loading && ! editRequest && <GuidelineMessage /> } </div> - { showGuideLine && ! loading && ! editRequest && <GuidelineMessage /> } </div> ); } diff --git a/projects/js-packages/ai-client/src/components/ai-control/style.scss b/projects/js-packages/ai-client/src/components/ai-control/style.scss index 24b7bf26edece..96314a62774be 100644 --- a/projects/js-packages/ai-client/src/components/ai-control/style.scss +++ b/projects/js-packages/ai-client/src/components/ai-control/style.scss @@ -2,6 +2,12 @@ // AI CONTROL +.jetpack-components-ai-control__container-wrapper { + position: sticky; + bottom: 0; + padding-bottom: 16px; +} + .jetpack-components-ai-control__container { color: var( --jp-gray-80 ); background-color: var( --jp-white );