feat: update meeting summary UI

packages/client/modules/email/components/SummaryEmail/MeetingSummaryEmail/WholeMeetingSummaryResult.tsx

@@ -1,10 +1,12 @@
 import graphql from 'babel-plugin-relay/macro'
-import {WholeMeetingSummaryResult_meeting$key} from 'parabol-client/__generated__/WholeMeetingSummaryResult_meeting.graphql'
-import {PALETTE} from 'parabol-client/styles/paletteV3'
-import {FONT_FAMILY} from 'parabol-client/styles/typographyV2'
+import DOMPurify from 'dompurify'
+import {marked} from 'marked'
 import React, {useEffect} from 'react'
 import {useFragment} from 'react-relay'
+import {WholeMeetingSummaryResult_meeting$key} from '../../../../../__generated__/WholeMeetingSummaryResult_meeting.graphql'
 import useAtmosphere from '../../../../../hooks/useAtmosphere'
+import {PALETTE} from '../../../../../styles/paletteV3'
+import {FONT_FAMILY} from '../../../../../styles/typographyV2'
 import {AIExplainer} from '../../../../../types/constEnums'
 import SendClientSideEvent from '../../../../../utils/SendClientSideEvent'
 import EmailBorderBottom from './EmailBorderBottom'
@@ -39,8 +41,9 @@ interface Props {
   meetingRef: WholeMeetingSummaryResult_meeting$key
 }
 
-const WholeMeetingSummaryResult = (props: Props) => {
-  const {meetingRef} = props
+const WholeMeetingSummaryResult = ({meetingRef}: Props) => {
+  const atmosphere = useAtmosphere()
+
   const meeting = useFragment(
     graphql`
       fragment WholeMeetingSummaryResult_meeting on NewMeeting {
@@ -55,16 +58,25 @@ const WholeMeetingSummaryResult = (props: Props) => {
     `,
     meetingRef
   )
-  const atmosphere = useAtmosphere()
-  const {summary: wholeMeetingSummary, team} = meeting
-  const explainerText = team?.tier === 'starter' ? AIExplainer.STARTER : AIExplainer.PREMIUM_MEETING
   useEffect(() => {
     SendClientSideEvent(atmosphere, 'AI Summary Viewed', {
       source: 'Meeting Summary',
       tier: meeting.team.billingTier,
       meetingId: meeting.id
     })
-  }, [])
+  }, [atmosphere, meeting.id, meeting.team.billingTier])
+
+  const {summary: wholeMeetingSummary, team} = meeting
+
+  if (!wholeMeetingSummary) return null
+  const renderedSummary = marked(wholeMeetingSummary, {
+    gfm: true,
+    breaks: true
+  }) as string
+  const sanitizedSummary = DOMPurify.sanitize(renderedSummary)
+
+  const explainerText = team?.tier === 'starter' ? AIExplainer.STARTER : AIExplainer.PREMIUM_MEETING
+
   return (
     <>
       <tr>
@@ -78,7 +90,12 @@ const WholeMeetingSummaryResult = (props: Props) => {
             </td>
           </tr>
           <tr>
-            <td style={textStyle}>{wholeMeetingSummary}</td>
+            <td
+              align='center'
+              style={textStyle}
+              className='summary-link-style'
+              dangerouslySetInnerHTML={{__html: sanitizedSummary}}
+            />
           </tr>
         </td>
       </tr>

packages/client/package.json

@@ -116,6 +116,7 @@
     "json2csv": "5.0.7",
     "jwt-decode": "^2.1.0",
     "linkify-it": "^2.0.3",
+    "marked": "^13.0.3",
     "mousetrap": "^1.6.3",
     "ms": "^2.0.0",
     "react": "^17.0.2",

packages/client/styles/theme/global.css

@@ -65,7 +65,7 @@
     2) prevent a horizontal scrollbar from causing a vertical scrollbar due to the 100vh
   */
   #root {
-    @apply w-full h-screen p-0 m-0 bg-slate-200;
+    @apply m-0 h-screen w-full bg-slate-200 p-0;
   }
 
   *,
@@ -187,3 +187,8 @@
 .draft-codeblock {
   @apply m-0 rounded-[1px] border-l-2 border-solid border-l-slate-500 bg-slate-200 py-0 px-[8px] font-mono font-[13px] leading-normal;
 }
+
+.summary-link-style a {
+  @apply text-sky-500;
+  text-decoration: underline;
+}

yarn.lock

@@ -16916,6 +16916,11 @@ markdown-it@^13.0.1:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+marked@^13.0.3:
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-13.0.3.tgz#5c5b4a5d0198060c7c9bc6ef9420a7fed30f822d"
+  integrity sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==
+
 marked@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"