From 1cc94a4e3be06d0129719b954b1b6a0092671aae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A6Ltorio?= <aeltorio@universidadatlantico.org>
Date: Wed, 6 Nov 2024 16:39:24 +0100
Subject: [PATCH] debug resizeobserver error

---
 src/aipane/components/Header.tsx        | 15 +++++++++++++++
 src/aipane/components/HeroApiKey.tsx    | 16 ++++++++++++++++
 src/aipane/components/HeroModels.tsx    | 14 ++++++++++++++
 src/aipane/components/HeroProviders.tsx | 14 ++++++++++++++
 src/aipane/components/TextInsertion.tsx | 14 ++++++++++++++
 5 files changed, 73 insertions(+)

diff --git a/src/aipane/components/Header.tsx b/src/aipane/components/Header.tsx
index 1121523..5e40c39 100644
--- a/src/aipane/components/Header.tsx
+++ b/src/aipane/components/Header.tsx
@@ -5,6 +5,7 @@
 */
 import * as React from "react";
 import { Image, tokens, makeStyles } from "@fluentui/react-components";
+import { useEffect } from "react";
 
 export interface HeaderProps {
   title: string;
@@ -32,6 +33,20 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   const { title, logo, message } = props;
   const styles = useStyles();
 
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in Header");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   return (
     <section className={styles.welcome__header}>
       <Image width="90" height="90" src={logo} alt={title} />
diff --git a/src/aipane/components/HeroApiKey.tsx b/src/aipane/components/HeroApiKey.tsx
index 23cf55a..0f2282d 100644
--- a/src/aipane/components/HeroApiKey.tsx
+++ b/src/aipane/components/HeroApiKey.tsx
@@ -6,6 +6,7 @@
 import * as React from "react";
 import { makeStyles, useId, Button, Input, Label } from "@fluentui/react-components";
 import { AIProvider } from "../AIPrompt";
+import { useEffect } from "react";
 
 interface HeroApiKeyProps {
   provider: AIProvider;
@@ -32,6 +33,21 @@ const useStyles = makeStyles({
 const HeroApiKey: React.FC<HeroApiKeyProps> = ({ apiKey, onApiKeyChange, onApiKeySubmit, provider }) => {
   const styles = useStyles();
   const inputId = useId("input");
+
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in HeroApiKey");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   return (
     <div className={styles.root}>
       <Label htmlFor={inputId} size="large">
diff --git a/src/aipane/components/HeroModels.tsx b/src/aipane/components/HeroModels.tsx
index f707f15..917484d 100644
--- a/src/aipane/components/HeroModels.tsx
+++ b/src/aipane/components/HeroModels.tsx
@@ -48,6 +48,20 @@ const HeroModels: React.FC<HeroModelsProps> = ({ onChange, provider }) => {
     onChange(selectedValue);
   }, [selectedValue, onChange]);
 
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in HeroModels");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   return (
     <div className={styles.root}>
       <Label htmlFor={selectId} size="large">
diff --git a/src/aipane/components/HeroProviders.tsx b/src/aipane/components/HeroProviders.tsx
index a1f03a2..5e1c842 100644
--- a/src/aipane/components/HeroProviders.tsx
+++ b/src/aipane/components/HeroProviders.tsx
@@ -38,6 +38,20 @@ const HeroProviders: React.FC<HeroProvidersProps> = ({ onChange }) => {
     setProviders(config.providers);
   }, []);
 
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in HeroProviders");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   const handleChange = React.useCallback(
     (event: React.FormEvent<HTMLButtonElement>, option?: any) => {
       event.preventDefault();
diff --git a/src/aipane/components/TextInsertion.tsx b/src/aipane/components/TextInsertion.tsx
index 7e5f36a..9afd5a0 100644
--- a/src/aipane/components/TextInsertion.tsx
+++ b/src/aipane/components/TextInsertion.tsx
@@ -144,6 +144,20 @@ const TextInsertion: React.FC<TextInsertionProps> = (props: TextInsertionProps):
     });
   }, []);
 
+  useEffect(() => {
+    const resizeObserverErr = (e: ErrorEvent) => {
+      if (e.message === "ResizeObserver loop completed with undelivered notifications.") {
+        console.error("ResizeObserver loop error in TextInsertion");
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+      }
+    };
+    window.addEventListener("error", resizeObserverErr);
+    return () => {
+      window.removeEventListener("error", resizeObserverErr);
+    };
+  }, []);
+
   return (
     <div className={styles.textPromptAndInsertion}>
       <Field className={styles.textAreaField} size="large" label="Enter your message.">