added image file component

app/client/web/src/conversation/imageFile/ImageFile.module.css

@@ -0,0 +1,9 @@
+.asset {
+  padding-top: 16px;
+
+  .thumb {
+    width: auto;
+    height: 64px;
+  }
+}
+

app/client/web/src/conversation/imageFile/ImageFile.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Image } from '@mantine/core'
+import { useImageFile } from './useImageFile.hook';
+import classes from './ImageFile.module.css'
+
+export function ImageFile({ source }: {source: File}) {
+  const { state, actions } = useImageFile(source);
+
+  return (
+    <div className={classes.asset}>
+      { state.thumbUrl && ( 
+        <Image radius="sm" className={classes.thumb} src={state.thumbUrl} />
+      )}
+    </div>
+  );
+}
+

app/client/web/src/conversation/imageFile/useImageFile.hook.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react'
+
+export function useImageFile(source: File) {
+  const [state, setState] = useState({
+    thumbUrl: null,
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateState = (value: any) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  useEffect(() => {
+    const thumbUrl = URL.createObjectURL(source);
+    updateState({ thumbUrl });
+    return () => { URL.revokeObjectURL(thumbUrl) };
+  }, [source]);    
+
+  const actions = {
+  }
+
+  return { state, actions }
+}