集成WebWhiz

blog.config.js

@@ -179,6 +179,10 @@ const BLOG = {
   //   ********挂件组件相关********
   // Chatbase
   CHATBASE_ID: process.env.NEXT_PUBLIC_CHATBASE_ID || null, // 是否显示chatbase机器人 https://www.chatbase.co/
+  WEB_WHIZ_ENABLED: process.env.NEXT_PUBLIC_WEB_WHIZ_ENABLED || false, // 是否显示webwhizAI机器人 @see https://github.com/webwhiz-ai/webwhiz
+  WEB_WHIZ_BASE_URL: process.env.NEXT_PUBLIC_WEB_WHIZ_BASE_URL || 'https://api.webwhiz.ai', // 可以自建服务器
+  WEB_WHIZ_CHAT_BOT_ID: process.env.NEXT_PUBLIC_WEB_WHIZ_CHAT_BOT_ID || null, // 在后台获取ID
+
   // 悬浮挂件
   WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
   WIDGET_PET_LINK:

components/ExternalPlugins.js

@@ -1,5 +1,6 @@
 import BLOG from 'blog.config'
 import dynamic from 'next/dynamic'
+import WebWhiz from './Webwhiz'
 
 // import TwikooCommentCounter from '@/components/TwikooCommentCounter'
 // import { DebugPanel } from '@/components/DebugPanel'
@@ -57,6 +58,7 @@ const ExternalPlugin = (props) => {
           {JSON.parse(BLOG.RIBBON) && <Ribbon />}
           {JSON.parse(BLOG.CUSTOM_RIGHT_CLICK_CONTEXT_MENU) && <CustomContextMenu {...props} />}
           {!JSON.parse(BLOG.CAN_COPY) && <DisableCopy/>}
+          {JSON.parse(BLOG.WEB_WHIZ_ENABLED) && <WebWhiz/>}
           <VConsole/>
       </>
 }

components/ExternalScript.js

@@ -1,34 +1,28 @@
 'use client'
 
-import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { isBrowser } from '@/lib/utils'
 
 /**
- * 自定义引入外部JS 和 CSS
+ * 自定义外部 script
+ * 传入参数将转为 <script>标签。
  * @returns
  */
-const ExternalScript = () => {
-  if (isBrowser) {
-    // 静态导入本地自定义样式
-    loadExternalResource('/css/custom.css', 'css')
-    loadExternalResource('/js/custom.js', 'js')
-
-    // 自动添加图片阴影
-    if (BLOG.IMG_SHADOW) {
-      loadExternalResource('/css/img-shadow.css', 'css')
-    }
-
-    if (BLOG.CUSTOM_EXTERNAL_JS && BLOG.CUSTOM_EXTERNAL_JS.length > 0) {
-      for (const url of BLOG.CUSTOM_EXTERNAL_JS) {
-        loadExternalResource(url, 'js')
-      }
-    }
-    if (BLOG.CUSTOM_EXTERNAL_CSS && BLOG.CUSTOM_EXTERNAL_CSS.length > 0) {
-      for (const url of BLOG.CUSTOM_EXTERNAL_CSS) {
-        loadExternalResource(url, 'css')
-      }
-    }
+const ExternalScript = (props) => {
+  const { src } = props
+  if (!isBrowser || !src) {
+    return null
   }
+
+  const element = document.querySelector(`script[src="${src}"]`)
+  if (element) {
+    return null
+  }
+  const script = document.createElement('script')
+  Object.entries(props).forEach(([key, value]) => {
+    script.setAttribute(key, value)
+  })
+  document.head.appendChild(script)
+  console.log('加载外部脚本', props, script)
   return null
 }
 

components/Webwhiz.js

@@ -0,0 +1,17 @@
+import BLOG from '@/blog.config'
+import ExternalScript from './ExternalScript'
+
+/**
+ * 一个开源ai组件
+ * @see https://github.com/webwhiz-ai/webwhiz
+ * @returns
+ */
+export default function WebWhiz() {
+  const props = {
+    id: '__webwhizSdk__',
+    src: 'https://www.unpkg.com/webwhiz@1.0.0/dist/sdk.js',
+    baseUrl: BLOG.WEB_WHIZ_BASE_URL,
+    chatbotId: BLOG.WEB_WHIZ_CHAT_BOT_ID
+  }
+  return <ExternalScript {...props}/>
+}

pages/_app.js

@@ -1,5 +1,3 @@
-import { useEffect } from 'react'
-
 import '@/styles/animate.css' // @see https://animate.style/
 import '@/styles/globals.css'
 import '@/styles/nprogress.css'
@@ -14,20 +12,43 @@ import { GlobalContextProvider } from '@/lib/global'
 import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
 import dynamic from 'next/dynamic'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
+import BLOG from '@/blog.config'
 
-// 自定义样式css和js引入
-import ExternalScript from '@/components/ExternalScript'
 // 各种扩展插件 动画等
 const ExternalPlugins = dynamic(() => import('@/components/ExternalPlugins'))
 
 const MyApp = ({ Component, pageProps }) => {
-  useEffect(() => {
+  // 自定义样式css和js引入
+  if (isBrowser) {
+    // 初始化AOS动画
     AOS.init()
-  }, [])
+    // 静态导入本地自定义样式
+    loadExternalResource('/css/custom.css', 'css')
+    loadExternalResource('/js/custom.js', 'js')
+
+    // 自动添加图片阴影
+    if (BLOG.IMG_SHADOW) {
+      loadExternalResource('/css/img-shadow.css', 'css')
+    }
+
+    // 导入外部自定义脚本
+    if (BLOG.CUSTOM_EXTERNAL_JS && BLOG.CUSTOM_EXTERNAL_JS.length > 0) {
+      for (const url of BLOG.CUSTOM_EXTERNAL_JS) {
+        loadExternalResource(url, 'js')
+      }
+    }
+
+    // 导入外部自定义样式
+    if (BLOG.CUSTOM_EXTERNAL_CSS && BLOG.CUSTOM_EXTERNAL_CSS.length > 0) {
+      for (const url of BLOG.CUSTOM_EXTERNAL_CSS) {
+        loadExternalResource(url, 'css')
+      }
+    }
+  }
 
   return (
         <GlobalContextProvider {...pageProps}>
-            <ExternalScript />
             <Component {...pageProps} />
             <ExternalPlugins {...pageProps} />
         </GlobalContextProvider>