feat: add connection title field

src/components/ConnectionSidebar.tsx

@@ -175,8 +175,8 @@ const ConnectionSidebar = () => {
                 <img src="/chat-logo-bot.webp" className="w-7 h-auto mx-auto" alt="" />
               </button>
               {connectionList.map((connection) => (
+                <Tooltip key={connection.id} title={connection.title} side="right">
                   <button
-                  key={connection.id}
                     className={`relative w-full h-14 rounded-l-lg p-2 mt-2 group ${
                       currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow"
                     }`}
@@ -193,6 +193,7 @@ const ConnectionSidebar = () => {
                     </span>
                     <EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto dark:text-gray-300" />
                   </button>
+                </Tooltip>
               ))}
               <Tooltip title={t("connection.new")} side="right">
                 <button

src/components/CreateConnectionModal.tsx

@@ -217,6 +217,10 @@ const CreateConnectionModal = (props: Props) => {
               onValueChange={(value) => setPartialConnection({ engineType: value as Engine })}
             />
           </div>
+          <div className="w-full flex flex-col">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
+            <TextField placeholder="Title" value={connection.title} onChange={(value) => setPartialConnection({ title: value })} />
+          </div>
           <div className="w-full flex flex-col">
             <label className="block text-sm font-medium text-gray-700 mb-1">Host</label>
             <TextField placeholder="Connect host" value={connection.host} onChange={(value) => setPartialConnection({ host: value })} />

src/components/kit/Tooltip.tsx

@@ -20,6 +20,7 @@ const Tooltip = (props: Props) => {
             className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[99999]"
             side={side}
             sideOffset={6}
+            hidden={title === ""}
           >
             {title}
             <TooltipUI.Arrow />