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>

web/app/components/app/overview/assets/chromeplugin-install.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.91722 6.7298L3.08403 3.65525C2.93723 3.40905 2.86384 3.28596 2.84729 3.14436C2.83386 3.02937 2.85797 2.8842 2.90785 2.77973C2.96928 2.65108 3.06488 2.5699 3.2561 2.40754C4.53491 1.32168 6.19097 0.666626 8.00002 0.666626C10.5383 0.666626 12.7753 1.95619 14.0918 3.91589C14.2371 4.13226 14.3098 4.24045 14.3034 4.35234C14.2981 4.44429 14.2454 4.54327 14.172 4.59892C14.0827 4.66663 13.9425 4.66663 13.6621 4.66663H8.00002C6.60882 4.66663 5.41668 5.51889 4.91722 6.7298Z" fill="white"/>
+<path d="M0.666687 7.99996C0.666687 6.87421 0.92035 5.80771 1.37364 4.85449C1.48535 4.61957 1.5412 4.50211 1.64056 4.45053C1.72221 4.40813 1.83412 4.40288 1.91938 4.43744C2.02313 4.4795 2.0948 4.5997 2.23814 4.8401L5.06356 9.57876C5.62637 10.6234 6.73029 11.3333 8.00002 11.3333C8.13686 11.3333 8.27178 11.325 8.4043 11.309L6.62101 14.4166C6.4785 14.665 6.40724 14.7891 6.29186 14.873C6.19827 14.941 6.05961 14.9912 5.94418 14.9988C5.80188 15.0083 5.68457 14.9648 5.44995 14.8778C2.65701 13.8418 0.666687 11.1533 0.666687 7.99996Z" fill="white"/>
+<path d="M7.81791 15.0098C7.73532 15.1537 7.83408 15.3333 8.00002 15.3333C12.0501 15.3333 15.3334 12.05 15.3334 7.99996C15.3334 7.58673 15.2992 7.18148 15.2335 6.78688C15.1924 6.53989 15.1718 6.41639 15.0928 6.29755C15.0287 6.20113 14.9162 6.10577 14.8105 6.05838C14.6803 5.99996 14.5371 5.99996 14.2505 5.99996H10.6669C11.0854 6.55707 11.3334 7.24956 11.3334 7.99996C11.3334 8.65299 11.1456 9.26216 10.821 9.77642L7.81791 15.0098Z" fill="white"/>
+<path d="M10 7.99996C10 9.10453 9.10459 9.99996 8.00002 9.99996C6.89545 9.99996 6.00002 9.10453 6.00002 7.99996C6.00002 6.89539 6.89545 5.99996 8.00002 5.99996C9.10459 5.99996 10 6.89539 10 7.99996Z" fill="white"/>
+</svg>

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}`)}

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

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',
       },

web/i18n/lang/app-overview.zh.ts

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