Merge pull request #60 from n4ze3m/next

v1.1.6

package.json

@@ -37,7 +37,7 @@
     "langchain": "^0.1.28",
     "lucide-react": "^0.350.0",
     "ml-distance": "^4.0.1",
-    "pdfjs-dist": "^4.0.379",
+    "pdfjs-dist": "4.0.379",
     "property-information": "^6.4.1",
     "pubsub-js": "^1.9.4",
     "react": "18.2.0",

src/assets/locale/en/settings.json

@@ -41,12 +41,12 @@
                 "confirm": "Are you sure you want to delete your chat history? This action cannot be undone."
             },
             "export": {
-                "label": "Export Chat History, Settings, and Prompts",
+                "label": "Export Chat History, Knowledge Base, and Prompts",
                 "button": "Export Data",
                 "success": "Export Success"
             },
             "import": {
-                "label": "Import Chat History, Settings, and Prompts",
+                "label": "Import Chat History, Knowledge Base, and Prompts",
                 "button": "Import Data",
                 "success": "Import Success",
                 "error": "Import Error"

src/assets/locale/ja-JP/settings.json

@@ -44,12 +44,12 @@
                 "confirm": "チャット履歴を削除してもよろしいですか？この操作は元に戻せません。"
             },
             "export": {
-                "label": "チャット履歴、設定、プロンプトをエクスポートする",
+                "label": "チャット履歴、知識ベース、プロンプトをエクスポート",
                 "button": "データをエクスポート",
                 "success": "エクスポート成功"
             },
             "import": {
-                "label": "チャット履歴、設定、プロンプトをインポートする",
+                "label": "チャット履歴、知識ベース、プロンプトをインポート",
                 "button": "データをインポート",
                 "success": "インポート成功",
                 "error": "インポートエラー"

src/assets/locale/ml/settings.json

@@ -44,16 +44,16 @@
                 "confirm": "നിങ്ങളുടെ ചാറ്റ് ചരിത്രം ഇല്ലാതാക്കണമെന്ന് ഉറപ്പാണോ? ഈ പ്രവർത്തനം പിന്നീട് പിന്വലിക്കാനാവില്ല."
             },
             "export": {
-                "label": "ചാറ്റ് ചരിത്രം, ക്രമീകരണങ്ങൾ, പ്രോംപ്റ്റുകൾ എക്സ്പോർട്ട് ചെയ്യുക",
+                "label": "ചാറ്റ് ചരിത്രം, അറിവ് അടിസ്ഥാനം, പ്രോംപ്റ്റുകൾ എക്സ്പോർട്ട് ചെയ്യുക",
                 "button": "ഡാറ്റ എക്സ്പോർട്ട് ചെയ്യുക",
                 "success": "എക്സ്പോർട്ട് വിജയകരമായി"
-            },
-            "import": {
-                "label": "ചാറ്റ് ചരിത്രം, ക്രമീകരണങ്ങൾ, പ്രോംപ്റ്റുകൾ ഇമ്പോർട്ട് ചെയ്യുക",
+              },
+              "import": {
+                "label": "ചാറ്റ് ചരിത്രം, അറിവ് അടിസ്ഥാനം, പ്രോംപ്റ്റുകൾ ഇമ്പോർട്ട് ചെയ്യുക",
                 "button": "ഡാറ്റ ഇമ്പോർട്ട് ചെയ്യുക",
                 "success": "ഇമ്പോർട്ട് വിജയകരമായി",
-                "error": "ഇമ്പോർട്ട് പരാജയപ്പെട്ടു"
-            }
+                "error": "ഇമ്പോർട്ട് പിശക്"
+              }
         },
         "tts": {
             "heading": "ടെക്സ്റ്റ്-ടു-സ്പീച്ച് ക്രമീകരണങ്ങൾ",

src/assets/locale/ru/settings.json

@@ -41,13 +41,13 @@
                 "confirm": "Вы уверены, что хотите удалить историю чата? Это действие нельзя отменить."
             },
             "export": {
-                "label": "Экспорт истории чата, настроек и подсказок",
-                "button": "Экспорт данных",
+                "label": "Экспорт истории чата, базы знаний и подсказок",
+                "button": "Экспортировать данные",
                 "success": "Экспорт успешен"
             },
             "import": {
-                "label": "Импорт истории чата, настроек и подсказок",
-                "button": "Импорт данных",
+                "label": "Импорт истории чата, базы знаний и подсказок",
+                "button": "Импортировать данные",
                 "success": "Импорт успешен",
                 "error": "Ошибка импорта"
             }

src/assets/locale/zh/settings.json

@@ -44,12 +44,12 @@
                 "confirm": "您确定要删除聊天记录吗?此操作无法撤销。"
             },
             "export": {
-                "label": "导出聊天记录、设置和提示",
+                "label": "导出聊天记录、知识库和提示",
                 "button": "导出数据",
                 "success": "导出成功"
             },
             "import": {
-                "label": "导入聊天记录、设置和提示",
+                "label": "导入聊天记录、知识库和提示",
                 "button": "导入数据",
                 "success": "导入成功",
                 "error": "导入错误"

src/components/Common/Beta.tsx

@@ -0,0 +1,8 @@
+import { Tag } from "antd"
+import { useTranslation } from "react-i18next"
+
+export const BetaTag = () => {
+  const { t } = useTranslation("common")
+
+  return <Tag color="yellow">{t("beta")}</Tag>
+}

src/components/Common/ModelSelect.tsx

@@ -0,0 +1,63 @@
+import { useQuery } from "@tanstack/react-query"
+import { Dropdown, Tooltip } from "antd"
+import { LucideBrain } from "lucide-react"
+import React from "react"
+import { useTranslation } from "react-i18next"
+import { OllamaIcon } from "../Icons/Ollama"
+import { fetchChatModels } from "@/services/ollama"
+import { useMessage } from "@/hooks/useMessage"
+
+export const ModelSelect: React.FC = () => {
+  const { t } = useTranslation("common")
+  const { setSelectedModel, selectedModel } = useMessage()
+  const { data } = useQuery({
+    queryKey: ["getAllModelsForSelect"],
+    queryFn: async () => {
+      const models = await fetchChatModels({ returnEmpty: false })
+      return models
+    }
+  })
+
+  return (
+    <>
+      {data && data.length > 0 && (
+        <Dropdown
+          menu={{
+            items:
+              data?.map((d) => ({
+                key: d.name,
+                label: (
+                  <div className="w-52 gap-2 text-lg truncate inline-flex line-clamp-3  items-center  dark:border-gray-700">
+                    <div>
+                      <OllamaIcon className="h-6 w-6 text-gray-400" />
+                    </div>
+                    {d.name}
+                  </div>
+                ),
+                onClick: () => {
+                  if (selectedModel === d.name) {
+                    setSelectedModel(null)
+                  } else {
+                    setSelectedModel(d.name)
+                  }
+                }
+              })) || [],
+            style: {
+              maxHeight: 500,
+              overflowY: "scroll"
+            },
+            className: "no-scrollbar",
+            activeKey: selectedModel
+          }}
+          placement={"topLeft"}
+          trigger={["click"]}>
+          <Tooltip title={t("selectAModel")}>
+            <button type="button" className="dark:text-gray-300">
+              <LucideBrain className="h-5 w-5"/>
+            </button>
+          </Tooltip>
+        </Dropdown>
+      )}
+    </>
+  )
+}

src/components/Layouts/Layout.tsx

@@ -63,13 +63,18 @@ export default function OptionLayout({
     return prompts?.find((prompt) => prompt.id === id)
   }
 
-  const handlePromptChange = (value: string) => {
+  const handlePromptChange = (value?: string) => {
+    if (!value) {
+      setSelectedSystemPrompt(undefined)
+      setSelectedQuickPrompt(undefined)
+      return
+    }
     const prompt = getPromptInfoById(value)
     if (prompt?.is_system) {
       setSelectedSystemPrompt(prompt.id)
     } else {
+      setSelectedSystemPrompt(undefined)
       setSelectedQuickPrompt(prompt!.content)
-      setSelectedSystemPrompt("")
     }
   }
 

src/components/Layouts/SettingsOptionLayout.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 import { OllamaIcon } from "../Icons/Ollama"
 import { Tag } from "antd"
+import { BetaTag } from "../Common/Beta"
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ")
@@ -81,7 +82,7 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
                 name={
                   <div className="inline-flex items-center gap-2">
                     {t("manageKnowledge.title")}
-                    <Tag color="yellow">{t("common:beta")}</Tag>
+                    <BetaTag />
                   </div>
                 }
                 icon={BlocksIcon}

src/components/Option/Settings/other.tsx

@@ -9,6 +9,11 @@ import { SearchModeSettings } from "./search-mode"
 import { useTranslation } from "react-i18next"
 import { useI18n } from "@/hooks/useI18n"
 import { TTSModeSettings } from "./tts-mode"
+import {
+  exportPageAssistData,
+  importPageAssistData
+} from "@/libs/export-import"
+import { BetaTag } from "@/components/Common/Beta"
 
 export const SettingOther = () => {
   const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =
@@ -90,15 +95,15 @@ export const SettingOther = () => {
         </button>
       </div>
       <SearchModeSettings />
-      <TTSModeSettings  />
+      <TTSModeSettings />
       <div>
         <div className="mb-5">
           <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
             {t("generalSettings.system.heading")}
           </h2>
           <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
         </div>
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row mb-3 justify-between">
           <span className="text-gray-500 dark:text-neutral-50 ">
             {t("generalSettings.system.deleteChatHistory.label")}
           </span>
@@ -122,6 +127,37 @@ export const SettingOther = () => {
             {t("generalSettings.system.deleteChatHistory.button")}
           </button>
         </div>
+        <div className="flex flex-row mb-3 justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+          <BetaTag />    {t("generalSettings.system.export.label")}
+          </span>
+          <button
+            onClick={exportPageAssistData}
+            className="bg-gray-800 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-md cursor-pointer">
+            {t("generalSettings.system.export.button")}
+          </button>
+        </div>
+        <div className="flex flex-row mb-3 justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+          <BetaTag /> {t("generalSettings.system.import.label")}
+          </span>
+          <label
+            htmlFor="import"
+            className="bg-gray-800 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-md cursor-pointer">
+            {t("generalSettings.system.import.button")}
+          </label>
+          <input
+            type="file"
+            accept=".json"
+            id="import"
+            className="hidden"
+            onChange={(e) => {
+              if (e.target.files) {
+                importPageAssistData(e.target.files[0])
+              }
+            }}
+          />
+        </div>
       </div>
     </dl>
   )

src/components/Sidepanel/Chat/empty.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { Select } from "antd"
 import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
@@ -15,6 +15,7 @@ import {
 export const EmptySidePanel = () => {
   const [ollamaURL, setOllamaURL] = useState<string>("")
   const { t } = useTranslation(["playground", "common"])
+  const queryClient = useQueryClient()
   const {
     data: ollamaInfo,
     status: ollamaStatus,
@@ -26,7 +27,9 @@ export const EmptySidePanel = () => {
       const ollamaURL = await getOllamaURL()
       const isOk = await isOllamaRunning()
       const models = await fetchChatModels({ returnEmpty: false })
-
+      queryClient.invalidateQueries({
+        queryKey: ["getAllModelsForSelect"]
+      })
       return {
         isOk,
         models,

src/components/Sidepanel/Chat/form.tsx

@@ -10,6 +10,7 @@ import { useWebUI } from "~/store/webui"
 import { defaultEmbeddingModelForRag } from "~/services/ollama"
 import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
 import { useTranslation } from "react-i18next"
+import { ModelSelect } from "@/components/Common/ModelSelect"
 
 type Props = {
   dropedFile: File | undefined
@@ -186,6 +187,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 {...form.getInputProps("message")}
               />
               <div className="flex mt-4 justify-end gap-3">
+                <ModelSelect />
                 <Tooltip title={t("tooltip.speechToText")}>
                   <button
                     type="button"

src/db/index.ts

@@ -417,3 +417,42 @@ export const getUserId = async () => {
   }
   return id
 }
+
+export const exportChatHistory = async () => {
+  const db = new PageAssitDatabase()
+  const chatHistories = await db.getChatHistories()
+  const messages = await Promise.all(
+    chatHistories.map(async (history) => {
+      const messages = await db.getChatHistory(history.id)
+      return { history, messages }
+    })
+  )
+  return messages
+}
+
+export const importChatHistory = async (
+  data: {
+    history: HistoryInfo
+    messages: MessageHistory
+  }[]
+) => {
+  const db = new PageAssitDatabase()
+  for (const { history, messages } of data) {
+    await db.addChatHistory(history)
+    for (const message of messages) {
+      await db.addMessage(message)
+    }
+  }
+}
+
+export const exportPrompts = async () => {
+  const db = new PageAssitDatabase()
+  return await db.getAllPrompts()
+}
+
+export const importPrompts = async (prompts: Prompts) => {
+  const db = new PageAssitDatabase()
+  for (const prompt of prompts) {
+    await db.addPrompt(prompt)
+  }
+}

src/db/knowledge.ts

@@ -190,3 +190,16 @@ export const deleteSource = async (id: string, source_id: string) => {
   await db.deleteSource(id, source_id)
   await deleteVectorByFileId(`vector:${id}`, source_id)
 }
+
+export const exportKnowledge = async () => {
+  const db = new PageAssistKnowledge()
+  const data = await db.getAll()
+  return data
+}
+
+export const importKnowledge = async (data: Knowledge[]) => {
+  const db = new PageAssistKnowledge()
+  for (const d of data) {
+    await db.create(d)
+  }
+}