Merge branch 'dev' of https://github.com/TransformerOptimus/SuperAGI …

…into dev

gui/package.json

@@ -30,6 +30,7 @@
     "react-grid-layout": "^1.3.4",
     "react-markdown": "^8.0.7",
     "react-spinners": "^0.13.8",
+    "react-tippy": "^1.4.0",
     "react-toastify": "^9.1.3"
   }
 }

gui/pages/Content/APM/ApmDashboard.js

@@ -8,6 +8,7 @@ import {BarGraph} from "./BarGraph.js";
 import {WidthProvider, Responsive} from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
+import { Tooltip } from 'react-tippy';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -97,6 +98,10 @@ export default function ApmDashboard() {
     return () => clearInterval(interval);
   }, []);
 
+  useEffect(() => {
+    console.log(toolsUsed)
+  }, [toolsUsed]);
+
   const handleSelectedAgent = useCallback((index, name) => {
     setDropDown1(false)
     setDropDown2(false)
@@ -279,14 +284,24 @@ export default function ApmDashboard() {
                           ))}
                           {run.tools_used && run.tools_used.length > 3 &&
                               <div style={{display:'inline-flex'}}>
-                                {(showToolTip && toolTipIndex === i) && <div className="tools_used_tooltip">
-                                  {run.tools_used.slice(3).map((tool,index) =>
-                                      <div className="tools_used" key={index}>{tool}</div>
-                                  )}
-                                </div>}
-                                <div className="tools_used cursor_pointer" onMouseEnter={() => setToolTipState(true,i)} onMouseLeave={() => setToolTipState(false,i)}>
-                                  +{run.tools_used.length - 3}
-                                </div>
+                                <Tooltip
+                                    position="top-start"
+                                    trigger="mouseenter"
+                                    arrow={true}
+                                    html={
+                                      <>
+                                        <div className="bg_primary br_8 padding_5">
+                                        {run.tools_used.slice(3).map((tool,index) =>
+                                            <div className="tools_used" key={index}>{tool}</div>
+                                        )}
+                                        </div>
+                                      </>
+                                    }
+                                >
+                                  <div className="tools_used cursor_pointer">
+                                    +{run.tools_used.length - 3}
+                                  </div>
+                                </Tooltip>
                               </div>
                           }
                         </td>

gui/pages/Content/Agents/AgentWorkspace.js

@@ -621,7 +621,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
             {!publishModalState ? <label className={styles.form_label}>Your template is under review. Please check the marketplace in 2-3 days. If your template is not visible on the marketplace, reach out to us on Discord&nbsp;
               <a href="https://discord.com/channels/1107593006032355359/1143813784683692093" target="_blank" rel="noopener noreferrer">
                 #agent-templates-submission
-              </a> channel.</label> : <label className={styles.form_label}>Before publishing your agent to the marketplace, you need to run it at least once. To do this, click the 'New Run' button (on the agent screen). Once the agent has run successfully, you can proceed to try publishing your template.</label>}
+              </a> channel.</label> : <label className={styles.form_label}>Before publishing your agent to the marketplace, you need to run it at least once. To do this, click the New Run button (on the agent screen). Once the agent has run successfully, you can proceed to try publishing your template.</label>}
           </div>
           <div className={styles.modal_buttons}>
             <button className="primary_button" onClick={() => {setPublishModal(false)}}>

gui/pages/Content/Toolkits/Metrics.js

@@ -101,7 +101,7 @@ export default function Metrics({toolName, knowledgeName}) {
             </div>
               <div className="display_column_container mt_5">
                 <span className="text_14">Call Logs</span>
-                {callLogs.length > 0 ? <div className="scrollable_container pd_bottom_5 border_radius_8 bg_none">
+                {callLogs.length > 0 ? <div className="scrollable_container pd_bottom_5 br_8 bg_none">
                   <table className="w_100 margin_0 padding_0">
                     <thead>
                     <tr className="border_top_none text_align_left border_bottom_none">

gui/pages/_app.css

@@ -907,6 +907,11 @@ p {
 
 .fw_500{font-weight: 500;}
 
+.br_4{border-radius: 4px}
+.br_5{border-radius: 5px}
+.br_6{border-radius: 6px}
+.br_8{border-radius: 8px}
+
 .text_9{
     color: #FFF;
     font-family: Inter;
@@ -1134,8 +1139,6 @@ p {
 .border_top_none{border-top: none;}
 .border_bottom_none{border-bottom: none;}
 .border_bottom_grey{border-bottom: 1px solid rgba(255, 255, 255, 0.08)}
-.border_radius_8{border-radius: 8px;}
-.border_radius_25{border-radius: 25px;}
 
 .bt_white{border-top: 1px solid rgba(255, 255, 255, 0.08);}
 
@@ -1146,8 +1149,9 @@ p {
 .lh_17{line-height: 17px;}
 .lh_18{line-height: 18px;}
 
-.padding_0{padding: 0}
+.padding_0{padding: 0;}
 .padding_5{padding: 5px;}
+.padding_6{padding: 6px;}
 .padding_8{padding: 8px;}
 .padding_10{padding: 10px;}
 .padding_12{padding: 12px;}
@@ -1376,19 +1380,6 @@ tr{
     margin: 2px;
 }
 
-.tools_used_tooltip{
-    position: absolute;
-    transform: translateX(-50%);
-    padding: 6px;
-    color: #fff;
-    font-size: 12px;
-    white-space: pre;
-    z-index: 100;
-    border-radius: 8px;
-    background: #2E293F;
-    margin-top: -40px;
-}
-
 .image_class{
     background: #FFFFFF80;
     border-radius: 20px;
@@ -1469,9 +1460,10 @@ tr{
     }
 }
 
-.bg_black{background: black}
-.bg_white{background: white}
-.bg_none{background: none}
+.bg_black{background: black;}
+.bg_white{background: white;}
+.bg_none{background: none;}
+.bg_primary{background: #2E293F;}
 
 .container {
     height: 100%;
@@ -1885,3 +1877,8 @@ tr{
     flex-direction: row;
     justify-content: center;
 }
+
+.tooltip-class {
+    background-color: green;
+    border-radius: 6px;
+}

superagi/agent/tool_executor.py

@@ -32,7 +32,7 @@ def execute(self, session, tool_name, tool_args):
             status = "SUCCESS"
             tool = tools[tool_name]
             retry = False
-            EventHandler(session=session).create_event('tool_used', {'tool_name': tool_name, 'agent_execution_id': self.agent_execution_id}, self.agent_id,
+            EventHandler(session=session).create_event('tool_used', {'tool_name': tool.name, 'agent_execution_id': self.agent_execution_id}, self.agent_id,
                                                        self.organisation_id),
             try:
                 parsed_args = self.clean_tool_args(tool_args)

superagi/apm/tools_handler.py

@@ -19,10 +19,10 @@ def __init__(self, session: Session, organisation_id: int):
 
     def get_tool_and_toolkit(self):
         tools_and_toolkits = self.session.query(
-            Tool.name.label('tool_name'), Toolkit.name.label('toolkit_name')).join(
+            func.lower(Tool.name).label('tool_name'), Toolkit.name.label('toolkit_name')).join(
             Toolkit, Tool.toolkit_id == Toolkit.id).all()
 
-        return {item.tool_name: item.toolkit_name for item in tools_and_toolkits}
+        return {item.tool_name.lower(): item.toolkit_name for item in tools_and_toolkits}
 
     def calculate_tool_usage(self) -> List[Dict[str, int]]:
         tool_usage = []
@@ -55,9 +55,11 @@ def calculate_tool_usage(self) -> List[Dict[str, int]]:
             'tool_name': row.tool_name,
             'unique_agents': row.unique_agents,
             'total_usage': row.total_usage,
-            'toolkit': tool_and_toolkit.get(row.tool_name, None)
+            'toolkit': tool_and_toolkit.get(row.tool_name.lower(), None)
         } for row in result]
 
+        tool_usage.sort(key=lambda tool: tool['total_usage'], reverse=True)
+
         return tool_usage
 
     def get_tool_usage_by_name(self, tool_name: str) -> Dict[str, Dict[str, int]]:

tests/unit_tests/apm/test_tools_handler.py

@@ -27,31 +27,29 @@ def test_calculate_tool_usage(tools_handler, mock_session):
 
     tool_used_subquery.c.tool_name = 'Tool1'
     tool_used_subquery.c.agent_id = 1
-
     agent_count_subquery.c.tool_name = 'Tool1'
     agent_count_subquery.c.unique_agents = 1
-
     total_usage_subquery.c.tool_name = 'Tool1'
     total_usage_subquery.c.total_usage = 5
 
-    tools_handler.get_tool_and_toolkit = MagicMock()
-    tools_handler.get_tool_and_toolkit.return_value = {'Tool1': 'Toolkit1'}
-
-    mock_session.query().filter_by().subquery.return_value = tool_used_subquery
-    mock_session.query().group_by().subquery.return_value = agent_count_subquery
-    mock_session.query().group_by().subquery.return_value = total_usage_subquery
+    mock_session.query.return_value.filter_by.return_value.subquery.return_value = tool_used_subquery
+    mock_session.query.return_value.group_by.return_value.subquery.side_effect = [agent_count_subquery, total_usage_subquery]
 
     result_obj = MagicMock()
     result_obj.tool_name = 'Tool1'
     result_obj.unique_agents = 1
     result_obj.total_usage = 5
-    mock_session.query().join().all.return_value = [result_obj]
+
+    mock_session.query.return_value.join.return_value.all.return_value = [result_obj]
+
+    tools_handler.get_tool_and_toolkit = MagicMock(return_value={'tool1': 'Toolkit1'})
 
     result = tools_handler.calculate_tool_usage()
 
     assert isinstance(result, list)
 
     expected_output = [{'tool_name': 'Tool1', 'unique_agents': 1, 'total_usage': 5, 'toolkit': 'Toolkit1'}]
+
     assert result == expected_output
 
 def test_get_tool_and_toolkit(tools_handler, mock_session):