From 1bfbb059fe44e8d6e39af730e480d2f9f8674257 Mon Sep 17 00:00:00 2001
From: Alex Hancock <alexhancock@block.xyz>
Date: Wed, 29 Jan 2025 12:22:10 -0500
Subject: [PATCH] chore: Consolidate on one markdown rendering component (#842)

---
 ui/desktop/src/components/GooseResponseForm.tsx | 4 ++--
 ui/desktop/src/components/ToolCallArguments.tsx | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/ui/desktop/src/components/GooseResponseForm.tsx b/ui/desktop/src/components/GooseResponseForm.tsx
index 69ff86b1..a5f811c2 100644
--- a/ui/desktop/src/components/GooseResponseForm.tsx
+++ b/ui/desktop/src/components/GooseResponseForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import ReactMarkdown from 'react-markdown';
+import MarkdownContent from './MarkdownContent';
 import { Button } from './ui/button';
 import { cn } from '../utils';
 import { Send } from './icons';
@@ -177,7 +177,7 @@ export default function GooseResponseForm({
             >
               <h3 className="font-semibold text-lg mb-2 dark:text-gray-100">{opt.optionTitle}</h3>
               <div className="prose prose-xs max-w-none dark:text-gray-100">
-                <ReactMarkdown>{opt.optionDescription}</ReactMarkdown>
+                <MarkdownContent content={opt.optionDescription} />
               </div>
             </div>
           ))}
diff --git a/ui/desktop/src/components/ToolCallArguments.tsx b/ui/desktop/src/components/ToolCallArguments.tsx
index 3a34d88a..f0d5b5b8 100644
--- a/ui/desktop/src/components/ToolCallArguments.tsx
+++ b/ui/desktop/src/components/ToolCallArguments.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
+import MarkdownContent from './MarkdownContent';
 
 interface ToolCallArgumentsProps {
   args: Record<string, any>;
@@ -44,9 +44,7 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
           </div>
           {isExpanded && (
             <div className="mt-2 ml-4">
-              <ReactMarkdown className="whitespace-pre-wrap break-words prose-pre:whitespace-pre-wrap prose-pre:break-words text-gray-600 dark:text-white">
-                {value}
-              </ReactMarkdown>
+              <MarkdownContent content={value} />
             </div>
           )}
         </div>