feat: add Vite configuration with custom plugins and server settings

src/app/features/room/message/Message.tsx

@@ -28,6 +28,7 @@ import React, {
   MouseEventHandler,
   ReactNode,
   useCallback,
+  useEffect,
   useState,
 } from 'react';
 import FocusTrap from 'focus-trap-react';
@@ -353,6 +354,42 @@ export const MessageCopyLinkItem = as<
   );
 });
 
+export const MessageCopyRawTextItem = as<
+  'button',
+  {
+    mEvent: MatrixEvent;
+    onClose?: () => void;
+  }
+>(({ mEvent, onClose, ...props }, ref) => {
+  const handleCopy = () => {
+    const content = mEvent.getContent();
+    const rawText = content.body ?? '';
+    if (rawText) {
+      copyToClipboard(rawText);
+    }
+    onClose?.();
+  };
+
+  // Only show for text messages
+  const content = mEvent.getContent();
+  if (!content.body || mEvent.isRedacted()) return null;
+
+  return (
+    <MenuItem
+      size="300"
+      after={<Icon size="100" src={Icons.File} />}
+      radii="300"
+      onClick={handleCopy}
+      {...props}
+      ref={ref}
+    >
+      <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
+        Copy Raw Text
+      </Text>
+    </MenuItem>
+  );
+});
+
 export const MessagePinItem = as<
   'button',
   {
@@ -742,6 +779,23 @@ export const Message = as<'div', MessageProps>(
     const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
     const [menuAnchor, setMenuAnchor] = useState<RectCords>();
     const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
+    const [shiftHeld, setShiftHeld] = useState(false);
+
+    // Track shift key state
+    useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Shift') setShiftHeld(true);
+      };
+      const handleKeyUp = (e: KeyboardEvent) => {
+        if (e.key === 'Shift') setShiftHeld(false);
+      };
+      window.addEventListener('keydown', handleKeyDown);
+      window.addEventListener('keyup', handleKeyUp);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('keyup', handleKeyUp);
+      };
+    }, []);
 
     const senderDisplayName =
       getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
@@ -986,6 +1040,36 @@ export const Message = as<'div', MessageProps>(
                     <Icon src={Icons.Pencil} size="100" />
                   </IconButton>
                 )}
+                {mEvent.getContent().body && !mEvent.isRedacted() && (
+                  <IconButton
+                    onClick={() => {
+                      const rawText = mEvent.getContent().body ?? '';
+                      if (rawText) copyToClipboard(rawText);
+                    }}
+                    variant="SurfaceVariant"
+                    size="300"
+                    radii="300"
+                    title="Copy Raw Text"
+                  >
+                    <Icon src={Icons.File} size="100" />
+                  </IconButton>
+                )}
+                {shiftHeld && canDelete && (
+                  <IconButton
+                    onClick={() => {
+                      const eventId = mEvent.getId();
+                      if (eventId) {
+                        mx.redactEvent(room.roomId, eventId);
+                      }
+                    }}
+                    variant="Critical"
+                    size="300"
+                    radii="300"
+                    title="Delete Message (Shift held)"
+                  >
+                    <Icon src={Icons.Delete} size="100" />
+                  </IconButton>
+                )}
                 <PopOut
                   anchor={menuAnchor}
                   position="Bottom"
@@ -1112,6 +1196,7 @@ export const Message = as<'div', MessageProps>(
                             />
                           )}
                           <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                          <MessageCopyRawTextItem mEvent={mEvent} onClose={closeMenu} />
                           {canPinEvent && (
                             <MessagePinItem room={room} mEvent={mEvent} onClose={closeMenu} />
                           )}
@@ -1281,6 +1366,7 @@ export const Event = as<'div', EventProps>(
                             />
                           )}
                           <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                          <MessageCopyRawTextItem mEvent={mEvent} onClose={closeMenu} />
                         </Box>
                         {((!mEvent.isRedacted() && canDelete && !stateEvent) ||
                           (mEvent.getSender() !== mx.getUserId() && !stateEvent)) && (