130 lines
3.7 KiB
JavaScript
130 lines
3.7 KiB
JavaScript
import React, { useState } from "react";
|
||
import axios from "axios";
|
||
import "./Chatbot.css";
|
||
|
||
const Chatbot = ({ context }) => {
|
||
const [messages, setMessages] = useState([
|
||
{
|
||
role: "assistant",
|
||
content:
|
||
"Hi! I’m here to help you with suggestions, analyzing career options, and any questions you have about your career. How can I assist you today?",
|
||
},
|
||
]);
|
||
const [input, setInput] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
// NEW: track whether the chatbot is minimized or expanded
|
||
const [isMinimized, setIsMinimized] = useState(false);
|
||
|
||
const toggleMinimize = () => {
|
||
setIsMinimized((prev) => !prev);
|
||
};
|
||
|
||
const sendMessage = async (content) => {
|
||
const userMessage = { role: "user", content };
|
||
|
||
// Build your context summary
|
||
const contextSummary = `
|
||
You are an advanced AI career advisor for AptivaAI.
|
||
Your role is to provide analysis based on user data:
|
||
- ...
|
||
(Continue with your existing context data as before)
|
||
`;
|
||
|
||
// Combine with existing messages
|
||
const messagesToSend = [
|
||
{ role: "system", content: contextSummary },
|
||
...messages,
|
||
userMessage,
|
||
];
|
||
|
||
try {
|
||
setLoading(true);
|
||
const response = await axios.post(
|
||
"https://api.openai.com/v1/chat/completions",
|
||
{
|
||
model: "gpt-3.5-turbo",
|
||
messages: messagesToSend,
|
||
temperature: 0.7,
|
||
},
|
||
{
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
|
||
},
|
||
}
|
||
);
|
||
|
||
const botMessage = response.data.choices[0].message;
|
||
// The returned message has {role: "assistant", content: "..."}
|
||
setMessages([...messages, userMessage, botMessage]);
|
||
} catch (error) {
|
||
console.error("Chatbot Error:", error);
|
||
setMessages([
|
||
...messages,
|
||
userMessage,
|
||
{
|
||
role: "assistant",
|
||
content: "Error: Unable to fetch response. Please try again.",
|
||
},
|
||
]);
|
||
} finally {
|
||
setLoading(false);
|
||
setInput("");
|
||
}
|
||
};
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
if (input.trim()) {
|
||
sendMessage(input.trim());
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={`chatbot-container ${isMinimized ? "minimized" : ""}`}>
|
||
{/* Header Bar for Minimize/Maximize */}
|
||
<div className="chatbot-header">
|
||
<span className="chatbot-title">Career Chatbot</span>
|
||
<button className="minimize-btn" onClick={toggleMinimize}>
|
||
{isMinimized ? "▼" : "▲"}
|
||
</button>
|
||
</div>
|
||
|
||
{/* If not minimized, show the chat messages and input */}
|
||
{!isMinimized && (
|
||
<>
|
||
<div className="chat-messages">
|
||
{messages.map((msg, index) => {
|
||
// default to 'bot' if role not user or assistant
|
||
const roleClass =
|
||
msg.role === "user" ? "user" : msg.role === "assistant" ? "bot" : "bot";
|
||
return (
|
||
<div key={index} className={`message ${roleClass}`}>
|
||
{msg.content}
|
||
</div>
|
||
);
|
||
})}
|
||
{loading && <div className="message bot typing">Typing...</div>}
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="chat-input-form">
|
||
<input
|
||
type="text"
|
||
placeholder="Ask a question..."
|
||
value={input}
|
||
onChange={(e) => setInput(e.target.value)}
|
||
disabled={loading}
|
||
/>
|
||
<button type="submit" disabled={loading}>
|
||
Send
|
||
</button>
|
||
</form>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Chatbot;
|