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

fix: format sender text change and mobile styling

Browse source
This commit is contained in:
Daniel Avila 2023-03-11 17:36:10 -05:00
parent 3b1d6aaa79
commit 4fa599e97a
4 changed files with 25 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
api/app/chatgpt-custom.js
View file

@ -17,7 +17,7 @@ const customClient = async ({ text, progressCallback, convo, promptPrefix, chatG
clientOptions.chatGptLabel = chatGptLabel; clientOptions.chatGptLabel = chatGptLabel;
if (promptPrefix.length > 0) { if (promptPrefix?.length > 0) {
clientOptions.promptPrefix = promptPrefix; clientOptions.promptPrefix = promptPrefix;
} }

18
client/src/components/Messages/HoverButtons.jsx
View file

@ -4,16 +4,16 @@ import EditIcon from '../svg/EditIcon';
export default function HoverButtons({ user }) { export default function HoverButtons({ user }) {
return ( return (
<div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
<div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2"> {user && (
{user && ( <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible">
<button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> */}
<EditIcon /> <EditIcon />
</button> </button>
)} )}
{/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"> {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400">
<Clipboard /> <Clipboard />
</button> */} </button> */}
</div> </div>
); );
} }

31
client/src/components/Messages/Message.jsx
View file

@ -14,7 +14,6 @@ export default function Message({
}) { }) {
const { isSubmitting } = useSelector((state) => state.submit); const { isSubmitting } = useSelector((state) => state.submit);
const [abortScroll, setAbort] = useState(false); const [abortScroll, setAbort] = useState(false);
const [isHovering, setIsHovering] = useState(false);
const notUser = sender.toLowerCase() !== 'user'; const notUser = sender.toLowerCase() !== 'user';
const blinker = isSubmitting && last && notUser; const blinker = isSubmitting && last && notUser;
@ -32,14 +31,6 @@ export default function Message({
} }
}; };
const handleMouseOver = () => {
setIsHovering(true);
};
const handleMouseOut = () => {
setIsHovering(false);
};
const props = { const props = {
className: className:
'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800' 'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800'
@ -49,7 +40,7 @@ export default function Message({
chatgpt: 'rgb(16, 163, 127)', chatgpt: 'rgb(16, 163, 127)',
chatgptBrowser: 'rgb(25, 207, 207)', chatgptBrowser: 'rgb(25, 207, 207)',
bingai: '', bingai: '',
sydney: '', sydney: ''
}; };
const isBing = sender === 'bingai' || sender === 'sydney'; const isBing = sender === 'bingai' || sender === 'sydney';
@ -65,7 +56,11 @@ export default function Message({
if ((notUser && backgroundColor) || isBing) { if ((notUser && backgroundColor) || isBing) {
icon = ( icon = (
<div <div
style={isBing ? { background: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)' } : { backgroundColor }} style={
isBing
? { background: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)' }
: { backgroundColor }
}
className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white" className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
> >
{isBing ? <BingIcon /> : <GPTIcon />} {isBing ? <BingIcon /> : <GPTIcon />}
@ -84,12 +79,14 @@ export default function Message({
<div <div
{...props} {...props}
onWheel={handleWheel} onWheel={handleWheel}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
> >
<div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl"> <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<strong className="relative flex w-[30px] flex-col items-end text-right"> <strong className="relative flex w-[30px] flex-col items-end text-right text-xs md:text-sm">
{icon} {typeof icon === 'string' && icon.match(/[^\u0000-\u007F]+/) ? (
<span className=" direction-rtl w-40 overflow-x-scroll">{icon}</span>
) : (
icon
)}
</strong> </strong>
<div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]"> <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
<div className="flex flex-grow flex-col gap-3"> <div className="flex flex-grow flex-col gap-3">
@ -109,9 +106,7 @@ export default function Message({
</div> </div>
)} )}
</div> </div>
<div className="flex justify-between"> <HoverButtons user={!notUser} />
{isHovering && <HoverButtons user={!notUser} />}
</div>
</div> </div>
</div> </div>
</div> </div>

2
client/src/mobile.css
View file

@ -36,7 +36,7 @@
left: calc(-100%);; left: calc(-100%);;
top: 0; top: 0;
bottom: 0; bottom: 0;
max-width: 400px; max-width: 320px;
width: calc(100% - 60px); width: calc(100% - 60px);
opacity: 0; opacity: 0;
} }