🆙 ReDesign ChatHistory

src/components/chat-history/ChatHistoryView.scss

@@ -1,4 +1,37 @@
 .nitro-chat-history {
-    width: $chat-history-width;
+    background-color: #000000cc;
-    height: $chat-history-height;
+    position: absolute;
+    padding-right: 20px;
+    top: 0.5px; /* Adjusted to give more space at the top */
+    bottom: 0;
+    height: 75%;
+    left: 0;
+    width: 400px;
+    border-right: 1px solid #000;
+    border-bottom: 1px solid #000;
+    -webkit-box-shadow: inset -2px 0px 0px 0px #34322d, inset 0px -2px 0px 0px #34322d;
+    box-shadow: inset -2px 0px 0px 0px #34322d, inset 0px -2px 0px 0px #34322d;
+    border-bottom-right-radius: 10px;
+
+    .chat-history-content {
+        width: 100%;
+        background-color: #2e2e2c4f;
+        border-right: 1px solid #3b3933;
+        padding-bottom: 60px;
+    }
+	
+	.chat-history-content .p-2 {
+		padding: 10px;
+	}
+
+    .chat-toggle {
+        background-image: url(@/assets/images/chathistory/chathistory_toggle.png);
+        width: 15px;
+        height: 63px;
+        cursor: pointer;
+        position: absolute;
+        left: 100%;
+        bottom: 140px;
+        border-left: 1px solid black;
+    }
 }

src/components/chat-history/ChatHistoryView.tsx

@@ -1,15 +1,17 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
 import { AddEventLinkTracker, ChatEntryType, LocalizeText, RemoveLinkEventTracker } from '../../api';
-import { Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { Column, Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, Button } from '../../common';
 import { useChatHistory, useOnClickChat } from '../../hooks';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export const ChatHistoryView: FC<{}> = props =>
 {
-    const { chatHistory = [] } = useChatHistory();
+    const { chatHistory = [], clearChatHistory } = useChatHistory();
     const [ isVisible, setIsVisible ] = useState(false);
     const { onClickChat = null } = useOnClickChat();
     const [ searchText, setSearchText ] = useState<string>('');
+
     const elementRef = useRef<HTMLDivElement>(null);
 
     const filteredChatHistory = useMemo(() =>
@@ -21,6 +23,13 @@ export const ChatHistoryView: FC<{}> = props =>
         return chatHistory.filter(entry => ((entry.message && entry.message.toLowerCase().includes(text))) || (entry.name && entry.name.toLowerCase().includes(text)));
     }, [ chatHistory, searchText ]);
 
+    const handleClearHistory = () =>
+    {
+        if (clearChatHistory) {
+            clearChatHistory();
+        }
+    };
+
     useEffect(() =>
     {
         if(elementRef && elementRef.current && isVisible) elementRef.current.scrollTop = elementRef.current.scrollHeight;
@@ -56,42 +65,61 @@ export const ChatHistoryView: FC<{}> = props =>
         return () => RemoveLinkEventTracker(linkTracker);
     }, []);
 
-    if(!isVisible) return null;
-
     return (
-        <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" theme="primary-slim">
+        <AnimatePresence>
-            <NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
+            { isVisible && (
-            <NitroCardContentView innerRef={ elementRef } overflow="hidden" gap={ 2 }>
+                <motion.div
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchText } onChange={ event => setSearchText(event.target.value) } />
+                    initial={{ opacity: 0 }}
-                <InfiniteScroll rows={ filteredChatHistory } scrollToBottom={ true } rowRender={ row =>
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.3 }}
+                >
+                    <Flex gap={2} className="nitro-chat-history">
+                        <Column className="chat-history-content h-100">
+                            <Column className="h-100">
+                                <Flex justifyContent="end" className="p-2">
+                                    <Button variant="danger" onClick={handleClearHistory}>
+                                        {LocalizeText('chat.history.clear')}
+                                    </Button>
+                                </Flex>
+                                <InfiniteScroll
+                                    rows={filteredChatHistory}
+                                    scrollToBottom={true}
+                                    rowRender={row =>
                                     {
                                         return (
-                        <Flex alignItems="center" className="p-1" gap={ 2 }>
+                                            <Flex alignItems="center" className="p-1" gap={2}>
-                            <Text variant="muted">{ row.timestamp }</Text>
+                                                <Text variant="muted">{row.timestamp}</Text>
                                                 { (row.type === ChatEntryType.TYPE_CHAT) &&
-                                <div className="bubble-container" style={ { position: 'relative' } }>
+                                            <div className="bubble-container" style={{ position: 'relative' }}>
                                                 { (row.style === 0) &&
-                                    <div className="user-container-bg" style={ { backgroundColor: row.color } } /> }
+                                                <div className="user-container-bg" style={{ backgroundColor: row.color }} /> }
-                                    <div className={ `chat-bubble bubble-${ row.style } type-${ row.chatType }` } style={ { maxWidth: '100%' } }>
+                                                <div className={`chat-bubble bubble-${row.style} type-${row.chatType}`} style={{ maxWidth: '100%' }}>
                                                     <div className="user-container">
                                                         { row.imageUrl && (row.imageUrl.length > 0) &&
-                                <div className="user-image" style={ { backgroundImage: `url(${ row.imageUrl })` } } /> }
+                                                    <div className="user-image" style={{ backgroundImage: `url(${row.imageUrl})` }} /> }
                                                     </div>
                                                     <div className="chat-content">
-                                            <b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ row.name }: ` } } />
+                                                        <b className="username mr-1" dangerouslySetInnerHTML={{ __html: `${row.name}: ` }} />
-                                            <span className="message" dangerouslySetInnerHTML={ { __html: `${ row.message }` } } onClick={ e => onClickChat(e) }/>
+                                                        <span className="message" style={{ color: row.chatColours }} dangerouslySetInnerHTML={{ __html: `${row.message}` }} onClick={e => onClickChat(e)} />
                                                     </div>
                                                 </div>
                                             </div> }
                                                 { (row.type === ChatEntryType.TYPE_ROOM_INFO) &&
                                             <>
                                                 <i className="icon icon-small-room" />
-                                    <Text textBreak wrap grow>{ row.name }</Text>
+                                                <Text textBreak wrap grow variant="white">{row.name}</Text>
                                             </> }
                                             </Flex>
                                         )
-                } } />
+                                    }}
-            </NitroCardContentView>
+                                />
-        </NitroCardView>
+                            </Column>
+                        </Column>
+                        <Flex className="chat-toggle" onClick={event => setIsVisible(false)} />
+                    </Flex>
+                </motion.div>
+            )}
+        </AnimatePresence>
     );
-}
+};

src/hooks/chat-history/useChatHistory.ts

@@ -65,6 +65,12 @@ const useChatHistoryState = () =>
         });
     }
 
+    const clearChatHistory = () =>
+    {
+        setChatHistory([]);
+        CHAT_HISTORY_COUNTER = 0;
+    };
+
     useRoomSessionManagerEvent<RoomSessionEvent>(RoomSessionEvent.STARTED, event => setNeedsRoomInsert(true));
 
     useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event =>
@@ -99,7 +105,7 @@ const useChatHistoryState = () =>
         addMessengerEntry({ id: -1, webId: parser.senderId, entityId: -1, name: '', message: parser.messageText, roomId: -1, timestamp: MessengerHistoryCurrentDate(), type: ChatEntryType.TYPE_IM });
     });
     
-    return { addChatEntry, chatHistory, roomHistory, messengerHistory };
+    return { addChatEntry, chatHistory, roomHistory, messengerHistory, clearChatHistory };
 }
 
 export const useChatHistory = () => useBetween(useChatHistoryState);