-
- );
-}
diff --git a/docs/src/css/faq.css b/docs/src/css/faq.css
deleted file mode 100644
index 07bfe7b3e0ed..000000000000
--- a/docs/src/css/faq.css
+++ /dev/null
@@ -1,66 +0,0 @@
-/* faq.css */
-
-.faq-container {
- margin: auto;
- padding: 24px;
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin-bottom: 24px;
- }
-
- .faq-title {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 2rem;
- padding: 8px;
- text-transform: uppercase;
- font-weight: bold;
- }
-
- @media (min-width: 1024px) {
- .faq-title {
- font-size: 6rem;
- }
- }
-
- .faq-section {
- display: flex;
- flex-direction: column;
- gap: 8px;
- width: 100%;
- margin-bottom: 24px;
- }
-
- .faq-section-title {
- text-transform: uppercase;
- font-weight: bold;
- font-size: 2rem;
- letter-spacing: 0.1em;
- }
-
- .highlight {
- font-weight: 600;
- color: var(--logo);
- }
-
- .faq-steps ol {
- padding-left: 24px;
- }
-
- .command-box {
- display: flex;
- flex-direction: column;
- padding: 8px;
- background-color: #e0e0e0;
- border-radius: 0.375rem;
- height: 6vh;
- text-transform: uppercase;
- color: #4a5568;
- }
-
- .command-box + .command-box {
- height: 8vh;
- }
-
\ No newline at end of file
diff --git a/docs/src/css/footer.css b/docs/src/css/footer.css
index d17277367940..173ac6406711 100644
--- a/docs/src/css/footer.css
+++ b/docs/src/css/footer.css
@@ -3,12 +3,12 @@
.custom-footer {
background-color: dark;
color: white;
- height: 25vh;
+ height: 200px;
/* background: linear-gradient(to bottom, #1a1a1a, #1a1a1a); */
background: linear-gradient(to bottom, #1f2937, #000000);
}
-
+
.footer-content {
display: flex;
flex-direction: column;
@@ -17,56 +17,55 @@
padding: 8px;
height: 100%;
}
-
+
.footer-top {
display: flex;
gap: 8px;
align-items: center;
}
-
+
.footer-title {
font-weight: bold;
font-size: 1.125rem;
}
-
+
@media (min-width: 768px) {
.footer-title {
font-size: 1.875rem;
}
}
-
+
.footer-link a {
font-size: 0.875rem;
text-decoration: none;
color: gray;
transition: color 0.3s ease;
}
-
+
.footer-link a:hover {
color: white;
}
-
+
.footer-community {
text-transform: uppercase;
font-weight: 300;
}
-
+
.footer-icons {
display: flex;
gap: 24px;
font-size: 1.875rem;
}
-
+
.footer-icons a {
color:gray;
transition: color 0.3s ease;
}
-
+
.footer-icons a:hover {
color: white;
}
-
+
.footer-bottom {
text-transform: uppercase;
}
-
\ No newline at end of file
diff --git a/docs/src/css/homepageHeader.css b/docs/src/css/homepageHeader.css
index 8e1b54336176..f8dd2003d763 100644
--- a/docs/src/css/homepageHeader.css
+++ b/docs/src/css/homepageHeader.css
@@ -1,36 +1,47 @@
/* homepageHeader.css */
.homepage-header {
- height: 100vh;
- color: white;
- background: linear-gradient(to top, #64748b, #000000);
- }
-
- .header-content {
- display: flex;
- flex-direction: column;
- gap: 8px;
- align-items: center;
- padding: 24px;
- font-weight: 300;
- width: 100%;
- }
-
+ height: 800px;
+ color: white;
+ background: linear-gradient(to top, #64748b, #000000);
+}
+
+.header-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 2rem;
+ font-weight: 300;
+ width: 100%;
+}
+
+.header-title {
+ font-size: 3rem;
+}
+
+@media (min-width: 768px) {
.header-title {
- font-size: 3rem;
- }
-
- @media (min-width: 768px) {
- .header-title {
- font-size: 5rem;
- }
+ font-size: 4rem;
}
-
- .header-subtitle {
- font-size: 1.25rem;
- }
-
- .header-buttons {
- margin-top: 24px;
- }
-
\ No newline at end of file
+}
+
+.header-subtitle {
+ font-size: 1.5rem;
+}
+
+.header-links {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 10px;
+ max-width: 680px;
+}
+
+.header-links a {
+ display: inline-block;
+ transition: transform 0.2s ease-in-out;
+}
+
+.header-links a:hover {
+ transform: translateY(-2px);
+}
diff --git a/docs/src/css/welcome.css b/docs/src/css/welcome.css
deleted file mode 100644
index 731cc87c1984..000000000000
--- a/docs/src/css/welcome.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* welcome.css */
-
-.text-white {
- color: white;
- }
-
- .welcome-container {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- background: linear-gradient(to bottom, #64748b, #1f2937);
- }
-
- @media (min-width: 768px) {
- .welcome-container {
- flex-direction: row;
- background: linear-gradient(to bottom, #64748b, #1f2937);
- }
- }
-
- .welcome-logo {
- height: 45vh;
- width: 45vw;
- }
-
- @media (max-width: 640px) {
- .welcome-logo {
- height: 40vw;
- width: 40vw;
- }
- }
-
- @media (min-width: 768px) {
- .welcome-logo {
- height: auto;
- width: 350px;
- }
- }
-
- .welcome-text {
- padding: 24px;
- margin-bottom: 24px;
- font-weight: 300;
- font-size: 1.125rem;
- }
-
- @media (min-width: 768px) {
- .welcome-text {
- padding: 8px;
- font-size: 1.5rem;
- }
- }
diff --git a/docs/src/pages/faq.tsx b/docs/src/pages/faq.tsx
deleted file mode 100644
index c185e705f9ac..000000000000
--- a/docs/src/pages/faq.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import Layout from '@theme/Layout';
-import '../css/faq.css';
-import Translate, { translate } from '@docusaurus/Translate';
-
-export default function FAQ() {
- const githubLink = (
- GitHub
- );
- const discordLink = (
- Discord
- );
- const slackLink = (
- Slack
- );
-
- return (
-
- 
-
-
-
-
-
-
- Frequently Asked Questions
-
-
-
-
- What is OpenDevin?
-
-
-
-
-
-
- Support
-
-
-
- {`Please file a bug on {githubLink} if you notice a problem that likely affects others. If you're having trouble installing, or have general questions, reach out on {discordLink} or {slackLink}.`}
-
-
-
-
-
- How to fix a GitHub issue with OpenDevin?
-
-
-
- To fix an issue on GitHub using OpenDevin, send a prompt to OpenDevin asking it to follow
- steps like the following:
-
-
- Before you run OpenDevin, you can do:
-
-
- where XXX is a GitHub token that you created that has permissions to push to the OpenDevin repo. If you donโt have write permission to the OpenDevin repo, you might need to change that to:
-
-
- where USERNAME is your GitHub username.
-
-
- -
-
Read the issue https://github.com/OpenDevin/OpenDevin/issues/1611
- Clone the repository and check out a new branch
- Based on the instructions in the issue description, modify files to fix the issue
- Push the resulting output to GitHub using the GITHUB_TOKEN environment variable
- Tell me the link that I need to go to to send a pull request
-
- export SANDBOX_ENV_GITHUB_TOKEN=XXX
-
-
- Push the resulting output to my fork at https://github.com/USERNAME/OpenDevin/ using the GITHUB_TOKEN environment variable
-
-
-
-
- How is OpenDevin different from Devin?
-
-
-
-
-
- How is OpenDevin different from ChatGPT?
-
-
-
{title}
-{summary}
-{description}
+{summary}
-
+
-
- {
},
});
- expect(screen.getByText("https://example.com")).toBeInTheDocument();
+ expect(screen.getByRole("textbox")).toHaveValue("https://example.com");
expect(screen.getByAltText(/browser screenshot/i)).toBeInTheDocument();
});
});
diff --git a/frontend/src/components/Browser.tsx b/frontend/src/components/Browser.tsx
index 891aee45ec6b..89cd700ed341 100644
--- a/frontend/src/components/Browser.tsx
+++ b/frontend/src/components/Browser.tsx
@@ -1,17 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { IoIosGlobe } from "react-icons/io";
import { useSelector } from "react-redux";
import { I18nKey } from "#/i18n/declaration";
import { RootState } from "#/store";
+import { updateBrowserTabUrl } from "#/services/browseService";
function Browser(): JSX.Element {
const { t } = useTranslation();
-
const { url, screenshotSrc } = useSelector(
(state: RootState) => state.browser,
);
+ const [editableUrl, setEditableUrl] = useState(url);
+
+ const handleUrlChange = (e: React.ChangeEvent) => {
+ setEditableUrl(e.target.value);
+ };
+
+ const handleURLBar = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter") {
+ updateBrowserTabUrl(editableUrl);
+ }
+ };
+
const imgSrc =
screenshotSrc && screenshotSrc.startsWith("data:image/png;base64,")
? screenshotSrc
@@ -20,7 +32,13 @@ function Browser(): JSX.Element {
return (
- {url}
+
{screenshotSrc ? (
diff --git a/frontend/src/components/Resizable.tsx b/frontend/src/components/Resizable.tsx
index 4d7663e45963..5bdc98afb2d8 100644
--- a/frontend/src/components/Resizable.tsx
+++ b/frontend/src/components/Resizable.tsx
@@ -25,49 +25,58 @@ export function Container({
orientation,
initialSize,
}: ContainerProps): JSX.Element {
- const [firstSize, setFirstSize] = useState(initialSize);
- const [dividerPosition, setDividerPosition] = useState(
- undefined,
- );
+ const [firstSize, setFirstSize] = useState(initialSize);
+ const [dividerPosition, setDividerPosition] = useState(null);
const firstRef = useRef(null);
useEffect(() => {
- if (firstRef.current !== null) {
- if (orientation === Orientation.HORIZONTAL) {
- firstRef.current.style.width = `${firstSize}px`;
- } else {
- firstRef.current.style.height = `${firstSize}px`;
- }
+ if (dividerPosition == null || !firstRef.current) {
+ return undefined;
}
- }, [firstSize, orientation]);
-
- const onMouseMove = (e: MouseEvent) => {
- e.preventDefault();
- if (firstSize && dividerPosition) {
- if (orientation === Orientation.HORIZONTAL) {
- const newLeftWidth = firstSize + e.clientX - dividerPosition;
- setDividerPosition(e.clientX);
- setFirstSize(newLeftWidth);
- } else {
- const newTopHeight = firstSize + e.clientY - dividerPosition;
- setDividerPosition(e.clientY);
- setFirstSize(newTopHeight);
+ const getFirstSizeFromEvent = (e: MouseEvent) => {
+ const position =
+ orientation === Orientation.HORIZONTAL ? e.clientX : e.clientY;
+ return firstSize + position - dividerPosition;
+ };
+ const onMouseMove = (e: MouseEvent) => {
+ e.preventDefault();
+ const newFirstSize = getFirstSizeFromEvent(e);
+ const { current } = firstRef;
+ if (current) {
+ if (orientation === Orientation.HORIZONTAL) {
+ current.style.width = `${newFirstSize}px`;
+ } else {
+ current.style.height = `${newFirstSize}px`;
+ }
}
- }
- };
-
- const onMouseUp = () => {
- document.removeEventListener("mousemove", onMouseMove);
- document.removeEventListener("mouseup", onMouseUp);
- };
+ };
+ const onMouseUp = (e: MouseEvent) => {
+ e.preventDefault();
+ setFirstSize(getFirstSizeFromEvent(e));
+ setDividerPosition(null);
+ document.removeEventListener("mousemove", onMouseMove);
+ document.removeEventListener("mouseup", onMouseUp);
+ };
+ document.addEventListener("mousemove", onMouseMove);
+ document.addEventListener("mouseup", onMouseUp);
+ return () => {
+ document.removeEventListener("mousemove", onMouseMove);
+ document.removeEventListener("mouseup", onMouseUp);
+ };
+ }, [dividerPosition, firstSize, orientation]);
const onMouseDown = (e: React.MouseEvent) => {
e.preventDefault();
- setDividerPosition(
- orientation === Orientation.HORIZONTAL ? e.clientX : e.clientY,
- );
- document.addEventListener("mousemove", onMouseMove);
- document.addEventListener("mouseup", onMouseUp);
+ const position =
+ orientation === Orientation.HORIZONTAL ? e.clientX : e.clientY;
+ setDividerPosition(position);
+ };
+
+ const getStyleForFirst = () => {
+ if (orientation === Orientation.HORIZONTAL) {
+ return { width: `${firstSize}px` };
+ }
+ return { height: `${firstSize}px` };
};
return (
@@ -77,7 +86,7 @@ export function Container({
className,
)}
>
-
+
{firstChild}
{
diff --git a/frontend/src/components/chat/ChatInput.test.tsx b/frontend/src/components/chat/ChatInput.test.tsx
index 02b786308077..6447ff531209 100644
--- a/frontend/src/components/chat/ChatInput.test.tsx
+++ b/frontend/src/components/chat/ChatInput.test.tsx
@@ -55,7 +55,7 @@ describe("ChatInput", () => {
await user.type(textarea, "Hello, world!");
await user.click(button);
- expect(onSendMessage).toHaveBeenCalledWith("Hello, world!");
+ expect(onSendMessage).toHaveBeenCalledWith("Hello, world!", "", []);
// Additionally, check if it was called exactly once
expect(onSendMessage).toHaveBeenCalledTimes(1);
});
@@ -68,7 +68,7 @@ describe("ChatInput", () => {
await user.type(textarea, "Hello, world!");
await user.keyboard("{Enter}");
- expect(onSendMessage).toHaveBeenCalledWith("Hello, world!");
+ expect(onSendMessage).toHaveBeenCalledWith("Hello, world!", "", []);
});
it("should NOT send a message when shift + enter is pressed", async () => {
diff --git a/frontend/src/components/chat/ChatInput.tsx b/frontend/src/components/chat/ChatInput.tsx
index c92dddd1c1d5..270da3b94915 100644
--- a/frontend/src/components/chat/ChatInput.tsx
+++ b/frontend/src/components/chat/ChatInput.tsx
@@ -1,26 +1,48 @@
import { Textarea } from "@nextui-org/react";
import React from "react";
import { useTranslation } from "react-i18next";
-import { VscArrowUp } from "react-icons/vsc";
+import { VscArrowUp, VscFileMedia } from "react-icons/vsc";
import { twMerge } from "tailwind-merge";
import { I18nKey } from "#/i18n/declaration";
interface ChatInputProps {
disabled?: boolean;
- onSendMessage: (message: string) => void;
+ onSendMessage: (
+ message: string,
+ dispatchContent?: string,
+ image_urls?: string[],
+ ) => void;
}
function ChatInput({ disabled = false, onSendMessage }: ChatInputProps) {
const { t } = useTranslation();
const [message, setMessage] = React.useState("");
+ const [files, setFiles] = React.useState([]);
// This is true when the user is typing in an IME (e.g., Chinese, Japanese)
const [isComposing, setIsComposing] = React.useState(false);
- const handleSendChatMessage = () => {
+ const convertImageToBase64 = (file: File): Promise =>
+ new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ resolve(reader.result as string);
+ };
+ reader.onerror = reject;
+ reader.readAsDataURL(file);
+ });
+
+ const handleSendChatMessage = async () => {
if (message.trim()) {
- onSendMessage(message);
+ let base64images: string[] = [];
+ if (files.length > 0) {
+ base64images = await Promise.all(
+ files.map((file) => convertImageToBase64(file)),
+ );
+ }
+ onSendMessage(message, "", base64images);
setMessage("");
+ setFiles([]);
}
};
@@ -33,6 +55,33 @@ function ChatInput({ disabled = false, onSendMessage }: ChatInputProps) {
}
};
+ const handleFileChange = (event: React.ChangeEvent) => {
+ if (event.target.files) {
+ setFiles((prev) => [...prev, ...Array.from(event.target.files!)]);
+ }
+ };
+
+ const removeFile = (index: number) => {
+ setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+ };
+
+ const handlePaste = (event: React.ClipboardEvent) => {
+ const clipboardItems = Array.from(event.clipboardData.items);
+ const pastedFiles: File[] = [];
+ clipboardItems.forEach((item) => {
+ if (item.type.startsWith("image/")) {
+ const file = item.getAsFile();
+ if (file) {
+ pastedFiles.push(file);
+ }
+ }
+ });
+ if (pastedFiles.length > 0) {
+ setFiles((prevFiles) => [...prevFiles, ...pastedFiles]);
+ event.preventDefault();
+ }
+ };
+
return (