chore: Add additional chat option (#40166)

## Description

Add chat option when AI flag is enabled

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Enhanced the function configuration interface by adding an informative
tooltip to the functions header.
	- Updated button and menu labels for uniform text presentation.
- Introduced a conditional "Chat with us" navigation option that
activates AI support.
- Expanded the help menu to include a direct option for launching the AI
support modal.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Hetu Nandu 2025-04-08 15:43:03 +05:30 committed by GitHub
parent bf6125f69d
commit 507bb90307
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 53 additions and 6 deletions

View File

@ -11,6 +11,7 @@ import {
MenuSubTrigger,
MenuTrigger,
Text,
Tooltip,
} from "@appsmith/ads";
import React, { useCallback, useMemo, useState } from "react";
import type { FieldArrayFieldsProps } from "redux-form";
@ -106,14 +107,25 @@ export const FunctionCallingConfigForm = ({
return (
<>
<Header>
<Tooltip
align={{
points: ["cr", "cl"],
offset: [0, 2],
}}
content="Function calling allows the agent to intelligently fetch data, perform actions, and generate accurate, real-time responses."
>
<Flex alignItems="center" flexDirection="row" gap="spaces-2">
<Text isBold kind="heading-s" renderAs="p">
Function Calls
Functions
</Text>
<Icon name="info" size="md" />
</Flex>
</Tooltip>
<Menu>
<MenuTrigger>
<Button UNSAFE_width="110px" kind="secondary" startIcon="plus">
Add Function
Add function
</Button>
</MenuTrigger>
<MenuContent align="end" loop width="235px">
@ -122,7 +134,7 @@ export const FunctionCallingConfigForm = ({
<MenuItem onSelect={() => history.push(queryAddURL({}))}>
<Flex alignItems="center" gap="spaces-2">
<Icon name="plus" size="md" />
New Query
New query
</Flex>
</MenuItem>
<MenuItem
@ -138,7 +150,7 @@ export const FunctionCallingConfigForm = ({
>
<Flex alignItems="center" gap="spaces-2">
<Icon name="plus" size="md" />
New JS Object
New JS object
</Flex>
</MenuItem>
</MenuGroup>

View File

@ -0,0 +1,3 @@
import { noop } from "lodash";
export const toggleAISupportModal = noop;

View File

@ -24,6 +24,8 @@ import { toast } from "@appsmith/ads";
import { DOCS_BASE_URL } from "constants/ThirdPartyConstants";
import { getAppsmithConfigs } from "ee/configs";
import { getCurrentUser } from "selectors/usersSelectors";
import { toggleAISupportModal } from "ee/actions/aiAgentActions";
import { getIsAiAgentFlowEnabled } from "ee/selectors/aiAgentSelectors";
const { cloudHosting, intercomAppID } = getAppsmithConfigs();
@ -107,6 +109,8 @@ export const useNavigationMenuData = ({
}
}, [applicationId, dispatch, history]);
const isAiAgentFlowEnabled = useSelector(getIsAiAgentFlowEnabled);
return useMemo(
() =>
[
@ -174,6 +178,15 @@ export const useNavigationMenuData = ({
type: MenuTypes.MENU,
isVisible: intercomAppID && window.Intercom,
},
{
startIcon: "chat-help",
text: "Chat with us",
onClick: () => {
dispatch(toggleAISupportModal());
},
type: MenuTypes.MENU,
isVisible: isAiAgentFlowEnabled,
},
],
},
].filter(Boolean) as MenuItemData[],
@ -185,8 +198,10 @@ export const useNavigationMenuData = ({
hasExportPermission,
hasDeletePermission,
deleteApplication,
isAiAgentFlowEnabled,
setForkApplicationModalOpen,
isIntercomConsentGiven,
dispatch,
],
);
};

View File

@ -39,6 +39,7 @@ import { getInstanceId } from "ee/selectors/organizationSelectors";
import { updateIntercomConsent, updateUserDetails } from "actions/userActions";
import { getIsAiAgentFlowEnabled } from "ee/selectors/aiAgentSelectors";
import { DOCS_AI_BASE_URL } from "constants/ThirdPartyConstants";
import { toggleAISupportModal } from "ee/actions/aiAgentActions";
const { appVersion, cloudHosting, intercomAppID } = getAppsmithConfigs();
@ -200,6 +201,18 @@ function HelpButton() {
if (docItem) {
docItem.link = DOCS_AI_BASE_URL;
}
const chatItem = HELP_MENU_ITEMS.find(
(item) => item.id === "ai-support-trigger",
);
if (!chatItem) {
HELP_MENU_ITEMS.push({
icon: "chat-help",
label: "Chat with us",
id: "ai-support-trigger",
});
}
}
useEffect(() => {
@ -288,6 +301,10 @@ function HelpButton() {
}
}
}
if (item.id === "ai-support-trigger") {
dispatch(toggleAISupportModal());
}
}}
startIcon={item.icon}
>