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

waleedkadous · web-flow · commit 69d4abd7f422 · 2025-04-17T11:40:48.000-07:00
Introduce an option to flag offensive content
diff --git a/src/components/chat/ReactionButtons.tsx b/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' : ''}`}>
diff --git a/src/components/svg/FlagIcon.tsx b/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>
diff --git a/src/i18n/locales/ar/feedback.json b/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"
+    }
   ]
-}
+}
diff --git a/src/i18n/locales/bs/feedback.json b/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"
+    }
   ]
-}
+}
diff --git a/src/i18n/locales/en/feedback.json b/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"
+    }
   ]
 }
diff --git a/src/i18n/locales/fr/feedback.json b/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"
+    }
   ]
-}
+}
diff --git a/src/i18n/locales/id/feedback.json b/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"
+    }
   ]
-}
+}
diff --git a/src/i18n/locales/tml/feedback.json b/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"
+    }
   ]
 }
diff --git a/src/i18n/locales/tur/feedback.json b/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"
+    }
   ]
-}
+}
diff --git a/src/i18n/locales/ur/feedback.json b/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"
+    }
   ]
-}
+}
diff --git a/src/services/FeedbackService.ts b/src/services/FeedbackService.ts
@@ -17,6 +17,7 @@ export type Feedback = {
 export type FeedbacksByCategory = {
   good: Feedback[]
   bad: Feedback[]
+  redflag: Feedback[]
   [key: string]: Feedback[]
 }
 

Original file line number	Diff line number	Diff line change
`@@ -17,11 +17,6 @@`
`17`	`17`	`}`
`18`	`18`	`],`
`19`	`19`	`"bad": [`
`20`		`- {`
`21`		`- "id": "bad1",`
`22`		`- "label": "Offensive / Unsafe",`
`23`		`- "value": "offensive"`
`24`		`- },`
`25`	`20`	`{`
`26`	`21`	`"id": "bad2",`
`27`	`22`	`"label": "Not factually correct",`
`@@ -32,5 +27,17 @@`
`32`	`27`	`"label": "Other",`
`33`	`28`	`"value": "other"`
`34`	`29`	`}`
	`30`	`+ ],`
	`31`	`+ "redflag": [`
	`32`	`+ {`
	`33`	`+ "id": "redflag1",`
	`34`	`+ "label": "Offensive / Unsafe",`
	`35`	`+ "value": "offensive"`
	`36`	`+ },`
	`37`	`+ {`
	`38`	`+ "id": "redflag2",`
	`39`	`+ "label": "Other",`
	`40`	`+ "value": "other"`
	`41`	`+ }`
`35`	`42`	`]`
`36`	`43`	`}`