Script using Roact to make UI not working

Help and Feedback Scripting Support
,
#1

  1. What do you want to achieve? I want to see the UI made by the script

  2. What is the issue? The issue is that the UI is not showing

  3. What solutions have you tried so far? I have looked for errors and have found none

I have already inserted Roact module and the ChatConversation, ChatInput scripts. I have found no error in the Console. Please tell me what the issue is.


local Roact = require(game.ReplicatedStorage.Roact)


local ChatConversation = require(script.ChatConversation)


local ChatInput = require(script.ChatInput)

script.Parent = game.Players.LocalPlayer.PlayerGui


local ChatUI = Roact.Component:extend("ChatUI")

function ChatUI:init()
	
	self.state = {
		messages = {}, 
		inputValue = ""
	}

	-- Bind methods
	self.addMessage = self.addMessage.bind(self)
	self.handleInputChange = self.handleInputChange.bind(self)
	self.handleSendClick = self.handleSendClick.bind(self)
end

function ChatUI:addMessage(message)
	
	self:setState({
		messages = Roact.None, 
		messages = table.concat({self.state.messages, message}, "\n")
	})
end

function ChatUI:handleInputChange(inputValue)
	
	self:setState({
		inputValue = inputValue
	})
end

function ChatUI:handleSendClick()
	-- Handle sending a message
	local message = self.state.inputValue

	-- Perform text moderation
	local success, result = pcall(game.Chat:FilterStringAsync(message, self.props.player.UserId))
	if not success then
		-- Display an error message if the moderation call failed
		self:addMessage("Error: Text moderation failed")
		return
	end

	-- Check for text moderation flags
	if result == Enum.TextFilterResult.ChatFilterResultFlaggedForReview then
		self:addMessage("Error: Your message is flagged for review and cannot be sent")
		return
	elseif result == Enum.TextFilterResult.ChatFilterResultNotFiltered then
	
		local success, result = pcall(function()
			return game:GetService("HttpService"):PostAsync("https://api.openai.com/v1/content/moderate")
			end)
			game:GetService("HttpService"):JSONEncode({
				model= "text-davinci-002",
				prompt = message,
				temperature = 0.5,
				max_tokens = 50,
				n = 1,
				stop = "\n",
			})
			
			game:GetService("HttpService"):JSONEncode({
				Authorization = "Bearer YOUR_OPENAI_API_KEY_HERE"
			})
			
		end
		if not success then
			-- Display an error message if the moderation call failed
			self:addMessage("Error:  moderation failed")
			return
		end
		
	local function addmsg()	-- Add the message to the conversation
		self:addMessage("Player: " .. message)
		self:addMessage("ChatBot: " .. result)
		else
	self:addMessage("ChatBot: Moderation failed. ")
end	

	
		
		
	

	-- Clear the input value in the state
	self:setState({
		inputValue = ""
	})
end

	function ChatUI:render()
		return Roact.createElement("Frame", {
			Size = UDim2.new(1, 0, 1, 0),
			BackgroundColor3 = Color3.new(1, 1, 1)
		}, {
			LeftMenu = Roact.createElement("Frame", {
				Size = UDim2.new(0.2, 0, 1, 0),
				BackgroundColor3 = Color3.fromRGB(34, 34, 34),
				Position = UDim2.new(0, 0, 0, 0),
			}, {
				NewChatButton = Roact.createElement("TextButton", {
					Size = UDim2.new(1, -10, 0, 50),
					Position = UDim2.new(0, 5, 0, 5),
					BackgroundColor3 = Color3.fromRGB(57, 144, 215),
					Text = "New Chat",
					Font = Enum.Font.Gotham,
					TextColor3 = Color3.new(1, 1, 1),
					TextSize = 18,
					[Roact.Event.MouseButton1Click] = function()
						local function openNewChat(player)
						
							local chatGui = Instance.new("ScreenGui")
							chatGui.Name = "ChatGui"
							chatGui.Enabled = true
							chatGui.Parent = player.PlayerGui

							
							local ChatUI = require(game.ReplicatedStorage.ChatUI)
							local chatUI = Roact.createElement(ChatUI, {
								player = player
							})

							
							Roact.mount(chatUI, chatGui)
						end

						
						local player = game.Players.LocalPlayer
						openNewChat(player)
					end
				})
			}),

			ChatConversation = Roact.createElement(ChatConversation, {
				messages = self.state.messages
			}),

			ChatInput = Roact.createElement(ChatInput, {
				inputValue = self.state.inputValue,
				onInputChange = self.handleInputChange,
				onSendClick = self.handleSendClick,
			})
		})
	end
end
end