AI Chat Assistant: React Based Project

import React from "react";
import Chat from "./components/Chat.jsx";

export default function App() {
  return (
    <div className="app">
      <header className="app__header">
        <div className="logo">AI</div>
        <div className="titles">
          <h1>AI Chatbot</h1>
          <p>Clean UI • Your API key stays on server • Enter to send, Shift+Enter = newline</p>
        </div>
      </header>
      <Chat />
    </div>
  );
}

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./styles.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from "react";

export default function Avatar({ role }) {
  const base = "avatar";
  if (role === "error") return <div className={`${base} avatar--error`}>!</div>;
  if (role === "user") return <div className={`${base} avatar--user`}>You</div>;
  return <div className={`${base} avatar--ai`}>AI</div>;
}

import React, { useEffect, useMemo, useRef, useState } from "react";
import { sendChat } from "../services/api.js";
import MessageBubble from "./MessageBubble.jsx";
import { SendIcon } from "./Icons.jsx";

export default function Chat() {
  const [messages, setMessages] = useState([
    { id: crypto.randomUUID(), role: "assistant", content: "Hi! I’m your AI assistant. Ask me anything. 🧠💬" },
  ]);
  const [input, setInput] = useState("");
  const [model, setModel] = useState("gpt-4.1-mini");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const listRef = useRef(null);

  const canSend = useMemo(() => input.trim().length > 0 && !loading, [input, loading]);

  useEffect(() => {
    const el = listRef.current; if (!el) return; el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
  }, [messages, loading]);

  async function handleSend() {
    if (!canSend) return;
    setError("");
    const userMsg = { id: crypto.randomUUID(), role: "user", content: input.trim() };
    setMessages(m => [...m, userMsg]);
    setInput("");
    setLoading(true);
    try {
      const payload = messages.filter(m => m.role !== "error").concat(userMsg).map(({ role, content }) => ({ role, content }));
      const { text } = await sendChat({ model, messages: payload });
      setMessages(m => [...m, { id: crypto.randomUUID(), role: "assistant", content: text || "(No response)" }]);
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      setMessages(m => [...m, { id: crypto.randomUUID(), role: "error", content: `⚠️ Request failed: ${msg}` }]);
      setError(msg);
    } finally {
      setLoading(false);
    }
  }

  function onKeyDown(e) {
    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); }
  }

  function clearChat() {
    setMessages([{ id: crypto.randomUUID(), role: "assistant", content: "Chat cleared. How can I help now?" }]);
    setError("");
  }

  return (
    <div className="chat">
      <div ref={listRef} className="chat__list">
        {messages.map(m => (<MessageBubble key={m.id} role={m.role} text={m.content} />))}
        {loading && (
          <div className="small" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div className="spinner" /> Thinking…
          </div>
        )}
      </div>

      <div className="composer">
        <div className="composer__inner">
          <div className="box">
            <textarea
              className="input"
              rows={1}
              placeholder="Ask me anything…"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={onKeyDown}
            />
            <div className="toolbar">
              <div className="small">{error ? "Error — try again" : ""}</div>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <select value={model} onChange={(e) => setModel(e.target.value)} className="ghost">
                  <option value="gpt-4.1-mini">gpt-4.1-mini</option>
                  <option value="gpt-4o-mini">gpt-4o-mini</option>
                </select>
                <button className="btn" disabled={!canSend} onClick={handleSend}>
                  <SendIcon /> {loading ? "Sending…" : "Send"}
                </button>
                <button className="btn ghost" onClick={clearChat}>Clear</button>
              </div>
            </div>
          </div>
          <div className="small" style={{ marginTop: 8 }}>Backend: <code>{import.meta.env.VITE_API_BASE || "/api"}</code> • Set <code>OPENAI_API_KEY</code> on the server.</div>
        </div>
      </div>
    </div>
  );
}

import React, { useState } from "react";

export default function CopyButton({ text }) {
  const [done, setDone] = useState(false);
  async function copy() {
    await navigator.clipboard.writeText(text);
    setDone(true);
    setTimeout(() => setDone(false), 1200);
  }
  return (
    <button className="copy" onClick={copy}>{done ? "Copied" : "Copy"}</button>
  );
}

import React from "react";
export function SendIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
    </svg>
  );
}

import React from "react";
import Avatar from "./Avatar.jsx";
import CopyButton from "./CopyButton.jsx";

export default function MessageBubble({ role, text }) {
  const isUser = role === "user";
  const isError = role === "error";
  return (
    <div className={`message ${isUser ? "message--right" : ""}`}>
      <div className={`bubble ${isUser ? "bubble--user" : isError ? "bubble--error" : "bubble--ai"}`}>
        <div className="bubble__header">
          <Avatar role={role} />
          <span className="meta">{role}</span>
        </div>
        <div>{text}</div>
        {!isError && (
          <div style={{ marginTop: 8, opacity: .8 }}>
            <CopyButton text={text} />
          </div>
        )}
      </div>
    </div>
  );
}

const API_BASE = import.meta.env.VITE_API_BASE || ""; 

export async function sendChat({ model, messages }) {
  const res = await fetch(`${API_BASE}/api/chat`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ model, messages }),
  });
  if (!res.ok) {
    const text = await res.text();
    throw new Error(text || `HTTP ${res.status}`);
  }
  return res.json();
}

import express from "express";
import cors from "cors";
import dotenv from "dotenv";
import OpenAI from "openai";

dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());

const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

// Health check
app.get("/api/health", (req, res) => res.json({ ok: true }));

// POST /api/chat { model, messages: [{role, content}, ...] }
app.post("/api/chat", async (req, res) => {
  try {
    const { model = "gpt-4.1-mini", messages = [] } = req.body || {};

    const response = await client.responses.create({
      model,
      input: messages.map(({ role, content }) => ({ role, content })),
    });

    const text = response.output_text ?? "(no output_text)";
    res.json({ text });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: err?.message || "Unknown error" });
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => console.log(`✅ API ready on http://localhost:${PORT}`));

# Rename to .env and add your key
OPENAI_API_KEY=hjd.. //Put your own api key here
PORT=3001