From 64a17abfe2f84e9dc205aa417f6ce9a05c7c1cd2 Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Tue, 3 Oct 2023 08:08:11 +0700 Subject: [PATCH 1/4] Client App [Notification] [+] feat(global.d.ts): add support for window.__TAURI__.notification methods [+] feat(update.ts): add notification for new version availability [+] fix(Cargo.toml): add tauri feature "notification-all" to enable notifications [+] fix(tauri.conf.json): enable all notification features in tauri configuration --- app/global.d.ts | 5 +++++ app/store/update.ts | 29 +++++++++++++++++++++++++++++ src-tauri/Cargo.toml | 2 +- src-tauri/tauri.conf.json | 6 ++++++ 4 files changed, 41 insertions(+), 1 deletion(-) diff --git a/app/global.d.ts b/app/global.d.ts index 524ce77dbc6..dc1d5265375 100644 --- a/app/global.d.ts +++ b/app/global.d.ts @@ -13,5 +13,10 @@ declare module "*.svg"; declare interface Window { __TAURI__?: { writeText(text: string): Promise; + notification:{ + requestPermission(): Promise; + isPermissionGranted(): Promise; + sendNotification(options: string | Options): void; + }; }; } diff --git a/app/store/update.ts b/app/store/update.ts index 42b86586c62..facb5732163 100644 --- a/app/store/update.ts +++ b/app/store/update.ts @@ -2,8 +2,10 @@ import { FETCH_COMMIT_URL, FETCH_TAG_URL, StoreKey } from "../constant"; import { api } from "../client/api"; import { getClientConfig } from "../config/client"; import { createPersistStore } from "../utils/store"; +import ChatGptIcon from "../icons/chatgpt.png"; const ONE_MINUTE = 60 * 1000; +const isApp = !!getClientConfig()?.isApp; function formatVersionDate(t: string) { const d = new Date(+t); @@ -80,6 +82,33 @@ export const useUpdateStore = createPersistStore( set(() => ({ remoteVersion: remoteId, })); + if (window.__TAURI__?.notification && isApp) { + // Check if notification permission is granted + await window.__TAURI__?.notification.isPermissionGranted().then((granted) => { + if (!granted) { + // Send a notification without waiting for permission (because we don't neeed a permisison once client is already click "check") + window.__TAURI__?.notification.sendNotification({ + title: "ChatGPT Next Web", + body: `A new version (${remoteId}) is available.`, + icon: `${ChatGptIcon.src}`, + sound: "Default" + }); + } else { + // Request permission to show notifications + window.__TAURI__?.notification.requestPermission().then((permission) => { + if (permission === 'granted') { + // Show a notification using Tauri + window.__TAURI__?.notification.sendNotification({ + title: "ChatGPT Next Web", + body: `A new version (${remoteId}) is available.`, + icon: `${ChatGptIcon.src}`, + sound: "Default" + }); + } + }); + } + }); + } console.log("[Got Upstream] ", remoteId); } catch (error) { console.error("[Fetch Upstream Commit Id]", error); diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index ac5d04e836e..fee1c860fb9 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -17,7 +17,7 @@ tauri-build = { version = "1.3.0", features = [] } [dependencies] serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } -tauri = { version = "1.3.0", features = ["clipboard-all", "dialog-all", "shell-open", "updater", "window-close", "window-hide", "window-maximize", "window-minimize", "window-set-icon", "window-set-ignore-cursor-events", "window-set-resizable", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] } +tauri = { version = "1.3.0", features = ["notification-all", "fs-all", "clipboard-all", "dialog-all", "shell-open", "updater", "window-close", "window-hide", "window-maximize", "window-minimize", "window-set-icon", "window-set-ignore-cursor-events", "window-set-resizable", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] } tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" } [features] diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 77b02a3bae8..147fc9944f6 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -44,6 +44,12 @@ "startDragging": true, "unmaximize": true, "unminimize": true + }, + "fs": { + "all": true + }, + "notification": { + "all": true } }, "bundle": { From d2ad01a9ffd8fd0645013aca862c691af3c2f01f Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Tue, 3 Oct 2023 08:49:03 +0700 Subject: [PATCH 2/4] Client App Fix Issue [Bug] 'export' button does not work #2884 [+] fix(exporter.tsx): add async keyword to download function [+] feat(exporter.tsx): add support for saving image file using window.__TAURI__ API [+] feat(global.d.ts): add types for window.__TAURI__ API methods [+] feat(locales): add translations for download success and failure messages [+] feat(sync.ts): add support for generating backup file name with date and time [+] fix(utils.ts): add async keyword to downloadAs function and add support for saving file using window.__TAURI__ API --- app/components/exporter.tsx | 58 ++++++++++++++++++++++++++++--------- app/global.d.ts | 7 +++++ app/locales/cn.ts | 4 +++ app/locales/en.ts | 4 +++ app/locales/id.ts | 4 +++ app/store/sync.ts | 8 ++++- app/utils.ts | 43 ++++++++++++++++++++++----- 7 files changed, 106 insertions(+), 22 deletions(-) diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx index 5b3e8a9a180..0a885d87463 100644 --- a/app/components/exporter.tsx +++ b/app/components/exporter.tsx @@ -433,25 +433,55 @@ export function ImagePreviewer(props: { const isMobile = useMobileScreen(); - const download = () => { + const download = async () => { showToast(Locale.Export.Image.Toast); const dom = previewRef.current; if (!dom) return; - toPng(dom) - .then((blob) => { - if (!blob) return; - - if (isMobile || getClientConfig()?.isApp) { - showImageModal(blob); + + const isApp = getClientConfig()?.isApp; + + try { + const blob = await toPng(dom); + if (!blob) return; + + if (isMobile || (isApp && window.__TAURI__)) { + if (isApp && window.__TAURI__) { + const result = await window.__TAURI__.dialog.save({ + defaultPath: `${props.topic}.png`, + filters: [ + { + name: "PNG Files", + extensions: ["png"], + }, + { + name: "All Files", + extensions: ["*"], + }, + ], + }); + + if (result !== null) { + const response = await fetch(blob); + const buffer = await response.arrayBuffer(); + const uint8Array = new Uint8Array(buffer); + await window.__TAURI__.fs.writeBinaryFile(result, uint8Array); + showToast(Locale.Download.Success); + } else { + showToast(Locale.Download.Failed); + } } else { - const link = document.createElement("a"); - link.download = `${props.topic}.png`; - link.href = blob; - link.click(); - refreshPreview(); + showImageModal(blob); } - }) - .catch((e) => console.log("[Export Image] ", e)); + } else { + const link = document.createElement("a"); + link.download = `${props.topic}.png`; + link.href = blob; + link.click(); + refreshPreview(); + } + } catch (error) { + showToast(Locale.Download.Failed); + } }; const refreshPreview = () => { diff --git a/app/global.d.ts b/app/global.d.ts index dc1d5265375..e0a2c3f0686 100644 --- a/app/global.d.ts +++ b/app/global.d.ts @@ -13,6 +13,13 @@ declare module "*.svg"; declare interface Window { __TAURI__?: { writeText(text: string): Promise; + invoke(command: string, payload?: Record): Promise; + dialog: { + save(options?: Record): Promise; + }; + fs: { + writeBinaryFile(path: string, data: Uint8Array): Promise; + }; notification:{ requestPermission(): Promise; isPermissionGranted(): Promise; diff --git a/app/locales/cn.ts b/app/locales/cn.ts index b2afc753457..746f3580bd0 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -323,6 +323,10 @@ const cn = { Success: "已写入剪切板", Failed: "复制失败，请赋予剪切板权限", }, + Download: { + Success: "内容已下载到您的目录。", + Failed: "下载失败。", + }, Context: { Toast: (x: any) => `包含 ${x} 条预设提示词`, Edit: "当前对话设置", diff --git a/app/locales/en.ts b/app/locales/en.ts index 697d09d1f4e..62823b05197 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -329,6 +329,10 @@ const en: LocaleType = { Success: "Copied to clipboard", Failed: "Copy failed, please grant permission to access clipboard", }, + Download: { + Success: "Content downloaded to your directory.", + Failed: "Download failed.", + }, Context: { Toast: (x: any) => `With ${x} contextual prompts`, Edit: "Current Chat Settings", diff --git a/app/locales/id.ts b/app/locales/id.ts index 244c5ade19a..7e1366f964e 100644 --- a/app/locales/id.ts +++ b/app/locales/id.ts @@ -301,6 +301,10 @@ const id: PartialLocaleType = { Failed: "Gagal menyalin, mohon berikan izin untuk mengakses clipboard atau Clipboard API tidak didukung (Tauri)", }, + Download: { + Success: "Konten berhasil diunduh ke direktori Anda.", + Failed: "Unduhan gagal.", + }, Context: { Toast: (x: any) => `Dengan ${x} promp kontekstual`, Edit: "Pengaturan Obrolan Saat Ini", diff --git a/app/store/sync.ts b/app/store/sync.ts index c194162fcb0..c34ae7b9bbd 100644 --- a/app/store/sync.ts +++ b/app/store/sync.ts @@ -1,3 +1,4 @@ +import { getClientConfig } from "../config/client"; import { Updater } from "../typing"; import { ApiPath, STORAGE_KEY, StoreKey } from "../constant"; import { createPersistStore } from "../utils/store"; @@ -20,6 +21,7 @@ export interface WebDavConfig { password: string; } +const isApp = !!getClientConfig()?.isApp; export type SyncStore = GetStoreState; const DEFAULT_SYNC_STATE = { @@ -57,7 +59,11 @@ export const useSyncStore = createPersistStore( export() { const state = getLocalAppState(); - const fileName = `Backup-${new Date().toLocaleString()}.json`; + const datePart = isApp + ? `${new Date().toLocaleDateString().replace(/\//g, '_')} ${new Date().toLocaleTimeString().replace(/:/g, '_')}` + : new Date().toLocaleString(); + + const fileName = `Backup-${datePart}.json`; downloadAs(JSON.stringify(state), fileName); }, diff --git a/app/utils.ts b/app/utils.ts index 37c17dd760d..19e55ce63e0 100644 --- a/app/utils.ts +++ b/app/utils.ts @@ -31,12 +31,41 @@ export async function copyToClipboard(text: string) { } } -export function downloadAs(text: string, filename: string) { - const element = document.createElement("a"); - element.setAttribute( - "href", - "data:text/plain;charset=utf-8," + encodeURIComponent(text), - ); +export async function downloadAs(text: string, filename: string) { + if (window.__TAURI__) { + const result = await window.__TAURI__.dialog.save({ + defaultPath: `${filename}`, + filters: [ + { + name: `${filename.split('.').pop()} files`, + extensions: [`${filename.split('.').pop()}`], + }, + { + name: "All Files", + extensions: ["*"], + }, + ], + }); + + if (result !== null) { + try { + await window.__TAURI__.fs.writeBinaryFile( + result, + new Uint8Array([...text].map((c) => c.charCodeAt(0))) + ); + showToast(Locale.Download.Success); + } catch (error) { + showToast(Locale.Download.Failed); + } + } else { + showToast(Locale.Download.Failed); + } + } else { + const element = document.createElement("a"); + element.setAttribute( + "href", + "data:text/plain;charset=utf-8," + encodeURIComponent(text), + ); element.setAttribute("download", filename); element.style.display = "none"; @@ -46,7 +75,7 @@ export function downloadAs(text: string, filename: string) { document.body.removeChild(element); } - +} export function readFromFile() { return new Promise((res, rej) => { const fileInput = document.createElement("input"); From ddfd05b008a80238eea870eba7e84e142dd74c47 Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Tue, 3 Oct 2023 09:12:41 +0700 Subject: [PATCH 3/4] Fix & Feat Client App [Notification] [+] fix(update.ts): remove unnecessary notification sending when permission is not granted [+] feat(update.ts): add notification for already up to date version --- app/store/update.ts | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/app/store/update.ts b/app/store/update.ts index facb5732163..5a08e36a3f5 100644 --- a/app/store/update.ts +++ b/app/store/update.ts @@ -86,24 +86,28 @@ export const useUpdateStore = createPersistStore( // Check if notification permission is granted await window.__TAURI__?.notification.isPermissionGranted().then((granted) => { if (!granted) { - // Send a notification without waiting for permission (because we don't neeed a permisison once client is already click "check") - window.__TAURI__?.notification.sendNotification({ - title: "ChatGPT Next Web", - body: `A new version (${remoteId}) is available.`, - icon: `${ChatGptIcon.src}`, - sound: "Default" - }); + return } else { // Request permission to show notifications window.__TAURI__?.notification.requestPermission().then((permission) => { if (permission === 'granted') { - // Show a notification using Tauri - window.__TAURI__?.notification.sendNotification({ - title: "ChatGPT Next Web", - body: `A new version (${remoteId}) is available.`, - icon: `${ChatGptIcon.src}`, - sound: "Default" - }); + if (version === remoteId) { + // Show a notification using Tauri + window.__TAURI__?.notification.sendNotification({ + title: "ChatGPT Next Web", + body: "Already up to date", + icon: `${ChatGptIcon.src}`, + sound: "Default" + }); + } else { + // Show a notification for the new version using Tauri + window.__TAURI__?.notification.sendNotification({ + title: "ChatGPT Next Web", + body: `A new version (${remoteId}) is available.`, + icon: `${ChatGptIcon.src}`, + sound: "Default" + }); + } } }); } From b558d1afc6a95d917500064bb77870864ccc1958 Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Wed, 4 Oct 2023 02:10:26 +0700 Subject: [PATCH 4/4] Feat & Fix "Client App [Notification]" [+] feat(update.ts): add support for localization in update notifications [+] fix(update.ts): add missing semicolon in useUpdateStore function --- app/store/update.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/store/update.ts b/app/store/update.ts index 5a08e36a3f5..2b088a13d7a 100644 --- a/app/store/update.ts +++ b/app/store/update.ts @@ -3,6 +3,7 @@ import { api } from "../client/api"; import { getClientConfig } from "../config/client"; import { createPersistStore } from "../utils/store"; import ChatGptIcon from "../icons/chatgpt.png"; +import Locale from "../locales"; const ONE_MINUTE = 60 * 1000; const isApp = !!getClientConfig()?.isApp; @@ -86,7 +87,7 @@ export const useUpdateStore = createPersistStore( // Check if notification permission is granted await window.__TAURI__?.notification.isPermissionGranted().then((granted) => { if (!granted) { - return + return; } else { // Request permission to show notifications window.__TAURI__?.notification.requestPermission().then((permission) => { @@ -95,15 +96,16 @@ export const useUpdateStore = createPersistStore( // Show a notification using Tauri window.__TAURI__?.notification.sendNotification({ title: "ChatGPT Next Web", - body: "Already up to date", + body: `${Locale.Settings.Update.IsLatest}`, icon: `${ChatGptIcon.src}`, sound: "Default" }); } else { + const updateMessage = Locale.Settings.Update.FoundUpdate(`${remoteId}`); // Show a notification for the new version using Tauri window.__TAURI__?.notification.sendNotification({ title: "ChatGPT Next Web", - body: `A new version (${remoteId}) is available.`, + body: updateMessage, icon: `${ChatGptIcon.src}`, sound: "Default" });