Merge branch 'refs/heads/feature/ai-chat'

# Conflicts:
#	frontend/components/editor/index.tsx

frontend/components/editor/AIChat/ChatInput.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button } from '../../ui/button';
+import { Send, StopCircle } from 'lucide-react';
+
+interface ChatInputProps {
+  input: string;
+  setInput: (input: string) => void;
+  isGenerating: boolean;
+  handleSend: () => void;
+  handleStopGeneration: () => void;
+}
+
+export default function ChatInput({ input, setInput, isGenerating, handleSend, handleStopGeneration }: ChatInputProps) {
+  return (
+    <div className="flex space-x-2 min-w-0">
+      <input 
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyPress={(e) => e.key === 'Enter' && !isGenerating && handleSend()}
+        className="flex-grow p-2 border rounded-lg min-w-0 bg-input"
+        placeholder="Type your message..."
+        disabled={isGenerating}
+      />
+      {isGenerating ? (
+        <Button onClick={handleStopGeneration} variant="destructive" size="icon" className="h-10 w-10">
+          <StopCircle className="w-4 h-4" />
+        </Button>
+      ) : (
+        <Button onClick={handleSend} disabled={isGenerating} size="icon" className="h-10 w-10">
+          <Send className="w-4 h-4" />
+        </Button>
+      )}
+    </div>
+  );
+}

frontend/components/editor/AIChat/ChatMessage.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import { Button } from '../../ui/button';
+import { ChevronUp, ChevronDown, Copy, Check, CornerUpLeft } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
+import { copyToClipboard, stringifyContent } from './lib/chatUtils';
+
+interface MessageProps {
+  message: {
+    role: 'user' | 'assistant';
+    content: string;
+    context?: string;
+  };
+  setContext: (context: string | null) => void;
+  setIsContextExpanded: (isExpanded: boolean) => void;
+}
+
+export default function ChatMessage({ message, setContext, setIsContextExpanded }: MessageProps) {
+  const [expandedMessageIndex, setExpandedMessageIndex] = useState<number | null>(null);
+  const [copiedText, setCopiedText] = useState<string | null>(null);
+
+  const renderCopyButton = (text: any) => (
+    <Button
+      onClick={() => copyToClipboard(stringifyContent(text), setCopiedText)}
+      size="sm"
+      variant="ghost"
+      className="p-1 h-6"
+    >
+      {copiedText === stringifyContent(text) ? (
+        <Check className="w-4 h-4 text-green-500" />
+      ) : (
+        <Copy className="w-4 h-4" />
+      )}
+    </Button>
+  );
+
+  const askAboutCode = (code: any) => {
+    const contextString = stringifyContent(code);
+    setContext(`Regarding this code:\n${contextString}`);
+    setIsContextExpanded(false);
+  };
+
+  const renderMarkdownElement = (props: any) => {
+    const { node, children } = props;
+    const content = stringifyContent(children);
+
+    return (
+      <div className="relative group">
+        <div className="absolute top-0 right-0 flex opacity-0 group-hover:opacity-30 transition-opacity">
+          {renderCopyButton(content)}
+          <Button
+            onClick={() => askAboutCode(content)}
+            size="sm"
+            variant="ghost"
+            className="p-1 h-6"
+          >
+            <CornerUpLeft className="w-4 h-4" />
+          </Button>
+        </div>
+        {React.createElement(node.tagName, {
+          ...props,
+          className: `${props.className || ''} hover:bg-transparent rounded p-1 transition-colors`
+        }, children)}
+      </div>
+    );
+  };
+
+  return (
+    <div className="text-left relative">
+      <div className={`relative p-2 rounded-lg ${
+        message.role === 'user' 
+          ? 'bg-[#262626] text-white' 
+          : 'bg-transparent text-white'
+        } max-w-full`}>
+        {message.role === 'user' && (
+          <div className="absolute top-0 right-0 flex opacity-0 group-hover:opacity-30 transition-opacity">
+            {renderCopyButton(message.content)}
+            <Button
+              onClick={() => askAboutCode(message.content)}
+              size="sm"
+              variant="ghost"
+              className="p-1 h-6"
+            >
+              <CornerUpLeft className="w-4 h-4" />
+            </Button>
+          </div>
+        )}
+        {message.context && (
+          <div className="mb-2 bg-input rounded-lg">
+            <div 
+              className="flex justify-between items-center cursor-pointer"
+              onClick={() => setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)}
+            >
+              <span className="text-sm text-gray-300">
+                Context 
+              </span>
+              {expandedMessageIndex === 0 ? (
+                <ChevronUp size={16} />
+              ) : (
+                <ChevronDown size={16} />
+              )}
+            </div>
+            {expandedMessageIndex === 0 && (
+              <div className="relative">
+                <div className="absolute top-0 right-0 flex p-1">
+                  {renderCopyButton(message.context.replace(/^Regarding this code:\n/, ''))}
+                </div>
+                {(() => {
+                  const code = message.context.replace(/^Regarding this code:\n/, '');
+                  const match = /language-(\w+)/.exec(code);
+                  const language = match ? match[1] : 'typescript';
+                  return (
+                    <div className="pt-6">
+                      <textarea
+                        value={code}
+                        onChange={(e) => {
+                          const updatedContext = `Regarding this code:\n${e.target.value}`;
+                          setContext(updatedContext);
+                        }}
+                        className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
+                        rows={code.split('\n').length}
+                        style={{
+                          resize: 'vertical',
+                          minHeight: '100px',
+                          maxHeight: '400px',
+                        }}
+                      />
+                    </div>
+                  );
+                })()}
+              </div>
+            )}
+          </div>
+        )}
+        {message.role === 'assistant' ? (
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              code({node, className, children, ...props}) {
+                const match = /language-(\w+)/.exec(className || '');
+                return match ? (
+                  <div className="relative border border-input rounded-md my-4">
+                    <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
+                      {match[1]}
+                    </div>
+                    <div className="absolute top-0 right-0 flex">
+                      {renderCopyButton(children)}
+                      <Button
+                        onClick={() => askAboutCode(children)}
+                        size="sm"
+                        variant="ghost"
+                        className="p-1 h-6"
+                      >
+                        <CornerUpLeft className="w-4 h-4" />
+                      </Button>
+                    </div>
+                    <div className="pt-6">
+                      <SyntaxHighlighter
+                        style={vscDarkPlus as any}
+                        language={match[1]}
+                        PreTag="div"
+                        customStyle={{
+                          margin: 0,
+                          padding: '0.5rem',
+                          fontSize: '0.875rem',
+                        }}
+                      >
+                        {stringifyContent(children)}
+                      </SyntaxHighlighter>
+                    </div>
+                  </div>
+                ) : (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                );
+              },
+              p: renderMarkdownElement,
+              h1: renderMarkdownElement,
+              h2: renderMarkdownElement,
+              h3: renderMarkdownElement,
+              h4: renderMarkdownElement,
+              h5: renderMarkdownElement,
+              h6: renderMarkdownElement,
+              ul: (props) => <ul className="list-disc pl-6 mb-4 space-y-2">{props.children}</ul>,
+              ol: (props) => <ol className="list-decimal pl-6 mb-4 space-y-2">{props.children}</ol>,
+            }}
+          >
+            {message.content}
+          </ReactMarkdown>
+        ) : (
+          <div className="whitespace-pre-wrap group">
+            {message.content}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/components/editor/AIChat/ContextDisplay.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ChevronUp, ChevronDown, X } from 'lucide-react';
+
+interface ContextDisplayProps {
+  context: string | null;
+  isContextExpanded: boolean;
+  setIsContextExpanded: (isExpanded: boolean) => void;
+  setContext: (context: string | null) => void;
+}
+
+export default function ContextDisplay({ context, isContextExpanded, setIsContextExpanded, setContext }: ContextDisplayProps) {
+  if (!context) return null;
+
+  return (
+    <div className="mb-2 bg-input p-2 rounded-lg">
+      <div className="flex justify-between items-center">
+        <div 
+          className="flex-grow cursor-pointer" 
+          onClick={() => setIsContextExpanded(!isContextExpanded)}
+        >
+          <span className="text-sm text-gray-300">
+            Context
+          </span>
+        </div>
+        <div className="flex items-center">
+          {isContextExpanded ? (
+            <ChevronUp size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(false)} />
+          ) : (
+            <ChevronDown size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(true)} />
+          )}
+          <X 
+            size={16} 
+            className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200" 
+            onClick={() => setContext(null)}
+          />
+        </div>
+      </div>
+      {isContextExpanded && (
+        <textarea
+          value={context.replace(/^Regarding this code:\n/, '')}
+          onChange={(e) => setContext(`Regarding this code:\n${e.target.value}`)}
+          className="w-full mt-2 p-2 bg-#1e1e1e text-white rounded"
+          rows={5}
+        />
+      )}
+    </div>
+  );
+}

frontend/components/editor/AIChat/index.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useRef } from 'react';
+import LoadingDots from '../../ui/LoadingDots';
+import ChatMessage from './ChatMessage';
+import ChatInput from './ChatInput';
+import ContextDisplay from './ContextDisplay';
+import { handleSend, handleStopGeneration } from './lib/chatUtils';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+  context?: string;
+}
+
+export default function AIChat({ activeFileContent, activeFileName }: { activeFileContent: string, activeFileName: string }) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const [context, setContext] = useState<string | null>(null);
+  const [isContextExpanded, setIsContextExpanded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const scrollToBottom = () => {
+    if (chatContainerRef.current) {
+      setTimeout(() => {
+        chatContainerRef.current?.scrollTo({
+          top: chatContainerRef.current.scrollHeight,
+          behavior: 'smooth'
+        });
+      }, 100);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen w-full">
+      <div className="flex justify-between items-center p-2 border-b">
+        <span className="text-muted-foreground/50 font-medium">CHAT</span>
+        <span className="text-muted-foreground/50 font-medium truncate max-w-[50%]" title={activeFileName}>{activeFileName}</span>
+      </div>
+      <div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
+        {messages.map((message, messageIndex) => (
+          <ChatMessage 
+            key={messageIndex} 
+            message={message} 
+            setContext={setContext}
+            setIsContextExpanded={setIsContextExpanded}
+          />
+        ))}
+        {isLoading && <LoadingDots />}
+      </div>
+      <div className="p-4 border-t mb-14">
+        <ContextDisplay 
+          context={context} 
+          isContextExpanded={isContextExpanded}
+          setIsContextExpanded={setIsContextExpanded}
+          setContext={setContext}
+        />
+        <ChatInput 
+          input={input}
+          setInput={setInput}
+          isGenerating={isGenerating}
+          handleSend={() => handleSend(input, context, messages, setMessages, setInput, setIsContextExpanded, setIsGenerating, setIsLoading, abortControllerRef, activeFileContent)}
+          handleStopGeneration={() => handleStopGeneration(abortControllerRef)}
+        />
+      </div>
+    </div>
+  );
+}

frontend/components/editor/AIChat/lib/chatUtils.ts

@@ -0,0 +1,162 @@
+import React from 'react';
+
+export const stringifyContent = (content: any, seen = new WeakSet()): string => {
+  if (typeof content === 'string') {
+    return content;
+  }
+  if (content === null) {
+    return 'null';
+  }
+  if (content === undefined) {
+    return 'undefined';
+  }
+  if (typeof content === 'number' || typeof content === 'boolean') {
+    return content.toString();
+  }
+  if (typeof content === 'function') {
+    return content.toString();
+  }
+  if (typeof content === 'symbol') {
+    return content.toString();
+  }
+  if (typeof content === 'bigint') {
+    return content.toString() + 'n';
+  }
+  if (React.isValidElement(content)) {
+    return React.Children.toArray((content as React.ReactElement).props.children)
+      .map(child => stringifyContent(child, seen))
+      .join('');
+  }
+  if (Array.isArray(content)) {
+    return '[' + content.map(item => stringifyContent(item, seen)).join(', ') + ']';
+  }
+  if (typeof content === 'object') {
+    if (seen.has(content)) {
+      return '[Circular]';
+    }
+    seen.add(content);
+    try {
+      const pairs = Object.entries(content).map(
+        ([key, value]) => `${key}: ${stringifyContent(value, seen)}`
+      );
+      return '{' + pairs.join(', ') + '}';
+    } catch (error) {
+      return Object.prototype.toString.call(content);
+    }
+  }
+  return String(content);
+};
+
+export const copyToClipboard = (text: string, setCopiedText: (text: string | null) => void) => {
+  navigator.clipboard.writeText(text).then(() => {
+    setCopiedText(text);
+    setTimeout(() => setCopiedText(null), 2000);
+  });
+};
+
+export const handleSend = async (
+  input: string,
+  context: string | null,
+  messages: any[],
+  setMessages: React.Dispatch<React.SetStateAction<any[]>>,
+  setInput: React.Dispatch<React.SetStateAction<string>>,
+  setIsContextExpanded: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsGenerating: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  abortControllerRef: React.MutableRefObject<AbortController | null>,
+  activeFileContent: string
+) => {
+  if (input.trim() === '' && !context) return;
+
+  const newMessage = { 
+    role: 'user' as const, 
+    content: input,
+    context: context || undefined
+  };
+  const updatedMessages = [...messages, newMessage];
+  setMessages(updatedMessages);
+  setInput('');
+  setIsContextExpanded(false);
+  setIsGenerating(true);
+  setIsLoading(true);
+
+  abortControllerRef.current = new AbortController();
+
+  try {
+    const anthropicMessages = updatedMessages.map(msg => ({
+      role: msg.role === 'user' ? 'human' : 'assistant',
+      content: msg.content
+    }));
+
+    const response = await fetch(`${process.env.NEXT_PUBLIC_AI_WORKER_URL}/api`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        messages: anthropicMessages,
+        context: context || undefined,
+        activeFileContent: activeFileContent,
+      }),
+      signal: abortControllerRef.current.signal,
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to get AI response');
+    }
+
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder();
+    const assistantMessage = { role: 'assistant' as const, content: '' };
+    setMessages([...updatedMessages, assistantMessage]);
+    setIsLoading(false);
+
+    let buffer = '';
+    const updateInterval = 100;
+    let lastUpdateTime = Date.now();
+
+    if (reader) {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        const currentTime = Date.now();
+        if (currentTime - lastUpdateTime > updateInterval) {
+          setMessages(prev => {
+            const updatedMessages = [...prev];
+            const lastMessage = updatedMessages[updatedMessages.length - 1];
+            lastMessage.content = buffer;
+            return updatedMessages;
+          });
+          lastUpdateTime = currentTime;
+        }
+      }
+
+      setMessages(prev => {
+        const updatedMessages = [...prev];
+        const lastMessage = updatedMessages[updatedMessages.length - 1];
+        lastMessage.content = buffer;
+        return updatedMessages;
+      });
+    }
+  } catch (error: any) {
+    if (error.name === 'AbortError') {
+      console.log('Generation aborted');
+    } else {
+      console.error('Error fetching AI response:', error);
+      const errorMessage = { role: 'assistant' as const, content: 'Sorry, I encountered an error. Please try again.' };
+      setMessages(prev => [...prev, errorMessage]);
+    }
+  } finally {
+    setIsGenerating(false);
+    setIsLoading(false);
+    abortControllerRef.current = null;
+  }
+};
+
+export const handleStopGeneration = (abortControllerRef: React.MutableRefObject<AbortController | null>) => {
+  if (abortControllerRef.current) {
+    abortControllerRef.current.abort();
+  }
+};

frontend/components/editor/index.tsx

@@ -18,7 +18,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { FileJson, Loader2, Sparkles, TerminalSquare } from "lucide-react"
+import { FileJson, Loader2, Sparkles, TerminalSquare, ArrowDownToLine, ArrowRightToLine } from "lucide-react"
 import Tab from "../ui/tab"
 import Sidebar from "./sidebar"
 import GenerateInput from "./generate"
@@ -37,6 +37,7 @@ import { Button } from "../ui/button"
 import React from "react"
 import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
 import { cn, deepMerge } from "@/lib/utils"
+import AIChat from "./AIChat"
 
 export default function CodeEditor({
   userData,
@@ -73,6 +74,12 @@ export default function CodeEditor({
     message: "",
   })
 
+  // Layout state
+  const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
+
+  // AI Chat state
+  const [isAIChatOpen, setIsAIChatOpen] = useState(false);
+
   // File state
   const [files, setFiles] = useState<(TFolder | TFile)[]>([])
   const [tabs, setTabs] = useState<TTab[]>([])
@@ -145,7 +152,7 @@ export default function CodeEditor({
   const generateRef = useRef<HTMLDivElement>(null)
   const suggestionRef = useRef<HTMLDivElement>(null)
   const generateWidgetRef = useRef<HTMLDivElement>(null)
-  const previewPanelRef = useRef<ImperativePanelHandle>(null)
+  const { previewPanelRef } = usePreview();
   const editorPanelRef = useRef<ImperativePanelHandle>(null)
   const previewWindowRef = useRef<{ refreshIframe: () => void }>(null)
 
@@ -514,20 +521,23 @@ export default function CodeEditor({
     [socket, fileContents]
   )
 
-  // Keydown event listener to trigger file save on Ctrl+S or Cmd+S
+  // Keydown event listener to trigger file save on Ctrl+S or Cmd+S, and toggle AI chat on Ctrl+L or Cmd+L
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
-        debouncedSaveData(activeFileId)
+        debouncedSaveData(activeFileId);
+      } else if (e.key === "l" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setIsAIChatOpen(prev => !prev);
       }
     }
     document.addEventListener("keydown", down)
-
+  
     return () => {
       document.removeEventListener("keydown", down)
     }
-  }, [activeFileId, tabs, debouncedSaveData])
+  }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen])
 
   // Liveblocks live collaboration setup effect
   useEffect(() => {
@@ -831,6 +841,20 @@ export default function CodeEditor({
     })
   }
 
+  const togglePreviewPanel = () => {
+    if (isPreviewCollapsed) {
+      previewPanelRef.current?.expand();
+      setIsPreviewCollapsed(false);
+    } else {
+      previewPanelRef.current?.collapse();
+      setIsPreviewCollapsed(true);
+    }
+  };
+
+  const toggleLayout = () => {
+    setIsHorizontalLayout(prev => !prev);
+  };
+
   // On disabled access for shared users, show un-interactable loading placeholder + info modal
   if (disableAccess.isDisabled)
     return (
@@ -953,7 +977,6 @@ export default function CodeEditor({
             />
           ) : null}
         </div>
-
         {/* Main editor components */}
         <Sidebar
           sandboxData={sandboxData}
@@ -967,143 +990,175 @@ export default function CodeEditor({
           addNew={(name, type) => addNew(name, type, setFiles, sandboxData)}
           deletingFolderId={deletingFolderId}
         />
-
-        {/* Shadcn resizeable panels: https://ui.shadcn.com/docs/components/resizable */}
+        {/* Outer ResizablePanelGroup for main layout */}
         <ResizablePanelGroup direction="horizontal">
-          <ResizablePanel
-            className="p-2 flex flex-col"
-            maxSize={80}
-            minSize={30}
-            defaultSize={60}
-            ref={editorPanelRef}
-          >
-            <div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
-              {/* File tabs */}
-              {tabs.map((tab) => (
-                <Tab
-                  key={tab.id}
-                  saved={tab.saved}
-                  selected={activeFileId === tab.id}
-                  onClick={(e) => {
-                    selectFile(tab)
-                  }}
-                  onClose={() => closeTab(tab.id)}
-                >
-                  {tab.name}
-                </Tab>
-              ))}
-            </div>
-            {/* Monaco editor */}
-            <div
-              ref={editorContainerRef}
-              className="grow w-full overflow-hidden rounded-md relative"
-            >
-              {!activeFileId ? (
-                <>
-                  <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
-                    <FileJson className="w-6 h-6 mr-3" />
-                    No file selected.
-                  </div>
-                </>
-              ) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
-              clerk.loaded ? (
-                <>
-                  {provider && userInfo ? (
-                    <Cursors yProvider={provider} userInfo={userInfo} />
-                  ) : null}
-                  <Editor
-                    height="100%"
-                    language={editorLanguage}
-                    beforeMount={handleEditorWillMount}
-                    onMount={handleEditorMount}
-                    onChange={(value) => {
-                      // If the new content is different from the cached content, update it
-                      if (value !== fileContents[activeFileId]) {
-                        setActiveFileContent(value ?? "") // Update the active file content
-                        // Mark the file as unsaved by setting 'saved' to false
-                        setTabs((prev) =>
-                          prev.map((tab) =>
-                            tab.id === activeFileId
-                              ? { ...tab, saved: false }
-                              : tab
-                          )
-                        )
-                      } else {
-                        // If the content matches the cached content, mark the file as saved
-                        setTabs((prev) =>
-                          prev.map((tab) =>
-                            tab.id === activeFileId
-                              ? { ...tab, saved: true }
-                              : tab
-                          )
-                        )
-                      }
-                    }}
-                    options={{
-                      tabSize: 2,
-                      minimap: {
-                        enabled: false,
-                      },
-                      padding: {
-                        bottom: 4,
-                        top: 4,
-                      },
-                      scrollBeyondLastLine: false,
-                      fixedOverflowWidgets: true,
-                      fontFamily: "var(--font-geist-mono)",
-                    }}
-                    theme="vs-dark"
-                    value={activeFileContent}
-                  />
-                </>
-              ) : (
-                <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
-                  <Loader2 className="animate-spin w-6 h-6 mr-3" />
-                  Waiting for Clerk to load...
-                </div>
-              )}
-            </div>
-          </ResizablePanel>
-          <ResizableHandle />
-          <ResizablePanel defaultSize={40}>
-            <ResizablePanelGroup direction="vertical">
+          {/* Left side: Editor and Preview/Terminal */}
+          <ResizablePanel defaultSize={isAIChatOpen ? 80 : 100} minSize={50}>
+            <ResizablePanelGroup direction={isHorizontalLayout ? "vertical" : "horizontal"}>
               <ResizablePanel
-                ref={usePreview().previewPanelRef}
-                defaultSize={4}
-                collapsedSize={4}
-                minSize={25}
-                collapsible
                 className="p-2 flex flex-col"
-                onCollapse={() => setIsPreviewCollapsed(true)}
-                onExpand={() => setIsPreviewCollapsed(false)}
+                maxSize={80}
+                minSize={30}
+                defaultSize={70}
+                ref={editorPanelRef}
               >
-                <PreviewWindow
-                  open={() => {
-                    usePreview().previewPanelRef.current?.expand()
-                    setIsPreviewCollapsed(false)
-                  }}
-                  collapsed={isPreviewCollapsed}
-                  src={previewURL}
-                  ref={previewWindowRef}
-                />
+                <div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
+                  {/* File tabs */}
+                  {tabs.map((tab) => (
+                    <Tab
+                      key={tab.id}
+                      saved={tab.saved}
+                      selected={activeFileId === tab.id}
+                      onClick={(e) => {
+                        selectFile(tab)
+                      }}
+                      onClose={() => closeTab(tab.id)}
+                    >
+                      {tab.name}
+                    </Tab>
+                  ))}
+                </div>
+                {/* Monaco editor */}
+                <div
+                  ref={editorContainerRef}
+                  className="grow w-full overflow-hidden rounded-md relative"
+                >
+                  {!activeFileId ? (
+                    <>
+                      <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
+                        <FileJson className="w-6 h-6 mr-3" />
+                        No file selected.
+                      </div>
+                    </>
+                  ) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
+                    clerk.loaded ? (
+                      <>
+                        {provider && userInfo ? (
+                          <Cursors yProvider={provider} userInfo={userInfo} />
+                        ) : null}
+                        <Editor
+                          height="100%"
+                          language={editorLanguage}
+                          beforeMount={handleEditorWillMount}
+                          onMount={handleEditorMount}
+                          onChange={(value) => {
+                            // If the new content is different from the cached content, update it
+                            if (value !== fileContents[activeFileId]) {
+                              setActiveFileContent(value ?? ""); // Update the active file content
+                              // Mark the file as unsaved by setting 'saved' to false
+                              setTabs((prev) =>
+                                prev.map((tab) =>
+                                  tab.id === activeFileId
+                                    ? { ...tab, saved: false }
+                                    : tab
+                                )
+                              )
+                            } else {
+                              // If the content matches the cached content, mark the file as saved
+                              setTabs((prev) =>
+                                prev.map((tab) =>
+                                  tab.id === activeFileId
+                                    ? { ...tab, saved: true }
+                                    : tab
+                                )
+                              )
+                            }
+                          }}
+                          options={{
+                            tabSize: 2,
+                            minimap: {
+                              enabled: false,
+                            },
+                            padding: {
+                              bottom: 4,
+                              top: 4,
+                            },
+                            scrollBeyondLastLine: false,
+                            fixedOverflowWidgets: true,
+                            fontFamily: "var(--font-geist-mono)",
+                          }}
+                          theme="vs-dark"
+                          value={activeFileContent}
+                        />
+                      </>
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
+                        <Loader2 className="animate-spin w-6 h-6 mr-3" />
+                        Waiting for Clerk to load...
+                      </div>
+                    )}
+                </div>
               </ResizablePanel>
               <ResizableHandle />
-              <ResizablePanel
-                defaultSize={50}
-                minSize={20}
-                className="p-2 flex flex-col"
-              >
-                {isOwner ? (
-                  <Terminals />
-                ) : (
-                  <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
-                    <TerminalSquare className="w-4 h-4 mr-2" />
-                    No terminal access.
-                  </div>
-                )}
+              <ResizablePanel defaultSize={30}>
+                <ResizablePanelGroup direction={
+                  isAIChatOpen && isHorizontalLayout ? "horizontal" :
+                  isAIChatOpen ? "vertical" :
+                  isHorizontalLayout ? "horizontal" :
+                  "vertical"
+                }>
+                  <ResizablePanel
+                    ref={previewPanelRef}
+                    defaultSize={isPreviewCollapsed ? 4 : 20}
+                    minSize={25}
+                    collapsedSize={isHorizontalLayout ? 20 : 4}
+                    className="p-2 flex flex-col"
+                    collapsible
+                    onCollapse={() => setIsPreviewCollapsed(true)}
+                    onExpand={() => setIsPreviewCollapsed(false)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <Button onClick={toggleLayout} size="sm" variant="ghost" className="mr-2 border">
+                        {isHorizontalLayout ? <ArrowRightToLine className="w-4 h-4" /> : <ArrowDownToLine className="w-4 h-4" />}
+                      </Button>
+                      <PreviewWindow
+                        open={togglePreviewPanel}
+                        collapsed={isPreviewCollapsed}
+                        src={previewURL}
+                        ref={previewWindowRef}
+                      />
+                    </div>
+                    {!isPreviewCollapsed && (
+                      <div className="w-full grow rounded-md overflow-hidden bg-foreground mt-2">
+                        <iframe
+                          width={"100%"}
+                          height={"100%"}
+                          src={previewURL}
+                        />
+                      </div>
+                    )}
+                  </ResizablePanel>
+                  <ResizableHandle />
+                  <ResizablePanel
+                    defaultSize={50}
+                    minSize={20}
+                    className="p-2 flex flex-col"
+                  >
+                    {isOwner ? (
+                      <Terminals />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
+                        <TerminalSquare className="w-4 h-4 mr-2" />
+                        No terminal access.
+                      </div>
+                    )}
+                  </ResizablePanel>
+                </ResizablePanelGroup>
               </ResizablePanel>
             </ResizablePanelGroup>
           </ResizablePanel>
+          {/* Right side: AIChat (if open) */}
+          {isAIChatOpen && (
+            <>
+              <ResizableHandle />
+              <ResizablePanel defaultSize={30} minSize={15}>
+              <AIChat 
+                activeFileContent={activeFileContent} 
+                activeFileName={tabs.find(tab => tab.id === activeFileId)?.name || 'No file selected'}
+              />
+              </ResizablePanel>
+            </>
+          )}
         </ResizablePanelGroup>
       </PreviewProvider>
     </>
@@ -1123,4 +1178,4 @@ const defaultCompilerOptions: monaco.languages.typescript.CompilerOptions = {
   module: monaco.languages.typescript.ModuleKind.ESNext,
   moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
   target: monaco.languages.typescript.ScriptTarget.ESNext,
-}
+}

frontend/components/editor/preview/index.tsx

@@ -4,6 +4,7 @@ import {
   Link,
   RotateCw,
   TerminalSquare,
+  UnfoldVertical,
 } from "lucide-react"
 import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from "react"
 import { toast } from "sonner"
@@ -32,24 +33,18 @@ ref: React.Ref<{
 
   return (
     <>
-      <div
-        className={`${collapsed ? "h-full" : "h-10"
-          } select-none w-full flex gap-2`}
-      >
         <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
           <div className="text-xs">Preview</div>
           <div className="flex space-x-1 translate-x-1">
             {collapsed ? (
-              <PreviewButton disabled onClick={() => { }}>
-                <TerminalSquare className="w-4 h-4" />
+              <PreviewButton onClick={open}>
+                <UnfoldVertical className="w-4 h-4" />
               </PreviewButton>
             ) : (
               <>
-                {/* Removed the unfoldvertical button since we have the same thing via the run button.
-                
                 <PreviewButton onClick={open}>
                   <UnfoldVertical className="w-4 h-4" />
-                </PreviewButton> */}
+                </PreviewButton>
 
                 <PreviewButton
                   onClick={() => {
@@ -66,18 +61,6 @@ ref: React.Ref<{
             )}
           </div>
         </div>
-      </div>
-      {collapsed ? null : (
-        <div className="w-full grow rounded-md overflow-hidden bg-foreground">
-          <iframe
-            key={iframeKey}
-            ref={frameRef}
-            width={"100%"}
-            height={"100%"}
-            src={src}
-          />
-        </div>
-      )}
     </>
   )
 })

frontend/components/editor/sidebar/file.tsx

@@ -90,9 +90,9 @@ export default function SidebarFile({
           if (!editing && !pendingDelete && !isMoving)
             selectFile({ ...data, saved: true });
         }}
-        // onDoubleClick={() => {
-        //   setEditing(true)
-        // }}
+        onDoubleClick={() => {
+          setEditing(true)
+        }}
         className={`${
           dragging ? "opacity-50 hover:!bg-background" : ""
         } data-[state=open]:bg-secondary/50 w-full flex items-center h-7 px-1 hover:bg-secondary rounded-sm cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`}