KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update prompts to be tabbable (#241)

This commit is contained in:
Brad Ullman 2023-03-28 01:31:03 -07:00 committed by GitHub
parent a3eb247c3f
commit 00d807495d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/Promptbar/Prompt.tsx
View File

@ -39,9 +39,9 @@ export const PromptComponent: FC<Props> = ({
}, [isRenaming, isDeleting]); }, [isRenaming, isDeleting]);
return ( return (
<> <div className="relative flex items-center">
<button <button
className="text-sidebar flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[14px] transition-colors duration-200 hover:bg-[#343541]/90" className="flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90"
draggable="true" draggable="true"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -54,27 +54,17 @@ export const PromptComponent: FC<Props> = ({
setRenameValue(''); setRenameValue('');
}} }}
> >
<IconBulbFilled size={16} /> <IconBulbFilled size={18} />
{isRenaming ? ( <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
<input {prompt.name}
className="flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100" </div>
type="text" </button>
value={renameValue}
onChange={(e) => setRenameValue(e.target.value)}
autoFocus
/>
) : (
<div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
{prompt.name}
</div>
)}
{(isDeleting || isRenaming) && ( {(isDeleting || isRenaming) && (
<div className="-ml-2 flex gap-1"> <div className="absolute right-1 z-10 flex text-gray-300">
<IconCheck <button
className="min-w-[20px] text-neutral-400 hover:text-neutral-100" className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
size={16}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -84,32 +74,35 @@ export const PromptComponent: FC<Props> = ({
setIsDeleting(false); setIsDeleting(false);
}} }}
/> >
<IconCheck size={18} />
</button>
<IconX <button
className="min-w-[20px] text-neutral-400 hover:text-neutral-100" className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
size={16}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setIsDeleting(false); setIsDeleting(false);
}} }}
/> >
<IconX size={18} />
</button>
</div> </div>
)} )}
{!isDeleting && !isRenaming && ( {!isDeleting && !isRenaming && (
<div className="-ml-2 flex gap-1"> <div className="absolute right-1 z-10 flex text-gray-300">
<IconTrash <button
className=" min-w-[20px] text-neutral-400 hover:text-neutral-100" className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setIsDeleting(true); setIsDeleting(true);
}} }}
/> >
<IconTrash size={18} />
</button>
</div> </div>
)} )}
</button>
{showModal && ( {showModal && (
<PromptModal <PromptModal
@ -118,6 +111,6 @@ export const PromptComponent: FC<Props> = ({
onUpdatePrompt={onUpdatePrompt} onUpdatePrompt={onUpdatePrompt}
/> />
)} )}
</> </div>
); );
}; };