Use papercups for in-app support (airbytehq#1329)

airbyte-webapp/nginx/default.conf.template

@@ -13,6 +13,7 @@ server {
         sub_filter </head>
                 '</head><script language="javascript"\>
                 window.TRACKING_STRATEGY = "$TRACKING_STRATEGY";
+                window.PAPERCUPS_STORYTIME = "$PAPERCUPS_STORYTIME";
                 window.AIRBYTE_VERSION = "$AIRBYTE_VERSION";
                 window.API_URL = "$API_URL";
                 </script>';

airbyte-webapp/package.json

@@ -15,6 +15,8 @@
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "@hot-loader/react-dom": "16.13.0",
+    "@papercups-io/chat-widget": "^1.1.5",
+    "@papercups-io/storytime": "^1.0.6",
     "dayjs": "^1.8.35",
     "formik": "2.1.5",
     "lodash.at": "^4.6.0",

airbyte-webapp/src/components/SupportChat/SupportChat.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import ChatWidget from "@papercups-io/chat-widget";
+import { Storytime } from "@papercups-io/storytime";
+
+type PapercupsConfig = {
+  accountId: string;
+  baseUrl: string;
+  enableStorytime: boolean;
+};
+
+type IProps = {
+  papercupsConfig: PapercupsConfig;
+  customerId: string;
+};
+
+const SupportChat: React.FC<IProps> = ({ papercupsConfig, customerId }) => {
+  useEffect(() => {
+    if (papercupsConfig.enableStorytime) {
+      Storytime.init({
+        accountId: papercupsConfig.accountId,
+        baseUrl: papercupsConfig.baseUrl,
+        customer: { external_id: customerId }
+      });
+    }
+  }, [customerId, papercupsConfig]);
+
+  return (
+    <ChatWidget
+      title="Welcome to Airbyte"
+      subtitle="Ask us anything in the chat window below 😊"
+      primaryColor="#625eff"
+      greeting="Hello!!!"
+      newMessagePlaceholder="Start typing..."
+      customer={{ external_id: customerId }}
+      accountId={papercupsConfig.accountId}
+      baseUrl={papercupsConfig.baseUrl}
+    />
+  );
+};
+
+export default SupportChat;

airbyte-webapp/src/components/SupportChat/index.tsx

@@ -0,0 +1,3 @@
+import SupportChat from "./SupportChat";
+
+export default SupportChat;

airbyte-webapp/src/config/index.ts

@@ -1,6 +1,7 @@
 declare global {
   interface Window {
     TRACKING_STRATEGY?: string;
+    PAPERCUPS_STORYTIME?: string;
     AIRBYTE_VERSION?: string;
     API_URL?: string;
   }
@@ -14,6 +15,11 @@ const config: {
     tutorialLink: string;
   };
   segment: { token: string };
+  papercups: {
+    accountId: string;
+    baseUrl: string;
+    enableStorytime: boolean;
+  };
   apiUrl: string;
   version?: string;
 } = {
@@ -31,6 +37,11 @@ const config: {
           "6cxNSmQyGSKcATLdJ2pL6WsawkzEMDAN"
         : ""
   },
+  papercups: {
+    accountId: "74560291-451e-4ceb-a802-56706ece528b",
+    baseUrl: "https://app.papercups.io",
+    enableStorytime: window.PAPERCUPS_STORYTIME !== "disabled"
+  },
   version: window.AIRBYTE_VERSION,
   apiUrl:
     window.API_URL ||

airbyte-webapp/src/pages/routes.tsx

@@ -19,6 +19,7 @@ import WorkspaceResource from "../core/resources/Workspace";
 import useSegment from "../components/hooks/useSegment";
 import { AnalyticsService } from "../core/analytics/AnalyticsService";
 import useRouter from "../components/hooks/useRouterHook";
+import SupportChat from "../components/SupportChat";
 
 export enum Routes {
   Preferences = "/preferences",
@@ -152,6 +153,10 @@ export const Routing = () => {
         ) : (
           <MainViewRoutes />
         )}
+        <SupportChat
+          papercupsConfig={config.papercups}
+          customerId={workspace.customerId}
+        />
       </Suspense>
     </Router>
   );

docker-compose.yaml

@@ -87,6 +87,7 @@ services:
       - server
     environment:
       - TRACKING_STRATEGY=${TRACKING_STRATEGY}
+      - PAPERCUPS_STORYTIME=${PAPERCUPS_STORYTIME:-}
       - AIRBYTE_VERSION=${VERSION}
       - AIRBYTE_ROLE=${AIRBYTE_ROLE:-}
       - API_URL=${API_URL}