Upload 3 files

src/App.jsx

@@ -0,0 +1,19 @@
+import ChatWindow from "./components/ChatWindow";
+import "./index.css";
+
+export default function App() {
+  return (
+    <div className="app-container">
+      <header className="header">
+        <img src="/logo.png" alt="Logo" className="logo" />
+        <h2>Flyline HR Assistant ✈️</h2>
+      </header>
+
+      <ChatWindow />
+
+      <footer className="footer">
+        © 2025 Flyline Airlines · HR AI Assistant · AIML Oct 2024 Batch
+      </footer>
+    </div>
+  );
+}

src/api.js

@@ -0,0 +1,9 @@
+export async function sendMessageToBot(message, history = []) {
+  const response = await fetch("https://your-hf-space-url/api/chat", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ message, history })
+  });
+
+  return response.json();  // {answer: "...", citations: [...] }
+}

src/index.css

@@ -1,13 +1,110 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body {
+  margin: 0;
+  font-family: "Inter", sans-serif;
+  background: #f5f7fb;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.header, .footer {
+  padding: 8px 12px;
+  text-align: center;
+  background: white;
+  border-bottom: 1px solid #ddd;
+}
+
+.footer {
+  border-top: 1px solid #ddd;
+  font-size: 12px;
+  color: #666;
+}
+
+.chat-window {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-body {
+  flex: 1;
+  padding: 12px;
+  overflow-y: auto;
+}
+
+.bubble-row {
+  display: flex;
+  margin-bottom: 12px;
+}
+
+.bubble-row.user { justify-content: flex-end; }
+.bubble-row.bot { justify-content: flex-start; }
+
+.bubble {
+  padding: 10px 14px;
+  border-radius: 16px;
+  max-width: 70%;
+  font-size: 14px;
+  animation: fade 0.2s ease-in-out;
+}
+
+.bubble-row.user .bubble {
+  background: #4caf50;
+  color: white;
+}
+
+.bubble-row.bot .bubble {
+  background: #2196f3;
+  color: white;
+}
+
+.chat-input {
+  padding: 10px;
+  display: flex;
+  gap: 6px;
+  background: white;
+  border-top: 1px solid #ddd;
+}
+
+.chat-input input {
+  flex: 1;
+  padding: 10px;
+  font-size: 14px;
+  border-radius: 8px;
+  border: 1px solid #bbb;
+}
+
+.chat-input button {
+  padding: 8px 16px;
+  background: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.suggested {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 8px;
+}
+
+.suggested button {
+  padding: 4px 10px;
+  font-size: 12px;
+  border-radius: 6px;
+  border: 1px solid #bbb;
+  background: white;
+  cursor: pointer;
+}
+
+.citation-panel {
+  background: #fff7e6;
+  border-top: 1px solid #e6c77b;
+  padding: 8px;
+  font-size: 13px;
+}