Merge pull request #145 from nlxai/failsafe-icon-url

nlxai · Jul 31, 2024 · 1a070cd · 1a070cd
2 parents 53e9491 + 29347fc
commit 1a070cd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/packages/journey-manager/src/ui/components/index.tsx b/packages/journey-manager/src/ui/components/index.tsx
@@ -284,6 +284,34 @@ const retrieveNudgeState = (conversationId: string): NudgeState => {
   return "hidden";
 };
 
+const PinIcon: FC<{ iconUrl?: string }> = ({ iconUrl }) => {
+  const [isIconUrlValid, setIsIconUrlValid] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    if (iconUrl == null) {
+      return;
+    }
+    const image = new Image();
+    image.onload = () => {
+      setIsIconUrlValid(true);
+    };
+    image.onerror = () => {
+      setIsIconUrlValid(false);
+    };
+    image.src = iconUrl;
+  }, [iconUrl, setIsIconUrlValid]);
+
+  if (iconUrl == null || isIconUrlValid === false) {
+    return <MultimodalIcon />;
+  }
+
+  if (isIconUrlValid == null) {
+    return null;
+  }
+
+  return <img src={iconUrl} role="presentation" />;
+};
+
 export const ControlCenter: FC<{
   config: UiConfig;
   conversationId: string;
@@ -384,15 +412,7 @@ export const ControlCenter: FC<{
           setIsOpen((prev) => !prev);
         }}
       >
-        {config.iconUrl != null ? (
-          <img
-            src={config.iconUrl}
-            role="presentation"
-            className="block w-full h-full"
-          />
-        ) : (
-          <MultimodalIcon />
-        )}
+        <PinIcon iconUrl={config.iconUrl} />
       </button>
       <div
         className={`drawer ${isOpen ? "drawer-open" : ""} `}

diff --git a/packages/journey-manager/src/ui/style.css b/packages/journey-manager/src/ui/style.css
@@ -58,6 +58,12 @@ button {
   background-color: var(--primary-hover);
 }
 
+.pin img {
+  display: block;
+  width: 32px;
+  height: 32px;
+}
+
 .pin-bubble-content {
   line-height: 1.4;
   padding: 4px 6px;