create link preview for sent messages

src/constants.scss

@@ -175,6 +175,8 @@ $split-view-resizer-border-hover-color: rgba(0, 0, 0, 0.5);
 $editor-checkbox-inactive: #99999d;
 $editor-checkbox-active: #d84ca0;
 $chat-checkbox-inactive: #cecece;
+$link-my-reply-bg: #943367;
+$link-my-reply: #ffa2ea;
 
 /* breakpoints */
 $small-laptop: 1366px;

src/shared/components/Chat/ChatMessage/ChatMessage.module.scss

@@ -62,7 +62,7 @@
 .messageText {
   padding: 0.5rem 0rem;
   border-radius: 0.875rem;
-  background-color: var(--secondary-background);
+  background-color: var(--secondary-hover-fill);
   flex-direction: row;
   box-sizing: border-box;
   position: relative;

src/shared/components/Chat/ChatMessage/ChatMessage.tsx

@@ -55,6 +55,7 @@ import {
   ReactWithEmoji,
   Reactions,
   Time,
+  MessageLinkPreview,
 } from "./components";
 import { ChatMessageContext, ChatMessageContextValue } from "./context";
 import { getTextFromTextEditorString } from "./utils";
@@ -496,6 +497,9 @@ export default function ChatMessage({
                     />
                   )}
                   <ChatImageGallery gallery={discussionMessage.images ?? []} />
+                  <MessageLinkPreview
+                    isOtherPersonMessage={isNotCurrentUserMessage}
+                  />
                   <ChatMessageLinkify
                     onInternalLinkClick={handleInternalLinkClick}
                   >

src/shared/components/Chat/ChatMessage/components/MessageLinkPreview/MessageLinkPreview.module.scss

@@ -0,0 +1,62 @@
+@import "../../../../../../constants";
+
+$border-radius: 0.625rem;
+
+.container {
+  --container-bg: #{$link-my-reply-bg};
+  --title-color: var(--primary-background);
+  --description-color: var(--hover-fill);
+  --url-color: #{$link-my-reply};
+
+  max-width: 14rem;
+  margin-bottom: 0.625rem;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--container-bg);
+  border-radius: $border-radius;
+  text-align: left;
+}
+.containerOtherPerson {
+  --container-bg: var(--secondary-background);
+  --title-color: var(--primary-text);
+  --description-color: #{$editor-checkbox-inactive};
+  --url-color: var(--highlight);
+}
+
+.contentWrapper {
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.image {
+  height: 9.5rem;
+  object-fit: cover;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+}
+
+.title {
+  display: -webkit-box;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--title-color);
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.description {
+  display: -webkit-box;
+  font-size: 0.6875rem;
+  color: var(--description-color);
+  white-space: pre-wrap;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.url {
+  font-size: 0.6875rem;
+  color: var(--url-color);
+}

src/shared/components/Chat/ChatMessage/components/MessageLinkPreview/MessageLinkPreview.tsx

@@ -0,0 +1,48 @@
+import React, { FC, useMemo } from "react";
+import classNames from "classnames";
+import styles from "./MessageLinkPreview.module.scss";
+
+interface MessageLinkPreviewProps {
+  isOtherPersonMessage: boolean;
+}
+
+const getUrlOrigin = (url: string): string => {
+  try {
+    return new URL(url).host;
+  } catch (err) {
+    return "";
+  }
+};
+
+const MessageLinkPreview: FC<MessageLinkPreviewProps> = (props) => {
+  const { isOtherPersonMessage } = props;
+  const data = {
+    title: "David Kushner - Mr. Forgettable [Official Music Video]",
+    description:
+      "HEADLINE SHOWSOctober 18th - Brooklyn, NY - https://bit.ly/3SkMxSlOctober 21st - Los Angeles, CA - https://bit.ly/3BPd9UCOctober 26th - Chicago, IL - https:/...",
+    image: "https://i.ytimg.com/vi/7TCncxWNcPU/maxresdefault.jpg",
+    url: "https://youtu.be/7TCncxWNcPU?list=RD7TCncxWNcPU",
+  };
+  const urlOrigin = useMemo(() => getUrlOrigin(data.url), [data.url]);
+
+  return (
+    <div
+      className={classNames(styles.container, {
+        [styles.containerOtherPerson]: isOtherPersonMessage,
+      })}
+    >
+      <img className={styles.image} src={data.image} alt={data.title} />
+      <div className={styles.contentWrapper}>
+        <span className={styles.title} title={data.title}>
+          {data.title}
+        </span>
+        <span className={styles.description} title={data.description}>
+          {data.description}
+        </span>
+        <span className={styles.url}>{urlOrigin}</span>
+      </div>
+    </div>
+  );
+};
+
+export default MessageLinkPreview;

src/shared/components/Chat/ChatMessage/components/MessageLinkPreview/index.ts

@@ -0,0 +1 @@
+export { default as MessageLinkPreview } from "./MessageLinkPreview";

src/shared/components/Chat/ChatMessage/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./ChatMessageLinkify";
 export * from "./CheckboxItem";
+export * from "./MessageLinkPreview";
 export * from "./Time";
 export * from "./UserMention";
 export * from "./InternalLink";