Update component imports and add conditional focus in PlaygroundForm

src/components/Layouts/Layout.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 
 import { useLocation, NavLink } from "react-router-dom"
-import { Sidebar } from "./Sidebar"
+import { Sidebar } from "../Option/Sidebar"
 import { Drawer, Select, Tooltip } from "antd"
 import { useQuery } from "@tanstack/react-query"
 import { getAllModels } from "~services/ollama"
@@ -9,10 +9,13 @@ import { useMessageOption } from "~hooks/useMessageOption"
 import {
   ChevronLeft,
   CogIcon,
+  ComputerIcon,
   GithubIcon,
   PanelLeftIcon,
-  SquarePen
+  SquarePen,
+  ZapIcon
 } from "lucide-react"
+import { getAllPrompts } from "~libs/db"
 
 export default function OptionLayout({
   children
@@ -20,6 +23,14 @@ export default function OptionLayout({
   children: React.ReactNode
 }) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
+  const {
+    selectedModel,
+    setSelectedModel,
+    clearChat,
+    selectedSystemPrompt,
+    setSelectedQuickPrompt,
+    setSelectedSystemPrompt
+  } = useMessageOption()
 
   const {
     data: models,
@@ -27,12 +38,30 @@ export default function OptionLayout({
     isFetching: isModelsFetching
   } = useQuery({
     queryKey: ["fetchModel"],
-    queryFn: getAllModels,
+    queryFn: () => getAllModels({ returnEmpty: true }),
     refetchInterval: 15000
   })
 
+  const { data: prompts, isLoading: isPromptLoading } = useQuery({
+    queryKey: ["fetchAllPromptsLayout"],
+    queryFn: getAllPrompts
+  })
+
   const { pathname } = useLocation()
-  const { selectedModel, setSelectedModel, clearChat } = useMessageOption()
+
+  const getPromptInfoById = (id: string) => {
+    return prompts?.find((prompt) => prompt.id === id)
+  }
+
+  const handlePromptChange = (value: string) => {
+    const prompt = getPromptInfoById(value)
+    if (prompt?.is_system) {
+      setSelectedSystemPrompt(prompt.id)
+    } else {
+      setSelectedQuickPrompt(prompt.content)
+      setSelectedSystemPrompt(null)
+    }
+  }
 
   return (
     <div>
@@ -87,6 +116,41 @@ export default function OptionLayout({
                   }))}
                 />
               </div>
+              <span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
+                {"/"}
+              </span>
+              <div>
+                <Select
+                  size="large"
+                  loading={isPromptLoading}
+                  showSearch
+                  placeholder="Select a prompt"
+                  className="w-60"
+                  allowClear
+                  onChange={handlePromptChange}
+                  value={selectedSystemPrompt}
+                  filterOption={(input, option) =>
+                    option.label.key
+                      .toLowerCase()
+                      .indexOf(input.toLowerCase()) >= 0
+                  }
+                  options={prompts?.map((prompt) => ({
+                    label: (
+                      <span
+                        key={prompt.title}
+                        className="flex flex-row justify-between items-center">
+                        {prompt.title}
+                        {prompt.is_system ? (
+                          <ComputerIcon className="w-4 h-4" />
+                        ) : (
+                          <ZapIcon className="w-4 h-4" />
+                        )}
+                      </span>
+                    ),
+                    value: prompt.id
+                  }))}
+                />
+              </div>
             </div>
             <div className="flex flex-1 justify-end px-4">
               <div className="ml-4 flex items-center md:ml-6">

src/components/Option/Playground/PlaygroundForm.tsx

@@ -10,6 +10,7 @@ import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
 import { useWebUI } from "~store/webui"
 import { defaultEmbeddingModelForRag } from "~services/ollama"
 import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
+import { getVariable } from "~utils/select-varaible"
 
 type Props = {
   dropedFile: File | undefined
@@ -21,7 +22,11 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
 
   const textAreaFocus = () => {
     if (textareaRef.current) {
-      textareaRef.current.focus()
+      if (
+        textareaRef.current.selectionStart === textareaRef.current.selectionEnd
+      ) {
+        textareaRef.current.focus()
+      }
     }
   }
   const form = useForm({
@@ -65,7 +70,9 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     stopStreamingRequest,
     streaming: isSending,
     webSearch,
-    setWebSearch
+    setWebSearch,
+    selectedQuickPrompt,
+    setSelectedQuickPrompt
   } = useMessageOption()
 
   const { isListening, start, stop, transcript } = useSpeechRecognition()
@@ -77,6 +84,22 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     }
   }, [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)
+        }, 100)
+        return () => {
+          clearInterval(interval)
+        }
+      }
+    }
+  }, [selectedQuickPrompt])
+
   const queryClient = useQueryClient()
 
   const { mutateAsync: sendMessage } = useMutation({

src/components/Option/Prompt/index.tsx

@@ -2,7 +2,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import {
   Skeleton,
   Table,
-  Tag,
   Tooltip,
   notification,
   Modal,
@@ -10,7 +9,7 @@ import {
   Form,
   Switch
 } from "antd"
-import { Trash2, Pen } from "lucide-react"
+import { Trash2, Pen, Computer, Zap } from "lucide-react"
 import { useState } from "react"
 import {
   deletePromptById,
@@ -131,14 +130,21 @@ export const PromptBody = () => {
                 key: "content"
               },
               {
-                title: "Is System Prompt",
+                title: "Prompt Type",
                 dataIndex: "is_system",
                 key: "is_system",
-                render: (is_system) => (
-                  <Tag color={is_system ? "green" : "blue"}>
-                    {is_system ? "Yes" : "No"}
-                  </Tag>
-                )
+                render: (is_system) =>
+                  is_system ? (
+                    <span className="flex justify-between">
+                       <Computer className="w-5 h-5 mr-3" />
+                       System Prompt
+                    </span>
+                  ) : (
+                    <span className="flex justify-between">
+                      <Zap className="w-5 h-5 mr-3" />
+                      Quick Prompt
+                    </span>
+                  )
               },
               {
                 title: "Action",