ekko
9eaaa4270d
Simplify addMessage/updateMessage to only write to messages.value, add syncMessagesToSession() to copy messages back on session switch and stream completion. Also fix mobile viewport, session list overlay, hamburger logo, and various responsive improvements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { NButton, NSpin } from 'naive-ui'
|
|
import { useI18n } from 'vue-i18n'
|
|
import ProvidersPanel from '@/components/models/ProvidersPanel.vue'
|
|
import ProviderFormModal from '@/components/models/ProviderFormModal.vue'
|
|
import { useModelsStore } from '@/stores/models'
|
|
|
|
const { t } = useI18n()
|
|
const modelsStore = useModelsStore()
|
|
const showModal = ref(false)
|
|
|
|
onMounted(() => {
|
|
modelsStore.fetchProviders()
|
|
})
|
|
|
|
function openCreateModal() {
|
|
showModal.value = true
|
|
}
|
|
|
|
function handleModalClose() {
|
|
showModal.value = false
|
|
}
|
|
|
|
async function handleSaved() {
|
|
await modelsStore.fetchProviders()
|
|
handleModalClose()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="models-view">
|
|
<header class="page-header">
|
|
<h2 class="header-title">{{ t('models.title') }}</h2>
|
|
<NButton type="primary" size="small" @click="openCreateModal">
|
|
<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>
|
|
{{ t('models.addProvider') }}
|
|
</NButton>
|
|
</header>
|
|
|
|
<div class="models-content">
|
|
<NSpin :show="modelsStore.loading && modelsStore.providers.length === 0">
|
|
<ProvidersPanel />
|
|
</NSpin>
|
|
</div>
|
|
|
|
<ProviderFormModal
|
|
v-if="showModal"
|
|
@close="handleModalClose"
|
|
@saved="handleSaved"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/variables' as *;
|
|
|
|
.models-view {
|
|
height: calc(100 * var(--vh));
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.models-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
}
|
|
</style>
|