Merge pull request #1132 from ManishMadan2882/main

Fix UI for mobile devices

frontend/src/App.tsx

@@ -16,11 +16,12 @@ inject();
 function MainLayout() {
   const { isMobile } = useMediaQuery();
   const [navOpen, setNavOpen] = useState(!isMobile);
+
   return (
-    <div className="dark:bg-raisin-black">
+    <div className="dark:bg-raisin-black relative h-screen overflow-auto">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <div
-        className={`min-h-screen ${
+        className={`h-[calc(100dvh-64px)] sm:h-screen ${
           !isMobile
             ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
             : 'ml-0 md:ml-16'
@@ -35,7 +36,7 @@ function MainLayout() {
 export default function App() {
   useDarkTheme();
   return (
-    <>
+    <div className="h-full relative overflow-auto">
       <Routes>
         <Route element={<MainLayout />}>
           <Route index element={<Conversation />} />
@@ -45,6 +46,6 @@ export default function App() {
         <Route path="/share/:identifier" element={<SharedConversation />} />
         <Route path="/*" element={<PageNotFound />} />
       </Routes>
-    </>
+    </div>
   );
 }

frontend/src/Hero.tsx

@@ -19,7 +19,7 @@ export default function Hero({
   }>;
   return (
     <div
-      className={`mb-1 mt-16 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full md:mb-10 lg:mt-6`}
+      className={`pt-20 sm:pt-0 pb-6 sm:pb-12 flex h-full  w-full flex-col  text-black-1000 dark:text-bright-gray sm:w-full px-2 sm:px-0`}
     >
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="flex items-center">

frontend/src/Navigation.tsx

@@ -381,7 +381,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </div>
         </div>
       </div>
-      <div className="fixed z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
+      <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
         <button
           className="mt-5 ml-6 h-6 w-6 md:hidden"
           onClick={() => setNavOpen(true)}

frontend/src/conversation/Conversation.tsx

@@ -182,24 +182,32 @@ export default function Conversation() {
       )}px`;
     }
   };
-
+  const checkScroll = () => {
+    const el = conversationRef.current;
+    if (!el) return;
+    const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
+    setHasScrolledToLast(isBottom);
+  };
   useEffect(() => {
     handleInput();
     window.addEventListener('resize', handleInput);
+    conversationRef.current?.addEventListener('scroll', checkScroll);
     return () => {
       window.removeEventListener('resize', handleInput);
+      conversationRef.current?.removeEventListener('scroll', checkScroll);
     };
   }, []);
   return (
-    <div className="flex h-[90vh] flex-col gap-7 pb-2 sm:h-[85vh]">
+    <div className="flex flex-col gap-1 h-full justify-end">
       {conversationId && (
         <>
+          {' '}
           <button
             title="Share"
             onClick={() => {
               setShareModalState(true);
             }}
-            className="fixed top-4 right-20 z-0 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
           >
             <img
               className="m-2 h-5 w-5 filter dark:invert"
@@ -221,7 +229,7 @@ export default function Conversation() {
         ref={conversationRef}
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex h-[90%] w-full flex-1 justify-center overflow-y-auto p-4 md:h-[83vh]"
+        className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -237,13 +245,13 @@ export default function Conversation() {
           </button>
         )}
 
-        {queries.length > 0 && (
-          <div className="mt-16 w-full md:w-8/12">
+        {queries.length > 0 ? (
+          <div className="w-full md:w-8/12">
             {queries.map((query, index) => {
               return (
                 <Fragment key={index}>
                   <ConversationBubble
-                    className={'mb-1 last:mb-28 md:mb-7'}
+                    className={'first:mt-5'}
                     key={`${index}QUESTION`}
                     message={query.prompt}
                     type="QUESTION"
@@ -255,12 +263,12 @@ export default function Conversation() {
               );
             })}
           </div>
+        ) : (
+          <Hero handleQuestion={handleQuestion} />
         )}
-
-        {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
 
-      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-1/2">
+      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-[62%] h-auto">
         <div className="flex w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
           <textarea
             id="inputbox"

frontend/src/conversation/ConversationBubble.tsx

@@ -218,7 +218,7 @@ const ConversationBubble = forwardRef<
             {type === 'ERROR' && (
               <>
                 <img src={Alert} alt="alert" className="mr-2 inline" />
-                <div className="absolute -right-32 top-1/2 -translate-y-1/2">
+                <div className="absolute right-0 lg:-right-32 top-1/2 translate-y-full lg:-translate-y-1/2">
                   {retryBtn}
                 </div>
               </>

frontend/src/conversation/conversationSlice.ts

@@ -72,6 +72,23 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
                   query: { conversationId: data.id },
                 }),
               );
+              handleSearch(
+                //search for sources post streaming
+                question,
+                state.preference.selectedDocs!,
+                state.conversation.conversationId,
+                state.conversation.queries,
+                state.preference.chunks,
+                state.preference.token_limit,
+              ).then((sources) => {
+                //dispatch streaming sources
+                dispatch(
+                  updateStreamingSource({
+                    index: state.conversation.queries.length - 1,
+                    query: { sources: sources ?? [] },
+                  }),
+                );
+              });
             } else if (data.type === 'error') {
               // set status to 'failed'
               dispatch(conversationSlice.actions.setStatus('failed'));

frontend/src/index.css

@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --viewport-height: 100vh;
+}
+
+@supports (height: 100dvh) {
+  :root {
+    --viewport-height: 100dvh; /* Use dvh where supported */
+  }
+}
+
 body.dark {
   background-color: #202124; /* raisin-black */
 }
@@ -63,11 +73,21 @@ html {
 
 body {
   margin: 0;
-  min-height: 100vh;
+  min-height: var(--viewport-height);
   overflow-x: hidden;
   font-family: 'Inter', sans-serif;
 }
-
+/*
+Avoid over-scrolling in mobile browsers
+*/
+@media only screen and (max-width: 500px) {
+  body,
+  html {
+    min-height: var(--viewport-height);
+    position: fixed;
+    width: 100%;
+  }
+}
 /**
  * Render the `main` element consistently in IE.
  */
@@ -427,7 +447,7 @@ template {
 }
 
 ::-webkit-scrollbar {
-  width: 0;
+  width: 10;
 }
 
 input:-webkit-autofill {

frontend/src/settings/index.tsx

@@ -57,11 +57,11 @@ export default function Settings() {
     setActiveTab(t('settings.general.label'));
   }, [i18n.language]);
   return (
-    <div className="wa p-4 pt-20 md:p-12">
+    <div className="p-4 md:p-12 h-full overflow-auto">
       <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">
         {t('settings.label')}
       </p>
-      <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
+      <div className="mt-6 flex flex-row items-center space-x-4 overflow-auto md:space-x-8 ">
         <div className="md:hidden">
           <button
             onClick={() => scrollTabs(-1)}
@@ -70,7 +70,7 @@ export default function Settings() {
             <img src={ArrowLeft} alt="left-arrow" className="h-6 w-6" />
           </button>
         </div>
-        <div className="flex flex-nowrap space-x-4 overflow-x-auto md:space-x-8">
+        <div className="flex flex-nowrap space-x-4 overflow-x-auto no-scrollbar md:space-x-8">
           {tabs.map((tab, index) => (
             <button
               key={index}