MessageThread link theming fix (#177)

* Using FluentUI Link in Chat Message to style links

* Change files

change/@azure-communication-ui-2981d6c7-5022-4e21-8d1d-17b9c6b6501b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix theming for links in chat content of MessageThread.",
+  "packageName": "@azure/communication-ui",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-ui/src/components/MessageThread.tsx

@@ -13,7 +13,7 @@ import {
   readReceiptContainerStyle,
   noReadReceiptStyle
 } from './styles/MessageThread.styles';
-import { Icon, IStyle, mergeStyles, Persona, PersonaSize, PrimaryButton, Stack } from '@fluentui/react';
+import { Icon, IStyle, mergeStyles, Persona, PersonaSize, PrimaryButton, Stack, Link } from '@fluentui/react';
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { LiveAnnouncer, LiveMessage } from 'react-aria-live';
 import { delay, formatTimestampForChatMessage } from '../utils';
@@ -173,7 +173,17 @@ const DefaultChatMessageRenderer: DefaultMessageRendererType = (props: MessagePr
     const messageContentItem = (
       <div>
         <LiveMessage message={`${payload.mine ? '' : liveAuthor} ${payload.content}`} aria-live="polite" />
-        <Linkify>{payload.content}</Linkify>
+        <Linkify
+          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {
+            return (
+              <Link href={decoratedHref} key={key}>
+                {decoratedText}
+              </Link>
+            );
+          }}
+        >
+          {payload.content}
+        </Linkify>
       </div>
     );
     return (

packages/communication-ui/src/providers/FluentThemeProvider.tsx

@@ -21,6 +21,16 @@ const wrapper = mergeStyles({
   width: '100%'
 });
 
+const initialFluentNorthstarTheme = mergeThemes(teamsTheme, {
+  componentVariables: {
+    // suppressing teams theme for chat message links to get better styling from Fluent UI Link
+    ChatMessage: {
+      linkColor: undefined,
+      linkColorMine: undefined
+    }
+  }
+});
+
 /**
  * @description Provider to apply theme ACS UI SDK core components. ACS UI SDK core components are built
  * with components mostly from [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web)
@@ -32,11 +42,11 @@ export const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Elemen
   const { fluentTheme, children } = props;
   // if fluentTheme is not provided, default to light theme
   const fluentUITheme = fluentTheme ?? lightTheme;
-  const [fluentNorthStarTheme, setFluentNorthStarTheme] = useState<ThemeInput<any>>(teamsTheme);
+  const [fluentNorthstarTheme, setFluentNorthstarTheme] = useState<ThemeInput<any>>(initialFluentNorthstarTheme);
 
   useEffect(() => {
-    setFluentNorthStarTheme(
-      mergeThemes(teamsTheme, {
+    setFluentNorthstarTheme(
+      mergeThemes(initialFluentNorthstarTheme, {
         componentVariables: {
           Chat: {
             backgroundColor: fluentUITheme?.palette?.white
@@ -63,7 +73,7 @@ export const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Elemen
 
   return (
     <ThemeProvider theme={fluentUITheme} className={wrapper}>
-      <Provider theme={fluentNorthStarTheme} className={wrapper}>
+      <Provider theme={fluentNorthstarTheme} className={wrapper}>
         {children}
       </Provider>
     </ThemeProvider>