feat: preview and create steps from chat

kevinkim-ogp · kevinkim-ogp · commit 7b07358cb8b2 · 2025-12-09T21:28:15.000+08:00
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/pages/AiBuilder/components/ChatInterface/SideDrawer.tsx b/packages/frontend/src/pages/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/pages/AiBuilder/components/ChatInterface/index.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatInterface/index.tsx
@@ -1,17 +1,28 @@
 import { useEffect, useRef, useState } from 'react'
 import { IoChevronDown } from 'react-icons/io5'
+import { useNavigate } from 'react-router-dom'
 import { Box, Flex, IconButton, Text } from '@chakra-ui/react'
+import { 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 '@/pages/AiBuilder/AiBuilderContext'
 import ChatMessages from '@/pages/AiBuilder/components/ChatMessages'
 
 import PromptInput from './PromptInput'
+import SideDrawer from './SideDrawer'
 
 export default function ChatInterface() {
+  const navigate = useNavigate()
+  const isMobile = useIsMobile()
+  const { flowName, formInput } = 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
@@ -56,7 +67,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 (formInput?.trigger !== trigger || formInput?.actions !== actions) {
+      navigate(`${URLS.EDITOR}/ai`, {
+        state: {
+          flowName,
+          isFormMode: false,
+          formInput: {
+            trigger,
+            actions,
+          },
+        },
+        replace: true,
+      })
+    }
+    setIsDrawerOpen(true)
   }
 
   // Initial empty state - centered layout
@@ -89,14 +120,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
@@ -149,7 +181,10 @@ export default function ChatInterface() {
         </Box>
       </Flex>
 
-      {/* TODO: Add Side Drawer */}
+      <SideDrawer
+        isOpen={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+      />
     </Flex>
   )
 }
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/PreviewStepsButton.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/PreviewStepsButton.tsx
@@ -0,0 +1,53 @@
+import { MdOutlineRemoveRedEye } from 'react-icons/md'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { Box, Flex } from '@chakra-ui/react'
+import { Button } from '@opengovsg/design-system-react'
+
+import { Message } from '@/hooks/useChatStream'
+import { ChakraStreamdown } from '@/theme/components/Streamdown'
+
+import PlumberAvatar from './PlumberAvatar'
+
+const PreviewStepsButton = ({
+  messages,
+  onOpenDrawer,
+}: {
+  messages: Message[]
+  onOpenDrawer: () => void
+}) => {
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  return (
+    <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={() => {
+            navigate(location.pathname, {
+              state: {
+                ...location.state,
+                chatInput: messages[messages.length - 1].text,
+                chatMessages: messages,
+              },
+              replace: true,
+            })
+            onOpenDrawer()
+          }}
+          mt={2}
+          leftIcon={<MdOutlineRemoveRedEye />}
+          bg="white"
+        >
+          Preview steps
+        </Button>
+      </Box>
+    </Flex>
+  )
+}
+
+export default PreviewStepsButton
diff --git a/packages/frontend/src/pages/AiBuilder/components/ChatMessages/index.tsx b/packages/frontend/src/pages/AiBuilder/components/ChatMessages/index.tsx
@@ -3,6 +3,7 @@ import { Box, Flex, VStack } from '@chakra-ui/react'
 import { Message } from '@/hooks/useChatStream'
 
 import ChatMessage from './ChatMessage'
+import PreviewStepsButton from './PreviewStepsButton'
 import StreamingMessage from './StreamingMessage'
 
 interface ChatMessagesProps {
@@ -21,7 +22,8 @@ export default function ChatMessages({
   isStreaming,
   messagesEndRef,
   messagesContainerRef,
-  onOpenDrawer: _onOpenDrawer, // TODO: Implement preview drawer
+  hasMessages,
+  onOpenDrawer: onOpenDrawer,
 }: ChatMessagesProps) {
   return (
     <Flex
@@ -37,6 +39,13 @@ export default function ChatMessages({
             <ChatMessage key={index} message={message} />
           ))}
 
+          {hasMessages && !isStreaming && (
+            <PreviewStepsButton
+              messages={messages}
+              onOpenDrawer={onOpenDrawer}
+            />
+          )}
+
           {/* Streaming response */}
           {isStreaming && (
             <StreamingMessage currentResponse={currentResponse} />
diff --git a/packages/frontend/src/pages/AiBuilder/components/StepsPreview/index.tsx b/packages/frontend/src/pages/AiBuilder/components/StepsPreview/index.tsx
@@ -1,6 +1,6 @@
 import { IStepConfig } from '@plumber/types'
 
-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 {
@@ -54,6 +54,7 @@ export default function StepsPreview() {
     ddSessionId,
   } = useAiBuilderContext()
 
+  const [error, setError] = useState<boolean>(false)
   const { isOpen, onClose, onOpen } = useDisclosure()
   const isMobile = useIsMobile()
   const navigate = useNavigate()
@@ -187,7 +188,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
@@ -269,12 +282,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/pages/AiBuilder/index.tsx b/packages/frontend/src/pages/AiBuilder/index.tsx
@@ -3,7 +3,6 @@ import { BiChevronLeft } from 'react-icons/bi'
 import { Link, useLocation } from 'react-router-dom'
 import { Box, Container, Flex, HStack, Icon, Text } from '@chakra-ui/react'
 
-import { EDITOR_MARGIN_TOP } from '@/components/Editor/constants'
 import * as URLS from '@/config/urls'
 import InvalidEditorPage from '@/pages/Editor/components/InvalidEditorPage'
 
@@ -61,7 +60,7 @@ function AiBuilderContent() {
           maxW="full"
           px={0}
           py={isFormMode ? 10 : 0}
-          mt={EDITOR_MARGIN_TOP}
+          mt="51.5px"
           flex={1}
           overflowY="auto"
           sx={{
