+
- (INITIAL_MODELS);
- useEffect(() => {
- fetchModels().then((fetchedModels) => {
- setModels(fetchedModels);
- });
- }, []);
-
- return (
-
- );
-}
-
-function AgentSelect(): JSX.Element {
- const [agents, setAgents] = useState(INITIAL_AGENTS);
- useEffect(() => {
- fetchAgents().then((fetchedAgents) => {
- setAgents(fetchedAgents);
- });
- }, []);
- return (
-
- );
-}
-
-function BannerSettings(): JSX.Element {
- return (
-
+
-
-
);
}
diff --git a/frontend/src/assets/calendar.tsx b/frontend/src/assets/calendar.tsx
new file mode 100644
index 0000000000..290691d87d
--- /dev/null
+++ b/frontend/src/assets/calendar.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+function Calendar() {
+ return (
+
+ );
+}
+
+export default Calendar;
diff --git a/frontend/src/assets/cmd-line.tsx b/frontend/src/assets/cmd-line.tsx
new file mode 100644
index 0000000000..3610e460e4
--- /dev/null
+++ b/frontend/src/assets/cmd-line.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+function CmdLine() {
+ return (
+
+ );
+}
+
+export default CmdLine;
diff --git a/frontend/src/assets/cog-tooth.tsx b/frontend/src/assets/cog-tooth.tsx
new file mode 100644
index 0000000000..fe6b0f7ee9
--- /dev/null
+++ b/frontend/src/assets/cog-tooth.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+function CogTooth(): JSX.Element {
+ return (
+
+ );
+}
+
+export default CogTooth;
diff --git a/frontend/src/assets/earth.tsx b/frontend/src/assets/earth.tsx
new file mode 100644
index 0000000000..9bb022364e
--- /dev/null
+++ b/frontend/src/assets/earth.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+function Earth() {
+ return (
+
+ );
+}
+
+export default Earth;
diff --git a/frontend/src/assets/pencil.tsx b/frontend/src/assets/pencil.tsx
new file mode 100644
index 0000000000..0fab584440
--- /dev/null
+++ b/frontend/src/assets/pencil.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+function Pencil() {
+ return (
+
+ );
+}
+
+export default Pencil;
diff --git a/frontend/src/components/BannerSettings.tsx b/frontend/src/components/BannerSettings.tsx
deleted file mode 100644
index 98eb7a049b..0000000000
--- a/frontend/src/components/BannerSettings.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { ChangeEvent, useEffect, useState } from "react";
-import {
- INITIAL_AGENTS,
- INITIAL_MODELS,
- changeAgent,
- changeModel,
- fetchAgents,
- fetchModels,
-} from "../services/settingsService";
-import "./css/BannerSettings.css";
-
-function ModelSelect(): JSX.Element {
- const [models, setModels] = useState
-
-
-
-
- OpenDevin Workspace
-
-
-
-
- {TAB_OPTIONS.map((tab) => (
- setActiveTab(tab)}
- />
- ))}
-
- {/* Keep terminal permanently open - see component for more details */}
-
+
+
+
-
- );
-}
-
-export default BannerSettings;
diff --git a/frontend/src/components/Browser.tsx b/frontend/src/components/Browser.tsx
index 51e41a51dd..261fe14264 100644
--- a/frontend/src/components/Browser.tsx
+++ b/frontend/src/components/Browser.tsx
@@ -1,12 +1,11 @@
import React from "react";
-import "./css/Browser.css";
import { useSelector } from "react-redux";
import { RootState } from "../store";
function Browser(): JSX.Element {
const url = useSelector((state: RootState) => state.browser.url);
return (
-
+
diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx
index 8d3575266e..f2eceae0b1 100644
--- a/frontend/src/components/ChatInterface.tsx
+++ b/frontend/src/components/ChatInterface.tsx
@@ -1,11 +1,11 @@
-import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
+import { Card, CardBody } from "@nextui-org/react";
import assistantAvatar from "../assets/assistant-avatar.png";
import userAvatar from "../assets/user-avatar.png";
import { sendChatMessage } from "../services/chatService";
import { RootState } from "../store";
-import "./css/ChatInterface.css";
-import { changeDirectory as sendChangeDirectorySocketMessage } from "../services/settingsService";
+import CogTooth from "../assets/cog-tooth";
function MessageList(): JSX.Element {
const messagesEndRef = useRef(null);
@@ -16,18 +16,20 @@ function MessageList(): JSX.Element {
}, [messages]);
return (
-
{url}
+
{messages.map((msg, index) => (
-
+
-
+ {msg.content}
+
))}
@@ -38,51 +40,22 @@ function MessageList(): JSX.Element {
function InitializingStatus(): JSX.Element {
return (
-
{msg.content}
+
- 
+ ) {
- setEditing(true);
- setDirectory(e.target.value);
- }
-
- return (
-
+
);
}
-function DirectoryInput(): JSX.Element {
- const [editing, setEditing] = useState(false);
- const [directory, setDirectory] = useState("Default");
-
- function save() {
- setEditing(false);
- sendChangeDirectorySocketMessage(directory);
- }
-
- function onDirectoryInputChange(e: ChangeEventInitializing agent (may take up to 10 seconds)...
-
-
-
-
- );
+interface Props {
+ setSettingOpen: (isOpen: boolean) => void;
}
-function ChatInterface(): JSX.Element {
+function ChatInterface({ setSettingOpen }: Props): JSX.Element {
const { initialized } = useSelector((state: RootState) => state.task);
const [inputMessage, setInputMessage] = useState("");
@@ -94,13 +67,22 @@ function ChatInterface(): JSX.Element {
};
return (
-
-
+
+
+
{initialized ? setSettingOpen(true)}
+ >
+
+
-
+
+
diff --git a/frontend/src/components/CodeEditor.tsx b/frontend/src/components/CodeEditor.tsx
index b5a157e7d9..c28307cd71 100644
--- a/frontend/src/components/CodeEditor.tsx
+++ b/frontend/src/components/CodeEditor.tsx
@@ -1,26 +1,43 @@
import React from "react";
-import Editor from "@monaco-editor/react";
+import Editor, { Monaco } from "@monaco-editor/react";
import { useSelector } from "react-redux";
+import type { editor } from "monaco-editor";
import { RootState } from "../store";
function CodeEditor(): JSX.Element {
const code = useSelector((state: RootState) => state.code.code);
+ const bgColor = getComputedStyle(document.documentElement)
+ .getPropertyValue("--bg-workspace")
+ .trim();
+
+ const handleEditorDidMount = (
+ editor: editor.IStandaloneCodeEditor,
+ monaco: Monaco,
+ ) => {
+ // 定义一个自定义主题
+ monaco.editor.defineTheme("my-theme", {
+ base: "vs-dark",
+ inherit: true,
+ rules: [],
+ colors: {
+ "editor.background": bgColor,
+ },
+ });
+
+ // 应用自定义主题
+ monaco.editor.setTheme("my-theme");
+ };
+
return (
-
setInputMessage(e.target.value)}
placeholder="Send a message (won't interrupt the Assistant)"
@@ -112,10 +94,11 @@ function ChatInterface(): JSX.Element {
/>
+
+
+
-
+
,
);
diff --git a/frontend/src/socket/actions.ts b/frontend/src/socket/actions.ts
index 77ae1c7841..3b32142724 100644
--- a/frontend/src/socket/actions.ts
+++ b/frontend/src/socket/actions.ts
@@ -1,5 +1,5 @@
import store from "../store";
-import { ActionMessage } from "./types/Message";
+import { ActionMessage } from "../types/Message";
import { setScreenshotSrc, setUrl } from "../state/browserSlice";
import { appendAssistantMessage } from "../state/chatSlice";
import { setCode } from "../state/codeSlice";
diff --git a/frontend/src/socket/observations.ts b/frontend/src/socket/observations.ts
index 3d93859cdd..ba577065d7 100644
--- a/frontend/src/socket/observations.ts
+++ b/frontend/src/socket/observations.ts
@@ -1,6 +1,6 @@
import { appendAssistantMessage } from "../state/chatSlice";
import store from "../store";
-import { ObservationMessage } from "./types/Message";
+import { ObservationMessage } from "../types/Message";
export function handleObservationMessage(message: ObservationMessage) {
store.dispatch(appendAssistantMessage(message.message));
diff --git a/frontend/src/socket/socket.ts b/frontend/src/socket/socket.ts
index 748f28566d..694f4315e6 100644
--- a/frontend/src/socket/socket.ts
+++ b/frontend/src/socket/socket.ts
@@ -1,5 +1,5 @@
import store from "../store";
-import { ActionMessage, ObservationMessage } from "./types/Message";
+import { ActionMessage, ObservationMessage } from "../types/Message";
import { appendError } from "../state/errorsSlice";
import { handleActionMessage } from "./actions";
import { handleObservationMessage } from "./observations";
diff --git a/frontend/src/socket/types/ActionType.tsx b/frontend/src/types/ActionType.tsx
similarity index 100%
rename from frontend/src/socket/types/ActionType.tsx
rename to frontend/src/types/ActionType.tsx
diff --git a/frontend/src/socket/types/Message.tsx b/frontend/src/types/Message.tsx
similarity index 100%
rename from frontend/src/socket/types/Message.tsx
rename to frontend/src/types/Message.tsx
diff --git a/frontend/src/socket/types/ObservationType.tsx b/frontend/src/types/ObservationType.tsx
similarity index 100%
rename from frontend/src/socket/types/ObservationType.tsx
rename to frontend/src/types/ObservationType.tsx
diff --git a/frontend/src/types/TabOption.tsx b/frontend/src/types/TabOption.tsx
new file mode 100644
index 0000000000..ea1d29a911
--- /dev/null
+++ b/frontend/src/types/TabOption.tsx
@@ -0,0 +1,21 @@
+enum TabOption {
+ TERMINAL = "terminal",
+ PLANNER = "planner",
+ CODE = "code",
+ BROWSER = "browser",
+}
+
+type TabType =
+ | TabOption.TERMINAL
+ | TabOption.PLANNER
+ | TabOption.CODE
+ | TabOption.BROWSER;
+
+const AllTabs = [
+ TabOption.TERMINAL,
+ TabOption.PLANNER,
+ TabOption.CODE,
+ TabOption.BROWSER,
+];
+
+export { AllTabs, TabOption, type TabType };
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 9286443d8f..431c9e6094 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,12 +1,23 @@
/** @type {import('tailwindcss').Config} */
+const {nextui} = require("@nextui-org/react");
export default {
- content: ['./src/**/*.{js,ts,jsx,tsx}'],
+ content: [
+ './src/**/*.{js,ts,jsx,tsx}',
+ "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
+ ],
theme: {
- extend: {},
+ extend: {
+ colors: {
+ 'bg-dark': 'var(--bg-dark)',
+ 'bg-light': 'var(--bg-light)',
+ 'bg-input': 'var(--bg-input)',
+ 'bg-workspace': 'var(--bg-workspace)'
+ },
+ },
},
- daisyui: {
- themes: ["dark"],
- },
- plugins: [require('daisyui')],
+ darkMode: "class",
+ plugins: [nextui({
+ defaultTheme: "dark"
+ })],
}
Current Focus: Set up the development environment according to the project's instructions.
--
-
-
+
-
+
- - Clone the repository and review the README for project setup - instructions. + + Clone the repository and review the README for project setup + instructions. + -
- +
- - Identify the package manager and install necessary dependencies. + + Identify the package manager and install necessary dependencies. + -
- +
- - Set up the development environment according to the project's - instructions. + + Set up the development environment according to the project's + instructions. + {/* Add more tasks */}
+ + ); +} + +export default SettingModal; diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx index a28fa66cbb..bf74f2b79e 100644 --- a/frontend/src/components/Terminal.tsx +++ b/frontend/src/components/Terminal.tsx @@ -41,19 +41,19 @@ class JsonWebsocketAddon { } } -type TerminalProps = { - hidden: boolean; -}; - /** * The terminal's content is set by write messages. To avoid complicated state logic, * we keep the terminal persistently open as a child of+ <> + ++ Configuration + ++ setWorkspaceDirectory(e.target.value)} + /> + + + +({ + label: v, + value: v, + }))} + label="Model" + placeholder="Select a model" + defaultSelectedKey={model} + // className="max-w-xs" + onSelectionChange={(key) => { + setModel(key as string); + }} + onKeyDown={(e: KeyboardEvent) => e.continuePropagation()} + defaultFilter={customFilter} + > + {(item: { label: string; value: string }) => ( + + ++ {item.label} + + )} +({ + label: v, + value: v, + }))} + label="Agent" + placeholder="Select a agent" + defaultSelectedKey={agent} + // className="max-w-xs" + onSelectionChange={(key) => { + setAgent(key as string); + }} + onKeyDown={(e: KeyboardEvent) => e.continuePropagation()} + defaultFilter={customFilter} + > + {(item: { label: string; value: string }) => ( + ++ {item.label} + + )} ++ + + + +and hidden when not in use. */ -function Terminal({ hidden }: TerminalProps): JSX.Element { +function Terminal(): JSX.Element { const terminalRef = useRef (null); useEffect(() => { + const bgColor = getComputedStyle(document.documentElement) + .getPropertyValue("--bg-workspace") + .trim(); + const terminal = new XtermTerminal({ // This value is set to the appropriate value by the // `fitAddon.fit()` call below. @@ -63,6 +63,9 @@ function Terminal({ hidden }: TerminalProps): JSX.Element { cols: 0, fontFamily: "Menlo, Monaco, 'Courier New', monospace", fontSize: 14, + theme: { + background: bgColor, + }, }); terminal.write("$ "); @@ -85,17 +88,7 @@ function Terminal({ hidden }: TerminalProps): JSX.Element { }; }, []); - return ( - - ); + return ; } export default Terminal; diff --git a/frontend/src/components/Workspace.tsx b/frontend/src/components/Workspace.tsx new file mode 100644 index 0000000000..cba64e60a8 --- /dev/null +++ b/frontend/src/components/Workspace.tsx @@ -0,0 +1,71 @@ +import React, { useState } from "react"; +import { Tab, Tabs } from "@nextui-org/react"; +import Terminal from "./Terminal"; +import Planner from "./Planner"; +import CodeEditor from "./CodeEditor"; +import Browser from "./Browser"; +import { TabType, TabOption, AllTabs } from "../types/TabOption"; +import CmdLine from "../assets/cmd-line"; +import Calendar from "../assets/calendar"; +import Earth from "../assets/earth"; +import Pencil from "../assets/pencil"; + +const tabData = { + [TabOption.TERMINAL]: { + name: "Terminal", + icon: , + component: , + }, + [TabOption.PLANNER]: { + name: "Planner", + icon: , + component: , + }, + [TabOption.CODE]: { + name: "Code Editor", + icon: , + component: , + }, + [TabOption.BROWSER]: { + name: "Browser", + icon: , + component: , + }, +}; + +function Workspace() { + const [activeTab, setActiveTab] = useState (TabOption.TERMINAL); + + return ( + <> + + OpenDevin Workspace ++++ } + /> + ))} + +{ + setActiveTab(v as TabType); + }} + > + {AllTabs.map((tab) => ( + + {tabData[tab].icon} + {tabData[tab].name} +
+ {tabData[activeTab].component}
+
+
+ );
+}
+export default Workspace;
diff --git a/frontend/src/components/css/BannerSettings.css b/frontend/src/components/css/BannerSettings.css
deleted file mode 100644
index 2036e23389..0000000000
--- a/frontend/src/components/css/BannerSettings.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.banner {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 1rem;
-}
-
-select {
- padding: 0.5rem;
- border: 0;
- border-radius: 5px;
- font-size: 1rem;
-}
diff --git a/frontend/src/components/css/Browser.css b/frontend/src/components/css/Browser.css
deleted file mode 100644
index 9663c86cc8..0000000000
--- a/frontend/src/components/css/Browser.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.mockup-browser {
- background: black;
- padding: 1rem;
- height: 90%;
- margin: 1rem;
- border-radius: 1rem;
-}
-
-.url {
- margin: 0.5rem;
- padding: 0.5rem 1rem;
- background-color: white;
- border-radius: 2rem;
- color: #252526;
-}
-.browser {
- height: 90%;
- width: 100%;
- border-radius: 2rem;
- padding: 1rem;
-}
-.url {
- margin: 0.5rem;
- padding: 0.5rem 1rem;
- width: 80%;
- background-color: white;
- border-radius: 2rem;
- color: #252526;
-}
-
-.screenshot {
- width: 100%;
- height: 96%;
- max-height: calc(90vh - 100px); /* 100px is the height of the header */
- object-fit: cover;
-}
diff --git a/frontend/src/components/css/ChatInterface.css b/frontend/src/components/css/ChatInterface.css
deleted file mode 100644
index 6f94bf36f8..0000000000
--- a/frontend/src/components/css/ChatInterface.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.chat-interface {
- display: flex;
- flex-direction: column;
- height: 100%;
- padding: 0px;
- background-color: #252526;
-}
-
-.initializing-status {
- display: flex;
- align-items: center;
- margin: auto;
- height: 100%;
-}
-
-.message-list {
- flex: 1;
- overflow-y: auto;
- padding-top: 1rem;
-}
-
-.message-layout {
- display: flex;
- margin-bottom: 10px;
-}
-.message {
- display: flex;
-}
-
-.user-message {
- display: flex;
- flex-direction: row-reverse;
- margin: 10px 10px 0 auto;
-}
-
-.user-message .message-content {
- background-color: #007acc;
-}
-
-.avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin: 0 10px;
-}
-
-.message-content {
- background-color: #333333;
- color: #fff;
- padding: 10px;
- border-radius: 5px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.input-container {
- width: 100%;
- display: flex;
- align-items: center;
- background-color: #3e3e3e;
- padding: 10px;
- border-radius: 0 0rem 1rem 1rem;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- color: #fff;
-}
-
-.button-text {
- font-size: 16px;
-}
-
-.input-box {
- border-radius: 1rem;
- background-color: #333333;
- width: 100%;
- display: flex;
-}
-.input-box input {
- flex: 1;
- padding: 10px;
- border: none;
- border-radius: 5px;
- margin: 0 10px;
- background-color: #3c3c3c;
- color: #fff;
- background-color: transparent;
- outline: transparent;
-}
-.input-box button {
- background-color: transparent;
- padding: 10px 20px;
- color: white;
- border: none;
- border-radius: 5px;
- cursor: pointer;
-}
-.input-box button:hover {
- background-color: transparent;
-}
-.custom-file-input {
- display: inline-block;
- padding: 10px 20px;
- font-size: 16px;
- font-weight: bold;
- color: white;
- background-color: rgb(62, 62, 62);
- border: none;
- border-radius: 5px;
- cursor: pointer;
-}
-
-.custom-file-input:hover {
- background-color: rgb(70, 70, 70);
-}
-
-.custom-file-input input {
- display: none;
-}
-.selected-directory {
- display: flex;
- justify-content: space-between;
- padding: 10px 20px;
- background-color: rgb(62, 62, 62);
-}
-.selected-directory > button:hover {
- text-decoration: underline;
-}
diff --git a/frontend/src/components/css/Planner.css b/frontend/src/components/css/Planner.css
deleted file mode 100644
index 7969a73534..0000000000
--- a/frontend/src/components/css/Planner.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.planner {
- background: black;
- padding: 1rem;
- height: 90%;
- margin: 1rem;
- border-radius: 1rem;
-}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ec2585e8c0..03eb3bcc04 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,12 @@
+:root {
+ --bg-dark: #1e1e1e;
+ --bg-light: #292929;
+ --bg-input: #393939;
+ --bg-workspace: #171717;
+ background-color: var(--bg-dark) !important;
+}
+
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 47515167d8..92195854da 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,7 +1,9 @@
-import React from "react";
+// import React from "react";
+import * as React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { Provider } from "react-redux";
+import { NextUIProvider } from "@nextui-org/react";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./store";
@@ -12,7 +14,9 @@ const root = ReactDOM.createRoot(
root.render(