chore: bump version 4.5.3

* Initial plan

* Fix scroll behavior in plugin pages - only content areas scroll now

Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

.github/pull_request_template.md

@@ -2,6 +2,17 @@
 
 > 请在此部分填写你实现/解决/优化的内容:  
 > Summary of what you implemented/solved/optimized:
+> 
+
+### 更改前后对比截图 / Screenshots
+
+> 请在此部分粘贴更改前后对比截图（可以是界面截图、控制台输出、对话截图等）:  
+> Please paste the screenshots of changes before and after here (can be interface screenshots, console output, conversation screenshots, etc.):
+> 
+> 修改前 / Before:
+> 
+> 修改后 / After:
+> 
 
 ## 检查清单 / Checklist
 

README.md

@@ -31,25 +31,16 @@ LangBot 是一个开源的大语言模型原生即时通信机器人开发平台
 
 ## 📦 开始使用
 
-#### 快速体验（推荐）
+#### 快速部署
 
-使用 `uvx` 一键启动（无需安装）：
+使用 `uvx` 一键启动（需要先安装 [uv](https://docs.astral.sh/uv/getting-started/installation/)）：
 
 ```bash
 uvx langbot
 ```
 
-或使用 `pip` 安装后运行：
-
-```bash
-pip install langbot
-langbot
-```
-
 访问 http://localhost:5300 即可开始使用。
 
-详细文档[PyPI 安装](docs/PYPI_INSTALLATION.md)。
-
 #### Docker Compose 部署
 
 ```bash

README_EN.md

@@ -25,25 +25,16 @@ LangBot is an open-source LLM native instant messaging robot development platfor
 
 ## 📦 Getting Started
 
-#### Quick Start (Recommended)
+#### Quick Start
 
-Use `uvx` to start with one command (no installation required):
+Use `uvx` to start with one command (need to install [uv](https://docs.astral.sh/uv/getting-started/installation/)):
 
 ```bash
 uvx langbot
 ```
 
-Or install with `pip` and run:
-
-```bash
-pip install langbot
-langbot
-```
-
 Visit http://localhost:5300 to start using it.
 
-Detailed documentation [PyPI Installation](docs/PYPI_INSTALLATION.md).
-
 #### Docker Compose Deployment
 
 ```bash

README_JP.md

@@ -25,6 +25,16 @@ LangBot は、エージェント、RAG、MCP などの LLM アプリケーショ
 
 ## 📦 始め方
 
+#### クイックスタート
+
+`uvx` を使用した迅速なデプロイ（[uv](https://docs.astral.sh/uv/getting-started/installation/) が必要です）：
+
+```bash
+uvx langbot
+```
+
+http://localhost:5300 にアクセスして使用を開始します。
+
 #### Docker Compose デプロイ
 
 ```bash

README_TW.md

@@ -27,6 +27,16 @@ LangBot 是一個開源的大語言模型原生即時通訊機器人開發平台
 
 ## 📦 開始使用
 
+#### 快速部署
+
+使用 `uvx` 一鍵啟動（需要先安裝 [uv](https://docs.astral.sh/uv/getting-started/installation/) ）：
+
+```bash
+uvx langbot
+```
+
+訪問 http://localhost:5300 即可開始使用。
+
 #### Docker Compose 部署
 
 ```bash

docker/docker-compose.yaml

@@ -7,6 +7,7 @@ services:
   langbot_plugin_runtime:
     image: rockchin/langbot:latest
     container_name: langbot_plugin_runtime
+    platform: linux/amd64 # For Apple Silicon compatibility
     volumes:
       - ./data/plugins:/app/data/plugins
     ports:
@@ -21,6 +22,7 @@ services:
   langbot:
     image: rockchin/langbot:latest
     container_name: langbot
+    platform: linux/amd64 # For Apple Silicon compatibility
     volumes:
       - ./data:/app/data
       - ./plugins:/app/plugins

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "langbot"
-version = "4.6.0-beta.1"
+version = "4.5.3"
 description = "Easy-to-use global IM bot platform designed for LLM era"
 readme = "README.md"
 license-files = ["LICENSE"]
@@ -46,7 +46,6 @@ dependencies = [
     "urllib3>=2.4.0",
     "websockets>=15.0.1",
     "python-socks>=2.7.1", # dingtalk missing dependency
-    "taskgroup==0.0.0a4", # graingert/taskgroup#20
     "pip>=25.1.1",
     "ruff>=0.11.9",
     "pre-commit>=4.2.0",
@@ -64,7 +63,7 @@ dependencies = [
     "langchain-text-splitters>=0.0.1",
     "chromadb>=0.4.24",
     "qdrant-client (>=1.15.1,<2.0.0)",
-    "langbot-plugin==0.1.11b1",
+    "langbot-plugin==0.1.11",
     "asyncpg>=0.30.0",
     "line-bot-sdk>=3.19.0",
     "tboxsdk>=0.0.10",
@@ -108,7 +107,7 @@ requires = ["setuptools>=61.0", "wheel"]
 build-backend = "setuptools.build_meta"
 
 [tool.setuptools]
-package-data = { "langbot" = ["templates/*", "pkg/provider/modelmgr/requesters/*", "pkg/platform/sources/*", "web/out/**"] }
+package-data = { "langbot" = ["templates/**", "pkg/provider/modelmgr/requesters/*", "pkg/platform/sources/*", "web/out/**"] }
 
 [dependency-groups]
 dev = [

src/langbot/__init__.py

@@ -1,3 +1,3 @@
 """LangBot - Easy-to-use global IM bot platform designed for LLM era"""
 
-__version__ = '4.6.0-beta.1'
+__version__ = '4.5.3'

src/langbot/pkg/api/http/controller/groups/platform/adapters.py

@@ -1,6 +1,7 @@
 import quart
-
+import mimetypes
 from ... import group
+from langbot.pkg.utils import importutil
 
 
 @group.group_class('adapters', '/api/v1/platform/adapters')
@@ -31,4 +32,6 @@ class AdaptersRouterGroup(group.RouterGroup):
             if icon_path is None:
                 return self.http_status(404, -1, 'icon not found')
 
-            return await quart.send_file(icon_path)
+            return quart.Response(
+                importutil.read_resource_file_bytes(icon_path), mimetype=mimetypes.guess_type(icon_path)[0]
+            )

src/langbot/pkg/api/http/controller/groups/provider/requesters.py

@@ -1,6 +1,8 @@
 import quart
+import mimetypes
 
 from ... import group
+from langbot.pkg.utils import importutil
 
 
 @group.group_class('provider/requesters', '/api/v1/provider/requesters')
@@ -32,4 +34,6 @@ class RequestersRouterGroup(group.RouterGroup):
             if icon_path is None:
                 return self.http_status(404, -1, 'icon not found')
 
-            return await quart.send_file(icon_path)
+            return quart.Response(
+                importutil.read_resource_file_bytes(icon_path), mimetype=mimetypes.guess_type(icon_path)[0]
+            )

src/langbot/pkg/utils/constants.py

@@ -1,4 +1,6 @@
-semantic_version = 'v4.6.0-beta.1'
+import langbot
+
+semantic_version = f'v{langbot.__version__}'
 
 required_database_version = 11
 """Tag the version of the database schema, used to check if the database needs to be migrated"""

src/langbot/pkg/utils/importutil.py

@@ -41,5 +41,9 @@ def read_resource_file(resource_path: str) -> str:
         return f.read()
 
 
+def read_resource_file_bytes(resource_path: str) -> bytes:
+    return importlib.resources.files('langbot').joinpath(resource_path).read_bytes()
+
+
 def list_resource_files(resource_path: str) -> list[str]:
     return [f.name for f in importlib.resources.files('langbot').joinpath(resource_path).iterdir()]

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -188,40 +188,6 @@ export default function HomeSidebar({
           </div>
         )}
 
-        <SidebarChild
-          onClick={() => {
-            // open docs.langbot.app
-            const language = localStorage.getItem('langbot_language');
-            if (language === 'zh-Hans') {
-              window.open(
-                'https://docs.langbot.app/zh/insight/guide.html',
-                '_blank',
-              );
-            } else if (language === 'zh-Hant') {
-              window.open(
-                'https://docs.langbot.app/zh/insight/guide.html',
-                '_blank',
-              );
-            } else {
-              window.open(
-                'https://docs.langbot.app/en/insight/guide.html',
-                '_blank',
-              );
-            }
-          }}
-          isSelected={false}
-          icon={
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
-            </svg>
-          }
-          name={t('common.helpDocs')}
-        />
-
         <SidebarChild
           onClick={() => {
             setApiKeyDialogOpen(true);
@@ -302,6 +268,41 @@ export default function HomeSidebar({
 
             <div className="flex flex-col gap-2 w-full">
               <span className="text-sm font-medium">{t('common.account')}</span>
+              <Button
+                variant="ghost"
+                className="w-full justify-start font-normal"
+                onClick={() => {
+                  // open docs.langbot.app
+                  const language = localStorage.getItem('langbot_language');
+                  if (language === 'zh-Hans') {
+                    window.open(
+                      'https://docs.langbot.app/zh/insight/guide.html',
+                      '_blank',
+                    );
+                  } else if (language === 'zh-Hant') {
+                    window.open(
+                      'https://docs.langbot.app/zh/insight/guide.html',
+                      '_blank',
+                    );
+                  } else {
+                    window.open(
+                      'https://docs.langbot.app/en/insight/guide.html',
+                      '_blank',
+                    );
+                  }
+                  setPopoverOpen(false);
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="w-4 h-4 mr-2"
+                >
+                  <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
+                </svg>
+                {t('common.helpDocs')}
+              </Button>
               <Button
                 variant="ghost"
                 className="w-full justify-start font-normal"

web/src/app/home/pipelines/components/pipeline-extensions/PipelineExtension.tsx

@@ -331,48 +331,56 @@ export default function PipelineExtension({
             <DialogTitle>{t('pipelines.extensions.selectPlugins')}</DialogTitle>
           </DialogHeader>
           <div className="flex-1 overflow-y-auto space-y-2 pr-2">
-            {allPlugins.map((plugin) => {
-              const pluginId = getPluginId(plugin);
-              const metadata = plugin.manifest.manifest.metadata;
-              const isSelected = tempSelectedPluginIds.includes(pluginId);
-              return (
-                <div
-                  key={pluginId}
-                  className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
-                  onClick={() => handleTogglePlugin(pluginId)}
-                >
-                  <Checkbox checked={isSelected} />
-                  <img
-                    src={backendClient.getPluginIconURL(
-                      metadata.author || '',
-                      metadata.name,
+            {allPlugins.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('pipelines.extensions.noPluginsInstalled')}
+                </p>
+              </div>
+            ) : (
+              allPlugins.map((plugin) => {
+                const pluginId = getPluginId(plugin);
+                const metadata = plugin.manifest.manifest.metadata;
+                const isSelected = tempSelectedPluginIds.includes(pluginId);
+                return (
+                  <div
+                    key={pluginId}
+                    className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
+                    onClick={() => handleTogglePlugin(pluginId)}
+                  >
+                    <Checkbox checked={isSelected} />
+                    <img
+                      src={backendClient.getPluginIconURL(
+                        metadata.author || '',
+                        metadata.name,
+                      )}
+                      alt={metadata.name}
+                      className="w-10 h-10 rounded-lg border bg-muted object-cover flex-shrink-0"
+                    />
+                    <div className="flex-1">
+                      <div className="font-medium">{metadata.name}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {metadata.author} • v{metadata.version}
+                      </div>
+                      <div className="flex gap-1 mt-1">
+                        <PluginComponentList
+                          components={plugin.components}
+                          showComponentName={true}
+                          showTitle={false}
+                          useBadge={true}
+                          t={t}
+                        />
+                      </div>
+                    </div>
+                    {!plugin.enabled && (
+                      <Badge variant="secondary">
+                        {t('pipelines.extensions.disabled')}
+                      </Badge>
                     )}
-                    alt={metadata.name}
-                    className="w-10 h-10 rounded-lg border bg-muted object-cover flex-shrink-0"
-                  />
-                  <div className="flex-1">
-                    <div className="font-medium">{metadata.name}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {metadata.author} • v{metadata.version}
-                    </div>
-                    <div className="flex gap-1 mt-1">
-                      <PluginComponentList
-                        components={plugin.components}
-                        showComponentName={true}
-                        showTitle={false}
-                        useBadge={true}
-                        t={t}
-                      />
-                    </div>
                   </div>
-                  {!plugin.enabled && (
-                    <Badge variant="secondary">
-                      {t('pipelines.extensions.disabled')}
-                    </Badge>
-                  )}
-                </div>
-              );
-            })}
+                );
+              })
+            )}
           </div>
           <DialogFooter>
             <Button
@@ -397,46 +405,56 @@ export default function PipelineExtension({
             </DialogTitle>
           </DialogHeader>
           <div className="flex-1 overflow-y-auto space-y-2 pr-2">
-            {allMCPServers.map((server) => {
-              const isSelected = tempSelectedMCPIds.includes(server.uuid || '');
-              return (
-                <div
-                  key={server.uuid}
-                  className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
-                  onClick={() => handleToggleMCPServer(server.uuid || '')}
-                >
-                  <Checkbox checked={isSelected} />
-                  <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center flex-shrink-0">
-                    <Server className="h-5 w-5 text-muted-foreground" />
-                  </div>
-                  <div className="flex-1">
-                    <div className="font-medium">{server.name}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {server.mode}
+            {allMCPServers.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('pipelines.extensions.noMCPServersConfigured')}
+                </p>
+              </div>
+            ) : (
+              allMCPServers.map((server) => {
+                const isSelected = tempSelectedMCPIds.includes(
+                  server.uuid || '',
+                );
+                return (
+                  <div
+                    key={server.uuid}
+                    className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
+                    onClick={() => handleToggleMCPServer(server.uuid || '')}
+                  >
+                    <Checkbox checked={isSelected} />
+                    <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center flex-shrink-0">
+                      <Server className="h-5 w-5 text-muted-foreground" />
                     </div>
-                    {server.runtime_info &&
-                      server.runtime_info.status === 'connected' && (
-                        <Badge
-                          variant="outline"
-                          className="flex items-center gap-1 mt-1"
-                        >
-                          <Wrench className="h-3 w-3 text-black dark:text-white" />
-                          <span className="text-xs text-black dark:text-white">
-                            {t('pipelines.extensions.toolCount', {
-                              count: server.runtime_info.tool_count || 0,
-                            })}
-                          </span>
-                        </Badge>
-                      )}
+                    <div className="flex-1">
+                      <div className="font-medium">{server.name}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {server.mode}
+                      </div>
+                      {server.runtime_info &&
+                        server.runtime_info.status === 'connected' && (
+                          <Badge
+                            variant="outline"
+                            className="flex items-center gap-1 mt-1"
+                          >
+                            <Wrench className="h-3 w-3 text-black dark:text-white" />
+                            <span className="text-xs text-black dark:text-white">
+                              {t('pipelines.extensions.toolCount', {
+                                count: server.runtime_info.tool_count || 0,
+                              })}
+                            </span>
+                          </Badge>
+                        )}
+                    </div>
+                    {!server.enable && (
+                      <Badge variant="secondary">
+                        {t('pipelines.extensions.disabled')}
+                      </Badge>
+                    )}
                   </div>
-                  {!server.enable && (
-                    <Badge variant="secondary">
-                      {t('pipelines.extensions.disabled')}
-                    </Badge>
-                  )}
-                </div>
-              );
-            })}
+                );
+              })
+            )}
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setMcpDialogOpen(false)}>

web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx

@@ -274,7 +274,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
         </Dialog>
 
         {pluginList.length === 0 ? (
-          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
             <svg
               className="h-[3rem] w-[3rem]"
               xmlns="http://www.w3.org/2000/svg"

web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx

@@ -57,6 +57,7 @@ function MarketPageContent({
 
   const pageSize = 16; // 每页16个，4行x4列
   const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   // 排序选项
   const sortOptions: SortOption[] = [
@@ -262,19 +263,21 @@ function MarketPageContent({
     }
   }, [currentPage, isLoadingMore, hasMore, fetchPlugins, searchQuery]);
 
-  // 监听滚动事件
+  // Listen to scroll events on the scroll container
   useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
     const handleScroll = () => {
-      if (
-        window.innerHeight + document.documentElement.scrollTop >=
-        document.documentElement.offsetHeight - 100
-      ) {
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      // Load more when scrolled to within 100px of the bottom
+      if (scrollTop + clientHeight >= scrollHeight - 100) {
         loadMore();
       }
     };
 
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    scrollContainer.addEventListener('scroll', handleScroll);
+    return () => scrollContainer.removeEventListener('scroll', handleScroll);
   }, [loadMore]);
 
   // 安装插件
@@ -283,99 +286,109 @@ function MarketPageContent({
   // };
 
   return (
-    <div className="container mx-auto px-3 sm:px-4 py-4 sm:py-6 space-y-4 sm:space-y-6">
-      {/* 搜索框 */}
-      <div className="flex items-center justify-center">
-        <div className="relative w-full max-w-2xl">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-          <Input
-            placeholder={t('market.searchPlaceholder')}
-            value={searchQuery}
-            onChange={(e) => handleSearchInputChange(e.target.value)}
-            onKeyPress={(e) => {
-              if (e.key === 'Enter') {
-                // 立即搜索，清除防抖定时器
-                if (searchTimeoutRef.current) {
-                  clearTimeout(searchTimeoutRef.current);
+    <div className="h-full flex flex-col">
+      {/* Fixed header with search and sort controls */}
+      <div className="flex-shrink-0 space-y-4 px-3 sm:px-4 py-4 sm:py-6">
+        {/* Search box */}
+        <div className="flex items-center justify-center">
+          <div className="relative w-full max-w-2xl">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+            <Input
+              placeholder={t('market.searchPlaceholder')}
+              value={searchQuery}
+              onChange={(e) => handleSearchInputChange(e.target.value)}
+              onKeyPress={(e) => {
+                if (e.key === 'Enter') {
+                  // Immediately search, clear debounce timer
+                  if (searchTimeoutRef.current) {
+                    clearTimeout(searchTimeoutRef.current);
+                  }
+                  handleSearch(searchQuery);
                 }
-                handleSearch(searchQuery);
-              }
-            }}
-            className="pl-10 pr-4 text-sm sm:text-base"
-          />
-        </div>
-      </div>
-
-      {/* 排序下拉框 */}
-      <div className="flex items-center justify-center">
-        <div className="w-full max-w-2xl flex items-center gap-2 sm:gap-3">
-          <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
-            {t('market.sortBy')}:
-          </span>
-          <Select value={sortOption} onValueChange={handleSortChange}>
-            <SelectTrigger className="w-40 sm:w-48 text-xs sm:text-sm">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {sortOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      {/* 搜索结果统计 */}
-      {total > 0 && (
-        <div className="text-center text-muted-foreground text-sm">
-          {searchQuery
-            ? t('market.searchResults', { count: total })
-            : t('market.totalPlugins', { count: total })}
-        </div>
-      )}
-
-      {/* 插件列表 */}
-      {isLoading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin" />
-          <span className="ml-2">{t('market.loading')}</span>
-        </div>
-      ) : plugins.length === 0 ? (
-        <div className="flex items-center justify-center py-12">
-          <div className="text-muted-foreground">
-            {searchQuery ? t('market.noResults') : t('market.noPlugins')}
+              }}
+              className="pl-10 pr-4 text-sm sm:text-base"
+            />
           </div>
         </div>
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6">
-          {plugins.map((plugin) => (
-            <PluginMarketCardComponent
-              key={plugin.pluginId}
-              cardVO={plugin}
-              onPluginClick={handlePluginClick}
-            />
-          ))}
-        </div>
-      )}
 
-      {/* 加载更多指示器 */}
-      {isLoadingMore && (
-        <div className="flex items-center justify-center py-6">
-          <Loader2 className="h-6 w-6 animate-spin" />
-          <span className="ml-2">{t('market.loadingMore')}</span>
+        {/* Sort dropdown */}
+        <div className="flex items-center justify-center">
+          <div className="w-full max-w-2xl flex items-center gap-2 sm:gap-3">
+            <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
+              {t('market.sortBy')}:
+            </span>
+            <Select value={sortOption} onValueChange={handleSortChange}>
+              <SelectTrigger className="w-40 sm:w-48 text-xs sm:text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {sortOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-      )}
 
-      {/* 没有更多数据提示 */}
-      {!hasMore && plugins.length > 0 && (
-        <div className="text-center text-muted-foreground py-6">
-          {t('market.allLoaded')}
-        </div>
-      )}
+        {/* Search results stats */}
+        {total > 0 && (
+          <div className="text-center text-muted-foreground text-sm">
+            {searchQuery
+              ? t('market.searchResults', { count: total })
+              : t('market.totalPlugins', { count: total })}
+          </div>
+        )}
+      </div>
 
-      {/* 插件详情对话框 */}
+      {/* Scrollable content area */}
+      <div
+        ref={scrollContainerRef}
+        className="flex-1 overflow-y-auto px-3 sm:px-4"
+      >
+        {isLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-8 w-8 animate-spin" />
+            <span className="ml-2">{t('market.loading')}</span>
+          </div>
+        ) : plugins.length === 0 ? (
+          <div className="flex items-center justify-center py-12">
+            <div className="text-muted-foreground">
+              {searchQuery ? t('market.noResults') : t('market.noPlugins')}
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 pb-6">
+              {plugins.map((plugin) => (
+                <PluginMarketCardComponent
+                  key={plugin.pluginId}
+                  cardVO={plugin}
+                  onPluginClick={handlePluginClick}
+                />
+              ))}
+            </div>
+
+            {/* Loading more indicator */}
+            {isLoadingMore && (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-6 w-6 animate-spin" />
+                <span className="ml-2">{t('market.loadingMore')}</span>
+              </div>
+            )}
+
+            {/* No more data hint */}
+            {!hasMore && plugins.length > 0 && (
+              <div className="text-center text-muted-foreground py-6">
+                {t('market.allLoaded')}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Plugin detail dialog */}
       <PluginDetailDialog
         open={dialogOpen}
         onOpenChange={handleDialogClose}

web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx

@@ -73,14 +73,14 @@ export default function MCPComponent({
 
   return (
     <div className="w-full h-full">
-      {/* 已安装的服务器列表 */}
-      <div className="w-full px-[0.8rem] pt-[0rem]  gap-4">
+      {/* Server list */}
+      <div className="w-full h-full px-[0.8rem] pt-[0rem]">
         {loading ? (
-          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
             {t('mcp.loading')}
           </div>
         ) : installedServers.length === 0 ? (
-          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
             <svg
               className="h-[3rem] w-[3rem]"
               xmlns="http://www.w3.org/2000/svg"
@@ -92,7 +92,7 @@ export default function MCPComponent({
             <div className="text-lg mb-2">{t('mcp.noServerInstalled')}</div>
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-[2rem]">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-[2rem] pb-6">
             {installedServers.map((server, index) => (
               <div key={`${server.name}-${index}`}>
                 <MCPCardComponent

web/src/app/home/plugins/page.tsx

@@ -431,7 +431,7 @@ export default function PluginConfigPage() {
 
   return (
     <div
-      className={`${styles.pageContainer} ${isDragOver ? 'bg-blue-50' : ''}`}
+      className={`${styles.pageContainer} h-full flex flex-col ${isDragOver ? 'bg-blue-50' : ''}`}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
@@ -443,8 +443,12 @@ export default function PluginConfigPage() {
         onChange={handleFileChange}
         style={{ display: 'none' }}
       />
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <div className="flex flex-row justify-between items-center px-[0.8rem]">
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="w-full h-full flex flex-col"
+      >
+        <div className="flex flex-row justify-between items-center px-[0.8rem] flex-shrink-0">
           <TabsList className="shadow-md py-5 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
             <TabsTrigger value="installed" className="px-6 py-4 cursor-pointer">
               {t('plugins.installed')}
@@ -522,10 +526,10 @@ export default function PluginConfigPage() {
             </DropdownMenu>
           </div>
         </div>
-        <TabsContent value="installed">
+        <TabsContent value="installed" className="flex-1 overflow-y-auto mt-0">
           <PluginInstalledComponent ref={pluginInstalledRef} />
         </TabsContent>
-        <TabsContent value="market">
+        <TabsContent value="market" className="flex-1 overflow-y-auto mt-0">
           <MarketPage
             installPlugin={(plugin: PluginV4) => {
               setInstallSource('marketplace');
@@ -539,7 +543,10 @@ export default function PluginConfigPage() {
             }}
           />
         </TabsContent>
-        <TabsContent value="mcp-servers">
+        <TabsContent
+          value="mcp-servers"
+          className="flex-1 overflow-y-auto mt-0"
+        >
           <MCPServerComponent
             key={refreshKey}
             onEditServer={(serverName) => {

web/src/i18n/locales/en-US.ts

@@ -482,6 +482,8 @@ const enUS = {
       addMCPServer: 'Add MCP Server',
       selectMCPServers: 'Select MCP Servers',
       toolCount: '{{count}} tools',
+      noPluginsInstalled: 'No installed plugins',
+      noMCPServersConfigured: 'No configured MCP servers',
     },
     debugDialog: {
       title: 'Pipeline Chat',

web/src/i18n/locales/ja-JP.ts

@@ -485,6 +485,8 @@ const jaJP = {
       addMCPServer: 'MCPサーバーを追加',
       selectMCPServers: 'MCPサーバーを選択',
       toolCount: '{{count}}個のツール',
+      noPluginsInstalled: 'インストールされているプラグインがありません',
+      noMCPServersConfigured: '設定されているMCPサーバーがありません',
     },
     debugDialog: {
       title: 'パイプラインのチャット',

web/src/i18n/locales/zh-Hans.ts

@@ -464,6 +464,8 @@ const zhHans = {
       addMCPServer: '添加 MCP 服务器',
       selectMCPServers: '选择 MCP 服务器',
       toolCount: '{{count}} 个工具',
+      noPluginsInstalled: '无已安装的插件',
+      noMCPServersConfigured: '无已配置的 MCP 服务器',
     },
     debugDialog: {
       title: '流水线对话',

web/src/i18n/locales/zh-Hant.ts

@@ -462,6 +462,8 @@ const zhHant = {
       addMCPServer: '新增 MCP 伺服器',
       selectMCPServers: '選擇 MCP 伺服器',
       toolCount: '{{count}} 個工具',
+      noPluginsInstalled: '無已安裝的插件',
+      noMCPServersConfigured: '無已配置的 MCP 伺服器',
     },
     debugDialog: {
       title: '流程線對話',