Feat UI/UX Page [Settings] Importing chat data

[+] feat(settings.tsx): add functionality to import chat data from a file
[+] fix(settings.tsx): remove unused state variable 'showLocalData'
[+] refactor(settings.tsx): remove unused code for managing local data

app/components/settings.tsx

@@ -51,6 +51,7 @@ import Locale, {
 import { 
   copyToClipboard,
   downloadAs,
+  readFromFile,
 } from "../utils";
 import Link from "next/link";
 import {
@@ -611,6 +612,21 @@ function LocalDataModal(props: { onClose?: () => void }) {
     await downloadAs(sessions, fileName);
     setExporting(false);
   };
+  const handleImportChat = async () => {
+    if (exporting) return;
+    setExporting(true);
+    try {
+      const rawContent = await readFromFile(); // Read the file content using the appropriate function
+
+      const importedData = JSON.parse(rawContent);
+      // Process the imported chat data and update the chat store
+      chatStore.newSession(importedData.sessions);
+    } catch (e) {
+      showToast(Locale.Settings.Sync.ImportFailed);
+      console.error(e);
+    }
+    setExporting(false);
+  };
 
   return (
     <div className="modal-mask">
@@ -642,9 +658,7 @@ function LocalDataModal(props: { onClose?: () => void }) {
               <IconButton
                 icon={<DownloadIcon />}
                 text={Locale.UI.Import}
-                onClick={() => {
-                  showToast(Locale.WIP);
-                }}
+                onClick={handleImportChat}
               />
               <IconButton
                 icon={<ClearIcon />}
@@ -718,7 +732,6 @@ function SyncItems() {
   }, [syncStore]);
 
   const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
-  const [showLocalData, setShowLocalData] = useState(false);
 
   const stateOverview = useMemo(() => {
     const sessions = chatStore.sessions;
@@ -776,13 +789,6 @@ function SyncItems() {
           subTitle={Locale.Settings.Sync.Overview(stateOverview)}
         >
           <div style={{ display: "flex" }}>
-            <IconButton
-              icon={<EditIcon />}
-              text={Locale.UI.Manage}
-              onClick={() => {
-                setShowLocalData(true);
-              }}
-            />
             <IconButton
               icon={<UploadIcon />}
               text={Locale.UI.Export}
@@ -804,10 +810,6 @@ function SyncItems() {
       {showSyncConfigModal && (
         <SyncConfigModal onClose={() => setShowSyncConfigModal(false)} />
       )}
-
-      {showLocalData && (
-        <LocalDataModal onClose={() => setShowLocalData(false)} />
-      )}
     </>
   );
 }