mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 14:26:58 +00:00
🆙 ReDesign ChatHistory
This commit is contained in:
duckietm
parent
d8979b2dc9
commit
4eaf918aad
BIN
src/assets/images/chathistory/chathistory_toggle.png
Normal file
BIN
src/assets/images/chathistory/chathistory_toggle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 B |
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -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);
|
||||
Loading…
x
Reference in New Issue
Block a user