Cleanup chatbar this needs to be fixed first

src/api/utils/RoomChatFormatter.ts

@@ -155,12 +155,6 @@ export const RoomChatFormatter = (content: string) => {
         );
     }
 
-    if (content.includes("giphy.com/media")) {
-        content = `
-            <p style='background-image: url(${content}.gif);width: 70px;height: 70px;margin: 4px 10px 2px 10px; background-size: cover;border-radius: 2px;'></p>
-        `;
-    }
-
     const match = content.match(/@[a-zA-Z]+@/);
     if (match) {
         const colorTag = match[0].toString();

src/components/friends/views/messenger/FriendsMessengerView.tsx

@@ -4,7 +4,6 @@ import { FaTimes } from 'react-icons/fa';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, ReportType, SendMessageComposer } from '../../../../api';
 import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useHelp, useMessenger } from '../../../../hooks';
-import { ChatInputStickersSelectorConsolaView } from '../../../room/widgets/chat-input/ChatInputStickersSelectorConsolaView';
 import { FriendsMessengerThreadView } from './messenger-thread/FriendsMessengerThreadView';
 
 export const FriendsMessengerView: FC<{}> = props =>
@@ -237,13 +236,6 @@ function startRecordingConsola(){
                                 </Column>
                                 <Flex gap={ 1 }>
                                     <input type="text" className="form-control form-control-sm" maxLength={ 255 } placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ activeThread.participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } style={{paddingRight: 35}}/>
-                                    <div id="submenuChatConsola">
-            <ChatInputStickersSelectorConsolaView />  
-            <div id="microphoneConsoeOn" onClick={e => startRecordingConsola()} style={{marginLeft: "5px", display: "inline-block"}} className="icon chatmicrophoneConsoe-on-icon" />
-            <div id="microphoneConsoeOff" onClick={e => stopRecordingConsola()} style={{marginLeft: "5px", display: "none"}} className="icon chatmicrophoneConsoe-off-icon" />
-            <div id="deleteAudioConsola" onClick={e => deleteRecordingConsola()} style={{marginLeft: "5px", display: "none"}} className="icon chatdeleteAudioConsola-icon" />
-            <div onClick={() => hideSubMenuConsola()} className="icon chatequis-icon" style={{display: "inline-block"}} />
-        </div>
                                     <div onClick={() => showSubMenuConsola()} className="masiconstoolgen icon chatmas-icon" id="chatmasinfogen" style={{ position: 'relative', width: '40px', height: '27px', marginTop: '4px', marginRight: '0px', marginLeft: '0px', float: 'inherit', right: '0px', }}/>
                                     <Button variant="success" onClick={ send }>
                                         { LocalizeText('widgets.chatinput.say') }

src/components/room/widgets/chat-input/ChatInputView.scss

@@ -65,7 +65,6 @@
         display: flex;
         align-items: center;
         padding: 0 0.75em;
-        margin-left: -11px;
         margin-right: 2px;
         width: 34px;
     }

src/components/room/widgets/chat-input/ChatInputView.tsx

@@ -4,7 +4,6 @@ import { createPortal } from 'react-dom';
 import { ChatMessageTypeEnum, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
 import { Text } from '../../../../common';
 import { useChatInputWidget, useRoom, useSessionInfo, useUiEvent } from '../../../../hooks';
-import { ChatInputStickersSelectorView } from './ChatInputStickersSelectorView';
 import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
 import { ChatInputColorSelectorView } from './ChatInputColorSelectorView';
 
@@ -15,91 +14,13 @@ export const ChatInputView: FC<{}> = props =>
     const { chatStyleId = 0, updateChatStyleId = null, chatColour = '', updateChatColour = null } = useSessionInfo();
     const { selectedUsername = '', floodBlocked = false, floodBlockedSeconds = 0, setIsTyping = null, setIsIdle = null, sendChat = null } = useChatInputWidget();
     const { roomSession = null } = useRoom();
-    const inputRef = useRef<HTMLInputElement>();
 
+    const inputRef = useRef<HTMLInputElement>();
     const chatModeIdWhisper = useMemo(() => LocalizeText('widgets.chatinput.mode.whisper'), []);
     const chatModeIdShout = useMemo(() => LocalizeText('widgets.chatinput.mode.shout'), []);
     const chatModeIdSpeak = useMemo(() => LocalizeText('widgets.chatinput.mode.speak'), []);
     const maxChatLength = useMemo(() => GetConfiguration<number>('chat.input.maxlength', 100), []);
 
-    var mediaRecorder;
-    var audioChunks = [];
-    var microphoneOn = document.getElementById("microphoneOn");
-    var microphoneOff = document.getElementById("microphoneOff");
-    var deleteAudio = document.getElementById("deleteAudio");
-    
-    var deletedAudio = false;
-	
-    function startRecording(authenticationKey: string) {
-        if (!GetSessionDataManager().userName) {
-            return;
-        }
-	if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        microphoneOn.style.display = "none";
-        microphoneOff.style.display = "inline-block";
-        deleteAudio.style.display = "inline-block";
-
-        navigator.mediaDevices.getUserMedia({ audio: true })
-            .then(stream => {
-                mediaRecorder = new MediaRecorder(stream);
-                mediaRecorder.start();
-
-                mediaRecorder.addEventListener("dataavailable", event => {
-                    audioChunks.push(event.data);
-                });
-
-                mediaRecorder.addEventListener("stop", () => {
-                    microphoneOn.style.display = "inline-block";
-                    microphoneOff.style.display = "none";
-                    deleteAudio.style.display = "none";
-
-                    if (!deletedAudio) {
-                        const audioBlob = new Blob(audioChunks);
-                        var fd = new FormData();
-                        fd.append("audio", audioBlob);
-                        fetch(GetConfiguration<string>('api.sound.url'), { method: "POST", body: fd })
-                            .then((response) => response.text())
-                            .then((resp) => {
-                                roomSession.sendChatMessage(GetConfiguration<string>('api.sound.upload') + GetSessionDataManager().userName + resp + ".mp3", 0);
-                            })
-                    }
-                    deletedAudio = false;
-                    audioChunks = [];
-                });
-            })
-            .catch(error => {
-                console.error('Error accessing microphone:', error);
-            });
-    } else {
-        console.error('getUserMedia is not supported');}
-	
-	}
-
-    function stopRecording(){
-        microphoneOn.style.display = "inline-block";
-        microphoneOff.style.display = "none";
-        deleteAudio.style.display = "none";
-        mediaRecorder.stop();
-    }
-
-    function deleteRecording(){
-        microphoneOn.style.display = "inline-block";
-        microphoneOff.style.display = "none";
-        deleteAudio.style.display = "none";
-        deletedAudio = true;
-        mediaRecorder.stop();
-    }
-
-    function showSubMenu(){
-        if(document.getElementById("submenuChat").style.display == "block") document.getElementById("submenuChat").style.display = "none";
-        else document.getElementById("submenuChat").style.display = "block"; 
-    }
-
-    function hideSubMenu(){
-        document.getElementById("submenuChat").style.display = "none";
-    }
-
-
     const anotherInputHasFocus = useCallback(() =>
     {
         const activeElement = document.activeElement;
@@ -317,22 +238,14 @@ export const ChatInputView: FC<{}> = props =>
     return (
         createPortal(
             <div className="nitro-chat-input-container">				
-				<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
 			    <div className="input-sizer align-items-center">
-					<div onClick={() => showSubMenu()} className="iconcommandsright icon chatmas-icon" />
-					<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
                     { !floodBlocked &&
                     <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxChatLength } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
                     { floodBlocked &&
                     <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
-							<div id="submenuChat">
-					<ChatInputStickersSelectorView /> 
-					<div id="microphoneOn" onClick={e => startRecording()} style={{marginLeft: "5px", display: "inline-block"}} className="icon chatmicrophone-on-icon" />
-					<div id="microphoneOff" onClick={e => stopRecording()} style={{marginLeft: "5px", display: "none"}} className="icon chatmicrophone-off-icon" />
-					<div id="deleteAudio" onClick={e => deleteRecording()} style={{marginLeft: "5px", display: "none"}} className="icon chatdeleteaudio-icon" />
-					<div onClick={() => hideSubMenu()} className="icon chatequis-icon" style={{display: "inline-block"}} />
                 </div>
-			</div>
+				<ChatInputColorSelectorView chatColour={ chatColour } selectColour={ updateChatColour } />
-		</div>,document.getElementById('toolbar-chat-input-container'))
+                <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
+            </div>, document.getElementById('toolbar-chat-input-container'))
     );
 }