jyapayne/dify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

application embedded add chrome && ChatBot Chrome plugin update v1.5 (#1480)

Browse source 
Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
This commit is contained in:
Charlie.Wei 2023-11-08 17:59:53 +08:00 • committed by GitHub
commit 306216dbe5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 176268 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

10
third-party/chrome plug-in/README_CN.md vendored
View file

@ -20,16 +20,14 @@
- options.js 插件配置JS脚本
### 插件导入完成后，后续配置无差异
- 初始化设置Dify 应用配置，分别输入Dify根域名和应用Token，Token可以在Dify应用嵌入中获取，如图：
- 创建Dify应用配置，在应用概览中点击嵌入，切换到安装Chrome浏览器扩展视图，点击copy按钮获取ChatBot Url，如图：
![img-2.png](images/img-2.png)
![img-3.png](images/img-3.png)
- 点击保存，确认提示配置成功即可
![img-4.png](images/img-4.png)
![img-3.png](images/img-3.png)
- 保险起见重启浏览器确保所有分页刷新成功
- Chrome打开任意页面均可正常加载DIfy机器人浮动栏，后续如需更换机器人只需要变更Token即可
- Chrome打开任意页面均可正常加载DIfy机器人浮动栏，后续如需更换机器人只需要变更ChatBot Url即可
![img-5.png](images/img-5.png)
![img-4.png](images/img-4.png)

6
third-party/chrome plug-in/README_CN.txt vendored Normal file
View file

@ -0,0 +1,6 @@
## Chrome Dify ChatBot插件
1、初始化设置Dify 应用配置，分别输入Dify根域名和应用Token，Token可以在Dify应用嵌入中获取；
2、点击保存，确认提示配置成功即可；
3、保险起见重启浏览器确保所有分页刷新成功；
4、Chrome打开任意页面均可正常加载DIfy机器人浮动栏，后续如需更换机器人只需要变更Token即可；

14
third-party/chrome plug-in/content.js vendored
View file

@ -1,8 +1,7 @@
var storage = chrome.storage.sync;
chrome.storage.sync.get(['baseUrl', 'token'], function(result) {
const storage = chrome.storage.sync;
chrome.storage.sync.get(['chatbotUrl'], function(result) {
window.difyChatbotConfig = {
baseUrl: result.baseUrl,
token: result.token
chatbotUrl: result.chatbotUrl,
};
});
@ -10,11 +9,10 @@ document.body.onload = embedChatbot;
async function embedChatbot() {
const difyChatbotConfig = window.difyChatbotConfig;
if (!difyChatbotConfig || !difyChatbotConfig.token) {
console.warn('difyChatbotConfig is empty or token is not provided');
if (!difyChatbotConfig) {
console.warn('Dify Chatbot Url is empty or is not provided');
return;
}
const baseUrl = difyChatbotConfig.baseUrl
const openIcon = `<svg
id="openIcon"
width="24"
@ -53,7 +51,7 @@ async function embedChatbot() {
iframe.allow = "fullscreen;microphone"
iframe.title = "dify chatbot bubble window"
iframe.id = 'dify-chatbot-bubble-window'
iframe.src = `${baseUrl}/chat/${difyChatbotConfig.token}`
iframe.src = difyChatbotConfig.chatbotUrl
iframe.style.cssText = 'border: none; position: fixed; flex-direction: column; justify-content: space-between; box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px; bottom: 6.7rem; right: 1rem; width: 30rem; height: 48rem; border-radius: 0.75rem; display: flex; z-index: 2147483647; overflow: hidden; left: unset; background-color: #F3F4F6;'
document.body.appendChild(iframe);
}

BIN
third-party/chrome plug-in/favicon.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
third-party/chrome plug-in/images/favicon.ico vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
third-party/chrome plug-in/images/img-2.png vendored
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 124 KiB

Before After
Before After

BIN
third-party/chrome plug-in/images/img-3.png vendored
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 85 KiB

Before After
Before After

BIN
third-party/chrome plug-in/images/img-4.png vendored
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 85 KiB

Before After
Before After

BIN
third-party/chrome plug-in/images/img-5.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 85 KiB

4
third-party/chrome plug-in/manifest.json vendored
View file

@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "Dify Chatbot",
"version": "1.3",
"version": "1.5",
"description": "This is a chrome extension to inject a dify chatbot on any pages",
"content_scripts": [
{
@ -17,7 +17,7 @@
"32": "images/32.png",
"48": "images/48.png",
"128": "images/128.png"
}
},
"icons": {

19
third-party/chrome plug-in/options.css vendored Normal file
View file

@ -0,0 +1,19 @@
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
label {
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
input[type="text"] {
width: 280px;
padding: 6px;
}

21
third-party/chrome plug-in/options.html vendored
View file

@ -4,32 +4,21 @@
<head>
<title>Dify Chatbot Extension</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="./tailwind.css" rel="stylesheet">
</head>
<body class="bg-gray-100 py-8 px-4 w-96">
<body class="bg-gray-100 py-4 px-4 w-128">
<div class="max-w-md mx-auto bg-white shadow-md rounded-lg p-4">
<h2 class="text-2xl font-semibold mb-4">Dify Chatbot Extension</h2>
<form>
<div class="mb-4 flex items-center">
<div class="w-1/4">
<label for="base-url" class="block font-semibold text-gray-700">Base URL</label>
<label for="chatbot-url" class="block font-semibold text-gray-700">ChatBot URL</label>
</div>
<div class="w-3/4">
<input type="text" id="base-url" name="base-url" value=""
<input type="text" id="chatbot-url" name="base-url" value=""
class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-400"
placeholder="https://udify.app">
</div>
</div>
<div class="mb-4 flex items-center">
<div class="w-1/4">
<label for="token" class="block font-semibold text-gray-700">Token</label>
</div>
<div class="w-3/4">
<input type="text" id="token" name="token" value=""
class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-400"
placeholder="Application Embedded Token">
placeholder="https://udify.app/chatbot/7CQBa5yyvYLSkZtx">
</div>
</div>

29
third-party/chrome plug-in/options.js vendored
View file

@ -1,39 +1,28 @@
document.getElementById('save-button').addEventListener('click', function (e) {
e.preventDefault();
var baseUrl = document.getElementById('base-url').value;
var token = document.getElementById('token').value;
var errorTip = document.getElementById('error-tip');
const chatbotUrl = document.getElementById('chatbot-url').value;
const errorTip = document.getElementById('error-tip');
if (baseUrl.trim() === "" || token.trim() === "") {
if (baseUrl.trim() === "") {
errorTip.textContent = "Base URL cannot be empty.";
} else {
errorTip.textContent = "Token cannot be empty.";
}
if (chatbotUrl.trim() === "") {
errorTip.textContent = "Dify ChatBot URL cannot be empty.";
} else {
errorTip.textContent = "";
chrome.storage.sync.set({
'baseUrl': baseUrl,
'token': token
'chatbotUrl': chatbotUrl,
}, function () {
alert('Save Success!');
});
}
});
// Load parameters from chrome.storage when the page loads
chrome.storage.sync.get(['baseUrl', 'token'], function (result) {
const baseUrlInput = document.getElementById('base-url');
const tokenInput = document.getElementById('token');
chrome.storage.sync.get(['chatbotUrl'], function (result) {
const chatbotUrlInput = document.getElementById('chatbot-url');
if (result.baseUrl) {
baseUrlInput.value = result.baseUrl;
if (result.chatbotUrl) {
chatbotUrlInput.value = result.chatbotUrl;
}
if (result.token) {
tokenInput.value = result.token;
}
});

176015
third-party/chrome plug-in/tailwind.css vendored Normal file
View file

File diff suppressed because it is too large Load diff