+ );
+}
diff --git a/src/components/TopicDetail/PredefinedActions.tsx b/src/components/TopicDetail/PredefinedActions.tsx
new file mode 100644
index 000000000..b1f90b930
--- /dev/null
+++ b/src/components/TopicDetail/PredefinedActions.tsx
@@ -0,0 +1,144 @@
+import {
+ BabyIcon,
+ BookOpenTextIcon,
+ BrainIcon,
+ ChevronDownIcon,
+ ListIcon,
+ NotebookPenIcon,
+ PencilLine,
+ Star,
+ type LucideIcon
+} from 'lucide-react';
+import { cn } from '../../lib/classname';
+import { PredefinedActionGroup } from './PredefinedActionGroup';
+
+export type PredefinedActionType = {
+ icon: LucideIcon;
+ label: string;
+ prompt?: string;
+ children?: PredefinedActionType[];
+};
+
+export const actions: PredefinedActionType[] = [
+ {
+ icon: BookOpenTextIcon,
+ label: 'Explain',
+ children: [
+ {
+ icon: NotebookPenIcon,
+ label: 'Explain the topic',
+ prompt: 'Explain this topic in detail and include examples',
+ },
+ {
+ icon: ListIcon,
+ label: 'List the key points',
+ prompt: 'List the key points to remember from this topic',
+ },
+ {
+ icon: PencilLine,
+ label: 'Summarize the topic',
+ prompt:
+ 'Briefly explain the topic in a few sentences. Treat it as a brief answer to an interview question. Your response should just be the answer to the question, nothing else.',
+ },
+ {
+ icon: BabyIcon,
+ label: 'Explain like I am five',
+ prompt: 'Explain this topic like I am a 5 years old',
+ },
+ {
+ icon: Star,
+ label: 'Why is it important?',
+ prompt:
+ 'Why is this topic important? What are the real world applications (only add if appropriate)?',
+ },
+ ],
+ },
+ {
+ icon: BrainIcon,
+ label: 'Test my Knowledge',
+ prompt:
+ "Act as an interviewer and test my understanding of this topic. Ask me a single question at a time and evaluate my answer. Question number should be bold. After evaluating my answer, immediately proceed to the next question without asking if I'm ready or want another question. Continue asking questions until I explicitly tell you to stop.",
+ },
+];
+
+export const promptLabelMapping = actions.reduce(
+ (acc, action) => {
+ if (action.prompt) {
+ acc[action.prompt] = action.label;
+ }
+
+ if (action.children) {
+ action.children.forEach((child) => {
+ if (child.prompt) {
+ acc[child.prompt] = child.label;
+ }
+ });
+ }
+
+ return acc;
+ },
+ {} as Record,
+);
+
+type PredefinedActionsProps = {
+ onSelect: (action: PredefinedActionType) => void;
+};
+
+export function PredefinedActions(props: PredefinedActionsProps) {
+ const { onSelect } = props;
+
+ return (
+
-
-
- Scrimba is offering{' '}
- 20% off on
- all courses for roadmap.sh users.
-
+ {hasContent ? (
+ <>
+
+ {topicTitle &&
{topicTitle}
}
+
-
+
+ ) : (
+ <>
+ {!canSubmitContribution && (
+
+
+
+ Empty Content
+
+
+ )}
+ {canSubmitContribution && (
+
+
+
+ Help us write this content
+
+
+ Write a brief introduction to this topic and submit
+ a link to a good article, podcast, video, or any
+ other self-vetted resource that helped you
+ understand this topic better.
+
- This popup should be a brief introductory paragraph for
- the topic and a few links to good articles, videos, or any
- other self-vetted learning resources. Please consider submitting a
- PR to improve this content.
-