Add graphemer for grapheme cluster counting

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

···
 import Picker from "@emoji-mart/react";
+import Graphemer from "graphemer";
 import { AtSignIcon, ExternalLink, X } from "lucide-react-native";
 import { env } from "process";
 import { useEffect, useMemo, useRef, useState } from "react";
···
   ..."😀🥸😍😘😁🥸😆🥸😜🥸😂😅🥸🙂🤫😱🥸🤣😗😄🥸😎🤓😲😯😰🥸😥🥸😣🥸😞😓🥸😩😩🥸😤🥱",
 ];
 
+const graphemer = new Graphemer();
+
 export function ChatBox({
   isPopout,
   chatBoxStyle,
···
     new Map(),
   );
   const [filteredEmojis, setFilteredEmojis] = useState<any[]>([]);
-  const isOverLimit = [...message].length > 300;
+  const isOverLimit = graphemer.countGraphemes(message) > 300;
 
   let linfo = useLivestream();
 
···
 
   const submit = async () => {
     if (!message.trim()) return;
-    if ([...message].length > 300) {
+    if (graphemer.countGraphemes(message) > 300) {
       toast.show(
         "Message too long",
         "Please limit your message to 300 characters.",