feat: Improve Calendly integration and meeting booking flow

Author: riazosama

src/app/(chat)/ask-anything/[chatId]/_components/CalendlyWidget.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react';
+import Script from 'next/script';
+
+interface CalendlyWidgetProps {
+  url: string;
+}
+
+export const CalendlyWidget: React.FC<CalendlyWidgetProps> = ({ url }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (url && window.Calendly && containerRef.current) {
+      window.Calendly.initInlineWidget({
+        url,
+        parentElement: containerRef.current,
+        prefill: {},
+        utm: {}
+      });
+    }
+  }, [url]);
+
+  return (
+    <>
+      <Script
+        src="https://assets.calendly.com/assets/external/widget.js"
+        strategy="lazyOnload"
+      />
+      <div 
+        ref={containerRef}
+        className="calendly-inline-widget"
+        style={{ 
+          minWidth: '320px',
+          height: '700px'
+        }}
+      />
+    </>
+  );
+};
+
+declare global {
+  interface Window {
+    Calendly?: any;
+  }
+}

src/app/(chat)/ask-anything/[chatId]/_components/ShowMessage.tsx

@@ -1,46 +1,31 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useQuery } from '@tanstack/react-query'
 import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
 import { getConfiguration } from '@/apis/admin/configuration'
 import { MessageMarkdownMemoized } from './MessageMarkdownMemoized'
+import {CalendlyWidget} from '@/app/(chat)/ask-anything/[chatId]/_components/CalendlyWidget'
 
 interface ShowMessageProps {
   message: string
   components: object
 }
 
 const ShowMessage: React.FC<ShowMessageProps> = ({ message, components }) => {
-  useEffect(() => {
-    if (message === 'BOOK_MEETING') {
-      const script = document.createElement('script')
-      script.src = 'https://assets.calendly.com/assets/external/widget.js'
-      script.async = true
-      document.body.appendChild(script)
-
-      return () => {
-        document.body.removeChild(script)
-      }
-    }
-  }, [message])
-
   // Fetch Calendly URL from DB
   const { data: calendlyUrlData } = useQuery({
     queryKey: ['calendlyUrl'],
     queryFn: getConfiguration,
   })
 
-  const calendlyUrl = calendlyUrlData?.credentials[0].calendlyMeetingLink
+  const calendlyUrl = calendlyUrlData?.credentials[0]?.calendlyMeetingLink || process.env.NEXT_PUBLIC_CALENDLY || ''
 
   if (message === 'BOOK_MEETING') {
     return (
       <div className='mx-auto w-full min-w-full max-w-[1000px] overflow-hidden rounded-xl'>
-        <div
-          className='calendly-inline-widget relative h-[500px] w-[285px] pb-[100%] sm:w-[300px] sm:pb-[75%] md:w-[420px]'
-          data-url={calendlyUrl || process.env.NEXT_PUBLIC_CALENDLY}
-        />
+        <CalendlyWidget url={calendlyUrl} />
       </div>
     )
   } else {

src/services/chat/conversation.ts

@@ -20,7 +20,7 @@ const AVAILABLE_TOOLS: OpenAI.Chat.ChatCompletionTool[] = [
     type: 'function',
     function: {
       name: 'book_meeting_call_appointment',
-      description: 'Books calls, meetings, or appointments with RipeSeed',
+      description: 'Connect with RipeSeed to schedule a meeting or appointment. This will display a Calendly widget for easy booking.',
       parameters: {
         type: 'object',
         properties: {},