feat: Add system and quick prompts on side panel

src/components/Sidepanel/Chat/form.tsx

@@ -24,7 +24,6 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
   const { sendWhenEnter, setSendWhenEnter } = useWebUI()
   const [typing, setTyping] = React.useState<boolean>(false)
   const { t } = useTranslation(["playground", "common"])
-
   const form = useForm({
     initialValues: {
       message: "",
@@ -37,7 +36,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
     resetTranscript,
     start: startListening,
     stop: stopSpeechRecognition,
-    supported: browserSupportsSpeechRecognition
+    supported: browserSupportsSpeechRecognition, 
   } = useSpeechRecognition()
 
   const stopListening = async () => {
@@ -118,12 +117,14 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
     onSubmit,
     selectedModel,
     chatMode,
-    speechToTextLanguage,
     stopStreamingRequest,
     streaming,
     setChatMode,
     webSearch,
-    setWebSearch
+    setWebSearch,
+    selectedQuickPrompt,
+    setSelectedQuickPrompt,
+    speechToTextLanguage
   } = useMessage()
 
   React.useEffect(() => {
@@ -139,6 +140,23 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
       form.setFieldValue("message", transcript)
     }
   }, [transcript])
+
+  React.useEffect(() => {
+    if (selectedQuickPrompt) {
+      const word = getVariable(selectedQuickPrompt)
+      form.setFieldValue("message", selectedQuickPrompt)
+      if (word) {
+        textareaRef.current?.focus()
+        const interval = setTimeout(() => {
+          textareaRef.current?.setSelectionRange(word.start, word.end)
+          setSelectedQuickPrompt(null)
+        }, 100)
+        return () => {
+          clearInterval(interval)
+        }
+      }
+    }
+  }, [selectedQuickPrompt])
   const { mutateAsync: sendMessage, isPending: isSending } = useMutation({
     mutationFn: onSubmit,
     onSuccess: () => {

src/components/Sidepanel/Chat/header.tsx

@@ -7,13 +7,22 @@ import { useTranslation } from "react-i18next"
 import { CurrentChatModelSettings } from "@/components/Common/Settings/CurrentChatModelSettings"
 import React from "react"
 import { useStorage } from "@plasmohq/storage/hook"
+import { PromptSelect } from "@/components/Common/PromptSelect"
 export const SidepanelHeader = () => {
   const [hideCurrentChatModelSettings] = useStorage(
     "hideCurrentChatModelSettings",
     false
   )
 
-  const { clearChat, isEmbedding, messages, streaming } = useMessage()
+  const {
+    clearChat,
+    isEmbedding,
+    messages,
+    streaming,
+    selectedSystemPrompt,
+    setSelectedSystemPrompt,
+    setSelectedQuickPrompt
+  } = useMessage()
   const { t } = useTranslation(["sidepanel", "common"])
   const [openModelSettings, setOpenModelSettings] = React.useState(false)
 
@@ -44,11 +53,13 @@ export const SidepanelHeader = () => {
             <EraserIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
           </button>
         )}
-        {/* <Tooltip title={t("tooltip.history")}>
-          <Link to="/history">
-            <HistoryIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
-          </Link>
-        </Tooltip> */}
+        <PromptSelect
+          selectedSystemPrompt={selectedSystemPrompt}
+          setSelectedSystemPrompt={setSelectedSystemPrompt}
+          setSelectedQuickPrompt={setSelectedQuickPrompt}
+          className="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+        />
+
         {!hideCurrentChatModelSettings && (
           <Tooltip title={t("common:currentChatModelSettings")}>
             <button