hermes-web-ui 0.0.1 → 0.1.0

package/src/components/chat/ChatInput.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { NButton } from 'naive-ui'
-import { useChatStore } from '@/stores/chat'
-
-const chatStore = useChatStore()
-const inputText = ref('')
-const textareaRef = ref<HTMLTextAreaElement>()
-
-function handleSend() {
-  const text = inputText.value.trim()
-  if (!text) return
-
-  chatStore.sendMessage(text)
-  inputText.value = ''
-
-  // Reset textarea height
-  if (textareaRef.value) {
-    textareaRef.value.style.height = 'auto'
-  }
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault()
-    handleSend()
-  }
-}
-
-function handleInput(e: Event) {
-  const el = e.target as HTMLTextAreaElement
-  el.style.height = 'auto'
-  el.style.height = Math.min(el.scrollHeight, 100) + 'px'
-}
-</script>
-
-<template>
-  <div class="chat-input-area">
-    <div class="input-wrapper">
-      <textarea
-        ref="textareaRef"
-        v-model="inputText"
-        class="input-textarea"
-        placeholder="Type a message... (Enter to send, Shift+Enter for new line)"
-        rows="1"
-        @keydown="handleKeydown"
-        @input="handleInput"
-      ></textarea>
-      <div class="input-actions">
-        <NButton
-          v-if="chatStore.isStreaming"
-          size="small"
-          type="error"
-          @click="chatStore.stopStreaming()"
-        >
-          Stop
-        </NButton>
-        <NButton
-          size="small"
-          type="primary"
-          :disabled="!inputText.trim() || chatStore.isStreaming"
-          @click="handleSend"
-        >
-          <template #icon>
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
-          </template>
-          Send
-        </NButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as *;
-
-.chat-input-area {
-  padding: 12px 20px 16px;
-  border-top: 1px solid $border-color;
-  flex-shrink: 0;
-}
-
-.input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background-color: $bg-input;
-  border: 1px solid $border-color;
-  border-radius: $radius-md;
-  padding: 10px 12px;
-  transition: border-color $transition-fast;
-
-  &:focus-within {
-    border-color: $accent-primary;
-  }
-}
-
-.input-textarea {
-  flex: 1;
-  background: none;
-  border: none;
-  outline: none;
-  color: $text-primary;
-  font-family: $font-ui;
-  font-size: 14px;
-  line-height: 1.5;
-  resize: none;
-  max-height: 100px;
-  min-height: 20px;
-  overflow-y: auto;
-
-  &::placeholder {
-    color: $text-muted;
-  }
-}
-
-.input-actions {
-  display: flex;
-  gap: 6px;
-  flex-shrink: 0;
-  align-items: center;
-}
-</style>

package/src/components/chat/ChatPanel.vue

@@ -1,289 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { NButton, NTooltip, NPopconfirm, useMessage } from 'naive-ui'
-import MessageList from './MessageList.vue'
-import ChatInput from './ChatInput.vue'
-import { useChatStore } from '@/stores/chat'
-import { useAppStore } from '@/stores/app'
-
-const chatStore = useChatStore()
-const appStore = useAppStore()
-const message = useMessage()
-
-const showSessions = ref(true)
-
-const sortedSessions = computed(() => {
-  return [...chatStore.sessions].sort((a, b) => b.updatedAt - a.updatedAt)
-})
-
-const activeSessionLabel = computed(() =>
-  chatStore.activeSession?.title || 'New Chat',
-)
-
-function handleNewChat() {
-  chatStore.newChat()
-}
-
-function copySessionId() {
-  if (chatStore.activeSessionId) {
-    navigator.clipboard.writeText(chatStore.activeSessionId)
-    message.success('Copied')
-  }
-}
-
-function handleDeleteSession(id: string) {
-  chatStore.deleteSession(id)
-  message.success('Session deleted')
-}
-
-function formatTime(ts: number) {
-  const d = new Date(ts)
-  const now = new Date()
-  const isToday = d.toDateString() === now.toDateString()
-  if (isToday) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-  return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
-}
-</script>
-
-<template>
-  <div class="chat-panel">
-    <!-- Session List -->
-    <aside class="session-list" :class="{ collapsed: !showSessions }">
-      <div class="session-list-header">
-        <span v-if="showSessions" class="session-list-title">Sessions</span>
-        <NButton quaternary size="tiny" @click="handleNewChat" circle>
-          <template #icon>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-          </template>
-        </NButton>
-      </div>
-      <div v-if="showSessions" class="session-items">
-        <button
-          v-for="s in sortedSessions"
-          :key="s.id"
-          class="session-item"
-          :class="{ active: s.id === chatStore.activeSessionId }"
-          @click="chatStore.switchSession(s.id)"
-        >
-          <div class="session-item-content">
-            <span class="session-item-title">{{ s.title }}</span>
-            <span class="session-item-time">{{ formatTime(s.updatedAt) }}</span>
-          </div>
-          <NPopconfirm
-            v-if="s.id !== chatStore.activeSessionId || sortedSessions.length > 1"
-            @positive-click="handleDeleteSession(s.id)"
-          >
-            <template #trigger>
-              <button class="session-item-delete" @click.stop>
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-              </button>
-            </template>
-            Delete this session?
-          </NPopconfirm>
-        </button>
-      </div>
-    </aside>
-
-    <!-- Chat Area -->
-    <div class="chat-main">
-      <header class="chat-header">
-        <div class="header-left">
-          <NButton quaternary size="small" @click="showSessions = !showSessions" circle>
-            <template #icon>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
-            </template>
-          </NButton>
-          <span class="header-session-title">{{ activeSessionLabel }}</span>
-          <span class="model-badge">{{ appStore.selectedModel }}</span>
-        </div>
-        <div class="header-actions">
-          <NTooltip trigger="hover">
-            <template #trigger>
-              <NButton quaternary size="small" @click="copySessionId" circle>
-                <template #icon>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                </template>
-              </NButton>
-            </template>
-            Copy Session ID
-          </NTooltip>
-          <NButton size="small" @click="handleNewChat">
-            <template #icon>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-            </template>
-            New Chat
-          </NButton>
-        </div>
-      </header>
-
-      <MessageList />
-      <ChatInput />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as *;
-
-.chat-panel {
-  display: flex;
-  height: 100%;
-}
-
-.session-list {
-  width: 220px;
-  border-right: 1px solid $border-color;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  transition: width $transition-normal, opacity $transition-normal;
-  overflow: hidden;
-
-  &.collapsed {
-    width: 0;
-    border-right: none;
-    opacity: 0;
-    pointer-events: none;
-  }
-}
-
-.session-list-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  flex-shrink: 0;
-}
-
-.session-list-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: $text-muted;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.session-items {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 6px 12px;
-}
-
-.session-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  background: none;
-  border-radius: $radius-sm;
-  cursor: pointer;
-  text-align: left;
-  color: $text-secondary;
-  transition: all $transition-fast;
-  margin-bottom: 2px;
-
-  &:hover {
-    background: rgba($accent-primary, 0.06);
-    color: $text-primary;
-
-    .session-item-delete {
-      opacity: 1;
-    }
-  }
-
-  &.active {
-    background: rgba($accent-primary, 0.1);
-    color: $text-primary;
-    font-weight: 500;
-  }
-}
-
-.session-item-content {
-  flex: 1;
-  overflow: hidden;
-}
-
-.session-item-title {
-  display: block;
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.session-item-time {
-  display: block;
-  font-size: 11px;
-  color: $text-muted;
-  margin-top: 2px;
-}
-
-.session-item-delete {
-  flex-shrink: 0;
-  opacity: 0;
-  padding: 2px;
-  border: none;
-  background: none;
-  color: $text-muted;
-  cursor: pointer;
-  border-radius: 3px;
-  transition: all $transition-fast;
-
-  &:hover {
-    color: $error;
-    background: rgba($error, 0.1);
-  }
-}
-
-.chat-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-width: 0;
-}
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid $border-color;
-  flex-shrink: 0;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  overflow: hidden;
-}
-
-.header-session-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: $text-primary;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.model-badge {
-  font-size: 11px;
-  color: $text-muted;
-  background: rgba($accent-primary, 0.1);
-  padding: 2px 8px;
-  border-radius: 10px;
-  border: 1px solid $border-color;
-  flex-shrink: 0;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-}
-</style>

package/src/components/chat/MarkdownRenderer.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import MarkdownIt from 'markdown-it'
-import hljs from 'highlight.js'
-
-const props = defineProps<{ content: string }>()
-
-const md: MarkdownIt = new MarkdownIt({
-  html: false,
-  linkify: true,
-  typographer: true,
-  highlight(str: string, lang: string): string {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return `<pre class="hljs-code-block"><div class="code-header"><span class="code-lang">${lang}</span><button class="copy-btn" onclick="navigator.clipboard.writeText(this.closest('.hljs-code-block').querySelector('code').textContent)">Copy</button></div><code class="hljs language-${lang}">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`
-      } catch {
-        // fall through
-      }
-    }
-    return `<pre class="hljs-code-block"><div class="code-header"><button class="copy-btn" onclick="navigator.clipboard.writeText(this.closest('.hljs-code-block').querySelector('code').textContent)">Copy</button></div><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>`
-  },
-})
-
-const renderedHtml = computed(() => md.render(props.content))
-</script>
-
-<template>
-  <div class="markdown-body" v-html="renderedHtml"></div>
-</template>
-
-<style lang="scss">
-@use '@/styles/variables' as *;
-
-.markdown-body {
-  font-size: 14px;
-  line-height: 1.65;
-
-  p {
-    margin: 0 0 8px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  ul, ol {
-    padding-left: 20px;
-    margin: 4px 0 8px;
-  }
-
-  li {
-    margin: 2px 0;
-  }
-
-  strong {
-    color: $text-primary;
-    font-weight: 600;
-  }
-
-  em {
-    color: $text-secondary;
-  }
-
-  a {
-    color: $accent-primary;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-
-    &:hover {
-      color: $accent-hover;
-    }
-  }
-
-  blockquote {
-    margin: 8px 0;
-    padding: 4px 12px;
-    border-left: 3px solid $border-color;
-    color: $text-secondary;
-  }
-
-  code:not(.hljs) {
-    background: $code-bg;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-family: $font-code;
-    font-size: 13px;
-    color: $accent-primary;
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 8px 0;
-
-    th, td {
-      padding: 6px 12px;
-      border: 1px solid $border-color;
-      text-align: left;
-      font-size: 13px;
-    }
-
-    th {
-      background: rgba($accent-primary, 0.08);
-      color: $text-primary;
-      font-weight: 600;
-    }
-
-    td {
-      color: $text-secondary;
-    }
-  }
-
-  hr {
-    border: none;
-    border-top: 1px solid $border-color;
-    margin: 12px 0;
-  }
-}
-
-.hljs-code-block {
-  margin: 8px 0;
-  border-radius: $radius-sm;
-  overflow: hidden;
-  background: $code-bg;
-  border: 1px solid $border-color;
-
-  .code-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 6px 12px;
-    background: rgba(0, 0, 0, 0.03);
-    border-bottom: 1px solid $border-color;
-
-    .code-lang {
-      font-size: 11px;
-      color: $text-muted;
-      text-transform: uppercase;
-    }
-
-    .copy-btn {
-      font-size: 11px;
-      color: $text-muted;
-      background: none;
-      border: none;
-      cursor: pointer;
-      padding: 2px 6px;
-      border-radius: 3px;
-      transition: all $transition-fast;
-
-      &:hover {
-        color: $text-primary;
-        background: rgba(0, 0, 0, 0.05);
-      }
-    }
-  }
-
-  code.hljs {
-    display: block;
-    padding: 12px;
-    font-family: $font-code;
-    font-size: 13px;
-    line-height: 1.5;
-    overflow-x: auto;
-  }
-}
-
-// highlight.js theme override — pure ink B&W
-.hljs {
-  color: #2a2a2a;
-  background: none;
-}
-
-.hljs-keyword,
-.hljs-selector-tag { color: #1a1a1a; font-weight: 600; }
-.hljs-string,
-.hljs-attr { color: #555555; }
-.hljs-number { color: #333333; }
-.hljs-comment { color: #999999; font-style: italic; }
-.hljs-built_in { color: #444444; }
-.hljs-type { color: #3a3a3a; }
-.hljs-variable { color: #1a1a1a; }
-.hljs-title,
-.hljs-title\.function_ { color: #1a1a1a; }
-.hljs-params { color: #2a2a2a; }
-.hljs-meta { color: #999999; }
-</style>