From ae4eb96d483ab4ef12a9adf541eed2f32e93944b Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Mon, 11 Nov 2024 09:34:04 -0800
Subject: [PATCH] Consolidate file name to icon mapping

---
 src/interface/web/app/common/iconUtils.tsx    |  18 ++-
 .../chatInputArea/chatInputArea.tsx           |   4 +-
 .../components/chatMessage/chatMessage.tsx    |   4 +-
 .../web/app/components/logo/fileLogo.tsx      | 108 ------------------
 4 files changed, 11 insertions(+), 123 deletions(-)

diff --git a/src/interface/web/app/common/iconUtils.tsx b/src/interface/web/app/common/iconUtils.tsx
index 4fad417e..f266cac5 100644
--- a/src/interface/web/app/common/iconUtils.tsx
+++ b/src/interface/web/app/common/iconUtils.tsx
@@ -50,8 +50,10 @@ import {
     Broadcast,
     KeyReturn,
     FilePdf,
+    FileMd,
+    MicrosoftWordLogo,
 } from "@phosphor-icons/react";
-import { Markdown, OrgMode, Pdf, Word } from "@/app/components/logo/fileLogo";
+import { OrgMode } from "@/app/components/logo/fileLogo";
 
 interface IconMap {
     [key: string]: (color: string, width: string, height: string) => JSX.Element | null;
@@ -217,13 +219,6 @@ export function getIconForSlashCommand(command: string, customClassName: string
     return <ArrowRight className={className} />;
 }
 
-export function getIconFromFileType(fileType: string) {
-    if (fileType == "pdf") {
-        return <FilePdf className="w-6 h-6 text-muted-foreground inline-flex mr-1" />;
-    }
-    return <File className="w-6 h-6 text-muted-foreground inline-flex mr-1" />;
-}
-
 function getIconFromIconName(
     iconName: string,
     color: string = "gray",
@@ -246,11 +241,12 @@ function getIconFromFilename(
             return <OrgMode className={className} />;
         case "markdown":
         case "md":
-            return <Markdown className={className} />;
+            return <FileMd className={className} />;
         case "pdf":
-            return <Pdf className={className} />;
+            return <FilePdf className={className} />;
         case "doc":
-            return <Word className={className} />;
+        case "docx":
+            return <MicrosoftWordLogo className={className} />;
         case "jpg":
         case "jpeg":
         case "png":
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 49157f56..3ee0e258 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -41,7 +41,7 @@ import { convertColorToTextClass, convertToBGClass } from "@/app/common/colorUti
 
 import LoginPrompt from "../loginPrompt/loginPrompt";
 import { InlineLoading } from "../loading/loading";
-import { getIconForSlashCommand, getIconFromFileType } from "@/app/common/iconUtils";
+import { getIconForSlashCommand, getIconFromFilename } from "@/app/common/iconUtils";
 import { packageFilesForUpload } from "@/app/common/chatFunctions";
 import { convertBytesToText } from "@/app/common/utils";
 import {
@@ -549,7 +549,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                                                     {file.name}
                                                 </span>
                                                 <span className="flex items-center gap-1">
-                                                    {getIconFromFileType(file.file_type)}
+                                                    {getIconFromFilename(file.file_type)}
                                                     <span className="text-xs text-neutral-500 dark:text-neutral-400">
                                                         {convertBytesToText(file.size)}
                                                     </span>
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index 9deaf955..bfe9e9e4 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -51,7 +51,7 @@ import {
 import { DialogTitle } from "@radix-ui/react-dialog";
 import { convertBytesToText } from "@/app/common/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { getIconFromFileType } from "@/app/common/iconUtils";
+import { getIconFromFilename } from "@/app/common/iconUtils";
 
 const md = new markdownIt({
     html: true,
@@ -714,7 +714,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
                         <Dialog key={index}>
                             <DialogTrigger>
                                 <div className="flex items-center space-x-2 cursor-pointer bg-gray-500 bg-opacity-25 rounded-lg m-1 p-2 w-full">
-                                    {getIconFromFileType(file.file_type)}
+                                    {getIconFromFilename(file.file_type)}
                                     <span className="truncate">{file.name}</span>
                                     {file.size && (
                                         <span className="text-gray-400">
diff --git a/src/interface/web/app/components/logo/fileLogo.tsx b/src/interface/web/app/components/logo/fileLogo.tsx
index 56bef3f7..e6e8217f 100644
--- a/src/interface/web/app/components/logo/fileLogo.tsx
+++ b/src/interface/web/app/components/logo/fileLogo.tsx
@@ -81,111 +81,3 @@ export function OrgMode({ className }: { className?: string }) {
         </svg>
     );
 }
-
-export function Markdown({ className }: { className?: string }) {
-    const classes = className ?? "w-6 h-6 text-muted-foreground inline-flex mr-1";
-    return (
-        <svg
-            className={`${classes}`}
-            xmlns="http://www.w3.org/2000/svg"
-            width="208"
-            height="128"
-            viewBox="0 0 208 128"
-        >
-            <rect
-                width="198"
-                height="118"
-                x="5"
-                y="5"
-                ry="10"
-                stroke="#000"
-                strokeWidth="10"
-                fill="none"
-            />
-            <path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z" />
-        </svg>
-    );
-}
-
-export function Pdf({ className }: { className?: string }) {
-    const classes = className ?? "w-6 h-6 text-muted-foreground inline-flex mr-1";
-    return (
-        <svg
-            className={`${classes}`}
-            xmlns="http://www.w3.org/2000/svg"
-            enableBackground="new 0 0 334.371 380.563"
-            version="1.1"
-            viewBox="0 0 14 16"
-        >
-            <g transform="matrix(.04589 0 0 .04589 -.66877 -.73379)">
-                <polygon
-                    points="51.791 356.65 51.791 23.99 204.5 23.99 282.65 102.07 282.65 356.65"
-                    fill="#fff"
-                    strokeWidth="212.65"
-                />
-                <path
-                    d="m201.19 31.99 73.46 73.393v243.26h-214.86v-316.66h141.4m6.623-16h-164.02v348.66h246.85v-265.9z"
-                    strokeWidth="21.791"
-                />
-            </g>
-            <g transform="matrix(.04589 0 0 .04589 -.66877 -.73379)">
-                <polygon
-                    points="282.65 356.65 51.791 356.65 51.791 23.99 204.5 23.99 206.31 25.8 206.31 100.33 280.9 100.33 282.65 102.07"
-                    fill="#fff"
-                    strokeWidth="212.65"
-                />
-                <path
-                    d="m198.31 31.99v76.337h76.337v240.32h-214.86v-316.66h138.52m9.5-16h-164.02v348.66h246.85v-265.9l-6.43-6.424h-69.907v-69.842z"
-                    strokeWidth="21.791"
-                />
-            </g>
-            <g transform="matrix(.04589 0 0 .04589 -.66877 -.73379)" strokeWidth="21.791">
-                <polygon points="258.31 87.75 219.64 87.75 219.64 48.667 258.31 86.38" />
-                <path d="m227.64 67.646 12.41 12.104h-12.41v-12.104m-5.002-27.229h-10.998v55.333h54.666v-12.742z" />
-            </g>
-            <g
-                transform="matrix(.04589 0 0 .04589 -.66877 -.73379)"
-                fill="#ed1c24"
-                strokeWidth="212.65"
-            >
-                <polygon points="311.89 284.49 22.544 284.49 22.544 167.68 37.291 152.94 37.291 171.49 297.15 171.49 297.15 152.94 311.89 167.68" />
-                <path d="m303.65 168.63 1.747 1.747v107.62h-276.35v-107.62l1.747-1.747v9.362h272.85v-9.362m-12.999-31.385v27.747h-246.86v-27.747l-27.747 27.747v126h302.35v-126z" />
-            </g>
-            <rect x="1.7219" y="7.9544" width="10.684" height="4.0307" fill="none" />
-            <g transform="matrix(.04589 0 0 .04589 1.7219 11.733)" fill="#fff" strokeWidth="21.791">
-                <path d="m9.216 0v-83.2h30.464q6.784 0 12.928 1.408 6.144 1.28 10.752 4.608 4.608 3.2 7.296 8.576 2.816 5.248 2.816 13.056 0 7.68-2.816 13.184-2.688 5.504-7.296 9.088-4.608 3.456-10.624 5.248-6.016 1.664-12.544 1.664h-8.96v26.368zm22.016-43.776h7.936q6.528 0 9.6-3.072 3.2-3.072 3.2-8.704t-3.456-7.936-9.856-2.304h-7.424z" />
-                <path d="m87.04 0v-83.2h24.576q9.472 0 17.28 2.304 7.936 2.304 13.568 7.296t8.704 12.8q3.2 7.808 3.2 18.816t-3.072 18.944-8.704 13.056q-5.504 5.12-13.184 7.552-7.552 2.432-16.512 2.432zm22.016-17.664h1.28q4.48 0 8.448-1.024 3.968-1.152 6.784-3.84 2.944-2.688 4.608-7.424t1.664-12.032-1.664-11.904-4.608-7.168q-2.816-2.56-6.784-3.456-3.968-1.024-8.448-1.024h-1.28z" />
-                <path d="m169.22 0v-83.2h54.272v18.432h-32.256v15.872h27.648v18.432h-27.648v30.464z" />
-            </g>
-        </svg>
-    );
-}
-
-export function Word({ className }: { className?: string }) {
-    const classes = className ?? "w-6 h-6 text-muted-foreground inline-flex mr-1";
-    return (
-        <svg
-            className={`${classes}`}
-            xmlns="http://www.w3.org/2000/svg"
-            fill="#FFF"
-            stroke-miterlimit="10"
-            strokeWidth="2"
-            viewBox="0 0 96 96"
-        >
-            <path
-                stroke="#979593"
-                d="M67.1716 7H27c-1.1046 0-2 .8954-2 2v78c0 1.1046.8954 2 2 2h58c1.1046 0 2-.8954 2-2V26.8284c0-.5304-.2107-1.0391-.5858-1.4142L68.5858 7.5858C68.2107 7.2107 67.702 7 67.1716 7z"
-            />
-            <path fill="none" stroke="#979593" d="M67 7v18c0 1.1046.8954 2 2 2h18" />
-            <path
-                fill="#C8C6C4"
-                d="M79 61H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1zm0-6H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1zm0-6H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1zm0-6H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1zm0 24H48v-2h31c.5523 0 1 .4477 1 1s-.4477 1-1 1z"
-            />
-            <path
-                fill="#185ABD"
-                d="M12 74h32c2.2091 0 4-1.7909 4-4V38c0-2.2091-1.7909-4-4-4H12c-2.2091 0-4 1.7909-4 4v32c0 2.2091 1.7909 4 4 4z"
-            />
-            <path d="M21.6245 60.6455c.0661.522.109.9769.1296 1.3657h.0762c.0306-.3685.0889-.8129.1751-1.3349.0862-.5211.1703-.961.2517-1.319L25.7911 44h4.5702l3.6562 15.1272c.183.7468.3353 1.6973.457 2.8532h.0608c.0508-.7979.1777-1.7184.3809-2.7615L37.8413 44H42l-5.1183 22h-4.86l-3.4885-14.5744c-.1016-.4197-.2158-.9663-.3428-1.6417-.127-.6745-.2057-1.1656-.236-1.4724h-.0608c-.0407.358-.1195.8896-.2364 1.595-.1169.7062-.211 1.2273-.2819 1.565L24.1 66h-4.9357L14 44h4.2349l3.1843 15.3882c.0709.3165.1392.7362.2053 1.2573z" />
-        </svg>
-    );
-}