[UI] File Attachment Added

src/components/FileIcon.tsx

@@ -0,0 +1,183 @@
+import {
+  Box,
+  Editable,
+  EditablePreview,
+  EditableInput,
+  Flex,
+  IconButton,
+  Text,
+  Tooltip,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { IconType } from "react-icons";
+import { IoClose } from "react-icons/io5";
+import {
+  BsFiletypeJpg,
+  BsFiletypeCsv,
+  BsFiletypeDoc,
+  BsFiletypePdf,
+  BsFiletypePng,
+  BsFiletypeXls,
+  BsFiletypeTxt,
+  BsFiletypeJson,
+  BsFiletypeMd,
+  BsFiletypeSvg,
+  BsFileEarmark,
+} from "react-icons/bs";
+import { ChatCraftChat } from "../lib/ChatCraftChat";
+import { downloadFile, removeFile, renameFile } from "../lib/fs";
+import { formatFileSize } from "../lib/utils";
+import { IoMdDownload } from "react-icons/io";
+
+// File icon map moved to the new component
+const FILE_ICON_MAP: Record<string, IconType> = {
+  // Images
+  jpg: BsFiletypeJpg,
+  jpeg: BsFiletypeJpg,
+  png: BsFiletypePng,
+  svg: BsFiletypeSvg,
+  // Documents
+  doc: BsFiletypeDoc,
+  docx: BsFiletypeDoc,
+  pdf: BsFiletypePdf,
+  txt: BsFiletypeTxt,
+  // Spreadsheets
+  csv: BsFiletypeCsv,
+  xls: BsFiletypeXls,
+  xlsx: BsFiletypeXls,
+  // Code
+  json: BsFiletypeJson,
+  md: BsFiletypeMd,
+};
+
+type FileIconProps = {
+  file: {
+    id: string;
+    name: string;
+    size: number;
+  };
+  chat: ChatCraftChat;
+  onRefresh: () => void;
+};
+
+const FileIcon = ({ file, chat, onRefresh }: FileIconProps) => {
+  const hoverBg = useColorModeValue("gray.300", "gray.600");
+
+  // Moved the fileIcon function into the component
+  const fileIcon = (name: string) => {
+    const extension = name.split(".").pop()?.toLowerCase() || "";
+    const IconComponent = FILE_ICON_MAP[extension] || BsFileEarmark;
+    return <IconComponent size="80px" />;
+  };
+
+  return (
+    <Box
+      key={file.id}
+      p={6}
+      borderWidth="1px"
+      borderRadius="md"
+      minW="200px"
+      maxW="200px"
+      h="200px"
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="space-between"
+      aspectRatio="1"
+      position="relative"
+      _hover={{
+        borderColor: "blue.500",
+        "& .hover-buttons": {
+          opacity: 1,
+          transform: "translateY(0)",
+        },
+        bg: hoverBg,
+      }}
+      transition="all 0.2s ease-in-out"
+    >
+      <Box position="absolute" top="40%" left="50%" transform="translate(-50%, -50%)" opacity="0.7">
+        {fileIcon(file.name)}
+      </Box>
+      <Flex
+        className="hover-buttons"
+        position="absolute"
+        top="4"
+        right="4"
+        gap={2}
+        opacity={0}
+        transition="all 0.2s ease-in-out"
+      >
+        <Tooltip label="Delete File">
+          <IconButton
+            aria-label="Remove file"
+            icon={<IoClose />}
+            size="sm"
+            variant="ghost"
+            onClick={async () => {
+              await removeFile(file.name, chat);
+              onRefresh();
+            }}
+          />
+        </Tooltip>
+      </Flex>
+      <Flex
+        className="hover-buttons"
+        position="absolute"
+        top="4"
+        left="4"
+        gap={2}
+        opacity={0}
+        transition="all 0.2s ease-in-out"
+      >
+        <Tooltip label="Download File">
+          <IconButton
+            aria-label="Download File"
+            icon={<IoMdDownload />}
+            size="sm"
+            variant="ghost"
+            onClick={async () => {
+              await downloadFile(file.name, chat);
+            }}
+          />
+        </Tooltip>
+      </Flex>
+      <Box position="absolute" bottom={6} width="full" textAlign="center">
+        <Tooltip label="Edit Name">
+          <Editable
+            defaultValue={file.name}
+            mx="auto"
+            w="90%"
+            onSubmit={async (newVal) => {
+              await renameFile(file.name, newVal, chat);
+              onRefresh();
+            }}
+          >
+            <EditablePreview
+              fontSize="sm"
+              color="blue.300"
+              noOfLines={1}
+              px={2}
+              cursor="pointer"
+              textOverflow="ellipsis"
+              overflow="hidden"
+              whiteSpace="nowrap"
+            />
+            <EditableInput
+              fontSize="sm"
+              color="blue.300"
+              px={2}
+              textOverflow="ellipsis"
+              overflow="hidden"
+              whiteSpace="nowrap"
+            />
+          </Editable>
+        </Tooltip>
+        <Text fontSize="xs" color="gray.400">
+          {formatFileSize(file.size)}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default FileIcon;

src/components/OptionsButton.tsx

@@ -13,6 +13,7 @@ import { useSettings } from "../hooks/use-settings";
 import ShareModal from "./ShareModal";
 import { download } from "../lib/utils";
 import { Menu, MenuDivider, MenuItem, MenuItemLink, SubMenu } from "./Menu";
+import { acceptableFileFormats } from "../hooks/use-file-import";
 
 function ShareMenuItem({ chat }: { chat: ChatCraftChat }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -218,7 +219,7 @@ function OptionsButton({
             ref={fileInputRef}
             hidden
             onChange={handleFileChange}
-            accept="image/*,text/*,.pdf,application/pdf,*.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.json,application/json,application/markdown"
+            accept={acceptableFileFormats}
           />
           <MenuItem icon={<BsPaperclip />} onClick={handleAttachFiles}>
             Attach Files...

src/components/PromptForm/DesktopPromptForm.tsx

@@ -29,6 +29,7 @@ import { useKeyDownHandler } from "../../hooks/use-key-down-handler";
 import ImageModal from "../ImageModal";
 import { ChatCraftChat } from "../../lib/ChatCraftChat";
 import { useFileImport } from "../../hooks/use-file-import";
+import PaperclipIcon from "./PaperclipIcon";
 
 type KeyboardHintProps = {
   isVisible: boolean;
@@ -380,6 +381,7 @@ function DesktopPromptForm({
                       onTranscriptionAvailable={handleTranscriptionAvailable}
                       onCancel={handleRecordingCancel}
                     />
+                    <PaperclipIcon chat={chat} onAttachFiles={importFiles} />
                   </Flex>
                 </Flex>
               </InputGroup>

src/components/PromptForm/MicIcon.tsx

@@ -134,7 +134,7 @@ export default function MicIcon({
   };
 
   return (
-    <Tooltip label={isRecording ? "Finish Recording" : "Start Recording"}>
+    <Tooltip label={isRecording ? "Finish Recording" : "Start Recording"} placement="top">
       <IconButton
         isRound
         isDisabled={isDisabled}

src/components/PromptForm/PaperclipIcon.tsx

@@ -0,0 +1,159 @@
+import {
+  IconButton,
+  Modal,
+  Tooltip,
+  useDisclosure,
+  ModalHeader,
+  ModalContent,
+  ModalOverlay,
+  ModalCloseButton,
+  ModalBody,
+  Text,
+  SimpleGrid,
+  Input,
+  ModalFooter,
+  Button,
+} from "@chakra-ui/react";
+import { FaPaperclip } from "react-icons/fa";
+import { ChatCraftChat } from "../../lib/ChatCraftChat";
+import { useFiles } from "../../hooks/use-fs";
+import { useAlert } from "../../hooks/use-alert";
+import { useCallback, useRef, useState } from "react";
+import { acceptableFileFormats } from "../../hooks/use-file-import";
+import FileIcon from "../FileIcon";
+import { removeFile } from "../../lib/fs";
+
+type PaperClipProps = {
+  chat: ChatCraftChat;
+  onAttachFiles?: (files: File[]) => Promise<void>;
+};
+
+function PaperclipIcon({ chat, onAttachFiles }: PaperClipProps) {
+  const { files, loading, error, refreshFiles } = useFiles(chat);
+  const isAttached = files.length ? true : false;
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isOpen: isErrorOpen, onOpen: onErrorOpen, onClose: onErrorClose } = useDisclosure();
+  const { error: alertError } = useAlert();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [deleteError, setDeleteError] = useState<string>("");
+
+  const handleFileChange = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (!onAttachFiles || !event.target.files?.length) {
+        return;
+      }
+      await onAttachFiles(Array.from(event.target.files))
+        .then(() => refreshFiles)
+        .catch((err) => alertError({ title: "Unable to Attach Files", message: err.message }));
+    },
+    [onAttachFiles, alertError, refreshFiles]
+  );
+
+  const handleAttachFiles = useCallback(() => {
+    fileInputRef.current?.click();
+  }, [fileInputRef]);
+
+  const handlePaperClipToggle = () => {
+    onOpen();
+  };
+
+  const handleDeleteAll = async () => {
+    try {
+      await Promise.all(files.map((file) => removeFile(file.name, chat)));
+      refreshFiles();
+      onClose();
+    } catch (error) {
+      setDeleteError(error instanceof Error ? error.message : "Failed to delete files");
+      onErrorOpen();
+    }
+  };
+
+  return (
+    <>
+      <Tooltip label="Attach Files..." placement="top">
+        {!isAttached && (
+          <Input
+            multiple
+            type="file"
+            ref={fileInputRef}
+            hidden
+            onChange={handleFileChange}
+            accept={acceptableFileFormats}
+          />
+        )}
+        <IconButton
+          isRound
+          icon={<FaPaperclip />}
+          variant="ghost"
+          size="md"
+          fontSize="1rem"
+          transition={"all 150ms ease-in-out"}
+          onClick={isAttached ? handlePaperClipToggle : handleAttachFiles}
+          aria-label=""
+        />
+      </Tooltip>
+      <Modal isCentered onClose={onClose} isOpen={isOpen}>
+        <ModalOverlay />
+        <ModalContent maxW="900px" w="90vw" p={4} position="absolute">
+          <ModalHeader>{files.length} Attached Files</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody maxH="70vh" overflowY="auto">
+            {loading ? (
+              <Text>Loading Files...</Text>
+            ) : error ? (
+              <Text color="red.500">Error loading files!</Text>
+            ) : (
+              <SimpleGrid columns={3} spacing={6} width="full">
+                <Input
+                  multiple
+                  type="file"
+                  ref={fileInputRef}
+                  hidden
+                  onChange={handleFileChange}
+                  accept={acceptableFileFormats}
+                />
+                {files.map((file) => (
+                  <FileIcon key={file.id} file={file} chat={chat} onRefresh={refreshFiles} />
+                ))}
+              </SimpleGrid>
+            )}
+          </ModalBody>
+          <ModalFooter gap={2}>
+            <Button
+              onClick={handleDeleteAll}
+              maxH="30"
+              variant="ghost"
+              color="red"
+              colorScheme="red"
+            >
+              Remove All
+            </Button>
+            <Button gap={2} onClick={handleAttachFiles} maxH="30px">
+              Add Files
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      {/* Error modal */}
+      <Modal isCentered isOpen={isErrorOpen} onClose={onErrorClose} size="sm">
+        <ModalOverlay backdropFilter="blur(2px)" />
+        <ModalContent>
+          <ModalHeader
+            color="red"
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            Error !
+            <ModalCloseButton color="white" />
+          </ModalHeader>
+          <ModalBody color="red" pb={6}>
+            {deleteError}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+export default PaperclipIcon;

src/hooks/use-file-import.tsx

@@ -7,6 +7,9 @@ import { getSettings } from "../lib/settings";
 import { JinaAIProvider, type JinaAiReaderResponse } from "../lib/providers/JinaAIProvider";
 import { ChatCraftFile } from "../lib/ChatCraftFile";
 
+export const acceptableFileFormats =
+  "image/*,text/*,.pdf,application/pdf,*.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.json,application/json,.jsonl,application/x-jsonlines,application/jsonl,application/markdown";
+
 function readTextFile(file: File) {
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader();