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 all 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
10 changes: 5 additions & 5 deletions gui/pages/Content/Agents/ResourceList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,17 @@ export default function ResourceList({files, channel, runs}) {
)

return (
<div>
<div id="resource-list">
{channel === 'output' && (!isAnyFileWithAgentId || files.length <= 0 ?
<div className="vertical_container">
<Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
<span className={styles.feed_title} style={{marginTop: '8px'}}>No Output files!</span>
<span className="feed_title mt_8">No Output files!</span>
</div>
:
<div id="division_by_runs">
{filesByRun.map((filesRun, index) => (
<div key={filesByRun.length - index - 1}>
<div className="horizontal_container justify_space_between cursor_pointer" style={{padding: '8px 6px'}}
<div className="horizontal_container justify_space_between cursor_pointer padding_8_6"
onClick={() => setSelectedRunId(filesRun.run.id === selectedRunId ? null : filesRun.run.id)}>
<div className="horizontal_container">
<Image
Expand All @@ -60,7 +60,7 @@ export default function ResourceList({files, channel, runs}) {
</div>

{selectedRunId === filesRun.run.id && (
<div className={styles.resources} style={{padding: '2px 8px'}}>
<div className="horizontal_space_between flex_wrap padding_2_8">
{filesRun.files.map((file, index) => <File key={index} file={file}/>)}
</div>
)}
Expand All @@ -70,7 +70,7 @@ export default function ResourceList({files, channel, runs}) {
)}

{channel === 'input' &&
<div className={styles.resources}>
<div className="horizontal_space_between flex_wrap">
{files.map((file, index) => <File key={index} file={file}/>)}
</div>}
</div>
Expand Down
37 changes: 9 additions & 28 deletions gui/pages/Content/Agents/ResourceManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,39 +96,20 @@ export default function ResourceManager({agentId, runs}) {
}

return (<>
<div className={styles.detail_top} style={{height: 'auto', marginBottom: '10px'}}>
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
<div style={{display: 'flex', order: 0}}>
<div>
<button onClick={() => setChannel('input')} className={styles.tab_button} style={channel === 'input' ? {
background: '#454254',
padding: '5px 10px'
} : {background: 'transparent', padding: '5px 10px'}}>
Input
</button>
</div>
<div>
<button onClick={() => setChannel('output')} className={styles.tab_button} style={channel === 'output' ? {
background: '#454254',
padding: '5px 10px'
} : {background: 'transparent', padding: '5px 10px'}}>
Output
</button>
</div>
</div>
</div>
<div className="detail_top mb_10">
<button onClick={() => setChannel('input')} className={channel === 'input' ? 'tab_button_selected' : 'tab_button'}>Input</button>
<button onClick={() => setChannel('output')} className={channel === 'output' ? 'tab_button_selected' : 'tab_button'}>Output</button>
</div>
<div className={styles.detail_body} style={{height: 'auto'}}>
{channel === 'input' && <div style={{paddingBottom: '10px'}}>
<div className="w_100 mr_10 mb_20">
{channel === 'input' &&
<div className={`file-drop-area ${isDragging ? 'dragging' : ''}`} onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave} onDragOver={handleDragOver} onDrop={handleDrop}
onClick={handleDropAreaClick}>
<div><p style={{textAlign: 'center', color: 'white', fontSize: '14px'}}>+ Choose or drop a file here</p>
<p style={{textAlign: 'center', color: '#888888', fontSize: '12px'}}>Supported file formats are txt, pdf,
<p className="text_14 text_align_center">+ Choose or drop a file here</p>
<p className="text_12 text_align_center">Supported file formats are txt, pdf,
docx, epub, csv, pptx only</p>
<input type="file" ref={fileInputRef} style={{display: 'none'}} onChange={handleFileInputChange}/></div>
</div>
</div>}
<input type="file" ref={fileInputRef} style={{display: 'none'}} onChange={handleFileInputChange}/>
</div>}
<ResourceList files={channel === 'output' ? output : input} channel={channel} runs={runs}/>
</div>
<ToastContainer/>
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
59 changes: 0 additions & 59 deletions gui/pages/Dashboard/Dashboard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,39 +56,6 @@
margin-top: -1px;
}

.top_bar {
padding: 8px 10px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

.top_bar_section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 9px;
gap: 8px;
border-radius: 8px;
cursor: pointer;
}

.top_bar_font {
display: flex;
align-items: center;
font-style: normal;
font-weight: 400;
font-size: 12px;
color: white;
margin-left: 5px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}

.item_list {
height: 100%;
position: relative;
Expand Down Expand Up @@ -160,32 +127,6 @@
text-overflow: ellipsis;
}

.top_right {
display: flex;
flex-direction: row;
align-items: center;
width: fit-content;
order: 1;
height: 100%;
}

.top_left {
display: flex;
order: 0;
justify-content: flex-start;
align-items: center;
}

.top_right_icon {
margin-right: 10px;
cursor: pointer;
display: flex;
order: 1;
justify-content: flex-end;
align-items: center;
height: 100%;
}

.empty_state_button {
border: none;
border-radius: 8px;
Expand Down
Loading