V0.2 YouTube video

V0.2

### Version 0.2

- Features:
  - Update crewai package and add more fields to agents and tasks.
  - Add more tools:
    - ARXIV to search in scientific articles of many domains.
    - PubMed to answer questions about medicine, health, and biomedical topic.
- Improvement:
  - Update python and npm packages.
  - Some UI enhancements.
  - Add .bat and .sh files to setup and start the project easily for normal users.
  - Enhance README.md.

.gitignore

@@ -42,3 +42,6 @@ __pycache__/
 
 # PyCharm
 .idea/
+
+# Images
+agents_images/

README.md

@@ -2,8 +2,14 @@
 
 This application provides a simplified user interface for leveraging the power of CrewAI, a cutting-edge framework for orchestrating role-playing autonomous AI agents. With this app, users can streamline the process of creating and managing AI crews without the need for coding.
 
+<h3>V0.1</h3>
+
 [![CrewAI Visualizer](https://img.youtube.com/vi/ZVZucnzccpk/0.jpg)](https://www.youtube.com/watch?v=ZVZucnzccpk)
 
+<h3>V0.2</h3>
+
+[![CrewAI Visualizer](https://img.youtube.com/vi/IpGmL_EM_bY/0.jpg)](https://www.youtube.com/watch?v=IpGmL_EM_bY)
+
 ## Features
 
 - **Intuitive UI**: The app offers a user-friendly interface, allowing users to easily create and manage AI crews.
@@ -86,13 +92,6 @@ For developers:
    npm run dev
    ```
 
-   OR build the project and run the production server:
-
-   ```bash
-   npm run build
-   npm start
-   ```
-
 6. **Access the App**: Once the development server is running, access the app in your browser at `http://localhost:3000`.
 
 ## Usage

src/app/agents/page.tsx

@@ -90,7 +90,7 @@ const AgentsPage = () => {
                 i % 2 == 0 ? "lg:flex-row" : "lg:flex-row-reverse"
               } rounded overflow-hidden h-auto min-h-52 border`}
             >
-              <Image
+              <img
                 className="block max-w-72 w-full lg:w-48 flex-none bg-cover mx-auto"
                 src={agent.image ?? "/agents_images/sailor.png"}
                 alt="Agent"

src/components/inputs/mission_tasks_editor.tsx

@@ -36,6 +36,8 @@ const MissionTaskEditor: React.FC<MissionTaskEditorProps> = ({
     onMissionChange(updatedMission);
     setNewTaskName("");
     setNewTaskDescription("");
+    setNewTaskExpectedOutput("");
+    setNewTaskAgent(null);
   };
 
   const handleRemoveTask = (index: number) => {

src/components/modals/agent_modal.tsx

@@ -372,7 +372,7 @@ export default function AgentModal(props: {
                         </Button>
                       </div>
                       {selectedImage && (
-                        <Image
+                        <img
                           // @ts-ignore
                           src={selectedImage}
                           alt="Agent Image"
@@ -381,7 +381,7 @@ export default function AgentModal(props: {
                       )}
                     </>
                   ) : (
-                    <Image
+                    <img
                       src={tempAgent?.image ?? "/agents_images/sailor.png"}
                       alt="Agent Image"
                       className="w-7/12 mx-auto rounded-lg"

start_linux_mac.sh

@@ -6,4 +6,4 @@ open http://localhost:3000
 
 # Run the project
 echo "Starting development server..."
-npm start
+npm run dev

start_win.bat

@@ -1,6 +1,6 @@
 REM Run the project
 echo Starting development server...
-start call npm start
+start call npm run dev
 
 REM Wait for a few seconds to ensure the server is up and running
 timeout /t 2