@microsoft/omnichannel-chat-widget 1.2.3-main.000f886 → 1.2.3-main.d27a359

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware.spec.js

@@ -0,0 +1,188 @@
+import { Constants } from "../../../../../common/Constants";
+import { DirectLineActivityType } from "../../enums/DirectLineActivityType";
+import { DirectLineSenderRole } from "../../enums/DirectLineSenderRole";
+import { MessageTypes } from "../../enums/MessageType";
+import { TelemetryHelper } from "../../../../../common/telemetry/TelemetryHelper";
+import { createActivityMiddleware } from "./activityMiddleware";
+describe("activityMiddleware test", () => {
+  it("createActivityMiddleware() with Channel role sender should returns nothing", () => {
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const args = {
+      activity: {
+        channelData: {
+          type: MessageTypes.Thread
+        },
+        from: {
+          role: DirectLineSenderRole.Channel
+        }
+      }
+    };
+    const results = createActivityMiddleware()()(next)(args);
+    expect(results()).toEqual(false);
+    expect(TelemetryHelper.logActionEvent).toHaveBeenCalledTimes(1);
+  });
+  it("createActivityMiddleware() with Hidden tag should return nothing", () => {
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const args = {
+      activity: {
+        channelData: {
+          tags: [Constants.hiddenTag]
+        },
+        from: {
+          role: DirectLineSenderRole.User
+        }
+      }
+    };
+    const results = createActivityMiddleware()()(next)(args);
+    expect(results()).toEqual(false);
+    expect(TelemetryHelper.logActionEvent).toHaveBeenCalledTimes(0);
+  });
+  it("createActivityMiddleware() with System tag should return system message", () => {
+    var _results$props, _results$props$danger;
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const systemMessage = "system message";
+    const args = {
+      activity: {
+        text: systemMessage,
+        channelData: {
+          tags: [Constants.systemMessageTag]
+        },
+        from: {
+          role: DirectLineSenderRole.User
+        }
+      }
+    };
+    const results = createActivityMiddleware()()(next)(args);
+    expect(TelemetryHelper.logActionEvent).toHaveBeenCalledTimes(0);
+    expect((_results$props = results().props) === null || _results$props === void 0 ? void 0 : (_results$props$danger = _results$props.dangerouslySetInnerHTML) === null || _results$props$danger === void 0 ? void 0 : _results$props$danger.__html).toEqual(systemMessage);
+  });
+  it("createActivityMiddleware() should escape html texts to prevent XSS attacks", () => {
+    var _results$props2, _results$props2$dange;
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const systemMessage = "<img src='' onerror=\"alert('XSS attack')\"/>";
+    const args = {
+      activity: {
+        text: systemMessage,
+        channelData: {
+          tags: [Constants.systemMessageTag]
+        },
+        from: {
+          role: DirectLineSenderRole.User
+        }
+      }
+    };
+    const results = createActivityMiddleware()()(next)(args);
+    expect(TelemetryHelper.logActionEvent).toHaveBeenCalledTimes(0);
+    expect((_results$props2 = results().props) === null || _results$props2 === void 0 ? void 0 : (_results$props2$dange = _results$props2.dangerouslySetInnerHTML) === null || _results$props2$dange === void 0 ? void 0 : _results$props2$dange.__html).toEqual("&lt;img src=&#39;&#39; onerror=&quot;alert(&#39;XSS attack&#39;)&quot;&#x2F;&gt;");
+  });
+  it("createActivityMiddleware() with QueuePosition tag should log QueuePosition message", () => {
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const systemMessage = "system message";
+    const args = {
+      activity: {
+        text: systemMessage,
+        channelData: {
+          tags: [Constants.systemMessageTag, Constants.queuePositionMessageTag]
+        },
+        from: {
+          role: DirectLineSenderRole.User
+        }
+      }
+    };
+    createActivityMiddleware()()(next)(args);
+    expect(TelemetryHelper.logActionEvent).toHaveBeenCalledTimes(1);
+  });
+  it("createActivityMiddleware() with same clientmessageid with next activity should return nothing", () => {
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const systemMessage = "system message";
+    const args = {
+      activity: {
+        text: systemMessage,
+        channelData: {
+          tags: [Constants.systemMessageTag],
+          clientmessageid: "1234"
+        },
+        from: {
+          role: DirectLineSenderRole.User
+        }
+      },
+      nextVisibleActivity: {
+        channelData: {
+          clientmessageid: "1234"
+        }
+      }
+    };
+    const results = createActivityMiddleware()()(next)(args);
+    expect(results()).toEqual(false);
+  });
+  it("createActivityMiddleware() with same messageid with next activity should return nothing", () => {
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const systemMessage = "system message";
+    const args = {
+      activity: {
+        text: systemMessage,
+        channelData: {
+          tags: [Constants.systemMessageTag]
+        },
+        from: {
+          role: DirectLineSenderRole.User
+        },
+        messageid: "1234"
+      },
+      nextVisibleActivity: {
+        messageid: "1234"
+      }
+    };
+    const results = createActivityMiddleware()()(next)(args);
+    expect(results()).toEqual(false);
+  });
+  it("createActivityMiddleware() should render normal user messages", () => {
+    var _results$props3, _results$props3$child, _results$props3$child2;
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const userMessage = "Hello World";
+    const args = {
+      activity: {
+        text: userMessage,
+        channelId: "webchat",
+        channelData: {
+          isHtmlEncoded: false
+        },
+        from: {
+          role: DirectLineSenderRole.User
+        },
+        type: DirectLineActivityType.Message
+      }
+    };
+    const results = createActivityMiddleware()()(next)(args);
+    expect((_results$props3 = results().props) === null || _results$props3 === void 0 ? void 0 : (_results$props3$child = _results$props3.children) === null || _results$props3$child === void 0 ? void 0 : (_results$props3$child2 = _results$props3$child.activity) === null || _results$props3$child2 === void 0 ? void 0 : _results$props3$child2.text).toEqual(userMessage);
+  });
+  it("createActivityMiddleware() should not render typing messages", () => {
+    var _results$activity;
+    spyOn(TelemetryHelper, "logActionEvent").and.callFake(() => false);
+    const next = args => () => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const userMessage = "Hello World";
+    const args = {
+      activity: {
+        text: userMessage,
+        channelId: "webchat",
+        channelData: {
+          isHtmlEncoded: false
+        },
+        from: {
+          role: DirectLineSenderRole.User
+        },
+        type: DirectLineActivityType.Typing
+      }
+    };
+    const results = createActivityMiddleware()()(next)(args);
+    expect((_results$activity = results().activity) === null || _results$activity === void 0 ? void 0 : _results$activity.text).toEqual(userMessage);
+  });
+});

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware.js

@@ -202,12 +202,17 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         id: attachmentId,
         style: atttachmentAdaptiveCardStyles
       }, next(...args));
+    } else if (contentType.startsWith(Constants.adaptiveCardContentTypePrefix)) {
+      console.warn(`${contentType} adaptive card type is currently not supported.`);
     }
     if ((_card$activity$channe = card.activity.channelData) !== null && _card$activity$channe !== void 0 && _card$activity$channe.middlewareData) {
       attachment.contentUrl = card.activity.channelData.middlewareData[attachment.name];
     } else if (attachment !== null && attachment !== void 0 && attachment.tempContentUrl) {
       attachment.contentUrl = attachment.tempContentUrl;
     }
+    if (!attachment.name) {
+      return next(...args);
+    }
     const fileExtension = attachment.name.substring(attachment.name.lastIndexOf(".") + 1, attachment.name.length) || attachment.name;
     const imageExtension = Constants.imageRegex.test(attachment.name);
     const audioExtension = Constants.audioMediaRegex.test(attachment.name);

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageSequenceIdOverrideMiddleware.js

@@ -0,0 +1,58 @@
+import { WebChatActionType } from "../../enums/WebChatActionType";
+import { Constants } from "../../../../../common/Constants";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const createMessageSequenceIdOverrideMiddleware = _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    if (isApplicable(action)) {
+      return next(overrideSequenceIdWithOriginalMessageId(action));
+    }
+    return next(action);
+  };
+};
+const isApplicable = action => {
+  return action.type === WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY && isValidChannel(action) && isWebSequenceIdPresent(action) && lookupOriginalMessageId(action) !== undefined;
+};
+const isValidChannel = action => {
+  var _action$payload, _action$payload$activ;
+  return (action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$activ = _action$payload.activity) === null || _action$payload$activ === void 0 ? void 0 : _action$payload$activ.channelId) === Constants.acsChannel;
+};
+const isChannelDataPresent = action => {
+  var _action$payload2, _action$payload2$acti, _action$payload3, _action$payload3$acti;
+  return (action === null || action === void 0 ? void 0 : (_action$payload2 = action.payload) === null || _action$payload2 === void 0 ? void 0 : (_action$payload2$acti = _action$payload2.activity) === null || _action$payload2$acti === void 0 ? void 0 : _action$payload2$acti.channelData) !== undefined && (action === null || action === void 0 ? void 0 : (_action$payload3 = action.payload) === null || _action$payload3 === void 0 ? void 0 : (_action$payload3$acti = _action$payload3.activity) === null || _action$payload3$acti === void 0 ? void 0 : _action$payload3$acti.channelData) !== null;
+};
+const isWebSequenceIdPresent = action => {
+  if (!isChannelDataPresent(action)) return false;
+  const channelData = action.payload.activity.channelData;
+  return Object.keys(channelData).some(key => {
+    return key === Constants.WebchatSequenceIdAttribute;
+  });
+};
+const overrideSequenceIdWithOriginalMessageId = action => {
+  const originalMessageId = extractOriginalMessageId(action);
+  const channelData = action.payload.activity.channelData;
+  if (originalMessageId === undefined) return action;
+  Object.keys(channelData).forEach(function (key) {
+    if (key === Constants.WebchatSequenceIdAttribute && action.payload.activity.channelData[key] !== originalMessageId) {
+      action.payload.activity.channelData[key] = originalMessageId;
+    }
+  });
+  return action;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const extractOriginalMessageId = action => {
+  const originalMessageId = lookupOriginalMessageId(action);
+  if (typeof originalMessageId !== "string" || originalMessageId === "") {
+    return undefined;
+  }
+  const originalMessageIdResult = parseInt(originalMessageId);
+  return isNaN(originalMessageIdResult) ? undefined : originalMessageIdResult;
+};
+const lookupOriginalMessageId = action => {
+  var _action$payload4, _action$payload4$acti, _action$payload4$acti2, _action$payload4$acti3;
+  return action === null || action === void 0 ? void 0 : (_action$payload4 = action.payload) === null || _action$payload4 === void 0 ? void 0 : (_action$payload4$acti = _action$payload4.activity) === null || _action$payload4$acti === void 0 ? void 0 : (_action$payload4$acti2 = _action$payload4$acti.channelData) === null || _action$payload4$acti2 === void 0 ? void 0 : (_action$payload4$acti3 = _action$payload4$acti2.metadata) === null || _action$payload4$acti3 === void 0 ? void 0 : _action$payload4$acti3.OriginalMessageId;
+};
+export default createMessageSequenceIdOverrideMiddleware;

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageSequenceIdOverrideMiddleware.spec.js

@@ -0,0 +1,338 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Constants } from "../../../../../common/Constants";
+import { WebChatActionType } from "../../enums/WebChatActionType";
+import createMessageSequenceIdOverrideMiddleware from "./messageSequenceIdOverrideMiddleware";
+describe("messageSequenceIdOverrideMiddleware", () => {
+  it("sequenceId is overrided", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {
+              "OriginalMessageId": "1683742135918"
+            },
+            "webchat:sequence-id": 12345
+          }
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    let resultValue;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+    const channelData = middleware.payload.activity.channelData;
+    Object.keys(channelData).forEach(function (key) {
+      if (key === Constants.WebchatSequenceIdAttribute) {
+        resultValue = channelData[key];
+      }
+    });
+    expect(resultValue).toEqual(1683742135918);
+  });
+  it("sequenceId is not overrided due to empty string for originalID", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {
+              "OriginalMessageId": ""
+            },
+            "webchat:sequence-id": 12345
+          }
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    let resultValue;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+    const channelData = middleware.payload.activity.channelData;
+    Object.keys(channelData).forEach(function (key) {
+      if (key === Constants.WebchatSequenceIdAttribute) {
+        resultValue = channelData[key];
+      }
+    });
+    expect(resultValue).toEqual(12345);
+  });
+  it("sequenceId is not overrided, due to OriginalMessageId being not a string of numbers ", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {
+              "OriginalMessageId": "abcdf"
+            },
+            "webchat:sequence-id": 12345
+          }
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    let resultValue;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+    const channelData = middleware.payload.activity.channelData;
+    Object.keys(channelData).forEach(function (key) {
+      if (key === Constants.WebchatSequenceIdAttribute) {
+        resultValue = channelData[key];
+      }
+    });
+    expect(resultValue).toEqual(12345);
+  });
+  it("no changes since webchat id is not present", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const payloadExpected = {
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {
+              "OriginalMessageId": "123456789"
+            }
+          }
+        }
+      }
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {
+              "OriginalMessageId": "123456789"
+            }
+          }
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    expect(middleware.payload).toEqual(payloadExpected.payload);
+  });
+  it("no changes since OriginalMessageId is not present", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const payloadExpected = {
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {},
+            "webchat:sequence-id": 12345
+          }
+        }
+      }
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {},
+            "webchat:sequence-id": 12345
+          }
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    expect(middleware.payload).toEqual(payloadExpected.payload);
+  });
+  it("no override, since the type of message is not incoming activity", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const action = {
+      type: "something else",
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {
+              "OriginalMessageId": "1683742135918"
+            },
+            "webchat:sequence-id": 12345
+          }
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    let resultValue;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+    const channelData = middleware.payload.activity.channelData;
+    Object.keys(channelData).forEach(function (key) {
+      if (key === Constants.WebchatSequenceIdAttribute) {
+        resultValue = channelData[key];
+      }
+    });
+    expect(resultValue).toEqual(12345);
+  });
+  it("no override, since the channel is not ACS", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-text",
+        activity: {
+          channelId: "something_else",
+          from: {
+            role: "user"
+          },
+          channelData: {
+            metadata: {
+              "OriginalMessageId": "1683742135918"
+            },
+            "webchat:sequence-id": 12345
+          }
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    let resultValue;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+    const channelData = middleware.payload.activity.channelData;
+    Object.keys(channelData).forEach(function (key) {
+      if (key === Constants.WebchatSequenceIdAttribute) {
+        resultValue = channelData[key];
+      }
+    });
+    expect(resultValue).toEqual(12345);
+  });
+  it("no override, since the channel channelData is not present", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-text channel data is not present",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          }
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    expect(middleware.payload).toEqual(action.payload);
+  });
+  it("no override, since channelData is empty object", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-text channel data empty",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: {}
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    expect(middleware.payload).toEqual(action.payload);
+  });
+  it("no override, since channelData null", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const next = args => args;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dispatch = () => {
+      return 1;
+    };
+    const action = {
+      type: WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY,
+      payload: {
+        text: "test-channel Data null",
+        activity: {
+          channelId: "ACS_CHANNEL",
+          from: {
+            role: "user"
+          },
+          channelData: null
+        }
+      }
+    };
+    const middleware = createMessageSequenceIdOverrideMiddleware(dispatch)(next)(action);
+    expect(middleware.payload).toEqual(action.payload);
+  });
+});

package/lib/esm/plugins/createChatTranscript.js

@@ -120,7 +120,13 @@ class TranscriptHTMLBuilder {
                 <script>
                     class Translator {
                         static convertTranscriptMessageToActivity(message) {
-                            const {created, isControlMessage, content, tags, from, attachments, amsMetadata, amsReferences} = message;
+                            const {created, OriginalMessageId, id, isControlMessage, content, tags, from, attachments, amsMetadata, amsReferences} = message;
+                            
+                            //it's required to convert the id to a number, otherwise the webchat will not render the messages in the correct order
+                            // if the OrginalMessageId is not present, we can use the id as the sequence id, which is always present.
+                            
+                            const webchatSequenceId = Translator.convertStringValueToInt(OriginalMessageId) || Translator.convertStringValueToInt(id);
+                            
                             const activity = {
                                 from: {
                                     role: 'bot'
@@ -175,7 +181,10 @@ class TranscriptHTMLBuilder {
                                 return {
                                     ...activity,
                                     text,
-                                    timestamp: created
+                                    timestamp: created,
+                                    channelData: { 
+                                        "webchat:sequence-id": webchatSequenceId
+                                    }
                                 }
                             }
 
@@ -188,7 +197,10 @@ class TranscriptHTMLBuilder {
                                         return {
                                             ...activity,
                                             ...partialActivity,
-                                            timestamp: created
+                                            timestamp: created,
+                                            channelData: { 
+                                                "webchat:sequence-id": webchatSequenceId
+                                            }
                                         };
                                     } catch {
 
@@ -199,9 +211,21 @@ class TranscriptHTMLBuilder {
                             return {
                                 ...activity,
                                 text: content,
-                                timestamp: created
+                                timestamp: created,
+                                channelData: { 
+                                    "webchat:sequence-id": webchatSequenceId
+                                }
                             };
                         }
+                        
+                        static convertStringValueToInt(value) {
+                            if (typeof value !== "string" || value === "") {
+                                return undefined;
+                            }
+
+                            const result = parseInt(value);
+                            return isNaN(result) ? undefined : result;
+                        }
                     }
                 <\/script>
                 <script>

package/lib/types/common/Constants.d.ts

@@ -41,6 +41,7 @@ export declare class Constants {
     static readonly acsChannel = "ACS_CHANNEL";
     static readonly publicMessageTag = "public";
     static readonly supportedAdaptiveCardContentTypes: Array<string>;
+    static readonly adaptiveCardContentTypePrefix = "application/vnd.microsoft.card";
     static readonly maxUploadFileSize = "500000";
     static readonly imageRegex: RegExp;
     static readonly audioMediaRegex: RegExp;
@@ -86,6 +87,9 @@ export declare class Constants {
     static readonly LWICheckOnVisibilityTimeout: number;
     static readonly InitContextParamsRequest = "initContextParamsRequest";
     static readonly InitContextParamsResponse = "initContextParamsResponse";
+    static readonly OCOriginalMessageId = "OriginalMessageId";
+    static readonly WebchatSequenceIdAttribute = "webchat:sequence-id";
+    static readonly MessageSequenceIdOverride = "MessageSequenceIdOverride";
 }
 export declare const Regex: {
     new (): {};