Merge pull request #50 from ansari-project/add-content-flagging-option

Introduce an option to flag offensive content

Author: waleedkadous

src/components/chat/ReactionButtons.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, CloseIcon, CopyIcon, DislikeIcon, LikeIcon } from '@/components/svg'
+import { CheckIcon, CloseIcon, CopyIcon, DislikeIcon, FlagIcon, LikeIcon } from '@/components/svg'
 import { useDirection, useFeedbackHandler, useFeedbackService, useScreenInfo } from '@/hooks'
 import { FeedbackClass, Message, ReactionButtonsState, RootState } from '@/store'
 import { createGeneralThemedStyles } from '@/utils'
@@ -86,6 +86,10 @@ const ReactionButtons: React.FC<ReactionButtonsProps> = ({ threadId, messageId,
       feedbackOptions = feedbacks.bad || []
     }
 
+    if (selectedFeedbackClass === FeedbackClass.RedFlag) {
+      feedbackOptions = feedbacks.redflag || []
+    }
+
     return (
       <View className='flex-row flex-wrap gap-x-2'>
         {feedbackOptions.map((option) => (
@@ -154,6 +158,21 @@ const ReactionButtons: React.FC<ReactionButtonsProps> = ({ threadId, messageId,
             height={24}
           />
         </Pressable>
+        <Pressable
+          onPress={() => {
+            handleFeedbackAction(FeedbackClass.RedFlag)
+            setEditing(true)
+          }}
+          className={`w-5 h-5 ${isRTL ? 'mr-2' : 'ml-2'}`}
+          hitSlop={8}
+        >
+          <FlagIcon
+            fill={selectedIcon === FeedbackClass.RedFlag ? theme.hoverColor : theme.iconFill}
+            hoverFill={theme.hoverColor}
+            width={24}
+            height={24}
+          />
+        </Pressable>
       </View>
       {modalVisible && (
         <View className={`w-full mt-6 ${modalVisible ? 'h-auto' : ''}`}>

src/components/svg/FlagIcon.tsx

@@ -12,7 +12,8 @@ const FlagIcon: React.FC<Props> = (props: Props) => {
       width={props.width || '24'}
       height={props.height || '24'}
       viewBox={props.viewBox || '0 0 24 24'}
-      fill={props.fill || '#08786B'}
+      fill={props.fill || 'currentColor'}
+      stroke={props.stroke || 'currentColor'}
       transform={props.transform || transform}
     >
       <G>

src/i18n/locales/ar/feedback.json

@@ -17,11 +17,6 @@
     }
   ],
   "bad": [
-    {
-      "id": "bad1",
-      "label": "مضارب / غير آمن",
-      "value": "offensive"
-    },
     {
       "id": "bad2",
       "label": "لا يكون صحيحاً في الواقع",
@@ -32,5 +27,17 @@
       "label": "أخرى",
       "value": "other"
     }
+  ],
+  "redflag": [
+    {
+      "id": "redflag1",
+      "label": "مضارب / غير آمن",
+      "value": "offensive"
+    },
+    {
+      "id": "redflag2",
+      "label": "أخرى",
+      "value": "other"
+    }
   ]
-}
+}

src/i18n/locales/bs/feedback.json

@@ -17,11 +17,6 @@
     }
   ],
   "bad": [
-    {
-      "id": "bad1",
-      "label": "Neprikladno / Neposredno",
-      "value": "offensive"
-    },
     {
       "id": "bad2",
       "label": "Nepravilno faktično",
@@ -32,5 +27,17 @@
       "label": "Drugo",
       "value": "other"
     }
+  ],
+  "redflag": [
+    {
+      "id": "redflag1",
+      "label": "Neprikladno / Neposredno",
+      "value": "offensive"
+    },
+    {
+      "id": "redflag2",
+      "label": "Drugo",
+      "value": "other"
+    }
   ]
-}
+}

src/i18n/locales/en/feedback.json

@@ -17,11 +17,6 @@
     }
   ],
   "bad": [
-    {
-      "id": "bad1",
-      "label": "Offensive / Unsafe",
-      "value": "offensive"
-    },
     {
       "id": "bad2",
       "label": "Not factually correct",
@@ -32,5 +27,17 @@
       "label": "Other",
       "value": "other"
     }
+  ],
+  "redflag": [
+    {
+      "id": "redflag1",
+      "label": "Offensive / Unsafe",
+      "value": "offensive"
+    },
+    {
+      "id": "redflag2",
+      "label": "Other",
+      "value": "other"
+    }
   ]
 }

src/i18n/locales/fr/feedback.json

@@ -17,11 +17,6 @@
     }
   ],
   "bad": [
-    {
-      "id": "bad1",
-      "label": "Offensif / Dangereux",
-      "value": "offensive"
-    },
     {
       "id": "bad2",
       "label": "Pas exactement correct",
@@ -32,5 +27,17 @@
       "label": "Autre",
       "value": "other"
     }
+  ],
+  "redflag": [
+    {
+      "id": "redflag1",
+      "label": "Offensif / Dangereux",
+      "value": "offensive"
+    },
+    {
+      "id": "redflag2",
+      "label": "Autre",
+      "value": "other"
+    }
   ]
-}
+}

src/i18n/locales/id/feedback.json

@@ -17,11 +17,6 @@
     }
   ],
   "bad": [
-    {
-      "id": "bad1",
-      "label": "Kasar / Tidak aman",
-      "value": "offensive"
-    },
     {
       "id": "bad2",
       "label": "Tidak benar fakta",
@@ -32,5 +27,17 @@
       "label": "Lainnya",
       "value": "other"
     }
+  ],
+  "redflag": [
+    {
+      "id": "redflag1",
+      "label": "Kasar / Tidak aman",
+      "value": "offensive"
+    },
+    {
+      "id": "redflag2",
+      "label": "Lainnya",
+      "value": "other"
+    }
   ]
-}
+}

src/i18n/locales/tml/feedback.json

@@ -17,11 +17,6 @@
     }
   ],
   "bad": [
-    {
-      "id": "bad1",
-      "label": "அவமதிப்பான/மனத்தை புண்படுத்துகிற/பாதுகாப்பற்ற தகவல் ",
-      "value": "offensive"
-    },
     {
       "id": "bad2",
       "label": "உண்மையற்றது/தவறான தகவல்",
@@ -32,5 +27,17 @@
       "label": "தவறான தகவல்",
       "value": "other"
     }
+  ],
+  "redflag": [
+    {
+      "id": "redflag1",
+      "label": "அவமதிப்பான/மனத்தை புண்படுத்துகிற/பாதுகாப்பற்ற தகவல் ",
+      "value": "offensive"
+    },
+    {
+      "id": "redflag2",
+      "label": "தவறான தகவல்",
+      "value": "other"
+    }
   ]
 }

src/i18n/locales/tur/feedback.json

@@ -17,11 +17,6 @@
     }
   ],
   "bad": [
-    {
-      "id": "bad1",
-      "label": "Saldırgan / Tehlikeli",
-      "value": "offensive"
-    },
     {
       "id": "bad2",
       "label": "Tamamen Doğru Değil",
@@ -32,5 +27,17 @@
       "label": "Diğer",
       "value": "other"
     }
+  ],
+  "redflag": [
+    {
+      "id": "redflag1",
+      "label": "Saldırgan / Tehlikeli",
+      "value": "offensive"
+    },
+    {
+      "id": "redflag2",
+      "label": "Diğer",
+      "value": "other"
+    }
   ]
-}
+}

src/i18n/locales/ur/feedback.json

@@ -17,11 +17,6 @@
     }
   ],
   "bad": [
-    {
-      "id": "bad1",
-      "label": "توہین آمیز / نا محفوظ",
-      "value": "offensive"
-    },
     {
       "id": "bad2",
       "label": "حقائقی طور پر غلط",
@@ -32,5 +27,17 @@
       "label": "دیگر",
       "value": "other"
     }
+  ],
+  "redflag": [
+    {
+      "id": "redflag1",
+      "label": "توہین آمیز / نا محفوظ",
+      "value": "offensive"
+    },
+    {
+      "id": "redflag2",
+      "label": "دیگر",
+      "value": "other"
+    }
   ]
-}
+}