Skip to content

Add ChatButton component with chat options #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
visz11 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add ChatButton component with chat options #34

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Copy link

@coderabbitai coderabbitai bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the asset path exists.

Ensure the SVG asset path ../shared/assets/img/chat-with-us-icon.svg is correct and the file exists.

🏁 Script executed:

#!/bin/bash
# Verify the SVG asset exists
fd -t f "chat-with-us-icon.svg"

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Check if the shared/assets/img directory exists and list its contents
echo "=== Checking shared/assets/img directory ==="
find . -type d -name "shared" 2>/dev/null | head -5

echo ""
echo "=== Searching for any SVG files in assets directories ==="
find . -type f -name "*.svg" 2>/dev/null | grep -i "asset\|icon" | head -10

echo ""
echo "=== Checking for any chat-related SVG files ==="
find . -type f -name "*chat*.svg" 2>/dev/null

Length of output: 152

🏁 Script executed:

#!/bin/bash
# List repository root to understand structure
echo "=== Repository root structure ==="
ls -la | head -20

echo ""
echo "=== Search for ANY SVG files ==="
find . -type f -name "*.svg" 2>/dev/null

echo ""
echo "=== Find index.tsx location ==="
find . -type f -name "index.tsx" 2>/dev/null

echo ""
echo "=== Check if this is actually a React/Node project ==="
ls -la | grep -E "package.json|tsconfig|webpack|vite"

Length of output: 984

🏁 Script executed:

#!/bin/bash
# Explore app directory structure
echo "=== App directory structure ==="
find ./app -type f -name "*.tsx" -o -name "*.ts" -o -name "*.svg" | sort

echo ""
echo "=== Look for shared directory anywhere ==="
find ./app -type d -name "shared" 2>/dev/null

echo ""
echo "=== Full app directory tree (limited depth) ==="
ls -la ./app/
find ./app -type d | head -15

Length of output: 502

Asset import path is invalid and will cause a module resolution error.

The import path ../shared/assets/img/chat-with-us-icon.svg is broken:

  • No shared/ directory exists in the repository
  • No SVG assets exist in the codebase
  • The ../ prefix from the repository root exits the repository entirely

Verify the correct path to the asset file and update the import, or add the missing asset to the repository.

🤖 Prompt for AI Agents 
In index.tsx around line 17, the import path
"../shared/assets/img/chat-with-us-icon.svg" is invalid (no shared dir or SVGs
and the ../ escapes the repo); update the import to the correct relative path
inside the project (for example point to the existing assets directory under src
or public) or add the missing SVG at the specified location, and ensure the path
uses the correct casing and extension so the module resolver can find it.


interface ChatButtonProps {
salesButtonAction: () => void;
}

export const ChatButton = ({ salesButtonAction }: ChatButtonProps) => {
const [showOptions, setShowOptions] = useState(false);
Copy link

@gemini-code-assist gemini-code-assist bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The showOptions state is unused and can be removed. The Chakra UI Menu component handles its own open/close state, so you don't need to manage it manually. Consequently, the onClick handler on the IconButton at line 57, which only updates this state, should also be removed.

Copy link

@refacto-visz refacto-visz bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused State Variable

State variable 'showOptions' is declared and updated but never actually used in component logic. The Menu component manages its own internal state, making this redundant state management that could cause confusion and unnecessary re-renders.

Standards
  • Algorithm-Correctness-State-Management
  • Logic-Verification-Component-State

Copy link

@coderabbitai coderabbitai bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Remove unused state.

The showOptions state is never actually used. The Chakra UI Menu component manages its own open/close state internally, making this local state redundant.

Apply this diff to remove the unused state:

-  const [showOptions, setShowOptions] = useState(false);

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In index.tsx around line 24, remove the unused React state declaration "const
[showOptions, setShowOptions] = useState(false);" because the Chakra UI Menu
handles its own open/close state; delete the import/use of this state and any
references to setShowOptions so the component no longer contains redundant
state.


const openChat = () => {
if (window?.Intercom) {
window?.Intercom('show');
}
Comment on lines +27 to +29
Copy link

@gemini-code-assist gemini-code-assist bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Accessing window.Intercom directly is not type-safe. To improve type safety and developer experience (e.g., autocompletion), you should extend the global Window interface. You can do this by creating a type declaration file (e.g., global.d.ts or intercom.d.ts) in your project with content like:

declare global {
  interface Window {
    Intercom?: (command: 'show' | 'hide' | 'shutdown', ...args: any[]) => void;
  }
}

// This is needed to make the file a module.
export {};

This will make TypeScript aware of the Intercom function on the window object.

Comment on lines +27 to +29
Copy link

@refacto-visz refacto-visz bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DOM-based XSS Risk

Direct access to global window object and execution of Intercom method without validation creates DOM-based XSS vulnerability. Malicious scripts could override window.Intercom to execute arbitrary code when openChat is triggered.

    if (window?.Intercom && typeof window.Intercom === 'function') {
      try {
        window.Intercom('show');
      } catch (error) {
        console.error('Intercom error:', error);
      }
    }
Commitable Suggestion
Suggested change
if (window?.Intercom) {
window?.Intercom('show');
}
if (window?.Intercom && typeof window.Intercom === 'function') {
try {
window.Intercom('show');
} catch (error) {
console.error('Intercom error:', error);
}
}
Standards
  • CWE-79
  • OWASP-A03
  • NIST-SSDF-PW.1

};

const openEmail = () => {
window.open('mailto:support@devdynamics.ai');
Copy link

@gemini-code-assist gemini-code-assist bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This hardcoded email address should be extracted to a constant, preferably in a shared constants file. This improves maintainability, as the email address is defined in a single place and can be easily updated if it changes.

Copy link

@refacto-visz refacto-visz bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unsafe Window Operation

Direct window.open call without null safety check creates runtime failure risk. Server-side rendering or restricted browser environments cause TypeError exceptions that crash component functionality.

Standards
  • ISO-IEC-25010-Reliability-Fault-Tolerance
  • ISO-IEC-25010-Functional-Correctness-Appropriateness

};
return (
<Box
alignSelf={'center'}
borderRadius={'4px'}
border={'1px solid #4d4dff'}
_hover={{ backgroundColor: 'transparent' }}
height={'95%'}
Comment on lines +39 to +41
Copy link

@gemini-code-assist gemini-code-assist bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

These style properties use hardcoded values ('1px solid #4d4dff', '95%'). It's a best practice to use theme tokens from your design system for colors, spacing, and sizing to ensure consistency and make future theme updates easier. This also applies to mr={'20px'} on line 62 and the icon size={20} on lines 63, 68, and 72.

>
<Menu>
<Tooltip
aria-label="Talk to us"
Copy link

@gemini-code-assist gemini-code-assist bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The aria-label prop on the Tooltip is redundant. The label prop already provides the visual text, and the interactive element inside (IconButton on line 52) has its own aria-label for screen readers. You can safely remove this prop to simplify the code.

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)}
Copy link

@gemini-code-assist gemini-code-assist bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This onClick handler is redundant because the Menu component handles its own open/close state. This handler updates the showOptions state (defined on line 24), which is unused. This line and the corresponding useState on line 24 can be removed.

icon={<Image src={ChatWithUsIcon} />}
Copy link

@codeant-ai codeant-ai bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: Add an alt attribute to the Image used in the IconButton's icon prop for accessibility. [best practice]

Severity Level: Minor ⚠️

Suggested change
icon={<Image src={ChatWithUsIcon} />}
icon={<Image src={ChatWithUsIcon} alt="Chat with us" />}
Why it matters? ⭐

Adding an alt prop (e.g. alt="Chat with us") to the Image used as the IconButton's icon is an accessibility improvement — it gives assistive tech meaningful text. This is a small, safe change that directly improves UX and is actionable. The actual PR line matches the snippet above, so the improved code should be:

icon={Chat with us}

Prompt for AI Agent 🤖 
This is a comment left during a code review.

**Path:** index.tsx
**Line:** 58:58
**Comment:**
	*Best Practice: Add an `alt` attribute to the `Image` used in the IconButton's `icon` prop for accessibility.

Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.

/>
</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>
);
};