feat: preview and create steps from chat

kevinkim-ogp · kevinkim-ogp · commit 0712c8ee6c38 · 2025-11-06T11:44:05.000+08:00
diff --git a/packages/frontend/src/components/AiBuilder/components/ChatInterface/ChatMessageToolbar.tsx b/packages/frontend/src/components/AiBuilder/components/ChatInterface/ChatMessageToolbar.tsx
@@ -1,5 +1,6 @@
 import { FaRegCopy, FaRegThumbsDown } from 'react-icons/fa'
 import { FaCheck } from 'react-icons/fa6'
+import { MdOutlineRemoveRedEye } from 'react-icons/md'
 import { Flex, Icon, IconButton, Tooltip } from '@chakra-ui/react'
 
 import { Message } from '@/hooks/useChatStream'
@@ -24,6 +25,7 @@ export default function ChatMessageToolbar({
   index,
   copiedIndex,
   setCopiedIndex,
+  onOpenDrawer,
 }: ChatMessageToolbarProps) {
   const handleCopy = async (text: string, index: number) => {
     await navigator.clipboard.writeText(text)
@@ -56,7 +58,15 @@ export default function ChatMessageToolbar({
           onClick={() => handleCopy(message.text, index)}
         />
       </Tooltip>
-      {/* TODO: Add preview button */}
+
+      <Tooltip label="Preview this workflow" placement="top">
+        <IconButton
+          {...DEFAULT_BUTTON_PROPS}
+          aria-label="Preview this workflow"
+          icon={<Icon as={MdOutlineRemoveRedEye} />}
+          onClick={onOpenDrawer}
+        />
+      </Tooltip>
     </Flex>
   )
 }
diff --git a/packages/frontend/src/components/AiBuilder/components/ChatInterface/ChatMessages.tsx b/packages/frontend/src/components/AiBuilder/components/ChatInterface/ChatMessages.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react'
+import { MdOutlineRemoveRedEye } from 'react-icons/md'
 import { Box, Flex, Image, ImageProps, Text, VStack } from '@chakra-ui/react'
+import { Button } from '@opengovsg/design-system-react'
 
 import plumberLogo from '@/assets/plumber-logo.svg'
 import { Message } from '@/hooks/useChatStream'
@@ -56,6 +58,7 @@ export default function ChatMessages({
   isStreaming,
   messagesEndRef,
   messagesContainerRef,
+  hasMessages,
   onOpenDrawer,
 }: ChatMessagesProps) {
   const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
@@ -107,6 +110,26 @@ export default function ChatMessages({
             </Box>
           ))}
 
+          {hasMessages && !isStreaming && (
+            <Flex gap={3} w="full" align="start">
+              <PlumberAvatar />
+              <Box flex={1} color="gray.900">
+                <ChakraStreamdown isAnimating={false}>
+                  Satisfied with your workflow?
+                </ChakraStreamdown>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onOpenDrawer}
+                  mt={2}
+                  leftIcon={<MdOutlineRemoveRedEye />}
+                >
+                  Preview the steps
+                </Button>
+              </Box>
+            </Flex>
+          )}
+
           {/* Streaming response */}
           {isStreaming && (
             <StreamingMessage currentResponse={currentResponse} />
diff --git a/packages/frontend/src/components/AiBuilder/components/ChatInterface/SideDrawer.tsx b/packages/frontend/src/components/AiBuilder/components/ChatInterface/SideDrawer.tsx
@@ -0,0 +1,53 @@
+import { FaTimes } from 'react-icons/fa'
+import { Box, Flex, Icon, IconButton, Text } from '@chakra-ui/react'
+import { useIsMobile } from '@opengovsg/design-system-react'
+
+import StepsPreview from '../StepsPreview'
+
+interface SideDrawerProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function SideDrawer({ isOpen, onClose }: SideDrawerProps) {
+  const isMobile = useIsMobile()
+
+  return (
+    <Box
+      position="absolute"
+      right={0}
+      top={0}
+      w={isMobile ? '100%' : '50%'}
+      h="100%"
+      bg="white"
+      borderLeft={isMobile ? 'none' : '1px'}
+      borderColor="gray.200"
+      transform={isOpen ? 'translateX(0)' : 'translateX(100%)'}
+      transition="transform 0.3s ease-in-out"
+      zIndex={10}
+      pointerEvents={isOpen ? 'auto' : 'none'}
+      visibility={isOpen ? 'visible' : 'hidden'}
+    >
+      <Flex h="100%" flexDir="column" px={6} w="full">
+        {/* Header */}
+        <Flex justify="space-between" align="center" py={4}>
+          <Text fontSize="xl" fontWeight="bold">
+            Workflow preview
+          </Text>
+          <IconButton
+            aria-label="Close drawer"
+            icon={<Icon as={FaTimes} />}
+            onClick={onClose}
+            variant="clear"
+            size="sm"
+          />
+        </Flex>
+
+        {/* Content */}
+        <Box flex={1} overflowY="auto" pb={4}>
+          <StepsPreview />
+        </Box>
+      </Flex>
+    </Box>
+  )
+}
diff --git a/packages/frontend/src/components/AiBuilder/components/ChatInterface/index.tsx b/packages/frontend/src/components/AiBuilder/components/ChatInterface/index.tsx
@@ -1,19 +1,30 @@
 import { useEffect, useRef, useState } from 'react'
 import { BiSolidMagicWand } from 'react-icons/bi'
 import { IoChevronDown } from 'react-icons/io5'
+import { useNavigate } from 'react-router-dom'
 import { Box, Flex, Icon, IconButton, Text } from '@chakra-ui/react'
-import { Tag } from '@opengovsg/design-system-react'
+import { Tag, useIsMobile } from '@opengovsg/design-system-react'
 
+import { parseWorkflow } from '@/components/AiBuilder/helpers/parseMarkdown'
+import * as URLS from '@/config/urls'
 import { useChatStream } from '@/hooks/useChatStream'
 
+import { useAiBuilderContext } from '../AiBuilderContext'
+
 import ChatMessages from './ChatMessages'
 import PromptInput from './PromptInput'
+import SideDrawer from './SideDrawer'
 
 export default function ChatInterface() {
+  const navigate = useNavigate()
+  const isMobile = useIsMobile()
+  const { flowName, inputPrompt } = useAiBuilderContext()
+
   const { messages, currentResponse, isStreaming, sendMessage, cancelStream } =
     useChatStream()
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [showScrollButton, setShowScrollButton] = useState(false)
 
   // Check if user is near bottom of scroll
@@ -58,7 +69,27 @@ export default function ChatInterface() {
   const hasMessages = messages.length > 0 || isStreaming
 
   const handleOpenPreview = () => {
-    // TODO: implement steps preview
+    const { trigger, actions } = parseWorkflow(
+      messages[messages.length - 1].text,
+    )
+
+    // NOTE: only need to update the location state if there has been changes
+    // if the user just closed and open the side drawer, we don't need to update
+    // as we don't want to generate the ai steps again
+    if (inputPrompt?.trigger !== trigger || inputPrompt?.actions !== actions) {
+      navigate(`${URLS.EDITOR}/ai`, {
+        state: {
+          flowName,
+          isFormMode: false,
+          inputPrompt: {
+            trigger,
+            actions,
+          },
+        },
+        replace: true,
+      })
+    }
+    setIsDrawerOpen(true)
   }
 
   // Initial empty state - centered layout
@@ -102,14 +133,15 @@ export default function ChatInterface() {
 
   // Chat layout - messages with input at bottom
   return (
-    <Flex h="100%" w="full" position="relative">
+    <Flex h="100%" w="full" position="relative" overflow="hidden">
       {/* Main Chat Area */}
       <Flex
         h="100%"
-        w="100%"
+        w="full"
         flexDir="column"
-        transition="width 0.3s ease-in-out"
         position="relative"
+        pr={isDrawerOpen && !isMobile ? '50%' : '0'}
+        transition="padding-right 0.3s ease-in-out"
       >
         {/* Messages Area */}
         <ChatMessages
@@ -162,7 +194,10 @@ export default function ChatInterface() {
         </Box>
       </Flex>
 
-      {/* TODO: Add Side Drawer */}
+      <SideDrawer
+        isOpen={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+      />
     </Flex>
   )
 }
diff --git a/packages/frontend/src/components/AiBuilder/components/IdeaButtons.tsx b/packages/frontend/src/components/AiBuilder/components/IdeaButtons.tsx
@@ -1,5 +1,5 @@
 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 { AiChatIdea, AiFormIdea } from '../constants'
 
@@ -9,13 +9,20 @@ 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={isMobile ? 'row' : 'row'}
+        gap={2}
+        justifyContent="space-between"
+        flexWrap="wrap"
+      >
         {ideas.map((idea) => (
           <Button
             key={idea.label}
@@ -27,6 +34,8 @@ export default function IdeaButtons({ ideas, onClick }: IdeaButtonsProps) {
               bgColor: 'primary.200',
             }}
             onClick={() => onClick(idea)}
+            w={isMobile ? 'calc(50% - 4px)' : 'auto'}
+            flexShrink={0}
           >
             <Text textStyle="caption-1">{idea.label}</Text>
           </Button>
diff --git a/packages/frontend/src/components/AiBuilder/components/StepsPreview.tsx b/packages/frontend/src/components/AiBuilder/components/StepsPreview.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
 import {
@@ -89,8 +89,11 @@ export default function StepsPreview() {
     groupedSteps,
     stepGroupType,
     stepGroupCaption,
+    isFormMode,
   } = useAiBuilderContext()
 
+  const [error, setError] = useState<boolean>(false)
+
   const [generateAiStepsMutation, { loading: isGeneratingSteps }] =
     useMutation(GENERATE_AI_STEPS)
 
@@ -99,22 +102,30 @@ export default function StepsPreview() {
   const navigate = useNavigate()
 
   const generateAiSteps = useCallback(async () => {
-    const { data } = await generateAiStepsMutation({
-      variables: {
-        input: {
-          trigger: inputPrompt.trigger,
-          actions: inputPrompt.actions,
+    if (!inputPrompt) {
+      return
+    }
+
+    try {
+      const { data } = await generateAiStepsMutation({
+        variables: {
+          input: {
+            trigger: inputPrompt.trigger,
+            actions: inputPrompt.actions,
+          },
         },
-      },
-    })
+      })
 
-    navigate(location.pathname, {
-      state: {
-        ...location.state,
-        output: data?.generateAiSteps,
-      },
-      replace: true, // Use replace to avoid adding to history
-    })
+      navigate(location.pathname, {
+        state: {
+          ...location.state,
+          output: data?.generateAiSteps,
+        },
+        replace: true, // Use replace to avoid adding to history
+      })
+    } catch {
+      setError(true)
+    }
   }, [
     generateAiStepsMutation,
     inputPrompt,
@@ -210,7 +221,19 @@ export default function StepsPreview() {
   if (isGeneratingSteps || !output) {
     return (
       <Center h="100%">
-        {output && !isGeneratingSteps ? (
+        {error ? (
+          <Flex
+            flexDir="column"
+            alignItems="center"
+            justifyContent="center"
+            gap={4}
+            w="100%"
+            maxW="400px"
+          >
+            <Text>Something went wrong</Text>
+            <Button onClick={() => setError(false)}>Try again</Button>
+          </Flex>
+        ) : output && !isGeneratingSteps ? (
           <PrimarySpinner fontSize="4xl" />
         ) : (
           <MultiStepLoader
@@ -296,12 +319,21 @@ export default function StepsPreview() {
           </GroupedStepContainer>
         )}
         <VStack mt={10} gap={2}>
-          <Text textStyle="subhead-2">How does this workflow look?</Text>
+          {isFormMode ? (
+            <Text textStyle="subhead-2">How does this workflow look?</Text>
+          ) : (
+            <Text textStyle="body-1">Looks good?</Text>
+          )}
           <HStack alignItems="center" justifyContent="center" gap={2}>
-            <Button variant="outline" onClick={onOpen}>
-              Make changes
-            </Button>
-            <Button variant="outline" onClick={onCreateFlow}>
+            {isFormMode && (
+              <Button variant="outline" onClick={onOpen}>
+                Make changes
+              </Button>
+            )}
+            <Button
+              variant={isFormMode ? 'outline' : 'solid'}
+              onClick={onCreateFlow}
+            >
               Create this workflow
             </Button>
           </HStack>
diff --git a/packages/frontend/src/components/AiBuilder/helpers/parseMarkdown.ts b/packages/frontend/src/components/AiBuilder/helpers/parseMarkdown.ts
@@ -0,0 +1,24 @@
+function parseWorkflow(markdownText: string) {
+  const result = {
+    trigger: '',
+    actions: '',
+  }
+
+  // Extract trigger section (everything between "#### Start the workflow" and "#### Actions")
+  const triggerMatch = markdownText.match(
+    /#### Start the workflow\s+([\s\S]*?)#### Actions/,
+  )
+  if (triggerMatch) {
+    result.trigger = triggerMatch[1].trim()
+  }
+
+  // Extract actions section (everything after "#### Actions")
+  const actionsMatch = markdownText.match(/#### Actions\s+([\s\S]*)/)
+  if (actionsMatch) {
+    result.actions = actionsMatch[1].trim()
+  }
+
+  return result
+}
+
+export { parseWorkflow }
diff --git a/packages/frontend/src/components/AiBuilder/index.tsx b/packages/frontend/src/components/AiBuilder/index.tsx
