Update component imports and add conditional focus in PlaygroundForm

src/hooks/useMessageOption.tsx

@@ -14,7 +14,12 @@ import {
   SystemMessage
 } from "@langchain/core/messages"
 import { useStoreMessageOption } from "~store/option"
-import { removeMessageUsingHistoryId, saveHistory, saveMessage } from "~libs/db"
+import {
+  getPromptById,
+  removeMessageUsingHistoryId,
+  saveHistory,
+  saveMessage
+} from "~libs/db"
 import { useNavigate } from "react-router-dom"
 import { notification } from "antd"
 import { getSystemPromptForWeb } from "~web/web"
@@ -102,7 +107,11 @@ export const useMessageOption = () => {
     webSearch,
     setWebSearch,
     isSearchingInternet,
-    setIsSearchingInternet
+    setIsSearchingInternet,
+    selectedQuickPrompt,
+    setSelectedQuickPrompt,
+    selectedSystemPrompt,
+    setSelectedSystemPrompt
   } = useStoreMessageOption()
 
   const navigate = useNavigate()
@@ -310,7 +319,7 @@ export const useMessageOption = () => {
       setIsProcessing(false)
       setStreaming(false)
     } catch (e) {
-      (e)
+      e
 
       if (e?.name === "AbortError") {
         newMessage[appendingIndex].message = newMessage[
@@ -406,6 +415,7 @@ export const useMessageOption = () => {
 
     try {
       const prompt = await systemPromptForNonRagOption()
+      const selectedPrompt = await getPromptById(selectedSystemPrompt)
 
       message = message.trim().replaceAll("\n", " ")
 
@@ -434,7 +444,7 @@ export const useMessageOption = () => {
 
       const applicationChatHistory = generateHistory(history)
 
-      if (prompt) {
+      if (prompt && !selectedPrompt) {
         applicationChatHistory.unshift(
           new SystemMessage({
             content: [
@@ -447,6 +457,19 @@ export const useMessageOption = () => {
         )
       }
 
+      if (selectedPrompt) {
+        applicationChatHistory.unshift(
+          new SystemMessage({
+            content: [
+              {
+                text: selectedPrompt.content,
+                type: "text"
+              }
+            ]
+          })
+        )
+      }
+
       const chunks = await ollama.stream(
         [...applicationChatHistory, humanMessage],
         {
@@ -526,7 +549,6 @@ export const useMessageOption = () => {
       setIsProcessing(false)
       setStreaming(false)
     } catch (e) {
-
       if (e?.name === "AbortError") {
         newMessage[appendingIndex].message = newMessage[
           appendingIndex
@@ -644,6 +666,11 @@ export const useMessageOption = () => {
     regenerateLastMessage,
     webSearch,
     setWebSearch,
-    isSearchingInternet
+    isSearchingInternet,
+    setIsSearchingInternet,
+    selectedQuickPrompt,
+    setSelectedQuickPrompt,
+    selectedSystemPrompt,
+    setSelectedSystemPrompt
   }
 }