Rework chat rendering

js/app/components/mobile/chat.tsx

···
-import { View, atoms } from "@streamplace/components";
-import Chat from "components/chat/chat";
+import { atoms, Chat, View } from "@streamplace/components";
 import ChatBox from "components/chat/chat-box";
 const { borderRadius, bottom, gap, h, layout, w, zIndex } = atoms;
 
···
         w.percent[100],
         { transform: [{ translateY: slideKeyboard }] },
         {
-          backgroundColor: "rgba(0, 0, 0, 0.4)",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
           borderRadius: borderRadius["2xl"],
+          padding: 10,
         },
       ]}
     >
-      <Chat isChatVisible={true} setIsChatVisible={() => true} />
-      <View style={[layout.flex.column, gap.all[2], { padding: 10 }]}>
+      <Chat />
+      <View style={[layout.flex.column, gap.all[2]]}>
         <ChatBox
           isChatVisible={true}
           chatBoxStyle={{ borderRadius: borderRadius.xl }}

js/app/components/mobile/ui.tsx

···
           slideKeyboard={slideKeyboard}
         />
       )}
+
       <PlayerUI.CountdownOverlay
         visible={showCountdown}
         width={width}
         height={height}
-        startFrom={3}
         onDone={() => {
           setShowCountdown(false);
         }}

js/components/src/components/chat/chat-message.tsx

···
+import { $Typed } from "@atproto/api";
+import {
+  Link,
+  Mention,
+} from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
+import { memo, useCallback } from "react";
+import { Linking, View } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import { RichtextSegment, segmentize } from "../../lib/facet";
+import { flex, gap, w } from "../../lib/theme/atoms";
+import { atoms, layout } from "../ui";
+
+interface Facet {
+  index: {
+    byteStart: number;
+    byteEnd: number;
+  };
+  features: Array<{
+    $type: string;
+    uri?: string;
+    did?: string;
+  }>;
+}
+
+import { Text } from "../ui/text";
+
+const getRgbColor = (color?: { red: number; green: number; blue: number }) =>
+  color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : "$accentColor";
+
+const segmentedObject = (
+  obj: RichtextSegment,
+  index: number,
+  userCache?: Map<string, ChatMessageViewHydrated["chatProfile"]>,
+) => {
+  if (obj.features && obj.features.length > 0) {
+    let ftr = obj.features[0];
+    // afaik there shouldn't be a case where facets overlap, at least currently
+    if (ftr.$type === "app.bsky.richtext.facet#link") {
+      let linkftr = ftr as $Typed<Link>;
+      return (
+        <Text
+          key={`mention-${index}`}
+          style={[{ color: atoms.colors.ios.systemBlue, cursor: "pointer" }]}
+          onPress={() => Linking.openURL(linkftr.uri || "")}
+        >
+          {obj.text}
+        </Text>
+      );
+    } else if (ftr.$type === "app.bsky.richtext.facet#mention") {
+      let mtnftr = ftr as $Typed<Mention>;
+      const profile = userCache?.get(mtnftr.did);
+      return (
+        <Text
+          key={`mention-${index}`}
+          style={[
+            {
+              cursor: "pointer",
+              color: getRgbColor(profile?.color),
+            },
+          ]}
+          onPress={() =>
+            Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`)
+          }
+        >
+          {obj.text}
+        </Text>
+      );
+    }
+  } else {
+    return <Text key={`text-${index}`}>{obj.text}</Text>;
+  }
+};
+
+const RichTextMessage = ({
+  text,
+  facets,
+  userCache,
+}: {
+  text: string;
+  facets: ChatMessageViewHydrated["record"]["facets"];
+  userCache?: Map<string, ChatMessageViewHydrated["chatProfile"]>;
+}) => {
+  if (!facets?.length) return <Text>{text}</Text>;
+
+  let segs = segmentize(text, facets as Facet[]);
+
+  return segs.map((seg, i) => segmentedObject(seg, i, userCache));
+};
+export const RenderChatMessage = memo(
+  function RenderChatMessage({
+    item,
+    userCache,
+  }: {
+    item: ChatMessageViewHydrated;
+    userCache?: Map<string, ChatMessageViewHydrated["chatProfile"]>;
+  }) {
+    const formatTime = useCallback((dateString: string) => {
+      return new Date(dateString).toLocaleString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      });
+    }, []);
+
+    return (
+      <View style={[gap.all[2], layout.flex.row, w.percent[100]]}>
+        <Text
+          style={{
+            fontVariant: ["tabular-nums"],
+            color: atoms.colors.gray[300],
+          }}
+        >
+          {formatTime(item.record.createdAt)}
+        </Text>
+        <Text weight="bold" color="default" style={[flex.shrink[1]]}>
+          <Text
+            style={[
+              {
+                cursor: "pointer",
+                color: getRgbColor(item.chatProfile?.color),
+              },
+            ]}
+          >
+            @{item.author.handle}
+          </Text>
+          :{" "}
+          <RichTextMessage
+            text={item.record.text}
+            facets={item.record.facets || []}
+            userCache={userCache}
+          />
+        </Text>
+      </View>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.item.author.handle === nextProps.item.author.handle &&
+      prevProps.item.record.text === nextProps.item.record.text
+    );
+  },
+);

js/components/src/components/chat/chat.tsx

···
+import { Text, useChat, View } from "@streamplace/components";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  FlatList,
+  ListRenderItemInfo,
+  useWindowDimensions,
+} from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import { flex, w } from "../../lib/theme/atoms";
+import { RenderChatMessage } from "./chat-message";
+
+export function Chat() {
+  const chat = useChat();
+  const [authors, setAuthors] = useState<
+    Map<string, ChatMessageViewHydrated["chatProfile"]>
+  >(new Map());
+  const { width } = useWindowDimensions();
+  const showTime = width > 800;
+
+  const reversedChat = useMemo(() => {
+    return chat ? [...chat].reverse() : [];
+  }, [chat]);
+
+  useEffect(() => {
+    if (!chat || chat.length === 0) return;
+
+    const uniqueAuthors = chat.reduce((acc, msg) => {
+      acc.set(msg.author.did, msg.chatProfile);
+      return acc;
+    }, new Map<string, ChatMessageViewHydrated["chatProfile"]>());
+
+    setAuthors(uniqueAuthors);
+  }, [chat]);
+
+  const keyExtractor = useCallback(
+    (item: ChatMessageViewHydrated, index: number) => {
+      return `${item.author.handle}-${item.record.text}-${index}`;
+    },
+    [],
+  );
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<ChatMessageViewHydrated>) => {
+      return <RenderChatMessage item={item} />;
+    },
+    [showTime],
+  );
+
+  if (!chat) return <Text>Loading chat...</Text>;
+
+  return (
+    <View style={[flex.shrink[1]]}>
+      <FlatList
+        style={[flex.grow[1], flex.shrink[1], w.percent[100]]}
+        data={reversedChat}
+        keyExtractor={keyExtractor}
+        inverted
+        renderItem={renderItem}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        initialNumToRender={20}
+        updateCellsBatchingPeriod={50}
+      />
+    </View>
+  );
+}

js/components/src/components/mobile-player/ui/countdown.tsx

···
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import Animated, {
+  runOnJS,
   useAnimatedStyle,
+  useFrameCallback,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
···
   onDone,
 }: CountdownOverlayProps) {
   const [countdown, setCountdown] = useState(startFrom);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const startTimestamp = useSharedValue<number | null>(null);
+  const done = useSharedValue(false);
 
   // Animation values
   const scale = useSharedValue(1);
   const opacity = useSharedValue(1);
 
-  // Animate and handle countdown
+  const updateCountdown = (value: number) => {
+    setCountdown(value);
+  };
+
+  const handleDone = () => {
+    if (onDone) onDone();
+  };
+
+  // Accurate countdown using useFrameCallback
+  useFrameCallback(({ timestamp }) => {
+    if (!visible) return;
+
+    // Set start timestamp on first frame
+    if (startTimestamp.value === null) {
+      startTimestamp.value = timestamp;
+      return;
+    }
+
+    const elapsed = (timestamp - startTimestamp.value) / 1000; // Convert to seconds
+    const remaining = Math.max(0, startFrom - Math.floor(elapsed));
+
+    // Use runOnJS to call JavaScript functions from worklet
+    runOnJS(updateCountdown)(remaining);
+
+    if (remaining === 0 && !done.value) {
+      done.value = true;
+      runOnJS(handleDone)();
+    }
+  });
+
   useEffect(() => {
     if (visible) {
+      startTimestamp.value = null; // Will be set on first frame
       setCountdown(startFrom);
-      console.log("Countdown started from:", startFrom);
-
-      // Start countdown interval
-      intervalRef.current = setInterval(() => {
-        console.log("Setting countdown");
-        setCountdown((prev) => {
-          if (prev <= 1) {
-            if (intervalRef.current) clearInterval(intervalRef.current);
-            console.log("Probably done");
-            if (onDone) onDone();
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
+      done.value = false;
     } else {
       setCountdown(startFrom);
-      if (intervalRef.current) clearInterval(intervalRef.current);
     }
-    return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current);
-    };
   }, [visible, startFrom]);
 
   // Animate scale and opacity on countdown change

js/components/src/index.tsx

···
 export * as atoms from "./lib/theme/atoms";
 
 export * from "./hooks";
+
+export * from "./components/chat/chat";

js/components/src/lib/facet.ts

···
+// Taken from ATcute's richtext-segmenter
+// https://github.com/mary-ext/atcute/blob/trunk/packages/bluesky/richtext-segmenter/lib/index.ts
+// repoed b/c we need to import types from @atproto/api not @atcute/bsky
+import { Main } from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
+
+type UnwrapArray<T> = T extends (infer V)[] ? V : never;
+
+export type Facet = Main;
+export type FacetFeature = UnwrapArray<Facet["features"]>;
+
+export interface RichtextSegment {
+  text: string;
+  features: FacetFeature[] | undefined;
+}
+
+const segment = (
+  text: string,
+  features: FacetFeature[] | undefined,
+): RichtextSegment => {
+  return { text, features: text.length > 0 ? features : undefined };
+};
+
+export const segmentize = (
+  text: string,
+  facets: Facet[] | undefined,
+): RichtextSegment[] => {
+  if (facets === undefined || facets.length === 0) {
+    return [segment(text, undefined)];
+  }
+
+  const segments: RichtextSegment[] = [];
+  const utf16Length = text.length;
+  let utf16Cursor = 0;
+  let utf8Cursor = 0;
+
+  const advanceCursor = (startUtf16: number, endUtf8: number): number => {
+    let curs = startUtf16;
+
+    // Fast-path for entirely ASCII text
+    const isLikelyAsciiText = text.charCodeAt(curs) < 0x80;
+    if (isLikelyAsciiText) {
+      curs += 1;
+      utf8Cursor += 1;
+
+      // SIMD-like batch processing
+      while (utf8Cursor + 8 <= endUtf8 && curs + 8 <= utf16Length) {
+        const char1 = text.charCodeAt(curs);
+        const char2 = text.charCodeAt(curs + 1);
+        const char3 = text.charCodeAt(curs + 2);
+        const char4 = text.charCodeAt(curs + 3);
+        const char5 = text.charCodeAt(curs + 4);
+        const char6 = text.charCodeAt(curs + 5);
+        const char7 = text.charCodeAt(curs + 6);
+        const char8 = text.charCodeAt(curs + 7);
+
+        if (
+          (char1 | char2 | char3 | char4 | char5 | char6 | char7 | char8) <
+          0x80
+        ) {
+          curs += 8;
+          utf8Cursor += 8;
+          continue;
+        }
+
+        break;
+      }
+    }
+
+    // Process remaining characters individually
+    while (utf8Cursor < endUtf8 && curs < utf16Length) {
+      const code = text.charCodeAt(curs);
+
+      if (code < 0x80) {
+        curs += 1;
+        utf8Cursor += 1;
+      } else if (code < 0x800) {
+        curs += 1;
+        utf8Cursor += 2;
+      } else if (code < 0xd800 || code > 0xdbff) {
+        curs += 1;
+        utf8Cursor += 3;
+      } else {
+        curs += 2;
+        utf8Cursor += 4;
+      }
+    }
+
+    return curs;
+  };
+
+  // Process facets
+  for (let idx = 0, len = facets.length; idx < len; idx++) {
+    const facet = facets[idx];
+
+    const { byteStart, byteEnd } = facet.index;
+    const features = facet.features;
+
+    if (byteStart > byteEnd || features.length === 0) {
+      continue;
+    }
+
+    if (utf8Cursor < byteStart) {
+      const nextUtf16Cursor = advanceCursor(utf16Cursor, byteStart);
+      if (nextUtf16Cursor > utf16Cursor) {
+        segments.push(
+          segment(text.slice(utf16Cursor, nextUtf16Cursor), undefined),
+        );
+      }
+
+      utf16Cursor = nextUtf16Cursor;
+    }
+
+    {
+      const nextUtf16Cursor = advanceCursor(utf16Cursor, byteEnd);
+      if (nextUtf16Cursor > utf16Cursor) {
+        segments.push(
+          segment(text.slice(utf16Cursor, nextUtf16Cursor), features),
+        );
+      }
+
+      utf16Cursor = nextUtf16Cursor;
+    }
+  }
+
+  // Handle remaining text
+  if (utf16Cursor < utf16Length) {
+    segments.push(segment(text.slice(utf16Cursor), undefined));
+  }
+
+  return segments;
+};

js/components/src/livestream-store/chat.tsx

···
   isLink,
   isMention,
 } from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
+import { useCallback } from "react";
 import {
   ChatMessageViewHydrated,
   PlaceStreamChatMessage,
···
 
 export const useSetReplyToMessage = () => {
   const store = getStoreFromContext();
-  return (message: ChatMessageViewHydrated | null) => {
-    store.setState({ replyToMessage: message });
-  };
+  return useCallback(
+    (message: ChatMessageViewHydrated | null) => {
+      store.setState({ replyToMessage: message });
+    },
+    [store],
+  );
 };
 
 export type NewChatMessage = {
···
   const userHandle = useHandle();
   const chatProfile = useChatProfile();
 
-  return async (msg: NewChatMessage) => {
-    if (!pdsAgent || !userDID) {
-      throw new Error("No PDS agent or user DID found");
-    }
+  return useCallback(
+    async (msg: NewChatMessage) => {
+      if (!pdsAgent || !userDID) {
+        throw new Error("No PDS agent or user DID found");
+      }
 
-    let state = store.getState();
+      let state = store.getState();
 
-    const streamerProfile = state.profile;
+      const streamerProfile = state.profile;
 
-    if (!streamerProfile) {
-      throw new Error("Profile not found");
-    }
+      if (!streamerProfile) {
+        throw new Error("Profile not found");
+      }
 
-    const rt = new RichText({ text: msg.text });
-    rt.detectFacetsWithoutResolution();
+      const rt = new RichText({ text: msg.text });
+      rt.detectFacetsWithoutResolution();
 
-    const record: PlaceStreamChatMessage.Record = {
-      text: msg.text,
-      createdAt: new Date().toISOString(),
-      streamer: streamerProfile.did,
-      ...(msg.reply
-        ? {
-            reply: {
-              root: {
-                cid: msg.reply.cid,
-                uri: msg.reply.uri,
+      const record: PlaceStreamChatMessage.Record = {
+        text: msg.text,
+        createdAt: new Date().toISOString(),
+        streamer: streamerProfile.did,
+        ...(msg.reply
+          ? {
+              reply: {
+                root: {
+                  cid: msg.reply.cid,
+                  uri: msg.reply.uri,
+                },
+                parent: {
+                  cid: msg.reply.cid,
+                  uri: msg.reply.uri,
+                },
               },
-              parent: {
-                cid: msg.reply.cid,
-                uri: msg.reply.uri,
-              },
-            },
-          }
-        : {}),
-      ...(rt.facets && rt.facets.length > 0
-        ? {
-            facets: rt.facets.map((facet) => ({
-              index: facet.index,
-              features: facet.features
-                .filter(
-                  (feature) =>
-                    feature.$type === "app.bsky.richtext.facet#link" ||
-                    feature.$type === "app.bsky.richtext.facet#mention",
-                )
-                .map((feature) => {
-                  if (isLink(feature)) {
-                    return {
-                      $type: "app.bsky.richtext.facet#link",
-                      uri: feature.uri,
-                    };
-                  } else if (isMention(feature)) {
-                    return {
-                      $type: "app.bsky.richtext.facet#mention",
-                      did: feature.did,
-                    };
-                  } else {
-                    throw new Error("invalid code path");
-                  }
-                }),
-            })),
-          }
-        : {}),
-    };
+            }
+          : {}),
+        ...(rt.facets && rt.facets.length > 0
+          ? {
+              facets: rt.facets.map((facet) => ({
+                index: facet.index,
+                features: facet.features
+                  .filter(
+                    (feature) =>
+                      feature.$type === "app.bsky.richtext.facet#link" ||
+                      feature.$type === "app.bsky.richtext.facet#mention",
+                  )
+                  .map((feature) => {
+                    if (isLink(feature)) {
+                      return {
+                        $type: "app.bsky.richtext.facet#link",
+                        uri: feature.uri,
+                      };
+                    } else if (isMention(feature)) {
+                      return {
+                        $type: "app.bsky.richtext.facet#mention",
+                        did: feature.did,
+                      };
+                    } else {
+                      throw new Error("invalid code path");
+                    }
+                  }),
+              })),
+            }
+          : {}),
+      };
 
-    const localChat: ChatMessageViewHydrated = {
-      uri: `local-${Date.now()}`,
-      cid: "",
-      author: {
-        did: userDID,
-        handle: userHandle || userDID,
-      },
-      record: record,
-      indexedAt: new Date().toISOString(),
-      chatProfile: chatProfile || undefined,
-    };
+      const localChat: ChatMessageViewHydrated = {
+        uri: `local-${Date.now()}-${userDID.slice(-8)}`,
+        cid: "",
+        author: {
+          did: userDID,
+          handle: userHandle || userDID,
+        },
+        record: record,
+        indexedAt: new Date().toISOString(),
+        chatProfile: chatProfile || undefined,
+      };
 
-    state = reduceChat(state, [localChat], []);
-    store.setState(state);
+      // Optimistic update - use incremental approach
+      state = reduceChatIncremental(state, [localChat], []);
+      store.setState(state);
 
-    await pdsAgent.com.atproto.repo.createRecord({
-      repo: userDID,
-      collection: "place.stream.chat.message",
-      record,
-    });
-  };
+      try {
+        await pdsAgent.com.atproto.repo.createRecord({
+          repo: userDID,
+          collection: "place.stream.chat.message",
+          record,
+        });
+      } catch (error) {
+        // On error, we could implement a retry mechanism or remove the optimistic message
+        console.error("Failed to send chat message:", error);
+        throw error;
+      }
+    },
+    [pdsAgent, store, userDID, userHandle, chatProfile],
+  );
 };
 
-const CHAT_LIMIT = 20;
+const buildSortedChatList = (
+  chatIndex: { [key: string]: ChatMessageViewHydrated },
+  existingChatList: ChatMessageViewHydrated[],
+  newMessages: { key: string; message: ChatMessageViewHydrated }[],
+  removedKeys: Set<string>,
+): ChatMessageViewHydrated[] => {
+  // if the update is large, just rebuild as it'll probably be faster
+  if (newMessages.length > 10 || removedKeys.size > 0) {
+    const sortedKeys = Object.keys(chatIndex).sort((a, b) =>
+      a.localeCompare(b),
+    );
+    return sortedKeys.map((key) => chatIndex[key]);
+  }
+
+  // otherwise, we can do an incremental update
+  let newChatList = [...existingChatList];
+
+  // i never thought i'd be writing binary search again
+  for (const { key, message } of newMessages) {
+    const timestamp = parseInt(key.split("-")[0]);
+    let insertIndex = newChatList.length;
+
+    for (let i = newChatList.length - 1; i >= 0; i--) {
+      const existingMessage = newChatList[i];
+      const existingTimestamp = parseInt(
+        new Date(existingMessage.record.createdAt).getTime().toString(),
+      );
 
-export const reduceChat = (
+      if (existingTimestamp <= timestamp) {
+        insertIndex = i + 1;
+        break;
+      }
+    }
+
+    newChatList.splice(insertIndex, 0, message);
+  }
+
+  return newChatList;
+};
+
+export const reduceChatIncremental = (
   state: LivestreamState,
-  messages: ChatMessageViewHydrated[],
+  newMessages: ChatMessageViewHydrated[],
   blocks: PlaceStreamDefs.BlockView[],
 ): LivestreamState => {
-  state = { ...state } as LivestreamState;
-  let newChat: { [key: string]: ChatMessageViewHydrated } = {
-    ...state.chatIndex,
-  };
+  if (newMessages.length === 0 && blocks.length === 0) {
+    return state;
+  }
 
-  // Add new messages
-  for (let message of messages) {
+  const newChatIndex = { ...state.chatIndex };
+  let hasChanges = false;
+  const removedKeys = new Set<string>();
+
+  // handle blocks
+  if (blocks.length > 0) {
+    const blockedDIDs = new Set(blocks.map((block) => block.record.subject));
+    for (const [key, message] of Object.entries(newChatIndex)) {
+      if (blockedDIDs.has(message.author.did)) {
+        delete newChatIndex[key];
+        removedKeys.add(key);
+        hasChanges = true;
+      }
+    }
+  }
+
+  const messagesToAdd: { key: string; message: ChatMessageViewHydrated }[] = [];
+
+  for (const message of newMessages) {
     const date = new Date(message.record.createdAt);
     const key = `${date.getTime()}-${message.uri}`;
 
-    // Remove existing local message matching the server one
+    // skip messages we already have
+    if (newChatIndex[key] && newChatIndex[key].uri === message.uri) {
+      continue;
+    }
+
+    // if we have a local message, replace it with the new one
     if (!message.uri.startsWith("local-")) {
-      const existingLocalMessageKey = Object.keys(newChat).find((k) => {
-        const msg = newChat[k];
+      const existingLocalKey = Object.keys(newChatIndex).find((k) => {
+        const msg = newChatIndex[k];
         return (
           msg.uri.startsWith("local-") &&
           msg.record.text === message.record.text &&
-          msg.author.did === message.author.did
+          msg.author.did === message.author.did &&
+          Math.abs(new Date(msg.record.createdAt).getTime() - date.getTime()) <
+            10000 // Within 10 seconds
         );
       });
 
-      if (existingLocalMessageKey) {
-        delete newChat[existingLocalMessageKey];
+      if (existingLocalKey) {
+        delete newChatIndex[existingLocalKey];
+        removedKeys.add(existingLocalKey);
+        hasChanges = true;
       }
     }
 
-    // Handle reply information for local-first messages
+    // add reply info
+    let processedMessage = message;
     if (message.record.reply) {
       const reply = message.record.reply as {
         parent?: { uri: string; cid: string };
···
       };
 
       const parentUri = reply?.parent?.uri || reply?.root?.uri;
-
       if (parentUri) {
-        // First try to find the parent message in our chat
-        const parentMsgKey = Object.keys(newChat).find(
-          (k) => newChat[k].uri === parentUri,
+        const parentMsgKey = Object.keys(newChatIndex).find(
+          (k) => newChatIndex[k].uri === parentUri,
         );
 
         if (parentMsgKey) {
-          // Found the parent message, add its info to our message
-          const parentMsg = newChat[parentMsgKey];
-          message = {
+          const parentMsg = newChatIndex[parentMsgKey];
+          processedMessage = {
             ...message,
             replyTo: {
               cid: parentMsg.cid,
···
       }
     }
 
-    newChat[key] = message;
+    messagesToAdd.push({ key, message: processedMessage });
+    hasChanges = true;
   }
 
-  for (const block of blocks) {
-    for (const [k, v] of Object.entries(newChat)) {
-      if (v.author.did === block.record.subject) {
-        delete newChat[k];
-      }
-    }
+  // Add new messages to index
+  for (const { key, message } of messagesToAdd) {
+    newChatIndex[key] = message;
   }
 
-  let newChatList = Object.values(newChat).sort((a, b) =>
-    new Date(a.record.createdAt) > new Date(b.record.createdAt) ? 1 : -1,
-  );
+  // only rebuild if we have changes
+  if (!hasChanges) {
+    return state;
+  }
 
-  newChatList = newChatList.slice(-CHAT_LIMIT);
-
-  newChat = newChatList.reduce(
-    (acc, msg) => {
-      acc[msg.uri] = msg;
-      return acc;
-    },
-    {} as { [key: string]: ChatMessageViewHydrated },
+  // Build the new sorted chat list efficiently
+  const newChatList = buildSortedChatList(
+    newChatIndex,
+    state.chat,
+    messagesToAdd,
+    removedKeys,
   );
 
   return {
     ...state,
-    chatIndex: newChat,
+    chatIndex: newChatIndex,
     chat: newChatList,
   };
 };
+
+export const reduceChat = reduceChatIncremental;