<div class="ai-chat-layout">
<div class="chat-header">
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#ffffff" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<h3>AI Assistant</h3>
</div>
<div class="chat-window" id="chat-window">
<div class="message ai-message">
<div class="bubble">Hello! I am your AI assistant. How can I help you today?</div>
</div>
</div>
<div class="input-area">
<input type="text" id="ai-input" placeholder="Ask me anything..." autocomplete="off">
<button id="ai-send" aria-label="Send">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #f9fafb;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.ai-chat-layout {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 450px;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #f3f4f6;
}
.chat-header {
background: #111827;
color: #ffffff;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 12px;
}
.chat-header h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
}
.chat-window {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 350px;
max-height: 400px;
overflow-y: auto;
background: #f9fafb;
}
.message {
display: flex;
flex-direction: column;
max-width: 85%;
}
.ai-message {
align-self: flex-start;
}
.user-message {
align-self: flex-end;
}
.bubble {
padding: 12px 16px;
border-radius: 16px;
line-height: 1.5;
font-size: 0.95rem;
}
.ai-message .bubble {
background: #ffffff;
border: 1px solid #e5e7eb;
color: #1f2937;
border-bottom-left-radius: 4px;
}
.user-message .bubble {
background: #3b82f6;
color: #ffffff;
border-bottom-right-radius: 4px;
}
.input-area {
padding: 16px;
background: #ffffff;
border-top: 1px solid #f3f4f6;
display: flex;
gap: 12px;
align-items: center;
}
#ai-input {
flex-grow: 1;
border: 1px solid #e5e7eb;
border-radius: 24px;
padding: 12px 16px;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
font-size: 0.95rem;
}
#ai-input:focus {
border-color: #3b82f6;
}
#ai-send {
background: #3b82f6;
color: #ffffff;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
#ai-send:hover {
background: #2563eb;
}
document.getElementById("ai-send").addEventListener("click", sendMessage);
document.getElementById("ai-input").addEventListener("keypress", function(e) {
if (e.key === "Enter") {
sendMessage();
}
});
function sendMessage() {
const input = document.getElementById("ai-input");
const text = input.value.trim();
if (!text) return;
const chatWindow = document.getElementById("chat-window");
const userMsg = document.createElement("div");
userMsg.className = "message user-message";
userMsg.innerHTML = `<div class="bubble">${text}</div>`;
chatWindow.appendChild(userMsg);
input.value = "";
chatWindow.scrollTop = chatWindow.scrollHeight;
setTimeout(() => {
const aiMsg = document.createElement("div");
aiMsg.className = "message ai-message";
aiMsg.innerHTML = `<div class="bubble">I received your message! I am processing it now.</div>`;
chatWindow.appendChild(aiMsg);
chatWindow.scrollTop = chatWindow.scrollHeight;
}, 600);
}
