Kamran Ahmed
7 days ago
parent
6f7eb7dd5d
commit
f173a4723c
4 changed files with 133 additions and 157 deletions
@ -0,0 +1,115 @@ |
||||
import { |
||||
BabyIcon, |
||||
BookOpenTextIcon, |
||||
BrainIcon, |
||||
ChevronDownIcon, |
||||
NotebookPenIcon, |
||||
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 Topic', |
||||
prompt: 'Explain this topic in detail and include examples', |
||||
}, |
||||
{ |
||||
icon: BabyIcon, |
||||
label: 'Explain like I am five', |
||||
prompt: 'Explain this topic like I am a 5 years old', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
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; |
||||
} |
||||
return acc; |
||||
}, |
||||
{} as Record<string, string>, |
||||
); |
||||
|
||||
type PredefinedActionsProps = { |
||||
onSelect: (action: PredefinedActionType) => void; |
||||
}; |
||||
|
||||
export function PredefinedActions(props: PredefinedActionsProps) { |
||||
const { onSelect } = props; |
||||
|
||||
return ( |
||||
<div className="flex items-center gap-2 border-gray-200 px-3 py-1 text-sm"> |
||||
{actions.map((action) => { |
||||
if (!action.children) { |
||||
return ( |
||||
<PredefinedActionButton |
||||
key={action.label} |
||||
icon={action.icon} |
||||
label={action.label} |
||||
onClick={() => { |
||||
onSelect(action); |
||||
}} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<PredefinedActionGroup |
||||
key={action.label} |
||||
label={action.label} |
||||
icon={action.icon} |
||||
messages={action.children} |
||||
onSelect={onSelect} |
||||
/> |
||||
); |
||||
})} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
type PredefinedActionButtonProps = { |
||||
label: string; |
||||
icon?: LucideIcon; |
||||
onClick: () => void; |
||||
isGroup?: boolean; |
||||
className?: string; |
||||
}; |
||||
|
||||
export function PredefinedActionButton(props: PredefinedActionButtonProps) { |
||||
const { label, icon: Icon, onClick, isGroup = false, className } = props; |
||||
|
||||
return ( |
||||
<button |
||||
className={cn( |
||||
'flex shrink-0 items-center gap-1.5 rounded-md bg-gray-200 px-2 py-1 text-sm whitespace-nowrap hover:bg-gray-300', |
||||
className, |
||||
)} |
||||
onClick={onClick} |
||||
> |
||||
{Icon && <Icon className="size-3.5" />} |
||||
{label} |
||||
{isGroup && <ChevronDownIcon className="size-3.5" />} |
||||
</button> |
||||
); |
||||
} |
||||
@ -1,120 +0,0 @@ |
||||
import { |
||||
BabyIcon, |
||||
BookOpenTextIcon, |
||||
BrainIcon, |
||||
ChevronDownIcon, |
||||
NotebookPenIcon, |
||||
type LucideIcon, |
||||
} from 'lucide-react'; |
||||
import { useMemo } from 'react'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { PredefinedMessageGroup } from './PredefinedMessageGroup'; |
||||
|
||||
export const testMyKnowledgePrompt = |
||||
'Act as an interviewer and test my understanding of this topic'; |
||||
export const explainTopicPrompt = 'Explain this topic in detail'; |
||||
|
||||
export type PredefinedMessage = { |
||||
icon: LucideIcon; |
||||
label: string; |
||||
} & ( |
||||
| { |
||||
message?: never; |
||||
messages: PredefinedMessage[]; |
||||
} |
||||
| { |
||||
message: string; |
||||
messages?: never; |
||||
} |
||||
); |
||||
|
||||
type PredefinedMessagesProps = { |
||||
onSelect: (message: Omit<PredefinedMessage, 'messages'>) => void; |
||||
}; |
||||
|
||||
export function PredefinedMessages(props: PredefinedMessagesProps) { |
||||
const { onSelect } = props; |
||||
|
||||
const predefinedMessages: PredefinedMessage[] = useMemo( |
||||
() => [ |
||||
{ |
||||
icon: BookOpenTextIcon, |
||||
label: 'Explain', |
||||
messages: [ |
||||
{ |
||||
icon: NotebookPenIcon, |
||||
label: 'Explain Topic', |
||||
message: 'Explain this topic in detail and include examples', |
||||
}, |
||||
{ |
||||
icon: BabyIcon, |
||||
label: 'Explain like I am five', |
||||
message: 'Explain this topic like I am a 5 years old', |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
icon: BrainIcon, |
||||
label: 'Test my Knowledge', |
||||
message: testMyKnowledgePrompt, |
||||
}, |
||||
], |
||||
[], |
||||
); |
||||
|
||||
return ( |
||||
<div className="flex items-center gap-2 border-gray-200 px-3 py-1 text-sm"> |
||||
{predefinedMessages.map((m) => { |
||||
const isGroup = 'messages' in m && Array.isArray(m?.messages); |
||||
if (!isGroup) { |
||||
return ( |
||||
<PredefinedMessageButton |
||||
key={m.message} |
||||
icon={m.icon} |
||||
label={m.label} |
||||
onClick={() => { |
||||
onSelect(m); |
||||
}} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<PredefinedMessageGroup |
||||
key={m.label} |
||||
label={m.label} |
||||
icon={m.icon} |
||||
messages={m.messages} |
||||
onSelect={onSelect} |
||||
/> |
||||
); |
||||
})} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
type PredefinedMessageButtonProps = { |
||||
label: string; |
||||
icon?: LucideIcon; |
||||
onClick: () => void; |
||||
isGroup?: boolean; |
||||
className?: string; |
||||
}; |
||||
|
||||
export function PredefinedMessageButton(props: PredefinedMessageButtonProps) { |
||||
const { label, icon: Icon, onClick, isGroup = false, className } = props; |
||||
|
||||
return ( |
||||
<button |
||||
className={cn( |
||||
'flex shrink-0 items-center gap-1.5 rounded-md bg-gray-200 px-2 py-1 text-sm whitespace-nowrap hover:bg-gray-300', |
||||
className, |
||||
)} |
||||
onClick={onClick} |
||||
> |
||||
{Icon && <Icon className="size-3.5" />} |
||||
{label} |
||||
{isGroup && <ChevronDownIcon className="size-3.5" />} |
||||
</button> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue