Enhance message context menu

app/components/chat.module.scss

@@ -231,10 +231,12 @@
 
   animation: slide-in ease 0.3s;
 
-  $linear: linear-gradient(to right,
+  $linear: linear-gradient(
-      rgba(0, 0, 0, 0),
+    to right,
-      rgba(0, 0, 0, 1),
+    rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0));
+    rgba(0, 0, 0, 1),
+    rgba(0, 0, 0, 0)
+  );
   mask-image: $linear;
 
   @mixin show {
@@ -340,10 +342,14 @@
     margin: 0 10px;
     opacity: 0;
     pointer-events: none;
+    z-index: 1;
 
     .chat-input-actions {
       display: flex;
       flex-wrap: nowrap;
+      transition: all ease 0.3s;
+      background-color: #fff;
+      border-radius: 12px;
     }
   }
 }
@@ -367,7 +373,7 @@
   }
 }
 
-.chat-message-user>.chat-message-container {
+.chat-message-user > .chat-message-container {
   align-items: flex-end;
 }
 
@@ -450,23 +456,27 @@
   border: rgba($color: #888, $alpha: 0.2) 1px solid;
 }
 
-
 @media only screen and (max-width: 600px) {
-  $calc-image-width: calc(100vw/3*2/var(--image-count));
+  $calc-image-width: calc(100vw / 3 * 2 / var(--image-count));
 
   .chat-message-item-image-multi {
     width: $calc-image-width;
     height: $calc-image-width;
   }
-  
+
   .chat-message-item-image {
-    max-width: calc(100vw/3*2);
+    max-width: calc(100vw / 3 * 2);
   }
 }
 
 @media screen and (min-width: 600px) {
-  $max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
+  $max-image-width: calc(
-  $image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
+    calc(1200px - var(--sidebar-width)) / 3 * 2 / var(--image-count)
+  );
+  $image-width: calc(
+    calc(var(--window-width) - var(--sidebar-width)) / 3 * 2 /
+      var(--image-count)
+  );
 
   .chat-message-item-image-multi {
     width: $image-width;
@@ -476,7 +486,7 @@
   }
 
   .chat-message-item-image {
-    max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
+    max-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2);
   }
 }
 
@@ -494,7 +504,7 @@
   z-index: 1;
 }
 
-.chat-message-user>.chat-message-container>.chat-message-item {
+.chat-message-user > .chat-message-container > .chat-message-item {
   background-color: var(--second);
 
   &:hover {
@@ -605,7 +615,8 @@
   min-height: 68px;
 }
 
-.chat-input:focus {}
+.chat-input:focus {
+}
 
 .chat-input-send {
   background-color: var(--primary);
@@ -624,4 +635,4 @@
   .chat-input-send {
     bottom: 30px;
   }
-}
+}

app/components/chat.tsx

@@ -55,7 +55,7 @@ import {
 
 import {
   copyToClipboard,
-  selectOrCopy,
+  isNotSelectRange,
   autoGrowTextArea,
   useMobileScreen,
   getMessageTextContent,
@@ -250,6 +250,108 @@ function useSubmitHandler() {
   };
 }
 
+function ChatMessageActions(props: {
+  index: number;
+  message: ChatMessage;
+  position: { x: number; y: number };
+  isHover: boolean;
+  onUserStop: (messageId: string) => void;
+  onResend: (message: ChatMessage) => void;
+  onDelete: (messageId: string) => void;
+  onPinMessage: (message: ChatMessage) => void;
+}) {
+  const {
+    index,
+    message,
+    position,
+    isHover,
+    onUserStop,
+    onResend,
+    onDelete,
+    onPinMessage,
+  } = props;
+
+  const actionsRef = useRef<HTMLDivElement>(null);
+
+  const [rect, setRect] = useState<DOMRect>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    toJSON: () => ({}),
+  });
+
+  const isUserMessage = message.role === "user";
+
+  const [translate, setTranslate] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    if (position.x && position.y && isHover) {
+      const x = position.x - rect.x - (isUserMessage ? rect.width : 0);
+      const y = position.y - rect.y - (isUserMessage ? rect.height : 0);
+      setTranslate({ x, y });
+    } else {
+      setTranslate({ x: 0, y: 0 });
+    }
+  }, [position, isHover]);
+
+  useEffect(() => {
+    const div = actionsRef.current;
+    if (div) {
+      const rect = div.getBoundingClientRect();
+      setRect(rect);
+    }
+  }, []);
+
+  return (
+    <div ref={actionsRef} className={styles["chat-message-actions"]}>
+      <div
+        className={`${styles["chat-input-actions"]}`}
+        style={{
+          transform: `translate3d(${translate.x}px, ${translate.y}px, 0)`,
+        }}
+      >
+        {message.streaming ? (
+          <ChatAction
+            text={Locale.Chat.Actions.Stop}
+            icon={<StopIcon />}
+            onClick={() => onUserStop(message.id ?? index)}
+          />
+        ) : (
+          <>
+            <ChatAction
+              text={Locale.Chat.Actions.Retry}
+              icon={<ResetIcon />}
+              onClick={() => onResend(message)}
+            />
+
+            <ChatAction
+              text={Locale.Chat.Actions.Delete}
+              icon={<DeleteIcon />}
+              onClick={() => onDelete(message.id ?? index)}
+            />
+
+            <ChatAction
+              text={Locale.Chat.Actions.Pin}
+              icon={<PinIcon />}
+              onClick={() => onPinMessage(message)}
+            />
+            <ChatAction
+              text={Locale.Chat.Actions.Copy}
+              icon={<CopyIcon />}
+              onClick={() => copyToClipboard(getMessageTextContent(message))}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export type RenderPrompt = Pick<Prompt, "title" | "content">;
 
 export function PromptHints(props: {
@@ -792,6 +894,13 @@ function _Chat() {
   const [attachImages, setAttachImages] = useState<string[]>([]);
   const [uploading, setUploading] = useState(false);
 
+  const [isMessageContainerHover, setIsMessageContainerHover] =
+    useState<boolean>(false);
+  const [actionsPosition, setActionsPosition] = useState<{
+    x: number;
+    y: number;
+  }>({ x: 0, y: 0 });
+
   // prompt hints
   const promptStore = usePromptStore();
   const [promptHints, setPromptHints] = useState<RenderPrompt[]>([]);
@@ -947,16 +1056,24 @@ function _Chat() {
       e.preventDefault();
     }
   };
-  const onRightClick = (e: any, message: ChatMessage) => {
-    // copy to clipboard
-    if (selectOrCopy(e.currentTarget, getMessageTextContent(message))) {
-      if (userInput.length === 0) {
-        setUserInput(getMessageTextContent(message));
-      }
 
+  const onRightClick = (e: any) => {
+    // move actions to the right click position
+    if (isNotSelectRange()) {
       e.preventDefault();
+
+      setActionsPosition({
+        x: e.clientX,
+        y: e.clientY,
+      });
     }
   };
+  // handle mouse hover to reset actions position
+  useEffect(() => {
+    if (!isMessageContainerHover) {
+      setActionsPosition({ x: 0, y: 0 });
+    }
+  }, [isMessageContainerHover]);
 
   const deleteMessage = (msgId?: string) => {
     chatStore.updateCurrentSession(
@@ -1405,7 +1522,14 @@ function _Chat() {
                   isUser ? styles["chat-message-user"] : styles["chat-message"]
                 }
               >
-                <div className={styles["chat-message-container"]}>
+                <div
+                  className={styles["chat-message-container"]}
+                  onClick={() => {
+                    setActionsPosition({ x: 0, y: 0 });
+                  }}
+                  onMouseEnter={() => setIsMessageContainerHover(true)}
+                  onMouseLeave={() => setIsMessageContainerHover(false)}
+                >
                   <div className={styles["chat-message-header"]}>
                     <div className={styles["chat-message-avatar"]}>
                       <div className={styles["chat-message-edit"]}>
@@ -1462,46 +1586,16 @@ function _Chat() {
                     </div>
 
                     {showActions && (
-                      <div className={styles["chat-message-actions"]}>
+                      <ChatMessageActions
-                        <div className={styles["chat-input-actions"]}>
+                        index={i}
-                          {message.streaming ? (
+                        message={message}
-                            <ChatAction
+                        position={actionsPosition}
-                              text={Locale.Chat.Actions.Stop}
+                        isHover={isMessageContainerHover}
-                              icon={<StopIcon />}
+                        onUserStop={onUserStop}
-                              onClick={() => onUserStop(message.id ?? i)}
+                        onResend={onResend}
-                            />
+                        onDelete={onDelete}
-                          ) : (
+                        onPinMessage={onPinMessage}
-                            <>
+                      />
-                              <ChatAction
-                                text={Locale.Chat.Actions.Retry}
-                                icon={<ResetIcon />}
-                                onClick={() => onResend(message)}
-                              />
-
-                              <ChatAction
-                                text={Locale.Chat.Actions.Delete}
-                                icon={<DeleteIcon />}
-                                onClick={() => onDelete(message.id ?? i)}
-                              />
-
-                              <ChatAction
-                                text={Locale.Chat.Actions.Pin}
-                                icon={<PinIcon />}
-                                onClick={() => onPinMessage(message)}
-                              />
-                              <ChatAction
-                                text={Locale.Chat.Actions.Copy}
-                                icon={<CopyIcon />}
-                                onClick={() =>
-                                  copyToClipboard(
-                                    getMessageTextContent(message),
-                                  )
-                                }
-                              />
-                            </>
-                          )}
-                        </div>
-                      </div>
                     )}
                   </div>
                   {showTyping && (
@@ -1518,7 +1612,7 @@ function _Chat() {
                         message.content.length === 0 &&
                         !isUser
                       }
-                      onContextMenu={(e) => onRightClick(e, message)}
+                      onContextMenu={(e) => onRightClick(e)}
                       onDoubleClickCapture={() => {
                         if (!isMobileScreen) return;
                         setUserInput(getMessageTextContent(message));

app/utils.ts

@@ -145,15 +145,13 @@ export function isFirefox() {
   );
 }
 
-export function selectOrCopy(el: HTMLElement, content: string) {
+export function isNotSelectRange() {
   const currentSelection = window.getSelection();
 
   if (currentSelection?.type === "Range") {
     return false;
   }
 
-  copyToClipboard(content);
-
   return true;
 }