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"