Port to TypeScript

Author: compulim

packages/component/src/Attachment/ImageAttachment.js

@@ -0,0 +1,59 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import React, { memo } from 'react';
+import { custom, object, optional, pipe, readonly, safeParse, string, union, type InferInput } from 'valibot';
+
+import readDataURIToBlob from '../Utils/readDataURIToBlob';
+import ImageContent from './ImageContent';
+import { type WebChatAttachment } from './private/types/WebChatAttachment';
+
+const imageAttachmentPropsSchema = pipe(
+  object({
+    attachment: custom<WebChatAttachment>(
+      value =>
+        safeParse(
+          union([
+            object({
+              contentUrl: string(),
+              name: optional(string()),
+              thumbnailUrl: optional(string())
+            }),
+            object({
+              contentUrl: optional(string()),
+              name: optional(string()),
+              thumbnailUrl: string()
+            })
+          ]),
+          value
+        ).success
+    )
+  }),
+  readonly()
+);
+
+type ImageAttachmentProps = InferInput<typeof imageAttachmentPropsSchema>;
+
+// React component is better with standard function than arrow function.
+// eslint-disable-next-line prefer-arrow-callback
+const ImageAttachment = memo(function ImageAttachment(props: ImageAttachmentProps) {
+  const { attachment } = validateProps(imageAttachmentPropsSchema, props);
+
+  let imageURL = attachment.thumbnailUrl || attachment.contentUrl;
+
+  // To support Content Security Policy, data URI cannot be used.
+  // We need to parse the data URI into a blob: URL.
+  const blob = readDataURIToBlob(imageURL);
+
+  if (blob) {
+    // Only allow image/* for image, otherwise, treat it as binary.
+    // eslint-disable-next-line no-restricted-properties
+    imageURL = URL.createObjectURL(
+      new Blob([blob], {
+        type: blob.type.startsWith('image/') ? blob.type : 'application/octet-stream'
+      })
+    );
+  }
+
+  return <ImageContent alt={attachment.name} src={imageURL} />;
+});
+
+export default ImageAttachment;

packages/component/src/Attachment/ImageAttachment.tsx

@@ -4,7 +4,13 @@ const PATTERN = /^data:([^,]*?)(;(base64)){0,1},([A-Za-z0-9+/=]+)/u;
 
 const DEFAULT_CONTENT_TYPE = 'text/plain;charset=US-ASCII';
 
-export function parse(dataURI) {
+export function parse(dataURI: string):
+  | {
+      base64: string;
+      contentType: string;
+      encoding: string;
+    }
+  | undefined {
   const match = PATTERN.exec(dataURI);
 
   if (!match) {
@@ -20,12 +26,12 @@ export function parse(dataURI) {
   return { base64, contentType: contentType || DEFAULT_CONTENT_TYPE, encoding };
 }
 
-export default function readDataURIToBlob(dataURI) {
+export default function readDataURIToBlob(dataURI: string): Blob | undefined {
   const parsed = parse(dataURI);
 
   if (!parsed) {
     return;
   }
 
-  return new Blob([toByteArray(parsed.base64)], { type: parsed.contentType });
+  return new Blob([toByteArray(parsed.base64).buffer as ArrayBuffer], { type: parsed.contentType });
 }