From 7951221310fc16dddeaac08a3663bba9f93f7c81 Mon Sep 17 00:00:00 2001 From: Akhileshrangani4 Date: Sun, 20 Oct 2024 23:23:04 -0400 Subject: [PATCH] fix: global buttons and indicators - cmd/ctrl + L works globally now - added the copilot and ai chat button indicators - when aichat is open, the preview/terminal column becomes horizontal --- frontend/components/editor/AIChat/index.tsx | 15 +++++- frontend/components/editor/index.tsx | 55 +++++++++++++++----- frontend/components/editor/sidebar/index.tsx | 37 ++++++++----- 3 files changed, 81 insertions(+), 26 deletions(-) diff --git a/frontend/components/editor/AIChat/index.tsx b/frontend/components/editor/AIChat/index.tsx index a9778c4..316fa07 100644 --- a/frontend/components/editor/AIChat/index.tsx +++ b/frontend/components/editor/AIChat/index.tsx @@ -4,6 +4,7 @@ import ChatMessage from './ChatMessage'; import ChatInput from './ChatInput'; import ContextDisplay from './ContextDisplay'; import { handleSend, handleStopGeneration } from './lib/chatUtils'; +import { X } from 'lucide-react'; interface Message { role: 'user' | 'assistant'; @@ -11,7 +12,7 @@ interface Message { context?: string; } -export default function AIChat({ activeFileContent, activeFileName }: { activeFileContent: string, activeFileName: string }) { +export default function AIChat({ activeFileContent, activeFileName, onClose }: { activeFileContent: string, activeFileName: string, onClose: () => void }) { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [isGenerating, setIsGenerating] = useState(false); @@ -40,7 +41,17 @@ export default function AIChat({ activeFileContent, activeFileName }: { activeFi
CHAT - {activeFileName} +
+ {activeFileName} +
+ +
{messages.map((message, messageIndex) => ( diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx index 5ff1a7c..68a3ed5 100644 --- a/frontend/components/editor/index.tsx +++ b/frontend/components/editor/index.tsx @@ -76,6 +76,7 @@ export default function CodeEditor({ // Layout state const [isHorizontalLayout, setIsHorizontalLayout] = useState(false); + const [previousLayout, setPreviousLayout] = useState(false); // AI Chat state const [isAIChatOpen, setIsAIChatOpen] = useState(false); @@ -530,13 +531,19 @@ export default function CodeEditor({ e.preventDefault() setIsAIChatOpen(prev => !prev); } - } - document.addEventListener("keydown", down) - + }; + + document.addEventListener("keydown", down); + + // Added this line to prevent Monaco editor from handling Cmd/Ctrl+L + editorRef?.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyL, () => { + setIsAIChatOpen(prev => !prev); + }); + return () => { document.removeEventListener("keydown", down) } - }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen]) + }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen, editorRef]) // Liveblocks live collaboration setup effect useEffect(() => { @@ -848,7 +855,24 @@ export default function CodeEditor({ }; const toggleLayout = () => { - setIsHorizontalLayout(prev => !prev); + if (!isAIChatOpen) { + setIsHorizontalLayout(prev => !prev); + } + }; + + // Add an effect to handle layout changes when AI chat is opened/closed + useEffect(() => { + if (isAIChatOpen) { + setPreviousLayout(isHorizontalLayout); + setIsHorizontalLayout(true); + } else { + setIsHorizontalLayout(previousLayout); + } + }, [isAIChatOpen]); + + // Modify the toggleAIChat function + const toggleAIChat = () => { + setIsAIChatOpen(prev => !prev); }; // On disabled access for shared users, show un-interactable loading placeholder + info modal @@ -984,7 +1008,7 @@ export default function CodeEditor({ deletingFolderId={deletingFolderId} /> {/* Outer ResizablePanelGroup for main layout */} - + {/* Left side: Editor and Preview/Terminal */} @@ -1101,7 +1125,13 @@ export default function CodeEditor({ onExpand={() => setIsPreviewCollapsed(false)} >
- - tab.id === activeFileId)?.name || 'No file selected'} - /> + tab.id === activeFileId)?.name || 'No file selected'} + onClose={toggleAIChat} + /> )} @@ -1171,4 +1202,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, -} \ No newline at end of file +} diff --git a/frontend/components/editor/sidebar/index.tsx b/frontend/components/editor/sidebar/index.tsx index 45fa643..8fc706f 100644 --- a/frontend/components/editor/sidebar/index.tsx +++ b/frontend/components/editor/sidebar/index.tsx @@ -4,9 +4,8 @@ import { FilePlus, FolderPlus, Loader2, - MonitorPlay, - Search, Sparkles, + MessageSquareMore, } from "lucide-react"; import SidebarFile from "./file"; import SidebarFolder from "./folder"; @@ -14,14 +13,13 @@ import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"; import { useEffect, useRef, useState } from "react"; import New from "./new"; import { Socket } from "socket.io-client"; -import { Switch } from "@/components/ui/switch"; +import { Button } from "@/components/ui/button"; import { dropTargetForElements, monitorForElements, } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; -import Button from "@/components/ui/customButton"; - + export default function Sidebar({ sandboxData, files, @@ -105,9 +103,9 @@ export default function Sidebar({ }, []); return ( -
-
-
+
+
+
Explorer
-
- {/* */} +
+ +
);