Preserve white space sequences in user chat messages

[bnodir]

Please provide us with the following information:

This issue is for a: (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

When user enters a message with multiple lines in the chat, the lines are not preserved, and the complete message is displayed in a single line.

Any log messages given by the failure

No specific log errors. It's more related to CSS.

Expected/desired behavior

When a user enters a message with lines breaks, the message should be displayed in the same format as it was entered with lines preserved.

OS and Version?

Windows 10, 11 with any web browser.

azd version?

Not applicable.

Versions

Not applicable.

Mention any other details that might be useful

The following modification to the CSS resolves the issue:

UserChatMessage.module.css

.container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    max-width: 80%;
    margin-left: auto;
}

.message {
    white-space: pre-wrap;
    padding: 20px;
    background: #e8ebfa;
    border-radius: 8px;
    box-shadow:
        0px 2px 4px rgba(0, 0, 0, 0.14),
        0px 0px 2px rgba(0, 0, 0, 0.12);
    outline: transparent solid 1px;
}

Please, could you confirm if it has no adverse effects for RAG and answer generation?

---

Thanks! We'll be in touch soon.