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

mobile style, for input panel and regenerate buttons

Browse source
This commit is contained in:
Wentao Lyu 2023-03-17 03:42:55 +08:00
parent ef9f1ee1cf
commit a8c53f1f0d
3 changed files with 25 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -281,34 +281,33 @@ export default function TextChat({ messages }) {
}; };
isNotAppendable isNotAppendable
return ( return (
<div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent"> <div className="input-panel absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:!bg-transparent dark:md:bg-vert-dark-gradient pt-2">
<form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6"> <form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
<div className="relative flex h-full flex-1 md:flex-col"> <div className="relative flex h-full flex-1 md:flex-col">
<div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" /> <span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center order-last md:order-none">
<span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center">
{isSubmitting? {isSubmitting?
<button <button
onClick={handleStopGenerating} onClick={handleStopGenerating}
className="btn btn-neutral flex justify-center gap-2 border-0 md:border" className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button" type="button"
> >
<StopGeneratingIcon /> <StopGeneratingIcon />
Stop generating <span className="hidden md:block">Stop generating</span>
</button> </button>
:(latestMessage&&!latestMessage?.isCreatedByUser)? :(latestMessage&&!latestMessage?.isCreatedByUser)?
<button <button
onClick={handleRegenerate} onClick={handleRegenerate}
className="btn btn-neutral flex justify-center gap-2 border-0 md:border" className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button" type="button"
> >
<RegenerateIcon /> <RegenerateIcon />
Regenerate response <span className="hidden md:block">Regenerate response</span>
</button> </button>
:null :null
} }
</span> </span>
<div <div
className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${ className={`relative flex 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-2 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'

8
client/src/components/Messages/index.jsx
View file

@ -64,10 +64,10 @@ const Messages = ({ messages, messageTree }) => {
> >
{/* <div className="flex-1 overflow-hidden"> */} {/* <div className="flex-1 overflow-hidden"> */}
<div className="dark:gpt-dark-gray h-full"> <div className="dark:gpt-dark-gray h-full">
<div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300 text-sm"> <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
Model: {modelName} {customModel?`(${customModel})`:null} <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300 text-sm">
</div> Model: {modelName} {customModel?`(${customModel})`:null}
<div className="dark:gpt-dark-gray flex flex-col items-center text-sm"> </div>
{messageTree.length === 0 ? ( {messageTree.length === 0 ? (
<Spinner /> <Spinner />
) : ( ) : (

14
client/src/mobile.css
View file

@ -46,6 +46,20 @@
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.input-panel-button {
border: 0;
}
.input-panel-button svg {
width: 16px;
height: 16px;
}
.input-panel {
background: rgb(52,53,65) !important;
background-image: none !important;
}
.nav-close-button { .nav-close-button {
display: block; display: block;
position: absolute; position: absolute;