61 lines
2 KiB
TypeScript
61 lines
2 KiB
TypeScript
import React, { useState } from "react";
|
|
import MessageList from "./DashboardChatAreaMessageList";
|
|
|
|
import InputArea from "./DashboardChatAreaInput";
|
|
import ConnectedFiles from "./DashboardChatAreaConnectedFiles";
|
|
import { DashboardChatAreaProps } from "./dashboardChatAreaTypes";
|
|
import styles from './DashboardChatAreaStyles/DashboardChat.module.css';
|
|
|
|
const DashboardChatArea: React.FC<DashboardChatAreaProps> = ({
|
|
workflowState,
|
|
workflowActions
|
|
}) => {
|
|
const [selectedFile, setSelectedFile] = useState<any>(null);
|
|
const [attachedFiles, setAttachedFiles] = useState<any[]>([]);
|
|
|
|
return (
|
|
<div className={styles.chat_grid}>
|
|
{/* Top Left: Message List */}
|
|
<div className={`${styles.quadrant} ${styles.messages_quadrant}`}>
|
|
<MessageList
|
|
workflowState={workflowState}
|
|
/>
|
|
</div>
|
|
|
|
{/*Top Right: File Preview (disabled for now)
|
|
<div className={`${styles.quadrant} ${styles.file_preview_quadrant}`}>
|
|
<FilePreview selectedFile={selectedFile} />
|
|
</div>
|
|
*/}
|
|
|
|
{/* Bottom Left: Input Area */}
|
|
<div className={`${styles.quadrant} ${styles.input_quadrant}`}>
|
|
<InputArea
|
|
workflowState={workflowState}
|
|
workflowActions={workflowActions}
|
|
attachedFiles={attachedFiles}
|
|
onAttachedFilesChange={setAttachedFiles}
|
|
/>
|
|
</div>
|
|
|
|
{/* Bottom Right: Connected Files */}
|
|
<div className={`${styles.quadrant} ${styles.connected_files_quadrant}`}>
|
|
<ConnectedFiles
|
|
onFileSelect={setSelectedFile}
|
|
selectedFile={selectedFile}
|
|
attachedFiles={attachedFiles}
|
|
onRemoveFile={(fileId) => {
|
|
// If the removed file is currently selected, clear the selection
|
|
if (selectedFile?.id === fileId) {
|
|
setSelectedFile(null);
|
|
}
|
|
// Remove the file from attached files
|
|
setAttachedFiles(files => files.filter(f => f.id !== fileId));
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardChatArea;
|