如何在聊天的左侧显示消息

Question

我正在尝试设置一个聊天页面，用户可以与我已经创建的聊天机器人进行交互。用户消息在页面右侧弹出，但是当消息发送到服务器并返回响应时，我不确定如何在左侧显示它。

const [messages, setMessages] = useState([
    {
      _id: 0,
      text: 'Hello! How may I assist you?',
      createdAt: new Date().getTime(),
      user: {
        _id: 2,
        name: 'System',
        avatar: require('./assets/splash.png')
      }
    },
    {
      _id: 1,
      text: 'New chat started.',
      createdAt: new Date().getTime(),
      system: true
    }
    
  ]);

  function systemResponse(answer){
    <GiftedChat
    
    />
  }
function handleSend(newMessage = []){

    setMessages(GiftedChat.append(messages, newMessage));
    console.log(newMessage);

    var userText = newMessage[0].text;
    console.log(userText);

    fetch('http://ec2-3-23-33-73.us-east-2.compute.amazonaws.com:5000/chatbot',
    {
      method: 'POST',
      body: JSON.stringify({
        textString: userText,
      })
  })
  .then((response) => response.json())
  .then((json) => {<GiftedChat
  user={{_id: 2, name:"System", avatar: require('./assets/splash.png')}}
  text = 'hello' 
  />})
 
}

  return(
    <GiftedChat
    onSend={newMessage => handleSend(newMessage)}
    messages={messages}
    user={{ _id: 1, name: 'Luke' }}
    placeholder="Ask your quesiton here..."
    showUserAvatar
    alwaysShowSend
    scrollToBottom
    />
  );

Answer 1

您可以使用用户 ID。所以如果消息的UserID和你的userID一样就在右边显示。否则显示在左边。

position: item.user._id === user._id ? 'right' : 'left',

Answer 2

嗨，卢克，你能告诉我们你的消息数组和对象是什么样子的吗，因为它们需要有正确的格式。如果您可以使用此信息更新您的问题，我会更新我的答案。

为此，消息对象必须包含用户属性，例如：

 {
    _id: 1,
    text: 'Hello developer',
    createdAt: new Date(),
    user: {
      _id: 2,
      name: 'React Native',
      avatar: 'https://placeimg.com/140/140/any',
    },
  },

然后使用 user 属性传递当前用户 ID 的详细信息。喜欢：

 <GiftedChat
  messages={messages}
  onSend={messages => onSend(messages)}
  user={{
    _id: 1,
  }}
/>

该库包含所有逻辑并将消息 ID 与用户 ID 进行比较。如果它们相同，则消息显示在具有不同 ID 的消息的另一侧。

此信息取自文档 React Native Gifted Chat

您的代码正在将 GiftedChat 的一个组件解析为 GiftedChat 组件，而它应该只解析活动用户的消息和对象。我有 re-written 你的代码。

const [messages, setMessages] = useState([
    {
      _id: 0,
      text: 'Hello! How may I assist you?',
      createdAt: new Date().getTime(),
      user: {
        _id: 2,
        name: 'System',
        avatar: require('./assets/splash.png')
      }
    },
    {
      _id: 1,
      text: 'New chat started.',
      createdAt: new Date().getTime(),
      system: true
    }
    
  ]);

function handleSend(newMessage = []){

    setMessages(prevState => [...prevState, newMessage]);
    

    var userText = newMessage[0].text;
    console.log(userText);

    fetch('http://ec2-3-23-33-73.us-east-2.compute.amazonaws.com:5000/chatbot',
    {
      method: 'POST',
      body: JSON.stringify({
        textString: userText,
      })
  })
  .then((response) => response.json())
  .then((json) => {
    setMessages(prevState => [...prevSate, {
      _id: 3,
      text: 'Hello',
      createdAt: new Date().getTime(),
      system: true
   }
  })
 
}

  return(
    <GiftedChat
    onSend={newMessage => handleSend(newMessage)}
    messages={messages}
    user={{ _id: 1, name: 'Luke' }}
    placeholder="Ask your quesiton here..."
    showUserAvatar
    alwaysShowSend
    scrollToBottom
    />
  );

我现在没有时间对此进行测试，但这应该可以。您只需要一个有天赋的聊天实例。对于每条新消息，您应该更新消息状态，这将 re-render 与新消息聊天

如何在聊天的左侧显示消息

How to display messages on the left side of the chat

react-native

react-native-gifted-chat