69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Button } from '../ui/button';
|
|
import { MessageSquare, X } from 'lucide-react';
|
|
|
|
interface ChatBotProps {
|
|
currentScreen?: string;
|
|
}
|
|
|
|
export const ChatBot: React.FC<ChatBotProps> = ({ currentScreen }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const getChipsForScreen = (screen?: string) => {
|
|
if (screen === 'profile') {
|
|
return [
|
|
"How do I submit a testimonial?",
|
|
"When will my testimonial be reviewed?",
|
|
"Can I edit my testimonial?",
|
|
"What makes a good testimonial?"
|
|
];
|
|
}
|
|
return [
|
|
"How do I upload a roster?",
|
|
"How to assign courses?",
|
|
"View progress reports",
|
|
"Export learner data"
|
|
];
|
|
};
|
|
|
|
const chips = getChipsForScreen(currentScreen);
|
|
|
|
return (
|
|
<div className="fixed bottom-6 right-6 z-40">
|
|
{isOpen && (
|
|
<div className="mb-4 bg-card border border-chrome-divider rounded-lg shadow-lg p-4 w-80 animate-slide-up">
|
|
<div className="flex justify-between items-center mb-3">
|
|
<h3 className="font-semibold">HR Assistant</h3>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setIsOpen(false)}
|
|
className="h-6 w-6"
|
|
aria-label="Close chat"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{chips.map((chip, index) => (
|
|
<button
|
|
key={index}
|
|
className="w-full text-left p-2 text-sm bg-muted hover:bg-accent rounded-md transition-colors min-tap-44"
|
|
>
|
|
{chip}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<Button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="rounded-full h-12 w-12 shadow-lg min-tap-44"
|
|
aria-label="Open HR chat assistant"
|
|
aria-expanded={isOpen}
|
|
>
|
|
<MessageSquare className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}; |