code block update

web/src/components/ui/card/CardBase.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/classMerge';
 
 const sizeVariants = cva('', {
   variants: {

web/src/components/ui/card/FileCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, CardContent, CardHeader, CardFooter } from './CardBase';
 import { cn } from '@/lib/classMerge';
-import { Text } from '../typography';
+import { Text } from '../typography/Text';
 
 interface FileCardProps {
   fileName?: string | React.ReactNode;

web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.tsx

@@ -1,14 +1,20 @@
 'use client';
 
 import React from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import lightTheme from './light';
-import { cn } from '@/lib/classMerge';
-import { useMemoizedFn } from '@/hooks';
+import { cn } from '../../../../lib/classMerge';
+import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { useBusterNotifications } from '@/context/BusterNotifications';
 import { FileCard } from '../../card/FileCard';
-import { Button } from '../../buttons';
-import { Copy } from '../../icons';
+import { Button } from '../../buttons/Button';
+import { Copy } from '../../icons/NucleoIconOutlined';
+
+import dynamic from 'next/dynamic';
+
+const SyntaxHighlighter = dynamic(
+  () => import('react-syntax-highlighter').then((mod) => mod.Prism),
+  { ssr: false }
+);
 
 export const AppCodeBlock: React.FC<{
   language?: string;
@@ -48,13 +54,15 @@ export const AppCodeBlock: React.FC<{
     <FileCard
       fileName={title || language}
       className={wrapperClassName}
-      headerButtons={
-        showCopyButton && (
-          <Button variant="ghost" onClick={copyCode} prefix={<Copy />}>
-            Copy
-          </Button>
-        )
-      }>
+      headerButtons={React.useMemo(() => {
+        return (
+          showCopyButton && (
+            <Button variant="ghost" onClick={copyCode} prefix={<Copy />}>
+              Copy
+            </Button>
+          )
+        );
+      }, [showCopyButton, copyCode])}>
       <div className="w-full overflow-x-auto">
         <div className="code-wrapper">
           {language ? (

web/src/components/ui/typography/AppMarkdown/AppMarkdown.module.css

@@ -1,4 +1,5 @@
 .container {
+  @apply block;
 }
 
 .container table {

web/src/components/ui/typography/AppMarkdown/AppMarkdown.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
-import ReactMarkdown, { Components } from 'react-markdown';
+import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw'; // For rendering HTML
+//import rehypeRaw from 'rehype-raw'; // For rendering HTML
 import {
   CustomCode,
   CustomHeading,
@@ -12,9 +12,13 @@ import {
   CustomOrderedList,
   CustomUnorderedList
 } from './AppMarkdownCommon';
-import { useMemoizedFn } from '@/hooks';
+import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import styles from './AppMarkdown.module.css';
-import { cn } from '@/lib/classMerge';
+import { cn } from '../../../../lib/classMerge';
+
+// remarkGfm plugin adds GitHub Flavored Markdown support
+// including tables, strikethrough, tasklists, and literal URLs
+const remarkPlugins = [remarkGfm];
 
 const AppMarkdownBase: React.FC<{
   markdown: string | null;
@@ -78,11 +82,12 @@ const AppMarkdownBase: React.FC<{
   return (
     <div className={cn(styles.container, 'flex flex-col gap-1.5 leading-1.5', className)}>
       <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
+        remarkPlugins={remarkPlugins}
         skipHtml={true}
         components={memoizedComponents}
-        rehypePlugins={[rehypeRaw]}>
-        {currentMarkdown}
+        //  rehypePlugins={rehypePlugins}
+      >
+        {markdown}
       </ReactMarkdown>
     </div>
   );

web/src/components/ui/typography/AppMarkdown/AppMarkdownCommon.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ExtraProps } from 'react-markdown';
+import { type ExtraProps } from 'react-markdown';
 import { AppCodeBlock } from '../AppCodeBlock/AppCodeBlock';
 import { cva } from 'class-variance-authority';
-import { cn } from '@/lib/classMerge';
+import { cn } from '../../../../lib/classMerge';
 
 export interface ExtraPropsExtra extends ExtraProps {
   numberOfLineMarkdown: number;

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatResponseMessages/ChatResponseMessage_Text.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import { ChatResponseMessageProps } from './ChatResponseMessageSelector';
 import { BusterChatResponseMessage_text } from '@/api/asset_interfaces';
 import { useGetChatMessage } from '@/api/buster_rest/chats';
-import { AppMarkdownDynamic as AppMarkdown } from '@/components/ui/typography/AppMarkdown/AppMarkdownDynamic';
+import { AppMarkdown } from '@/components/ui/typography/AppMarkdown/AppMarkdown';
+
+//IF I use dynamic import it will decrease the bundle size by 200kb. The problem is with the AppCodeBlock
+// import { AppMarkdownDynamic as AppMarkdown } from '@/components/ui/typography/AppMarkdown/AppMarkdownDynamic';
 
 export const ChatResponseMessage_Text: React.FC<ChatResponseMessageProps> = React.memo(
   ({ responseMessageId, messageId, isCompletedStream }) => {
@@ -12,6 +15,8 @@ export const ChatResponseMessage_Text: React.FC<ChatResponseMessageProps> = Reac
     ) as BusterChatResponseMessage_text;
     const { message } = responseMessage;
 
+    if (!message) return null;
+
     return (
       <AppMarkdown
         markdown={message}