use custom chat

src/components/VideoConference/Chat/Chat.tsx

@@ -1,7 +1,16 @@
 import type { ChatMessage, ReceivedChatMessage } from '@livekit/components-core'
-import { ChatEntry, MessageFormatter, useMaybeLayoutContext, useRoomContext } from '@livekit/components-react'
+import {
+  ChatEntry,
+  MessageFormatter,
+  useLocalParticipant,
+  useMaybeLayoutContext,
+  useParticipantPermissions,
+  useRoomContext
+} from '@livekit/components-react'
 import * as React from 'react'
 import { cloneSingleChild, setupChat, useObservableState } from './utils'
+import { ParticipantPermission } from 'livekit-server-sdk'
+import { Participant } from 'livekit-client'
 
 export type { ChatMessage, ReceivedChatMessage }
 
@@ -85,6 +94,8 @@ export default function Chat({ messageFormatter, ...props }: ChatProps) {
     }
   }, [chatMessages, layoutContext?.widget])
 
+  const localParticipant = useLocalParticipant().localParticipant
+
   return (
     <div {...props} className="lk-chat">
       <ul className="lk-list lk-chat-messages" ref={ulRef}>
@@ -112,18 +123,20 @@ export default function Chat({ messageFormatter, ...props }: ChatProps) {
               )
             })}
       </ul>
-      <form className="lk-chat-form" onSubmit={handleSubmit}>
-        <input
-          className="lk-form-control lk-chat-form-input"
-          disabled={isSending}
-          ref={inputRef}
-          type="text"
-          placeholder="Enter a message..."
-        />
-        <button type="submit" className="lk-button lk-chat-form-button" disabled={isSending}>
-          Send
-        </button>
-      </form>
+      {localParticipant.permissions?.canPublish && (
+        <form className="lk-chat-form" onSubmit={handleSubmit}>
+          <input
+            className="lk-form-control lk-chat-form-input"
+            disabled={isSending}
+            ref={inputRef}
+            type="text"
+            placeholder="Enter a message..."
+          />
+          <button type="submit" className="lk-button lk-chat-form-button" disabled={isSending}>
+            Send
+          </button>
+        </form>
+      )}
     </div>
   )
 }

src/components/VideoConference/Chat/utils.ts

@@ -49,7 +49,12 @@ export function setupChat(room: Room) {
       const packet = Packet.decode(msg.payload)
       return { packet, msg }
     }),
-    filter(({ packet }) => packet.message?.$case === 'chat'),
+    filter(
+      ({ packet }) =>
+        packet.message?.$case === 'chat' &&
+        !packet.message.chat.message.startsWith('␆') /* ping */ &&
+        !packet.message.chat.message.startsWith('␑') /* pong */
+    ),
     map(({ packet, msg }) => {
       if (packet.message?.$case === 'chat') {
         const { timestamp, message } = packet.message.chat

src/components/VideoConference/Videoconference.tsx

@@ -14,34 +14,13 @@ import {
   // useParticipants,
   usePinnedTracks,
   useTracks,
-  MessageEncoder,
-  MessageDecoder
+  useParticipantContext
 } from '@livekit/components-react'
 import { RoomEvent, Track } from 'livekit-client'
 import ParticipantTile from './ParticipantTile'
 import type { TrackReferenceOrPlaceholder, WidgetState } from '@livekit/components-core'
-import { ChatMessage } from '@livekit/components-react'
-import { Packet } from '@dcl/protocol/out-js/decentraland/kernel/comms/rfc4/comms.gen'
 import Chat from './Chat'
 
-const messageDecoder: MessageDecoder = (message: Uint8Array) => {
-  const packet = Packet.decode(message)
-  if (packet.message && packet.message.$case === 'chat') {
-    const { timestamp, message } = packet.message.chat
-    return { timestamp, message }
-  } else if (packet.message?.$case === 'position') {
-  }
-
-  return {
-    message: 'Error',
-    timestamp: 0
-  }
-}
-
-const messageEncoder: MessageEncoder = (message: ChatMessage) => {
-  return new Uint8Array()
-}
-
 /**
  * @public
  */
@@ -77,11 +56,6 @@ export function VideoConference({ chatMessageFormatter, ...props }: VideoConfere
     { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged] }
   )
 
-  // TODO: remove this unused declaration if it's not needed
-  /* const participants = useParticipants({
-    updateOnlyOn: [RoomEvent.ParticipantConnected, RoomEvent.ParticipantDisconnected]
-  }) */
-
   const widgetUpdate = (state: WidgetState) => {
     log.debug('updating widget state', state)
     setWidgetState(state)
@@ -137,12 +111,7 @@ export function VideoConference({ chatMessageFormatter, ...props }: VideoConfere
             )}
             <ControlBar controls={{ chat: true }} />
           </div>
-          <Chat
-            style={{ display: widgetState.showChat ? 'flex' : 'none' }}
-            messageFormatter={chatMessageFormatter}
-            messageEncoder={messageEncoder}
-            messageDecoder={messageDecoder}
-          />
+          <Chat style={{ display: widgetState.showChat ? 'flex' : 'none' }} messageFormatter={chatMessageFormatter} />
         </LayoutContextProvider>
       )}
       <RoomAudioRenderer />