👤 feat: zoom and rotate avatar (#3264)

2025-09-22 08:12:00 +02:00 · 2024-07-10 22:38:02 +02:00 · 2024-07-10 22:38:02 +02:00 · cd00df69bb
commit cd00df69bb
parent a05e2c1dcc
5 changed files with 170 additions and 140 deletions
--- a/client/package.json
+++ b/client/package.json
@ -70,6 +70,7 @@
    "match-sorter": "^6.3.4",
    "rc-input-number": "^7.4.2",
    "react": "^18.2.0",
+    "react-avatar-editor": "^13.0.2",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
--- a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
@ -1,9 +1,10 @@
-import { FileImage } from 'lucide-react';
+import React, { useState, useRef, useCallback } from 'react';
+import { FileImage, RotateCw, Upload } from 'lucide-react';
 import { useSetRecoilState } from 'recoil';
-import { useState, useEffect } from 'react';
+import AvatarEditor from 'react-avatar-editor';
 import { fileConfig as defaultFileConfig, mergeFileConfig } from 'librechat-data-provider';
 import type { TUser } from 'librechat-data-provider';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Slider } from '~/components/ui';
 import { useUploadAvatarMutation, useGetFileConfig } from '~/data-provider';
 import { useToastContext } from '~/Providers';
 import { Spinner } from '~/components/svg';
@ -13,9 +14,13 @@ import store from '~/store';

 function Avatar() {
  const setUser = useSetRecoilState(store.user);
-  const [input, setinput] = useState<File | null>(null);
+  const [image, setImage] = useState<string | File | null>(null);
  const [isDialogOpen, setDialogOpen] = useState<boolean>(false);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [scale, setScale] = useState<number>(1);
+  const [rotation, setRotation] = useState<number>(0);
+  const editorRef = useRef<AvatarEditor | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
  const { data: fileConfig = defaultFileConfig } = useGetFileConfig({
    select: (data) => mergeFileConfig(data),
  });
@ -27,7 +32,6 @@ function Avatar() {
    onSuccess: (data) => {
      showToast({ message: localize('com_ui_upload_success') });
      setDialogOpen(false);
-
      setUser((prev) => ({ ...prev, avatar: data.url } as TUser));
    },
    onError: (error) => {
@ -36,24 +40,16 @@ function Avatar() {
    },
  });

-  useEffect(() => {
-    if (input) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setPreviewUrl(reader.result as string);
-      };
-      reader.readAsDataURL(input);
-    } else {
-      setPreviewUrl(null);
-    }
-  }, [input]);
-
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const file = event.target.files?.[0];
+    handleFile(file);
+  };

+  const handleFile = (file: File | undefined) => {
    if (fileConfig.avatarSizeLimit && file && file.size <= fileConfig.avatarSizeLimit) {
-      setinput(file);
-      setDialogOpen(true);
+      setImage(file);
+      setScale(1);
+      setRotation(0);
    } else {
      const megabytes = fileConfig.avatarSizeLimit ? formatBytes(fileConfig.avatarSizeLimit) : 2;
      showToast({
@ -63,78 +59,152 @@ function Avatar() {
    }
  };

-  const handleUpload = () => {
-    if (!input) {
-      console.error('No file selected');
-      return;
-    }
-
-    const formData = new FormData();
-    formData.append('input', input, input.name);
-    formData.append('manual', 'true');
-
-    uploadAvatar(formData);
+  const handleScaleChange = (value: number[]) => {
+    setScale(value[0]);
  };

+  const handleRotate = () => {
+    setRotation((prev) => (prev + 90) % 360);
+  };
+
+  const handleUpload = () => {
+    if (editorRef.current) {
+      const canvas = editorRef.current.getImageScaledToCanvas();
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const formData = new FormData();
+          formData.append('input', blob, 'avatar.png');
+          formData.append('manual', 'true');
+          uploadAvatar(formData);
+        }
+      }, 'image/png');
+    }
+  };
+
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files[0];
+    handleFile(file);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+  }, []);
+
+  const openFileDialog = () => {
+    fileInputRef.current?.click();
+  };
+
+  const resetImage = useCallback(() => {
+    setImage(null);
+    setScale(1);
+    setRotation(0);
+  }, []);
+
  return (
    <>
      <div className="flex items-center justify-between">
        <span>{localize('com_nav_profile_picture')}</span>
-        <label htmlFor={'file-upload-avatar'} className="btn btn-neutral relative">
+        <button onClick={() => setDialogOpen(true)} className="btn btn-neutral relative">
          <FileImage className="mr-2 flex w-[22px] items-center stroke-1" />
          <span>{localize('com_nav_change_picture')}</span>
-          <input
-            id={'file-upload-avatar'}
-            value=""
-            type="file"
-            className={cn('hidden')}
-            accept=".png, .jpg"
-            onChange={handleFileChange}
-          />
-        </label>
+        </button>
      </div>

-      <Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>
+      <Dialog
+        open={isDialogOpen}
+        onOpenChange={(open) => {
+          setDialogOpen(open);
+          if (!open) {
+            resetImage();
+          }
+        }}
+      >
        <DialogContent
-          className={cn('shadow-2xl dark:bg-gray-700 dark:text-white md:h-[350px] md:w-[450px] ')}
+          className={cn('shadow-2xl dark:bg-gray-700 dark:text-white md:h-auto md:w-[450px]')}
          style={{ borderRadius: '12px' }}
        >
          <DialogHeader>
            <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
-              {localize('com_ui_preview')}
+              {image ? localize('com_ui_preview') : localize('com_ui_upload_image')}
            </DialogTitle>
          </DialogHeader>
          <div className="flex flex-col items-center justify-center">
-            {previewUrl && (
-              <img
-                src={previewUrl}
-                alt="Preview"
-                className="mb-2 rounded-full"
-                style={{
-                  maxWidth: '100%',
-                  maxHeight: '150px',
-                  width: '150px',
-                  height: '150px',
-                  objectFit: 'cover',
-                }}
-              />
-            )}
-            <button
-              className={cn(
-                'mt-4 rounded px-4 py-2 text-white transition-colors hover:bg-green-600 hover:text-gray-200',
-                isUploading ? 'cursor-not-allowed bg-green-600' : 'bg-green-500',
-              )}
-              onClick={handleUpload}
-              disabled={isUploading}
-            >
-              {isUploading ? (
-                <div className="flex h-6">
-                  <Spinner className="icon-sm m-auto" />
+            {image ? (
+              <>
+                <div className="relative overflow-hidden rounded-full">
+                  <AvatarEditor
+                    ref={editorRef}
+                    image={image}
+                    width={250}
+                    height={250}
+                    border={0}
+                    borderRadius={125}
+                    color={[255, 255, 255, 0.6]}
+                    scale={scale}
+                    rotate={rotation}
+                  />
                </div>
-              ) : (
-                localize('com_ui_upload')
-              )}
-            </button>
+                <div className="mt-4 flex w-full flex-col items-center space-y-4">
+                  <div className="flex w-full items-center justify-center space-x-4">
+                    <span className="text-sm">Zoom:</span>
+                    <Slider
+                      value={[scale]}
+                      min={1}
+                      max={5}
+                      step={0.001}
+                      onValueChange={handleScaleChange}
+                      className="w-2/3 max-w-xs"
+                    />
+                  </div>
+                  <button
+                    onClick={handleRotate}
+                    className="rounded-full bg-gray-200 p-2 transition-colors hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500"
+                  >
+                    <RotateCw className="h-5 w-5" />
+                  </button>
+                </div>
+                <button
+                  className={cn(
+                    'mt-4 flex items-center rounded px-4 py-2 text-white transition-colors hover:bg-green-600 hover:text-gray-200',
+                    isUploading ? 'cursor-not-allowed bg-green-600' : 'bg-green-500',
+                  )}
+                  onClick={handleUpload}
+                  disabled={isUploading}
+                >
+                  {isUploading ? (
+                    <Spinner className="icon-sm mr-2" />
+                  ) : (
+                    <Upload className="mr-2 h-5 w-5" />
+                  )}
+                  {localize('com_ui_upload')}
+                </button>
+              </>
+            ) : (
+              <div
+                className="flex h-64 w-64 flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
+              >
+                <FileImage className="mb-4 h-12 w-12 text-gray-400" />
+                <p className="mb-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                  {localize('com_ui_drag_drop')}
+                </p>
+                <button
+                  onClick={openFileDialog}
+                  className="rounded bg-gray-200 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500"
+                >
+                  {localize('com_ui_select_file')}
+                </button>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  className="hidden"
+                  accept=".png, .jpg, .jpeg"
+                  onChange={handleFileChange}
+                />
+              </div>
+            )}
          </div>
        </DialogContent>
      </Dialog>
--- a/client/src/localization/languages/Eng.ts
+++ b/client/src/localization/languages/Eng.ts
@ -559,6 +559,9 @@ export default {
  com_ui_code: 'Code',
  com_ui_travel: 'Travel',
  com_ui_teach_or_explain: 'Learning',
+  com_ui_select_file: 'Select a file',
+  com_ui_drag_drop_file: 'Drag and drop a file here',
+  com_ui_upload_image: 'Upload an image',
  com_ui_select_a_category: 'No category selected',
  com_nav_tool_dialog_description: 'Assistant must be saved to persist tool selections.',
  com_show_agent_settings: 'Show Agent Settings',
--- a/client/src/utils/files.ts
+++ b/client/src/utils/files.ts
@ -107,7 +107,7 @@ export const getFileType = (
 * @example
 * formatDate('2020-01-01T00:00:00.000Z') // '1 Jan 2020'
 */
-export function formatDate(dateString) {
+export function formatDate(dateString: string) {
  const months = [
    'Jan',
    'Feb',
--- a/package-lock.json
+++ b/package-lock.json
@ -1155,6 +1155,7 @@
        "match-sorter": "^6.3.4",
        "rc-input-number": "^7.4.2",
        "react": "^18.2.0",
+        "react-avatar-editor": "^13.0.2",
        "react-dnd": "^16.0.1",
        "react-dnd-html5-backend": "^16.0.1",
        "react-dom": "^18.2.0",
@ -1250,7 +1251,6 @@
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/gen-mapping": "^0.3.0",
        "@jridgewell/trace-mapping": "^0.3.9"
@ -2274,7 +2274,6 @@
      "version": "7.23.5",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
-      "dev": true,
      "dependencies": {
        "@babel/highlight": "^7.23.4",
        "chalk": "^2.4.2"
@ -2287,7 +2286,6 @@
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
      "dependencies": {
        "color-convert": "^1.9.0"
      },
@ -2299,7 +2297,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
      "dependencies": {
        "ansi-styles": "^3.2.1",
        "escape-string-regexp": "^1.0.5",
@ -2313,7 +2310,6 @@
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
      "dependencies": {
        "color-name": "1.1.3"
      }
@ -2321,14 +2317,12 @@
    "node_modules/@babel/code-frame/node_modules/color-name": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
    },
    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
      "engines": {
        "node": ">=0.8.0"
      }
@ -2337,7 +2331,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
      "engines": {
        "node": ">=4"
      }
@ -2346,7 +2339,6 @@
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
      "dependencies": {
        "has-flag": "^3.0.0"
      },
@ -2358,7 +2350,6 @@
      "version": "7.23.5",
      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@ -2367,7 +2358,6 @@
      "version": "7.23.9",
      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
-      "dev": true,
      "dependencies": {
        "@ampproject/remapping": "^2.2.0",
        "@babel/code-frame": "^7.23.5",
@ -2397,7 +2387,6 @@
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
      }
@ -2406,7 +2395,6 @@
      "version": "7.23.6",
      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.23.6",
        "@jridgewell/gen-mapping": "^0.3.2",
@ -2445,7 +2433,6 @@
      "version": "7.23.6",
      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
-      "dev": true,
      "dependencies": {
        "@babel/compat-data": "^7.23.5",
        "@babel/helper-validator-option": "^7.23.5",
@ -2461,7 +2448,6 @@
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
      }
@ -2528,7 +2514,6 @@
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz",
      "integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-compilation-targets": "^7.22.6",
        "@babel/helper-plugin-utils": "^7.22.5",
@ -2544,7 +2529,6 @@
      "version": "7.22.20",
      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@ -2553,7 +2537,6 @@
      "version": "7.23.0",
      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
-      "dev": true,
      "dependencies": {
        "@babel/template": "^7.22.15",
        "@babel/types": "^7.23.0"
@ -2566,7 +2549,6 @@
      "version": "7.22.5",
      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.22.5"
      },
@ -2590,7 +2572,6 @@
      "version": "7.22.15",
      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.22.15"
      },
@ -2602,7 +2583,6 @@
      "version": "7.23.3",
      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-environment-visitor": "^7.22.20",
        "@babel/helper-module-imports": "^7.22.15",
@ -2633,7 +2613,6 @@
      "version": "7.22.5",
      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@ -2676,7 +2655,6 @@
      "version": "7.22.5",
      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.22.5"
      },
@ -2700,7 +2678,6 @@
      "version": "7.22.6",
      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-      "dev": true,
      "dependencies": {
        "@babel/types": "^7.22.5"
      },
@ -2712,7 +2689,6 @@
      "version": "7.23.4",
      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@ -2721,7 +2697,6 @@
      "version": "7.22.20",
      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@ -2730,7 +2705,6 @@
      "version": "7.23.5",
      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@ -2753,7 +2727,6 @@
      "version": "7.23.9",
      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
-      "dev": true,
      "dependencies": {
        "@babel/template": "^7.23.9",
        "@babel/traverse": "^7.23.9",
@ -2767,7 +2740,6 @@
      "version": "7.23.4",
      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-validator-identifier": "^7.22.20",
        "chalk": "^2.4.2",
@ -2781,7 +2753,6 @@
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
      "dependencies": {
        "color-convert": "^1.9.0"
      },
@ -2793,7 +2764,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
      "dependencies": {
        "ansi-styles": "^3.2.1",
        "escape-string-regexp": "^1.0.5",
@ -2807,7 +2777,6 @@
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
      "dependencies": {
        "color-name": "1.1.3"
      }
@ -2815,14 +2784,12 @@
    "node_modules/@babel/highlight/node_modules/color-name": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
    },
    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
      "engines": {
        "node": ">=0.8.0"
      }
@ -2831,7 +2798,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
      "engines": {
        "node": ">=4"
      }
@ -2840,7 +2806,6 @@
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
      "dependencies": {
        "has-flag": "^3.0.0"
      },
@ -2852,7 +2817,6 @@
      "version": "7.23.9",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
-      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@ -3938,7 +3902,6 @@
      "version": "7.23.9",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.9.tgz",
      "integrity": "sha512-A7clW3a0aSjm3ONU9o2HAILSegJCYlEZmOhmBRReVtIpY/Z/p7yIZ+wR41Z+UipwdGuqwtID/V/dOdZXjwi9gQ==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-module-imports": "^7.22.15",
        "@babel/helper-plugin-utils": "^7.22.5",
@ -3958,7 +3921,6 @@
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
      }
@ -4297,7 +4259,6 @@
      "version": "7.23.9",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
-      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.23.5",
        "@babel/parser": "^7.23.9",
@ -4311,7 +4272,6 @@
      "version": "7.23.9",
      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
-      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.23.5",
        "@babel/generator": "^7.23.6",
@ -4332,7 +4292,6 @@
      "version": "11.12.0",
      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
      "engines": {
        "node": ">=4"
      }
@ -4341,7 +4300,6 @@
      "version": "7.23.9",
      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-string-parser": "^7.23.4",
        "@babel/helper-validator-identifier": "^7.22.20",
@ -11356,7 +11314,6 @@
      "version": "0.4.8",
      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.8.tgz",
      "integrity": "sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==",
-      "dev": true,
      "dependencies": {
        "@babel/compat-data": "^7.22.6",
        "@babel/helper-define-polyfill-provider": "^0.5.0",
@ -11370,7 +11327,6 @@
      "version": "6.3.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
      }
@ -11379,7 +11335,6 @@
      "version": "0.9.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz",
      "integrity": "sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-define-polyfill-provider": "^0.5.0",
        "core-js-compat": "^3.34.0"
@ -11392,7 +11347,6 @@
      "version": "0.5.5",
      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz",
      "integrity": "sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==",
-      "dev": true,
      "dependencies": {
        "@babel/helper-define-polyfill-provider": "^0.5.0"
      },
@ -11844,7 +11798,6 @@
      "version": "4.22.3",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -12077,7 +12030,6 @@
      "version": "1.0.30001591",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz",
      "integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -12682,8 +12634,7 @@
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
    },
    "node_modules/cookie": {
      "version": "0.5.0",
@ -12742,7 +12693,6 @@
      "version": "3.35.1",
      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.1.tgz",
      "integrity": "sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==",
-      "dev": true,
      "dependencies": {
        "browserslist": "^4.22.2"
      },
@ -13608,8 +13558,7 @@
    "node_modules/electron-to-chromium": {
      "version": "1.4.656",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.656.tgz",
-      "integrity": "sha512-9AQB5eFTHyR3Gvt2t/NwR0le2jBSUNwCnMbUCejFWHD+so4tH40/dRLgoE+jxlPeWS43XJewyvCv+I8LPMl49Q==",
-      "dev": true
+      "integrity": "sha512-9AQB5eFTHyR3Gvt2t/NwR0le2jBSUNwCnMbUCejFWHD+so4tH40/dRLgoE+jxlPeWS43XJewyvCv+I8LPMl49Q=="
    },
    "node_modules/elliptic": {
      "version": "6.5.4",
@ -15492,7 +15441,6 @@
      "version": "1.0.0-beta.2",
      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
@ -18510,7 +18458,6 @@
      "version": "2.5.2",
      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
      "bin": {
        "jsesc": "bin/jsesc"
      },
@ -18567,7 +18514,6 @@
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
      "bin": {
        "json5": "lib/cli.js"
      },
@ -19679,7 +19625,6 @@
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
      "dependencies": {
        "yallist": "^3.0.2"
      }
@ -21200,8 +21145,7 @@
    "node_modules/node-releases": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-      "dev": true
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
    },
    "node_modules/node-stdlib-browser": {
      "version": "1.2.0",
@ -24244,6 +24188,21 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-avatar-editor": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/react-avatar-editor/-/react-avatar-editor-13.0.2.tgz",
+      "integrity": "sha512-a4ajbi7lwDh98kgEtSEeKMu0vs0CHTczkq4Xcxr1EiwMFH1GlgHCEtwGU8q/H5W8SeLnH4KPK8LUjEEaZXklxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/plugin-transform-runtime": "^7.12.1",
+        "@babel/runtime": "^7.12.5",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-dnd": {
      "version": "16.0.1",
      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
@ -26835,7 +26794,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
      "engines": {
        "node": ">=4"
      }
@ -27542,7 +27500,6 @@
      "version": "1.0.13",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -29247,8 +29204,7 @@
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
    },
    "node_modules/yaml": {
      "version": "2.3.4",