🛡️ fix: Minor Vulnerabilities (#4543)

* fix: ReDoS in ChatGPT Import

* ci: should correctly process citations from real ChatGPT data

* ci: Add ReDoS vulnerability test for processAssistantMessage

* refactor: Update thread management and citation handling

* refactor(validateImageRequest): robust validation

* refactor(Prompt.js): update name search regex to escape special characters

* refactor(Preset): exclude user from preset update to prevent mass assignment

* refactor(files.js): Improve file deletion process

* ci: updated validateImageRequest.spec.js

* a11y: plugin pagination

* refactor(CreatePromptForm.tsx): Improve input field styling

* chore(Prompts): typing and accessibility

* fix: prompt creation access role check

* chore: remove duplicate jsdocs

client/src/components/Plugins/Store/PluginPagination.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useLocalize } from '~/hooks';
 
 type TPluginPaginationProps = {
   currentPage: number;
@@ -11,6 +12,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
   maxPage,
   onChangePage,
 }) => {
+  const localize = useLocalize();
   const pages = [...Array(maxPage).keys()].map((i) => i + 1);
 
   const handlePageChange = (page: number) => {
@@ -24,8 +26,14 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
     <div className="flex gap-2 text-sm text-black/60 dark:text-white/70">
       <div
         role="button"
+        tabIndex={0}
         aria-label="Previous page"
         onClick={() => handlePageChange(currentPage - 1)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            onChangePage(currentPage - 1);
+          }
+        }}
         className={`flex cursor-default items-center text-sm ${
           currentPage === 1
             ? 'text-black/70 opacity-50 dark:text-white/70'
@@ -45,14 +53,15 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline points="15 18 9 12 15 6"></polyline>
+          <polyline points="15 18 9 12 15 6" />
         </svg>
-        Prev
+        {localize('com_ui_prev')}
       </div>
       {pages.map((page) => (
         <div
           role="button"
           key={page}
+          tabIndex={0}
           className={`flex h-5 w-5 items-center justify-center text-sm ${
             currentPage === page
               ? 'text-blue-600 hover:text-blue-600 dark:text-blue-600 dark:hover:text-blue-600'
@@ -60,6 +69,11 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
           }`}
           style={{ userSelect: 'none' }}
           onClick={() => onChangePage(page)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              onChangePage(page);
+            }
+          }}
         >
           {page}
         </div>
@@ -67,7 +81,13 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
       <div
         role="button"
         aria-label="Next page"
+        tabIndex={0}
         onClick={() => handlePageChange(currentPage + 1)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            onChangePage(currentPage + 1);
+          }
+        }}
         className={`flex cursor-default items-center text-sm ${
           currentPage === maxPage
             ? 'text-black/70 opacity-50 dark:text-white/70'
@@ -75,7 +95,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
         }`}
         style={{ userSelect: 'none' }}
       >
-        Next
+        {localize('com_ui_next')}
         <svg
           stroke="currentColor"
           fill="none"
@@ -88,7 +108,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <polyline points="9 18 15 12 9 6"></polyline>
+          <polyline points="9 18 15 12 9 6" />
         </svg>
       </div>
     </div>

client/src/components/Prompts/Groups/CreatePromptForm.tsx

@@ -81,10 +81,10 @@ const CreatePromptForm = ({
       CreateFormValues,
       'name' | 'category' | 'oneliner' | 'command'
     >;
-    if ((oneliner?.length || 0) > 0) {
+    if ((oneliner?.length ?? 0) > 0) {
       groupData.oneliner = oneliner;
     }
-    if ((command?.length || 0) > 0) {
+    if ((command?.length ?? 0) > 0) {
       groupData.command = command;
     }
     createPromptMutation.mutate({
@@ -111,7 +111,7 @@ const CreatePromptForm = ({
                   <Input
                     {...field}
                     type="text"
-                    className="mr-2 w-full border border-border-medium p-2 text-2xl placeholder:text-text-tertiary dark:placeholder:text-text-secondary"
+                    className="mr-2 w-full border border-border-medium p-2 text-2xl text-text-primary placeholder:text-text-tertiary dark:placeholder:text-text-secondary"
                     placeholder={`${localize('com_ui_prompt_name')}*`}
                     tabIndex={0}
                   />

client/src/components/Prompts/Groups/FilterPrompts.tsx

@@ -35,7 +35,7 @@ export function FilterItem({
     >
       {icon}
       <span>{label}</span>
-      {isActive && (
+      {isActive === true && (
         <span className="absolute bottom-0 right-0 top-0 flex items-center">
           <Dot />
         </span>
@@ -122,7 +122,7 @@ export default function FilterPrompts({
         return setCategory('');
       }
       setCategory(category);
-      if (icon && React.isValidElement(icon)) {
+      if (icon != null && React.isValidElement(icon)) {
         setSelectedIcon(icon);
       }
     },
@@ -130,7 +130,7 @@ export default function FilterPrompts({
   );
 
   return (
-    <div className={cn('flex gap-2', className)}>
+    <div className={cn('flex gap-2 text-text-primary', className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button