fix: fix attachments design issues (#207)(#217)

Refs: #207

src/components/Chat/ChatInput/AttachButton.tsx

@@ -15,6 +15,7 @@ import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { ModelsSelectors } from '@/src/store/models/models.reducers';
 
 import { Menu, MenuItem } from '../../Common/DropdownMenu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../Common/Tooltip';
 import { FileSelect } from '../../Files/FileSelect';
 import { PreUploadDialog } from '../../Files/PreUploadModal';
 
@@ -88,10 +89,20 @@ export const AttachButton = () => {
         <Menu
           type="contextMenu"
           disabled={messageIsStreaming || isModelsLoading}
-          trigger={<IconPaperclip className="text-gray-500" size={24} />}
+          trigger={
+            <Tooltip isTriggerClickable={true}>
+              <TooltipTrigger>
+                <IconPaperclip
+                  className="text-gray-500 hover:text-blue-500"
+                  size={24}
+                />
+              </TooltipTrigger>
+              <TooltipContent>{t('Attach files')}</TooltipContent>
+            </Tooltip>
+          }
         >
           <MenuItem
-            className="hover:bg-violet/15"
+            className="hover:bg-blue-500/20"
             item={
               <div className="flex items-center gap-3">
                 <IconFileDescription
@@ -104,7 +115,7 @@ export const AttachButton = () => {
             onClick={handleOpenAttachmentsModal}
           />
           <MenuItem
-            className="hover:bg-violet/15"
+            className="hover:bg-blue-500/20"
             item={
               <div className="flex items-center gap-3">
                 <IconUpload className="shrink-0 text-gray-500" size={24} />

src/components/Chat/ChatMessage.tsx

@@ -32,9 +32,9 @@ import { UISelectors } from '@/src/store/ui/ui.reducers';
 import { ModelIcon } from '../Chatbar/components/ModelIcon';
 
 import { ConfirmDialog } from '../Common/ConfirmDialog';
+import { ErrorMessage } from '../Common/ErrorMessage';
 import ChatMDComponent from '../Markdown/ChatMDComponent';
 import { MessageAttachments } from './MessageAttachments';
-import { MessageError } from './MessageError';
 import { MessageStages } from './MessageStages';
 
 export interface Props {
@@ -327,9 +327,7 @@ export const ChatMessage: FC<Props> = memo(
                       attachments={message.custom_content.attachments}
                     />
                   )}
-                  {!!message.errorMessage && (
-                    <MessageError error={message.errorMessage}></MessageError>
-                  )}
+                  <ErrorMessage error={message.errorMessage}></ErrorMessage>
                 </div>
 
                 <div className="flex w-[60px] shrink-0 flex-col justify-between">

src/components/Chat/MessageStage.tsx

@@ -1,10 +1,10 @@
+import { IconExclamationCircle } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
 import { Stage } from '@/src/types/chat';
 
 import ChevronDown from '../../../public/images/icons/chevron-down.svg';
 import CircleCheck from '../../../public/images/icons/circle-check.svg';
-import CircleExclamation from '../../../public/images/icons/circle-exclamation.svg';
 import Loader from '../../../public/images/icons/loader.svg';
 import ChatMDComponent from '../Markdown/ChatMDComponent';
 import { MessageAttachments } from './MessageAttachments';
@@ -33,9 +33,8 @@ const StageTitle = ({ isOpened, stage }: StageTitleProps) => {
           data-qa="stage-completed"
         />
       ) : (
-        <CircleExclamation
-          height={20}
-          width={20}
+        <IconExclamationCircle
+          size={20}
           className="shrink-0 grow-0 basis-auto text-gray-500"
         />
       )}

src/components/Chat/RequestApiKeyDialog.tsx

@@ -288,7 +288,7 @@ export const RequestAPIKeyDialog: FC<Props> = ({ isOpen, onClose }) => {
     submitted: submitted,
   });
 
-  const checkboxClassName = classNames('checkbox-form', 'peer', {
+  const checkboxClassName = classNames('checkbox', 'peer', {
     'input-invalid': submitted,
   });
 

src/components/Chat/MessageError.tsx → src/components/Common/ErrorMessage.tsx

@@ -1,14 +1,18 @@
-import CicrleExclamation from '../../../public/images/icons/circle-exclamation.svg';
+import { IconExclamationCircle } from '@tabler/icons-react';
 
 export interface Props {
-  error: string;
+  error?: string;
 }
 
-export const MessageError = ({ error }: Props) => {
+export const ErrorMessage = ({ error }: Props) => {
+  if (!error) {
+    return null;
+  }
+
   return (
     <div className="flex w-full gap-3 rounded bg-red-200 p-3 text-red-800 dark:bg-red-900 dark:text-red-400">
       <span className="flex shrink-0 items-center">
-        <CicrleExclamation height={24} width={24}></CicrleExclamation>
+        <IconExclamationCircle size={24} />
       </span>
       <span>{error}</span>
     </div>

src/components/Files/FileFolderSelect.tsx

@@ -21,9 +21,9 @@ import { HighlightColor } from '@/src/types/common';
 
 import { FilesActions, FilesSelectors } from '@/src/store/files/files.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
-import { UIActions } from '@/src/store/ui/ui.reducers';
 
 import FolderPlus from '../../../public/images/icons/folder-plus.svg';
+import { ErrorMessage } from '../Common/ErrorMessage';
 import { Spinner } from '../Common/Spinner';
 import Folder from '../Folder';
 
@@ -66,7 +66,7 @@ export const FileFolderSelect = ({
   );
   const [openedFoldersIds, setOpenedFoldersIds] = useState<string[]>([]);
   const [isAllFilesOpened, setIsAllFilesOpened] = useState(true);
-
+  const [errorMessage, setErrorMessage] = useState<string | undefined>();
   const [selectedFolderId, setSelectedFolderId] = useState<string | undefined>(
     selectedFolderName,
   );
@@ -150,11 +150,8 @@ export const FileFolderSelect = ({
       );
 
       if (folderWithSameName) {
-        dispatch(
-          UIActions.showToast({
-            message: t(`Not allowed to have folders with same names`),
-            type: 'error',
-          }),
+        setErrorMessage(
+          t(`Not allowed to have folders with same names`) as string,
         );
         return;
       }
@@ -194,6 +191,8 @@ export const FileFolderSelect = ({
                   </div>
                 ) : (
                   <div className="group/modal flex flex-col gap-2 overflow-auto">
+                    <ErrorMessage error={errorMessage} />
+
                     <input
                       name="titleInput"
                       placeholder={t('Search folders') || ''}
@@ -204,8 +203,10 @@ export const FileFolderSelect = ({
                     <div className="flex min-h-[350px] flex-col overflow-auto">
                       <button
                         className={classNames(
-                          'flex items-center gap-1 rounded py-1 text-xs text-gray-500',
-                          !selectedFolderId && 'bg-blue-500/20',
+                          'flex items-center gap-1 rounded border-l-2 py-1 text-xs text-gray-500',
+                          !selectedFolderId
+                            ? 'border-blue-500 bg-blue-500/20'
+                            : 'border-transparent',
                         )}
                         onClick={() => handleToggleFolder(undefined)}
                       >

src/components/Files/FileItem.tsx

@@ -58,7 +58,7 @@ export const FileItem = ({ item, level, onEvent }: Props) => {
 
   return (
     <div
-      className="group/file-item flex justify-between gap-3 px-3 py-1.5"
+      className="group/file-item flex justify-between gap-3 rounded px-3 py-1.5 hover:bg-blue-500/20"
       style={{
         paddingLeft: (level && `${0.875 + level * 1.5}rem`) || '0.875rem',
       }}
@@ -82,7 +82,7 @@ export const FileItem = ({ item, level, onEvent }: Props) => {
             )}
           >
             <input
-              className="checkbox-form peer h-[18px] w-[18px]"
+              className="checkbox peer h-[18px] w-[18px] bg-gray-100 dark:bg-gray-700"
               type="checkbox"
               checked={isSelected}
               onChange={handleToggleFile}

src/components/Files/FileSelect.tsx

@@ -25,6 +25,7 @@ import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { UIActions } from '@/src/store/ui/ui.reducers';
 
 import FolderPlus from '../../../public/images/icons/folder-plus.svg';
+import { ErrorMessage } from '../Common/ErrorMessage';
 import { Spinner } from '../Common/Spinner';
 import Folder from '../Folder';
 import { FileItem, FileItemEventIds } from './FileItem';
@@ -206,6 +207,25 @@ export const FileSelect = ({
     onClose(selectedFilesIds);
   }, [maximumAttachmentsAmount, onClose, selectedFilesIds, t]);
 
+  const handleUploadFiles = useCallback(
+    (
+      selectedFiles: Required<Pick<DialFile, 'fileContent' | 'id' | 'name'>>[],
+      folderPath: string | undefined,
+    ) => {
+      selectedFiles.forEach((file) => {
+        dispatch(
+          FilesActions.uploadFile({
+            fileContent: file.fileContent,
+            id: file.id,
+            relativePath: folderPath,
+            name: file.name,
+          }),
+        );
+      });
+    },
+    [dispatch],
+  );
+
   return (
     <FloatingPortal id="theme-main">
       {isOpen && (
@@ -244,11 +264,9 @@ export const FileSelect = ({
                       maxAttachmentsAmount: maximumAttachmentsAmount,
                     })}
                 </p>
-                {errorMessage && errorMessage?.length > 0 && (
-                  <p className="rounded bg-red-200 p-3 text-red-800 dark:bg-red-900 dark:text-red-400">
-                    {errorMessage}
-                  </p>
-                )}
+
+                <ErrorMessage error={errorMessage} />
+
                 {folders.length === 0 && loadingStatuses.has(foldersStatus) ? (
                   <div className="flex min-h-[300px] items-center justify-center">
                     <Spinner />
@@ -358,29 +376,15 @@ export const FileSelect = ({
                 )}
               </div>
 
-              <PreUploadDialog
-                isOpen={isUploadFromDeviceOpened}
-                allowedTypes={allowedTypes}
-                initialFilesSelect={true}
-                onUploadFiles={(
-                  selectedFiles: Required<
-                    Pick<DialFile, 'fileContent' | 'id' | 'name'>
-                  >[],
-                  folderPath: string | undefined,
-                ) => {
-                  selectedFiles.forEach((file) => {
-                    dispatch(
-                      FilesActions.uploadFile({
-                        fileContent: file.fileContent,
-                        id: file.id,
-                        relativePath: folderPath,
-                        name: file.name,
-                      }),
-                    );
-                  });
-                }}
-                onClose={() => setIsUploadFromDeviceOpened(false)}
-              />
+              {isUploadFromDeviceOpened && (
+                <PreUploadDialog
+                  isOpen
+                  allowedTypes={allowedTypes}
+                  initialFilesSelect={true}
+                  onUploadFiles={handleUploadFiles}
+                  onClose={() => setIsUploadFromDeviceOpened(false)}
+                />
+              )}
             </div>
           </FloatingFocusManager>
         </FloatingOverlay>

src/components/Files/PreUploadModal.tsx

@@ -28,6 +28,7 @@ import { DialFile } from '@/src/types/files';
 import { FilesActions, FilesSelectors } from '@/src/store/files/files.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 
+import { ErrorMessage } from '../Common/ErrorMessage';
 import { FileFolderSelect } from './FileFolderSelect';
 
 interface Props {
@@ -267,15 +268,15 @@ export const PreUploadDialog = ({
 
   useEffect(() => {
     if (isOpen) {
-      setSelectedFiles([]);
-      setErrorMessage('');
-
       dispatch(FilesActions.getFiles({ path: folderPath }));
     }
+  }, [dispatch, folderPath, isOpen]);
+
+  useEffect(() => {
     if (initialFilesSelect && isOpen) {
       setTimeout(() => uploadInputRef.current?.click());
     }
-  }, [dispatch, folderPath, initialFilesSelect, isOpen]);
+  }, [initialFilesSelect, isOpen]);
 
   useEffect(() => {
     setSelectedFiles((oldFiles) =>
@@ -317,17 +318,14 @@ export const PreUploadDialog = ({
                   </div>
                   <p id={descriptionId}>
                     {t(
-                      'Max file size up to 1 GB. Supported types: {{allowedTypes}}.',
+                      'Max file size up to 512 Mb. Supported types: {{allowedTypes}}.',
                       {
                         allowedTypes: allowedTypes.join(', '),
                       },
                     )}
                   </p>
-                  {errorMessage && errorMessage?.length > 0 && (
-                    <p className="rounded bg-red-200 p-3 text-red-800 dark:bg-red-900 dark:text-red-400">
-                      {errorMessage}
-                    </p>
-                  )}
+
+                  <ErrorMessage error={errorMessage} />
 
                   <div className="flex flex-col gap-1">
                     <div>

src/components/Folder/Folder.tsx

@@ -360,12 +360,12 @@ const Folder = <T extends Conversation | Prompt | DialFile>({
     >
       <div
         className={classNames(
-          'relative flex h-[30px] items-center',
+          'relative flex h-[30px] items-center rounded border-l-2',
           isRenaming ||
             (allItems === undefined &&
               highlightedFolders?.includes(currentFolder.id))
-            ? bgColor
-            : '',
+            ? classNames(bgColor, 'border-blue-500')
+            : 'border-transparent',
         )}
         data-qa="folder"
       >

src/pages/api/files/index.ts

@@ -97,6 +97,10 @@ async function handleGetRequest(
 
   res.status(proxyRes.status);
   res.setHeader('transfer-encoding', 'chunked');
+  res.setHeader(
+    'Content-Type',
+    proxyRes.headers.get('Content-Type') || 'text/plain',
+  );
 
   proxyRes.body?.pipe(res);
 }

src/styles/globals.css

@@ -72,9 +72,6 @@ pre:has(div.codeblock) {
   .input-form {
     @apply m-0.5 w-full rounded border border-gray-400 bg-transparent p-3 placeholder:text-gray-500 hover:border-blue-500 focus:border-blue-500 focus:outline-none dark:border-gray-600 dark:hover:border-blue-500 dark:focus:border-blue-500;
   }
-  .checkbox-form {
-    @apply relative m-0 mr-2 inline h-4 w-4 shrink-0 appearance-none rounded-sm border border-gray-400 text-blue-500 checked:border-blue-500 hover:border-blue-500 focus:border-blue-500 focus-visible:outline-none dark:border-gray-600 checked:dark:border-blue-500;
-  }
 
   .submitted {
   }
@@ -117,6 +114,12 @@ pre:has(div.codeblock) {
   }
 }
 
+@layer components {
+  .checkbox {
+    @apply relative m-0 mr-2 inline h-4 w-4 shrink-0 appearance-none rounded-sm border border-gray-400 text-blue-500 checked:border-blue-500 hover:border-blue-500 focus:border-blue-500 focus-visible:outline-none dark:border-gray-600 checked:dark:border-blue-500;
+  }
+}
+
 .h-screen {
   height: 100vh; /* Fallback for browsers that do not support Custom Properties */
   height: calc(var(--vh, 1vh) * 100);