Frontend audit: refinements (#2083)

* (fix:attachements) sep id for redux ops

* (fix:ui) popups, toast, share modal

* (feat:agentsPreview) stable preview, ui fixes

* (fix:ui) light theme icon, sleek scroll

---------

Co-authored-by: GH Action - Upstream Sync <action@github.com>

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 (

frontend/src/conversation/SharedConversation.tsx

@@ -161,14 +161,16 @@ export const SharedConversation = () => {
         />
         <div className="flex w-full max-w-[1200px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           {apiKey ? (
-            <MessageInput
-              onSubmit={(text) => {
-                handleQuestionSubmission(text);
-              }}
-              loading={status === 'loading'}
-              showSourceButton={false}
-              showToolButton={false}
-            />
+            <div className="w-full px-2">
+              <MessageInput
+                onSubmit={(text) => {
+                  handleQuestionSubmission(text);
+                }}
+                loading={status === 'loading'}
+                showSourceButton={false}
+                showToolButton={false}
+              />
+            </div>
           ) : (
             <button
               onClick={() => navigate('/')}