mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-18 17:30:16 +01:00
feat: basic support in mobile mode. including:
navbar show and hide, similar fade animation, auto close when select new convo, mobile title will change with convo, new chat button.
This commit is contained in:
Wentao Lyu
parent
fb9f77ae5e
commit
070fee2ece
5 changed files with 160 additions and 33 deletions
|
|
@ -5,6 +5,7 @@ import { store } from './src/store';
|
|||
import { ThemeProvider } from './src/hooks/ThemeContext';
|
||||
import App from './src/App';
|
||||
import './src/style.css';
|
||||
import './src/mobile.css'
|
||||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Messages from './components/Messages';
|
||||
import Landing from './components/Main/Landing';
|
||||
import TextChat from './components/Main/TextChat';
|
||||
|
|
@ -10,14 +10,16 @@ import { useSelector } from 'react-redux';
|
|||
const App = () => {
|
||||
const { messages } = useSelector((state) => state.messages);
|
||||
const { title } = useSelector((state) => state.convo);
|
||||
const { conversationId } = useSelector((state) => state.convo);
|
||||
const [ navVisible, setNavVisible ]= useState(false)
|
||||
useDocumentTitle(title);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
<Nav />
|
||||
<Nav navVisible={navVisible} setNavVisible={setNavVisible} />
|
||||
<div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
|
||||
<div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white dark:bg-gray-800">
|
||||
<MobileNav />
|
||||
<MobileNav setNavVisible={setNavVisible} />
|
||||
{messages.length === 0 ? (
|
||||
<Landing title={title} />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,11 +1,33 @@
|
|||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { setNewConvo } from '~/store/convoSlice';
|
||||
import { setMessages } from '~/store/messageSlice';
|
||||
import { setText } from '~/store/textSlice';
|
||||
|
||||
export default function MobileNav({ setNavVisible }) {
|
||||
const dispatch = useDispatch();
|
||||
const { conversationId, convos } = useSelector((state) => state.convo);
|
||||
|
||||
const toggleNavVisible = () => {
|
||||
setNavVisible((prev) => {
|
||||
return !prev
|
||||
})
|
||||
}
|
||||
|
||||
const newConvo = () => {
|
||||
dispatch(setText(''));
|
||||
dispatch(setMessages([]));
|
||||
dispatch(setNewConvo());
|
||||
}
|
||||
|
||||
const title = convos?.find(element => element?.conversationId == conversationId)?.title || 'New Chat';
|
||||
|
||||
export default function MobileNav({ title = 'New Chat' }) {
|
||||
return (
|
||||
<div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
|
||||
onClick={toggleNavVisible}
|
||||
>
|
||||
<span className="sr-only">Open sidebar</span>
|
||||
<svg
|
||||
|
|
@ -44,6 +66,7 @@ export default function MobileNav({ title = 'New Chat' }) {
|
|||
<button
|
||||
type="button"
|
||||
className="px-3"
|
||||
onClick={newConvo}
|
||||
>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { swr } from '~/utils/fetchers';
|
|||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { incrementPage, setConvos } from '~/store/convoSlice';
|
||||
|
||||
export default function Nav() {
|
||||
export default function Nav({ navVisible, setNavVisible }) {
|
||||
const dispatch = useDispatch();
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const { conversationId, convos, pageNumber } = useSelector((state) => state.convo);
|
||||
|
|
@ -47,42 +47,88 @@ export default function Nav() {
|
|||
}
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
setNavVisible(false)
|
||||
}, [conversationId, ])
|
||||
|
||||
const toggleNavVisible = () => {
|
||||
setNavVisible((prev) => {
|
||||
return !prev
|
||||
})
|
||||
}
|
||||
|
||||
const containerClasses =
|
||||
isLoading && pageNumber === 1
|
||||
? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
|
||||
: 'flex flex-col gap-2 text-gray-100 text-sm';
|
||||
|
||||
return (
|
||||
<div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
|
||||
<div className="flex h-full min-h-0 flex-col ">
|
||||
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
|
||||
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
|
||||
<NewChat />
|
||||
<div
|
||||
className={`-mr-2 flex-1 flex-col overflow-y-auto ${
|
||||
isHovering ? '' : 'scrollbar-transparent'
|
||||
} border-b border-white/20`}
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className={containerClasses}>
|
||||
{isLoading && pageNumber === 1 ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Conversations
|
||||
conversations={convos}
|
||||
conversationId={conversationId}
|
||||
showMore={showMore}
|
||||
pageNumber={pageNumber}
|
||||
/>
|
||||
)}
|
||||
<>
|
||||
<div className={"dark nav bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col" + (navVisible?' active':'')}>
|
||||
<div className="flex h-full min-h-0 flex-col ">
|
||||
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
|
||||
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
|
||||
<NewChat />
|
||||
<div
|
||||
className={`flex-1 flex-col overflow-y-auto ${
|
||||
isHovering ? '' : 'scrollbar-transparent'
|
||||
} border-b border-white/20`}
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className={containerClasses}>
|
||||
{isLoading && pageNumber === 1 ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Conversations
|
||||
conversations={convos}
|
||||
conversationId={conversationId}
|
||||
showMore={showMore}
|
||||
pageNumber={pageNumber}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NavLinks />
|
||||
</nav>
|
||||
<NavLinks />
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="nav-close-button -ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-white hover:text-white text-white"
|
||||
onClick={toggleNavVisible}
|
||||
>
|
||||
<span className="sr-only">Open sidebar</span>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-6 w-6"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line
|
||||
x1="3"
|
||||
y1="6"
|
||||
x2="15"
|
||||
y2="18"
|
||||
/>
|
||||
<line
|
||||
x1="3"
|
||||
y1="18"
|
||||
x2="15"
|
||||
y2="6"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"nav-mask" + (navVisible?' active':'')} onClick={toggleNavVisible}>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
55
client/src/mobile.css
Normal file
55
client/src/mobile.css
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
.nav-mask {
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(86, 88, 105, .75);
|
||||
padding-left: 420px;
|
||||
padding-top: 12px;
|
||||
opacity: 0;
|
||||
transition: all .5s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.nav-close-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nav-close-button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 12px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
left: calc(-100%);;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
max-width: 400px;
|
||||
width: calc(100% - 60px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav.active {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-mask.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue