From 507bb90307af26ee0d27989c433ed7dfc58ba9f5 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Tue, 8 Apr 2025 15:43:03 +0530
Subject: [PATCH] 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 -->
---
 .../components/FunctionCallingConfigForm.tsx  | 24 ++++++++++++++-----
 app/client/src/ee/actions/aiAgentActions.ts   |  3 +++
 .../EditorName/useNavigationMenuData.ts       | 15 ++++++++++++
 app/client/src/pages/Editor/HelpButton.tsx    | 17 +++++++++++++
 4 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 app/client/src/ee/actions/aiAgentActions.ts

diff --git a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx
index 6499bb8055..c5a310e91c 100644
--- a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx
+++ b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx
@@ -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>
-        <Text isBold kind="heading-s" renderAs="p">
-          Function Calls
-        </Text>
+        <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">
+              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>
diff --git a/app/client/src/ee/actions/aiAgentActions.ts b/app/client/src/ee/actions/aiAgentActions.ts
new file mode 100644
index 0000000000..4f82e6cb73
--- /dev/null
+++ b/app/client/src/ee/actions/aiAgentActions.ts
@@ -0,0 +1,3 @@
+import { noop } from "lodash";
+
+export const toggleAISupportModal = noop;
diff --git a/app/client/src/pages/Editor/EditorName/useNavigationMenuData.ts b/app/client/src/pages/Editor/EditorName/useNavigationMenuData.ts
index 4d2b554987..829ae0d238 100644
--- a/app/client/src/pages/Editor/EditorName/useNavigationMenuData.ts
+++ b/app/client/src/pages/Editor/EditorName/useNavigationMenuData.ts
@@ -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,
     ],
   );
 };
diff --git a/app/client/src/pages/Editor/HelpButton.tsx b/app/client/src/pages/Editor/HelpButton.tsx
index cd4fd71057..2af10c1aff 100644
--- a/app/client/src/pages/Editor/HelpButton.tsx
+++ b/app/client/src/pages/Editor/HelpButton.tsx
@@ -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}
                 >