From 95c2a5277514771d045eb245169ff44872cc7ef1 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Mon, 5 Aug 2024 03:54:10 +0530 Subject: [PATCH] Show file icons in references for first party supported document types Add org, markdown, pdf, word, icon and default file icons to simplify identifying file type used as reference for generating chat response --- src/interface/web/app/common/iconUtils.tsx | 33 ++- .../web/app/components/logo/fileLogo.tsx | 191 ++++++++++++++++++ .../referencePanel/referencePanel.tsx | 11 +- 3 files changed, 227 insertions(+), 8 deletions(-) create mode 100644 src/interface/web/app/components/logo/fileLogo.tsx diff --git a/src/interface/web/app/common/iconUtils.tsx b/src/interface/web/app/common/iconUtils.tsx index 1ab5c184..e041d1d5 100644 --- a/src/interface/web/app/common/iconUtils.tsx +++ b/src/interface/web/app/common/iconUtils.tsx @@ -13,17 +13,16 @@ import { Code, Atom, ClockCounterClockwise, - PaperPlaneTilt, - Info, - UserCircle, + File, Globe, Palette, - LinkBreak, Book, Confetti, House, Translate, + Image, } from "@phosphor-icons/react"; +import { Markdown, OrgMode, Pdf, Word } from "@/app/components/logo/fileLogo"; interface IconMap { [key: string]: (color: string, width: string, height: string) => JSX.Element | null; @@ -98,4 +97,28 @@ function getIconFromIconName( return icon ? icon(colorClass, width, height) : null; } -export { getIconFromIconName }; +function getIconFromFilename( + filename: string, + className: string = "w-6 h-6 text-muted-foreground inline-flex mr-1", +) { + const extension = filename.split(".").pop(); + switch (extension) { + case "org": + return ; + case "markdown": + case "md": + return ; + case "pdf": + return ; + case "doc": + return ; + case "jpg": + case "jpeg": + case "png": + return ; + default: + return ; + } +} + +export { getIconFromIconName, getIconFromFilename }; diff --git a/src/interface/web/app/components/logo/fileLogo.tsx b/src/interface/web/app/components/logo/fileLogo.tsx new file mode 100644 index 00000000..56bef3f7 --- /dev/null +++ b/src/interface/web/app/components/logo/fileLogo.tsx @@ -0,0 +1,191 @@ +export function OrgMode({ className }: { className?: string }) { + const classes = className ?? "w-6 h-6 text-muted-foreground inline-flex mr-1"; + return ( + + + + + + + + + + + + + + + + ); +} + +export function Markdown({ className }: { className?: string }) { + const classes = className ?? "w-6 h-6 text-muted-foreground inline-flex mr-1"; + return ( + + + + + ); +} + +export function Pdf({ className }: { className?: string }) { + const classes = className ?? "w-6 h-6 text-muted-foreground inline-flex mr-1"; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export function Word({ className }: { className?: string }) { + const classes = className ?? "w-6 h-6 text-muted-foreground inline-flex mr-1"; + return ( + + + + + + + + ); +} diff --git a/src/interface/web/app/components/referencePanel/referencePanel.tsx b/src/interface/web/app/components/referencePanel/referencePanel.tsx index e5d5c6ab..78573b31 100644 --- a/src/interface/web/app/components/referencePanel/referencePanel.tsx +++ b/src/interface/web/app/components/referencePanel/referencePanel.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; -import { ArrowRight, File } from "@phosphor-icons/react"; +import { ArrowRight } from "@phosphor-icons/react"; import markdownIt from "markdown-it"; const md = new markdownIt({ @@ -24,6 +24,7 @@ import { } from "@/components/ui/sheet"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import DOMPurify from "dompurify"; +import { getIconFromFilename } from "@/app/common/iconUtils"; interface NotesContextReferenceData { title: string; @@ -38,6 +39,10 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) { const snippet = props.showFullContent ? DOMPurify.sanitize(md.render(props.content)) : DOMPurify.sanitize(props.content); + const fileIcon = getIconFromFilename( + props.title || ".txt", + "w-6 h-6 text-muted-foreground inline-flex mr-2", + ); const [isHovering, setIsHovering] = useState(false); return ( @@ -52,7 +57,7 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {

- + {fileIcon} {props.title}

- + {fileIcon} {props.title}