🐛 fix: dragging text mistakenly as image #2111

sxjeru · 2024-04-20T13:11:36Z

💻 变更类型 | Change Type

🔀 变更说明 | Description of Change

原本使用 支持上传图片或文件的模型 时，不论拖入任何元素，还是拖动聊天时的文字，都会出现“上传图片”提示页，导致无法将拖拽的文字插入聊天框。

本修改使得拖拽上传只对本地文件生效。

特别的，当拖拽网页图片时，不会出现“上传图片”提示页。但拖拽到文本框后松开，能正常附上图片。

📝 补充信息 | Additional Information

不知是否需要公开 vercel 部署供验证，本人已测试多种情况，应当无异常。

vercel · 2024-04-20T13:11:39Z

@sxjeru is attempting to deploy a commit to the LobeHub Team on Vercel.

A member of the Team first needs to authorize it.

lobehubbot · 2024-04-20T13:11:49Z

👍 @sxjeru

Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.
非常感谢您提出拉取请求并为我们的社区做出贡献，请确保您已经遵循了我们的贡献指南，我们会尽快审查它。
如果您遇到任何问题，请随时与我们联系。

arvinxx · 2024-04-20T15:07:14Z

CI 挂了，merge 下 main

codecov · 2024-04-20T15:42:28Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.88%. Comparing base (380d8da) to head (cd4bcdb).
Report is 25 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2111   +/-   ##
=======================================
  Coverage   92.88%   92.88%           
=======================================
  Files         302      302           
  Lines       17643    17643           
  Branches     1273     1273           
=======================================
  Hits        16388    16388           
  Misses       1255     1255

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

arvinxx · 2024-04-20T15:49:51Z

@sxjeru 录个 before 和 after 的视频做个示意吧？

lobehubbot · 2024-04-20T15:51:21Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Hold on.

sxjeru · 2024-04-20T16:29:13Z

展开视频

before.mp4

after.mp4

虽然视频中用的是 file:///，但效果与网页图片一样。

另外往里拖本地文件或图片，依旧都会显示“上传图片”的 overlay 提示。

arvinxx · 2024-04-20T16:45:24Z

能做到其他网页拖入的图片，仍然和之前的展示一样不？我觉得为了文字部分能拖动而牺牲图片拖动的展示，感觉不太合适。

lobehubbot · 2024-04-20T16:45:33Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Can pictures dragged from other web pages still be displayed the same as before? I don’t think it’s appropriate to sacrifice the dragging of images for the sake of dragging text.

sxjeru · 2024-04-21T03:05:47Z

能做到其他网页拖入的图片，仍然和之前的展示一样不？我觉得为了文字部分能拖动而牺牲图片拖动的展示，感觉不太合适。

这可能很难，因为 dragenter 时无法获取拖拽内容的 html，光靠 kind 与 type 不能区分 text 与 image。
并且 dragstart 也在其他页面，就只剩 drop 时访问内容了。

兹认为一般逻辑也是图片拖动到文本框即上传。（例如 Github）
或许可以考虑在拖动时给输入框添加一个背景，提示拖放到此上传。

lobehubbot · 2024-04-21T03:05:59Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Can pictures dragged from other web pages still be displayed the same as before? I don’t think it’s appropriate to sacrifice the dragging of images for the sake of dragging text.

This may be difficult because the html of the dragged content cannot be obtained during dragenter, and text and image cannot be distinguished by kind and type alone.
And dragstart is also on other pages, so only the content can be accessed during drop.

sxjeru · 2024-04-21T05:53:00Z

能做到其他网页拖入的图片，仍然和之前的展示一样不？我觉得为了文字部分能拖动而牺牲图片拖动的展示，感觉不太合适。

@arvinxx

已实现需求。

lobehubbot · 2024-04-21T05:53:12Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Can pictures dragged from other web pages still be displayed the same as before? I don’t think it’s appropriate to sacrifice the dragging of images for the sake of dragging text.

@arvinxx

Requirements realized.

vercel · 2024-04-21T07:41:35Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lobe-chat-community	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 12, 2024 2:43am

arvinxx · 2024-04-21T11:58:39Z

有录屏吗？为啥我试了下好像不行呢

lobehubbot · 2024-04-21T11:58:49Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Is there any screen recording? Why doesn't it seem to work when I try it?

sxjeru · 2024-04-21T12:01:37Z

有录屏吗？为啥我试了下好像不行呢

刚刚用上面的 Preview 构建再试了一次（拖拽网页图片），是可以的。
务需选择 支持视觉识别 的模型。

当然拖拽 lobehub 自己页内的头像图片等是无效的，需要其他网页的图片。

lobehubbot · 2024-04-21T12:01:50Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Is there any screen recording? Why doesn't it seem to work when I try it?

I just tried it again using the Preview build above (drag and drop web images), and it works.
Be sure to choose a model that supports visual recognition.

arvinxx · 2024-04-21T12:14:14Z

@sxjeru 那我这个操作有问题么？试下来是无效的

Area.mp4

sxjeru · 2024-04-21T12:29:33Z

@arvinxx

排查了一会，需要把浮于下方的 Vercel Bar 禁用才行。（Preview 构建特有，Vercel 自带）

arvinxx

另外 e.dataTransfer?.items && e.dataTransfer.items.length > 0 这个判断能否抽成一个组件里的函数，并说明下含义？我对 drag 原生事件的了解不算深入，最好能加下注释说明下意图

src/utils/platform.ts

arvinxx · 2024-04-29T08:38:53Z

src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx

-    e.preventDefault();
-    // reset counter
-    dragCounter.current = 0;
+    if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {


if 的风格，如果可以的话建议改成如果不匹配就 return 这种，而不是 if 里匹配再执行。

因为 if 里执行会导致括号层级加深一级，对查看代码上会有一定的语法干扰

if 嵌套处理了一下。 17f136a

本身的判断没有改，因为以后可能计划实现拖拽图片链接也能上传，从而支持 macOS 和 Firefox 。
这样目前的判断条件是可用的，当然还需思考这个条件是否可以忽略，因为似乎不存在拖拽了但 items 为空的情况。

sxjeru · 2024-04-29T11:16:37Z

e.dataTransfer?.items && e.dataTransfer.items.length > 0 这个判断能否抽成一个组件里的函数，并说明下含义？最好能加下注释说明下意图。

该判断原本便存在，这边也没多想就保留了。
猜测原意是检测拖拽的是否是图片/文件，当然现在看来变成判断是否为空拖拽了（真的存在空拖拽？），得换用 files.

这边还是想再问一下，macOS chrome 能否成功嵌入拖拽的网页图片？（原始代码下，拖拽提示正常显示时）
理论上当前代码不带 Files 的拖拽是不可能传入图片的，得重构代码从 image url 获得。

lobehubbot · 2024-04-29T11:16:49Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

e.dataTransfer?.items && e.dataTransfer.items.length > 0 Can this judgment be extracted into a function in a component and explain its meaning? It's best to add a comment to explain the intention.

This judgment already exists, this Bian kept it without much thought.
I guess the original intention is to detect whether the dragged item is an image/file. Of course, it seems that it cannot be achieved using items now, so you have to use files instead.

I still want to ask again, can macOS chrome successfully embed drag-and-drop web images? (Under the original code, when the drag prompt is displayed normally)
Theoretically, it is impossible to pass in images without Files drag and drop in the current code. The code must be refactored to obtain it from the image url.

arvinxx · 2024-04-30T03:26:04Z

这边还是想再问一下，macOS chrome 能否成功嵌入拖拽的网页图片？（原始代码下，拖拽提示正常显示时）

这个我测了下好像的确是不行

另外 rebase 下 main 吧，昨天有个目录迁移的变更：#2295

lobehubbot · 2024-04-30T03:26:16Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

I still want to ask again, can macOS chrome successfully embed drag-and-drop web images? (Under the original code, when the drag prompt is displayed normally)

I tested this and it seems that it does not work.

sxjeru · 2024-05-04T13:21:25Z

目前除 Win & Linux 的 Chromium 系浏览器，其他浏览器行为应当与修改前保持不变。

既然目前确认只有拖拽内容中的 Files 被上传，应当把文字拖拽扩展到所有浏览器。
对于不支持拖拽网页图片的浏览器，行为将是不弹上传提示 overlay，释放则新页面打开图片，类似于上面录的视频。
（Firefox 在输入框释放会嵌入图片 URL）

600655c

lobehubbot · 2024-05-04T13:21:37Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

At present, except for the Chromium browsers on Win & Linux, the behavior of other browsers should remain unchanged as before the modification.

Since it is currently confirmed that only the Files in the dragged content are uploaded, text dragging should be extended to all browsers.
For browsers that do not support drag and drop web images, the behavior will be to not pop up the upload prompt overlay, and release the overlay to open the image on a new page, similar to the video recorded above.
(The image URL may be embedded in the input box)

src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx

arvinxx · 2024-05-08T13:38:36Z

@sxjeru 麻烦 rebase 下，然后我再构建下最后看一眼

lobehubbot · 2024-05-08T13:38:48Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

@sxjeru Please rebase, and then I will build it and take a final look.

sxjeru · 2024-05-08T13:46:05Z

@sxjeru 麻烦 rebase 下，然后我再构建下最后看一眼

ok 了，之前的 preview 测试了 win 的 chrome 与 Firefox，行为达成预期，应该可以合并了。
不过因为不需要判断浏览器了，所以 getEngine 方法不再被使用，不知要不要删除。

lobehubbot · 2024-05-08T13:46:18Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

@sxjeru Please rebase, and then I will build it and take a final look.

OK, the previous preview tested Win's Chrome and Firefox, the behavior is as expected, and it should be possible to merge.
However, since there is no need to judge the browser, the getEngine method is no longer used. I wonder if it should be deleted.

arvinxx · 2024-05-09T01:06:45Z

所以 getEngine 方法不再被使用，不知要不要删除

删掉吧

lobehubbot · 2024-05-09T01:06:56Z

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

So the getEngine method is no longer used. I wonder if it should be deleted.

Delete it

fix drag

df9db56

lobehub deleted a comment from lobehubbot Apr 20, 2024

Merge branch 'lobehub:main' into fork

6b9b4ad

fix

575edf9

sxjeru added 3 commits April 21, 2024 11:33

fix

2d04df9

fix image drag

9546398

Merge branch 'lobehub:main' into fork

6cdc2db

sxjeru added 2 commits April 21, 2024 14:28

simplify

01da452

Merge branch 'fork' of https://github.com/sxjeru/lobe-chat into fork

9c77ef5

vercel bot deployed to Preview April 21, 2024 07:46 View deployment

sxjeru added 4 commits April 29, 2024 13:28

fix

934febe

everything done

1ebc461

Merge branch 'main' into fork

669fc24

Update DragUpload.tsx

a00d251

arvinxx reviewed Apr 29, 2024

View reviewed changes

refactor function

7ebecf9

sxjeru added 2 commits April 30, 2024 11:52

Merge remote-tracking branch 'upstream/main' into fork

995c43c

Avoid nested if

17f136a

vercel bot deployed to Preview April 30, 2024 06:32 View deployment

arvinxx reviewed May 5, 2024

View reviewed changes

src/app/(main)/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx Outdated Show resolved Hide resolved

sxjeru and others added 3 commits May 6, 2024 18:05

Merge branch 'main' into fork

578e137

support all browser

600655c

Merge branch 'main' into fork

9096283

vercel bot deployed to Preview May 8, 2024 11:55 View deployment

sxjeru added 2 commits May 8, 2024 21:40

Merge remote-tracking branch 'upstream/main' into fork

fb7cccf

Merge branch 'fork' of https://github.com/sxjeru/lobe-chat into fork

d51bdb5

del getEngine()

cd4bcdb

vercel bot deployed to Preview May 12, 2024 02:43 View deployment

🐛 fix: dragging text mistakenly as image #2111

Are you sure you want to change the base?

🐛 fix: dragging text mistakenly as image #2111

Conversation

sxjeru commented Apr 20, 2024

💻 变更类型 | Change Type

🔀 变更说明 | Description of Change

📝 补充信息 | Additional Information

vercel bot commented Apr 20, 2024

lobehubbot commented Apr 20, 2024

arvinxx commented Apr 20, 2024 • edited

codecov bot commented Apr 20, 2024 • edited

Codecov Report

arvinxx commented Apr 20, 2024

lobehubbot commented Apr 20, 2024

sxjeru commented Apr 20, 2024

arvinxx commented Apr 20, 2024

lobehubbot commented Apr 20, 2024

sxjeru commented Apr 21, 2024 • edited

lobehubbot commented Apr 21, 2024

sxjeru commented Apr 21, 2024

lobehubbot commented Apr 21, 2024

vercel bot commented Apr 21, 2024 • edited

arvinxx commented Apr 21, 2024

lobehubbot commented Apr 21, 2024

sxjeru commented Apr 21, 2024 • edited

lobehubbot commented Apr 21, 2024

arvinxx commented Apr 21, 2024

sxjeru commented Apr 21, 2024

arvinxx left a comment

Choose a reason for hiding this comment

arvinxx Apr 29, 2024

Choose a reason for hiding this comment

sxjeru Apr 30, 2024 • edited

Choose a reason for hiding this comment

sxjeru commented Apr 29, 2024 • edited

lobehubbot commented Apr 29, 2024

arvinxx commented Apr 30, 2024 • edited

lobehubbot commented Apr 30, 2024

sxjeru commented May 4, 2024 • edited

lobehubbot commented May 4, 2024

arvinxx commented May 8, 2024

lobehubbot commented May 8, 2024

sxjeru commented May 8, 2024

lobehubbot commented May 8, 2024

arvinxx commented May 9, 2024

lobehubbot commented May 9, 2024

arvinxx commented Apr 20, 2024 •

edited

codecov bot commented Apr 20, 2024 •

edited

sxjeru commented Apr 21, 2024 •

edited

vercel bot commented Apr 21, 2024 •

edited

sxjeru commented Apr 21, 2024 •

edited

sxjeru Apr 30, 2024 •

edited

sxjeru commented Apr 29, 2024 •

edited

arvinxx commented Apr 30, 2024 •

edited

sxjeru commented May 4, 2024 •

edited