diff --git a/client/src/components/Bookmarks/BookmarkItem.tsx b/client/src/components/Bookmarks/BookmarkItem.tsx index d5a214a494..ebf7b298f6 100644 --- a/client/src/components/Bookmarks/BookmarkItem.tsx +++ b/client/src/components/Bookmarks/BookmarkItem.tsx @@ -5,7 +5,7 @@ import { Spinner } from '~/components/svg'; import { cn } from '~/utils'; type MenuItemProps = { - tag: string; + tag: string | React.ReactNode; selected: boolean; count?: number; handleSubmit: (tag: string) => Promise; @@ -25,14 +25,20 @@ const BookmarkItem: FC = ({ const [isLoading, setIsLoading] = useState(false); const clickHandler = async () => { setIsLoading(true); - await handleSubmit(tag); + await handleSubmit(tag as string); setIsLoading(false); }; + + const breakWordStyle: React.CSSProperties = { + wordBreak: 'break-word', + overflowWrap: 'anywhere', + }; + return (
= ({ ) : ( )} -
{tag}
+
{tag}
{count !== undefined && (
diff --git a/client/src/components/Prompts/DeleteVersion.tsx b/client/src/components/Prompts/DeleteVersion.tsx index fbdcc466ab..c613fd6332 100644 --- a/client/src/components/Prompts/DeleteVersion.tsx +++ b/client/src/components/Prompts/DeleteVersion.tsx @@ -1,5 +1,5 @@ -import { Button, Dialog, DialogTrigger, Label } from '~/components/ui'; -import DialogTemplate from '~/components/ui/DialogTemplate'; +import { Button, OGDialog, OGDialogTrigger, Label } from '~/components/ui'; +import OGDialogTemplate from '~/components/ui/OGDialogTemplate'; import { TrashIcon } from '~/components/svg'; import { useLocalize } from '~/hooks'; @@ -15,8 +15,8 @@ const DeleteVersion = ({ const localize = useLocalize(); return ( - - + + - - + - + ); }; diff --git a/client/src/components/Prompts/Groups/DashGroupItem.tsx b/client/src/components/Prompts/Groups/DashGroupItem.tsx index 1858cb2e27..da987adc0b 100644 --- a/client/src/components/Prompts/Groups/DashGroupItem.tsx +++ b/client/src/components/Prompts/Groups/DashGroupItem.tsx @@ -7,16 +7,16 @@ import { Input, Label, Button, - Dialog, + OGDialog, DropdownMenu, - DialogTrigger, + OGDialogTrigger, DropdownMenuGroup, DropdownMenuContent, DropdownMenuTrigger, + DropdownMenuItem, } from '~/components/ui'; import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon'; -import DialogTemplate from '~/components/ui/DialogTemplate'; -import { RenameButton } from '~/components/Conversations'; +import OGDialogTemplate from '~/components/ui/OGDialogTemplate'; import { useLocalize, useAuthContext } from '~/hooks'; import { TrashIcon } from '~/components/svg'; import { cn } from '~/utils/'; @@ -36,9 +36,9 @@ export default function DashGroupItem({ const blurTimeoutRef = useRef(); const [nameEditFlag, setNameEditFlag] = useState(false); const [nameInputField, setNameInputField] = useState(group.name); - const isOwner = useMemo(() => user?.id === group?.author, [user, group]); + const isOwner = useMemo(() => user?.id === group.author, [user, group]); const groupIsGlobal = useMemo( - () => instanceProjectId && group?.projectIds?.includes(instanceProjectId), + () => instanceProjectId && group.projectIds?.includes(instanceProjectId), [group, instanceProjectId], ); @@ -61,7 +61,7 @@ export default function DashGroupItem({ }; const saveRename = () => { - updateGroup.mutate({ payload: { name: nameInputField }, id: group?._id || '' }); + updateGroup.mutate({ payload: { name: nameInputField }, id: group._id || '' }); }; const handleBlur = () => { @@ -70,6 +70,22 @@ export default function DashGroupItem({ }, 100); }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + navigate(`/d/prompts/${group._id}`, { replace: true }); + } + }; + + const handleRename = (e: React.MouseEvent | React.KeyboardEvent) => { + e.stopPropagation(); + setNameEditFlag(true); + }; + + const handleDelete = () => { + deletePromptGroupMutation.mutate({ id: group._id || '' }); + }; + return (
{ - if (nameEditFlag) { - return; + if (!nameEditFlag) { + navigate(`/d/prompts/${group._id}`, { replace: true }); } - navigate(`/d/prompts/${group._id}`, { replace: true }); }} + onKeyDown={handleKeyDown} + role="button" + tabIndex={0} + aria-label={`${group.name} prompt group`} >
- {/* */}
{nameEditFlag ? ( <>
+ { - e.stopPropagation(); - }} - onChange={(e) => { - setNameInputField(e.target.value); - }} + onClick={(e) => e.stopPropagation()} + onChange={(e) => setNameInputField(e.target.value)} onKeyDown={(e) => { if (e.key === 'Escape') { cancelRename(); @@ -106,17 +125,18 @@ export default function DashGroupItem({ } }} onBlur={handleBlur} + aria-label={localize('com_ui_rename_group')} /> - +
{localize('com_ui_renaming_var', group.name)} @@ -126,13 +146,22 @@ export default function DashGroupItem({ <>
- +
- {groupIsGlobal && } + {groupIsGlobal && ( + + )} {(isOwner || user?.role === SystemRoles.ADMIN) && ( <> @@ -140,39 +169,36 @@ export default function DashGroupItem({ - { - e.stopPropagation(); - setNameEditFlag(true); - }} - appendLabel={true} - className={cn('m-0 w-full p-2')} - /> + + {localize('com_ui_rename')} + - - + + - - +
+ )}
- {group.oneliner ? group.oneliner : group?.productionPrompt?.prompt ?? ''} + {group.oneliner ? group.oneliner : group.productionPrompt?.prompt ?? ''}
)} diff --git a/client/src/localization/languages/Eng.ts b/client/src/localization/languages/Eng.ts index a6e347e726..57ef7d6d82 100644 --- a/client/src/localization/languages/Eng.ts +++ b/client/src/localization/languages/Eng.ts @@ -308,6 +308,7 @@ export default { com_ui_bookmarks_delete_error: 'There was an error deleting the bookmark', com_ui_bookmarks_add_to_conversation: 'Add to current conversation', com_ui_bookmarks_filter: 'Filter bookmarks...', + com_ui_no_bookmarks: 'it seems like you have no bookmarks yet. Click on a chat and add a new one', com_auth_error_login: 'Unable to login with the information provided. Please check your credentials and try again.', com_auth_error_login_rl: