[BUG] Overflown Message View

[Dnouv]

Description:

A long message (typically a link or a code line) greater than the Embedded Chat width overflows out of the container instead of getting line wraps.

Steps to reproduce:

1. In the Embedded Chat, Send a long message with a link or an inline code (something like this) greater than the total width of the chat window. E.g. Send this message,

   [ #17 ](https://github.com/RocketChat/Apps.Github22/issues/17) *Pull Request Review : Merge And  Comment on Pull Requests* : https://github.com/RocketChat/Apps.Github22/issues/17

2. See the error

Expected behavior:

The messages should have line breaks and fit into the Chat window width.

Actual behavior:

(Message sent from the embedded chat was ffffffffvnnnnnnnnnnkkkkkkkkpllllllllllllpppppppppppppppppllllllllllllppppppppppppppnllnlj)

Additional Details

The Embedded Chat component

<RCComponent
              moreOpts={true}
              isClosable={true}
              setClosableState={setOpen}
              width={"auto"}
              height={isSmallScreen ? "30vh" : "55vh"}
              GOOGLE_CLIENT_ID={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
              host={process.env.NEXT_PUBLIC_RC_URL}
              roomId={
                process.env.NEXT_PUBLIC_RC_ROOM_ID
                  ? process.env.NEXT_PUBLIC_RC_ROOM_ID
                  : "GENERAL"
              }
              channelName="General"
              anonymousMode={true}
              isFullScreenFromStart={false}
            />

Thank you!

[Shivam164]

@Dnouv @sidmohanty11 Just a clarification, we don't want to have a scrollbar at the bottom and we want to make lines get wrapped. Am I correct?

[sidmohanty11]

@Shivam164 yup that should be the expected behaviour

[Shivam164]

@sidmohanty11 I would like to work on this issue, can you assign this to me?

[raghavpatidar]

@Shivam164 If you are not working on this issue can I take it? If Yes then @sidmohanty11 Please assign it to me.

[Shivam164]

Yeah, I tried but couldn't find a fix for this, I am unassigning myself from this issue.

[raghavpatidar]

okay Thanks @sidmohanty11 Please assign this issue to me.

[raghavpatidar]

@Shivam164 Can you explain the localhost setup procedures to me? I put it up locally, but when I use npm run dev in root after installing all the packages, localhost:4000 does not work. And I created a .env file but didn't know where to get the REACT_APP_RC_HOST, REACT_APP_RC_ROOM_ID, and REACT_APP_GOOGLE_CLIENT_ID id I followed the documentation where I get REACT_APP_GOOGLE_CLIENT_ID it but I need first to make it in rocket chat server or not?

[Shivam164]

@Shivam164 Can you explain the localhost setup procedures to me? I put it up locally, but when I use npm run dev in root after installing all the packages, localhost:4000 does not work. And I created a .env file but didn't know where to get the REACT_APP_RC_HOST, REACT_APP_RC_ROOM_ID, and REACT_APP_GOOGLE_CLIENT_ID id I followed the documentation where I get REACT_APP_GOOGLE_CLIENT_ID it but I need first to make it in rocket chat server or not?

Checkout this, it will help: https://github.com/RocketChat/EmbeddedChat/wiki/FAQs

[sahilsekr42]

please look into the pr #81 for review

[LeelavathiChandu1]

Is this issue fixed or still it is open?