71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { useState } from 'react'
|
|
|
|
import {
|
|
ChatCompletionRole,
|
|
EventName,
|
|
MessageStatus,
|
|
ThreadMessage,
|
|
events,
|
|
} from '@janhq/core'
|
|
|
|
import { Button, Textarea } from '@janhq/uikit'
|
|
import { useAtomValue } from 'jotai'
|
|
|
|
import { getActiveConvoIdAtom } from '@/helpers/atoms/Conversation.atom'
|
|
|
|
const ChatInstruction = () => {
|
|
const activeConvoId = useAtomValue(getActiveConvoIdAtom)
|
|
const [isSettingInstruction, setIsSettingInstruction] = useState(false)
|
|
const [instruction, setInstruction] = useState('')
|
|
const setSystemPrompt = (instruction: string) => {
|
|
const message: ThreadMessage = {
|
|
id: 'system-prompt',
|
|
content: instruction,
|
|
role: ChatCompletionRole.System,
|
|
status: MessageStatus.Ready,
|
|
createdAt: new Date().toISOString(),
|
|
threadId: activeConvoId,
|
|
}
|
|
events.emit(EventName.OnNewMessageResponse, message)
|
|
events.emit(EventName.OnMessageResponseFinished, message)
|
|
}
|
|
return (
|
|
<div className="mx-auto mb-20 flex flex-col space-y-2">
|
|
{!isSettingInstruction && activeConvoId && (
|
|
<>
|
|
<p>
|
|
What does this Assistant do? How does it behave? What should it
|
|
avoid doing?
|
|
</p>
|
|
<Button
|
|
themes={'outline'}
|
|
className="w-32"
|
|
onClick={() => setIsSettingInstruction(true)}
|
|
>
|
|
Give Instruction
|
|
</Button>
|
|
</>
|
|
)}
|
|
{isSettingInstruction && (
|
|
<div className="space-y-4">
|
|
<Textarea
|
|
placeholder={`Enter your instructions`}
|
|
onChange={(e) => {
|
|
setInstruction(e.target.value)
|
|
}}
|
|
className="h-24"
|
|
/>
|
|
<Button
|
|
themes={'outline'}
|
|
className="w-32"
|
|
onClick={() => setSystemPrompt(instruction)}
|
|
>
|
|
Set Instruction
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
export default ChatInstruction
|