minchathq / react-chat-ui Goto Github PK

I just looked through your code, and couldn't find any css related to message width. Is there a way to make the messages wider? For some reason, it won't go wider than 272 px for me on either the incoming or outgoing messages.

Any advice would be greatly appreciated.

This does not work

<MessageList
    currentUserId={"markJohnsson"}
    messages={
      [
        {
          text: 'Hello',
          user: {
            id: "markJohnsson",
            name: 'Markus',
          },
        },
      ]
    }
/>

but this works

<MessageList
      currentUserId={"markjohnsson"}
      messages={
        [
          {
            text: 'Hello',
            user: {
              id: "markjohnsson",
              name: 'Markus',
            },
          },
        ]
      }
/>

Is this the expected behaviour?

For some reason, when your messages render in the chat, it's blocked from highlighting the text to copy.

I couldn't find anything about enabling/disabling copying on your code. I can highlight and copy text outside of your chat window.

Can you advise on how this might allow message copying? I could always put a button to do it myself, but preventing highlighting and copying feels like a poor usability experience to me, so I'm trying to get it to allow that.

Otherwise, I'm enjoying developing with MinChat so far for a demo I'm working on. :)

Thanks,
Dave

I create a simple app following the example in Readme. However, MessageList doesn't scroll to bottom when I add new messages.

The createdAt time is always mapping to 'just now' and not 10 mins ago, 1 day ago, etc.
Here are sample messages response from my api:

{
    "id": "15",
    "text": "Super USer test",
    "createdAt": "2024-05-03T17:45:48.837Z",
    "user": {
      "id": "2",
      "name": "[email protected]"
    }
  },
  {
    "id": "16",
    "text": "Data entry TEst",
    "createdAt": "2024-05-04T15:45:55.874Z",
    "user": {
      "id": "4",
      "name": "[email protected]"
    }
  },
  {
    "id": "17",
    "text": "Super User test",
    "createdAt": "2024-05-05T11:47:07.884Z",
    "user": {
      "id": "3",
      "name": "[email protected]"
    }
  },

And this how the front end looks:

Let me know if I'm missing anything or how the time ago function runs for createdAt field. Thanks!

I have a component structured approximately like so:

import {
    MainContainer,
    MessageInput,
    MessageContainer,
    MessageHeader,
    MessageList,
} from "@minchat/react-chat-ui";

function Home()
{
return <MainContainer><MessageContainer><MessageHeader /><MessageList messages={[]} /></MessageContainer></MainContainer>
}

I want to change the background color of the MessageList, so that the messages show as white on a red background.