From 4783df3c376cba5e40da45948860a75cad4bb282 Mon Sep 17 00:00:00 2001
From: vadim <vadim@appsmith.com>
Date: Mon, 14 Apr 2025 15:28:29 +0200
Subject: [PATCH] chore: Agent chat annotated label in query pane (#40237)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

| Before | After |
|--------|--------|
| <img width="150" alt="Screenshot 2025-04-14 at 11 54 32"
src="https://github.com/user-attachments/assets/bcd2fe01-be2d-4105-aad9-92ea6b71f830"
/> | <img width="175" alt="Screenshot 2025-04-14 at 11 48 26"
src="https://github.com/user-attachments/assets/6f910ae6-1975-4ead-bb88-bd681c0161c3"
/> |

## Automation

/ok-to-test tags="@tag.Sanity"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14442989734>
> Commit: df9a8417410347c0211e0ecbf9fdceb887810177
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14442989734&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Mon, 14 Apr 2025 10:51:05 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


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

## Summary by CodeRabbit

- **Style**
  - Enhanced dark mode appearance with a more consistent color scheme.
  - Updated code block typography and styling for improved readability.
- Refined the visual presentation of code elements, including fonts,
colors, and spacing.
  - Modified the copy button appearance to a neutral style.
- Introduced an annotated label with a dotted underline for clearer
visual cues.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/FunctionCallingConfigForm.tsx          | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx
index d3679eeac4..05d678ad10 100644
--- a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx
+++ b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx
@@ -42,6 +42,13 @@ const Header = styled.div`
   justify-content: space-between;
 `;
 
+const AnnotatedLabel = styled(Text)`
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--ads-v2-color-border-emphasis);
+  text-underline-offset: var(--ads-v2-spaces-1);
+`;
+
 const ConfigItems = styled.div`
   display: flex;
   flex-direction: column;
@@ -115,9 +122,9 @@ export const FunctionCallingConfigForm = ({
           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">
+            <AnnotatedLabel isBold kind="heading-s" renderAs="p">
               Functions
-            </Text>
+            </AnnotatedLabel>
             <Icon name="info" size="md" />
           </Flex>
         </Tooltip>