feat(markdown): Enhance ThinkBox and MarkdownRenderer for improved content handling and security

src/components/MarkdownRenderer.tsx

@@ -39,7 +39,7 @@ const ThinkTagProcessor = ({
   if (isOverlayMode) {
     return null;
   }
-  return <ThinkBox content={children as string} />;
+  return <ThinkBox content={children} />;
 };
 
 const CodeBlock = ({
@@ -149,6 +149,11 @@ const MarkdownRenderer = ({
       pre: {
         component: ({ children }) => children,
       },
+      // Prevent rendering of certain HTML elements for security
+      iframe: () => null, // Don't render iframes
+      script: () => null, // Don't render scripts
+      object: () => null, // Don't render objects
+      style: () => null, // Don't render styles
     },
   };
 
@@ -170,7 +175,7 @@ const MarkdownRenderer = ({
           'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
           'prose-code:bg-transparent prose-code:p-0 prose-code:text-inherit prose-code:font-normal prose-code:before:content-none prose-code:after:content-none',
           'prose-pre:bg-transparent prose-pre:border-0 prose-pre:m-0 prose-pre:p-0',
-          'break-words text-black dark:text-white',
+          'break-words text-black dark:text-white max-w-full',
           className,
         )}
         options={markdownOverrides}

src/components/ThinkBox.tsx

@@ -1,18 +1,19 @@
 'use client';
 
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { ChevronDown, ChevronUp, BrainCircuit } from 'lucide-react';
 
 interface ThinkBoxProps {
-  content: string;
+  content: ReactNode;
   expanded?: boolean;
   onToggle?: () => void;
 }
 
 const ThinkBox = ({ content, expanded, onToggle }: ThinkBoxProps) => {
-  // Don't render anything if content is empty or only whitespace
+  // Don't render anything if content is empty
-  if (!content || content.trim().length === 0) {
+  console.log('ThinkBox content:', content);
+  if (!content) {
     return null;
   }
 

src/components/dashboard/WidgetConfigModal.tsx

@@ -137,6 +137,11 @@ const WidgetConfigModal = ({
     }
 
     onSave(config);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setPreviewContent(''); // Clear preview content when closing
     onClose();
   };
 
@@ -218,7 +223,7 @@ const WidgetConfigModal = ({
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-50" onClose={onClose}>
+      <Dialog as="div" className="relative z-50" onClose={handleClose}>
         <TransitionChild
           as={Fragment}
           enter="ease-out duration-300"
@@ -249,7 +254,7 @@ const WidgetConfigModal = ({
                 >
                   {editingWidget ? 'Edit Widget' : 'Create New Widget'}
                   <button
-                    onClick={onClose}
+                    onClick={handleClose}
                     className="p-1 hover:bg-light-secondary dark:hover:bg-dark-secondary rounded"
                   >
                     <X size={20} />
@@ -475,7 +480,7 @@ const WidgetConfigModal = ({
                 {/* Action Buttons */}
                 <div className="mt-6 flex justify-end gap-3">
                   <button
-                    onClick={onClose}
+                    onClick={handleClose}
                     className="px-4 py-2 text-sm font-medium text-black dark:text-white bg-light-secondary dark:bg-dark-secondary hover:bg-light-200 dark:hover:bg-dark-200 rounded-md"
                   >
                     Cancel