feat: add chatlio widget (#186)

Author: AleksandrSl

.vitepress/config.ts

@@ -1,15 +1,22 @@
 import dotenv from 'dotenv';
 /* @ts-expect-error */
 import mdFootnote from 'markdown-it-footnote';
-import { defineConfig, type HeadConfig } from 'vitepress';
+import { defineConfigWithTheme, type DefaultTheme, type HeadConfig } from 'vitepress';
 import { defaultGroupLink, sidebarLinks } from '../docs/links';
 
 dotenv.config();
 
 const BASE = '/';
 const BASE_WITH_ORIGIN = `https://developer.stackblitz.com${BASE}`;
 
-export default defineConfig({
+interface ThemeConfig extends DefaultTheme.Config {
+  chatlio: {
+    id: string | undefined,
+    allowedRoutes: (RegExp|string)[],
+  }
+}
+
+export default defineConfigWithTheme<ThemeConfig>({
   srcDir: './docs',
   outDir: `./build${BASE}`,
   assetsDir: 'assets',
@@ -95,6 +102,10 @@ export default defineConfig({
       '/platform/webcontainers/': sidebarLinks('main', ['webcontainers']),
       '/enterprise/': sidebarLinks('enterprise', ['enterprise']),
     },
+    chatlio: {
+      allowedRoutes: [`^${BASE}teams/.*`, `^${BASE}enterprise/.*`],
+      id: process.env.VITE_CHATLIO_ID,
+    }
   },
 
   postRender(context) {
@@ -106,6 +117,16 @@ export default defineConfig({
       md.use(mdFootnote);
     },
   },
+
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => {
+          return ["chatlio-widget"].includes(tag.toLowerCase());
+        }
+      }
+    }
+  },
 });
 
 function getAnalyticsTags(env: NodeJS.ProcessEnv): HeadConfig[] {

.vitepress/theme/components/Chatlio.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+import { ref, effect } from 'vue';
+import { useRoute, useData} from 'vitepress';
+
+const scriptId = 'chatlio-widget-src';
+const webComponentName = 'chatlio-widget';
+const registered = ref(false);
+
+const route = useRoute();
+const data = useData();
+const chatlio = data.theme.value.chatlio;
+
+const loadChatlio = () => {
+  if (!chatlio.id || document.getElementById(scriptId)) return;
+
+  const script = document.createElement('script');
+  script.id = scriptId;
+  script.async = true;
+  script.src = 'https://js.chatlio.com/widget.js';
+  document.body.appendChild(script);
+  customElements.whenDefined(webComponentName).then(() => {
+    registered.value = true;
+  });
+};
+
+effect(() => {
+  // We load the widget on allowed pages, but then persist it across all the pages in case you want
+  // to browse the docs and keep the chat.
+  if (chatlio.allowedRoutes.some((allowedRoute: string) => route.path.match(allowedRoute))) {
+    loadChatlio();
+  }
+});
+</script>
+
+<template>
+  <chatlio-widget v-if="chatlio.id  && registered" :widgetid="chatlio.id" />
+</template>

.vitepress/theme/components/CustomLayout.vue

@@ -4,13 +4,15 @@ import DefaultTheme from 'vitepress/theme';
 const { Layout } = DefaultTheme;
 
 import Feedback from '@theme/components/Feedback/Feedback.vue';
+import Chatlio from '@theme/components/Chatlio.vue';
 </script>
 
 <template>
   <Layout>
     <template #doc-footer-before>
       <ClientOnly>
         <Feedback />
+        <Chatlio />
       </ClientOnly>
     </template>
   </Layout>