fix(www): render markdown with html in op-chat messages

www/package.json

@@ -55,6 +55,7 @@
     "react-remark": "^2.1.0",
     "react-resizable-panels": "^2.0.23",
     "readline": "^1.3.0",
+    "rehype-raw": "^7.0.0",
     "tailwind-merge": "^2.5.0",
     "tailwindcss-animate": "^1.0.7",
     "zustand": "^4.5.5"

www/src/app/chat/layout.tsx

@@ -14,7 +14,7 @@ export default function ChatLayout({
       <ChatHeader />
       <div className="flex max-h-[calc(100dvh-4rem)] w-full overflow-hidden h-full">
         <div className="hidden md:flex">
-        <ChatSidebar />
+          <ChatSidebar />
         </div>
 
         <main className="flex flex-1">{children}</main>

www/src/app/chat/page.tsx

@@ -5,7 +5,6 @@ import { ChatList } from "@/components/chat/chat-list";
 import React from "react";
 
 export default function Chat() {
-
   return (
     <div className="flex flex-col-reverse min-w-full">
       <div className="mx-3 md:mx-12">

www/src/app/forum/topic/[topicId]/(components)/topic-page.tsx

@@ -59,7 +59,7 @@ export function TopicPage({ topic }: TopicPageProps) {
               ),
             }}
           >
-            {topic.overview}
+            {topic.overviewMarkdown}
           </Markdown>
         </Section>
       )}

www/src/components/chat/message/message-actions.tsx

@@ -7,7 +7,6 @@ import { useCopyMessage } from "@/components/ui/hooks/use-copy-message";
 import { useFeedback } from "@/components/ui/hooks/use-feedback";
 import { useChatStore } from "@/states/use-chat-state";
 
-
 export interface MessageActionsProps {
   message: Message;
 }

www/src/components/ui/formatted-message.tsx

@@ -1,5 +1,6 @@
 import type React from "react";
-import { Remark } from "react-remark";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 
 interface FormattedMessageProps {
   content: string;
@@ -8,5 +9,14 @@ interface FormattedMessageProps {
 export const FormattedMessage: React.FC<FormattedMessageProps> = ({
   content,
 }) => {
-  return <div dangerouslySetInnerHTML={{ __html: content }} />;
+  return (
+    <Markdown
+      rehypePlugins={[rehypeRaw]}
+      components={{
+        a: ({ node, ...props }) => <a {...props} className="text-blue-500" />,
+      }}
+    >
+      {content}
+    </Markdown>
+  );
 };

www/src/mocks/handlers.ts

@@ -84,11 +84,10 @@ In summary, Optimism is an Ethereum Layer 2 focused on scalability through optim
     const response = {
       data: {
         answer:
-          "Optimism works as a Layer 2 scaling solution for Ethereum, utilizing a technology called optimistic rollups. This allows transactions to be processed off-chain, which significantly increases transaction speed and reduces costs while still ensuring security by periodically submitting batches of transactions to the Ethereum mainnet. The governance of Optimism is community-driven, enabling users to participate in decision-making processes regarding the protocol's development and funding. Additionally, the Retro Funding program rewards contributions to the Optimism ecosystem, focusing on community-driven projects and initiatives.",
+          "The OP token distribution is structured to support various initiatives within the Optimism ecosystem. Key allocations include:\n\n- **19%** for airdrops\n- **20%** for retroactive public goods funding (retroPGF)\n- **25%** for ecosystem funding\n- **17%** for investors\n- **19%** for core contributors\n\nAdditionally, specific proposals, such as one from Beefy Finance, have requested OP tokens for liquidity incentives, with detailed allocations: **35%** for farm incentives, **50%** for boosting native farms, and **15%** for developer incentives. Changes to these allocations require approval from the Collective governance, ensuring community involvement in the decision-making process.",
         url_supporting: [
-          "https://gov.optimism.io/t/bi-weekly-op-mainnet-onchain-analysis-second-half-of-august/6769",
-          "https://gov.optimism.io/t/welcome-to-the-optimism-collective-discourse/7",
-          "https://gov.optimism.io/t/governance-fund-observations/3257",
+          "https://gov.optimism.io/t/clarification-on-op-token-supply/5589",
+          "https://gov.optimism.io/t/ready-gf-phase-1-proposal-beefy/2967",
         ],
       },
       error: null,

www/yarn.lock

@@ -3233,6 +3233,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.4.0":
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -4254,6 +4261,52 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-from-parse5@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "hast-util-from-parse5@npm:8.0.1"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    devlop: "npm:^1.0.0"
+    hastscript: "npm:^8.0.0"
+    property-information: "npm:^6.0.0"
+    vfile: "npm:^6.0.0"
+    vfile-location: "npm:^5.0.0"
+    web-namespaces: "npm:^2.0.0"
+  checksum: 10c0/4a30bb885cff1f0e023c429ae3ece73fe4b03386f07234bf23f5555ca087c2573ff4e551035b417ed7615bde559f394cdaf1db2b91c3b7f0575f3563cd238969
+  languageName: node
+  linkType: hard
+
+"hast-util-parse-selector@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "hast-util-parse-selector@npm:4.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/5e98168cb44470dc274aabf1a28317e4feb09b1eaf7a48bbaa8c1de1b43a89cd195cb1284e535698e658e3ec26ad91bc5e52c9563c36feb75abbc68aaf68fb9f
+  languageName: node
+  linkType: hard
+
+"hast-util-raw@npm:^9.0.0":
+  version: 9.0.4
+  resolution: "hast-util-raw@npm:9.0.4"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    "@ungap/structured-clone": "npm:^1.0.0"
+    hast-util-from-parse5: "npm:^8.0.0"
+    hast-util-to-parse5: "npm:^8.0.0"
+    html-void-elements: "npm:^3.0.0"
+    mdast-util-to-hast: "npm:^13.0.0"
+    parse5: "npm:^7.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+    web-namespaces: "npm:^2.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/03d0fe7ba8bd75c9ce81f829650b19b78917bbe31db70d36bf6f136842496c3474e3bb1841f2d30dafe1f6b561a89a524185492b9a93d40b131000743c0d7998
+  languageName: node
+  linkType: hard
+
 "hast-util-to-jsx-runtime@npm:^2.0.0":
   version: 2.3.0
   resolution: "hast-util-to-jsx-runtime@npm:2.3.0"
@@ -4277,6 +4330,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-parse5@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "hast-util-to-parse5@npm:8.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    web-namespaces: "npm:^2.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/3c0c7fba026e0c4be4675daf7277f9ff22ae6da801435f1b7104f7740de5422576f1c025023c7b3df1d0a161e13a04c6ab8f98ada96eb50adb287b537849a2bd
+  languageName: node
+  linkType: hard
+
 "hast-util-whitespace@npm:^3.0.0":
   version: 3.0.0
   resolution: "hast-util-whitespace@npm:3.0.0"
@@ -4286,6 +4354,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hastscript@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "hastscript@npm:8.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    hast-util-parse-selector: "npm:^4.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+  checksum: 10c0/f0b54bbdd710854b71c0f044612db0fe1b5e4d74fa2001633dc8c535c26033269f04f536f9fd5b03f234de1111808f9e230e9d19493bf919432bb24d541719e0
+  languageName: node
+  linkType: hard
+
 "headers-polyfill@npm:^4.0.2":
   version: 4.0.3
   resolution: "headers-polyfill@npm:4.0.3"
@@ -4307,6 +4388,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-void-elements@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "html-void-elements@npm:3.0.0"
+  checksum: 10c0/a8b9ec5db23b7c8053876dad73a0336183e6162bf6d2677376d8b38d654fdc59ba74fdd12f8812688f7db6fad451210c91b300e472afc0909224e0a44c8610d2
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -6121,6 +6209,7 @@ __metadata:
     react-remark: "npm:^2.1.0"
     react-resizable-panels: "npm:^2.0.23"
     readline: "npm:^1.3.0"
+    rehype-raw: "npm:^7.0.0"
     tailwind-merge: "npm:^2.5.0"
     tailwindcss: "npm:^3.4.9"
     tailwindcss-animate: "npm:^1.0.7"
@@ -6224,6 +6313,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse5@npm:^7.0.0":
+  version: 7.1.2
+  resolution: "parse5@npm:7.1.2"
+  dependencies:
+    entities: "npm:^4.4.0"
+  checksum: 10c0/297d7af8224f4b5cb7f6617ecdae98eeaed7f8cbd78956c42785e230505d5a4f07cef352af10d3006fa5c1544b76b57784d3a22d861ae071bbc460c649482bf4
+  languageName: node
+  linkType: hard
+
 "parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"
@@ -6852,6 +6950,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-raw@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "rehype-raw@npm:7.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    hast-util-raw: "npm:^9.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/1435b4b6640a5bc3abe3b2133885c4dbff5ef2190ef9cfe09d6a63f74dd7d7ffd0cede70603278560ccf1acbfb9da9faae4b68065a28bc5aa88ad18e40f32d52
+  languageName: node
+  linkType: hard
+
 "rehype-react@npm:^6.0.0":
   version: 6.2.1
   resolution: "rehype-react@npm:6.2.1"
@@ -8274,6 +8383,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-location@npm:^5.0.0":
+  version: 5.0.3
+  resolution: "vfile-location@npm:5.0.3"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/1711f67802a5bc175ea69750d59863343ed43d1b1bb25c0a9063e4c70595e673e53e2ed5cdbb6dcdc370059b31605144d95e8c061b9361bcc2b036b8f63a4966
+  languageName: node
+  linkType: hard
+
 "vfile-message@npm:^2.0.0":
   version: 2.0.4
   resolution: "vfile-message@npm:2.0.4"
@@ -8323,6 +8442,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-namespaces@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "web-namespaces@npm:2.0.1"
+  checksum: 10c0/df245f466ad83bd5cd80bfffc1674c7f64b7b84d1de0e4d2c0934fb0782e0a599164e7197a4bce310ee3342fd61817b8047ff04f076a1ce12dd470584142a4bd
+  languageName: node
+  linkType: hard
+
 "web-vitals@npm:^4.0.1":
   version: 4.2.3
   resolution: "web-vitals@npm:4.2.3"