diff --git a/src/webchat-ui/components/WebchatUI.tsx b/src/webchat-ui/components/WebchatUI.tsx index cc4c037c..3ae28f31 100644 --- a/src/webchat-ui/components/WebchatUI.tsx +++ b/src/webchat-ui/components/WebchatUI.tsx @@ -65,6 +65,7 @@ import { TeaserMessage } from "./presentational/TeaserMessage"; import XAppOverlay from "./functional/xapp-overlay/XAppOverlay"; import { getSourceBackgroundColor } from "../utils/sourceMapping"; import type { Options } from "@cognigy/socket-client/lib/interfaces/options"; +import QueueUpdates from "./history/QueueUpdates"; export interface WebchatUIProps { currentSession: string; @@ -1142,6 +1143,7 @@ export class WebchatUI extends React.PureComponent< {this.renderHistory()} + {this.renderInput()} ); diff --git a/src/webchat-ui/components/history/QueueUpdates.tsx b/src/webchat-ui/components/history/QueueUpdates.tsx new file mode 100644 index 00000000..87173c60 --- /dev/null +++ b/src/webchat-ui/components/history/QueueUpdates.tsx @@ -0,0 +1,50 @@ +import React, { FC } from "react"; +import styled from "@emotion/styled"; +import { Typography } from "@cognigy/chat-components"; +import { useSelector } from "../../../webchat/helper/useSelector"; +import { formatWaitTime } from "../../utils/formatWaitTime"; + +const StyledQueueUpdates = styled.div(() => ({ + marginBottom: "var(--webchat-message-margin-block, 24px)", + marginInline: "var(--webchat-message-margin-inline, 20px)", + padding: "12px", + textAlign: "center", + color: "var(--cc-black-40, #666)", + lineHeight: "140%", + "& span": { + display: "block", + }, +})); + +const QueueUpdates: FC = () => { + const queueUpdates = useSelector(state => state.queueUpdates ?? {}); + + if (!queueUpdates || !queueUpdates?.isQueueActive) return null; + + return ( + + + {queueUpdates?.alternativeText ? ( + {queueUpdates.alternativeText} + ) : ( + <> + + Current queue position: {queueUpdates?.position || ""} + + + Estimated waiting time:{" "} + {formatWaitTime(queueUpdates?.estimatedWaitTime)} + + + )} + + + ); +}; + +export default QueueUpdates; diff --git a/src/webchat-ui/utils/formatWaitTime.ts b/src/webchat-ui/utils/formatWaitTime.ts new file mode 100644 index 00000000..56267e5d --- /dev/null +++ b/src/webchat-ui/utils/formatWaitTime.ts @@ -0,0 +1,24 @@ +// used on Queue Updates +export const formatWaitTime = (ms: number | null) => { + if (!ms) return ""; + const seconds = ms / 1000; + + const getMinutes = (minutes: number) => { + return `${minutes} ${minutes > 1 ? "minutes" : "minute"}`; + }; + + if (seconds < 60) { + return `${seconds} seconds`; + } + const minutes = Math.floor(seconds / 60); + if (minutes < 60) { + return getMinutes(minutes); + } + + const hours = Math.floor(seconds / 3600); + const restMinutes = minutes - hours * 60; + + return `${hours} ${hours > 1 ? "hours" : "hour"}${ + restMinutes > 0 ? ` and ${getMinutes(restMinutes)}` : "" + }`; +}; \ No newline at end of file diff --git a/src/webchat/store/queue-updates/slice.ts b/src/webchat/store/queue-updates/slice.ts index e0594b85..25b18a88 100644 --- a/src/webchat/store/queue-updates/slice.ts +++ b/src/webchat/store/queue-updates/slice.ts @@ -5,14 +5,14 @@ export interface IQueueUpdateState { isQueueActive: boolean; position: number | null; estimatedWaitTime: number | null; - alternativeMessage: string | null; + alternativeText: string | null; } const initialState: IQueueUpdateState = { isQueueActive: false, position: null, estimatedWaitTime: null, - alternativeMessage: null, + alternativeText: null, }; const queueUpdates = createSlice({ @@ -23,7 +23,7 @@ const queueUpdates = createSlice({ state.isQueueActive = true; state.position = action.payload?.position || null; state.estimatedWaitTime = action.payload?.estimatedWaitTime || null; - state.alternativeMessage = action.payload?.alternativeMessage || null; + state.alternativeText = action.payload?.alternativeText || null; }, resetQueueData: () => initialState, },