diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx index 1c0be9e..48b55ee 100644 --- a/src/components/thread/index.tsx +++ b/src/components/thread/index.tsx @@ -40,7 +40,6 @@ import { import { fileToImageBlock, fileToPDFBlock, - toOpenAIPDFBlock, } from "@/lib/multimodal-utils"; import type { Base64ContentBlock } from "@langchain/core/messages"; @@ -183,14 +182,14 @@ export function Thread() { // TODO: check configurable object for modelname camelcase or snakecase else do openai format const isOpenAI = true; - const pdfBlocks = pdfUrlList.map(toOpenAIPDFBlock); const newHumanMessage: Message = { id: uuidv4(), type: "human", content: [ { type: "text", text: input }, - ...pdfBlocks, + ...pdfUrlList, + ...imageUrlList, ] as Message["content"], }; @@ -217,23 +216,30 @@ export function Thread() { setPdfUrlList([]); }; - const handleImageUpload = async (e: ChangeEvent) => { + const handleFileUpload = async (e: ChangeEvent) => { const files = e.target.files; - if (files) { - const imageBlocks = await Promise.all( - Array.from(files).map(fileToImageBlock), + if (!files) return; + const fileArray = Array.from(files); + const imageFiles = fileArray.filter((file) => file.type.startsWith("image")); + const pdfFiles = fileArray.filter((file) => file.type === "application/pdf"); + const invalidFiles = fileArray.filter( + (file) => !file.type.startsWith("image/") && file.type !== "application/pdf", + ); + + if (invalidFiles.length > 0) { + toast.error( + "You have uploaded invalid file type. Please upload an image or a PDF.", ); + } + + if (imageFiles.length) { + console.log("imageFiles", imageFiles); + const imageBlocks = await Promise.all(imageFiles.map(fileToImageBlock)); setImageUrlList((prev) => [...prev, ...imageBlocks]); } - e.target.value = ""; - }; - const handlePDFUpload = async (e: ChangeEvent) => { - const files = e.target.files; - if (files) { - const pdfBlocks = await Promise.all( - Array.from(files).map(fileToPDFBlock), - ); + if (pdfFiles.length) { + const pdfBlocks = await Promise.all(pdfFiles.map(fileToPDFBlock)); setPdfUrlList((prev) => [...prev, ...pdfBlocks]); } e.target.value = ""; @@ -595,15 +601,15 @@ export function Thread() { > - Upload PDF + Upload PDF or Image
diff --git a/src/lib/multimodal-utils.ts b/src/lib/multimodal-utils.ts index 8cd2c9b..80803b6 100644 --- a/src/lib/multimodal-utils.ts +++ b/src/lib/multimodal-utils.ts @@ -9,7 +9,7 @@ export async function fileToImageBlock( return { type: "image", source_type: "base64", - mime_type: file.type, + mime_type: "image/jpeg", data, metadata: { name: file.name }, }; @@ -27,19 +27,6 @@ export async function fileToPDFBlock(file: File): Promise { }; } -// in lib/multimodal-utils.ts -export function toOpenAIPDFBlock( - block: Base64ContentBlock, -): Base64ContentBlock { - return { - type: "file", - source_type: "base64", - data: block.data, - mime_type: block.mime_type ?? "application/pdf", - metadata: { filename: block.metadata?.filename ?? "file.pdf" }, - }; -} - // Helper to convert File to base64 string export async function fileToBase64(file: File): Promise { return new Promise((resolve, reject) => {