fix : Add group property to code block parent element and add copy button condition

frontend/src/conversation/ConversationBubble.tsx

@@ -83,22 +83,16 @@ const ConversationBubble = forwardRef<
                 code({ node, inline, className, children, ...props }) {
                   const match = /language-(\w+)/.exec(className || '');
 
-                  return (
+                  return !inline && match ? (
-                    <div className="relative">
+                    <div className="group relative">
-                      {!inline && match ? (
+                      <SyntaxHighlighter
-                        <SyntaxHighlighter
+                        PreTag="div"
-                          PreTag="div"
+                        language={match[1]}
-                          language={match[1]}
+                        {...props}
-                          {...props}
+                        style={vscDarkPlus}
-                          style={vscDarkPlus}
+                      >
-                        >
+                        {String(children).replace(/\n$/, '')}
-                          {String(children).replace(/\n$/, '')}
+                      </SyntaxHighlighter>
-                        </SyntaxHighlighter>
-                      ) : (
-                        <code className={className ? className : ''} {...props}>
-                          {children}
-                        </code>
-                      )}
                       <div
                         className={`absolute right-3 top-3 lg:invisible 
                         ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} `}
@@ -108,6 +102,10 @@ const ConversationBubble = forwardRef<
                         />
                       </div>
                     </div>
+                  ) : (
+                    <code className={className ? className : ''} {...props}>
+                      {children}
+                    </code>
                   );
                 },
                 ul({ children }) {