feat(ui): add warning about alpha status of builder

invokeai/frontend/web/public/locales/en.json

@@ -1717,7 +1717,8 @@
             "containerPlaceholder": "Empty Container",
             "containerPlaceholderDesc": "Drag a form element or node field into this container.",
             "headingPlaceholder": "Empty Heading",
-            "textPlaceholder": "Empty Text"
+            "textPlaceholder": "Empty Text",
+            "workflowBuilderAlphaWarning": "The workflow builder is currently in alpha. There may be breaking changes before the stable release."
         }
     },
     "controlLayers": {

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/WorkflowBuilder.tsx

@@ -1,6 +1,6 @@
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { Button, ButtonGroup, Flex, Spacer, Text } from '@invoke-ai/ui-library';
+import { Alert, AlertDescription, AlertIcon, Button, ButtonGroup, Flex, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { firefoxDndFix } from 'features/dnd/util';
@@ -18,6 +18,7 @@ import { startCase } from 'lodash-es';
 import type { RefObject } from 'react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
 import { assert } from 'tsafe';
 
 export const WorkflowBuilder = memo(() => {
@@ -34,13 +35,19 @@ export const WorkflowBuilder = memo(() => {
     <ScrollableContent>
       <Flex justifyContent="center" w="full" h="full">
         <Flex flexDir="column" w="full" h="full" maxW="768px" gap={4}>
+          <Alert status="warning" variant="subtle" borderRadius="base">
+            <AlertIcon />
+            <AlertDescription fontSize="sm">{t('workflows.builder.workflowBuilderAlphaWarning')}</AlertDescription>
+          </Alert>
           <ButtonGroup isAttached={false} justifyContent="center">
             <AddFormElementDndButton type="container" />
             <AddFormElementDndButton type="divider" />
             <AddFormElementDndButton type="heading" />
             <AddFormElementDndButton type="text" />
             <Spacer />
-            <Button onClick={resetForm}>{t('common.reset')}</Button>
+            <Button onClick={resetForm} variant="ghost" leftIcon={<PiArrowCounterClockwiseBold />}>
+              {t('common.reset')}
+            </Button>
           </ButtonGroup>
           {!isEmpty && <FormLayout />}
           {isEmpty && <EmptyStateEditMode />}