[FIX] Pasting Images in Chat with Clipboard or CTRL+V

gui/src/components/StatusBar.tsx

@@ -23,7 +23,7 @@ const StatusBar = () => {
   });
 
   return (
-    <div className="items-center flex justify-between">
+    <div className="items-center flex justify-between pb-2">
       <div className="flex items-center gap-2">
         {/* Indexing Progress Bar */}
         <IndexingProgressBar indexingState={indexingState} />
@@ -50,4 +50,4 @@ const StatusBar = () => {
   );
 };
 
-export default StatusBar;
+export default StatusBar;

gui/src/components/gui/StepContainer.tsx

@@ -192,7 +192,7 @@ function StepContainer({
 
 					{!active && (
           <div
-            className="px-2 flex gap-1 justify-between -mt-[6px]"
+            className="px-2 flex gap-1 justify-between mt-2"
             style={{
               color: lightGray,
               fontSize: getFontSize() - 3,

gui/src/components/mainInput/TipTapEditor.tsx

@@ -65,7 +65,6 @@
 import { isAiderMode, isPerplexityMode } from "../../util/bareChatMode";
 import { TipTapContextMenu } from './TipTapContextMenu';
 
-
 const InputBoxDiv = styled.div`
 	position: relative;
   resize: none;
@@ -125,7 +124,6 @@
 	pointer-events: none;
 `;
 
-
 const getPlaceholder = (historyLength: number, location: any) => {
   if (location?.pathname === "/aiderMode" || location?.pathname === "/inventory/aiderMode") {
     return historyLength === 0
@@ -163,6 +161,59 @@
   onChange?: (newState: JSONContent) => void;
 }
 
+export const handleImageFile = async (
+  file: File,
+  onError?: (message: string) => void
+): Promise<[HTMLImageElement, string] | undefined> => {
+  const filesize = file.size / 1024 / 1024; // filesize in MB
+
+  if (
+    [
+      "image/jpeg",
+      "image/jpg",
+      "image/png",
+      "image/gif",
+      "image/svg",
+      "image/webp",
+    ].includes(file.type) &&
+    filesize < 10
+  ) {
+    // check dimensions
+    const img = new window.Image();
+    img.src = URL.createObjectURL(file);
+    return await new Promise((resolve) => {
+      const safeRevokeURL = () => {
+        try {
+          URL.revokeObjectURL(img.src);
+        } catch (error) {
+          console.error('Error revoking URL:', error);
+        }
+      };
+
+      img.onload = function () {
+        const dataUrl = getDataUrlForFile(file, img);
+        const image = new window.Image();
+
+        image.src = dataUrl;
+        image.onload = function () {
+          resolve([image, dataUrl]);
+          safeRevokeURL();
+        };
+        image.onerror = function() {
+          safeRevokeURL();
+          resolve(undefined);
+        };
+      };
+      img.onerror = function() {
+        safeRevokeURL();
+        resolve(undefined);
+      };
+    });
+  } else if (onError) {
+    onError("Images need to be in jpg or png format and less than 10MB in size.");
+  }
+};
+
 export const handleCopy = (editor: Editor) => {
   const selection = editor.state.selection;
   const text = editor.state.doc.textBetween(selection.from, selection.to, '\n');
@@ -177,7 +228,32 @@
 };
 
 export const handlePaste = async (editor: Editor) => {
+  try {
+    const items = await navigator.clipboard.read();
+
+    for (const item of items) {
+      // Handle images
+      if (item.types.includes('image/png') || item.types.includes('image/jpeg')) {
+        try {
+          const imageBlob = await item.getType(item.types.find(type => type.startsWith('image/')) || 'image/png');
+          const file = new File([imageBlob], 'pasted-image.png', { type: 'image/png' });
+          const result = await handleImageFile(file);
+
+          if (result) {
+            const [, dataUrl] = result;
+
+            editor.commands.setImage({ src: dataUrl });
+            return true;
+          }
+        } catch (err) {
+          console.error('Failed to paste image:', err);
+        }
+      }
+    }
+
+    // Fall back to text handling if no image
   const clipboardText = await navigator.clipboard.readText();
+
   if (clipboardText) {
     const lines = clipboardText.split(/\r?\n/);
     const { tr } = editor.state;
@@ -198,6 +274,10 @@
     editor.view.dispatch(tr);
     return true;
   }
+  } catch (error) {
+    console.error('Error handling paste:', error);
+  }
+
   return false;
 };
 
@@ -275,6 +355,7 @@
     (store: RootState) => store.state.contextItems,
   );
   const defaultModel = useSelector(defaultModelSelector);
+  const defaultModelRef = useUpdatingRef(defaultModel);
   const getSubmenuContextItemsRef = useUpdatingRef(getSubmenuContextItems);
   const availableContextProvidersRef = useUpdatingRef(availableContextProviders)
 
@@ -296,47 +377,6 @@
 
   const activeRef = useUpdatingRef(active);
 
-  async function handleImageFile(
-    file: File,
-  ): Promise<[HTMLImageElement, string] | undefined> {
-    const filesize = file.size / 1024 / 1024; // filesize in MB
-    // check image type and size
-    if (
-      [
-        "image/jpeg",
-        "image/jpg",
-        "image/png",
-        "image/gif",
-        "image/svg",
-        "image/webp",
-      ].includes(file.type) &&
-      filesize < 10
-    ) {
-      // check dimensions
-      const _URL = window.URL || window.webkitURL;
-      const img = new window.Image();
-      img.src = _URL.createObjectURL(file);
-
-      return await new Promise((resolve) => {
-        img.onload = function () {
-          const dataUrl = getDataUrlForFile(file, img);
-
-          const image = new window.Image();
-          image.src = dataUrl;
-          image.onload = function () {
-            resolve([image, dataUrl]);
-          };
-        };
-      });
-    } else {
-      ideMessenger.post("errorPopup", {
-        message:
-          "Images need to be in jpg or png format and less than 10MB in size.",
-      });
-    }
-    return undefined;
-  }
-
   const mainEditorContent = useSelector(
     (store: RootState) => store.state.mainEditorContent,
   );
@@ -391,16 +431,17 @@
             props: {
               handleDOMEvents: {
                 paste(view, event) {
-                  console.log("Pasting image");
                   const items = event.clipboardData.items;
                   for (const item of items) {
                     const file = item.getAsFile();
+                    const model = defaultModelRef.current;
+
                     file &&
                       modelSupportsImages(
-                        defaultModel.provider,
-                        defaultModel.model,
-                        defaultModel.title,
-                        defaultModel.capabilities,
+                        model.provider,
+                        model.model,
+                        model.title,
+                        model.capabilities,
                       ) &&
                       handleImageFile(file).then((resp) => {
                         if (!resp) {

gui/src/pages/gui.tsx

@@ -221,7 +221,7 @@ function GUI() {
       clearTimeout(timeoutId);
       window.removeEventListener("scroll", handleScroll);
     };
-  }, [topGuiDivRef.current]);
+  }, [topGuiDivRef]);
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
@@ -243,7 +243,7 @@ function GUI() {
     }
 
     return () => resizeObserver.disconnect();
-  }, [isNewSession]);
+  }, [isNewSession, inputContainerRef, topGuiDivRef]);
 
   useEffect(() => {
     const listener = (e: any) => {

gui/src/pages/history.tsx

@@ -415,24 +415,24 @@ export function History({
                 <Fragment key={index}>
                   {from === 'continue' && index === 0 && date > yesterday && (
                     <SectionHeader style={{ top: `${headerHeight - 1}px` }}>
-                      Today
+                      <td>Today</td>
                     </SectionHeader>
                   )}
                   {from === 'continue' && date < yesterday &&
                     date > lastWeek &&
                     prevDate > yesterday && (
                       <SectionHeader style={{ top: `${headerHeight - 1}px` }}>
-                        This Week
+                        <td>This Week</td>
                       </SectionHeader>
                     )}
                   {from === 'continue' && date < lastWeek &&
                     date > lastMonth &&
                     prevDate > lastWeek && (
                       <SectionHeader style={{ top: `${headerHeight - 1}px` }}>
-                        This Month
+                        <td>This Month</td>
                       </SectionHeader>
                     )}
-                  <Tr key={index}>
+                  <Tr key={`row-${index}`}>
                     <TableRow
                       session={session}
                       date={date}