From 853ed6e099e6fa06b9ef3b6a8c1f37f23fbac30b Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Tue, 10 Jun 2025 07:26:47 +0800
Subject: [PATCH 01/11] feat: enhance diagram interaction with cursor tracking
 and element highlighting

---
 index.html                                    | 11 ++++-
 src/assets/tailwind.css                       |  4 ++
 .../SeqDiagram/MessageLayer/MessageLabel.tsx  | 40 ++++++++++++++++++-
 src/core.tsx                                  | 21 ++++++++++
 src/store/Store.ts                            |  4 +-
 5 files changed, 76 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index e9ed36ce..6a34751e 100644
--- a/index.html
+++ b/index.html
@@ -89,9 +89,12 @@
         singleCursorHeightPerLine: false,
       });
 
-      const updateDiagram = debounce((content) => {
+      const updateDiagram = debounce((content, cursor) => {
         const config = createConfig({
           onContentChange: (code) => editor.setValue(code),
+          cursor: cursor,
+          enableCurrentElementScrollIntoView: true,
+          enableCurrentElementHighlight: true,
         });
 
         window.zenUml.render(content, config).then((r) => {
@@ -105,13 +108,17 @@
         waitUntil(
           () => window.zenUml,
           () => {
-            updateDiagram(cm.getValue());
+            updateDiagram(cm.getValue(), cm.indexFromPos(cm.getCursor()));
             // Save to localStorage
             localStorage.setItem("zenuml-cm-code", cm.getValue());
           },
         );
       });
 
+      editor.on("cursorActivity", function (cm) {
+        updateDiagram(cm.getValue(), cm.indexFromPos(cm.getCursor()));
+      });
+
       // Load saved code from localStorage
       const savedCode = localStorage.getItem("zenuml-cm-code");
       if (savedCode) {
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index 03feee66..f2c9a2c0 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -19,6 +19,10 @@
     serif;
 }
 
+.zenuml .highlight {
+  background-color: rgba(255, 255, 0, 0.3);
+}
+
 @layer base {
   :root {
     --color-bg-base: #ffffff;
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
index 40dcde61..2c2e1acb 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
@@ -1,10 +1,18 @@
-import { codeAtom, modeAtom, onContentChangeAtom } from "@/store/Store";
+import {
+  codeAtom,
+  modeAtom,
+  onContentChangeAtom,
+  cursorAtom,
+  enableCurrentElementHighlightAtom,
+  enableCurrentElementScrollIntoViewAtom,
+} from "@/store/Store";
 import { cn } from "@/utils";
 import { useAtom, useAtomValue } from "jotai";
 import { formatText } from "@/utils/StringUtil";
 import { useEditLabel, specialCharRegex } from "@/functions/useEditLabel";
 import { RenderMode } from "@/store/Store";
 import type { FocusEvent, KeyboardEvent, MouseEvent } from "react";
+import { useEffect, useRef } from "react";
 
 export const MessageLabel = (props: {
   labelText: string;
@@ -16,8 +24,36 @@ export const MessageLabel = (props: {
 }) => {
   const mode = useAtomValue(modeAtom);
   const [code, setCode] = useAtom(codeAtom);
+  const cursor = useAtomValue(cursorAtom);
   const onContentChange = useAtomValue(onContentChangeAtom);
+  const enableCurrentElementHighlight = useAtomValue(
+    enableCurrentElementHighlightAtom,
+  );
+  const enableCurrentElementScrollIntoView = useAtomValue(
+    enableCurrentElementScrollIntoViewAtom,
+  );
   const formattedLabelText = formatText(props.labelText);
+  const labelRef = useRef<HTMLLabelElement>(null);
+
+  const isCurrent =
+    cursor != null &&
+    cursor >= props.labelPosition[0] &&
+    cursor <= props.labelPosition[1] + 1;
+
+  useEffect(() => {
+    if (
+      isCurrent &&
+      props.labelText &&
+      labelRef.current &&
+      enableCurrentElementScrollIntoView
+    ) {
+      labelRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest",
+      });
+    }
+  }, [isCurrent, props.labelText, enableCurrentElementScrollIntoView]);
 
   const replaceLabelText = (e: FocusEvent | KeyboardEvent | MouseEvent) => {
     e.preventDefault();
@@ -61,10 +97,12 @@ export const MessageLabel = (props: {
 
   return (
     <label
+      ref={labelRef}
       title="Double click to edit"
       className={cn(
         "px-1 cursor-text right hover:text-skin-message-hover hover:bg-skin-message-hover",
         editing && "cursor-text",
+        isCurrent && enableCurrentElementHighlight && "bg-blue-100",
         props.className,
       )}
       style={props.style}
diff --git a/src/core.tsx b/src/core.tsx
index 80df1259..03826992 100644
--- a/src/core.tsx
+++ b/src/core.tsx
@@ -1,6 +1,9 @@
 import parentLogger from "./logger/logger";
 import store, {
   codeAtom,
+  cursorAtom,
+  enableCurrentElementHighlightAtom,
+  enableCurrentElementScrollIntoViewAtom,
   enableMultiThemeAtom,
   enableScopedThemingAtom,
   modeAtom,
@@ -44,6 +47,9 @@ interface Config {
   onContentChange?: (code: string) => void;
   onEventEmit?: (name: string, data: unknown) => void;
   mode?: RenderMode;
+  cursor?: number | null;
+  enableCurrentElementHighlight?: boolean;
+  enableCurrentElementScrollIntoView?: boolean;
 }
 interface IZenUml {
   get code(): string | undefined;
@@ -106,6 +112,21 @@ export default class ZenUml implements IZenUml {
       config?.enableScopedTheming || false,
     );
     this.store.set(modeAtom, config?.mode || RenderMode.Dynamic);
+    this.store.set(cursorAtom, config?.cursor || null);
+
+    if (config?.enableCurrentElementHighlight !== undefined) {
+      this.store.set(
+        enableCurrentElementHighlightAtom,
+        config.enableCurrentElementHighlight,
+      );
+    }
+
+    if (config?.enableCurrentElementScrollIntoView !== undefined) {
+      this.store.set(
+        enableCurrentElementScrollIntoViewAtom,
+        config.enableCurrentElementScrollIntoView,
+      );
+    }
 
     // this.initialRender is used to avoid the first rendering is debounced by setTimeout.
     // The first rendering should be executed immediately. It fixes the issue that causes the blank screen on mermaid live editor.
diff --git a/src/store/Store.ts b/src/store/Store.ts
index 95ea385b..e28449fa 100644
--- a/src/store/Store.ts
+++ b/src/store/Store.ts
@@ -60,7 +60,9 @@ export const onSelectAtom = atom(null, (get, set, payload: string) => {
   }
 });
 
-export const cursorAtom = atom<number | null | undefined>(null);
+export const cursorAtom = atom<number | null>(null);
+export const enableCurrentElementHighlightAtom = atom<boolean>(false);
+export const enableCurrentElementScrollIntoViewAtom = atom<boolean>(false);
 
 export const showTipsAtom = atom(false);
 

From 5d57d94bc51916b3b35ed853aba6be2b4adcb882 Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Tue, 10 Jun 2025 08:20:53 +0800
Subject: [PATCH 02/11] fix(MessageLabel): update highlight class for current
 element

---
 .../DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
index 2c2e1acb..d826ffd1 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
@@ -102,7 +102,7 @@ export const MessageLabel = (props: {
       className={cn(
         "px-1 cursor-text right hover:text-skin-message-hover hover:bg-skin-message-hover",
         editing && "cursor-text",
-        isCurrent && enableCurrentElementHighlight && "bg-blue-100",
+        isCurrent && enableCurrentElementHighlight && "highlight",
         props.className,
       )}
       style={props.style}

From 03f03fb8e81f923644747b113cbff3c20f1e0d5b Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Tue, 10 Jun 2025 08:36:59 +0800
Subject: [PATCH 03/11] refactor: remove cursor usage from Creation,
 Interaction, and InteractionAsync components

---
 .../Block/Statement/Creation/Creation.tsx     |  5 +----
 .../Statement/Interaction/Interaction.tsx     |  5 -----
 .../InteractionAsync/Interaction-async.tsx    | 19 +------------------
 3 files changed, 2 insertions(+), 27 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
index 7e010f12..53187cca 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
@@ -8,7 +8,7 @@ import {
 } from "@/positioning/Constants";
 import CommentClass from "@/components/Comment/Comment";
 import { useAtomValue } from "jotai";
-import { cursorAtom, onElementClickAtom } from "@/store/Store";
+import { onElementClickAtom } from "@/store/Store";
 import { Comment } from "../Comment/Comment";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useArrow } from "../useArrow";
@@ -23,12 +23,10 @@ export const Creation = (props: {
   className?: string;
 }) => {
   const messageContainerRef = useRef<HTMLDivElement>(null);
-  const cursor = useAtomValue(cursorAtom);
   const onElementClick = useAtomValue(onElementClickAtom);
   const [participantWidth, setParticipantWidth] = useState(0);
   const creation = props.context?.creation();
   const target = creation?.Owner();
-  const isCurrent = creation?.isCurrent(cursor);
 
   const { translateX, interactionWidth, rightToLeft } = useArrow({
     context: props.context,
@@ -82,7 +80,6 @@ export const Creation = (props: {
         "interaction creation sync",
         {
           "right-to-left": rightToLeft,
-          highlight: isCurrent,
         },
         props.className,
       )}
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
index b2750d57..ba04da32 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
@@ -3,8 +3,6 @@ import { cn } from "@/utils";
 import { SelfInvocation } from "./SelfInvocation/SelfInvocation";
 import { Message } from "../Message";
 import { Occurrence } from "./Occurrence/Occurrence";
-import { useAtomValue } from "jotai";
-import { cursorAtom } from "@/store/Store";
 import { _STARTER_ } from "@/parser/OrderedParticipants";
 import { Comment } from "../Comment/Comment";
 import { useArrow } from "../useArrow";
@@ -16,14 +14,12 @@ export const Interaction = (props: {
   number?: string;
   className?: string;
 }) => {
-  const cursor = useAtomValue(cursorAtom);
   const messageTextStyle = props.commentObj?.messageStyle;
   const messageClassNames = props.commentObj?.messageClassNames;
   const message = props.context?.message();
   const statements = message?.Statements();
   const assignee = message?.Assignment()?.getText() || "";
   const signature = message?.SignatureText();
-  const isCurrent = message?.isCurrent(cursor);
   const source = message?.From() || _STARTER_;
   const target = props.context?.message()?.Owner() || _STARTER_;
   const isSelf = source === target;
@@ -47,7 +43,6 @@ export const Interaction = (props: {
       className={cn(
         "interaction sync inline-block",
         {
-          highlight: isCurrent,
           self: isSelf,
           "right-to-left": rightToLeft,
         },
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
index 3bce6243..3d516e38 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
@@ -72,14 +72,10 @@ import { SelfInvocationAsync } from "./SelfInvocationAsync/SelfInvocationAsync";
 import { Message } from "../Message";
 import CommentClass from "@/components/Comment/Comment";
 import { useAtomValue } from "jotai";
-import { cursorAtom, onElementClickAtom } from "@/store/Store";
+import { onElementClickAtom } from "@/store/Store";
 import { CodeRange } from "@/parser/CodeRange";
 import { useArrow } from "../useArrow";
 
-function isNullOrUndefined(value: any) {
-  return value === null || value === undefined;
-}
-
 export const InteractionAsync = (props: {
   context: any;
   origin: string;
@@ -88,7 +84,6 @@ export const InteractionAsync = (props: {
   number?: string;
   className?: string;
 }) => {
-  const cursor = useAtomValue(cursorAtom);
   const onElementClick = useAtomValue(onElementClickAtom);
   const asyncMessage = props.context?.asyncMessage();
   const signature = asyncMessage?.content()?.getFormattedText();
@@ -107,17 +102,6 @@ export const InteractionAsync = (props: {
   console.log(props.commentObj);
   const messageClassNames = props.commentObj?.messageClassNames;
   const messageTextStyle = props.commentObj?.messageStyle;
-  const getIsCurrent = () => {
-    const start = asyncMessage.start.start;
-    const stop = asyncMessage.stop.stop + 1;
-    if (
-      isNullOrUndefined(cursor) ||
-      isNullOrUndefined(start) ||
-      isNullOrUndefined(stop)
-    )
-      return false;
-    return cursor! >= start && cursor! <= stop;
-  };
   return (
     <div
       data-origin={origin}
@@ -129,7 +113,6 @@ export const InteractionAsync = (props: {
         {
           "left-to-right": !rightToLeft,
           "right-to-left": rightToLeft,
-          highlight: getIsCurrent(),
           "self-invocation": isSelf,
         },
         props.className,

From a340015c8f5d3b8127ede24f7da5468d01c9735e Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Fri, 13 Jun 2025 08:42:53 +0800
Subject: [PATCH 04/11] fix: prevent updateDiagram call when zenUml is not
 initialized

---
 index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.html b/index.html
index 6a34751e..7ea4b7f4 100644
--- a/index.html
+++ b/index.html
@@ -116,6 +116,7 @@
       });
 
       editor.on("cursorActivity", function (cm) {
+        if (!window.zenUml) return;
         updateDiagram(cm.getValue(), cm.indexFromPos(cm.getCursor()));
       });
 

From bf084d075dd7de3d2b641929b00bd0ea10b0a333 Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Fri, 13 Jun 2025 16:21:39 +0800
Subject: [PATCH 05/11] feat(MessageLabel): add flashing animation for
 highlighted elements

---
 src/assets/tailwind.css                          | 16 ++++++++++++++++
 .../SeqDiagram/MessageLayer/MessageLabel.tsx     | 12 +++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index f2c9a2c0..bc46b985 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -23,6 +23,22 @@
   background-color: rgba(255, 255, 0, 0.3);
 }
 
+.zenuml .flash-highlight {
+  animation: flash-animation 2s 1;
+}
+
+@keyframes flash-animation {
+  0% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: gray;
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
 @layer base {
   :root {
     --color-bg-base: #ffffff;
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
index d826ffd1..9e455326 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
@@ -52,6 +52,17 @@ export const MessageLabel = (props: {
         block: "center",
         inline: "nearest",
       });
+
+      if (enableCurrentElementHighlight) {
+        // Add flashing animation class
+        labelRef.current.classList.add("flash-highlight");
+
+        // Remove animation class after 2 seconds
+        const timer = setTimeout(() => {
+          labelRef.current?.classList.remove("flash-highlight");
+        }, 2000);
+        return () => clearTimeout(timer);
+      }
     }
   }, [isCurrent, props.labelText, enableCurrentElementScrollIntoView]);
 
@@ -102,7 +113,6 @@ export const MessageLabel = (props: {
       className={cn(
         "px-1 cursor-text right hover:text-skin-message-hover hover:bg-skin-message-hover",
         editing && "cursor-text",
-        isCurrent && enableCurrentElementHighlight && "highlight",
         props.className,
       )}
       style={props.style}

From 94d46bcb0c224f73033a8aa4c9236d8c763c0dd8 Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Sat, 14 Jun 2025 11:40:49 +0800
Subject: [PATCH 06/11] fix(MessageLabel): adjust scrollIntoView behavior for
 better alignment

---
 .../DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
index 9e455326..5832bc8c 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
@@ -42,15 +42,15 @@ export const MessageLabel = (props: {
 
   useEffect(() => {
     if (
+      enableCurrentElementScrollIntoView &&
       isCurrent &&
       props.labelText &&
-      labelRef.current &&
-      enableCurrentElementScrollIntoView
+      labelRef.current
     ) {
       labelRef.current.scrollIntoView({
         behavior: "smooth",
         block: "center",
-        inline: "nearest",
+        inline: "center",
       });
 
       if (enableCurrentElementHighlight) {

From 611ca4a3af906cfe4141e22b983aa5d3a055bd52 Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Sat, 14 Jun 2025 13:01:10 +0800
Subject: [PATCH 07/11] feat: enhance current element interaction with
 scrollIntoView and highlight effects

---
 .../Block/Statement/Creation/Creation.tsx     | 42 +++++++++++++-
 .../Statement/Interaction/Interaction.tsx     | 44 ++++++++++++++-
 .../InteractionAsync/Interaction-async.tsx    | 55 +++++++++++++++++++
 3 files changed, 139 insertions(+), 2 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
index 53187cca..ef075ff5 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
@@ -8,7 +8,12 @@ import {
 } from "@/positioning/Constants";
 import CommentClass from "@/components/Comment/Comment";
 import { useAtomValue } from "jotai";
-import { onElementClickAtom } from "@/store/Store";
+import {
+  onElementClickAtom,
+  cursorAtom,
+  enableCurrentElementHighlightAtom,
+  enableCurrentElementScrollIntoViewAtom,
+} from "@/store/Store";
 import { Comment } from "../Comment/Comment";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useArrow } from "../useArrow";
@@ -24,9 +29,17 @@ export const Creation = (props: {
 }) => {
   const messageContainerRef = useRef<HTMLDivElement>(null);
   const onElementClick = useAtomValue(onElementClickAtom);
+  const cursor = useAtomValue(cursorAtom);
+  const enableCurrentElementHighlight = useAtomValue(
+    enableCurrentElementHighlightAtom,
+  );
+  const enableCurrentElementScrollIntoView = useAtomValue(
+    enableCurrentElementScrollIntoViewAtom,
+  );
   const [participantWidth, setParticipantWidth] = useState(0);
   const creation = props.context?.creation();
   const target = creation?.Owner();
+  const isCurrent = creation?.isCurrent(cursor);
 
   const { translateX, interactionWidth, rightToLeft } = useArrow({
     context: props.context,
@@ -73,6 +86,32 @@ export const Creation = (props: {
     console.log(`Init or update message container for ${target}`);
   }, [target, participantWidth]);
 
+  useEffect(() => {
+    if (
+      enableCurrentElementScrollIntoView &&
+      isCurrent &&
+      messageContainerRef.current
+    ) {
+      messageContainerRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+
+      if (enableCurrentElementHighlight) {
+        messageContainerRef.current.classList.add("flash-highlight");
+        const timer = setTimeout(() => {
+          messageContainerRef.current?.classList.remove("flash-highlight");
+        }, 2000);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [
+    isCurrent,
+    enableCurrentElementScrollIntoView,
+    enableCurrentElementHighlight,
+  ]);
+
   return (
     <div
       data-origin={props.origin}
@@ -80,6 +119,7 @@ export const Creation = (props: {
         "interaction creation sync",
         {
           "right-to-left": rightToLeft,
+          current: isCurrent,
         },
         props.className,
       )}
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
index ba04da32..9bc122af 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
@@ -6,7 +6,13 @@ import { Occurrence } from "./Occurrence/Occurrence";
 import { _STARTER_ } from "@/parser/OrderedParticipants";
 import { Comment } from "../Comment/Comment";
 import { useArrow } from "../useArrow";
-
+import {
+  cursorAtom,
+  enableCurrentElementHighlightAtom,
+  enableCurrentElementScrollIntoViewAtom,
+} from "@/store/Store";
+import { useEffect, useRef } from "react";
+import { useAtomValue } from "jotai";
 export const Interaction = (props: {
   context: any;
   origin: string;
@@ -23,6 +29,15 @@ export const Interaction = (props: {
   const source = message?.From() || _STARTER_;
   const target = props.context?.message()?.Owner() || _STARTER_;
   const isSelf = source === target;
+  const messageContainerRef = useRef<HTMLDivElement>(null);
+  const cursor = useAtomValue(cursorAtom);
+  const enableCurrentElementHighlight = useAtomValue(
+    enableCurrentElementHighlightAtom,
+  );
+  const enableCurrentElementScrollIntoView = useAtomValue(
+    enableCurrentElementScrollIntoViewAtom,
+  );
+  const isCurrent = message?.isCurrent(cursor);
 
   const {
     translateX,
@@ -38,6 +53,32 @@ export const Interaction = (props: {
     target,
   });
 
+  useEffect(() => {
+    if (
+      enableCurrentElementScrollIntoView &&
+      isCurrent &&
+      messageContainerRef.current
+    ) {
+      messageContainerRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+
+      if (enableCurrentElementHighlight) {
+        messageContainerRef.current.classList.add("flash-highlight");
+        const timer = setTimeout(() => {
+          messageContainerRef.current?.classList.remove("flash-highlight");
+        }, 2000);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [
+    isCurrent,
+    enableCurrentElementScrollIntoView,
+    enableCurrentElementHighlight,
+  ]);
+
   return (
     <div
       className={cn(
@@ -45,6 +86,7 @@ export const Interaction = (props: {
         {
           self: isSelf,
           "right-to-left": rightToLeft,
+          current: isCurrent,
         },
         props.className,
       )}
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
index 3d516e38..ac052ac1 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
@@ -75,6 +75,12 @@ import { useAtomValue } from "jotai";
 import { onElementClickAtom } from "@/store/Store";
 import { CodeRange } from "@/parser/CodeRange";
 import { useArrow } from "../useArrow";
+import {
+  cursorAtom,
+  enableCurrentElementHighlightAtom,
+  enableCurrentElementScrollIntoViewAtom,
+} from "@/store/Store";
+import { useEffect, useRef } from "react";
 
 export const InteractionAsync = (props: {
   context: any;
@@ -91,6 +97,55 @@ export const InteractionAsync = (props: {
   const source = providedSource || props.origin;
   const target = asyncMessage?.to()?.getFormattedText();
   const isSelf = source === target;
+  const messageContainerRef = useRef<HTMLDivElement>(null);
+  const cursor = useAtomValue(cursorAtom);
+  const enableCurrentElementHighlight = useAtomValue(
+    enableCurrentElementHighlightAtom,
+  );
+  const enableCurrentElementScrollIntoView = useAtomValue(
+    enableCurrentElementScrollIntoViewAtom,
+  );
+  const isCurrent = () => {
+    const start = asyncMessage.start.start;
+    const stop = asyncMessage.stop.stop + 1;
+    if (
+      isNullOrUndefined(cursor) ||
+      isNullOrUndefined(start) ||
+      isNullOrUndefined(stop)
+    )
+      return false;
+    return cursor! >= start && cursor! <= stop;
+  };
+
+  function isNullOrUndefined(value: any) {
+    return value === null || value === undefined;
+  }
+
+  useEffect(() => {
+    if (
+      enableCurrentElementScrollIntoView &&
+      isCurrent() &&
+      messageContainerRef.current
+    ) {
+      messageContainerRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+
+      if (enableCurrentElementHighlight) {
+        messageContainerRef.current.classList.add("flash-highlight");
+        const timer = setTimeout(() => {
+          messageContainerRef.current?.classList.remove("flash-highlight");
+        }, 2000);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [
+    isCurrent,
+    enableCurrentElementScrollIntoView,
+    enableCurrentElementHighlight,
+  ]);
 
   const { translateX, interactionWidth, rightToLeft } = useArrow({
     context: props.context,

From f9ae550ea44cdf39b1a36961f68584e65e17970c Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Sat, 14 Jun 2025 17:22:06 +0800
Subject: [PATCH 08/11] refactor: replace messageContainerRef with msgRef for
 consistency across components

---
 .../Block/Statement/Creation/Creation.tsx       | 17 ++++++-----------
 .../Block/Statement/Interaction/Interaction.tsx | 16 ++++++----------
 .../InteractionAsync/Interaction-async.tsx      | 15 ++++++---------
 3 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
index ef075ff5..004d678a 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
@@ -27,7 +27,7 @@ export const Creation = (props: {
   number?: string;
   className?: string;
 }) => {
-  const messageContainerRef = useRef<HTMLDivElement>(null);
+  const msgRef = useRef<HTMLDivElement>(null);
   const onElementClick = useAtomValue(onElementClickAtom);
   const cursor = useAtomValue(cursorAtom);
   const enableCurrentElementHighlight = useAtomValue(
@@ -87,21 +87,17 @@ export const Creation = (props: {
   }, [target, participantWidth]);
 
   useEffect(() => {
-    if (
-      enableCurrentElementScrollIntoView &&
-      isCurrent &&
-      messageContainerRef.current
-    ) {
-      messageContainerRef.current.scrollIntoView({
+    if (enableCurrentElementScrollIntoView && isCurrent && msgRef.current) {
+      msgRef.current.scrollIntoView({
         behavior: "smooth",
         block: "center",
         inline: "center",
       });
 
       if (enableCurrentElementHighlight) {
-        messageContainerRef.current.classList.add("flash-highlight");
+        msgRef.current.classList.add("flash-highlight");
         const timer = setTimeout(() => {
-          messageContainerRef.current?.classList.remove("flash-highlight");
+          msgRef.current?.classList.remove("flash-highlight");
         }, 2000);
         return () => clearTimeout(timer);
       }
@@ -114,12 +110,12 @@ export const Creation = (props: {
 
   return (
     <div
+      ref={msgRef}
       data-origin={props.origin}
       className={cn(
         "interaction creation sync",
         {
           "right-to-left": rightToLeft,
-          current: isCurrent,
         },
         props.className,
       )}
@@ -132,7 +128,6 @@ export const Creation = (props: {
     >
       {props.comment && <Comment commentObj={props.commentObj} />}
       <div
-        ref={messageContainerRef}
         data-type="creation"
         className={cn(
           "message-container pointer-events-none flex items-center h-10 relative",
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
index 9bc122af..da416253 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
@@ -29,7 +29,7 @@ export const Interaction = (props: {
   const source = message?.From() || _STARTER_;
   const target = props.context?.message()?.Owner() || _STARTER_;
   const isSelf = source === target;
-  const messageContainerRef = useRef<HTMLDivElement>(null);
+  const msgRef = useRef<HTMLDivElement>(null);
   const cursor = useAtomValue(cursorAtom);
   const enableCurrentElementHighlight = useAtomValue(
     enableCurrentElementHighlightAtom,
@@ -54,21 +54,17 @@ export const Interaction = (props: {
   });
 
   useEffect(() => {
-    if (
-      enableCurrentElementScrollIntoView &&
-      isCurrent &&
-      messageContainerRef.current
-    ) {
-      messageContainerRef.current.scrollIntoView({
+    if (enableCurrentElementScrollIntoView && isCurrent && msgRef.current) {
+      msgRef.current.scrollIntoView({
         behavior: "smooth",
         block: "center",
         inline: "center",
       });
 
       if (enableCurrentElementHighlight) {
-        messageContainerRef.current.classList.add("flash-highlight");
+        msgRef.current.classList.add("flash-highlight");
         const timer = setTimeout(() => {
-          messageContainerRef.current?.classList.remove("flash-highlight");
+          msgRef.current?.classList.remove("flash-highlight");
         }, 2000);
         return () => clearTimeout(timer);
       }
@@ -86,10 +82,10 @@ export const Interaction = (props: {
         {
           self: isSelf,
           "right-to-left": rightToLeft,
-          current: isCurrent,
         },
         props.className,
       )}
+      ref={msgRef}
       onClick={(e) => e.stopPropagation()}
       data-to={target}
       data-origin={origin}
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
index ac052ac1..2cf678f9 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
@@ -97,7 +97,7 @@ export const InteractionAsync = (props: {
   const source = providedSource || props.origin;
   const target = asyncMessage?.to()?.getFormattedText();
   const isSelf = source === target;
-  const messageContainerRef = useRef<HTMLDivElement>(null);
+  const msgRef = useRef<HTMLDivElement>(null);
   const cursor = useAtomValue(cursorAtom);
   const enableCurrentElementHighlight = useAtomValue(
     enableCurrentElementHighlightAtom,
@@ -122,21 +122,17 @@ export const InteractionAsync = (props: {
   }
 
   useEffect(() => {
-    if (
-      enableCurrentElementScrollIntoView &&
-      isCurrent() &&
-      messageContainerRef.current
-    ) {
-      messageContainerRef.current.scrollIntoView({
+    if (enableCurrentElementScrollIntoView && isCurrent() && msgRef.current) {
+      msgRef.current.scrollIntoView({
         behavior: "smooth",
         block: "center",
         inline: "center",
       });
 
       if (enableCurrentElementHighlight) {
-        messageContainerRef.current.classList.add("flash-highlight");
+        msgRef.current.classList.add("flash-highlight");
         const timer = setTimeout(() => {
-          messageContainerRef.current?.classList.remove("flash-highlight");
+          msgRef.current?.classList.remove("flash-highlight");
         }, 2000);
         return () => clearTimeout(timer);
       }
@@ -159,6 +155,7 @@ export const InteractionAsync = (props: {
   const messageTextStyle = props.commentObj?.messageStyle;
   return (
     <div
+      ref={msgRef}
       data-origin={origin}
       data-to={target}
       data-source={source}

From e7a0bf86cc0dbaaf0204a0f1f90e7d7007ff2350 Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Sat, 14 Jun 2025 17:45:35 +0800
Subject: [PATCH 09/11] refactor: extract scroll and highlight logic into
 handleScrollAndHighlight function

---
 .../Block/Statement/Creation/Creation.tsx     | 22 ++++--------
 .../Statement/Interaction/Interaction.tsx     | 22 ++++--------
 .../InteractionAsync/Interaction-async.tsx    | 22 ++++--------
 .../SeqDiagram/MessageLayer/MessageLabel.tsx  | 35 +++++++------------
 src/parser/IsCurrent.js                       | 23 ++++++++++++
 5 files changed, 57 insertions(+), 67 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
index 004d678a..e64fafc3 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.tsx
@@ -18,6 +18,7 @@ import { Comment } from "../Comment/Comment";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useArrow } from "../useArrow";
 import { EventBus } from "@/EventBus";
+import { handleScrollAndHighlight } from "@/parser/IsCurrent";
 
 export const Creation = (props: {
   context: any;
@@ -87,21 +88,12 @@ export const Creation = (props: {
   }, [target, participantWidth]);
 
   useEffect(() => {
-    if (enableCurrentElementScrollIntoView && isCurrent && msgRef.current) {
-      msgRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "center",
-      });
-
-      if (enableCurrentElementHighlight) {
-        msgRef.current.classList.add("flash-highlight");
-        const timer = setTimeout(() => {
-          msgRef.current?.classList.remove("flash-highlight");
-        }, 2000);
-        return () => clearTimeout(timer);
-      }
-    }
+    return handleScrollAndHighlight({
+      ref: msgRef,
+      isCurrent,
+      enableCurrentElementScrollIntoView,
+      enableCurrentElementHighlight,
+    });
   }, [
     isCurrent,
     enableCurrentElementScrollIntoView,
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
index da416253..8bed9aa2 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
@@ -13,6 +13,7 @@ import {
 } from "@/store/Store";
 import { useEffect, useRef } from "react";
 import { useAtomValue } from "jotai";
+import { handleScrollAndHighlight } from "@/parser/IsCurrent";
 export const Interaction = (props: {
   context: any;
   origin: string;
@@ -54,21 +55,12 @@ export const Interaction = (props: {
   });
 
   useEffect(() => {
-    if (enableCurrentElementScrollIntoView && isCurrent && msgRef.current) {
-      msgRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "center",
-      });
-
-      if (enableCurrentElementHighlight) {
-        msgRef.current.classList.add("flash-highlight");
-        const timer = setTimeout(() => {
-          msgRef.current?.classList.remove("flash-highlight");
-        }, 2000);
-        return () => clearTimeout(timer);
-      }
-    }
+    return handleScrollAndHighlight({
+      ref: msgRef,
+      isCurrent,
+      enableCurrentElementScrollIntoView,
+      enableCurrentElementHighlight,
+    });
   }, [
     isCurrent,
     enableCurrentElementScrollIntoView,
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
index 2cf678f9..6a5cce71 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.tsx
@@ -65,6 +65,7 @@
  * }
  *
  */
+import { handleScrollAndHighlight } from "@/parser/IsCurrent";
 
 import { cn } from "@/utils";
 import { Comment } from "../Comment/Comment";
@@ -122,21 +123,12 @@ export const InteractionAsync = (props: {
   }
 
   useEffect(() => {
-    if (enableCurrentElementScrollIntoView && isCurrent() && msgRef.current) {
-      msgRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "center",
-      });
-
-      if (enableCurrentElementHighlight) {
-        msgRef.current.classList.add("flash-highlight");
-        const timer = setTimeout(() => {
-          msgRef.current?.classList.remove("flash-highlight");
-        }, 2000);
-        return () => clearTimeout(timer);
-      }
-    }
+    return handleScrollAndHighlight({
+      ref: msgRef,
+      isCurrent: isCurrent(),
+      enableCurrentElementScrollIntoView,
+      enableCurrentElementHighlight,
+    });
   }, [
     isCurrent,
     enableCurrentElementScrollIntoView,
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
index 5832bc8c..6b9a28c4 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.tsx
@@ -6,6 +6,7 @@ import {
   enableCurrentElementHighlightAtom,
   enableCurrentElementScrollIntoViewAtom,
 } from "@/store/Store";
+import { handleScrollAndHighlight } from "@/parser/IsCurrent";
 import { cn } from "@/utils";
 import { useAtom, useAtomValue } from "jotai";
 import { formatText } from "@/utils/StringUtil";
@@ -41,30 +42,20 @@ export const MessageLabel = (props: {
     cursor <= props.labelPosition[1] + 1;
 
   useEffect(() => {
-    if (
-      enableCurrentElementScrollIntoView &&
-      isCurrent &&
-      props.labelText &&
-      labelRef.current
-    ) {
-      labelRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "center",
+    if (props.labelText) {
+      return handleScrollAndHighlight({
+        ref: labelRef,
+        isCurrent,
+        enableCurrentElementScrollIntoView,
+        enableCurrentElementHighlight,
       });
-
-      if (enableCurrentElementHighlight) {
-        // Add flashing animation class
-        labelRef.current.classList.add("flash-highlight");
-
-        // Remove animation class after 2 seconds
-        const timer = setTimeout(() => {
-          labelRef.current?.classList.remove("flash-highlight");
-        }, 2000);
-        return () => clearTimeout(timer);
-      }
     }
-  }, [isCurrent, props.labelText, enableCurrentElementScrollIntoView]);
+  }, [
+    isCurrent,
+    props.labelText,
+    enableCurrentElementScrollIntoView,
+    enableCurrentElementHighlight,
+  ]);
 
   const replaceLabelText = (e: FocusEvent | KeyboardEvent | MouseEvent) => {
     e.preventDefault();
diff --git a/src/parser/IsCurrent.js b/src/parser/IsCurrent.js
index d5ce825e..b1e31e06 100644
--- a/src/parser/IsCurrent.js
+++ b/src/parser/IsCurrent.js
@@ -24,3 +24,26 @@ function isCurrent(cursor) {
     return false;
   }
 }
+
+export function handleScrollAndHighlight({
+  ref,
+  isCurrent,
+  enableCurrentElementScrollIntoView,
+  enableCurrentElementHighlight,
+}) {
+  if (enableCurrentElementScrollIntoView && isCurrent && ref.current) {
+    ref.current.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "center",
+    });
+
+    if (enableCurrentElementHighlight) {
+      ref.current.classList.add("flash-highlight");
+      const timer = setTimeout(() => {
+        ref.current?.classList.remove("flash-highlight");
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }
+}

From 222fa8eeca25b39e780ab6f4e1a7ac7acda2d882 Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Sun, 15 Jun 2025 00:14:02 +0800
Subject: [PATCH 10/11] fix(handleScrollAndHighlight): ensure highlight
 animation restarts correctly

---
 src/parser/IsCurrent.js | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/parser/IsCurrent.js b/src/parser/IsCurrent.js
index b1e31e06..d92fc39e 100644
--- a/src/parser/IsCurrent.js
+++ b/src/parser/IsCurrent.js
@@ -39,11 +39,25 @@ export function handleScrollAndHighlight({
     });
 
     if (enableCurrentElementHighlight) {
-      ref.current.classList.add("flash-highlight");
-      const timer = setTimeout(() => {
-        ref.current?.classList.remove("flash-highlight");
-      }, 2000);
-      return () => clearTimeout(timer);
+      // First, remove any existing class names to ensure the animation restarts
+      ref.current.classList.remove("flash-highlight");
+      // Use requestAnimationFrame to ensure the class name is added in the next frame
+      requestAnimationFrame(() => {
+        if (ref.current) {
+          ref.current.classList.add("flash-highlight");
+          const timer = setTimeout(() => {
+            if (ref.current) {
+              ref.current.classList.remove("flash-highlight");
+            }
+          }, 2000);
+          return () => {
+            clearTimeout(timer);
+            if (ref.current) {
+              ref.current.classList.remove("flash-highlight");
+            }
+          };
+        }
+      });
     }
   }
 }

From a16c2e30ee996b08ef72de846f0c55841f457698 Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Sun, 15 Jun 2025 06:38:24 +0800
Subject: [PATCH 11/11] fix(Interaction): comment out handleScrollAndHighlight
 call in useEffect - It will scroll to a large area of blank space.

---
 .../Block/Statement/Interaction/Interaction.tsx    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
index 8bed9aa2..c01a2c86 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/store/Store";
 import { useEffect, useRef } from "react";
 import { useAtomValue } from "jotai";
-import { handleScrollAndHighlight } from "@/parser/IsCurrent";
+// import { handleScrollAndHighlight } from "@/parser/IsCurrent";
 export const Interaction = (props: {
   context: any;
   origin: string;
@@ -55,12 +55,12 @@ export const Interaction = (props: {
   });
 
   useEffect(() => {
-    return handleScrollAndHighlight({
-      ref: msgRef,
-      isCurrent,
-      enableCurrentElementScrollIntoView,
-      enableCurrentElementHighlight,
-    });
+    // return handleScrollAndHighlight({
+    //   ref: msgRef,
+    //   isCurrent,
+    //   enableCurrentElementScrollIntoView,
+    //   enableCurrentElementHighlight,
+    // });
   }, [
     isCurrent,
     enableCurrentElementScrollIntoView,