104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { IoIosPlay } from 'react-icons/io';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useLanguage } from '../../../../providers/language/LanguageContext';
|
|
import { useWorkflowSelection } from '../../../../contexts/WorkflowSelectionContext';
|
|
import styles from '../ActionButton.module.css';
|
|
|
|
export interface PlayActionButtonProps<T = any> {
|
|
row: T;
|
|
onPlay?: (row: T) => Promise<void> | void;
|
|
disabled?: boolean | { disabled: boolean; message?: string };
|
|
loading?: boolean;
|
|
className?: string;
|
|
title?: string;
|
|
hookData?: any; // Contains all hook data including operations
|
|
// Field mappings
|
|
idField?: string; // Field name for the unique identifier
|
|
nameField?: string; // Field name for display name
|
|
contentField?: string; // Field name for content (e.g., 'content' for prompts, 'prompt' for workflows)
|
|
// Navigation
|
|
navigateTo?: string; // Path to navigate to after selection (default: 'start/dashboard')
|
|
// Behavior
|
|
mode?: 'workflow' | 'prompt'; // 'workflow' selects workflow, 'prompt' sets input value
|
|
}
|
|
|
|
export function PlayActionButton<T = any>({
|
|
row,
|
|
onPlay,
|
|
disabled = false,
|
|
loading = false,
|
|
className = '',
|
|
title,
|
|
hookData,
|
|
idField = 'id',
|
|
nameField = 'name',
|
|
contentField = 'content',
|
|
navigateTo = 'start/dashboard',
|
|
mode = 'prompt'
|
|
}: PlayActionButtonProps<T>) {
|
|
const { t } = useLanguage();
|
|
const navigate = useNavigate();
|
|
const { selectWorkflow } = useWorkflowSelection();
|
|
|
|
// Extract disabled state and tooltip message
|
|
const isDisabled = typeof disabled === 'boolean' ? disabled : disabled?.disabled || false;
|
|
const disabledMessage = typeof disabled === 'object' ? disabled?.message : undefined;
|
|
|
|
const handleClick = async (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (!isDisabled && !loading) {
|
|
try {
|
|
// Call the onPlay callback if provided
|
|
if (onPlay) {
|
|
await onPlay(row);
|
|
}
|
|
|
|
if (mode === 'workflow') {
|
|
// Workflow mode: select workflow and navigate
|
|
const workflowId = (row as any)[idField];
|
|
if (!workflowId) {
|
|
console.error('Workflow ID not found in row');
|
|
return;
|
|
}
|
|
selectWorkflow(workflowId);
|
|
} else {
|
|
// Prompt mode: set input value in dashboard
|
|
const content = (row as any)[contentField];
|
|
if (content && typeof content === 'string') {
|
|
// Dispatch event to set dashboard input value
|
|
window.dispatchEvent(new CustomEvent('dashboardSetInput', {
|
|
detail: { value: content }
|
|
}));
|
|
}
|
|
}
|
|
|
|
// Navigate to dashboard (or specified path)
|
|
navigate(`/${navigateTo}`);
|
|
} catch (error: any) {
|
|
console.error('Error in PlayActionButton:', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
const buttonTitle = title || (mode === 'workflow'
|
|
? t('workflows.action.play', 'Play')
|
|
: t('prompts.action.start', 'Start Prompt'));
|
|
const isLoading = loading;
|
|
const finalTitle = isDisabled && disabledMessage ? disabledMessage : buttonTitle;
|
|
|
|
return (
|
|
<button
|
|
onClick={handleClick}
|
|
className={`${styles.actionButton} ${styles.play} ${isLoading ? styles.loading : ''} ${isDisabled ? styles.disabled : ''} ${className}`}
|
|
title={finalTitle}
|
|
disabled={isDisabled || isLoading}
|
|
>
|
|
<span className={styles.actionIcon}>
|
|
{isLoading ? '⏳' : <IoIosPlay />}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default PlayActionButton;
|