@droppii-org/chat-mobile 0.2.25 → 0.2.26

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo, useEffect, useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, type View } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -19,6 +19,7 @@ import { InputButtonFlow } from '../../components/flows/inputButtons';
 import { useResetFlow, useRunFlow } from '../../hooks/flows/useFlow';
 import type { IRunConversationFlowPayload } from '../../types/flows';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
+import { messageStyles } from './legend/messageTypes';
 
 export const ChatListLegend = memo(
   ({
@@ -33,6 +34,7 @@ export const ChatListLegend = memo(
     hasMoreNewer,
     onMediaPress,
     onPressUrl,
+    onLongPress,
   }: ChatListProps) => {
     // Precompute all message data in single pass (O(n))
     const messageDataMap = useMemo(
@@ -60,6 +62,7 @@ export const ChatListLegend = memo(
     const itemHeightsRef = useRef<Map<string, number>>(new Map());
     const avgItemHeightRef = useRef(120);
     const heightDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
+    const rowRefsMap = useRef<Map<string, View | null>>(new Map());
     const [showBadge, setShowBadge] = useState(false);
 
     const handleItemLayout = useCallback(
@@ -86,6 +89,16 @@ export const ChatListLegend = memo(
       []
     );
 
+    const handleMessageLongPress = useCallback(
+      (messageId: string, message: DMessageItem) => {
+        const node = rowRefsMap.current.get(messageId);
+        node?.measureInWindow((x, y, width, height) => {
+          onLongPress?.(message, { x, y, width, height });
+        });
+      },
+      [onLongPress]
+    );
+
     const onRunFlow = useCallback(
       (payload: IRunConversationFlowPayload) => {
         runFlow(payload);
@@ -130,10 +143,15 @@ export const ChatListLegend = memo(
             <>
               {dayStart && <LegendChatDay createdAt={createdAt} />}
               <KContainer.View
-                style={[
-                  styles.messageRow,
-                  isOutgoing ? styles.messageRowRight : styles.messageRowLeft,
-                ]}
+                ref={(node: View | null) => {
+                  if (node) rowRefsMap.current.set(messageId, node);
+                  else rowRefsMap.current.delete(messageId);
+                }}
+                style={
+                  isOutgoing
+                    ? messageStyles.messageRowRight
+                    : messageStyles.messageRowLeft
+                }
                 onLayout={(e) =>
                   handleItemLayout(messageId, e.nativeEvent.layout.height)
                 }
@@ -145,6 +163,11 @@ export const ChatListLegend = memo(
                   onMediaPress={onMediaPress}
                   onPressUrl={onPressUrl}
                   onRetry={retryMessage}
+                  onLongPress={
+                    onLongPress
+                      ? () => handleMessageLongPress(messageId, message)
+                      : undefined
+                  }
                   customMessageItemFactory={customMessageItemFactory}
                 />
                 {!!flowInputButtonsNode && (
@@ -176,6 +199,8 @@ export const ChatListLegend = memo(
         isBotConversation,
         onMediaPress,
         onPressUrl,
+        onLongPress,
+        handleMessageLongPress,
         customMessageItemFactory,
         onResetFlow,
         onRunFlow,
@@ -399,17 +424,6 @@ const styles = StyleSheet.create({
   container: {
     position: 'relative',
   },
-  messageRow: {
-    width: '100%',
-    paddingHorizontal: KSpacingValue['0.75rem'],
-    marginBottom: KSpacingValue['0.25rem'],
-  },
-  messageRowLeft: {
-    alignItems: 'flex-start',
-  },
-  messageRowRight: {
-    alignItems: 'flex-end',
-  },
   content: {
     paddingVertical: KSpacingValue['0.75rem'],
     flexGrow: 1,

package/src/screens/chat-detail/constants.ts

@@ -1,9 +1,10 @@
 import { KColors } from '@droppii/libs';
 import type { DChatQuickAction, DChatAttachmentAction } from './types';
+import { opacityToSolid } from '../../utils/ui';
 
 export const CHAT_BUBBLE_COLORS = {
-  received: 'rgba(131, 137, 157, 0.1)',
-  sent: 'rgba(0, 81, 255, 0.1)',
+  received: opacityToSolid('#83899d1a', KColors.white, 0.1),
+  sent: opacityToSolid('#0051ff1a', KColors.white, 0.1),
   text: KColors.gray.dark,
   timestamp: KColors.gray.light,
   dayLabel: KColors.gray.light,

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -1,8 +1,10 @@
-import { memo } from 'react';
-import type { ComponentType, ReactNode } from 'react';
 import { KContainer } from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
 import type { DMessageItem } from '../../../types/chat';
 import type { MediaItem } from '../../../hooks/useMediaViewer';
 import { TextMessage } from '../../../components/messages/textMessage';
@@ -13,9 +15,11 @@ import { LinkMessage } from '../../../components/messages/linkMessage';
 import { MergedMessage } from '../../../components/messages/mergedMessage';
 import { MessageStatusIndicator } from '../../../components/messages/MessageStatusIndicator';
 import type { BaseLegendMessageProps } from '../../../components/messages/types';
+import { messageStyles } from './messageTypes';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
+  onLongPress?: () => void;
 };
 
 interface LegendChatMessageProps {
@@ -25,6 +29,7 @@ interface LegendChatMessageProps {
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
   onRetry?: (message: MessageItem) => void;
+  onLongPress?: () => void;
   customMessageItemFactory?: (m: DMessageItem) => ReactNode;
 }
 
@@ -58,11 +63,17 @@ export const LegendChatMessage = memo(
     onMediaPress,
     onPressUrl,
     onRetry,
+    onLongPress,
     customMessageItemFactory,
   }: LegendChatMessageProps) => {
     const customNode = customMessageItemFactory?.(message);
+
     if (customNode) {
-      return customNode;
+      return (
+        <LongPressWrapper onLongPress={onLongPress}>
+          {customNode}
+        </LongPressWrapper>
+      );
     }
 
     const MessageComponent: ComponentType<MessageProps> =
@@ -74,22 +85,49 @@ export const LegendChatMessage = memo(
       onPressUrl && message?.contentType === MessageType.UrlTextMessage;
 
     return (
-      <KContainer.View row alignItems>
+      <KContainer.View style={messageStyles.wrapper} row alignItems>
         <MessageStatusIndicator
           message={message}
           isOutgoing={isOutgoing}
           onRetry={onRetry}
         />
-        <MessageComponent
-          message={message}
-          isOutgoing={isOutgoing}
-          createdAtTime={createdAtTime}
-          onMediaPress={hasMediaPress ? onMediaPress : undefined}
-          onPressUrl={hasUrlPress ? onPressUrl : undefined}
-        />
+        <LongPressWrapper onLongPress={onLongPress}>
+          <MessageComponent
+            message={message}
+            isOutgoing={isOutgoing}
+            createdAtTime={createdAtTime}
+            onMediaPress={hasMediaPress ? onMediaPress : undefined}
+            onPressUrl={hasUrlPress ? onPressUrl : undefined}
+          />
+        </LongPressWrapper>
       </KContainer.View>
     );
   }
 );
 
 LegendChatMessage.displayName = 'LegendChatMessage';
+
+const LongPressWrapper = ({
+  children,
+  onLongPress,
+}: PropsWithChildren<{ onLongPress?: () => void }>) => {
+  const longPressGesture = useMemo(
+    () =>
+      onLongPress
+        ? Gesture.LongPress().onStart(() => {
+            runOnJS(onLongPress)();
+          })
+        : null,
+    [onLongPress]
+  );
+
+  if (!longPressGesture) {
+    return children;
+  }
+
+  return (
+    <GestureDetector gesture={longPressGesture}>
+      <KContainer.View>{children}</KContainer.View>
+    </GestureDetector>
+  );
+};

package/src/screens/chat-detail/messageToolbox/MessageToolboxMenu.tsx

@@ -0,0 +1,114 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import { trans } from '../../../translation';
+
+interface MessageToolboxMenuProps {
+  showCopyMessage?: boolean;
+  showCopyMessageLink?: boolean;
+  showRetryMessage?: boolean;
+  onCopyMessage: () => void;
+  onCopyMessageLink: () => void;
+  onRetryMessage: () => void;
+}
+
+export const MessageToolboxMenu = memo(
+  ({
+    showCopyMessage,
+    showCopyMessageLink,
+    showRetryMessage,
+    onCopyMessage,
+    onCopyMessageLink,
+    onRetryMessage,
+  }: MessageToolboxMenuProps) => {
+    if (!showCopyMessage && !showCopyMessageLink && !showRetryMessage) {
+      return null;
+    }
+
+    return (
+      <KContainer.View style={styles.card}>
+        <KContainer.VisibleView visible={!!showCopyMessage}>
+          <KContainer.Touchable style={styles.row} onPress={onCopyMessage}>
+            <KImage.VectorIcons
+              name="copy-o"
+              provider="DroppiiNew"
+              size={24}
+              color={KColors.gray.dark}
+            />
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.gray.dark}
+              marginL="0.75rem"
+            >
+              {trans('chat:copy_message')}
+            </KLabel.Text>
+          </KContainer.Touchable>
+        </KContainer.VisibleView>
+
+        <KContainer.VisibleView visible={!!showCopyMessageLink}>
+          <KContainer.Touchable style={styles.row} onPress={onCopyMessageLink}>
+            <KImage.VectorIcons
+              name="link-o"
+              provider="DroppiiNew"
+              size={24}
+              color={KColors.gray.dark}
+            />
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.gray.dark}
+              marginL="0.75rem"
+            >
+              {trans('chat:copy_message_link')}
+            </KLabel.Text>
+          </KContainer.Touchable>
+        </KContainer.VisibleView>
+
+        <KContainer.VisibleView visible={!!showRetryMessage}>
+          <KContainer.Touchable style={styles.row} onPress={onRetryMessage}>
+            <KImage.VectorIcons
+              name="arrow-reload-o"
+              provider="DroppiiNew"
+              size={24}
+              color={KColors.danger.normal}
+            />
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.danger.normal}
+              marginL="0.75rem"
+            >
+              {trans('chat:retry_message')}
+            </KLabel.Text>
+          </KContainer.Touchable>
+        </KContainer.VisibleView>
+      </KContainer.View>
+    );
+  }
+);
+
+MessageToolboxMenu.displayName = 'MessageToolboxMenu';
+
+const styles = StyleSheet.create({
+  card: {
+    minWidth: 220,
+    paddingVertical: KSpacingValue['0.5rem'],
+    borderRadius: KSpacingValue['1rem'],
+    backgroundColor: KColors.white,
+    shadowColor: KColors.black,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.1,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: KSpacingValue['1rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+  },
+});

package/src/screens/chat-detail/messageToolbox/MessageToolboxOverlay.tsx

@@ -0,0 +1,130 @@
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import { Modal, Pressable, StyleSheet } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { UIUtils } from '../../../utils/UIUtils';
+import { trans } from '../../../translation';
+import { LegendChatMessage } from '../legend/LegendChatMessage';
+import { MessageToolboxMenu } from './MessageToolboxMenu';
+import {
+  getCopyableMessageText,
+  useMessageToolboxItems,
+} from './messageToolbox.utils';
+import type { DMessageItem } from '../../../types/chat';
+import type { MeasuredRect, MessageToolboxRef } from './types';
+import { MessageToolboxWrapper } from './MessageToolboxWrapper';
+import type { ReactNode } from 'react';
+import { useSendMessage } from '../../../hooks/message/useSendMessage';
+
+interface MessageToolboxOverlayProps {
+  currentUserId?: string;
+  customMessageItemFactory?: (item: DMessageItem) => ReactNode;
+}
+
+export const MessageToolboxOverlay = forwardRef<
+  MessageToolboxRef,
+  MessageToolboxOverlayProps
+>(({ currentUserId = '', customMessageItemFactory }, ref) => {
+  const [visible, setVisible] = useState(false);
+  const [message, setMessage] = useState<DMessageItem | undefined>(undefined);
+  const [rect, setRect] = useState<MeasuredRect | null>(null);
+  const toolboxItems = useMessageToolboxItems(message);
+  const { retryMessage } = useSendMessage();
+  console.log(message);
+
+  const hide = useCallback(() => {
+    setVisible(false);
+    setMessage(undefined);
+    setRect(null);
+  }, []);
+
+  const show = useCallback((msg: DMessageItem, msgRect: MeasuredRect) => {
+    setMessage(msg);
+    setRect(msgRect);
+    setVisible(true);
+  }, []);
+
+  useImperativeHandle(ref, () => ({ show, hide }), [show, hide]);
+
+  const handleCopyMessage = useCallback(() => {
+    if (!message) return;
+    const text = getCopyableMessageText(message);
+    if (text) {
+      Clipboard.setString(text);
+      UIUtils.toast.open({
+        title: trans('chat:copy_message_success'),
+        theme: 'success',
+      });
+    }
+    hide();
+  }, [message, hide]);
+
+  const handleCopyMessageLink = useCallback(() => {
+    if (!message) return;
+    // UI-only for now: real shareable deeplink format (BR-001) is not decided yet.
+    const placeholderLink = `${message.recvID || message.groupID}:${message.clientMsgID ?? message.serverMsgID ?? ''}`;
+    Clipboard.setString(placeholderLink);
+    UIUtils.toast.open({
+      title: trans('chat:copy_message_link_success'),
+      theme: 'success',
+    });
+    hide();
+  }, [message, hide]);
+
+  const handleRetryMessage = useCallback(() => {
+    if (!message) return;
+    retryMessage(message);
+    hide();
+  }, [message, hide, retryMessage]);
+
+  if (!visible || !message || !rect) {
+    return null;
+  }
+
+  const isOutgoing = message.sendID === currentUserId;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      statusBarTranslucent
+      animationType="fade"
+      onRequestClose={hide}
+    >
+      <Pressable style={styles.backdrop} onPress={hide} />
+
+      <MessageToolboxWrapper
+        rect={rect}
+        isOutgoing={isOutgoing}
+        message={
+          <LegendChatMessage
+            message={message}
+            isOutgoing={isOutgoing}
+            createdAtTime={message.sendTime || message.createTime}
+            customMessageItemFactory={customMessageItemFactory}
+          />
+        }
+        toolbox={
+          <MessageToolboxMenu
+            {...toolboxItems}
+            onCopyMessage={handleCopyMessage}
+            onCopyMessageLink={handleCopyMessageLink}
+            onRetryMessage={handleRetryMessage}
+          />
+        }
+      />
+    </Modal>
+  );
+});
+
+MessageToolboxOverlay.displayName = 'MessageToolboxOverlay';
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.75)',
+  },
+});

package/src/screens/chat-detail/messageToolbox/MessageToolboxWrapper.tsx

@@ -0,0 +1,99 @@
+import { useCallback, memo } from 'react';
+import {
+  View,
+  Platform,
+  useWindowDimensions,
+  type LayoutChangeEvent,
+} from 'react-native';
+import {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import type { MeasuredRect } from './types';
+import { messageStyles } from '../legend/messageTypes';
+import Animated from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const MENU_GAP = 8;
+
+type MessageToolboxWrapperProps = {
+  isOutgoing?: boolean;
+  rect: MeasuredRect;
+  message?: React.ReactNode;
+  reaction?: React.ReactNode;
+  toolbox?: React.ReactNode;
+};
+
+export const MessageToolboxWrapper = memo(
+  ({
+    isOutgoing,
+    rect,
+    message,
+    reaction,
+    toolbox,
+  }: MessageToolboxWrapperProps) => {
+    const insets = useSafeAreaInsets();
+    const reactionHeight = useSharedValue(0);
+    const toolboxHeight = useSharedValue(0);
+    const topOffset = Platform.OS === 'android' ? insets.top : 0;
+    const { height: windowHeight } = useWindowDimensions();
+
+    const onToolboxLayout = useCallback(
+      ({ nativeEvent }: LayoutChangeEvent) => {
+        toolboxHeight.value = nativeEvent.layout.height;
+      },
+      [toolboxHeight]
+    );
+
+    const onReactionLayout = useCallback(
+      ({ nativeEvent }: LayoutChangeEvent) => {
+        reactionHeight.value = nativeEvent.layout.height;
+      },
+      [reactionHeight]
+    );
+
+    const translateY = useDerivedValue(() => {
+      const menuGap =
+        (reactionHeight.value > 0 ? MENU_GAP : 0) +
+        (toolboxHeight.value > 0 ? MENU_GAP : 0);
+
+      const overflowBottom =
+        Math.max(rect.y, insets.top) +
+        topOffset +
+        rect.height +
+        toolboxHeight.value +
+        (insets.bottom || 32) +
+        menuGap -
+        windowHeight;
+
+      return withTiming(Math.min(-overflowBottom, 0));
+    });
+
+    const containerStyles = useAnimatedStyle(() => ({
+      top: Math.max(rect.y, insets.top) + topOffset,
+      left: rect.x,
+      gap: MENU_GAP,
+      transform: [{ translateY: translateY.value }],
+    }));
+
+    return (
+      <Animated.View
+        pointerEvents="box-none"
+        style={[
+          isOutgoing
+            ? messageStyles.messageRowRight
+            : messageStyles.messageRowLeft,
+          containerStyles,
+        ]}
+      >
+        <View pointerEvents="none">{message}</View>
+        <View onLayout={onReactionLayout}>{reaction}</View>
+        <View onLayout={onToolboxLayout}>{toolbox}</View>
+      </Animated.View>
+    );
+  }
+);
+
+MessageToolboxWrapper.displayName = 'MessageToolboxWrapper';

package/src/screens/chat-detail/messageToolbox/messageToolbox.utils.ts

@@ -0,0 +1,56 @@
+import { MessageStatus, MessageType } from '@droppii/openim-rn-client-sdk';
+import type { DMessageItem } from '../../../types/chat';
+import { getMessageText } from '../../../utils/legendListMessage';
+
+// Copy message content is only offered for text and link messages.
+const COPYABLE_TEXT_TYPES: number[] = [
+  MessageType.TextMessage,
+  MessageType.AtTextMessage,
+  MessageType.QuoteMessage,
+  MessageType.UrlTextMessage,
+];
+
+export const isMessageRecalled = (message: DMessageItem): boolean =>
+  message.contentType === MessageType.RevokeMessage;
+
+export const isMessageSucceeded = (message: DMessageItem): boolean =>
+  message.status !== MessageStatus.Failed &&
+  message.status !== MessageStatus.Sending;
+
+// Failed or recalled messages never offer either copy action.
+export const isEligibleForToolbox = (message: DMessageItem): boolean =>
+  isMessageSucceeded(message) && !isMessageRecalled(message);
+
+export const isCopyMessageSupported = (message: DMessageItem): boolean =>
+  isEligibleForToolbox(message) &&
+  COPYABLE_TEXT_TYPES.includes(message.contentType);
+
+// All message types are supported, as long as the message is eligible.
+export const isCopyMessageLinkSupported = (message: DMessageItem): boolean =>
+  isEligibleForToolbox(message);
+
+export const isRetrySupported = (message: DMessageItem): boolean =>
+  message.status === MessageStatus.Failed;
+
+export const getCopyableMessageText = (message: DMessageItem): string => {
+  if (message.contentType === MessageType.UrlTextMessage) {
+    return message.urlTextElem?.content ?? '';
+  }
+  return getMessageText(message);
+};
+
+export const useMessageToolboxItems = (message?: DMessageItem) => {
+  if (message == null) {
+    return {};
+  }
+
+  const showCopyMessage = isCopyMessageSupported(message);
+  const showCopyMessageLink = isCopyMessageLinkSupported(message);
+  const showRetryMessage = isRetrySupported(message);
+
+  return {
+    showCopyMessage,
+    showCopyMessageLink,
+    showRetryMessage,
+  };
+};

package/src/screens/chat-detail/messageToolbox/types.ts

@@ -0,0 +1,13 @@
+import type { DMessageItem } from '../../../types/chat';
+
+export interface MeasuredRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface MessageToolboxRef {
+  show: (message: DMessageItem, rect: MeasuredRect) => void;
+  hide: () => void;
+}

package/src/screens/chat-detail/types.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { DMessageItem } from '../../types/chat';
 import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import type { MeasuredRect } from './messageToolbox/types';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
@@ -72,6 +73,7 @@ export interface ChatListProps {
   hasMoreNewer?: boolean;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
+  onLongPress?: (message: DMessageItem, rect: MeasuredRect) => void;
 }
 
 export interface ChatDetailProps extends Omit<

package/src/translation/resources/i18n.ts

@@ -28,6 +28,11 @@ const i18nKey: Record<string, string> = {
   'chat:retry_failed': 'Thử lại thất bại',
   'chat:upload_in_progress': 'Đang tải ảnh lên',
   'chat:wait_or_cancel': 'Vui lòng chờ hoặc hủy bỏ',
+  'chat:copy_message': 'Sao chép tin nhắn',
+  'chat:copy_message_link': 'Sao chép đường dẫn tin nhắn',
+  'chat:copy_message_success': 'Sao chép tin nhắn thành công',
+  'chat:copy_message_link_success': 'Sao chép đường dẫn tin nhắn thành công',
+  'chat:retry_message': 'Gửi lại',
   'msg_type_image': '[Hình ảnh]',
   'msg_type_voice': '[Tin nhắn thoại]',
   'msg_type_video': '[Video]',

package/src/utils/ui.ts

@@ -0,0 +1,23 @@
+const hexToObject = (hex: string) => {
+  const [_, r = 0, g = 0, b = 0] =
+    /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/i
+      .exec(hex)
+      ?.slice(0, 4)
+      .map((x) => parseInt(x, 16)) ?? [];
+
+  return { r, g, b };
+};
+
+export function opacityToSolid(
+  foregroundColor: string,
+  backgroundColor: string,
+  alpha: number
+) {
+  const fg = hexToObject(foregroundColor);
+  const bg = hexToObject(backgroundColor);
+  const r = Math.round(fg.r * alpha + bg.r * (1 - alpha));
+  const g = Math.round(fg.g * alpha + bg.g * (1 - alpha));
+  const b = Math.round(fg.b * alpha + bg.b * (1 - alpha));
+
+  return `rgb(${r}, ${g}, ${b})`;
+}