chore: design feedback

Author: kevinkim-ogp

packages/frontend/src/components/AiBuilder/components/ChatInterface/PromptInput.tsx

@@ -67,14 +67,12 @@ export default function PromptInput({
         bg="white"
         border="1px"
         borderColor="gray.200"
-        borderRadius="3xl"
-        boxShadow="lg"
-        _hover={{ boxShadow: 'xl' }}
-        transition="box-shadow 0.2s"
+        borderRadius="16px"
+        boxShadow="sm"
         p={2}
         w="full"
-        minH="50px"
-        style={{ height: 'auto' }}
+        minH={showIdeas ? '120px' : '50px'}
+        height="auto"
         mb={3}
       >
         <Textarea
@@ -95,7 +93,6 @@ export default function PromptInput({
           _disabled={{ opacity: 1, bg: 'transparent', color: 'gray.900' }}
           fontSize="base"
           lineHeight="6"
-          minH="50px"
           maxH="calc(40vh - 100px)"
           rows={1}
           overflowY="auto"

packages/frontend/src/components/AiBuilder/components/ChatInterface/index.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
-import { BiSolidMagicWand } from 'react-icons/bi'
 import { IoChevronDown } from 'react-icons/io5'
-import { Box, Flex, Icon, IconButton, Text } from '@chakra-ui/react'
-import { Tag } from '@opengovsg/design-system-react'
+import { Box, Flex, IconButton, Text } from '@chakra-ui/react'
 
 import { useChatStream } from '@/hooks/useChatStream'
 
@@ -74,19 +72,7 @@ export default function ChatInterface() {
         px={4}
       >
         {messages.length === 0 && (
-          <>
-            <Tag
-              colorScheme="secondary"
-              _hover={{}}
-              _active={{}}
-              gap={2}
-              size="lg"
-            >
-              <Icon as={BiSolidMagicWand} />
-              Build with AI
-            </Tag>
-            <Text textStyle="h3">What happens in your workflow?</Text>
-          </>
+          <Text textStyle="h3">What happens in your workflow?</Text>
         )}
         <Box w="full" maxW="2xl" overflowY="auto" maxH="100vh">
           <PromptInput

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

@@ -1,5 +1,7 @@
 import { Flex, Text } from '@chakra-ui/react'
-import { Button, FormLabel } from '@opengovsg/design-system-react'
+import { Button, FormLabel, useIsMobile } from '@opengovsg/design-system-react'
+
+import { TemplateIcon } from '@/helpers/flow-templates'
 
 import { AiChatIdea, AiFormIdea } from '../constants'
 
@@ -9,26 +11,40 @@ interface IdeaButtonsProps {
 }
 
 export default function IdeaButtons({ ideas, onClick }: IdeaButtonsProps) {
+  const isMobile = useIsMobile()
+
   return (
     <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">
+      <Flex
+        flexDir="row"
+        gap={2}
+        justifyContent="space-between"
+        flexWrap="wrap"
+      >
         {ideas.map((idea) => (
           <Button
             key={idea.label}
-            size="xs"
-            bgColor="interaction.muted.main.active"
-            color="primary.500"
+            size="sm"
+            bgColor="interaction.sub-subtle.default"
+            color="#5D6785"
             variant="clear"
             _hover={{
-              bgColor: 'primary.200',
+              bgColor: 'interaction.sub-subtle.hover',
             }}
             onClick={() => onClick(idea)}
+            px={3}
+            minH={4}
+            w={isMobile ? 'calc(50% - 4px)' : 'auto'}
+            flexShrink={0}
           >
-            <Text textStyle="caption-1">{idea.label}</Text>
+            <TemplateIcon iconName={idea.icon} fontSize="1rem" />
+            <Text textStyle="caption-1" ml="0.25rem">
+              {idea.label}
+            </Text>
           </Button>
         ))}
       </Flex>

packages/frontend/src/components/AiBuilder/constants.ts

@@ -18,59 +18,69 @@ export const AI_FORM_FIELDS = [
 export const AI_FORM_IDEAS = [
   {
     label: 'Route support enquiries',
+    icon: 'BiDirections',
     trigger: 'When a new support enquiry is submitted',
     actions:
       'If the query is related to IT, route to the IT department.\nIf the query is related to HR, route to the HR department.\nIf the query is related to Finance, route to the Finance department.',
   },
   {
     label: 'Schedule reminders',
+    icon: 'BiCalendar',
     trigger: 'Every day at 09:00 AM',
     actions:
       'Find rows in Tiles where the RSVPed column is Yes and the Reminder sent column is empty.\nFor each row, send a reminder email to the attendee.\nMark the row as Reminder sent.',
   },
   {
     label: 'Attendance taking',
+    icon: 'BiCheckDouble',
     trigger: 'When a new event attendance is received',
     actions:
       "Find the attendee in Tiles\nIf the attendee is found, update the Attended? column to Yes\nIf the attendee is not found, create a new row in Tiles with the attendee's details.",
   },
   {
     label: 'Send follow ups',
+    icon: 'BiEnvelope',
     trigger: 'When a new form submission is received',
     actions: 'Send a follow up email to the customer.',
   },
 ]
 
 export type AiFormIdea = {
   label: string
+  icon: string
   trigger: string
   actions: string
 }
 
 export const AI_CHAT_IDEAS = [
   {
     label: 'Route support enquiries',
+    icon: 'BiDirections',
     input:
       'When a new support enquiry is submitted, if the query is related to IT, route to the IT department. If the query is related to HR, route to the HR department. If the query is related to Finance, route to the Finance department.',
   },
   {
     label: 'Schedule reminders',
+    icon: 'BiCalendar',
     input:
       'Every day at 09:00 AM, find rows in Tiles where the RSVPed column is Yes and the Reminder sent column is empty. For each row, send a reminder email to the attendee. Mark the row as Reminder sent.',
   },
   {
     label: 'Attendance taking',
+    icon: 'BiCheckDouble',
     input:
       "When a new event attendance is received, find the attendee in Tiles. If the attendee is found, update the Attended? column to Yes. If the attendee is not found, create a new row in Tiles with the attendee's details.",
   },
   {
     label: 'Send follow ups',
+    icon: 'BiEnvelope',
     input:
       'When a new form submission is received, send a follow up email to the customer.',
   },
 ]
 
 export type AiChatIdea = {
   label: string
+  icon: string
   input: string
 }