Added chatbot to the page

[Shalini22-ui]

I have added a chatbot to the page

Please merge this request
Solved issue #99

[greptile-apps]

Greptile Summary

This PR adds a chatbot widget to the submit-challenge page in response to issue #99. The implementation includes HTML markup for a fixed-position chat container in the bottom-right corner, CSS styling for the chat interface, and JavaScript functions for basic message handling.

The chatbot consists of a chat box that displays messages, an input field for user messages, and a send button. The visual design follows a clean, modern approach with a white background and proper spacing. The JavaScript implementation includes sendMessage() and appendMessage() functions that currently provide a simple echo response ("You said: [message]") after a 500ms delay.

The feature is specifically integrated into the submit-challenge page rather than being implemented as a global component. The styling is added to the submit-challenge/styles.css file, maintaining the modular CSS structure of the codebase. However, the main styles.css file appears to have been incorrectly modified with orphaned closing braces.

The chatbot is positioned to provide contextual assistance to users while they're submitting coding challenges, fitting with the application's goal of creating an interactive platform for developers to engage with coding tasks.

Confidence score: 1/5

• This PR will immediately break functionality due to critical JavaScript scope issues and CSS syntax errors
• The sendMessage() function is defined inside the form event listener but called from global HTML onclick handler, causing runtime errors
• All files need attention: submit-challenge/script.js for scope issues, submit-challenge/index.html for the broken onclick handler, and styles.css for syntax errors

_{4 files reviewed, 5 comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

logic: Functions defined inside form submit listener are not accessible globally. Move these functions outside the event listener to fix the onclick handler in HTML.

Suggested change

	function sendMessage() {
	const input = document.getElementById("user-input");
	const message = input.value.trim();
	if (!message) return;
	appendMessage("user", message);
	input.value = "";
	// Simulate AI reply (you can replace this with API call)
	setTimeout(() => {
	const botReply = "You said: " + message;
	appendMessage("bot", botReply);
	}, 500);
	}
	function appendMessage(sender, text) {
	const chatBox = document.getElementById("chat-box");
	const msg = document.createElement("div");
	msg.className = "chat-message " + sender;
	msg.textContent = text;
	chatBox.appendChild(msg);
	chatBox.scrollTop = chatBox.scrollHeight;
	}
	function sendMessage() {
	const input = document.getElementById("user-input");
	const message = input.value.trim();
	if (!message) return;
	appendMessage("user", message);
	input.value = "";
	// Simulate AI reply (you can replace this with API call)
	setTimeout(() => {
	const botReply = "You said: " + message;
	appendMessage("bot", botReply);
	}, 500);
	}
	function appendMessage(sender, text) {
	const chatBox = document.getElementById("chat-box");
	const msg = document.createElement("div");
	msg.className = "chat-message " + sender;
	msg.textContent = text;
	chatBox.appendChild(msg);
	chatBox.scrollTop = chatBox.scrollHeight;
	}

[greptile-apps]

logic: This onclick handler will cause a runtime error because sendMessage() is defined inside the form submit event listener in script.js, making it inaccessible from the global scope.

Suggested change

	<button onclick="sendMessage()">Send</button>
	<button id="send-button">Send</button>

[greptile-apps]

syntax: These closing braces don't match any opening braces and will cause CSS parsing errors. Remove these lines.

[greptile-apps]

style: The chatbot styles use inconsistent indentation (mix of spaces and tabs) and don't follow the existing CSS formatting patterns in the file. Consider using consistent 2-space indentation to match the rest of the stylesheet.

Suggested change

	.chat-container {
	width: 400px;
	/* margin: 50px auto; */
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: white;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	overflow: hidden;
	}
	.chat-box {
	max-height: 400px;
	overflow-y: auto;
	padding: 20px;
	border-bottom: 1px solid #ccc;
	}
	.chat-message {
	margin-bottom: 10px;
	}
	.chat-message.user {
	text-align: right;
	color: #059669;
	}
	.chat-message.bot {
	text-align: left;
	color: #059669;
	}
	.input-box {
	display: flex;
	padding: 10px;
	}
	.input-box input {
	flex: 1;
	padding: 10px;
	font-size: 16px;
	}
	.input-box button {
	padding: 10px 20px;
	background: #059669;
	color: white;
	border: none;
	cursor: pointer;
	}
	.chat-container {
	width: 400px;
	/* margin: 50px auto; */
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: white;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	overflow: hidden;
	}
	.chat-box {
	max-height: 400px;
	overflow-y: auto;
	padding: 20px;
	border-bottom: 1px solid #ccc;
	}
	.chat-message {
	margin-bottom: 10px;
	}
	.chat-message.user {
	text-align: right;
	color: #059669;
	}
	.chat-message.bot {
	text-align: left;
	color: #059669;
	}
	.input-box {
	display: flex;
	padding: 10px;
	}
	.input-box input {
	flex: 1;
	padding: 10px;
	font-size: 16px;
	}
	.input-box button {
	padding: 10px 20px;
	background: #059669;
	color: white;
	border: none;
	cursor: pointer;
	}

[greptile-apps]

logic: The chatbot will overlap with existing page content on smaller screens due to fixed positioning. Consider adding responsive breakpoints or a toggle mechanism to hide/show the chatbot on mobile devices.