feat(webchat-v2): added documentation for webchat v2 (#293)

.gitignore

@@ -10,4 +10,5 @@ out
 pages/api-documentation/index.mdx
 .vercel
 .env*.local
-.ignore.me.*
+.ignore.me.*
+lefthook.yml

components/ComingSoon.tsx

@@ -0,0 +1,15 @@
+import Construction from '@assets/construction.svg'
+
+type Props = {}
+
+export const ComingSoon = ({}: Props) => {
+  return (
+    <div className='flex justify-center items-center flex-col mt-10'>
+      <h3 className='text-3xl'>Coming Soon</h3>
+      <p className='text-gray-400'>This section is under construction.</p>
+      <div>
+        <Construction className='h-40 w-40' />
+      </div>
+    </div>
+  )
+}

components/Demo.tsx

@@ -0,0 +1,77 @@
+import Execution from "@assets/execution.svg";
+import CloseDown from "@assets/close-down.svg";
+import OpenInWindow from "@assets/open-in-window.svg";
+import { useState } from "react";
+
+type Props = {
+	title?: string;
+	message?: string;
+	example: string;
+	preload?: boolean;
+	file?: string
+};
+
+export const Demo = ({ example, message, title, file = 'src/App.tsx', preload = true }: Props) => {
+	const [showDemo, setShowDemo] = useState(false);
+
+	const src = `https://stackblitz.com/github/botpress/documentation-examples/tree/master/examples/${example}?embed=1&hideNavigation=1&view=both&file=${encodeURIComponent(file)}`;
+
+	return (
+		<>
+			{showDemo && (
+				<div
+					className="top-0 bottom-0 right-0 left-0 fixed bg-gray-900 w-screen h-screen animate-[scaleout_300ms_ease] z-20"
+					style={{ animationFillMode: "forwards" }}
+				/>
+			)}
+			<div
+				className={`fixed left-0 right-0 top-0 bottom-0 z-40 ${
+					showDemo ? "" : "invisible"
+				}`}
+				onClick={() => setShowDemo(true)}
+			>
+				<div className="w-full h-full relative">
+					<div className="absolute bottom-0 left-0 right-0 flex justify-center mb-4">
+						<button
+							className="rounded-full w-10 h-10 bg-red-600 hover:bg-red-700 text-white shadow-md"
+							onClick={(e) => {
+								e.stopPropagation();
+								setShowDemo(false);
+							}}
+						>
+							<CloseDown className="h-6 w-10" />
+						</button>
+					</div>
+					{(preload || showDemo) && (
+						<iframe src={src} className="w-full h-full" />
+					)}
+				</div>
+			</div>
+
+			<div
+				className="h-20 transition-all cursor-pointer m-4 mt-8 mb-0 hover:shadow-sm hover:scale-105 p-2 border rounded border-blue-100 bg-white hover:border-blue-400 group"
+				onClick={() => setShowDemo(true)}
+			>
+				<div className="flex justify-center items-center relative">
+					<>
+						<Execution className="h-14 w-14 mr-4" />
+						<div>
+							<h3 className="text-xl">{title ?? "Live Demo"}</h3>
+							<p className="text-gray-400 text-sm m-0">
+								{message ?? "Click to see a live demo"}
+							</p>
+						</div>
+						<a
+							href={src}
+							className="absolute top-0 right-0 p-2 bg-gray-100 hover:bg-gray-200 group-hover:visible invisible"
+							onClick={(e) => e.stopPropagation()}
+							target="_blank"
+						>
+							<OpenInWindow className="h-4 w-4" />
+						</a>
+					</>
+				</div>
+			</div>
+		</>
+	);
+};

components/DocumentationIcon.tsx

@@ -10,6 +10,13 @@ import Rocket from '@assets/learning_center.inline.svg'
 import Lightning from '@assets/lightning.inline.svg'
 import Prompt from '@assets/prompt.inline.svg'
 import StudioLayout from '@assets/studio-layout.inline.svg'
+import Desktop from '@assets/desktop.icon.svg'
+import ReactIcon from '@assets/react.svg'
+import Javascript from '@assets/javascript.svg'
+import Code from '@assets/code.icon.svg'
+import Community from '@assets/community.icon.svg'
+import Dashboard from '@assets/dashboard.icon.svg'
+
 export type DocumentationIcons =
   | 'book'
   | 'chip'
@@ -22,6 +29,12 @@ export type DocumentationIcons =
   | 'grid'
   | 'lightning'
   | 'rocket'
+  | 'desktop'
+  | 'react'
+  | 'code'
+  | 'javascript'
+  | 'community'
+  | 'dashboard'
 
 export function DocumentationIcon(props: { name: DocumentationIcons; className: string }) {
   const IconElement = (() => {
@@ -48,6 +61,18 @@ export function DocumentationIcon(props: { name: DocumentationIcons; className:
         return Lightning
       case 'rocket':
         return Rocket
+      case 'desktop':
+        return Desktop
+      case 'react':
+        return ReactIcon
+      case 'code':
+        return Code
+      case 'javascript':
+        return Javascript
+      case 'community':
+        return Community
+      case 'dashboard':
+        return Dashboard
 
       default:
         return <svg />

components/Feedback.tsx

@@ -12,6 +12,7 @@ export const Feedback = () => {
   }, [location])
 
   const sendFeedback = async ({ feedback }: { feedback: 'positive' | 'negative' }) => {
+    setFeedbackGiven(true)
     await fetch(process.env.NEXT_PUBLIC_BOT_URL ?? '', {
       method: 'POST',
       body: JSON.stringify({
@@ -21,8 +22,6 @@ export const Feedback = () => {
     }).catch(err => {
       console.error(err)
     })
-
-    setFeedbackGiven(true)
   }
 
   return (

components/LinkCard.tsx

@@ -22,7 +22,9 @@ export function LinkCard({ title, className, href, icon, children }: LinkCardPro
       )}
     >
       <Card className="h-full p-4">
-        {icon && <DocumentationIcon name={icon} className="h-12 w-12 text-bpBlue" />}
+        <div className='p-4 bg-blue-50 rounded flex justify-center items-center'>
+          {icon && <DocumentationIcon name={icon} className="max-h-14 max-w-18 text-bpBlue" />}
+        </div>
         <div className="pt-3 text-xl font-bold">{title}</div>
         <div className="pt-2.5 text-base"> {children}</div>
       </Card>

components/LoadGTM.tsx

@@ -8,7 +8,7 @@ type props = {
 const LoadGTM = (props: props) => {
   return (
     <div>
-      <Script id="show-banner">
+     <Script id="show-banner">
         {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <script src="https://cdn.botpress.cloud/webchat/v2/inject.js"></script>
+  <script src="https://mediafiles.botpress.cloud/26a83f89-ace1-4045-92ba-95b836f75669/webchat/v2/config.js"></script>
+</body>
+
+</html>

package.json

@@ -28,8 +28,8 @@
     "lodash": "^4.17.21",
     "next": "^13.4.6",
     "next-sitemap": "^4.2.3",
-    "nextra": "^2.7.1",
-    "nextra-theme-docs": "^2.7.1",
+    "nextra": "^2.13.4",
+    "nextra-theme-docs": "^2.13.4",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

pages/developers/_meta.json

@@ -6,5 +6,6 @@
   "sdk": "SDK",
   "howTo":"How To",
   "concepts": "Key Concepts",
-  "webchat": "Web Chat"
+  "webchat": "Web Chat old",
+  "webchat-v2": "Web Chat v2"
 }

pages/developers/webchat-v2/_meta.json

@@ -0,0 +1,9 @@
+{
+  "quick-start": "Quick Start",
+  "embedded": "Embedded Webchat",
+  "theming": "Theming",
+  "react": "React Library",
+  "javascript-client": "Javascript Client",
+  "api": "Webchat Api",
+  "examples": "Examples"
+}

pages/developers/webchat-v2/api.mdx

@@ -0,0 +1,5 @@
+import { ComingSoon } from '@components/ComingSoon'
+
+# Webchat Api
+
+<ComingSoon />

pages/developers/webchat-v2/embedded.mdx

@@ -0,0 +1,47 @@
+import { Steps } from 'nextra/components'
+
+# Embedded Webchat
+
+Using the embedded webchat is a great way to provide a seamless experience for your users. The embedded webchat can be added to your website or application by adding a few lines of code to your HTML. This is the easiest way to integrate the webchat with your website or application.
+
+<Steps>
+
+### Step 1: Get the Embed Code
+
+![webchat-embed-config](/docs/content/webchat/embed-config.png)
+
+### Step 2: Add the Embed Code to Your Website
+
+```html {8-9}
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Webchat</title>
+</head>
+<body>
+  [...]
+  <script src="https://cdn.botpress.cloud/webchat/v2/inject.js"></script>
+  <script src="https://mediafiles.botpress.cloud/52345432-5432543-5435-435545434/webchat/v2/config.js"></script>
+</body>
+</html>
+```
+
+</Steps>
+
+<div className='relative h-[500px] flex'>
+
+  <div>
+    ### Voilà!
+
+    You've integrated the webchat with your website or application.
+
+    Here's an overview of what the embedded webchat looks like.
+
+    Are you looking to use the webchat as a full-page application? Check out the [react library](react).
+  </div>
+
+  <div className='w-[260px] flex-none'>
+    <img src="/docs/content/webchat/demo.png" alt="demo" />
+  </div>
+
+</div>

pages/developers/webchat-v2/embedded/using-javascript.mdx

@@ -0,0 +1,7 @@
+import { Demo } from '@components/Demo'
+
+# Using Javascript with Embedded
+
+The embedded Webchat allows you to interact with the widget using JavaScript. This API is available on the `window` object as `window.botpress`.
+
+<Demo example="webchat-embed-controls" title="Webchat Embed Controls" file="index.html" />

pages/developers/webchat-v2/examples.mdx

@@ -0,0 +1,12 @@
+import { Demo } from '@components/Demo'
+
+# Examples
+
+This is a collection of examples that demonstrate how to use the Webchat in various scenarios.
+
+<div className="grid grid-cols-2">
+  <Demo example="webchat-react-demo" title="Webchat Demo" preload={false} />
+  <Demo example="webchat-react-custom-message" title="Custom Message" preload={false} />
+  <Demo example="webchat-embed-controls" title="Embedded Controls" file="index.html" preload={false} />
+  <Demo example="webchat-embed-custom-trigger" title="Custom Trigger" file="index.html" preload={false} />
+</div>