From f2feedd3a26e56d62609bb8e1e45736f58b608c6 Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Sat, 21 Dec 2024 13:13:36 +0800
Subject: [PATCH] Enhance ListAPIs component to display template name
 conditionally; update ChatBOX layout for improved spacing

---
 src/listAPIs.tsx      | 20 ++++++++++++++++++--
 src/pages/Chatbox.tsx |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/listAPIs.tsx b/src/listAPIs.tsx
index 14fb6f2..02fb81c 100644
--- a/src/listAPIs.tsx
+++ b/src/listAPIs.tsx
@@ -34,7 +34,23 @@ export function ListAPIs({
 }: Props) {
   return (
     <NavigationMenuItem>
-      <NavigationMenuTrigger>{label}</NavigationMenuTrigger>
+      <NavigationMenuTrigger>
+        {label}{" "}
+        <span className="hidden lg:inline">
+          {tmps.find(
+            (t) =>
+              chatStore[apiField as keyof ChatStore] === t.endpoint &&
+              chatStore[keyField as keyof ChatStore] === t.key
+          )?.name &&
+            `: ${
+              tmps.find(
+                (t) =>
+                  chatStore[apiField as keyof ChatStore] === t.endpoint &&
+                  chatStore[keyField as keyof ChatStore] === t.key
+              )?.name
+            }`}
+        </span>
+      </NavigationMenuTrigger>
       <NavigationMenuContent>
         <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
           {tmps.map((t, index) => (
@@ -60,7 +76,7 @@ export function ListAPIs({
                     {t.name}
                   </div>
                   <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-                    {label === "API" ? t.endpoint : t.key}
+                    {new URL(t.endpoint).host}
                   </p>
                 </a>
               </NavigationMenuLink>
diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx
index 480f3e5..780cbb5 100644
--- a/src/pages/Chatbox.tsx
+++ b/src/pages/Chatbox.tsx
@@ -457,7 +457,7 @@ export default function ChatBOX(props: {
 
   return (
     <>
-      <div className="flex flex-col w-full">
+      <div className="flex flex-col p-2 gap-2 w-full">
         {true && (
           <Settings
             chatStore={chatStore}