Files
GMW/services/frontend/src/components/chatbot/chatbot-context.tsx
T

162 lines
4.1 KiB
TypeScript
Raw Normal View History

"use client";
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { chatbotApi } from "@/lib/api";
import type { ChatHistoryMessage } from "@/lib/types";
export type ChatbotExpression = "idle" | "listening" | "surprise" | "happy" | "sad" | "talking";
interface ChatbotMessage {
role: "user" | "assistant";
content: string;
timestamp: string;
}
interface ChatbotContextValue {
/** Expression the chatbot avatar should display */
expression: ChatbotExpression;
setExpression: (expr: ChatbotExpression) => void;
/** Whether the enlarged bubble is minimized to a small icon */
minimized: boolean;
setMinimized: (v: boolean) => void;
/** Whether the chat panel inside the bubble is open */
chatOpen: boolean;
setChatOpen: (v: boolean) => void;
/**
* @deprecated Use `minimized` / `setMinimized` instead.
* Legacy toggle alias kept for compatibility.
*/
isOpen: boolean;
setOpen: (open: boolean) => void;
toggle: () => void;
/** Chat messages with real API backend */
messages: ChatbotMessage[];
sendMessage: (content: string) => Promise<void>;
clearMessages: () => Promise<void>;
isTyping: boolean;
}
const ChatbotContext = createContext<ChatbotContextValue | null>(null);
export function ChatbotProvider({ children }: { children: ReactNode }) {
const [expression, setExpression] = useState<ChatbotExpression>("idle");
const [minimized, setMinimized] = useState(true);
const [chatOpen, setChatOpen] = useState(false);
const [messages, setMessages] = useState<ChatbotMessage[]>([]);
const [isTyping, setIsTyping] = useState(false);
const historyFetched = useRef(false);
// Derived legacy state
const isOpen = !minimized;
const setOpen = useCallback((open: boolean) => {
setMinimized(!open);
}, []);
const toggle = useCallback(() => {
setMinimized((prev) => !prev);
}, []);
// Load chat history on first mount
useEffect(() => {
if (historyFetched.current) return;
historyFetched.current = true;
chatbotApi.getHistory().then((history) => {
const mapped = (history ?? []).map((msg: ChatHistoryMessage) => ({
role: msg.role as "user" | "assistant",
content: msg.content,
timestamp: msg.timestamp,
}));
setMessages(mapped);
}).catch(() => {
// API may not be available yet — silently ignore
});
}, []);
const sendMessage = useCallback(async (content: string) => {
if (!content.trim()) return;
const userMsg: ChatbotMessage = {
role: "user",
content: content.trim(),
timestamp: new Date().toISOString(),
};
setMessages((prev) => [...prev, userMsg]);
setExpression("listening");
setIsTyping(true);
try {
const res = await chatbotApi.send(content.trim());
const botMsg: ChatbotMessage = {
role: "assistant",
content: res.response,
timestamp: res.timestamp ?? new Date().toISOString(),
};
setMessages((prev) => [...prev, botMsg]);
setExpression("happy");
} catch {
const errorMsg: ChatbotMessage = {
role: "assistant",
content: "Sorry, I couldn't process that request. Please try again.",
timestamp: new Date().toISOString(),
};
setMessages((prev) => [...prev, errorMsg]);
setExpression("sad");
} finally {
setIsTyping(false);
}
}, []);
const clearMessages = useCallback(async () => {
try {
await chatbotApi.clearHistory();
} catch {
// Best-effort clear
}
setMessages([]);
}, []);
return (
<ChatbotContext.Provider
value={{
expression,
setExpression,
minimized,
setMinimized,
chatOpen,
setChatOpen,
isOpen,
setOpen,
toggle,
messages,
sendMessage,
clearMessages,
isTyping,
}}
>
{children}
</ChatbotContext.Provider>
);
}
export function useChatbot(): ChatbotContextValue {
const ctx = useContext(ChatbotContext);
if (!ctx) {
throw new Error("useChatbot must be used within a ChatbotProvider");
}
return ctx;
}