Mintplex-Labs · timothycarambat · Feb 13, 2025 · Jan 28, 2025 · Jan 28, 2025 · Jan 28, 2025
diff --git a/.github/workflows/dev-build.yaml b/.github/workflows/dev-build.yaml
@@ -6,7 +6,7 @@ concurrency:
 
 on:
   push:
-    branches: ['3069-tokenizer-collector-improvements'] # put your current branch to create a build. Core team only.
+    branches: ['agent-builder'] # put your current branch to create a build. Core team only.
     paths-ignore:
       - '**.md'
       - 'cloud-deployments/*'

diff --git a/README.md b/README.md
@@ -56,9 +56,10 @@ AnythingLLM divides your documents into objects called `workspaces`. A Workspace
 ## Cool features of AnythingLLM
 
 - 🆕 [**Custom AI Agents**](https://docs.anythingllm.com/agent/custom/introduction)
+- 🆕 [**No-code AI Agent builder**](https://docs.anythingllm.com/agent-flows/overview)
 - 🖼️ **Multi-modal support (both closed and open-source LLMs!)**
 - 👤 Multi-user instance support and permissioning _Docker version only_
-- 🦾 Agents inside your workspace (browse the web, run code, etc)
+- 🦾 Agents inside your workspace (browse the web, etc)
 - 💬 [Custom Embeddable Chat widget for your website](./embed/README.md) _Docker version only_
 - 📖 Multiple document type support (PDF, TXT, DOCX, etc)
 - Simple chat UI with Drag-n-Drop funcitonality and clear citations.

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -67,6 +67,7 @@ const ExperimentalFeatures = lazy(
 const LiveDocumentSyncManage = lazy(
   () => import("@/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage")
 );
+const AgentBuilder = lazy(() => import("@/pages/Admin/AgentBuilder"));
 
 const CommunityHubTrending = lazy(
   () => import("@/pages/GeneralSettings/CommunityHub/Trending")
@@ -143,6 +144,24 @@ export default function App() {
                     path="/settings/agents"
                     element={<AdminRoute Component={AdminAgents} />}
                   />
+                  <Route
+                    path="/settings/agents/builder"
+                    element={
+                      <AdminRoute
+                        Component={AgentBuilder}
+                        hideUserMenu={true}
+                      />
+                    }
+                  />
+                  <Route
+                    path="/settings/agents/builder/:flowId"
+                    element={
+                      <AdminRoute
+                        Component={AgentBuilder}
+                        hideUserMenu={true}
+                      />
+                    }
+                  />
                   <Route
                     path="/settings/event-logs"
                     element={<AdminRoute Component={AdminLogs} />}

diff --git a/frontend/src/components/PrivateRoute/index.jsx b/frontend/src/components/PrivateRoute/index.jsx
@@ -83,7 +83,7 @@ function useIsAuthenticated() {
 
 // Allows only admin to access the route and if in single user mode,
 // allows all users to access the route
-export function AdminRoute({ Component }) {
+export function AdminRoute({ Component, hideUserMenu = false }) {
   const { isAuthd, shouldRedirectToOnboarding, multiUserMode } =
     useIsAuthenticated();
   if (isAuthd === null) return <FullScreenLoader />;
@@ -94,9 +94,13 @@ export function AdminRoute({ Component }) {
 
   const user = userFromStorage();
   return isAuthd && (user?.role === "admin" || !multiUserMode) ? (
-    <UserMenu>
+    hideUserMenu ? (
       <Component />
-    </UserMenu>
+    ) : (
+      <UserMenu>
+        <Component />
+      </UserMenu>
+    )
   ) : (
     <Navigate to={paths.home()} />
   );

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -18,6 +18,10 @@ import {
 } from "../ThoughtContainer";
 
 const DOMPurify = createDOMPurify(window);
+DOMPurify.setConfig({
+  ADD_ATTR: ["target", "rel"],
+});
+
 const HistoricalMessage = ({
   uuid = v4(),
   message,

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/StatusResponse/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/StatusResponse/index.jsx
@@ -71,7 +71,9 @@ export default function StatusResponse({
           <div
             key={`cot-list-${currentThought.uuid}`}
             className={`mt-2 bg-theme-bg-chat-input backdrop-blur-sm rounded-lg overflow-hidden transition-all duration-300 border border-theme-sidebar-border ${
-              isExpanded ? "max-h-[300px] opacity-100" : "max-h-0 opacity-0"
+              isExpanded
+                ? "max-h-[300px] overflow-y-auto opacity-100"
+                : "max-h-0 opacity-0"
             }`}
           >
             <div className="p-2">

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -41,6 +41,8 @@
   --theme-button-primary: #46c8ff;
   --theme-button-primary-hover: #434343;
 
+  --theme-button-cta: #7cd4fd;
+
   --theme-file-row-even: #0e0f0f;
   --theme-file-row-odd: #1b1b1e;
   --theme-file-row-selected-even: rgba(14, 165, 233, 0.2);
@@ -92,6 +94,8 @@
   --theme-button-primary: #0ba5ec;
   --theme-button-primary-hover: #dedede;
 
+  --theme-button-cta: #7cd4fd;
+
   --theme-file-row-even: #f5f5f5;
   --theme-file-row-odd: #e9e9e9;
   --theme-file-row-selected-even: #0ba5ec;
@@ -664,6 +668,11 @@ dialog::backdrop {
   padding: 14px 15px;
 }
 
+.markdown > * a {
+  color: var(--theme-button-cta);
+  text-decoration: underline;
+}
+
 @media (max-width: 600px) {
   .markdown table th,
   .markdown table td {

diff --git a/frontend/src/media/logo/anything-llm-infinity.png b/frontend/src/media/logo/anything-llm-infinity.png
diff --git a/frontend/src/models/agentFlows.js b/frontend/src/models/agentFlows.js
@@ -0,0 +1,149 @@
+import { API_BASE } from "@/utils/constants";
+import { baseHeaders } from "@/utils/request";
+
+const AgentFlows = {
+  /**
+   * Save a flow configuration
+   * @param {string} name - Display name of the flow
+   * @param {object} config - The configuration object for the flow
+   * @param {string} [uuid] - Optional UUID for updating existing flow
+   * @returns {Promise<{success: boolean, error: string | null, flow: {name: string, config: object, uuid: string} | null}>}
+   */
+  saveFlow: async (name, config, uuid = null) => {
+    return await fetch(`${API_BASE}/agent-flows/save`, {
+      method: "POST",
+      headers: {
+        ...baseHeaders(),
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ name, config, uuid }),
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error(response.error || "Failed to save flow");
+        return res;
+      })
+      .then((res) => res.json())
+      .catch((e) => ({
+        success: false,
+        error: e.message,
+        flow: null,
+      }));
+  },
+
+  /**
+   * List all available flows in the system
+   * @returns {Promise<{success: boolean, error: string | null, flows: Array<{name: string, uuid: string, description: string, steps: Array}>}>}
+   */
+  listFlows: async () => {
+    return await fetch(`${API_BASE}/agent-flows/list`, {
+      method: "GET",
+      headers: baseHeaders(),
+    })
+      .then((res) => res.json())
+      .catch((e) => ({
+        success: false,
+        error: e.message,
+        flows: [],
+      }));
+  },
+
+  /**
+   * Get a specific flow by UUID
+   * @param {string} uuid - The UUID of the flow to retrieve
+   * @returns {Promise<{success: boolean, error: string | null, flow: {name: string, config: object, uuid: string} | null}>}
+   */
+  getFlow: async (uuid) => {
+    return await fetch(`${API_BASE}/agent-flows/${uuid}`, {
+      method: "GET",
+      headers: baseHeaders(),
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error(response.error || "Failed to get flow");
+        return res;
+      })
+      .then((res) => res.json())
+      .catch((e) => ({
+        success: false,
+        error: e.message,
+        flow: null,
+      }));
+  },
+
+  /**
+   * Execute a specific flow
+   * @param {string} uuid - The UUID of the flow to run
+   * @param {object} variables - Optional variables to pass to the flow
+   * @returns {Promise<{success: boolean, error: string | null, results: object | null}>}
+   */
+  // runFlow: async (uuid, variables = {}) => {
+  //   return await fetch(`${API_BASE}/agent-flows/${uuid}/run`, {
+  //     method: "POST",
+  //     headers: {
+  //       ...baseHeaders(),
+  //       "Content-Type": "application/json",
+  //     },
+  //     body: JSON.stringify({ variables }),
+  //   })
+  //     .then((res) => {
+  //       if (!res.ok) throw new Error(response.error || "Failed to run flow");
+  //       return res;
+  //     })
+  //     .then((res) => res.json())
+  //     .catch((e) => ({
+  //       success: false,
+  //       error: e.message,
+  //       results: null,
+  //     }));
+  // },
+
+  /**
+   * Delete a specific flow
+   * @param {string} uuid - The UUID of the flow to delete
+   * @returns {Promise<{success: boolean, error: string | null}>}
+   */
+  deleteFlow: async (uuid) => {
+    return await fetch(`${API_BASE}/agent-flows/${uuid}`, {
+      method: "DELETE",
+      headers: baseHeaders(),
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error(response.error || "Failed to delete flow");
+        return res;
+      })
+      .then((res) => res.json())
+      .catch((e) => ({
+        success: false,
+        error: e.message,
+      }));
+  },
+
+  /**
+   * Toggle a flow's active status
+   * @param {string} uuid - The UUID of the flow to toggle
+   * @param {boolean} active - The new active status
+   * @returns {Promise<{success: boolean, error: string | null}>}
+   */
+  toggleFlow: async (uuid, active) => {
+    try {
+      const result = await fetch(`${API_BASE}/agent-flows/${uuid}/toggle`, {
+        method: "POST",
+        headers: {
+          ...baseHeaders(),
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ active }),
+      })
+        .then((res) => {
+          if (!res.ok) throw new Error(res.error || "Failed to toggle flow");
+          return res;
+        })
+        .then((res) => res.json());
+      return { success: true, flow: result.flow };
+    } catch (error) {
+      console.error("Failed to toggle flow:", error);
+      return { success: false, error: error.message };
+    }
+  },
+};
+
+export default AgentFlows;
diff --git a/frontend/src/pages/Admin/AgentBuilder/AddBlockMenu/index.jsx b/frontend/src/pages/Admin/AgentBuilder/AddBlockMenu/index.jsx
@@ -0,0 +1,68 @@
+import React, { useRef, useEffect } from "react";
+import { Plus, CaretDown } from "@phosphor-icons/react";
+import { BLOCK_TYPES, BLOCK_INFO } from "../BlockList";
+
+export default function AddBlockMenu({
+  showBlockMenu,
+  setShowBlockMenu,
+  addBlock,
+}) {
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowBlockMenu(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setShowBlockMenu]);
+
+  return (
+    <div className="relative mt-4 w-[280px] mx-auto pb-[50%]" ref={menuRef}>
+      <button
+        onClick={() => setShowBlockMenu(!showBlockMenu)}
+        className="transition-all duration-300 w-full p-2.5 bg-theme-action-menu-bg hover:bg-theme-action-menu-item-hover border border-white/10 rounded-lg text-white flex items-center justify-center gap-2 text-sm font-medium"
+      >
+        <Plus className="w-4 h-4" />
+        Add Block
+        <CaretDown
+          className={`w-3.5 h-3.5 transition-transform duration-300 ${showBlockMenu ? "rotate-180" : ""}`}
+        />
+      </button>
+      {showBlockMenu && (
+        <div className="absolute left-0 right-0 mt-2 bg-theme-action-menu-bg border border-white/10 rounded-lg shadow-lg overflow-hidden z-10 animate-fadeUpIn">
+          {Object.entries(BLOCK_INFO).map(
+            ([type, info]) =>
+              type !== BLOCK_TYPES.START &&
+              type !== BLOCK_TYPES.FINISH &&
+              type !== BLOCK_TYPES.FLOW_INFO && (
+                <button
+                  key={type}
+                  onClick={() => {
+                    addBlock(type);
+                    setShowBlockMenu(false);
+                  }}
+                  className="w-full p-2.5 flex items-center gap-3 hover:bg-theme-action-menu-item-hover text-white transition-colors duration-300 group"
+                >
+                  <div className="w-7 h-7 rounded-lg bg-white/10 flex items-center justify-center">
+                    <div className="w-fit h-fit text-white">{info.icon}</div>
+                  </div>
+                  <div className="text-left flex-1">
+                    <div className="text-sm font-medium">{info.label}</div>
+                    <div className="text-xs text-white/60">
+                      {info.description}
+                    </div>
+                  </div>
+                </button>
+              )
+          )}
+        </div>
+      )}
+    </div>
+  );
+}