feat: Allow an option for opting out of training data collection for …

…each chat (#3104)

Issue: #2580

Add a button to support opt-out of training data. 
A toggle would be nicer but currently can not get "opt-out status" from
the list chat, only an PUT API to opt-out

Demo:

https://user-images.githubusercontent.com/40803798/236996856-98898fae-e71c-4de4-9a55-e01e905c564e.mp4

website/public/locales/en/chat.json

@@ -6,6 +6,13 @@
   "delete_chat": "Delete chat",
   "delete_confirmation": "Are you sure you want to delete this chat?",
   "delete_confirmation_detail": "If you delete this chat, it won't be part of our data, and we won't be able to use it to improve our models. Please take the time to upvote and downvote responses in other chats to help us make Open Assistant better!",
+  "opt_out": {
+    "button": "Opt out of training data",
+    "success_message": "You have opted out of training data.",
+    "dialog": {
+      "title": "Confirm opting of training data"
+    }
+  },
   "edit_plugin": "Edit Plugin",
   "empty": "Untitled",
   "input_placeholder": "Ask the assistant anything",

website/src/components/Chat/ChatListItem.tsx

@@ -20,8 +20,9 @@ import {
   useBoolean,
   useDisclosure,
   useOutsideClick,
+  useToast,
 } from "@chakra-ui/react";
-import { Check, EyeOff, LucideIcon, MoreHorizontal, Pencil, Trash, X } from "lucide-react";
+import { Check, EyeOff, LucideIcon, MoreHorizontal, Pencil, Trash, X, FolderX } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
@@ -162,6 +163,7 @@ export const ChatListItem = ({
                 <Portal>
                   {/* higher z-index so that it is displayed over the mobile sidebar */}
                   <MenuList zIndex="var(--chakra-zIndices-popover)">
+                    <OptOutDataButton chatId={chat.id} />
                     <DeleteChatButton chatId={chat.id} onDelete={onDelete} />
                   </MenuList>
                 </Portal>
@@ -238,14 +240,61 @@ const DeleteChatButton = ({
   );
   return (
     <>
-      <MenuItem onClick={onOpen} icon={<Trash />}>
+      <MenuItem onClick={onOpen} icon={<Trash size={16} />}>
         {t("common:delete")}
       </MenuItem>
       {alert}
     </>
   );
 };
 
+const OptOutDataButton = ({ chatId }: { chatId: string }) => {
+  const { t } = useTranslation(["chat", "common"]);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef();
+  const { trigger: updateChat, isMutating: isUpdating } = useSWRMutation(API_ROUTES.UPDATE_CHAT(), put);
+  const toast = useToast();
+
+  const handleOptOut = useCallback(async () => {
+    await updateChat({ chat_id: chatId, allow_data_use: false });
+    onClose();
+    toast({
+      title: t("chat:opt_out.success_message"),
+      status: "success",
+      position: "top",
+    });
+  }, [chatId, onClose, updateChat]);
+
+  const alert = (
+    <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+      <AlertDialogOverlay>
+        <AlertDialogContent>
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            {t("chat:opt_out.dialog.title")}
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <Button ref={cancelRef} onClick={onClose}>
+              {t("common:cancel")}
+            </Button>
+            <Button colorScheme="red" onClick={handleOptOut} ml={3} isLoading={isUpdating}>
+              {t("common:confirm")}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  );
+
+  return (
+    <>
+      <MenuItem onClick={onOpen} icon={<FolderX size={16} />}>
+        {t("chat:opt_out.button")}
+      </MenuItem>
+      {alert}
+    </>
+  );
+};
+
 type ChatListItemIconButtonProps = {
   onClick?: () => void;
   label?: string;