Merge pull request #168 from opentiny/optimize-playground-tool-call

fix(playground): pin tool call options to tools tab bottom with independent scroll

Author: rhlin

sites/playground/web/src/components/PlaygroundSidebar.vue

@@ -162,7 +162,12 @@ const updateCustomExamples = (list) => {
         </button>
       </div>
 
-      <tiny-tabs class="playground-sidebar__tabs" v-model="activeName" v-show="expanded">
+      <tiny-tabs
+        class="playground-sidebar__tabs"
+        :class="{ 'playground-sidebar__tabs--tools': activeName === 'tools' }"
+        v-model="activeName"
+        v-show="expanded"
+      >
         <tiny-tab-item title="模型配置" name="model">
           <ModelConfig @createNewTemplate="handleCreateNewTemplate" @update-custom-examples="updateCustomExamples"/>
         </tiny-tab-item>
@@ -274,6 +279,8 @@ const updateCustomExamples = (list) => {
     flex: 1;
     min-height: 0;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     .config-title {
       font-size: 14px;
@@ -284,13 +291,28 @@ const updateCustomExamples = (list) => {
 
     :deep(.tiny-tabs__header.is-top) {
       padding: 0 24px;
+      flex-shrink: 0;
     }
 
     :deep(.tiny-tabs__content) {
-      height: 100%;
+      flex: 1;
+      min-height: 0;
       overflow: auto;
       padding: 0 24px 90px;
     }
+
+    &--tools :deep(.tiny-tabs__content) {
+      overflow: hidden;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+
+      > .tiny-tab-pane {
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+      }
+    }
   }
 
   .svg-icon {

sites/playground/web/src/components/tab-components/ToolCallConfig.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { inject } from 'vue';
+import { TinyCheckbox } from '@opentiny/vue';
+
+const playgroundContext = inject('playgroundContext');
+const { chatConfig } = playgroundContext;
+
+const updateAddToolCallContext = (value) => {
+  chatConfig.addToolCallContext = value;
+};
+
+const updateShowThinkingResult = (value) => {
+  chatConfig.showThinkingResult = value;
+};
+</script>
+
+<template>
+  <div class="tool-call-config">
+    <tiny-checkbox :model-value="chatConfig.addToolCallContext" @update:model-value="updateAddToolCallContext">
+      调用结果添加到上下文
+    </tiny-checkbox>
+  </div>
+  <div class="tool-call-config">
+    <tiny-checkbox :model-value="chatConfig.showThinkingResult" @update:model-value="updateShowThinkingResult">
+      调用结果展示在界面中
+    </tiny-checkbox>
+  </div>
+</template>
+
+<style scoped lang="less">
+.tool-call-config {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #595959;
+
+  & + & {
+    margin-top: 12px;
+  }
+}
+</style>

sites/playground/web/src/components/tab-components/mcpTools.vue

@@ -2,21 +2,53 @@
 import { ref } from 'vue';
 import { TinyCollapse } from '@opentiny/vue';
 import { AgentPanel, McpServerPanel, SkillPanel } from './tool-panels';
+import ToolCallConfig from './ToolCallConfig.vue';
 
 const activePanels = ref(['mcp', 'agent', 'skills']);
 </script>
 
 <template>
-  <div>
-    <tiny-collapse class="playground-tools" v-model="activePanels">
-      <McpServerPanel />
-      <AgentPanel />
-      <SkillPanel />
-    </tiny-collapse>
+  <div class="mcp-tools">
+    <div class="mcp-tools__scroll">
+      <div class="mcp-tools__scroll-inner">
+        <tiny-collapse class="playground-tools" v-model="activePanels">
+          <McpServerPanel />
+          <AgentPanel />
+          <SkillPanel />
+        </tiny-collapse>
+      </div>
+    </div>
+    <div class="mcp-tools__footer">
+      <ToolCallConfig />
+    </div>
   </div>
 </template>
 
 <style scoped lang="less">
+.mcp-tools {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.mcp-tools__scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.mcp-tools__scroll-inner {
+  padding: 0 24px;
+}
+
+.mcp-tools__footer {
+  flex-shrink: 0;
+  padding: 12px 24px 16px;
+  background: var(--ti-base-color-bg, #fff);
+}
+
 :deep(.tiny-collapse) {
   border-bottom: none;
 
@@ -34,6 +66,9 @@ const activePanels = ref(['mcp', 'agent', 'skills']);
     .tiny-collapse-item__header {
       padding: 0;
       border-bottom: none;
+      position: sticky;
+      top: 0;
+      z-index: 2;
     }
 
     .tiny-collapse-item__content {

sites/playground/web/src/components/tab-components/tool-panels/McpServerPanel.vue

@@ -4,7 +4,6 @@ import {
   TinyButton,
   TinySwitch,
   TinyPopover,
-  TinyCheckbox,
   TinyCollapseItem,
   TinyDialogBox,
   TinyForm,
@@ -15,7 +14,7 @@ import {
 import { iconDel, iconEdit, iconPlus, iconEllipsis } from '@opentiny/vue-icon';
 
 const playgroundContext = inject('playgroundContext');
-const { llmConfig, chatConfig } = playgroundContext;
+const { llmConfig } = playgroundContext;
 
 const IconPlus = iconPlus();
 const IconDel = iconDel();
@@ -91,14 +90,6 @@ const updateServerEnabled = (server, enabled) => {
   llmConfig.mcpServers = mcpServers.map((s) => (s.name === server.name ? { ...s, enabled } : s));
 };
 
-const updateAddToolCallContext = (value) => {
-  chatConfig.addToolCallContext = value;
-};
-
-const updateShowThinkingResult = (value) => {
-  chatConfig.showThinkingResult = value;
-};
-
 const confirmMCPServer = async () => {
   addToolLoading.value = true;
   try {
@@ -204,16 +195,6 @@ const confirmMCPServer = async () => {
         </div>
       </div>
     </div>
-    <div class="mcp-server-tool-call-context">
-      <tiny-checkbox :model-value="chatConfig.addToolCallContext" @update:model-value="updateAddToolCallContext">
-        调用结果添加到上下文
-      </tiny-checkbox>
-    </div>
-    <div class="mcp-server-tool-call-context" style="margin-top: 12px">
-      <tiny-checkbox :model-value="chatConfig.showThinkingResult" @update:model-value="updateShowThinkingResult">
-        调用结果展示在界面中
-      </tiny-checkbox>
-    </div>
     <tiny-dialog-box
       v-model:visible="showToolFormDialog"
       :title="mcpServerData.index > -1 ? '编辑 MCP 服务' : '添加 MCP 服务'"
@@ -317,19 +298,6 @@ const confirmMCPServer = async () => {
   color: #595959;
 }
 
-.mcp-server-tool-call-context {
-  margin-top: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  color: #595959;
-
-  &:last-child {
-    margin-bottom: 16px;
-  }
-}
-
 :deep(.mcp-server-item-actions-popover) {
   padding: 0;
   border: none;