82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { ChevronRight, X, RefreshCcw, Settings } from "lucide-react";
|
|
import { Dispatch, SetStateAction, useContext, useEffect, useState } from "react";
|
|
import GlobalContext from "../contexts/GlobalContext";
|
|
import { Input } from "./ui/input";
|
|
|
|
const Header = (props: {
|
|
setIsSettingsOpen: Dispatch<SetStateAction<boolean>>;
|
|
}) => {
|
|
const { setIsSettingsOpen } = props;
|
|
const { selectUserHandler, clearUserHandler, selectedUser, clearConfiguration } = useContext(GlobalContext);
|
|
const [userId, setUserId] = useState<string>("");
|
|
|
|
const handleSelectUser = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setUserId(e.target.value);
|
|
};
|
|
|
|
const handleClearUser = () => {
|
|
clearUserHandler();
|
|
setUserId("");
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
selectUserHandler(userId);
|
|
};
|
|
|
|
// New function to handle key down events
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault(); // Prevent form submission if it's in a form
|
|
handleSubmit();
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (selectedUser) {
|
|
setUserId(selectedUser);
|
|
}
|
|
}, [selectedUser]);
|
|
|
|
return (
|
|
<>
|
|
<header className="border-b p-4 flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-xl font-semibold">Mem0 Assistant</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-sm">
|
|
<div className="flex">
|
|
<Input
|
|
placeholder="UserId"
|
|
className="w-full rounded-3xl pr-6 pl-4"
|
|
value={userId}
|
|
onChange={handleSelectUser}
|
|
onKeyDown={handleKeyDown} // Attach the key down handler here
|
|
/>
|
|
<Button variant="ghost" size="icon" onClick={handleClearUser} className="relative hover:bg-transparent hover:text-neutral-400 right-8">
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" onClick={handleSubmit} className="relative right-6">
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button variant="ghost" size="icon" onClick={clearConfiguration}>
|
|
<RefreshCcw className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setIsSettingsOpen(true)}
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|