feat: add file icon and add message popover content (#77)

* feat: add message popover content

* feat: add file icon

web/src/components/new-document-link.tsx

@@ -0,0 +1,20 @@
+import { api_host } from '@/utils/api';
+import React from 'react';
+
+interface IProps extends React.PropsWithChildren {
+  documentId: string;
+}
+
+const NewDocumentLink = ({ children, documentId }: IProps) => {
+  return (
+    <a
+      target="_blank"
+      href={`${api_host}/document/get/${documentId}`}
+      rel="noreferrer"
+    >
+      {children}
+    </a>
+  );
+};
+
+export default NewDocumentLink;

web/src/components/svg-icon.tsx

@@ -0,0 +1,34 @@
+import {
+  UseDynamicSVGImportOptions,
+  useDynamicSVGImport,
+} from '@/hooks/commonHooks';
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  name: string;
+  onCompleted?: UseDynamicSVGImportOptions['onCompleted'];
+  onError?: UseDynamicSVGImportOptions['onError'];
+}
+
+const SvgIcon: React.FC<IconProps> = ({
+  name,
+  onCompleted,
+  onError,
+  ...rest
+}): React.ReactNode | null => {
+  const { error, loading, SvgIcon } = useDynamicSVGImport(name, {
+    onCompleted,
+    onError,
+  });
+  if (error) {
+    return error.message;
+  }
+  if (loading) {
+    return 'Loading...';
+  }
+  if (SvgIcon) {
+    return <SvgIcon {...rest} />;
+  }
+  return null;
+};
+
+export default SvgIcon;