Skip to content
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

Jump to bottom

3028: Show user icon after robot message in Chat #3078

Merged
merged 11 commits into from
Feb 18, 2025
Merged

3028: Show user icon after robot message in Chat #3078

merged 11 commits into from
Feb 18, 2025

Conversation

hannaseithe
Copy link
Contributor

@hannaseithe hannaseithe commented Feb 11, 2025 •
edited
Loading

Short Description

I added a condition to check whether between two messages the _automaticAnswer status changed. Now if a human answers after a bot (or vice versa) we will show the human icon (or the bot icon) after the switch.

Proposed Changes

  • the handling of the condition was moved into the ChatMessage Component, which receives the previousMessage as a property now
  • I added a second OR condition to show the message's human icon when a human writes directly (from zammad) after the bot (or vice versa)
  • I kept the original condition of always showing the icon for every message after isUserAuthor changes
  • added Integration Tests which caused a few more additional changes:
    • mocked the module 'react-inlinesvg' to show an svg element, since for some reason the original does not get rendered
    • added a title property to the Icon Element generated in Text Message (both for accessibility and testability)
    • added two chat translations 'human' and 'bot' to be used in the title property of the Chat Icon
  • also had to do some refactoring because of Code Complexity (Failed on CodeScene)

Side Effects

  • affects ChatMessage
  • the new mock of 'react-inlinesvg' will be used in all tests that mock the module (before was empty)
  • now every Chat Icon has a title child element with the translations:
    - BotIcon: Chatbot (German) / Chatbot (English)
    - HumanIcon: Berater*in (German) / Advisor (English)

Testing

  • there should be an icon showing both from the switch between human to bot and bot to human
  • the original Icon showing behavior should be not changed (showing an icon every time we switch between author and human/bot from zammad)

Fixes: #3028

@hannaseithe
Copy link
Contributor Author

I forgot to add unit tests. Will do so now. Please wait before review

@steffenkleinle
Copy link
Member

I forgot to add unit tests. Will do so now. Please wait before review

Thanks for thinking of that :) Feel free to just mark the PR as Draft. You can do so in the top right:
image

@hannaseithe hannaseithe marked this pull request as draft February 11, 2025 12:00
@svenseeberg svenseeberg mentioned this pull request Feb 15, 2025
Open
@steffenkleinle steffenkleinle force-pushed the 3028--Show-user-icon-for-human-message-in-chat-after-robot branch from 280bb34 to 89a1a86 Compare February 17, 2025 15:46
@hannaseithe hannaseithe force-pushed the 3028--Show-user-icon-for-human-message-in-chat-after-robot branch from 89a1a86 to 252b95a Compare February 18, 2025 08:02
@hannaseithe hannaseithe force-pushed the 3028--Show-user-icon-for-human-message-in-chat-after-robot branch from 0008c7e to 07c4bbc Compare February 18, 2025 09:05
steffenkleinle
steffenkleinle approved these changes Feb 18, 2025
View reviewed changes
Copy link
Member

@steffenkleinle steffenkleinle left a comment

Choose a reason for hiding this comment

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

Tested on firefox, nice work!

web/src/components/__tests__/ChatConversation.spec.tsx Outdated Show resolved Hide resolved
web/src/components/__tests__/ChatConversation.spec.tsx Show resolved Hide resolved
web/src/components/__tests__/ChatConversation.spec.tsx Outdated Show resolved Hide resolved
web/src/components/__tests__/ChatConversation.spec.tsx Outdated Show resolved Hide resolved
web/src/components/__tests__/ChatConversation.spec.tsx Outdated Show resolved Hide resolved
steffenkleinle
steffenkleinle reviewed Feb 18, 2025
View reviewed changes
translations/translations.json Outdated Show resolved Hide resolved
translations/translations.json Outdated Show resolved Hide resolved
@steffenkleinle steffenkleinle marked this pull request as ready for review February 18, 2025 09:11
steffenkleinle
steffenkleinle approved these changes Feb 18, 2025
View reviewed changes
Copy link
Member

@steffenkleinle steffenkleinle left a comment

Choose a reason for hiding this comment

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

Nice work!

web/src/components/ChatMessage.tsx Outdated Show resolved Hide resolved
LeandraH
LeandraH approved these changes Feb 18, 2025
View reviewed changes
Copy link
Contributor

@LeandraH LeandraH left a comment

Choose a reason for hiding this comment

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

Very nice, thank you! Tested in Firefox

@hannaseithe hannaseithe merged commit 824fdb3 into main Feb 18, 2025
7 checks passed
@hannaseithe hannaseithe deleted the 3028--Show-user-icon-for-human-message-in-chat-after-robot branch February 18, 2025 13:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@LeandraH LeandraH LeandraH approved these changes

@steffenkleinle steffenkleinle steffenkleinle approved these changes

@f1sh1918 f1sh1918 Awaiting requested review from f1sh1918 f1sh1918 is a code owner

@bahaaTuffaha bahaaTuffaha Awaiting requested review from bahaaTuffaha bahaaTuffaha is a code owner

@lunars97 lunars97 Awaiting requested review from lunars97 lunars97 is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Zammad user messages are summarized with robot icon
3 participants
@hannaseithe @steffenkleinle @LeandraH