134 lines
No EOL
5.4 KiB
TypeScript
134 lines
No EOL
5.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import { BsArrowsAngleExpand, BsArrowsAngleContract } from "react-icons/bs";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { Prompt } from "../../../hooks/usePrompts";
|
|
|
|
import DashboardChatArea from './DashboardChatArea/DashboardChatArea';
|
|
import DashboardChatHistory from './DashboardChatHistory/DashboardChatHistory';
|
|
|
|
import styles from './DashboardChat.module.css';
|
|
|
|
interface DashboardChatProps {
|
|
isExpanded: boolean;
|
|
onToggleExpand: () => void;
|
|
selectedPrompt?: Prompt | null;
|
|
onPromptUsed?: () => void;
|
|
onWorkflowIdChange?: (workflowId: string | null) => void;
|
|
onWorkflowResume?: (workflowId: string) => void;
|
|
}
|
|
|
|
const DashboardChat: React.FC<DashboardChatProps> = ({
|
|
isExpanded,
|
|
onToggleExpand,
|
|
selectedPrompt,
|
|
onPromptUsed,
|
|
onWorkflowIdChange,
|
|
onWorkflowResume
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState("Chat Area");
|
|
const [resumeWorkflowId, setResumeWorkflowId] = useState<string | null>(null);
|
|
|
|
const handleWorkflowResume = (workflowId: string) => {
|
|
// Switch to Chat Area tab first
|
|
setActiveTab("Chat Area");
|
|
// Set the workflow ID to resume
|
|
setResumeWorkflowId(workflowId);
|
|
// Then call the parent's resume handler
|
|
if (onWorkflowResume) {
|
|
onWorkflowResume(workflowId);
|
|
}
|
|
// Clear the resume ID after a short delay to allow processing
|
|
setTimeout(() => {
|
|
setResumeWorkflowId(null);
|
|
}, 100);
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
className={`${styles.dashboard_chat} ${isExpanded ? styles.expanded : ''}`}
|
|
layout
|
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
|
>
|
|
<motion.div
|
|
className={styles.chat_header}
|
|
layout
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
>
|
|
<div className={styles.chat_button_div}>
|
|
{["Chat Area", "Workflow History"].map((tab) => (
|
|
<div key={tab} className={styles.buttonWrapper}>
|
|
<motion.button
|
|
key={tab}
|
|
className={`${styles.chat_button} ${
|
|
activeTab === tab ? styles.chat_button_active : styles.chat_button_inactive
|
|
}`}
|
|
onClick={() => setActiveTab(tab)}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
{tab}
|
|
</motion.button>
|
|
<AnimatePresence>
|
|
{activeTab === tab && (
|
|
<motion.div
|
|
className={styles.horizontalLine}
|
|
initial={{ opacity: 0, width: "0%" }}
|
|
animate={{ opacity: 1, width: "100%" }}
|
|
exit={{ opacity: 0, width: "0%" }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
></motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className={styles.iconContainer}>
|
|
<motion.div
|
|
className={styles.expandIcon}
|
|
onClick={onToggleExpand}
|
|
whileTap={{ scale: 0.9 }}
|
|
whileHover={{ scale: 1.15 }}
|
|
animate={{ rotate: isExpanded ? 180 : 0 }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
>
|
|
{isExpanded ? <BsArrowsAngleContract size={20} /> : <BsArrowsAngleExpand size={20} />}
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
<motion.div
|
|
className={styles.horizontalLineLight}
|
|
initial={{ opacity: 0, scaleX: 0 }}
|
|
animate={{ opacity: 1, scaleX: 1 }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
style={{ transformOrigin: "left" }}
|
|
></motion.div>
|
|
<motion.div
|
|
className={styles.chat_content}
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: "auto", opacity: 1 }}
|
|
transition={{
|
|
duration: 0.4,
|
|
ease: [0.4, 0.0, 0.2, 1],
|
|
height: { duration: 0.4 },
|
|
opacity: { duration: 0.3 }
|
|
}}
|
|
style={{ overflow: "hidden" }}
|
|
>
|
|
{activeTab === "Chat Area" ? (
|
|
<DashboardChatArea
|
|
selectedPrompt={selectedPrompt}
|
|
onPromptUsed={onPromptUsed}
|
|
onWorkflowIdChange={onWorkflowIdChange}
|
|
resumeWorkflowId={resumeWorkflowId}
|
|
/>
|
|
) : (
|
|
<DashboardChatHistory
|
|
onWorkflowResume={handleWorkflowResume}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default DashboardChat; |