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}