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

fix: mobile sizing style of icon

Browse source
This commit is contained in:
Wentao Lyu 2023-03-16 14:05:12 +08:00
parent a47dbe6262
commit 7442294c41
5 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Main/SubmitButton.jsx
View file

@ -10,7 +10,7 @@ export default function SubmitButton({ submitMessage }) {
if (isSubmitting) { if (isSubmitting) {
return ( return (
<button className="absolute bottom-0 h-[50px] w-[30px] right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2" disabled> <button className="absolute bottom-0 h-[100%] w-[30px] right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2" disabled>
<div className="text-2xl"> <div className="text-2xl">
<span >·</span> <span >·</span>
<span className="blink">·</span> <span className="blink">·</span>
@ -23,7 +23,7 @@ export default function SubmitButton({ submitMessage }) {
<button <button
onClick={clickHandler} onClick={clickHandler}
disabled={disabled} disabled={disabled}
className="absolute bottom-0 flex justify-center items-center h-[50px] w-[50px] right-0 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent" className="absolute bottom-0 flex justify-center items-center h-[100%] w-[50px] right-0 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent"
> >
<svg <svg
stroke="currentColor" stroke="currentColor"

2
client/src/components/Main/TextChat.jsx
View file

@ -310,7 +310,7 @@ export default function TextChat({ messages }) {
<div <div
className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${ className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${
disabled ? 'bg-gray-100' : 'bg-white' disabled ? 'bg-gray-100' : 'bg-white'
} py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${ } py-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700' disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
} dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`} } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
> >

4
client/src/components/Models/ModelItem.jsx
View file

@ -28,7 +28,7 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
dispatch(setModels(fetchedModels)); dispatch(setModels(fetchedModels));
}); });
const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" }); const icon = getIconOfModel({ size: 20, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
if (value === 'chatgptCustom') { if (value === 'chatgptCustom') {
return ( return (
@ -143,7 +143,7 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
/> />
) : ( ) : (
<div className="w-3/4 overflow-hidden">{modelInput}</div> <div className=" overflow-hidden">{modelInput}</div>
)} )}
{value === 'chatgpt' && <sup>$</sup>} {value === 'chatgpt' && <sup>$</sup>}

2
client/src/components/Models/ModelMenu.jsx
View file

@ -139,7 +139,7 @@ export default function ModelMenu() {
const isBing = model === 'bingai' || model === 'sydney'; const isBing = model === 'bingai' || model === 'sydney';
const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps; const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
const icon = getIconOfModel({ sender: chatGptLabel || model, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" }); const icon = getIconOfModel({ size: 32, sender: chatGptLabel || model, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
return ( return (
<Dialog onOpenChange={onOpenChange}> <Dialog onOpenChange={onOpenChange}>

14
client/src/utils/index.js
View file

@ -61,8 +61,8 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
return ( return (
<div <div
title='User' title='User'
style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12 }} style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12, width: size, height: size }}
className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className} className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
> >
User User
</div> </div>
@ -77,11 +77,11 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
<div <div
title={chatGptLabel || model} title={chatGptLabel || model}
style={ style={
{ background } || { background: 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)' } { background: background || 'radial-gradient(circle at 90% 110%, #F0F0FA, #D0E0F9)', width: size, height: size }
} }
className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className} className={`relative flex items-center justify-center rounded-sm text-white ` + props?.className}
> >
{isBing ? <BingIcon size={size} /> : <GPTIcon size={size} />} {isBing ? <BingIcon size={size * 0.7} /> : <GPTIcon size={size * 0.7} />}
{error && ( {error && (
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white"> <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
! !
@ -93,8 +93,8 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
return ( return (
<div <div
title='User' title='User'
style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12 }} style={{ background: 'radial-gradient(circle at 90% 110%, rgb(1 43 128), rgb(17, 139, 161))', color: 'white', fontSize: 12, width: size, height: size }}
className={`relative flex h-[${size}px] w-[${size}px] items-center justify-center rounded-sm p-1 text-white ` + props?.className} className={`relative flex items-center justify-center rounded-sm p-1 text-white ` + props?.className}
> >
{chatGptLabel} {chatGptLabel}
</div> </div>