Smart Chatbot — Demo

by Vijay Pancholi

HTML

<textarea id="input" placeholder="Type your message... (try: explain redux in 2 sentences)"></textarea>
<button id="send">Send</button>
</div>
<div class="meta">Tip: open devtools to see the conversation JSON (for development)</div>
</div>

CSS

:root {
  --bg: #0f1724;
  --card: #0b1220;
  --muted: #94a3b8;
  --accent: #7c3aed
}

body {
  font-family: Inter, system-ui, Segoe UI, Arial;
  background: linear-gradient(180deg, #071025 0%, #071b2a 100%);
  color: #e6eef8;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  width: fit-content;
}

.app {
  width: 760px;
  max-width: 95%;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
  overflow: hidden
}

.header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  gap: 12px
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700
}

.title {
  font-size: 16px
}

.messages {
  height: 440px;
  overflow: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.msg {
  max-width: 75%;
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.35
}

.msg.user {
  align-self: flex-end;
  background: linear-gradient(180deg, #1f2937, #111827);
}

.msg.bot {
  align-self: flex-start;
  background: linear-gradient(180deg, #0b1220, #071227);
  border: 1px solid rgba(255, 255, 255, 0.03)
}

.controls {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.02)
}

textarea {
  flex: 1;
  min-height: 44px;
  border-radius: 8px;
  padding: 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: inherit
}

button {
  background: var(--accent);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  color: white;
  cursor: pointer
}

.meta {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 18px;
  border-top: 1px solid...

JavaScript

// Simple chat demo with mocked streaming response
const messagesEl = document.getElementById('messages');
const input = document.getElementById('input');
const sendBtn = document.getElementById('send');


function appendMessage(text, who='bot'){
const el = document.createElement('div');
el.className = 'msg ' + who;
el.textContent = text;
messagesEl.appendChild(el);
messagesEl.scrollTop = messagesEl.scrollHeight;
return el;
}


function mockStreamResponse(prompt, onToken){
// A simple token-splitting mock for streaming
const canned = {
'hello': 'Hello! I\'m a demo bot. I can explain things, produce examples, and help structure projects.',
'explain redux': 'Redux is a predictable state container for JavaScript apps. It centralizes state in a single store and uses pure reducers to update state in response to actions.'
};
const base = Object.keys(canned).find(k => prompt.toLowerCase().includes(k)) ? canned[Object.keys(canned).find(k => prompt.toLowerCase().includes(k))] : 'I\'m a demo bot. To connect a real model, run a backend proxy to your OpenAI/LLM provider.';
let i = 0;
const interval = setInterval(()=>{
if(i >= base.length){ clearInterval(interval); return; }
onToken(base.slice(0,i+1));
i += Math.max(1, Math.floor(Math.random()*3));
}, 60);
return () => clearInterval(interval);
}


sendBtn.addEventListener('click', async ()=>{
const text = input.value.trim();
if(!text) return;
appendMessage(text,'user');
input.value = '';


// start bot placeholder
const botEl = appendMessage('...', 'bot');
let stopMock = mockStreamResponse(text, (partial)=>{
botEl.textContent = partial;
messagesEl.scrollTop = messagesEl.scrollHeight;
});


// Example: if you have a server, you can call it here
// fetch('/api/chat', {method:'POST', body: JSON.stringify({prompt:text}), headers:{'Content-Type':'application/json'}})
// .then(r=>r.json()).then(data => {/* stream or show result */})


});


input.addEventListener('keydown',...