@opentiny/tiny-robot-cli 0.4.2-alpha.0

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

@@ -0,0 +1,125 @@
+<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>

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

@@ -0,0 +1,136 @@
+<template>
+  <div v-if="historyDrawerOpen" class="history-drawer-backdrop" @click="historyDrawerOpen = false"></div>
+  <aside class="history-panel" :class="{ 'history-panel--open': historyDrawerOpen }">
+    <div class="history-panel__header">
+      <h2>历史会话</h2>
+      <button class="new-chat-btn" type="button" @click="activeConversationId = null">新会话</button>
+    </div>
+    <tr-history
+      class="history-panel__list"
+      :data="historyData"
+      :selected="activeConversationId ?? undefined"
+      @item-click="handleItemClick"
+      @item-title-change="handleItemTitleChange"
+      @item-action="handleItemAction"
+    ></tr-history>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { TrHistory } from '@opentiny/tiny-robot'
+import { inject, ref, type Ref, watch } from 'vue'
+import { useChat } from '../composables/useChat'
+
+type HistoryAction = {
+  id: string
+}
+
+const { activeConversationId, switchConversation, updateConversationTitle, deleteConversation, conversations } =
+  useChat()
+const historyDrawerOpen = inject<Ref<boolean>>('historyDrawerOpen', ref(false))
+
+const historyData = ref<Array<{ id: string; title: string }>>([])
+
+watch(
+  () => conversations.value.length,
+  () => {
+    const list = conversations.value
+    historyData.value = list.map((item) => ({
+      id: item.id,
+      title: item.title || 'New Chat',
+    }))
+  },
+  { immediate: true },
+)
+
+function handleItemClick(item: { id: string }) {
+  switchConversation(item.id)
+  historyDrawerOpen.value = false
+}
+
+function handleItemTitleChange(newTitle: string, item: { id: string }) {
+  // Keep local list writable for TrHistory inline editing.
+  const target = historyData.value.find((historyItem) => historyItem.id === item.id)
+  if (target) {
+    target.title = newTitle
+  }
+  updateConversationTitle(item.id, newTitle)
+}
+
+function handleItemAction(action: HistoryAction, item: { id: string }) {
+  if (action.id === 'delete') {
+    deleteConversation(item.id)
+  }
+}
+</script>
+
+<style scoped>
+.history-panel {
+  width: 300px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--tr-border-color-disabled);
+}
+
+.history-panel__header {
+  padding: 12px 24px 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.history-panel__header h2 {
+  margin: 0;
+  font-size: var(--tr-font-size-md);
+}
+
+.new-chat-btn {
+  border: none;
+  border-radius: 6px;
+  background: var(--tr-color-primary);
+  color: #fff;
+  font-size: 12px;
+  padding: 6px 10px;
+  cursor: pointer;
+}
+
+.history-panel__list {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+  --tr-history-item-selected-bg: var(--tr-history-item-hover-bg);
+  --tr-history-item-space-y: 4px;
+}
+
+.history-drawer-backdrop {
+  display: none;
+}
+
+@media (max-width: 959px) {
+  .history-drawer-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: var(--tr-z-index-drawer);
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .history-panel {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: min(300px, 80vw);
+    z-index: calc(var(--tr-z-index-drawer) + 1);
+    background: var(--tr-container-bg-default);
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+  }
+
+  .history-panel--open {
+    transform: translateX(0);
+  }
+}
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <button class="history-trigger-btn" type="button" aria-label="打开历史会话抽屉" @click="emit('click')">
+    <IconHistory style="font-size: 20px" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { IconHistory } from '@opentiny/tiny-robot-svgs'
+
+const emit = defineEmits<{
+  (event: 'click'): void
+}>()
+</script>
+
+<style scoped>
+.history-trigger-btn {
+  display: none;
+}
+
+@media (max-width: 959px) {
+  .history-trigger-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: var(--tr-radius-full);
+    background: var(--tr-container-bg-default);
+    color: var(--tr-text-secondary);
+    cursor: pointer;
+  }
+
+  .history-trigger-btn:hover {
+    color: var(--tr-icon-color-hover);
+    background: var(--tr-container-bg-hover);
+  }
+}
+</style>

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

@@ -0,0 +1,278 @@
+<template>
+  <div>
+    <button
+      class="sender-action-btn sender-capability-btn"
+      :class="{ 'sender-capability-btn--active': inUseMcpServers.length > 0 }"
+      type="button"
+      @click="mcpPickerVisible = true"
+    >
+      <IconPlugin :size="16" class="sender-action-btn__icon" />
+      MCP
+      <span v-if="inUseMcpServers.length > 0" class="mcp-active-count">
+        {{ inUseMcpServers.length }}
+      </span>
+    </button>
+
+    <McpServerPicker
+      v-model:visible="mcpPickerVisible"
+      :active-count="inUseMcpServers.length"
+      :popup-config="pickerPopupConfig"
+      :installed-plugins="installedPlugins"
+      :market-plugins="marketPlugins"
+      :loading="false"
+      :market-loading="false"
+      :show-custom-add-button="false"
+      :allow-plugin-delete="true"
+      @plugin-toggle="handlePluginToggle"
+      @plugin-add="handlePluginAdd"
+      @plugin-delete="handlePluginDelete"
+      @tool-toggle="handleToolToggle"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { McpServerPicker, type PluginInfo } from '@opentiny/tiny-robot'
+import { computed, ref } from 'vue'
+import { useMcp } from '../composables/useMcp'
+import type { McpServerKey } from '../mcpServers'
+import { IconPlugin } from './icons'
+
+const {
+  McpServers,
+  availableMcpServers,
+  addedMcpServers,
+  addMcpServer,
+  inUseMcpServers,
+  toggleMcpServer,
+  removeMcpServer,
+  listTools,
+} = useMcp()
+
+const mcpPickerVisible = ref(false)
+const loadedPluginTools = ref<Record<string, PluginInfo['tools']>>({})
+const addingMcpServers = ref<Set<McpServerKey>>(new Set())
+const pluginIcon = 'https://modelcontextprotocol.io/favicon.ico'
+const pickerPopupConfig = {
+  type: 'drawer' as const,
+  drawer: {
+    direction: 'right' as const,
+  },
+}
+
+const inUseServerSet = computed(() => new Set(inUseMcpServers.value))
+const addedServerSet = computed(() => new Set(addedMcpServers.value))
+
+function toMcpServerKey(serverKey: string): McpServerKey | null {
+  return availableMcpServers.value.includes(serverKey as McpServerKey) ? (serverKey as McpServerKey) : null
+}
+
+function getServerDescription(serverKey: McpServerKey): string {
+  const config = McpServers[serverKey]
+  const description = 'description' in config ? config.description : undefined
+  return description || config.baseUrl
+}
+
+function getServerIcon(serverKey: McpServerKey): string {
+  const config = McpServers[serverKey]
+  const logoUrl = 'logoUrl' in config ? config.logoUrl : undefined
+  return logoUrl || pluginIcon
+}
+
+function normalizeTool(tool: unknown, fallbackIndex: number, enabled: boolean) {
+  if (typeof tool !== 'object' || !tool) {
+    return {
+      id: `tool-${fallbackIndex}`,
+      name: `Tool ${fallbackIndex + 1}`,
+      description: '',
+      enabled,
+    }
+  }
+  const rawName = (tool as { name?: unknown }).name
+  const rawDescription = (tool as { description?: unknown }).description
+  const name = typeof rawName === 'string' && rawName.length > 0 ? rawName : `Tool ${fallbackIndex + 1}`
+  return {
+    id: name,
+    name,
+    description: typeof rawDescription === 'string' ? rawDescription : '',
+    enabled,
+  }
+}
+
+function setLoadedTools(serverKey: McpServerKey, tools: PluginInfo['tools']) {
+  loadedPluginTools.value = {
+    ...loadedPluginTools.value,
+    [serverKey]: tools,
+  }
+}
+
+function setAddingState(serverKey: McpServerKey, adding: boolean) {
+  const next = new Set(addingMcpServers.value)
+  if (adding) {
+    next.add(serverKey)
+  } else {
+    next.delete(serverKey)
+  }
+  addingMcpServers.value = next
+}
+
+function mapToolsToPluginTools(tools: unknown[], enabled: boolean): PluginInfo['tools'] {
+  return tools.map((tool, index) => normalizeTool(tool, index, enabled))
+}
+
+async function loadToolsForServer(serverKey: McpServerKey) {
+  try {
+    const tools = await listTools(serverKey)
+    setLoadedTools(serverKey, mapToolsToPluginTools(tools, true))
+  } catch (error) {
+    console.error(`[MCP] Failed to load tools for "${serverKey}":`, error)
+    setLoadedTools(serverKey, [])
+  }
+}
+
+const installedPlugins = computed<PluginInfo[]>(() =>
+  addedMcpServers.value.map((serverKey) => {
+    const config = McpServers[serverKey]
+    const enabled = inUseServerSet.value.has(serverKey)
+    const tools = (loadedPluginTools.value[serverKey] || []).map((tool) => ({
+      ...tool,
+      enabled,
+    }))
+    return {
+      id: serverKey,
+      name: config.name,
+      icon: getServerIcon(serverKey),
+      description: getServerDescription(serverKey),
+      enabled,
+      expanded: true,
+      tools,
+    }
+  }),
+)
+
+const marketPlugins = computed<PluginInfo[]>(() =>
+  availableMcpServers.value.map((serverKey) => {
+    const config = McpServers[serverKey]
+    return {
+      id: serverKey,
+      name: config.name,
+      icon: getServerIcon(serverKey),
+      description: getServerDescription(serverKey),
+      enabled: false,
+      tools: [],
+      addState: addedServerSet.value.has(serverKey)
+        ? 'added'
+        : addingMcpServers.value.has(serverKey)
+          ? 'loading'
+          : 'idle',
+    }
+  }),
+)
+
+async function handlePluginAdd(plugin: PluginInfo) {
+  const serverKey = toMcpServerKey(plugin.id)
+  if (!serverKey) {
+    return
+  }
+  if (addedServerSet.value.has(serverKey) || addingMcpServers.value.has(serverKey)) {
+    return
+  }
+  setAddingState(serverKey, true)
+  try {
+    addMcpServer(serverKey)
+    await loadToolsForServer(serverKey)
+  } finally {
+    setAddingState(serverKey, false)
+  }
+}
+
+async function handlePluginToggle(plugin: PluginInfo, enabled: boolean) {
+  const serverKey = toMcpServerKey(plugin.id)
+  if (!serverKey) {
+    return
+  }
+  const isEnabled = inUseServerSet.value.has(serverKey)
+  if (enabled !== isEnabled) {
+    toggleMcpServer(serverKey)
+  }
+  if (enabled && !loadedPluginTools.value[serverKey]) {
+    await loadToolsForServer(serverKey)
+  }
+}
+
+function handleToolToggle(plugin: PluginInfo, toolId: string, enabled: boolean) {
+  const serverKey = toMcpServerKey(plugin.id)
+  if (!serverKey) {
+    return
+  }
+  const tools = loadedPluginTools.value[serverKey] || []
+  setLoadedTools(
+    serverKey,
+    tools.map((tool) => (tool.id === toolId ? { ...tool, enabled } : tool)),
+  )
+}
+
+function handlePluginDelete(plugin: PluginInfo) {
+  const serverKey = toMcpServerKey(plugin.id)
+  if (!serverKey) {
+    return
+  }
+  removeMcpServer(serverKey)
+  const nextLoadedTools = { ...loadedPluginTools.value }
+  delete nextLoadedTools[serverKey]
+  loadedPluginTools.value = nextLoadedTools
+}
+</script>
+
+<style scoped>
+.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:hover:not(:disabled) {
+  border-color: var(--tr-border-color-hover);
+  color: var(--tr-text-primary);
+  background: var(--tr-container-bg-hover);
+}
+
+.sender-action-btn__icon {
+  flex-shrink: 0;
+}
+
+.sender-capability-btn--active {
+  border-color: var(--tr-border-color-hover);
+  color: var(--tr-text-primary);
+  background: var(--tr-container-bg-default-2);
+}
+
+.mcp-active-count {
+  min-width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--tr-color-brand, #1476ff);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  padding: 0 3px;
+}
+
+:deep(.mcp-server-picker.popup-type-drawer) {
+  right: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  border-right: 0;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <button class="theme-toggle-btn" type="button" aria-label="切换主题" @click="toggleColorMode()">
+    <IconMoon v-if="resolvedColorMode === 'light'" :size="20" />
+    <IconSun v-else :size="20" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from '@opentiny/tiny-robot'
+import { IconMoon, IconSun } from './icons'
+
+const { toggleColorMode, resolvedColorMode } = useTheme()
+</script>
+
+<style scoped>
+.theme-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--tr-radius-full);
+  background: transparent;
+  color: var(--tr-icon-color-default);
+  cursor: pointer;
+}
+
+.theme-toggle-btn:hover {
+  color: var(--tr-icon-color-hover);
+  background: var(--tr-container-bg-hover);
+}
+
+@media (max-width: 959px) {
+  .theme-toggle-btn {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+</style>

package/templates/basic/src/components/icons/IconDeepThink.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number
+  }>(),
+  {
+    size: 24,
+  },
+)
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    :width="size"
+    :height="size"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <rect id="深度思考-deepthinking 1" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+    <path
+      id="矢量_163"
+      d="M13.6607 13.6627C13.7407 13.5827 13.8107 13.4927 13.8807 13.4027C14.1707 13.0127 14.3207 12.5327 14.3507 11.9527C14.3807 11.3227 14.2507 10.6127 13.9707 9.83266C13.7507 9.23266 13.4507 8.62267 13.0807 8.00266C13.4607 7.38266 13.7607 6.77266 13.9707 6.17266C14.2507 5.39266 14.3807 4.68266 14.3507 4.05266C14.3207 3.34266 14.0807 2.77266 13.6607 2.34266C13.2307 1.91266 12.6607 1.68266 11.9507 1.65266C11.3207 1.62266 10.6107 1.75266 9.83071 2.03266C9.23071 2.25266 8.62071 2.55266 8.00071 2.93266C7.38071 2.55266 6.77071 2.25266 6.17071 2.03266C5.39071 1.75266 4.69071 1.62266 4.06071 1.65266C3.48071 1.68266 2.99071 1.84266 2.60071 2.12266C2.51071 2.19266 2.43071 2.27266 2.35071 2.35266C2.27071 2.43266 2.19071 2.51266 2.12071 2.60266C1.84071 2.99266 1.68071 3.48266 1.65071 4.06266C1.62071 4.69266 1.75071 5.40266 2.03071 6.18266C2.25071 6.77266 2.55071 7.38266 2.93071 8.00266C2.55071 8.62267 2.25071 9.23266 2.03071 9.83266C1.75071 10.6127 1.62071 11.3227 1.65071 11.9527C1.68071 12.5327 1.83071 13.0127 2.12071 13.4027C2.19071 13.4927 2.26071 13.5827 2.34071 13.6627C2.42071 13.7427 2.51071 13.8127 2.60071 13.8827C2.99071 14.1727 3.47071 14.3227 4.05071 14.3527C4.68071 14.3827 5.39071 14.2527 6.17071 13.9727C6.77071 13.7527 7.38071 13.4527 8.00071 13.0827C8.62071 13.4627 9.23071 13.7627 9.83071 13.9727C10.6107 14.2527 11.3207 14.3827 11.9507 14.3527C12.5307 14.3227 13.0107 14.1627 13.4007 13.8827C13.4907 13.8127 13.5807 13.7427 13.6607 13.6627ZM7.08071 3.55266C6.65071 3.31266 6.24071 3.12266 5.83071 2.97266C5.18071 2.74266 4.60071 2.63266 4.10071 2.65266C3.66071 2.68266 3.32071 2.80266 3.07071 3.03266C2.83071 3.28266 2.68071 3.65266 2.65071 4.10266C2.63071 4.60266 2.74071 5.18266 2.97071 5.83266C3.12071 6.24266 3.31071 6.65266 3.54071 7.07266C4.02071 6.41266 4.56071 5.78266 5.17071 5.17266C5.78071 4.57266 6.42071 4.02266 7.08071 3.55266ZM12.4607 7.08266C12.6907 6.66266 12.8807 6.24266 13.0307 5.84266C13.2707 5.19266 13.3807 4.61266 13.3507 4.11266C13.3307 3.65266 13.1907 3.30266 12.9507 3.06266C12.7107 2.82266 12.3607 2.68266 11.9007 2.66266C11.4007 2.64266 10.8307 2.74266 10.1707 2.98266C9.77071 3.12266 9.35071 3.31266 8.93071 3.55266C9.59071 4.03266 10.2207 4.57266 10.8307 5.18266C11.4407 5.78266 11.9807 6.42266 12.4607 7.08266ZM11.8907 8.00266C11.3907 8.74266 10.8007 9.44267 10.1207 10.1227C9.45071 10.8027 8.74071 11.3927 8.00071 11.8927C7.26071 11.3927 6.56071 10.8027 5.88071 10.1227C5.20071 9.45267 4.62071 8.74266 4.12071 8.00266C4.62071 7.26266 5.21071 6.56266 5.89071 5.88266C6.56071 5.21266 7.27071 4.62266 8.00071 4.12266C8.74071 4.62266 9.44071 5.21266 10.1207 5.89266C10.8007 6.56266 11.3907 7.27266 11.8907 8.00266ZM8.00071 9.00266C8.55071 9.00266 9.00071 8.55266 9.00071 8.00266C9.00071 7.45266 8.55071 7.00266 8.00071 7.00266C7.45071 7.00266 7.00071 7.45266 7.00071 8.00266C7.00071 8.55266 7.45071 9.00266 8.00071 9.00266ZM3.55071 8.93266C4.03071 9.59266 4.57071 10.2227 5.18071 10.8327C5.79071 11.4427 6.42071 11.9827 7.08071 12.4627C6.66071 12.6927 6.24071 12.8827 5.84071 13.0327C5.19071 13.2727 4.61071 13.3827 4.11071 13.3527C3.67071 13.3327 3.32071 13.2027 3.08071 12.9727C3.07071 12.9627 3.07071 12.9627 3.06071 12.9527C2.83071 12.7127 2.68071 12.3427 2.66071 11.9027C2.64071 11.4027 2.74071 10.8327 2.98071 10.1727C3.12071 9.77267 3.31071 9.35266 3.55071 8.93266ZM8.93071 12.4627C9.35071 12.6927 9.77071 12.8827 10.1707 13.0327C10.8207 13.2727 11.4007 13.3827 11.9007 13.3527C12.3607 13.3327 12.7107 13.1927 12.9507 12.9527C13.1807 12.7127 13.3307 12.3427 13.3507 11.9027C13.3707 11.4027 13.2707 10.8327 13.0307 10.1727C12.8807 9.76266 12.6907 9.35266 12.4607 8.93266C11.9807 9.59266 11.4407 10.2227 10.8307 10.8327C10.2207 11.4427 9.59071 11.9827 8.93071 12.4627Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>