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:
parent
bf6125f69d
commit
507bb90307
|
|
@ -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>
|
||||||
|
|
|
||||||
3
app/client/src/ee/actions/aiAgentActions.ts
Normal file
3
app/client/src/ee/actions/aiAgentActions.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { noop } from "lodash";
|
||||||
|
|
||||||
|
export const toggleAISupportModal = noop;
|
||||||
|
|
@ -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,
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user