From 7005da7cf76a8b2e4ad204de9ab2cdb1e1883e7f Mon Sep 17 00:00:00 2001
From: Vishwam Talnikar <131583570+visz11@users.noreply.github.com>
Date: Mon, 10 Nov 2025 11:37:22 +0530
Subject: [PATCH] Add ChatButton component with chat options

---
 index.tsx | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 index.tsx

diff --git a/index.tsx b/index.tsx
new file mode 100644
index 0000000..c1b89d2
--- /dev/null
+++ b/index.tsx
@@ -0,0 +1,79 @@
+import {
+  Box,
+  IconButton,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Tooltip,
+} from '@chakra-ui/react';
+import { useState } from 'react';
+import {
+  AiOutlineMail,
+  AiOutlineMessage,
+  AiOutlinePhone,
+} from 'react-icons/ai';
+import ChatWithUsIcon from '../shared/assets/img/chat-with-us-icon.svg';
+
+interface ChatButtonProps {
+  salesButtonAction: () => void;
+}
+
+export const ChatButton = ({ salesButtonAction }: ChatButtonProps) => {
+  const [showOptions, setShowOptions] = useState(false);
+
+  const openChat = () => {
+    if (window?.Intercom) {
+      window?.Intercom('show');
+    }
+  };
+
+  const openEmail = () => {
+    window.open('mailto:support@devdynamics.ai');
+  };
+  return (
+    <Box
+      alignSelf={'center'}
+      borderRadius={'4px'}
+      border={'1px solid #4d4dff'}
+      _hover={{ backgroundColor: 'transparent' }}
+      height={'95%'}
+    >
+      <Menu>
+        <Tooltip
+          aria-label="Talk to us"
+          label="Talk to us"
+          hasArrow
+          placement="bottom"
+        >
+          <MenuButton>
+            <IconButton
+              aria-label="Talk to us"
+              variant="ghost"
+              bg="transparent"
+              color="text.primary"
+              _hover={{ bg: 'transparent' }}
+              onClick={() => setShowOptions(!showOptions)}
+              icon={<Image src={ChatWithUsIcon} />}
+            />
+          </MenuButton>
+        </Tooltip>
+        <MenuList mr={'20px'}>
+          <MenuItem onClick={openChat} icon={<AiOutlineMessage size={20} />}>
+            Chat with us
+          </MenuItem>
+          <MenuItem
+            onClick={salesButtonAction}
+            icon={<AiOutlinePhone size={20} />}
+          >
+            Talk to us
+          </MenuItem>
+          <MenuItem onClick={openEmail} icon={<AiOutlineMail size={20} />}>
+            Email us
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </Box>
+  );
+};