Overview

HTML content in AI responses sometimes renders incorrectly in the chatbox. See attached screenshot where the h1 tag is not displaying properly.
Issue

Proposed resolution

User interface changes

CommentFileSizeAuthor
#6 Screenshot 2025-07-10 at 8.20.37 AM.png146.32 KBmred9
#2 image (3).png153.68 KBlibbna
Drupal-Experience-Builder-07-01-2025_12_59_PM.png89.18 KBnarendrar

Issue fork experience_builder-3533338

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

narendrar created an issue. See original summary.

libbna’s picture

libbna commented
StatusFileSize
new image (3).png153.68 KB

Hi @narendrar,
To reproduce the issue, I manually added the h1 tag using the browser's inspect tool. The problem seems to be related to the line-height. However, I wasn't able to pinpoint exactly where the code needs to be updated. It would be great if you could guide me on this.

Also, I noticed that every time I gave a prompt in the chatbot, the response was returned as plain text wrapped inside a p tag.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Assigned: Unassigned » mred9

mred9 made their first commit to this issue’s fork.

mred9 opened merge request !1263

mred9’s picture

mred9 commented
StatusFileSize
new Screenshot 2025-07-10 at 8.20.37 AM.png146.32 KB

The `deepchat` component uses a fixed line height. I've applied a line height ratio of 1.26. I also adjusted the font sizes for the various H tags to improve the appearance.
Updated text design

mred9’s picture

mred9 commented
Status: Active » Needs review
narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented
Assigned: mred9 » Unassigned
Status: Needs review » Reviewed & tested by the community

Tested manually by changing h1..h5 tags and response is now properly displayed. Moving it to RTBC

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented

Saving credit

  • tim.plunkett committed 6e8e09fe on 0.x authored by mred9 
    Issue #3533338 by mred9, narendrar, libbna: Design of AI response needs...
tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Reviewed & tested by the community » Fixed

Merged!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.