Merge pull request #1060 from siiddhantt/fix/conversation-textarea

fix: no safe-area for iOS browser, input not fixed

frontend/src/Hero.tsx

@@ -19,7 +19,7 @@ export default function Hero({
   }>;
   return (
     <div
-      className={`mt-16 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
+      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`}
     >
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="flex items-center">

frontend/src/Navigation.tsx

@@ -22,6 +22,7 @@ import {
 } from './conversation/conversationSlice';
 import ConversationTile from './conversation/ConversationTile';
 import { useDarkTheme, useMediaQuery, useOutsideAlerter } from './hooks';
+import useDefaultDocument from './hooks/useDefaultDocument';
 import DeleteConvModal from './modals/DeleteConvModal';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
@@ -39,7 +40,6 @@ import {
   setSelectedDocs,
   setSourceDocs,
 } from './preferences/preferenceSlice';
-import SelectDocsModal from './preferences/SelectDocsModal';
 import Upload from './upload/Upload';
 
 interface NavigationProps {
@@ -192,6 +192,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   useEffect(() => {
     setNavOpen(!isMobile);
   }, [isMobile]);
+  useDefaultDocument();
   return (
     <>
       {!navOpen && (
@@ -398,12 +399,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           />
         </button>
       </div>
-
-      <SelectDocsModal
-        modalState={selectedDocsModalState}
-        setModalState={setSelectedDocsModalState}
-        isCancellable={isSelectedDocsSet}
-      />
       <APIKeyModal
         modalState={apiKeyModalState}
         setModalState={setApiKeyModalState}

frontend/src/conversation/Conversation.tsx

@@ -211,7 +211,7 @@ export default function Conversation() {
     };
   }, []);
   return (
-    <div className="flex h-screen flex-col gap-7 pb-2">
+    <div className="flex h-[90vh] flex-col gap-7 pb-2 sm:h-[85vh]">
       {conversationId && (
         <>
           <button
@@ -279,7 +279,7 @@ export default function Conversation() {
         {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
 
-      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-8/12">
+      <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-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
           <textarea
             id="inputbox"
@@ -311,7 +311,7 @@ export default function Conversation() {
           )}
         </div>
 
-        <p className="text-gray-595959 hidden w-[100vw] self-center  bg-white bg-transparent py-2 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
+        <p className="text-gray-595959 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-bright-gray md:inline md:w-full">
           {t('tagline')}
         </p>
       </div>

frontend/src/hooks/useDefaultDocument.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Doc, getDocs } from '../preferences/preferenceApi';
+import {
+  selectSelectedDocs,
+  setSelectedDocs,
+  setSourceDocs,
+} from '../preferences/preferenceSlice';
+
+export default function useDefaultDocument() {
+  const dispatch = useDispatch();
+  const selectedDoc = useSelector(selectSelectedDocs);
+
+  const fetchDocs = () => {
+    getDocs().then((data) => {
+      dispatch(setSourceDocs(data));
+      if (!selectedDoc)
+        data?.forEach((doc: Doc) => {
+          if (doc.model && doc.name === 'default') {
+            dispatch(setSelectedDocs(doc));
+          }
+        });
+    });
+  };
+
+  React.useEffect(() => {
+    fetchDocs();
+  }, []);
+}

frontend/src/index.css

@@ -429,3 +429,7 @@ template {
   padding-left: 36px;
   padding-right: 36px;
 }
+
+.bottom-safe {
+  bottom: env(safe-area-inset-bottom, 0);
+}

frontend/src/preferences/SelectDocsModal.tsx

@@ -1,117 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ActiveState } from '../models/misc';
-import Modal from '../modals';
-import {
-  setSelectedDocs,
-  setSourceDocs,
-  selectSourceDocs,
-  selectSelectedDocs,
-} from './preferenceSlice';
-import { getDocs, Doc } from './preferenceApi';
-
-export default function APIKeyModal({
-  modalState,
-  setModalState,
-  isCancellable = true,
-}: {
-  modalState: ActiveState;
-  setModalState: (val: ActiveState) => void;
-  isCancellable?: boolean;
-}) {
-  const dispatch = useDispatch();
-  const docs = useSelector(selectSourceDocs);
-  const selectedDoc = useSelector(selectSelectedDocs);
-  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(
-    selectedDoc,
-  );
-  const [isDocsListOpen, setIsDocsListOpen] = useState(false);
-  const [isError, setIsError] = useState(false);
-
-  function handleSubmit() {
-    if (!localSelectedDocs) {
-      setIsError(true);
-    } else {
-      dispatch(setSelectedDocs(localSelectedDocs));
-      setModalState('INACTIVE');
-      setIsError(false);
-    }
-  }
-
-  function handleCancel() {
-    setIsError(false);
-    setModalState('INACTIVE');
-  }
-
-  useEffect(() => {
-    async function requestDocs() {
-      const data = await getDocs();
-      dispatch(setSourceDocs(data));
-    }
-
-    requestDocs();
-  }, []);
-  return (
-    <Modal
-      handleSubmit={handleSubmit}
-      isCancellable={isCancellable}
-      handleCancel={handleCancel}
-      modalState={modalState}
-      errorMessage="Please select Source Documentation"
-      isError={isError}
-      render={() => {
-        return (
-          <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-t-lg bg-white p-6 shadow-lg">
-            <p className="text-xl text-jet">Select Source Documentation</p>
-            <p className="text-lg leading-5 text-gray-500">
-              Please select the library of documentation that you would like to
-              use with our app.
-            </p>
-            <div className="relative">
-              <div
-                className="h-10 w-full cursor-pointer border-b-2"
-                onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-              >
-                {!localSelectedDocs ? (
-                  <p className="py-3 text-gray-500">Select</p>
-                ) : (
-                  <p className="py-3">
-                    {localSelectedDocs.name} {localSelectedDocs.version}
-                  </p>
-                )}
-              </div>
-              {isDocsListOpen && (
-                <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
-                  {docs ? (
-                    docs.map((doc, index) => {
-                      if (doc.model) {
-                        return (
-                          <div
-                            key={index}
-                            onClick={() => {
-                              setLocalSelectedDocs(doc);
-                              setIsDocsListOpen(false);
-                            }}
-                            className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
-                          >
-                            <p className="ml-5 py-3">
-                              {doc.name} {doc.version}
-                            </p>
-                          </div>
-                        );
-                      }
-                    })
-                  ) : (
-                    <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
-                      <p className="ml-5 py-3">No default documentation.</p>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </article>
-        );
-      }}
-    />
-  );
-}