chore: refactor to use idea buttons

Author: kevinkim-ogp

packages/frontend/src/components/AiBuilder/components/AIFormModalContent.tsx

@@ -18,9 +18,16 @@ import { FormLabel, useIsMobile } from '@opengovsg/design-system-react'
 import pairLogo from '@/assets/pair-logo.svg'
 import { ImageBox } from '@/components/FlowStepConfigurationModal/ChooseAndAddConnection/ConfigureExcelConnection'
 
-import { AI_FORM_FIELDS, AI_FORM_IDEAS } from '../constants'
+import {
+  AI_FORM_FIELDS,
+  AI_FORM_IDEAS,
+  AiChatIdea,
+  AiFormIdea,
+} from '../constants'
 import { AI_FORM_SCHEMA, AiFormData } from '../schema'
 
+import IdeaButtons from './IdeaButtons'
+
 export const AIFormModalContent = ({
   flowName,
   trigger,
@@ -52,9 +59,9 @@ export const AIFormModalContent = ({
     },
   })
 
-  const handleIdeaClick = (idea: (typeof AI_FORM_IDEAS)[number]) => {
-    setValue('trigger', idea.trigger, { shouldValidate: true })
-    setValue('actions', idea.actions, { shouldValidate: true })
+  const handleIdeaClick = (idea: AiChatIdea | AiFormIdea) => {
+    setValue('trigger', (idea as AiFormIdea).trigger, { shouldValidate: true })
+    setValue('actions', (idea as AiFormIdea).actions, { shouldValidate: true })
   }
 
   return (
@@ -85,44 +92,24 @@ export const AIFormModalContent = ({
                 )}
               </FormControl>
             ))}
-            <Flex flexDir="column">
-              <FormLabel isRequired>
-                {/* arbitrary isRequired to hide optional text */}
-                Need inspiration? Try one of these:
-              </FormLabel>
-              <Flex
-                flexDir="row"
-                gap={2}
-                justifyContent="space-between"
-                flexWrap="wrap"
-              >
-                {AI_FORM_IDEAS.map((idea) => (
-                  <Button
-                    key={idea.label}
-                    size="xs"
-                    bgColor="interaction.muted.main.active"
-                    color="primary.500"
-                    variant="clear"
-                    _hover={{
-                      bgColor: 'primary.200',
-                    }}
-                    onClick={() => handleIdeaClick(idea)}
-                    w={isMobile ? 'calc(50% - 4px)' : 'auto'}
-                    flexShrink={0}
-                  >
-                    <Text textStyle="caption-1">{idea.label}</Text>
-                  </Button>
-                ))}
-              </Flex>
-            </Flex>
+            {type === 'create' && (
+              <IdeaButtons
+                ideas={AI_FORM_IDEAS}
+                onClick={(idea: AiChatIdea | AiFormIdea) =>
+                  handleIdeaClick(idea)
+                }
+              />
+            )}
           </Flex>
         </ModalBody>
         <ModalFooter>
           <Flex justifyContent="space-between" alignItems="center" w="100%">
-            <Flex gap={1} alignItems="center">
-              <Text textStyle="body-1">Powered by </Text>
-              <ImageBox imageUrl={pairLogo} boxSize={10} />
-            </Flex>
+            {!isMobile && (
+              <Flex gap={1} alignItems="center" justifyContent="center">
+                <Text textStyle="body-1">Powered by </Text>
+                <ImageBox imageUrl={pairLogo} boxSize={10} />
+              </Flex>
+            )}
             <Flex gap={4}>
               <Button variant="clear" colorScheme="secondary" onClick={onBack}>
                 Back