feat: poll voting, location sharing, image captions, message forwarding

- Poll voting: PollContent sends m.poll.response on answer click - Location: MLocation shows OSM map embed + share-location button in toolbar - Image captions: caption field on media uploads sets message body - Message forwarding: ForwardMessageDialog with searchable room picker - Also includes ring timeout fix and earlier session patches
2026-05-15 13:37:03 -04:00
parent e89ba95c08
commit 5bba52e315
17 changed files with 1047 additions and 51 deletions
@@ -0,0 +1,152 @@
+import React, { useCallback } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
+import { IGif } from '@giphy/js-types';
+import { Box } from 'folds';
+import { useSetting } from '../state/hooks/settings';
+import { settingsAtom } from '../state/settings';
+
+const PICKER_WIDTH = 312;
+
+const TERMINAL_CSS = `
+  [data-gif-terminal] input,
+  [data-gif-terminal] form {
+    background: #030c14 !important;
+    color: #e8edf5 !important;
+    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important;
+    border: 1px solid rgba(255,107,0,0.35) !important;
+    border-radius: 4px !important;
+    font-size: 12px !important;
+    box-shadow: none !important;
+  }
+  [data-gif-terminal] input:focus {
+    border-color: rgba(255,107,0,0.7) !important;
+    box-shadow: 0 0 0 2px rgba(255,107,0,0.12) !important;
+    outline: none !important;
+  }
+  [data-gif-terminal] input::placeholder {
+    color: rgba(255,107,0,0.4) !important;
+    font-family: 'JetBrains Mono', monospace !important;
+  }
+  [data-gif-terminal] svg,
+  [data-gif-terminal] button[type="reset"] {
+    display: none !important;
+  }
+  [data-gif-terminal] ::-webkit-scrollbar {
+    width: 4px;
+  }
+  [data-gif-terminal] ::-webkit-scrollbar-track {
+    background: #030508;
+  }
+  [data-gif-terminal] ::-webkit-scrollbar-thumb {
+    background: rgba(255,107,0,0.4);
+    border-radius: 2px;
+  }
+`;
+
+type GifPickerInnerProps = {
+  onSelect: (url: string, width: number, height: number) => void;
+  requestClose: () => void;
+  lotusTerminal: boolean;
+};
+
+function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInnerProps) {
+  const { fetchGifs, searchKey } = React.useContext(SearchContext);
+
+  const handleClick = useCallback(
+    (gif: IGif, e: React.SyntheticEvent) => {
+      e.preventDefault();
+      const r = gif.images.downsized ?? gif.images.original;
+      const url = r.url;
+      const width = Number(r.width) || 200;
+      const height = Number(r.height) || 200;
+      onSelect(url, width, height);
+      requestClose();
+    },
+    [onSelect, requestClose]
+  );
+
+  return (
+    <Box direction="Column" style={{ width: `${PICKER_WIDTH}px` }}>
+      {lotusTerminal && (
+        <div style={{
+          padding: '5px 10px 4px',
+          borderBottom: '1px solid rgba(255,107,0,0.2)',
+          fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
+          fontSize: '10px',
+          fontWeight: 700,
+          letterSpacing: '0.1em',
+          color: '#FF6B00',
+          userSelect: 'none',
+        }}>
+          // GIF_SEARCH
+        </div>
+      )}
+      <Box style={{ padding: '8px 8px 4px' }}>
+        <SearchBar style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }} />
+      </Box>
+      <div style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}>
+        <Grid
+          key={searchKey}
+          fetchGifs={fetchGifs}
+          width={PICKER_WIDTH - 16}
+          columns={2}
+          gutter={4}
+          onGifClick={handleClick}
+          hideAttribution={false}
+          noLink
+        />
+      </div>
+    </Box>
+  );
+}
+
+type GifPickerProps = {
+  apiKey: string;
+  onSelect: (url: string, width: number, height: number) => void;
+  requestClose: () => void;
+};
+
+export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+
+  const containerStyle = lotusTerminal
+    ? {
+        background: '#060c14',
+        border: '1px solid rgba(255,107,0,0.35)',
+        borderRadius: '4px',
+        overflow: 'hidden',
+        boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)',
+        width: `${PICKER_WIDTH}px`,
+      }
+    : {
+        background: 'var(--bg-surface)',
+        border: '1px solid rgba(255,255,255,0.08)',
+        borderRadius: '12px',
+        overflow: 'hidden',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+        width: `${PICKER_WIDTH}px`,
+      };
+
+  return (
+    <FocusTrap
+      focusTrapOptions={{
+        initialFocus: false,
+        onDeactivate: requestClose,
+        clickOutsideDeactivates: true,
+        allowOutsideClick: true,
+      }}
+    >
+      <Box
+        direction="Column"
+        data-gif-terminal={lotusTerminal ? '' : undefined}
+        style={containerStyle}
+      >
+        {lotusTerminal && <style>{TERMINAL_CSS}</style>}
+        <SearchContextManager apiKey={apiKey} initialTerm="">
+          <GifPickerInner onSelect={onSelect} requestClose={requestClose} lotusTerminal={!!lotusTerminal} />
+        </SearchContextManager>
+      </Box>
+    </FocusTrap>
+  );
+}
@@ -391,9 +391,28 @@ export function MLocation({ content }: MLocationProps) {
  const location = parseGeoUri(geoUri);
  if (!location) return <BrokenContent />;

+  const lat = parseFloat(location.latitude);
+  const lon = parseFloat(location.longitude);
+  const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${lat - 0.004},${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
+
  return (
-    <Box direction="Column" alignItems="Start" gap="100">
-      <Text size="T400">{geoUri}</Text>
+    <Box direction="Column" alignItems="Start" gap="200">
+      <iframe
+        title="Location"
+        src={mapSrc}
+        style={{
+          width: '280px',
+          height: '160px',
+          border: '1px solid var(--bg-surface-border)',
+          borderRadius: '8px',
+          display: 'block',
+        }}
+        scrolling="no"
+        loading="lazy"
+      />
+      <Text size="T300" style={{ opacity: 0.65 }}>
+        {`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
+      </Text>
      <Chip
        as="a"
        size="400"
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Text } from 'folds';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';

 type PollTextValue = Array<{ body: string }> | string;

@@ -21,7 +22,19 @@ type PollData = {
  answers?: PollAnswer[];
 };

-export function PollContent({ content }: { content: Record<string, unknown> }) {
+export function PollContent({
+  content,
+  roomId,
+  eventId,
+}: {
+  content: Record<string, unknown>;
+  roomId?: string;
+  eventId?: string;
+}) {
+  const mx = useMatrixClient();
+  const [myVote, setMyVote] = useState<string | null>(null);
+  const isStable = !!content['m.poll'];
+
  const poll = (
    content['m.poll'] ?? content['org.matrix.msc3381.poll.start']
  ) as PollData | undefined;
@@ -39,8 +52,30 @@ export function PollContent({ content }: { content: Record<string, unknown> }) {
    (poll.question as any)?.body ||
    'Untitled poll';

+  const canVote = !!roomId && !!eventId;
+
+  const handleVote = (answerId: string) => {
+    if (!roomId || !eventId) return;
+    setMyVote(answerId);
+    if (isStable) {
+      mx.sendEvent(roomId, 'm.poll.response' as any, {
+        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
+        'm.responses': [{ 'm.id': answerId }],
+      });
+    } else {
+      mx.sendEvent(roomId, 'org.matrix.msc3381.poll.response' as any, {
+        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
+        'org.matrix.msc3381.poll.response': { answers: [answerId] },
+      });
+    }
+  };
+
  return (
-    <Box direction="Column" gap="200" style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}>
+    <Box
+      direction="Column"
+      gap="200"
+      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
+    >
      <Box
        alignItems="Center"
        gap="100"
@@ -65,26 +100,45 @@ export function PollContent({ content }: { content: Record<string, unknown> }) {
            (answer as any)['org.matrix.msc3381.poll.answer']?.body ||
            `Option ${i + 1}`;
          const id = answer['m.id'] ?? answer.id ?? String(i);
+          const selected = myVote === id;
          return (
-            <div
+            <button
              key={id}
+              type="button"
+              onClick={canVote ? () => handleVote(id) : undefined}
              style={{
                padding: '7px 12px',
                borderRadius: '8px',
-                background: 'var(--bg-surface-low)',
-                border: '1px solid var(--bg-surface-border)',
+                background: selected ? 'var(--bg-surface-active)' : 'var(--bg-surface-low)',
+                border: `1px solid ${selected ? 'var(--text-primary)' : 'var(--bg-surface-border)'}`,
                fontSize: '0.88rem',
                lineHeight: 1.4,
+                textAlign: 'left',
+                cursor: canVote ? 'pointer' : 'default',
+                color: 'var(--text-primary)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                width: '100%',
              }}
            >
-              {text}
-            </div>
+              <span style={{ flexGrow: 1 }}>{text}</span>
+              {selected && (
+                <span style={{ opacity: 0.8, fontSize: '1rem', flexShrink: 0 }}>✓</span>
+              )}
+            </button>
          );
        })}
      </Box>
-      <Text size="T200" style={{ opacity: 0.4, marginTop: '2px' }}>
-        <i>Open in Element to vote</i>
-      </Text>
+      {canVote ? (
+        <Text size="T200" style={{ opacity: 0.5, marginTop: '2px' }}>
+          <i>{myVote ? 'Vote cast — click another to change' : 'Click an option to vote'}</i>
+        </Text>
+      ) : (
+        <Text size="T200" style={{ opacity: 0.4, marginTop: '2px' }}>
+          <i>Open in Element to vote</i>
+        </Text>
+      )}
    </Box>
  );
 }
@@ -182,6 +182,27 @@ export function UploadCardRenderer({
              <PreviewVideo fileItem={fileItem} />
            </MediaPreview>
          )}
+          {(fileItem.originalFile.type.startsWith('image') ||
+            fileItem.originalFile.type.startsWith('video')) && (
+            <input
+              type="text"
+              placeholder="Add a caption… (optional)"
+              value={metadata.caption ?? ''}
+              onChange={(e) => setMetadata(fileItem, { ...metadata, caption: e.target.value })}
+              style={{
+                marginTop: '6px',
+                width: '100%',
+                background: 'var(--bg-surface-low)',
+                border: '1px solid var(--bg-surface-border)',
+                borderRadius: '6px',
+                padding: '5px 8px',
+                fontSize: '0.85rem',
+                color: 'var(--text-primary)',
+                outline: 'none',
+                boxSizing: 'border-box',
+              }}
+            />
+          )}
          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
            <UploadCardProgress sentBytes={0} totalBytes={file.size} />
          )}
@@ -57,6 +57,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
  const [shareConfirm, setShareConfirm] = useState(false);
  const [pttMode] = useSetting(settingsAtom, 'pttMode');
  const [pttKey] = useSetting(settingsAtom, 'pttKey');
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
  const [pttActive, setPttActive] = useState(false);

  // Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn)
@@ -159,24 +160,43 @@ export function CallControls({ callEmbed }: CallControlsProps) {
      alignItems="Center"
    >
      {pttMode && (
-        <Chip
-          variant={pttActive ? 'Success' : 'Warning'}
-          fill="Soft"
-          radii="400"
-          style={{
+        lotusTerminal ? (
+          <Box style={{
            position: 'absolute',
-            top: '-2.2rem',
+            top: '-2.5rem',
            left: '50%',
            transform: 'translateX(-50%)',
+            background: pttActive ? 'rgba(0,255,136,0.18)' : 'rgba(255,107,0,0.12)',
+            border: `1px solid ${pttActive ? 'rgba(0,255,136,0.55)' : 'rgba(255,107,0,0.35)'}`,
+            borderRadius: '99px',
+            padding: '0.2rem 0.9rem',
            pointerEvents: 'none',
            whiteSpace: 'nowrap',
-          }}
-          outlined
-        >
-          <Text size="T200" style={{ fontWeight: 700 }}>
-            {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
-          </Text>
-        </Chip>
+          }}>
+            <Text size="T200" style={{ color: pttActive ? '#00FF88' : '#FF6B00', fontWeight: 700, letterSpacing: '0.08em', fontFamily: 'JetBrains Mono, monospace' }}>
+              {pttActive ? '● LIVE' : `PTT — Hold ${pttKeyLabel}`}
+            </Text>
+          </Box>
+        ) : (
+          <Chip
+            variant={pttActive ? 'Success' : 'Warning'}
+            fill="Soft"
+            radii="400"
+            style={{
+              position: 'absolute',
+              top: '-2.2rem',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              pointerEvents: 'none',
+              whiteSpace: 'nowrap',
+            }}
+            outlined
+          >
+            <Text size="T200" style={{ fontWeight: 700 }}>
+              {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
+            </Text>
+          </Chip>
+        )
      )}
      {shareConfirm && (
        <Box
@@ -9,14 +9,14 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
-import { useRoom } from '../../hooks/useRoom';
+import { useRoom, useIsDirectRoom } from '../../hooks/useRoom';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../utils/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { CallView } from '../call/CallView';
 import { RoomViewHeader } from './RoomViewHeader';
-import { callChatAtom } from '../../state/callEmbed';
+import { callChatAtom, callEmbedAtom } from '../../state/callEmbed';
 import { CallChatView } from './CallChatView';

 export function Room() {
@@ -30,6 +30,8 @@ export function Room() {
  const powerLevels = usePowerLevels(room);
  const members = useRoomMembers(mx, room.roomId);
  const chat = useAtomValue(callChatAtom);
+  const callEmbed = useAtomValue(callEmbedAtom);
+  const isDirect = useIsDirectRoom();

  useKeyDown(
    window,
@@ -43,7 +45,7 @@ export function Room() {
    )
  );

-  const callView = room.isCallRoom();
+  const callView = room.isCallRoom() || (isDirect && !!callEmbed && callEmbed.roomId === room.roomId);

  return (
    <PowerLevelsContextProvider value={powerLevels}>
@@ -30,6 +30,8 @@ import {
 } from 'folds';

 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { GifPicker } from '../../components/GifPicker';
+import { useClientConfig } from '../../hooks/useClientConfig';
 import {
  CustomEditor,
  Toolbar,
@@ -171,6 +173,26 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
    const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);

    const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
+    const [locating, setLocating] = React.useState(false);
+    const handleShareLocation = () => {
+      if (!navigator.geolocation) return;
+      setLocating(true);
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          setLocating(false);
+          const { latitude, longitude } = pos.coords;
+          const geoUri = `geo:${latitude.toFixed(6)},${longitude.toFixed(6)}`;
+          mx.sendMessage(roomId, {
+            msgtype: 'm.location',
+            body: `Location: ${geoUri}`,
+            geo_uri: geoUri,
+          } as any);
+        },
+        () => setLocating(false),
+        { timeout: 10000 }
+      );
+    };
+
    const [autocompleteQuery, setAutocompleteQuery] =
      useState<AutocompleteQuery<AutocompletePrefix>>();

@@ -216,6 +238,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
    const pickFile = useFilePicker(handleFiles, true);
    const handlePaste = useFilePasteHandler(handleFiles);
    const dropZoneVisible = useFileDropZone(fileDropContainerRef, handleFiles);
+    const { gifApiKey } = useClientConfig();
+    const gifBtnRef = useRef<HTMLButtonElement>(null);
    const [hideStickerBtn, setHideStickerBtn] = useState(document.body.clientWidth < 500);

    const isComposing = useComposingCheck();
@@ -430,6 +454,30 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
      moveCursor(editor);
    };

+    const handleGifSelect = useCallback(
+      async (gifUrl: string, w: number, h: number) => {
+        try {
+          const res = await fetch(gifUrl);
+          const blob = await res.blob();
+          const uploadRes = await mx.uploadContent(
+            new File([blob], 'image.gif', { type: 'image/gif' }),
+            { type: 'image/gif', name: 'image.gif', includeFilename: false }
+          );
+          const mxcUrl = (uploadRes as any).content_uri;
+          if (!mxcUrl) return;
+          mx.sendMessage(roomId, {
+            msgtype: MsgType.Image,
+            body: 'image.gif',
+            url: mxcUrl,
+            info: { mimetype: 'image/gif', w, h, size: blob.size },
+          });
+        } catch (e) {
+          console.error('GIF send failed', e);
+        }
+      },
+      [mx, roomId]
+    );
+
    const handleStickerSelect = async (mxc: string, shortcode: string, label: string) => {
      const stickerUrl = mxcUrlToHttp(mx, mxc, useAuthentication);
      if (!stickerUrl) return;
@@ -669,6 +717,67 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                  </PopOut>
                )}
              </UseStateProvider>
+              {!!gifApiKey && (
+                <UseStateProvider initial={false}>
+                  {(gifOpen: boolean, setGifOpen) => (
+                    <PopOut
+                      offset={16}
+                      alignOffset={-44}
+                      position="Top"
+                      align="End"
+                      anchor={
+                        gifOpen
+                          ? gifBtnRef.current?.getBoundingClientRect() ?? undefined
+                          : undefined
+                      }
+                      content={
+                        <GifPicker
+                          apiKey={gifApiKey}
+                          onSelect={handleGifSelect}
+                          requestClose={() => setGifOpen(false)}
+                        />
+                      }
+                    >
+                      <IconButton
+                        ref={gifBtnRef}
+                        aria-pressed={gifOpen}
+                        onClick={() => setGifOpen(!gifOpen)}
+                        variant="SurfaceVariant"
+                        size="300"
+                        radii="300"
+                      >
+                        <Text
+                          size="T200"
+                          style={{
+                            fontWeight: 800,
+                            fontSize: '11px',
+                            letterSpacing: '0.04em',
+                            lineHeight: 1,
+                          }}
+                        >
+                          GIF
+                        </Text>
+                      </IconButton>
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+              )}
+              <IconButton
+                onClick={handleShareLocation}
+                variant="SurfaceVariant"
+                size="300"
+                radii="300"
+                aria-label="Share location"
+                title="Share location"
+              >
+                {locating ? (
+                  <Text size="T200" style={{ fontWeight: 800, fontSize: '10px', letterSpacing: '0.04em', lineHeight: 1 }}>
+                    ...
+                  </Text>
+                ) : (
+                  <Icon src={Icons.Pin} size="100" />
+                )}
+              </IconButton>
              <IconButton onClick={submit} variant="SurfaceVariant" size="300" radii="300">
                <Icon src={Icons.Send} />
              </IconButton>
@@ -1222,7 +1222,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                  mEvent.getType() === 'm.poll.start' ||
                  mEvent.getType() === 'org.matrix.msc3381.poll.start'
                )
-                  return <PollContent content={mEvent.getContent()} />;
+                  return <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />;
                if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
                  return (
                    <Text>
@@ -1351,7 +1351,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
            {mEvent.isRedacted() ? (
              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
            ) : (
-              <PollContent content={mEvent.getContent()} />
+              <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />
            )}
          </Message>
        );
@@ -1404,7 +1404,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
            {mEvent.isRedacted() ? (
              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
            ) : (
-              <PollContent content={mEvent.getContent()} />
+              <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />
            )}
          </Message>
        );
@@ -0,0 +1,129 @@
+import React, { ChangeEvent, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  config,
+  Input,
+  Line,
+  MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+} from 'folds';
+import { MatrixEvent } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { stopPropagation } from '../../../utils/keyboard';
+
+type Props = {
+  mEvent: MatrixEvent;
+  onClose: () => void;
+};
+
+export function ForwardMessageDialog({ mEvent, onClose }: Props) {
+  const mx = useMatrixClient();
+  const [query, setQuery] = useState('');
+  const [sentTo, setSentTo] = useState<string | null>(null);
+
+  const allRooms = mx
+    .getRooms()
+    .filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
+    .sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0));
+
+  const filtered = query
+    ? allRooms.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()))
+    : allRooms;
+
+  const forward = (roomId: string, roomName: string) => {
+    const fwdContent: Record<string, unknown> = { ...mEvent.getContent() };
+    delete fwdContent['m.relates_to'];
+    mx.sendMessage(roomId, fwdContent as any);
+    setSentTo(roomName);
+    setTimeout(onClose, 1200);
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Modal
+            size="400"
+            style={{ maxHeight: '440px', borderRadius: config.radii.R500, display: 'flex', flexDirection: 'column' }}
+          >
+            <Box
+              direction="Column"
+              gap="200"
+              shrink="No"
+              style={{ padding: config.space.S400, paddingBottom: config.space.S200 }}
+            >
+              <Text size="H5">Forward message</Text>
+              <Input
+                variant="Background"
+                size="400"
+                radii="400"
+                outlined
+                placeholder="Search rooms…"
+                value={query}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
+              />
+            </Box>
+            <Line size="300" />
+            {sentTo ? (
+              <Box
+                grow="Yes"
+                alignItems="Center"
+                justifyContent="Center"
+                style={{ padding: config.space.S400 }}
+              >
+                <Text size="T300">✓ Forwarded to {sentTo}</Text>
+              </Box>
+            ) : (
+              <Box grow="Yes" style={{ minHeight: 0 }}>
+                <Scroll size="300" hideTrack visibility="Hover">
+                  <Box
+                    direction="Column"
+                    gap="100"
+                    style={{ padding: config.space.S200 }}
+                  >
+                    {filtered.slice(0, 60).map((room) => (
+                      <MenuItem
+                        key={room.roomId}
+                        size="300"
+                        radii="300"
+                        onClick={() => forward(room.roomId, room.name)}
+                      >
+                        <Text size="T300" truncate>
+                          {room.name}
+                        </Text>
+                      </MenuItem>
+                    ))}
+                    {filtered.length === 0 && (
+                      <Box
+                        alignItems="Center"
+                        justifyContent="Center"
+                        style={{ padding: config.space.S400 }}
+                      >
+                        <Text size="T300" priority="300">
+                          No rooms found
+                        </Text>
+                      </Box>
+                    )}
+                  </Box>
+                </Scroll>
+              </Box>
+            )}
+          </Modal>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
@@ -727,6 +727,7 @@ export const Message = as<'div', MessageProps>(
    const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
    const [menuAnchor, setMenuAnchor] = useState<RectCords>();
    const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
+    const [forwardOpen, setForwardOpen] = useState(false);

    const senderDisplayName =
      getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
@@ -1028,6 +1029,26 @@ export const Message = as<'div', MessageProps>(
                              Reply
                            </Text>
                          </MenuItem>
+                          {!mEvent.isRedacted() && (
+                            <MenuItem
+                              size="300"
+                              after={<Icon src={Icons.ArrowRight} />}
+                              radii="300"
+                              onClick={() => {
+                                setForwardOpen(true);
+                                closeMenu();
+                              }}
+                            >
+                              <Text
+                                className={css.MessageMenuItemText}
+                                as="span"
+                                size="T300"
+                                truncate
+                              >
+                                Forward
+                              </Text>
+                            </MenuItem>
+                          )}
                          {!isThreadedMessage && (
                            <MenuItem
                              size="300"
@@ -1145,6 +1166,9 @@ export const Message = as<'div', MessageProps>(
            {msgContentJSX}
          </ModernLayout>
        )}
+        {forwardOpen && (
+          <ForwardMessageDialog mEvent={mEvent} onClose={() => setForwardOpen(false)} />
+        )}
      </MessageBase>
    );
  }
@@ -55,7 +55,7 @@ export const getImageMsgContent = async (
  const content: IContent = {
    msgtype: MsgType.Image,
    filename: file.name,
-    body: file.name,
+    body: metadata.caption?.trim() || file.name,
    [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
  };
  if (imgEl) {
@@ -90,7 +90,7 @@ export const getVideoMsgContent = async (
  const content: IContent = {
    msgtype: MsgType.Video,
    filename: file.name,
-    body: file.name,
+    body: metadata.caption?.trim() || file.name,
    [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
  };
  if (videoEl) {
@@ -18,6 +18,7 @@ export type ClientConfig = {
  };

  hashRouter?: HashRouterConfig;
+  gifApiKey?: string;
 };

 const ClientConfigContext = createContext<ClientConfig | null>(null);
@@ -9,6 +9,7 @@ import { createListAtom } from '../list';

 export type TUploadMetadata = {
  markedAsSpoiler: boolean;
+  caption?: string;
 };

 export type TUploadItem = {