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

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a56b07a
3028: Added watching for isAutomaticAnswer changes between messages
hannaseithe Feb 11, 2025
0049c7b
3028: Add icon testing proposal
steffenkleinle Feb 11, 2025
a4f5055
3028: Integrationtests
hannaseithe Feb 17, 2025
0f4d2d5
3028: yarn prettier
hannaseithe Feb 17, 2025
7647b1b
3028: Translations for Chat Icon Title
hannaseithe Feb 17, 2025
252b95a
3028: Fixed Code Complexity
hannaseithe Feb 18, 2025
07c4bbc
3028: Fixed Code Complexity and Correct Translations
hannaseithe Feb 18, 2025
6c41f75
3028: Tests adjusted and Translations fixed
hannaseithe Feb 18, 2025
872bed9
3028: Moved functionality into Chat Message + Test fix
hannaseithe Feb 18, 2025
4a68c94
3028: Simplified expression
hannaseithe Feb 18, 2025
9897bc5
Merge branch 'main' into 3028--Show-user-icon-for-human-message-in-ch…
hannaseithe Feb 18, 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
10 changes: 1 addition & 9 deletions web/src/components/ChatConversation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,6 @@
isVisible: boolean
}

const shouldShowIcon = (index: number, message: ChatMessageModel, messages: ChatMessageModel[]): boolean => {
const previousMessage = messages[index - 1]
return (
previousMessage?.userIsAuthor !== message.userIsAuthor ||
previousMessage.isAutomaticAnswer !== message.isAutomaticAnswer
)
}

const TypingIndicator = ({ isVisible }: TypingIndicatorProps): ReactElement | null =>
isVisible ? (
<TypingIndicatorWrapper>
Expand Down Expand Up @@ -89,7 +81,7 @@
<>
{!hasError && <InitialMessage>{t('initialMessage')}</InitialMessage>}
{messages.map((message, index) => (
<ChatMessage message={message} key={message.id} showIcon={shouldShowIcon(index, message, messages)} />
<ChatMessage message={message} key={message.id} previousMessage={messages[index - 1]} />

Check notice on line 84 in web/src/components/ChatConversation.tsx

View check run for this annotation

CodeScene Delta Analysis / CodeScene Cloud Delta Analysis (main)

✅ No longer an issue: Complex Method 

ChatConversation is no longer above the threshold for cyclomatic complexity
))}
<TypingIndicator isVisible={typingIndicatorVisible} />
<div ref={messagesEndRef} />
Expand Down
7 changes: 5 additions & 2 deletions web/src/components/ChatMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const Circle = styled.div`
font-size: ${props => props.theme.fonts.decorativeFontSizeSmall};
`

type ChatMessageProps = { message: ChatMessageModel; showIcon: boolean }
type ChatMessageProps = { message: ChatMessageModel; previousMessage: ChatMessageModel | undefined }

const getIcon = (userIsAuthor: boolean, isAutomaticAnswer: boolean, t: TFunction<'chat'>): ReactElement => {
if (userIsAuthor) {
Expand All @@ -57,9 +57,12 @@ const getIcon = (userIsAuthor: boolean, isAutomaticAnswer: boolean, t: TFunction
return <Icon src={icon} title={isAutomaticAnswer ? t('bot') : t('human')} />
}

const ChatMessage = ({ message, showIcon }: ChatMessageProps): ReactElement => {
const ChatMessage = ({ message, previousMessage }: ChatMessageProps): ReactElement => {
const { t } = useTranslation('chat')
const { body, userIsAuthor, isAutomaticAnswer } = message
const hasAuthorChanged = message.userIsAuthor !== previousMessage?.userIsAuthor
const hasAutomaticAnswerChanged = message.isAutomaticAnswer !== previousMessage?.isAutomaticAnswer
const showIcon = previousMessage ? hasAuthorChanged || hasAutomaticAnswerChanged : true

return (
<Container $isAuthor={userIsAuthor}>
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/__tests__/ChatConversation.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ describe('ChatConversation', () => {
expect(getByTestId(testMessages[0]!.id)).toBeTruthy()
expect(getByText('...')).toBeTruthy()
expect(getByTestId(testMessages[1]!.id)).toBeTruthy()
expect(getByText('chat:humanIcon')).toBeTruthy()
expect(getByText('chat:human')).toBeTruthy()
expect(getByText('...')).toBeTruthy()

act(() => jest.runAllTimers())
Expand Down
Loading