apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-04 22:02:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: add viewport configuration for mobile keyboard handling and update chat page height calculations for better responsiveness

Browse source
This commit is contained in:
Anish Sarkar 2026-02-06 19:43:14 +05:30
parent e3dc2ad39f
commit 9d071d686a
3 changed files with 22 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
View file

@ -1408,7 +1408,7 @@ export default function NewChatPage() {
// Show loading state only when loading an existing thread // Show loading state only when loading an existing thread
if (isInitializing) { if (isInitializing) {
return ( return (
<div className="flex h-[calc(100vh-64px)] flex-col bg-background px-4"> <div className="flex h-[calc(100dvh-64px)] flex-col bg-background px-4">
<div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8"> <div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8">
{/* User message */} {/* User message */}
<div className="flex justify-end"> <div className="flex justify-end">
@ -1449,7 +1449,7 @@ export default function NewChatPage() {
// For new chats (urlChatId === 0), threadId being null is expected (lazy creation) // For new chats (urlChatId === 0), threadId being null is expected (lazy creation)
if (!threadId && urlChatId > 0) { if (!threadId && urlChatId > 0) {
return ( return (
<div className="flex h-[calc(100vh-64px)] flex-col items-center justify-center gap-4"> <div className="flex h-[calc(100dvh-64px)] flex-col items-center justify-center gap-4">
<div className="text-destructive">Failed to load chat</div> <div className="text-destructive">Failed to load chat</div>
<button <button
type="button" type="button"
@ -1474,7 +1474,7 @@ export default function NewChatPage() {
<SaveMemoryToolUI /> <SaveMemoryToolUI />
<RecallMemoryToolUI /> <RecallMemoryToolUI />
{/* <WriteTodosToolUI /> Disabled for now */} {/* <WriteTodosToolUI /> Disabled for now */}
<div className="flex flex-col h-[calc(100vh-64px)] overflow-hidden"> <div className="flex flex-col h-[calc(100dvh-64px)] overflow-hidden">
<Thread <Thread
messageThinkingSteps={messageThinkingSteps} messageThinkingSteps={messageThinkingSteps}
header={<ChatHeader searchSpaceId={searchSpaceId} />} header={<ChatHeader searchSpaceId={searchSpaceId} />}

16
surfsense_web/app/layout.tsx
View file

@ -1,4 +1,4 @@
import type { Metadata } from "next"; import type { Metadata, Viewport } from "next";
import "./globals.css"; import "./globals.css";
import { RootProvider } from "fumadocs-ui/provider/next"; import { RootProvider } from "fumadocs-ui/provider/next";
import { Roboto } from "next/font/google"; import { Roboto } from "next/font/google";
@ -19,6 +19,20 @@ const roboto = Roboto({
variable: "--font-roboto", variable: "--font-roboto",
}); });
/**
* Viewport configuration for mobile keyboard handling.
* - interactiveWidget: 'resizes-content' tells mobile browsers (especially Chrome Android)
* to resize the CSS layout viewport when the virtual keyboard opens, so sticky elements
* (like the chat input bar) stay visible above the keyboard.
* - viewportFit: 'cover' enables env(safe-area-inset-*) for notched/home-indicator devices.
*/
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
viewportFit: "cover",
interactiveWidget: "resizes-content",
};
export const metadata: Metadata = { export const metadata: Metadata = {
title: "SurfSense – Customizable AI Research & Knowledge Management Assistant", title: "SurfSense – Customizable AI Research & Knowledge Management Assistant",
description: description:

5
surfsense_web/components/assistant-ui/thread.tsx
View file

@ -120,7 +120,10 @@ const ThreadContent: FC<{ header?: React.ReactNode }> = ({ header }) => {
}} }}
/> />
<ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6"> <ThreadPrimitive.ViewportFooter
className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6"
style={{ paddingBottom: "max(1rem, env(safe-area-inset-bottom))" }}
>
<ThreadScrollToBottom /> <ThreadScrollToBottom />
<AssistantIf condition={({ thread }) => !thread.isEmpty}> <AssistantIf condition={({ thread }) => !thread.isEmpty}>
<div className="fade-in slide-in-from-bottom-4 animate-in duration-500 ease-out fill-mode-both"> <div className="fade-in slide-in-from-bottom-4 animate-in duration-500 ease-out fill-mode-both">