feat(chat): created basic chat layout

src/App.jsx

@@ -1,11 +0,0 @@
-import React from "react";
-
-function App() {
-  return (
-    <div className="min-h-screen bg-blue-500 flex items-center justify-center">
-      <p className="text-3xl font-bold text-white">Hello, world!</p>
-    </div>
-  );
-}
-
-export default App;

src/app/index.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ChatLayout from "src/components/ui/ChatLayout";
+
+function App() {
+  return (
+    <div className="min-h-screen bg-slate-900 text-white flex items-center justify-center p-6">
+      <ChatLayout />
+    </div>
+  );
+}
+
+export default App;

src/components/ui/ChatHeader.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function ChatHeader({ title = "AI Assistant" }) {
+  return (
+    <header className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-slate-800 to-slate-900 text-white">
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 bg-indigo-500 rounded flex items-center justify-center font-bold">
+          AI
+        </div>
+        <div>
+          <h1 className="text-lg font-semibold">{title}</h1>
+          <p className="text-sm text-slate-300">
+            Ask anything — AI is listening
+          </p>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/ui/ChatLayout.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import ChatHeader from "./ChatHeader";
+import ChatWindow from "./ChatWindow";
+import MessageInput from "./MessageInput";
+
+export default function ChatLayout() {
+  const [messages, setMessages] = useState([
+    {
+      role: "assistant",
+      content: "Hello — I can help you with code, explanations, and more.",
+    },
+  ]);
+
+  function handleSend(text) {
+    const userMsg = { role: "user", content: text };
+    setMessages((s) => [...s, userMsg]);
+
+    // fake assistant reply after short delay
+    setTimeout(() => {
+      setMessages((s) => [
+        ...s,
+        { role: "assistant", content: `You said: ${text}` },
+      ]);
+    }, 600);
+  }
+
+  return (
+    <div className="flex flex-col h-[80vh] w-full max-w-3xl mx-auto rounded-lg overflow-hidden shadow-lg border border-slate-700">
+      <ChatHeader />
+      <ChatWindow messages={messages} />
+      <MessageInput onSend={handleSend} />
+    </div>
+  );
+}

src/components/ui/ChatWindow.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+function MessageBubble({ message }) {
+  const isUser = message.role === "user";
+  return (
+    <div
+      className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-2`}
+    >
+      <div
+        className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-slate-700 text-slate-100"}`}
+      >
+        <div className="text-sm">{message.content}</div>
+      </div>
+    </div>
+  );
+}
+
+export default function ChatWindow({ messages }) {
+  return (
+    <main className="flex-1 overflow-auto p-2 bg-gradient-to-b from-slate-900 to-slate-800">
+      <div className="space-y-2">
+        {messages.map((m, i) => (
+          <MessageBubble key={i} message={m} />
+        ))}
+      </div>
+    </main>
+  );
+}

src/components/ui/MessageInput.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+
+export default function MessageInput({ onSend }) {
+  const [text, setText] = useState("");
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!text.trim()) return;
+    onSend(text.trim());
+    setText("");
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="p-3 bg-slate-900">
+      <div className="flex gap-2">
+        <input
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Type a message..."
+          className="flex-1 rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+        <button
+          type="submit"
+          className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md"
+        >
+          Send
+        </button>
+      </div>
+    </form>
+  );
+}

src/index.css

@@ -1,14 +1,24 @@
-@import "tailwindcss";
+@import "tailwindcss/preflight";
+@import "tailwindcss/utilities";
 
-@theme {
-  --color-primary: rgba(15, 40, 98);
-  --color-secondary: rgba(79, 95, 118);
-  --color-accent: rgba(158, 54, 58);
-  --color-paragraph: rgba(255, 255, 255);
-  --color-background: rgba(9, 31, 54);
+:root {
+  --color-primary: 15 40 98;
+  --color-secondary: 79 95 118;
+  --color-accent: 158 54 58;
+  --color-paragraph: 255 255 255;
+  --color-background: 9 31 54;
 }
 
 body {
   margin: 0;
-  background: rgba(var(--background));
+  background-color: rgb(var(--color-background));
+  color: rgb(var(--color-paragraph));
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial;
 }

vite.config.js

@@ -6,4 +6,9 @@ import tailwindcss from "@tailwindcss/vite";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [tailwindcss(), react(), jsconfigPaths()],
+  resolve: {
+    alias: {
+      src: "/src",
+    },
+  },
 });

web-app/src/main.jsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./app/index.jsx";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);