feat: allow user to give instruction for the conversation

web/hooks/useSendChatMessage.ts

@@ -5,7 +5,6 @@ import {
   MessageRequest,
   MessageStatus,
   PluginType,
-  Thread,
   ThreadMessage,
   events,
 } from '@janhq/core'

web/screens/Chat/ChatBody/index.tsx

@@ -1,17 +1,25 @@
+import { useContext } from 'react'
+
 import { useAtomValue } from 'jotai'
 
+import { FeatureToggleContext } from '@/context/FeatureToggle'
+
+import ChatInstruction from '../ChatInstruction'
 import ChatItem from '../ChatItem'
 
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 
 const ChatBody: React.FC = () => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
-
+  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
   return (
     <div className="flex h-full w-full flex-col-reverse overflow-y-auto">
       {messages.map((message) => (
         <ChatItem {...message} key={message.id} />
       ))}
+      {experimentalFeatureEnabed && messages.length === 0 && (
+        <ChatInstruction />
+      )}
     </div>
   )
 }

web/screens/Chat/ChatInstruction/index.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react'
+
+import {
+  ChatCompletionRole,
+  EventName,
+  MessageStatus,
+  ThreadMessage,
+  events,
+} from '@janhq/core'
+
+import { Button, Input } 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">
+      <p>
+        What does this Assistant do? How does it behave? What should it avoid
+        doing?
+      </p>
+      {!isSettingInstruction && (
+        <Button
+          themes={'outline'}
+          className="w-32"
+          onClick={() => setIsSettingInstruction(true)}
+        >
+          Give Instruction
+        </Button>
+      )}
+      {isSettingInstruction && (
+        <div className="space-y-4">
+          <Input
+            placeholder={`Enter your instructions`}
+            onChange={(e) => {
+              setInstruction(e.target.value)
+            }}
+          />
+          <Button
+            themes={'outline'}
+            className="w-32"
+            onClick={() => setSystemPrompt(instruction)}
+          >
+            Set Instruction
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+export default ChatInstruction

web/screens/Chat/SimpleTextMessage/index.tsx

@@ -44,6 +44,7 @@ const marked = new Marked(
 const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
   const parsedText = marked.parse(props.content ?? '')
   const isUser = props.role === ChatCompletionRole.User
+  const isSystem = props.role === ChatCompletionRole.System
 
   return (
     <div className="mx-auto rounded-xl px-4 lg:w-3/4">
@@ -53,7 +54,7 @@ const SimpleTextMessage: React.FC<ThreadMessage> = (props) => {
           !isUser && 'mt-2'
         )}
       >
-        {!isUser && <LogoMark width={20} />}
+        {!isUser && !isSystem && <LogoMark width={20} />}
         <div className="text-sm font-extrabold capitalize">{props.role}</div>
         <p className="text-xs font-medium">{displayDate(props.createdAt)}</p>
       </div>