feat: mfb v1.1 accept-deny re-prompt

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx

@@ -1,9 +1,14 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { BiSearch } from 'react-icons/bi'
 import {
   Box,
   Divider,
   Flex,
+  Icon,
+  Input,
+  InputGroup,
+  InputLeftElement,
   TabList,
   TabPanel,
   TabPanels,
@@ -24,7 +29,32 @@ import {
   MyInfoFieldPanel,
   PaymentsInputPanel,
 } from './field-panels'
-import { FieldSearchBar } from './FieldSearchBar'
+import { MagicFormBuilderContainer } from './MagicFormBuilderContainer'
+
+const FieldSearchBar = ({
+  searchValue,
+  onChange,
+}: {
+  searchValue: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}) => {
+  return (
+    <>
+      <InputGroup>
+        <InputLeftElement>
+          <Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
+        </InputLeftElement>
+        <Input
+          mr="0.5rem"
+          value={searchValue}
+          onChange={onChange}
+          placeholder="Search fields"
+        />
+        <MagicFormBuilderContainer />
+      </InputGroup>
+    </>
+  )
+}
 
 export const FieldListDrawer = (): JSX.Element => {
   const { t } = useTranslation()

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/MagicFormBuilderContainer.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { BiSolidMagicWand } from 'react-icons/bi'
+import { HiSparkles } from 'react-icons/hi2'
+import {
+  Button,
+  Flex,
+  FormControl,
+  Icon,
+  Popover,
+  PopoverAnchor,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  Portal,
+  Text,
+  Textarea,
+  Tooltip,
+} from '@chakra-ui/react'
+
+import { useIsMobile } from '~hooks/useIsMobile'
+import { FormErrorMessage } from '~components/FormControl/FormErrorMessage/FormErrorMessage'
+
+import { useAssistanceMutations } from '~features/admin-form/assistance/mutations'
+
+const GENERATE_FORM_PLACEHOLDER =
+  'Describe form, fields and sections to create...'
+
+export const MagicFormBuilderContainer = () => {
+  const isMobile = useIsMobile()
+  const [isOpen, setIsOpen] = useState(false)
+
+  return !isMobile ? (
+    <>
+      <MagicFormBuilderPopover isOpen={isOpen} setIsOpen={setIsOpen} />
+    </>
+  ) : null
+}
+
+const MagicFormBuilderButton = ({
+  onClick,
+  ...styleProps
+}: { onClick: () => void } & React.ComponentProps<typeof Button>) => {
+  return (
+    <Tooltip openDelay={500} hasArrow label="Create fields with AI">
+      <Button
+        onClick={onClick}
+        padding="0"
+        backgroundColor="primary.200"
+        _hover={{
+          backgroundColor: 'primary.300',
+        }}
+        borderWidth={0}
+        {...styleProps}
+      >
+        <Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
+      </Button>
+    </Tooltip>
+  )
+}
+
+interface TextPromptInputs {
+  prompt: string
+}
+
+const MagicFormBuilderPopover = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TextPromptInputs>()
+
+  const { useMakeTextPromptMutation } = useAssistanceMutations()
+
+  const onSubmit = async ({ prompt }: TextPromptInputs) => {
+    useMakeTextPromptMutation.mutate(prompt, {
+      onSettled: () => setIsOpen(false),
+    })
+  }
+
+  return (
+    <Popover placement="right" isOpen={isOpen}>
+      <PopoverAnchor>
+        <MagicFormBuilderButton onClick={() => setIsOpen(!isOpen)} />
+      </PopoverAnchor>
+      <Portal>
+        {/* TODO: (MFBv1.1) Fix the position of the popover. */}
+        <PopoverContent bg="white" top="15vh" left="40vw">
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <PopoverHeader>
+              <Text textStyle="h4">Generate form</Text>
+            </PopoverHeader>
+            <PopoverCloseButton onClick={() => setIsOpen(false)} />
+            <PopoverBody>
+              <FormControl isRequired isInvalid={false}>
+                <Textarea
+                  placeholder={GENERATE_FORM_PLACEHOLDER}
+                  {...register('prompt', {
+                    required: 'Please enter a prompt.',
+                    maxLength: {
+                      value: 30,
+                      message: 'Please enter at most 500 characters.',
+                    },
+                  })}
+                />
+                <FormErrorMessage>{errors.prompt?.message}</FormErrorMessage>
+              </FormControl>
+            </PopoverBody>
+            <PopoverFooter>
+              <Flex justifyContent="flex-end">
+                <Button
+                  leftIcon={<HiSparkles fontSize="1.5rem" />}
+                  type="submit"
+                  isLoading={useMakeTextPromptMutation.isLoading}
+                >
+                  Generate
+                </Button>
+              </Flex>
+            </PopoverFooter>
+          </form>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  )
+}

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { Box } from '@chakra-ui/react'
 import { Droppable } from '@hello-pangea/dnd'