feat: sync remote sources through celery periodic tasks

frontend/src/api/endpoints.ts

@@ -16,6 +16,7 @@ const endpoints = {
     TOKEN_ANALYTICS: '/api/get_token_analytics',
     FEEDBACK_ANALYTICS: '/api/get_feedback_analytics',
     LOGS: `/api/get_user_logs`,
+    MANAGE_SYNC: '/api/manage_sync',
   },
   CONVERSATION: {
     ANSWER: '/api/answer',

frontend/src/api/services/userService.ts

@@ -31,6 +31,8 @@ const userService = {
     apiClient.post(endpoints.USER.FEEDBACK_ANALYTICS, data),
   getLogs: (data: any): Promise<any> =>
     apiClient.post(endpoints.USER.LOGS, data),
+  manageSync: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.MANAGE_SYNC, data),
 };
 
 export default userService;

frontend/src/assets/sync.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M.01 0h24v24h-24V0z" fill="none"/><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>

frontend/src/components/DropdownMenu.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+type DropdownMenuProps = {
+  name: string;
+  options: { label: string; value: string }[];
+  onSelect: (value: string) => void;
+  defaultValue?: string;
+  icon?: string;
+};
+
+export default function DropdownMenu({
+  name,
+  options,
+  onSelect,
+  defaultValue = 'none',
+  icon,
+}: DropdownMenuProps) {
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedOption, setSelectedOption] = React.useState(
+    options.find((option) => option.value === defaultValue) || options[0],
+  );
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+  const handleClickOption = (optionId: number) => {
+    setIsOpen(false);
+    setSelectedOption(options[optionId]);
+    onSelect(options[optionId].value);
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  return (
+    <div className="static inline-block text-left" ref={dropdownRef}>
+      <button
+        onClick={handleToggle}
+        className="flex w-20 cursor-pointer flex-row items-center gap-px rounded-3xl border-purple-30/25 bg-purple-30 p-2 text-xs text-white hover:bg-[#6F3FD1] focus:outline-none"
+      >
+        {icon && <img src={icon} alt="OptionIcon" className="h-4 w-4" />}
+        {selectedOption.value !== 'never' ? selectedOption.label : name}
+      </button>
+      <div
+        className={`absolute z-50 right-0 mt-1 w-28 transform rounded-md bg-transparent shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${
+          isOpen
+            ? 'scale-100 opacity-100'
+            : 'pointer-events-none scale-95 opacity-0'
+        }`}
+      >
+        <div
+          role="menu"
+          className="overflow-hidden rounded-md"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          {options.map((option, idx) => (
+            <div
+              id={`option-${idx}`}
+              className={`cursor-pointer px-4 py-2 text-xs hover:bg-gray-100 dark:text-light-gray dark:hover:bg-purple-taupe ${
+                selectedOption.value === option.value
+                  ? 'bg-gray-100 dark:bg-purple-taupe'
+                  : 'bg-white dark:bg-dark-charcoal'
+              }`}
+              role="menuitem"
+              key={option.value}
+              onClick={() => handleClickOption(idx)}
+            >
+              {option.label}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/models/misc.ts

@@ -11,6 +11,7 @@ export type Doc = {
   tokens?: string;
   type?: string;
   retriever?: string;
+  syncFrequency?: string;
 };
 
 export type PromptProps = {

frontend/src/settings/Documents.tsx

@@ -1,7 +1,14 @@
-import { DocumentsProps } from '../models/misc';
-import Trash from '../assets/trash.svg';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import userService from '../api/services/userService';
+import SyncIcon from '../assets/sync.svg';
+import Trash from '../assets/trash.svg';
+import DropdownMenu from '../components/DropdownMenu';
+import { Doc, DocumentsProps } from '../models/misc';
+import { getDocs } from '../preferences/preferenceApi';
+import { setSourceDocs } from '../preferences/preferenceSlice';
 
 // Utility function to format numbers
 const formatTokens = (tokens: number): string => {
@@ -25,10 +32,29 @@ const Documents: React.FC<DocumentsProps> = ({
   handleDeleteDocument,
 }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const syncOptions = [
+    { label: 'Never', value: 'never' },
+    { label: 'Daily', value: 'daily' },
+    { label: 'Weekly', value: 'weekly' },
+    { label: 'Monthly', value: 'monthly' },
+  ];
+
+  const handleManageSync = (doc: Doc, sync_frequency: string) => {
+    userService
+      .manageSync({ source_id: doc.id, sync_frequency })
+      .then(() => {
+        return getDocs();
+      })
+      .then((data) => {
+        dispatch(setSourceDocs(data));
+      })
+      .catch((error) => console.error(error));
+  };
   return (
     <div className="mt-8">
-      <div className="flex flex-col">
-        <div className="w-full overflow-x-auto">
+      <div className="flex flex-col relative">
+        <div className="z-10 w-full overflow-x-auto">
           <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
             <thead>
               <tr>
@@ -64,18 +90,33 @@ const Documents: React.FC<DocumentsProps> = ({
                       {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
                     </td>
                     <td className="border-t px-4 py-2">
-                      {document.type !== 'remote' && (
-                        <img
-                          src={Trash}
-                          alt="Delete"
-                          className="h-4 w-4 cursor-pointer hover:opacity-50"
-                          id={`img-${index}`}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            handleDeleteDocument(index, document);
-                          }}
-                        />
-                      )}
+                      <div className="flex flex-row items-center">
+                        {document.type !== 'remote' && (
+                          <img
+                            src={Trash}
+                            alt="Delete"
+                            className="h-4 w-4 cursor-pointer hover:opacity-50"
+                            id={`img-${index}`}
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              handleDeleteDocument(index, document);
+                            }}
+                          />
+                        )}
+                        {document.syncFrequency && (
+                          <div className="ml-2">
+                            <DropdownMenu
+                              name="Sync"
+                              options={syncOptions}
+                              onSelect={(value: string) => {
+                                handleManageSync(document, value);
+                              }}
+                              defaultValue={document.syncFrequency}
+                              icon={SyncIcon}
+                            />
+                          </div>
+                        )}
+                      </div>
                     </td>
                   </tr>
                 ))}