fix: fix design issues (#214)

Refs: #207
epam · Nov 23, 2023 · 7ccf247 · 7ccf247
1 parent 91b2d6c
commit 7ccf247
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 33 deletions.
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -338,7 +338,7 @@ export const Chat = memo(() => {
         }),
       );
     },
-    [dispatch, modelsMap],
+    [addonsMap, dispatch, modelsMap],
   );
 
   const handleSelectAssistantSubModel = useCallback(

diff --git a/src/components/Files/FileFolderSelect.tsx b/src/components/Files/FileFolderSelect.tsx
@@ -141,8 +141,12 @@ export const FileFolderSelect = ({
   );
   const handleRenameFolder = useCallback(
     (newName: string, folderId: string) => {
+      const renamingFolder = folders.find((folder) => folder.id === folderId);
       const folderWithSameName = folders.find(
-        (folder) => folder.name === newName && folderId !== folder.id,
+        (folder) =>
+          folder.name === newName.trim() &&
+          folderId !== folder.id &&
+          folder.folderId === renamingFolder?.folderId,
       );
 
       if (folderWithSameName) {
@@ -192,9 +196,7 @@ export const FileFolderSelect = ({
                   <div className="group/modal flex flex-col gap-2 overflow-auto">
                     <input
                       name="titleInput"
-                      placeholder={
-                        t('Search model, assistant or application') || ''
-                      }
+                      placeholder={t('Search folders') || ''}
                       type="text"
                       onChange={handleSearch}
                       className="m-0 w-full rounded border border-gray-400 bg-transparent px-3 py-2 outline-none placeholder:text-gray-500 focus-visible:border-blue-500 dark:border-gray-600 dark:focus-visible:border-blue-500"
@@ -251,19 +253,17 @@ export const FileFolderSelect = ({
                       )}
                     </div>
                     <div className="flex items-center justify-between">
-                      <div>
-                        <button onClick={handleNewFolder}>
-                          <FolderPlus
-                            height={24}
-                            width={24}
-                            className="text-gray-500 hover:text-blue-500"
-                          />
-                        </button>
-                      </div>
+                      <button onClick={handleNewFolder}>
+                        <FolderPlus
+                          height={24}
+                          width={24}
+                          className="text-gray-500 hover:text-blue-500"
+                        />
+                      </button>
                       <div>
                         <button
                           onClick={() => onClose(selectedFolderId)}
-                          className="rounded bg-blue-500 px-3 py-2"
+                          className="button button-primary"
                         >
                           {t('Select folder')}
                         </button>

diff --git a/src/components/Files/FileItem.tsx b/src/components/Files/FileItem.tsx
@@ -64,9 +64,9 @@ export const FileItem = ({ item, level, onEvent }: Props) => {
       }}
     >
       <div className="flex items-center gap-2 overflow-hidden">
-        <div className="group/file-icon text-gray-500">
+        <div className="text-gray-500">
           {!isSelected && item.status !== 'FAILED' ? (
-            <IconFile className="group-hover/file-icon:hidden" size={18} />
+            <IconFile className="group-hover/file-item:hidden" size={18} />
           ) : (
             item.status === 'FAILED' && (
               <IconExclamationCircle
@@ -77,7 +77,7 @@ export const FileItem = ({ item, level, onEvent }: Props) => {
           )}
           <div
             className={classNames(
-              'relative h-[18px] w-[18px] group-hover/file-icon:flex',
+              'relative h-[18px] w-[18px] group-hover/file-item:flex',
               isSelected ? 'flex' : 'hidden',
             )}
           >
@@ -103,7 +103,7 @@ export const FileItem = ({ item, level, onEvent }: Props) => {
         </span>
       </div>
 
-      <div className="flex items-center">
+      <div className="flex items-center gap-2">
         {item.status === 'UPLOADING' && (
           <div className="h-[3px] w-[60px] overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
             <div

diff --git a/src/components/Files/FileSelect.tsx b/src/components/Files/FileSelect.tsx
@@ -257,9 +257,7 @@ export const FileSelect = ({
                   <div className="group/modal flex flex-col gap-2 overflow-auto">
                     <input
                       name="titleInput"
-                      placeholder={
-                        t('Search model, assistant or application') || ''
-                      }
+                      placeholder={t('Search files') || ''}
                       type="text"
                       onChange={handleSearch}
                       className="m-0 w-full rounded border border-gray-400 bg-transparent px-3 py-2 outline-none placeholder:text-gray-500 focus-visible:border-blue-500 dark:border-gray-600 dark:focus-visible:border-blue-500"
@@ -333,15 +331,13 @@ export const FileSelect = ({
                       )}
                     </div>
                     <div className="flex items-center justify-between">
-                      <div>
-                        <button onClick={handleNewFolder}>
-                          <FolderPlus
-                            height={24}
-                            width={24}
-                            className="text-gray-500 hover:text-blue-500"
-                          />
-                        </button>
-                      </div>
+                      <button onClick={handleNewFolder}>
+                        <FolderPlus
+                          height={24}
+                          width={24}
+                          className="text-gray-500 hover:text-blue-500"
+                        />
+                      </button>
                       <div className="flex items-center gap-3">
                         <button
                           onClick={() => setIsUploadFromDeviceOpened(true)}

diff --git a/src/pages/api/chat.ts b/src/pages/api/chat.ts
@@ -163,7 +163,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
             attachments: messages[i].custom_content?.attachments?.map(
               (attachment) => ({
                 ...attachment,
-                url: `${process.env.OPENAI_API_HOST}/v1/files/${attachment.url}`,
+                url: `${process.env.OPENAI_API_HOST}/v1/files/${attachment.url}?path=absolute`,
               }),
             ),
             state: messages[i].custom_content?.state,

diff --git a/src/store/files/files.reducers.ts b/src/store/files/files.reducers.ts
@@ -239,7 +239,7 @@ export const filesSlice = createSlice({
         );
         return {
           ...folder,
-          name: payload.newName,
+          name: payload.newName.trim(),
           id: getPathNameId(payload.newName, oldFolderIdPath),
         };
       });
-Original file line number
+Diff line change
@@ Expand Up / @@ -338,7 +338,7 @@ export const Chat = memo(() => { @@
             }),
           );
         },
-        [dispatch, modelsMap],
+        [addonsMap, dispatch, modelsMap],
       );
       const handleSelectAssistantSubModel = useCallback(
@@ Expand Down @@