From df9db56b71d589a3ef43ae7b53e8d2172b7de8a0 Mon Sep 17 00:00:00 2001 From: sxjeru Date: Sat, 20 Apr 2024 20:52:19 +0800 Subject: [PATCH 01/14] fix drag --- .../features/ChatInput/Footer/DragUpload.tsx | 80 +++++++++++++------ 1 file changed, 57 insertions(+), 23 deletions(-) diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index 54abbe94415c..2d844798465e 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -63,7 +63,16 @@ const useStyles = createStyles(({ css, token, stylish }) => { const handleDragOver = (e: DragEvent) => { - e.preventDefault(); + if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { + const allItemsAreFiles = Array.from(e.dataTransfer.items).every( + (item) => item.kind === 'file', + ); + const htmlData = e.dataTransfer.getData("text/html"); // web image support + const isImg = htmlData && htmlData.startsWith(" { @@ -94,38 +103,63 @@ const DragUpload = memo(() => { }; const handleDragEnter = (e: DragEvent) => { - e.preventDefault(); - dragCounter.current += 1; + if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - setIsDragging(true); + const allItemsAreFiles = Array.from(e.dataTransfer.items).every( + (item) => item.kind === 'file', + ); + const htmlData = e.dataTransfer.getData("text/html"); + const isImg = htmlData && htmlData.startsWith(" { - e.preventDefault(); - - // reset counter - dragCounter.current -= 1; - - if (dragCounter.current === 0) { - setIsDragging(false); + if (e.dataTransfer && e.dataTransfer.items) { + const allItemsAreFiles = Array.from(e.dataTransfer.items).every( + (item) => item.kind === 'file', + ); + const htmlData = e.dataTransfer.getData("text/html"); + const isImg = htmlData && htmlData.startsWith(" { - e.preventDefault(); - // reset counter - dragCounter.current = 0; - - setIsDragging(false); - - // get filesList - // TODO: support folder files upload - const files = e.dataTransfer?.files; - - // upload files - uploadImages(files); + if (e.dataTransfer && e.dataTransfer.items) { + const allItemsAreFiles = Array.from(e.dataTransfer.items).every( + (item) => item.kind === 'file', + ); + const htmlData = e.dataTransfer.getData("text/html"); + const isImg = htmlData && htmlData.startsWith(" { From 575edf9f5a0a1026f192d0cb7e08d260999892cd Mon Sep 17 00:00:00 2001 From: sxjeru Date: Sun, 21 Apr 2024 10:04:36 +0800 Subject: [PATCH 02/14] fix --- .../features/ChatInput/Footer/DragUpload.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index 2d844798465e..09adcfecbfc9 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -103,8 +103,6 @@ const DragUpload = memo(() => { }; const handleDragEnter = (e: DragEvent) => { - dragCounter.current += 1; - if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', @@ -112,21 +110,22 @@ const DragUpload = memo(() => { const htmlData = e.dataTransfer.getData("text/html"); const isImg = htmlData && htmlData.startsWith(" { - if (e.dataTransfer && e.dataTransfer.items) { + if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', ); const htmlData = e.dataTransfer.getData("text/html"); const isImg = htmlData && htmlData.startsWith(" { }; const handleDrop = async (e: DragEvent) => { - if (e.dataTransfer && e.dataTransfer.items) { + if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', ); From 2d04df97da91e3e479ff6c55b6d03bdea096ac6f Mon Sep 17 00:00:00 2001 From: sxjeru Date: Sun, 21 Apr 2024 11:33:24 +0800 Subject: [PATCH 03/14] fix --- .../features/ChatInput/Footer/DragUpload.tsx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index 09adcfecbfc9..b57b61e52ef7 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -60,16 +60,12 @@ const useStyles = createStyles(({ css, token, stylish }) => { }; }); - - const handleDragOver = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', ); - const htmlData = e.dataTransfer.getData("text/html"); // web image support - const isImg = htmlData && htmlData.startsWith(" { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', ); - const htmlData = e.dataTransfer.getData("text/html"); - const isImg = htmlData && htmlData.startsWith(" { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', ); - const htmlData = e.dataTransfer.getData("text/html"); - const isImg = htmlData && htmlData.startsWith(" { const isImg = htmlData && htmlData.startsWith(" { uploadImages(files); }; - useEffect(() => { window.addEventListener('dragenter', handleDragEnter); window.addEventListener('dragover', handleDragOver); From 954639849f5dcbf826e6fabe9a78436f61f5f7a1 Mon Sep 17 00:00:00 2001 From: sxjeru Date: Sun, 21 Apr 2024 13:44:42 +0800 Subject: [PATCH 04/14] fix image drag --- .../(desktop)/features/ChatInput/Footer/DragUpload.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index b57b61e52ef7..faf7fc51a120 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -65,7 +65,8 @@ const handleDragOver = (e: DragEvent) => { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', ); - if (allItemsAreFiles) { + const isImg = e.dataTransfer.types.includes("Files"); // Webpage image drag + if (allItemsAreFiles || isImg) { e.preventDefault(); } } @@ -103,7 +104,8 @@ const DragUpload = memo(() => { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', ); - if (allItemsAreFiles) { + const isImg = e.dataTransfer.types.includes("Files"); + if (allItemsAreFiles || isImg) { dragCounter.current += 1; e.preventDefault(); setIsDragging(true); @@ -116,7 +118,8 @@ const DragUpload = memo(() => { const allItemsAreFiles = Array.from(e.dataTransfer.items).every( (item) => item.kind === 'file', ); - if (allItemsAreFiles) { + const isImg = e.dataTransfer.types.includes("Files"); + if (allItemsAreFiles || isImg) { e.preventDefault(); // reset counter From 01da452186e241452cf6a5f1045714418513e1bc Mon Sep 17 00:00:00 2001 From: sxjeru Date: Sun, 21 Apr 2024 14:28:27 +0800 Subject: [PATCH 05/14] simplify --- .../features/ChatInput/Footer/DragUpload.tsx | 29 +++++-------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index faf7fc51a120..cefc7cbd6bae 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -62,11 +62,8 @@ const useStyles = createStyles(({ css, token, stylish }) => { const handleDragOver = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const allItemsAreFiles = Array.from(e.dataTransfer.items).every( - (item) => item.kind === 'file', - ); - const isImg = e.dataTransfer.types.includes("Files"); // Webpage image drag - if (allItemsAreFiles || isImg) { + const isFile = e.dataTransfer.types.includes("Files"); // Webpage image drag + if (isFile) { e.preventDefault(); } } @@ -101,11 +98,8 @@ const DragUpload = memo(() => { const handleDragEnter = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const allItemsAreFiles = Array.from(e.dataTransfer.items).every( - (item) => item.kind === 'file', - ); - const isImg = e.dataTransfer.types.includes("Files"); - if (allItemsAreFiles || isImg) { + const isFile = e.dataTransfer.types.includes("Files"); + if (isFile) { dragCounter.current += 1; e.preventDefault(); setIsDragging(true); @@ -115,11 +109,8 @@ const DragUpload = memo(() => { const handleDragLeave = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const allItemsAreFiles = Array.from(e.dataTransfer.items).every( - (item) => item.kind === 'file', - ); - const isImg = e.dataTransfer.types.includes("Files"); - if (allItemsAreFiles || isImg) { + const isFile = e.dataTransfer.types.includes("Files"); + if (isFile) { e.preventDefault(); // reset counter @@ -134,12 +125,8 @@ const DragUpload = memo(() => { const handleDrop = async (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const allItemsAreFiles = Array.from(e.dataTransfer.items).every( - (item) => item.kind === 'file', - ); - const htmlData = e.dataTransfer.getData("text/html"); - const isImg = htmlData && htmlData.startsWith(" Date: Thu, 25 Apr 2024 20:15:44 +0800 Subject: [PATCH 06/14] Restrict types of support browser --- package.json | 1 + .../features/ChatInput/Footer/DragUpload.tsx | 14 ++++++++------ src/user-agent-data-types.d.ts | 2 ++ 3 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 src/user-agent-data-types.d.ts diff --git a/package.json b/package.json index 546f9ce1a2c0..a73d41cc910b 100644 --- a/package.json +++ b/package.json @@ -152,6 +152,7 @@ "ua-parser-js": "^1.0.37", "url-join": "^5.0.0", "use-merge-value": "^1.2.0", + "user-agent-data-types": "^0.4.2", "utility-types": "^3.11.0", "uuid": "^9.0.1", "y-protocols": "^1.0.6", diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index cefc7cbd6bae..1af1ff63d893 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -60,10 +60,13 @@ const useStyles = createStyles(({ css, token, stylish }) => { }; }); +// 文字拖拽仅支持 Windows/Linux - Chromium 系浏览器 (#2111) +const os = !(/Linux|Windows/.test(navigator.userAgentData?.platform || '')) + const handleDragOver = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { const isFile = e.dataTransfer.types.includes("Files"); // Webpage image drag - if (isFile) { + if (os || isFile) { e.preventDefault(); } } @@ -99,7 +102,7 @@ const DragUpload = memo(() => { const handleDragEnter = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { const isFile = e.dataTransfer.types.includes("Files"); - if (isFile) { + if (os || isFile) { dragCounter.current += 1; e.preventDefault(); setIsDragging(true); @@ -110,7 +113,7 @@ const DragUpload = memo(() => { const handleDragLeave = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { const isFile = e.dataTransfer.types.includes("Files"); - if (isFile) { + if (os || isFile) { e.preventDefault(); // reset counter @@ -126,7 +129,7 @@ const DragUpload = memo(() => { const handleDrop = async (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { const isFile = e.dataTransfer.types.includes("Files"); - if (isFile) { + if (os || isFile) { e.preventDefault(); // reset counter @@ -145,8 +148,8 @@ const DragUpload = memo(() => { }; const handlePaste = (event: ClipboardEvent) => { - // get files from clipboard + // get files from clipboard const files = event.clipboardData?.files; uploadImages(files); @@ -190,4 +193,3 @@ const DragUpload = memo(() => { }); export default DragUpload; - diff --git a/src/user-agent-data-types.d.ts b/src/user-agent-data-types.d.ts new file mode 100644 index 000000000000..a9128f52a42f --- /dev/null +++ b/src/user-agent-data-types.d.ts @@ -0,0 +1,2 @@ +// Add data types to window.navigator ambiently for implicit use in the entire project. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types- for more info. +/// \ No newline at end of file From 55421e1f8161344230dd4748857f13bc8932071c Mon Sep 17 00:00:00 2001 From: sxjeru Date: Mon, 29 Apr 2024 12:50:29 +0800 Subject: [PATCH 07/14] update --- package.json | 1 - .../(desktop)/features/ChatInput/Footer/DragUpload.tsx | 4 ++-- src/user-agent-data-types.d.ts | 2 -- src/utils/platform.ts | 7 +++++++ 4 files changed, 9 insertions(+), 5 deletions(-) delete mode 100644 src/user-agent-data-types.d.ts diff --git a/package.json b/package.json index a893515182ac..d064777d3f07 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,6 @@ "ua-parser-js": "^1.0.37", "url-join": "^5.0.0", "use-merge-value": "^1.2.0", - "user-agent-data-types": "^0.4.2", "utility-types": "^3.11.0", "uuid": "^9.0.1", "y-protocols": "^1.0.6", diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index 4d9fe358e236..7d3d5623c9d5 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -11,6 +11,7 @@ import { agentSelectors } from '@/store/agent/selectors'; import { useFileStore } from '@/store/file'; import { useGlobalStore } from '@/store/global'; import { modelProviderSelectors } from '@/store/global/selectors'; +import { allowTextDrag } from '@/utils/platform'; const useStyles = createStyles(({ css, token, stylish }) => { return { @@ -60,8 +61,7 @@ const useStyles = createStyles(({ css, token, stylish }) => { }; }); -// 文字拖拽仅支持 Windows/Linux - Chromium 系浏览器 (#2111) -const os = !(/Linux|Windows/.test(navigator.userAgentData?.platform || '')) +const os = allowTextDrag(); const handleDragOver = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { diff --git a/src/user-agent-data-types.d.ts b/src/user-agent-data-types.d.ts deleted file mode 100644 index a9128f52a42f..000000000000 --- a/src/user-agent-data-types.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -// Add data types to window.navigator ambiently for implicit use in the entire project. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types- for more info. -/// \ No newline at end of file diff --git a/src/utils/platform.ts b/src/utils/platform.ts index 7e78ba2fcf32..7ff3f3690822 100644 --- a/src/utils/platform.ts +++ b/src/utils/platform.ts @@ -15,6 +15,10 @@ export const getBrowser = () => { return getParser().getResult().browser.name; }; +export const getEngine = () => { + return getParser().getEngine().name; +} + export const browserInfo = { browser: getBrowser(), isMobile: getParser().getDevice().type === 'mobile', @@ -22,3 +26,6 @@ export const browserInfo = { }; export const isMacOS = () => getPlatform() === 'Mac OS'; + +// 文字拖拽仅支持 Windows/Linux - Chromium 系浏览器 (#2111) +export const allowTextDrag = () => /Linux|Windows/.test(getPlatform()) && getEngine() === 'Blink'; \ No newline at end of file From 934febef7f754165f0a86ac06d945adb3a19631e Mon Sep 17 00:00:00 2001 From: sxjeru Date: Mon, 29 Apr 2024 13:28:51 +0800 Subject: [PATCH 08/14] fix --- src/utils/platform.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/utils/platform.ts b/src/utils/platform.ts index 7ff3f3690822..d676083db5a3 100644 --- a/src/utils/platform.ts +++ b/src/utils/platform.ts @@ -28,4 +28,7 @@ export const browserInfo = { export const isMacOS = () => getPlatform() === 'Mac OS'; // 文字拖拽仅支持 Windows/Linux - Chromium 系浏览器 (#2111) -export const allowTextDrag = () => /Linux|Windows/.test(getPlatform()) && getEngine() === 'Blink'; \ No newline at end of file +export const allowTextDrag = () => { + const platform = getPlatform(); + return platform && /Linux|Windows/.test(platform) && getEngine() === 'Blink'; +} From 1ebc461457cc8848a9701137ba0ff3582e2f925c Mon Sep 17 00:00:00 2001 From: sxjeru Date: Mon, 29 Apr 2024 06:37:20 +0000 Subject: [PATCH 09/14] everything done --- .../features/ChatInput/Footer/DragUpload.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index 7d3d5623c9d5..93cb77eda330 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -61,12 +61,12 @@ const useStyles = createStyles(({ css, token, stylish }) => { }; }); -const os = allowTextDrag(); +const disallowTextDrag = !allowTextDrag(); const handleDragOver = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const isFile = e.dataTransfer.types.includes("Files"); // Webpage image drag - if (os || isFile) { + const isFile = e.dataTransfer.types.includes('Files'); // Webpage image drag + if (disallowTextDrag || isFile) { e.preventDefault(); } } @@ -101,8 +101,8 @@ const DragUpload = memo(() => { const handleDragEnter = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const isFile = e.dataTransfer.types.includes("Files"); - if (os || isFile) { + const isFile = e.dataTransfer.types.includes('Files'); + if (disallowTextDrag || isFile) { dragCounter.current += 1; e.preventDefault(); setIsDragging(true); @@ -112,8 +112,8 @@ const DragUpload = memo(() => { const handleDragLeave = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const isFile = e.dataTransfer.types.includes("Files"); - if (os || isFile) { + const isFile = e.dataTransfer.types.includes('Files'); + if (disallowTextDrag || isFile) { e.preventDefault(); // reset counter @@ -128,8 +128,8 @@ const DragUpload = memo(() => { const handleDrop = async (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const isFile = e.dataTransfer.types.includes("Files"); - if (os || isFile) { + const isFile = e.dataTransfer.types.includes('Files'); + if (disallowTextDrag || isFile) { e.preventDefault(); // reset counter @@ -148,7 +148,6 @@ const DragUpload = memo(() => { }; const handlePaste = (event: ClipboardEvent) => { - // get files from clipboard const files = event.clipboardData?.files; From a00d251e7363b4f9f9de8e5e12d36348b526c1ed Mon Sep 17 00:00:00 2001 From: sxjeru Date: Mon, 29 Apr 2024 15:43:35 +0800 Subject: [PATCH 10/14] Update DragUpload.tsx --- .../chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index ae9428a7077a..8f79c4930a6a 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -9,8 +9,8 @@ import { Center, Flexbox } from 'react-layout-kit'; import { useAgentStore } from '@/store/agent'; import { agentSelectors } from '@/store/agent/selectors'; import { useFileStore } from '@/store/file'; -import { useGlobalStore } from '@/store/global'; -import { modelProviderSelectors } from '@/store/global/selectors'; +import { useUserStore } from '@/store/user'; +import { modelProviderSelectors } from '@/store/user/selectors'; import { allowTextDrag } from '@/utils/platform'; const useStyles = createStyles(({ css, token, stylish }) => { From 7ebecf93ed6d9791c3f30ad720532229f4ef9a45 Mon Sep 17 00:00:00 2001 From: sxjeru Date: Mon, 29 Apr 2024 18:57:25 +0800 Subject: [PATCH 11/14] refactor function --- .../(desktop)/features/ChatInput/Footer/DragUpload.tsx | 7 +++++-- src/utils/platform.ts | 6 ------ 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index 8f79c4930a6a..f7460e0349c2 100644 --- a/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -11,7 +11,7 @@ import { agentSelectors } from '@/store/agent/selectors'; import { useFileStore } from '@/store/file'; import { useUserStore } from '@/store/user'; import { modelProviderSelectors } from '@/store/user/selectors'; -import { allowTextDrag } from '@/utils/platform'; +import { getPlatform, getEngine } from '@/utils/platform'; const useStyles = createStyles(({ css, token, stylish }) => { return { @@ -61,7 +61,10 @@ const useStyles = createStyles(({ css, token, stylish }) => { }; }); -const disallowTextDrag = !allowTextDrag(); +// 文字拖拽仅支持 Windows/Linux - Chromium 系浏览器 (#2111) +const platform = getPlatform(); +const allowTextDrag = platform && /Linux|Windows/.test(platform) && getEngine() === 'Blink'; +const disallowTextDrag = !allowTextDrag; const handleDragOver = (e: DragEvent) => { if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { diff --git a/src/utils/platform.ts b/src/utils/platform.ts index d676083db5a3..4390de93a3a8 100644 --- a/src/utils/platform.ts +++ b/src/utils/platform.ts @@ -26,9 +26,3 @@ export const browserInfo = { }; export const isMacOS = () => getPlatform() === 'Mac OS'; - -// 文字拖拽仅支持 Windows/Linux - Chromium 系浏览器 (#2111) -export const allowTextDrag = () => { - const platform = getPlatform(); - return platform && /Linux|Windows/.test(platform) && getEngine() === 'Blink'; -} From 17f136ad3bac1cd1e22efe2f57a5ba7fa7e21276 Mon Sep 17 00:00:00 2001 From: sxjeru Date: Tue, 30 Apr 2024 12:19:29 +0800 Subject: [PATCH 12/14] Avoid nested if --- .../features/ChatInput/Footer/DragUpload.tsx | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index f7460e0349c2..e7b6804034a8 100644 --- a/src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -67,11 +67,11 @@ const allowTextDrag = platform && /Linux|Windows/.test(platform) && getEngine() const disallowTextDrag = !allowTextDrag; const handleDragOver = (e: DragEvent) => { - if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const isFile = e.dataTransfer.types.includes('Files'); // Webpage image drag - if (disallowTextDrag || isFile) { - e.preventDefault(); - } + if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return; + + const isFile = e.dataTransfer.types.includes('Files'); + if (disallowTextDrag || isFile) { + e.preventDefault(); } }; @@ -103,50 +103,50 @@ const DragUpload = memo(() => { }; const handleDragEnter = (e: DragEvent) => { - if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const isFile = e.dataTransfer.types.includes('Files'); - if (disallowTextDrag || isFile) { - dragCounter.current += 1; - e.preventDefault(); - setIsDragging(true); - } + if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return; + + const isFile = e.dataTransfer.types.includes('Files'); + if (disallowTextDrag || isFile) { + dragCounter.current += 1; + e.preventDefault(); + setIsDragging(true); } }; const handleDragLeave = (e: DragEvent) => { - if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const isFile = e.dataTransfer.types.includes('Files'); - if (disallowTextDrag || isFile) { - e.preventDefault(); + if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return; + + const isFile = e.dataTransfer.types.includes('Files'); + if (disallowTextDrag || isFile) { + e.preventDefault(); - // reset counter - dragCounter.current -= 1; + // reset counter + dragCounter.current -= 1; - if (dragCounter.current === 0) { - setIsDragging(false); - } + if (dragCounter.current === 0) { + setIsDragging(false); } } }; const handleDrop = async (e: DragEvent) => { - if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) { - const isFile = e.dataTransfer.types.includes('Files'); - if (disallowTextDrag || isFile) { - e.preventDefault(); + if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return; + + const isFile = e.dataTransfer.types.includes('Files'); + if (disallowTextDrag || isFile) { + e.preventDefault(); - // reset counter - dragCounter.current = 0; + // reset counter + dragCounter.current = 0; - setIsDragging(false); + setIsDragging(false); - // get filesList - // TODO: support folder files upload - const files = e.dataTransfer?.files; + // get filesList + // TODO: support folder files upload + const files = e.dataTransfer?.files; - // upload files - uploadImages(files); - } + // upload files + uploadImages(files); } }; From 600655cd4d28af0d18c85c3112a65e5b2bd55a3c Mon Sep 17 00:00:00 2001 From: sxjeru Date: Mon, 6 May 2024 10:50:26 +0000 Subject: [PATCH 13/14] support all browser --- .../features/ChatInput/Footer/DragUpload.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx b/src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx index e7b6804034a8..0b7e8d9cc5df 100644 --- a/src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx +++ b/src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx @@ -11,7 +11,6 @@ import { agentSelectors } from '@/store/agent/selectors'; import { useFileStore } from '@/store/file'; import { useUserStore } from '@/store/user'; import { modelProviderSelectors } from '@/store/user/selectors'; -import { getPlatform, getEngine } from '@/utils/platform'; const useStyles = createStyles(({ css, token, stylish }) => { return { @@ -61,16 +60,11 @@ const useStyles = createStyles(({ css, token, stylish }) => { }; }); -// 文字拖拽仅支持 Windows/Linux - Chromium 系浏览器 (#2111) -const platform = getPlatform(); -const allowTextDrag = platform && /Linux|Windows/.test(platform) && getEngine() === 'Blink'; -const disallowTextDrag = !allowTextDrag; - const handleDragOver = (e: DragEvent) => { if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return; - + const isFile = e.dataTransfer.types.includes('Files'); - if (disallowTextDrag || isFile) { + if (isFile) { e.preventDefault(); } }; @@ -106,7 +100,7 @@ const DragUpload = memo(() => { if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return; const isFile = e.dataTransfer.types.includes('Files'); - if (disallowTextDrag || isFile) { + if (isFile) { dragCounter.current += 1; e.preventDefault(); setIsDragging(true); @@ -117,7 +111,7 @@ const DragUpload = memo(() => { if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return; const isFile = e.dataTransfer.types.includes('Files'); - if (disallowTextDrag || isFile) { + if (isFile) { e.preventDefault(); // reset counter @@ -133,7 +127,7 @@ const DragUpload = memo(() => { if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return; const isFile = e.dataTransfer.types.includes('Files'); - if (disallowTextDrag || isFile) { + if (isFile) { e.preventDefault(); // reset counter From cd4bcdb8ae936297cf28960344a9e5d18c4c5bec Mon Sep 17 00:00:00 2001 From: sxjeru Date: Thu, 9 May 2024 09:09:56 +0800 Subject: [PATCH 14/14] del getEngine() --- src/utils/platform.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/utils/platform.ts b/src/utils/platform.ts index 4390de93a3a8..7e78ba2fcf32 100644 --- a/src/utils/platform.ts +++ b/src/utils/platform.ts @@ -15,10 +15,6 @@ export const getBrowser = () => { return getParser().getResult().browser.name; }; -export const getEngine = () => { - return getParser().getEngine().name; -} - export const browserInfo = { browser: getBrowser(), isMobile: getParser().getDevice().type === 'mobile',