perf: Move PlainChat up the hierarchy to remove rerenders (#19255)

* perf: Move PlainChat up the hierarchy to remove rerenders

* rmeove yarn lock

---------

Co-authored-by: Nizzy <nizabizaher@gmail.com>
Co-authored-by: nizzy <140507264+nizzyabi@users.noreply.github.com>

apps/web/app/api/plain-hash/route.ts

@@ -1,11 +1,13 @@
 import { createHmac } from "crypto";
-import type { NextRequest } from "next/server";
+import { cookies, headers } from "next/headers";
 import { NextResponse } from "next/server";
 import { z } from "zod";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { apiRouteMiddleware } from "@calcom/lib/server/apiRouteMiddleware";
 
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
 const responseSchema = z.object({
   hash: z.string(),
   email: z.string().email(),
@@ -15,9 +17,8 @@ const responseSchema = z.object({
   chatAvatarUrl: z.string(),
 });
 
-async function handler(request: NextRequest) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const session = await getServerSession({ req: request as any });
+async function handler() {
+  const session = await getServerSession({ req: buildLegacyRequest(headers(), cookies()) });
   if (!session?.user?.email) {
     return NextResponse.json({ error: "Unauthorized - No session email found" }, { status: 401 });
   }

apps/web/app/providers.tsx

@@ -4,10 +4,13 @@ import { TrpcProvider } from "app/_trpc/trpc-provider";
 import { SessionProvider } from "next-auth/react";
 import CacheProvider from "react-inlinesvg/provider";
 
+import PlainChat from "@lib/plain/dynamicProvider";
+
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <SessionProvider>
       <TrpcProvider>
+        <PlainChat />
         {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
         <CacheProvider>{children}</CacheProvider>
       </TrpcProvider>

apps/web/lib/app-providers-app-dir.tsx

@@ -21,7 +21,6 @@ import { useFlags } from "@calcom/features/flags/hooks";
 
 import useIsBookingPage from "@lib/hooks/useIsBookingPage";
 import useIsThemeSupported from "@lib/hooks/useIsThemeSupported";
-import PlainChat from "@lib/plain/dynamicProvider";
 import type { WithLocaleProps } from "@lib/withLocale";
 import type { WithNonceProps } from "@lib/withNonce";
 
@@ -266,7 +265,6 @@ const AppProviders = (props: PageWrapperProps) => {
 
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <PlainChat />
       <CustomI18nextProvider i18n={props.i18n}>
         <TooltipProvider>
           {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}

apps/web/lib/app-providers.tsx

@@ -20,7 +20,6 @@ import { useFlags } from "@calcom/features/flags/hooks";
 import { MetaProvider } from "@calcom/ui";
 
 import useIsBookingPage from "@lib/hooks/useIsBookingPage";
-import PlainChat from "@lib/plain/dynamicProvider";
 import type { WithLocaleProps } from "@lib/withLocale";
 import type { WithNonceProps } from "@lib/withNonce";
 
@@ -295,7 +294,6 @@ const AppProviders = (props: AppPropsWithChildren) => {
 
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <PlainChat />
       <CustomI18nextProvider {...propsWithoutNonce}>
         <TooltipProvider>
           <CalcomThemeProvider

apps/web/lib/plain/plainChat.tsx

@@ -34,7 +34,6 @@ interface PlainChatConfig {
   chatButtons: Array<{
     icon: string;
     text: string;
-    type: string;
     form?: {
       fields: Array<{
         type: string;
@@ -43,10 +42,7 @@ interface PlainChatConfig {
           icon: string;
           text: string;
           threadDetails: {
-            severity: string;
             labelTypeIds: Array<string>;
-            issueType: string;
-            priority: string;
           };
         }>;
       }>;
@@ -154,17 +150,14 @@ const PlainChat = () => {
           {
             icon: "chat",
             text: "Ask a question",
-            type: "primary",
           },
           {
             icon: "bulb",
             text: "Send feedback",
-            type: "default",
           },
           {
             icon: "error",
             text: "Report an issue",
-            type: "default",
             form: {
               fields: [
                 {
@@ -175,30 +168,21 @@ const PlainChat = () => {
                       icon: "support",
                       text: "I'm unable to use the app",
                       threadDetails: {
-                        severity: "critical",
-                        issueType: "critical",
                         labelTypeIds: ["lt_01JFJWNWAC464N8DZ6YE71YJRF"],
-                        priority: "u",
                       },
                     },
                     {
                       icon: "error",
                       text: "Major functionality degraded",
                       threadDetails: {
-                        severity: "major",
-                        issueType: "major",
                         labelTypeIds: ["lt_01JFJWP3KECF1YQES6XF212RFW"],
-                        priority: "h",
                       },
                     },
                     {
                       icon: "bug",
                       text: "Minor annoyance",
                       threadDetails: {
-                        severity: "minor",
-                        issueType: "minor",
                         labelTypeIds: ["lt_01JFJWPC8ADW0PK28JHMJR6NSS"],
-                        priority: "l",
                       },
                     },
                   ],

apps/web/pages/_app.tsx

@@ -7,6 +7,7 @@ import CacheProvider from "react-inlinesvg/provider";
 import { trpc } from "@calcom/trpc/react";
 
 import type { AppProps } from "@lib/app-providers";
+import PlainChat from "@lib/plain/dynamicProvider";
 
 import "../styles/globals.css";
 
@@ -21,6 +22,7 @@ function MyApp(props: AppProps) {
 
   return (
     <SessionProvider session={pageProps.session ?? undefined}>
+      <PlainChat />
       {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
       <CacheProvider>
         {Component.PageWrapper ? <Component.PageWrapper {...props} /> : <Component {...pageProps} />}