117 lines
4.3 KiB
TypeScript
117 lines
4.3 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { FaArrowRight } from 'react-icons/fa';
|
|
import { AiOutlineDelete } from 'react-icons/ai';
|
|
import { BsShareFill } from 'react-icons/bs';
|
|
import { usePromptOperations, Prompt } from '../../../../hooks/usePrompts';
|
|
import { useLanguage } from '../../../../contexts/LanguageContext';
|
|
import styles from './DashboardPromptSetItem.module.css';
|
|
|
|
interface DashboardPromptSetItemProps {
|
|
prompt: Prompt;
|
|
onDelete?: () => void;
|
|
onRun: (prompt: Prompt) => void;
|
|
}
|
|
|
|
function DashboardPromptSetItem({ prompt, onDelete, onRun }: DashboardPromptSetItemProps) {
|
|
const { t } = useLanguage();
|
|
const { handlePromptDelete, deletingPrompts, deleteError } = usePromptOperations();
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
|
|
const isDeleting = deletingPrompts.has(prompt.id);
|
|
|
|
const handleDeleteClick = async () => {
|
|
if (showDeleteConfirm) {
|
|
const success = await handlePromptDelete(prompt.id);
|
|
if (success && onDelete) {
|
|
onDelete();
|
|
}
|
|
setShowDeleteConfirm(false);
|
|
} else {
|
|
setShowDeleteConfirm(true);
|
|
}
|
|
};
|
|
|
|
const handleCancelDelete = () => {
|
|
setShowDeleteConfirm(false);
|
|
};
|
|
|
|
const handleRun = () => {
|
|
onRun(prompt);
|
|
};
|
|
|
|
const handleShare = () => {
|
|
console.log('Sharing prompt:', prompt);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={styles.promptItem}
|
|
>
|
|
<div className={styles.promptMain}>
|
|
<div className={styles.promptContent}>
|
|
<div className={styles.promptInfo}>
|
|
<h3 className={styles.promptName}>
|
|
{prompt.name}
|
|
</h3>
|
|
{prompt.createdAt && (
|
|
<p className={styles.promptDate}>
|
|
{t('promptset.created')}: {new Date(prompt.createdAt).toLocaleDateString('de-DE')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div ref={contentRef}>
|
|
<p className={styles.promptText}>
|
|
{prompt.content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.actionButtons}>
|
|
<button
|
|
onClick={handleRun}
|
|
className={`${styles.actionButton} ${styles.runButton}`}
|
|
title={t('promptset.run_tooltip')}
|
|
>
|
|
<FaArrowRight size={16} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleShare}
|
|
className={`${styles.actionButton} ${styles.shareButton}`}
|
|
title={t('promptset.share_tooltip')}
|
|
>
|
|
<BsShareFill size={16} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleDeleteClick}
|
|
disabled={isDeleting}
|
|
className={`${styles.actionButton} ${styles.deleteButton} ${showDeleteConfirm ? styles.confirm : ''}`}
|
|
title={showDeleteConfirm ? t('promptset.confirm_delete') : t('promptset.delete_tooltip')}
|
|
onBlur={handleCancelDelete}
|
|
>
|
|
<AiOutlineDelete size={16} />
|
|
{isDeleting && <span className={styles.actionText}>{t('promptset.deleting')}</span>}
|
|
{showDeleteConfirm && <span className={styles.actionText}>{t('promptset.confirm_click')}</span>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{deleteError && (
|
|
<div className={styles.errorMessage}>
|
|
{t('promptset.delete_error')}: {deleteError}
|
|
</div>
|
|
)}
|
|
|
|
{isDeleting && (
|
|
<div className={styles.deletingMessage}>
|
|
{t('promptset.deleting_message')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DashboardPromptSetItem;
|