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
This commit is contained in:
Debanjum Singh Solanky 2024-08-05 03:54:10 +05:30
parent 18a973b666
commit 95c2a52775
3 changed files with 227 additions and 8 deletions

View file

@ -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 <OrgMode className={className} />;
case "markdown":
case "md":
return <Markdown className={className} />;
case "pdf":
return <Pdf className={className} />;
case "doc":
return <Word className={className} />;
case "jpg":
case "jpeg":
case "png":
return <Image className={className} weight="fill" />;
default:
return <File className={className} weight="fill" />;
}
}
export { getIconFromIconName, getIconFromFilename };

View file

@ -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 (
<svg
className={`${classes}`}
xmlns="http://www.w3.org/2000/svg"
width="144.98"
height="160"
viewBox="-7.65 -13.389 144.98 160"
>
<path
fill="#a04d32"
stroke="#000"
strokeWidth="3"
d="M133.399 46.067c-.205-3.15-2.842-4.366-5.993-2.125-7.22-1.297-14.305-.687-17.8-.981-7.662-1.073-14.041-5.128-14.041-5.128.932-1.239.486-3.917-5.498-4.101-1.646-.542-3.336-1.327-4.933-1.979.544-1.145-.133-2.836-.133-2.836 2.435-.672 2.808-3.842 1.848-5.709 3.106.084 2.612-4.718 2.183-6.381 2.435-.923 2.77-3.831 1.763-6.129 2.938-.671 3.022-4.114 2.77-6.548 3.023-.168 2.604-5.457 2.604-6.549 2.604-1.679 2.016-3.946 2.425-6.573 1.605-3.25-.577-4.173-2.116-.71-1.651 3.001-3.77 4.311-3.75 6.528.755 1.259-5.625 3.106-3.61 7.052-1.428 1.763-4.785 4.03-3.592 6.733-.606 1.326-4.888 4.433-3.041 7.371-4.03 2.687-3.79 3.335-2.938 5.793-1.147.736-2.318 1.862-2.995 3.094-1.32-1.568-2.603-4.429-2.584-8.294 0-3.275-6.1.318-6.1 6.784 0 .556-.056 1.061-.134 1.542-2.11.243-4.751.707-8.08 1.494-.106.073-.157.186-.182.316a8.704 8.704 0 01-.277-1.553c-.582-3.79-4.934-9.56-7.057-2.434-1.096 2.611-1.74 4.392-2.115 5.789v0s-.336.226-.957.61c-2.62 1.622-3.562 6.686-13.075 9.883-3.211 1.079-7.4 1.945-12.96 2.395-9.57.773-27.887 17.314-29.114 33.097-.283 3.964.31 13.737 3.596 22.31l.005.02c.015.042.032.081.048.122.052.134.103.267.156.398.28.718.579 1.405.895 2.062 1.885 4.028 4.46 7.59 7.934 9.882a25.252 25.252 0 004.372 2.762c5.907 9.749 18.442 22.252 42.075 14.859 36.255-10.284 56.263 13.809 58.568 15.5 3.399 3.433-8.786-29.835-34.587-44.788-15.253-8.322-5.678-22.656-4.585-27.718 0 0 12.227 8.557 21.087-4.52 8.004 2.062 13.367-1.462 20.25 1.03 4.184 1.833 21.77.726 15.235-9.104 4.11-2.683 4.544-1.815 6.6-5.9 1.104-4.952-1.403-6.012-2.167-7.366zM63.106 32.768c-.041.018-.086.04-.125.056.039-.034.075-.062.115-.102l.01.046zm-13.413 4.523c-.073.429-.143.829-.212 1.216.037-.832.085-1.714.143-2.646.024.435.05.904.069 1.43zm10.693-6.333c.746 1.124 1.662 2.179 1.662 2.179s-.875-.79-1.662-2.179z"
/>
<path
fill="#7a9"
stroke="#000"
strokeWidth=".5"
d="M6.448 104.253s10.02 36.105 46.549 24.68c36.255-10.284 56.263 13.809 58.568 15.5 3.399 3.433-8.786-29.835-34.587-44.788-15.253-8.322-5.678-22.656-4.585-27.718 0 0 12.227 8.557 21.087-4.52 8.004 2.062 13.367-1.462 20.25 1.03 4.184 1.833 21.77.726 15.235-9.104 4.11-2.683 4.544-1.815 6.6-5.9 1.105-4.952-1.402-6.011-2.166-7.366-.205-3.15-2.842-4.366-5.993-2.125-7.22-1.297-14.305-.687-17.8-.981-7.662-1.073-14.041-5.128-14.041-5.128.932-1.239.486-3.917-5.498-4.101-3.287-1.082-6.752-3.136-9.288-3.162-2.567 0-2.914-2.537-2.914-2.537-1.606-.87-3.924-4.252-3.9-9.438 0-3.275-6.098.318-6.098 6.784s-5.818 7.758-5.818 7.758-2.55-2.281-2.855-5.958c-.582-3.79-4.934-9.56-7.057-2.434-3.226 7.646-3.485 9.43-4.115 13.154-1.31 7.711-.345 8.012-.345 8.012l-32.824 23.43z"
/>
<path
fill="#314b49"
stroke="#314b49"
strokeWidth=".75"
strokeLinecap="round"
strokeLinejoin="round"
d="M84.11 42.833c1.549-.562.897-.415 1.153-.581-2.96.575-9.635.614-14.317-1.133.392.23 2.568.962 2.845 1.128.218.715.1 1.438 2.932 2.709 2.559.793 5.845.461 6.835-.529.109-1.684.126-1.065.553-1.594z"
/>
<path
fill="#314b49"
stroke="#314b49"
strokeWidth=".5"
d="M116.479 61.979c-2.83-2.085-4.881-.264-6.47-.413.99-.645 3.763-2.062 8.246-2.062 2.532 0 3.879 2.196 5.57 2.207 1.14.007 4.472-1.71 5.14-2.378-.97.838.454 1.755-.49 3.003-.281.359-.836 1.511-2.662 2.051-2.05.971-5.411 1.762-9.334-2.408z"
/>
<path
fill="#314b49"
d="M54.932 24.033s-3.355 7.996.312 15.329.522-6.829 4.688-4.162c3.397.385-2.387-3.215-2.033-7.819-.176-2.892-1.77-5.194-2.967-3.348zM119.336 50.417c0 1.121-1.363 2.03-3.045 2.03 3.573-1.121-.201-4.653-3.045-2.03 0-1.121 1.363-2.03 3.045-2.03s3.045.909 3.045 2.03z"
/>
<path
fill="#314b49"
d="M114.169 47.833c3.772-.231 6.336.323 5.536 3.138.548-1.126 1.292-2.83-1.046-3.507-1.746-.388-3.3-.378-4.49.369z"
/>
<path
fill="#a04d32"
stroke="#000"
strokeWidth=".5"
d="M59.929 69.234c0-3.521-1.51-7.166-7.04-14.583-1.635-2.192-2.62-4.336-3.211-6.275-1.401-3.295-3.426-8.019-.613-17.233 0 0 .62-.384 0 0-2.62 1.622-3.562 6.686-13.075 9.883-3.211 1.079-7.4 1.945-12.96 2.395-9.568.773-27.886 17.314-29.113 33.097-.283 3.964.31 13.737 3.596 22.31l.005.02c.015.042.032.081.048.122.052.134.103.267.156.398.28.718.579 1.405.895 2.062 1.885 4.028 4.46 7.59 7.934 9.882 3.084 2.404 5.606 3.306 5.606 3.306-2.588-3.578-3.77-7.562-2.263-12.32.65 2.637 1.903 4.162 3.646 4.777-.615-1.884-.827-3.549 0-4.651 2.567 6.734 5.353 9.031 8.17 10.686-2.63-4.914-4.031-10.005-3.77-15.337 2.569 6.028 6.596 9.945 10.56 13.954-3.78-5.966-6.911-12.104-6.977-19.046 1.693 2.778 3.935 4.932 6.6 6.601-1.683-2.709-2.505-5.51-2.263-8.423 4.424 4.945 9.36 6.607 14.332 8.046-5.197-3.625-9.843-7.537-12.32-12.572 2.972 1.464 5.948 1.693 8.926 1.383-3.706-1.872-5.07-5.252-5.783-9.052 5.177 5.279 10.587 8.827 16.09 11.692-5.455-5.26-9.478-10.65-11.565-16.218 2.1 1.18 4.157 1.736 6.16 1.509-2.766-3.124-3.465-6.182-4.211-9.241 2.637 3.916 4.959 6.022 7.103 7.103-2.19-4.482-2.034-8.432-.503-12.068 2.524 1.675 4.902 4.295 6.915 9.303.73-2.386-.447-6.364-1.886-10.56 2.175.622 4.779 3.351 8.17 9.932-.33-3.865-2.138-7.775-4.147-11.692 3.027 3.51 7.557 12.713 6.788 10.81z"
/>
<path
fill="#796958"
stroke="#000"
strokeWidth=".5"
d="M76.27 30.176s-.252 7.472 6.717 2.603c3.61.084 2.015-3.862 2.015-3.862 2.435-.672 2.808-3.842 1.848-5.709 3.106.084 2.612-4.718 2.183-6.381 2.435-.923 2.77-3.831 1.763-6.129 2.938-.671 3.022-4.114 2.77-6.548 3.023-.168 2.604-5.457 2.604-6.549 2.604-1.679 2.016-3.946 2.425-6.573 1.605-3.25-.577-4.173-2.116-.71-1.651 3.001-3.77 4.311-3.75 6.528.755 1.259-5.625 3.106-3.61 7.052-1.428 1.763-4.785 4.03-3.592 6.733-.606 1.326-4.888 4.433-3.041 7.371-4.03 2.687-3.79 3.335-2.938 5.793-2.155 1.38-4.41 4.131-3.278 6.381z"
/>
<path
fill="#fff"
d="M94.094-5.087s-.735 1.324-.735 2.133c0 .809 2.185.568 2.927-.227-1.625.024-2.965.289-2.192-1.906zM89.833 1.183s-.812 1.068-.183 2.316c.392.98 2.807.962 3.549.167-1.625.024-4.14-.287-3.366-2.483zM86.698 7.638s-.998 1.346-.492 2.602c0 .809 2.838.956 3.58.161-1.625.022-3.645-.489-3.088-2.763zM83.62 14.8s-1.402 1.542-.148 2.945c1.438.809 3.744.049 4.486-.746-1.625.022-4.894.076-4.337-2.199zM80.616 20.521s-1.575 1.414-.02 3.312c1.438.809 4.57.198 5.312-.597-1.624.024-5.99-1.346-5.292-2.715zM77.469 27.262s-1.403 1.542-.15 2.945c1.439.809 6.037-.186 6.779-.981-1.625.023-7.185.311-6.63-1.964z"
/>
<path
fill="#a04d32"
stroke="#000"
strokeWidth=".5"
d="M76.352 30.29c-.45-.45-.534-.896-.367-1.718 0 0 .369-4.107-16.333-.158-1.072.74 2.396 4.722 2.396 4.722s.418.215 1.047-.415c.253 1.123.852 4.081.233 4.579 1.245-.771 1.868-1.946 1.676-4.125 2.122.461 3.742 1.64 4.692 3.779.304-1.4.603-2.799-.384-4.126 2.182.285 3.88 1.496 5.362 3.124.22-.933.354-1.883 0-2.931 1.39.473 2.587 1.607 3.71 2.988 0 0 .21-3.862-2.032-5.719z"
/>
<path
opacity=".26"
d="M60.33 57.936s6.76 13.59 17.595 13.991c10.834.401 10.834-2.73 10.834-2.73s-15.527 3.048-28.43-11.261zM63.485 65.63c2.279 3.104 4.856 5.221 7.722 6.382 0 0-7.365 11.108-3.611 20.023s13.125 11.053 23.32 21.249c7.943 7.942 17.159 24.961 17.159 24.961s-17.834-14.176-29.42-13.479c0 0-2.687-9.668-10.585-17.566-11.244-11.245-16.168-25.875-4.585-41.57z"
/>
<path
opacity=".18"
fill="#fff"
d="M44.717 38.245c-3.874 2.501-8.42 7.096-24.415 8.083C3.252 53.112-7.131 73.013-3.475 86.792c1.348 7.317 3.89 14.18 3.89 14.18C-.47 95.053-.966 89.575 1.45 87.373c1.435 2.384 2.969 2.468 4.507 2.479-1.59-2.404-1.788-4.808 0-7.212 1.489 1.525 2.992 1.881 4.507 1.353-2.128-2.449-1.867-4.848 0-7.211 1.388 5.022 4.462 7.453 7.662 9.689-2.208-4.333-4.166-8.672-2.93-13.07 1.323.729 2.595.644 3.83 0-1.256-1.576-.924-3.153 0-4.732 2.948 3.04 6.214 3.724 9.466 4.507-2.661-2.454-5.543-4.527-6.761-9.465 1.5-1.811 3.269-2.685 5.408-2.253-1.901-1.167-1.65-2.543 0-4.057 2.089 1.104 4.195 1.352 6.31 1.127-2.807-1.68-8.424-4.994 11.269-20.283z"
/>
<path
opacity=".27"
fill="#fff"
d="M71.278 19.389c.996-.963 1.146-.65.854.285-.982 2.36.353 4.647.797 6.206l-3.871.114c.108-2.271.247-4.794 2.22-6.605z"
/>
</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>
);
}

View file

@ -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) {
<h3
className={`${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground}`}
>
<File className="w-6 h-6 text-muted-foreground inline-flex" />
{fileIcon}
{props.title}
</h3>
<p
@ -66,7 +71,7 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
className={`w-auto overflow-hidden break-words text-balance rounded-lg p-2 border-none`}
>
<h3 className={`line-clamp-2 text-muted-foreground}`}>
<File className="w-6 h-6 text-muted-foreground inline-flex" />
{fileIcon}
{props.title}
</h3>
<p