mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-07-19 07:15:20 +00:00
1f9aebdcfd
The conversation-list sidebar header and the chat panel header lived in separate columns with different heights — the "+ New conversation" wrapper was ~60px (p-3 + py-2 button) while the "AI Assistant" header was ~44px (p-3 + small icon/text). The resulting staircase looked unintentional. Pins both to h-12 (48px) so they form a single unified top bar across the drawer. Shrinks the "+ New conversation" button to text-xs / py-1 / px-2 so it fits the tighter height without clipping, and switches its alignment to center to match the compacter footprint.
80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { useAiChatStore } from '../stores/ai-chat.store'
|
|
import type { AiConversationSummary } from '@/scripts/types/ai-config'
|
|
|
|
const store = useAiChatStore()
|
|
|
|
async function select(convo: AiConversationSummary): Promise<void> {
|
|
await store.loadConversation(convo.id)
|
|
}
|
|
|
|
async function remove(convo: AiConversationSummary, event: MouseEvent): Promise<void> {
|
|
event.stopPropagation()
|
|
if (!window.confirm('Delete this conversation?')) return
|
|
await store.deleteConversation(convo.id)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full">
|
|
<div class="h-12 px-3 border-b border-line-default flex items-center">
|
|
<button
|
|
type="button"
|
|
class="w-full text-center text-xs font-medium rounded px-2 py-1 bg-btn-primary text-white hover:bg-btn-primary-hover"
|
|
@click="store.newConversation()"
|
|
>
|
|
+ {{ $t('ai.chat.new_conversation') }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
<div
|
|
v-if="store.isLoadingConversations && store.conversations.length === 0"
|
|
class="p-3 text-xs text-muted"
|
|
>
|
|
{{ $t('general.loading') }}...
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="store.conversations.length === 0"
|
|
class="p-3 text-xs text-muted"
|
|
>
|
|
{{ $t('ai.chat.no_conversations') }}
|
|
</div>
|
|
|
|
<ul v-else class="space-y-1 p-2">
|
|
<li
|
|
v-for="convo in store.conversations"
|
|
:key="convo.id"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="
|
|
w-full text-left flex items-center justify-between
|
|
px-3 py-2 rounded text-sm group
|
|
hover:bg-hover
|
|
"
|
|
:class="{
|
|
'bg-hover-strong font-semibold': store.currentConversationId === convo.id,
|
|
}"
|
|
@click="select(convo)"
|
|
>
|
|
<span class="truncate text-body">
|
|
{{ convo.title ?? $t('ai.chat.untitled') }}
|
|
</span>
|
|
<span
|
|
class="
|
|
ml-2 text-xs text-muted opacity-0 group-hover:opacity-100
|
|
hover:text-alert-error-text
|
|
"
|
|
@click="remove(convo, $event)"
|
|
>
|
|
{{ $t('general.delete') }}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|