Misc frontend fixes

web/src/app/chat/Chat.tsx

@@ -78,6 +78,21 @@ export const Chat = ({
   // session they are using
   useEffect(() => {
     textareaRef.current?.focus();
+
+    // only clear things if we're going from one chat session to another
+    if (chatSessionId !== null && existingChatSessionId !== chatSessionId) {
+      // de-select documents
+      clearSelectedDocuments();
+      // reset all filters
+      filterManager.setSelectedDocumentSets([]);
+      filterManager.setSelectedSources([]);
+      filterManager.setSelectedTags([]);
+      filterManager.setTimeRange(null);
+      if (isStreaming) {
+        setIsCancelled(true);
+      }
+    }
+
     setChatSessionId(existingChatSessionId);
 
     async function initialSessionFetch() {
@@ -405,10 +420,14 @@ export const Chat = ({
         setSelectedMessageForDocDisplay(finalMessage.message_id);
       }
       await nameChatSession(currChatSessionId, currMessage);
+
+      // NOTE: don't switch pages if the user has navigated away from the chat
+      if (currChatSessionId === chatSessionId) {
         router.push(`/chat?chatId=${currChatSessionId}`, {
           scroll: false,
         });
       }
+    }
     if (
       finalMessage?.context_docs &&
       finalMessage.context_docs.top_documents.length > 0 &&
@@ -464,9 +483,9 @@ export const Chat = ({
 
       {documentSidebarInitialWidth !== undefined ? (
         <>
-          <div className="w-full sm:relative">
+          <div className="w-full sm:relative h-screen pb-[140px]">
             <div
-              className={`w-full h-screen ${HEADER_PADDING} flex flex-col overflow-y-auto relative`}
+              className={`w-full h-full ${HEADER_PADDING} flex flex-col overflow-y-auto overflow-x-hidden relative`}
               ref={scrollableDivRef}
             >
               {livePersona && (
@@ -628,7 +647,7 @@ export const Chat = ({
                   )}
 
                 {/* Some padding at the bottom so the search bar has space at the bottom to not cover the last message*/}
-                <div className={`min-h-[200px] w-full`}></div>
+                <div className={`min-h-[30px] w-full`}></div>
 
                 <div ref={endDivRef} />
               </div>
@@ -693,7 +712,8 @@ export const Chat = ({
                         if (
                           event.key === "Enter" &&
                           !event.shiftKey &&
-                          message
+                          message &&
+                          !isStreaming
                         ) {
                           onSubmit();
                           event.preventDefault();

web/src/components/search/SearchSection.tsx

@@ -213,7 +213,7 @@ export const SearchSection = ({
 
   return (
     <div className="relative max-w-[2000px] xl:max-w-[1430px] mx-auto">
-      <div className="absolute left-0 hidden 2xl:block w-64">
+      <div className="absolute left-0 hidden 2xl:block w-52 3xl:w-64">
         {(connectors.length > 0 || documentSets.length > 0) && (
           <SourceSelector
             {...filterManager}
@@ -246,7 +246,7 @@ export const SearchSection = ({
           />
         </div>
       </div>
-      <div className="w-[800px] mx-auto">
+      <div className="w-[720px] 3xl:w-[800px] mx-auto">
         {personas.length > 0 ? (
           <div className="flex mb-2 w-fit">
             <PersonaSelector