feat: add session search modal (#128)

2026-04-22 14:00:34 +08:00
parent ffd825afe2
commit f27db3036a
18 changed files with 1355 additions and 126 deletions
@@ -7,6 +7,7 @@ import { useTheme } from '@/composables/useTheme'
 import AppSidebar from '@/components/layout/AppSidebar.vue'
 import { useKeyboard } from '@/composables/useKeyboard'
 import { useAppStore } from '@/stores/hermes/app'
+import SessionSearchModal from '@/components/hermes/chat/SessionSearchModal.vue'

 const { isDark } = useTheme()
 const appStore = useAppStore()
@@ -58,6 +59,7 @@ useKeyboard()
              <router-view />
            </main>
          </div>
+          <SessionSearchModal />
        </NNotificationProvider>
      </NDialogProvider>
    </NMessageProvider>
@@ -5,6 +5,7 @@ export interface SessionSummary {
  source: string
  model: string
  title: string | null
+  preview?: string
  started_at: number
  ended_at: number | null
  last_active?: number
@@ -25,6 +26,12 @@ export interface SessionDetail extends SessionSummary {
  messages: HermesMessage[]
 }

+export interface SessionSearchResult extends SessionSummary {
+  matched_message_id: number | null
+  snippet: string
+  rank: number
+}
+
 export interface HermesMessage {
  id: number
  session_id: string
@@ -48,6 +55,16 @@ export async function fetchSessions(source?: string, limit?: number): Promise<Se
  return res.sessions
 }

+export async function searchSessions(q: string, source?: string, limit?: number): Promise<SessionSearchResult[]> {
+  const params = new URLSearchParams()
+  params.set('q', q)
+  if (source) params.set('source', source)
+  if (limit) params.set('limit', String(limit))
+  const query = params.toString()
+  const res = await request<{ results: SessionSearchResult[] }>(`/api/hermes/search/sessions?${query}`)
+  return res.results
+}
+
 export async function fetchSession(id: string): Promise<SessionDetail | null> {
  try {
    const res = await request<{ session: SessionDetail }>(`/api/hermes/sessions/${id}`)
@@ -11,7 +11,7 @@ import {

 const TOOL_PAYLOAD_DISPLAY_LIMIT = 2000;

-const props = defineProps<{ message: Message }>();
+const props = defineProps<{ message: Message; highlight?: boolean }>();
 const { t } = useI18n();

 const isSystem = computed(() => props.message.role === "system");
@@ -126,7 +126,11 @@ const renderedToolResult = computed(() => {
 </script>

 <template>
-  <div class="message" :class="[message.role]">
+  <div
+    class="message"
+    :class="[message.role, { highlight }]"
+    :id="`message-${message.id}`"
+  >
    <template v-if="message.role === 'tool'">
      <div
        class="tool-line"
@@ -306,6 +310,12 @@ const renderedToolResult = computed(() => {
      background-color: rgba(var(--warning-rgb), 0.06);
    }
  }
+
+  &.highlight {
+    .message-bubble {
+      box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.45);
+    }
+  }
 }

 .msg-body {
@@ -45,15 +45,37 @@ function scrollToBottom() {
  });
 }

+function scrollToMessage(messageId: string) {
+  nextTick(() => {
+    const el = document.getElementById(`message-${messageId}`);
+    if (el) {
+      el.scrollIntoView({ block: 'center' });
+    }
+  });
+}
+
 // Scroll to bottom once when messages are first loaded
 watch(
  () => chatStore.activeSessionId,
  (id) => {
-    if (id) scrollToBottom();
+    if (!id) return;
+    if (chatStore.focusMessageId) {
+      scrollToMessage(chatStore.focusMessageId);
+      return;
+    }
+    scrollToBottom();
  },
  { immediate: true },
 );

+watch(
+  () => chatStore.focusMessageId,
+  (messageId) => {
+    if (!messageId) return;
+    scrollToMessage(messageId);
+  },
+);
+
 // When a run starts (user just sent a message), always scroll to bottom once
 watch(
  () => chatStore.isRunActive,
@@ -66,12 +88,20 @@ watch(
 watch(
  () => chatStore.messages[chatStore.messages.length - 1]?.content,
  () => {
+    if (chatStore.focusMessageId) {
+      scrollToMessage(chatStore.focusMessageId);
+      return;
+    }
    if (!chatStore.isStreaming) { scrollToBottom(); return; }
    if (!isNearBottom()) return;
    scrollToBottom();
  },
 );
 watch(currentToolCalls, () => {
+  if (chatStore.focusMessageId) {
+    scrollToMessage(chatStore.focusMessageId);
+    return;
+  }
  if (!chatStore.isStreaming) { scrollToBottom(); return; }
  if (!isNearBottom()) return;
  scrollToBottom();
@@ -84,7 +114,12 @@ watch(currentToolCalls, () => {
      <img src="/logo.png" alt="Hermes" class="empty-logo" />
      <p>{{ t("chat.emptyState") }}</p>
    </div>
-    <MessageItem v-for="msg in displayMessages" :key="msg.id" :message="msg" />
+    <MessageItem
+      v-for="msg in displayMessages"
+      :key="msg.id"
+      :message="msg"
+      :highlight="chatStore.focusMessageId === msg.id"
+    />
    <Transition name="fade">
      <div v-if="chatStore.isRunActive" class="streaming-indicator">
        <video
@@ -0,0 +1,435 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { NButton, NInput, NModal, NSpin, useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { fetchSessions, searchSessions, type SessionSearchResult, type SessionSummary } from '@/api/hermes/sessions'
+import { useChatStore } from '@/stores/hermes/chat'
+import { useSessionSearch } from '@/composables/useSessionSearch'
+
+const { t } = useI18n()
+const message = useMessage()
+const router = useRouter()
+const chatStore = useChatStore()
+const { sessionSearchOpen } = useSessionSearch()
+
+const query = ref('')
+const loading = ref(false)
+const recentSessions = ref<SessionSummary[]>([])
+const searchResults = ref<SessionSearchResult[]>([])
+const activeIndex = ref(0)
+const inputRef = ref<InstanceType<typeof NInput> | null>(null)
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+let requestSeq = 0
+
+type SearchItem = SessionSearchResult | (SessionSummary & {
+  snippet?: string
+  matched_message_id: number | null
+  rank: number
+})
+
+const hasQuery = computed(() => query.value.trim().length > 0)
+
+const items = computed<SearchItem[]>(() => {
+  if (hasQuery.value) return searchResults.value
+  return recentSessions.value.map(session => ({
+    ...session,
+    matched_message_id: null,
+    snippet: session.preview || '',
+    rank: 0,
+  }))
+})
+
+function formatSource(source: string): string {
+  const map: Record<string, string> = {
+    api_server: 'API Server',
+    cli: 'CLI',
+    telegram: 'Telegram',
+    discord: 'Discord',
+    slack: 'Slack',
+    matrix: 'Matrix',
+    whatsapp: 'WhatsApp',
+    signal: 'Signal',
+    cron: 'Cron',
+    weixin: 'WeChat',
+  }
+  return map[source] || source
+}
+
+function formatTime(ts?: number): string {
+  if (!ts) return ''
+  const date = new Date(ts * 1000)
+  return date.toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function getItemTitle(item: SearchItem): string {
+  const title = item.title?.trim()
+  if (title) return title
+  if (item.preview?.trim()) return item.preview.trim()
+  return item.id
+}
+
+async function loadRecentSessions() {
+  const seq = ++requestSeq
+  loading.value = true
+  try {
+    const sessions = await fetchSessions(undefined, 8)
+    if (seq !== requestSeq) return
+    recentSessions.value = sessions
+    searchResults.value = []
+    activeIndex.value = 0
+  } catch (err) {
+    if (seq !== requestSeq) return
+    message.error(err instanceof Error ? err.message : t('chat.searchFailed'))
+  } finally {
+    if (seq === requestSeq) {
+      loading.value = false
+    }
+  }
+}
+
+async function runSearch(text: string) {
+  const seq = ++requestSeq
+  loading.value = true
+  try {
+    const results = text.trim()
+      ? await searchSessions(text.trim(), undefined, 10)
+      : []
+    if (seq !== requestSeq) return
+    searchResults.value = results
+    activeIndex.value = 0
+  } catch (err) {
+    if (seq !== requestSeq) return
+    message.error(err instanceof Error ? err.message : t('chat.searchFailed'))
+  } finally {
+    if (seq === requestSeq) {
+      loading.value = false
+    }
+  }
+}
+
+async function ensureChatSessionsLoaded() {
+  if (chatStore.sessions.length === 0) {
+    await chatStore.loadSessions()
+  }
+}
+
+async function openItem(item: SearchItem) {
+  const messageId = item.matched_message_id != null ? String(item.matched_message_id) : null
+  sessionSearchOpen.value = false
+
+  await ensureChatSessionsLoaded()
+  await chatStore.switchSession(item.id, messageId)
+  if (router.currentRoute.value.name !== 'hermes.chat') {
+    await router.push({ name: 'hermes.chat' })
+  }
+}
+
+function closeModal() {
+  sessionSearchOpen.value = false
+}
+
+function moveSelection(delta: number) {
+  const list = items.value
+  if (list.length === 0) return
+  const next = activeIndex.value + delta
+  activeIndex.value = (next + list.length) % list.length
+}
+
+async function handleKeydown(e: KeyboardEvent) {
+  if (!sessionSearchOpen.value) return
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    moveSelection(1)
+    return
+  }
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    moveSelection(-1)
+    return
+  }
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    const item = items.value[activeIndex.value]
+    if (item) {
+      await openItem(item)
+    }
+    return
+  }
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    closeModal()
+  }
+}
+
+watch(
+  () => sessionSearchOpen.value,
+  async (open) => {
+    if (!open) {
+      query.value = ''
+      searchResults.value = []
+      recentSessions.value = []
+      activeIndex.value = 0
+      return
+    }
+
+    query.value = ''
+    searchResults.value = []
+    activeIndex.value = 0
+    await loadRecentSessions()
+    await nextTick()
+    inputRef.value?.focus?.()
+  },
+)
+
+watch(query, (value) => {
+  if (debounceTimer) {
+    clearTimeout(debounceTimer)
+    debounceTimer = null
+  }
+  debounceTimer = setTimeout(() => {
+    if (!sessionSearchOpen.value) return
+    void runSearch(value)
+  }, 160)
+})
+
+watch(items, () => {
+  if (activeIndex.value >= items.value.length) {
+    activeIndex.value = 0
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+  if (debounceTimer) {
+    clearTimeout(debounceTimer)
+  }
+})
+</script>
+
+<template>
+  <NModal
+    v-model:show="sessionSearchOpen"
+    preset="card"
+    :title="t('chat.searchTitle')"
+    :style="{ width: 'min(760px, calc(100vw - 24px))' }"
+    :mask-closable="true"
+    :auto-focus="false"
+  >
+    <div class="session-search-modal">
+      <div class="search-header">
+        <div class="search-title">{{ t('chat.searchSubtitle') }}</div>
+        <div class="search-hint">{{ t('chat.searchHint') }}</div>
+      </div>
+
+      <NInput
+        ref="inputRef"
+      v-model:value="query"
+      :placeholder="t('chat.searchPlaceholder')"
+      clearable
+      size="large"
+    />
+
+      <div class="search-body">
+        <NSpin :show="loading">
+          <div v-if="items.length === 0" class="search-empty">
+            {{ hasQuery ? t('chat.searchNoResults') : t('chat.searchEmpty') }}
+          </div>
+          <div v-else class="result-list">
+            <button
+              v-for="(item, idx) in items"
+              :key="item.id"
+              class="result-item"
+              :class="{ active: idx === activeIndex }"
+              @click="openItem(item)"
+              @mouseenter="activeIndex = idx"
+            >
+              <div class="result-main">
+                <div class="result-title-row">
+                  <span class="result-title">{{ getItemTitle(item) }}</span>
+                  <span class="result-source">{{ formatSource(item.source) }}</span>
+                </div>
+                <div class="result-snippet">
+                  {{ hasQuery ? item.snippet || t('chat.searchNoSnippet') : item.preview || t('chat.searchRecent') }}
+                </div>
+              </div>
+              <div class="result-meta">
+                <span class="result-time">{{ formatTime(item.last_active || item.started_at) }}</span>
+                <span v-if="hasQuery && item.matched_message_id != null" class="result-match">
+                  #{{ item.matched_message_id }}
+                </span>
+              </div>
+            </button>
+          </div>
+        </NSpin>
+      </div>
+
+      <div class="search-footer">
+        <span>{{ t('chat.searchEnterHint') }}</span>
+        <NButton quaternary size="small" @click="closeModal">{{ t('common.cancel') }}</NButton>
+      </div>
+    </div>
+  </NModal>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.session-search-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.search-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.search-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: $text-primary;
+}
+
+.search-hint {
+  font-size: 12px;
+  color: $text-muted;
+}
+
+.search-body {
+  max-height: min(60vh, 540px);
+  overflow: hidden;
+}
+
+.search-empty {
+  padding: 28px 0;
+  text-align: center;
+  color: $text-muted;
+  font-size: 13px;
+}
+
+.result-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: min(60vh, 540px);
+  overflow-y: auto;
+  padding-right: 2px;
+}
+
+.result-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 14px;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  background: $bg-card;
+  color: $text-primary;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color $transition-fast, background-color $transition-fast, transform $transition-fast;
+
+  &:hover,
+  &.active {
+    border-color: $accent-muted;
+    background: rgba(var(--accent-primary-rgb), 0.04);
+  }
+}
+
+.result-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.result-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.result-title {
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-source {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.result-snippet {
+  margin-top: 4px;
+  font-size: 12px;
+  color: $text-secondary;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.result-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  font-size: 11px;
+  color: $text-muted;
+  flex-shrink: 0;
+}
+
+.result-match {
+  font-family: $font-code;
+}
+
+.search-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  color: $text-muted;
+}
+
+@media (max-width: $breakpoint-mobile) {
+  :deep(.n-modal-body-wrapper) {
+    width: calc(100vw - 24px);
+  }
+
+  .search-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .result-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .result-meta {
+    align-items: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+</style>
@@ -8,6 +8,7 @@ import ModelSelector from "./ModelSelector.vue";
 import ProfileSelector from "./ProfileSelector.vue";
 import LanguageSwitch from "./LanguageSwitch.vue";
 import ThemeSwitch from "./ThemeSwitch.vue";
+import { useSessionSearch } from '@/composables/useSessionSearch'
 import danceVideoLight from "@/assets/dance-light.mp4";
 import danceVideoDark from "@/assets/dance-dark.mp4";

@@ -19,7 +20,9 @@ const message = useMessage();
 const route = useRoute();
 const router = useRouter();
 const appStore = useAppStore();
+const { openSessionSearch } = useSessionSearch();
 const selectedKey = computed(() => route.name as string);
+const logoPath = '/logo.png';

 const collapsedGroups = reactive<Record<string, boolean>>({});

@@ -48,7 +51,7 @@ async function handleUpdate() {
 <template>
  <aside class="sidebar" :class="{ open: appStore.sidebarOpen }">
    <div class="sidebar-logo" @click="router.push('/hermes/chat')">
-      <img src="/logo.png" alt="Hermes" class="logo-img" />
+      <img :src="logoPath" alt="Hermes" class="logo-img" />
      <span class="logo-text">Hermes</span>
      <video class="logo-dance" :src="isDark ? danceVideoDark : danceVideoLight" autoplay loop muted playsinline />
    </div>
@@ -62,6 +65,14 @@ async function handleUpdate() {
        <span>{{ t("sidebar.chat") }}</span>
      </button>

+      <button class="nav-item" @click="openSessionSearch">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="7" />
+          <path d="m20 20-3.5-3.5" />
+        </svg>
+        <span>{{ t("sidebar.search") }}</span>
+      </button>
+
      <!-- Agent -->
      <div class="nav-group">
        <div class="nav-group-label" @click="toggleGroup('agent')">
@@ -1,10 +1,12 @@
 import { onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useChatStore } from '@/stores/hermes/chat'
+import { useSessionSearch } from './useSessionSearch'

 export function useKeyboard() {
  const router = useRouter()
  const chatStore = useChatStore()
+  const { sessionSearchOpen, openSessionSearch, closeSessionSearch } = useSessionSearch()

  function handleKeydown(e: KeyboardEvent) {
    const mod = e.ctrlKey || e.metaKey
@@ -12,14 +14,28 @@ export function useKeyboard() {
    if (mod && e.key === 'n') {
      e.preventDefault()
      chatStore.newChat()
+      return
    }

    if (mod && e.key === 'j') {
      e.preventDefault()
      router.push({ name: 'hermes.jobs' })
+      return
+    }
+
+    if (mod && e.key.toLowerCase() === 'k') {
+      if (router.currentRoute.value.name === 'login') return
+      e.preventDefault()
+      openSessionSearch()
+      return
    }

    if (e.key === 'Escape') {
+      if (sessionSearchOpen.value) {
+        e.preventDefault()
+        closeSessionSearch()
+        return
+      }
      // Close any open modals — naive-ui handles this internally
      const modal = document.querySelector('.n-modal-mask')
      if (modal) {
@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+
+const sessionSearchOpen = ref(false)
+
+export function useSessionSearch() {
+  function openSessionSearch() {
+    sessionSearchOpen.value = true
+  }
+
+  function closeSessionSearch() {
+    sessionSearchOpen.value = false
+  }
+
+  return {
+    sessionSearchOpen,
+    openSessionSearch,
+    closeSessionSearch,
+  }
+}
@@ -42,6 +42,7 @@ export default {
  // Sidebar
  sidebar: {
    chat: 'Chat',
+    search: 'Search',
    jobs: 'Jobs',
    models: 'Models',
    profiles: 'Profiles',
@@ -82,6 +83,16 @@ export default {
    contextUsed: 'Context used:',
    sessions: 'Sessions',
    noSessions: 'No sessions',
+    searchTitle: 'Search Sessions',
+    searchSubtitle: 'Search by title or message content',
+    searchHint: 'Cmd/Ctrl+K',
+    searchPlaceholder: 'Search sessions...',
+    searchEmpty: 'Recent sessions',
+    searchRecent: 'Recent session',
+    searchNoResults: 'No sessions match your search',
+    searchNoSnippet: 'No snippet available',
+    searchEnterHint: 'Enter to open · Esc to close',
+    searchFailed: 'Failed to search sessions',
    newChat: 'New Chat',
    deleteSession: 'Delete this session?',
    sessionDeleted: 'Session deleted',
@@ -42,6 +42,7 @@ export default {
  // 侧边栏
  sidebar: {
    chat: '对话',
+    search: '搜索',
    jobs: '任务',
    models: '模型',
    profiles: '用户',
@@ -82,6 +83,16 @@ export default {
    contextUsed: '上下文已用:',
    sessions: '会话',
    noSessions: '暂无会话',
+    searchTitle: '搜索会话',
+    searchSubtitle: '按标题或消息内容搜索',
+    searchHint: 'Cmd/Ctrl+K',
+    searchPlaceholder: '搜索会话...',
+    searchEmpty: '最近会话',
+    searchRecent: '最近会话',
+    searchNoResults: '没有匹配的会话',
+    searchNoSnippet: '没有可显示的摘要',
+    searchEnterHint: 'Enter 打开 · Esc 关闭',
+    searchFailed: '搜索会话失败',
    newChat: '新建对话',
    deleteSession: '确定删除此会话？',
    sessionDeleted: '会话已删除',
@@ -231,6 +231,7 @@ function sanitizeForCache(msgs: Message[]): Message[] {
 export const useChatStore = defineStore('chat', () => {
  const sessions = ref<Session[]>([])
  const activeSessionId = ref<string | null>(null)
+  const focusMessageId = ref<string | null>(null)
  const streamStates = ref<Map<string, AbortController>>(new Map())
  const isStreaming = computed(() => activeSessionId.value != null && streamStates.value.has(activeSessionId.value))
  const isLoadingSessions = ref(false)
@@ -474,8 +475,9 @@ export const useChatStore = defineStore('chat', () => {
    return session
  }

-  async function switchSession(sessionId: string) {
+  async function switchSession(sessionId: string, focusId?: string | null) {
    activeSessionId.value = sessionId
+    focusMessageId.value = focusId ?? null
    localStorage.setItem(storageKey(), sessionId)
    activeSession.value = sessions.value.find(s => s.id === sessionId) || null

@@ -915,6 +917,7 @@ export const useChatStore = defineStore('chat', () => {
    sessions,
    activeSessionId,
    activeSession,
+    focusMessageId,
    messages,
    isStreaming,
    isRunActive,