像 whatsapp JavaFx 一样排列聊天气泡

Question

嘿伙计们！ 我花了好几个小时尝试聊天，我在其中发送消息并收到自动回复。我遇到的问题是，当我想要它时，文本停留在滚动窗格的左侧：我的消息在右边，机器人在左边。

我也想要像 Whatsapp speechbubbles 这样的合适的 speechbuble 但这不是强制性的，现在我正试图专注于对齐气泡

这是我的代码，语音气泡在哪里：

   send.setOnAction(actionEvent -> {
            String messageText = txt.getText().trim();
            if (!messageText.isEmpty()) {
                Text message = new Text(messageText);
                message.setFont(Font.font(messageFont, messageFontSize));
                message.setTextAlignment(TextAlignment.CENTER);
                message.setWrappingWidth(250);

                HBox chatBubble = new HBox();
                chatBubble.getChildren().add(message);
                chatBubble.setPadding(new Insets(10));
                chatBubble.getStyleClass().add("chat_bubble");

                StackPane messageContainer = new StackPane(chatBubble);
                messageContainer.setAlignment(Pos.CENTER_RIGHT);

                Text sender = new Text("You:");
                sender.setFont(Font.font(messageFont, 10));
                sender.setStyle("-fx-fill: #999;");

                HBox senderBox = new HBox(sender);
                senderBox.setAlignment(Pos.CENTER_RIGHT);
                senderBox.setPadding(new Insets(0, 10, 0, 0));

                VBox messageBox = new VBox(senderBox, messageContainer);
                messageBox.setAlignment(Pos.CENTER_RIGHT);
                messageBox.setPrefWidth(Region.USE_COMPUTED_SIZE);

                messageArea.getChildren().add(messageBox);

                String responseText = "Thanks for your message!";
                Text responseMessage = new Text(responseText);
                responseMessage.setFont(Font.font(messageFont, messageFontSize));
                responseMessage.setTextAlignment(TextAlignment.CENTER);
                responseMessage.setWrappingWidth(250);

                HBox responseBubble = new HBox();
                responseBubble.getChildren().add(responseMessage);
                responseBubble.setPadding(new Insets(10));
                responseBubble.getStyleClass().add("chat_bubble2");

                StackPane responseContainer = new StackPane(responseBubble);
                responseContainer.setAlignment(Pos.CENTER_LEFT);

                Text receiver = new Text("Bot:");
                receiver.setFont(Font.font(messageFont, 10));
                receiver.setStyle("-fx-fill: #999;");

                HBox receiverBox = new HBox(receiver);
                receiverBox.setAlignment(Pos.CENTER_LEFT);
                receiverBox.setPadding(new Insets(0, 0, 0, 10));

                VBox responseBox = new VBox(receiverBox, responseContainer);
                responseBox.setAlignment(Pos.CENTER_LEFT);
                responseBox.setPrefWidth(Region.USE_COMPUTED_SIZE);

                messageArea.getChildren().add(responseBox);

                txt.clear();
            }
        });

我所有的消息（我的和机器人）都在滚动窗格的左侧。 我想要我的在右边，机器人在左边。