diff --git a/src/App.jsx b/src/App.jsx deleted file mode 100644 index 53c1e17..0000000 --- a/src/App.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; - -function App() { - return ( -
-

Hello, world!

-
- ); -} - -export default App; diff --git a/src/app/index.js b/src/app/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/index.jsx b/src/app/index.jsx new file mode 100644 index 0000000..86327c4 --- /dev/null +++ b/src/app/index.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import ChatLayout from "src/components/ui/ChatLayout"; + +function App() { + return ( +
+ +
+ ); +} + +export default App; diff --git a/src/components/ui/ChatHeader.jsx b/src/components/ui/ChatHeader.jsx new file mode 100644 index 0000000..13f5c83 --- /dev/null +++ b/src/components/ui/ChatHeader.jsx @@ -0,0 +1,19 @@ +import React from "react"; + +export default function ChatHeader({ title = "AI Assistant" }) { + return ( +
+
+
+ AI +
+
+

{title}

+

+ Ask anything — AI is listening +

+
+
+
+ ); +} diff --git a/src/components/ui/ChatLayout.jsx b/src/components/ui/ChatLayout.jsx new file mode 100644 index 0000000..060c0cd --- /dev/null +++ b/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 ( +
+ + + +
+ ); +} diff --git a/src/components/ui/ChatWindow.jsx b/src/components/ui/ChatWindow.jsx new file mode 100644 index 0000000..649180f --- /dev/null +++ b/src/components/ui/ChatWindow.jsx @@ -0,0 +1,28 @@ +import React from "react"; + +function MessageBubble({ message }) { + const isUser = message.role === "user"; + return ( +
+
+
{message.content}
+
+
+ ); +} + +export default function ChatWindow({ messages }) { + return ( +
+
+ {messages.map((m, i) => ( + + ))} +
+
+ ); +} diff --git a/src/components/ui/MessageInput.jsx b/src/components/ui/MessageInput.jsx new file mode 100644 index 0000000..2ca272e --- /dev/null +++ b/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 ( +
+
+ 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" + /> + +
+
+ ); +} diff --git a/src/index.css b/src/index.css index 69e3086..9895c36 100644 --- a/src/index.css +++ b/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; } diff --git a/vite.config.js b/vite.config.js index 9632d41..db0ad28 100644 --- a/vite.config.js +++ b/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", + }, + }, }); diff --git a/web-app/src/main.jsx b/web-app/src/main.jsx index b9a1a6d..e054df6 100644 --- a/web-app/src/main.jsx +++ b/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( - , -) + +);