From 8ce8ed4ae704e8536247cb6982fd9015fa2d4e5d Mon Sep 17 00:00:00 2001
From: Outrun Colors <itsoutruncolors@gmail.com>
Date: Sun, 25 Sep 2022 17:47:52 -0500
Subject: [PATCH] Show images

---
 chat/package.json                      |  2 +-
 chat/src/features/chat/ChatMessage.tsx | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/chat/package.json b/chat/package.json
index efaef7d14..825ef7971 100644
--- a/chat/package.json
+++ b/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chat",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "./src/index.tsx",
   "license": "MIT",
   "dependencies": {
diff --git a/chat/src/features/chat/ChatMessage.tsx b/chat/src/features/chat/ChatMessage.tsx
index 675e0c5be..79cd2f026 100644
--- a/chat/src/features/chat/ChatMessage.tsx
+++ b/chat/src/features/chat/ChatMessage.tsx
@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import cx from "classnames";
 import key from "weak-key";
 import humanizeDuration from "humanize-duration";
@@ -146,6 +153,7 @@ export function ChatMessage({
 }
 
 export function ChatMessageList() {
+  const listRef = useRef<HTMLDivElement>(null);
   const { messages } = useChat();
   const [timestampUpdates, setTimestampUpdates] = useState(0);
   const groupedMessages = useMemo(() => groupMessages(messages), [messages]);
@@ -171,8 +179,19 @@ export function ChatMessageList() {
     };
   }, []);
 
+  useLayoutEffect(() => {
+    const images = Array.from(
+      listRef.current.getElementsByTagName("img")
+    ).filter((image) => image.dataset.src);
+
+    for (const image of images) {
+      image.src = image.dataset.src;
+      image.dataset.src = undefined;
+    }
+  }, [messages]);
+
   return (
-    <div className="ChatMessageList">
+    <div className="ChatMessageList" ref={listRef}>
       {groupedMessages.map((group) => (
         <div key={key(group)} className="ChatMessageList-group">
           {group.map((message, index) => (