feat: http-request dialog

Author: hi02102002

client/src/app.tsx

@@ -1,5 +1,3 @@
-import { Outlet, createBrowserRouter, redirect } from 'react-router-dom'
-import i18n from './i18n'
 import {
   Channels,
   ChatBotDetail,
@@ -11,17 +9,18 @@ import {
   Register,
   SetPassword,
 } from '@/pages'
+import { Outlet, createBrowserRouter, redirect } from 'react-router-dom'
 
 import {
   AppLayout,
   AuthLayout,
   PublishLayout,
   SettingLayout,
 } from '@/components/layouts'
-import { ROUTES } from './constants'
-import Help from './pages/help'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { Suspense } from 'react'
 import PageLoading from './components/page-loading'
+import { ROUTES } from './constants'
 import {
   appLoader,
   articleLoader,
@@ -32,8 +31,8 @@ import {
   flowsLoader,
   settingLoader,
 } from './lib/loader'
+import Help from './pages/help'
 import HelpDetail from './pages/help-detail'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const App = () => {
   return (

client/src/components/forms/card.tsx

@@ -28,7 +28,11 @@ type Props = {
   defaultValue?: TCardInput
 }
 
-export const CardForm = ({ defaultValue, id, onSubmit }: Props) => {
+export const CardForm = ({
+  defaultValue,
+  id = 'card-form',
+  onSubmit,
+}: Props) => {
   const schema = useCardInputSchema()
   const { t } = useTranslation(['forms', 'flowDetail'])
   const form = useForm<TCardInput>({
@@ -71,7 +75,7 @@ export const CardForm = ({ defaultValue, id, onSubmit }: Props) => {
     <Form {...form}>
       <form
         className='space-y-3'
-        id='card-form'
+        id={id}
         onSubmit={form.handleSubmit(handleSubmit)}
       >
         <FormField

client/src/components/forms/variables-setting.tsx

@@ -54,6 +54,17 @@ const parseVariableValue = (value: string, type: string) => {
   return value
 }
 
+const stringifyVariableValue = (value: any, type: string) => {
+  if (type === 'array')
+    return JSON.stringify(value)
+      .replace('[', '')
+      .replace(']', '')
+      .replace(/"/g, '')
+
+  if (type === 'object') return JSON.stringify(value, null, 2)
+  return JSON.stringify(value)
+}
+
 export const VariablesSettingForm = ({
   id = 'variables-setting-form',
   onSubmit,
@@ -68,7 +79,7 @@ export const VariablesSettingForm = ({
       ...defaultValues,
       variables: defaultValues?.variables?.map((variable) => ({
         ...variable,
-        value: JSON.stringify(variable.value).replace(/"/g, ''),
+        value: stringifyVariableValue(variable.value, variable.type as string),
       })),
     },
   })

client/src/components/pages/flow-detail/condition-dialog.tsx

@@ -1,6 +1,6 @@
 type Props = {}
 
-const ConditionDialog = (props: Props) => {
+const ConditionDialog = (_props: Props) => {
   return <div>ConditionDialog</div>
 }
 

client/src/components/pages/flow-detail/constant.tsx

@@ -1,5 +1,5 @@
 import i18n from '@/i18n'
-import { EActionTypes, EMessageTypes } from '@/types/flow'
+import { EActionTypes, EGrammarTypes, EMessageTypes } from '@/types/flow'
 import {
   Bolt,
   GitPullRequest,
@@ -11,7 +11,13 @@ import {
   Workflow,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { CheckVariablesContent, MessageDialogContent } from './node-dialog'
+import {
+  CheckVariablesContent,
+  HttpRequestDialogContent,
+  MessageDialogContent,
+  PromptAndCollectDialogContent,
+  SubFlowContent,
+} from './node-dialog'
 
 export const MAP_ACTION_TO_LABEL: Record<EActionTypes, string> = {
   [EActionTypes.MESSAGE]: i18n.t('flowDetail:actions.items.message') as string,
@@ -70,7 +76,7 @@ export const MAP_ACTION: Record<
   [EActionTypes.PROMPT_AND_COLLECT]: {
     icon: () => <HelpCircle className='w-4 h-4' />,
     label: 'Prompt and collect',
-    dialogContent: () => <MessageDialogContent />,
+    dialogContent: () => <PromptAndCollectDialogContent />,
   },
   [EActionTypes.CHECK_VARIABLES]: {
     icon: () => <Variable className='w-4 h-4' />,
@@ -80,7 +86,7 @@ export const MAP_ACTION: Record<
   [EActionTypes.HTTP_REQUEST]: {
     icon: () => <GitPullRequest className='w-4 h-4' />,
     label: 'Http request',
-    dialogContent: () => <div>Http request</div>,
+    dialogContent: () => <HttpRequestDialogContent />,
   },
   [EActionTypes.SEND_MAIL]: {
     icon: () => <Mail className='w-4 h-4' />,
@@ -100,7 +106,7 @@ export const MAP_ACTION: Record<
   [EActionTypes.SUB_FLOW]: {
     icon: () => <Workflow className='w-4 h-4' />,
     label: 'Sub flow',
-    dialogContent: () => <div>Sub flow</div>,
+    dialogContent: () => <SubFlowContent />,
   },
 }
 
@@ -136,3 +142,12 @@ export const CONDITIONAL_OPERATOR = [
   'in',
   'not_in',
 ]
+
+export const MAP_GRAMMAR_TYPE: Record<EGrammarTypes, string> = {
+  [EGrammarTypes.INTENT]: i18n.t('flowDetail:grammars_type.intent'),
+  [EGrammarTypes.NUMBER]: i18n.t('flowDetail:grammars_type.number'),
+  [EGrammarTypes.EMAIL]: i18n.t('flowDetail:grammars_type.email'),
+  [EGrammarTypes.PHONE_NUMBER]: i18n.t('flowDetail:grammars_type.phone_number'),
+  [EGrammarTypes.TEXT]: i18n.t('flowDetail:grammars_type.text'),
+  [EGrammarTypes.YES_NO]: i18n.t('flowDetail:grammars_type.yes_no'),
+}

client/src/components/pages/flow-detail/edge.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui'
 import { X } from 'lucide-react'
-import { BaseEdge, EdgeProps, getBezierPath, useReactFlow } from 'reactflow'
+import { BaseEdge, EdgeProps, getSmoothStepPath, useReactFlow } from 'reactflow'
 
 const foreignObjectSize = 16
 
@@ -22,7 +22,7 @@ export const Edge = ({
   deletable?: boolean
 }>) => {
   const { setEdges } = useReactFlow()
-  const [edgePath, labelX, labelY] = getBezierPath({
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
     sourcePosition,

client/src/components/pages/flow-detail/flow-provider.tsx

@@ -1,5 +1,4 @@
 import { useDidUpdate } from '@/hooks/use-did-update'
-import { usePrevious } from '@/hooks/use-prev'
 import { TFlowInput } from '@/lib/schema/flow-input'
 import { EActionTypes, EMessageTypes, TNode } from '@/types/flow'
 import { createId } from '@paralleldrive/cuid2'
@@ -99,12 +98,11 @@ export const FlowProvider = ({ children, flow }: Props) => {
     },
   ])
   const [selectedNode, setSelectedNode] = useState<Node<any> | null>(null)
-  const [selectedEdge, setSelectedEdge] = useState<Edge<any> | null>(null)
+  const [_selectedEdge, setSelectedEdge] = useState<Edge<any> | null>(null)
   const [currentLang, setCurrentLang] = useState(
     flow.settings?.find((setting) => setting.type === 'language')?.value ||
       'en',
   )
-  const prevLang = usePrevious<string>(currentLang)
 
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance<
     any,

client/src/components/pages/flow-detail/input-buttons.tsx

@@ -70,7 +70,7 @@ export const InputButtons = ({ onChange, defaultValue }: Props) => {
             e.preventDefault()
           }}
           className={cn(
-            'space-y-3 max-h-[180px] overflow-y-auto hidden-scroll',
+            'space-y-3 max-h-[148px] overflow-y-auto hidden-scroll',
             {
               'py-2 px-[2px]': fields.length > 0,
             },