From 6f030f720ac4b50dd8fcfdd2d4a6afa60fdcf528 Mon Sep 17 00:00:00 2001
From: sam hoang <samhv.ict@gmail.com>
Date: Wed, 11 Jun 2025 11:46:04 +0700
Subject: [PATCH] feat(local-api-server): add button to open API documentation
 and improve layout

---
 src-tauri/capabilities/default.json           | 29 ++++++++++++--
 .../src/routes/settings/local-api-server.tsx  | 40 +++++++++++++++----
 2 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 9c5b69d46..2dd5925c3 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -2,9 +2,13 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "enables the default permissions",
-  "windows": ["main"],
+  "windows": [
+    "main"
+  ],
   "remote": {
-    "urls": ["http://*"]
+    "urls": [
+      "http://*"
+    ]
   },
   "permissions": [
     "core:default",
@@ -21,6 +25,7 @@
     "dialog:default",
     "deep-link:default",
     "core:webview:allow-create-webview-window",
+    "opener:allow-open-url",
     {
       "identifier": "http:default",
       "allow": [
@@ -73,6 +78,24 @@
         }
       ]
     },
+    {
+      "identifier": "opener:allow-open-url",
+      "description": "opens the default permissions for the core module",
+      "windows": [
+        "*"
+      ],
+      "allow": [
+        {
+          "url": "https://*"
+        },
+        {
+          "url": "http://127.0.0.1:*"
+        },
+        {
+          "url": "http://0.0.0.0:*"
+        }
+      ]
+    },
     "store:default"
   ]
-}
+}
\ No newline at end of file
diff --git a/web-app/src/routes/settings/local-api-server.tsx b/web-app/src/routes/settings/local-api-server.tsx
index fa8064976..23fbb4ad5 100644
--- a/web-app/src/routes/settings/local-api-server.tsx
+++ b/web-app/src/routes/settings/local-api-server.tsx
@@ -14,10 +14,11 @@ import { useLocalApiServer } from '@/hooks/useLocalApiServer'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { useAppState } from '@/hooks/useAppState'
 import { windowKey } from '@/constants/windows'
-import { IconLogs } from '@tabler/icons-react'
+import { IconLogs, IconBook } from '@tabler/icons-react'
 import { cn } from '@/lib/utils'
 import { ApiKeyInput } from '@/containers/ApiKeyInput'
 import { useState } from 'react'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Route = createFileRoute(route.settings.local_api_server as any)({
@@ -130,6 +131,16 @@ function LocalAPIServer() {
     }
   }
 
+  const handleOpenAPIDocs = async () => {
+    const docsUrl = `http://${serverHost}:${serverPort}`
+    try {
+      console.log('Opening API documentation at:', docsUrl)
+      await openUrl(docsUrl)
+    } catch (error) {
+      console.error('Failed to open API documentation:', error)
+    }
+  }
+
   const isServerRunning = serverStatus === 'running'
 
   return (
@@ -151,13 +162,26 @@ function LocalAPIServer() {
                       Start an OpenAI-compatible local HTTP server.
                     </p>
                   </div>
-                  <Button
-                    onClick={toggleAPIServer}
-                    variant={isServerRunning ? 'destructive' : 'default'}
-                    size="sm"
-                  >
-                    {`${isServerRunning ? 'Stop' : 'Start'}`} Server
-                  </Button>
+                  <div className="flex items-center gap-2">
+                    {isServerRunning && (
+                      <Button
+                        onClick={handleOpenAPIDocs}
+                        variant="default"
+                        size="sm"
+                        title="API Documentation"
+                      >
+                        <IconBook size={18} className="text-main-view-fg/50" />
+                        <span>Open Docs</span>
+                      </Button>
+                    )}
+                    <Button
+                      onClick={toggleAPIServer}
+                      variant={isServerRunning ? 'destructive' : 'default'}
+                      size="sm"
+                    >
+                      {`${isServerRunning ? 'Stop' : 'Start'}`} Server
+                    </Button>
+                  </div>
                 </div>
               }
             >