Add ability to attach images in the editor

backend/.env.example

@@ -59,3 +59,7 @@ LANGCHAIN_API_KEY=your_langsmith_api_key_here
 # This is the name of the project created within LangSmith.
 # To create a LangSmith project, visit LangSmith: https://www.langchain.com/langsmith
 LANGCHAIN_PROJECT=your_langsmith_project_name_here
+
+# AWS_S3_BUCKET_NAME: S3 Bucket name 
+# This is the name of the S3 Bucket
+AWS_S3_BUCKET_NAME="your_s3_bucket_name"

backend/docker/docker-compose.yml

@@ -15,6 +15,7 @@ services:
             YORKIE_API_ADDR: "YORKIE_API_ADDR"
             YORKIE_PROJECT_NAME: "YORKIE_PROJECT_NAME"
             YORKIE_PROJECT_SECRET_KEY: "YORKIE_PROJECT_SECRET_KEY"
+            AWS_S3_BUCKET_NAME: "YOUR_S3_BUCKET_NAME"
         ports:
             - "3000:3000"
         restart: unless-stopped

backend/package.json

@@ -21,6 +21,8 @@
 		"test:e2e": "jest --config ./test/jest-e2e.json"
 	},
 	"dependencies": {
+		"@aws-sdk/client-s3": "^3.509.0",
+		"@aws-sdk/s3-request-presigner": "^3.509.0",
 		"@langchain/community": "^0.0.21",
 		"@langchain/core": "^0.1.18",
 		"@nestjs/common": "^10.0.0",
@@ -33,8 +35,8 @@
 		"@prisma/client": "^5.8.1",
 		"class-transformer": "^0.5.1",
 		"class-validator": "^0.14.1",
-		"markdown-to-txt": "^2.0.1",
 		"langchain": "^0.1.9",
+		"markdown-to-txt": "^2.0.1",
 		"moment": "^2.30.1",
 		"passport-github": "^1.1.0",
 		"passport-jwt": "^4.0.1",

backend/src/app.module.ts

@@ -12,6 +12,7 @@ import { DocumentsModule } from "./documents/documents.module";
 import { CheckModule } from "./check/check.module";
 import { IntelligenceModule } from "./intelligence/intelligence.module";
 import { LangchainModule } from "./langchain/langchain.module";
+import { FilesModule } from "./files/files.module";
 
 @Module({
 	imports: [
@@ -25,6 +26,7 @@ import { LangchainModule } from "./langchain/langchain.module";
 		CheckModule,
 		IntelligenceModule,
 		LangchainModule,
+		FilesModule,
 	],
 	controllers: [],
 	providers: [

backend/src/files/dto/create-upload-url.dto.ts

@@ -0,0 +1,12 @@
+import { ApiProperty } from "@nestjs/swagger";
+
+export class CreateUploadPresignedUrlDto {
+	@ApiProperty({ type: String, description: "ID of workspace to create file" })
+	workspaceId: string;
+
+	@ApiProperty({ type: Number, description: "Length of content to upload" })
+	contentLength: number;
+
+	@ApiProperty({ type: String, description: "Type of file" })
+	contentType: string;
+}

backend/src/files/files.controller.spec.ts

@@ -0,0 +1,18 @@
+import { Test, TestingModule } from "@nestjs/testing";
+import { FilesController } from "./files.controller";
+
+describe("FilesController", () => {
+	let controller: FilesController;
+
+	beforeEach(async () => {
+		const module: TestingModule = await Test.createTestingModule({
+			controllers: [FilesController],
+		}).compile();
+
+		controller = module.get<FilesController>(FilesController);
+	});
+
+	it("should be defined", () => {
+		expect(controller).toBeDefined();
+	});
+});

backend/src/files/files.controller.ts

@@ -0,0 +1,45 @@
+import { Body, Controller, Get, HttpRedirectResponse, Param, Post, Redirect } from "@nestjs/common";
+import { FilesService } from "./files.service";
+import { ApiResponse, ApiOperation, ApiBody } from "@nestjs/swagger";
+import { CreateUploadPresignedUrlResponse } from "./types/create-upload-url-response.type";
+import { CreateUploadPresignedUrlDto } from "./dto/create-upload-url.dto";
+import { Public } from "src/utils/decorators/auth.decorator";
+
+@Controller("files")
+export class FilesController {
+	constructor(private filesService: FilesService) {}
+
+	@Public()
+	@Post("")
+	@ApiOperation({
+		summary: "Create Presigned URL for Upload",
+		description: "Create rresigned URL for upload",
+	})
+	@ApiBody({ type: CreateUploadPresignedUrlDto })
+	@ApiResponse({ type: CreateUploadPresignedUrlResponse })
+	async createUploadPresignedUrl(
+		@Body() createUploadPresignedUrlDto: CreateUploadPresignedUrlDto
+	): Promise<CreateUploadPresignedUrlResponse> {
+		return this.filesService.createUploadPresignedUrl(
+			createUploadPresignedUrlDto.workspaceId,
+			createUploadPresignedUrlDto.contentLength,
+			createUploadPresignedUrlDto.contentType
+		);
+	}
+
+	@Public()
+	@Get(":file_name")
+	@Redirect()
+	@ApiOperation({
+		summary: "Create Presigned URL for Download",
+		description: "Create rresigned URL for download",
+	})
+	async createDownloadPresignedUrl(
+		@Param("file_name") fileKey: string
+	): Promise<HttpRedirectResponse> {
+		return {
+			url: await this.filesService.createDownloadPresignedUrl(fileKey),
+			statusCode: 302,
+		};
+	}
+}

backend/src/files/files.module.ts

@@ -0,0 +1,10 @@
+import { Module } from "@nestjs/common";
+import { FilesController } from "./files.controller";
+import { FilesService } from "./files.service";
+import { PrismaService } from "src/db/prisma.service";
+
+@Module({
+	controllers: [FilesController],
+	providers: [FilesService, PrismaService],
+})
+export class FilesModule {}

backend/src/files/files.service.spec.ts

@@ -0,0 +1,18 @@
+import { Test, TestingModule } from "@nestjs/testing";
+import { FilesService } from "./files.service";
+
+describe("FilesService", () => {
+	let service: FilesService;
+
+	beforeEach(async () => {
+		const module: TestingModule = await Test.createTestingModule({
+			providers: [FilesService],
+		}).compile();
+
+		service = module.get<FilesService>(FilesService);
+	});
+
+	it("should be defined", () => {
+		expect(service).toBeDefined();
+	});
+});

backend/src/files/files.service.ts

@@ -0,0 +1,71 @@
+import {
+	Injectable,
+	NotFoundException,
+	UnauthorizedException,
+	UnprocessableEntityException,
+} from "@nestjs/common";
+import { S3Client, GetObjectCommand, PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { ConfigService } from "@nestjs/config";
+import { generateRandomKey } from "src/utils/functions/random-string";
+import { PrismaService } from "src/db/prisma.service";
+import { Workspace } from "@prisma/client";
+import { CreateUploadPresignedUrlResponse } from "./types/create-upload-url-response.type";
+
+@Injectable()
+export class FilesService {
+	private s3Client: S3Client;
+
+	constructor(
+		private configService: ConfigService,
+		private prismaService: PrismaService
+	) {
+		this.s3Client = new S3Client();
+	}
+
+	async createUploadPresignedUrl(
+		workspaceId: string,
+		contentLength: number,
+		contentType: string
+	): Promise<CreateUploadPresignedUrlResponse> {
+		let workspace: Workspace;
+		try {
+			workspace = await this.prismaService.workspace.findFirstOrThrow({
+				where: {
+					id: workspaceId,
+				},
+			});
+		} catch (e) {
+			throw new UnauthorizedException();
+		}
+
+		if (contentLength > 10_000_000) {
+			throw new UnprocessableEntityException();
+		}
+
+		const fileKey = `${workspace.slug}-${generateRandomKey()}.${contentType.split("/")[1]}`;
+		const command = new PutObjectCommand({
+			Bucket: this.configService.get("AWS_S3_BUCKET_NAME"),
+			Key: fileKey,
+			StorageClass: "INTELLIGENT_TIERING",
+			ContentType: contentType,
+			ContentLength: contentLength,
+		});
+		return {
+			fileKey,
+			url: await getSignedUrl(this.s3Client, command, { expiresIn: 300 }),
+		};
+	}
+
+	async createDownloadPresignedUrl(fileKey: string) {
+		try {
+			const command = new GetObjectCommand({
+				Bucket: this.configService.get("AWS_S3_BUCKET_NAME"),
+				Key: fileKey,
+			});
+			return getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
+		} catch (e) {
+			throw new NotFoundException();
+		}
+	}
+}

backend/src/files/types/create-upload-url-response.type.ts

@@ -0,0 +1,9 @@
+import { ApiProperty } from "@nestjs/swagger";
+
+export class CreateUploadPresignedUrlResponse {
+	@ApiProperty({ type: String, description: "Presigned URL for upload" })
+	url: string;
+
+	@ApiProperty({ type: String, description: "Key of file" })
+	fileKey: string;
+}

frontend/package.json

@@ -30,12 +30,14 @@
 		"@uiw/codemirror-themes": "^4.21.21",
 		"@uiw/react-markdown-preview": "^5.0.7",
 		"axios": "^1.6.5",
+		"browser-image-resizer": "^2.4.1",
 		"clipboardy": "^4.0.0",
 		"codemirror": "^6.0.1",
 		"codemirror-markdown-commands": "^0.0.3",
 		"codemirror-markdown-slug": "^0.0.3",
 		"codemirror-toolbar": "^0.0.3",
 		"color": "^4.2.3",
+		"form-data": "^4.0.0",
 		"lib0": "^0.2.88",
 		"lodash": "^4.17.21",
 		"match-sorter": "^6.3.3",

frontend/src/components/editor/Editor.tsx

@@ -11,12 +11,18 @@ import { useCurrentTheme } from "../../hooks/useCurrentTheme";
 import { keymap } from "@codemirror/view";
 import { indentWithTab } from "@codemirror/commands";
 import { intelligencePivot } from "../../utils/intelligence/intelligencePivot";
+import { imageUploader } from "../../utils/imageUploader";
+import { useCreateUploadUrlMutation, useUploadFileMutation } from "../../hooks/api/file";
+import { selectWorkspace } from "../../store/workspaceSlice";
 
 function Editor() {
 	const dispatch = useDispatch();
 	const themeMode = useCurrentTheme();
 	const [element, setElement] = useState<HTMLElement>();
 	const editorStore = useSelector(selectEditor);
+	const workspaceStore = useSelector(selectWorkspace);
+	const { mutateAsync: createUploadUrl } = useCreateUploadUrlMutation();
+	const { mutateAsync: uploadFile } = useUploadFileMutation();
 	const ref = useCallback((node: HTMLElement | null) => {
 		if (!node) return;
 		setElement(node);
@@ -29,6 +35,20 @@ function Editor() {
 			return;
 		}
 
+		const handleUploadImage = async (file: File) => {
+			if (!workspaceStore.data) return "";
+
+			const uploadUrlData = await createUploadUrl({
+				workspaceId: workspaceStore.data.id,
+				contentLength: new Blob([file]).size,
+				contentType: file.type,
+			});
+
+			await uploadFile({ ...uploadUrlData, file });
+
+			return `${import.meta.env.VITE_API_ADDR}/files/${uploadUrlData.fileKey}`;
+		};
+
 		const state = EditorState.create({
 			doc: editorStore.doc.getRoot().content?.toString() ?? "",
 			extensions: [
@@ -45,6 +65,7 @@ function Editor() {
 				EditorView.lineWrapping,
 				keymap.of([indentWithTab]),
 				intelligencePivot,
+				imageUploader(handleUploadImage, editorStore.doc),
 			],
 		});
 
@@ -57,7 +78,16 @@ function Editor() {
 		return () => {
 			view?.destroy();
 		};
-	}, [dispatch, editorStore.client, editorStore.doc, element, themeMode]);
+	}, [
+		dispatch,
+		editorStore.client,
+		editorStore.doc,
+		element,
+		themeMode,
+		workspaceStore.data,
+		createUploadUrl,
+		uploadFile,
+	]);
 
 	return (
 		<div

frontend/src/hooks/api/file.ts

@@ -0,0 +1,26 @@
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { UploadFileRequest, CreateUploadUrlRequest, CreateUploadUrlResponse } from "./types/file";
+
+export const useCreateUploadUrlMutation = () => {
+	return useMutation({
+		mutationFn: async (data: CreateUploadUrlRequest) => {
+			const res = await axios.post<CreateUploadUrlResponse>(`/files`, data);
+
+			return res.data;
+		},
+	});
+};
+
+export const useUploadFileMutation = () => {
+	return useMutation({
+		mutationFn: async (data: UploadFileRequest) => {
+			return axios.put<void>(data.url, new Blob([data.file]), {
+				headers: {
+					Authorization: undefined,
+					"Content-Type": data.file.type,
+				},
+			});
+		},
+	});
+};

frontend/src/hooks/api/types/file.d.ts

@@ -0,0 +1,15 @@
+export class CreateUploadUrlRequest {
+	workspaceId: string;
+	contentLength: number;
+	contentType: string;
+}
+
+export class CreateUploadUrlResponse {
+	url: string;
+	fileKey: string;
+}
+
+export class UploadFileRequest {
+	url: string;
+	file: File;
+}