feat(ui): add assistant status avatar
This commit is contained in:
parent
dd5e94b294
commit
ae5676cd30
@ -94,6 +94,7 @@ DEFAULT_PERSONALIZATION_CONFIG: Dict[str, Any] = {
|
|||||||
"silent_tool_disable": True, # 禁用工具时不向模型插入提示（默认开启）
|
"silent_tool_disable": True, # 禁用工具时不向模型插入提示（默认开启）
|
||||||
"enhanced_tool_display": True, # 增强工具显示
|
"enhanced_tool_display": True, # 增强工具显示
|
||||||
"compact_message_display": "full", # 简略消息显示：full-完整原始内容 / brief-一行概要
|
"compact_message_display": "full", # 简略消息显示：full-完整原始内容 / brief-一行概要
|
||||||
|
"show_status_avatar": True, # 是否显示助手状态形象
|
||||||
"stacked_hide_borders": False, # 堆叠块隐藏边线
|
"stacked_hide_borders": False, # 堆叠块隐藏边线
|
||||||
"show_git_status_bar": True, # 是否显示输入栏上方 Git 状态栏
|
"show_git_status_bar": True, # 是否显示输入栏上方 Git 状态栏
|
||||||
"versioning_restore_mode": "overwrite", # 版本回溯模式固定为 overwrite
|
"versioning_restore_mode": "overwrite", # 版本回溯模式固定为 overwrite
|
||||||
@ -433,6 +434,12 @@ def sanitize_personalization_payload(
|
|||||||
else:
|
else:
|
||||||
base["stacked_hide_borders"] = bool(base.get("stacked_hide_borders", False))
|
base["stacked_hide_borders"] = bool(base.get("stacked_hide_borders", False))
|
||||||
|
|
||||||
|
# 助手状态形象显示开关
|
||||||
|
if "show_status_avatar" in data:
|
||||||
|
base["show_status_avatar"] = bool(data.get("show_status_avatar"))
|
||||||
|
else:
|
||||||
|
base["show_status_avatar"] = bool(base.get("show_status_avatar", True))
|
||||||
|
|
||||||
# Git 状态栏显示开关
|
# Git 状态栏显示开关
|
||||||
if "show_git_status_bar" in data:
|
if "show_git_status_bar" in data:
|
||||||
base["show_git_status_bar"] = bool(data.get("show_git_status_bar"))
|
base["show_git_status_bar"] = bool(data.get("show_git_status_bar"))
|
||||||
|
|||||||
@ -222,6 +222,7 @@
|
|||||||
v-show="chatDisplayMode === 'chat'"
|
v-show="chatDisplayMode === 'chat'"
|
||||||
ref="messagesArea"
|
ref="messagesArea"
|
||||||
:messages="messages"
|
:messages="messages"
|
||||||
|
:avatar-status="avatarStatus"
|
||||||
:icon-style="iconStyle"
|
:icon-style="iconStyle"
|
||||||
:expanded-blocks="expandedBlocks"
|
:expanded-blocks="expandedBlocks"
|
||||||
:render-markdown="renderMarkdown"
|
:render-markdown="renderMarkdown"
|
||||||
@ -242,7 +243,7 @@
|
|||||||
<VirtualMonitorSurface v-if="chatDisplayMode === 'monitor'" />
|
<VirtualMonitorSurface v-if="chatDisplayMode === 'monitor'" />
|
||||||
|
|
||||||
<div v-if="blankHeroActive" class="blank-hero-overlay">
|
<div v-if="blankHeroActive" class="blank-hero-overlay">
|
||||||
<span class="icon icon-lg" :style="iconStyle('bot')" aria-hidden="true"></span>
|
<StatusAvatar v-if="showStatusAvatar" mode="idle" :size="58" tracking />
|
||||||
<p class="blank-hero-text">{{ blankWelcomeText }}</p>
|
<p class="blank-hero-text">{{ blankWelcomeText }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1134,7 +1134,10 @@ function setupLayoutDebugObservers() {
|
|||||||
layoutDebugObserver = new MutationObserver((mutations) => {
|
layoutDebugObserver = new MutationObserver((mutations) => {
|
||||||
const interesting = mutations.filter((m) => {
|
const interesting = mutations.filter((m) => {
|
||||||
if (!(m.target instanceof Element)) return false;
|
if (!(m.target instanceof Element)) return false;
|
||||||
const className = (m.target as HTMLElement).className || '';
|
const className =
|
||||||
|
typeof (m.target as HTMLElement).className === 'string'
|
||||||
|
? (m.target as HTMLElement).className
|
||||||
|
: m.target.getAttribute('class') || '';
|
||||||
return (
|
return (
|
||||||
m.type === 'attributes' &&
|
m.type === 'attributes' &&
|
||||||
(tracked.some((el) => el === m.target) ||
|
(tracked.some((el) => el === m.target) ||
|
||||||
|
|||||||
@ -9,6 +9,7 @@ import TokenDrawer from '../components/token/TokenDrawer.vue';
|
|||||||
import QuickMenu from '../components/input/QuickMenu.vue';
|
import QuickMenu from '../components/input/QuickMenu.vue';
|
||||||
import InputComposer from '../components/input/InputComposer.vue';
|
import InputComposer from '../components/input/InputComposer.vue';
|
||||||
import AppShell from '../components/shell/AppShell.vue';
|
import AppShell from '../components/shell/AppShell.vue';
|
||||||
|
import StatusAvatar from '../components/avatar/StatusAvatar.vue';
|
||||||
|
|
||||||
const PersonalizationDrawer = defineAsyncComponent(
|
const PersonalizationDrawer = defineAsyncComponent(
|
||||||
() => import('../components/personalization/PersonalizationDrawer.vue')
|
() => import('../components/personalization/PersonalizationDrawer.vue')
|
||||||
@ -57,6 +58,7 @@ export const appComponents = {
|
|||||||
QuickMenu,
|
QuickMenu,
|
||||||
InputComposer,
|
InputComposer,
|
||||||
AppShell,
|
AppShell,
|
||||||
|
StatusAvatar,
|
||||||
ImagePicker,
|
ImagePicker,
|
||||||
ConversationReviewDialog,
|
ConversationReviewDialog,
|
||||||
SubAgentActivityDialog,
|
SubAgentActivityDialog,
|
||||||
|
|||||||
@ -13,6 +13,45 @@ import { useFocusStore } from '../stores/focus';
|
|||||||
import { useUploadStore } from '../stores/upload';
|
import { useUploadStore } from '../stores/upload';
|
||||||
import { useMonitorStore } from '../stores/monitor';
|
import { useMonitorStore } from '../stores/monitor';
|
||||||
import { usePolicyStore } from '../stores/policy';
|
import { usePolicyStore } from '../stores/policy';
|
||||||
|
import { useSubAgentStore } from '../stores/subAgent';
|
||||||
|
import { useBackgroundCommandStore } from '../stores/backgroundCommand';
|
||||||
|
import { usePersonalizationStore } from '../stores/personalization';
|
||||||
|
import { getToolStatusText, getToolDescription } from '../utils/chatDisplay';
|
||||||
|
import { toolFaceKey } from '../utils/avatarFace';
|
||||||
|
|
||||||
|
// 取最后一段连续的 tool actions（对应模型一次并行调用的一批工具）
|
||||||
|
function getLatestToolSegment(actions) {
|
||||||
|
if (!Array.isArray(actions)) return [];
|
||||||
|
let last = -1;
|
||||||
|
for (let i = actions.length - 1; i >= 0; i--) {
|
||||||
|
if (actions[i]?.type === 'tool') {
|
||||||
|
last = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (actions[i]?.type === 'thinking') break;
|
||||||
|
}
|
||||||
|
if (last < 0) return [];
|
||||||
|
let start = last;
|
||||||
|
while (start > 0 && actions[start - 1]?.type === 'tool') start--;
|
||||||
|
return actions.slice(start, last + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const AVATAR_RUNNING_TOOL_STATUS = new Set([
|
||||||
|
'preparing',
|
||||||
|
'running',
|
||||||
|
'pending',
|
||||||
|
'queued',
|
||||||
|
'awaiting_approval',
|
||||||
|
'pending_approval',
|
||||||
|
'awaiting_user_answer'
|
||||||
|
]);
|
||||||
|
const AVATAR_TERMINAL_STATUS = new Set([
|
||||||
|
'completed',
|
||||||
|
'failed',
|
||||||
|
'timeout',
|
||||||
|
'terminated',
|
||||||
|
'cancelled'
|
||||||
|
]);
|
||||||
|
|
||||||
export const computed = {
|
export const computed = {
|
||||||
...mapWritableState(useConnectionStore, [
|
...mapWritableState(useConnectionStore, [
|
||||||
@ -211,6 +250,9 @@ export const computed = {
|
|||||||
composerHeroActive() {
|
composerHeroActive() {
|
||||||
return (this.blankHeroActive || this.blankHeroExiting) && !this.composerInteractionActive;
|
return (this.blankHeroActive || this.blankHeroExiting) && !this.composerInteractionActive;
|
||||||
},
|
},
|
||||||
|
showStatusAvatar() {
|
||||||
|
return usePersonalizationStore().form?.show_status_avatar !== false;
|
||||||
|
},
|
||||||
composerInteractionActive() {
|
composerInteractionActive() {
|
||||||
const hasText = !!(this.inputMessage && this.inputMessage.trim().length > 0);
|
const hasText = !!(this.inputMessage && this.inputMessage.trim().length > 0);
|
||||||
const hasImages = Array.isArray(this.selectedImages) && this.selectedImages.length > 0;
|
const hasImages = Array.isArray(this.selectedImages) && this.selectedImages.length > 0;
|
||||||
@ -234,5 +276,119 @@ export const computed = {
|
|||||||
width: w + 'px',
|
width: w + 'px',
|
||||||
gridTemplateRows: rows
|
gridTemplateRows: rows
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
// 状态形象：驱动 StatusAvatar（欢迎页 + 对话末尾指示器）
|
||||||
|
avatarStatus() {
|
||||||
|
const messages = Array.isArray(this.messages) ? this.messages : [];
|
||||||
|
const lastAssistant = (() => {
|
||||||
|
for (let i = messages.length - 1; i >= 0; i--) {
|
||||||
|
if (messages[i]?.role === 'assistant') return messages[i];
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})();
|
||||||
|
|
||||||
|
// 后台运行计数（用于 work 文案）
|
||||||
|
const subAgentStore = useSubAgentStore();
|
||||||
|
const bgStore = useBackgroundCommandStore();
|
||||||
|
const countRunning = (arr) =>
|
||||||
|
(Array.isArray(arr) ? arr : []).filter((item) => {
|
||||||
|
if (!item) return false;
|
||||||
|
const status = String(item?.status || '').toLowerCase();
|
||||||
|
return status ? !AVATAR_TERMINAL_STATUS.has(status) : true;
|
||||||
|
}).length;
|
||||||
|
const agentCount = countRunning(subAgentStore.subAgents);
|
||||||
|
const cmdCount = countRunning(bgStore.commands);
|
||||||
|
const bgText = (() => {
|
||||||
|
const parts = [];
|
||||||
|
if (cmdCount > 0) parts.push(`${cmdCount}个后台指令`);
|
||||||
|
if (agentCount > 0) parts.push(`${agentCount}个后台智能体`);
|
||||||
|
return parts.length ? `${parts.join('，')}运行中...` : '';
|
||||||
|
})();
|
||||||
|
|
||||||
|
const intentEnabled = !!usePersonalizationStore().form?.tool_intent_enabled;
|
||||||
|
|
||||||
|
// 1) 思考中
|
||||||
|
const isThinking =
|
||||||
|
!!lastAssistant &&
|
||||||
|
(lastAssistant.currentStreamingType === 'thinking' || lastAssistant.activeThinkingId != null);
|
||||||
|
|
||||||
|
// 2) 工具执行中（取最后一段并行工具，过滤未完成的）
|
||||||
|
let runningTools = [];
|
||||||
|
if (lastAssistant) {
|
||||||
|
const segment = getLatestToolSegment(lastAssistant.actions || []);
|
||||||
|
runningTools = segment.filter((a) => {
|
||||||
|
const s = String(a?.tool?.status || '').toLowerCase();
|
||||||
|
return a?.tool?.awaiting_content || !s || AVATAR_RUNNING_TOOL_STATUS.has(s);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (runningTools.length === 0) {
|
||||||
|
const mapActions = [
|
||||||
|
...Array.from(this.preparingTools?.values?.() || []),
|
||||||
|
...Array.from(this.activeTools?.values?.() || [])
|
||||||
|
];
|
||||||
|
runningTools = mapActions
|
||||||
|
.map((item) => (item?.type === 'tool' ? item : { type: 'tool', tool: item }))
|
||||||
|
.filter((a) => {
|
||||||
|
const tool = a?.tool;
|
||||||
|
if (!tool) return false;
|
||||||
|
const s = String(tool?.status || '').toLowerCase();
|
||||||
|
return tool?.awaiting_content || !s || AVATAR_RUNNING_TOOL_STATUS.has(s);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const hasMapTools =
|
||||||
|
(this.preparingTools && this.preparingTools.size > 0) ||
|
||||||
|
(this.activeTools && this.activeTools.size > 0);
|
||||||
|
|
||||||
|
// 3) 运行/等待态标志
|
||||||
|
const running =
|
||||||
|
this.streamingMessage ||
|
||||||
|
this.taskInProgress ||
|
||||||
|
this.waitingForSubAgent ||
|
||||||
|
this.waitingForBackgroundCommand ||
|
||||||
|
this.stopRequested ||
|
||||||
|
hasMapTools ||
|
||||||
|
runningTools.length > 0 ||
|
||||||
|
agentCount > 0 ||
|
||||||
|
cmdCount > 0;
|
||||||
|
|
||||||
|
// ---- 决策 ----
|
||||||
|
if (isThinking) {
|
||||||
|
return { mode: 'think', toolKeys: [], toolTexts: [], text: '思考中...', tracking: false };
|
||||||
|
}
|
||||||
|
if (runningTools.length > 0) {
|
||||||
|
const keys = runningTools.map((a) => toolFaceKey(a?.tool?.name));
|
||||||
|
const toolTexts = runningTools.map((a) => {
|
||||||
|
const tool = a?.tool;
|
||||||
|
if (!tool) return '';
|
||||||
|
const status = getToolStatusText(tool, { intentEnabled });
|
||||||
|
const desc = getToolDescription(tool);
|
||||||
|
return desc ? `${status} · ${desc}` : status;
|
||||||
|
});
|
||||||
|
let text = toolTexts[0] || '';
|
||||||
|
if (runningTools.length > 1) {
|
||||||
|
text = toolTexts[0] || `并行调用 ${runningTools.length} 个工具...`;
|
||||||
|
} else if (!text) {
|
||||||
|
const first = runningTools[0]?.tool;
|
||||||
|
const status = getToolStatusText(first, { intentEnabled });
|
||||||
|
const desc = getToolDescription(first);
|
||||||
|
text = desc ? `${status} · ${desc}` : status;
|
||||||
|
}
|
||||||
|
return { mode: 'tool', toolKeys: keys, toolTexts, text, tracking: false };
|
||||||
|
}
|
||||||
|
if (running) {
|
||||||
|
// 工作态：等 API / 后台运行 / 流式输出正文
|
||||||
|
let text = bgText;
|
||||||
|
if (!text) {
|
||||||
|
const awaitingMsg = lastAssistant && lastAssistant.awaitingFirstContent ? lastAssistant : null;
|
||||||
|
if (awaitingMsg) {
|
||||||
|
text =
|
||||||
|
(typeof awaitingMsg.generatingLabel === 'string' && awaitingMsg.generatingLabel.trim()) ||
|
||||||
|
'';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { mode: 'work', toolKeys: [], toolTexts: [], text, tracking: false };
|
||||||
|
}
|
||||||
|
// 空闲
|
||||||
|
return { mode: 'idle', toolKeys: [], toolTexts: [], text: '', tracking: true };
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -197,10 +197,14 @@ export const historyMethods = {
|
|||||||
lastRole: this.messages?.[this.messages.length - 1]?.role || null
|
lastRole: this.messages?.[this.messages.length - 1]?.role || null
|
||||||
});
|
});
|
||||||
|
|
||||||
// 滚动到底部
|
// 在 historyLoading 隐藏期内等待 Markdown/表格/卡片等动态高度稳定，再滚到底部。
|
||||||
this.$nextTick(() => {
|
// 注意：不要在显示后用多个 timeout 追底，否则会和滚动锚点/异步内容高度变化互相抢导致上下抖动。
|
||||||
|
if (typeof this.settleHistoryRenderAndScroll === 'function') {
|
||||||
|
await this.settleHistoryRenderAndScroll();
|
||||||
|
} else {
|
||||||
|
await this.$nextTick();
|
||||||
this.scrollHistoryToBottomInstant();
|
this.scrollHistoryToBottomInstant();
|
||||||
});
|
}
|
||||||
|
|
||||||
debugLog('历史对话内容显示完成');
|
debugLog('历史对话内容显示完成');
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@ -168,6 +168,44 @@ export const scrollMethods = {
|
|||||||
});
|
});
|
||||||
this.chatSetScrollState({ userScrolling: false });
|
this.chatSetScrollState({ userScrolling: false });
|
||||||
},
|
},
|
||||||
|
async settleHistoryRenderAndScroll() {
|
||||||
|
this._escapedByUserScroll = false;
|
||||||
|
const chatArea = this.getChatAreaController();
|
||||||
|
if (chatArea && typeof chatArea.stopStickScroll === 'function') {
|
||||||
|
chatArea.stopStickScroll();
|
||||||
|
}
|
||||||
|
const area = this.getMessagesAreaElement();
|
||||||
|
if (!area) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const nextFrame = () => new Promise((resolve) => requestAnimationFrame(resolve));
|
||||||
|
const sleep = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));
|
||||||
|
const jump = () => {
|
||||||
|
area.scrollTop = area.scrollHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
let lastHeight = -1;
|
||||||
|
let stableFrames = 0;
|
||||||
|
const startedAt = Date.now();
|
||||||
|
while (Date.now() - startedAt < 900 && stableFrames < 4) {
|
||||||
|
await nextFrame();
|
||||||
|
jump();
|
||||||
|
const height = area.scrollHeight;
|
||||||
|
if (Math.abs(height - lastHeight) <= 1) {
|
||||||
|
stableFrames += 1;
|
||||||
|
} else {
|
||||||
|
stableFrames = 0;
|
||||||
|
lastHeight = height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 给 show_html / 表格滚动壳等异步同步 DOM 一次短暂稳定窗口；仍在 historyLoading 隐藏期内完成。
|
||||||
|
await sleep(80);
|
||||||
|
jump();
|
||||||
|
await nextFrame();
|
||||||
|
jump();
|
||||||
|
this.chatSetScrollState({ userScrolling: false });
|
||||||
|
},
|
||||||
scrollToBottom() {
|
scrollToBottom() {
|
||||||
uiBounceTrace(
|
uiBounceTrace(
|
||||||
'ui.scrollToBottom:called',
|
'ui.scrollToBottom:called',
|
||||||
|
|||||||
616
static/src/components/avatar/StatusAvatar.vue
Normal file
616
static/src/components/avatar/StatusAvatar.vue
Normal file
@ -0,0 +1,616 @@
|
|||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
ref="svgRef"
|
||||||
|
class="status-avatar"
|
||||||
|
:class="`status-avatar--${props.mode || 'idle'}`"
|
||||||
|
:style="{ width: size + 'px', height: size + 'px' }"
|
||||||
|
viewBox="0 0 200 200"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<!-- flat-top 圆角正六边形外框 -->
|
||||||
|
<path
|
||||||
|
class="sa-frame"
|
||||||
|
d="M 175.959,107.000 Q 180.000,100.000 175.959,93.000 L 144.041,37.718 Q 140.000,30.718 131.917,30.718 L 68.083,30.718 Q 60.000,30.718 55.959,37.718 L 24.041,93.000 Q 20.000,100.000 24.041,107.000 L 55.959,162.282 Q 60.000,169.282 68.083,169.282 L 131.917,169.282 Q 140.000,169.282 144.041,162.282 Z"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<defs>
|
||||||
|
<clipPath :id="clipId">
|
||||||
|
<path d="M 180,100 L 140,30.718 L 60,30.718 L 20,100 L 60,169.282 L 140,169.282 Z" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<g class="sa-face" ref="faceRef">
|
||||||
|
<!-- 眼睛组：idle 眼睛 与 work 提示符 互相 morph -->
|
||||||
|
<g class="sa-fc sa-shared" :class="{ hidden: !sharedVisible }">
|
||||||
|
<path class="sa-eye" ref="eyeLeftRef" d="M 0,0 Q 8.5,0 17,0 Q 25.5,0 34,0 Q 25.5,0 17,0 Q 8.5,0 0,0" />
|
||||||
|
<path class="sa-eye" ref="eyeRightRef" d="M 0,0 Q 8.5,0 17,0 Q 25.5,0 34,0 Q 25.5,0 17,0 Q 8.5,0 0,0" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 思考：三个大点 -->
|
||||||
|
<g class="sa-fc sa-icon" :class="{ active: activeFaceKey === 'think' }">
|
||||||
|
<circle class="sa-think-dot" cx="80" cy="100" r="7" />
|
||||||
|
<circle class="sa-think-dot" cx="100" cy="100" r="7" />
|
||||||
|
<circle class="sa-think-dot" cx="120" cy="100" r="7" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 子智能体：六边形分裂-聚合 -->
|
||||||
|
<g class="sa-fc sa-icon" :class="{ active: activeFaceKey === 'subagent' }" :clip-path="`url(#${clipId})`">
|
||||||
|
<g class="sa-sub-scene">
|
||||||
|
<line class="sa-sub-ray" x1="180" y1="100" x2="140" y2="100" />
|
||||||
|
<line class="sa-sub-ray" x1="140" y1="30.718" x2="120" y2="65.359" />
|
||||||
|
<line class="sa-sub-ray" x1="60" y1="30.718" x2="80" y2="65.359" />
|
||||||
|
<line class="sa-sub-ray" x1="20" y1="100" x2="60" y2="100" />
|
||||||
|
<line class="sa-sub-ray" x1="60" y1="169.282" x2="80" y2="134.641" />
|
||||||
|
<line class="sa-sub-ray" x1="140" y1="169.282" x2="120" y2="134.641" />
|
||||||
|
<path class="sa-sub-hex" d="M 137.9795,103.5 Q 140,100 137.9795,96.5 L 122.0205,68.859 Q 120,65.359 115.9585,65.359 L 84.0415,65.359 Q 80,65.359 77.9795,68.859 L 62.0205,96.5 Q 60,100 62.0205,103.5 L 77.9795,131.141 Q 80,134.641 84.0415,134.641 L 115.9585,134.641 Q 120,134.641 122.0205,131.141 Z" />
|
||||||
|
<g class="sa-sub-eyes">
|
||||||
|
<line class="sa-sub-eye" x1="0" y1="0" x2="11" y2="0" style="transform: translate(92px, 92px) rotate(90deg);" />
|
||||||
|
<line class="sa-sub-eye" x1="0" y1="0" x2="11" y2="0" style="transform: translate(108px, 92px) rotate(90deg);" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- 注册表工具 face：动态渲染 -->
|
||||||
|
<g
|
||||||
|
v-for="tool in TOOLS"
|
||||||
|
:key="tool.key"
|
||||||
|
class="sa-fc sa-icon"
|
||||||
|
:class="{ active: activeFaceKey === tool.key }"
|
||||||
|
v-html="buildFaceInner(tool)"
|
||||||
|
></g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
|
||||||
|
|
||||||
|
// mode: 'idle' | 'work' | 'think' | 'tool'
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
mode?: string;
|
||||||
|
toolKeys?: string[];
|
||||||
|
tracking?: boolean;
|
||||||
|
size?: number;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
mode: 'idle',
|
||||||
|
toolKeys: () => [],
|
||||||
|
tracking: false,
|
||||||
|
size: 30
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(event: 'active-index', index: number): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// 每个实例独立的 clipPath id，避免多实例冲突
|
||||||
|
const clipId = `sa-hex-clip-${Math.random().toString(36).slice(2, 9)}`;
|
||||||
|
|
||||||
|
const svgRef = ref<SVGSVGElement | null>(null);
|
||||||
|
const faceRef = ref<SVGGElement | null>(null);
|
||||||
|
const eyeLeftRef = ref<SVGPathElement | null>(null);
|
||||||
|
const eyeRightRef = ref<SVGPathElement | null>(null);
|
||||||
|
|
||||||
|
// 当前激活的独立 face（think / 工具 key）；为 null 表示显示 shared（idle/work）
|
||||||
|
const activeFaceKey = ref<string | null>(null);
|
||||||
|
const sharedVisible = ref(true);
|
||||||
|
|
||||||
|
// ---- 工具 face 注册表（与 demo 一致）----
|
||||||
|
interface ToolDef {
|
||||||
|
key: string;
|
||||||
|
motion: string;
|
||||||
|
scale?: number;
|
||||||
|
svg?: string;
|
||||||
|
raw?: string;
|
||||||
|
}
|
||||||
|
const TOOLS: ToolDef[] = [
|
||||||
|
{ key: 'search', motion: 'wiggle', svg: '<path class="sa-inner" d="m21 21-4.34-4.34"/><circle class="sa-inner" cx="11" cy="11" r="8"/>' },
|
||||||
|
{ key: 'webpage', motion: 'bob', svg: '<circle class="sa-inner" cx="12" cy="12" r="10"/><path class="sa-inner" d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><line class="sa-inner" x1="2" x2="22" y1="12" y2="12"/>' },
|
||||||
|
{ key: 'write', motion: 'wiggle', svg: '<path class="sa-inner" d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path class="sa-inner" d="m15 5 4 4"/>' },
|
||||||
|
{ key: 'read', motion: 'bob', svg: '<path class="sa-inner" d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/>' },
|
||||||
|
{ key: 'save', motion: 'bob', svg: '<path class="sa-inner" d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path class="sa-inner" d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path class="sa-inner" d="M7 3v4a1 1 0 0 0 1 1h7"/>' },
|
||||||
|
{ key: 'camera', motion: 'bob', svg: '<path class="sa-inner" d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"/><circle class="sa-inner" cx="12" cy="13" r="3"/>' },
|
||||||
|
{ key: 'monitor', motion: 'bob', svg: '<rect class="sa-inner" width="20" height="14" x="2" y="3" rx="2"/><line class="sa-inner" x1="8" x2="16" y1="21" y2="21"/><line class="sa-inner" x1="12" x2="12" y1="17" y2="21"/>' },
|
||||||
|
{ key: 'keyboard', motion: 'bob', svg: '<path class="sa-inner" d="M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10m-9-4h.01"/><rect class="sa-inner" width="20" height="16" x="2" y="4" rx="2"/>' },
|
||||||
|
{ key: 'clipboard', motion: 'bob', svg: '<rect class="sa-inner" width="8" height="4" x="8" y="2" rx="1" ry="1"/><path class="sa-inner" d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>' },
|
||||||
|
{ key: 'command', motion: 'bob', svg: '<path class="sa-inner" d="M12 19h8"/><path class="sa-inner" d="m4 17 6-6-6-6"/>' },
|
||||||
|
{ key: 'brain', motion: 'bob', svg: '<path class="sa-inner" d="M12 18V5"/><path class="sa-inner" d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path class="sa-inner" d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path class="sa-inner" d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path class="sa-inner" d="M18 18a4 4 0 0 0 2-7.464"/><path class="sa-inner" d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path class="sa-inner" d="M6 18a4 4 0 0 1-2-7.464"/><path class="sa-inner" d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/>' },
|
||||||
|
{ key: 'notebook', motion: 'bob', svg: '<path class="sa-inner" d="M2 6h4m-4 4h4m-4 4h4m-4 4h4"/><rect class="sa-inner" width="16" height="20" x="4" y="2" rx="2"/><path class="sa-inner" d="M16 2v20"/>' },
|
||||||
|
{ key: 'note', motion: 'bob', svg: '<path class="sa-inner" d="M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z"/><path class="sa-inner" d="M15 3v5a1 1 0 0 0 1 1h5"/>' },
|
||||||
|
{ key: 'check', motion: 'bob', svg: '<path class="sa-inner" d="M20 6 9 17l-5-5"/>' },
|
||||||
|
{ key: 'skill', motion: 'bob', svg: '<path class="sa-inner" d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path class="sa-inner" d="M20 2v4"/><path class="sa-inner" d="M22 4h-4"/><circle class="sa-inner" cx="4" cy="20" r="2"/>' },
|
||||||
|
{ key: 'persona', motion: 'bob', svg: '<path class="sa-inner" d="M11.5 15H7a4 4 0 0 0-4 4v2m18.378-4.374a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle class="sa-inner" cx="10" cy="7" r="4"/>' },
|
||||||
|
{ key: 'mcp', motion: 'bob', raw: '<g transform="translate(100,100) scale(0.30) translate(-90,-90)"><path class="sa-inner" style="stroke-width:16.8" d="M18 84.8528L85.8822 16.9706C95.2548 7.59798 110.451 7.59798 119.823 16.9706C129.196 26.3431 129.196 41.5391 119.823 50.9117L68.5581 102.177"/><path class="sa-inner" style="stroke-width:16.8" d="M69.2652 101.47L119.823 50.9117C129.196 41.5391 144.392 41.5391 153.765 50.9117L154.118 51.2652C163.491 60.6378 163.491 75.8338 154.118 85.2063L92.7248 146.6C89.6006 149.724 89.6006 154.789 92.7248 157.913L105.331 170.52"/><path class="sa-inner" style="stroke-width:16.8" d="M102.853 33.9411L52.6482 84.1457C43.2756 93.5183 43.2756 108.714 52.6482 118.087C62.0208 127.459 77.2167 127.459 86.5893 118.087L136.794 67.8822"/></g>' },
|
||||||
|
{ key: 'ask', motion: 'bob', scale: 3.7, svg: '<path class="sa-inner" style="stroke-width:1.6" d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path class="sa-inner" style="stroke-width:1.6" d="M12 17h.01"/>' },
|
||||||
|
{ key: 'sleep', motion: 'special', raw: '<g class="sa-z z3"><text x="130" y="94" text-anchor="middle" font-size="34" font-weight="600">Z</text></g><g class="sa-z z2"><text x="100" y="109" text-anchor="middle" font-size="26" font-weight="600">Z</text></g><g class="sa-z z1"><text x="70" y="123" text-anchor="middle" font-size="18" font-weight="600">Z</text></g>' }
|
||||||
|
];
|
||||||
|
|
||||||
|
function buildFaceInner(tool: ToolDef): string {
|
||||||
|
if (tool.raw) {
|
||||||
|
return tool.motion === 'bob' ? `<g class="sa-bob">${tool.raw}</g>` : tool.raw;
|
||||||
|
}
|
||||||
|
const s = tool.scale || 2.17;
|
||||||
|
const scaled = `<g transform="translate(100, 100) scale(${s}) translate(-12, -12)">${tool.svg}</g>`;
|
||||||
|
const motionClass = tool.motion === 'wiggle' ? 'sa-wiggle' : 'sa-bob';
|
||||||
|
return `<g class="${motionClass}">${scaled}</g>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 眼睛 morph（idle 竖线 ↔ work 提示符），照搬 demo ----
|
||||||
|
const EYE_SHAPES: Record<string, string> = {
|
||||||
|
idle: 'M 0,-11 Q 0,-5.5 0,0 Q 0,5.5 0,11 Q 0,5.5 0,0 Q 0,-5.5 0,-11',
|
||||||
|
work: 'M 0,0 Q 8.5,0 17,0 Q 25.5,0 34,0 Q 25.5,0 17,0 Q 8.5,0 0,0'
|
||||||
|
};
|
||||||
|
const EYE_LEFT_ORIGIN = { x: 84, y: 96 };
|
||||||
|
const EYE_RIGHT_ORIGIN = { x: 116, y: 96 };
|
||||||
|
const WORK_ORIGIN = { x: 117, y: 100 };
|
||||||
|
const WORK_ROTATION_LEFT = 150;
|
||||||
|
const WORK_ROTATION_RIGHT = 210;
|
||||||
|
|
||||||
|
let currentEyeShape = 'idle';
|
||||||
|
|
||||||
|
function cubicBezier(p1x: number, p1y: number, p2x: number, p2y: number) {
|
||||||
|
const cx = 3 * p1x;
|
||||||
|
const bx = 3 * (p2x - p1x) - cx;
|
||||||
|
const ax = 1 - cx - bx;
|
||||||
|
const cy = 3 * p1y;
|
||||||
|
const by = 3 * (p2y - p1y) - cy;
|
||||||
|
const ay = 1 - cy - by;
|
||||||
|
const sampleCurveX = (t: number) => ((ax * t + bx) * t + cx) * t;
|
||||||
|
return (t: number) => {
|
||||||
|
let x = t;
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
const x2 = sampleCurveX(x) - t;
|
||||||
|
if (Math.abs(x2) < 1e-6) return ((ay * x + by) * x + cy) * x;
|
||||||
|
const d2 = (3 * ax * x + 2 * bx) * x + cx;
|
||||||
|
if (Math.abs(d2) < 1e-6) break;
|
||||||
|
x -= x2 / d2;
|
||||||
|
}
|
||||||
|
return ((ay * x + by) * x + cy) * x;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const easeOut = cubicBezier(0.22, 1, 0.36, 1);
|
||||||
|
|
||||||
|
function parsePathNumbers(d: string): number[] {
|
||||||
|
return (d.match(/[-\d.]+/g) || []).map(Number);
|
||||||
|
}
|
||||||
|
function buildPath(n: number[]): string {
|
||||||
|
return `M ${n[0]},${n[1]} Q ${n[2]},${n[3]} ${n[4]},${n[5]} Q ${n[6]},${n[7]} ${n[8]},${n[9]} Q ${n[10]},${n[11]} ${n[12]},${n[13]} Q ${n[14]},${n[15]} ${n[16]},${n[17]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const morphRaf = new Map<SVGPathElement, number>();
|
||||||
|
function morphShape(eye: SVGPathElement | null, fromShape: string, toShape: string, duration = 550) {
|
||||||
|
if (!eye) return;
|
||||||
|
eye.setAttribute('d', EYE_SHAPES[fromShape]);
|
||||||
|
const fromNums = parsePathNumbers(EYE_SHAPES[fromShape]);
|
||||||
|
const toNums = parsePathNumbers(EYE_SHAPES[toShape]);
|
||||||
|
const startTime = performance.now();
|
||||||
|
const prev = morphRaf.get(eye);
|
||||||
|
if (prev) cancelAnimationFrame(prev);
|
||||||
|
const step = (now: number) => {
|
||||||
|
const progress = Math.min((now - startTime) / duration, 1);
|
||||||
|
const eased = easeOut(progress);
|
||||||
|
const cur = fromNums.map((v, i) => v + (toNums[i] - v) * eased);
|
||||||
|
eye.setAttribute('d', buildPath(cur));
|
||||||
|
if (progress < 1) {
|
||||||
|
morphRaf.set(eye, requestAnimationFrame(step));
|
||||||
|
} else {
|
||||||
|
morphRaf.delete(eye);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
morphRaf.set(eye, requestAnimationFrame(step));
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorkTransform() {
|
||||||
|
if (eyeLeftRef.value)
|
||||||
|
eyeLeftRef.value.style.transform = `translate(${WORK_ORIGIN.x}px, ${WORK_ORIGIN.y}px) rotate(${WORK_ROTATION_LEFT}deg)`;
|
||||||
|
if (eyeRightRef.value)
|
||||||
|
eyeRightRef.value.style.transform = `translate(${WORK_ORIGIN.x}px, ${WORK_ORIGIN.y}px) rotate(${WORK_ROTATION_RIGHT}deg)`;
|
||||||
|
}
|
||||||
|
function applyIdleTransform() {
|
||||||
|
if (eyeLeftRef.value)
|
||||||
|
eyeLeftRef.value.style.transform = `translate(${EYE_LEFT_ORIGIN.x}px, ${EYE_LEFT_ORIGIN.y}px)`;
|
||||||
|
if (eyeRightRef.value)
|
||||||
|
eyeRightRef.value.style.transform = `translate(${EYE_RIGHT_ORIGIN.x}px, ${EYE_RIGHT_ORIGIN.y}px)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 眼睛鼠标追踪 ----
|
||||||
|
let mouseX = 0;
|
||||||
|
let mouseY = 0;
|
||||||
|
let eyeOffsetX = 0;
|
||||||
|
let eyeOffsetY = 0;
|
||||||
|
let trackRaf: number | null = null;
|
||||||
|
|
||||||
|
function onMouseMove(e: MouseEvent) {
|
||||||
|
mouseX = e.clientX;
|
||||||
|
mouseY = e.clientY;
|
||||||
|
}
|
||||||
|
function stopTracking() {
|
||||||
|
if (trackRaf) cancelAnimationFrame(trackRaf);
|
||||||
|
trackRaf = null;
|
||||||
|
if (faceRef.value) faceRef.value.style.transform = 'translate(0px, 0px)';
|
||||||
|
}
|
||||||
|
function trackEyes() {
|
||||||
|
if (!(props.tracking && props.mode === 'idle') || !svgRef.value) {
|
||||||
|
stopTracking();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const rect = svgRef.value.getBoundingClientRect();
|
||||||
|
const centerX = rect.left + rect.width / 2;
|
||||||
|
const centerY = rect.top + rect.height / 2;
|
||||||
|
const dx = mouseX - centerX;
|
||||||
|
const dy = mouseY - centerY;
|
||||||
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
const angle = Math.atan2(dy, dx);
|
||||||
|
const factor = Math.min(distance / 180, 1);
|
||||||
|
const targetX = Math.cos(angle) * 10 * factor;
|
||||||
|
const targetY = Math.sin(angle) * 10 * factor;
|
||||||
|
eyeOffsetX += (targetX - eyeOffsetX) * 0.15;
|
||||||
|
eyeOffsetY += (targetY - eyeOffsetY) * 0.15;
|
||||||
|
if (faceRef.value) faceRef.value.style.transform = `translate(${eyeOffsetX}px, ${eyeOffsetY}px)`;
|
||||||
|
trackRaf = requestAnimationFrame(trackEyes);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 并行工具轮播 ----
|
||||||
|
let carouselTimer: number | null = null;
|
||||||
|
let faceSwitchTimer: number | null = null;
|
||||||
|
let carouselIdx = 0;
|
||||||
|
function stopCarousel() {
|
||||||
|
if (carouselTimer) clearInterval(carouselTimer);
|
||||||
|
carouselTimer = null;
|
||||||
|
}
|
||||||
|
function stopFaceSwitchTimer() {
|
||||||
|
if (faceSwitchTimer) clearTimeout(faceSwitchTimer);
|
||||||
|
faceSwitchTimer = null;
|
||||||
|
}
|
||||||
|
function setIconFace(key: string, animated = true) {
|
||||||
|
const fromShared = sharedVisible.value && !activeFaceKey.value;
|
||||||
|
sharedVisible.value = false;
|
||||||
|
if (!animated || activeFaceKey.value === key) {
|
||||||
|
activeFaceKey.value = key;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (fromShared) {
|
||||||
|
activeFaceKey.value = null;
|
||||||
|
stopFaceSwitchTimer();
|
||||||
|
faceSwitchTimer = window.setTimeout(() => {
|
||||||
|
activeFaceKey.value = key;
|
||||||
|
faceSwitchTimer = null;
|
||||||
|
}, 160);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!activeFaceKey.value) {
|
||||||
|
activeFaceKey.value = key;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
activeFaceKey.value = null;
|
||||||
|
stopFaceSwitchTimer();
|
||||||
|
faceSwitchTimer = window.setTimeout(() => {
|
||||||
|
activeFaceKey.value = key;
|
||||||
|
faceSwitchTimer = null;
|
||||||
|
}, 160);
|
||||||
|
}
|
||||||
|
function startCarousel(keys: string[]) {
|
||||||
|
stopCarousel();
|
||||||
|
stopFaceSwitchTimer();
|
||||||
|
carouselIdx = 0;
|
||||||
|
setIconFace(keys[0]);
|
||||||
|
emit('active-index', carouselIdx);
|
||||||
|
if (keys.length < 2) return;
|
||||||
|
carouselTimer = window.setInterval(() => {
|
||||||
|
carouselIdx = (carouselIdx + 1) % keys.length;
|
||||||
|
setIconFace(keys[carouselIdx]);
|
||||||
|
emit('active-index', carouselIdx);
|
||||||
|
}, 1450);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- 状态应用 ----
|
||||||
|
function applyState() {
|
||||||
|
const mode = props.mode;
|
||||||
|
if (mode === 'tool') {
|
||||||
|
stopTracking();
|
||||||
|
const keys = (props.toolKeys || []).filter(Boolean);
|
||||||
|
startCarousel(keys.length ? keys : ['command']);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
stopCarousel();
|
||||||
|
stopFaceSwitchTimer();
|
||||||
|
if (mode === 'think') {
|
||||||
|
stopTracking();
|
||||||
|
setIconFace('think');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// idle / work：显示 shared 眼睛并 morph
|
||||||
|
const target = mode === 'work' ? 'work' : 'idle';
|
||||||
|
const fromIcon = !!activeFaceKey.value;
|
||||||
|
activeFaceKey.value = null;
|
||||||
|
const revealShared = () => {
|
||||||
|
sharedVisible.value = true;
|
||||||
|
morphShape(eyeLeftRef.value, currentEyeShape, target);
|
||||||
|
morphShape(eyeRightRef.value, currentEyeShape, target);
|
||||||
|
if (target === 'work') applyWorkTransform();
|
||||||
|
else applyIdleTransform();
|
||||||
|
currentEyeShape = target;
|
||||||
|
};
|
||||||
|
if (fromIcon) {
|
||||||
|
faceSwitchTimer = window.setTimeout(() => {
|
||||||
|
revealShared();
|
||||||
|
faceSwitchTimer = null;
|
||||||
|
}, 160);
|
||||||
|
} else {
|
||||||
|
revealShared();
|
||||||
|
}
|
||||||
|
if (target === 'idle' && props.tracking) {
|
||||||
|
stopTracking();
|
||||||
|
trackEyes();
|
||||||
|
} else {
|
||||||
|
stopTracking();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => [props.mode, props.toolKeys, props.tracking], () => applyState(), { deep: true });
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
applyIdleTransform();
|
||||||
|
document.addEventListener('mousemove', onMouseMove);
|
||||||
|
applyState();
|
||||||
|
});
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
document.removeEventListener('mousemove', onMouseMove);
|
||||||
|
stopTracking();
|
||||||
|
stopCarousel();
|
||||||
|
stopFaceSwitchTimer();
|
||||||
|
morphRaf.forEach((id) => cancelAnimationFrame(id));
|
||||||
|
morphRaf.clear();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.status-avatar {
|
||||||
|
display: block;
|
||||||
|
overflow: visible;
|
||||||
|
color: currentColor;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sa-frame {
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 10;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
transform-origin: 100px 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-avatar--idle .sa-frame {
|
||||||
|
stroke-width: 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sa-face {
|
||||||
|
transform-origin: 100px 100px;
|
||||||
|
transition: transform 0.08s linear;
|
||||||
|
}
|
||||||
|
.sa-fc {
|
||||||
|
transform-origin: 100px 100px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.sa-shared {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
}
|
||||||
|
.sa-shared.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.sa-icon {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.92);
|
||||||
|
transition:
|
||||||
|
opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
|
||||||
|
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
}
|
||||||
|
.sa-icon.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 内部图标线条（比外框稍细），用 :deep 因为 v-html 内容不受 scoped 影响
|
||||||
|
:deep(.sa-inner) {
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 2.4;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sa-eye {
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 8;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-avatar--idle .sa-eye {
|
||||||
|
stroke-width: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sa-think-dot {
|
||||||
|
fill: currentColor;
|
||||||
|
animation: sa-think-wave 1.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sa-think-dot:nth-child(1) {
|
||||||
|
animation-delay: -0.48s;
|
||||||
|
}
|
||||||
|
.sa-think-dot:nth-child(2) {
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
.sa-think-dot:nth-child(3) {
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
@keyframes sa-think-wave {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.sa-wiggle) {
|
||||||
|
animation: sa-wiggle 1.8s ease-in-out infinite;
|
||||||
|
transform-origin: 100px 100px;
|
||||||
|
}
|
||||||
|
@keyframes sa-wiggle {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateX(-4px) rotate(-6deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(4px) rotate(6deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.sa-bob) {
|
||||||
|
animation: sa-bob 2.4s ease-in-out infinite;
|
||||||
|
transform-origin: 100px 100px;
|
||||||
|
}
|
||||||
|
@keyframes sa-bob {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-9px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// sleep 三个 Z 各自原地晃动，错峰
|
||||||
|
:deep(.sa-z) {
|
||||||
|
animation: sa-z-wiggle 1.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
:deep(.sa-z.z1) {
|
||||||
|
transform-origin: 70px 117px;
|
||||||
|
animation-delay: -0.9s;
|
||||||
|
}
|
||||||
|
:deep(.sa-z.z2) {
|
||||||
|
transform-origin: 100px 100px;
|
||||||
|
animation-delay: -0.45s;
|
||||||
|
}
|
||||||
|
:deep(.sa-z.z3) {
|
||||||
|
transform-origin: 130px 83px;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
:deep(.sa-z text) {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
@keyframes sa-z-wiggle {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: rotate(-9deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotate(9deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 子智能体
|
||||||
|
.sa-sub-scene {
|
||||||
|
transform-origin: 100px 100px;
|
||||||
|
animation: sa-sub-zoom 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sa-sub-ray,
|
||||||
|
.sa-sub-hex,
|
||||||
|
.sa-sub-eye {
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
.sa-sub-ray {
|
||||||
|
stroke-dasharray: 40;
|
||||||
|
stroke-dashoffset: 40;
|
||||||
|
opacity: 1;
|
||||||
|
animation: sa-sub-ray 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sa-sub-hex {
|
||||||
|
opacity: 0;
|
||||||
|
animation: sa-sub-hex 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.sa-sub-eyes {
|
||||||
|
opacity: 0;
|
||||||
|
transform-origin: 100px 100px;
|
||||||
|
animation: sa-sub-eyes 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes sa-sub-ray {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: 40;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
40%,
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes sa-sub-hex {
|
||||||
|
0%,
|
||||||
|
15% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes sa-sub-eyes {
|
||||||
|
0%,
|
||||||
|
40% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes sa-sub-zoom {
|
||||||
|
0%,
|
||||||
|
50% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
99.5% {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,14 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="messages-area messages-area--stick" ref="scrollRef">
|
<div
|
||||||
|
class="messages-area messages-area--stick"
|
||||||
|
:class="{ 'messages-area--render-pending': renderPending }"
|
||||||
|
ref="scrollRef"
|
||||||
|
>
|
||||||
<div class="messages-flow" ref="contentRef">
|
<div class="messages-flow" ref="contentRef">
|
||||||
<div
|
<div
|
||||||
v-for="(msg, index) in filteredMessages"
|
v-for="(msg, index) in filteredMessages || []"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="message-block"
|
class="message-block"
|
||||||
:class="{
|
:class="{
|
||||||
'message-block--compact-user': getMessageVisibility(msg) === 'compact',
|
'message-block--compact-user': getMessageVisibility(msg) === 'compact',
|
||||||
'message-block--sub-agent-notice': isSubAgentNoticeOnlyMessage(msg),
|
'message-block--sub-agent-notice': isSubAgentNoticeOnlyMessage(msg),
|
||||||
'message-block--before-sub-agent-notice': isFollowedBySubAgentNotice(index)
|
'message-block--before-sub-agent-notice': isFollowedBySubAgentNotice(index),
|
||||||
|
'message-block--last': index === (filteredMessages || []).length - 1
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div v-if="msg.role === 'user'" class="user-message" :class="{ 'user-message--compact': getMessageVisibility(msg) === 'compact', 'user-message--brief': isBriefCompactMessage(msg) }">
|
<div v-if="msg.role === 'user'" class="user-message" :class="{ 'user-message--compact': getMessageVisibility(msg) === 'compact', 'user-message--brief': isBriefCompactMessage(msg) }">
|
||||||
@ -102,33 +107,11 @@
|
|||||||
"
|
"
|
||||||
class="message-header icon-label"
|
class="message-header icon-label"
|
||||||
>
|
>
|
||||||
<span class="icon icon-sm" :style="iconStyleSafe('bot')" aria-hidden="true"></span>
|
|
||||||
<span>{{ aiAssistantName }}</span>
|
<span>{{ aiAssistantName }}</span>
|
||||||
<span v-if="assistantWorkLabel(index)" class="assistant-work-status">{{
|
<span v-if="assistantWorkLabel(index)" class="assistant-work-status">{{
|
||||||
assistantWorkLabel(index)
|
assistantWorkLabel(index)
|
||||||
}}</span>
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
v-if="msg.awaitingFirstContent"
|
|
||||||
class="action-item streaming-content immediate-show assistant-generating-block"
|
|
||||||
>
|
|
||||||
<div class="text-output">
|
|
||||||
<div
|
|
||||||
class="text-content assistant-generating-placeholder"
|
|
||||||
role="status"
|
|
||||||
aria-live="polite"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-for="(letter, letterIndex) in getGeneratingLetters(msg)"
|
|
||||||
:key="letterIndex"
|
|
||||||
class="assistant-generating-letter"
|
|
||||||
:style="{ animationDelay: `${letterIndex * 0.08}s` }"
|
|
||||||
>
|
|
||||||
{{ letter }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template v-if="blockDisplayMode === 'minimal'">
|
<template v-if="blockDisplayMode === 'minimal'">
|
||||||
<MinimalBlocks
|
<MinimalBlocks
|
||||||
v-if="hasRenderableAssistantActions(msg.actions || [])"
|
v-if="hasRenderableAssistantActions(msg.actions || [])"
|
||||||
@ -636,6 +619,38 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="showStatusAvatar && (filteredMessages || []).length > 0"
|
||||||
|
ref="statusAvatarRef"
|
||||||
|
class="conversation-status-avatar"
|
||||||
|
role="status"
|
||||||
|
aria-live="polite"
|
||||||
|
>
|
||||||
|
<StatusAvatar
|
||||||
|
:mode="avatarStatusSafe.mode"
|
||||||
|
:tool-keys="avatarStatusSafe.toolKeys"
|
||||||
|
:tracking="avatarStatusSafe.tracking"
|
||||||
|
:size="34"
|
||||||
|
@active-index="handleStatusAvatarActiveIndex"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
v-if="statusAvatarText"
|
||||||
|
class="conversation-status-avatar__text"
|
||||||
|
:class="{ 'conversation-status-avatar__text--animated': statusAvatarTextAnimated }"
|
||||||
|
>
|
||||||
|
<template v-if="statusAvatarTextAnimated">
|
||||||
|
<span
|
||||||
|
v-for="(letter, letterIndex) in statusAvatarLetters"
|
||||||
|
:key="`${letter}-${letterIndex}`"
|
||||||
|
class="conversation-status-avatar__letter"
|
||||||
|
:style="{ animationDelay: `${letterIndex * 0.08}s` }"
|
||||||
|
>
|
||||||
|
{{ letter }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<template v-else>{{ statusAvatarText }}</template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="messages-bottom-spacer" aria-hidden="true"></div>
|
<div class="messages-bottom-spacer" aria-hidden="true"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -649,11 +664,19 @@ import ToolAction from '@/components/chat/actions/ToolAction.vue';
|
|||||||
import StackedBlocks from './StackedBlocks.vue';
|
import StackedBlocks from './StackedBlocks.vue';
|
||||||
import MinimalBlocks from './MinimalBlocks.vue';
|
import MinimalBlocks from './MinimalBlocks.vue';
|
||||||
import MarkdownRenderer from './MarkdownRenderer.vue';
|
import MarkdownRenderer from './MarkdownRenderer.vue';
|
||||||
|
import StatusAvatar from '@/components/avatar/StatusAvatar.vue';
|
||||||
import { usePersonalizationStore } from '@/stores/personalization';
|
import { usePersonalizationStore } from '@/stores/personalization';
|
||||||
import { getMessageVisibility, messageStartsWork } from '@/utils/messageVisibility';
|
import { getMessageVisibility, messageStartsWork } from '@/utils/messageVisibility';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
messages: Array<any>;
|
messages: Array<any>;
|
||||||
|
avatarStatus?: {
|
||||||
|
mode?: string;
|
||||||
|
toolKeys?: string[];
|
||||||
|
toolTexts?: string[];
|
||||||
|
text?: string;
|
||||||
|
tracking?: boolean;
|
||||||
|
};
|
||||||
iconStyle: (key: string, size?: string) => Record<string, string>;
|
iconStyle: (key: string, size?: string) => Record<string, string>;
|
||||||
expandedBlocks: Set<string>;
|
expandedBlocks: Set<string>;
|
||||||
streamingMessage: boolean;
|
streamingMessage: boolean;
|
||||||
@ -678,6 +701,12 @@ const emit = defineEmits<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
const personalization = usePersonalizationStore();
|
const personalization = usePersonalizationStore();
|
||||||
|
const personalizationReady = computed(() => {
|
||||||
|
return !!personalization.loaded || !!personalization.error;
|
||||||
|
});
|
||||||
|
const renderPending = computed(() => {
|
||||||
|
return !!props.historyLoading || !personalizationReady.value;
|
||||||
|
});
|
||||||
const blockDisplayMode = computed(() => {
|
const blockDisplayMode = computed(() => {
|
||||||
return personalization.experiments.blockDisplayMode || 'stacked';
|
return personalization.experiments.blockDisplayMode || 'stacked';
|
||||||
});
|
});
|
||||||
@ -692,6 +721,7 @@ const stackedBlocksEnabled = computed(() => {
|
|||||||
// 堆叠模式和极简模式都使用堆叠布局
|
// 堆叠模式和极简模式都使用堆叠布局
|
||||||
return blockDisplayMode.value === 'stacked' || blockDisplayMode.value === 'minimal';
|
return blockDisplayMode.value === 'stacked' || blockDisplayMode.value === 'minimal';
|
||||||
});
|
});
|
||||||
|
const showStatusAvatar = computed(() => personalization.form.show_status_avatar !== false);
|
||||||
const aiAssistantName = computed(() => {
|
const aiAssistantName = computed(() => {
|
||||||
if (!personalization.form.use_custom_names) {
|
if (!personalization.form.use_custom_names) {
|
||||||
return 'AI Assistant';
|
return 'AI Assistant';
|
||||||
@ -748,7 +778,7 @@ const preMeasureUserBubbles = () => {
|
|||||||
// 在 DOM 测量前，先根据文本内容同步估算是否需要折叠，
|
// 在 DOM 测量前，先根据文本内容同步估算是否需要折叠，
|
||||||
// 避免长气泡先完整渲染再被收起。
|
// 避免长气泡先完整渲染再被收起。
|
||||||
// 只给尚未有状态记录的气泡做首次估算，避免切换对话时旧消息反复重算导致动画。
|
// 只给尚未有状态记录的气泡做首次估算，避免切换对话时旧消息反复重算导致动画。
|
||||||
filteredMessages.value.forEach((msg, index) => {
|
(Array.isArray(filteredMessages.value) ? filteredMessages.value : []).forEach((msg, index) => {
|
||||||
if (!msg || msg.role !== 'user') return;
|
if (!msg || msg.role !== 'user') return;
|
||||||
const key = getUserBubbleKey(msg, index);
|
const key = getUserBubbleKey(msg, index);
|
||||||
if (userBubbleFoldStates.value[key]) return;
|
if (userBubbleFoldStates.value[key]) return;
|
||||||
@ -978,7 +1008,38 @@ const filteredMessages = computed(() => {
|
|||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
});
|
});
|
||||||
const latestMessageIndex = computed(() => filteredMessages.value.length - 1);
|
const getFilteredMessagesSafe = () =>
|
||||||
|
Array.isArray(filteredMessages.value) ? filteredMessages.value : [];
|
||||||
|
const latestMessageIndex = computed(() => getFilteredMessagesSafe().length - 1);
|
||||||
|
const statusAvatarActiveIndex = ref(0);
|
||||||
|
const statusAvatarRef = ref<HTMLElement | null>(null);
|
||||||
|
const avatarStatusSafe = computed(() => ({
|
||||||
|
mode: props.avatarStatus?.mode || 'idle',
|
||||||
|
toolKeys: Array.isArray(props.avatarStatus?.toolKeys) ? props.avatarStatus!.toolKeys! : [],
|
||||||
|
toolTexts: Array.isArray(props.avatarStatus?.toolTexts) ? props.avatarStatus!.toolTexts! : [],
|
||||||
|
text: typeof props.avatarStatus?.text === 'string' ? props.avatarStatus.text : '',
|
||||||
|
tracking: props.avatarStatus?.tracking !== false
|
||||||
|
}));
|
||||||
|
const statusAvatarText = computed(() => {
|
||||||
|
if (avatarStatusSafe.value.mode === 'tool' && avatarStatusSafe.value.toolTexts.length > 1) {
|
||||||
|
const idx = statusAvatarActiveIndex.value % avatarStatusSafe.value.toolTexts.length;
|
||||||
|
return avatarStatusSafe.value.toolTexts[idx] || avatarStatusSafe.value.text;
|
||||||
|
}
|
||||||
|
return avatarStatusSafe.value.text;
|
||||||
|
});
|
||||||
|
const statusAvatarTextAnimated = computed(() => {
|
||||||
|
return avatarStatusSafe.value.mode === 'work' && !!statusAvatarText.value;
|
||||||
|
});
|
||||||
|
const statusAvatarLetters = computed(() => Array.from(statusAvatarText.value || ''));
|
||||||
|
const handleStatusAvatarActiveIndex = (index: number) => {
|
||||||
|
statusAvatarActiveIndex.value = Number.isFinite(index) ? Math.max(0, index) : 0;
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => [props.avatarStatus?.mode, props.avatarStatus?.toolKeys?.join('|')],
|
||||||
|
() => {
|
||||||
|
statusAvatarActiveIndex.value = 0;
|
||||||
|
}
|
||||||
|
);
|
||||||
const SUB_AGENT_DONE_LABEL_RE = /^子智能体\d+\s*任务完成$/;
|
const SUB_AGENT_DONE_LABEL_RE = /^子智能体\d+\s*任务完成$/;
|
||||||
const SUB_AGENT_DONE_PREFIX_RE = /^(?:✅\s*)?子智能体\s*#?\s*(\d+)\s*任务摘要[:：]/;
|
const SUB_AGENT_DONE_PREFIX_RE = /^(?:✅\s*)?子智能体\s*#?\s*(\d+)\s*任务摘要[:：]/;
|
||||||
const BG_RUN_COMMAND_DONE_LABEL_RE = /^(?:\[)?后台\s*run_command\s*完成(?:\])?$/;
|
const BG_RUN_COMMAND_DONE_LABEL_RE = /^(?:\[)?后台\s*run_command\s*完成(?:\])?$/;
|
||||||
@ -1001,7 +1062,6 @@ const userMDebug = (...args: any[]) => {
|
|||||||
}
|
}
|
||||||
console.log('[USERMDEBUG]', ...args);
|
console.log('[USERMDEBUG]', ...args);
|
||||||
};
|
};
|
||||||
const DEFAULT_GENERATING_TEXT = '生成中…';
|
|
||||||
const {
|
const {
|
||||||
scrollRef,
|
scrollRef,
|
||||||
contentRef,
|
contentRef,
|
||||||
@ -1669,12 +1729,13 @@ function isSubAgentNoticeOnlyMessage(msg: any): boolean {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function isFollowedBySubAgentNotice(index: number): boolean {
|
function isFollowedBySubAgentNotice(index: number): boolean {
|
||||||
const next = filteredMessages.value[index + 1];
|
const messages = getFilteredMessagesSafe();
|
||||||
|
const next = messages[index + 1];
|
||||||
const yes = !!next && isSubAgentNoticeOnlyMessage(next);
|
const yes = !!next && isSubAgentNoticeOnlyMessage(next);
|
||||||
if (yes) {
|
if (yes) {
|
||||||
userMDebug('ChatArea.isFollowedBySubAgentNotice:hit', {
|
userMDebug('ChatArea.isFollowedBySubAgentNotice:hit', {
|
||||||
index,
|
index,
|
||||||
currentRole: filteredMessages.value[index]?.role,
|
currentRole: messages[index]?.role,
|
||||||
nextRole: next?.role
|
nextRole: next?.role
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -1718,7 +1779,8 @@ function findAssistantHeaderAnchorUser(index: number): any | null {
|
|||||||
if (index <= 0) {
|
if (index <= 0) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const prev = filteredMessages.value[index - 1];
|
const messages = getFilteredMessagesSafe();
|
||||||
|
const prev = messages[index - 1];
|
||||||
if (!prev || prev.role !== 'user') {
|
if (!prev || prev.role !== 'user') {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -1726,7 +1788,7 @@ function findAssistantHeaderAnchorUser(index: number): any | null {
|
|||||||
// 只有 starts_work=true 的消息才会开启新 work segment；运行期 guidance
|
// 只有 starts_work=true 的消息才会开启新 work segment；运行期 guidance
|
||||||
// 只是当前 segment 内的补充，不会重置头部与计时器。
|
// 只是当前 segment 内的补充，不会重置头部与计时器。
|
||||||
for (let i = index - 1; i >= 0; i -= 1) {
|
for (let i = index - 1; i >= 0; i -= 1) {
|
||||||
const item = filteredMessages.value[i];
|
const item = messages[i];
|
||||||
if (!item || item.role !== 'user') {
|
if (!item || item.role !== 'user') {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -1820,7 +1882,8 @@ function compactBriefLabel(msg: any): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => filteredMessages.value.map((m) => m?.id ?? m?.content?.slice(0, 80)),
|
() =>
|
||||||
|
getFilteredMessagesSafe().map((m) => m?.id ?? m?.content?.slice(0, 80)),
|
||||||
() => {
|
() => {
|
||||||
userBubbleTransitionSuppressed.value = true;
|
userBubbleTransitionSuppressed.value = true;
|
||||||
// 先同步估算折叠状态，再异步精确测量，避免长气泡先展开后收起
|
// 先同步估算折叠状态，再异步精确测量，避免长气泡先展开后收起
|
||||||
@ -1962,14 +2025,6 @@ const splitActionGroups = (actions: any[] = [], messageIndex = 0) => {
|
|||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
function getGeneratingLetters(message: any) {
|
|
||||||
const label =
|
|
||||||
typeof message?.generatingLabel === 'string' && message.generatingLabel.trim()
|
|
||||||
? message.generatingLabel.trim()
|
|
||||||
: DEFAULT_GENERATING_TEXT;
|
|
||||||
return Array.from(label);
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
rootEl,
|
rootEl,
|
||||||
getThinkingRef,
|
getThinkingRef,
|
||||||
|
|||||||
@ -693,6 +693,28 @@
|
|||||||
class="fancy-path"
|
class="fancy-path"
|
||||||
></path></svg></span
|
></path></svg></span
|
||||||
></label>
|
></label>
|
||||||
|
<label class="settings-toggle-row"
|
||||||
|
><span class="settings-row-copy"
|
||||||
|
><span class="settings-row-title">显示助手状态形象</span
|
||||||
|
><span class="settings-row-desc"
|
||||||
|
>在欢迎页和对话末尾显示空闲、思考、工具调用等状态动画</span
|
||||||
|
></span
|
||||||
|
><input
|
||||||
|
type="checkbox"
|
||||||
|
:checked="form.show_status_avatar"
|
||||||
|
@change="
|
||||||
|
personalization.updateField({
|
||||||
|
key: 'show_status_avatar',
|
||||||
|
value: $event.target.checked
|
||||||
|
})
|
||||||
|
" /><span class="fancy-check" aria-hidden="true"
|
||||||
|
><svg viewBox="0 0 64 64">
|
||||||
|
<path
|
||||||
|
d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
|
||||||
|
pathLength="575.0541381835938"
|
||||||
|
class="fancy-path"
|
||||||
|
></path></svg></span
|
||||||
|
></label>
|
||||||
<label class="settings-toggle-row"
|
<label class="settings-toggle-row"
|
||||||
><span class="settings-row-copy"
|
><span class="settings-row-copy"
|
||||||
><span class="settings-row-title">显示 Git 状态栏</span
|
><span class="settings-row-title">显示 Git 状态栏</span
|
||||||
|
|||||||
@ -25,6 +25,7 @@ interface PersonalForm {
|
|||||||
silent_tool_disable: boolean;
|
silent_tool_disable: boolean;
|
||||||
enhanced_tool_display: boolean;
|
enhanced_tool_display: boolean;
|
||||||
compact_message_display: CompactMessageDisplay;
|
compact_message_display: CompactMessageDisplay;
|
||||||
|
show_status_avatar: boolean;
|
||||||
show_git_status_bar: boolean;
|
show_git_status_bar: boolean;
|
||||||
auto_open_terminal_panel: boolean;
|
auto_open_terminal_panel: boolean;
|
||||||
stacked_hide_borders: boolean;
|
stacked_hide_borders: boolean;
|
||||||
@ -142,6 +143,7 @@ const defaultForm = (): PersonalForm => ({
|
|||||||
silent_tool_disable: false,
|
silent_tool_disable: false,
|
||||||
enhanced_tool_display: true,
|
enhanced_tool_display: true,
|
||||||
compact_message_display: 'full',
|
compact_message_display: 'full',
|
||||||
|
show_status_avatar: true,
|
||||||
show_git_status_bar: true,
|
show_git_status_bar: true,
|
||||||
auto_open_terminal_panel: true,
|
auto_open_terminal_panel: true,
|
||||||
stacked_hide_borders: loadCachedStackedHideBorders(),
|
stacked_hide_borders: loadCachedStackedHideBorders(),
|
||||||
@ -333,6 +335,7 @@ export const usePersonalizationStore = defineStore('personalization', {
|
|||||||
silent_tool_disable: !!data.silent_tool_disable,
|
silent_tool_disable: !!data.silent_tool_disable,
|
||||||
enhanced_tool_display: data.enhanced_tool_display !== false,
|
enhanced_tool_display: data.enhanced_tool_display !== false,
|
||||||
compact_message_display: data.compact_message_display === 'brief' ? 'brief' : 'full',
|
compact_message_display: data.compact_message_display === 'brief' ? 'brief' : 'full',
|
||||||
|
show_status_avatar: data.show_status_avatar !== false,
|
||||||
show_git_status_bar: data.show_git_status_bar !== false,
|
show_git_status_bar: data.show_git_status_bar !== false,
|
||||||
auto_open_terminal_panel: data.auto_open_terminal_panel !== false,
|
auto_open_terminal_panel: data.auto_open_terminal_panel !== false,
|
||||||
stacked_hide_borders: !!data.stacked_hide_borders,
|
stacked_hide_borders: !!data.stacked_hide_borders,
|
||||||
|
|||||||
@ -107,6 +107,11 @@
|
|||||||
overflow-anchor: none;
|
overflow-anchor: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.messages-area.messages-area--render-pending .messages-flow,
|
||||||
|
.messages-area.messages-area--render-pending .messages-bottom-spacer {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.messages-flow {
|
.messages-flow {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: calc(var(--chat-scrollbar-width) / 2);
|
left: calc(var(--chat-scrollbar-width) / 2);
|
||||||
@ -117,6 +122,65 @@
|
|||||||
contain: layout style;
|
contain: layout style;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.messages-flow > .message-block.message-block--last {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-status-avatar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 40px;
|
||||||
|
margin: 12px 0 18px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-status-avatar .status-avatar {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-status-avatar__text {
|
||||||
|
min-width: 0;
|
||||||
|
max-width: min(560px, 86%);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-status-avatar__text--animated {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.02em;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-status-avatar__letter {
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 0.42;
|
||||||
|
transform: translateY(0);
|
||||||
|
animation: conversation-status-letter-wave 1.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes conversation-status-letter-wave {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 0.42;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
42% {
|
||||||
|
opacity: 0.68;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.messages-bottom-spacer {
|
.messages-bottom-spacer {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: var(--composer-growth-height, 0px);
|
height: var(--composer-growth-height, 0px);
|
||||||
@ -483,6 +547,35 @@
|
|||||||
align-items: flex-end; /* 靠右对齐 */
|
align-items: flex-end; /* 靠右对齐 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-block--last .user-message:not(.user-message--compact):not(.user-message--brief) {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-block--last .user-message:not(.user-message--compact):not(.user-message--brief) .user-bubble-actions {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 100%;
|
||||||
|
margin-top: 4px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-block--last .assistant-message .text-output {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-block--last .assistant-message .text-content > :last-child,
|
||||||
|
.message-block--last .assistant-message .markdown-renderer > :last-child,
|
||||||
|
.message-block--last .assistant-message .markdown-text-segment > :last-child,
|
||||||
|
.message-block--last .assistant-message .md-table-scroll:last-child,
|
||||||
|
.message-block--last .assistant-message [data-md-table-scroll='1']:last-child,
|
||||||
|
.message-block--last .assistant-message .chat-inline-card:last-child,
|
||||||
|
.message-block--last .assistant-message .chat-inline-card--image:last-child,
|
||||||
|
.message-block--last .assistant-message .show-file-card:last-child,
|
||||||
|
.message-block--last .assistant-message .show-file-card-root:last-child {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.user-message.user-message--compact {
|
.user-message.user-message--compact {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1040,6 +1040,7 @@ body[data-theme='light'] {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding-bottom: 160px;
|
padding-bottom: 160px;
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blank-hero-text {
|
.blank-hero-text {
|
||||||
@ -1053,11 +1054,6 @@ body[data-theme='light'] {
|
|||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blank-hero-overlay .icon-lg {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer-container {
|
.composer-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: var(--composer-base-height, calc(90px + var(--app-bottom-inset)));
|
height: var(--composer-base-height, calc(90px + var(--app-bottom-inset)));
|
||||||
|
|||||||
44
static/src/utils/avatarFace.ts
Normal file
44
static/src/utils/avatarFace.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
// 工具名 → StatusAvatar face key 映射
|
||||||
|
// 未命中的工具回退到 'command'（终端 > 提示符），保证始终有形象
|
||||||
|
const TOOL_FACE_MAP: Record<string, string> = {
|
||||||
|
web_search: 'search',
|
||||||
|
conversation_search: 'search',
|
||||||
|
extract_webpage: 'webpage',
|
||||||
|
save_webpage: 'save',
|
||||||
|
write_file: 'write',
|
||||||
|
edit_file: 'write',
|
||||||
|
read_file: 'read',
|
||||||
|
read_skill: 'read',
|
||||||
|
conversation_review: 'read',
|
||||||
|
vlm_analyze: 'camera',
|
||||||
|
ocr_image: 'camera',
|
||||||
|
view_image: 'camera',
|
||||||
|
view_video: 'camera',
|
||||||
|
create_skill: 'skill',
|
||||||
|
trigger_easter_egg: 'skill',
|
||||||
|
terminal_session: 'monitor',
|
||||||
|
terminal_input: 'keyboard',
|
||||||
|
terminal_snapshot: 'clipboard',
|
||||||
|
sleep: 'sleep',
|
||||||
|
run_command: 'command',
|
||||||
|
update_memory: 'brain',
|
||||||
|
recall_project_memory: 'notebook',
|
||||||
|
update_project_memory: 'notebook',
|
||||||
|
todo_create: 'note',
|
||||||
|
todo_update_task: 'check',
|
||||||
|
create_sub_agent: 'subagent',
|
||||||
|
close_sub_agent: 'subagent',
|
||||||
|
terminate_sub_agent: 'subagent',
|
||||||
|
get_sub_agent_status: 'subagent',
|
||||||
|
manage_personalization: 'persona',
|
||||||
|
ask_user: 'ask',
|
||||||
|
list_mcp_servers: 'mcp'
|
||||||
|
};
|
||||||
|
|
||||||
|
export function toolFaceKey(toolName: string | undefined | null): string {
|
||||||
|
const name = String(toolName || '');
|
||||||
|
if (name.startsWith('mcp__')) {
|
||||||
|
return 'mcp';
|
||||||
|
}
|
||||||
|
return TOOL_FACE_MAP[name] || 'command';
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user