proper rendering of multiline code blocks for inline explanations

Signed-off-by: Akshat Batra <[email protected]>

Author: akshatbatra

src/ai-assistant/prompts.ts

@@ -45,8 +45,9 @@ export const prepareSystemPrompt = {
 
     let prompt = `You are a helpful assistant that explains Accord Project ${typeName} code clearly and concisely. 
     Focus on what the code does, its purpose, and any important details about its structure or syntax. 
-    Provide easy to understand explanations for developers.\n\n`;
-    
+    Provide easy to understand explanations for developers. You can break down the code in detail line-by-line
+    but don't include the complete code block in your response as it is, user already knows their selection.\n\n`;
+
     return includeEditorContents(prompt, aiConfig, editorsContent);
   },
 

src/components/CodeSelectionMenu.tsx

@@ -169,7 +169,20 @@ const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
             <div className="text-sm text-gray-700 prose lg:prose-md">
               <ReactMarkdown
                 components={{
-                  code: ({ children, className }) => <code className={`bg-gray-200 p-1 rounded-md before:content-[''] after:content-[''] ${className}`}>{children}</code>,
+                  pre: ({ children }) => {
+                    return (
+                      <pre className="[&_code]:bg-transparent">
+                        {children}
+                      </pre>
+                    );
+                  },
+                  code: ({ children, className }) => {
+                    return (
+                      <code className={`bg-gray-200 p-1 rounded-md before:content-[''] after:content-[''] ${className}`}>
+                        {children}
+                      </code>
+                    );
+                  }
               }}>
                 {explanation}
               </ReactMarkdown>