Agent v3 chat

package.json

@@ -40,6 +40,7 @@
     "@babel/runtime-corejs3": "7.20.13",
     "@back4app/back4app-settings": "1.6.5",
     "@back4app2/react-components": "1.0.0-beta.440.130",
+    "@back4app2/sdk": "^1.0.0-beta.440.174",
     "@monaco-editor/react": "4.7.0",
     "@paddle/paddle-js": "1.4.2",
     "@sentry/react": "8.52.0",
@@ -101,6 +102,7 @@
     "semver": "7.5.2",
     "sweetalert2": "11.10.5",
     "sweetalert2-react-content": "1.0.1",
+    "ts-invariant": "^0.10.3",
     "typescript": "4.8.3",
     "util": "^0.12.5",
     "yup": "1.3.2"
@@ -125,7 +127,7 @@
     "babel-eslint": "10.1.0",
     "babel-loader": "9.1.2",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "core-js": "3.6.5",
+    "core-js": "3.28.0",
     "cross-env": "7.0.2",
     "css-loader": "6.7.3",
     "eslint": "8.24.0",
@@ -219,5 +221,8 @@
     "*.css",
     "*.scss",
     "./src/components/B4ACodeTree/B4ACodeTree.react.js"
-  ]
+  ],
+  "overrides": {
+    "tslib": "2.6.2"
+  }
 }

src/components/BrowserCell/B4aBrowserCell.scss

@@ -46,6 +46,72 @@
   }
 }
 
+// Multi-cell (shift-click) selection highlight. The B4a BrowserCell references
+// these classes; without them the selection had no visual feedback.
+.selected {
+  background-color: rgba(22, 105, 252, 0.3);
+}
+
+.leftBorder {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    pointer-events: none;
+    content: '';
+    border-left: 2px solid #1669fc;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.rightBorder {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    pointer-events: none;
+    content: '';
+    border-right: 2px solid #1669fc;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.topBorder {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    pointer-events: none;
+    content: '';
+    border-top: 2px solid #1669fc;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.bottomBorder {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    pointer-events: none;
+    content: '';
+    border-bottom: 2px solid #1669fc;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
 // .readonly {
 //   color: #353446;
 //   opacity: .9;

src/components/BrowserRow/BrowserRow.react.js

@@ -34,6 +34,8 @@ export default class BrowserRow extends Component {
       rowWidth,
       selection,
       selectRow,
+      onMouseDownRowCheckBox,
+      onMouseOverRowCheckBox,
       setCopyableValue,
       setCurrent,
       setEditing,
@@ -66,12 +68,16 @@ export default class BrowserRow extends Component {
     }
     return (
       <div className={styles.tableRow} style={{ minWidth: rowWidth + 34 }}> { /** 34 -> extra padding to cover up last column */}
-        <span className={styles.checkCell}>
+        <span
+          className={styles.checkCell}
+          onMouseOver={() => onMouseOverRowCheckBox && onMouseOverRowCheckBox(obj.id)}
+        >
           <input
             disabled={row < 0}
             type='checkbox'
-            checked={selection['*'] || selection[obj.id]}
+            checked={!!selection['*'] || !!selection[obj.id]}
             onChange={e => selectRow(obj.id, e.target.checked)}
+            onMouseDown={e => onMouseDownRowCheckBox && onMouseDownRowCheckBox(e.target.checked)}
           />
         </span>
         {order.map(({ name, width, visible }, j) => {

src/components/Sidebar/B4aSidebar.scss

@@ -346,6 +346,22 @@ $aiToolsOpenHeight: 110px;
     & svg {
       fill: currentColor;
     }
+
+    // B4aBadge positions itself with `float: right`, which works in the default
+    // (block) header but is ignored here: this active header is a flex
+    // container, and floats do not apply to flex items — the badge would end up
+    // flush against the label. `margin-left: auto` is the flex equivalent.
+    //
+    // Matches the last span ONLY when it is not the only one, i.e. exactly when
+    // a badge follows the label. With no badge (or a collapsed sidebar, where
+    // the label span is not rendered) nothing matches, so the label is never
+    // pushed right.
+    > span:last-of-type:not(:only-of-type) {
+      margin-left: auto;
+      // The badge's 5px top offset compensates for the block layout; here
+      // align-items: center already handles it.
+      margin-top: 0;
+    }
   }
 }
 

src/components/Sidebar/B4aSidebarSection.react.js

@@ -112,6 +112,10 @@ const getIconContent = (icon) => {
           <LazyB4aLogsIcon />
         </Suspense>
       );
+    case 'b4a-ai':
+      // No dedicated colored active-state component; keep the sprite icon so it
+      // does not disappear when the Agent section is active.
+      return <Icon width={20} height={20} name="b4a-ai" fill="#ffffff" />;
     default:
       return null;
   }

src/dashboard/Apps/AppsIndex.react.js

@@ -196,21 +196,8 @@ class AppsIndex extends React.Component {
         </div>
       );
     }
-    let upgradePrompt = null;
-    if (this.props.newFeaturesInLatestVersion.length > 0) {
-      const newFeaturesNodes = this.props.newFeaturesInLatestVersion.map(feature => (
-        <strong>{feature}</strong>
-      ));
-      upgradePrompt = (
-        <FlowFooter>
-          Upgrade to the{' '}
-          <a href="https://www.npmjs.com/package/parse-dashboard" target="_blank">
-            latest version
-          </a>{' '}
-          of Backend Dashboard to get access to: {joinWithFinal('', newFeaturesNodes, ', ', ' and ')}.
-        </FlowFooter>
-      );
-    }
+    // Upgrade prompt banner removed (was shown when newFeaturesInLatestVersion was set).
+    const upgradePrompt = null;
     return (
       <div className={styles.index}>
         <div className={styles.header}>

src/dashboard/Dashboard.js

@@ -12,6 +12,7 @@ import AppData from './AppData.react';
 import AppsIndex from './Apps/AppsIndex.react';
 import AppsManager from 'lib/AppsManager';
 import Browser from './Data/Browser/Browser.react';
+import Agent from './Data/Agent/AgentV4.react';
 // import CloudCode from './Data/CloudCode/B4ACloudCode.react';
 import AppOverview from './Data/AppOverview/AppOverview.react';
 import Config from './Data/Config/Config.react';
@@ -424,6 +425,7 @@ class Dashboard extends React.Component {
         <Route path="browser" element={<BrowserRoute />} />
 
         <Route path="cloud_code" element={<LazyComponentWrapper><LazyCloudCode /></LazyComponentWrapper>} />
+        <Route path="agent" element={<Agent />} />
         <Route path="webhooks" element={<Webhooks />} />
 
         <Route path="jobs">{JobsRoute}</Route>

src/dashboard/DashboardView.react.js

@@ -344,6 +344,13 @@ export default class DashboardView extends React.Component {
       subsections: apiSubSections
     });
 
+    appSidebarSections.push({
+      name: 'Backend Agent',
+      icon: 'b4a-ai',
+      link: '/agent',
+      badgeParams: { label: 'NEW', color: 'green' },
+    });
+
     const notificationSubSections = [
       {
         name: 'Email',