Update chatbox design and add send icon SVG file #461
Conversation
…reedompraise/issue406
…reedompraise/issue406
This commit improves the resizing behavior of the chatbox textarea. Previously, the textarea would resize vertically as the user typed, but it would not reset to its original height after sending a message. This commit fixes that issue by resetting the height of the textarea to "auto" after sending a message. Co-authored-by: John Solly <[email protected]>
This commit increases the height of the chatbox in the main.css file to improve the user experience. The chatbox height was increased from 500px to 550px to provide more space for messages. This change ensures that users have enough room to view and interact with the chatbox comfortably. Co-authored-by: John Solly <[email protected]>
WalkthroughThe recent updates enhance the chatbox component by modifying its structure and functionality. Key changes include a new header with a simplified title and timestamp, predefined messages for immediate context, and an added close button for user convenience. CSS styles have been refined for improved aesthetics, while JavaScript functionalities have been updated to enable dynamic adjustments and better user interactions. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
app/staticfiles/svg/close-icon.svgis excluded by!**/*.svgapp/staticfiles/svg/send-icon.svgis excluded by!**/*.svg
Files selected for processing (3)
- app/blog/templates/blog/parts/chatbox.html (1 hunks)
- app/staticfiles/css/main.css (22 hunks)
- app/staticfiles/js/chatbox.js (3 hunks)
Additional context used
Biome
app/staticfiles/css/main.css
[error] 869-869: Expected a selector but instead found ')'.
Expected a selector here.
(parse)
Additional comments not posted (13)
app/staticfiles/js/chatbox.js (5)
7-9: LGTM! Initialization of DOM elements is correct.The constructor correctly initializes the new close button along with other elements.
15-38: LGTM! Event listeners and MutationObserver are well-implemented.The
displaymethod effectively manages user interactions and dynamic UI adjustments.
44-46: LGTM! Chatbox state toggling is correctly handled.The
toggleStatemethod efficiently manages the visibility of the chatbox and its icon.
56-58: LGTM! Message sending and textarea reset are correctly implemented.The
onSendButtonmethod efficiently sends messages and resets the textarea.
Line range hint
62-66: LGTM! Chatbox message update is correctly handled.The
updateChatTextmethod efficiently adds new messages to the chatbox.app/blog/templates/blog/parts/chatbox.html (4)
10-17: LGTM! Chatbox header is well-structured and accessible.The header includes a clear title, timestamp, and an accessible close button.
19-22: LGTM! Initial bot messages enhance user engagement.The predefined messages provide context and improve the initial interaction.
27-42: LGTM! Chatbox footer is well-structured and functional.The footer includes a clear input area and branding, enhancing user interaction.
45-47: LGTM! Chatbox toggle button is correctly positioned and accessible.The button is well-placed and includes an accessible label.
app/staticfiles/css/main.css (4)
47-51: LGTM! Gradient variables are well-defined.The new CSS variables provide flexibility for styling.
948-954: LGTM! Chatbox styling enhances usability and aesthetics.The increased dimensions and gradients improve the overall appearance.
1077-1090: LGTM! Message item styling is effective.The styles enhance readability and provide interactive feedback on hover.
1097-1106: LGTM! Footer styling is well-executed.The gradients and padding enhance the footer's appearance and usability.
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- app/staticfiles/css/main.css (22 hunks)
Additional context used
Biome
app/staticfiles/css/main.css
[error] 869-869: Expected a selector but instead found ')'.
Expected a selector here.
(parse)
Additional comments not posted (5)
app/staticfiles/css/main.css (5)
47-51: LGTM! Gradient definition is correct.The secondary gradient is defined correctly and enhances the visual design.
783-783: LGTM! Code styling is consistent.The styling for inline code elements is appropriate and consistent with typical practices.
924-928: LGTM! Chatbox icon styling is appropriate.The styling for the chatbox icon is clear and suitable for a clickable element.
948-954: LGTM! Chatbox support styling enhances usability.The increased height and styling changes align well with the PR objectives to improve usability.
1013-1017: LGTM! Chatbox support styling is consistent with redesign.The modifications enhance the visual appeal and are consistent with the overall chatbox redesign.
|
@jsolly awaiting your review |
|
Looking pretty good @freedompraise Here are some thoughts: You might want to take a look at the formatting of the blog post title + date for blog post cards for inspiration Instead of having a button background color on hover, consider adjusting the icon's color. For example, if the user hovers over the 'x' or the send message button, the SVG can change color instead of the whole background changing color. When you hover over the social icons on my website, I do something similar. But instead of changing the color, I adjust the opacity and size.
|
| <button aria-label="Toggle chatbox"><img id="chatbox-icon" src="{% static 'svg/chatbox-icon.svg' %}" | ||
| alt="Chatbox icon" /></button> | ||
| <button aria-label="Toggle chatbox"> | ||
| <img id="chatbox-icon" src="{% static 'svg/chatbox-icon.svg' %}" alt="Chatbox icon" /> |
There was a problem hiding this comment.
If you end up changing the icon color on hover, you might need to embed the svg directly in the HTML instead of using the img tag.
Alright, noted |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- app/blog/templates/blog/parts/chatbox.html (1 hunks)
- app/staticfiles/css/main.css (23 hunks)
Additional context used
Biome
app/staticfiles/css/main.css
[error] 869-869: Expected a selector but instead found ')'.
Expected a selector here.
(parse)
Additional comments not posted (10)
app/blog/templates/blog/parts/chatbox.html (5)
10-17: LGTM!The header section updates improve the user interface by making it more informative and interactive.
The code changes are approved.
19-22: LGTM!The message display area updates make the chatbox more engaging by providing immediate context to the user.
The code changes are approved.
27-37: LGTM!The footer section updates improve the user experience by making the chatbox more user-friendly and visually appealing.
The code changes are approved.
40-42: LGTM!The new footer section enhances the branding and informational aspect of the chatbox.
The code changes are approved.
45-47: LGTM!The chatbox button update improves the visual appeal of the chatbox.
The code changes are approved.
app/staticfiles/css/main.css (5)
47-51: LGTM!The new CSS variables for gradients improve the visual appeal of the chatbox.
The code changes are approved.
933-941: LGTM!The chatbot container updates improve the usability and aesthetics of the chatbox.
The code changes are approved.
948-954: LGTM!The chatbox support section updates improve the visual appeal and functionality of the chatbox.
The code changes are approved.
1023-1031: LGTM!The chatbox header updates improve the visual appeal and functionality of the chatbox.
The code changes are approved.
1099-1104: LGTM!The chatbox footer updates improve the visual appeal and functionality of the chatbox.
The code changes are approved.
There was a problem hiding this comment.
Actionable comments posted: 4
Outside diff range, codebase verification and nitpick comments (1)
app/staticfiles/css/main.css (1)
954-968: Review chatbox styling for usability and aesthetics.The chatbox styling includes a fixed position, dimensions, and shadow effects, which are well-suited for a floating interface element. However, consider the following enhancements for better user experience:
- Accessibility: Ensure that the contrast ratios meet WCAG guidelines, especially for text and background colors.
- Responsiveness: Verify that the chatbox dimensions and position adjust well on mobile devices or provide alternative layouts for smaller screens.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- app/blog/templates/blog/parts/chatbox.html (1 hunks)
- app/staticfiles/css/main.css (23 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/blog/templates/blog/parts/chatbox.html
Additional context used
Biome
app/staticfiles/css/main.css
[error] 869-869: Expected a selector but instead found ')'.
Expected a selector here.
(parse)
Additional comments not posted (2)
app/staticfiles/css/main.css (2)
1625-1631: Ensure animations are appropriate for reduced motion preferences.The CSS rules within the media query for
prefers-reduced-motion: reducecorrectly disable animations for users who prefer reduced motion. This is an excellent practice for accessibility. Ensure that all potentially motion-inducing effects are covered by this setting.
926-937: Refine SVG icon hover effects in chatbox.The hover effects for SVG icons in the chatbox are defined to change the fill color to white. This is a good use of CSS for visual feedback. However, ensure that the
!importantrule is necessary, as it can make future CSS maintenance more challenging.Verification successful
Unique use of
!importantwith SVG fill propertiesThe use of
!importantwith SVG fill properties in the chatbox CSS appears to be unique within the codebase. This suggests that the rule is not consistently applied elsewhere, which may simplify future CSS maintenance. Consider whether the!importantrule is necessary in this context.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for other instances where `!important` is used with SVG fill properties to ensure consistency. # Test: Search for SVG fill properties using `!important`. Expect: Consistent usage or none. rg --type css 'svg.*fill:.*!important'Length of output: 40
Script:
#!/bin/bash # Description: Re-check for instances where `!important` is used with SVG fill properties in CSS files. # Test: Search for any usage of `!important` with SVG fill properties, using a broader pattern. rg --type css 'fill:.*!important.*svg'Length of output: 40
| /* ============= | ||
| Typography | ||
| ============= */ | ||
|
|
||
| p>code { | ||
| p > code { |
There was a problem hiding this comment.
Enhance readability of inline code elements.
The styling for p > code uses a specific color which might not be sufficiently contrasted against some backgrounds. Consider adjusting the color or adding a background to enhance readability.
- p > code {
- color: #e76f51;
- font-family: monospace;
- font-size: 0.95em;
- }
+ p > code {
+ color: #e76f51; /* Consider a darker shade for better contrast */
+ background-color: #f4f4f4; /* Adding a light background for better visibility */
+ font-family: monospace;
+ font-size: 0.95em;
+ padding: 2px 4px; /* Adding padding for better text separation */
+ }Committable suggestion was skipped due to low confidence.
| --secondary-gradient: linear-gradient( | ||
| 268.91deg, | ||
| #0d6efd -2.14%, | ||
| #007bff 99.69% | ||
| ); |
There was a problem hiding this comment.
Refactor gradient definitions for consistency.
The gradient definitions for --secondary-gradient are split across multiple lines, which might affect readability. Consider consolidating these into a single line for consistency with other CSS properties.
- --secondary-gradient: linear-gradient(
- 268.91deg,
- #0d6efd -2.14%,
- #007bff 99.69%
- );
+ --secondary-gradient: linear-gradient(268.91deg, #0d6efd -2.14%, #007bff 99.69%);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --secondary-gradient: linear-gradient( | |
| 268.91deg, | |
| #0d6efd -2.14%, | |
| #007bff 99.69% | |
| ); | |
| --secondary-gradient: linear-gradient(268.91deg, #0d6efd -2.14%, #007bff 99.69%); |
app/staticfiles/css/main.css
Outdated
| .messages__item::after { | ||
| content: attr(data-time); | ||
| position: absolute; | ||
| bottom: -20px; | ||
| right: 10px; | ||
| font-size: 0.75rem; | ||
| color: #888; | ||
| opacity: 0; | ||
| transition: opacity 0.3s; | ||
| } | ||
|
|
||
| .messages__item:hover::after { | ||
| opacity: 1; | ||
| } |
There was a problem hiding this comment.
Improve message timestamp visibility.
The CSS for showing timestamps on hover (messages__item::after) is a clever feature. However, the opacity transition might be too subtle. Consider making the timestamp slightly more visible even when not hovered to aid in user orientation and context.
- .messages__item::after {
- opacity: 0;
- transition: opacity 0.3s;
- }
+ .messages__item::after {
+ opacity: 0.3; /* Slightly visible by default */
+ transition: opacity 0.3s;
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .messages__item::after { | |
| content: attr(data-time); | |
| position: absolute; | |
| bottom: -20px; | |
| right: 10px; | |
| font-size: 0.75rem; | |
| color: #888; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .messages__item:hover::after { | |
| opacity: 1; | |
| } | |
| .messages__item::after { | |
| content: attr(data-time); | |
| position: absolute; | |
| bottom: -20px; | |
| right: 10px; | |
| font-size: 0.75rem; | |
| color: #888; | |
| opacity: 0.3; /* Slightly visible by default */ | |
| transition: opacity 0.3s; | |
| } | |
| .messages__item:hover::after { | |
| opacity: 1; | |
| } |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- app/blog/templates/blog/parts/chatbox.html (1 hunks)
- app/staticfiles/css/main.css (23 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/blog/templates/blog/parts/chatbox.html
Additional context used
Biome
app/staticfiles/css/main.css
[error] 869-869: Expected a selector but instead found ')'.
Expected a selector here.
(parse)
Additional comments not posted (8)
app/staticfiles/css/main.css (8)
783-783: Enhance readability of inline code elements.The styling for
p > codeuses a specific color which might not be sufficiently contrasted against some backgrounds. Consider adjusting the color or adding a background to enhance readability.- p > code { - color: #e76f51; - font-family: monospace; - font-size: 0.95em; - } + p > code { + color: #e76f51; /* Consider a darker shade for better contrast */ + background-color: #f4f4f4; /* Adding a light background for better visibility */ + font-family: monospace; + font-size: 0.95em; + padding: 2px 4px; /* Adding padding for better text separation */ + }
848-869: Correct syntax error in CSS selector.There's a syntax error due to an unmatched closing parenthesis in the
:isselector. This issue was previously flagged but not corrected. Ensure to fix the selector as follows:- :is( + :is(Tools
Biome
[error] 869-869: Expected a selector but instead found ')'.
Expected a selector here.
(parse)
47-51: Refactor gradient definitions for consistency.The gradient definitions for
--secondary-gradientare split across multiple lines, which might affect readability. Consider consolidating these into a single line for consistency with other CSS properties.- --secondary-gradient: linear-gradient( - 268.91deg, - #0d6efd -2.14%, - #007bff 99.69% - ); + --secondary-gradient: linear-gradient(268.91deg, #0d6efd -2.14%, #007bff 99.69%);
1093-1106: Improve message timestamp visibility.The CSS for showing timestamps on hover (
messages__item::after) is a clever feature. However, theopacitytransition might be too subtle. Consider making the timestamp slightly more visible even when not hovered to aid in user orientation and context.- .messages__item::after { - opacity: 0; - transition: opacity 0.3s; - } + .messages__item::after { + opacity: 0.3; /* Slightly visible by default */ + transition: opacity 0.3s; + }
926-937: Enhance SVG icon interaction in chatbox.The CSS changes for the chatbox buttons include transitions for SVG fills and background colors. This aligns with the feedback from
jsollyabout enhancing button interactions by modifying SVG colors directly. This is a good implementation of the suggested design pattern.#chatbox-container button svg { transition: fill 0.3s ease; } #chatbox-container button:hover svg path { fill: white !important; } #chatbox-container button:hover, #chatbox-container button { background-color: transparent !important; }
954-968: Review chatbox styling adjustments.The chatbox styling includes significant changes to its appearance and functionality. The use of a fixed position, increased dimensions, and a new background color enhances the chatbox's visibility and user interaction. These changes are consistent with the PR's goal to improve the chatbox design.
.chatbox { position: fixed; bottom: 20px; right: 20px; z-index: 123456; } .chatbox__support { background: #f9f9f9; width: 350px; height: 550px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); overflow: hidden; }
1037-1045: Validate new chatbox header styling.The new styling for the chatbox header uses a gradient background, which is visually appealing and aligns with modern design trends. The use of padding, border-radius, and box-shadow enhances the aesthetic and functional aspects of the chatbox header.
.chatbox__header { background: linear-gradient(135deg, #0d6efd, #0a58ca); display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 15px 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
1113-1118: Assess chatbox footer enhancements.The chatbox footer has been updated with a gradient background and shadow effects, which are consistent with the header styling. This creates a cohesive look for the chatbox and enhances the overall user experience.
.chatbox__footer { padding: 10px 20px; background: linear-gradient(135deg, #0a58ca, #0d6efd); box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
|
@jsolly I've effected the changes |
There was a problem hiding this comment.
@freedompraise Looks almost perfect. Nice work!
The only issue I found is that clicking the 'x' button does not close the chatbox. I think this is a regression, cause this was working on your earlier commits.
This commit adjusts the opacity of the textarea placeholder in the main.css file. The opacity was changed from 0 to 0.3 to provide a subtle hint to the user that the textarea is a placeholder. This change improves the user experience by making the placeholder text more visible. Co-authored-by: John Solly <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- app/blog/templates/blog/parts/chatbox.html (1 hunks)
- app/staticfiles/css/main.css (23 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/blog/templates/blog/parts/chatbox.html
Additional context used
Biome
app/staticfiles/css/main.css
[error] 869-869: Expected a selector but instead found ')'.
Expected a selector here.
(parse)
Additional comments not posted (7)
app/staticfiles/css/main.css (7)
47-51: ** Refactor gradient definitions for consistency.**The previous suggestion to consolidate the gradient definition for
--secondary-gradientinto a single line is still applicable:- --secondary-gradient: linear-gradient( - 268.91deg, - #0d6efd -2.14%, - #007bff 99.69% - ); + --secondary-gradient: linear-gradient(268.91deg, #0d6efd -2.14%, #007bff 99.69%);
783-783: ** Enhance readability of inline code elements.**The previous suggestion to adjust the color or add a background to enhance the readability of inline code elements is still applicable:
- p > code { - color: #e76f51; - font-family: monospace; - font-size: 0.95em; - } + p > code { + color: #e76f51; /* Consider a darker shade for better contrast */ + background-color: #f4f4f4; /* Adding a light background for better visibility */ + font-family: monospace; + font-size: 0.95em; + padding: 2px 4px; /* Adding padding for better text separation */ + }
926-928: LGTM!The transition effect on the SVG icons within the chatbox buttons is a nice touch and improves the user experience.
930-932: LGTM!Changing the fill color of the SVG icons on hover is a good way to provide visual feedback to the user.
934-937: LGTM!Setting the background color of the chatbox buttons to transparent allows the chatbox container's background to show through, creating a cohesive look.
940-942: LGTM!Setting the width and height of the chatbox icon ensures a consistent size for the icon.
947-948: LGTM!Setting the bottom and right positions of the chatbot container to 20px positions it in the bottom-right corner of the viewport, which is a common placement for chat widgets.
| :is( | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| strong, | ||
| .list-group-item, | ||
| svg, | ||
| table, | ||
| p, | ||
| blockquote, | ||
| li, | ||
| legend, | ||
| small, | ||
| .word-count, | ||
| label, | ||
| input, | ||
| form, | ||
|
|
||
| ) { |
There was a problem hiding this comment.
Fix the syntax error in the CSS selector.
There is a syntax error due to an unmatched closing parenthesis in the :is selector. This issue was previously flagged but not corrected. Please fix the selector as follows:
- :is(
+ :is(Committable suggestion was skipped due to low confidence.
Tools
Biome
[error] 869-869: Expected a selector but instead found ')'.
Expected a selector here.
(parse)
There was a problem hiding this comment.
@freedompraise almost there.
The chat icon should not change color on hover...at least it shouldn't go completely white. I suspect this is an issue in the CSS class hierarchy.
|
Okay |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- app/blog/templates/blog/parts/chatbox.html (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/blog/templates/blog/parts/chatbox.html
|
@jsolly awaiting your review |
This pull request includes several commits that update the design of the chatbox and add a new send icon SVG file.
The commits also fix the position of the "TOP" button (for scrolling up) to the left side to avoid the open chatbox display over it, as the chatbox is now at the right; following the more conventional styling
It adjusts the position and CSS styles of the chatbox header and footer. Additionally, the commits refactor the chatbox UI to improve the user experience by increasing the height of the chatbox and ensuring that the textarea resizes properly, closing #455
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes