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'