feat: allow customers to send feedback (#811)

We have two requirements:

- receive messages in #feedback
- allow users to send screenshots

Ideally we'd also be able to chat with users on the page, by just
replying on the slack thread, but that requirement seems to be mutually
exclusive with taking screenshots

Tried so many **** vendors that did not work... even hubspot's didn't work out of the box like this one did.

More vendors discussed in
https://www.notion.so/gloochat/live-feedback-in-app-tool-4426a1fc381242958804697f7c753882?pvs=4

tools/build

@@ -252,7 +252,7 @@ case "$_path" in
     if [ "$_watch_mode" -eq 1 ]; then
       # nodemon config in typescript/nodemon.json
       npx nodemon \
-        --ext js,ts,tsx,rs,hb,hbs,toml \
+        --ext js,ts,tsx,rs,hb,hbs,toml,html \
         --watch "${_repo_root}/engine" \
         --watch "${_repo_root}/engine/jinja" \
         --watch "${_repo_root}/typescript" \

typescript/fiddle-frontend/app/[project_id]/_components/ProjectView.tsx

@@ -46,8 +46,10 @@ import SettingsDialog, { ShowSettingsButton } from '@baml/playground-common/shar
 import FileViewer from './Tree/FileViewer'
 import { AppStateProvider } from '@baml/playground-common/shared/AppStateContext' // Import the AppStateProvider
 import { ViewSelector } from '@baml/playground-common/shared/Selectors'
+import { useFeedbackWidget } from '@baml/playground-common/lib/feedback_widget'
 
 const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
+  useFeedbackWidget()
   const setEditorFiles = useSetAtom(updateFileAtom)
   useKeybindingOverrides()
   // Tried to use url pathnames for this but nextjs hijacks the pathname state (even the window.location) so we have to manually track unsaved changes in the app.

typescript/fiddle-frontend/app/page.tsx

@@ -28,7 +28,6 @@ export default async function Home({
     <main className='flex flex-col items-center justify-between min-h-screen font-sans'>
       <div className='w-screen h-screen dark:bg-black'>
         <ProjectView project={data} />
-
         {/* <Suspense fallback={<div>Loading...</div>}>{children}</Suspense> */}
       </div>
     </main>

typescript/playground-common/src/lib/feedback_widget.ts

@@ -0,0 +1,65 @@
+import { useEffect } from 'react'
+
+const loadDoorbell = () => {
+  ;(window as any).doorbellOptions = {
+    id: '14262',
+    appKey: '4coKRb0R5AVhGfyJOuDm45GYC7NsD8uQUfe5x2zNHEh2FYTZhQxks1l1d0kyWHsC',
+  }
+  ;(function (w: any, d, t) {
+    var hasLoaded = false
+    function l() {
+      if (hasLoaded) {
+        return
+      }
+      hasLoaded = true
+      ;(window as any).doorbellOptions.windowLoaded = true
+      var g = d.createElement(t) as any
+      g.id = 'doorbellScript'
+      g.type = 'text/javascript'
+      g.crossorigin = 'anonymous'
+      g.async = true
+      g.src = 'https://embed.doorbell.io/button/' + (window as any).doorbellOptions['id'] + '?t=' + new Date().getTime()
+      ;(d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(g)
+    }
+    if (w.attachEvent) {
+      w.attachEvent('onload', l)
+    } else if (w.addEventListener) {
+      w.addEventListener('load', l, false)
+    } else {
+      l()
+    }
+    if (d.readyState == 'complete') {
+      l()
+    }
+  })(window, document, 'script')
+}
+
+const loadSignalZen = () => {
+  var _sz = (_sz || {}) as any
+  ;(_sz.appId = '03fb7e7f'),
+    (function () {
+      var e = document.createElement('script')
+      ;(e.src = 'https://cdn.signalzen.com/signalzen.js'),
+        e.setAttribute('async', 'true'),
+        document.documentElement.firstChild?.appendChild(e)
+      var t = setInterval(function () {
+        const SignalZen = (window as any).SignalZen
+        'undefined' != typeof SignalZen && (clearInterval(t), new SignalZen(_sz).load())
+      }, 10)
+    })()
+}
+
+const loadSmallChat = () => {
+  const e = document.createElement('script')
+  e.src = 'https://embed.small.chat/T03KV1PH19PC07DA5G14HY.js'
+  e.setAttribute('async', 'true')
+  document.documentElement.firstChild?.appendChild(e)
+}
+
+export const useFeedbackWidget = () => {
+  useEffect(() => {
+    loadDoorbell()
+    // loadSignalZen()
+    // loadSmallChat()
+  }, [])
+}

typescript/vscode-ext/packages/web-panel/src/App.tsx

@@ -14,8 +14,10 @@ import 'jotai-devtools/styles.css'
 import { Snippets } from './shared/Snippets'
 import { Dialog, DialogTrigger, DialogContent } from './components/ui/dialog'
 import { AppStateProvider } from './shared/AppStateContext' // Import the AppStateProvider
+import { useFeedbackWidget } from './lib/feedback_widget'
 
 function App() {
+  useFeedbackWidget()
   return (
     <CustomErrorBoundary>
       <DevTools />