feat: Add system and quick prompts on side panel

src/components/Common/PromptSelect.tsx

@@ -4,20 +4,27 @@ import { BookIcon, ComputerIcon, ZapIcon } from "lucide-react"
 import React from "react"
 import { useTranslation } from "react-i18next"
 import { getAllPrompts } from "@/db"
-import { useMessageOption } from "@/hooks/useMessageOption"
 
-export const PromptSelect: React.FC = () => {
+type Props = {
+  setSelectedSystemPrompt: (promptId: string | undefined) => void
+  setSelectedQuickPrompt: (prompt: string | undefined) => void
+  selectedSystemPrompt: string | undefined
+  className?: string
+}
+
+export const PromptSelect: React.FC<Props> = ({
+  setSelectedQuickPrompt,
+  setSelectedSystemPrompt,
+  selectedSystemPrompt,
+  className = "dark:text-gray-300"
+}) => {
   const { t } = useTranslation("option")
-  const {
-    selectedSystemPrompt,
-    setSelectedQuickPrompt,
-    setSelectedSystemPrompt
-  } = useMessageOption()
 
   const { data } = useQuery({
     queryKey: ["getAllPromptsForSelect"],
     queryFn: getAllPrompts
   })
+
   const handlePromptChange = (value?: string) => {
     if (!value) {
       setSelectedSystemPrompt(undefined)
@@ -79,7 +86,7 @@ export const PromptSelect: React.FC = () => {
           placement={"topLeft"}
           trigger={["click"]}>
           <Tooltip title={t("selectAPrompt")}>
-            <button type="button" className="dark:text-gray-300">
+            <button type="button" className={className}>
               <BookIcon className="h-5 w-5" />
             </button>
           </Tooltip>

src/components/Layouts/Header.tsx

@@ -45,7 +45,7 @@ export const Header: React.FC<Props> = ({
     setSelectedQuickPrompt,
     setSelectedSystemPrompt,
     messages,
-    streaming
+    streaming,
   } = useMessageOption()
   const {
     data: models,
@@ -182,7 +182,11 @@ export const Header: React.FC<Props> = ({
           />
         </div>
         <div className="lg:hidden">
-          <PromptSelect />
+          <PromptSelect
+            selectedSystemPrompt={selectedSystemPrompt}
+            setSelectedSystemPrompt={setSelectedSystemPrompt}
+            setSelectedQuickPrompt={setSelectedQuickPrompt}
+          />
         </div>
         <SelectedKnowledge />
       </div>

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