feat: update dependencies and enhance chat and markdown components

- Upgraded various dependencies in package.json for improved performance and security, including @daytonaio/sdk, drizzle-orm, framer-motion, and others.
- Introduced a custom CodeBlock component in markdown.tsx for enhanced code rendering with a copy button.
- Refactored chat.tsx to adjust layout and improve user experience.
- Enhanced markdown rendering with better styling and break-word support for improved readability.
- Updated MCP server manager to auto-start disconnected servers and improve error handling.

components/chat.tsx

@@ -10,7 +10,6 @@ import { toast } from "sonner";
 import { useRouter, useParams } from "next/navigation";
 import { getUserId } from "@/lib/user-id";
 import { useLocalStorage } from "@/lib/hooks/use-local-storage";
-import { STORAGE_KEYS } from "@/lib/constants";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { convertToUIMessages } from "@/lib/chat-store";
 import { type Message as DBMessage } from "@/lib/db/schema";
@@ -153,7 +152,7 @@ export default function Chat() {
   const isLoading = status === "streaming" || status === "submitted" || isLoadingChat;
 
   return (
-    <div className="h-dvh flex flex-col justify-center w-full max-w-3xl mx-auto px-4 sm:px-6 md:py-4">
+    <div className="h-dvh flex flex-col justify-center w-full max-w-[430px] sm:max-w-3xl mx-auto px-4 sm:px-6 py-3">
       {messages.length === 0 && !isLoadingChat ? (
         <div className="max-w-xl mx-auto w-full">
           <ProjectOverview />
@@ -179,7 +178,7 @@ export default function Chat() {
           </div>
           <form
             onSubmit={handleFormSubmit}
-            className="mt-2 w-full mx-auto mb-4 sm:mb-auto"
+            className="mt-2 w-full mx-auto"
           >
             <Textarea
               selectedModel={selectedModel}

components/markdown.tsx

@@ -1,13 +1,69 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import Link from "next/link";
-import React, { memo } from "react";
+import React, { memo, useState } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "@/lib/utils";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { tomorrow, oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { Check, Copy } from "lucide-react";
+import { useTheme } from "next-themes";
+
+// Code Block component with copy button
+const CodeBlock = ({ className, children }: { className?: string; children: string }) => {
+  const [copied, setCopied] = useState(false);
+  const match = /language-(\w+)/.exec(className || '');
+  const language = match ? match[1] : '';
+  const { theme } = useTheme();
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(children);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // Select appropriate theme based on the app's current theme
+  const codeStyle = theme === 'light' || theme === 'sunset' ? oneLight : tomorrow;
+
+  return (
+    <div className="relative group rounded-lg overflow-hidden border border-border mb-3 md:mb-4 w-full max-w-full">
+      <div className="flex items-center justify-between px-3 md:px-4 py-1.5 bg-muted/50 text-muted-foreground text-xs font-mono">
+        <span className="truncate">{language || 'plain text'}</span>
+        <button
+          onClick={handleCopy}
+          className="p-1 hover:text-foreground transition-colors ml-2 flex-shrink-0"
+          aria-label="Copy code"
+        >
+          {copied ? <Check size={14} /> : <Copy size={14} />}
+        </button>
+      </div>
+      <div className="w-full max-w-full overflow-x-auto">
+        <SyntaxHighlighter
+          language={language}
+          style={codeStyle}
+          customStyle={{
+            margin: 0,
+            padding: '0.75rem 1rem',
+            fontSize: '0.85em',
+            backgroundColor: 'var(--secondary)',
+            borderRadius: 0,
+            width: '100%',
+            minWidth: '100%',
+          }}
+          PreTag="div"
+          wrapLines
+          wrapLongLines
+        >
+          {children}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+};
 
 const components: Partial<Components> = {
   pre: ({ children, ...props }) => (
-    <pre className="overflow-x-auto rounded-lg bg-zinc-100 dark:bg-zinc-800/50 black:bg-zinc-800/50 p-2.5 my-1.5 text-sm" {...props}>
+    <pre className="my-1.5 text-sm w-full max-w-full" {...props}>
       {children}
     </pre>
   ),
@@ -18,36 +74,34 @@ const components: Partial<Components> = {
     if (isInline) {
       return (
         <code
-          className="px-1 py-0.5 rounded-md bg-zinc-100 dark:bg-zinc-800/50 black:bg-zinc-800/50 text-zinc-700 dark:text-zinc-300 black:text-zinc-300 text-[0.9em] font-mono"
+          className="px-1.5 py-0.5 rounded-md bg-secondary/50 text-foreground font-mono text-[0.85em] break-words"
           {...props}
         >
           {children}
         </code>
       );
     }
-    return (
-      <code className={cn("block font-mono text-sm", className)} {...props}>
-        {children}
-      </code>
-    );
+    
+    // For code blocks, use our custom CodeBlock component
+    return <CodeBlock className={className}>{String(children).trim()}</CodeBlock>;
   },
   ol: ({ node, children, ...props }) => (
-    <ol className="list-decimal list-outside ml-4 space-y-0.5 my-1.5" {...props}>
+    <ol className="list-decimal list-outside ml-3 md:ml-4 space-y-0.5 my-1.5 text-sm sm:text-base" {...props}>
       {children}
     </ol>
   ),
   ul: ({ node, children, ...props }) => (
-    <ul className="list-disc list-outside ml-4 space-y-0.5 my-1.5" {...props}>
+    <ul className="list-disc list-outside ml-3 md:ml-4 space-y-0.5 my-1.5 text-sm sm:text-base" {...props}>
       {children}
     </ul>
   ),
   li: ({ node, children, ...props }) => (
-    <li className="leading-normal" {...props}>
+    <li className="leading-normal break-words" {...props}>
       {children}
     </li>
   ),
   p: ({ node, children, ...props }) => (
-    <p className="leading-relaxed my-1" {...props}>
+    <p className="leading-relaxed my-1.5 text-sm sm:text-base break-words" {...props}>
       {children}
     </p>
   ),
@@ -63,7 +117,7 @@ const components: Partial<Components> = {
   ),
   blockquote: ({ node, children, ...props }) => (
     <blockquote
-      className="border-l-2 border-zinc-200 dark:border-zinc-700 black:border-zinc-700 pl-3 my-1.5 italic text-zinc-600 dark:text-zinc-400 black:text-zinc-400"
+      className="border-l-2 border-zinc-200 dark:border-zinc-700 black:border-zinc-700 pl-2 md:pl-3 my-1.5 italic text-zinc-600 dark:text-zinc-400 black:text-zinc-400 text-sm sm:text-base"
       {...props}
     >
       {children}
@@ -72,7 +126,7 @@ const components: Partial<Components> = {
   a: ({ node, children, ...props }) => (
     // @ts-expect-error error
     <Link
-      className="text-blue-500 hover:underline hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 black:text-blue-400 black:hover:text-blue-300 transition-colors"
+      className="text-blue-500 hover:underline hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 black:text-blue-400 black:hover:text-blue-300 transition-colors break-words"
       target="_blank"
       rel="noreferrer"
       {...props}
@@ -81,38 +135,38 @@ const components: Partial<Components> = {
     </Link>
   ),
   h1: ({ node, children, ...props }) => (
-    <h1 className="text-2xl font-semibold mt-3 mb-1.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
+    <h1 className="text-xl md:text-2xl font-semibold mt-3 mb-1.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200 break-words" {...props}>
       {children}
     </h1>
   ),
   h2: ({ node, children, ...props }) => (
-    <h2 className="text-xl font-semibold mt-2.5 mb-1.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
+    <h2 className="text-lg md:text-xl font-semibold mt-2.5 mb-1.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200 break-words" {...props}>
       {children}
     </h2>
   ),
   h3: ({ node, children, ...props }) => (
-    <h3 className="text-lg font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
+    <h3 className="text-base md:text-lg font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200 break-words" {...props}>
       {children}
     </h3>
   ),
   h4: ({ node, children, ...props }) => (
-    <h4 className="text-base font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
+    <h4 className="text-sm md:text-base font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200 break-words" {...props}>
       {children}
     </h4>
   ),
   h5: ({ node, children, ...props }) => (
-    <h5 className="text-sm font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
+    <h5 className="text-xs md:text-sm font-semibold mt-2 mb-1 text-zinc-800 dark:text-zinc-200 black:text-zinc-200 break-words" {...props}>
       {children}
     </h5>
   ),
   h6: ({ node, children, ...props }) => (
-    <h6 className="text-xs font-semibold mt-2 mb-0.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200" {...props}>
+    <h6 className="text-xs font-semibold mt-2 mb-0.5 text-zinc-800 dark:text-zinc-200 black:text-zinc-200 break-words" {...props}>
       {children}
     </h6>
   ),
   table: ({ node, children, ...props }) => (
-    <div className="my-1.5 overflow-x-auto">
-      <table className="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 black:divide-zinc-700" {...props}>
+    <div className="my-1.5 overflow-x-auto w-full max-w-full">
+      <table className="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 black:divide-zinc-700 text-sm" {...props}>
         {children}
       </table>
     </div>

components/mcp-server-manager.tsx

@@ -235,11 +235,29 @@ export const MCPServerManager = ({
                 toast.success(`Disabled MCP server: ${server.name}`);
             }
         } else {
-            // Add to selected servers but DON'T auto-start
+            // Add to selected servers
             onSelectedServersChange([...selectedServers, id]);
             const server = servers.find(s => s.id === id);
             
             if (server) {
+                // Auto-start the server if it's disconnected
+                if (!server.status || server.status === 'disconnected' || server.status === 'error') {
+                    updateServerStatus(server.id, 'connecting');
+                    startServer(id)
+                        .then(success => {
+                            if (success) {
+                                console.log(`Server ${server.name} successfully connected`);
+                            } else {
+                                console.error(`Failed to connect server ${server.name}`);
+                            }
+                        })
+                        .catch(error => {
+                            console.error(`Error connecting server ${server.name}:`, error);
+                            updateServerStatus(server.id, 'error', 
+                                `Failed to connect: ${error instanceof Error ? error.message : String(error)}`);
+                        });
+                }
+                
                 toast.success(`Enabled MCP server: ${server.name}`);
             }
         }

lib/mcp-sandbox.ts

@@ -9,10 +9,11 @@ export const startMcpSandbox = async ({
   envs?: Record<string, string>
 }) => {
   console.log("Creating sandbox...");
-  
+
   try {
     const daytona = new Daytona();
-    const sandbox = await daytona.create({
+    const sandbox = await daytona.create(
+      {
       resources: {
         cpu: 2,
         memory: 4,
@@ -23,7 +24,11 @@ export const startMcpSandbox = async ({
       envVars: {
         ...envs,
       },
-    });
+    },
+      {
+        timeout: 0,
+      }
+    );
 
     const host = await sandbox.getPreviewLink(3000);
     const url = host.url;
@@ -33,7 +38,7 @@ export const startMcpSandbox = async ({
 
     const sessionId = Math.random().toString(36).substring(2, 30);
     await sandbox.process.createSession(sessionId);
-    
+
     // Handle Python package installation if command is a Python command
     const isPythonCommand = cmd.startsWith('python') || cmd.startsWith('python3');
     let installResult = null;
@@ -50,7 +55,7 @@ export const startMcpSandbox = async ({
           },
           1000 * 300 // 5 minutes
         );
-        
+
         console.log("install result", installResult.output);
         if (installResult.exitCode) {
           console.error(`Failed to install package ${packageName}. Exit code: ${installResult.exitCode}`);
@@ -68,7 +73,7 @@ export const startMcpSandbox = async ({
       },
       0
     );
-    
+
     console.log("mcp server result", mcpServer.output);
 
     if (mcpServer.exitCode) {
@@ -112,23 +117,37 @@ class McpSandbox {
     if (!this.sandbox || !this.sessionId) {
       throw new Error("Sandbox or session not initialized");
     }
-    
+
     const session = await this.sandbox.process.getSession(this.sessionId);
     return session;
   }
 
+  async start(): Promise<void> {
+    if (!this.sandbox) {
+      throw new Error("Sandbox not initialized");
+    }
+    await this.sandbox.start();
+  }
+
   async stop(): Promise<void> {
     if (!this.sandbox) {
       throw new Error("Sandbox not initialized");
     }
-    
+
     try {
-      await this.sandbox.delete();
+      await this.sandbox.stop();
     } catch (error) {
       console.error("Error stopping sandbox:", error);
       throw error;
     }
   }
+
+  async delete(): Promise<void> {
+    if (!this.sandbox) {
+      throw new Error("Sandbox not initialized");
+    }
+    await this.sandbox.delete();
+  }
 }
 
 export type { McpSandbox };

package.json

@@ -19,7 +19,8 @@
     "@ai-sdk/openai": "^1.3.22",
     "@ai-sdk/react": "^1.2.12",
     "@ai-sdk/xai": "^1.2.16",
-    "@daytonaio/sdk": "^0.17.0",
+    "@aws-sdk/client-s3": "^3.821.0",
+    "@daytonaio/sdk": "^0.19.0",
     "@neondatabase/serverless": "^1.0.0",
     "@radix-ui/react-accordion": "^1.2.7",
     "@radix-ui/react-avatar": "^1.1.6",
@@ -34,42 +35,50 @@
     "@radix-ui/react-tooltip": "^1.2.3",
     "@tanstack/react-query": "^5.74.4",
     "@vercel/analytics": "^1.5.0",
-    "ai": "^4.3.15",
+    "ai": "^4.3.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "drizzle-orm": "^0.42.0",
+    "drizzle-orm": "^0.44.1",
     "fast-deep-equal": "^3.1.3",
-    "framer-motion": "^12.7.4",
+    "framer-motion": "^12.16.0",
     "lucide-react": "^0.488.0",
-    "motion": "^12.7.3",
+    "motion": "^12.16.0",
     "nanoid": "^5.1.5",
-    "next": "^15.3.1",
+    "next": "^15.3.2",
     "next-themes": "^0.4.6",
     "or": "^0.2.0",
-    "pg": "^8.14.1",
+    "pg": "^8.16.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.1",
-    "sonner": "^2.0.3",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.3.3",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
-    "@tailwindcss/postcss": "^4.1.4",
+    "@tailwindcss/postcss": "^4.1.8",
     "@types/node": "^22.14.1",
     "@types/pg": "^8.11.13",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "dotenv": "^16.5.0",
-    "drizzle-kit": "^0.31.0",
+    "drizzle-kit": "^0.31.1",
     "esbuild": ">=0.25.0",
     "eslint": "^9.24.0",
     "eslint-config-next": "15.3.0",
     "pg-pool": "^3.8.0",
-    "tailwindcss": "^4.1.4",
+    "tailwindcss": "^4.1.8",
     "typescript": "^5.8.3"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@tailwindcss/oxide"
+    ]
   }
 }