Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Frontend refactor #917

Merged
merged 10 commits into from
Jul 29, 2023
Merged

Frontend refactor #917

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5c7d1fa
Toolkits.js refactor
jedan2506 Jul 29, 2023
cea3e57
Toolkits.js refactor
jedan2506 Jul 29, 2023
5604d25
Toolkits.js refactoring done
jedan2506 Jul 29, 2023
518d327
Agents.js refactoring done
jedan2506 Jul 29, 2023
3be9a1f
Minor Changes
jedan2506 Jul 29, 2023
8ea5f66
Knowledge.js refactoring on way
jedan2506 Jul 29, 2023
3fbefe4
ResourceManager.js refactoring on way
jedan2506 Jul 29, 2023
a96e803
ResourceList.js refactoring on way
jedan2506 Jul 29, 2023
e5838c0
ResourceList.js refactoring on way
jedan2506 Jul 29, 2023
89ca09f
TopBar.js refactoring done
jedan2506 Jul 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 10 additions & 23 deletions gui/pages/Content/Agents/Agents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import React from 'react';
import Image from "next/image";
import styles from './Agents.module.css';
import 'react-toastify/dist/ReactToastify.css';
import {createInternalId} from "@/utils/utils";

export default function Agents({sendAgentData, agents}) {
return (<>
<div className={styles.container}>
<div className={styles.title_box}>
<p className={styles.title_text}>Agents</p>
</div>
<div className={styles.wrapper} style={{marginBottom: '10px', marginTop: '4px'}}>
<button style={{width: '100%'}} className="secondary_button" onClick={() => sendAgentData({
<div className="container">
<p className="text_14 mt_8 mb_12 ml_8">Agents</p>
<div className="w_100 mb_10">
<button className="secondary_button w_100" onClick={() => sendAgentData({
id: -1,
name: "new agent",
contentType: "Create_Agent",
Expand All @@ -21,27 +18,17 @@ export default function Agents({sendAgentData, agents}) {
</button>
</div>

{agents && agents.length > 0 ? <div className={styles.wrapper} style={{overflowY: 'scroll', height: '80vh'}}>
{agents && agents.length > 0 ? <div className="vertical_selection_scroll w_100">
{agents.map((agent, index) => (
<div key={index}>
<div className={styles.agent_box} onClick={() => sendAgentData(agent)}>
{agent?.is_running &&
<div className={styles.agent_active}><Image width={14} height={14} style={{mixBlendMode: 'exclusion'}}
src="/images/loading.gif" alt="active-icon"/></div>}
<div style={{display: 'flex', height: '15px'}}>
<div className={styles.text_block}><span className={styles.agent_text}>{agent.name}</span></div>
{agent?.is_scheduled &&
<div style={{marginLeft: '8px'}}><Image style={{paddingBottom: '12px'}} width={20} height={28}
src="/images/event_repeat.svg" alt="check-icon"/></div>}
</div>
<div className="agent_box w_100" onClick={() => sendAgentData(agent)}>
{agent?.is_running && <Image width={14} height={14} className="mix_blend_mode" src="/images/loading.gif" alt="active-icon"/>}
<div className="text_ellipsis"><span className="agent_text text_ellipsis">{agent.name}</span></div>
{agent?.is_scheduled && <Image className="ml_4" width={17} height={17} src="/images/event_repeat.svg" alt="check-icon"/>}
</div>
</div>
))}
</div> : <div style={{
marginTop: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center'
}} className="form_label">
No Agents found
</div>}
</div> : <div className="form_label mt_20 horizontal_container justify_center">No Agents found</div>}
</div>
</>
);
Expand Down
34 changes: 0 additions & 34 deletions gui/pages/Content/Agents/Agents.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,47 +26,13 @@
width: 100%;
}

.agent_box {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 8px;
gap: 6px;
border-radius: 8px;
flex: none;
order: 0;
flex-grow: 0;
cursor: pointer;
}

.agent_box:hover {
background-color: #494856;
}

.agent_active {
display: flex;
flex-direction: row;
align-items: center;
padding: 0;
}

.agent_text {
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
align-items: center;
color: white;
flex: none;
order: 1;
flex-grow: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}

.text_block {
display:flex;
display: -webkit-box;
Expand Down
19 changes: 6 additions & 13 deletions gui/pages/Content/Knowledge/Knowledge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,10 @@ import {createInternalId} from "@/utils/utils";
export default function Knowledge({sendKnowledgeData, knowledge}) {
return (
<>
<div className={styles1.container}>
<div className={styles1.title_box}>
<p className={styles1.title_text}>Knowledges</p>
</div>
<div className={styles1.wrapper} style={{marginBottom: '10px', marginTop: '4px'}}>
<button style={{width: '100%'}} className="secondary_button" onClick={() => sendKnowledgeData({
<div className="container">
<p className="text_14 mt_8 mb_12 ml_8">Knowledges</p>
<div className="w_100 mb_10">
<button className="secondary_button w_100" onClick={() => sendKnowledgeData({
id: -6,
name: "new knowledge",
contentType: "Add_Knowledge",
Expand All @@ -23,7 +21,7 @@ export default function Knowledge({sendKnowledgeData, knowledge}) {
</div>

{knowledge && knowledge.length > 0 ? (
<div style={{overflowY: 'scroll', height: '80vh'}}>
<div className="vertical_selection_scroll">
<div className={styles.tool_container}>
{knowledge.map((item, index) => (
<div key={index} className={styles.tool_box} onClick={() => sendKnowledgeData({
Expand All @@ -48,12 +46,7 @@ export default function Knowledge({sendKnowledgeData, knowledge}) {
)}
</div>
</div>
) : (
<div style={{
marginTop: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center'
}} className="form_label">
No Knowledge found
</div>
) : (<div className="form_label mt_20 horizontal_container justify_center">No Knowledge found</div>
)}
</div>
</>
Expand Down
57 changes: 22 additions & 35 deletions gui/pages/Content/Toolkits/Toolkits.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
import React from 'react';
import Image from "next/image";
import styles from './Tool.module.css';
import styles1 from '../Agents/Agents.module.css'
import {createInternalId, returnToolkitIcon, excludedToolkits} from "@/utils/utils";

export default function Toolkits({sendToolkitData, toolkits, env}) {
return (
<>
<div className={styles1.container}>
<div className={styles1.title_box}>
<p className={styles1.title_text}>Toolkits</p>
</div>
{env !== 'PROD' && <div className={styles1.wrapper} style={{marginBottom: '10px', marginTop: '4px'}}>
<button style={{width: '100%'}} className="secondary_button" onClick={() => sendToolkitData({
<div className="container">
<p className="text_14 mt_8 mb_12 ml_8">Toolkits</p>
{env !== 'PROD' && <div className="w_100 mb_10">
<button className="secondary_button w_100" onClick={() => sendToolkitData({
id: -2,
name: "new tool",
contentType: "Add_Toolkit",
Expand All @@ -22,38 +18,29 @@ export default function Toolkits({sendToolkitData, toolkits, env}) {
</button>
</div>}
{toolkits && toolkits.length > 0 ? (
<div style={{overflowY: 'scroll', height: '80vh'}}>
<div className={styles.tool_container}>
{toolkits.map((tool, index) =>
tool.name !== null && !excludedToolkits().includes(tool.name) && (
<div key={index} className={styles.tool_box} onClick={() => sendToolkitData(tool)}>
<div className="row">
<div className="col-12">
<div
style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: '5px'}}>
<div>
<Image className={styles.image_class} style={{background: 'black'}} width={30} height={30}
src={returnToolkitIcon(tool.name)}
alt="tool-icon"/>
</div>
<div style={{marginLeft: '8px'}}>
<div className={styles.tool_name}>{tool.name}</div>
<div className={styles.tool_publisher}>by SuperAGI</div>
</div>
</div>
<div className="vertical_selection_scroll">
{toolkits.map((tool, index) =>
tool.name !== null && !excludedToolkits().includes(tool.name) && (
<div key={index} className="item_box mb_10" onClick={() => sendToolkitData(tool)}>
<div className="row">
<div className="col-12">
<div className="item_container padding_5">
<Image className="image_class bg_black" width={30} height={30}
src={returnToolkitIcon(tool.name)}
alt="tool-icon"/>
<div className="ml_8">
<div className="item_name">{tool.name}</div>
<div className="item_publisher">by SuperAGI</div>
</div>
</div>
</div>
)
)}
</div>
</div>
</div>
)
)}
</div>
) : (
<div style={{
marginTop: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center'
}} className="form_label">
No Toolkits found
</div>
<div className="form_label mt_20 horizontal_container justify_center">No Toolkits found</div>
)}
</div>
</>
Expand Down
Loading