From 8ce7e7d26d1be96394ab254cb0bd12f92ff8e976 Mon Sep 17 00:00:00 2001 From: matevip Date: Fri, 1 May 2026 10:58:15 +0800 Subject: [PATCH] feat(ui): agent integration of SkillIcon + SkillIconPicker --- .../components/channels/ChannelEditModal.vue | 3 +- .../src/composables/usePixelarticons.ts | 10 +++ mateclaw-ui/src/views/AgentContext.vue | 3 +- mateclaw-ui/src/views/Agents.vue | 69 +++++++++++++++++-- mateclaw-ui/src/views/ChatConsole.vue | 3 +- mateclaw-ui/src/views/Memory/index.vue | 3 +- mateclaw-ui/src/views/Sessions.vue | 3 +- mateclaw-ui/src/views/SkillMarket.vue | 2 +- 8 files changed, 84 insertions(+), 12 deletions(-) diff --git a/mateclaw-ui/src/components/channels/ChannelEditModal.vue b/mateclaw-ui/src/components/channels/ChannelEditModal.vue index e8cfd17c..d419ae77 100644 --- a/mateclaw-ui/src/components/channels/ChannelEditModal.vue +++ b/mateclaw-ui/src/components/channels/ChannelEditModal.vue @@ -42,7 +42,7 @@ @@ -440,6 +440,7 @@ import { useWeixinQrcodePoll } from '@/composables/channels/useWeixinQrcodePoll' import { useWecomBotAuth } from '@/composables/channels/useWecomBotAuth' import { useFeishuAppRegister } from '@/composables/channels/useFeishuAppRegister' import { useDingTalkAppRegister } from '@/composables/channels/useDingTalkAppRegister' +import { plainTextIcon } from '@/composables/usePixelarticons' interface Props { modelValue: boolean diff --git a/mateclaw-ui/src/composables/usePixelarticons.ts b/mateclaw-ui/src/composables/usePixelarticons.ts index 8046745e..eda9aaa8 100644 --- a/mateclaw-ui/src/composables/usePixelarticons.ts +++ b/mateclaw-ui/src/composables/usePixelarticons.ts @@ -54,6 +54,16 @@ export type ParsedIcon = | { kind: 'emoji'; value: string } | { kind: 'empty' } +/** + * Plain-text icon glyph for hosts that can't render components β€” chiefly + * ` @@ -209,6 +209,7 @@ import { ElMessage, ElMessageBox } from 'element-plus' import { agentApi, agentContextApi } from '@/api/index' import type { Agent, WorkspaceFile } from '@/types/index' import { useMarkdownRenderer } from '@/composables/useMarkdownRenderer' +import { plainTextIcon } from '@/composables/usePixelarticons' const { renderMarkdown } = useMarkdownRenderer() diff --git a/mateclaw-ui/src/views/Agents.vue b/mateclaw-ui/src/views/Agents.vue index c48bf950..170f0c51 100644 --- a/mateclaw-ui/src/views/Agents.vue +++ b/mateclaw-ui/src/views/Agents.vue @@ -42,7 +42,9 @@ :class="{ 'agent-card--disabled': !agent.enabled }" >
- {{ agent.icon || 'πŸ€–' }} + + +
+ + +
@@ -176,7 +185,13 @@
- +
@@ -233,7 +248,7 @@ :class="{ selected: selectedSkillIds.includes(skill.id) }" > - {{ skill.icon || '🧩' }} +
{{ skill.name }} {{ skill.description?.slice(0, 80) }} @@ -267,7 +282,7 @@ :class="{ selected: selectedToolNames.includes(tool.name) }" > - {{ tool.icon || 'πŸ”§' }} +
{{ tool.displayName || tool.name }} {{ tool.description?.slice(0, 80) }} @@ -328,6 +343,8 @@ import { useI18n } from 'vue-i18n' import { ElMessage, ElMessageBox } from 'element-plus' import { agentApi, agentBindingApi, modelApi, skillApi, toolApi, templateApi } from '@/api/index' import type { Agent } from '@/types/index' +import SkillIcon from '@/components/common/SkillIcon.vue' +import SkillIconPicker from '@/components/common/SkillIconPicker.vue' const router = useRouter() const { t } = useI18n() @@ -370,13 +387,17 @@ const defaultForm = (): Partial & { name: string; defaultThinkingLevel: s agentType: 'react', systemPrompt: '', maxIterations: 10, - icon: 'πŸ€–', + // Empty so SkillIcon's fallback (πŸ€–) shows instead of pinning a literal + // emoji into form.icon β€” otherwise the picker thinks the user picked + // the robot emoji explicitly and reopens on the Emoji tab. + icon: '', tags: '', enabled: true, defaultThinkingLevel: null, }) const form = ref(defaultForm()) +const iconPickerVisible = ref(false) const filteredAgents = computed(() => { let list = agents.value @@ -494,7 +515,7 @@ async function openEditModal(agent: Agent) { agentType: agent.agentType, systemPrompt: agent.systemPrompt || '', maxIterations: agent.maxIterations, - icon: agent.icon || 'πŸ€–', + icon: agent.icon || '', tags: agent.tags || '', enabled: agent.enabled, defaultThinkingLevel: (agent as any).defaultThinkingLevel || null, @@ -896,4 +917,40 @@ async function toggleAgent(agent: Agent) { .advanced-tools-count { padding: 1px 8px; background: var(--mc-primary-bg); color: var(--mc-primary); border-radius: 999px; font-size: 11px; font-weight: 700; } .advanced-tools-chevron { color: var(--mc-text-tertiary); font-size: 12px; } .advanced-tools-note { font-style: italic; color: var(--mc-text-tertiary); margin-top: 4px; } + +/* Icon picker trigger β€” replaces the old free-text icon input. Tile shape + * mirrors SkillMarket's identity-icon-row so the create/edit affordance + * is consistent across the app. */ +.icon-picker-trigger { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 12px; + border: 1px solid var(--mc-border); + border-radius: 8px; + background: var(--mc-bg-sunken); + cursor: pointer; + text-align: left; + transition: border-color 0.15s, background 0.15s; + width: 100%; +} +.icon-picker-trigger:hover { border-color: var(--mc-primary); background: var(--mc-bg-elevated); } +.icon-picker-trigger:focus-visible { outline: none; border-color: var(--mc-primary); box-shadow: 0 0 0 2px rgba(217,119,87,0.15); } +.icon-picker-trigger__label { + flex: 1; min-width: 0; + font-size: 13px; + color: var(--mc-text-primary); + font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.icon-picker-trigger__action { + flex-shrink: 0; + font-size: 11px; + font-weight: 600; + color: var(--mc-primary); + text-transform: uppercase; + letter-spacing: 0.04em; +} diff --git a/mateclaw-ui/src/views/ChatConsole.vue b/mateclaw-ui/src/views/ChatConsole.vue index 7e590814..8254e365 100644 --- a/mateclaw-ui/src/views/ChatConsole.vue +++ b/mateclaw-ui/src/views/ChatConsole.vue @@ -42,7 +42,7 @@ :class="{ active: String(agent.id) === String(selectedAgentId) }" @click="selectAgent(agent)" > - {{ agent.icon || 'πŸ€–' }} +
{{ agent.name }} {{ agent.description || agent.agentType }} @@ -312,6 +312,7 @@ import type { Conversation, Agent, ModelConfig, ProviderInfo, ActiveModelsInfo, // ε―Όε…₯η»„δ»ΆεŒ–η»„δ»Ά import MessageList from '@/components/chat/MessageList.vue' +import SkillIcon from '@/components/common/SkillIcon.vue' import ChatInput from '@/components/chat/ChatInput.vue' import StreamLoadingBar from '@/components/chat/StreamLoadingBar.vue' import TalkMode from '@/components/chat/TalkMode.vue' diff --git a/mateclaw-ui/src/views/Memory/index.vue b/mateclaw-ui/src/views/Memory/index.vue index 28445715..51a7f611 100644 --- a/mateclaw-ui/src/views/Memory/index.vue +++ b/mateclaw-ui/src/views/Memory/index.vue @@ -33,7 +33,7 @@ :class="{ active: agent.id === selectedAgentId }" @click="selectAgent(agent)" > - {{ agent.icon || 'πŸ€–' }} +
{{ agent.name }} {{ agent.description || agent.agentType }} @@ -184,6 +184,7 @@ import { ElMessage } from 'element-plus' import { http } from '@/api' import { useAgentStore } from '@/stores/useAgentStore' import { useMemoryStore, type DreamReportItem } from '@/stores/useMemoryStore' +import SkillIcon from '@/components/common/SkillIcon.vue' import MorningCard from './components/MorningCard.vue' import FactList from './components/FactList.vue' import MemoryBrowser from './components/MemoryBrowser.vue' diff --git a/mateclaw-ui/src/views/Sessions.vue b/mateclaw-ui/src/views/Sessions.vue index c606a794..77d565e0 100644 --- a/mateclaw-ui/src/views/Sessions.vue +++ b/mateclaw-ui/src/views/Sessions.vue @@ -45,7 +45,7 @@
- {{ session.agentIcon || 'πŸ€–' }} + {{ session.agentName || '-' }}
@@ -97,6 +97,7 @@ import { ElMessage, ElMessageBox } from 'element-plus' import { conversationApi } from '@/api/index' import { channelIconUrl, sourceLabel } from '@/utils/channelSource' import type { Conversation } from '@/types/index' +import SkillIcon from '@/components/common/SkillIcon.vue' const router = useRouter() const { t } = useI18n() diff --git a/mateclaw-ui/src/views/SkillMarket.vue b/mateclaw-ui/src/views/SkillMarket.vue index 47b9c453..72f8c6d6 100644 --- a/mateclaw-ui/src/views/SkillMarket.vue +++ b/mateclaw-ui/src/views/SkillMarket.vue @@ -525,7 +525,7 @@

{{ t('skills.detail.noEmployees') }}

  • - {{ agent.icon || 'πŸ€–' }} +
    {{ agent.name }}