From 12cd7b8e89a6c691d794d37a56b0ee353d295533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Ribeiro?= Date: Thu, 12 Sep 2024 10:55:40 -0300 Subject: [PATCH] fix(www): render markdown with html in op-chat messages --- www/package.json | 1 + www/src/app/chat/layout.tsx | 2 +- www/src/app/chat/page.tsx | 1 - .../[topicId]/(components)/topic-page.tsx | 2 +- .../chat/message/message-actions.tsx | 1 - www/src/components/ui/formatted-message.tsx | 14 +- www/src/mocks/handlers.ts | 7 +- www/yarn.lock | 126 ++++++++++++++++++ 8 files changed, 144 insertions(+), 10 deletions(-) diff --git a/www/package.json b/www/package.json index 31cab47..f915172 100644 --- a/www/package.json +++ b/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" diff --git a/www/src/app/chat/layout.tsx b/www/src/app/chat/layout.tsx index 217cfdc..058dd00 100644 --- a/www/src/app/chat/layout.tsx +++ b/www/src/app/chat/layout.tsx @@ -14,7 +14,7 @@ export default function ChatLayout({
- +
{children}
diff --git a/www/src/app/chat/page.tsx b/www/src/app/chat/page.tsx index 434bf06..44b97c4 100644 --- a/www/src/app/chat/page.tsx +++ b/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 (
diff --git a/www/src/app/forum/topic/[topicId]/(components)/topic-page.tsx b/www/src/app/forum/topic/[topicId]/(components)/topic-page.tsx index 916f31f..068665a 100644 --- a/www/src/app/forum/topic/[topicId]/(components)/topic-page.tsx +++ b/www/src/app/forum/topic/[topicId]/(components)/topic-page.tsx @@ -59,7 +59,7 @@ export function TopicPage({ topic }: TopicPageProps) { ), }} > - {topic.overview} + {topic.overviewMarkdown} )} diff --git a/www/src/components/chat/message/message-actions.tsx b/www/src/components/chat/message/message-actions.tsx index 5548feb..ef46fda 100644 --- a/www/src/components/chat/message/message-actions.tsx +++ b/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; } diff --git a/www/src/components/ui/formatted-message.tsx b/www/src/components/ui/formatted-message.tsx index 35e9338..213d130 100644 --- a/www/src/components/ui/formatted-message.tsx +++ b/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 = ({ content, }) => { - return
; + return ( + , + }} + > + {content} + + ); }; diff --git a/www/src/mocks/handlers.ts b/www/src/mocks/handlers.ts index c765fbb..241702b 100644 --- a/www/src/mocks/handlers.ts +++ b/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, diff --git a/www/yarn.lock b/www/yarn.lock index f772096..4a40df9 100644 --- a/www/yarn.lock +++ b/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"