refactor(ui): Phase 7 — strip chat/voice/journal/workspace/home surfaces
Frontend deletion phase of the MCP-first pivot. All in-app
conversational surfaces are gone — Claude/MCP is the assistant now.
Deleted views:
ChatView, JournalView, WorkspaceView, HomeView
Deleted components:
ChatPanel, ChatInputBar, ChatMessage, ChatStreamingBubble,
ToolCallCard, ToolConfirmCard, WorkspaceChatWidget
Deleted composables + store:
useVoiceRecorder, useVoiceAudio, useStreamingTts, stores/chat
Router changes:
- / now redirects to /knowledge (was /journal)
- dropped /chat, /chat/:id, /journal, /workspace/:projectId
- /tasks still redirects to / (→ /knowledge)
- /notes still redirects to /knowledge
KnowledgeView:
- removed ChatPanel + ChatInputBar embeds
- removed minichat floating widget + state + handlers
- removed Chat link from today bar
- removed `chatStore` driven auto-refresh-on-tool-call watch
App.vue:
- removed useChatStore + startStatusPolling/stopStatusPolling
- removed VAD ONNX preloader (voice subsystem dead)
- removed visibilitychange listener (only did voice status re-check)
- removed `c` single-key shortcut (focus chat / goto chat)
- removed `g+c` two-key sequence (goto chat)
- removed Chat section from shortcuts overlay
- removed `.chat-page` / `.workspace-root` CSS overflow rule
AppHeader.vue:
- removed useChatStore + status indicator (Ollama model status)
- removed Chat / Journal nav links (desktop + mobile)
SettingsView.vue (4598 → 4079 lines):
- removed Voice tab entirely
- Notifications tab: dropped Push Notifications + Chat History
+ About sections (kept Email Notifications)
- General tab: dropped Assistant (name + model pickers) +
Model Management sections (kept Tasks + Timezone)
- Profile tab: dropped Journal + Observations sections
- VALID_TABS + tab list array no longer include "voice"
- removed `loadVoiceTab()` activation trigger
Service worker (frontend/public/sw.js):
- dropped push and notificationclick handlers (push subsystem
only fired on internal generation completion, which is gone)
- kept empty fetch handler as PWA installability shell
Script-level dead code (state refs, helper functions referencing
removed APIs) remains in SettingsView and stores/push.ts and
stores/settings.ts for now — Phase 8 backend deletion will clean
those up alongside the matching backend route removals.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -4,7 +4,6 @@ import { useRouter, useRoute } from "vue-router";
|
||||
import { useTheme } from "@/composables/useTheme";
|
||||
import { useShortcuts } from "@/composables/useShortcuts";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useChatStore } from "@/stores/chat";
|
||||
import AppLogo from "@/components/AppLogo.vue";
|
||||
import NotificationBell from "@/components/NotificationBell.vue";
|
||||
import { Sun, Moon, Settings } from "lucide-vue-next";
|
||||
@@ -12,42 +11,13 @@ import { Sun, Moon, Settings } from "lucide-vue-next";
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const { toggleShortcuts } = useShortcuts();
|
||||
const authStore = useAuthStore();
|
||||
const chatStore = useChatStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const isChatActive = computed(() => route.path.startsWith("/chat"))
|
||||
const isKnowledgeActive = computed(() => route.path === "/knowledge");
|
||||
|
||||
const mobileMenuOpen = ref(false);
|
||||
|
||||
const statusShortLabel = computed(() => {
|
||||
if (chatStore.ollamaStatus === "unavailable") return "Offline";
|
||||
if (chatStore.ollamaStatus === "checking") return "Checking";
|
||||
if (chatStore.modelStatus === "not_found") return "No model";
|
||||
if (chatStore.modelStatus === "cold") return "Cold";
|
||||
if (chatStore.modelStatus === "loaded") return "Ready";
|
||||
return "Checking";
|
||||
});
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
if (chatStore.ollamaStatus === "unavailable") return "Ollama unavailable";
|
||||
if (chatStore.ollamaStatus === "checking") return "Checking...";
|
||||
if (chatStore.modelStatus === "not_found") return "Model not installed";
|
||||
if (chatStore.modelStatus === "cold") return "Model cold — first response may be slow";
|
||||
if (chatStore.modelStatus === "loaded") return "Model loaded · ready";
|
||||
return "Checking...";
|
||||
});
|
||||
|
||||
const statusClass = computed(() => {
|
||||
if (chatStore.ollamaStatus === "unavailable") return "status-red";
|
||||
if (chatStore.ollamaStatus === "checking") return "status-gray";
|
||||
if (chatStore.modelStatus === "not_found") return "status-orange";
|
||||
if (chatStore.modelStatus === "cold") return "status-yellow";
|
||||
if (chatStore.modelStatus === "loaded") return "status-green";
|
||||
return "status-gray";
|
||||
});
|
||||
|
||||
function toggleMobileMenu() {
|
||||
mobileMenuOpen.value = !mobileMenuOpen.value;
|
||||
}
|
||||
@@ -76,20 +46,13 @@ router.afterEach(() => {
|
||||
<div class="nav-center">
|
||||
<div class="nav-pill-bar">
|
||||
<router-link to="/knowledge" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Knowledge</router-link>
|
||||
<router-link to="/chat" :class="['nav-link', { 'router-link-active': isChatActive }]">Chat</router-link>
|
||||
<router-link to="/journal" class="nav-link">Journal</router-link>
|
||||
<router-link to="/calendar" class="nav-link">Calendar</router-link>
|
||||
<router-link to="/projects" class="nav-link">Projects</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: status + utilities + gear + user -->
|
||||
<!-- Right: utilities + gear + user -->
|
||||
<div class="nav-right">
|
||||
<span class="status-indicator" :class="statusClass" :title="statusLabel">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">{{ statusShortLabel }}</span>
|
||||
</span>
|
||||
|
||||
<NotificationBell />
|
||||
|
||||
<button class="btn-icon" @click="toggleShortcuts" title="Keyboard shortcuts (?)">?</button>
|
||||
@@ -122,8 +85,6 @@ router.afterEach(() => {
|
||||
<!-- Mobile dropdown -->
|
||||
<div v-if="mobileMenuOpen" class="mobile-menu">
|
||||
<router-link to="/knowledge" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Knowledge</router-link>
|
||||
<router-link to="/chat" :class="['nav-link', { 'router-link-active': isChatActive }]">Chat</router-link>
|
||||
<router-link to="/journal" class="nav-link">Journal</router-link>
|
||||
<router-link to="/calendar" class="nav-link">Calendar</router-link>
|
||||
<router-link to="/projects" class="nav-link">Projects</router-link>
|
||||
<router-link to="/shared" class="nav-link">Shared</router-link>
|
||||
@@ -131,10 +92,6 @@ router.afterEach(() => {
|
||||
<router-link to="/settings" class="nav-link">Settings</router-link>
|
||||
<div class="mobile-divider"></div>
|
||||
<div class="mobile-actions">
|
||||
<span class="status-indicator" :class="statusClass" :title="statusLabel">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">{{ statusShortLabel }}</span>
|
||||
</span>
|
||||
<button class="btn-icon" @click="toggleShortcuts">?</button>
|
||||
<button class="btn-icon" @click="toggleTheme"><Sun v-if="theme === 'dark'" :size="16" />
|
||||
<Moon v-else :size="16" /></button>
|
||||
|
||||
@@ -1,668 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { apiGet, transcribeAudio } from '@/api/client'
|
||||
import { useVoiceRecorder } from '@/composables/useVoiceRecorder'
|
||||
import { useVad } from '@/composables/useVad'
|
||||
import { useStreamingTts } from '@/composables/useStreamingTts'
|
||||
import { useVoiceAudio, setVoiceVolume } from '@/composables/useVoiceAudio'
|
||||
import { useListenMode } from '@/composables/useListenMode'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import { useSettingsStore } from '@/stores/settings'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import type { Note } from '@/types/note'
|
||||
import {
|
||||
Paperclip,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
Square,
|
||||
Mic,
|
||||
Loader2,
|
||||
ArrowUp,
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
/** Textarea placeholder */
|
||||
placeholder?: string
|
||||
/** When true, hides the note picker (briefing mode) */
|
||||
briefingMode?: boolean
|
||||
/** Pill shape — compact rounded style for widget */
|
||||
pill?: boolean
|
||||
}>(), {
|
||||
placeholder: 'Type a message… (Enter to send, Shift+Enter for new line)',
|
||||
briefingMode: false,
|
||||
pill: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [payload: { content: string; contextNoteId?: number }]
|
||||
abort: []
|
||||
}>()
|
||||
|
||||
const store = useChatStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const voiceEnabled = computed(() => settingsStore.voiceSttReady)
|
||||
const voiceTtsEnabled = computed(() => settingsStore.voiceTtsReady)
|
||||
|
||||
// ── Streaming TTS (listen mode) ───────────────────────────────────────────────
|
||||
const listenMode = useListenMode()
|
||||
const audio = useVoiceAudio()
|
||||
const speakerPopoverOpen = ref(false)
|
||||
|
||||
const tts = useStreamingTts({
|
||||
streamingContent: computed(() => store.streamingContent),
|
||||
streaming: computed(() => store.streaming),
|
||||
enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
|
||||
})
|
||||
|
||||
function lastAssistantContent(): string {
|
||||
const msgs = store.currentConversation?.messages ?? []
|
||||
return [...msgs].reverse().find((m) => m.role === 'assistant')?.content ?? ''
|
||||
}
|
||||
|
||||
function toggleListen() {
|
||||
listenMode.value = !listenMode.value
|
||||
if (listenMode.value) {
|
||||
tts.speak(lastAssistantContent())
|
||||
} else {
|
||||
tts.stop()
|
||||
}
|
||||
}
|
||||
|
||||
// ── Core input ────────────────────────────────────────────────────────────────
|
||||
const messageInput = ref('')
|
||||
const inputEl = ref<HTMLTextAreaElement | null>(null)
|
||||
const wrapperEl = ref<HTMLElement | null>(null)
|
||||
|
||||
function autoResize() {
|
||||
const el = inputEl.value
|
||||
if (!el) return
|
||||
el.style.height = 'auto'
|
||||
el.style.height = Math.min(el.scrollHeight, 150) + 'px'
|
||||
}
|
||||
|
||||
function resetTextareaHeight() {
|
||||
const el = inputEl.value
|
||||
if (!el) return
|
||||
el.style.height = 'auto'
|
||||
}
|
||||
|
||||
function onInputKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
const content = messageInput.value.trim()
|
||||
if (!content) return
|
||||
emit('submit', { content, contextNoteId: attachedNote.value?.id })
|
||||
messageInput.value = ''
|
||||
attachedNote.value = null
|
||||
resetTextareaHeight()
|
||||
}
|
||||
|
||||
// ── Note picker ───────────────────────────────────────────────────────────────
|
||||
const attachedNote = ref<{ id: number; title: string } | null>(null)
|
||||
const showNotePicker = ref(false)
|
||||
const noteSearchQuery = ref('')
|
||||
const noteSearchResults = ref<{ id: number; title: string }[]>([])
|
||||
const noteSearchLoading = ref(false)
|
||||
let noteSearchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function toggleNotePicker() {
|
||||
showNotePicker.value = !showNotePicker.value
|
||||
if (showNotePicker.value) {
|
||||
noteSearchQuery.value = ''
|
||||
noteSearchResults.value = []
|
||||
nextTick(() => {
|
||||
(wrapperEl.value?.querySelector('.note-picker-search') as HTMLInputElement)?.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function onNoteSearchInput() {
|
||||
if (noteSearchTimer) clearTimeout(noteSearchTimer)
|
||||
noteSearchTimer = setTimeout(async () => {
|
||||
const q = noteSearchQuery.value.trim()
|
||||
if (!q) { noteSearchResults.value = []; return }
|
||||
noteSearchLoading.value = true
|
||||
try {
|
||||
const data = await apiGet<{ notes: Note[] }>(`/api/notes?q=${encodeURIComponent(q)}&all=true&limit=5`)
|
||||
noteSearchResults.value = data.notes.map((n) => ({ id: n.id, title: n.title }))
|
||||
} catch {
|
||||
noteSearchResults.value = []
|
||||
} finally {
|
||||
noteSearchLoading.value = false
|
||||
}
|
||||
}, 250)
|
||||
}
|
||||
|
||||
function selectNote(note: { id: number; title: string }) {
|
||||
attachedNote.value = note
|
||||
showNotePicker.value = false
|
||||
}
|
||||
|
||||
function removeAttachedNote() {
|
||||
attachedNote.value = null
|
||||
}
|
||||
|
||||
// ── Voice (click-to-toggle + VAD speech detection) ─────────────────────────
|
||||
const transcribingVoice = ref(false)
|
||||
const recorder = useVoiceRecorder()
|
||||
// Tracks whether VAD detected speech during the current recording session.
|
||||
// Used to skip the Whisper round-trip when the user manually stops without
|
||||
// ever speaking — the recording is ambient noise and will transcribe to "".
|
||||
const vadSawSpeech = ref(false)
|
||||
|
||||
const vad = useVad({
|
||||
onSpeechEnd: () => {
|
||||
// VAD auto-stop: speech was detected and the user has paused. Proceed
|
||||
// to transcribe the MediaRecorder output.
|
||||
void stopRecording(false)
|
||||
},
|
||||
onNoSpeech: () => {
|
||||
useToastStore().show('No speech detected', 'warning')
|
||||
},
|
||||
onVadError: (msg) => {
|
||||
useToastStore().show(`VAD failed: ${msg}`, 'error')
|
||||
},
|
||||
})
|
||||
|
||||
// Live mic halo. A solid red disc sits behind the mic button and scales
|
||||
// with `vad.amplitude` (0..1 RMS, already amplified for visibility).
|
||||
const micGlowStyle = computed(() => {
|
||||
if (!recorder.recording.value) return { display: 'none' }
|
||||
const pulse = 0.2 + Math.min(vad.amplitude.value, 1) * 0.8
|
||||
return {
|
||||
transform: `translate(-50%, -50%) scale(${1 + pulse * 1.6})`,
|
||||
opacity: String(0.45 + pulse * 0.4),
|
||||
}
|
||||
})
|
||||
|
||||
// vad.speaking flips true on speech-start. Watch it once per session to
|
||||
// capture that speech was detected at some point, without clearing when
|
||||
// speech ends. This drives the no-speech guard in stopRecording.
|
||||
watch(() => vad.speaking.value, (on) => {
|
||||
if (on) vadSawSpeech.value = true
|
||||
})
|
||||
|
||||
async function toggleVoice() {
|
||||
if (transcribingVoice.value) return
|
||||
if (recorder.recording.value) {
|
||||
await stopRecording(true)
|
||||
} else {
|
||||
await startRecording()
|
||||
}
|
||||
}
|
||||
|
||||
async function startRecording() {
|
||||
if (!voiceEnabled.value || recorder.recording.value) return
|
||||
if (!recorder.isSupported) {
|
||||
useToastStore().show('Microphone requires HTTPS or localhost', 'error')
|
||||
return
|
||||
}
|
||||
vadSawSpeech.value = false
|
||||
await recorder.startRecording()
|
||||
if (recorder.error.value) {
|
||||
useToastStore().show(recorder.error.value, 'error')
|
||||
return
|
||||
}
|
||||
if (recorder.stream.value) {
|
||||
await vad.start(recorder.stream.value)
|
||||
}
|
||||
}
|
||||
|
||||
async function stopRecording(manual: boolean) {
|
||||
if (manual) {
|
||||
await vad.stopAndCheck()
|
||||
} else {
|
||||
await vad.stop()
|
||||
}
|
||||
if (!recorder.recording.value) return
|
||||
transcribingVoice.value = true
|
||||
try {
|
||||
const blob = await recorder.stopRecording()
|
||||
// No-speech guard: user manually stopped without VAD seeing speech.
|
||||
// Skip Whisper — the toast was already shown by onNoSpeech.
|
||||
if (manual && !vadSawSpeech.value) {
|
||||
return
|
||||
}
|
||||
// Pass last assistant message as context to reduce STT mishearings
|
||||
const msgs = store.currentConversation?.messages ?? []
|
||||
const lastAssistant = [...msgs].reverse().find(m => m.role === 'assistant')?.content
|
||||
const { transcript } = await transcribeAudio(blob, lastAssistant)
|
||||
if (transcript.trim()) {
|
||||
messageInput.value = transcript.trim()
|
||||
await nextTick()
|
||||
autoResize()
|
||||
onSubmit()
|
||||
}
|
||||
} catch { /* transcription failed silently */ }
|
||||
finally { transcribingVoice.value = false }
|
||||
}
|
||||
|
||||
// ── Click-outside to dismiss speaker popover ──────────────────────────────────
|
||||
function onDocumentMousedown(e: MouseEvent) {
|
||||
if (!speakerPopoverOpen.value) return
|
||||
const target = e.target as HTMLElement | null
|
||||
if (!target?.closest('.speaker-wrapper')) speakerPopoverOpen.value = false
|
||||
}
|
||||
onMounted(() => document.addEventListener('mousedown', onDocumentMousedown))
|
||||
onUnmounted(() => document.removeEventListener('mousedown', onDocumentMousedown))
|
||||
|
||||
// ── Exposed interface ─────────────────────────────────────────────────────────
|
||||
function focus() {
|
||||
inputEl.value?.focus()
|
||||
}
|
||||
|
||||
function prefill(text: string) {
|
||||
messageInput.value = text
|
||||
nextTick(() => {
|
||||
autoResize()
|
||||
inputEl.value?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ focus, prefill })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="wrapperEl" class="chat-input-bar" :class="{ 'chat-input-bar--pill': pill }">
|
||||
<!-- Attached note pill -->
|
||||
<div v-if="attachedNote" class="attached-note">
|
||||
<span class="attached-note-pill">
|
||||
{{ attachedNote.title }}
|
||||
<button class="attached-note-remove" aria-label="Remove" @click="removeAttachedNote">×</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="input-row">
|
||||
<!-- Note picker -->
|
||||
<div class="note-picker-wrapper">
|
||||
<button
|
||||
class="btn-icon"
|
||||
@click="toggleNotePicker"
|
||||
:disabled="!store.chatReady"
|
||||
title="Attach a note"
|
||||
>
|
||||
<Paperclip :size="16" />
|
||||
</button>
|
||||
<div v-if="showNotePicker" class="note-picker-dropdown">
|
||||
<input
|
||||
class="note-picker-search"
|
||||
v-model="noteSearchQuery"
|
||||
@input="onNoteSearchInput"
|
||||
placeholder="Search notes..."
|
||||
/>
|
||||
<div class="note-picker-results">
|
||||
<div
|
||||
v-for="note in noteSearchResults"
|
||||
:key="note.id"
|
||||
class="note-picker-item"
|
||||
@click="selectNote(note)"
|
||||
>{{ note.title || 'Untitled' }}</div>
|
||||
<div v-if="noteSearchLoading" class="note-picker-empty">Searching...</div>
|
||||
<div v-else-if="noteSearchQuery && !noteSearchResults.length" class="note-picker-empty">No notes found</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Textarea -->
|
||||
<textarea
|
||||
ref="inputEl"
|
||||
v-model="messageInput"
|
||||
@keydown="onInputKeydown"
|
||||
@input="autoResize"
|
||||
:placeholder="!store.chatReady ? 'Chat unavailable' : store.streaming ? 'Type to queue… (Enter to queue)' : placeholder"
|
||||
:disabled="!store.chatReady"
|
||||
rows="1"
|
||||
class="input-textarea"
|
||||
></textarea>
|
||||
|
||||
<!-- Speaker / listen-mode popover -->
|
||||
<div v-if="voiceTtsEnabled" class="speaker-wrapper">
|
||||
<button
|
||||
class="btn-icon btn-speaker"
|
||||
:class="{ 'speaker-active': listenMode, 'speaker-busy': tts.speaking.value }"
|
||||
@click="speakerPopoverOpen = !speakerPopoverOpen"
|
||||
:title="listenMode ? 'Listen mode on' : 'Listen / volume'"
|
||||
aria-label="Listen and volume settings"
|
||||
>
|
||||
<Volume2 v-if="!tts.speaking.value" :size="16" />
|
||||
<VolumeX v-else :size="16" />
|
||||
</button>
|
||||
<div v-if="speakerPopoverOpen" class="speaker-popover">
|
||||
<button
|
||||
class="speaker-row speaker-row--toggle"
|
||||
:class="{ 'speaker-row--active': listenMode }"
|
||||
@click="toggleListen"
|
||||
>
|
||||
<span class="speaker-row-label">{{ listenMode ? 'Listening' : 'Read aloud' }}</span>
|
||||
<span class="speaker-switch" :class="{ on: listenMode }"></span>
|
||||
</button>
|
||||
<div class="speaker-row">
|
||||
<span class="speaker-row-label">Volume</span>
|
||||
<input
|
||||
type="range" min="0" max="1" step="0.05"
|
||||
:value="audio.volume.value"
|
||||
@input="setVoiceVolume(+($event.target as HTMLInputElement).value)"
|
||||
class="speaker-volume-range"
|
||||
aria-label="Volume"
|
||||
/>
|
||||
<span class="speaker-volume-pct">{{ Math.round(audio.volume.value * 100) }}%</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="tts.speaking.value"
|
||||
class="speaker-row speaker-row--stop"
|
||||
@click="tts.stop()"
|
||||
>
|
||||
<Square :size="16" fill="currentColor" />
|
||||
<span>Stop playback</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PTT mic (with live amplitude halo behind) -->
|
||||
<div v-if="voiceEnabled" class="mic-wrapper">
|
||||
<div class="mic-glow" :style="micGlowStyle" aria-hidden="true"></div>
|
||||
<button
|
||||
class="btn-icon btn-mic"
|
||||
:class="{ 'mic-recording': recorder.recording.value, 'mic-transcribing': transcribingVoice }"
|
||||
@click.prevent="toggleVoice"
|
||||
:disabled="transcribingVoice || !store.chatReady"
|
||||
:title="recorder.recording.value ? 'Click to stop (or wait for silence)' : 'Click to speak'"
|
||||
:aria-label="recorder.recording.value ? 'Stop recording' : 'Start recording'"
|
||||
>
|
||||
<Mic v-if="!transcribingVoice" :size="16" />
|
||||
<Loader2 v-else :size="16" class="mic-loader" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Abort (streaming) or Send -->
|
||||
<button
|
||||
v-if="store.streaming"
|
||||
class="btn-abort-inline"
|
||||
@click="emit('abort')"
|
||||
title="Stop generation"
|
||||
>
|
||||
<Square :size="16" fill="currentColor" />
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn-send"
|
||||
@click="onSubmit"
|
||||
:disabled="!messageInput.trim() || !store.chatReady"
|
||||
><ArrowUp :size="16" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chat-input-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.attached-note {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
.attached-note-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0.15rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.attached-note-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.1rem;
|
||||
}
|
||||
.attached-note-remove:hover { color: #fff; }
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
|
||||
background: var(--color-input-bar-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px var(--color-shadow);
|
||||
}
|
||||
|
||||
.chat-input-bar--pill .input-row {
|
||||
border-radius: 24px;
|
||||
padding: 0.6rem 0.6rem 0.6rem 1rem;
|
||||
}
|
||||
|
||||
.input-textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-input-bar-text);
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.input-textarea::placeholder { color: var(--color-input-bar-placeholder); }
|
||||
.input-textarea:disabled { opacity: 0.5; }
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-input-bar-text);
|
||||
opacity: 0.6;
|
||||
padding: 0.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-icon:hover { opacity: 1; }
|
||||
.btn-icon:disabled { opacity: 0.3; cursor: default; }
|
||||
|
||||
.btn-mic.mic-recording {
|
||||
opacity: 1;
|
||||
/* White icon sits on top of the red halo so it stays legible at any
|
||||
pulse size. */
|
||||
color: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-mic.mic-transcribing { opacity: 0.5; }
|
||||
.mic-loader { animation: mic-spin 1s linear infinite; }
|
||||
@keyframes mic-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* Mic wrapper + live amplitude halo. The glow is a filled red disc
|
||||
absolutely positioned behind the button, scaled/faded by the
|
||||
computed `micGlowStyle` so the user gets unmistakable feedback
|
||||
that their voice is being picked up while the mic icon itself
|
||||
stays put and readable on top. */
|
||||
.mic-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mic-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(239, 68, 68, 0.9) 0%,
|
||||
rgba(239, 68, 68, 0.6) 55%,
|
||||
rgba(239, 68, 68, 0) 100%
|
||||
);
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
transform-origin: center;
|
||||
pointer-events: none;
|
||||
/* Smooth between amplitude samples (~100ms) so the pulse feels continuous
|
||||
rather than stepping. */
|
||||
transition: transform 0.12s ease-out, opacity 0.12s ease-out;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.note-picker-wrapper { position: relative; }
|
||||
.note-picker-dropdown {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 0;
|
||||
width: 260px;
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 16px var(--color-shadow);
|
||||
z-index: 20;
|
||||
overflow: hidden;
|
||||
}
|
||||
.note-picker-search {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.65rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.note-picker-results { max-height: 180px; overflow-y: auto; }
|
||||
.note-picker-item {
|
||||
padding: 0.4rem 0.65rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.note-picker-item:hover { background: var(--color-bg-secondary); }
|
||||
.note-picker-empty { padding: 0.4rem 0.65rem; color: var(--color-text-muted); font-size: 0.8rem; }
|
||||
|
||||
.btn-send {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--gradient-cta);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.btn-send:hover { box-shadow: 0 0 16px rgba(91, 74, 138, 0.35); }
|
||||
.btn-send:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
|
||||
|
||||
.btn-abort-inline {
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-abort-inline:hover { border-color: #ef4444; color: #ef4444; }
|
||||
|
||||
/* Speaker / listen-mode popover */
|
||||
.speaker-wrapper { position: relative; display: inline-flex; flex-shrink: 0; }
|
||||
.btn-speaker.speaker-active { opacity: 1; color: var(--color-primary); }
|
||||
.btn-speaker.speaker-busy { opacity: 1; color: #f59e0b; }
|
||||
.speaker-popover {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
right: 0;
|
||||
min-width: 220px;
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 16px var(--color-shadow);
|
||||
padding: 0.35rem;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.speaker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.45rem 0.6rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: default;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
.speaker-row--toggle { cursor: pointer; }
|
||||
.speaker-row--toggle:hover { background: var(--color-bg-secondary); }
|
||||
.speaker-row--active { color: var(--color-primary); }
|
||||
.speaker-row--stop {
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.speaker-row--stop:hover { color: #ef4444; background: var(--color-bg-secondary); }
|
||||
.speaker-row-label { flex: 1; }
|
||||
.speaker-volume-range { flex: 1; min-width: 0; }
|
||||
.speaker-volume-pct {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
min-width: 2.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
.speaker-switch {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 16px;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-border);
|
||||
transition: background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.speaker-switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-bg-card);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.speaker-switch.on { background: var(--color-primary); }
|
||||
.speaker-switch.on::after { transform: translateX(12px); }
|
||||
</style>
|
||||
@@ -1,300 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import { useSettingsStore } from "@/stores/settings";
|
||||
import ToolCallCard from "@/components/ToolCallCard.vue";
|
||||
import type { Message } from "@/types/chat";
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const props = defineProps<{
|
||||
message: Message;
|
||||
isStreaming?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
saveAsNote: [messageId: number];
|
||||
}>();
|
||||
|
||||
const rendered = computed(() => renderMarkdown(props.message.content));
|
||||
|
||||
const formattedTime = computed(() => {
|
||||
if (!props.message.created_at) return "";
|
||||
const date = new Date(props.message.created_at);
|
||||
return date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
|
||||
});
|
||||
|
||||
const roleLabel = computed(() => {
|
||||
switch (props.message.role) {
|
||||
case "user":
|
||||
return "You";
|
||||
case "assistant":
|
||||
return settingsStore.assistantName;
|
||||
default:
|
||||
return props.message.role;
|
||||
}
|
||||
});
|
||||
|
||||
function formatMs(ms: number | null | undefined): string {
|
||||
if (ms == null) return "";
|
||||
if (ms < 1000) return `${ms}ms`;
|
||||
return `${(ms / 1000).toFixed(1)}s`;
|
||||
}
|
||||
|
||||
const metadata = computed(() => (props.message.metadata ?? {}) as Record<string, unknown>);
|
||||
|
||||
// Hide LEGACY system-role daily_prep messages from earlier versions. The
|
||||
// current journal prep is a normal assistant message (renders with proper
|
||||
// bubble styling). Old system-role rows lurking in existing conversations
|
||||
// would render as a flat unstyled block — filter them.
|
||||
const hideMessage = computed(() =>
|
||||
props.message.role === "system" && metadata.value.kind === "daily_prep"
|
||||
);
|
||||
|
||||
const timingParts = computed((): string[] => {
|
||||
const t = props.message.timing;
|
||||
if (!t) return [];
|
||||
const parts: string[] = [];
|
||||
if (t.total_ms != null) parts.push(`${formatMs(t.total_ms)} total`);
|
||||
if (t.ttft_ms != null) parts.push(`first token ${formatMs(t.ttft_ms)}`);
|
||||
if (t.intent_ms != null) parts.push(`analyzed ${formatMs(t.intent_ms)}`);
|
||||
for (const tool of t.tools ?? []) {
|
||||
parts.push(`${tool.name.replace(/_/g, " ")} ${formatMs(tool.ms)}`);
|
||||
}
|
||||
if (t.generation_ms != null) parts.push(`generated ${formatMs(t.generation_ms)}`);
|
||||
return parts;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!hideMessage" class="chat-message" :class="`role-${message.role}`">
|
||||
<div class="message-group">
|
||||
<div class="message-bubble">
|
||||
<div class="message-header">
|
||||
<span class="role-label">{{ roleLabel }}</span>
|
||||
<div class="message-actions" v-if="message.role === 'assistant' && !isStreaming">
|
||||
<button class="btn-save" @click="emit('saveAsNote', message.id)" title="Save as note">
|
||||
Save as Note
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<details v-if="message.thinking" class="thinking-block">
|
||||
<summary class="thinking-summary">Reasoning</summary>
|
||||
<pre class="thinking-text">{{ message.thinking }}</pre>
|
||||
</details>
|
||||
<div class="message-content prose" v-html="rendered"></div>
|
||||
<div v-if="message.tool_calls?.length" class="tool-calls">
|
||||
<ToolCallCard
|
||||
v-for="(tc, i) in message.tool_calls"
|
||||
:key="i"
|
||||
:tool-call="tc"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="message.context_note_id"
|
||||
class="context-badge"
|
||||
>
|
||||
<router-link :to="`/notes/${message.context_note_id}`">
|
||||
{{ message.context_note_title || `Note #${message.context_note_id}` }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="formattedTime" class="message-timestamp">{{ formattedTime }}</span>
|
||||
<div v-if="timingParts.length" class="message-timing">
|
||||
<span class="timing-icon">⏱</span>
|
||||
<span v-for="(part, i) in timingParts" :key="i" class="timing-part">
|
||||
<span v-if="i > 0" class="timing-sep">·</span>{{ part }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chat-message {
|
||||
display: flex;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.role-user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.role-assistant {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.message-group {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
/* User prompts: recessed, muted — margin notes */
|
||||
.role-user .message-bubble {
|
||||
background: var(--color-bubble-user-bg);
|
||||
border: 1px solid var(--color-bubble-user-border);
|
||||
color: var(--color-bubble-user-text);
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Assistant responses: elevated, lit — the primary text */
|
||||
.role-assistant .message-bubble {
|
||||
background: var(--color-bg-card);
|
||||
border-left: 2px solid var(--color-primary);
|
||||
box-shadow: var(--color-bubble-asst-shadow);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.role-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.role-user .role-label {
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.role-assistant .role-label {
|
||||
color: var(--color-primary);
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-optical-sizing: auto;
|
||||
font-size: 0.8rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.thinking-block {
|
||||
margin-bottom: 0.5rem;
|
||||
border-left: 2px solid rgba(91, 74, 138, 0.35);
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.thinking-summary {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.thinking-summary::-webkit-details-marker { display: none; }
|
||||
.thinking-summary::before {
|
||||
content: "▶";
|
||||
font-size: 0.6rem;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
details[open] .thinking-summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.thinking-text {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
/* Long-form line-height (1.7) on assistant bubbles per the design system —
|
||||
chat is a reading surface, not a snippet stream. User bubbles stay tighter. */
|
||||
.role-assistant .message-content {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
word-break: break-word;
|
||||
}
|
||||
.message-content :deep(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.message-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-save {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-save:hover {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.tool-calls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.context-badge {
|
||||
margin-top: 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.context-badge a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.role-user .context-badge a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.context-badge a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.message-timestamp {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 0.15rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
.message-timing {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.1rem 0.5rem 0;
|
||||
font-size: 0.68rem;
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.timing-icon {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.timing-part {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.timing-sep {
|
||||
margin-right: 0.2rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,952 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import ChatMessage from '@/components/ChatMessage.vue'
|
||||
import ChatStreamingBubble from '@/components/ChatStreamingBubble.vue'
|
||||
import ChatInputBar from '@/components/ChatInputBar.vue'
|
||||
import ToolCallCard from '@/components/ToolCallCard.vue'
|
||||
import type { Message, ToolCallRecord } from '@/types/chat'
|
||||
import { Mic, ChevronDown, X } from 'lucide-vue-next'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
variant: 'full' | 'widget'
|
||||
/** Workspace: pins RAG scope and workspace_project_id */
|
||||
projectId?: number
|
||||
/** Briefing: hides scope chip, hides note picker */
|
||||
briefingMode?: boolean
|
||||
/** Hides input bar — for read-only historical views */
|
||||
readOnly?: boolean
|
||||
placeholder?: string
|
||||
autoFocus?: boolean
|
||||
}>(), {
|
||||
briefingMode: false,
|
||||
readOnly: false,
|
||||
autoFocus: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** Widget only: emitted when a new conversation is created */
|
||||
'conversation-started': [convId: number]
|
||||
}>()
|
||||
|
||||
const store = useChatStore()
|
||||
|
||||
// ── Scroll ────────────────────────────────────────────────────────────────────
|
||||
const messagesEl = ref<HTMLElement | null>(null)
|
||||
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (messagesEl.value) {
|
||||
messagesEl.value.scrollTop = messagesEl.value.scrollHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => store.streamingContent, () => scrollToBottom())
|
||||
watch(() => store.currentConversation?.messages.length, () => scrollToBottom())
|
||||
|
||||
// Notify CalendarView when an event is created/updated/deleted via tool
|
||||
const _calendarToolNames = new Set(['create_event', 'update_event', 'delete_event'])
|
||||
const _seenCalendarToolIdx = new Set<number>()
|
||||
watch(() => store.streamingToolCalls, (calls) => {
|
||||
calls.forEach((tc, i) => {
|
||||
if (!_seenCalendarToolIdx.has(i) && _calendarToolNames.has(tc.function) && tc.status === 'success') {
|
||||
_seenCalendarToolIdx.add(i)
|
||||
document.dispatchEvent(new CustomEvent('fable:calendar-changed'))
|
||||
}
|
||||
})
|
||||
}, { deep: true })
|
||||
watch(() => store.streaming, (s) => { if (!s) _seenCalendarToolIdx.clear() })
|
||||
|
||||
// ── Note context (full variant — included / suggested / auto-injected notes) ──
|
||||
const includedNoteIds = ref<Set<number>>(new Set())
|
||||
const includedNotes = ref<{ id: number; title: string }[]>([])
|
||||
const suggestedNotes = ref<{ id: number; title: string; score?: number | null }[]>([])
|
||||
const autoInjectedNotes = ref<{ id: number; title: string; score?: number | null }[]>([])
|
||||
const excludedNoteIds = ref<number[]>([])
|
||||
|
||||
watch(
|
||||
() => store.lastContextMeta,
|
||||
(meta) => {
|
||||
if (!meta || props.variant !== 'full') return
|
||||
const alreadyIncluded = includedNoteIds.value
|
||||
const alreadyAutoInjected = new Set(autoInjectedNotes.value.map((n) => n.id))
|
||||
const alreadySuggested = new Set(suggestedNotes.value.map((n) => n.id))
|
||||
|
||||
for (const note of meta.auto_injected_notes ?? []) {
|
||||
if (!alreadyAutoInjected.has(note.id) && !alreadyIncluded.has(note.id)) {
|
||||
autoInjectedNotes.value.push(note)
|
||||
alreadyAutoInjected.add(note.id)
|
||||
}
|
||||
}
|
||||
for (const note of meta.auto_notes ?? []) {
|
||||
if (note.auto_injected) {
|
||||
if (!alreadyAutoInjected.has(note.id) && !alreadyIncluded.has(note.id)) {
|
||||
autoInjectedNotes.value.push(note)
|
||||
alreadyAutoInjected.add(note.id)
|
||||
}
|
||||
} else {
|
||||
if (!alreadyIncluded.has(note.id) && !alreadySuggested.has(note.id) && !alreadyAutoInjected.has(note.id)) {
|
||||
suggestedNotes.value.push(note)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function includeNote(note: { id: number; title: string }) {
|
||||
if (includedNoteIds.value.has(note.id)) return
|
||||
includedNoteIds.value = new Set([...includedNoteIds.value, note.id])
|
||||
includedNotes.value.push(note)
|
||||
suggestedNotes.value = suggestedNotes.value.filter((n) => n.id !== note.id)
|
||||
autoInjectedNotes.value = autoInjectedNotes.value.filter((n) => n.id !== note.id)
|
||||
}
|
||||
|
||||
function excludeAutoNote(noteId: number) {
|
||||
autoInjectedNotes.value = autoInjectedNotes.value.filter((n) => n.id !== noteId)
|
||||
if (!excludedNoteIds.value.includes(noteId)) {
|
||||
excludedNoteIds.value = [...excludedNoteIds.value, noteId]
|
||||
}
|
||||
}
|
||||
|
||||
function removeIncludedNote(noteId: number) {
|
||||
includedNoteIds.value = new Set([...includedNoteIds.value].filter((id) => id !== noteId))
|
||||
const removed = includedNotes.value.find((n) => n.id === noteId)
|
||||
includedNotes.value = includedNotes.value.filter((n) => n.id !== noteId)
|
||||
if (removed && !suggestedNotes.value.some((n) => n.id === noteId)) {
|
||||
suggestedNotes.value.push(removed)
|
||||
}
|
||||
}
|
||||
|
||||
const contextCount = computed(
|
||||
() => autoInjectedNotes.value.length + suggestedNotes.value.length + includedNotes.value.length
|
||||
)
|
||||
|
||||
const hasContextData = computed(
|
||||
() => props.variant === 'full' && !props.briefingMode && !props.projectId && contextCount.value > 0
|
||||
)
|
||||
|
||||
// ── Narrow-viewport sidebar toggle ────────────────────────────────────────────
|
||||
const NARROW_BREAKPOINT = 1200
|
||||
const isNarrow = ref(typeof window !== 'undefined' && window.innerWidth < NARROW_BREAKPOINT)
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
function onResize() {
|
||||
isNarrow.value = window.innerWidth < NARROW_BREAKPOINT
|
||||
}
|
||||
onMounted(() => window.addEventListener('resize', onResize))
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize))
|
||||
|
||||
function toggleContextSidebar() {
|
||||
sidebarOpen.value = !sidebarOpen.value
|
||||
}
|
||||
|
||||
const hasContextSidebar = computed(() => hasContextData.value && sidebarOpen.value)
|
||||
|
||||
// ── Collapsible sections (per-conversation, localStorage) ─────────────────────
|
||||
type SectionKey = 'auto' | 'suggested' | 'included'
|
||||
const collapsedSections = ref<Set<SectionKey>>(new Set())
|
||||
|
||||
function storageKey(): string | null {
|
||||
const id = store.currentConversation?.id
|
||||
return id ? `fa_chat_ctx_collapsed_${id}` : null
|
||||
}
|
||||
|
||||
function loadCollapsed() {
|
||||
const key = storageKey()
|
||||
if (!key) { collapsedSections.value = new Set(); return }
|
||||
try {
|
||||
const raw = localStorage.getItem(key)
|
||||
if (!raw) { collapsedSections.value = new Set(); return }
|
||||
const arr = JSON.parse(raw) as SectionKey[]
|
||||
collapsedSections.value = new Set(arr)
|
||||
} catch {
|
||||
collapsedSections.value = new Set()
|
||||
}
|
||||
}
|
||||
|
||||
function saveCollapsed() {
|
||||
const key = storageKey()
|
||||
if (!key) return
|
||||
try {
|
||||
localStorage.setItem(key, JSON.stringify([...collapsedSections.value]))
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function toggleSection(key: SectionKey) {
|
||||
const next = new Set(collapsedSections.value)
|
||||
if (next.has(key)) next.delete(key)
|
||||
else next.add(key)
|
||||
collapsedSections.value = next
|
||||
saveCollapsed()
|
||||
}
|
||||
|
||||
watch(() => store.currentConversation?.id, () => loadCollapsed(), { immediate: true })
|
||||
|
||||
// ── Empty-state (full variant, fresh/empty conversation) ─────────────────────
|
||||
const showEmptyState = computed(
|
||||
() =>
|
||||
props.variant === 'full'
|
||||
&& !props.briefingMode
|
||||
&& !props.projectId
|
||||
&& !store.streaming
|
||||
&& (store.currentConversation?.messages.length ?? 0) === 0
|
||||
)
|
||||
|
||||
const recentConversations = computed(() => {
|
||||
const currentId = store.currentConversation?.id
|
||||
return store.conversations
|
||||
.filter((c) => c.id !== currentId && c.message_count > 0)
|
||||
.slice(0, 5)
|
||||
})
|
||||
|
||||
function startVoiceMode() {
|
||||
window.dispatchEvent(new CustomEvent('voice:ptt-toggle'))
|
||||
}
|
||||
|
||||
// ── Send ──────────────────────────────────────────────────────────────────────
|
||||
const inputBarRef = ref<InstanceType<typeof ChatInputBar> | null>(null)
|
||||
|
||||
async function onSubmit(payload: { content: string; contextNoteId?: number }) {
|
||||
if (props.variant === 'widget') {
|
||||
await widgetSend(payload)
|
||||
return
|
||||
}
|
||||
if (!store.currentConversation) return
|
||||
await store.sendMessage(
|
||||
payload.content,
|
||||
payload.contextNoteId,
|
||||
includedNoteIds.value.size ? [...includedNoteIds.value] : undefined,
|
||||
false,
|
||||
undefined,
|
||||
excludedNoteIds.value.length ? excludedNoteIds.value : undefined,
|
||||
props.projectId ?? store.ragProjectId,
|
||||
props.projectId ?? undefined,
|
||||
)
|
||||
scrollToBottom()
|
||||
nextTick(() => inputBarRef.value?.focus())
|
||||
}
|
||||
|
||||
// ── Widget state ──────────────────────────────────────────────────────────────
|
||||
const widgetConvId = ref<number | null>(null)
|
||||
const widgetQuery = ref('')
|
||||
const widgetDone = ref(false)
|
||||
const widgetFinalContent = ref('')
|
||||
const widgetFinalToolCalls = ref<ToolCallRecord[]>([])
|
||||
|
||||
const isConversational = computed(
|
||||
() => widgetDone.value && widgetFinalToolCalls.value.length === 0
|
||||
)
|
||||
|
||||
function clearWidget() {
|
||||
widgetConvId.value = null
|
||||
widgetDone.value = false
|
||||
widgetQuery.value = ''
|
||||
widgetFinalContent.value = ''
|
||||
widgetFinalToolCalls.value = []
|
||||
}
|
||||
|
||||
async function widgetSend(payload: { content: string; contextNoteId?: number }) {
|
||||
widgetConvId.value = null
|
||||
widgetDone.value = false
|
||||
widgetFinalContent.value = ''
|
||||
widgetFinalToolCalls.value = []
|
||||
widgetQuery.value = payload.content
|
||||
|
||||
const conv = await store.createConversation()
|
||||
await store.fetchConversation(conv.id)
|
||||
widgetConvId.value = conv.id
|
||||
emit('conversation-started', conv.id)
|
||||
|
||||
await store.sendMessage(payload.content, payload.contextNoteId, undefined, false)
|
||||
|
||||
const msgs = store.currentConversation?.messages ?? []
|
||||
const lastAssistant = [...msgs].reverse().find((m: Message) => m.role === 'assistant')
|
||||
widgetFinalContent.value = lastAssistant?.content ?? ''
|
||||
widgetFinalToolCalls.value = (lastAssistant?.tool_calls ?? []) as ToolCallRecord[]
|
||||
widgetDone.value = true
|
||||
}
|
||||
|
||||
// ── Save as note ──────────────────────────────────────────────────────────────
|
||||
async function handleSaveAsNote(messageId: number) {
|
||||
try {
|
||||
await store.saveMessageAsNote(messageId)
|
||||
const { useToastStore } = await import('@/stores/toast')
|
||||
useToastStore().show('Saved as note')
|
||||
} catch {
|
||||
const { useToastStore } = await import('@/stores/toast')
|
||||
useToastStore().show('Failed to save as note', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
// ── Lifecycle ─────────────────────────────────────────────────────────────────
|
||||
onMounted(() => {
|
||||
if (props.autoFocus) nextTick(() => inputBarRef.value?.focus())
|
||||
})
|
||||
|
||||
// ── Exposed ───────────────────────────────────────────────────────────────────
|
||||
function focus() {
|
||||
inputBarRef.value?.focus()
|
||||
}
|
||||
|
||||
function prefill(text: string) {
|
||||
inputBarRef.value?.prefill(text)
|
||||
}
|
||||
|
||||
async function send(text: string) {
|
||||
await onSubmit({ content: text })
|
||||
}
|
||||
|
||||
// ── Briefing slot separator helper ────────────────────────────────────────────
|
||||
function hasEarlierBriefingSlot(index: number): boolean {
|
||||
const msgs = store.currentConversation?.messages ?? []
|
||||
for (let i = 0; i < index; i++) {
|
||||
const m = msgs[i]
|
||||
const meta = m?.metadata as Record<string, unknown> | null | undefined
|
||||
if (
|
||||
m?.role === 'assistant' &&
|
||||
meta?.briefing_slot != null &&
|
||||
!meta?.briefing_intermediate
|
||||
) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSidebar, hasContextData })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ═══════════════════════════════ FULL VARIANT ══════════════════════════════ -->
|
||||
<template v-if="variant === 'full'">
|
||||
<div class="chat-full">
|
||||
<!-- Message list -->
|
||||
<div ref="messagesEl" class="messages-container">
|
||||
<div class="messages-inner">
|
||||
<template
|
||||
v-for="(msg, index) in store.currentConversation?.messages ?? []"
|
||||
:key="msg.id"
|
||||
>
|
||||
<!-- Briefing slot separator: before any non-first slot message (skip intermediate tool-call rows) -->
|
||||
<div
|
||||
v-if="briefingMode && msg.role === 'assistant' && msg.metadata?.briefing_slot && !msg.metadata?.briefing_intermediate && hasEarlierBriefingSlot(index)"
|
||||
class="briefing-slot-separator"
|
||||
></div>
|
||||
<ChatMessage
|
||||
:message="msg"
|
||||
@save-as-note="handleSaveAsNote"
|
||||
/>
|
||||
</template>
|
||||
<!-- Streaming bubble -->
|
||||
<ChatStreamingBubble v-if="store.streaming" />
|
||||
<!-- Queued messages -->
|
||||
<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()">
|
||||
Cancel {{ store.queuedMessages.length }} queued
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="showEmptyState" class="chat-empty-state">
|
||||
<h2 class="empty-greeting">What's on your mind?</h2>
|
||||
<div v-if="recentConversations.length" class="empty-recent">
|
||||
<div class="empty-section-label">Jump back in</div>
|
||||
<router-link
|
||||
v-for="conv in recentConversations"
|
||||
:key="conv.id"
|
||||
:to="`/chat/${conv.id}`"
|
||||
class="empty-recent-item"
|
||||
>
|
||||
<span class="empty-recent-title">{{ conv.title || 'Untitled conversation' }}</span>
|
||||
<span class="empty-recent-count">{{ conv.message_count }} msg</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<button class="empty-voice-btn" @click="startVoiceMode" title="Start in voice mode">
|
||||
<Mic class="voice-icon" :size="16" />
|
||||
<span>Start in voice mode</span>
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
v-else-if="!store.currentConversation?.messages.length && !store.streaming"
|
||||
class="empty-msg"
|
||||
>Start a conversation.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Context sidebar (full, non-briefing, non-workspace) -->
|
||||
<aside v-if="hasContextSidebar" class="context-sidebar">
|
||||
<template v-if="autoInjectedNotes.length">
|
||||
<button
|
||||
class="context-sidebar-header"
|
||||
:class="{ collapsed: collapsedSections.has('auto') }"
|
||||
@click="toggleSection('auto')"
|
||||
>
|
||||
<ChevronDown class="chev" :size="16" />
|
||||
<span>Auto-included</span>
|
||||
<span class="section-count">{{ autoInjectedNotes.length }}</span>
|
||||
</button>
|
||||
<div v-show="!collapsedSections.has('auto')">
|
||||
<div v-for="note in autoInjectedNotes" :key="note.id" class="context-note context-note-auto">
|
||||
<span class="auto-pill" title="Auto-included by relevance">AUTO</span>
|
||||
<router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
|
||||
<span
|
||||
v-if="note.score != null"
|
||||
class="context-note-score"
|
||||
:class="{ 'score-high': note.score >= 0.75, 'score-medium': note.score >= 0.60 && note.score < 0.75, 'score-low': note.score < 0.60 }"
|
||||
>{{ Math.round(note.score * 100) }}%</span>
|
||||
<button class="context-note-remove" @click="excludeAutoNote(note.id)" title="Remove from context"><X :size="16" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="suggestedNotes.length">
|
||||
<button
|
||||
class="context-sidebar-header"
|
||||
:class="{ collapsed: collapsedSections.has('suggested'), 'context-sidebar-header-gap': autoInjectedNotes.length }"
|
||||
@click="toggleSection('suggested')"
|
||||
>
|
||||
<ChevronDown class="chev" :size="16" />
|
||||
<span>Suggested</span>
|
||||
<span class="section-count">{{ suggestedNotes.length }}</span>
|
||||
</button>
|
||||
<div v-show="!collapsedSections.has('suggested')">
|
||||
<div v-for="note in suggestedNotes" :key="note.id" class="context-note context-note-suggested">
|
||||
<router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
|
||||
<span
|
||||
v-if="note.score != null"
|
||||
class="context-note-score"
|
||||
:class="{ 'score-high': note.score >= 0.75, 'score-medium': note.score >= 0.60 && note.score < 0.75, 'score-low': note.score < 0.60 }"
|
||||
>{{ Math.round(note.score * 100) }}%</span>
|
||||
<button class="context-note-add" @click="includeNote(note)" title="Add to context">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="includedNotes.length">
|
||||
<button
|
||||
class="context-sidebar-header"
|
||||
:class="{ collapsed: collapsedSections.has('included'), 'context-sidebar-header-gap': autoInjectedNotes.length || suggestedNotes.length }"
|
||||
@click="toggleSection('included')"
|
||||
>
|
||||
<ChevronDown class="chev" :size="16" />
|
||||
<span>In Context</span>
|
||||
<span class="section-count">{{ includedNotes.length }}</span>
|
||||
</button>
|
||||
<div v-show="!collapsedSections.has('included')">
|
||||
<div v-for="note in includedNotes" :key="note.id" class="context-note context-note-included">
|
||||
<router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
|
||||
<button class="context-note-remove" @click="removeIncludedNote(note.id)" title="Remove from context"><X :size="16" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</aside>
|
||||
|
||||
<!-- Input area (hidden when readOnly) -->
|
||||
<div v-if="!readOnly" class="input-wrapper">
|
||||
<!-- Unified input bar -->
|
||||
<ChatInputBar
|
||||
ref="inputBarRef"
|
||||
:placeholder="placeholder"
|
||||
:briefing-mode="briefingMode"
|
||||
@submit="onSubmit"
|
||||
@abort="store.cancelGeneration()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ══════════════════════════════ WIDGET VARIANT ══════════════════════════════ -->
|
||||
<template v-else>
|
||||
<ChatInputBar
|
||||
ref="inputBarRef"
|
||||
pill
|
||||
:placeholder="placeholder ?? 'Start a new chat… (Enter to send)'"
|
||||
:briefing-mode="false"
|
||||
@submit="onSubmit"
|
||||
@abort="store.cancelGeneration()"
|
||||
/>
|
||||
|
||||
<!-- Inline response area -->
|
||||
<div v-if="widgetConvId" class="widget-response">
|
||||
<div class="widget-query">{{ widgetQuery }}</div>
|
||||
|
||||
<!-- Tool calls -->
|
||||
<div v-if="store.streaming && store.streamingToolCalls.length" class="widget-tool-calls">
|
||||
<ToolCallCard v-for="(tc, i) in store.streamingToolCalls" :key="i" :tool-call="tc" />
|
||||
</div>
|
||||
<div v-else-if="widgetDone && widgetFinalToolCalls.length" class="widget-tool-calls">
|
||||
<ToolCallCard v-for="(tc, i) in widgetFinalToolCalls" :key="i" :tool-call="tc" />
|
||||
</div>
|
||||
|
||||
<!-- Streaming / final text -->
|
||||
<div v-if="store.streaming" class="widget-text streaming">
|
||||
<div v-if="store.streamingStatus && !store.streamingContent" class="widget-status">
|
||||
<span class="widget-status-dot"></span>{{ store.streamingStatus }}
|
||||
</div>
|
||||
<span v-else-if="store.streamingContent">{{ store.streamingContent }}</span>
|
||||
<span v-else class="thinking-dots">...</span>
|
||||
</div>
|
||||
<div v-else-if="widgetDone && widgetFinalContent" class="widget-text">
|
||||
{{ widgetFinalContent }}
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="widget-actions" :class="{ conversational: isConversational }">
|
||||
<router-link
|
||||
:to="`/chat/${widgetConvId}`"
|
||||
class="btn-open-chat"
|
||||
:class="{ prominent: isConversational }"
|
||||
>{{ isConversational ? 'Continue the conversation →' : 'Think it through in Chat →' }}</router-link>
|
||||
<button class="btn-clear-response" @click="clearWidget">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── Full variant layout ──
|
||||
* Single grid owns the reading column + context sidebar + input bar so
|
||||
* messages and input bar share one centered reading track while the
|
||||
* context sidebar spans the full height from header to bottom of view.
|
||||
* Reading column is always centered (3-column grid: 1fr | content | 1fr).
|
||||
* The context sidebar overlays the right gutter so it never shifts layout.
|
||||
*/
|
||||
.chat-full {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
1fr
|
||||
minmax(0, var(--chat-reading-width))
|
||||
1fr;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1rem 0.75rem;
|
||||
mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
|
||||
}
|
||||
.messages-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Briefing slot separator */
|
||||
.briefing-slot-separator {
|
||||
height: 1px;
|
||||
margin: 1.25rem 0 0.75rem;
|
||||
background: var(--color-border, #333);
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* Context sidebar — overlays right gutter, never shifts reading column */
|
||||
.context-sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: var(--chat-context-sidebar-width);
|
||||
border-left: 1px solid var(--color-border);
|
||||
padding: 0.75rem 0.5rem;
|
||||
overflow-y: auto;
|
||||
background: var(--color-bg-secondary);
|
||||
font-size: 0.78rem;
|
||||
z-index: 2;
|
||||
}
|
||||
.context-sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.15rem 0.1rem;
|
||||
font-family: inherit;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.35rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.context-sidebar-header:hover { color: var(--color-text); }
|
||||
.context-sidebar-header .chev {
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.context-sidebar-header.collapsed .chev {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.context-sidebar-header .section-count {
|
||||
margin-left: auto;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
background: var(--color-bg);
|
||||
padding: 0.05rem 0.3rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.context-sidebar-header-gap { margin-top: 0.75rem; }
|
||||
.context-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
padding: 0.2rem 0.35rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.context-note-auto {
|
||||
background: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.context-note-included {
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
border-left: 2px solid var(--color-primary);
|
||||
}
|
||||
.auto-pill {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.05rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.context-note-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.context-note-name:hover { color: var(--color-primary); }
|
||||
.context-note-score {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 4px;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
.score-high { color: #22c55e; }
|
||||
.score-medium { color: #f59e0b; }
|
||||
.score-low { color: var(--color-text-muted); }
|
||||
.context-note-remove, .context-note-add {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
padding: 0 0.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.context-note-remove:hover { color: #ef4444; }
|
||||
.context-note-add:hover { color: var(--color-primary); }
|
||||
|
||||
/* Input wrapper — lives in the same reading column as messages */
|
||||
.input-wrapper {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 0.5rem 1rem 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
/* Queued messages */
|
||||
.queued-message { opacity: 0.45; }
|
||||
.queued-bubble {
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.queued-badge {
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.queued-clear-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
.queued-clear-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.empty-msg {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
}
|
||||
|
||||
.chat-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1.5rem;
|
||||
padding: 3rem 1rem 2rem;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.empty-greeting {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-weight: 400;
|
||||
font-size: 1.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-section-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.empty-recent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.empty-recent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 0.9rem;
|
||||
border-radius: var(--radius-md, 10px);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-elevated, rgba(255, 255, 255, 0.02));
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.empty-recent-item + .empty-recent-item {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.empty-recent-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(91, 74, 138, 0.05);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.empty-recent-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.empty-recent-count {
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty-voice-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.75rem 1.2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.empty-voice-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: linear-gradient(135deg, #5B4A8A, #3F3560);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 16px rgba(91, 74, 138, 0.35);
|
||||
}
|
||||
|
||||
.empty-voice-btn .voice-icon {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* ── Widget variant ── */
|
||||
.widget-response {
|
||||
margin-top: 0.75rem;
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.widget-query {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.widget-text {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.55;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.widget-text.streaming { color: var(--color-text-muted); }
|
||||
.thinking-dots { color: var(--color-text-muted); letter-spacing: 0.2em; }
|
||||
.widget-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.widget-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
animation: blink 1s infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
|
||||
.widget-tool-calls { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.widget-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-open-chat {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-open-chat:hover { color: var(--color-primary); }
|
||||
.btn-open-chat.prominent {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-clear-response {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
}
|
||||
.btn-clear-response:hover { color: var(--color-text); }
|
||||
|
||||
/* Streaming bubble styles — applied via :deep to ChatStreamingBubble children */
|
||||
:deep(.streaming-bubble) {
|
||||
max-width: 85%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 16px 16px 16px 4px;
|
||||
background: var(--color-bg-card);
|
||||
border-left: 2px solid var(--color-primary);
|
||||
box-shadow: 0 1px 4px var(--color-shadow);
|
||||
}
|
||||
:deep(.streaming-tool-calls) { margin-bottom: 0.5rem; }
|
||||
:deep(.streaming-status-line) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
:deep(.streaming-status-dot) {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
animation: blink 1s infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
:deep(.thinking-block) {
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
:deep(.thinking-summary) {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
background: var(--color-bg-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
:deep(.thinking-summary::-webkit-details-marker) { display: none; }
|
||||
:deep(.thinking-text) {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: var(--color-bg-secondary);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
:deep(.typing-indicator) {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
animation: blink 1s infinite;
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import { useSettingsStore } from '@/stores/settings'
|
||||
import { renderMarkdown } from '@/utils/markdown'
|
||||
import ToolCallCard from '@/components/ToolCallCard.vue'
|
||||
import ToolConfirmCard from '@/components/ToolConfirmCard.vue'
|
||||
|
||||
const store = useChatStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const streamingRendered = computed(() => {
|
||||
if (!store.streamingContent) return ''
|
||||
return renderMarkdown(store.streamingContent)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-message role-assistant">
|
||||
<div class="message-bubble streaming-bubble">
|
||||
<div class="message-header">
|
||||
<span class="role-label">{{ settingsStore.assistantName }}</span>
|
||||
</div>
|
||||
<div v-if="store.streamingToolCalls.length" class="streaming-tool-calls">
|
||||
<ToolCallCard
|
||||
v-for="(tc, i) in store.streamingToolCalls"
|
||||
:key="i"
|
||||
:tool-call="tc"
|
||||
/>
|
||||
</div>
|
||||
<ToolConfirmCard
|
||||
v-if="store.streamingPendingTool"
|
||||
:pending-tool="store.streamingPendingTool"
|
||||
@accept="store.confirmTool(true)"
|
||||
@decline="store.confirmTool(false)"
|
||||
/>
|
||||
<div v-if="store.streamingStatus" class="streaming-status-line">
|
||||
<span class="streaming-status-dot"></span>
|
||||
{{ store.streamingStatus }}
|
||||
</div>
|
||||
<details
|
||||
v-if="store.streamingThinking"
|
||||
class="thinking-block"
|
||||
:open="!store.streamingContent"
|
||||
>
|
||||
<summary class="thinking-summary">Reasoning</summary>
|
||||
<pre class="thinking-text">{{ store.streamingThinking }}</pre>
|
||||
</details>
|
||||
<div class="message-content prose" v-html="streamingRendered"></div>
|
||||
<span
|
||||
v-if="!store.streamingStatus && !store.streamingThinking && !store.streamingContent"
|
||||
class="typing-indicator"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,814 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { apiPost, getEvent } from "@/api/client";
|
||||
import type { EventEntry } from "@/api/client";
|
||||
import type { ToolCallRecord } from "@/types/chat";
|
||||
import EventSlideOver from "@/components/EventSlideOver.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
toolCall: ToolCallRecord;
|
||||
}>();
|
||||
|
||||
const appliedTags = ref<Set<string>>(new Set());
|
||||
const applyingTag = ref<string | null>(null);
|
||||
const confirmState = ref<"idle" | "creating" | "created" | "denied">("idle");
|
||||
|
||||
const label = computed(() => {
|
||||
if (props.toolCall.status === "declined") return "Declined";
|
||||
if (props.toolCall.result.requires_confirmation) return "Similar content found";
|
||||
if (!props.toolCall.result.success) return "Error";
|
||||
switch (props.toolCall.result.type) {
|
||||
case "task": return "Created task";
|
||||
case "note": return "Created note";
|
||||
case "note_updated": return "Updated note";
|
||||
case "note_deleted": return "Deleted note";
|
||||
case "task_deleted": return "Deleted task";
|
||||
case "note_content": return "Note";
|
||||
case "notes_list": return "Notes";
|
||||
case "tasks": return "Tasks";
|
||||
case "todo_updated": return "Updated todo";
|
||||
case "search": return "Searched notes";
|
||||
case "event": return "Created event";
|
||||
case "events": return "Found events";
|
||||
case "event_updated": return "Updated event";
|
||||
case "event_deleted": return "Deleted event";
|
||||
case "calendars": return "Calendars";
|
||||
case "todo": return "Created todo";
|
||||
case "todos": return "Calendar todos";
|
||||
case "todo_completed": return "Completed todo";
|
||||
case "todo_deleted": return "Deleted todo";
|
||||
case "web_search": return "Web search";
|
||||
case "research_pending": return "Research started";
|
||||
case "research_note": return "Research note";
|
||||
case "image_search": return "Image search";
|
||||
default: return "Tool call";
|
||||
}
|
||||
});
|
||||
|
||||
const title = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data) return null;
|
||||
if (typeof data.title === "string") return data.title;
|
||||
return null;
|
||||
});
|
||||
|
||||
const linkTo = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || typeof data.id !== "number") return null;
|
||||
return `/notes/${data.id}`;
|
||||
});
|
||||
|
||||
const noteId = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || typeof data.id !== "number") return null;
|
||||
return data.id;
|
||||
});
|
||||
|
||||
const suggestedTags = computed(() => props.toolCall.result.suggested_tags ?? []);
|
||||
|
||||
const eventData = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "event") return null;
|
||||
return data as { id?: number; title: string; start_dt?: string; end_dt?: string; location?: string; color?: string };
|
||||
});
|
||||
|
||||
const updatedEvent = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "event_updated") return null;
|
||||
return data as { id?: number; title: string; start_dt?: string; end_dt?: string; location?: string; color?: string };
|
||||
});
|
||||
|
||||
const deletedEvent = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "event_deleted") return null;
|
||||
return data as { id?: number; title: string };
|
||||
});
|
||||
|
||||
const calendarList = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "calendars") return null;
|
||||
const calendars = data.calendars as Array<{ name: string }> | undefined;
|
||||
return calendars?.map((c) => c.name) ?? [];
|
||||
});
|
||||
|
||||
const todoData = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
const type = props.toolCall.result.type;
|
||||
if (!data || (type !== "todo" && type !== "todo_completed" && type !== "todo_deleted" && type !== "todo_updated")) return null;
|
||||
return data as { summary: string; due?: string; status?: string };
|
||||
});
|
||||
|
||||
const todoList = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "todos") return null;
|
||||
return (data.todos as Array<{ summary: string; due?: string; status?: string }> | undefined) ?? [];
|
||||
});
|
||||
|
||||
const todoCount = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "todos") return 0;
|
||||
return (data.count as number) ?? 0;
|
||||
});
|
||||
|
||||
const eventList = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "events") return null;
|
||||
return (data.events as Array<{ id?: number; title: string; start_dt?: string; end_dt?: string; location?: string; color?: string }> | undefined) ?? [];
|
||||
});
|
||||
|
||||
const eventCount = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "events") return 0;
|
||||
return (data.count as number) ?? 0;
|
||||
});
|
||||
|
||||
function formatEventTime(iso: string): string {
|
||||
if (!iso) return "";
|
||||
try {
|
||||
return new Date(iso).toLocaleString(undefined, {
|
||||
weekday: "short", month: "short", day: "numeric",
|
||||
hour: "numeric", minute: "2-digit",
|
||||
});
|
||||
} catch { return iso; }
|
||||
}
|
||||
|
||||
const taskList = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "tasks") return null;
|
||||
return (data.results as Array<{ id: number; title: string; status: string; priority: string; due_date?: string }> | undefined) ?? [];
|
||||
});
|
||||
|
||||
const taskCount = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "tasks") return 0;
|
||||
return (data.total as number) ?? 0;
|
||||
});
|
||||
|
||||
const webSearch = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "web_search") return null;
|
||||
return data as { query: string; results: { url: string; title: string; snippet: string }[]; count: number };
|
||||
});
|
||||
|
||||
const searchResults = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "search") return null;
|
||||
const results = data.results as Array<{ id: number; title: string; type: string }> | undefined;
|
||||
return results && results.length > 0 ? results : null;
|
||||
});
|
||||
|
||||
const deletedNote = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
const type = props.toolCall.result.type;
|
||||
if (!data || (type !== "note_deleted" && type !== "task_deleted")) return null;
|
||||
return data as { id: number; title: string };
|
||||
});
|
||||
|
||||
const noteContent = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "note_content") return null;
|
||||
return data as { id: number; title: string; body: string; tags: string[] };
|
||||
});
|
||||
|
||||
const noteList = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "notes_list") return null;
|
||||
return (data.results as Array<{ id: number; title: string; tags: string[]; preview: string }> | undefined) ?? [];
|
||||
});
|
||||
|
||||
const noteListCount = computed(() => {
|
||||
const data = props.toolCall.result.data;
|
||||
if (!data || props.toolCall.result.type !== "notes_list") return 0;
|
||||
return (data.total as number) ?? 0;
|
||||
});
|
||||
|
||||
// ── Collapse logic ───────────────────────────────────────────────────────────
|
||||
|
||||
// Cards with rich expandable content
|
||||
const hasDetail = computed(() => {
|
||||
if (props.toolCall.status === "running") return false;
|
||||
return (
|
||||
(noteContent.value !== null && noteContent.value.tags.length > 0) ||
|
||||
(noteList.value !== null && noteList.value.length > 0) ||
|
||||
searchResults.value !== null ||
|
||||
(taskList.value !== null && taskList.value.length > 0) ||
|
||||
(eventList.value !== null && eventList.value.length > 0) ||
|
||||
(todoList.value !== null && todoList.value.length > 0) ||
|
||||
webSearch.value !== null ||
|
||||
(calendarList.value !== null && calendarList.value.length > 0) ||
|
||||
suggestedTags.value.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// Collapsed by default for completed calls; errors and running stay open
|
||||
const collapsed = ref(
|
||||
props.toolCall.status === "success" || props.toolCall.status === "declined"
|
||||
);
|
||||
|
||||
// Auto-collapse when a running tool call completes
|
||||
watch(() => props.toolCall.status, (s) => {
|
||||
if (s === "success") collapsed.value = true;
|
||||
});
|
||||
|
||||
function toggle() {
|
||||
if (hasDetail.value) collapsed.value = !collapsed.value;
|
||||
}
|
||||
|
||||
async function confirmDuplicate() {
|
||||
if (confirmState.value !== "idle") return;
|
||||
confirmState.value = "creating";
|
||||
const args = props.toolCall.arguments as Record<string, unknown>;
|
||||
const isTask = !!(args.status);
|
||||
const endpoint = isTask ? "/api/tasks" : "/api/notes";
|
||||
const payload: Record<string, unknown> = {
|
||||
title: args.title,
|
||||
body: args.body ?? "",
|
||||
tags: args.tags ?? [],
|
||||
...(args.due_date ? { due_date: args.due_date } : {}),
|
||||
...(args.priority ? { priority: args.priority } : {}),
|
||||
...(args.project ? { project: args.project } : {}),
|
||||
...(isTask ? { status: args.status ?? "todo" } : {}),
|
||||
};
|
||||
try {
|
||||
await apiPost(endpoint, payload);
|
||||
confirmState.value = "created";
|
||||
} catch {
|
||||
confirmState.value = "idle";
|
||||
}
|
||||
}
|
||||
|
||||
function denyDuplicate() {
|
||||
confirmState.value = "denied";
|
||||
}
|
||||
|
||||
async function applyTag(tag: string) {
|
||||
if (!noteId.value || appliedTags.value.has(tag) || applyingTag.value) return;
|
||||
applyingTag.value = tag;
|
||||
try {
|
||||
await apiPost(`/api/notes/${noteId.value}/append-tag`, { tag });
|
||||
appliedTags.value.add(tag);
|
||||
} catch {
|
||||
// silently fail
|
||||
} finally {
|
||||
applyingTag.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Event slide-over ─────────────────────────────────────────────────────────
|
||||
|
||||
const eventSlideOverOpen = ref(false);
|
||||
const eventSlideOverEntry = ref<EventEntry | null>(null);
|
||||
|
||||
async function openEventSlideOver(id: number | undefined) {
|
||||
if (!id) return;
|
||||
try {
|
||||
const entry = await getEvent(id);
|
||||
eventSlideOverEntry.value = entry;
|
||||
eventSlideOverOpen.value = true;
|
||||
} catch {
|
||||
// silently fail — event may have been deleted
|
||||
}
|
||||
}
|
||||
|
||||
function closeEventSlideOver(changed = false) {
|
||||
eventSlideOverOpen.value = false;
|
||||
if (changed) {
|
||||
document.dispatchEvent(new Event("fable:calendar-changed"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="tool-call-card"
|
||||
:class="{
|
||||
error: toolCall.status === 'error' && !toolCall.result.requires_confirmation,
|
||||
'requires-confirm': toolCall.result.requires_confirmation,
|
||||
declined: toolCall.status === 'declined',
|
||||
running: toolCall.status === 'running',
|
||||
collapsible: hasDetail,
|
||||
}"
|
||||
>
|
||||
<!-- ── Header row (always visible) ─────────────────────────── -->
|
||||
<div class="tool-card-header" :class="{ clickable: hasDetail }" @click="toggle">
|
||||
<span class="tool-label">{{ label }}</span>
|
||||
|
||||
<!-- Inline summary content -->
|
||||
<template v-if="toolCall.status === 'declined'">
|
||||
<span class="tool-declined-name">
|
||||
{{ toolCall.arguments.title ?? toolCall.arguments.summary ?? toolCall.arguments.query ?? toolCall.function }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="toolCall.result.requires_confirmation">
|
||||
<router-link
|
||||
v-if="toolCall.result.similar_note"
|
||||
:to="`/notes/${toolCall.result.similar_note.id}`"
|
||||
class="tool-link"
|
||||
@click.stop
|
||||
>{{ toolCall.result.similar_note.title }}</router-link>
|
||||
<span v-else class="tool-error">{{ toolCall.result.error }}</span>
|
||||
<template v-if="confirmState === 'created'">
|
||||
<span class="confirm-created">✓ Created</span>
|
||||
</template>
|
||||
<template v-else-if="confirmState === 'denied'">
|
||||
<span class="confirm-denied">Skipped</span>
|
||||
</template>
|
||||
<template v-else-if="confirmState !== 'creating'">
|
||||
<button class="btn-confirm-duplicate" @click.stop="confirmDuplicate">Create anyway</button>
|
||||
<button class="btn-deny-duplicate" @click.stop="denyDuplicate">Skip</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="tool-summary-count">Creating…</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="toolCall.status === 'error'">
|
||||
<span class="tool-error">{{ toolCall.result.error }}</span>
|
||||
</template>
|
||||
<template v-else-if="deletedNote">
|
||||
<span class="tool-deleted">{{ deletedNote.title || "Untitled" }}</span>
|
||||
</template>
|
||||
<template v-else-if="noteContent">
|
||||
<router-link :to="`/notes/${noteContent.id}`" class="tool-link" @click.stop>
|
||||
{{ noteContent.title || "Untitled" }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-else-if="noteList !== null">
|
||||
<span class="tool-summary-count">{{ noteListCount }} found</span>
|
||||
</template>
|
||||
<template v-else-if="searchResults">
|
||||
<span class="tool-summary-count">
|
||||
{{ (toolCall.result.data?.count as number) ?? (toolCall.result.data?.total as number) ?? 0 }} found
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="eventData">
|
||||
<button v-if="eventData.id" class="tool-event-btn" @click.stop="openEventSlideOver(eventData.id)">
|
||||
<span class="tool-event-dot" v-if="eventData.color" :style="{ background: eventData.color }"></span>
|
||||
<span class="tool-event-title">{{ eventData.title }}</span>
|
||||
<span v-if="eventData.start_dt" class="tool-event-time">{{ formatEventTime(eventData.start_dt) }}</span>
|
||||
</button>
|
||||
<template v-else>
|
||||
<span class="tool-event-title">{{ eventData.title }}</span>
|
||||
<span v-if="eventData.start_dt" class="tool-event-time">{{ formatEventTime(eventData.start_dt) }}</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="updatedEvent">
|
||||
<button v-if="updatedEvent.id" class="tool-event-btn" @click.stop="openEventSlideOver(updatedEvent.id)">
|
||||
<span class="tool-event-dot" v-if="updatedEvent.color" :style="{ background: updatedEvent.color }"></span>
|
||||
<span class="tool-event-title">{{ updatedEvent.title }}</span>
|
||||
<span v-if="updatedEvent.start_dt" class="tool-event-time">{{ formatEventTime(updatedEvent.start_dt) }}</span>
|
||||
</button>
|
||||
<template v-else>
|
||||
<span class="tool-event-title">{{ updatedEvent.title }}</span>
|
||||
<span v-if="updatedEvent.start_dt" class="tool-event-time">{{ formatEventTime(updatedEvent.start_dt) }}</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="deletedEvent">
|
||||
<span class="tool-deleted">{{ deletedEvent.title }}</span>
|
||||
</template>
|
||||
<template v-else-if="calendarList !== null">
|
||||
<span class="tool-summary-count">{{ calendarList.length }} calendar{{ calendarList.length !== 1 ? "s" : "" }}</span>
|
||||
</template>
|
||||
<template v-else-if="todoData">
|
||||
<span :class="{ 'tool-deleted': toolCall.result.type === 'todo_deleted', 'tool-completed': toolCall.result.type === 'todo_completed' }">
|
||||
{{ todoData.summary }}
|
||||
</span>
|
||||
<span v-if="todoData.due" class="tool-event-time">{{ formatEventTime(todoData.due) }}</span>
|
||||
</template>
|
||||
<template v-else-if="todoList !== null">
|
||||
<span class="tool-summary-count">{{ todoCount }} found</span>
|
||||
</template>
|
||||
<template v-else-if="taskList !== null">
|
||||
<span class="tool-summary-count">{{ taskCount }} found</span>
|
||||
</template>
|
||||
<template v-else-if="eventList !== null">
|
||||
<span class="tool-summary-count">{{ eventCount }} found</span>
|
||||
</template>
|
||||
<template v-else-if="webSearch">
|
||||
<span class="tool-summary-count">
|
||||
{{ webSearch.count }} result{{ webSearch.count !== 1 ? "s" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="linkTo">
|
||||
<router-link :to="linkTo" class="tool-link" @click.stop>{{ title }}</router-link>
|
||||
</template>
|
||||
|
||||
<!-- Chevron toggle -->
|
||||
<span v-if="hasDetail" class="tool-chevron" :class="{ open: !collapsed }">▶</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Detail section (expandable) ─────────────────────────── -->
|
||||
<div v-if="hasDetail" v-show="!collapsed" class="tool-card-detail">
|
||||
<template v-if="noteContent && noteContent.tags.length">
|
||||
<span class="tool-note-tags">
|
||||
<span v-for="tag in noteContent.tags" :key="tag" class="tool-note-tag">#{{ tag }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="noteList !== null && noteList.length > 0">
|
||||
<div class="tool-search-results">
|
||||
<router-link
|
||||
v-for="n in noteList.slice(0, 8)"
|
||||
:key="n.id"
|
||||
:to="`/notes/${n.id}`"
|
||||
class="tool-search-item"
|
||||
>{{ n.title || "Untitled" }}</router-link>
|
||||
<span v-if="noteList.length > 8" class="tool-event-more">+{{ noteList.length - 8 }} more</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="searchResults">
|
||||
<div class="tool-search-results">
|
||||
<router-link
|
||||
v-for="r in searchResults"
|
||||
:key="r.id"
|
||||
:to="`/notes/${r.id}`"
|
||||
class="tool-search-item"
|
||||
>{{ r.title || "Untitled" }}</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="todoList !== null && todoList.length > 0">
|
||||
<div class="tool-event-list">
|
||||
<div v-for="(t, i) in todoList.slice(0, 5)" :key="i" class="tool-event-item">
|
||||
<span class="tool-event-item-title">{{ t.summary }}</span>
|
||||
<span v-if="t.due" class="tool-event-item-time">{{ formatEventTime(t.due) }}</span>
|
||||
</div>
|
||||
<div v-if="todoList.length > 5" class="tool-event-more">+{{ todoList.length - 5 }} more</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="taskList !== null && taskList.length > 0">
|
||||
<div class="tool-event-list">
|
||||
<div v-for="(t, i) in taskList.slice(0, 5)" :key="i" class="tool-event-item">
|
||||
<router-link :to="`/tasks/${t.id}`" class="tool-event-item-title">{{ t.title }}</router-link>
|
||||
<span v-if="t.due_date" class="tool-event-item-time">{{ t.due_date }}</span>
|
||||
<span v-if="t.priority && t.priority !== 'none'" class="tool-task-priority" :class="`priority-${t.priority}`">{{ t.priority }}</span>
|
||||
</div>
|
||||
<div v-if="taskList.length > 5" class="tool-event-more">+{{ taskList.length - 5 }} more</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="eventList !== null && eventList.length > 0">
|
||||
<div class="tool-event-cards">
|
||||
<button
|
||||
v-for="(ev, i) in eventList.slice(0, 5)"
|
||||
:key="i"
|
||||
class="tool-event-card"
|
||||
:class="{ clickable: !!ev.id }"
|
||||
@click="openEventSlideOver(ev.id)"
|
||||
>
|
||||
<span class="tool-event-card-dot" :style="ev.color ? { background: ev.color } : {}"></span>
|
||||
<span class="tool-event-card-body">
|
||||
<span class="tool-event-card-title">{{ ev.title }}</span>
|
||||
<span v-if="ev.start_dt" class="tool-event-card-time">{{ formatEventTime(ev.start_dt) }}</span>
|
||||
<span v-if="ev.location" class="tool-event-card-loc">{{ ev.location }}</span>
|
||||
</span>
|
||||
</button>
|
||||
<div v-if="eventList.length > 5" class="tool-event-more">+{{ eventList.length - 5 }} more</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="calendarList !== null">
|
||||
<div class="tool-calendar-list">
|
||||
<span v-for="name in calendarList" :key="name" class="tool-calendar-name">{{ name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="webSearch">
|
||||
<div class="tool-search-results web-search-results">
|
||||
<a
|
||||
v-for="(r, i) in webSearch.results"
|
||||
:key="i"
|
||||
:href="r.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="tool-search-item"
|
||||
>{{ r.title || r.url }}</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Suggested tags always at the bottom of detail -->
|
||||
<div v-if="suggestedTags.length > 0" class="tag-suggestions">
|
||||
<span class="tag-suggestions-label">Suggested tags:</span>
|
||||
<button
|
||||
v-for="tag in suggestedTags"
|
||||
:key="tag"
|
||||
:class="['tag-pill', { applied: appliedTags.has(tag) }]"
|
||||
:disabled="appliedTags.has(tag) || applyingTag === tag"
|
||||
@click="applyTag(tag)"
|
||||
>
|
||||
#{{ tag }}
|
||||
<span v-if="appliedTags.has(tag)" class="tag-check">✓</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suggested tags for non-detail cards (note/task created etc.) -->
|
||||
<div v-if="!hasDetail && suggestedTags.length > 0" class="tag-suggestions">
|
||||
<span class="tag-suggestions-label">Suggested tags:</span>
|
||||
<button
|
||||
v-for="tag in suggestedTags"
|
||||
:key="tag"
|
||||
:class="['tag-pill', { applied: appliedTags.has(tag) }]"
|
||||
:disabled="appliedTags.has(tag) || applyingTag === tag"
|
||||
@click="applyTag(tag)"
|
||||
>
|
||||
#{{ tag }}
|
||||
<span v-if="appliedTags.has(tag)" class="tag-check">✓</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event slide-over (portal-like, fixed positioned) -->
|
||||
<EventSlideOver
|
||||
v-if="eventSlideOverOpen"
|
||||
:event="eventSlideOverEntry"
|
||||
initial-date=""
|
||||
@close="closeEventSlideOver"
|
||||
@created="() => closeEventSlideOver(true)"
|
||||
@updated="() => closeEventSlideOver(true)"
|
||||
@deleted="() => closeEventSlideOver(true)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Inline ToolCallCard renders inside an assistant bubble — the bubble
|
||||
already contains it, so no outer border per the structural-not-decorative
|
||||
rule. Background tint differentiates it; error state gets a left-edge
|
||||
accent the way the assistant bubble itself uses one. */
|
||||
.tool-call-card {
|
||||
display: inline-block;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 10px;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.4rem;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tool-call-card.error {
|
||||
border-left: 3px solid var(--color-danger);
|
||||
}
|
||||
.tool-call-card.declined {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.tool-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
.tool-card-header.clickable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.tool-card-header.clickable:hover {
|
||||
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
|
||||
}
|
||||
|
||||
.tool-label {
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
font-size: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tool-chevron {
|
||||
font-size: 0.55rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-left: auto;
|
||||
padding-left: 0.4rem;
|
||||
transition: transform 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tool-chevron.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.tool-summary-count {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* ── Detail ── */
|
||||
.tool-card-detail {
|
||||
padding: 0.3rem 0.6rem 0.45rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Shared content styles ── */
|
||||
.tool-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.tool-link:hover { text-decoration: underline; }
|
||||
|
||||
.tool-error { color: var(--color-danger, #e74c3c); }
|
||||
|
||||
.tool-declined-name {
|
||||
text-decoration: line-through;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.tool-search-results {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.tool-search-item {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.tool-search-item:hover { text-decoration: underline; }
|
||||
.tool-search-item:not(:last-child)::after {
|
||||
content: ",";
|
||||
color: var(--color-text-muted);
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
.web-search-results {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.web-search-results .tool-search-item::after { content: none; }
|
||||
|
||||
.tool-event-title { font-weight: 500; color: var(--color-text); }
|
||||
.tool-event-time { color: var(--color-text-muted); font-size: 0.75rem; }
|
||||
|
||||
.tool-event-list { display: flex; flex-direction: column; gap: 0.2rem; }
|
||||
.tool-event-item { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
|
||||
.tool-event-item-title { color: var(--color-text); font-size: 0.8rem; }
|
||||
.tool-event-item-time { color: var(--color-text-muted); font-size: 0.75rem; white-space: nowrap; }
|
||||
.tool-event-more { color: var(--color-text-muted); font-size: 0.75rem; }
|
||||
|
||||
.tool-deleted { text-decoration: line-through; opacity: 0.7; }
|
||||
.tool-completed { text-decoration: line-through; color: var(--color-success, #2ecc71); }
|
||||
|
||||
.tool-note-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; }
|
||||
.tool-note-tag { font-size: 0.72rem; color: var(--color-text-muted); }
|
||||
|
||||
.tool-task-priority {
|
||||
font-size: 0.7rem; font-weight: 500; text-transform: uppercase;
|
||||
letter-spacing: 0.04em; padding: 0.1rem 0.3rem; border-radius: 3px;
|
||||
}
|
||||
.priority-high { color: var(--color-danger, #e74c3c); }
|
||||
.priority-medium { color: var(--color-warning, #f59e0b); }
|
||||
.priority-low { color: var(--color-text-muted); }
|
||||
|
||||
.tool-calendar-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
|
||||
.tool-calendar-name {
|
||||
display: inline-block; padding: 0.1rem 0.5rem;
|
||||
border-radius: 999px; background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ── Tag suggestions ── */
|
||||
.tag-suggestions {
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
|
||||
padding: 0.3rem 0.6rem; border-top: 1px solid var(--color-border);
|
||||
}
|
||||
.tool-call-card:not(:has(.tool-card-detail)) .tag-suggestions {
|
||||
/* When outside detail, no top border needed if it's the only extra content */
|
||||
}
|
||||
.tag-suggestions-label { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 500; }
|
||||
|
||||
.tag-pill {
|
||||
display: inline-flex; align-items: center; gap: 0.2rem;
|
||||
padding: 0.15rem 0.5rem; border: 1px solid var(--color-primary);
|
||||
border-radius: 999px; background: transparent; color: var(--color-primary);
|
||||
font-size: 0.75rem; cursor: pointer; transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.tag-pill:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
|
||||
.tag-pill.applied {
|
||||
background: var(--color-success, #2ecc71); border-color: var(--color-success, #2ecc71);
|
||||
color: #fff; cursor: default;
|
||||
}
|
||||
.tag-pill:disabled:not(.applied) { opacity: 0.6; cursor: wait; }
|
||||
.tag-check { font-size: 0.65rem; }
|
||||
|
||||
/* Duplicate confirmation */
|
||||
.tool-call-card.requires-confirm {
|
||||
border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 60%, transparent);
|
||||
}
|
||||
.confirm-created {
|
||||
color: var(--color-success, #2ecc71);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.confirm-denied {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.btn-confirm-duplicate {
|
||||
padding: 0.15rem 0.5rem;
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm, 6px);
|
||||
cursor: pointer;
|
||||
font-size: 0.72rem;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-confirm-duplicate:hover { opacity: 0.9; }
|
||||
.btn-deny-duplicate {
|
||||
padding: 0.15rem 0.5rem;
|
||||
background: none;
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm, 6px);
|
||||
cursor: pointer;
|
||||
font-size: 0.72rem;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-deny-duplicate:hover {
|
||||
color: var(--color-danger, #e74c3c);
|
||||
border-color: var(--color-danger, #e74c3c);
|
||||
}
|
||||
|
||||
/* ── Event header click button ── */
|
||||
.tool-event-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.tool-event-btn:hover .tool-event-title {
|
||||
text-decoration: underline;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.tool-event-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Event cards (list) ── */
|
||||
.tool-event-cards { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.tool-event-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.45rem;
|
||||
padding: 0.3rem 0.45rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-card, #16161a);
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
cursor: default;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
width: 100%;
|
||||
}
|
||||
.tool-event-card.clickable { cursor: pointer; }
|
||||
.tool-event-card.clickable:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card, #16161a));
|
||||
}
|
||||
.tool-event-card-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
flex-shrink: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.tool-event-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.tool-event-card-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tool-event-card-time {
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.tool-event-card-loc {
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
@@ -1,108 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import type { ToolPendingRecord } from "@/types/chat";
|
||||
|
||||
const props = defineProps<{
|
||||
pendingTool: ToolPendingRecord;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "accept"): void;
|
||||
(e: "decline"): void;
|
||||
}>();
|
||||
|
||||
const label = computed(() => props.pendingTool.label ?? props.pendingTool.function);
|
||||
|
||||
const detail = computed(() => {
|
||||
const args = props.pendingTool.arguments;
|
||||
const name =
|
||||
(args.title as string | undefined) ??
|
||||
(args.summary as string | undefined) ??
|
||||
(args.query as string | undefined) ??
|
||||
"";
|
||||
return name ? `"${name}"` : "";
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tool-confirm-card">
|
||||
<div class="tool-confirm-info">
|
||||
<span class="tool-confirm-label">{{ label }}</span>
|
||||
<span v-if="detail" class="tool-confirm-detail">{{ detail }}</span>
|
||||
</div>
|
||||
<div class="tool-confirm-actions">
|
||||
<button class="btn-accept" @click="emit('accept')">Accept</button>
|
||||
<button class="btn-decline" @click="emit('decline')">Decline</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tool-confirm-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-warning, #f59e0b);
|
||||
border-radius: 12px;
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.4rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tool-confirm-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.tool-confirm-label {
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tool-confirm-detail {
|
||||
color: var(--color-text);
|
||||
font-size: 0.8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tool-confirm-actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-accept,
|
||||
.btn-decline {
|
||||
padding: 0.25rem 0.65rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn-accept {
|
||||
background: var(--color-success, #2ecc71);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-decline {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.btn-accept:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.btn-decline:hover {
|
||||
color: var(--color-danger, #e74c3c);
|
||||
border-color: var(--color-danger, #e74c3c);
|
||||
}
|
||||
</style>
|
||||
@@ -1,391 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { useChatStore } from '@/stores/chat';
|
||||
import ChatPanel from '@/components/ChatPanel.vue';
|
||||
import ChatInputBar from '@/components/ChatInputBar.vue';
|
||||
import { RotateCcw, ChevronDown, ChevronUp } from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps<{ projectId: number }>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'note-changed': [noteId: number];
|
||||
'task-changed': [];
|
||||
}>();
|
||||
|
||||
const chatStore = useChatStore();
|
||||
|
||||
// SSE watcher — emit refresh events when tool calls succeed during streaming
|
||||
const processedCount = ref(0);
|
||||
|
||||
watch(
|
||||
() => chatStore.streamingToolCalls,
|
||||
(calls) => {
|
||||
for (let i = processedCount.value; i < calls.length; i++) {
|
||||
const tc = calls[i];
|
||||
if (tc.status !== 'success') continue;
|
||||
|
||||
// Note-editor refresh: any successful create_note/update_note
|
||||
if (['create_note', 'update_note'].includes(tc.function) && tc.result?.data?.id) {
|
||||
emit('note-changed', tc.result.data.id as number);
|
||||
}
|
||||
|
||||
// Task-panel refresh: milestone changes, or note changes where the note is a task (has status)
|
||||
const isTaskNoteChange =
|
||||
['create_note', 'update_note'].includes(tc.function) &&
|
||||
tc.result?.data?.status !== undefined;
|
||||
const isMilestoneChange = ['create_milestone', 'update_milestone'].includes(tc.function);
|
||||
if (isTaskNoteChange || isMilestoneChange) {
|
||||
emit('task-changed');
|
||||
}
|
||||
}
|
||||
processedCount.value = calls.length;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => chatStore.streaming,
|
||||
(s) => {
|
||||
if (!s) processedCount.value = 0;
|
||||
}
|
||||
);
|
||||
|
||||
type WidgetState = 'collapsed' | 'expanded';
|
||||
const widgetState = ref<WidgetState>('collapsed');
|
||||
|
||||
const chatPanelRef = ref<InstanceType<typeof ChatPanel> | null>(null);
|
||||
const inputBarRef = ref<InstanceType<typeof ChatInputBar> | null>(null);
|
||||
|
||||
const workspaceConvId = ref<number | null>(null);
|
||||
let isNewConv = false;
|
||||
|
||||
const historyOpen = ref(false);
|
||||
|
||||
const projectConversations = computed(() =>
|
||||
chatStore.conversations
|
||||
.filter((c) => c.rag_project_id === props.projectId)
|
||||
.slice()
|
||||
.sort((a, b) => (b.updated_at || '').localeCompare(a.updated_at || ''))
|
||||
);
|
||||
|
||||
async function pickConversation(convId: number) {
|
||||
historyOpen.value = false;
|
||||
if (convId === workspaceConvId.value) return;
|
||||
await chatStore.fetchConversation(convId);
|
||||
workspaceConvId.value = convId;
|
||||
// The picked conversation already exists on the server; not ours to clean up.
|
||||
isNewConv = false;
|
||||
localStorage.setItem(_storageKey(props.projectId), String(convId));
|
||||
}
|
||||
|
||||
function toggleHistory() {
|
||||
historyOpen.value = !historyOpen.value;
|
||||
}
|
||||
|
||||
function conversationLabel(c: { id: number; title?: string | null }): string {
|
||||
return (c.title && c.title.trim()) || `Conversation #${c.id}`;
|
||||
}
|
||||
|
||||
function _storageKey(pid: number) {
|
||||
return `workspace_conv_${pid}`;
|
||||
}
|
||||
|
||||
function expand() {
|
||||
widgetState.value = 'expanded';
|
||||
nextTick(() => chatPanelRef.value?.focus());
|
||||
}
|
||||
function collapse() {
|
||||
widgetState.value = 'collapsed';
|
||||
nextTick(() => inputBarRef.value?.focus());
|
||||
}
|
||||
|
||||
async function restart() {
|
||||
const conv = await chatStore.createConversation();
|
||||
workspaceConvId.value = conv.id;
|
||||
isNewConv = true;
|
||||
localStorage.setItem(_storageKey(props.projectId), String(conv.id));
|
||||
await chatStore.fetchConversation(conv.id);
|
||||
}
|
||||
|
||||
/** Auto-expand and send — used when user submits from collapsed input. */
|
||||
async function onCollapsedSubmit(payload: { content: string; contextNoteId?: number }) {
|
||||
widgetState.value = 'expanded';
|
||||
await chatStore.sendMessage(payload.content, payload.contextNoteId, undefined, false);
|
||||
}
|
||||
|
||||
function prefill(text: string) {
|
||||
if (widgetState.value === 'expanded') {
|
||||
chatPanelRef.value?.prefill(text);
|
||||
} else {
|
||||
inputBarRef.value?.prefill(text);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (chatStore.conversations.length === 0) {
|
||||
await chatStore.fetchConversations();
|
||||
}
|
||||
|
||||
const key = _storageKey(props.projectId);
|
||||
const storedId = localStorage.getItem(key);
|
||||
|
||||
if (storedId) {
|
||||
const existingId = Number(storedId);
|
||||
try {
|
||||
await chatStore.fetchConversation(existingId);
|
||||
workspaceConvId.value = existingId;
|
||||
isNewConv = false;
|
||||
chatStore.reconnectIfGenerating(existingId);
|
||||
} catch {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
|
||||
if (workspaceConvId.value === null) {
|
||||
const conv = await chatStore.createConversation();
|
||||
workspaceConvId.value = conv.id;
|
||||
isNewConv = true;
|
||||
await chatStore.fetchConversation(conv.id);
|
||||
localStorage.setItem(key, String(conv.id));
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(async () => {
|
||||
if (workspaceConvId.value !== null && isNewConv) {
|
||||
const id = workspaceConvId.value;
|
||||
const conv = chatStore.conversations.find((c) => c.id === id);
|
||||
if (conv && conv.message_count === 0) {
|
||||
await chatStore.deleteConversation(id);
|
||||
localStorage.removeItem(_storageKey(props.projectId));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({ prefill });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Bottom-anchored chat dock: collapsed (input only) or expanded (full panel) -->
|
||||
<div
|
||||
class="ws-chat-widget"
|
||||
:class="{ 'ws-chat-widget--expanded': widgetState === 'expanded' }"
|
||||
>
|
||||
<!-- Header (expanded only) -->
|
||||
<div v-if="widgetState === 'expanded'" class="ws-chat-header">
|
||||
<span class="ws-chat-title">Project chat</span>
|
||||
<div class="ws-chat-header-actions">
|
||||
<div class="ws-chat-history-wrap">
|
||||
<button
|
||||
class="btn-icon-sm"
|
||||
:class="{ active: historyOpen }"
|
||||
title="History"
|
||||
@click="toggleHistory"
|
||||
>
|
||||
<ChevronDown :size="16" />
|
||||
</button>
|
||||
<div v-if="historyOpen" class="ws-chat-history-menu">
|
||||
<div v-if="projectConversations.length === 0" class="ws-chat-history-empty">
|
||||
No past conversations
|
||||
</div>
|
||||
<button
|
||||
v-for="c in projectConversations"
|
||||
:key="c.id"
|
||||
class="ws-chat-history-item"
|
||||
:class="{ current: c.id === workspaceConvId }"
|
||||
@click="pickConversation(c.id)"
|
||||
>
|
||||
<span class="ws-chat-history-title">{{ conversationLabel(c) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-icon-sm" title="Restart conversation" @click="restart">
|
||||
<RotateCcw :size="16" />
|
||||
</button>
|
||||
<button class="btn-icon-sm" title="Collapse" @click="collapse">
|
||||
<ChevronDown :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Expanded body: full ChatPanel (includes its own input bar) -->
|
||||
<div v-if="widgetState === 'expanded'" class="ws-chat-body">
|
||||
<ChatPanel
|
||||
ref="chatPanelRef"
|
||||
variant="full"
|
||||
:projectId="projectId"
|
||||
placeholder="Message the agent…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Collapsed: standalone input bar with expand affordance -->
|
||||
<div v-else class="ws-chat-collapsed">
|
||||
<button class="ws-chat-expand-btn" title="Expand chat" @click="expand">
|
||||
<ChevronUp :size="16" />
|
||||
</button>
|
||||
<div class="ws-chat-input-row">
|
||||
<ChatInputBar
|
||||
ref="inputBarRef"
|
||||
placeholder="Message the agent…"
|
||||
@submit="onCollapsedSubmit"
|
||||
@abort="chatStore.cancelGeneration()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ws-chat-widget {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: var(--page-max-width);
|
||||
margin-inline: auto;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 16px 16px 0 0;
|
||||
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35), 0 -1px 0 rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
transition: height 0.2s ease;
|
||||
}
|
||||
.ws-chat-widget--expanded {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.ws-chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ws-chat-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.ws-chat-header-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-icon-sm {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-icon-sm:hover:not(:disabled) {
|
||||
color: var(--color-text);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
}
|
||||
.btn-icon-sm:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-icon-sm.active {
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
.ws-chat-history-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.ws-chat-history-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
min-width: 220px;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
z-index: 30;
|
||||
padding: 4px;
|
||||
}
|
||||
.ws-chat-history-empty {
|
||||
padding: 10px 12px;
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
.ws-chat-history-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ws-chat-history-item:hover {
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
}
|
||||
.ws-chat-history-item.current {
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.ws-chat-history-title {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ws-chat-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ws-chat-body :deep(.chat-body) {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ws-chat-collapsed {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.ws-chat-expand-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 0 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-right: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ws-chat-expand-btn:hover {
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
||||
}
|
||||
|
||||
.ws-chat-input-row {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 10px 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user