Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 10:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🔧 fix: Convo Corners & Updated Colors (#2046)

Browse source 
* 🔧 fix: Convo Corners & Updated Colors

* refactored code

* chore: JSON.parse with a try/catch block, removed useless useEffect & and restored Focus

* restored typescript

* import all back
This commit is contained in:
Raí Santos 2024-03-14 10:04:09 -03:00 • committed by GitHub
parent 1b8c0f0bfd
commit f27e7c720f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

30
client/src/components/Conversations/Convo.tsx
View file

@ -1,5 +1,5 @@
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { useState, useRef } from 'react'; import { useState, useRef, useEffect } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { EModelEndpoint } from 'librechat-data-provider'; import { EModelEndpoint } from 'librechat-data-provider';
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query'; import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
@ -114,19 +114,19 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
} }
}; };
const aProps = {
className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg bg-gray-200 dark:bg-gray-800 py-2 px-2 ${
renaming ? 'pr-14' : ''
}`,
};
const activeConvo = const activeConvo =
currentConvoId === conversationId || currentConvoId === conversationId ||
(isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new'); (isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
const aProps = {
className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-300 dark:bg-gray-800 py-2 px-2 ${
renaming ? 'pr-14' : ''
}`,
};
if (!activeConvo) { if (!activeConvo) {
aProps.className = aProps.className =
'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg py-2 px-2 hover:bg-gray-200 dark:hover:bg-gray-800'; 'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 py-2 px-2';
} }
return ( return (
@ -153,17 +153,15 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
title title
)} )}
</div> </div>
{activeConvo ? ( {activeConvo && (
<div <div
className={`absolute bottom-0 right-1 top-0 w-20 bg-gradient-to-l ${ className={`absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l ${
!renaming ? 'from-gray-100 from-60% to-transparent dark:from-gray-800' : '' !renaming ? 'from-gray-300 from-60% to-transparent dark:from-gray-800' : ''
}`} }`}
></div> ></div>
) : (
<div className="absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:w-1 group-hover:from-60% dark:from-gray-900"></div>
)} )}
{activeConvo ? ( {activeConvo && (
<div className="visible absolute right-1 z-10 flex text-gray-400"> <div className="visible absolute right-1 z-10 flex from-gray-900 dark:text-gray-200">
<RenameButton renaming={renaming} onRename={onRename} renameHandler={renameHandler} /> <RenameButton renaming={renaming} onRename={onRename} renameHandler={renameHandler} />
<DeleteButton <DeleteButton
conversationId={conversationId} conversationId={conversationId}
@ -172,8 +170,6 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
title={title} title={title}
/> />
</div> </div>
) : (
<div className="absolute bottom-0 right-0 top-0 w-20 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-50 dark:from-gray-900 dark:group-hover:from-gray-900" />
)} )}
</a> </a>
); );