Skip to content

merge #340

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
firefoxd92-sys wants to merge 2 commits into
base: main
Choose a base branch
from
Open

merge #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5610861
first update
Mawlow Dec 8, 2025
5dd16c1
Changing bot name
Mawlow Dec 9, 2025
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
2 changes: 1 addition & 1 deletion dist/components/Bot.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/features/bubble/components/BubbleButton.d.ts.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/web.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/web.umd.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions src/components/Bot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2619,12 +2619,6 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
/>
)}
</div>
<Badge
footer={props.footer}
badgeBackgroundColor={props.badgeBackgroundColor}
poweredByTextColor={props.poweredByTextColor}
botContainer={botContainer}
/>
</div>
</div>
)}
Expand Down
103 changes: 55 additions & 48 deletions src/features/bubble/components/BubbleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ type Props = ButtonTheme & {
toggleBot: () => void;
setButtonPosition: (position: { bottom: number; right: number }) => void;
dragAndDrop: boolean;
autoOpen?: boolean; // Optional parameter to control automatic window opening
openDelay?: number; // Optional parameter for delay time in seconds
autoOpenOnMobile?: boolean; // Optional parameter for opening on mobile
autoOpen?: boolean;
openDelay?: number;
autoOpenOnMobile?: boolean;
};

const defaultButtonColor = '#3B81F6';
Expand All @@ -18,8 +18,6 @@ const defaultBottom = 20;
const defaultRight = 20;

export const BubbleButton = (props: Props) => {
const buttonSize = getBubbleButtonSize(props.size);
Copy link

@gemini-code-assist gemini-code-assist bot Dec 9, 2025

Choose a reason for hiding this comment

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

high

The buttonSize variable, which was calculated based on the size prop, has been removed. Consequently, the button's dimensions and related calculations now use hardcoded values (e.g., height: '56px', min-width: '180px', and 200 for maxRight). This has two main implications:

  1. Breaking Change: The size prop from ButtonTheme is no longer used to control the button's dimensions, which is a breaking change for consumers of this component. If this is intentional, it should be documented.
  2. Maintainability: The use of magic numbers makes the code harder to read and maintain. These values should be extracted into named constants.


const [position, setPosition] = createSignal({
bottom: props.bottom ?? defaultBottom,
right: props.right ?? defaultRight,
Expand All @@ -46,7 +44,7 @@ export const BubbleButton = (props: Props) => {
const newRight = initialRight + deltaX;

const screenWidth = window.innerWidth;
const maxRight = screenWidth - buttonSize;
const maxRight = screenWidth - 200; // Adjusted for wider button

const newPosition = {
right: Math.min(Math.max(newRight, defaultRight), maxRight),
Expand All @@ -64,17 +62,16 @@ export const BubbleButton = (props: Props) => {

const handleButtonClick = () => {
props.toggleBot();
setUserInteracted(true); // Mark that the user has interacted
setUserInteracted(true);
if (window.innerWidth <= 640) {
setIsSmallScreen(true);
}
};

createEffect(() => {
// Automatically open the chat window if autoOpen is true
if (props.autoOpen && (props.autoOpenOnMobile || window.innerWidth > 640)) {
const delayInSeconds = props.openDelay ?? 2; // Default to 2 seconds if openDelay is not defined
const delayInMilliseconds = delayInSeconds * 1000; // Convert seconds to milliseconds
const delayInSeconds = props.openDelay ?? 2;
const delayInMilliseconds = delayInSeconds * 1000;
setTimeout(() => {
if (!props.isBotOpened && !userInteracted()) {
props.toggleBot();
Expand All @@ -89,57 +86,67 @@ export const BubbleButton = (props: Props) => {
part="button"
onClick={handleButtonClick}
onMouseDown={onMouseDown}
class={`fixed shadow-md rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in`}
class={`fixed shadow-md rounded-full hover:scale-105 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in gap-2 px-4`}
style={{
'background-color': props.backgroundColor ?? defaultButtonColor,
'z-index': 42424242,
right: `${position().right}px`,
bottom: `${position().bottom}px`,
width: `${buttonSize}px`,
height: `${buttonSize}px`,
height: '56px',
cursor: props.dragAndDrop ? 'grab' : 'pointer',
'min-width': '180px',
}}
Comment on lines 90 to 98
Copy link

@gemini-code-assist gemini-code-assist bot Dec 9, 2025

Choose a reason for hiding this comment

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

medium

The button's style is static, with a min-width of 180px. When the bot is open (isBotOpened is true), the button only contains a small close icon, which can look awkward on a large button. Consider making the button's style conditional to shrink it to a smaller, perhaps circular, button when the bot is open. This would be more conventional for a close button and improve the user experience.

>
<Show when={isNotDefined(props.customIconSrc)} keyed>
<svg
viewBox="0 0 24 24"
<Show when={!props.isBotOpened}>
{/* Logo/Icon */}
<Show when={isNotDefined(props.customIconSrc)} keyed>
<svg
viewBox="0 0 24 24"
style={{
stroke: props.iconColor ?? defaultIconColor,
}}
class="stroke-2 fill-transparent"
width={32}
height={32}
>
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
</Show>
<Show when={props.customIconSrc}>
<img
src={props.customIconSrc}
class="rounded-full object-cover"
style={{
width: '32px',
height: '32px',
}}
alt="AquaSolar logo"
Copy link

@gemini-code-assist gemini-code-assist bot Dec 9, 2025

Choose a reason for hiding this comment

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

medium

The alt text "AquaSolar logo" is hardcoded. This is specific to one use case and harms reusability. It's also an accessibility concern if the image is different. It would be better to pass this as a prop, for instance customIconAltText.

/>
</Show>

{/* Text */}
<span
style={{
stroke: props.iconColor ?? defaultIconColor,
color: props.iconColor ?? defaultIconColor,
'font-size': '16px',
'font-weight': '600',
'white-space': 'nowrap',
}}
class={
`stroke-2 fill-transparent absolute duration-200 transition ` + (props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100')
}
width={buttonSize * 0.6}
height={buttonSize * 0.6}
>
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
</Show>
<Show when={props.customIconSrc}>
<img
src={props.customIconSrc}
class={'rounded-full object-cover' + (props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100')}
style={{
width: `${buttonSize * 0.6}px`,
height: `${buttonSize * 0.6}px`,
}}
alt="Bubble button icon"
/>
Ask Aquamen🤖
Copy link

@gemini-code-assist gemini-code-assist bot Dec 9, 2025

Choose a reason for hiding this comment

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

medium

The button text "Ask Aquamen🤖" is hardcoded. This limits the reusability of the component. Consider passing this text as a prop, for example buttonText, to make the component more generic.

</span>
</Show>

<svg
viewBox="0 0 24 24"
style={{ fill: props.iconColor ?? 'white' }}
class={`absolute duration-200 transition ` + (props.isBotOpened ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-180 opacity-0')}
width={buttonSize * 0.6}
height={buttonSize * 0.6}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
/>
</svg>
{/* Close icon when opened */}
<Show when={props.isBotOpened}>
<svg viewBox="0 0 24 24" style={{ fill: props.iconColor ?? 'white' }} width={24} height={24}>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
/>
</svg>
</Show>
</button>
</Show>
);
Expand Down