modify page layout in prompt, resource and tool

renderer/src/components/main-panel/prompt/prompt-templates.vue

@@ -8,23 +8,27 @@
 					<span>prompts/list</span>
 					<span @click.stop="reloadPrompts(client, { first: false })" class="iconfont icon-restart"></span>
 				</h3>
-
 			</template>
 
 			<!-- body -->
-
 			<div class="prompt-template-container-scrollbar">
-				<el-scrollbar height="500px">
+				<el-scrollbar height="fit-content" v-if="(client.promptTemplates?.size || 0) > 0">
 					<div class="prompt-template-container">
 						<div class="item"
 							:class="{ 'active': props.tabId >= 0 && tabStorage.currentPromptName === template.name }"
 							v-for="template of client.promptTemplates?.values()" :key="template.name"
 							@click="handleClick(template)">
-							<span>{{ template.name }}</span>
+							<span class="prompt-title">{{ template.name }}</span>
-							<span>{{ template.description || '' }}</span>
+							<span class="prompt-description">{{ template.description || '' }}</span>
 						</div>
 					</div>
 				</el-scrollbar>
+				<div v-else style="padding: 10px;">
+					<div class="empty-description">
+						<span class="iconfont icon-empty" style="font-size: 22px; opacity: 0.4; margin-right: 6px;"></span>
+						<span style="opacity: 0.6;">No prompts found.</span>
+					</div>
+				</div>
 			</div>
 		</el-collapse-item>
 	</el-collapse>
@@ -126,8 +130,8 @@ onMounted(async () => {
 	user-select: none;
 	cursor: pointer;
 	display: flex;
-	align-items: center;
+	flex-direction: column;
-	justify-content: space-between;
+	align-items: flex-start;
 	transition: var(--animation-3s);
 }
 
@@ -141,19 +145,30 @@ onMounted(async () => {
 	transition: var(--animation-3s);
 }
 
-.prompt-template-container>.item>span:first-child {
+.prompt-title {
-	max-width: 200px;
+	font-weight: bold;
+	max-width: 250px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.prompt-template-container>.item>span:last-child {
+.prompt-description {
 	opacity: 0.6;
 	font-size: 12.5px;
-	max-width: 200px;
+	max-width: 250px;
-	overflow: hidden;
+	overflow: visible;
-	text-overflow: ellipsis;
+	text-overflow: unset;
-	white-space: nowrap;
+	white-space: normal;
+	word-break: break-all;
+}
+
+.empty-description {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--el-text-color-placeholder, #bbb);
+	font-size: 15px;
+	min-height: 40px;
 }
 </style>

renderer/src/components/main-panel/resource/resource-list-templates.vue

@@ -12,19 +12,22 @@
 
 			<!-- body -->
 			<div class="resource-template-container-scrollbar">
-				<el-scrollbar height="500px" v-if="(client.resourceTemplates?.size || 0) > 0">
+				<el-scrollbar height="fit-content" v-if="(client.resourceTemplates?.size || 0) > 0">
 					<div class="resource-template-container">
 						<div class="item"
 							:class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'template' && tabStorage.currentResourceName === template.name }"
 							v-for="template of client.resourceTemplates?.values()" :key="template.name"
 							@click="handleClick(template)">
-							<span>{{ template.name }}</span>
+							<span class="resource-title">{{ template.name }}</span>
-							<span>{{ template.description || '' }}</span>
+							<span class="resource-description">{{ template.description || '' }}</span>
 						</div>
 					</div>
 				</el-scrollbar>
 				<div v-else style="padding: 10px;">
-					empty
+					<div class="empty-description">
+						<span class="iconfont icon-empty" style="font-size: 22px; opacity: 0.4; margin-right: 6px;"></span>
+						<span style="opacity: 0.6;">No resource templates found.</span>
+					</div>
 				</div>
 			</div>
 		</el-collapse-item>
@@ -144,8 +147,8 @@ h3.resource-template .iconfont.icon-restart:hover {
     user-select: none;
     cursor: pointer;
     display: flex;
-	align-items: center;
+    flex-direction: column;
-	justify-content: space-between;
+    align-items: flex-start;
     transition: var(--animation-3s);
 }
 
@@ -159,19 +162,30 @@ h3.resource-template .iconfont.icon-restart:hover {
     transition: var(--animation-3s);
 }
 
-.resource-template-container>.item>span:first-child {
+.resource-title {
-	max-width: 200px;
+    font-weight: bold;
+    max-width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.resource-template-container>.item>span:last-child {
+.resource-description {
     opacity: 0.6;
     font-size: 12.5px;
-	max-width: 200px;
+    max-width: 250px;
-	overflow: hidden;
+    overflow: visible;
-	text-overflow: ellipsis;
+    text-overflow: unset;
-	white-space: nowrap;
+    white-space: normal;
+    word-break: break-all;
+}
+
+.empty-description {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--el-text-color-placeholder, #bbb);
+    font-size: 15px;
+    min-height: 40px;
 }
 </style>

renderer/src/components/main-panel/resource/resource-list.vue

@@ -12,17 +12,23 @@
 
 			<!-- body -->
 			<div class="resource-template-container-scrollbar">
-				<el-scrollbar height="500px">
+				<el-scrollbar height="fit-content" v-if="(client.resources?.size || 0) > 0">
 					<div class="resource-template-container">
 						<div class="item"
 							:class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'resource' && tabStorage.currentResourceName === resource.name }"
 							v-for="resource of client.resources?.values()" :key="resource.uri"
 							@click="handleClick(resource)">
-							<span>{{ resource.name }}</span>
+							<span class="resource-title">{{ resource.name }}</span>
-							<span>{{ resource.mimeType }}</span>
+							<span class="resource-description">{{ resource.mimeType }}</span>
 						</div>
 					</div>
 				</el-scrollbar>
+				<div v-else style="padding: 10px;">
+					<div class="empty-description">
+						<span class="iconfont icon-empty" style="font-size: 22px; opacity: 0.4; margin-right: 6px;"></span>
+						<span style="opacity: 0.6;">No resources found.</span>
+					</div>
+				</div>
 			</div>
 		</el-collapse-item>
 	</el-collapse>
@@ -146,8 +152,8 @@ h3.resource-template .iconfont.icon-restart:hover {
 	user-select: none;
 	cursor: pointer;
 	display: flex;
-	align-items: center;
+	flex-direction: column;
-	justify-content: space-between;
+	align-items: flex-start;
 	transition: var(--animation-3s);
 }
 
@@ -161,19 +167,31 @@ h3.resource-template .iconfont.icon-restart:hover {
 	transition: var(--animation-3s);
 }
 
-.resource-template-container>.item>span:first-child {
+.resource-title {
-	max-width: 200px;
+	font-weight: bold;
+	max-width: 250px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.resource-template-container>.item>span:last-child {
+.resource-description {
 	opacity: 0.6;
 	font-size: 12.5px;
-	max-width: 200px;
+	max-width: 250px;
-	overflow: hidden;
+	/* Remove ellipsis and allow full text wrap */
-	text-overflow: ellipsis;
+	overflow: visible;
-	white-space: nowrap;
+	text-overflow: unset;
+	white-space: normal;
+	word-break: break-all;
+}
+
+.empty-description {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--el-text-color-placeholder, #bbb);
+	font-size: 15px;
+	min-height: 40px;
 }
 </style>

renderer/src/components/main-panel/tool/tool-list.vue

@@ -19,6 +19,8 @@
             <!-- body -->
             <div class="tool-list-container-scrollbar">
                 <el-scrollbar height="fit-content">
+                    <div class="tool-list-container-scrollbar">
+                        <el-scrollbar height="fit-content" v-if="(client.tools?.size || 0) > 0">
                             <div class="tool-list-container">
                                 <div class="item" :class="{ 'active': tabStorage.currentToolName === tool.name }"
                                     v-for="tool of client.tools?.values()" :key="tool.name" @click="handleClick(tool)">
@@ -28,6 +30,15 @@
                                 </div>
                             </div>
                         </el-scrollbar>
+                        <div v-else style="padding: 10px;">
+                            <div class="empty-description">
+                                <span class="iconfont icon-empty"
+                                    style="font-size: 22px; opacity: 0.4; margin-right: 6px;"></span>
+                                <span style="opacity: 0.6;">No tools found.</span>
+                            </div>
+                        </div>
+                    </div>
+                </el-scrollbar>
             </div>
         </el-collapse-item>
     </el-collapse>
@@ -158,4 +169,13 @@ onMounted(async () => {
     opacity: 0.6;
     font-size: 12.5px;
 }
+
+.empty-description {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--el-text-color-placeholder, #bbb);
+    font-size: 15px;
+    min-height: 40px;
+}
 </style>