ホーム エクスプローラ ヘルプ
登録 サインイン
shenzhen
/
tjdify
Watch 2
Star 0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

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

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Charlie.Wei 1 年間 前
親
ab2e20ee0a
コミット
306216dbe5
共有20 個のファイルを変更した、176268 個の追加 と 58 個の削除を含む
分割表示 差分情報を表示
  1. 4 6
      third-party/chrome plug-in/README_CN.md
  2. 6 0
      third-party/chrome plug-in/README_CN.txt
  3. 6 8
      third-party/chrome plug-in/content.js
  4. BIN
      third-party/chrome plug-in/favicon.png
  5. BIN
      third-party/chrome plug-in/images/favicon.ico
  6. BIN
      third-party/chrome plug-in/images/img-2.png
  7. BIN
      third-party/chrome plug-in/images/img-3.png
  8. BIN
      third-party/chrome plug-in/images/img-4.png
  9. BIN
      third-party/chrome plug-in/images/img-5.png
  10. 2 2
      third-party/chrome plug-in/manifest.json
  11. 19 0
      third-party/chrome plug-in/options.css
  12. 5 16
      third-party/chrome plug-in/options.html
  13. 9 20
      third-party/chrome plug-in/options.js
  14. 176015 0
      third-party/chrome plug-in/tailwind.css
  15. 6 0
      web/app/components/app/overview/assets/chromeplugin-install.svg
  16. 159 0
      web/app/components/app/overview/assets/chromeplugin-option.svg
  17. 29 6
      web/app/components/app/overview/embedded/index.tsx
  18. 6 0
      web/app/components/app/overview/embedded/style.module.css
  19. 1 0
      web/i18n/lang/app-overview.en.ts
  20. 1 0
      web/i18n/lang/app-overview.zh.ts

+ 4 - 6
third-party/chrome plug-in/README_CN.md
ファイルの表示 

@@ -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 - 0
third-party/chrome plug-in/README_CN.txt
ファイルの表示 

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

+ 6 - 8
third-party/chrome plug-in/content.js
ファイルの表示 

@@ -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
ファイルの表示


BIN
third-party/chrome plug-in/images/favicon.ico
ファイルの表示


BIN
third-party/chrome plug-in/images/img-2.png
ファイルの表示


BIN
third-party/chrome plug-in/images/img-3.png
ファイルの表示


BIN
third-party/chrome plug-in/images/img-4.png
ファイルの表示


BIN
third-party/chrome plug-in/images/img-5.png
ファイルの表示


+ 2 - 2
third-party/chrome plug-in/manifest.json
ファイルの表示 

@@ -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 - 0
third-party/chrome plug-in/options.css
ファイルの表示 

@@ -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;
 
+}

+ 5 - 16
third-party/chrome plug-in/options.html
ファイルの表示 

@@ -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>

+ 9 - 20
third-party/chrome plug-in/options.js
ファイルの表示 

@@ -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;
 
-  }
 
 });

File diff suppressed because it is too large
+ 176015 - 0
third-party/chrome plug-in/tailwind.css


File diff suppressed because it is too large
+ 6 - 0
web/app/components/app/overview/assets/chromeplugin-install.svg


File diff suppressed because it is too large
+ 159 - 0
web/app/components/app/overview/assets/chromeplugin-option.svg


+ 29 - 6
web/app/components/app/overview/embedded/index.tsx
ファイルの表示 

@@ -9,8 +9,6 @@ import Tooltip from '@/app/components/base/tooltip'
 
 import { useAppContext } from '@/context/app-context'
 
 import { IS_CE_EDITION } from '@/config'
 
 
-// const isDevelopment = process.env.NODE_ENV === 'development'
 
-
 
 type Props = {
 
   isShow: boolean
 
   onClose: () => void
 
@@ -47,6 +45,9 @@ const OPTION_MAP = {
 
  defer>
 
 </script>`,
 
   },
 
+  chromePlugin: {
 
+    getContent: (url: string, token: string) => `ChatBot URL: ${url}/chatbot/${token}`,
 
+  },
 
 }
 
 const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
 
 
@@ -55,17 +56,25 @@ type Option = keyof typeof OPTION_MAP
 
 type OptionStatus = {
 
   iframe: boolean
 
   scripts: boolean
 
+  chromePlugin: boolean
 
 }
 
 
 const Embedded = ({ isShow, onClose, appBaseUrl, accessToken }: Props) => {
 
   const { t } = useTranslation()
 
   const [option, setOption] = useState<Option>('iframe')
 
-  const [isCopied, setIsCopied] = useState<OptionStatus>({ iframe: false, scripts: false })
 
+  const [isCopied, setIsCopied] = useState<OptionStatus>({ iframe: false, scripts: false, chromePlugin: false })
 
 
   const { langeniusVersionInfo } = useAppContext()
 
   const isTestEnv = langeniusVersionInfo.current_env === 'TESTING' || langeniusVersionInfo.current_env === 'DEVELOPMENT'
 
   const onClickCopy = () => {
 
-    copy(OPTION_MAP[option].getContent(appBaseUrl, accessToken, isTestEnv))
 
+    if (option === 'chromePlugin') {
 
+      const splitUrl = OPTION_MAP[option].getContent(appBaseUrl, accessToken).split(': ')
 
+      if (splitUrl.length > 1)
 
+        copy(splitUrl[1])
 
+    }
 
+    else {
 
+      copy(OPTION_MAP[option].getContent(appBaseUrl, accessToken, isTestEnv))
 
+    }
 
     setIsCopied({ ...isCopied, [option]: true })
 
   }
 
 
@@ -78,6 +87,10 @@ const Embedded = ({ isShow, onClose, appBaseUrl, accessToken }: Props) => {
 
     setIsCopied(cache)
 
   }
 
 
+  const navigateToChromeUrl = () => {
 
+    window.open('https://chrome.google.com/webstore/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf/related', '_blank')
 
+  }
 
+
 
   useEffect(() => {
 
     resetCopyStatus()
 
   }, [isShow])
 
@@ -93,7 +106,7 @@ const Embedded = ({ isShow, onClose, appBaseUrl, accessToken }: Props) => {
 
       <div className="mb-4 mt-8 text-gray-900 text-[14px] font-medium leading-tight">
 
         {t(`${prefixEmbedded}.explanation`)}
 
       </div>
 
-      <div className="flex gap-4 items-center">
 
+      <div className="flex items-center justify-between">
 
         {Object.keys(OPTION_MAP).map((v, index) => {
 
           return (
 
             <div
 
@@ -111,7 +124,17 @@ const Embedded = ({ isShow, onClose, appBaseUrl, accessToken }: Props) => {
 
           )
 
         })}
 
       </div>
 
-      <div className="mt-6 w-full bg-gray-100 rounded-lg flex-col justify-start items-start inline-flex">
 
+      {option === 'chromePlugin' && (
 
+        <div className="mt-6 w-full">
 
+          <div className={cn('gap-2 py-3 justify-center items-center inline-flex w-full rounded-lg',
 
+            'bg-primary-600 hover:bg-primary-600/75 hover:shadow-md cursor-pointer text-white hover:shadow-sm flex-shrink-0')}>
 
+            <div className={`w-4 h-4 relative ${style.pluginInstallIcon}`}></div>
 
+            <div className="text-white text-sm font-medium font-['Inter'] leading-tight" onClick={navigateToChromeUrl}>{t(`${prefixEmbedded}.chromePlugin`)}</div>
 
+          </div>
 
+        </div>
 
+      )}
 
+      <div className={cn('w-full bg-gray-100 rounded-lg flex-col justify-start items-start inline-flex',
 
+        'mt-6')}>
 
         <div className="self-stretch pl-3 pr-1 py-1 bg-gray-50 rounded-tl-lg rounded-tr-lg border border-black border-opacity-5 justify-start items-center gap-2 inline-flex">
 
           <div className="grow shrink basis-0 text-slate-700 text-[13px] font-medium leading-none">
 
             {t(`${prefixEmbedded}.${option}`)}

+ 6 - 0
web/app/components/app/overview/embedded/style.module.css
ファイルの表示 

@@ -12,3 +12,9 @@
 
 .scriptsIcon {
 
   background-image: url(../assets/scripts-option.svg);
 
 }
 
+.chromePluginIcon {
 
+  background-image: url(../assets/chromeplugin-option.svg);
 
+}
 
+.pluginInstallIcon {
 
+  background-image: url(../assets/chromeplugin-install.svg);
 
+}

+ 1 - 0
web/i18n/lang/app-overview.en.ts
ファイルの表示 

@@ -58,6 +58,7 @@ const translation = {
 
         explanation: 'Choose the way to embed chat app to your website',
 
         iframe: 'To add the chat app any where on your website, add this iframe to your html code.',
 
         scripts: 'To add a chat app to the bottom right of your website add this code to your html.',
 
+        chromePlugin: 'Install Dify Chatbot Chrome Extension',
 
         copied: 'Copied',
 
         copy: 'Copy',
 
       },

+ 1 - 0
web/i18n/lang/app-overview.zh.ts
ファイルの表示 

@@ -58,6 +58,7 @@ const translation = {
 
         explanation: '选择一种方式将聊天应用嵌入到你的网站中',
 
         iframe: '将以下 iframe 嵌入到你的网站中的目标位置',
 
         scripts: '将以下代码嵌入到你的网站中',
 
+        chromePlugin: '安装 Dify Chrome 浏览器扩展',
 
         copied: '已复制',
 
         copy: '复制',
 
       },