fix(web): prevent angle bracket text from being hidden in chat prompts

Add disableRawHtml prop to MarkdownRenderer to prevent text like <id>
from being interpreted as HTML tags. This is enabled for user questions
in chat, which should not contain embedded HTML.

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>

Author: cursoragent

packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx

@@ -334,6 +334,7 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
                             <MarkdownRenderer
                                 content={userQuestion.trim()}
                                 className="prose-p:m-0"
+                                disableRawHtml={true}
                             />
                         </div>
 

packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx

@@ -101,9 +101,15 @@ const remarkTocExtractor = () => {
 interface MarkdownRendererProps {
     content: string;
     className?: string;
+    /**
+     * When true, disables raw HTML parsing. This prevents text like `<id>` from
+     * being interpreted as HTML tags. Use this for user-provided content that
+     * shouldn't contain embedded HTML.
+     */
+    disableRawHtml?: boolean;
 }
 
-const MarkdownRendererComponent = forwardRef<HTMLDivElement, MarkdownRendererProps>(({ content, className }, ref) => {
+const MarkdownRendererComponent = forwardRef<HTMLDivElement, MarkdownRendererProps>(({ content, className, disableRawHtml = false }, ref) => {
     const router = useRouter();
 
     const remarkPlugins = useMemo((): PluggableList => {
@@ -115,8 +121,13 @@ const MarkdownRendererComponent = forwardRef<HTMLDivElement, MarkdownRendererPro
     }, []);
 
     const rehypePlugins = useMemo((): PluggableList => {
-        return [
-            rehypeRaw,
+        const plugins: PluggableList = [];
+
+        if (!disableRawHtml) {
+            plugins.push(rehypeRaw);
+        }
+
+        plugins.push(
             [
                 rehypeSanitize,
                 {
@@ -129,8 +140,10 @@ const MarkdownRendererComponent = forwardRef<HTMLDivElement, MarkdownRendererPro
                 } satisfies SanitizeSchema,
             ],
             annotateCodeBlocks,
-        ];
-    }, []);
+        );
+
+        return plugins;
+    }, [disableRawHtml]);
 
     const renderPre = useCallback(({ children, node, ...rest }: React.JSX.IntrinsicElements['pre'] & { node?: Element }) => {
         if (node?.properties && node.properties.isBlock === true) {