fix: Fix issue with profile picture not updating (#10532)

This PR resolves the issue with updating the profile picture in the profile settings.

**Cause of issue**
The issue can be reproduced with the old `ProfileAvatar.vue` component.
While the exact reason is unclear, it seems related to cases where the
file might be `null`.

**Solution**
Replaced the old `ProfileAvatar.vue` with `Avatar.vue` and tested it. It
works fine. I’ve attached a loom video below.

Fixes https://linear.app/chatwoot/issue/CW-3768/profile-picture-bug

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/v3/components/Form/ProfileAvatar.vue

@@ -1,85 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import InitialsAvatar from './InitialsAvatar.vue';
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['change', 'delete']);
-
-const hasImageLoaded = ref(false);
-const imageLoadedError = ref(false);
-const fileInputRef = ref(null);
-
-const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
-
-const onImageLoadError = () => {
-  imageLoadedError.value = true;
-};
-
-const onImageLoad = () => {
-  hasImageLoaded.value = true;
-  imageLoadedError.value = false;
-};
-
-const openFileInput = () => {
-  fileInputRef.value.click();
-};
-
-const onImageUpload = event => {
-  const [file] = event.target.files;
-  emit('change', {
-    file,
-    url: file ? URL.createObjectURL(file) : null,
-  });
-};
-
-const onAvatarDelete = () => {
-  emit('delete');
-};
-</script>
-
-<template>
-  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
-    <img
-      v-if="shouldShowImage"
-      class="rounded-xl h-[72px] w-[72px]"
-      :alt="name"
-      :src="src"
-      draggable="false"
-      @load="onImageLoad"
-      @error="onImageLoadError"
-    />
-    <InitialsAvatar v-else-if="!shouldShowImage" :name="name" :size="72" />
-
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onImageUpload"
-    />
-    <div class="hidden group-hover:block">
-      <button
-        v-if="src"
-        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
-        @click="onAvatarDelete"
-      >
-        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
-      </button>
-      <button
-        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
-        @click="openFileInput"
-      >
-        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
-      </button>
-    </div>
-  </div>
-</template>