116 lines
3.4 KiB
TypeScript
116 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { FormEvent, useEffect, useMemo, useState } from "react";
|
|
|
|
type AssistantMessage = {
|
|
id: string;
|
|
role: "user" | "assistant";
|
|
content: string;
|
|
};
|
|
|
|
type AssistantDrawerProps = {
|
|
mode?: "global" | "page";
|
|
};
|
|
|
|
export const ASSISTANT_TOGGLE_EVENT = "acve:assistant-toggle";
|
|
|
|
export default function AssistantDrawer({ mode = "global" }: AssistantDrawerProps) {
|
|
const [isOpen, setIsOpen] = useState(mode === "page");
|
|
const [messages, setMessages] = useState<AssistantMessage[]>([
|
|
{
|
|
id: "seed",
|
|
role: "assistant",
|
|
content: "Ask about courses, case studies, or practice. Demo responses are mocked for now.",
|
|
},
|
|
]);
|
|
const [input, setInput] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (mode === "page") {
|
|
return;
|
|
}
|
|
|
|
const onToggle = () => setIsOpen((current) => !current);
|
|
window.addEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
|
|
return () => window.removeEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
|
|
}, [mode]);
|
|
|
|
const panelClasses = useMemo(() => {
|
|
if (mode === "page") {
|
|
return "mx-auto flex h-[70vh] max-w-3xl flex-col rounded-2xl border border-slate-300 bg-white shadow-xl";
|
|
}
|
|
|
|
return `fixed right-0 top-0 z-50 h-screen w-full max-w-md border-l border-slate-300 bg-white shadow-2xl transition-transform ${
|
|
isOpen ? "translate-x-0" : "translate-x-full"
|
|
}`;
|
|
}, [isOpen, mode]);
|
|
|
|
const send = (event: FormEvent) => {
|
|
event.preventDefault();
|
|
const trimmed = input.trim();
|
|
if (!trimmed) return;
|
|
|
|
const now = Date.now().toString();
|
|
setMessages((current) => [
|
|
...current,
|
|
{ id: `u-${now}`, role: "user", content: trimmed },
|
|
{ id: `a-${now}`, role: "assistant", content: "(Demo) Assistant not connected yet." },
|
|
]);
|
|
setInput("");
|
|
};
|
|
|
|
if (mode === "global" && !isOpen) {
|
|
return (
|
|
<aside className={panelClasses}>
|
|
<div />
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<aside className={panelClasses}>
|
|
<div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
|
|
<h2 className="acve-heading text-2xl">AI Assistant</h2>
|
|
{mode === "global" ? (
|
|
<button
|
|
className="rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-600 hover:bg-slate-50"
|
|
onClick={() => setIsOpen(false)}
|
|
type="button"
|
|
>
|
|
Close
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-3 overflow-y-auto p-4">
|
|
{messages.map((message) => (
|
|
<div
|
|
key={message.id}
|
|
className={`max-w-[90%] rounded-lg px-3 py-2 text-sm ${
|
|
message.role === "user"
|
|
? "ml-auto bg-brand text-white"
|
|
: "mr-auto border border-slate-200 bg-slate-50 text-slate-800"
|
|
}`}
|
|
>
|
|
{message.content}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<form className="border-t border-slate-200 p-3" onSubmit={send}>
|
|
<div className="flex gap-2">
|
|
<input
|
|
className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand"
|
|
onChange={(event) => setInput(event.target.value)}
|
|
placeholder="Type your message..."
|
|
value={input}
|
|
/>
|
|
<button className="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
|
|
Send
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</aside>
|
|
);
|
|
}
|