Knowledge frontend

gui/pages/Content/Agents/AgentCreate.js

@@ -2,7 +2,6 @@ import React, {useState, useEffect, useRef} from 'react';
 import Image from "next/image";
 import {ToastContainer, toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import styles from './Agents.module.css';
 import {
   createAgent,
   editAgentTemplate,
@@ -20,10 +19,23 @@ import {
   setLocalStorageArray, returnResourceIcon, getUserTimezone, createInternalId,preventDefault,excludedToolkits
 } from "@/utils/utils";
 import {EventBus} from "@/utils/eventBus";
+import styles from "@/pages/Content/Agents/Agents.module.css";
+import styles1 from "@/pages/Content/Knowledge/Knowledge.module.css";
 import 'moment-timezone';
 import AgentSchedule from "@/pages/Content/Agents/AgentSchedule";
 
-export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgents, toolkits, organisationId, template, internalId, env}) {
+export default function AgentCreate({
+                                      sendAgentData,
+                                      knowledge,
+                                      selectedProjectId,
+                                      fetchAgents,
+                                      toolkits,
+                                      organisationId,
+                                      template,
+                                      internalId,
+                                      sendKnowledgeData,
+                                      env
+                                    }) {
   const [advancedOptions, setAdvancedOptions] = useState(false);
   const [agentName, setAgentName] = useState("");
   const [agentTemplateId, setAgentTemplateId] = useState(null);
@@ -71,6 +83,11 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
   const rollingRef = useRef(null);
   const [rollingDropdown, setRollingDropdown] = useState(false);
 
+  const [selectedKnowledge, setSelectedKnowledge] = useState('');
+  const [selectedKnowledgeId, setSelectedKnowledgeId] = useState(null);
+  const knowledgeRef = useRef(null);
+  const [knowledgeDropdown, setKnowledgeDropdown] = useState(false);
+
   const databases = ["Pinecone"]
   const [database, setDatabase] = useState(databases[0]);
   const databaseRef = useRef(null);
@@ -185,6 +202,10 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
         setRollingDropdown(false)
       }
 
+      if (knowledgeRef.current && !knowledgeRef.current.contains(event.target)) {
+        setKnowledgeDropdown(false)
+      }
+
       if (databaseRef.current && !databaseRef.current.contains(event.target)) {
         setDatabaseDropdown(false)
       }
@@ -252,6 +273,12 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
   };
 
 
+  const handleKnowledgeSelect = (index) => {
+    setLocalStorageValue("agent_knowledge_" + String(internalId), knowledge[index].name, setSelectedKnowledge);
+    setLocalStorageValue("agent_knowledge_id_" + String(internalId), knowledge[index].id, setSelectedKnowledgeId);
+    setKnowledgeDropdown(false);
+  };
+
   const handleStepChange = (event) => {
     setLocalStorageValue("agent_step_time_" + String(internalId), event.target.value, setStepTime);
   };
@@ -380,28 +407,40 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
       toast.error("Agent name can't be blank", {autoClose: 1800});
       return false;
     }
+
     if (agentDescription?.replace(/\s/g, '') === '') {
       toast.error("Agent description can't be blank", {autoClose: 1800});
       return false;
     }
+
     const isEmptyGoal = goals.some((goal) => goal.replace(/\s/g, '') === '');
     if (isEmptyGoal) {
       toast.error("Goal can't be empty", {autoClose: 1800});
       return false;
     }
+
     if (selectedTools.length <= 0) {
       toast.error("Add atleast one tool", {autoClose: 1800});
       return false;
     }
+
     if(!modelsArray.includes(model)) {
       toast.error("Your key does not have access to the selected model", {autoClose: 1800});
       return false;
     }
+
+    if (toolNames.includes('Knowledge Search') && !selectedKnowledge) {
+      toast.error("Add atleast one knowledge", {autoClose: 1800});
+      return;
+    }
+
     return true;
   }
 
   const handleAddAgent = () => {
-    if (!validateAgentData(true)) return;
+    if (!validateAgentData(true)) {
+      return;
+    }
 
     setCreateClickable(false);
 
@@ -427,7 +466,9 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
       "permission_type": permission_type,
       "LTM_DB": longTermMemory ? database : null,
       "user_timezone": getUserTimezone(),
+      "knowledge" : toolNames.includes('Knowledge Search') ? selectedKnowledgeId : null,
     };
+
     const scheduleAgentData = {
       "agent_config": agentData,
       "schedule": scheduleData,
@@ -717,8 +758,18 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
         setInput(JSON.parse(agent_files));
       }
     }
+
+    const agent_knowledge = localStorage.getItem("agent_knowledge_" + String(internalId));
+    if (agent_knowledge) {
+      setSelectedKnowledge(agent_knowledge);
+    }
   }, [internalId])
 
+  function openMarketplace() {
+    openNewTab(-4, "Marketplace", "Marketplace", false);
+    localStorage.setItem('marketplace_tab', 'market_knowledge');
+  }
+
   return (<>
     <div className="row" style={{overflowY: 'scroll', height: 'calc(100vh - 92px)'}}>
       <div className="col-3"></div>
@@ -748,7 +799,7 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
               {goals.length > 1 && <div>
                 <button className="secondary_button" style={{marginLeft: '4px', padding: '5px'}}
                         onClick={() => handleGoalDelete(index)}>
-                  <Image width={20} height={21} src="/images/close_light.svg" alt="close-icon"/>
+                  <Image width={20} height={21} src="/images/close.svg" alt="close-icon"/>
                 </button>
               </div>}
             </div>))}
@@ -772,7 +823,7 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
               {instructions.length > 1 && <div>
                 <button className="secondary_button" style={{marginLeft: '4px', padding: '5px'}}
                         onClick={() => handleInstructionDelete(index)}>
-                  <Image width={20} height={21} src="/images/close_light.svg" alt="close-icon"/>
+                  <Image width={20} height={21} src="/images/close.svg" alt="close-icon"/>
                 </button>
               </div>}
             </div>))}
@@ -871,6 +922,97 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
               </div>
             </div>
           </div>
+          {toolNames.includes("Knowledge Search") && <div style={{marginTop: '5px'}}>
+            <label className={styles.form_label}>Add knowledge</label>
+            <div className="dropdown_container_search" style={{width: '100%'}}>
+              <div className="custom_select_container" onClick={() => setKnowledgeDropdown(!knowledgeDropdown)}
+                   style={selectedKnowledge ? {width: '100%'} : {width: '100%', color: '#888888'}}>
+                {selectedKnowledge || 'Select knowledge'}<Image width={20} height={21}
+                                                                src={!knowledgeDropdown ? '/images/dropdown_down.svg' : '/images/dropdown_up.svg'}
+                                                                alt="expand-icon"/>
+              </div>
+              <div>
+                {knowledgeDropdown && knowledge && knowledge.length > 0 &&
+                  <div className="custom_select_options" ref={knowledgeRef} style={{width: '100%'}}>
+                    {knowledge.map((item, index) => (
+                      <div key={index} className="custom_select_option" onClick={() => handleKnowledgeSelect(index)}
+                           style={{padding: '12px 14px', maxWidth: '100%'}}>
+                        {item.name}
+                      </div>))}
+                    <div className={styles1.knowledge_db}
+                         style={{maxWidth: '100%', borderTop: '1px solid #3F3A4E'}}>
+                      <div className="custom_select_option"
+                           style={{padding: '12px 14px', maxWidth: '100%', borderRadius: '0'}}
+                           onClick={() => sendKnowledgeData({
+                             id: -6,
+                             name: "new knowledge",
+                             contentType: "Add_Knowledge",
+                             internalId: createInternalId()
+                           })}>
+                        <Image width={15} height={15} src="/images/plus_symbol.svg" alt="add-icon"/>&nbsp;&nbsp;Add
+                        new knowledge
+                      </div>
+                    </div>
+                    <div className={styles1.knowledge_db}
+                         style={{maxWidth: '100%', borderTop: '1px solid #3F3A4E'}}>
+                      <div className="custom_select_option" style={{
+                        padding: '12px 14px',
+                        maxWidth: '100%',
+                        borderTopLeftRadius: '0',
+                        borderTopRightRadius: '0'
+                      }}
+                           onClick={openMarketplace}>
+                        <Image width={15} height={15} src="/images/widgets.svg"
+                               alt="marketplace"/>&nbsp;&nbsp;Browse knowledge from marketplace
+                      </div>
+                    </div>
+                  </div>}
+                {knowledgeDropdown && knowledge && knowledge.length <= 0 &&
+                  <div className="custom_select_options" ref={knowledgeRef}
+                       style={{width: '100%', maxHeight: '400px'}}>
+                    <div style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      marginTop: '30px',
+                      marginBottom: '20px',
+                      width: '100%'
+                    }}>
+                      <Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
+                      <span className={styles.feed_title} style={{marginTop: '8px'}}>No knowledge found</span>
+                    </div>
+                    <div className={styles1.knowledge_db}
+                         style={{maxWidth: '100%', borderTop: '1px solid #3F3A4E'}}>
+                      <div className="custom_select_option"
+                           style={{padding: '12px 14px', maxWidth: '100%', borderRadius: '0'}}
+                           onClick={() => sendKnowledgeData({
+                             id: -6,
+                             name: "new knowledge",
+                             contentType: "Add_Knowledge",
+                             internalId: createInternalId()
+                           })}>
+                        <Image width={15} height={15} src="/images/plus_symbol.svg" alt="add-icon"/>&nbsp;&nbsp;Add
+                        new knowledge
+                      </div>
+                    </div>
+                    <div className={styles1.knowledge_db}
+                         style={{maxWidth: '100%', borderTop: '1px solid #3F3A4E'}}>
+                      <div className="custom_select_option" style={{
+                        padding: '12px 14px',
+                        maxWidth: '100%',
+                        borderTopLeftRadius: '0',
+                        borderTopRightRadius: '0'
+                      }}
+                           onClick={openMarketplace}>
+                        <Image width={15} height={15} src="/images/widgets.svg"
+                               alt="marketplace"/>&nbsp;&nbsp;Browse knowledge from marketplace
+                      </div>
+                    </div>
+                  </div>}
+              </div>
+            </div>
+          </div>}
           <div style={{marginTop: '15px'}}>
             <button className="medium_toggle"
                     onClick={() => setLocalStorageValue("advanced_options_" + String(internalId), !advancedOptions, setAdvancedOptions)}
@@ -941,7 +1083,7 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
                           </div>
                           <div style={{cursor: 'pointer'}} onClick={() => removeFile(index)}><Image width={20}
                                                                                                     height={20}
-                                                                                                    src='/images/close_light.svg'
+                                                                                                    src='/images/close.svg'
                                                                                                     alt="close-icon"/>
                           </div>
                         </div>
@@ -950,7 +1092,7 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
                   </div>
                 </div>}
               </div>
-              <div style={{marginTop: '5px'}}>
+              <div style={{marginTop: '15px'}}>
                 <div><label className={styles.form_label}>Constraints</label></div>
                 {constraints.map((constraint, index) => (<div key={index} style={{
                   marginBottom: '10px',
@@ -964,7 +1106,7 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
                   <div>
                     <button className="secondary_button" style={{marginLeft: '4px', padding: '5px'}}
                             onClick={() => handleConstraintDelete(index)}>
-                      <Image width={20} height={21} src="/images/close_light.svg" alt="close-icon"/>
+                      <Image width={20} height={21} src="/images/close.svg" alt="close-icon"/>
                     </button>
                   </div>
                 </div>))}

gui/pages/Content/Agents/AgentTemplatesList.js

@@ -5,7 +5,17 @@ import {fetchAgentTemplateListLocal} from "@/pages/api/DashboardService";
 import AgentCreate from "@/pages/Content/Agents/AgentCreate";
 import {setLocalStorageValue, openNewTab} from "@/utils/utils";
 
-export default function AgentTemplatesList({sendAgentData, selectedProjectId, fetchAgents, toolkits, organisationId, internalId, env}) {
+export default function AgentTemplatesList({
+                                             sendAgentData,
+                                             knowledge,
+                                             selectedProjectId,
+                                             fetchAgents,
+                                             toolkits,
+                                             organisationId,
+                                             internalId,
+                                             sendKnowledgeData,
+                                             env
+                                           }) {
   const [agentTemplates, setAgentTemplates] = useState([])
   const [createAgentClicked, setCreateAgentClicked] = useState(false)
   const [sendTemplate, setSendTemplate] = useState(null)
@@ -103,7 +113,8 @@ export default function AgentTemplatesList({sendAgentData, selectedProjectId, fe
               </div>
             </div>}
           </div>
-        </div> : <AgentCreate internalId={internalId} organisationId={organisationId} sendAgentData={sendAgentData}
+        </div> : <AgentCreate sendKnowledgeData={sendKnowledgeData} knowledge={knowledge} internalId={internalId}
+                              organisationId={organisationId} sendAgentData={sendAgentData}
                               selectedProjectId={selectedProjectId} fetchAgents={fetchAgents} toolkits={toolkits}
                               template={sendTemplate} env={env} />}
     </div>

gui/pages/Content/Agents/AgentWorkspace.js

@@ -244,7 +244,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
           console.error('Error fetching agent data:', error);
         });
     }
-  };
+  }
 
   function fetchExecutions(agentId, currentRun = null) {
     getAgentExecutions(agentId)
@@ -280,6 +280,8 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
       .catch((error) => {
         console.error('Error saving agent as template:', error);
       });
+
+    setDropdown(false);
   }
 
   useEffect(() => {
@@ -349,10 +351,10 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
                 <Image width={14} height={14} src="/images/run_icon.svg" alt="run-icon"/>&nbsp;New Run
               </button>
             </div>
-            {<button className="secondary_button" style={{padding: '8px', height: '31px'}}
-                     onMouseEnter={() => setDropdown(true)} onMouseLeave={() => setDropdown(false)}>
+            <button className="secondary_button" style={{padding: '8px', height: '31px'}}
+                    onMouseEnter={() => setDropdown(true)} onMouseLeave={() => setDropdown(false)}>
               <Image width={14} height={14} src="/images/three_dots.svg" alt="run-icon"/>
-            </button>}
+            </button>
             {dropdown && <div onMouseEnter={() => setDropdown(true)} onMouseLeave={() => setDropdown(false)}>
               <ul className="dropdown_container" style={{marginTop: '31px', marginLeft: '-32px'}}>
                 <li className="dropdown_item" onClick={() => saveAgentTemplate()}>Save as Template</li>
@@ -492,7 +494,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
               {goals.length > 1 && <div>
                 <button className="secondary_button" style={{marginLeft: '4px', padding: '5px'}}
                         onClick={() => handleGoalDelete(index)}>
-                  <Image width={20} height={21} src="/images/close_light.svg" alt="close-icon"/>
+                  <Image width={20} height={21} src="/images/close.svg" alt="close-icon"/>
                 </button>
               </div>}
             </div>))}
@@ -515,7 +517,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
               {instructions.length > 1 && <div>
                 <button className="secondary_button" style={{marginLeft: '4px', padding: '5px'}}
                         onClick={() => handleInstructionDelete(index)}>
-                  <Image width={20} height={21} src="/images/close_light.svg" alt="close-icon"/>
+                  <Image width={20} height={21} src="/images/close.svg" alt="close-icon"/>
                 </button>
               </div>}
             </div>))}
@@ -558,4 +560,4 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
     </div>
     <ToastContainer/>
   </>);
-}
+}

gui/pages/Content/Agents/Details.js

@@ -162,6 +162,10 @@ export default function Details({agentDetails, runCount, goals, instructions, ag
         <div><Image width={15} height={15} src="/images/fact_check.svg" alt="queue-icon"/></div>
         <div style={info_text}>{agentDetails?.agent_type || ''}</div>
       </div>
+      <div className={styles.agent_info_box}>
+        <div><Image width={15} height={15} src="/images/books.svg" alt="book-icon"/></div>
+        <div style={info_text}>knowledge name</div>
+      </div>
       <div className={styles.agent_info_box}>
         <div><Image width={15} height={15} src="/images/deployed_code.svg" alt="model-icon"/></div>
         <div style={info_text}>{agentDetails?.model || ''}</div>