Skip to content

Commit 4e3a704

Browse files
yilinxiayilinxia
committed
add remove sync
1 parent 49d2a42 commit 4e3a704

1 file changed

Lines changed: 46 additions & 40 deletions

File tree

‎src/components/TopicRefiner.tsx‎

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
Edit,
88
ThumbsUp,
99
Settings,
10-
Check,
11-
Minus
10+
Minus,
11+
Check
1212
} from "lucide-react";
1313
import { API_ENDPOINTS } from '../lib/config';
1414
import { FaArrowLeft } from "react-icons/fa";
@@ -33,28 +33,24 @@ interface TopicRefinerProps {
3333
llmSuggestions: string[];
3434
setLlmSuggestions: (suggestions: string[]) => void;
3535
selectedTopics: string[];
36-
selectLlmSuggestion: (suggestion: string) => void;
3736
newTopic: string;
3837
setNewTopic: (topic: string) => void;
3938
addNewTopic: () => void;
4039
prevStep: () => void;
4140
handleSubmit: () => void;
4241
searchTerm: string;
43-
removeLlmSuggestion: (suggestion: string) => void;
4442
}
4543

4644
export const TopicRefiner: FC<Omit<TopicRefinerProps, 'isLlmProcessing'>> = ({
4745
llmSuggestions = [],
4846
setLlmSuggestions,
4947
selectedTopics = [],
50-
selectLlmSuggestion,
5148
newTopic = "",
5249
setNewTopic,
5350
addNewTopic,
5451
prevStep,
5552
handleSubmit,
56-
searchTerm,
57-
removeLlmSuggestion
53+
searchTerm
5854
}) => {
5955
const [showPromptModal, setShowPromptModal] = useState(false);
6056
const [showWelcomeModal, setShowWelcomeModal] = useState(true);
@@ -63,6 +59,15 @@ export const TopicRefiner: FC<Omit<TopicRefinerProps, 'isLlmProcessing'>> = ({
6359
);
6460
const [selectedModel, setSelectedModel] = useState('gpt-4');
6561
const [apiKey, setApiKey] = useState('');
62+
const [finalizedTopics, setFinalizedTopics] = useState<string[]>([]);
63+
64+
const moveToRightColumn = (topic: string) => {
65+
setFinalizedTopics(prev => [...prev, topic]);
66+
};
67+
68+
const moveToLeftColumn = (topic: string) => {
69+
setFinalizedTopics(prev => prev.filter(t => t !== topic));
70+
};
6671

6772
useEffect(() => {
6873
// Disable scroll on mount
@@ -167,14 +172,14 @@ export const TopicRefiner: FC<Omit<TopicRefinerProps, 'isLlmProcessing'>> = ({
167172
<p className="text-muted mb-4">Use AI suggestions to refine your topics or manually add/remove topics.</p>
168173

169174
<div className="row g-4">
170-
{/* Left column - Selected Topics */}
175+
{/* Left column - Available Topics */}
171176
<div className="col-md-6">
172177
<div className="card h-100" style={{ minHeight: 420 }}>
173178
<div className="card-body" style={{ minHeight: 420, maxHeight: 420 }}>
174179
<div className="d-flex justify-content-between align-items-center mb-4">
175180
<h3 className="h5 mb-0 d-flex align-items-center">
176181
<Sparkles className="text-warning me-2" size={20} />
177-
AI Suggested Topics
182+
Available Topics
178183
</h3>
179184
<div className="d-flex gap-2">
180185
<button
@@ -191,26 +196,28 @@ export const TopicRefiner: FC<Omit<TopicRefinerProps, 'isLlmProcessing'>> = ({
191196
<div className="list-group w-100 mb-0" style={{ flex: 1, overflowY: 'auto', maxHeight: 300, marginBottom: 0, paddingBottom: 0 }}>
192197
{selectedTopics.map((topic) => {
193198
const isAI = llmSuggestions.includes(topic);
199+
const isAdded = finalizedTopics.includes(topic);
194200
return (
195201
<div key={topic} className="list-group-item d-flex justify-content-between align-items-center">
196202
<span>
197203
{topic}
198204
{isAI && <span className="badge bg-info ms-2">AI</span>}
199205
</span>
200-
{isAI ? (
206+
{isAdded ? (
201207
<button
202-
className="btn btn-sm btn-outline-success"
208+
className="btn btn-sm btn-success"
203209
style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}
204-
disabled
205-
title="Already added to AI suggestions"
210+
onClick={() => moveToLeftColumn(topic)}
211+
title="Remove from finalized topics"
206212
>
207213
<Check size={16} />
208214
</button>
209215
) : (
210216
<button
211217
className="btn btn-sm btn-outline-primary"
212-
onClick={() => selectLlmSuggestion(topic)}
213-
title="Add to AI suggestions"
218+
style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}
219+
onClick={() => moveToRightColumn(topic)}
220+
title="Add to finalized topics"
214221
>
215222
<Plus size={16} />
216223
</button>
@@ -224,13 +231,13 @@ export const TopicRefiner: FC<Omit<TopicRefinerProps, 'isLlmProcessing'>> = ({
224231
</div>
225232
</div>
226233

227-
{/* Right column - AI Suggestions Reference */}
234+
{/* Right column - Finalized Topics */}
228235
<div className="col-md-6">
229236
<div className="card h-100" style={{ minHeight: 420 }}>
230237
<div className="card-body" style={{ minHeight: 420, maxHeight: 420 }}>
231238
<h3 className="h5 mb-4 d-flex align-items-center">
232239
<Edit size={20} className="text-primary me-2" />
233-
User Finalized Topics
240+
Finalized Topics
234241
</h3>
235242
<div className="mb-4">
236243
<div className="input-group">
@@ -251,28 +258,24 @@ export const TopicRefiner: FC<Omit<TopicRefinerProps, 'isLlmProcessing'>> = ({
251258
</button>
252259
</div>
253260
</div>
254-
{llmSuggestions.length > 0 && (
255-
<div className="mb-4">
256-
<div className="list-group" style={{ maxHeight: '250px', overflowY: 'auto' }}>
257-
{llmSuggestions.map((suggestion) => (
258-
<div key={suggestion} className="list-group-item d-flex justify-content-between align-items-center">
259-
<span className="d-flex align-items-center">
260-
{suggestion}
261-
<span className="badge bg-info ms-2">AI</span>
262-
</span>
263-
<button
264-
className="btn btn-sm btn-outline-danger ms-2"
265-
style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}
266-
onClick={() => removeLlmSuggestion(suggestion)}
267-
title="Remove from finalized topics"
268-
>
269-
<Minus size={16} />
270-
</button>
271-
</div>
272-
))}
261+
<div className="list-group" style={{ maxHeight: '250px', overflowY: 'auto' }}>
262+
{finalizedTopics.map((topic) => (
263+
<div key={topic} className="list-group-item d-flex justify-content-between align-items-center">
264+
<span className="d-flex align-items-center">
265+
{topic}
266+
{llmSuggestions.includes(topic) && <span className="badge bg-info ms-2">AI</span>}
267+
</span>
268+
<button
269+
className="btn btn-sm btn-outline-danger ms-2"
270+
style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}
271+
onClick={() => moveToLeftColumn(topic)}
272+
title="Remove from finalized topics"
273+
>
274+
<Minus size={16} />
275+
</button>
273276
</div>
274-
</div>
275-
)}
277+
))}
278+
</div>
276279
</div>
277280
</div>
278281
</div>
@@ -281,8 +284,11 @@ export const TopicRefiner: FC<Omit<TopicRefinerProps, 'isLlmProcessing'>> = ({
281284
<div className="d-flex justify-content-end mt-4">
282285
<button
283286
className="btn btn-success d-flex align-items-center"
284-
onClick={handleSubmit}
285-
disabled={selectedTopics.length === 0}
287+
onClick={() => {
288+
// Pass finalized topics to parent component
289+
handleSubmit();
290+
}}
291+
disabled={finalizedTopics.length === 0}
286292
>
287293
<ThumbsUp size={16} className="me-2" />
288294
Submit Topics

0 commit comments

Comments
 (0)