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();

src/khoj/processor/content/images/image_to_entries.py

@@ -64,6 +64,8 @@ def extract_image_entries(image_files) -> Tuple[Dict, List[Entry]]:  # important
                     tmp_file = f"tmp_image_file_{timestamp_now}.png"
                 elif image_file.endswith(".jpg") or image_file.endswith(".jpeg"):
                     tmp_file = f"tmp_image_file_{timestamp_now}.jpg"
+                elif image_file.endswith(".webp"):
+                    tmp_file = f"tmp_image_file_{timestamp_now}.webp"
                 with open(tmp_file, "wb") as f:
                     bytes = image_files[image_file]
                     f.write(bytes)

src/khoj/utils/helpers.py

@@ -127,6 +127,8 @@ def get_file_type(file_type: str, file_content: bytes) -> tuple[str, str]:
         return "image", encoding
     elif file_type in ["image/png"]:
         return "image", encoding
+    elif file_type in ["image/webp"]:
+        return "image", encoding
     elif content_group in ["code", "text"]:
         return "plaintext", encoding
     else: