AI Chat – ChatGPT Clone Chatbot UI in HTML CSS JS

18 0 codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

AI Chat – ChatGPT Clone Chatbot UI in HTML CSS JS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #212121; color: #ececec; font-family: "Segoe UI", system-ui, sans-serif; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.side { width: 260px; background: #171717; padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: margin .3s; flex-shrink: 0; }
.side.hide { margin-left: -260px; }
.new { padding: 12px; border-radius: 10px; border: 1px solid #333; background: none; color: #fff; cursor: pointer; text-align: left; font: inherit; }
.new:hover { background: #2a2a2a; }
.lbl { font-size: .75rem; color: #8e8e8e; margin-top: 10px; }
#hist { list-style: none; flex: 1; overflow-y: auto; }
#hist li { padding: 9px 10px; border-radius: 8px; font-size: .9rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hist li:hover, #hist li.on { background: #2a2a2a; }
.me { padding: 10px; border-top: 1px solid #2a2a2a; }
main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.menu { background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; }
header select { margin-left: auto; background: #2f2f2f; color: #fff; border: 0; padding: 6px 10px; border-radius: 8px; }
.msgs { flex: 1; overflow-y: auto; padding: 20px 0; }
.welcome { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px; text-align: center; }
.orb { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(#10a37f, #4cc9f0, #a855f7, #10a37f); animation: spin 4s linear infinite; box-shadow: 0 0 40px rgba(16,163,127,.5); }
@keyframes spin { to { transform: rotate(360deg); } }
.welcome h1 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 600; }
.sugs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 620px; width: 100%; }
.sugs button { padding: 14px; border-radius: 14px; border: 1px solid #383838; background: none; color: #cfcfcf; cursor: pointer; text-align: left; font: inherit; font-size: .9rem; }
.sugs button:hover { background: #2a2a2a; }
.m { max-width: 760px; margin: 0 auto; padding: 12px 20px; display: flex; gap: 14px; animation: in .25s; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } }
.m.user { justify-content: flex-end; }
.m.user .b { background: #2f2f2f; border-radius: 20px; padding: 10px 16px; max-width: 75%; }
.m.bot .av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(#10a37f, #4cc9f0, #a855f7, #10a37f); }
.m.bot .b { line-height: 1.65; flex: 1; min-width: 0; }
.b pre { background: #0d0d0d; border-radius: 10px; padding: 14px; overflow-x: auto; margin: 10px 0; font-size: .85rem; position: relative; }
.b code { font-family: Consolas, monospace; }
.b p + p { margin-top: 8px; }
.copy { position: absolute; top: 8px; right: 8px; background: #2f2f2f; color: #ccc; border: 0; border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: .75rem; }
.typing span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #aaa; margin-right: 4px; animation: bl 1s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes bl { 50% { opacity: .2; transform: translateY(-3px); } }
.box { max-width: 760px; width: calc(100% - 32px); margin: 0 auto; display: flex; align-items: flex-end; background: #2f2f2f; border-radius: 26px; padding: 8px 8px 8px 20px; }
.box textarea { flex: 1; background: none; border: 0; outline: none; color: #fff; font: inherit; resize: none; max-height: 160px; padding: 8px 0; }
.box button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #000; cursor: pointer; font-size: 1rem; }
.box button:disabled { opacity: .3; }
.note { text-align: center; font-size: .75rem; color: #8e8e8e; padding: 10px; }
@media (max-width: 760px) { .side { position: fixed; z-index: 5; height: 100vh; } .side:not(.open) { margin-left: -260px; } .sugs { grid-template-columns: 1fr; } }

JS

// AI Chat — ChatGPT-style chatbot UI: streaming typewriter replies, code blocks with copy, chat history, suggestions.
// Replace reply() with a fetch() to your own AI backend to make it real.
var msgs = document.getElementById('msgs'), input = document.getElementById('input'), send = document.getElementById('send');
var chats = [], cur = null, busy = false;
function reply(text) {
  var t = text.toLowerCase();
  if (/login|form/.test(t)) return 'Here is a simple login form:\n```\n<form class="login">\n  <h2>Login</h2>\n  <input type="email" placeholder="Email" required>\n  <input type="password" placeholder="Password" required>\n  <button type="submit">Log in</button>\n</form>\n```\nAdd some CSS like `display:flex; flex-direction:column; gap:12px;` to the form and you are done!';
  if (/flex/.test(t)) return 'Flexbox lines items up in a row or column.\n\nPut `display: flex` on the parent, then use `justify-content` to move items along the main axis and `align-items` for the cross axis. Use `gap` for spacing.\n```\n.parent {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 16px;\n}\n```';
  if (/javascript|js|tip/.test(t)) return 'JavaScript tip: use optional chaining to avoid errors on missing data.\n```\nconst city = user?.address?.city ?? "Unknown";\n```\n`?.` stops if something is undefined and `??` gives a default value.';
  if (/joke/.test(t)) return 'Why do programmers prefer dark mode? 🌙\n\nBecause light attracts bugs! 🐛';
  if (/hello|hi\b|hey|salut|hola/.test(t)) return 'Hello! 👋 I am a demo AI assistant. Ask me about HTML, CSS or JavaScript, or ask for a joke.';
  return 'Great question! This is a demo chatbot interface, so my answers are pre-written. Connect the `reply()` function in the JavaScript to a real AI API (for example with `fetch`) to get smart answers about “' + text.slice(0, 60) + '”.';
}
function esc(s) { return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
function format(s) {
  return s.split('```').map(function (part, i) {
    if (i % 2) return '<pre><button class="copy">Copy</button><code>' + esc(part.replace(/^\n/, '')) + '</code></pre>';
    return part.split(/\n\n+/).map(function (p) { return p.trim() ? '<p>' + esc(p).replace(/`([^`]+)`/g, '<code>$1</code>').replace(/\n/g, '<br>') + '</p>' : ''; }).join('');
  }).join('');
}
function add(role, html) {
  var w = document.getElementById('welcome'); if (w) w.remove();
  var d = document.createElement('div'); d.className = 'm ' + role;
  d.innerHTML = (role === 'bot' ? '<div class="av"></div>' : '') + '<div class="b">' + html + '</div>';
  msgs.appendChild(d); msgs.scrollTop = msgs.scrollHeight; return d.querySelector('.b');
}
function ask(text) {
  if (!text.trim() || busy) return;
  if (!cur) { cur = { title: text.slice(0, 40), m: [] }; chats.unshift(cur); renderHist(); }
  cur.m.push(['user', text]); add('user', esc(text)); input.value = ''; grow(); busy = true; send.disabled = true;
  var b = add('bot', '<span class="typing"><span></span><span></span><span></span></span>');
  setTimeout(function () {
    var full = reply(text), i = 0;
    var iv = setInterval(function () {
      i += 3; b.innerHTML = format(full.slice(0, i)); msgs.scrollTop = msgs.scrollHeight;
      if (i >= full.length) { clearInterval(iv); cur.m.push(['bot', full]); busy = false; send.disabled = false; }
    }, 18);
  }, 700);
}
function renderHist() {
  document.getElementById('hist').innerHTML = chats.map(function (c, i) { return '<li data-i="' + i + '" class="' + (c === cur ? 'on' : '') + '">' + esc(c.title) + '</li>'; }).join('');
}
document.getElementById('hist').onclick = function (e) {
  var li = e.target.closest('li'); if (!li || busy) return; cur = chats[+li.dataset.i]; msgs.innerHTML = '';
  cur.m.forEach(function (m) { add(m[0], m[0] === 'bot' ? format(m[1]) : esc(m[1])); }); renderHist();
};
document.getElementById('newchat').onclick = function () { if (busy) return; cur = null; location.hash = ''; msgs.innerHTML = ''; var w = document.createElement('div'); msgs.appendChild(w); w.outerHTML = welcomeHTML; bindSugs(); renderHist(); };
var welcomeHTML = document.getElementById('welcome').outerHTML;
function bindSugs() { document.querySelectorAll('.sugs button').forEach(function (b) { b.onclick = function () { ask(b.textContent); }; }); }
bindSugs();
document.getElementById('form').onsubmit = function (e) { e.preventDefault(); ask(input.value); };
input.addEventListener('keydown', function (e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); ask(input.value); } });
function grow() { input.style.height = 'auto'; input.style.height = input.scrollHeight + 'px'; }
input.addEventListener('input', grow);
msgs.addEventListener('click', function (e) { if (e.target.classList.contains('copy')) { var c = e.target.nextSibling.textContent; try { navigator.clipboard.writeText(c); } catch (er) {} e.target.textContent = 'Copied!'; } });
document.getElementById('menu').onclick = function () { var s = document.getElementById('side'); s.classList.toggle(innerWidth <= 760 ? 'open' : 'hide'); };

Comments 0

…

AI Chat – ChatGPT Clone Chatbot UI in HTML CSS JS

Recommended

Comments 0