@restnfeel/agentc-starter-kit
Version:
한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템
129 lines (126 loc) • 6.57 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect, useMemo, useCallback } from 'react';
import { DEFAULT_QUESTIONS, QuestionAnalytics, CONTEXTUAL_QUESTIONS } from './suggested-questions-config.js';
function SuggestedQuestions({ onQuestionSelect, context = "welcome", maxQuestions = 3, showCategories = false, className = "", variant = "chips", disabled = false, animateIn = true, }) {
useState("");
const [isVisible, setIsVisible] = useState(false);
// Animation effect
useEffect(() => {
if (animateIn) {
const timer = setTimeout(() => setIsVisible(true), 100);
return () => clearTimeout(timer);
}
else {
setIsVisible(true);
}
}, [animateIn]);
// Get suggested questions based on context
const suggestedQuestions = useMemo(() => {
let questions = [];
// Try to get contextual questions first
if (context && CONTEXTUAL_QUESTIONS[context]) {
questions = [...CONTEXTUAL_QUESTIONS[context]];
}
// If no contextual questions or not enough, add from defaults
if (questions.length < maxQuestions) {
const remainingSlots = maxQuestions - questions.length;
const defaultQuestions = DEFAULT_QUESTIONS.filter((q) => !questions.some((cq) => cq.id === q.id)).slice(0, remainingSlots);
questions = [...questions, ...defaultQuestions];
}
// Sort by priority
questions.sort((a, b) => a.priority - b.priority);
return questions.slice(0, maxQuestions);
}, [context, maxQuestions]);
const handleQuestionClick = useCallback((question) => {
if (disabled)
return;
// Track analytics
QuestionAnalytics.trackQuestionClick(question.id);
// Execute callback
onQuestionSelect(question.text);
}, [onQuestionSelect, disabled]);
const handleKeyDown = useCallback((event, question) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
handleQuestionClick(question);
}
}, [handleQuestionClick]);
const renderChips = () => (jsx("div", { className: `flex flex-wrap gap-2 ${className}`, children: suggestedQuestions.map((question, index) => (jsx("button", { onClick: () => handleQuestionClick(question), onKeyDown: (e) => handleKeyDown(e, question), disabled: disabled, className: `
px-4 py-2
bg-blue-50 hover:bg-blue-100
text-blue-700 hover:text-blue-800
border border-blue-200 hover:border-blue-300
rounded-full
text-sm
font-medium
transition-all
duration-200
focus:outline-none
focus:ring-2
focus:ring-blue-500
focus:ring-offset-2
disabled:opacity-50
disabled:cursor-not-allowed
transform
hover:scale-105
active:scale-95
${isVisible
? "animate-in slide-in-from-bottom-2 fade-in-0"
: "opacity-0"}
${animateIn ? `[animation-delay:${index * 100}ms]` : ""}
`, style: {
animationDelay: animateIn ? `${index * 100}ms` : "0ms",
}, children: question.text }, question.id))) }));
const renderList = () => (jsx("div", { className: `space-y-2 ${className}`, children: suggestedQuestions.map((question, index) => (jsx("button", { onClick: () => handleQuestionClick(question), onKeyDown: (e) => handleKeyDown(e, question), disabled: disabled, className: `
w-full
text-left
p-3
bg-gray-50 hover:bg-gray-100
border border-gray-200 hover:border-gray-300
rounded-lg
text-sm
transition-all
duration-200
focus:outline-none
focus:ring-2
focus:ring-blue-500
focus:ring-offset-2
disabled:opacity-50
disabled:cursor-not-allowed
transform
hover:translate-x-1
${isVisible
? "animate-in slide-in-from-left-2 fade-in-0"
: "opacity-0"}
`, style: {
animationDelay: animateIn ? `${index * 150}ms` : "0ms",
}, children: jsxs("div", { className: "flex items-center space-x-2", children: [jsx("span", { className: "text-blue-500", children: "\u2753" }), jsx("span", { className: "text-gray-700", children: question.text })] }) }, question.id))) }));
const renderGrid = () => (jsx("div", { className: `grid grid-cols-1 sm:grid-cols-2 gap-3 ${className}`, children: suggestedQuestions.map((question, index) => (jsx("button", { onClick: () => handleQuestionClick(question), onKeyDown: (e) => handleKeyDown(e, question), disabled: disabled, className: `
p-4
bg-white hover:bg-gray-50
border border-gray-200 hover:border-blue-300
rounded-xl
shadow-sm hover:shadow-md
text-left
text-sm
transition-all
duration-200
focus:outline-none
focus:ring-2
focus:ring-blue-500
focus:ring-offset-2
disabled:opacity-50
disabled:cursor-not-allowed
transform
hover:scale-105
${isVisible ? "animate-in zoom-in-95 fade-in-0" : "opacity-0"}
`, style: {
animationDelay: animateIn ? `${index * 200}ms` : "0ms",
}, children: jsxs("div", { className: "flex items-start space-x-3", children: [jsx("span", { className: "text-blue-500 text-lg", children: "\uD83D\uDCA1" }), jsxs("div", { children: [jsx("div", { className: "text-gray-800 font-medium mb-1", children: question.text }), jsx("div", { className: "text-gray-500 text-xs", children: question.category })] })] }) }, question.id))) }));
if (suggestedQuestions.length === 0) {
return null;
}
return (jsxs("div", { className: "w-full", role: "region", "aria-label": "\uCD94\uCC9C \uC9C8\uBB38", children: [showCategories && (jsx("div", { className: "mb-4", children: jsx("h4", { className: "text-sm font-medium text-gray-700 mb-2", children: "\uCD94\uCC9C \uC9C8\uBB38" }) })), variant === "chips" && renderChips(), variant === "list" && renderList(), variant === "grid" && renderGrid()] }));
}
export { SuggestedQuestions, SuggestedQuestions as default };
//# sourceMappingURL=suggested-questions.js.map