[Update] UI: Implement LLM connection handling and add connection check UI components.(Test UI)

src-ui/views/app/config_page/setting_section/setting_box/_components/connection_check_button/ConnectionCheckButton.jsx

@@ -0,0 +1,19 @@
+import styles from "./ConnectionCheckButton.module.scss";
+
+export const ConnectionCheckButton = (props) => {
+    const label = props.state === "pending"
+        ? "Checking... 🌀"
+        : props.variable === true
+            ? "Connected ✅"
+            : "Disconnected ❌";
+
+    return (
+        <div className={styles.container}>
+            <p>{label}</p>
+            <p>{`UI Status: ${props.state}`}</p>
+            <button className={styles.button_wrapper} onClick={props.checkFunction}>
+                <p className={styles.button_label}>Connection Check</p>
+            </button>
+        </div>
+    );
+};

src-ui/views/app/config_page/setting_section/setting_box/_components/connection_check_button/ConnectionCheckButton.module.scss

@@ -0,0 +1,15 @@
+.button_wrapper {
+    padding: 1.6rem;
+    border-radius: 0.4rem;
+    &:hover {
+        background-color: var(--dark_825_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.button_svg {
+    width: 2.4rem;
+    color: var(--dark_400_color);
+}

src-ui/views/app/config_page/setting_section/setting_box/_components/index.js

@@ -13,4 +13,5 @@ export { SwitchBox } from "./switch_box/SwitchBox";
 export { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 export { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
 export { DownloadModels } from "./download_models/DownloadModels";
-export { MessageFormat } from "./message_format/MessageFormat";
+export { MessageFormat } from "./message_format/MessageFormat";
+export { ConnectionCheckButton } from "./connection_check_button/ConnectionCheckButton";

src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -19,6 +19,7 @@ import {
     WordFilterListToggleComponent,
     DownloadModels,
     MessageFormat,
+    ConnectionCheckButton,
 } from "../_components";
 import { Checkbox } from "@common_components";
 
@@ -181,6 +182,10 @@ export const DownloadModelsContainer = (props) => (
     <CommonContainer Component={DownloadModels} {...props} />
 );
 
+export const ConnectionCheckButtonContainer = (props) => (
+    <CommonContainer Component={ConnectionCheckButton} {...props} />
+);
+
 export const MessageFormatContainer = (props) => {
     return (
         <>

src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -17,6 +17,7 @@ import {
     EntryWithSaveButtonContainer,
     RadioButtonContainer,
     DropdownMenuContainer,
+    ConnectionCheckButtonContainer,
 
     useOnMouseLeaveDropdownMenu,
 } from "../_templates/Templates";
@@ -25,9 +26,11 @@ import {
     DropdownMenu,
     MultiDropdownMenu,
     LabelComponent,
+    ConnectionCheckButton,
 } from "../_components";
 
 import { deepl_auth_key_url } from "@ui_configs";
+import { useLLMConnection } from "@logics_common";
 
 export const Translation = () => {
     return (
@@ -46,9 +49,11 @@ export const Translation = () => {
             <OpenAIAuthKey_Box />
             <OpenAIModelContainer />
 
+            <LMStudioConnectionCheck_Box />
             <LMStudioURL_Box />
             <LMStudioModelContainer />
 
+            <OllamaConnectionCheck_Box />
             <OllamaModelContainer />
         </>
     );
@@ -422,6 +427,23 @@ const OpenAIModelContainer = () => {
 
 
 
+const LMStudioConnectionCheck_Box = () => {
+    const { t } = useI18n();
+    const { currentIsLMStudioConnected, checkConnection_LMStudio } = useLLMConnection();
+
+    return (
+        <>
+            <ConnectionCheckButtonContainer
+                label="Check LM Studio Connection"
+                variable={currentIsLMStudioConnected.data}
+                state={currentIsLMStudioConnected.state}
+                checkFunction={checkConnection_LMStudio}
+                remove_border_bottom={true}
+                // width="10rem"
+            />
+        </>
+    );
+};
 const LMStudioURL_Box = () => {
     const { t } = useI18n();
     const { currentLMStudioURL, setLMStudioURL, deleteLMStudioURL } = useTranslation();
@@ -475,6 +497,23 @@ const LMStudioModelContainer = () => {
     );
 };
 
+const OllamaConnectionCheck_Box = () => {
+    const { t } = useI18n();
+    const { currentIsOllamaConnected, checkConnection_Ollama } = useLLMConnection();
+
+    return (
+        <>
+            <ConnectionCheckButtonContainer
+                label="Check Ollama Connection"
+                variable={currentIsOllamaConnected.data}
+                state={currentIsOllamaConnected.state}
+                checkFunction={checkConnection_Ollama}
+                remove_border_bottom={true}
+                // width="10rem"
+            />
+        </>
+    );
+};
 const OllamaModelContainer = () => {
     const { t } = useI18n();
     const {