Prompts (#229)
This commit is contained in:
Mckay Wrigley
GitHub
@@ -0,0 +1,123 @@
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import {
|
||||
IconBulbFilled,
|
||||
IconCheck,
|
||||
IconTrash,
|
||||
IconX,
|
||||
} from '@tabler/icons-react';
|
||||
import { DragEvent, FC, useEffect, useState } from 'react';
|
||||
import { PromptModal } from './PromptModal';
|
||||
|
||||
interface Props {
|
||||
prompt: Prompt;
|
||||
onUpdatePrompt: (prompt: Prompt) => void;
|
||||
onDeletePrompt: (prompt: Prompt) => void;
|
||||
}
|
||||
|
||||
export const PromptComponent: FC<Props> = ({
|
||||
prompt,
|
||||
onUpdatePrompt,
|
||||
onDeletePrompt,
|
||||
}) => {
|
||||
const [showModal, setShowModal] = useState<boolean>(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isRenaming, setIsRenaming] = useState(false);
|
||||
const [renameValue, setRenameValue] = useState('');
|
||||
|
||||
const handleDragStart = (e: DragEvent<HTMLButtonElement>, prompt: Prompt) => {
|
||||
if (e.dataTransfer) {
|
||||
e.dataTransfer.setData('prompt', JSON.stringify(prompt));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isRenaming) {
|
||||
setIsDeleting(false);
|
||||
} else if (isDeleting) {
|
||||
setIsRenaming(false);
|
||||
}
|
||||
}, [isRenaming, isDeleting]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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"
|
||||
draggable="true"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowModal(true);
|
||||
}}
|
||||
onDragStart={(e) => handleDragStart(e, prompt)}
|
||||
onMouseLeave={() => {
|
||||
setIsDeleting(false);
|
||||
setIsRenaming(false);
|
||||
setRenameValue('');
|
||||
}}
|
||||
>
|
||||
<IconBulbFilled size={16} />
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
{(isDeleting || isRenaming) && (
|
||||
<div className="-ml-2 flex gap-1">
|
||||
<IconCheck
|
||||
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={16}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
if (isDeleting) {
|
||||
onDeletePrompt(prompt);
|
||||
}
|
||||
|
||||
setIsDeleting(false);
|
||||
}}
|
||||
/>
|
||||
|
||||
<IconX
|
||||
className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={16}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDeleting(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isDeleting && !isRenaming && (
|
||||
<div className="-ml-2 flex gap-1">
|
||||
<IconTrash
|
||||
className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDeleting(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{showModal && (
|
||||
<PromptModal
|
||||
prompt={prompt}
|
||||
onClose={() => setShowModal(false)}
|
||||
onUpdatePrompt={onUpdatePrompt}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,117 @@
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
prompt: Prompt;
|
||||
onClose: () => void;
|
||||
onUpdatePrompt: (prompt: Prompt) => void;
|
||||
}
|
||||
|
||||
export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
|
||||
const [name, setName] = useState(prompt.name);
|
||||
const [description, setDescription] = useState(prompt.description);
|
||||
const [content, setContent] = useState(prompt.content);
|
||||
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const nameInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleEnter = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
onUpdatePrompt({ ...prompt, name, description, content: content.trim() });
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleOutsideClick = (e: MouseEvent) => {
|
||||
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('click', handleOutsideClick);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('click', handleOutsideClick);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
nameInputRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="z-100 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
|
||||
onKeyDown={handleEnter}
|
||||
>
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div className="flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div
|
||||
className="hidden sm:inline-block sm:h-screen sm:align-middle"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
|
||||
role="dialog"
|
||||
>
|
||||
<div className="text-sm font-bold text-black dark:text-neutral-200">
|
||||
Name
|
||||
</div>
|
||||
<input
|
||||
ref={nameInputRef}
|
||||
className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
|
||||
placeholder="A name for your prompt."
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
|
||||
Description
|
||||
</div>
|
||||
<textarea
|
||||
className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
|
||||
style={{ resize: 'none' }}
|
||||
placeholder="A description for your prompt."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
/>
|
||||
|
||||
<div className="mt-6 text-sm font-bold text-black dark:text-neutral-200">
|
||||
Prompt
|
||||
</div>
|
||||
<textarea
|
||||
className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
|
||||
style={{ resize: 'none' }}
|
||||
placeholder="Prompt content. Use {{}} to denote a variable. Ex: {{name}} is a {{adjective}} {{noun}}"
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
rows={10}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mt-6 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
|
||||
onClick={() => {
|
||||
const updatedPrompt = {
|
||||
...prompt,
|
||||
name,
|
||||
description,
|
||||
content: content.trim(),
|
||||
};
|
||||
|
||||
onUpdatePrompt(updatedPrompt);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,175 @@
|
||||
import { Folder } from '@/types/folder';
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import {
|
||||
IconArrowBarRight,
|
||||
IconFolderPlus,
|
||||
IconPlus,
|
||||
} from '@tabler/icons-react';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { PromptFolders } from '../Folders/Prompt/PromptFolders';
|
||||
import { Search } from '../Sidebar/Search';
|
||||
import { PromptbarSettings } from './PromptbarSettings';
|
||||
import { Prompts } from './Prompts';
|
||||
|
||||
interface Props {
|
||||
prompts: Prompt[];
|
||||
folders: Folder[];
|
||||
onCreateFolder: (name: string) => void;
|
||||
onDeleteFolder: (folderId: string) => void;
|
||||
onUpdateFolder: (folderId: string, name: string) => void;
|
||||
onToggleSidebar: () => void;
|
||||
onCreatePrompt: () => void;
|
||||
onUpdatePrompt: (prompt: Prompt) => void;
|
||||
onDeletePrompt: (prompt: Prompt) => void;
|
||||
}
|
||||
|
||||
export const Promptbar: FC<Props> = ({
|
||||
folders,
|
||||
prompts,
|
||||
onCreateFolder,
|
||||
onDeleteFolder,
|
||||
onUpdateFolder,
|
||||
onCreatePrompt,
|
||||
onUpdatePrompt,
|
||||
onDeletePrompt,
|
||||
onToggleSidebar,
|
||||
}) => {
|
||||
const { t } = useTranslation('promptbar');
|
||||
const [searchTerm, setSearchTerm] = useState<string>('');
|
||||
const [filteredPrompts, setFilteredPrompts] = useState<Prompt[]>(prompts);
|
||||
|
||||
const handleUpdatePrompt = (prompt: Prompt) => {
|
||||
onUpdatePrompt(prompt);
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const handleDeletePrompt = (prompt: Prompt) => {
|
||||
onDeletePrompt(prompt);
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const handleDrop = (e: any) => {
|
||||
if (e.dataTransfer) {
|
||||
const prompt = JSON.parse(e.dataTransfer.getData('prompt'));
|
||||
|
||||
const updatedPrompt = {
|
||||
...prompt,
|
||||
folderId: e.target.dataset.folderId,
|
||||
};
|
||||
|
||||
onUpdatePrompt(updatedPrompt);
|
||||
|
||||
e.target.style.background = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
const allowDrop = (e: any) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const highlightDrop = (e: any) => {
|
||||
e.target.style.background = '#343541';
|
||||
};
|
||||
|
||||
const removeHighlight = (e: any) => {
|
||||
e.target.style.background = 'none';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTerm) {
|
||||
setFilteredPrompts(
|
||||
prompts.filter((prompt) => {
|
||||
const searchable =
|
||||
prompt.name.toLowerCase() +
|
||||
' ' +
|
||||
prompt.description.toLowerCase() +
|
||||
' ' +
|
||||
prompt.content.toLowerCase();
|
||||
return searchable.includes(searchTerm.toLowerCase());
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
setFilteredPrompts(prompts);
|
||||
}
|
||||
}, [searchTerm, prompts]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed top-0 bottom-0 z-50 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className="text-sidebar flex w-[190px] flex-shrink-0 cursor-pointer select-none items-center gap-3 rounded-md border border-white/20 p-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
onClick={() => {
|
||||
onCreatePrompt();
|
||||
setSearchTerm('');
|
||||
}}
|
||||
>
|
||||
<IconPlus size={16} />
|
||||
{t('New prompt')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
onClick={() => onCreateFolder(t('New folder'))}
|
||||
>
|
||||
<IconFolderPlus size={16} />
|
||||
</button>
|
||||
|
||||
<IconArrowBarRight
|
||||
className="ml-1 hidden cursor-pointer p-1 text-neutral-300 hover:text-neutral-400 sm:flex"
|
||||
size={32}
|
||||
onClick={onToggleSidebar}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{prompts.length > 1 && (
|
||||
<Search
|
||||
placeholder="Search prompts..."
|
||||
searchTerm={searchTerm}
|
||||
onSearch={setSearchTerm}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex-grow overflow-auto">
|
||||
{folders.length > 0 && (
|
||||
<div className="flex border-b border-white/20 pb-2">
|
||||
<PromptFolders
|
||||
searchTerm={searchTerm}
|
||||
prompts={filteredPrompts}
|
||||
folders={folders.filter((folder) => folder.type === 'prompt')}
|
||||
onUpdateFolder={onUpdateFolder}
|
||||
onDeleteFolder={onDeleteFolder}
|
||||
// prompt props
|
||||
onDeletePrompt={handleDeletePrompt}
|
||||
onUpdatePrompt={handleUpdatePrompt}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{prompts.length > 0 ? (
|
||||
<div
|
||||
className="h-full pt-2"
|
||||
onDrop={(e) => handleDrop(e)}
|
||||
onDragOver={allowDrop}
|
||||
onDragEnter={highlightDrop}
|
||||
onDragLeave={removeHighlight}
|
||||
>
|
||||
<Prompts
|
||||
prompts={filteredPrompts.filter((prompt) => !prompt.folderId)}
|
||||
onUpdatePrompt={handleUpdatePrompt}
|
||||
onDeletePrompt={handleDeletePrompt}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-4 text-center text-white">
|
||||
<div>{t('No prompts.')}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PromptbarSettings />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
import { FC } from "react";
|
||||
|
||||
interface Props {}
|
||||
|
||||
export const PromptbarSettings: FC<Props> = () => {
|
||||
return <div></div>;
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Prompt } from '@/types/prompt';
|
||||
import { FC } from 'react';
|
||||
import { PromptComponent } from './Prompt';
|
||||
|
||||
interface Props {
|
||||
prompts: Prompt[];
|
||||
onUpdatePrompt: (prompt: Prompt) => void;
|
||||
onDeletePrompt: (prompt: Prompt) => void;
|
||||
}
|
||||
|
||||
export const Prompts: FC<Props> = ({
|
||||
prompts,
|
||||
onUpdatePrompt,
|
||||
onDeletePrompt,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-1">
|
||||
{prompts
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((prompt, index) => (
|
||||
<PromptComponent
|
||||
key={index}
|
||||
prompt={prompt}
|
||||
onUpdatePrompt={onUpdatePrompt}
|
||||
onDeletePrompt={onDeletePrompt}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user