From ea0aa64330669abd67bca01fb53c66ca93eda5a8 Mon Sep 17 00:00:00 2001
From: asminkarki012 <asminkarki09@gmail.com>
Date: Mon, 21 Apr 2025 20:50:04 +0545
Subject: [PATCH] fix: added renderer in answer bubble

---
 frontend/src/components/MermaidRenderer.tsx    |  6 +-----
 frontend/src/components/types/index.ts         |  5 +++++
 .../src/conversation/ConversationBubble.tsx    | 18 +++++++++---------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/MermaidRenderer.tsx b/frontend/src/components/MermaidRenderer.tsx
index 23b69155..c32b253b 100644
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -3,11 +3,7 @@ import mermaid from 'mermaid';
 import CopyButton from './CopyButton';
 import { useSelector } from 'react-redux';
 import { selectStatus } from '../conversation/conversationSlice';
-
-interface MermaidRendererProps {
-  code: string;
-  isDarkTheme: boolean;
-}
+import { MermaidRendererProps } from './types';
 
 const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   code,
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 47fcd86f..4e6870c4 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -22,3 +22,8 @@ export type InputProps = {
     e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>,
   ) => void;
 };
+
+export type MermaidRendererProps = {
+  code: string;
+  isDarkTheme: boolean;
+};
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 0b7498d2..c92cf870 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -403,6 +403,15 @@ const ConversationBubble = forwardRef<
                     const match = /language-(\w+)/.exec(className || '');
                     const language = match ? match[1] : '';
 
+                    if (language === 'mermaid') {
+                      return (
+                        <MermaidRenderer
+                          isDarkTheme={isDarkTheme}
+                          code={String(children)}
+                        />
+                      );
+                    }
+
                     return match ? (
                       <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
                         <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">
@@ -792,15 +801,6 @@ function Thought({
                   const match = /language-(\w+)/.exec(className || '');
                   const language = match ? match[1] : '';
 
-                  if (language === 'mermaid') {
-                    return (
-                      <MermaidRenderer
-                        isDarkTheme={isDarkTheme}
-                        code={String(children)}
-                      />
-                    );
-                  }
-
                   return match ? (
                     <div className="group relative rounded-[14px] overflow-hidden border border-light-silver dark:border-raisin-black">
                       <div className="flex justify-between items-center px-2 py-1 bg-platinum dark:bg-eerie-black-2">