feat: call logs

apps/ui/src/Route.tsx

@@ -92,6 +92,7 @@ import Integrations from 'pages/Integrations'
 import VoiceView from 'plugins/contact/pages/Voice/VoiceView'
 import VoiceModal from 'modals/VoiceModal'
 import ImportContacts from 'plugins/contact/pages/Contact/ImportContacts'
+import CallLogsModal from 'modals/CallLogsModal'
 
 const Route = () => {
   const { loading } = useContext(AuthContext)
@@ -371,6 +372,7 @@ const Route = () => {
       <ChatLinkModal />
       <ScheduleRunModal />
       <RunLogsModal />
+      <CallLogsModal />
 
       <CommandMenu
         open={cmdkOpen}

apps/ui/src/modals/AIChatModal/components/ChatMembers/ChatMembers.tsx

@@ -8,6 +8,8 @@ import TabPanel from '@l3-lib/ui-core/dist/TabPanel'
 import TabPanels from '@l3-lib/ui-core/dist/TabPanels'
 import TabsContext from '@l3-lib/ui-core/dist/TabsContext'
 import IconButton from '@l3-lib/ui-core/dist/IconButton'
+import LogsIcon from '@l3-lib/ui-core/dist/icons/Logs'
+import Typography from '@l3-lib/ui-core/dist/Typography'
 
 import AvatarGenerator from 'components/AvatarGenerator/AvatarGenerator'
 
@@ -25,17 +27,22 @@ import {
 import { StyledTabListSpan, StyledTabListWrapper } from 'styles/tabStyles.css'
 import AudioPlayer from 'components/AudioPlayer'
 import { Nullable } from 'types'
+import { CALL_LOGS_MODAL_NAME } from 'modals/CallLogsModal'
+import { StyledActionButton } from 'components/CopyButton/CopyButton'
+import TypographyPrimary from 'components/Typography/Primary'
 
 const ChatMembers = ({
   agentById,
   teamOfAgents,
   isHistory,
   voiceUrl,
+  call,
 }: {
   agentById?: any
   teamOfAgents?: any
   isHistory?: boolean
   voiceUrl?: Nullable<string>
+  call?: any
 }) => {
   const { t } = useTranslation()
   const { user } = React.useContext(AuthContext)
@@ -71,12 +78,31 @@ const ChatMembers = ({
             <TabPanels noAnimation>
               <TabPanel>
                 <AgentViewDetailBox agentData={agentById} />
-                <div style={{ height: '100px', width: '100%' }}>
+                <div style={{ height: '200px', width: '100%' }}>
                   {voiceUrl && (
                     <StyledAudioPlayerWrapper>
                       <AudioPlayer audioUrl={voiceUrl} />
                     </StyledAudioPlayerWrapper>
                   )}
+
+                  <StyledLogsButton
+                    onClick={() =>
+                      openModal({
+                        name: CALL_LOGS_MODAL_NAME,
+                        data: {
+                          chatId: call?.chat_id,
+                        },
+                      })
+                    }
+                  >
+                    <StyledLogsIcon size={32} />
+
+                    <TypographyPrimary
+                      value={t('logs')}
+                      type={Typography.types.P}
+                      size={Typography.sizes.sm}
+                    />
+                  </StyledLogsButton>
                 </div>
               </TabPanel>
 
@@ -276,3 +302,16 @@ const StyledIconButtonWrapper = styled.div`
 const StyledAudioPlayerWrapper = styled.div`
   margin-top: 12px;
 `
+
+const StyledLogsIcon = styled(LogsIcon)`
+  path {
+    fill: ${({ theme }) => theme.body.iconColor};
+  }
+`
+
+const StyledLogsButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 12px;
+`

apps/ui/src/modals/CallLogsModal/CallLogs/CallLogs.tsx

@@ -0,0 +1,52 @@
+import styled from 'styled-components'
+import Loader from '@l3-lib/ui-core/dist/Loader'
+import { useCallByIdService } from 'plugins/contact/services/call/useCallByIdService'
+
+type CallLogsProps = {
+  chatId: string
+}
+
+const CallLogs = ({ chatId }: CallLogsProps) => {
+  const { data, loading } = useCallByIdService({ id: chatId })
+
+  if (loading) {
+    return (
+      <StyledLoaderWrapper>
+        <Loader size={40} />
+      </StyledLoaderWrapper>
+    )
+  }
+
+  return (
+    <StyledWrapper>
+      {data?.logs.map(({ content }: any, index: number) => (
+        <p key={index}>
+          {index + 1}. {content}
+        </p>
+      ))}
+    </StyledWrapper>
+  )
+}
+
+export default CallLogs
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  color: #000;
+  font-weight: bold;
+`
+
+const StyledLoaderWrapper = styled.div`
+  position: absolute;
+  width: 40px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  margin-bottom: 20px;
+  margin-left: 5px;
+`

apps/ui/src/modals/CallLogsModal/CallLogs/index.tsx

@@ -0,0 +1 @@
+export { default } from './CallLogs'

apps/ui/src/modals/CallLogsModal/CallLogsModal.tsx

@@ -0,0 +1,63 @@
+import withRenderModal from 'hocs/withRenderModal'
+import styled from 'styled-components'
+import Modal from '@l3-lib/ui-core/dist/Modal'
+import IconButton from '@l3-lib/ui-core/dist/IconButton'
+import { useModal } from 'hooks'
+import Close from '@l3-lib/ui-core/dist/icons/Close'
+import CallLogs from './CallLogs'
+
+export const CALL_LOGS_MODAL_NAME = 'call-logs-modal'
+
+type CallLogsModalProps = {
+  data: {
+    chatId: string
+  }
+}
+
+const CallLogsModal = ({ data }: CallLogsModalProps) => {
+  const { closeModal } = useModal()
+
+  return (
+    <StyledModal
+      onClose={() => closeModal(CALL_LOGS_MODAL_NAME)}
+      show
+      backgroundColor='light'
+      hideCloseButton
+    >
+      <StyledModalBody>
+        <CallLogs chatId={data.chatId} />
+      </StyledModalBody>
+
+      <StyledButtonWrapper>
+        <IconButton
+          size={IconButton.sizes.XS}
+          icon={() => <Close />}
+          kind={IconButton.kinds.TERTIARY}
+          onClick={() => closeModal(CALL_LOGS_MODAL_NAME)}
+        />
+      </StyledButtonWrapper>
+    </StyledModal>
+  )
+}
+
+export default withRenderModal(CALL_LOGS_MODAL_NAME)(CallLogsModal)
+
+const StyledModal = styled(Modal)`
+  .components-Modal-Modal-module__overlay--OO00T {
+    backdrop-filter: unset;
+  }
+`
+
+const StyledModalBody = styled.div`
+  min-height: 400px;
+
+  max-width: 1200px;
+  max-height: 800px;
+  width: 100vw;
+`
+
+export const StyledButtonWrapper = styled.div`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+`

apps/ui/src/modals/CallLogsModal/index.tsx

@@ -0,0 +1 @@
+export { default, CALL_LOGS_MODAL_NAME } from './CallLogsModal'

apps/ui/src/plugins/contact/gql/call/callById.gql

@@ -0,0 +1,10 @@
+query callById($id: id!) @api(name: pro) {
+  callById(id: $id) @rest(type: "Call", path: "/call/{args.id}", method: "GET", endpoint: "pro") {
+    id
+    chat_id
+    contact_id
+    logs {
+      content
+    }
+  }
+}

apps/ui/src/plugins/contact/services/call/useCallByIdService.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@apollo/client'
+import CALL_BY_ID_GQL from '../../gql/call/callById.gql'
+
+export const useCallByIdService = ({ id }: { id?: string }) => {
+  const {
+    data: { callById } = {},
+    error,
+    loading,
+    refetch,
+  } = useQuery(CALL_BY_ID_GQL, {
+    variables: { id },
+    skip: !id,
+  })
+
+  return {
+    data: callById,
+    error,
+    loading,
+    refetch,
+  }
+}

apps/ui/src/routes/ChatRouteLayout.tsx

@@ -26,6 +26,7 @@ import { useTeamOfAgentsByIdService } from 'services/team/useTeamOfAgentsByIdSer
 import { useChatByIdService } from 'services/chat/useChatByIdService'
 import { useGetAccountModule } from 'utils/useGetAccountModule'
 import { t } from 'i18next'
+import { useCallByIdService } from 'plugins/contact/services/call/useCallByIdService'
 
 const ChatRouteLayout = () => {
   const { getChatModules } = useGetAccountModule()
@@ -64,14 +65,16 @@ const ChatRouteLayout = () => {
 
   const agentId = urlParams.get('agent') || params.agentId
   const teamId = urlParams.get('team') || params.teamId
-  const chatId = urlParams.get('chat')
+  const chatId = urlParams.get('chat') ?? undefined
 
   const { deleteChat } = useDeleteChatService()
 
   const { data: agentById } = useAgentByIdService({ id: agentId || '' })
   const { data: teamOfAgents } = useTeamOfAgentsByIdService({ id: teamId || '' })
   const { data: chatById } = useChatByIdService({ id: chatId || '' })
 
+  const { data: call } = useCallByIdService({ id: chatId })
+
   useEffect(() => {
     if (!urlParams || !params) return
 
@@ -315,6 +318,7 @@ const ChatRouteLayout = () => {
               agentById={agentById || chatById?.agent}
               teamOfAgents={teamOfAgents}
               voiceUrl={chatById?.voice_url}
+              call={call}
             />
           </StyledRightColumn>
         )}