feat(dashboard): Implement Widget Configuration and Display Components

- Added WidgetConfigModal for creating and editing widgets with fields for title, sources, prompt, provider, model, and refresh frequency.
- Integrated MarkdownRenderer for displaying widget content previews.
- Created WidgetDisplay component to show widget details, including loading states, error handling, and source information.
- Developed a reusable Card component structure for consistent UI presentation.
- Introduced useDashboard hook for managing widget state, including adding, updating, deleting, and refreshing widgets.
- Implemented local storage management for dashboard state and settings.
- Added types for widgets, dashboard configuration, and API requests/responses to improve type safety and clarity.

src/components/MarkdownRenderer.tsx

@@ -0,0 +1,191 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+
+import { cn } from '@/lib/utils';
+import { CheckCheck, Copy as CopyIcon, Brain } from 'lucide-react';
+import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
+import { useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import ThinkBox from './ThinkBox';
+
+// Helper functions for think overlay
+const extractThinkContent = (content: string): string | null => {
+  const thinkRegex = /<think>([\s\S]*?)<\/think>/g;
+  const matches = content.match(thinkRegex);
+  if (!matches) return null;
+  
+  // Extract content between think tags and join if multiple
+  const extractedContent = matches
+    .map(match => match.replace(/<\/?think>/g, ''))
+    .join('\n\n');
+  
+  // Return null if content is empty or only whitespace
+  return extractedContent.trim().length === 0 ? null : extractedContent;
+};
+
+const removeThinkTags = (content: string): string => {
+  return content.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
+};
+
+const ThinkTagProcessor = ({ 
+  children, 
+  isOverlayMode = false 
+}: { 
+  children: React.ReactNode;
+  isOverlayMode?: boolean;
+}) => {
+  // In overlay mode, don't render anything (content will be handled by overlay)
+  if (isOverlayMode) {
+    return null;
+  }
+  return <ThinkBox content={children as string} />;
+};
+
+const CodeBlock = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  // Extract language from className (format could be "language-javascript" or "lang-javascript")
+  let language = '';
+  if (className) {
+    if (className.startsWith('language-')) {
+      language = className.replace('language-', '');
+    } else if (className.startsWith('lang-')) {
+      language = className.replace('lang-', '');
+    }
+  }
+
+  const content = children as string;
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopyCode = () => {
+    navigator.clipboard.writeText(content);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+  };
+
+  return (
+    <div className="rounded-md overflow-hidden my-4 relative group border border-dark-secondary">
+      <div className="flex justify-between items-center px-4 py-2 bg-dark-200 border-b border-dark-secondary text-xs text-white/70 font-mono">
+        <span>{language}</span>
+        <button
+          onClick={handleCopyCode}
+          className="p-1 rounded-md hover:bg-dark-secondary transition duration-200"
+          aria-label="Copy code to clipboard"
+        >
+          {isCopied ? (
+            <CheckCheck size={14} className="text-green-500" />
+          ) : (
+            <CopyIcon size={14} className="text-white/70" />
+          )}
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={language || 'text'}
+        style={oneDark}
+        customStyle={{
+          margin: 0,
+          padding: '1rem',
+          borderRadius: 0,
+          backgroundColor: '#1c1c1c',
+        }}
+        wrapLines={true}
+        wrapLongLines={true}
+        showLineNumbers={language !== '' && content.split('\n').length > 1}
+        useInlineStyles={true}
+        PreTag="div"
+      >
+        {content}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+  thinkOverlay?: boolean;
+}
+
+const MarkdownRenderer = ({ content, className, thinkOverlay = false }: MarkdownRendererProps) => {
+  const [showThinkBox, setShowThinkBox] = useState(false);
+  
+  // Extract think content from the markdown
+  const thinkContent = thinkOverlay ? extractThinkContent(content) : null;
+  const contentWithoutThink = thinkOverlay ? removeThinkTags(content) : content;
+  // Markdown formatting options
+  const markdownOverrides: MarkdownToJSX.Options = {
+    overrides: {
+      think: {
+        component: ({ children }) => (
+          <ThinkTagProcessor isOverlayMode={thinkOverlay}>
+            {children}
+          </ThinkTagProcessor>
+        ),
+      },
+      code: {
+        component: ({ className, children }) => {
+          // Check if it's an inline code block or a fenced code block
+          if (className) {
+            // This is a fenced code block (```code```)
+            return <CodeBlock className={className}>{children}</CodeBlock>;
+          }
+          // This is an inline code block (`code`)
+          return (
+            <code className="px-1.5 py-0.5 rounded bg-dark-secondary text-white font-mono text-sm">
+              {children}
+            </code>
+          );
+        },
+      },
+      pre: {
+        component: ({ children }) => children,
+      },
+    },
+  };
+
+  return (
+    <div className="relative">
+      {/* Think box when expanded - shows above markdown */}
+      {thinkOverlay && thinkContent && showThinkBox && (
+        <div className="mb-4">
+          <ThinkBox 
+            content={thinkContent} 
+            expanded={true}
+            onToggle={() => setShowThinkBox(false)}
+          />
+        </div>
+      )}
+      
+      <Markdown
+        className={cn(
+          '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',
+          'max-w-none break-words text-black dark:text-white',
+          className
+        )}
+        options={markdownOverrides}
+      >
+        {thinkOverlay ? contentWithoutThink : content}
+      </Markdown>
+      
+      {/* Overlay icon when think box is collapsed */}
+      {thinkOverlay && thinkContent && !showThinkBox && (
+        <button
+          onClick={() => setShowThinkBox(true)}
+          className="absolute top-2 right-2 p-2 rounded-lg bg-black/20 dark:bg-white/20 backdrop-blur-sm opacity-30 hover:opacity-100 transition-opacity duration-200 group"
+          title="Show thinking process"
+        >
+          <Brain size={16} className="text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default MarkdownRenderer;