Assistant MVP

components/Assistant/FileItem.tsx

@@ -0,0 +1,217 @@
+import { IconCheck, IconDotsVertical, IconDownload, IconFile, IconPencil, IconTrash, IconX } from "@tabler/icons-react";
+import { Fragment, KeyboardEvent, MouseEvent, MouseEventHandler, PropsWithChildren, useContext, useEffect, useRef, useState } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import prettyBytes from "pretty-bytes";
+import { useTranslation } from "react-i18next";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+import SidebarActionButton from "../Buttons/SidebarActionButton/SidebarActionButton";
+import FilesModalContext from "./FilesModal.context";
+import { UploadedFile } from "@/types/uploadedFile";
+
+dayjs.extend(relativeTime);
+
+type Props = {
+  file: UploadedFile;
+}
+
+export function FileItem({ file }: Props): JSX.Element {
+  const {
+    deleteFile,
+    renameFile,
+    downloadFile,
+  } = useContext(FilesModalContext);
+
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+  const [isRenaming, setIsRenaming] = useState<boolean>(false);
+  const [renameValue, setRenameValue] = useState<string>(file.name);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const { t } = useTranslation('model');
+
+  const handleDeleteButtonClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setIsDeleting(true);
+  };
+
+  const handleRenameButtonClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setIsRenaming(true);
+  };
+
+  const handleConfirmButtonClick: MouseEventHandler<HTMLButtonElement> = async (e) => {
+    e.stopPropagation();
+    if (isDeleting) {
+      deleteFile(file.name);
+      setIsDeleting(false);
+    } else if (isRenaming && await renameFile(file.name, renameValue)) {
+      setIsRenaming(false);
+    }
+  };
+
+  const handleCancelButtonClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    setIsDeleting(false);
+    setIsRenaming(false);
+    setRenameValue(file.name);
+  };
+
+  const handleInputKeyDown = async (e: KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (e.code === 'Enter' && await renameFile(file.name, renameValue)) {
+      setIsRenaming(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isRenaming && inputRef.current) {
+      const filename: string | undefined = file.name.match(/(.+?)\.[^.]*$|$/)![1];
+      inputRef.current.setSelectionRange(0, filename?.length || 0);
+    }
+  }, [isRenaming, file.name]);
+
+  useEffect(() => {
+    setRenameValue(file.name);
+  }, [file.name]);
+
+  return (
+    <Menu
+      as="div"
+      className="relative flex flex-row flex-grow flex-shrink items-center min-w-0 gap-3 p-3 select-none"
+    >
+      <IconFile
+        className="flex-shrink-0"
+        size={18}
+      />
+      {isRenaming ? (
+        <input
+          className="flex-1 min-w-0 border-neutral-400 bg-transparent text-left text-sm text-white outline-none focus:border-neutral-100 pointer-events-auto"
+          type="text"
+          value={renameValue}
+          onChange={(e) => setRenameValue(e.target.value)}
+          onKeyDown={handleInputKeyDown}
+          autoFocus
+          ref={inputRef}
+        />
+      ) : (
+        <p className="flex-1 text-sm text-left text-ellipsis overflow-hidden">
+          {file.name}
+        </p>
+      )}
+
+      {(isDeleting || isRenaming) && (
+        <div className="flex flex-row flex-shrink-0 items-center space-x-2 text-gray-300 pointer-events-auto">
+          <SidebarActionButton handleClick={handleConfirmButtonClick}>
+            <IconCheck size={18} />
+          </SidebarActionButton>
+          <SidebarActionButton handleClick={handleCancelButtonClick}>
+            <IconX size={18} />
+          </SidebarActionButton>
+        </div>
+      )}
+
+      {!isDeleting && !isRenaming && (
+        <div className="flex flex-row flex-shrink-0 items-center gap-2 text-gray-300">
+          <p className="block mobile:hidden text-sm text-neutral-400 whitespace-nowrap">
+            {dayjs(file.updatedAt).fromNow()}
+          </p>
+          <p className="w-20 mr-2 text-sm text-right text-neutral-400 whitespace-nowrap">
+            {prettyBytes(file.size, { minimumFractionDigits: 0, maximumFractionDigits: 1 }) || '--'}
+          </p>
+          <div className="flex tablet:hidden flex-row items-center gap-2 pointer-events-auto">
+            <SidebarActionButton handleClick={(e) => {
+              e.stopPropagation();
+              downloadFile(file.name);
+            }}>
+              <IconDownload size={18} />
+            </SidebarActionButton>
+            <SidebarActionButton handleClick={handleRenameButtonClick}>
+              <IconPencil size={18} />
+            </SidebarActionButton>
+            <SidebarActionButton handleClick={handleDeleteButtonClick}>
+              <IconTrash size={18} />
+            </SidebarActionButton>
+          </div>
+          <Menu.Button
+            className="hidden tablet:block p-1 pointer-events-auto"
+            onClick={(event) => {
+              event.stopPropagation();
+              setTimeout(() => {
+                if (menuRef.current) {
+                  menuRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+              }, 100);
+            }}
+          >
+            <IconDotsVertical size={18} />
+          </Menu.Button>
+        </div>
+      )}
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items
+          className="absolute top-full right-0 w-56 p-2 rounded-md bg-[#202123] drop-shadow-xl focus:outline-none z-10"
+          onClick={(event) => event.stopPropagation()}
+        >
+          <div ref={menuRef}>
+            <MenuItemButton
+              onClick={(event) => {
+                event.stopPropagation();
+                downloadFile(file.name);
+              }}
+            >
+              <IconDownload size={18} />
+              {t('Download')}
+            </MenuItemButton>
+            <MenuItemButton
+              onClick={handleRenameButtonClick}
+            >
+              <IconPencil size={18} />
+              {t('Rename')}
+            </MenuItemButton>
+            <MenuItemButton
+              onClick={handleDeleteButtonClick}
+            >
+              <IconTrash size={18} />
+              {t('Delete')}
+            </MenuItemButton>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}
+
+type MenuItemButtonProps = {
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+} & PropsWithChildren;
+
+function MenuItemButton({ children, onClick }: MenuItemButtonProps): JSX.Element {
+  return (
+    <Menu.Item>
+      {({ active }) => (
+        <button
+          className={`
+            ${ active ? 'bg-[#343541]/90 text-white' : 'text-gray-300' }
+            flex w-full items-center rounded-md p-2 text-sm `
+          }
+          onClick={onClick}
+        >
+          <div className="flex flex-row items-center gap-2">
+            {children}
+          </div>
+        </button>
+      )}
+    </Menu.Item>
+  )
+}

components/Assistant/FilesList.tsx

@@ -0,0 +1,163 @@
+import { ForwardedRef, UIEvent, forwardRef, useCallback, useContext, useImperativeHandle, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+import FilesModelContext from "./FilesModal.context";
+import { FileItem } from "./FileItem";
+import Spinner from "../Spinner/Spinner";
+import { sortByName } from "@/utils/app/uploadedFiles";
+import { MAX_NUM_FILES } from "@/utils/app/const";
+
+const Component = (props: unknown, ref: ForwardedRef<HTMLDivElement>): JSX.Element => {
+  const {
+    state: {
+      uploadedFiles,
+      uploadedFilenames,
+      loading,
+      nextFile,
+      totalFiles,
+    },
+    dispatch,
+    loadFiles,
+    uploadFiles,
+  } = useContext(FilesModelContext);
+
+  const enterTarget = useRef<HTMLElement | null>(null);
+  const dropAreaRef = useRef<HTMLDivElement>(null);
+
+  const { t } = useTranslation('models');
+
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault();
+
+    enterTarget.current = event.target as HTMLElement;
+
+    if (event.dataTransfer.items) {
+      const item = event.dataTransfer.items[0];
+      if (!item || item.kind !== 'file') return;
+    }
+
+    if (dropAreaRef.current) {
+      dropAreaRef.current.style.opacity = '1';
+    }
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault();
+
+    if (enterTarget.current == event.target) {
+      if (dropAreaRef.current) {
+        dropAreaRef.current.style.opacity = '0';
+      }
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault();
+  };
+
+  const handleDrop = async (event: React.DragEvent<HTMLDivElement>): Promise<void> => {
+    event.preventDefault();
+
+    let files!: FileList | File[];
+    if (event.dataTransfer.items) {
+      files = [];
+      for (let i = 0; i < event.dataTransfer.items.length; i++) {
+        const item = event.dataTransfer.items[i];
+        if (item.kind === 'file') {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+    } else {
+      files = event.dataTransfer.files;
+    }
+
+    if (dropAreaRef.current) {
+      dropAreaRef.current.style.opacity = '0';
+    }
+
+    await uploadFiles(files);
+  };
+
+  const handleScroll = useCallback(async (event: UIEvent<HTMLDivElement>): Promise<void> => {
+    if (!nextFile || loading) return;
+    // Load more files when we reach the bottom of the scroll element
+    const target = event.currentTarget;
+    if (Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1) {
+      dispatch({ field: 'loading', value: true });
+      loadFiles(nextFile)
+        .then(({ files, next }) => {
+          const updatedUploadedFiles = { ...uploadedFiles };
+          const updatedUploadedFilenames = [...uploadedFilenames];
+
+          for (const file of files) {
+            if (!uploadedFiles[file.name]) // Prevents duplicate files
+              updatedUploadedFilenames.push(file.name);
+            updatedUploadedFiles[file.name] = file;
+          }
+          updatedUploadedFilenames.sort(sortByName);
+
+          dispatch({ field: 'nextFile', value: next });
+          dispatch({ field: 'uploadedFiles', value: updatedUploadedFiles });
+          dispatch({ field: 'uploadedFilenames', value: updatedUploadedFilenames });
+        })
+        .finally(() => {
+          dispatch({ field: 'loading', value: false });
+        });
+    }
+  }, [uploadedFiles, uploadedFilenames, loading, nextFile, loadFiles, dispatch]);
+
+  return (
+    <>
+      <div className="flex flex-col pb-2">
+        <p className="text-sm text-neutral-400">{t('Maximum file size: 1MB')}</p>
+        <p className="text-sm text-neutral-400">{t('Total files:')} {totalFiles}/{MAX_NUM_FILES}</p>
+      </div>
+      <div className="relative flex flex-col flex-1 -mx-3 overflow-hidden">
+        <div
+          className="absolute left-0 w-full h-full rounded-md border-2 bg-indigo-300/30 border-indigo-400 opacity-0 transition-opacity ease-out duration-200 pointer-events-none z-50"
+          ref={dropAreaRef}
+        />
+        <div
+          className="flex-1 overflow-y-auto"
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          onScroll={handleScroll}
+          ref={ref}
+        >
+          <div className="relative h-7">
+            <div className="fixed left-0 right-0 flex flex-row justify-between text-sm text-neutral-400 py-2 pl-[53px] pr-[149px] tablet:pr-[64px] bg-neutral-900 z-30">
+              <p>{t('Name')}</p>
+              <div className="flex flex-row gap-2">
+                <p className="block mobile:hidden">{t('Updated At')}</p>
+                <p className="w-20 text-right">{t('Size')}</p>
+              </div>
+            </div>
+          </div>
+          {!loading && uploadedFilenames.length <= 0 && (
+            <p className="mt-3 text-[14px] leading-normal text-center text-white opacity-50">{t('No files')}</p>
+          )}
+          {(uploadedFilenames.map((filename) => {
+              const file = uploadedFiles[filename];
+              return (
+                <FileItem
+                  file={file}
+                  key={file.name}
+                />
+              );
+            })
+          )}
+        </div>
+        {loading && (
+          <div className="absolute left-0 w-full h-full flex justify-center items-center rounded-md bg-black/30">
+            <Spinner size="16px" className="mx-auto" />
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export const FilesList = forwardRef<HTMLDivElement, unknown>(Component);