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, MenuSubTrigger,
MenuTrigger, MenuTrigger,
Text, Text,
Tooltip,
} from "@appsmith/ads"; } from "@appsmith/ads";
import React, { useCallback, useMemo, useState } from "react"; import React, { useCallback, useMemo, useState } from "react";
import type { FieldArrayFieldsProps } from "redux-form"; import type { FieldArrayFieldsProps } from "redux-form";
@ -106,14 +107,25 @@ export const FunctionCallingConfigForm = ({
return ( return (
<> <>
<Header> <Header>
<Text isBold kind="heading-s" renderAs="p"> <Tooltip
Function Calls align={{
</Text> 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">
Functions
</Text>
<Icon name="info" size="md" />
</Flex>
</Tooltip>
<Menu> <Menu>
<MenuTrigger> <MenuTrigger>
<Button UNSAFE_width="110px" kind="secondary" startIcon="plus"> <Button UNSAFE_width="110px" kind="secondary" startIcon="plus">
Add Function Add function
</Button> </Button>
</MenuTrigger> </MenuTrigger>
<MenuContent align="end" loop width="235px"> <MenuContent align="end" loop width="235px">
@ -122,7 +134,7 @@ export const FunctionCallingConfigForm = ({
<MenuItem onSelect={() => history.push(queryAddURL({}))}> <MenuItem onSelect={() => history.push(queryAddURL({}))}>
<Flex alignItems="center" gap="spaces-2"> <Flex alignItems="center" gap="spaces-2">
<Icon name="plus" size="md" /> <Icon name="plus" size="md" />
New Query New query
</Flex> </Flex>
</MenuItem> </MenuItem>
<MenuItem <MenuItem
@ -138,7 +150,7 @@ export const FunctionCallingConfigForm = ({
> >
<Flex alignItems="center" gap="spaces-2"> <Flex alignItems="center" gap="spaces-2">
<Icon name="plus" size="md" /> <Icon name="plus" size="md" />
New JS Object New JS object
</Flex> </Flex>
</MenuItem> </MenuItem>
</MenuGroup> </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 { DOCS_BASE_URL } from "constants/ThirdPartyConstants";
import { getAppsmithConfigs } from "ee/configs"; import { getAppsmithConfigs } from "ee/configs";
import { getCurrentUser } from "selectors/usersSelectors"; import { getCurrentUser } from "selectors/usersSelectors";
import { toggleAISupportModal } from "ee/actions/aiAgentActions";
import { getIsAiAgentFlowEnabled } from "ee/selectors/aiAgentSelectors";
const { cloudHosting, intercomAppID } = getAppsmithConfigs(); const { cloudHosting, intercomAppID } = getAppsmithConfigs();
@ -107,6 +109,8 @@ export const useNavigationMenuData = ({
} }
}, [applicationId, dispatch, history]); }, [applicationId, dispatch, history]);
const isAiAgentFlowEnabled = useSelector(getIsAiAgentFlowEnabled);
return useMemo( return useMemo(
() => () =>
[ [
@ -174,6 +178,15 @@ export const useNavigationMenuData = ({
type: MenuTypes.MENU, type: MenuTypes.MENU,
isVisible: intercomAppID && window.Intercom, isVisible: intercomAppID && window.Intercom,
}, },
{
startIcon: "chat-help",
text: "Chat with us",
onClick: () => {
dispatch(toggleAISupportModal());
},
type: MenuTypes.MENU,
isVisible: isAiAgentFlowEnabled,
},
], ],
}, },
].filter(Boolean) as MenuItemData[], ].filter(Boolean) as MenuItemData[],
@ -185,8 +198,10 @@ export const useNavigationMenuData = ({
hasExportPermission, hasExportPermission,
hasDeletePermission, hasDeletePermission,
deleteApplication, deleteApplication,
isAiAgentFlowEnabled,
setForkApplicationModalOpen, setForkApplicationModalOpen,
isIntercomConsentGiven, isIntercomConsentGiven,
dispatch,
], ],
); );
}; };

View File

@ -39,6 +39,7 @@ import { getInstanceId } from "ee/selectors/organizationSelectors";
import { updateIntercomConsent, updateUserDetails } from "actions/userActions"; import { updateIntercomConsent, updateUserDetails } from "actions/userActions";
import { getIsAiAgentFlowEnabled } from "ee/selectors/aiAgentSelectors"; import { getIsAiAgentFlowEnabled } from "ee/selectors/aiAgentSelectors";
import { DOCS_AI_BASE_URL } from "constants/ThirdPartyConstants"; import { DOCS_AI_BASE_URL } from "constants/ThirdPartyConstants";
import { toggleAISupportModal } from "ee/actions/aiAgentActions";
const { appVersion, cloudHosting, intercomAppID } = getAppsmithConfigs(); const { appVersion, cloudHosting, intercomAppID } = getAppsmithConfigs();
@ -200,6 +201,18 @@ function HelpButton() {
if (docItem) { if (docItem) {
docItem.link = DOCS_AI_BASE_URL; 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(() => { useEffect(() => {
@ -288,6 +301,10 @@ function HelpButton() {
} }
} }
} }
if (item.id === "ai-support-trigger") {
dispatch(toggleAISupportModal());
}
}} }}
startIcon={item.icon} startIcon={item.icon}
> >