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]);
return (
<>
<div className="relative flex items-center">
<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"
onClick={(e) => {
e.stopPropagation();
@ -54,27 +54,17 @@ export const PromptComponent: FC<Props> = ({
setRenameValue('');
}}
>
<IconBulbFilled size={16} />
<IconBulbFilled size={18} />
{isRenaming ? (
<input
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"
type="text"
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>
)}
<div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
{prompt.name}
</div>
</button>
{(isDeleting || isRenaming) && (
<div className="-ml-2 flex gap-1">
<IconCheck
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
<div className="absolute right-1 z-10 flex text-gray-300">
<button
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
onClick={(e) => {
e.stopPropagation();
@ -84,32 +74,35 @@ export const PromptComponent: FC<Props> = ({
setIsDeleting(false);
}}
/>
>
<IconCheck size={18} />
</button>
<IconX
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={16}
<button
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
onClick={(e) => {
e.stopPropagation();
setIsDeleting(false);
}}
/>
>
<IconX size={18} />
</button>
</div>
)}
{!isDeleting && !isRenaming && (
<div className="-ml-2 flex gap-1">
<IconTrash
className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
size={18}
<div className="absolute right-1 z-10 flex text-gray-300">
<button
className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
onClick={(e) => {
e.stopPropagation();
setIsDeleting(true);
}}
/>
>
<IconTrash size={18} />
</button>
</div>
)}
</button>
{showModal && (
<PromptModal
@ -118,6 +111,6 @@ export const PromptComponent: FC<Props> = ({
onUpdatePrompt={onUpdatePrompt}
/>
)}
</>
</div>
);
};