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,
},