vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix auto scroll

Browse source
This commit is contained in:
Xuan Son Nguyen 2025-02-08 13:03:33 +01:00
parent 483a3bc2ad
commit 115f75c5b1
3 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

15
examples/server/webui/src/App.tsx
View file

@ -27,14 +27,19 @@ function AppLayout() {
return ( return (
<> <>
<Sidebar /> <Sidebar />
<div className="drawer-content grow flex flex-col h-screen w-screen mx-auto px-4 overflow-auto"> <div
className="drawer-content grow flex flex-col h-screen w-screen mx-auto px-4 overflow-auto"
id="main-scroll"
>
<Header /> <Header />
<Outlet /> <Outlet />
</div> </div>
{<SettingDialog {
show={showSettings} <SettingDialog
onClose={() => setShowSettings(false)} show={showSettings}
/>} onClose={() => setShowSettings(false)}
/>
}
</> </>
); );
} }

19
examples/server/webui/src/components/ChatScreen.tsx
View file

@ -17,22 +17,21 @@ export default function ChatScreen() {
canvasData, canvasData,
} = useAppContext(); } = useAppContext();
const [inputMsg, setInputMsg] = useState(''); const [inputMsg, setInputMsg] = useState('');
const containerRef = useRef<HTMLDivElement>(null);
const navigate = useNavigate(); const navigate = useNavigate();
const currConvId = viewingConversation?.id ?? ''; const currConvId = viewingConversation?.id ?? '';
const pendingMsg: PendingMessage | undefined = pendingMessages[currConvId]; const pendingMsg: PendingMessage | undefined = pendingMessages[currConvId];
const scrollToBottom = (requiresNearBottom: boolean) => { const scrollToBottom = (requiresNearBottom: boolean) => {
if (!containerRef.current) return; const mainScrollElem = document.getElementById('main-scroll');
const msgListElem = containerRef.current; if (!mainScrollElem) return;
const spaceToBottom = const spaceToBottom =
msgListElem.scrollHeight - mainScrollElem.scrollHeight -
msgListElem.scrollTop - mainScrollElem.scrollTop -
msgListElem.clientHeight; mainScrollElem.clientHeight;
if (!requiresNearBottom || spaceToBottom < 50) { if (!requiresNearBottom || spaceToBottom < 50) {
setTimeout( setTimeout(
() => msgListElem.scrollTo({ top: msgListElem.scrollHeight }), () => mainScrollElem.scrollTo({ top: mainScrollElem.scrollHeight }),
1 1
); );
} }
@ -71,11 +70,7 @@ export default function ChatScreen() {
> >
<div className="flex flex-col w-full max-w-[900px] mx-auto"> <div className="flex flex-col w-full max-w-[900px] mx-auto">
{/* chat messages */} {/* chat messages */}
<div <div id="messages-list" className="flex flex-col grow overflow-y-auto">
id="messages-list"
className="flex flex-col grow overflow-y-auto"
ref={containerRef}
>
<div className="mt-auto flex justify-center"> <div className="mt-auto flex justify-center">
{/* placeholder to shift the message to the bottom */} {/* placeholder to shift the message to the bottom */}
{viewingConversation ? '' : 'Send a message to start'} {viewingConversation ? '' : 'Send a message to start'}

2
examples/server/webui/src/components/SettingDialog.tsx
View file

@ -325,7 +325,7 @@ export default function SettingDialog({
}; };
return ( return (
<dialog className={classNames({ 'modal': true, 'modal-open': show })}> <dialog className={classNames({ modal: true, 'modal-open': show })}>
<div className="modal-box w-11/12 max-w-3xl"> <div className="modal-box w-11/12 max-w-3xl">
<h3 className="text-lg font-bold mb-6">Settings</h3> <h3 className="text-lg font-bold mb-6">Settings</h3>
<div className="flex flex-col md:flex-row h-[calc(90vh-12rem)]"> <div className="flex flex-col md:flex-row h-[calc(90vh-12rem)]">