[WEB-310] dev: private bucket implementation (#5793)

* chore: migrations and backmigration to move attachments to file asset

* chore: move attachments to file assets

* chore: update migration file to include created by and updated by and size

* chore: remove uninmport errors

* chore: make size as float field

* fix: file asset uploads

* chore: asset uploads migration changes

* chore: v2 assets endpoint

* chore: remove unused imports

* chore: issue attachments

* chore: issue attachments

* chore: workspace logo endpoints

* chore: private bucket changes

* chore: user asset endpoint

* chore: add logo_url validation

* chore: cover image urlk

* chore: change asset max length

* chore: pages endpoint

* chore: store the storage_metadata only when none

* chore: attachment asset apis

* chore: update create private bucket

* chore: make bucket private

* chore: fix response of user uploads

* fix: response of user uploads

* fix: job to fix file asset uploads

* fix: user asset endpoints

* chore: avatar for user profile

* chore: external apis user url endpoint

* chore: upload workspace and user asset actions updated

* chore: analytics endpoint

* fix: analytics export

* chore: avatar urls

* chore: update user avatar instances

* chore: avatar urls for assignees and creators

* chore: bucket permission script

* fix: all user avatr instances in the web app

* chore: update project cover image logic

* fix: issue attachment endpoint

* chore: patch endpoint for issue attachment

* chore: attachments

* chore: change attachment storage class

* chore: update issue attachment endpoints

* fix: issue attachment

* chore: update issue attachment implementation

* chore: page asset endpoints

* fix: web build errors

* chore: attachments

* chore: page asset urls

* chore: comment and issue asset endpoints

* chore: asset endpoints

* chore: attachment endpoints

* chore: bulk asset endpoint

* chore: restore endpoint

* chore: project assets endpoints

* chore: asset url

* chore: add delete asset endpoints

* chore: fix asset upload endpoint

* chore: update patch endpoints

* chore: update patch endpoint

* chore: update editor image handling

* chore: asset restore endpoints

* chore: avatar url for space assets

* chore: space app assets migration

* fix: space app urls

* chore: space endpoints

* fix: old editor images rendering logic

* fix: issue archive and attachment activity

* chore: asset deletes

* chore: attachment delete

* fix: issue attachment

* fix: issue attachment get

* chore: cover image url for projects

* chore: remove duplicate py file

* fix: url check function

* chore: chore project cover asset delete

* fix: migrations

* chore: delete migration files

* chore: update bucket

* fix: build errors

* chore: add asset url in intake attachment

* chore: project cover fix

* chore: update next.config

* chore: delete old workspace logos

* chore: workspace assets

* chore: asset get for space

* chore: update project modal

* chore: remove unused imports

* fix: space app editor helper

* chore: update rich-text read-only editor

* chore: create multiple column for entity identifiers

* chore: update migrations

* chore: remove entity identifier

* fix: issue assets

* chore: update maximum file size logic

* chore: update editor max file size logic

* fix: close modal after removing workspace logo

* chore: update uploaded asstes' status post issue creation

* chore: added file size limit to the space app

* dev: add file size limit restriction on all endpoints

* fix: remove old workspace logo and user avatar

---------

Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>

space/core/components/editor/lite-text-editor.tsx

@@ -5,26 +5,27 @@ import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef, TNonColorEditorCo
 import { IssueCommentToolbar } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { getEditorFileHandlers } from "@/helpers/editor.helper";
 import { isCommentEmpty } from "@/helpers/string.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
-// services
-import fileService from "@/services/file.service";
 
 interface LiteTextEditorWrapperProps extends Omit<ILiteTextEditor, "fileHandler" | "mentionHandler"> {
-  workspaceSlug: string;
+  anchor: string;
   workspaceId: string;
   isSubmitting?: boolean;
   showSubmitButton?: boolean;
+  uploadFile: (file: File) => Promise<string>;
 }
 
 export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
   const {
+    anchor,
     containerClassName,
-    workspaceSlug,
     workspaceId,
     isSubmitting = false,
     showSubmitButton = true,
+    uploadFile,
     ...rest
   } = props;
   // use-mention
@@ -39,12 +40,11 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     <div className="border border-custom-border-200 rounded p-3 space-y-3">
       <LiteTextEditorWithRef
         ref={ref}
-        fileHandler={{
-          upload: fileService.getUploadFileFunction(workspaceSlug),
-          delete: fileService.getDeleteImageFunction(workspaceId),
-          restore: fileService.getRestoreImageFunction(workspaceId),
-          cancel: fileService.cancelUpload,
-        }}
+        fileHandler={getEditorFileHandlers({
+          anchor,
+          uploadFile,
+          workspaceId,
+        })}
         mentionHandler={{
           highlights: mentionHighlights,
           // suggestions disabled for now

space/core/components/editor/lite-text-read-only-editor.tsx

@@ -3,18 +3,24 @@ import React from "react";
 import { EditorReadOnlyRefApi, ILiteTextReadOnlyEditor, LiteTextReadOnlyEditorWithRef } from "@plane/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
 
-type LiteTextReadOnlyEditorWrapperProps = Omit<ILiteTextReadOnlyEditor, "mentionHandler">;
+type LiteTextReadOnlyEditorWrapperProps = Omit<ILiteTextReadOnlyEditor, "fileHandler" | "mentionHandler"> & {
+  anchor: string;
+};
 
 export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, LiteTextReadOnlyEditorWrapperProps>(
-  ({ ...props }, ref) => {
+  ({ anchor, ...props }, ref) => {
     const { mentionHighlights } = useMention();
 
     return (
       <LiteTextReadOnlyEditorWithRef
         ref={ref}
+        fileHandler={getReadOnlyEditorFileHandlers({
+          anchor,
+        })}
         mentionHandler={{
           highlights: mentionHighlights,
         }}

space/core/components/editor/rich-text-read-only-editor.tsx

@@ -3,18 +3,24 @@ import React from "react";
 import { EditorReadOnlyRefApi, IRichTextReadOnlyEditor, RichTextReadOnlyEditorWithRef } from "@plane/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
 
-type RichTextReadOnlyEditorWrapperProps = Omit<IRichTextReadOnlyEditor, "mentionHandler">;
+type RichTextReadOnlyEditorWrapperProps = Omit<IRichTextReadOnlyEditor, "fileHandler" | "mentionHandler"> & {
+  anchor: string;
+};
 
 export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, RichTextReadOnlyEditorWrapperProps>(
-  ({ ...props }, ref) => {
+  ({ anchor, ...props }, ref) => {
     const { mentionHighlights } = useMention();
 
     return (
       <RichTextReadOnlyEditorWithRef
         ref={ref}
+        fileHandler={getReadOnlyEditorFileHandlers({
+          anchor,
+        })}
         mentionHandler={{ highlights: mentionHighlights }}
         {...props}
         // overriding the customClassName to add relative class passed

space/core/components/issues/navbar/user-avatar.tsx

@@ -10,6 +10,7 @@ import { Popover, Transition } from "@headlessui/react";
 import { Avatar, Button } from "@plane/ui";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
+import { getFileURL } from "@/helpers/file.helper";
 import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
 import { useUser } from "@/hooks/store";
@@ -66,7 +67,7 @@ export const UserAvatar: FC = observer(() => {
               >
                 <Avatar
                   name={currentUser?.display_name}
-                  src={currentUser?.avatar ?? undefined}
+                  src={getFileURL(currentUser?.avatar_url)}
                   shape="square"
                   size="sm"
                   showTooltip={false}

space/core/components/issues/peek-overview/comment/add-comment.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm, Controller } from "react-hook-form";
 // editor
@@ -11,6 +11,9 @@ import { TOAST_TYPE, setToast } from "@plane/ui";
 import { LiteTextEditor } from "@/components/editor/lite-text-editor";
 // hooks
 import { useIssueDetails, usePublish, useUser } from "@/hooks/store";
+// services
+import { FileService } from "@/services/file.service";
+const fileService = new FileService();
 // types
 import { Comment } from "@/types/issue";
 
@@ -25,12 +28,14 @@ type Props = {
 
 export const AddComment: React.FC<Props> = observer((props) => {
   const { anchor } = props;
+  // states
+  const [uploadedAssetIds, setUploadAssetIds] = useState<string[]>([]);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
   // store hooks
-  const { peekId: issueId, addIssueComment } = useIssueDetails();
+  const { peekId: issueId, addIssueComment, uploadCommentAsset } = useIssueDetails();
   const { data: currentUser } = useUser();
-  const { workspaceSlug, workspace: workspaceID } = usePublish(anchor);
+  const { workspace: workspaceID } = usePublish(anchor);
   // form info
   const {
     handleSubmit,
@@ -44,9 +49,15 @@ export const AddComment: React.FC<Props> = observer((props) => {
     if (!anchor || !issueId || isSubmitting || !formData.comment_html) return;
 
     await addIssueComment(anchor, issueId, formData)
-      .then(() => {
+      .then(async (res) => {
         reset(defaultValues);
         editorRef.current?.clearEditor();
+        if (uploadedAssetIds.length > 0) {
+          await fileService.updateBulkAssetsUploadStatus(anchor, res.id, {
+            asset_ids: uploadedAssetIds,
+          });
+          setUploadAssetIds([]);
+        }
       })
       .catch(() =>
         setToast({
@@ -69,8 +80,8 @@ export const AddComment: React.FC<Props> = observer((props) => {
               onEnterKeyPress={(e) => {
                 if (currentUser) handleSubmit(onSubmit)(e);
               }}
+              anchor={anchor}
               workspaceId={workspaceID?.toString() ?? ""}
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
               ref={editorRef}
               id="peek-overview-add-comment"
               initialValue={
@@ -81,6 +92,11 @@ export const AddComment: React.FC<Props> = observer((props) => {
               onChange={(comment_json, comment_html) => onChange(comment_html)}
               isSubmitting={isSubmitting}
               placeholder="Add Comment..."
+              uploadFile={async (file) => {
+                const { asset_id } = await uploadCommentAsset(file, anchor);
+                setUploadAssetIds((prev) => [...prev, asset_id]);
+                return asset_id;
+              }}
             />
           )}
         />

space/core/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -9,6 +9,7 @@ import { LiteTextEditor, LiteTextReadOnlyEditor } from "@/components/editor";
 import { CommentReactions } from "@/components/issues/peek-overview";
 // helpers
 import { timeAgo } from "@/helpers/date-time.helper";
+import { getFileURL } from "@/helpers/file.helper";
 // hooks
 import { useIssueDetails, usePublish, useUser } from "@/hooks/store";
 import useIsInIframe from "@/hooks/use-is-in-iframe";
@@ -23,9 +24,9 @@ type Props = {
 export const CommentCard: React.FC<Props> = observer((props) => {
   const { anchor, comment } = props;
   // store hooks
-  const { peekId, deleteIssueComment, updateIssueComment } = useIssueDetails();
+  const { peekId, deleteIssueComment, updateIssueComment, uploadCommentAsset } = useIssueDetails();
   const { data: currentUser } = useUser();
-  const { workspaceSlug, workspace: workspaceID } = usePublish(anchor);
+  const { workspace: workspaceID } = usePublish(anchor);
   const isInIframe = useIsInIframe();
 
   // states
@@ -58,10 +59,10 @@ export const CommentCard: React.FC<Props> = observer((props) => {
   return (
     <div className="relative flex items-start space-x-3">
       <div className="relative px-1">
-        {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
+        {comment.actor_detail.avatar_url && comment.actor_detail.avatar_url !== "" ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
-            src={comment.actor_detail.avatar}
+            src={getFileURL(comment.actor_detail.avatar_url)}
             alt={
               comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
             }
@@ -101,8 +102,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 name="comment_html"
                 render={({ field: { onChange, value } }) => (
                   <LiteTextEditor
+                    anchor={anchor}
                     workspaceId={workspaceID?.toString() ?? ""}
-                    workspaceSlug={workspaceSlug?.toString() ?? ""}
                     onEnterKeyPress={handleSubmit(handleCommentUpdate)}
                     ref={editorRef}
                     id={comment.id}
@@ -111,6 +112,10 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     onChange={(comment_json, comment_html) => onChange(comment_html)}
                     isSubmitting={isSubmitting}
                     showSubmitButton={false}
+                    uploadFile={async (file) => {
+                      const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
+                      return asset_id;
+                    }}
                   />
                 )}
               />
@@ -133,7 +138,12 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <LiteTextReadOnlyEditor ref={showEditorRef} id={comment.id} initialValue={comment.comment_html} />
+            <LiteTextReadOnlyEditor
+              anchor={anchor}
+              ref={showEditorRef}
+              id={comment.id}
+              initialValue={comment.comment_html}
+            />
             <CommentReactions anchor={anchor} commentId={comment.id} />
           </div>
         </div>

space/core/components/issues/peek-overview/issue-details.tsx

@@ -26,6 +26,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
       <h4 className="break-words text-2xl font-medium">{issueDetails.name}</h4>
       {description !== "" && description !== "<p></p>" && (
         <RichTextReadOnlyEditor
+          anchor={anchor}
           id={issueDetails.id}
           initialValue={
             !description ||

space/core/constants/common.ts

@@ -0,0 +1 @@
+export const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB

space/core/services/api.service.ts

@@ -32,15 +32,15 @@ export abstract class APIService {
     return this.axiosInstance.get(url, params);
   }
 
-  post(url: string, data: any, config = {}) {
+  post(url: string, data = {}, config = {}) {
     return this.axiosInstance.post(url, data, config);
   }
 
-  put(url: string, data: any, config = {}) {
+  put(url: string, data = {}, config = {}) {
     return this.axiosInstance.put(url, data, config);
   }
 
-  patch(url: string, data: any, config = {}) {
+  patch(url: string, data = {}, config = {}) {
     return this.axiosInstance.patch(url, data, config);
   }
 

space/core/services/file-upload.service.ts

@@ -0,0 +1,33 @@
+import axios from "axios";
+// services
+import { APIService } from "@/services/api.service";
+
+export class FileUploadService extends APIService {
+  private cancelSource: any;
+
+  constructor() {
+    super("");
+  }
+
+  async uploadFile(url: string, data: FormData): Promise<void> {
+    this.cancelSource = axios.CancelToken.source();
+    return this.post(url, data, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      cancelToken: this.cancelSource.token,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        if (axios.isCancel(error)) {
+          console.log(error.message);
+        } else {
+          throw error?.response?.data;
+        }
+      });
+  }
+
+  cancelUpload() {
+    this.cancelSource.cancel("Upload canceled");
+  }
+}

space/core/services/file.service.ts

@@ -1,106 +1,100 @@
-import axios from "axios";
+// plane types
+import { TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
+import { generateFileUploadPayload, getAssetIdFromUrl, getFileMetaDataForUpload } from "@/helpers/file.helper";
 // services
 import { APIService } from "@/services/api.service";
+import { FileUploadService } from "@/services/file-upload.service";
 
-class FileService extends APIService {
+export class FileService extends APIService {
   private cancelSource: any;
+  fileUploadService: FileUploadService;
 
   constructor() {
     super(API_BASE_URL);
-    this.uploadFile = this.uploadFile.bind(this);
-    this.deleteImage = this.deleteImage.bind(this);
-    this.restoreImage = this.restoreImage.bind(this);
     this.cancelUpload = this.cancelUpload.bind(this);
+    // services
+    this.fileUploadService = new FileUploadService();
   }
 
-  async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
-    this.cancelSource = axios.CancelToken.source();
-    return this.post(`/api/workspaces/${workspaceSlug}/file-assets/`, file, {
-      headers: {
-        "Content-Type": "multipart/form-data",
-      },
-      cancelToken: this.cancelSource.token,
-    })
+  private async updateAssetUploadStatus(anchor: string, assetId: string): Promise<void> {
+    return this.patch(`/api/public/assets/v2/anchor/${anchor}/${assetId}/`)
       .then((response) => response?.data)
       .catch((error) => {
-        if (axios.isCancel(error)) {
-          console.log(error.message);
-        } else {
-          console.log(error);
-          throw error?.response?.data;
-        }
+        throw error?.response?.data;
+      });
+  }
+
+  async updateBulkAssetsUploadStatus(
+    anchor: string,
+    entityId: string,
+    data: {
+      asset_ids: string[];
+    }
+  ): Promise<void> {
+    return this.post(`/api/public/assets/v2/anchor/${anchor}/${entityId}/bulk/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async uploadAsset(anchor: string, data: TFileEntityInfo, file: File): Promise<TFileSignedURLResponse> {
+    const fileMetaData = getFileMetaDataForUpload(file);
+    return this.post(`/api/public/assets/v2/anchor/${anchor}/`, {
+      ...data,
+      ...fileMetaData,
+    })
+      .then(async (response) => {
+        const signedURLResponse: TFileSignedURLResponse = response?.data;
+        const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
+        await this.fileUploadService.uploadFile(signedURLResponse.upload_data.url, fileUploadPayload);
+        await this.updateAssetUploadStatus(anchor, signedURLResponse.asset_id);
+        return signedURLResponse;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteNewAsset(assetPath: string): Promise<void> {
+    return this.delete(assetPath)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteOldEditorAsset(workspaceId: string, src: string): Promise<any> {
+    const assetKey = getAssetIdFromUrl(src);
+    return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetKey}/`)
+      .then((response) => response?.status)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreNewAsset(workspaceSlug: string, src: string): Promise<void> {
+    // remove the last slash and get the asset id
+    const assetId = getAssetIdFromUrl(src);
+    return this.post(`/api/public/assets/v2/workspaces/${workspaceSlug}/restore/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreOldEditorAsset(workspaceId: string, src: string): Promise<void> {
+    const assetKey = getAssetIdFromUrl(src);
+    return this.post(`/api/workspaces/file-assets/${workspaceId}/${assetKey}/restore/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
       });
   }
 
   cancelUpload() {
     this.cancelSource.cancel("Upload cancelled");
   }
-
-  getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> {
-    return async (file: File) => {
-      const formData = new FormData();
-      formData.append("asset", file);
-      formData.append("attributes", JSON.stringify({}));
-
-      const data = await this.uploadFile(workspaceSlug, formData);
-      return data.asset;
-    };
-  }
-
-  getDeleteImageFunction(workspaceId: string) {
-    return async (src: string) => {
-      try {
-        const assetUrlWithWorkspaceId = `${workspaceId}/${this.extractAssetIdFromUrl(src, workspaceId)}`;
-        const data = await this.deleteImage(assetUrlWithWorkspaceId);
-        return data;
-      } catch (e) {
-        console.error(e);
-      }
-    };
-  }
-
-  getRestoreImageFunction(workspaceId: string) {
-    return async (src: string) => {
-      try {
-        const assetUrlWithWorkspaceId = `${workspaceId}/${this.extractAssetIdFromUrl(src, workspaceId)}`;
-        const data = await this.restoreImage(assetUrlWithWorkspaceId);
-        return data;
-      } catch (e) {
-        console.error(e);
-      }
-    };
-  }
-
-  extractAssetIdFromUrl(src: string, workspaceId: string): string {
-    const indexWhereAssetIdStarts = src.indexOf(workspaceId) + workspaceId.length + 1;
-    if (indexWhereAssetIdStarts === -1) {
-      throw new Error("Workspace ID not found in source string");
-    }
-    const assetUrl = src.substring(indexWhereAssetIdStarts);
-    return assetUrl;
-  }
-
-  async deleteImage(assetUrlWithWorkspaceId: string): Promise<any> {
-    return this.delete(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/`)
-      .then((response) => response?.status)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async restoreImage(assetUrlWithWorkspaceId: string): Promise<any> {
-    return this.post(`/api/workspaces/file-assets/${assetUrlWithWorkspaceId}/restore/`, {
-      "Content-Type": "application/json",
-    })
-      .then((response) => response?.status)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
 }
-
-const fileService = new FileService();
-
-export default fileService;

space/core/services/issue.service.ts

@@ -2,7 +2,7 @@ import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import { APIService } from "@/services/api.service";
 // types
-import { TIssuesResponse, IIssue } from "@/types/issue";
+import { Comment, TIssuesResponse, IIssue } from "@/types/issue";
 
 class IssueService extends APIService {
   constructor() {
@@ -83,7 +83,7 @@ class IssueService extends APIService {
       });
   }
 
-  async createIssueComment(anchor: string, issueID: string, data: any): Promise<any> {
+  async createIssueComment(anchor: string, issueID: string, data: any): Promise<Comment> {
     return this.post(`/api/public/anchor/${anchor}/issues/${issueID}/comments/`, data)
       .then((response) => response?.data)
       .catch((error) => {

space/core/store/issue-detail.store.ts

@@ -3,12 +3,16 @@ import set from "lodash/set";
 import { makeObservable, observable, action, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 import { v4 as uuidv4 } from "uuid";
+// plane types
+import { TFileSignedURLResponse } from "@plane/types";
+import { EFileAssetType } from "@plane/types/src/enums";
 // services
+import { FileService } from "@/services/file.service";
 import IssueService from "@/services/issue.service";
 // store
 import { CoreRootStore } from "@/store/root.store";
 // types
-import { IIssue, IPeekMode, IVote } from "@/types/issue";
+import { Comment, IIssue, IPeekMode, IVote } from "@/types/issue";
 
 export interface IIssueDetailStore {
   loader: boolean;
@@ -28,9 +32,10 @@ export interface IIssueDetailStore {
   // issue actions
   fetchIssueDetails: (anchor: string, issueID: string) => void;
   // comment actions
-  addIssueComment: (anchor: string, issueID: string, data: any) => Promise<void>;
+  addIssueComment: (anchor: string, issueID: string, data: any) => Promise<Comment>;
   updateIssueComment: (anchor: string, issueID: string, commentID: string, data: any) => Promise<any>;
   deleteIssueComment: (anchor: string, issueID: string, commentID: string) => void;
+  uploadCommentAsset: (file: File, anchor: string, commentID?: string) => Promise<TFileSignedURLResponse>;
   addCommentReaction: (anchor: string, issueID: string, commentID: string, reactionHex: string) => void;
   removeCommentReaction: (anchor: string, issueID: string, commentID: string, reactionHex: string) => void;
   // reaction actions
@@ -54,6 +59,7 @@ export class IssueDetailStore implements IIssueDetailStore {
   rootStore: CoreRootStore;
   // services
   issueService: IssueService;
+  fileService: FileService;
 
   constructor(_rootStore: CoreRootStore) {
     makeObservable(this, {
@@ -72,6 +78,7 @@ export class IssueDetailStore implements IIssueDetailStore {
       addIssueComment: action,
       updateIssueComment: action,
       deleteIssueComment: action,
+      uploadCommentAsset: action,
       addCommentReaction: action,
       removeCommentReaction: action,
       // reaction actions
@@ -83,6 +90,7 @@ export class IssueDetailStore implements IIssueDetailStore {
     });
     this.rootStore = _rootStore;
     this.issueService = new IssueService();
+    this.fileService = new FileService();
   }
 
   setPeekId = (issueID: string | null) => {
@@ -220,6 +228,23 @@ export class IssueDetailStore implements IIssueDetailStore {
     }
   };
 
+  uploadCommentAsset = async (file: File, anchor: string, commentID?: string) => {
+    try {
+      const res = await this.fileService.uploadAsset(
+        anchor,
+        {
+          entity_identifier: commentID ?? "",
+          entity_type: EFileAssetType.COMMENT_DESCRIPTION,
+        },
+        file
+      );
+      return res;
+    } catch (error) {
+      console.log("Error in uploading comment asset:", error);
+      throw new Error("Asset upload failed. Please try again later.");
+    }
+  };
+
   addCommentReaction = async (anchor: string, issueID: string, commentID: string, reactionHex: string) => {
     const newReaction = {
       id: uuidv4(),

space/core/store/user.store.ts

@@ -79,7 +79,7 @@ export class UserStore implements IUserStore {
       first_name: this.data?.first_name,
       last_name: this.data?.last_name,
       display_name: this.data?.display_name,
-      avatar: this.data?.avatar || undefined,
+      avatar_url: this.data?.avatar_url || undefined,
       is_bot: false,
     };
   }

space/core/types/issue.d.ts

@@ -139,7 +139,7 @@ export interface IIssueReaction {
 }
 
 export interface ActorDetail {
-  avatar?: string;
+  avatar_url?: string;
   display_name?: string;
   first_name?: string;
   is_bot?: boolean;