remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-10-19 05:48:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(attach): update size & icons

Browse Source
This commit is contained in:
ItzCrazyKns
2025-10-18 18:48:42 +05:30
parent 716629f6fe
commit f28ea8cee2
2 changed files with 22 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/MessageInputActions/Attach.tsx
View File

@@ -17,7 +17,7 @@ import {
import { Fragment, useRef, useState } from 'react'; import { Fragment, useRef, useState } from 'react';
import { useChat } from '@/lib/hooks/useChat'; import { useChat } from '@/lib/hooks/useChat';
const Attach = ({ showText }: { showText?: boolean }) => { const Attach = () => {
const { files, setFiles, setFileIds, fileIds } = useChat(); const { files, setFiles, setFileIds, fileIds } = useChat();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -52,42 +52,16 @@ const Attach = ({ showText }: { showText?: boolean }) => {
}; };
return loading ? ( return loading ? (
<div className="flex flex-row items-center justify-between space-x-1"> <div className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none text-black/50 dark:text-white/50 transition duration-200">
<LoaderCircle size={18} className="text-sky-400 animate-spin" /> <LoaderCircle size={16} className="text-sky-400 animate-spin" />
<p className="text-sky-400 inline whitespace-nowrap text-xs font-medium">
Uploading..
</p>
</div> </div>
) : files.length > 0 ? ( ) : files.length > 0 ? (
<Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg"> <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
<PopoverButton <PopoverButton
type="button" type="button"
className={cn( className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
'flex flex-row items-center justify-between space-x-1 p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white',
files.length > 0 ? '-ml-2 lg:-ml-3' : '',
)}
> >
{files.length > 1 && ( <File size={16} className="text-sky-400" />
<>
<File size={19} className="text-sky-400" />
<p className="text-sky-400 inline whitespace-nowrap text-xs font-medium">
{files.length} files
</p>
</>
)}
{files.length === 1 && (
<>
<File size={18} className="text-sky-400" />
<p className="text-sky-400 text-xs font-medium">
{files[0].fileName.length > 10
? files[0].fileName.replace(/\.\w+$/, '').substring(0, 3) +
'...' +
files[0].fileExtension
: files[0].fileName}
</p>
</>
)}
</PopoverButton> </PopoverButton>
<Transition <Transition
as={Fragment} as={Fragment}
@@ -108,7 +82,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
<button <button
type="button" type="button"
onClick={() => fileInputRef.current.click()} onClick={() => fileInputRef.current.click()}
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200" className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
> >
<input <input
type="file" type="file"
@@ -118,7 +92,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
multiple multiple
hidden hidden
/> />
<Plus size={18} /> <Plus size={16} />
<p className="text-xs">Add</p> <p className="text-xs">Add</p>
</button> </button>
<button <button
@@ -126,7 +100,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
setFiles([]); setFiles([]);
setFileIds([]); setFileIds([]);
}} }}
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200" className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
> >
<Trash size={14} /> <Trash size={14} />
<p className="text-xs">Clear</p> <p className="text-xs">Clear</p>
@@ -165,8 +139,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
type="button" type="button"
onClick={() => fileInputRef.current.click()} onClick={() => fileInputRef.current.click()}
className={cn( className={cn(
'flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white', 'flex items-center justify-center active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white',
showText ? '' : 'p-2',
)} )}
> >
<input <input
@@ -177,8 +150,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
multiple multiple
hidden hidden
/> />
<Paperclip size={showText ? 18 : undefined} /> <Paperclip size={16} />
{showText && <p className="text-xs font-medium pl-[1px]">Attach</p>}
</button> </button>
); );
}; };

13
src/components/MessageInputActions/AttachSmall.tsx
View File

@@ -5,7 +5,14 @@ import {
PopoverPanel, PopoverPanel,
Transition, Transition,
} from '@headlessui/react'; } from '@headlessui/react';
import { CopyPlus, File, LoaderCircle, Paperclip, Plus, Trash } from 'lucide-react'; import {
CopyPlus,
File,
LoaderCircle,
Paperclip,
Plus,
Trash,
} from 'lucide-react';
import { Fragment, useRef, useState } from 'react'; import { Fragment, useRef, useState } from 'react';
import { File as FileType } from '../ChatWindow'; import { File as FileType } from '../ChatWindow';
import { useChat } from '@/lib/hooks/useChat'; import { useChat } from '@/lib/hooks/useChat';
@@ -45,7 +52,7 @@ const AttachSmall = () => {
}; };
return loading ? ( return loading ? (
<div className="flex flex-row items-center justify-between space-x-1 p-1"> <div className="flex flex-row items-center justify-between space-x-1 p-1 ">
<LoaderCircle size={20} className="text-sky-400 animate-spin" /> <LoaderCircle size={20} className="text-sky-400 animate-spin" />
</div> </div>
) : files.length > 0 ? ( ) : files.length > 0 ? (
@@ -141,7 +148,7 @@ const AttachSmall = () => {
multiple multiple
hidden hidden
/> />
<Paperclip size={20} /> <Paperclip size={16} />
</button> </button>
); );
}; };