feat(js): Com 229 update the in app preview component in the web app …

…to (#6600)

Co-authored-by: Sokratis Vidros <[email protected]>

apps/web/package.json

@@ -61,6 +61,7 @@
     "@mantine/spotlight": "^5.7.1",
     "@monaco-editor/react": "^4.6.0",
     "@novu/design-system": "workspace:*",
+    "@novu/js": "workspace:*",
     "@novu/notification-center": "workspace:*",
     "@novu/novui": "workspace:*",
     "@novu/shared": "workspace:*",

apps/web/src/components/workflow/preview/in-app/v2/InboxPreviewContent.tsx

@@ -2,6 +2,7 @@ import { Text, Title } from '@novu/novui';
 import { css, cva } from '@novu/novui/css';
 import { IconArrowDropDown, IconMoreHoriz, IconSettings } from '@novu/novui/icons';
 import { Center, Flex, HStack, Stack } from '@novu/novui/jsx';
+import { parseMarkdownIntoTokens } from '@novu/js/internal';
 import { ParsedPreviewStateType } from '../../../../../pages/templates/hooks/usePreviewInAppTemplate';
 import { SkeletonStyled } from '../Content.styles';
 import { InboxAvatar } from './InboxAvatar';
@@ -22,6 +23,31 @@ export const INBOX_TOKENS = {
   'Inbox/margin/message/txt/buttons': '1rem',
 } as const;
 
+const renderText = (text?: string) => {
+  if (!text) {
+    return null;
+  }
+
+  const tokens = parseMarkdownIntoTokens(text);
+
+  return tokens.map((token, index) => {
+    if (token.type === 'bold') {
+      return (
+        <Text
+          variant="main"
+          fontWeight="strong"
+          color="typography.text.primary"
+          children={token.content}
+          as="strong"
+          key={index}
+        />
+      );
+    }
+
+    return token.content;
+  });
+};
+
 export function InboxPreviewContent({
   isPreviewLoading,
   parsedPreviewState,
@@ -158,17 +184,13 @@ export function InboxPreviewContent({
           <Stack gap={INBOX_TOKENS['Inbox/margin/message/txt/buttons']} flexGrow={1}>
             <Stack gap="0.25rem">
               <HStack justifyContent="space-between">
-                <Text variant="main" fontWeight="strong">
-                  {parsedPreviewState.subject}
-                </Text>
+                <Text variant="main">{renderText(parsedPreviewState.subject)}</Text>
 
                 <Text variant="main" color="typography.text.secondary">
                   5 min
                 </Text>
               </HStack>
-              <Text variant="main" color="typography.text.secondary">
-                {parsedPreviewState.content}
-              </Text>
+              <Text variant="main">{renderText(parsedPreviewState.content)}</Text>
             </Stack>
 
             {/* Actions Section */}

packages/js/internal/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/internal/index.cjs",
+  "module": "../dist/esm/internal/index.mjs",
+  "types": "../dist/cjs/internal/index.d.ts"
+}

packages/js/package.json

@@ -38,6 +38,16 @@
         "types": "./dist/cjs/themes/index.js",
         "default": "./dist/cjs/themes/index.d.ts"
       }
+    },
+    "./internal": {
+      "import": {
+        "types": "./dist/esm/internal/index.d.mts",
+        "default": "./dist/esm/internal/index.mjs"
+      },
+      "require": {
+        "types": "./dist/cjs/internal/index.js",
+        "default": "./dist/cjs/internal/index.d.ts"
+      }
     }
   },
   "files": [
@@ -47,7 +57,8 @@
     "dist/novu.min.js",
     "dist/novu.min.js.gz",
     "ui/**/*",
-    "themes/**/*"
+    "themes/**/*",
+    "internal/**/*"
   ],
   "sideEffects": false,
   "private": false,

packages/js/src/ui/components/elements/Markdown.tsx

@@ -1,44 +1,8 @@
 import { createMemo, For, JSX } from 'solid-js';
 import { useStyle } from '../../helpers';
+import { parseMarkdownIntoTokens } from '../../internal';
 import { AppearanceKey } from '../../types';
 
-interface Token {
-  type: 'bold' | 'text';
-  content: string;
-}
-
-const parseMarkdownIntoTokens = (text: string): Token[] => {
-  const tokens: Token[] = [];
-  let buffer = '';
-  let inBold = false;
-
-  for (let i = 0; i < text.length; i += 1) {
-    // Check if it's an escaped character
-    if (text[i] === '\\' && text[i + 1] === '*') {
-      buffer += '*';
-      i += 1;
-    }
-    // Check for bold marker **
-    else if (text[i] === '*' && text[i + 1] === '*') {
-      if (buffer) {
-        tokens.push({ type: inBold ? 'bold' : 'text', content: buffer });
-        buffer = '';
-      }
-      inBold = !inBold;
-      i += 1;
-    } else {
-      buffer += text[i];
-    }
-  }
-
-  // Push any remaining buffered text as a token
-  if (buffer) {
-    tokens.push({ type: inBold ? 'bold' : 'text', content: buffer });
-  }
-
-  return tokens;
-};
-
 const Bold = (props: { children?: JSX.Element; appearanceKey?: AppearanceKey }) => {
   const style = useStyle();
 

packages/js/src/ui/internal/index.ts

@@ -0,0 +1 @@
+export * from './parseMarkdown';

packages/js/src/ui/internal/parseMarkdown.tsx

@@ -0,0 +1,36 @@
+export interface Token {
+  type: 'bold' | 'text';
+  content: string;
+}
+
+export const parseMarkdownIntoTokens = (text: string): Token[] => {
+  const tokens: Token[] = [];
+  let buffer = '';
+  let inBold = false;
+
+  for (let i = 0; i < text.length; i += 1) {
+    // Check if it's an escaped character
+    if (text[i] === '\\' && text[i + 1] === '*') {
+      buffer += '*';
+      i += 1;
+    }
+    // Check for bold marker **
+    else if (text[i] === '*' && text[i + 1] === '*') {
+      if (buffer) {
+        tokens.push({ type: inBold ? 'bold' : 'text', content: buffer });
+        buffer = '';
+      }
+      inBold = !inBold;
+      i += 1;
+    } else {
+      buffer += text[i];
+    }
+  }
+
+  // Push any remaining buffered text as a token
+  if (buffer) {
+    tokens.push({ type: inBold ? 'bold' : 'text', content: buffer });
+  }
+
+  return tokens;
+};

packages/js/tsup.config.ts

@@ -48,6 +48,7 @@ const baseModuleConfig: Options = {
     index: './src/index.ts',
     'ui/index': './src/ui/index.ts',
     'themes/index': './src/ui/themes/index.ts',
+    'internal/index': './src/ui/internal/index.ts',
   },
 };
 

playground/nextjs/src/pages/index.tsx

@@ -1,6 +1,7 @@
+import { Inbox } from '@novu/react';
+import { dark } from '@novu/react/themes';
 import Title from '@/components/Title';
 import { novuConfig } from '@/utils/config';
-import { Inbox } from '@novu/react';
 
 export default function Home() {
   return (
@@ -14,6 +15,9 @@ export default function Home() {
             '6697c185607852e9104daf33': 'My workflow in other language', // key is workflow id
           },
         }}
+        appearance={{
+          baseTheme: dark,
+        }}
       />
     </>
   );