diff --git a/packages/client/modules/email/components/SummaryEmail/MeetingSummaryEmail/WholeMeetingSummaryResult.tsx b/packages/client/modules/email/components/SummaryEmail/MeetingSummaryEmail/WholeMeetingSummaryResult.tsx index 56e30fea03b..c9e45cad738 100644 --- a/packages/client/modules/email/components/SummaryEmail/MeetingSummaryEmail/WholeMeetingSummaryResult.tsx +++ b/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 ( <> @@ -78,7 +90,12 @@ const WholeMeetingSummaryResult = (props: Props) => { - {wholeMeetingSummary} + diff --git a/packages/client/package.json b/packages/client/package.json index 6be831cb4d2..6fa20806ca7 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/styles/theme/global.css b/packages/client/styles/theme/global.css index 8bfbfb9f72e..b1a76203c76 100644 --- a/packages/client/styles/theme/global.css +++ b/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; +} diff --git a/yarn.lock b/yarn.lock index 3a072fdc2ea..267fb2c403b 100644 --- a/yarn.lock +++ b/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"