beem-component 2.1.25 → 2.1.27

package/src/App.js

@@ -666,13 +666,59 @@ const Chat = () => {
           'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/081c00de-cc02-44f2-bd91-5cf3a5a73d09.jpeg',
       },
     },
+    // {
+    //   id: 109370,
+    //   message:
+    //     '{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"ANSWERED","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}',
+    //   time: '2025-10-06T10:53:38.000Z',
+    //   direction: 'outbound',
+    //   message_type: 'call',
+    //   messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+    //   is_live_agent: 0,
+    //   is_deleted: 0,
+    //   is_comment: 0,
+    //   channel: 'voice_call',
+    //   sent_to_vendor: 1,
+    //   replyMessageId: null,
+
+    //   agent_name: null,
+    //   df_agent_name: null,
+    //   resolve_time: null,
+    //   metadata: null,
+    //   statusDetails: {
+    //     statusCode: 3,
+    //   },
+    // },
+    // {
+    //   id: 109370,
+    //   message:
+    //     '{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}',
+    //   time: '2025-10-06T10:53:38.000Z',
+    //   direction: 'outbound',
+    //   message_type: 'call',
+    //   messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+    //   is_live_agent: 0,
+    //   is_deleted: 0,
+    //   is_comment: 0,
+    //   channel: 'voice_call',
+    //   sent_to_vendor: 1,
+    //   replyMessageId: null,
+
+    //   agent_name: null,
+    //   df_agent_name: null,
+    //   resolve_time: null,
+    //   metadata: null,
+    //   statusDetails: {
+    //     statusCode: 3,
+    //   },
+    // },
     {
-      id: 109370,
+      id: 109373,
       message:
-        '{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"ANSWERED","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}',
+        '{"type":"call","status":"in_progress","call_started_at":"2026-01-01T09:35:00.000Z","message":"Call in progress"}',
       time: '2025-10-06T10:53:38.000Z',
       direction: 'outbound',
-      message_type: 'call',
+      message_type: 'interactive',
       messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
       is_live_agent: 0,
       is_deleted: 0,
@@ -690,12 +736,58 @@ const Chat = () => {
       },
     },
     {
-      id: 109370,
+      id: 109373,
       message:
-        '{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}',
+        '{"type":"call","status":"answered","call_started_at":"2026-01-01T09:35:00.000Z","message":{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}}',
+      time: '2025-10-06T10:53:38.000Z',
+      direction: 'inbound',
+      message_type: 'interactive',
+      messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'voice_call',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 109373,
+      message:
+        '{"type":"call","status":"no answer","call_started_at":"2026-01-01T09:35:00.000Z","message":{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}}',
+      time: '2025-10-06T10:53:38.000Z',
+      direction: 'inbound',
+      message_type: 'interactive',
+      messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'voice_call',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 109373,
+      message:
+        '{"type":"call","status":"no answer","call_started_at":"2026-01-01T09:35:00.000Z","message":{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}}',
       time: '2025-10-06T10:53:38.000Z',
       direction: 'outbound',
-      message_type: 'call',
+      message_type: 'interactive',
       messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
       is_live_agent: 0,
       is_deleted: 0,
@@ -771,6 +863,12 @@ const Chat = () => {
         connector,
       };
     }
+    if (finalMessage?.type === 'call') {
+      return {
+        message: finalMessage,
+        connector: 'yeastar',
+      };
+    }
 
     console.log(finalMessage);
     return {
@@ -857,17 +955,16 @@ const Chat = () => {
       <GlobalStyle />
 
       {metaQuickReply.map((msg, idx) => {
-        const isCall = msg.message_type === 'call';
         return msg.message_type !== 'text' ? (
           <BmChat.Details
             key={msg.id || idx} // Prefer a stable unique id if available
-            state={!isCall && msg.direction}
+            state={msg.direction}
             session="bot"
-            // displayTime={!isCall && && <p>12:00pm</p>}
-            status={!isCall && 'sent'}
+            displayTime={<p>12:10pm</p>}
+            status="sent"
             type={msg.message_type}
             callLog={msg.message_type === 'call'}
-            // sessionTimeline={!isCall && && <p>12:00pm</p>}
+            sessionTimeline={{ message: '12:00pm' }}
             style={{ margin: '-0.6% 0 0 0' }}
             metadata={determineMetadataMessageType(msg.metadata)}
             isInteractive={determineMetadataIsInteractive(msg.metadata)}
@@ -879,10 +976,10 @@ const Chat = () => {
             key={msg.id || idx} // Prefer a stable unique id if available
             state={msg.direction}
             session="bot"
-            displayTime={<p>12:00pm</p>}
+            displayTime={<p>12:10pm</p>}
             status="sent"
             type="text"
-            sessionTimeline={!isCall && { message: <p>12:00pm</p> }}
+            sessionTimeline={{ message: '12:00pm' }}
             style={{ margin: '-0.6% 0 0 0' }}
             metadata={determineMetadataMessageType(msg.metadata)}
             isInteractive={determineMetadataIsInteractive(msg.metadata)}

package/src/lib/components/ChatComponents/ChatBody/chatBody.js

@@ -1,9 +1,14 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/display-name */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Done, DoneAll } from '@material-ui/icons';
 import FilePresentIcon from '@mui/icons-material/FilePresent';
+import PhoneCallbackOutlinedIcon from '@mui/icons-material/PhoneCallbackOutlined';
+import PhoneOutlinedIcon from '@mui/icons-material/PhoneOutlined';
+
+import PhoneMissedIcon from '@mui/icons-material/PhoneMissed';
+
 import DownloadIcon from '@mui/icons-material/Download';
 import styled from 'styled-components';
 import Avatar from 'react-avatar';
@@ -26,10 +31,66 @@ import {
   BmPrimaryGold,
 } from '../../colors';
 import { BmFeedPostComments } from './FeedPostComments';
-import { CallPill } from './CallLog';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
+const formatDuration = (totalSeconds) => {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return (
+      `${String(hours).padStart(2, '0')}:` +
+      `${String(minutes).padStart(2, '0')}:` +
+      `${String(seconds).padStart(2, '0')}`
+    );
+  }
+
+  return (
+    `${String(minutes).padStart(2, '0')}:` +
+    `${String(seconds).padStart(2, '0')}`
+  );
+};
+
+const formatCallDuration = (totalSeconds) => {
+  // eslint-disable-next-line no-param-reassign
+  if (!totalSeconds || totalSeconds < 0) totalSeconds = 0;
+
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  let result = '';
+  if (hours > 0) result += `${hours} hr `;
+  result += `${minutes} min ${seconds} sec`;
+
+  return result.trim();
+};
+const useCallDuration = (running, callStartedAt) => {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    if (!running || !callStartedAt) return;
+
+    const startTime = new Date(callStartedAt).getTime();
+
+    const updateSeconds = () => {
+      const now = Date.now();
+      const elapsed = Math.max(Math.floor((now - startTime) / 1000), 0);
+      setSeconds(elapsed);
+    };
+
+    updateSeconds();
+
+    const intervalId = setInterval(updateSeconds, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [running, callStartedAt]);
+
+  return formatDuration(seconds);
+};
+
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
@@ -216,6 +277,62 @@ const CartContent = styled.div`
   }};
 `;
 
+const CallContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0.6rem;
+  align-items: center;
+  justify-content: center;
+  color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+`;
+const CallInfoContainer = styled.div`
+  display: flex;
+  padding-right: 1.5rem;
+  flex-direction: column;
+  gap: 0.3rem;
+  align-items: center;
+  justify-content: center;
+  color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  & > :last-child {
+    color: ${({ state }) => (state === 'inbound' ? '#A6A29F' : '#cde3ddff')};
+  }
+`;
+const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  height: max-content;
+  padding: 0.8rem;
+  border: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `1px solid #F3F4F6`;
+      if (state === 'outbound') return `1px solid #5CC1C8`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+
+  border-radius: 50%;
+  background-color: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `#F3F4F6`;
+      if (state === 'outbound') return `#5CC1C8`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+`;
 const MessagesSubDetails = styled.div`
   display: flex;
   flex-direction: row;
@@ -580,6 +697,95 @@ const ImageRender = ({
     </Messages>
   );
 };
+const CallRender = ({
+  type,
+  state,
+  isInteractive,
+  connector,
+  message,
+  status,
+  call_started_at,
+}) => {
+  const duration = useCallDuration(status === 'in_progress', call_started_at);
+  const renderers = {
+    yeastar: () => (
+      <>
+        {status === 'in_progress' && (
+          <CallContainer state={state}>
+            <IconContainer state={state}>
+              {state === 'inbound' ? (
+                <PhoneCallbackOutlinedIcon sx={{ color: '#4A5565' }} />
+              ) : (
+                <PhoneOutlinedIcon />
+              )}
+            </IconContainer>
+
+            <CallInfoContainer state={state}>
+              <h4>
+                <strong>Voice Call</strong>
+              </h4>
+
+              <p>{duration}</p>
+            </CallInfoContainer>
+          </CallContainer>
+        )}
+        {status === 'answered' && (
+          <CallContainer state={state}>
+            <IconContainer state={state}>
+              {state === 'inbound' ? (
+                <PhoneCallbackOutlinedIcon sx={{ color: '#4A5565' }} />
+              ) : (
+                <PhoneOutlinedIcon />
+              )}
+            </IconContainer>
+
+            <CallInfoContainer state={state}>
+              <h4>
+                <strong>Voice Call</strong>
+              </h4>
+
+              <p>{formatCallDuration(message.talk_duration)}</p>
+            </CallInfoContainer>
+          </CallContainer>
+        )}
+        {status === 'no answer' && (
+          <CallContainer state={state}>
+            <IconContainer state={state}>
+              <PhoneMissedIcon sx={{ color: '#e64d4dff' }} />
+            </IconContainer>
+
+            <CallInfoContainer state={state}>
+              <h4>
+                <strong>Voice Call</strong>
+              </h4>
+
+              <p>No answer</p>
+            </CallInfoContainer>
+          </CallContainer>
+        )}
+      </>
+    ),
+  };
+
+  const FallbackRenderer = () => (
+    <>
+      <div>{status}</div>
+    </>
+  );
+
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return (
+    <Messages
+      type={type}
+      state={state}
+      isInteractive={isInteractive}
+      connector={connector}
+      isImg
+    >
+      <ConnectorRenderer />
+    </Messages>
+  );
+};
 const ProductDetailRender = ({ type, state, header, body, isInteractive }) => {
   return (
     <>
@@ -820,19 +1026,15 @@ BmChat.Details = ({
   sessionTimeline,
   feedPostComments,
   agentName,
-  callLog,
+
   metadata,
   isInteractive,
   type,
   extension,
   ...rest
 }) => {
-  console.log({ type });
-  console.log(children);
-  console.log(metadata);
   return (
     <>
-      {type === 'call' && <CallPill message={children.message} />}
       <Details state={state} {...rest}>
         {/* Adding for mobile */}
         <MessageState>
@@ -949,6 +1151,14 @@ BmChat.Details = ({
                           connector={children?.connector}
                         />
                       )}
+                      {children.message.type === 'call' && (
+                        <CallRender
+                          {...children.message}
+                          type={type}
+                          state={state}
+                          connector={children?.connector}
+                        />
+                      )}
                     </>
                   ) : type === 'pdf' ? (
                     <>
@@ -961,12 +1171,7 @@ BmChat.Details = ({
                       </Document>
                     </>
                   ) : (
-                    // : type === 'call' ? (
-                    //   <CallPill message={children.message} />
-                    // )
-                    type !== 'call' && (
-                      <Messages state={state}>{children}</Messages>
-                    )
+                    <Messages state={state}>{children}</Messages>
                   )}
                 </>
               )}

package/dist/components/ChatComponents/ChatBody/CallLog.js

@@ -1,221 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CallPill = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _iconsMaterial = require("@mui/icons-material");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _dateFns = require("date-fns");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// // CallPill.jsx
-// import React from 'react';
-// import styled from 'styled-components';
-// import PhoneIcon from '@mui/icons-material/Phone';
-
-// export const CallPill = ({ message, icon: Icon = PhoneIcon }) => {
-//   if (!message) return null; // safety check
-//   const formatDuration = (seconds) => {
-//     const mins = Math.floor(seconds / 60);
-//     const secs = seconds % 60;
-
-//     const minsPart = mins ? `${mins} min${mins > 1 ? 's' : ''}` : '';
-//     const secsPart = secs ? `${secs}s` : '';
-
-//     return [minsPart, secsPart].filter(Boolean).join(' ');
-//   };
-
-//   console.log(message);
-//   console.log('SSSSS');
-//   const label = `${message.type} • ${message.status}`;
-//   const duration = formatDuration(message.talk_duration);
-//   console.log(`${label} • ${duration}`);
-//   return (
-//     <SessionTimelineWrapper>
-//       <Container>
-//         <IconWrapper>
-//           <Icon fontSize="small" />
-//         </IconWrapper>
-//         <Text>
-//           {label} • {duration}
-//         </Text>
-//       </Container>
-//     </SessionTimelineWrapper>
-//   );
-// };
-// const SessionTimelineWrapper = styled.div`
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: center;
-//   align-items: center;
-//   text-align: center;
-//   margin-bottom: 0.5rem;
-//   margin-top: 0.5rem;
-// `;
-// const Container = styled.div`
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: center;
-//   align-items: center;
-//   text-align: center;
-//   /* display: inline-flex;
-//   justify-content: center;
-//   align-items: center; */
-//   gap: 6px;
-//   background: #f4f5f7;
-//   border-radius: 999px;
-//   padding: 6px 14px;
-//   font-size: 14px;
-//   color: #4a4a4a;
-//   border: 1px solid #e2e2e2;
-//   max-width: fit-content;
-//   white-space: nowrap;
-
-//   @media (max-width: 480px) {
-//     font-size: 12px;
-//     padding: 5px 10px;
-//   }
-// `;
-
-// const IconWrapper = styled.div`
-//   display: flex;
-//   align-items: center;
-// `;
-
-// const Text = styled.span`
-//   display: inline-block;
-//   overflow: hidden;
-//   text-overflow: ellipsis;
-// `;
-
-// // import PhoneIcon from '@mui/icons-material/Phone';
-
-// // export default {
-// //   title: 'Components/CallPill',
-// //   component: CallPill,
-// //   argTypes: {
-// //     icon: { control: false },
-// //   },
-// // };
-
-// // const Template = (args) => <CallPill {...args} />;
-
-// // export const SampleNoAnswer = Template.bind({});
-// // SampleNoAnswer.args = {
-// //   call: {
-// //     call_id: '1764099020.52',
-// //     time_start: '2025-11-25 22:30:20',
-// //     call_from: '004',
-// //     call_to: '0782270052',
-// //     call_duration: 2,
-// //     talk_duration: 0,
-// //     src_trunk_name: '',
-// //     dst_trunk_name: 'drtest3cx',
-// //     pin_code: '',
-// //     status: 'NO ANSWER',
-// //     type: 'Outbound',
-// //     recording: '',
-// //     did_number: '',
-// //     did_name: '',
-// //     agent_ring_time: 0,
-// //     uid: '202511252230209719F',
-// //     call_note_id: '20251125223020-33142',
-// //     enb_call_note: 16,
-// //   },
-// //   icon: PhoneIcon,
-// // };
-
-// // export const SampleAnswered = Template.bind({});
-// // SampleAnswered.args = {
-// //   call: {
-// //     call_id: '1764099020.52',
-// //     time_start: '2025-11-25 22:30:20',
-// //     call_from: '004',
-// //     call_to: '0782270052',
-// //     call_duration: 2,
-// //     talk_duration: 7,
-// //     src_trunk_name: '',
-// //     dst_trunk_name: 'drtest3cx',
-// //     pin_code: '',
-// //     status: 'ANSWERED',
-// //     type: 'Outbound',
-// //     recording: '',
-// //     did_number: '',
-// //     did_name: '',
-// //     agent_ring_time: 0,
-// //     uid: '202511252230209719F',
-// //     call_note_id: '20251125223020-33142',
-// //     enb_call_note: 16,
-// //   },
-// //   icon: PhoneIcon,
-// // };
-
-const SessionTimelineWrapper = _styledComponents.default.div.withConfig({
-  displayName: "CallLog__SessionTimelineWrapper"
-})(["display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;margin-bottom:0.5rem;margin-top:0.5rem;"]);
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "CallLog__Container"
-})(["display:flex;align-items:center;padding:6px 9px;border-radius:14px;font-size:0.875rem;border:0.5px solid ", ";background-color:", ";color:", ";box-shadow:0 2px 4px rgba(0,0,0,0.1);"], _ref => {
-  let {
-    status
-  } = _ref;
-  return status === 'NO ANSWER' ? '#FEE2E2' : '#e0e0e0';
-}, _ref2 => {
-  let {
-    status
-  } = _ref2;
-  return status === 'NO ANSWER' ? '#FEF2F2' : '#f0f0f0';
-}, _ref3 => {
-  let {
-    status
-  } = _ref3;
-  return status === 'NO ANSWER' ? 'red' : '#6A7282';
-});
-const IconWrapper = _styledComponents.default.span.withConfig({
-  displayName: "CallLog__IconWrapper"
-})(["display:flex;margin-right:0.575rem;svg{color:", ";font-size:", ";@media (min-width:45.7143rem){font-size:calc(", " * 1.15);}@media (min-width:73.1429rem){font-size:calc(", " * 1.3);}}"], _ref4 => {
-  let {
-    color
-  } = _ref4;
-  return color || 'inherit';
-}, _ref5 => {
-  let {
-    size
-  } = _ref5;
-  return size || '0.875rem';
-}, _ref6 => {
-  let {
-    size
-  } = _ref6;
-  return size || '0.875rem';
-}, _ref7 => {
-  let {
-    size
-  } = _ref7;
-  return size || '0.875rem';
-});
-const Text = _styledComponents.default.span.withConfig({
-  displayName: "CallLog__Text"
-})(["font-size:inherit;font-weight:400;"]);
-const CallPill = _ref8 => {
-  let {
-    message
-  } = _ref8;
-  if (!message) return null;
-  const label = message.status === 'NO ANSWER' ? 'Missed call' : 'Answered call';
-  const formatDuration = seconds => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    const minsPart = mins ? "".concat(mins, " min").concat(mins > 1 ? 's' : '') : '';
-    const secsPart = secs ? "".concat(secs, "s") : '';
-    return [minsPart, secsPart].filter(Boolean).join(' ');
-  };
-  const formattedTime = (0, _dateFns.format)(new Date(message.time_start), 'M/d/yyyy hh:mm a');
-  const Icon = message.status === 'NO ANSWER' ? _iconsMaterial.PhoneMissedOutlined : _iconsMaterial.Phone;
-  const duration = message.status === 'NO ANSWER' ? formattedTime : formatDuration(message.talk_duration);
-  return /*#__PURE__*/_react.default.createElement(SessionTimelineWrapper, null, /*#__PURE__*/_react.default.createElement(Container, {
-    status: message.status
-  }, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(Text, null, label, " \u2022 ", duration)));
-};
-exports.CallPill = CallPill;