bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

UX: queue bubbles, dashboard queuing, duplicate confirm buttons, short-note fix

Browse Source 
- Dashboard chat: allow typing/sending during streaming (queued in store)
  placeholder updates to "Type to queue…" during generation
- ChatView/WorkspaceView: replace queued chip with actual pending message
  bubbles — light grey, dashed border, "Queued" badge above content; clear
  button below the stack
- ToolCallCard: when tool returns requires_confirmation=True, show
  "Similar content found" label (not "Error"), link to the similar note,
  and "Create Anyway" / "Don't Create" buttons that auto-send the reply
- tools.py: fuzzy title match now returns requires_confirmation=True with
  similar_note data instead of a hard error, so numbered-series notes
  (Lore: X 0, Lore: X 1) can be created with one button click; semantic
  match responses also include similar_note for the link

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-09 23:32:21 -04:00
parent 12644999c1
commit d7e1fe6aab
7 changed files with 165 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ChatView.vue
+42 -23
View File
@@ -632,12 +632,24 @@ onUnmounted(() => {
</div>
</div>
<!-- Queued message indicator -->
<div v-if="store.queuedCount" class="queued-indicator">
<span class="queued-icon">⏳</span>
{{ store.queuedCount }} message{{ store.queuedCount > 1 ? 's' : '' }} queued
<button class="queued-cancel" @click="store.clearQueue()" aria-label="Cancel queued messages">×</button>
</div>
<!-- Queued messages — shown as pending bubbles -->
<template v-if="store.queuedMessages.length">
<div
v-for="(q, i) in store.queuedMessages"
:key="`queued-${i}`"
class="chat-message role-user queued-message"
>
<div class="message-bubble queued-bubble">
<div class="queued-badge">Queued</div>
<div class="message-content">{{ q.content }}</div>
</div>
</div>
<div class="queued-clear-row">
<button class="queued-clear-btn" @click="store.clearQueue()" aria-label="Cancel queued messages">
Cancel {{ store.queuedMessages.length }} queued
</button>
</div>
</template>
<p
v-if="!store.currentConversation.messages.length && !store.streaming"
@@ -1610,29 +1622,36 @@ details[open] .thinking-summary::before {
}
}
.queued-indicator {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
.queued-bubble {
background: var(--color-bg-secondary) !important;
border: 1px dashed var(--color-border) !important;
opacity: 0.7;
}
.queued-badge {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
padding: 0.3rem 1rem;
margin: 0.25rem 0;
margin-bottom: 0.25rem;
}
.queued-icon {
font-size: 0.75rem;
.queued-clear-row {
display: flex;
justify-content: flex-end;
padding-right: 0.5rem;
}
.queued-cancel {
.queued-clear-btn {
background: none;
border: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 6px);
cursor: pointer;
color: var(--color-text-muted);
font-size: 1rem;
line-height: 1;
padding: 0 0.2rem;
margin-left: 0.1rem;
font-size: 0.78rem;
padding: 0.2rem 0.6rem;
font-family: inherit;
}
.queued-cancel:hover {
color: var(--color-text);
.queued-clear-btn:hover {
color: var(--color-danger, #e74c3c);
border-color: var(--color-danger, #e74c3c);
}
</style>
frontend/src/views/WorkspaceView.vue
+44 -21
View File
@@ -318,12 +318,24 @@ onUnmounted(async () => {
</div>
</div>
<!-- Queued message indicator -->
<div v-if="chatStore.queuedCount" class="queued-indicator">
<span>⏳</span>
{{ chatStore.queuedCount }} message{{ chatStore.queuedCount > 1 ? 's' : '' }} queued
<button class="queued-cancel" @click="chatStore.clearQueue()" aria-label="Cancel queued messages">×</button>
</div>
<!-- Queued messages — shown as pending bubbles -->
<template v-if="chatStore.queuedMessages.length">
<div
v-for="(q, i) in chatStore.queuedMessages"
:key="`queued-${i}`"
class="ws-message role-user queued-message"
>
<div class="message-bubble queued-bubble">
<div class="queued-badge">Queued</div>
<div class="message-content">{{ q.content }}</div>
</div>
</div>
<div class="queued-clear-row">
<button class="queued-clear-btn" @click="chatStore.clearQueue()" aria-label="Cancel queued messages">
Cancel {{ chatStore.queuedMessages.length }} queued
</button>
</div>
</template>
<p
v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
@@ -631,25 +643,36 @@ details[open] .thinking-summary::before {
max-height: 300px;
overflow-y: auto;
}
.queued-indicator {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--color-text-muted);
padding: 0.3rem 0.75rem;
margin: 0.25rem 0;
.queued-bubble {
background: var(--color-bg-secondary) !important;
border: 1px dashed var(--color-border) !important;
opacity: 0.7;
}
.queued-cancel {
.queued-badge {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: 0.25rem;
}
.queued-clear-row {
display: flex;
justify-content: flex-end;
padding-right: 0.5rem;
}
.queued-clear-btn {
background: none;
border: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 6px);
cursor: pointer;
color: var(--color-text-muted);
font-size: 1rem;
line-height: 1;
padding: 0 0.2rem;
font-size: 0.78rem;
padding: 0.2rem 0.6rem;
font-family: inherit;
}
.queued-cancel:hover {
color: var(--color-text);
.queued-clear-btn:hover {
color: var(--color-danger, #e74c3c);
border-color: var(--color-danger, #e74c3c);
}
</style>