Skip to content

chore: Enable templates for agents #40214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 15, 2025
Merged

chore: Enable templates for agents #40214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5ecbe77
filter out normal templates for agents
jsartisan Apr 11, 2025
4247afe
add the missing code
jsartisan Apr 11, 2025
f7f512b
hide building blocks
jsartisan Apr 11, 2025
7a34b9e
update selector for templates
jsartisan Apr 11, 2025
88d42c7
fix test
jsartisan Apr 14, 2025
35ab1cd
wip
jsartisan Apr 14, 2025
bbe7fca
add check for build blocks
jsartisan Apr 14, 2025
4df9dc9
add check for horizontal line
jsartisan Apr 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 5 additions & 10 deletions app/client/src/pages/Templates/TemplateContent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ function TemplateList(props: TemplateListProps) {
</TemplateGrid>
</>
)}
{showHorizontalLine && <HorizontalLine />}
{showBuildingBlocksSection && (
{showHorizontalLine && buildingBlocks.length > 0 && <HorizontalLine />}
{showBuildingBlocksSection && buildingBlocks.length > 0 && (
<>
<SubheadingText kind="heading-m">
{createMessage(ADD_PAGE_FROM_TEMPLATE_MODAL.buildingBlocksTitle)}
Expand Down Expand Up @@ -123,14 +123,9 @@ export function TemplateContent(props: TemplateContentProps) {
const isLoading = isFetchingApplications || isFetchingTemplates;

const filterWithAllowPageImport = props.filterWithAllowPageImport || false;
const templates = useSelector(getSearchedTemplateList)
.filter((template) =>
filterWithAllowPageImport ? !!template.allowPageImport : true,
)
// We are using AI Agent template for creating ai agent app,
// so we are not showing it in the templates list.
// TODO: Once we have a new entity for ai agent, we need to remove this filter.
.filter((template) => template.title !== "AI Agent");
const templates = useSelector(getSearchedTemplateList).filter((template) =>
filterWithAllowPageImport ? !!template.allowPageImport : true,
);

if (isLoading) {
return <LoadingScreen text="Loading templates" />;
Expand Down
8 changes: 8 additions & 0 deletions app/client/src/pages/Templates/TemplateFilters/TemplateFilter.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
unitTestMockTemplate,
unitTestMockTemplateAllFilters,
} from "../test_config";
import { DEFAULT_FEATURE_FLAG_VALUE } from "ee/entities/FeatureFlag";

const mockStore = configureStore([]);

Expand All @@ -36,6 +37,13 @@ describe("<TemplateFilters />", () => {
templateSearchQuery: "",
templates: [unitTestMockTemplate],
},
users: {
featureFlag: {
data: DEFAULT_FEATURE_FLAG_VALUE,
overriddenFlags: {},
isFetching: false,
},
},
},
});
});
Expand Down
30 changes: 28 additions & 2 deletions app/client/src/selectors/templatesSelectors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type { Filter } from "pages/Templates/TemplateFilters";
import { TEMPLATE_BUILDING_BLOCKS_FILTER_FUNCTION_VALUE } from "pages/Templates/constants";
import { createSelector } from "reselect";
import type { WidgetCardProps } from "widgets/BaseWidget";
import { getIsAiAgentFlowEnabled } from "ee/selectors/aiAgentSelectors";

const fuzzySearchOptions = {
keys: ["title", "id", "datasources", "widgets"],
Expand All @@ -24,8 +25,33 @@ const fuzzySearchOptions = {
distance: 100,
};

export const getTemplatesSelector = (state: AppState) =>
state.ui.templates.templates;
const AGENT_TEMPLATES_USE_CASE = "Agent";
const AGENT_TEMPLATES_TITLE = "AI Agent";

export const getTemplatesSelector = createSelector(
(state: AppState) => state.ui.templates.templates,
getIsAiAgentFlowEnabled,
(templates, isAiAgentFlowEnabled) => {
// For agents, we only show the templates that have the use case "Agent".
// The "Agent" use case acts as a filter for use to just show the templates
// that are relevant to agents.
return (
templates
.filter((template) => {
if (isAiAgentFlowEnabled) {
return template.useCases.includes(AGENT_TEMPLATES_USE_CASE);
}

return true;
})
// We are using AI Agent template for creating ai agent app,
// so we are not showing it in the templates list.
// TODO: Once we have a new entity for ai agent, we need to remove this filter.
.filter((template) => template.title !== AGENT_TEMPLATES_TITLE)
);
},
);
Comment on lines +31 to +53
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

New selector function for template filtering based on AI agent flow.

This selector implements a centralized filtering mechanism that:

  1. Shows only Agent-related templates when AI agent flow is enabled
  2. Always excludes the "AI Agent" template regardless of feature flag status

The comments explain the filtering logic well, including the TODO note about future refactoring once a new entity for AI agents is implemented.

🏁 Script executed:

#!/bin/bash
# Verify that all template references in the codebase now use the new selector

# Check if there are any direct accesses to state.ui.templates.templates that should use getTemplatesSelector instead
rg -t tsx -t ts "state\.ui\.templates\.templates" --no-filename | grep -v "getTemplatesSelector"

Length of output: 124

Selector Verification Update – Revised Verification Command

The new selector function in app/client/src/selectors/templatesSelectors.tsx (lines 31–53) correctly implements:

  • Filtering for Agent-specific templates when AI agent flow is enabled.
  • Consistently excluding the "AI Agent" template.

Since the previous verification command failed due to file type issues with TSX files, please re-run the revised script above. If no output is produced, it confirms that all references to state.ui.templates.templates are appropriately routed through getTemplatesSelector.

🏁 Script executed:

#!/bin/bash
# Revised check: search TS and TSX files for direct references to "state.ui.templates.templates"
# that are not using "getTemplatesSelector".
rg -g "*.tsx" -g "*.ts" "state\.ui\.templates\.templates" --no-filename | grep -v "getTemplatesSelector"

Length of output: 541

Attention: Inconsistent Selector Usage Detected

The new selector in app/client/src/selectors/templatesSelectors.tsx (lines 31–53) correctly encapsulates the filtering logic for Agent-related templates when AI agent flow is enabled and consistently excludes the "AI Agent" template. However, our verification reveals several direct references to state.ui.templates.templates in other parts of the codebase, including:

  • Direct access for reading the array and its length (e.g., (state: AppState) => state.ui.templates.templates.length)
  • References used for operations like .find() and .filter()
  • Other usages where state is directly manipulated (e.g., state.ui.templates.templatesModal)

Action Items:

  • Review each of the direct references above and determine if they should be updated to use getTemplatesSelector for consistent filtering logic.
  • Refactor the areas where direct state access bypasses the centralized selector, ensuring unified behavior across the application.

Please address these discrepancies to maintain consistency and ensure that the new centralized filtering is fully leveraged.


export const isImportingTemplateSelector = (state: AppState) =>
state.ui.templates.isImportingTemplate;
export const isImportingTemplateToAppSelector = (state: AppState) =>
Expand Down
Loading