Share webp images from web, desktop, obsidian app to chat with

src/interface/desktop/main.js

@@ -19,7 +19,7 @@ const textFileTypes = [
     'org', 'md', 'markdown', 'txt', 'html', 'xml',
     // Other valid text file extensions from https://google.github.io/magika/model/config.json
     'appleplist', 'asm', 'asp', 'batch', 'c', 'cs', 'css', 'csv', 'eml', 'go', 'html', 'ini', 'internetshortcut', 'java', 'javascript', 'json', 'latex', 'lisp', 'makefile', 'markdown', 'mht', 'mum', 'pem', 'perl', 'php', 'powershell', 'python', 'rdf', 'rst', 'rtf', 'ruby', 'rust', 'scala', 'shell', 'smali', 'sql', 'svg', 'symlinktext', 'txt', 'vba', 'winregistry', 'xml', 'yaml']
-const binaryFileTypes = ['pdf', 'jpg', 'jpeg', 'png']
+const binaryFileTypes = ['pdf', 'jpg', 'jpeg', 'png', 'webp']
 const validFileTypes = textFileTypes.concat(binaryFileTypes);
 
 const schema = {
@@ -104,6 +104,8 @@ function filenameToMimeType (filename) {
         case 'jpg':
         case 'jpeg':
             return 'image/jpeg';
+        case 'webp':
+            return 'image/webp';
         case 'md':
         case 'markdown':
             return 'text/markdown';

src/interface/obsidian/src/utils.ts

@@ -37,6 +37,8 @@ function filenameToMimeType (filename: TFile): string {
         case 'jpg':
         case 'jpeg':
             return 'image/jpeg';
+        case 'webp':
+            return 'image/webp';
         case 'md':
         case 'markdown':
             return 'text/markdown';
@@ -50,7 +52,7 @@ function filenameToMimeType (filename: TFile): string {
 
 export const fileTypeToExtension = {
     'pdf': ['pdf'],
-    'image': ['png', 'jpg', 'jpeg'],
+    'image': ['png', 'jpg', 'jpeg', 'webp'],
     'markdown': ['md', 'markdown'],
 };
 export const supportedImageFilesTypes = fileTypeToExtension.image;

src/interface/web/app/common/iconUtils.tsx

@@ -241,6 +241,7 @@ function getIconFromFilename(
         case "jpg":
         case "jpeg":
         case "png":
+        case "webp":
             return <Image className={className} weight="fill" />;
         default:
             return <File className={className} weight="fill" />;

src/interface/web/app/components/chatInputArea/chatInputArea.tsx

@@ -168,12 +168,12 @@ export default function ChatInputArea(props: ChatInputProps) {
 
     function uploadFiles(files: FileList) {
         if (!props.isLoggedIn) {
-            setLoginRedirectMessage("Whoa! You need to login to upload files");
+            setLoginRedirectMessage("Please login to chat with your files");
             setShowLoginPrompt(true);
             return;
         }
         // check for image file
-        const image_endings = ["jpg", "jpeg", "png"];
+        const image_endings = ["jpg", "jpeg", "png", "webp"];
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
             const file_extension = file.name.split(".").pop();