Merge pull request #58 from Dialogue-Bot/DIAL-42-implement-test-your-bot

Dial 42 implement test your bot

Author: hi02102002

client/package-lock.json

@@ -65,7 +65,7 @@
     "crypto-js": "^4.2.0",
     "date-fns": "^3.3.1",
     "dayjs": "^1.11.10",
-    "dialogue-chatbox": "^1.0.4",
+    "dialogue-chatbox": "^1.0.8",
     "embla-carousel-react": "^8.0.0-rc23",
     "fast-glob": "^3.3.2",
     "firebase": "^10.8.0",

client/package.json

@@ -53,6 +53,16 @@ class ChannelApi {
       params: { flowId },
     })
   }
+
+  getChannelForTest(): Promise<TBaseResponse<TChannelWithChannelType>> {
+    return http_client.get(ENDPOINTS.CHANNEL.FOR_TEST)
+  }
+
+  updateChannelForTest(
+    flowId: string,
+  ): Promise<TBaseResponse<TChannelWithChannelType>> {
+    return http_client.put(ENDPOINTS.CHANNEL.FOR_TEST, { flowId })
+  }
 }
 
 export const channelApi = new ChannelApi()

client/src/apis/channel.ts

@@ -19,6 +19,7 @@ import { edgeTypes } from './edge-types'
 import { useFlowCtx } from './flow-provider'
 import { NodeDialog } from './node-dialog'
 import { nodeTypes } from './node-types'
+import TestYourBot from './test-your-bot'
 import { Toolbar } from './toolbar'
 
 export const FlowInside = () => {
@@ -103,6 +104,7 @@ export const FlowInside = () => {
       <Actions />
       <NodeDialog />
       <ConditionDialog />
+      <TestYourBot />
     </div>
   )
 }

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

@@ -4,7 +4,9 @@ import { EActionTypes, EMessageTypes, TFLow, TNode } from '@/types/flow'
 import { createId } from '@paralleldrive/cuid2'
 import _ from 'lodash'
 import {
+  Dispatch,
   DragEvent,
+  SetStateAction,
   createContext,
   useCallback,
   useContext,
@@ -63,6 +65,8 @@ type FlowCtx = {
   handleDeleteEdgeById: (id: string) => void
   handleNodesDelete: OnNodesDelete
   handleDeleteNodeById: (id: string) => void
+  showTestBot: boolean
+  setShowTestBot: Dispatch<SetStateAction<boolean>>
 }
 
 const FlowContext = createContext<FlowCtx | undefined>(undefined)
@@ -134,6 +138,8 @@ export const FlowProvider = ({ children, flow }: Props) => {
     flow.settings?.find((setting) => setting.type === 'language')?.value ||
       'en',
   )
+  const [showTestBot, setShowTestBot] = useState(false)
+
   const updateFlowMutation = useUpdateFlow({
     isShowToastSuccess: false,
   })
@@ -852,6 +858,8 @@ export const FlowProvider = ({ children, flow }: Props) => {
         handleDeleteEdgeById,
         handleNodesDelete,
         handleDeleteNodeById,
+        showTestBot,
+        setShowTestBot,
       }}
     >
       {children}

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

@@ -0,0 +1,29 @@
+import { queryChannelForTestOption } from '@/lib/query-options'
+import { cn } from '@/lib/utils'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { ChatBox } from 'dialogue-chatbox'
+import { useParams } from 'react-router-dom'
+import { useFlowCtx } from '.'
+
+const TestYourBot = () => {
+  const { id } = useParams()
+  const { data: channel } = useSuspenseQuery(
+    queryChannelForTestOption(id as string),
+  )
+
+  const { showTestBot } = useFlowCtx()
+
+  return (
+    showTestBot && (
+      <div
+        className={cn(
+          'fixed right-4 z-10 rounded-md shadow w-80 transition-transform duration-300 bottom-4 flex flex-col gap-4 bg-white h-[500px]',
+        )}
+      >
+        <ChatBox channelId={channel.contactId} className='h-full w-full' />
+      </div>
+    )
+  )
+}
+
+export default TestYourBot

client/src/components/pages/flow-detail/test-your-bot.tsx

@@ -15,7 +15,8 @@ import { useFlowCtx } from '.'
 import Setting from './setting'
 
 export const Toolbar = () => {
-  const { toggleActions } = useFlowCtx()
+  const { toggleActions, openActions, setShowTestBot, showTestBot } =
+    useFlowCtx()
   const { t } = useTranslation('flowDetail')
   const { flow, edges, nodes, getCompleteFlows } = useFlowCtx()
   const { id } = useParams()
@@ -45,7 +46,10 @@ export const Toolbar = () => {
                 <Button
                   size='icon'
                   variant='ghost'
-                  onClick={toggleActions}
+                  onClick={() => {
+                    toggleActions()
+                    setShowTestBot(false)
+                  }}
                   className='flex-shrink-0'
                 >
                   <Zap className='w-4 h-4' />
@@ -75,7 +79,18 @@ export const Toolbar = () => {
             orientation='vertical'
             className='self-stretch h-[unset]'
           />
-          <Button variant='ghost'>{t('toolbar.test_your_bot')}</Button>
+          <Button
+            variant='ghost'
+            onClick={() => {
+              setShowTestBot((prev) => !prev)
+
+              if (openActions) {
+                toggleActions()
+              }
+            }}
+          >
+            {t(!showTestBot ? 'toolbar.test_your_bot' : 'toolbar.close_test')}
+          </Button>
           <Button
             variant='secondary'
             onClick={handleSave}

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

@@ -31,6 +31,7 @@ export const ENDPOINTS = {
     DELETE: '/channel/delete',
     DELETES: '/channel/deletes',
     TYPES: '/channel/types',
+    FOR_TEST: '/channel/for-test',
   },
   FLOW: {
     INDEX: '/flow',

client/src/constants/index.ts

@@ -18,11 +18,13 @@ export const useLogout = () => {
       window.location.href = '/login'
       setUser(null)
       queryClient.clear()
+      localStorage.removeItem('user-bot-id')
     },
     onError() {
       window.location.href = '/login'
       setUser(null)
       queryClient.clear()
+      localStorage.removeItem('user-bot-id')
     },
   })
 }

client/src/hooks/auth/use-logout.ts

@@ -1,4 +1,5 @@
 export * from './use-create-channel'
-export * from './use-update-channel'
 export * from './use-delete-channel'
 export * from './use-delete-many-channel'
+export * from './use-update-channel'
+export * from './use-update-channel-for-test'