feat: add Giphy support with embed component and power levels state management

src/app/components/message/MsgTypeRenderers.tsx

@@ -243,7 +243,7 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
   const filename = content.filename ?? content.body ?? 'Video';
 
   return (
-    <Attachment outlined={outlined}>
+    <Attachment outlined={outlined} transparent>
       <AttachmentHeader>
         <FileHeader
           body={filename}

src/app/components/message/attachment/Attachment.css.ts

@@ -16,6 +16,11 @@ export const Attachment = recipe({
         boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
       },
     },
+    transparent: {
+      true: {
+        backgroundColor: 'transparent',
+      },
+    },
   },
 });
 

src/app/components/message/attachment/Attachment.tsx

@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import * as css from './Attachment.css';
 
 export const Attachment = as<'div', css.AttachmentVariants>(
-  ({ className, outlined, ...props }, ref) => (
+  ({ className, outlined, transparent, ...props }, ref) => (
     <Box
       display="InlineFlex"
       direction="Column"
-      className={classNames(css.Attachment({ outlined }), className)}
+      className={classNames(css.Attachment({ outlined, transparent }), className)}
       {...props}
       ref={ref}
     />