ui-nyla/src/pages/Home/Dashboard.tsx
2025-08-12 12:54:18 +02:00

66 lines
2.5 KiB
TypeScript

import React, { useState, useCallback, useMemo } from 'react';
import { Prompt } from '../../hooks/usePrompts';
import styles from './HomeStyles/Dashboard.module.css'
import DashboardChat from '../../components/Dashboard/DashboardChat/DashboardChat';
function Dashboard () {
const [isChatExpanded, setIsChatExpanded] = useState(false);
const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
const [isPromptAreaCollapsed, setIsPromptAreaCollapsed] = useState(false);
const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(null);
const [workflowCompleted, setWorkflowCompleted] = useState(false);
const handleChatToggleExpand = () => {
setIsChatExpanded(!isChatExpanded);
};
const handlePromptRun = (prompt: Prompt) => {
setSelectedPrompt(prompt);
setIsPromptAreaCollapsed(true);
};
const handleWorkflowIdChange = useCallback((workflowId: string | null) => {
setCurrentWorkflowId(prevId => {
// Reset completion status when workflow changes
if (workflowId !== prevId) {
setWorkflowCompleted(false);
}
return workflowId;
});
}, [setCurrentWorkflowId, setWorkflowCompleted]);
const handleWorkflowCompletedChange = useCallback((completed: boolean) => {
setWorkflowCompleted(completed);
}, []);
const handleWorkflowResume = useCallback((workflowId: string) => {
// Set the workflow ID to resume it
setCurrentWorkflowId(workflowId);
// Reset completion status when resuming
setWorkflowCompleted(false);
// Switch to Chat Area tab to show the resumed workflow
}, []);
// Determine CSS classes based on states
return (
<div className={styles.dashboardContainer}>
<div className={`${styles.chatLogContainer} ${isChatExpanded ? styles.expanded : ''}`}>
<div className={styles.chatArea}>
<DashboardChat
isExpanded={isChatExpanded}
onToggleExpand={handleChatToggleExpand}
selectedPrompt={selectedPrompt}
onPromptUsed={() => setSelectedPrompt(null)}
onWorkflowIdChange={handleWorkflowIdChange}
onWorkflowCompletedChange={handleWorkflowCompletedChange}
onWorkflowResume={handleWorkflowResume}
/>
</div>
</div>
</div>
);
}
export default Dashboard;