Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 00:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

conversation conditional rendering

Browse source
This commit is contained in:
Danny Avila 2023-02-08 11:05:54 -05:00
parent 0c6dc8665b
commit 87685c3791
1 changed files with 18 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/Conversations/Conversation.jsx
View file

@ -9,10 +9,7 @@ import manualSWR from '~/utils/fetchers';
export default function Conversation({ id, parentMessageId, title = 'New conversation' }) { export default function Conversation({ id, parentMessageId, title = 'New conversation' }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const conversationId = useSelector((state) => state.convo.conversationId); const conversationId = useSelector((state) => state.convo.conversationId);
const { trigger, isMutating } = manualSWR( const { trigger, isMutating } = manualSWR(`http://localhost:3050/messages/${id}`, 'get');
`http://localhost:3050/messages/${id}`,
'get'
);
const clickHandler = async () => { const clickHandler = async () => {
if (conversationId === id) { if (conversationId === id) {
@ -24,10 +21,20 @@ export default function Conversation({ id, parentMessageId, title = 'New convers
dispatch(setMessages(data)); dispatch(setMessages(data));
}; };
const aProps = {
className:
'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800'
};
if (conversationId !== id) {
aProps.className =
'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-[#2A2B32] hover:pr-4';
}
return ( return (
<a <a
onClick={() => clickHandler()} onClick={() => clickHandler()}
className="animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800" {...aProps}
> >
<svg <svg
stroke="currentColor" stroke="currentColor"
@ -46,10 +53,12 @@ export default function Conversation({ id, parentMessageId, title = 'New convers
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all"> <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all">
{title} {title}
</div> </div>
<div className="visible absolute right-1 z-10 flex text-gray-300"> {conversationId === id && (
{id === conversationId && <RenameButton conversationId={id} />} <div className="visible absolute right-1 z-10 flex text-gray-300">
{id === conversationId && <DeleteButton conversationId={id} />} <RenameButton conversationId={id} />
</div> <DeleteButton conversationId={id} />
</div>
)}
</a> </a>
); );
} }