Merge pull request #74 from EnvisionMindCa/codex/enhance-frontend-design-with-glassmorphism

frontend/src/api.js

@@ -0,0 +1,23 @@
+const API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
+
+export async function fetchStream(user, session, prompt, onChunk) {
+  const res = await fetch(`${API_BASE}/chat/stream`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ user, session, prompt }),
+  });
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    onChunk(decoder.decode(value));
+  }
+}
+
+export async function fetchSessions(user) {
+  const res = await fetch(`${API_BASE}/sessions/${encodeURIComponent(user)}`);
+  if (!res.ok) return [];
+  const data = await res.json();
+  return data.sessions ?? [];
+}

frontend/src/components/ChatWindow.jsx

@@ -1,45 +1,61 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import MessageList from './MessageList'
 import InputBar from './InputBar'
+import SessionList from './SessionList'
+import UsernameForm from './UsernameForm'
 import '../styles/chat.css'
-
-const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/chat/stream'
-
-async function fetchStream(prompt, onChunk) {
-  const res = await fetch(API_URL, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ user: 'demo', session: 'default', prompt }),
-  })
-  const reader = res.body.getReader()
-  const decoder = new TextDecoder()
-  while (true) {
-    const { value, done } = await reader.read()
-    if (done) break
-    onChunk(decoder.decode(value))
-  }
-}
+import { fetchStream, fetchSessions } from '../api'
 
 function ChatWindow() {
   const [messages, setMessages] = useState([])
+  const [sessionName] = useState(() => crypto.randomUUID())
+  const [sessions, setSessions] = useState([])
+  const [username, setUsername] = useState(() =>
+    localStorage.getItem('username') || ''
+  )
+
+  useEffect(() => {
+    if (username) {
+      fetchSessions(username).then(setSessions)
+    }
+  }, [username])
+
+  const refreshSessions = () => {
+    if (username) {
+      fetchSessions(username).then(setSessions)
+    }
+  }
 
   const sendMessage = async (text) => {
     const userMsg = { role: 'user', content: text }
     setMessages((prev) => [...prev, userMsg, { role: 'assistant', content: '' }])
     const index = messages.length + 1
-    await fetchStream(text, (chunk) => {
+    await fetchStream(username, sessionName, text, (chunk) => {
       setMessages((prev) => {
         const copy = [...prev]
         copy[index] = { ...copy[index], content: copy[index].content + chunk }
         return copy
       })
     })
+    refreshSessions()
+  }
+
+  const handleUsernameSet = (name) => {
+    localStorage.setItem('username', name)
+    setUsername(name)
   }
 
   return (
     <div className="chat-container">
-      <MessageList messages={messages} />
-      <InputBar onSend={sendMessage} />
+      {!username ? (
+        <UsernameForm onSet={handleUsernameSet} />
+      ) : (
+        <>
+          <SessionList sessions={sessions} current={sessionName} />
+          <MessageList messages={messages} />
+          <InputBar onSend={sendMessage} />
+        </>
+      )}
     </div>
   )
 }

frontend/src/components/SessionList.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import '../styles/chat.css'
+
+function SessionList({ sessions, current }) {
+  return (
+    <div className="session-list">
+      {sessions.map((name) => (
+        <span
+          key={name}
+          className={`session-item ${name === current ? 'active' : ''}`}
+        >
+          {name}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+SessionList.propTypes = {
+  sessions: PropTypes.arrayOf(PropTypes.string).isRequired,
+  current: PropTypes.string.isRequired,
+}
+
+export default SessionList

frontend/src/components/UsernameForm.jsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import PropTypes from 'prop-types'
+import '../styles/chat.css'
+
+function UsernameForm({ onSet }) {
+  const [name, setName] = useState('')
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    const trimmed = name.trim()
+    if (!trimmed) return
+    onSet(trimmed)
+  }
+
+  return (
+    <form className="username-form" onSubmit={handleSubmit}>
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Enter your name..."
+      />
+      <button type="submit">Start Chatting</button>
+    </form>
+  )
+}
+
+UsernameForm.propTypes = {
+  onSet: PropTypes.func.isRequired,
+}
+
+export default UsernameForm

frontend/src/index.css

@@ -2,6 +2,7 @@
   --glass-bg: rgba(255, 255, 255, 0.2);
   --glass-border: rgba(255, 255, 255, 0.4);
   --blur: 16px;
+  --radius: 20px;
 }
 
 * {
@@ -12,9 +13,32 @@ body {
   margin: 0;
   padding: 0;
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
+  background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+body::before,
+body::after {
+  content: '';
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5), transparent);
+  filter: blur(100px);
+  z-index: 0;
+}
+
+body::before {
+  top: -80px;
+  left: -80px;
+}
+
+body::after {
+  bottom: -80px;
+  right: -80px;
 }

frontend/src/styles/chat.css

@@ -8,7 +8,7 @@
   border: 1px solid var(--glass-border);
   backdrop-filter: blur(var(--blur)) saturate(180%);
   -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
-  border-radius: 16px;
+  border-radius: var(--radius);
   padding: 1rem;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }
@@ -22,16 +22,39 @@
   padding-right: 4px;
 }
 
+.session-list {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+  z-index: 1;
+}
+
+.session-item {
+  padding: 0.25rem 0.5rem;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius);
+  backdrop-filter: blur(var(--blur));
+  -webkit-backdrop-filter: blur(var(--blur));
+  font-size: 0.75rem;
+}
+
+.session-item.active {
+  background: rgba(255, 255, 255, 0.4);
+  font-weight: bold;
+}
+
 .message {
   width: fit-content;
   max-width: 80%;
   padding: 0.5rem 1rem;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
-  border-radius: 20px;
+  border-radius: var(--radius);
   backdrop-filter: blur(var(--blur));
   -webkit-backdrop-filter: blur(var(--blur));
-  animation: jelly 0.5s ease;
+  animation: jelly 0.6s ease;
 }
 
 .message.user {
@@ -49,16 +72,17 @@
   padding: 0.5rem 1rem;
   border: 1px solid var(--glass-border);
   background: var(--glass-bg);
-  border-radius: 20px;
+  border-radius: var(--radius);
   backdrop-filter: blur(var(--blur));
   -webkit-backdrop-filter: blur(var(--blur));
   color: #000;
+  outline: none;
 }
 
 .input-bar button {
   padding: 0.5rem 1rem;
   border: none;
-  border-radius: 20px;
+  border-radius: var(--radius);
   background: rgba(255, 255, 255, 0.6);
   color: #000;
   font-weight: bold;
@@ -66,6 +90,46 @@
   transition: transform 0.2s;
 }
 
+.username-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.username-form input {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  border-radius: var(--radius);
+  backdrop-filter: blur(var(--blur));
+  -webkit-backdrop-filter: blur(var(--blur));
+  width: 100%;
+  max-width: 200px;
+  text-align: center;
+  outline: none;
+}
+
+.username-form button {
+  padding: 0.5rem 1.5rem;
+  border: none;
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.7);
+  font-weight: bold;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.username-form button:hover {
+  transform: scale(1.05);
+}
+
+.username-form button:active {
+  transform: scale(0.95);
+}
+
 .input-bar button:hover {
   transform: scale(1.05);
 }
@@ -76,10 +140,13 @@
 
 @keyframes jelly {
   0% {
-    transform: scale(0.8);
+    transform: scale(0.9);
+  }
+  40% {
+    transform: scale(1.05);
   }
-  50% {
-    transform: scale(1.1);
+  60% {
+    transform: scale(0.98);
   }
   100% {
     transform: scale(1);