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

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

要使此方法有效，messages对象必须包含一个用户属性，例如：

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

然后，您可以使用用户道具传递当前用户ID的详细信息。喜欢：

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

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

此信息来自文档React Native Gifted Chat

当您的代码仅应解析为活动用户和消息对象时，您的代码会将GiftedChat的组件解析为GiftedChat组件。我已经重新编写了您的代码。

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
    />
  );

我现在没有时间进行测试，但这应该可以工作。您只需要一个实例的天才聊天。对于每条新消息，您应该更新消息的状态，以便使用新消息重新渲染聊天室

Answer 2

您可以使用用户ID。因此，如果消息的用户标识与您的用户标识相同，则在右侧显示它。否则将其显示在左侧。

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

如何在聊天左侧显示消息

2 个答案: