File size: 4,882 Bytes
245c727 d9a16d6 eb7f5ba cf76e1a 486eff6 eb7f5ba d9a16d6 cf76e1a d9a16d6 eb7f5ba cf76e1a 486eff6 cf76e1a 486eff6 eb7f5ba 486eff6 eb7f5ba 486eff6 eb7f5ba 486eff6 eb7f5ba d9a16d6 cf76e1a d9a16d6 cf76e1a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
import React from 'react';
const TopicSelector = ({
onTopicsChange,
availableTopics = [],
selectedTopics = [],
customTopics = [],
onCustomTopicsChange,
customSentence = '',
onSentenceChange,
multiTheme = true,
onMultiThemeChange
}) => {
const handleTopicToggle = (topic) => {
const newSelectedTopics = selectedTopics.includes(topic)
? selectedTopics.filter(t => t !== topic)
: [...selectedTopics, topic];
onTopicsChange(newSelectedTopics);
};
const handleAddCustomTopic = () => {
const newCustomTopics = [...customTopics, ''];
onCustomTopicsChange && onCustomTopicsChange(newCustomTopics);
};
const handleCustomTopicChange = (index, value) => {
// Limit to 3 words (max 2 spaces)
const spaceCount = (value.match(/ /g) || []).length;
if (spaceCount > 2) {
return; // Don't update if more than 2 spaces
}
const newCustomTopics = [...customTopics];
newCustomTopics[index] = value;
onCustomTopicsChange && onCustomTopicsChange(newCustomTopics);
};
const handleRemoveCustomTopic = (index) => {
const newCustomTopics = customTopics.filter((_, i) => i !== index);
onCustomTopicsChange && onCustomTopicsChange(newCustomTopics);
};
return (
<div className="topic-selector">
<h3>Select Topics</h3>
<div className="topic-buttons">
{availableTopics.map(topic => (
<button
key={topic.id}
className={`topic-btn ${selectedTopics.includes(topic.name) ? 'selected' : ''}`}
onClick={() => handleTopicToggle(topic.name)}
>
{topic.name}
</button>
))}
</div>
{/* Custom Topics Section */}
<div className="custom-topics-container">
<h3>Custom Topics</h3>
<p className="custom-topics-description">Add your own topics (up to 3 words per box)</p>
{customTopics.map((topic, index) => (
<div key={index} className="custom-topic-input-container">
<input
type="text"
value={topic}
onChange={(e) => handleCustomTopicChange(index, e.target.value)}
placeholder='Enter a custom topic... "climate change", "video game", "ice cream"'
className="custom-topic-input"
maxLength="30"
/>
<button
type="button"
onClick={() => handleRemoveCustomTopic(index)}
className="remove-topic-btn"
title="Remove topic"
>
✕
</button>
</div>
))}
<button
type="button"
onClick={handleAddCustomTopic}
className="add-topic-btn"
>
+ Add Custom Topic
</button>
</div>
<div className="sentence-input-container">
<label htmlFor="custom-sentence" className="sentence-label">
Custom Sentence (optional)
</label>
<textarea
id="custom-sentence"
className="sentence-input"
value={customSentence}
onChange={(e) => onSentenceChange && onSentenceChange(e.target.value)}
placeholder='Enter a sentence to influence word selection... e.g., "india won the test series against england" or "Fresh ingredients make the perfect morning meal"'
rows="3"
maxLength="200"
/>
<div className="sentence-info">
<span className="char-count">{customSentence.length}/200 characters</span>
{customSentence && (
<button
type="button"
className="clear-sentence-btn"
onClick={() => onSentenceChange && onSentenceChange('')}
title="Clear sentence"
>
Clear
</button>
)}
</div>
</div>
<div className="multi-theme-toggle-container">
<label className="multi-theme-toggle">
<input
type="checkbox"
checked={multiTheme}
onChange={(e) => onMultiThemeChange && onMultiThemeChange(e.target.checked)}
className="multi-theme-checkbox"
/>
<span className="multi-theme-label">
🎯 Use Multi-Theme Processing
</span>
</label>
<p className="multi-theme-description">
{multiTheme
? "AI will process each theme separately and balance results"
: "AI will blend all themes into a single concept"
}
</p>
</div>
<p className="selected-count">
{selectedTopics.length + customTopics.filter(t => t.trim()).length} total topic{(selectedTopics.length + customTopics.filter(t => t.trim()).length) !== 1 ? 's' : ''} selected
</p>
</div>
);
};
export default TopicSelector;
|