@lovett/ui 0.0.1

package/src/meta-previews/MetaMessengerPreview.tsx

@@ -0,0 +1,795 @@
+import React, { useState } from 'react';
+import { ChevronLeft, MoreHorizontal } from 'lucide-react';
+import type { PreviewAdData } from './types';
+import { ProfileAvatar } from './ProfileAvatar';
+import { CreativeMedia } from './CreativeMedia';
+
+interface MetaMessengerPreviewProps {
+  adData: PreviewAdData;
+}
+
+/**
+ * Facebook Messenger Inbox Preview
+ * Exact styling extracted from Facebook Creative Hub
+ * Reference: creative-spec/references/META_DESIGN_TOKENS.md
+ * Source: singleimage-facebook-messenger-inbox.html
+ * Container: 250x444px (outer), 375x142px (inner - Ad view)
+ */
+export const MetaMessengerPreview: React.FC<MetaMessengerPreviewProps> = ({
+  adData,
+}) => {
+  const [view, setView] = useState<'ad' | 'expanded'>('ad');
+
+  // Messenger Inbox exact design tokens - extracted from Creative Hub
+  const mi = {
+    // Outer container
+    outerContainerWidth: 250,
+    outerContainerHeight: 444,
+    outerContainerBg: 'rgba(0, 0, 0, 0.03)',
+    outerContainerRadius: 8,
+    outerContainerBorder: 'none',
+    outerContainerShadow: 'rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px',
+    fontFamily: 'Roboto, Arial, sans-serif',
+    baseColor: 'rgb(28, 30, 33)',
+    baseFontSize: 12,
+    baseLineHeight: '15.36px',
+
+    // Inner container (Ad view)
+    innerContainerWidth: 375,
+    innerContainerHeight: 142,
+    innerContainerBg: 'rgb(255, 255, 255)',
+    transformScale: 0.666667,
+
+    // Toggle buttons
+    toggleContainerWidth: 190,
+    toggleContainerHeight: 28,
+    toggleMarginTop: 12,
+    toggleMarginBottom: 16,
+    toggleMarginHorizontal: 92.5,
+
+    // Active button
+    activeButtonBg: 'rgb(24, 119, 242)',
+    activeButtonColor: 'rgb(255, 255, 255)',
+    activeButtonBorder: '1px solid rgb(24, 119, 242)',
+
+    // Inactive button
+    inactiveButtonBg: 'rgb(245, 246, 247)',
+    inactiveButtonColor: 'rgb(68, 73, 80)',
+    inactiveButtonBorder: '1px solid rgb(218, 221, 225)',
+
+    // Button common styles
+    buttonFontSize: 12,
+    buttonFontWeight: 700,
+    buttonLineHeight: '26px',
+    buttonHeight: 28,
+    adViewButtonWidth: 71.0547,
+    expandedViewButtonWidth: 113.445,
+    buttonRadius: 2,
+    buttonPadding: '0px 11px',
+
+    // Divider
+    dividerBg: 'rgba(0, 0, 0, 0.1)',
+    dividerHeight: 1,
+
+    // Content row
+    contentRowHeight: 76,
+    contentRowPadding: '0px 20px',
+    contentRowBg: 'rgb(255, 255, 255)',
+
+    // Profile image (large)
+    profileSize: 60,
+    profileRadius: 30,
+    profileMarginTop: 8,
+
+    // Text content
+    textContentWidth: 191,
+    textContentMargin: '10px 12px 8px',
+
+    // Brand name row
+    brandNameHeight: 20,
+    brandNameWidth: 191,
+    brandNameMaxWidth: 169,
+    brandNameFontSize: 17,
+    brandNameFontWeight: 600,
+    brandNameLineHeight: '20px',
+    brandNameColor: 'rgb(0, 0, 0)',
+
+    // Ad badge
+    adBadgeBg: 'rgb(218, 220, 222)',
+    adBadgeHeight: 17,
+    adBadgeWidth: 20.1641,
+    adBadgeRadius: 4,
+    adBadgeMargin: '2px 0px 1px 4px',
+    adBadgeTextSize: 10,
+    adBadgeTextColor: 'rgb(255, 255, 255)',
+    adBadgeTextLineHeight: '16px',
+
+    // Description text
+    descriptionSize: 14,
+    descriptionWeight: 400,
+    descriptionLineHeight: '18px',
+    descriptionColor: 'rgba(0, 0, 0, 0.5)',
+    descriptionMaxHeight: 18,
+
+    // View more link
+    viewMoreColor: 'rgb(31, 135, 255)',
+    viewMoreSize: 14,
+    viewMoreLineHeight: '18px',
+
+    // Thumbnail image (right side)
+    thumbnailSize: 60,
+    thumbnailRadius: 12,
+    thumbnailMargin: '8px 0px',
+    thumbnailShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.666667px',
+  };
+
+  // Truncate text helper
+  const truncateText = (text: string, limit: number) => {
+    if (!text || text.length <= limit) return text;
+    return text.substring(0, limit);
+  };
+
+  return (
+    <div
+      className="meta-preview"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        fontFamily: mi.fontFamily,
+        fontSize: `${mi.baseFontSize}px`,
+        color: mi.baseColor,
+        lineHeight: mi.baseLineHeight,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: view === 'expanded' ? 'flex-start' : 'center',
+          width: `${mi.outerContainerWidth}px`, maxWidth: '100%',
+          height: view === 'expanded' ? '540px' : `${mi.outerContainerHeight}px`,
+          backgroundColor: mi.outerContainerBg,
+          borderRadius: `${mi.outerContainerRadius}px`,
+          boxShadow: mi.outerContainerShadow,
+          overflow: 'hidden',
+        }}
+      >
+        {/* Inner container with transform scale */}
+        <div
+          style={{
+            width: `${mi.innerContainerWidth}px`,
+            height: view === 'expanded' ? 'auto' : `${mi.innerContainerHeight}px`,
+            transform: `matrix(${mi.transformScale}, 0, 0, ${mi.transformScale}, 0, 0)`,
+            transformOrigin: view === 'expanded' ? 'top center' : 'center center',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              width: `${mi.innerContainerWidth}px`,
+              height: `${mi.innerContainerHeight}px`,
+              backgroundColor: mi.innerContainerBg,
+            }}
+          >
+            <div
+              data-ad-preview="previewContainer"
+              style={{
+                width: `${mi.innerContainerWidth}px`,
+                height: `${mi.innerContainerHeight}px`,
+              }}
+            >
+              <div
+                style={{
+                  width: `${mi.innerContainerWidth}px`,
+                  height: '122px',
+                }}
+              >
+                <div
+                  style={{
+                    margin: `${mi.toggleMarginTop}px 0px 8px`,
+                    width: `${mi.innerContainerWidth}px`,
+                  }}
+                >
+                  {/* Toggle Buttons */}
+                  <div
+                    style={{
+                      display: 'block',
+                      alignItems: 'center',
+                      width: `${mi.toggleContainerWidth}px`,
+                      height: `${mi.toggleContainerHeight}px`,
+                      margin: `0px ${mi.toggleMarginHorizontal}px ${mi.toggleMarginBottom}px`,
+                    }}
+                  >
+                    <div style={{ transform: 'matrix(1, 0, 0, 1, 0, 0)' }}>
+                      {/* Ad View Button */}
+                      <button
+                        type="button"
+                        onClick={() => setView('ad')}
+                        style={{
+                          display: 'inline-block',
+                          position: 'relative',
+                          width: `${mi.adViewButtonWidth}px`,
+                          height: `${mi.buttonHeight}px`,
+                          maxWidth: '242px',
+                          padding: mi.buttonPadding,
+                          backgroundColor: view === 'ad' ? mi.activeButtonBg : mi.inactiveButtonBg,
+                          color: view === 'ad' ? mi.activeButtonColor : mi.inactiveButtonColor,
+                          fontFamily: '-apple-system, system-ui, "system-ui", Arial, sans-serif',
+                          fontSize: `${mi.buttonFontSize}px`,
+                          fontWeight: mi.buttonFontWeight,
+                          lineHeight: mi.buttonLineHeight,
+                          textAlign: 'center',
+                          border: view === 'ad' ? mi.activeButtonBorder : mi.inactiveButtonBorder,
+                          borderRadius: `${mi.buttonRadius}px 0px 0px ${mi.buttonRadius}px`,
+                          cursor: 'pointer',
+                        }}
+                      >
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '26px',
+                          }}
+                        >
+                          <div
+                            style={{
+                              textOverflow: 'ellipsis',
+                              overflow: 'hidden',
+                            }}
+                          >
+                            Ad view
+                          </div>
+                        </div>
+                      </button>
+
+                      {/* Expanded View Button */}
+                      <button
+                        type="button"
+                        onClick={() => setView('expanded')}
+                        style={{
+                          display: 'inline-block',
+                          position: 'relative',
+                          width: `${mi.expandedViewButtonWidth}px`,
+                          height: `${mi.buttonHeight}px`,
+                          maxWidth: '242px',
+                          padding: mi.buttonPadding,
+                          backgroundColor: view === 'expanded' ? mi.activeButtonBg : mi.inactiveButtonBg,
+                          color: view === 'expanded' ? mi.activeButtonColor : mi.inactiveButtonColor,
+                          fontFamily: '-apple-system, system-ui, "system-ui", Arial, sans-serif',
+                          fontSize: `${mi.buttonFontSize}px`,
+                          fontWeight: mi.buttonFontWeight,
+                          lineHeight: mi.buttonLineHeight,
+                          textAlign: 'center',
+                          borderRadius: `0px ${mi.buttonRadius}px ${mi.buttonRadius}px 0px`,
+                          borderWidth: '1px 1px 1px 0px',
+                          borderStyle: 'solid',
+                          borderColor: view === 'expanded' ? 'rgb(24, 119, 242)' : 'rgb(218, 221, 225)',
+                          cursor: 'pointer',
+                        }}
+                      >
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '26px',
+                          }}
+                        >
+                          <div
+                            style={{
+                              textOverflow: 'ellipsis',
+                              overflow: 'hidden',
+                            }}
+                          >
+                            Expanded view
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+
+                  {view === 'ad' ? (
+                    // Ad View
+                    <div>
+                      {/* Top divider */}
+                      <hr
+                        style={{
+                          width: `${mi.innerContainerWidth}px`,
+                          height: `${mi.dividerHeight}px`,
+                          backgroundColor: mi.dividerBg,
+                          border: '0px inset',
+                          margin: 0,
+                        }}
+                      />
+
+                      {/* Main content row */}
+                      <div
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'row',
+                          width: '335px',
+                          height: `${mi.contentRowHeight}px`,
+                          padding: mi.contentRowPadding,
+                          backgroundColor: mi.contentRowBg,
+                          overflow: 'hidden',
+                        }}
+                      >
+                        {/* Profile Image */}
+                        <div style={{ width: `${mi.profileSize}px`, height: `${mi.contentRowHeight}px` }}>
+                          <ProfileAvatar
+                            src={adData.profileImage}
+                            name={adData.brandName}
+                            fontSize={18}
+                            background={mi.adBadgeBg}
+                            style={{
+                              width: `${mi.profileSize}px`,
+                              height: `${mi.profileSize}px`,
+                              marginTop: `${mi.profileMarginTop}px`,
+                              borderRadius: `${mi.profileRadius}px`,
+                            }}
+                          />
+                        </div>
+
+                        {/* Text Content */}
+                        <div
+                          style={{
+                            width: `${mi.textContentWidth}px`,
+                            height: '58px',
+                            margin: mi.textContentMargin,
+                            overflow: 'hidden',
+                          }}
+                        >
+                          {/* Brand Name and Ad Badge */}
+                          <div
+                            style={{
+                              display: 'flex',
+                              flexDirection: 'row',
+                              height: `${mi.brandNameHeight}px`,
+                              maxWidth: `${mi.textContentWidth}px`,
+                            }}
+                          >
+                            <h2
+                              style={{
+                                width: `${mi.brandNameMaxWidth}px`,
+                                maxWidth: `${mi.brandNameMaxWidth}px`,
+                                height: '19px',
+                                padding: '1px 0px 0px',
+                                fontSize: `${mi.brandNameFontSize}px`,
+                                fontWeight: mi.brandNameFontWeight,
+                                lineHeight: mi.brandNameLineHeight,
+                                color: mi.brandNameColor,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                margin: 0,
+                              }}
+                            >
+                              {truncateText(adData.brandName, 25)}
+                            </h2>
+                            <div
+                              style={{
+                                width: `${mi.adBadgeWidth}px`,
+                                height: `${mi.adBadgeHeight}px`,
+                                margin: mi.adBadgeMargin,
+                                backgroundColor: mi.adBadgeBg,
+                                borderRadius: `${mi.adBadgeRadius}px`,
+                              }}
+                            >
+                              <div
+                                style={{
+                                  width: '12.1641px',
+                                  height: '16px',
+                                  margin: '1px 4px 0px',
+                                  fontSize: `${mi.adBadgeTextSize}px`,
+                                  fontWeight: 400,
+                                  lineHeight: mi.adBadgeTextLineHeight,
+                                  color: mi.adBadgeTextColor,
+                                  textAlign: 'center',
+                                }}
+                              >
+                                Ad
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* Description */}
+                          <p
+                            style={{
+                              width: `${mi.textContentWidth}px`,
+                              maxWidth: `${mi.textContentWidth}px`,
+                              height: '18px',
+                              maxHeight: `${mi.descriptionMaxHeight}px`,
+                              padding: '1px 0px 0px',
+                              fontSize: `${mi.descriptionSize}px`,
+                              fontWeight: mi.descriptionWeight,
+                              lineHeight: mi.descriptionLineHeight,
+                              color: mi.descriptionColor,
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                              margin: 0,
+                            }}
+                          >
+                            {truncateText(adData.description || adData.primaryText || '', 60)}
+                          </p>
+
+                          {/* View more link */}
+                          <div
+                            style={{
+                              width: `${mi.textContentWidth}px`,
+                              height: '18px',
+                              fontSize: `${mi.viewMoreSize}px`,
+                              fontWeight: 400,
+                              lineHeight: mi.viewMoreLineHeight,
+                              color: mi.viewMoreColor,
+                            }}
+                          >
+                            View more
+                          </div>
+                        </div>
+
+                        {/* Thumbnail Image */}
+                        <div
+                          style={{
+                            display: 'flex',
+                            position: 'relative',
+                            width: `${mi.thumbnailSize}px`,
+                            height: `${mi.thumbnailSize}px`,
+                            margin: mi.thumbnailMargin,
+                          }}
+                        >
+                          {adData.creativeImage ? (
+                            <CreativeMedia
+                              src={adData.creativeImage}
+                              mediaType={adData.creativeMediaType}
+                              alt="Ad creative"
+                              style={{
+                                position: 'relative',
+                                zIndex: 1,
+                                width: `${mi.thumbnailSize}px`,
+                                height: `${mi.thumbnailSize}px`,
+                                objectFit: 'cover',
+                                borderRadius: `${mi.thumbnailRadius}px`,
+                                boxShadow: mi.thumbnailShadow,
+                                display: 'block',
+                              }}
+                            />
+                          ) : (
+                            <div
+                              style={{
+                                width: `${mi.thumbnailSize}px`,
+                                height: `${mi.thumbnailSize}px`,
+                                backgroundColor: mi.adBadgeBg,
+                                borderRadius: `${mi.thumbnailRadius}px`,
+                              }}
+                            />
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Bottom divider */}
+                      <hr
+                        style={{
+                          width: `${mi.innerContainerWidth}px`,
+                          height: `${mi.dividerHeight}px`,
+                          backgroundColor: mi.dividerBg,
+                          border: '0px inset',
+                          margin: 0,
+                        }}
+                      />
+                    </div>
+                  ) : (
+                    // Expanded View (simplified - would need more reference HTML)
+                    <div>
+                      {/* Top divider */}
+                      <hr
+                        style={{
+                          width: `${mi.innerContainerWidth}px`,
+                          height: `${mi.dividerHeight}px`,
+                          backgroundColor: mi.dividerBg,
+                          border: '0px inset',
+                          margin: 0,
+                        }}
+                      />
+
+                      <div
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          maxHeight: '720px',
+                          paddingTop: '12px',
+                          paddingBottom: '10px',
+                        }}
+                      >
+                        {/* Header with back button, profile, and menu */}
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: `${mi.innerContainerWidth}px`,
+                          }}
+                        >
+                          <div
+                            style={{
+                              display: 'flex',
+                              height: '72px',
+                              marginLeft: '20px',
+                              marginRight: '8px',
+                              marginTop: '16px',
+                              width: `${mi.innerContainerWidth}px`,
+                            }}
+                          >
+                            <ChevronLeft
+                              style={{
+                                height: '24px',
+                                width: '24px',
+                                color: mi.baseColor,
+                              }}
+                            />
+                            <ProfileAvatar
+                              src={adData.profileImage}
+                              name={adData.brandName}
+                              fontSize={18}
+                              background={mi.adBadgeBg}
+                              style={{
+                                height: '60px',
+                                width: '60px',
+                                marginLeft: '114px',
+                                marginRight: '114px',
+                                marginTop: '-8px',
+                                marginBottom: '12px',
+                                borderRadius: '30px',
+                              }}
+                            />
+                            <MoreHorizontal
+                              style={{
+                                height: '24px',
+                                width: '24px',
+                                color: mi.baseColor,
+                              }}
+                            />
+                          </div>
+
+                          {/* Brand Name and Ad Badge */}
+                          <div
+                            style={{
+                              display: 'flex',
+                              height: '20px',
+                              maxWidth: '344px',
+                              marginLeft: '92px',
+                              marginRight: '92px',
+                              justifyContent: 'center',
+                            }}
+                          >
+                            <div
+                              style={{
+                                fontSize: '18px',
+                                fontWeight: 700,
+                                height: '20px',
+                                lineHeight: '20px',
+                                overflow: 'hidden',
+                                textAlign: 'center',
+                                textOverflow: 'ellipsis',
+                              }}
+                            >
+                              {truncateText(adData.brandName, 25)}
+                            </div>
+                            <div
+                              style={{
+                                height: '16px',
+                                width: '24px',
+                                marginLeft: '6px',
+                                marginTop: '2px',
+                                marginBottom: '4px',
+                                borderRadius: '4px',
+                                backgroundColor: mi.adBadgeBg,
+                              }}
+                            >
+                              <div
+                                style={{
+                                  color: 'rgb(255, 255, 255)',
+                                  fontSize: '10px',
+                                  height: '18px',
+                                  marginLeft: '4px',
+                                  marginRight: '4px',
+                                  marginTop: '2px',
+                                  textAlign: 'center',
+                                  width: '16px',
+                                }}
+                              >
+                                Ad
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* Like count */}
+                          <div
+                            style={{
+                              color: mi.descriptionColor,
+                              fontSize: '16px',
+                              height: '20px',
+                              lineHeight: '20px',
+                              marginLeft: '66px',
+                              marginRight: '66px',
+                              marginTop: '2px',
+                              maxWidth: '344px',
+                              overflow: 'hidden',
+                              textAlign: 'center',
+                            }}
+                          >
+                            615 people like {adData.brandName}
+                          </div>
+                        </div>
+
+                        {/* Primary Text */}
+                        <div
+                          style={{
+                            fontSize: '18px',
+                            lineHeight: '22px',
+                            marginLeft: '16px',
+                            marginRight: '16px',
+                            marginTop: '8px',
+                            maxHeight: '66px',
+                            overflow: 'hidden',
+                            WebkitLineClamp: 3,
+                          }}
+                        >
+                          {adData.primaryText}
+                        </div>
+
+                        {/* Image and Card */}
+                        <div
+                          style={{
+                            display: 'flex',
+                            marginLeft: '16px',
+                            marginRight: '16px',
+                            marginTop: '12px',
+                            width: '344px',
+                          }}
+                        >
+                          <div style={{ width: '344px' }}>
+                            {/* Creative Image */}
+                            {adData.creativeImage ? (
+                              <CreativeMedia
+                                src={adData.creativeImage}
+                                mediaType={adData.creativeMediaType}
+                                alt="Ad creative"
+                                style={{
+                                  borderTopLeftRadius: '18px',
+                                  borderTopRightRadius: '18px',
+                                  height: '344px',
+                                  width: '344px',
+                                  objectFit: 'cover',
+                                }}
+                              />
+                            ) : (
+                              <div
+                                style={{
+                                  borderTopLeftRadius: '18px',
+                                  borderTopRightRadius: '18px',
+                                  height: '344px',
+                                  width: '344px',
+                                  backgroundColor: mi.adBadgeBg,
+                                }}
+                              />
+                            )}
+
+                            {/* Card with CTA */}
+                            <div
+                              style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.05)',
+                                borderBottomLeftRadius: '18px',
+                                borderBottomRightRadius: '18px',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                marginTop: '-4px',
+                                width: '344px',
+                              }}
+                            >
+                              <div style={{ width: '344px' }}>
+                                {/* Headline */}
+                                <div
+                                  style={{
+                                    fontSize: '18px',
+                                    fontWeight: 700,
+                                    lineHeight: '22px',
+                                    marginLeft: '16px',
+                                    marginRight: '16px',
+                                    marginTop: '12px',
+                                    maxHeight: '22px',
+                                    overflow: 'hidden',
+                                    WebkitLineClamp: 1,
+                                  }}
+                                >
+                                  {truncateText(adData.headline || '', 30)}
+                                </div>
+
+                                {/* Description */}
+                                <div
+                                  style={{
+                                    color: mi.descriptionColor,
+                                    fontSize: '16px',
+                                    lineHeight: '20px',
+                                    marginLeft: '16px',
+                                    marginRight: '16px',
+                                    marginTop: '4px',
+                                    maxHeight: '20px',
+                                    overflow: 'hidden',
+                                    WebkitLineClamp: 1,
+                                  }}
+                                >
+                                  {truncateText(adData.description || '', 40)}
+                                </div>
+
+                                {/* Display Link */}
+                                <div
+                                  style={{
+                                    color: mi.descriptionColor,
+                                    fontSize: '16px',
+                                    lineHeight: '20px',
+                                    marginLeft: '16px',
+                                    marginRight: '16px',
+                                    maxHeight: '20px',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    WebkitLineClamp: 1,
+                                  }}
+                                >
+                                  {adData.displayLink}
+                                </div>
+                              </div>
+
+                              {/* CTA Button */}
+                              <div
+                                style={{
+                                  backgroundColor: 'rgb(10, 124, 255)',
+                                  borderRadius: '12px',
+                                  margin: '12px',
+                                  padding: '8px',
+                                  textAlign: 'center',
+                                }}
+                              >
+                                <div
+                                  style={{
+                                    color: 'rgb(255, 255, 255)',
+                                    height: '20px',
+                                    lineHeight: '20px',
+                                  }}
+                                >
+                                  {adData.callToAction}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Bottom divider */}
+                      <hr
+                        style={{
+                          width: `${mi.innerContainerWidth}px`,
+                          height: `${mi.dividerHeight}px`,
+                          backgroundColor: mi.dividerBg,
+                          border: '0px inset',
+                          margin: 0,
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+MetaMessengerPreview.displayName = 'MetaMessengerPreview';