${ansiToHtml(escaped)}`;
}
let html = marked.parse(raw, { renderer, async: false, gfm: true, breaks: true });
html = linkifyWorkspaceFiles(html);
return html;
}
const DRAFT_KEY = "chat_draft";
const HISTORY_KEY = "chat_input_history";
const HISTORY_MAX = 50;
function loadDraft() {
try {
return sessionStorage.getItem(DRAFT_KEY) || "";
} catch {
return "";
}
}
function saveDraft(v) {
try {
if (v) sessionStorage.setItem(DRAFT_KEY, v);
else sessionStorage.removeItem(DRAFT_KEY);
} catch {
}
}
function loadHistory() {
try {
return JSON.parse(sessionStorage.getItem(HISTORY_KEY) || "[]");
} catch {
return [];
}
}
function pushHistory(v) {
try {
const h = loadHistory().filter((x) => x !== v);
h.unshift(v);
sessionStorage.setItem(HISTORY_KEY, JSON.stringify(h.slice(0, HISTORY_MAX)));
} catch {
}
}
function useMessages(wsSendFn) {
const store = useChatStore();
const sending = ref(false);
const input = ref(loadDraft());
const messagesEl = ref(null);
let historyIdx = -1;
function getViewport() {
const el = messagesEl.value;
if (!el) return null;
const root = el.$el || el;
return root.querySelector?.("[data-overlayscrollbars-viewport]") || root;
}
function scrollToBottom() {
nextTick(() => {
nextTick(() => {
requestAnimationFrame(() => {
const vp = getViewport();
if (vp) vp.scrollTop = vp.scrollHeight;
});
});
});
}
function scrollIfAtBottom() {
const vp = getViewport();
if (!vp) return;
if (vp.scrollHeight - vp.scrollTop - vp.clientHeight < 80) scrollToBottom();
}
let draftTimer = null;
function onInputChange() {
if (draftTimer) clearTimeout(draftTimer);
draftTimer = setTimeout(() => saveDraft(input.value), 1e3);
}
function navigateHistory(dir) {
const history = loadHistory();
if (!history.length) return;
if (dir === "up") {
historyIdx = Math.min(historyIdx + 1, history.length - 1);
} else {
historyIdx = Math.max(historyIdx - 1, -1);
}
input.value = historyIdx === -1 ? "" : history[historyIdx];
}
let lastSentContent = "";
function restoreLastSent() {
input.value = lastSentContent;
}
async function send(attachmentPayload) {
const hasText = input.value.trim().length > 0;
const hasAttachments = attachmentPayload && attachmentPayload.length > 0;
if (!hasText && !hasAttachments || sending.value) return;
const content = input.value.trim();
if (hasText) {
lastSentContent = content;
pushHistory(content);
}
historyIdx = -1;
input.value = "";
saveDraft("");
sending.value = true;
const msgId = generateMsgId();
const localAttachments = hasAttachments ? attachmentPayload.map((a) => {
const mime = a.mimeType.split(";")[0];
let dataUrl;
if (a.mimeType.startsWith("audio/")) {
const bytes = Uint8Array.from(atob(a.content), (c) => c.charCodeAt(0));
dataUrl = URL.createObjectURL(new Blob([bytes], { type: mime }));
} else {
dataUrl = `data:${mime};base64,${a.content}`;
}
return { mimeType: a.mimeType, fileName: a.fileName, dataUrl };
}) : void 0;
const hasAudio = hasAttachments && attachmentPayload.some((a) => a.mimeType.startsWith("audio/"));
store.pushMessage({
role: "user",
content,
agentId: null,
msgId,
attachments: localAttachments,
pending: hasAudio
// audio messages are pending until transcript arrives
});
const payload = { type: "message", content, msgId };
if (hasAttachments) payload.attachments = attachmentPayload;
wsSendFn(payload);
sending.value = false;
}
return {
sending,
input,
messagesEl,
parseMd,
scrollToBottom,
scrollIfAtBottom,
send,
onInputChange,
navigateHistory,
restoreLastSent,
startNewAssistantMessage: store.startNewAssistantMessage,
appendAssistantMessage: store.appendAssistantDelta,
finalizeAssistantMessage: store.finalizeAssistantMessage,
resetAssistantMessageState: store.resetLocalSession,
hasActiveStreamingMessage: store.hasActiveStreamingMessage,
streamingMessageVisibleContent: computed(() => store.streamingMessageVisibleContent)
};
}
function useMessageGrouping(messages, visibleCount, selectedAgent, allAgents, sessionKey) {
const VISIBLE_PAGE2 = 50;
const visibleMsgs = computed(() => {
const all = messages.value;
const start = Math.max(0, all.length - visibleCount.value);
return all.slice(start).map((m, i) => ({ ...m, _sourceIndex: start + i }));
});
const hasMore = computed(() => messages.value.length > visibleCount.value);
function loadMore() {
visibleCount.value += VISIBLE_PAGE2;
}
function getFormattedAgentName(agentId) {
if (!agentId) return "Unknown";
const agent = allAgents.value.find((a) => a.id === agentId);
return agent ? agent.name : agentId;
}
function shouldShowHeadline(index, msgsArr) {
if (index === 0) return true;
const current = msgsArr[index];
const prev = msgsArr[index - 1];
if (!current.agentId || !prev.agentId) {
return current.sessionId !== prev.sessionId;
}
return current.agentId !== prev.agentId || current.sessionId !== prev.sessionId;
}
function formatHeadlineText(agentName) {
const key = sessionKey?.value;
return key ? `${agentName} · ${key}` : agentName;
}
function getHeadline(index, msgsArr) {
const current = msgsArr[index];
const targetAgentId = current.agentId || selectedAgent.value;
const agentName = getFormattedAgentName(targetAgentId);
if (index === 0) return { text: formatHeadlineText(agentName), kind: "agent" };
const prev = msgsArr[index - 1];
if (current.agentId !== prev.agentId) return { text: formatHeadlineText(agentName), kind: "agent" };
if (current.sessionId !== prev.sessionId) return { text: "New Session", kind: "new-session" };
return { text: formatHeadlineText(agentName), kind: "agent" };
}
const groupedVisibleMsgs = computed(() => {
const raw = visibleMsgs.value;
const result = [];
let currentGroup = null;
for (let i = 0; i < raw.length; i++) {
const msg = raw[i];
if (shouldShowHeadline(i, raw)) {
if (currentGroup) {
result.push(currentGroup);
currentGroup = null;
}
const { text, kind } = getHeadline(i, raw);
result.push({
role: "system",
type: "headline",
content: text,
headlineKind: kind,
agentId: msg.agentId,
sessionId: msg.sessionId,
position: "header"
// Header appears before agent block
});
}
if (msg.role === "system" && msg.type !== "no_session") {
if (!currentGroup) {
currentGroup = { role: "system_group", messages: [msg], agentId: msg.agentId, sessionId: msg.sessionId };
} else {
currentGroup.messages.push(msg);
}
} else {
if (currentGroup) {
result.push(currentGroup);
currentGroup = null;
}
result.push(msg);
const effectiveAgentId = msg.agentId || selectedAgent.value;
if (effectiveAgentId && i === raw.length - 1) {
const agentName = getFormattedAgentName(effectiveAgentId);
result.push({
role: "system",
type: "headline",
content: formatHeadlineText(agentName),
headlineKind: "agent",
agentId: effectiveAgentId,
sessionId: msg.sessionId,
position: "footer"
});
}
}
}
if (currentGroup) result.push(currentGroup);
return result;
});
return {
visibleMsgs,
groupedVisibleMsgs,
hasMore,
loadMore,
getFormattedAgentName
};
}
function useInputAutogrow(input) {
const inputEl = ref(null);
const isShaking = ref(false);
function autoGrow() {
const el = inputEl.value;
if (!el) return;
el.style.height = "auto";
el.style.height = el.scrollHeight + "px";
el.style.overflowY = el.scrollHeight > 160 ? "auto" : "hidden";
}
function triggerShake() {
isShaking.value = true;
setTimeout(() => {
isShaking.value = false;
}, 400);
}
watch(input, (val) => {
if (!val) nextTick(() => autoGrow());
});
return { inputEl, isShaking, autoGrow, triggerShake };
}
function useAgentDisplay(selectedAgent, defaultAgent, allAgents) {
const chatStore = useChatStore();
const defaultAgentName = computed(() => {
const agent = allAgents.value.find((a) => a.id === defaultAgent.value);
return agent ? agent.name : defaultAgent.value;
});
const agentDisplayName = computed(() => {
const agent = allAgents.value.find((a) => a.id === selectedAgent.value);
return (agent ? agent.name : selectedAgent.value).toUpperCase();
});
const isAgentRunning = computed(() => chatStore.smState === "AGENT_RUNNING");
const agentStatusDone = computed(() => chatStore.channelState === "READY" || chatStore.channelState === "FRESH");
const agentStatus = computed(() => {
switch (chatStore.smState) {
case "CONNECTING":
return "⚙️ Connecting…";
case "AGENT_RUNNING":
return "⚙️ Working…";
case "HANDOVER_PENDING":
return "📝 Writing handover…";
case "HANDOVER_DONE":
return "✅ Handover ready";
case "SWITCHING":
return "🔀 Switching…";
default:
return null;
}
});
return { defaultAgentName, agentDisplayName, isAgentRunning, agentStatusDone, agentStatus };
}
const ACCEPTED_TYPES = [
"image/jpeg",
"image/png",
"image/gif",
"image/webp",
"application/pdf",
"audio/webm",
"audio/mp4",
"audio/ogg",
"audio/mpeg",
"audio/wav",
"audio/x-m4a"
];
const MAX_BYTES = 10 * 1024 * 1024;
function readAsBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result;
const idx = result.indexOf(",");
resolve(idx >= 0 ? result.slice(idx + 1) : result);
};
reader.onerror = () => reject(reader.error);
reader.readAsDataURL(file);
});
}
function useAttachments() {
const attachments = ref([]);
async function addFiles(files) {
for (const file of Array.from(files)) {
const baseType = file.type.split(";")[0];
if (!ACCEPTED_TYPES.includes(baseType) && !ACCEPTED_TYPES.includes(file.type)) {
console.warn(`[attachments] skipped ${file.name}: unsupported type ${file.type}`);
continue;
}
if (file.size > MAX_BYTES) {
console.warn(`[attachments] skipped ${file.name}: exceeds 5MB (${(file.size / 1024 / 1024).toFixed(1)}MB)`);
continue;
}
const base64 = await readAsBase64(file);
const preview = URL.createObjectURL(file);
attachments.value.push({ file, preview, base64, mimeType: file.type, fileName: file.name });
}
}
function removeAttachment(index) {
const att = attachments.value[index];
if (att) URL.revokeObjectURL(att.preview);
attachments.value.splice(index, 1);
}
function clearAttachments() {
for (const att of attachments.value) URL.revokeObjectURL(att.preview);
attachments.value = [];
}
function toPayload() {
return attachments.value.map((a) => ({
type: a.mimeType.startsWith("image/") ? "image" : a.mimeType.startsWith("audio/") ? "audio" : "document",
mimeType: a.mimeType,
content: a.base64,
fileName: a.fileName
}));
}
function hasAttachments() {
return attachments.value.length > 0;
}
return { attachments, addFiles, removeAttachment, clearAttachments, toPayload, hasAttachments };
}
function useAudioRecorder() {
const isRecording = ref(false);
const duration = ref(0);
const audioLevel = ref(0);
const micDenied = ref(false);
let mediaRecorder = null;
let stream = null;
let audioCtx = null;
let analyser = null;
let levelBuf = null;
let chunks = [];
let timer = null;
let startTime = 0;
function cleanup() {
if (timer) {
clearInterval(timer);
timer = null;
}
if (audioCtx) {
audioCtx.close().catch(() => {
});
audioCtx = null;
analyser = null;
levelBuf = null;
}
if (stream) {
stream.getTracks().forEach((t) => t.stop());
stream = null;
}
mediaRecorder = null;
chunks = [];
duration.value = 0;
audioLevel.value = 0;
isRecording.value = false;
}
function updateLevel() {
if (!analyser || !levelBuf) return;
analyser.getByteTimeDomainData(levelBuf);
let sum = 0;
for (let i = 0; i < levelBuf.length; i++) {
const v = (levelBuf[i] - 128) / 128;
sum += v * v;
}
audioLevel.value = Math.min(1, Math.sqrt(sum / levelBuf.length) * 3);
}
async function startRecording() {
if (isRecording.value) return;
try {
stream = await navigator.mediaDevices.getUserMedia({ audio: true });
} catch (err) {
console.warn("[audio] mic access denied:", err);
micDenied.value = true;
setTimeout(() => {
micDenied.value = false;
}, 5e3);
return;
}
try {
audioCtx = new AudioContext();
const source = audioCtx.createMediaStreamSource(stream);
analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;
source.connect(analyser);
levelBuf = new Uint8Array(analyser.fftSize);
} catch (err) {
console.warn("[audio] analyser setup failed:", err);
}
chunks = [];
const mimeType = MediaRecorder.isTypeSupported("audio/webm;codecs=opus") ? "audio/webm;codecs=opus" : MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "";
mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) chunks.push(e.data);
};
mediaRecorder.start(250);
isRecording.value = true;
startTime = Date.now();
timer = setInterval(() => {
duration.value = Math.floor((Date.now() - startTime) / 1e3);
updateLevel();
}, 80);
}
function stopRecording() {
return new Promise((resolve) => {
if (!mediaRecorder || mediaRecorder.state === "inactive") {
cleanup();
resolve(null);
return;
}
mediaRecorder.onstop = () => {
const mimeType = mediaRecorder?.mimeType || "audio/webm";
const ext = mimeType.includes("mp4") ? "mp4" : mimeType.includes("ogg") ? "ogg" : "webm";
const blob = new Blob(chunks, { type: mimeType });
const file = new File([blob], `recording-${Date.now()}.${ext}`, { type: mimeType });
cleanup();
resolve(file);
};
mediaRecorder.stop();
});
}
function cancelRecording() {
if (mediaRecorder && mediaRecorder.state !== "inactive") {
mediaRecorder.onstop = () => {
};
mediaRecorder.stop();
}
cleanup();
}
function formatDuration(secs) {
const m = Math.floor(secs / 60);
const s = secs % 60;
return `${m}:${s.toString().padStart(2, "0")}`;
}
onUnmounted(cleanup);
return { isRecording, duration, audioLevel, micDenied, startRecording, stopRecording, cancelRecording, formatDuration };
}
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
__name: "MessageFrame",
__ssrInlineRender: true,
props: {
role: {},
copyContent: {}
},
setup(__props) {
return (_ctx, _push, _parent, _attrs) => {
_push(`| ${ssrInterpolate(col)} | `); }); _push(`
|---|
| ${ssrInterpolate(cell)} | `); }); _push(`
Select an agent
`); ssrRenderList(agentSegments.value, (seg) => { _push(``); _push(ssrRenderComponent(unref(LockClosedIcon), { class: "w-5 h-5 inline" }, null, _parent)); _push(` Not logged in
`); _push(ssrRenderComponent(_component_RouterLink, { to: "/login" }, { default: withCtx((_, _push2, _parent2, _scopeId) => { if (_push2) { _push2(`Sign in →`); } else { return [ createTextVNode("Sign in →") ]; } }), _: 1 }, _parent)); _push(``); } }; } }); const _sfc_setup = _sfc_main.setup; _sfc_main.setup = (props, ctx) => { const ssrContext = useSSRContext(); (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/AgentsView.vue"); return _sfc_setup ? _sfc_setup(props, ctx) : void 0; }; const AgentsView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8c19bd9d"]]); export { AgentsView as default };