hermes-ui/packages/client/src/components/hermes/settings/DisplaySettings.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useMessage } from '@/composables/useMessage'
import { useI18n } from 'vue-i18n'
import { useSettingsStore } from '@/stores/hermes/settings'
import { requestCompletionNotificationPermission, showCompletionNotification, type CompletionNotificationPermissionResult } from '@/utils/completion-notification'
import { clampChatInputHeight, MAX_CHAT_INPUT_HEIGHT, MIN_CHAT_INPUT_HEIGHT } from '@/utils/chat-input-height'
import SettingRow from './SettingRow.vue'

const settingsStore = useSettingsStore()
const message = useMessage()
const { t } = useI18n()

const chatInputHeight = computed(() => clampChatInputHeight(settingsStore.display.chat_input_height))

async function save(values: Record<string, any>) {
  try {
    await settingsStore.saveSection('display', values)
    message.success(t('settings.saved'))
  } catch (err: any) {
    message.error(t('settings.saveFailed'))
  }
}

function handleChatInputHeightChange(value: number | null) {
  return save({ chat_input_height: clampChatInputHeight(value) })
}

function resetChatInputHeight() {
  return save({ chat_input_height: null })
}

function notificationPermissionErrorKey(result: CompletionNotificationPermissionResult): string {
  if (result.reason === 'insecure') return 'settings.display.notifyOnCompleteInsecure'
  if (result.reason === 'unsupported') return 'settings.display.notifyOnCompleteUnsupported'
  return 'settings.display.notifyOnCompleteDenied'
}

async function handleNotifyOnCompleteChange(value: boolean) {
  if (value) {
    const result = await requestCompletionNotificationPermission()
    if (!result.granted) {
      message.error(t(notificationPermissionErrorKey(result)))
      return
    }
  }
  await save({ notify_on_complete: value })
  if (value) {
    void showCompletionNotification({
      title: 'Hermes',
      body: t('settings.display.notifyOnCompleteTest'),
      icon: '/coding-agents/hermes.png',
      tag: `hermes-complete-test-${Date.now()}`,
    })
  }
}

async function testCompletionNotification() {
  const result = await requestCompletionNotificationPermission()
  if (!result.granted) {
    message.error(t(notificationPermissionErrorKey(result)))
    return
  }
  const shown = await showCompletionNotification({
    title: 'Hermes',
    body: t('settings.display.notifyOnCompleteTest'),
    icon: '/coding-agents/hermes.png',
    tag: `hermes-complete-test-${Date.now()}`,
  })
  if (!shown) {
    message.error(t('settings.display.notifyOnCompleteTestFailed'))
    return
  }
  message.success(t('settings.display.notifyOnCompleteTestSent'))
}
</script>

<template>
  <section class="settings-section">
    <SettingRow :label="t('settings.display.streaming')" :hint="t('settings.display.streamingHint')">
      <a-switch :model-value="settingsStore.display.streaming" @update:model-value="v => save({ streaming: v })" />
    </SettingRow>
    <SettingRow :label="t('settings.display.compact')" :hint="t('settings.display.compactHint')">
      <a-switch :model-value="settingsStore.display.compact" @update:model-value="v => save({ compact: v })" />
    </SettingRow>
    <SettingRow :label="t('settings.display.showReasoning')" :hint="t('settings.display.showReasoningHint')">
      <a-switch :model-value="settingsStore.display.show_reasoning" @update:model-value="v => save({ show_reasoning: v })" />
    </SettingRow>
    <SettingRow :label="t('settings.display.showCost')" :hint="t('settings.display.showCostHint')">
      <a-switch :model-value="settingsStore.display.show_cost" @update:model-value="v => save({ show_cost: v })" />
    </SettingRow>
    <SettingRow :label="t('settings.display.inlineDiffs')" :hint="t('settings.display.inlineDiffsHint')">
      <a-switch :model-value="settingsStore.display.inline_diffs" @update:model-value="v => save({ inline_diffs: v })" />
    </SettingRow>
    <SettingRow :label="t('settings.display.bellOnComplete')" :hint="t('settings.display.bellOnCompleteHint')">
      <a-switch :model-value="settingsStore.display.bell_on_complete" @update:model-value="v => save({ bell_on_complete: v })" />
    </SettingRow>
    <SettingRow :label="t('settings.display.notifyOnComplete')" :hint="`${t('settings.display.notifyOnCompleteHint')} ${t('settings.display.notifyOnCompleteMacHint')}`">
      <div class="notify-controls">
        <a-switch :model-value="settingsStore.display.notify_on_complete" @update:model-value="v => handleNotifyOnCompleteChange(v as boolean)" />
        <a-button size="mini" type="secondary" @click="testCompletionNotification">
          {{ t('settings.display.notifyOnCompleteTestButton') }}
        </a-button>
      </div>
    </SettingRow>
    <SettingRow :label="t('settings.display.chatInputHeight')" :hint="t('settings.display.chatInputHeightHint')">
      <div class="chat-input-height-controls">
        <a-input-number
          :model-value="chatInputHeight ?? undefined"
          :min="MIN_CHAT_INPUT_HEIGHT"
          :max="MAX_CHAT_INPUT_HEIGHT"
          :step="8"
          hide-button
          size="small"
          class="input-sm"
          @update:model-value="v => handleChatInputHeightChange(v ?? null)"
        >
          <template #suffix>px</template>
        </a-input-number>
        <a-button size="mini" type="secondary" @click="resetChatInputHeight">
          {{ t('common.reset') }}
        </a-button>
      </div>
    </SettingRow>
  </section>
</template>

<style scoped lang="scss">
@use '@/styles/variables' as *;

.notify-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.chat-input-height-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
</style>