fix(sidepanel): Enable or disable Ollama connection status check

src/components/Sidepanel/Chat/empty.tsx

@@ -2,7 +2,7 @@ import { cleanUrl } from "@/libs/clean-url"
 import { useStorage } from "@plasmohq/storage/hook"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { Select } from "antd"
-import { RotateCcw } from "lucide-react"
+import { Loader2, RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import { useMessage } from "~/hooks/useMessage"
@@ -50,72 +50,8 @@ export const EmptySidePanel = () => {
 
   const { setSelectedModel, selectedModel, chatMode, setChatMode } =
     useMessage()
-
+  const renderSection = () => {
     return (
-    <div className="mx-auto sm:max-w-md px-4 mt-10">
-      <div className="rounded-lg justify-center items-center flex flex-col border dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
-        {(ollamaStatus === "pending" || isRefetching) && (
-          <div className="inline-flex items-center space-x-2">
-            <div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
-            <p className="dark:text-gray-400 text-gray-900">
-              {t("ollamaState.searching")}
-            </p>
-          </div>
-        )}
-        {!isRefetching && ollamaStatus === "success" && checkOllamaStatus ? (
-          ollamaInfo.isOk ? (
-            <div className="inline-flex  items-center space-x-2">
-              <div className="w-3 h-3 bg-green-500 rounded-full"></div>
-              <p className="dark:text-gray-400 text-gray-900">
-                {t("ollamaState.running")}
-              </p>
-            </div>
-          ) : (
-            <div className="flex flex-col space-y-2 justify-center items-center">
-              <div className="inline-flex  space-x-2">
-                <div className="w-3 h-3 bg-red-500 rounded-full"></div>
-                <p className="dark:text-gray-400 text-gray-900">
-                  {t("ollamaState.notRunning")}
-                </p>
-              </div>
-
-              <input
-                className="bg-gray-100 dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2 w-full"
-                type="url"
-                value={ollamaURL}
-                onChange={(e) => setOllamaURL(e.target.value)}
-              />
-
-              <button
-                onClick={() => {
-                  saveOllamaURL(ollamaURL)
-                  refetch()
-                }}
-                className="inline-flex mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
-                <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-700 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}
-
-        {ollamaStatus === "success" && ollamaInfo.isOk && (
       <div className="mt-4">
         <Select
           onChange={(e) => {
@@ -175,7 +111,93 @@ export const EmptySidePanel = () => {
           </div>
         </div>
       </div>
+    )
+  }
+
+  if (!checkOllamaStatus) {
+    return (
+      <div className="mx-auto sm:max-w-md px-4 mt-10">
+        <div className="rounded-lg justify-center items-center flex flex-col border dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
+          <div className="inline-flex items-center space-x-2">
+            <p className="dark:text-gray-400 text-gray-900">
+              <span>👋</span>
+              {t("welcome")}
+            </p>
+          </div>
+          {ollamaStatus === "pending" && (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
           )}
+          {ollamaStatus === "success" && ollamaInfo.isOk && renderSection()}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto sm:max-w-md px-4 mt-10">
+      <div className="rounded-lg justify-center items-center flex flex-col border dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
+        {(ollamaStatus === "pending" || isRefetching) && (
+          <div className="inline-flex items-center space-x-2">
+            <div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
+            <p className="dark:text-gray-400 text-gray-900">
+              {t("ollamaState.searching")}
+            </p>
+          </div>
+        )}
+        {!isRefetching && ollamaStatus === "success" ? (
+          ollamaInfo.isOk ? (
+            <div className="inline-flex  items-center space-x-2">
+              <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+              <p className="dark:text-gray-400 text-gray-900">
+                {t("ollamaState.running")}
+              </p>
+            </div>
+          ) : (
+            <div className="flex flex-col space-y-2 justify-center items-center">
+              <div className="inline-flex  space-x-2">
+                <div className="w-3 h-3 bg-red-500 rounded-full"></div>
+                <p className="dark:text-gray-400 text-gray-900">
+                  {t("ollamaState.notRunning")}
+                </p>
+              </div>
+
+              <input
+                className="bg-gray-100 dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2 w-full"
+                type="url"
+                value={ollamaURL}
+                onChange={(e) => setOllamaURL(e.target.value)}
+              />
+
+              <button
+                onClick={() => {
+                  saveOllamaURL(ollamaURL)
+                  refetch()
+                }}
+                className="inline-flex mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
+                <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-700 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}
+
+        {ollamaStatus === "success" && ollamaInfo.isOk && renderSection()}
       </div>
     </div>
   )