Frontend audit: refinements

frontend/src/agents/AgentPreview.tsx

@@ -109,30 +109,30 @@ export default function AgentPreview() {
     } else setLastQueryReturnedErr(false);
   }, [queries]);
   return (
-    <div>
-      <div className="dark:bg-raisin-black flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
-        <div className="h-[512px] w-full overflow-y-auto">
-          <ConversationMessages
-            handleQuestion={handleQuestion}
-            handleQuestionSubmission={handleQuestionSubmission}
-            queries={queries}
-            status={status}
-            showHeroOnEmpty={false}
-          />
-        </div>
-        <div className="flex w-[95%] max-w-[1500px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
+    <div className="relative h-full w-full">
+      <div className="scrollbar-thin absolute inset-0 bottom-[180px] overflow-hidden px-4 pt-4 [&>div>div]:!w-full [&>div>div]:!max-w-none">
+        <ConversationMessages
+          handleQuestion={handleQuestion}
+          handleQuestionSubmission={handleQuestionSubmission}
+          queries={queries}
+          status={status}
+          showHeroOnEmpty={false}
+        />
+      </div>
+      <div className="absolute right-0 bottom-0 left-0 flex w-full flex-col gap-4 pb-2">
+        <div className="w-full px-4">
           <MessageInput
             onSubmit={(text) => handleQuestionSubmission(text)}
             loading={status === 'loading'}
             showSourceButton={selectedAgent ? false : true}
             showToolButton={selectedAgent ? false : true}
             autoFocus={false}
           />
-          <p className="text-gray-4000 dark:text-sonic-silver w-full self-center bg-transparent pt-2 text-center text-xs md:inline">
-            This is a preview of the agent. You can publish it to start using it
-            in conversations.
-          </p>
         </div>
+        <p className="text-gray-4000 dark:text-sonic-silver w-full bg-transparent text-center text-xs md:inline">
+          This is a preview of the agent. You can publish it to start using it
+          in conversations.
+        </p>
       </div>
     </div>
   );

frontend/src/agents/NewAgent.tsx

@@ -534,7 +534,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     setHasChanges(isChanged);
   }, [agent, dispatch, effectiveMode, imageFile, jsonSchemaText]);
   return (
-    <div className="p-4 md:p-12">
+    <div className="flex flex-col px-4 pt-4 pb-2 max-[1179px]:min-h-[100dvh] min-[1180px]:h-[100dvh] md:px-12 md:pt-12 md:pb-3">
       <div className="flex items-center gap-3 px-4">
         <button
           className="rounded-full border p-3 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
@@ -615,9 +615,9 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           </button>
         </div>
       </div>
-      <div className="mt-5 flex w-full grid-cols-5 flex-col gap-10 min-[1180px]:grid min-[1180px]:gap-5">
-        <div className="col-span-2 flex flex-col gap-5">
-          <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
+      <div className="mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-[30px] bg-[#F6F6F6] p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden dark:bg-[#383838]">
+        <div className="scrollbar-thin col-span-2 flex flex-col gap-5 max-[1179px]:overflow-visible min-[1180px]:max-h-full min-[1180px]:overflow-y-auto min-[1180px]:pr-3">
+          <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
             <h2 className="text-lg font-semibold">Meta</h2>
             <input
               className="border-silver text-jet dark:bg-raisin-black dark:text-bright-gray dark:placeholder:text-silver mt-3 w-full rounded-3xl border bg-white px-5 py-3 text-sm outline-hidden placeholder:text-gray-400 dark:border-[#7E7E7E]"
@@ -650,7 +650,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               />
             </div>
           </div>
-          <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
+          <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
             <h2 className="text-lg font-semibold">Source</h2>
             <div className="mt-3">
               <div className="flex flex-wrap items-center gap-1">
@@ -744,7 +744,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               </div>
             </div>
           </div>
-          <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
+          <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
             <div className="flex flex-wrap items-end gap-1">
               <div className="min-w-20 grow basis-full sm:basis-0">
                 <Prompts
@@ -781,7 +781,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               </button>
             </div>
           </div>
-          <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
+          <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
             <h2 className="text-lg font-semibold">Tools</h2>
             <div className="mt-3 flex flex-wrap items-center gap-1">
               <button
@@ -823,7 +823,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               />
             </div>
           </div>
-          <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
+          <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
             <h2 className="text-lg font-semibold">Agent type</h2>
             <div className="mt-3">
               <Dropdown
@@ -848,7 +848,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               />
             </div>
           </div>
-          <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
+          <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
             <button
               onClick={() =>
                 setIsAdvancedSectionExpanded(!isAdvancedSectionExpanded)
@@ -1032,9 +1032,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
             )}
           </div>
         </div>
-        <div className="col-span-3 flex flex-col gap-3 rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
+        <div className="col-span-3 flex flex-col gap-2 max-[1179px]:h-auto max-[1179px]:px-0 max-[1179px]:py-0 min-[1180px]:h-full min-[1180px]:py-2 dark:text-[#E0E0E0]">
           <h2 className="text-lg font-semibold">Preview</h2>
-          <AgentPreviewArea />
+          <div className="flex-1 max-[1179px]:overflow-visible min-[1180px]:min-h-0 min-[1180px]:overflow-hidden">
+            <AgentPreviewArea />
+          </div>
         </div>
       </div>
       <ConfirmationModal
@@ -1071,9 +1073,9 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
 function AgentPreviewArea() {
   const selectedAgent = useSelector(selectSelectedAgent);
   return (
-    <div className="dark:bg-raisin-black h-full w-full rounded-[30px] border border-[#F6F6F6] bg-white max-[1180px]:h-192 dark:border-[#7E7E7E]">
+    <div className="dark:bg-raisin-black w-full rounded-[30px] border border-[#F6F6F6] bg-white max-[1179px]:h-[600px] min-[1180px]:h-full dark:border-[#7E7E7E]">
       {selectedAgent?.status === 'published' ? (
-        <div className="flex h-full w-full flex-col justify-end overflow-auto rounded-[30px]">
+        <div className="flex h-full w-full flex-col overflow-hidden rounded-[30px]">
           <AgentPreview />
         </div>
       ) : (

frontend/src/agents/SharedAgent.tsx

@@ -177,13 +177,15 @@ export default function SharedAgent() {
           />
         </div>
         <div className="flex w-[95%] max-w-[1500px] flex-col items-center pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
-          <MessageInput
-            onSubmit={(text) => handleQuestionSubmission(text)}
-            loading={status === 'loading'}
-            showSourceButton={sharedAgent ? false : true}
-            showToolButton={sharedAgent ? false : true}
-            autoFocus={false}
-          />
+          <div className="w-full px-2">
+            <MessageInput
+              onSubmit={(text) => handleQuestionSubmission(text)}
+              loading={status === 'loading'}
+              showSourceButton={sharedAgent ? false : true}
+              showToolButton={sharedAgent ? false : true}
+              autoFocus={false}
+            />
+          </div>
           <p className="text-gray-4000 dark:text-sonic-silver hidden w-screen self-center bg-transparent py-2 text-center text-xs md:inline md:w-full">
             {t('tagline')}
           </p>

frontend/src/components/MessageInput.tsx

@@ -91,8 +91,10 @@ export default function MessageInput({
 
     const apiHost = import.meta.env.VITE_API_HOST;
     const xhr = new XMLHttpRequest();
+    const uniqueId = crypto.randomUUID();
 
     const newAttachment = {
+      id: uniqueId,
       fileName: file.name,
       progress: 0,
       status: 'uploading' as const,
@@ -106,7 +108,7 @@ export default function MessageInput({
         const progress = Math.round((event.loaded / event.total) * 100);
         dispatch(
           updateAttachment({
-            taskId: newAttachment.taskId,
+            id: uniqueId,
             updates: { progress },
           }),
         );
@@ -119,7 +121,7 @@ export default function MessageInput({
         if (response.task_id) {
           dispatch(
             updateAttachment({
-              taskId: newAttachment.taskId,
+              id: uniqueId,
               updates: {
                 taskId: response.task_id,
                 status: 'processing',
@@ -131,7 +133,7 @@ export default function MessageInput({
       } else {
         dispatch(
           updateAttachment({
-            taskId: newAttachment.taskId,
+            id: uniqueId,
             updates: { status: 'failed' },
           }),
         );
@@ -141,7 +143,7 @@ export default function MessageInput({
     xhr.onerror = () => {
       dispatch(
         updateAttachment({
-          taskId: newAttachment.taskId,
+          id: uniqueId,
           updates: { status: 'failed' },
         }),
       );
@@ -167,7 +169,7 @@ export default function MessageInput({
             if (data.status === 'SUCCESS') {
               dispatch(
                 updateAttachment({
-                  taskId: attachment.taskId!,
+                  id: attachment.id,
                   updates: {
                     status: 'completed',
                     progress: 100,
@@ -179,14 +181,14 @@ export default function MessageInput({
             } else if (data.status === 'FAILURE') {
               dispatch(
                 updateAttachment({
-                  taskId: attachment.taskId!,
+                  id: attachment.id,
                   updates: { status: 'failed' },
                 }),
               );
             } else if (data.status === 'PROGRESS' && data.result?.current) {
               dispatch(
                 updateAttachment({
-                  taskId: attachment.taskId!,
+                  id: attachment.id,
                   updates: { progress: data.result.current },
                 }),
               );
@@ -195,7 +197,7 @@ export default function MessageInput({
           .catch(() => {
             dispatch(
               updateAttachment({
-                taskId: attachment.taskId!,
+                id: attachment.id,
                 updates: { status: 'failed' },
               }),
             );
@@ -260,12 +262,12 @@ export default function MessageInput({
   };
 
   return (
-    <div className="mx-2 flex w-full flex-col">
+    <div className="flex w-full flex-col">
       <div className="border-dark-gray bg-lotion dark:border-grey relative flex w-full flex-col rounded-[23px] border dark:bg-transparent">
         <div className="flex flex-wrap gap-1.5 px-2 py-2 sm:gap-2 sm:px-3">
-          {attachments.map((attachment, index) => (
+          {attachments.map((attachment) => (
             <div
-              key={index}
+              key={attachment.id}
               className={`group dark:text-bright-gray relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] sm:px-3 sm:py-1.5 sm:text-[14px] dark:bg-[#393B3D] ${
                 attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
               }`}
@@ -327,11 +329,7 @@ export default function MessageInput({
               <button
                 className="ml-1.5 flex items-center justify-center rounded-full p-1"
                 onClick={() => {
-                  if (attachment.id) {
-                    dispatch(removeAttachment(attachment.id));
-                  } else if (attachment.taskId) {
-                    dispatch(removeAttachment(attachment.taskId));
-                  }
+                  dispatch(removeAttachment(attachment.id));
                 }}
                 aria-label={t('conversation.attachments.remove')}
               >

frontend/src/components/Sidebar.tsx

@@ -33,7 +33,7 @@ export default function Sidebar({
   return (
     <div ref={sidebarRef} className="h-vh relative">
       <div
-        className={`dark:bg-chinese-black fixed top-0 right-0 z-50 h-full w-72 transform bg-white shadow-xl transition-all duration-300 sm:w-96 ${
+        className={`dark:bg-chinese-black fixed top-0 right-0 z-50 h-full w-64 transform bg-white shadow-xl transition-all duration-300 sm:w-80 ${
           isOpen ? 'translate-x-[10px]' : 'translate-x-full'
         } border-l border-[#9ca3af]/10`}
       >

frontend/src/components/SourcesPopup.tsx

@@ -1,4 +1,5 @@
 import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Doc } from '../models/misc';
@@ -107,7 +108,7 @@ export default function SourcesPopup({
     onClose();
   };
 
-  return (
+  const popupContent = (
     <div
       ref={popupRef}
       className="bg-lotion dark:bg-charleston-green-2 fixed z-50 flex flex-col rounded-xl shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
@@ -218,7 +219,7 @@ export default function SourcesPopup({
             </>
           ) : (
             <div className="dark:text-bright-gray p-4 text-center text-gray-500 dark:text-[14px]">
-              {t('noSourcesAvailable')}
+              {t('conversation.sources.noSourcesAvailable')}
             </div>
           )}
         </div>
@@ -245,4 +246,6 @@ export default function SourcesPopup({
       </div>
     </div>
   );
+
+  return createPortal(popupContent, document.body);
 }

frontend/src/components/ToolsPopup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -133,10 +134,10 @@ export default function ToolsPopup({
     tool.displayName.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
-  return (
+  const popupContent = (
     <div
       ref={popupRef}
-      className="border-light-silver bg-lotion dark:border-dim-gray dark:bg-charleston-green-2 fixed z-9999 rounded-lg border shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
+      className="border-light-silver bg-lotion dark:border-dim-gray dark:bg-charleston-green-2 fixed z-50 rounded-lg border shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
       style={{
         top: popupPosition.showAbove ? popupPosition.top : undefined,
         bottom: popupPosition.showAbove
@@ -242,4 +243,6 @@ export default function ToolsPopup({
       </div>
     </div>
   );
+
+  return createPortal(popupContent, document.body);
 }

frontend/src/components/UploadToast.tsx

@@ -44,7 +44,10 @@ export default function UploadToast() {
   };
 
   return (
-    <div className="fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2">
+    <div
+      className="fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2"
+      onMouseDown={(e) => e.stopPropagation()}
+    >
       {uploadTasks
         .filter((task) => !task.dismissed)
         .map((task) => {

frontend/src/conversation/Conversation.tsx

@@ -224,7 +224,7 @@ export default function Conversation() {
       <div className="bg-opacity-0 z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
         <div
           {...getRootProps()}
-          className="flex w-full items-center rounded-[40px]"
+          className="flex w-full items-center rounded-[40px] px-2"
         >
           <label htmlFor="file-upload" className="sr-only">
             {t('modals.uploadDoc.label')}

frontend/src/conversation/ConversationBubble.tsx

@@ -635,7 +635,7 @@ function AllSources(sources: AllSourcesProps) {
         <p className="text-left text-xl">{`${sources.sources.length} ${t('conversation.sources.title')}`}</p>
         <div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
       </div>
-      <div className="mt-6 flex h-[90%] w-60 flex-col items-center gap-4 overflow-y-auto sm:w-80">
+      <div className="scrollbar-thin mt-6 flex h-[90%] w-52 flex-col gap-4 overflow-y-auto pr-3 sm:w-64">
         {sources.sources.map((source, index) => {
           const isExternalSource = source.link && source.link !== 'local';
           return (