Merge pull request #632 from TransformerOptimus/toolkit_images

gui/pages/Content/Marketplace/EachTool.js

@@ -14,6 +14,27 @@ export default function EachTool({template, env}) {
     const [rightPanel, setRightPanel] = useState('overview')
     const [installed, setInstalled] = useState('')
     const [markdownContent, setMarkdownContent] = useState('');
+    const toolkitData = [
+        { name: 'Jira Toolkit', imageSrc: '/images/jira_icon.svg' },
+        { name: 'Email Toolkit', imageSrc: '/images/gmail_icon.svg' },
+        { name: 'Google Calendar Toolkit', imageSrc: '/images/google_calender_icon.svg' },
+        { name: 'GitHub Toolkit', imageSrc: '/images/github_icon.svg' },
+        { name: 'Google Search Toolkit', imageSrc: '/images/google_search_icon.svg' },
+        { name: 'Searx Toolkit', imageSrc: '/images/searx_icon.svg' },
+        { name: 'Slack Toolkit', imageSrc: '/images/slack_icon.svg' },
+        { name: 'Web Scrapper Toolkit', imageSrc: '/images/webscraper_icon.svg' },
+        { name: 'Twitter Toolkit', imageSrc: '/images/twitter_icon.svg' },
+        { name: 'Google SERP Toolkit', imageSrc: '/images/google_serp_icon.svg' },
+        { name: 'File Toolkit', imageSrc: '/images/filemanager_icon.svg' },
+    ];
+    const getImageSource = (name) => {
+        for (let i = 0; i < toolkitData.length; i++) {
+            if (toolkitData[i].name === name) {
+                return toolkitData[i].imageSrc;
+            }
+        }
+        return '/images/app-logo-light.png';
+    };
 
     useEffect(() => {
         setInstalled(template && template.is_installed ? 'Installed' : 'Install');
@@ -84,7 +105,7 @@ export default function EachTool({template, env}) {
                         <div className={styles2.left_container}>
                             <div style={{marginBottom: '15px'}}>
                                 <Image style={{borderRadius: '25px', background: 'black'}} width={50} height={50}
-                                       src="/images/app-logo-light.png" alt="tool-icon"/>
+                                       src={getImageSource(template.name)} alt="tool-icon"/>
                             </div>
                             <span className={styles2.top_heading}>{template.name}</span>
                             <span style={{fontSize: '12px', marginTop: '15px',}} className={styles.tool_publisher}>By SuperAGI <Image

gui/pages/Content/Toolkits/ToolkitWorkspace.js

@@ -11,6 +11,21 @@ export default function ToolkitWorkspace({toolkitDetails, internalId}){
     const [apiConfigs, setApiConfigs] = useState([]);
     const [toolsIncluded, setToolsIncluded] = useState([]);
     const [loading, setLoading] = useState(true);
+    const toolkitData = [
+        { name: 'Jira Toolkit', imageSrc: '/images/jira_icon.svg' },
+        { name: 'Email Toolkit', imageSrc: '/images/gmail_icon.svg' },
+        { name: 'Google Calendar Toolkit', imageSrc: '/images/google_calender_icon.svg' },
+        { name: 'GitHub Toolkit', imageSrc: '/images/github_icon.svg' },
+        { name: 'Google Search Toolkit', imageSrc: '/images/google_search_icon.svg' },
+        { name: 'Searx Toolkit', imageSrc: '/images/searx_icon.svg' },
+        { name: 'Slack Toolkit', imageSrc: '/images/slack_icon.svg' },
+        { name: 'Web Scrapper Toolkit', imageSrc: '/images/webscraper_icon.svg' },
+        { name: 'Twitter Toolkit', imageSrc: '/images/twitter_icon.svg' },
+        { name: 'Google SERP Toolkit', imageSrc: '/images/google_serp_icon.svg' },
+        { name: 'File Toolkit', imageSrc: '/images/filemanager_icon.svg' },
+        { name: 'CodingToolkit', imageSrc: '/images/app-logo-light.png' },
+        { name: 'Image Generation Toolkit', imageSrc: '/images/app-logo-light.png' },
+    ];
 
     let handleKeyChange = (event, index) => {
       const updatedData = [...apiConfigs];
@@ -97,11 +112,20 @@ export default function ToolkitWorkspace({toolkitDetails, internalId}){
       }
     }, [internalId]);
 
+    const getImageSource = () => {
+        for (let i = 0; i < toolkitData.length; i++) {
+            if (toolkitData[i].name === toolkitDetails.name) {
+                return toolkitData[i].imageSrc;
+            }
+        }
+        return '/images/custom_tool.svg';
+    };
+
     return (<>
         <div className={styles.tools_container}>
           <div style={{display: 'flex',justifyContent:'flex-start',marginBottom:'20px', width:'600px'}}>
             <div>
-              <Image src="/images/custom_tool.svg" alt="toolkit-icon" width={45} height={45}/>
+              <Image src={getImageSource()} alt="toolkit-icon" width={45} height={45} style={{borderRadius:'25px',background: 'black'}} />
             </div>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <div style={{ marginLeft: '15px',textAlign:'left',paddingRight:'10px' }}>

gui/pages/Content/Toolkits/Toolkits.js

@@ -7,6 +7,29 @@ import {createInternalId} from "@/utils/utils";
 
 export default function Toolkits({ sendToolkitData, toolkits, env }) {
   const excludedToolkits = ["Thinking Toolkit", "Human Input Toolkit","Resource Toolkit"];
+    const toolkitData = [
+        { name: 'Jira Toolkit', imageSrc: '/images/jira_icon.svg' },
+        { name: 'Email Toolkit', imageSrc: '/images/gmail_icon.svg' },
+        { name: 'Google Calendar Toolkit', imageSrc: '/images/google_calender_icon.svg' },
+        { name: 'GitHub Toolkit', imageSrc: '/images/github_icon.svg' },
+        { name: 'Google Search Toolkit', imageSrc: '/images/google_search_icon.svg' },
+        { name: 'Searx Toolkit', imageSrc: '/images/searx_icon.svg' },
+        { name: 'Slack Toolkit', imageSrc: '/images/slack_icon.svg' },
+        { name: 'Web Scrapper Toolkit', imageSrc: '/images/webscraper_icon.svg' },
+        { name: 'Twitter Toolkit', imageSrc: '/images/twitter_icon.svg' },
+        { name: 'Google SERP Toolkit', imageSrc: '/images/google_serp_icon.svg' },
+        { name: 'File Toolkit', imageSrc: '/images/filemanager_icon.svg' },
+        { name: 'CodingToolkit', imageSrc: '/images/app-logo-light.png' },
+        { name: 'Image Generation Toolkit', imageSrc: '/images/app-logo-light.png' },
+    ];
+    const getImageSource = (name) => {
+        for (let i = 0; i < toolkitData.length; i++) {
+            if (toolkitData[i].name === name) {
+                return toolkitData[i].imageSrc;
+            }
+        }
+        return '/images/custom_tool.svg';
+    };
 
   return (
     <>
@@ -30,7 +53,7 @@ export default function Toolkits({ sendToolkitData, toolkits, env }) {
                         <div className="col-12">
                           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: '5px' }}>
                             <div>
-                              <Image className={styles.image_class} width={30} height={30} src="/images/custom_tool.svg"
+                              <Image className={styles.image_class} style={{background: 'black'}} width={30} height={30} src={getImageSource(tool.name)}
                                      alt="tool-icon" />
                             </div>
                             <div style={{ marginLeft: '8px' }}>