Add markdown preview to file explorer

src/components/workspace/FilePreview.tsx

@@ -1,9 +1,11 @@
+
 import { useEffect, useState, useCallback } from 'react';
 import { Loader2 } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import { useWorkspaceApi } from '@/utils/workspaceApi';
 import type { FileType, FilePreview } from '@/types/workspace';
 import { CodeDisplay } from '@/components/CodeDisplay';
+import { MarkdownPreviewTabs } from './MarkdownPreviewTabs';
 
 interface FilePreviewProps {
   file: FileType;
@@ -50,6 +52,9 @@ export function FilePreview({ file, conversationId }: FilePreviewProps) {
     return null;
   }
 
+  // Check if this is a markdown file
+  const isMarkdownFile = file.name.toLowerCase().endsWith('.md') || file.name.toLowerCase().endsWith('.markdown') || file.mime_type === 'text/markdown';
+
   switch (preview.type) {
     case 'text':
       return (
@@ -66,11 +71,18 @@ export function FilePreview({ file, conversationId }: FilePreviewProps) {
             </div>
           </div>
           <div className="flex-1 overflow-auto">
-            <CodeDisplay
-              code={preview.content}
-              language={file.mime_type?.split('/')[1] || 'plaintext'}
-              maxHeight="none"
-            />
+            {isMarkdownFile ? (
+              <MarkdownPreviewTabs
+                content={preview.content}
+                language={file.mime_type?.split('/')[1] || 'markdown'}
+              />
+            ) : (
+              <CodeDisplay
+                code={preview.content}
+                language={file.mime_type?.split('/')[1] || 'plaintext'}
+                maxHeight="none"
+              />
+            )}
           </div>
         </div>
       );

src/components/workspace/MarkdownPreviewTabs.tsx

@@ -0,0 +1,93 @@
+
+import { useState, useRef, useEffect } from 'react';
+import { getCodeBlockEmoji } from '@/utils/markdownUtils';
+import * as smd from '@/utils/smd';
+import { customRenderer } from '@/utils/markdownRenderer';
+import { CodeDisplay } from '@/components/CodeDisplay';
+
+interface MarkdownPreviewTabsProps {
+  content: string;
+  language?: string;
+}
+
+export function MarkdownPreviewTabs({ content, language = 'markdown' }: MarkdownPreviewTabsProps) {
+  const [activeTab, setActiveTab] = useState<'code' | 'preview'>('preview');
+  const previewRef = useRef<HTMLDivElement>(null);
+  const [renderError, setRenderError] = useState<string | null>(null);
+
+  const emoji = getCodeBlockEmoji(language);
+
+  // Handle markdown rendering when the preview tab is selected
+  useEffect(() => {
+    if (previewRef.current && content && activeTab === 'preview') {
+      try {
+        // Clear previous content and error state
+        previewRef.current.innerHTML = '';
+        setRenderError(null);
+
+        // Use streaming markdown parser for markdown content
+        const renderer = customRenderer(previewRef.current);
+        const parser = smd.parser(renderer);
+        smd.parser_write(parser, content);
+        smd.parser_end(parser);
+      } catch (error) {
+        console.error('Error rendering markdown preview:', error);
+        setRenderError('Failed to render markdown preview');
+      }
+    }
+  }, [content, activeTab]);
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex bg-gray-50 dark:bg-gray-900 border-b">
+        <button
+          className={`px-4 py-2 text-sm font-medium transition-colors ${
+            activeTab === 'preview'
+              ? 'border-b-2 border-blue-500 bg-white dark:bg-gray-800'
+              : 'hover:bg-gray-100 dark:hover:bg-gray-800'
+          }`}
+          onClick={() => setActiveTab('preview')}
+        >
+          👁️ Preview
+        </button>
+        <button
+          className={`px-4 py-2 text-sm font-medium transition-colors ${
+            activeTab === 'code'
+              ? 'border-b-2 border-blue-500 bg-white dark:bg-gray-800'
+              : 'hover:bg-gray-100 dark:hover:bg-gray-800'
+          }`}
+          onClick={() => setActiveTab('code')}
+        >
+          {emoji} Code
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        {activeTab === 'code' && (
+          <CodeDisplay
+            code={content}
+            language={language}
+            maxHeight="none"
+          />
+        )}
+
+        {activeTab === 'preview' && (
+          <>
+            {renderError ? (
+              <div className="p-4">
+                <div className="rounded-md bg-red-50 p-4 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400">
+                  {renderError}
+                </div>
+              </div>
+            ) : (
+              <div
+                ref={previewRef}
+                className="prose prose-sm dark:prose-invert max-w-none p-4"
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}