c99b94dbe9
* Add "Copy" Button to Chat Messages
### PR Overview: Add "Copy" Button to Chat Messages
**Description:**
This PR introduces a "Copy" button to each chat message in the `ChatMessage` component. The button allows users to easily copy the content of a chat message to their clipboard. The implementation includes a button with a clipboard icon and the necessary functionality to copy the message content.
**Changes Made:**
1. **Imports:**
- Added `FaClipboard` from `react-icons/fa` for the clipboard icon.
- Added `toast` from `#utils/toast` for displaying notifications.
2. **New Functionality:**
- Implemented `copyToClipboard` function using `navigator.clipboard.writeText` to copy the message content.
- Added a button element with an `onClick` handler to trigger the `copyToClipboard` function.
3. **UI Enhancements:**
- The button is styled to match the existing UI and is placed next to the message content.
**Code Changes:**
- Modified `frontend/src/components/chat/ChatMessage.tsx` to include the new button and functionality.
**Testing:**
- Verified that clicking the "Copy" button copies the message content to the clipboard.
- Confirmed that a toast notification appears upon successful copy or failure.
**Example Code:**
```tsx
import React from "react";
import Markdown from "react-markdown";
import { twMerge } from "tailwind-merge";
import { code } from "../markdown/code";
import { FaClipboard } from "react-icons/fa";
import toast from "#/utils/toast"; // Assuming you have a toast utility for notifications
interface MessageProps {
message: Message;
}
function ChatMessage({ message }: MessageProps) {
const className = twMerge(
"markdown-body",
"p-3 text-white max-w-[90%] overflow-y-auto rounded-lg",
message.sender === "user" ? "bg-neutral-700 self-end" : "bg-neutral-500",
);
const copyToClipboard = () => {
navigator.clipboard.writeText(message.content).then(() => {
toast.info("Message copied to clipboard!");
}).catch((error) => {
toast.error(`Failed to copy message: ${error}`);
});
};
return (
<div data-testid="message" className={className}>
<div className="flex justify-between items-center">
<Markdown components={{ code }}>{message.content}</Markdown>
<button
onClick={copyToClipboard}
className="ml-2 p-1 bg-neutral-600 rounded hover:bg-neutral-500"
aria-label="Copy message"
>
<FaClipboard />
</button>
</div>
</div>
);
}
export default ChatMessage;
```
**Notes:**
- Ensure that the `react-icons` package is installed (`npm install react-icons` or `yarn add react-icons`).
- The toast utility is assumed to be available for notifications. If not, consider using an alternative notification method.
* layout enhancements; linting
---------
Co-authored-by: tobitege <tobitege@gmx.de>
Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>
OpenDevin: Code Less, Make More
Welcome to OpenDevin, a platform for autonomous software engineers, powered by AI and LLMs.
OpenDevin agents collaborate with human developers to write code, fix bugs, and ship features.
⚡ Getting Started
The easiest way to run OpenDevin is inside a Docker container. It works best with the most recent version of Docker, 26.0.0.
You must be using Linux, Mac OS, or WSL on Windows.
To start OpenDevin in a docker container, run the following commands in your terminal:
Warning
When you run the following command, files in
./workspacemay be modified or deleted.
WORKSPACE_BASE=$(pwd)/workspace
docker run -it \
--pull=always \
-e SANDBOX_USER_ID=$(id -u) \
-e WORKSPACE_MOUNT_PATH=$WORKSPACE_BASE \
-v $WORKSPACE_BASE:/opt/workspace_base \
-v /var/run/docker.sock:/var/run/docker.sock \
-p 3000:3000 \
--add-host host.docker.internal:host-gateway \
--name opendevin-app-$(date +%Y%m%d%H%M%S) \
ghcr.io/opendevin/opendevin:0.6.2
You'll find OpenDevin running at http://localhost:3000 with access to ./workspace. To have OpenDevin operate on your code, place it in ./workspace.
OpenDevin will only have access to this workspace folder. The rest of your system will not be affected as it runs in a secured docker sandbox.
🚀 Documentation
To learn more about the project, and for tips on using OpenDevin, check out our documentation.
There you'll find resources on how to use different LLM providers (like ollama and Anthropic's Claude), troubleshooting resources, and advanced configuration options.
🤝 How to Contribute
OpenDevin is a community-driven project, and we welcome contributions from everyone. Whether you're a developer, a researcher, or simply enthusiastic about advancing the field of software engineering with AI, there are many ways to get involved:
- Code Contributions: Help us develop new agents, core functionality, the frontend and other interfaces, or sandboxing solutions.
- Research and Evaluation: Contribute to our understanding of LLMs in software engineering, participate in evaluating the models, or suggest improvements.
- Feedback and Testing: Use the OpenDevin toolset, report bugs, suggest features, or provide feedback on usability.
For details, please check CONTRIBUTING.md.
🤖 Join Our Community
Whether you're a developer, a researcher, or simply enthusiastic about OpenDevin, we'd love to have you in our community. Let's make software engineering better together!
- Slack workspace - Here we talk about research, architecture, and future development.
- Discord server - This is a community-run server for general discussion, questions, and feedback.
📈 Progress
📜 License
Distributed under the MIT License. See LICENSE for more information.
📚 Cite
@misc{opendevin2024,
author = {{OpenDevin Team}},
title = {{OpenDevin: An Open Platform for AI Software Developers as Generalist Agents}},
year = {2024},
version = {v1.0},
howpublished = {\url{https://github.com/OpenDevin/OpenDevin}},
note = {Accessed: ENTER THE DATE YOU ACCESSED THE PROJECT}
}