From 4eaf918aad4f7144d0c4cd73f155180d5835ffa6 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Wed, 9 Apr 2025 16:54:27 +0200
Subject: [PATCH] :up: ReDesign ChatHistory

---
 .../images/chathistory/chathistory_toggle.png | Bin 0 -> 398 bytes
 .../chat-history/ChatHistoryView.scss         |  39 +++++-
 .../chat-history/ChatHistoryView.tsx          | 112 +++++++++++-------
 src/hooks/chat-history/useChatHistory.ts      |  10 +-
 4 files changed, 114 insertions(+), 47 deletions(-)
 create mode 100644 src/assets/images/chathistory/chathistory_toggle.png

diff --git a/src/assets/images/chathistory/chathistory_toggle.png b/src/assets/images/chathistory/chathistory_toggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac3bbd5e35f9d07b4acaaad5fc0e17c9c6760eff
GIT binary patch
literal 398
zcmeAS@N?(olHy`uVBq!ia0vp^{6K8a!3HANOnMHa7>k44ofy`glX(f`u%tWsIx;Y9
z?C1WI$O`0h7I;J!GcfQS0%1l`4X*~E24znd$B+p3x6=c&4mk+4sY?rc@CCb?i1912
za5cGqSZMbmxpo7;t?R+rBA!bp$f-55OrCX8M`ESwX6>NF{nP(Qe>$tSc|+pbiyOjk
zZEG;Ad9zQai^F@`2_>6u3HxuSU#(K{o)Q<W)U|2B33r)=C){7pW=*(%<-(juX4}Z@
zl{tyQPm0&`E?zBE^=Y9+z!PPij2v&BGeL$wj~9KBbhemzAjgXJc;Sn@v-69#^gn!C
z$~*7*#kp$YsUqh34}Nd`vG1<ayyr7i_n*4>Z?=p4@u@RXC7%VayT2jf1H<Q|T$5A|
zehijqdcA9g|4xfygBL-KBF94+!?tfc@LA~67QKSL(wYTtO0I0X|Jr<wu3K7CiW-<W
qRaCla_un(0bWZ+CHu2xcVDDD$y(QBn?HMo(89ZJ6T-G@yGywq81*N+H

literal 0
HcmV?d00001

diff --git a/src/components/chat-history/ChatHistoryView.scss b/src/components/chat-history/ChatHistoryView.scss
index f18f91b..28a13cc 100644
--- a/src/components/chat-history/ChatHistoryView.scss
+++ b/src/components/chat-history/ChatHistoryView.scss
@@ -1,4 +1,37 @@
 .nitro-chat-history {
-    width: $chat-history-width;
-    height: $chat-history-height;
-}
+    background-color: #000000cc;
+    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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx
index b34e078..4755a9f 100644
--- a/src/components/chat-history/ChatHistoryView.tsx
+++ b/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 { 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;
@@ -32,9 +41,9 @@ export const ChatHistoryView: FC<{}> = props =>
             linkReceived: (url: string) =>
             {
                 const parts = url.split('/');
-        
+
                 if(parts.length < 2) return;
-        
+
                 switch(parts[1])
                 {
                     case 'show':
@@ -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">
-            <NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
-            <NitroCardContentView innerRef={ elementRef } overflow="hidden" gap={ 2 }>
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchText } onChange={ event => setSearchText(event.target.value) } />
-                <InfiniteScroll rows={ filteredChatHistory } scrollToBottom={ true } rowRender={ row =>
-                {
-                    return (
-                        <Flex alignItems="center" className="p-1" gap={ 2 }>
-                            <Text variant="muted">{ row.timestamp }</Text>
-                            { (row.type === ChatEntryType.TYPE_CHAT) &&
-                                <div className="bubble-container" style={ { position: 'relative' } }>
-                                    { (row.style === 0) &&
-                                    <div className="user-container-bg" style={ { backgroundColor: row.color } } /> }
-                                    <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>
-                                        <div className="chat-content">
-                                            <b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ row.name }: ` } } />
-                                            <span className="message" 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>
-                                </> }
-                        </Flex>
-                    )
-                } } />
-            </NitroCardContentView>
-        </NitroCardView>
+        <AnimatePresence>
+            { isVisible && (
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    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}>
+                                                <Text variant="muted">{row.timestamp}</Text>
+                                                { (row.type === ChatEntryType.TYPE_CHAT) &&
+                                            <div className="bubble-container" style={{ position: 'relative' }}>
+                                                { (row.style === 0) &&
+                                                <div className="user-container-bg" style={{ backgroundColor: row.color }} /> }
+                                                <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>
+                                                    <div className="chat-content">
+                                                        <b className="username mr-1" dangerouslySetInnerHTML={{ __html: `${row.name}: ` }} />
+                                                        <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 variant="white">{row.name}</Text>
+                                            </> }
+                                            </Flex>
+                                        )
+                                    }}
+                                />
+                            </Column>
+                        </Column>
+                        <Flex className="chat-toggle" onClick={event => setIsVisible(false)} />
+                    </Flex>
+                </motion.div>
+            )}
+        </AnimatePresence>
     );
-}
+};
\ No newline at end of file
diff --git a/src/hooks/chat-history/useChatHistory.ts b/src/hooks/chat-history/useChatHistory.ts
index 4c0aa03..83c9ad0 100644
--- a/src/hooks/chat-history/useChatHistory.ts
+++ b/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);
+export const useChatHistory = () => useBetween(useChatHistoryState);
\ No newline at end of file