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

feat: update

Author: hi02102002

client/package-lock.json

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

client/package.json

@@ -1,8 +1,25 @@
 import { ENDPOINTS } from '@/constants'
 import http_client from '@/lib/http-client'
+import { TConversation, TConversationLiveChatQuery } from '@/types/live-chat'
+import { TBaseResponse, TResPagination } from '@/types/share'
 
 class LiveChatApi {
-  async getConversations() {
-    return http_client.get(ENDPOINTS.CONVERSATION_LIVE_CHAT.INDEX)
+  async getConversations(
+    q?: TConversationLiveChatQuery,
+  ): Promise<TResPagination<TConversation>> {
+    return http_client.get(ENDPOINTS.CONVERSATION_LIVE_CHAT.INDEX, {
+      params: q,
+    })
+  }
+
+  async getConversation(
+    channelId: string,
+    userId: string,
+  ): Promise<TBaseResponse<TConversation>> {
+    return http_client.get(
+      `${ENDPOINTS.CONVERSATION_LIVE_CHAT.INDEX}/${userId}/${channelId}`,
+    )
   }
 }
+
+export const liveChatApi = new LiveChatApi()

client/src/apis/live-chat.ts

@@ -1,4 +1,5 @@
 export { Layout as AppLayout } from './app'
 export { Layout as AuthLayout } from './auth'
-export { Layout as SettingLayout } from './setting'
+export { Layout as LiveChatLayout } from './live-chat'
 export { Layout as PublishLayout } from './publish'
+export { Layout as SettingLayout } from './setting'

client/src/components/layouts/index.tsx

@@ -0,0 +1 @@
+export * from './layout'

client/src/components/layouts/live-chat/index.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom'
+import Sidebar from './sidebar'
+
+export const Layout = () => {
+  return (
+    <div className='flex h-screen-header'>
+      <Sidebar />
+      <div className='flex-1'>
+        <Outlet />
+      </div>
+    </div>
+  )
+}
+
+export default Layout

client/src/components/layouts/live-chat/layout.tsx

@@ -0,0 +1,38 @@
+import { ConversationItem } from '@/components/pages/live-chat'
+import { queryConversationsOptions } from '@/lib/query-options/live-chat'
+import { TConversationLiveChatQuery } from '@/types/live-chat'
+import { urlSearchParamsToObject } from '@/utils'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { useSearchParams } from 'react-router-dom'
+
+const Sidebar = () => {
+  const { t } = useTranslation('conversations')
+  const [search] = useSearchParams()
+  const { data } = useSuspenseQuery(
+    queryConversationsOptions(
+      urlSearchParamsToObject(search) as TConversationLiveChatQuery,
+    ),
+  )
+  return (
+    <aside className='max-w-80 w-full border-r border-input'>
+      {data.items.length > 0 ? (
+        <ul>
+          {data.items.map((item) => {
+            return (
+              <li key={`${item.userId}-${item.channelId}`}>
+                <ConversationItem conversation={item} />
+              </li>
+            )
+          })}
+        </ul>
+      ) : (
+        <div className='p-4 flex items-center justify-center'>
+          <p className='text-muted-foreground'>{t('empty_conversation')}</p>
+        </div>
+      )}
+    </aside>
+  )
+}
+
+export default Sidebar

client/src/components/layouts/live-chat/sidebar.tsx

@@ -17,11 +17,14 @@ const TestYourBot = () => {
     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]',
+          '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] overflow-hidden',
         )}
       >
-        <ChatBox channelId={channel.contactId} className='h-full w-full' 
+        <ChatBox
+          channelId={channel.contactId}
+          className='h-full w-full'
           isTest
+          isShowClose={false}
         />
       </div>
     )

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

@@ -0,0 +1,29 @@
+import { ROUTES } from '@/constants'
+import { TConversation } from '@/types/live-chat'
+import { useNavigate } from 'react-router-dom'
+
+type Props = {
+  conversation: TConversation
+}
+
+export const ConversationItem = ({ conversation }: Props) => {
+  const navigate = useNavigate()
+  return (
+    <div
+      className='p-4 border-b border-input'
+      onClick={() => {
+        navigate(
+          `${ROUTES.PRIVATE.CONVERSATION.INDEX}/${conversation.userId}/${conversation.channelId}`,
+        )
+      }}
+    >
+      <div>
+        <span>
+          {conversation.userId} - {conversation.channel.contactName}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default ConversationItem

client/src/components/pages/live-chat/conversation-item.tsx

@@ -0,0 +1 @@
+export * from './conversation-item'

client/src/components/pages/live-chat/index.tsx

@@ -1,6 +1,7 @@
 import channelEn from '@/locales/en/channel.json'
 import chatbotsEn from '@/locales/en/chatbots.json'
 import commonEN from '@/locales/en/common.json'
+import conversationsEn from '@/locales/en/conversations.json'
 import flowDetailEn from '@/locales/en/flow-detail.json'
 import forgotPassEN from '@/locales/en/forgot_pass.json'
 import formsEN from '@/locales/en/forms.json'
@@ -20,6 +21,7 @@ import verifyAccountEn from '@/locales/en/verify-account.json'
 import channelVi from '@/locales/vi/channel.json'
 import chatbotsVi from '@/locales/vi/chatbots.json'
 import commonVI from '@/locales/vi/common.json'
+import conversationsVi from '@/locales/vi/conversations.json'
 import flowDetailVi from '@/locales/vi/flow-detail.json'
 import forgotPassVI from '@/locales/vi/forgot_pass.json'
 import formsVI from '@/locales/vi/forms.json'
@@ -59,6 +61,7 @@ const resources = {
     training: trainingEn,
     requestVerifyAccount: requestVerifyAccountEn,
     verifyAccount: verifyAccountEn,
+    conversations: conversationsEn,
   },
   [ELang.VI]: {
     common: commonVI,
@@ -80,6 +83,7 @@ const resources = {
     training: trainingVi,
     requestVerifyAccount: requestVerifyAccountVi,
     verifyAccount: verifyAccountVi,
+    conversations: conversationsVi,
   },
 } as const
 

client/src/i18n/resources.ts

@@ -21,6 +21,10 @@ import {
   queryIntentsOption,
   settingQueryOption,
 } from './query-options'
+import {
+  queryConversationOption,
+  queryConversationsOptions,
+} from './query-options/live-chat'
 
 export const authLoader = async ({ request }: any) => {
   const redirectUrl = new URL(request.url).searchParams.get('redirect')
@@ -155,3 +159,20 @@ export const verifyAccountLoader = async ({ request }: any) => {
 
   return null
 }
+
+export const conversationsLoader = async ({ request }: any) => {
+  const query = queryStringToObject(request.url)
+  useAppLayoutStore.getState().setTitle(i18n.t('common:conversations'))
+
+  await queryClient.ensureQueryData(queryConversationsOptions(query))
+
+  return null
+}
+
+export const conversationLoader = async ({ params }: any) => {
+  await queryClient.ensureQueryData(
+    queryConversationOption(params.channelId, params.userId),
+  )
+
+  return null
+}

client/src/lib/loader.ts

@@ -0,0 +1,25 @@
+import { liveChatApi } from '@/apis/live-chat'
+import { TConversationLiveChatQuery } from '@/types/live-chat'
+import { queryOptions } from '@tanstack/react-query'
+
+export const queryConversationsOptions = (q: TConversationLiveChatQuery) => {
+  return queryOptions({
+    queryKey: ['conversations', q],
+    queryFn: async () => {
+      const res = await liveChatApi.getConversations(q)
+
+      return res.data
+    },
+  })
+}
+
+export const queryConversationOption = (channelId: string, userId: string) => {
+  return queryOptions({
+    queryKey: ['conversation', channelId],
+    queryFn: async () => {
+      const res = await liveChatApi.getConversation(channelId, userId)
+
+      return res.data
+    },
+  })
+}

client/src/lib/query-options/live-chat.ts

@@ -17,6 +17,8 @@
   "profiles": "Profiles",
   "save": "Save",
   "channels": "Channels",
+  "conversations": "Conversations",
+  "users": "Users",
   "search": "Search",
   "add_intent": "Add intent",
   "trained": "Trained",

client/src/locales/en/common.json

@@ -0,0 +1,4 @@
+{
+  "empty_conversation": "Not have any conversation yet",
+  "select_conversation": "Select a conversation to start chatting"
+}

client/src/locales/en/conversations.json

@@ -20,6 +20,8 @@
   "add_intent": "Thêm ý định",
   "trained": "Đã đào tạo",
   "not_trained": "Chưa đào tạo",
+  "conversations": "Cuộc trò chuyện",
+  "users": "Người dùng",
   "row_actions": {
     "update": "Cập nhật",
     "delete": "Xóa",

client/src/locales/vi/common.json

@@ -0,0 +1,4 @@
+{
+  "empty_conversation": "Không có cuộc trò chuyện nào",
+  "select_conversation": "Chọn một cuộc trò chuyện để bắt đầu trò chuyện"
+}

client/src/locales/vi/conversations.json

@@ -0,0 +1,5 @@
+const ConversationDetail = () => {
+  return <div>ConversationDetail</div>
+}
+
+export default ConversationDetail

client/src/pages/conversation-detail.tsx

@@ -1,5 +1,14 @@
+import { useTranslation } from 'react-i18next'
+
 const Conversations = () => {
-  return <div>Conversations</div>
+  const { t } = useTranslation('conversations')
+  return (
+    <div className='flex items-center justify-center h-full'>
+      <p className='text-muted-foreground text-center text-lg font-medium'>
+        {t('select_conversation')}
+      </p>
+    </div>
+  )
 }
 
 export default Conversations

client/src/pages/conversations.tsx

@@ -19,3 +19,5 @@ export const RequestVerifyAccount = lazy(
 )
 export const VerifyAccount = lazy(() => import('./verify-account'))
 export { default as LandingPage } from './landing-page'
+export const Conversations = lazy(() => import('./conversations'))
+export const ConversationDetail = lazy(() => import('./conversation-detail'))

client/src/pages/index.tsx

@@ -1,6 +1,8 @@
 import {
   AddIntent,
   Channels,
+  ConversationDetail,
+  Conversations,
   FlowDetail,
   Flows,
   ForgotPassword,
@@ -20,6 +22,7 @@ import { createBrowserRouter, redirect } from 'react-router-dom'
 import {
   AppLayout,
   AuthLayout,
+  LiveChatLayout,
   PublishLayout,
   SettingLayout,
 } from '@/components/layouts'
@@ -34,6 +37,7 @@ import {
   articlesLoader,
   authLoader,
   channelsLoader,
+  conversationsLoader,
   flowDetailLoader,
   flowsLoader,
   intentLoader,
@@ -155,6 +159,21 @@ export const router = createBrowserRouter([
               },
             ],
           },
+          {
+            path: ROUTES.PRIVATE.CONVERSATION.INDEX,
+            Component: LiveChatLayout,
+            children: [
+              {
+                index: true,
+                Component: Conversations,
+                loader: conversationsLoader,
+              },
+              {
+                path: `${ROUTES.PRIVATE.CONVERSATION.INDEX}/:userId/:channelId`,
+                Component: ConversationDetail,
+              },
+            ],
+          },
         ],
       },
       {

client/src/router.tsx

@@ -1,10 +1,14 @@
+import { TChannel } from './channel'
+import { TBaseQuery } from './share'
+
 export type TConversation = {
   id: string
   userId: string
   channelId: string
   createdAt: string
   updatedAt: string
   lastMessage: TMessage
+  channel: TChannel
 }
 
 export type TMessage = {
@@ -36,3 +40,7 @@ export type TMessage = {
     url?: string
   }
 }
+
+export type TConversationLiveChatQuery = {
+  channelId?: string
+} & TBaseQuery

client/src/types/live-chat.ts

@@ -0,0 +1,3 @@
+ALTER TABLE "messages" ADD COLUMN "message" text DEFAULT '';--> statement-breakpoint
+ALTER TABLE "messages" ADD COLUMN "template" json DEFAULT '{}'::json;--> statement-breakpoint
+ALTER TABLE "messages" DROP COLUMN IF EXISTS "data";