chore: Update URL rewrite logic for runtime

src/assets/locale/en/playground.json

@@ -2,7 +2,8 @@
     "ollamaState": {
         "searching": "Searching for Your Ollama 🦙",
         "running": "Ollama is running 🦙",
-        "notRunning": "Unable to connect to Ollama 🦙"
+        "notRunning": "Unable to connect to Ollama 🦙",
+        "connectionError": "It seems like you are having a connection error. Please refer to this <anchor>documentation</anchor> for troubleshooting."
     },
     "formError": {
         "noModel": "Please select a model",

src/assets/locale/en/settings.json

@@ -245,6 +245,17 @@
                 "webSearchFollowUpPromptHelp": "Do not remove `{chat_history}` and `{question}` from the prompt.",
                 "webSearchFollowUpPromptError": "Please input your Web Search Follow Up Prompt!",
                 "webSearchFollowUpPromptPlaceholder": "Your Web Search Follow Up Prompt"
+            },
+            "advanced": {
+                "label": "Advance Ollama URL Configuration",
+                "urlRewriteEnabled": {
+                    "label": "Enable or Disable Custom Origin URL"
+                },
+                "rewriteUrl": {
+                    "label": "Custom Origin URL",
+                    "placeholder": "Enter Custom Origin URL"
+                },
+                "help": "If you have connection issues with Ollama on Page Assist, you can configure a custom origin URL. To learn more about the configuration, <anchor>click here</anchor>."
             }
         }
     },

src/components/Common/AdvanceOllamaSettings.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next"
 export const AdvanceOllamaSettings = () => {
   const [urlRewriteEnabled, setUrlRewriteEnabled] = useStorage(
     "urlRewriteEnabled",
-    true
+    false
   )
 
   const [rewriteUrl, setRewriteUrl] = useStorage(
@@ -18,7 +18,7 @@ export const AdvanceOllamaSettings = () => {
     <div className="space-y-4">
       <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
         <span className="text-gray-500 dark:text-neutral-50 ">
-          {t("generalSettings.settings.advanced.urlRewriteEnabled.label")}
+          {t("ollamaSettings.settings.advanced.urlRewriteEnabled.label")}
         </span>
         <div>
           <Switch
@@ -30,15 +30,15 @@ export const AdvanceOllamaSettings = () => {
       </div>
       <div className="flex flex-col space-y-4 sm:space-y-0 sm:justify-between">
         <span className="text-gray-500 dark:text-neutral-50 mb-3">
-          {t("generalSettings.settings.advanced.urlRewriteEnabled.label")}
+          {t("ollamaSettings.settings.advanced.rewriteUrl.label")}
         </span>
         <div>
           <Input
             className="w-full"
             value={rewriteUrl}
-            disabled={urlRewriteEnabled}
+            disabled={!urlRewriteEnabled}
             placeholder={t(
-              "generalSettings.settings.advanced.urlRewriteEnabled.placeholder"
+              "ollamaSettings.settings.advanced.rewriteUrl.placeholder"
             )}
             onChange={(e) => setRewriteUrl(e.target.value)}
           />

src/components/Option/Playground/PlaygroundEmpty.tsx

@@ -1,7 +1,8 @@
+import { cleanUrl } from "@/libs/clean-url"
 import { useQuery } from "@tanstack/react-query"
 import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 import {
   getOllamaURL,
   isOllamaRunning,
@@ -79,6 +80,23 @@ export const PlaygroundEmpty = () => {
                 <RotateCcw className="h-4 w-4 mr-3" />
                 {t("common:retry")}
               </button>
+
+              {ollamaURL &&
+                cleanUrl(ollamaURL) !== "http://127.0.0.1:11434" && (
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mb-4 text-center">
+                    <Trans
+                      i18nKey="playground:ollamaState.connectionError"
+                      components={{
+                        anchor: (
+                          <a
+                            href="https://github.com/n4ze3m/page-assist/blob/main/docs/connection-issue.md"
+                            target="__blank"
+                            className="text-blue-600 dark:text-blue-400"></a>
+                        )
+                      }}
+                    />
+                  </p>
+                )}
             </div>
           )
         ) : null}

src/components/Option/Settings/ollama.tsx

@@ -12,7 +12,7 @@ import {
   setOllamaURL as saveOllamaURL
 } from "~/services/ollama"
 import { SettingPrompt } from "./prompt"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 import { useStorage } from "@plasmohq/storage/hook"
 import { AdvanceOllamaSettings } from "@/components/Common/AdvanceOllamaSettings"
 
@@ -87,9 +87,24 @@ export const SettingsOllama = () => {
                 {
                   key: "1",
                   label: (
+                    <div>
                       <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
                         {t("ollamaSettings.settings.advanced.label")}
                       </h2>
+                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
+                        <Trans
+                          i18nKey="settings:ollamaSettings.settings.advanced.help"
+                          components={{
+                            anchor: (
+                              <a
+                                href="https://github.com/n4ze3m/page-assist/blob/main/docs/connection-issue.md"
+                                target="__blank"
+                                className="text-blue-600 dark:text-blue-400"></a>
+                            )
+                          }}
+                        />
+                      </p>
+                    </div>
                   ),
                   children: <AdvanceOllamaSettings />
                 }

src/components/Sidepanel/Chat/empty.tsx

@@ -1,8 +1,9 @@
+import { cleanUrl } from "@/libs/clean-url"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { Select } from "antd"
 import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 import { useMessage } from "~/hooks/useMessage"
 import {
   getAllModels,
@@ -91,6 +92,22 @@ export const EmptySidePanel = () => {
                 <RotateCcw className="h-4 w-4 mr-3" />
                 {t("common:retry")}
               </button>
+              {ollamaURL &&
+                cleanUrl(ollamaURL) !== "http://127.0.0.1:11434" && (
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mb-4 text-center">
+                    <Trans
+                      i18nKey="playground:ollamaState.connectionError"
+                      components={{
+                        anchor: (
+                          <a
+                            href="https://github.com/n4ze3m/page-assist/blob/main/docs/connection-issue.md"
+                            target="__blank"
+                            className="text-blue-600 dark:text-blue-400"></a>
+                        )
+                      }}
+                    />
+                  </p>
+                )}
             </div>
           )
         ) : null}

src/libs/runtime.ts

@@ -1,13 +1,16 @@
 import { getAdvancedOllamaSettings } from "@/services/app"
 
-export const urlRewriteRuntime = async function (domain: string) {
+export const urlRewriteRuntime = async function (
+  domain: string,
+  type = "ollama"
+) {
   if (browser.runtime && browser.runtime.id) {
     const { isEnableRewriteUrl, rewriteUrl } = await getAdvancedOllamaSettings()
     if (import.meta.env.BROWSER === "chrome") {
       const url = new URL(domain)
       const domains = [url.hostname]
       let origin = `${url.protocol}//${url.hostname}`
-      if (!isEnableRewriteUrl && rewriteUrl) {
+      if (isEnableRewriteUrl && rewriteUrl && type === "ollama") {
         origin = rewriteUrl
       }
       const rules = [
@@ -42,7 +45,7 @@ export const urlRewriteRuntime = async function (domain: string) {
       browser.webRequest.onBeforeSendHeaders.addListener(
         (details) => {
           let origin = `${url.protocol}//${url.hostname}`
-          if (!isEnableRewriteUrl && rewriteUrl) {
+          if (isEnableRewriteUrl && rewriteUrl && type === "ollama") {
             origin = rewriteUrl
           }
           for (let i = 0; i < details.requestHeaders.length; i++) {

src/loader/html.ts

@@ -102,7 +102,7 @@ export class PageAssistHtmlLoader
         }
       ]
     }
-    await urlRewriteRuntime(this.url)
+    await urlRewriteRuntime(this.url, "web")
     const fetchHTML = await fetch(this.url)
     let html = await fetchHTML.text()
 
@@ -111,11 +111,6 @@ export class PageAssistHtmlLoader
       html = parseWikipedia(await fetchHTML.text())
     }
 
-    // else if (isTwitter(this.url)) {
-    //   console.log("Twitter URL detected")
-    //   html = parseTweet(await fetchHTML.text(), this.url)
-    // }
-
     const htmlCompiler = compile({
       wordwrap: false,
       selectors: [

src/services/app.ts

@@ -5,9 +5,6 @@ const DEFAULT_URL_REWRITE_URL = "http://127.0.0.1:11434"
 
 export const isUrlRewriteEnabled = async () => {
   const enabled = await storage.get<boolean | undefined>("urlRewriteEnabled")
-  if (typeof enabled === "undefined") {
-    return true
-  }
   return enabled
 }
 export const setUrlRewriteEnabled = async (enabled: boolean) => {

src/web/search-engines/duckduckgo.ts

@@ -18,7 +18,7 @@ import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"
 import { MemoryVectorStore } from "langchain/vectorstores/memory"
 
 export const localDuckDuckGoSearch = async (query: string) => {
-  await urlRewriteRuntime(cleanUrl("https://html.duckduckgo.com/html/?q=" + query))
+  await urlRewriteRuntime(cleanUrl("https://html.duckduckgo.com/html/?q=" + query), "duckduckgo")
 
   const abortController = new AbortController()
   setTimeout(() => abortController.abort(), 10000)

src/web/search-engines/google.ts

@@ -19,7 +19,8 @@ import {
 
 export const localGoogleSearch = async (query: string) => {
   await urlRewriteRuntime(
-    cleanUrl("https://www.google.com/search?hl=en&q=" + query)
+    cleanUrl("https://www.google.com/search?hl=en&q=" + query),
+    "google"
   )
   const abortController = new AbortController()
   setTimeout(() => abortController.abort(), 10000)

src/web/search-engines/sogou.ts

@@ -25,7 +25,10 @@ const getCorrectTargeUrl = async (url: string) => {
   return matches?.[1] || ""
 }
 export const localSogouSearch = async (query: string) => {
-  await urlRewriteRuntime(cleanUrl("https://www.sogou.com/web?query=" + query))
+  await urlRewriteRuntime(
+    cleanUrl("https://www.sogou.com/web?query=" + query),
+    "sogou"
+  )
 
   const abortController = new AbortController()