@opentiny/tiny-robot-cli 0.5.2-alpha.13 → 0.5.2-alpha.14

package/templates/chat/src/components/ComposerTools.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { SuggestionData, SuggestionItem, TemplateItem } from '@opentiny/tiny-robot'
+import { TrDropdownMenu, TrSuggestionPillButton, TrSuggestionPills, TrSuggestionPopover } from '@opentiny/tiny-robot'
+import type { ChatSenderSlotProps } from '@opentiny/tiny-robot-chat'
+import { IconSparkles } from '@opentiny/tiny-robot-svgs'
+import type { ChatMenuItem, TemplateCategory, TemplateSuggestionItem } from '../config/chat-ui'
+import type { McpExample } from '../config/chat-runtime'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  templateCategories: readonly TemplateCategory[]
+  mcpExamples: readonly McpExample[]
+  menus: readonly ChatMenuItem[]
+  submit: ChatSenderSlotProps['submit']
+}>()
+
+const currentTemplate = defineModel<TemplateItem[]>('currentTemplate', { required: true })
+const suggestionData: SuggestionData = props.mcpExamples.map((item) => ({ id: item.id, text: item.request }))
+const mcpMenuItems = props.mcpExamples.map((item) => ({ id: item.id, text: item.request }))
+const mcpMenu = computed(() => props.menus.find((menu) => menu.action === 'mcp'))
+const templateMenus = computed(() =>
+  props.templateCategories.map((category) => ({
+    ...category,
+    items: category.items.map((item) => ({ id: item.id, text: item.text, template: item })),
+  })),
+)
+const overlayTarget = '.chat-add-window'
+
+function fillTemplate(template: TemplateSuggestionItem): void {
+  currentTemplate.value = template.template.map((item) => ({ ...item }))
+}
+
+function submitSuggestion(item: SuggestionItem): void {
+  props.submit({ text: item.text })
+}
+</script>
+
+<template>
+  <div class="chat-add-tools">
+    <TrSuggestionPopover :append-to="overlayTarget" :data="suggestionData" @item-click="submitSuggestion">
+      <template #trigger>
+        <TrSuggestionPillButton title="常用查询"
+          ><IconSparkles style="font-size: 16px; color: #1476ff"
+        /></TrSuggestionPillButton>
+      </template>
+    </TrSuggestionPopover>
+    <TrSuggestionPills class="chat-add-tools__pills">
+      <TrDropdownMenu
+        v-if="mcpMenu"
+        :append-to="overlayTarget"
+        :items="mcpMenuItems"
+        trigger="click"
+        @item-click="(item) => submitSuggestion(item as SuggestionItem)"
+      >
+        <template #trigger
+          ><TrSuggestionPillButton>{{ mcpMenu.title }}</TrSuggestionPillButton></template
+        >
+      </TrDropdownMenu>
+      <TrDropdownMenu
+        v-for="category in templateMenus"
+        :key="category.id"
+        :append-to="overlayTarget"
+        :items="category.items as never"
+        trigger="click"
+        @item-click="(item) => fillTemplate((item as unknown as { template: TemplateSuggestionItem }).template)"
+      >
+        <template #trigger
+          ><TrSuggestionPillButton>{{ category.title }}</TrSuggestionPillButton></template
+        >
+      </TrDropdownMenu>
+    </TrSuggestionPills>
+  </div>
+</template>
+
+<style scoped>
+.chat-add-tools {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+}
+.chat-add-tools__pills {
+  min-width: 0;
+  flex: 1;
+}
+.chat-add-tools__pills :deep(.tr-suggestion-pills__container) {
+  min-width: 0;
+  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 80%, rgb(0 0 0 / 0%) 100%);
+}
+@container (max-width: 519px) {
+  .chat-add-tools {
+    padding: 8px;
+  }
+}
+</style>

package/templates/chat/src/{tiny-robot-chat/components → components}/WindowHeader.vue

@@ -35,7 +35,7 @@ const IconFloatWindow = h(
   },
   [
     h('path', {
-      fill: '#191919',
+      fill: 'currentColor',
       'fill-rule': 'evenodd',
       d: 'M6.19 14.5H4q-.285 0-.54-.06c-.15-.04-.3-.08-.44-.14s-.27-.13-.4-.22c-.14-.09-.27-.2-.39-.32s-.23-.25-.32-.39c-.09-.13-.16-.26-.22-.4s-.1-.29-.14-.44c-.04-.17-.05-.35-.05-.53V4c0-.19.01-.37.05-.54.04-.15.08-.3.14-.44s.13-.27.22-.4c.09-.14.2-.27.32-.39s.25-.23.39-.32c.13-.09.26-.16.4-.22s.29-.1.44-.14c.17-.04.35-.05.54-.05h8c.18 0 .36.01.53.05.15.04.3.08.44.14s.27.13.4.22c.14.09.27.2.39.32s.23.25.32.39c.09.13.16.26.22.4s.1.29.14.44q.06.255.06.54v2.15c0 .28-.22.5-.5.5s-.5-.22-.5-.5V4c0-.12-.02-.23-.04-.35-.02-.08-.05-.16-.08-.24a2 2 0 0 0-.13-.23 1.5 1.5 0 0 0-.19-.25 1.5 1.5 0 0 0-.25-.19c-.07-.05-.15-.09-.23-.13a2 2 0 0 0-.24-.08c-.12-.02-.23-.03-.34-.03H4c-.12 0-.23.01-.35.03-.08.02-.16.05-.24.08-.08.04-.16.08-.23.13a1.5 1.5 0 0 0-.25.19 1.5 1.5 0 0 0-.19.25c-.05.07-.09.15-.13.23-.03.08-.06.16-.08.24-.02.12-.03.23-.03.35v8c0 .11.01.22.03.34.02.08.05.16.08.24.04.08.08.16.13.23.05.09.12.17.19.25.08.07.16.14.25.19.07.05.15.09.23.13.08.03.16.06.24.08.12.02.23.04.35.04h2.19c.28 0 .5.22.5.5s-.22.5-.5.5m7.12-6.97c-.1-.02-.21-.03-.31-.03H9c-.11 0-.22.01-.32.03-.09.02-.18.05-.27.08-.09.04-.17.08-.24.13-.09.06-.16.12-.24.19-.07.08-.13.15-.19.24-.05.07-.09.15-.13.24-.03.09-.06.18-.08.27-.02.1-.03.21-.03.32v4c0 .1.01.21.03.31.02.09.05.18.08.27.04.09.08.17.13.24.06.09.12.16.19.24.08.07.15.13.24.19.07.05.15.09.24.13.09.03.18.06.27.08.1.02.21.04.32.04h4c.1 0 .21-.02.31-.04.09-.02.18-.05.27-.08.09-.04.17-.08.24-.13.09-.06.16-.12.24-.19.07-.08.13-.15.19-.24.05-.07.09-.15.13-.24.03-.09.06-.18.08-.27.02-.1.04-.21.04-.31V9c0-.11-.02-.22-.04-.32-.02-.09-.05-.18-.08-.27-.04-.09-.08-.17-.13-.24-.06-.09-.12-.16-.19-.24-.08-.07-.15-.13-.24-.19-.07-.05-.15-.09-.24-.13-.09-.03-.18-.06-.27-.08M9 8.5h4c.06 0 .13.01.19.03.06.03.11.06.16.11s.08.1.11.16c.02.06.04.13.04.2v4c0 .06-.02.13-.04.19-.03.06-.06.11-.11.16s-.1.08-.16.11c-.06.02-.13.04-.19.04H9c-.07 0-.14-.02-.2-.04a.6.6 0 0 1-.16-.11.6.6 0 0 1-.11-.16.6.6 0 0 1-.03-.19V9c0-.07.01-.14.03-.2.03-.06.06-.11.11-.16s.1-.08.16-.11c.06-.02.13-.03.2-.03',
     }),

package/templates/chat/src/{tiny-robot-chat/composables → composables}/useWindow.ts

@@ -4,34 +4,24 @@ import { computed, shallowRef, watch } from 'vue'
 
 export type DisplayMode = 'floating' | 'fullscreen'
 
-const FLOATING_GAP = 24
-const FLOATING_MIN_WIDTH = 360
-const FLOATING_MIN_HEIGHT = 480
-
 export function useWindow() {
   const show = shallowRef(false)
   const displayMode = shallowRef<DisplayMode>('floating')
-  const { width, height } = useWindowSize()
   const floatingState = shallowRef<LayoutFloatingState>({
-    placement: 'top-right',
-    offsetX: FLOATING_GAP,
-    offsetY: FLOATING_GAP,
-    width: 500,
-    height: Math.max(1, height.value - FLOATING_GAP * 2),
+    placement: 'center',
+    offsetX: 24,
+    offsetY: 24,
+    width: 640,
+    height: 760,
   })
   const restoreFloatingState = shallowRef<LayoutFloatingState | null>(null)
+  const { width, height } = useWindowSize()
 
   const floatingOptions = computed<LayoutFloatingOptions>(() => ({
     draggable: displayMode.value === 'floating',
     resizable: displayMode.value === 'floating',
-    minWidth:
-      displayMode.value === 'floating'
-        ? Math.min(FLOATING_MIN_WIDTH, Math.max(1, width.value - FLOATING_GAP * 2))
-        : undefined,
-    minHeight:
-      displayMode.value === 'floating'
-        ? Math.min(FLOATING_MIN_HEIGHT, Math.max(1, height.value - FLOATING_GAP * 2))
-        : undefined,
+    minWidth: displayMode.value === 'floating' ? 360 : undefined,
+    minHeight: displayMode.value === 'floating' ? 480 : undefined,
   }))
 
   const layoutStyle = computed(() => ({

package/templates/chat/src/config/chat-runtime.ts

@@ -0,0 +1,82 @@
+import type { ChatMcpServers, ChatProviderConfig } from '@opentiny/tiny-robot-chat'
+import { IconBailian, IconDeepseek } from '@opentiny/tiny-robot-svgs'
+
+export interface McpExample {
+  id: string
+  title: string
+  request: string
+}
+
+export const mcpExamples: McpExample[] = [
+  { id: 'weather', title: '查询北京天气', request: '查询北京今天的天气，并给出出行建议' },
+  { id: 'coffee', title: '查询附近咖啡店', request: '查询我附近的咖啡店，并按距离排序' },
+  { id: 'exchange-rate', title: '获取当前汇率', request: '查询人民币兑美元的当前汇率' },
+]
+
+export const mcpServers: ChatMcpServers = [
+  {
+    id: 'amap-maps',
+    name: '高德地图',
+    description: '覆盖地图、导航、地理编码、天气、路径规划、距离测量、关键词搜索和周边搜索等地理信息服务。',
+    baseUrl: import.meta.env.VITE_AMAP_MCP_URL?.trim() || 'https://dashscope.aliyuncs.com/api/v1/mcps/amap-maps/mcp',
+    icon: 'https://img.alicdn.com/imgextra/i4/O1CN01iPPabT1EGRN6uatHP_!!6000000000324-0-tps-512-512.jpg',
+    headers: import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY?.trim()
+      ? { Authorization: `Bearer ${import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY.trim()}` }
+      : undefined,
+  },
+  {
+    id: 'model-context-protocol-mcp',
+    name: 'Model Context Protocol MCP',
+    description: 'MCP Server',
+    baseUrl: '/modelcontextprotocol-mcp',
+    installed: true,
+  },
+]
+
+export const modelProviders: ChatProviderConfig[] = [
+  {
+    type: 'qwen',
+    label: 'DashScope',
+    apiUrl: import.meta.env.VITE_QWEN_API_URL?.trim() || undefined,
+    apiKey: import.meta.env.VITE_ALIYUN_DASHSCOPE_KEY?.trim(),
+    models: [
+      {
+        id: 'qwen3.7-flash',
+        label: 'Qwen3.7 Flash',
+        icon: IconBailian,
+        capabilities: { thinking: true, search: true },
+      },
+      {
+        id: 'qwen3.7-plus',
+        label: 'Qwen3.7 Plus',
+        icon: IconBailian,
+        capabilities: { thinking: true, search: true },
+      },
+      {
+        id: 'qwen3.7-max',
+        label: 'Qwen3.7 Max',
+        icon: IconBailian,
+        capabilities: { thinking: true, search: true },
+      },
+    ],
+  },
+  {
+    type: 'deepseek',
+    apiUrl: import.meta.env.VITE_DEEPSEEK_API_URL?.trim() || undefined,
+    apiKey: import.meta.env.VITE_DEEPSEEK_API_KEY?.trim(),
+    models: [
+      {
+        id: 'deepseek-v4-flash',
+        label: 'DeepSeek V4 Flash',
+        icon: IconDeepseek,
+        capabilities: { thinking: true },
+      },
+      {
+        id: 'deepseek-v4-pro',
+        label: 'DeepSeek V4 Pro',
+        icon: IconDeepseek,
+        capabilities: { thinking: true },
+      },
+    ],
+  },
+]

package/templates/chat/src/{tiny-robot-chat/config → config}/chat-ui.ts

@@ -1,7 +1,7 @@
 import type { LayoutFloatingOptions } from '@opentiny/tiny-robot'
 import type { ChatSenderOptions, ChatUIOptions } from '@opentiny/tiny-robot-chat'
 import type { TemplateItem } from '@opentiny/tiny-robot'
-import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
+import { IconAi, IconEdit, IconHistory, IconNewSession, IconSparkles, IconUser } from '@opentiny/tiny-robot-svgs'
 import { h, type CSSProperties } from 'vue'
 
 export interface ChatUiConfigOptions {
@@ -9,6 +9,24 @@ export interface ChatUiConfigOptions {
   templateExtensions: NonNullable<ChatSenderOptions['extensions']>
 }
 
+export interface ChatMenuItem {
+  id: string
+  title: string
+  icon: unknown
+  action: 'mcp' | 'template' | 'history' | 'new-session' | 'mode'
+}
+
+export const composerMenus: ChatMenuItem[] = [
+  { id: 'quick-query', title: '常用查询', icon: IconSparkles, action: 'mcp' },
+  { id: 'templates', title: '模板', icon: IconEdit, action: 'template' },
+]
+
+export const windowMenus: ChatMenuItem[] = [
+  { id: 'new-session', title: '新会话', icon: IconNewSession, action: 'new-session' },
+  { id: 'history', title: '历史会话', icon: IconHistory, action: 'history' },
+  { id: 'mode', title: '窗口模式', icon: IconSparkles, action: 'mode' },
+]
+
 export interface PromptItemData {
   label: string
   description: string
@@ -34,9 +52,9 @@ export const PROMPT_ITEMS_DATA: PromptItemData[] = [
     emoji: '✨',
   },
   {
-    label: '工作效率场景',
-    description: '需要我帮你总结内容、拆解任务，还是整理一份行动清单？',
-    emoji: '⚡',
+    label: 'MCP 工具调用',
+    description: '搜索：北京天气（输入「搜索」「MCP」「工具」等关键词可触发模拟 MCP 工具调用）',
+    emoji: '🔧',
   },
 ]
 

package/templates/chat/src/index.css

@@ -0,0 +1,116 @@
+:root {
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  color: #1f2329;
+}
+* {
+  box-sizing: border-box;
+}
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+}
+body {
+  overflow: hidden;
+}
+.chat-add-app {
+  position: relative;
+  container-type: inline-size;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+.chat-add-launcher {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: var(--tr-z-index-popover, 1000);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--tr-color-primary);
+  color: #fff;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
+  cursor: pointer;
+}
+.chat-add-launcher:hover {
+  background: var(--tr-color-primary-hover);
+}
+.chat-add-launcher:focus-visible {
+  outline: 2px solid var(--tr-color-primary);
+  outline-offset: 3px;
+}
+.chat-add-window {
+  container-type: inline-size;
+  --tr-layout-bg-default: var(--tr-container-bg-default);
+  --tr-chat-ui-header-bg: var(--tr-container-bg-default);
+  --tr-chat-ui-main-bg: var(--tr-page-bg-default);
+  --tr-chat-ui-footer-bg: var(--tr-page-bg-default);
+  --tr-suggestion-popover-width: min(440px, calc(100cqw - 16px));
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+.chat-add-window .tr-welcome {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 24px 24px 0;
+}
+.chat-add-window .tr-welcome__title-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chat-add-window .tr-prompts {
+  --tr-prompts-gap: 16px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px 24px;
+}
+.chat-add-window .prompt-item {
+  flex: 0 0 calc((100% - 16px) / 2);
+  box-sizing: border-box;
+  min-width: 0;
+}
+.chat-add-window--floating {
+  border-radius: var(--tr-layout-floating-radius);
+  box-shadow: var(--tr-layout-floating-shadow);
+  overflow: hidden;
+}
+.chat-add-window--fullscreen {
+  border-radius: 0;
+  box-shadow: none;
+}
+@container (max-width: 519px) {
+  .chat-add-launcher {
+    right: 16px;
+    bottom: 16px;
+  }
+  .chat-add-window .prompt-item {
+    flex-basis: 100%;
+  }
+  .chat-add-window .tr-welcome {
+    padding-inline: 12px;
+  }
+  .chat-add-window .tr-prompts {
+    padding-inline: 12px;
+  }
+  .chat-add-window .tr-bubble__avatar {
+    display: none;
+  }
+}

package/templates/chat/src/main.ts

@@ -1,4 +1,7 @@
 import { createApp } from 'vue'
+import '@opentiny/tiny-robot/dist/style.css'
+import '@opentiny/tiny-robot-chat/dist/style.css'
+import './index.css'
 import TinyRobotChat from './TinyRobotChat.vue'
 
 createApp(TinyRobotChat).mount('#app')

package/templates/basic/src/components/ChatList.vue

@@ -1,82 +0,0 @@
-<template>
-  <tr-bubble-provider :fallback-content-renderer="BubbleRenderers.Markdown">
-    <tr-welcome
-      v-if="visibleMessages.length === 0"
-      title="TinyRobot AI 助手"
-      description="您好，我是TinyRobot，您专属的 AI 智能专家"
-      :icon="welcomeIcon"
-      class="chat-list chat-welcome"
-    />
-    <tr-bubble-list
-      v-else
-      :messages="messages"
-      :role-configs="roles"
-      :auto-scroll="true"
-      class="chat-list"
-    ></tr-bubble-list>
-  </tr-bubble-provider>
-</template>
-
-<script setup lang="ts">
-import { BubbleRenderers, TrBubbleList, TrBubbleProvider, TrWelcome, type BubbleRoleConfig } from '@opentiny/tiny-robot'
-import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs'
-import { computed, h } from 'vue'
-import { useChat } from '../composables/useChat'
-
-const { messages } = useChat()
-
-const aiAvatar = h(IconAi, { style: { fontSize: '28px' } })
-const userAvatar = h(IconUser, { style: { fontSize: '28px' } })
-const welcomeIcon = h(IconAi, { style: { fontSize: '40px' } })
-const visibleMessages = computed(() => messages.value.filter((item) => item.role !== 'system'))
-
-const roles: Record<string, BubbleRoleConfig> = {
-  assistant: {
-    placement: 'start',
-    avatar: aiAvatar,
-  },
-  user: {
-    placement: 'end',
-    avatar: userAvatar,
-  },
-  system: {
-    hidden: true,
-  },
-}
-</script>
-
-<style scoped>
-.chat-list {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  border-radius: 10px;
-  padding: 8px;
-}
-
-.chat-welcome {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 10%;
-
-  &.tr-welcome {
-    --title-color: var(--tr-text-primary);
-    --description-color: var(--tr-text-secondary);
-  }
-}
-
-:deep() {
-  [data-box-type='box'][data-role='user'] {
-    --tr-bubble-box-bg: var(--tr-color-primary-light);
-  }
-
-  [data-box-type='box']:not([data-role='user']) {
-    --tr-bubble-box-bg: transparent;
-  }
-
-  [data-type='markdown'] p {
-    margin: 0;
-  }
-}
-</style>

package/templates/basic/src/components/ChatSender.vue

@@ -1,125 +0,0 @@
-<template>
-  <tr-sender
-    v-model="inputMessage"
-    mode="multiple"
-    :placeholder="isProcessing ? '思考中...' : '请输入你的问题...'"
-    :clearable="true"
-    :loading="isProcessing"
-    :show-word-limit="true"
-    :max-length="1000"
-    @submit="sendMessage"
-    @cancel="abortActiveRequest"
-  >
-    <template #footer>
-      <div class="model-actions">
-        <button
-          class="sender-action-btn sender-capability-btn"
-          :class="{ 'sender-capability-btn--active': thinkingEnabled }"
-          type="button"
-          :disabled="!supportsThinking"
-          @click="thinkingEnabled = !thinkingEnabled"
-        >
-          <IconDeepThink :size="16" class="sender-action-btn__icon" />
-          深度思考
-        </button>
-        <button
-          class="sender-action-btn sender-capability-btn"
-          :class="{ 'sender-capability-btn--active': searchEnabled }"
-          type="button"
-          :disabled="!supportsSearch"
-          @click="searchEnabled = !searchEnabled"
-        >
-          <IconWebSearch :size="16" class="sender-action-btn__icon" />
-          联网搜索
-        </button>
-        <McpServerPickerButton />
-        <tr-dropdown-menu :items="modelMenuItems" trigger="click" @item-click="handleModelSelect">
-          <template #trigger>
-            <button class="sender-action-btn sender-model-btn" type="button">
-              <component :is="selectedModel?.icon" :size="16" class="sender-action-btn__icon" />
-              <span>{{ selectedModel?.name || '选择模型' }}</span>
-            </button>
-          </template>
-        </tr-dropdown-menu>
-      </div>
-    </template>
-  </tr-sender>
-</template>
-
-<script setup lang="ts">
-import { TrDropdownMenu, TrSender } from '@opentiny/tiny-robot'
-import { computed } from 'vue'
-import { useChat } from '../composables/useChat'
-import { useModel } from '../composables/useModel'
-import McpServerPickerButton from './McpServerPickerButton.vue'
-import { IconDeepThink, IconWebSearch } from './icons'
-
-const { inputMessage, isProcessing, sendMessage, abortActiveRequest } = useChat()
-const {
-  modelOptions,
-  selectedModel,
-  selectedModelId,
-  thinkingEnabled,
-  searchEnabled,
-  supportsThinking,
-  supportsSearch,
-} = useModel()
-
-const modelMenuItems = computed(() =>
-  modelOptions.map((item) => ({
-    id: item.id,
-    text: item.name,
-  })),
-)
-
-function handleModelSelect(item: { id?: string }) {
-  if (!item.id) {
-    return
-  }
-  selectedModelId.value = item.id
-}
-</script>
-
-<style scoped>
-.model-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.sender-action-btn {
-  border: 1px solid var(--tr-border-color-disabled);
-  border-radius: var(--tr-radius-full);
-  background: var(--tr-container-bg-default);
-  color: var(--tr-text-secondary);
-  font-size: var(--tr-font-size-sm);
-  height: 32px;
-  padding: 0 10px;
-  line-height: 1;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.sender-action-btn__icon {
-  flex-shrink: 0;
-}
-
-.sender-action-btn:hover:not(:disabled) {
-  border-color: var(--tr-border-color-hover);
-  color: var(--tr-text-primary);
-  background: var(--tr-container-bg-hover);
-}
-
-.sender-action-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.sender-capability-btn--active {
-  border-color: var(--tr-border-color-hover);
-  color: var(--tr-text-primary);
-  background: var(--tr-container-bg-default-2);
-}
-</style>