feat: 🎸 add export chat records (#16)

* feat: 🎸 add export chat records

src-tauri/src/cmd.rs

@@ -1,3 +1,7 @@
+use serde_json::Value;
+use tokio::fs::OpenOptions;
+use tokio::io::AsyncWriteExt;
+
 use crate::app;
 use crate::error::Result;
 use crate::server::helper::chatgpt::ChatGPTModelConfiguration;
@@ -9,8 +13,26 @@ pub(crate) async fn update_global_chatgpt_config(config: ChatGPTModelConfigurati
 
 #[tauri::command]
 pub(crate) async fn update_chatgpt_config_by_id(
-    id: &str,
-    config: ChatGPTModelConfiguration,
+    id: &str, config: ChatGPTModelConfiguration,
 ) -> Result<ChatGPTModelConfiguration> {
     app::update_chatgpt_config_by_id(id, &config).await
 }
+
+#[tauri::command]
+pub(crate) async fn write_to_file(filename: String, content: String) -> Result<(), String> {
+    let download_dir = dirs::download_dir().unwrap();
+    let content_str: Value = serde_json::from_str(&content).map_err(|err| err.to_string())?;
+    let content_json = serde_json::to_string_pretty(&content_str).map_err(|err| err.to_string())?;
+    let mut file = OpenOptions::new()
+        .write(true)
+        .create(true)
+        .truncate(true)
+        .open(download_dir.join(&filename))
+        .await
+        .map_err(|err| err.to_string())?;
+
+    file.write_all(content_json.as_bytes())
+        .await
+        .map_err(|err| err.to_string())?;
+    Ok(())
+}

src-tauri/src/main.rs

@@ -24,6 +24,7 @@ fn main() {
         .invoke_handler(tauri::generate_handler![
             cmd::update_global_chatgpt_config,
             cmd::update_chatgpt_config_by_id,
+            cmd::write_to_file,
         ]);
 
     let app = builder

src/components/Textarea/index.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 	// TODO: add other feat(eg: export data)
-	import { toRefs, watch } from 'vue';
+	import { computed, toRefs, watch } from 'vue';
+	import { useChatStore } from '@/store';
+	import { Notification } from '@arco-design/web-vue';
+	import { invoke } from '@tauri-apps/api/tauri';
 
 	interface Props {
 		modelValue: string;
@@ -38,6 +41,48 @@
 		const { value } = e.target as HTMLInputElement;
 		updateValue(value);
 	};
+	// -------------------handle event-----------------------------------------
+	const chatStore = useChatStore();
+
+	const getCurrentCacheData = computed(() => {
+		const currentActiveId = chatStore.current;
+		if (!currentActiveId) {
+			return [];
+		}
+		return chatStore
+			.getCacheById(currentActiveId)
+			.filter((ele: any) => !ele.error);
+	});
+
+	const getCurrentTitle = computed(() => {
+		const currentActiveId = chatStore.current;
+		if (!currentActiveId) {
+			return '';
+		}
+		return chatStore.getChatSettingById(currentActiveId)?.title;
+	});
+
+	async function saveToFile(filename: string, content: string) {
+		try {
+			await invoke('write_to_file', { filename, content }).then(() => {
+				Notification.success({
+					title: 'File saved successfully',
+					content: `$HOME/Downloads/${filename}`,
+				});
+			});
+			console.log('File saved successfully');
+		} catch (error) {
+			console.error('Error saving file:', error);
+		}
+	}
+	const exportChatToJson = () => {
+		const data = getCurrentCacheData.value;
+		const title = getCurrentTitle.value;
+		saveToFile(`${title}.json`, JSON.stringify(data));
+	};
+	const handleSaveToJson = () => {
+		exportChatToJson();
+	};
 </script>
 
 <template>
@@ -178,7 +223,8 @@
 					</button>
 					<button
 						type="button"
-						class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
+						class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
+						@click="handleSaveToJson">
 						<svg
 							aria-hidden="true"
 							class="w-5 h-5"

src/locales/en-US.ts

@@ -19,5 +19,6 @@ export default {
 		delete: 'Delete',
 		newChat: 'New Chat',
 		editChat: 'Edit Chat',
+		saveSuccess: 'save success',
 	},
 };

src/locales/zh-CN.ts

@@ -19,5 +19,6 @@ export default {
 		delete: '删除',
 		newChat: '新建聊天',
 		editChat: '编辑聊天',
+		saveSuccess: '导出成功',
 	},
 };

src/utils/misc/index.ts

@@ -8,3 +8,15 @@ export function parseDomain(url: string) {
 		tld,
 	};
 }
+
+export function fileSaver(data: string, filename: string) {
+	const blob = new Blob([data], { type: 'octet/stream;charset=utf-8' });
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement('a');
+	link.setAttribute('href', url);
+	link.setAttribute('download', filename);
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+	URL.revokeObjectURL(url);
+}