Spaces:
Sleeping
Sleeping
File size: 3,686 Bytes
8b9f7d9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | <script setup lang="ts">
import { ref, nextTick, watch } from 'vue'
import { marked } from 'marked'
import type { ChatMessage } from '../types'
import { sendChat } from '../api'
import Wc3Button from '../wc3/base/Button.vue'
import CitationPanel from './CitationPanel.vue'
const props = defineProps<{
model: string
showCitations: boolean
}>()
const history = defineModel<ChatMessage[]>('history', { required: true })
const inputText = ref('')
const isLoading = ref(false)
const error = ref('')
const messagesEl = ref<HTMLElement | null>(null)
marked.setOptions({ breaks: true, gfm: true })
function renderMd(text: string): string {
return marked.parse(text) as string
}
async function scrollToBottom() {
await nextTick()
if (messagesEl.value) {
messagesEl.value.scrollTop = messagesEl.value.scrollHeight
}
}
watch(() => history.value.length, scrollToBottom)
async function handleSend() {
const text = inputText.value.trim()
if (!text || isLoading.value) return
inputText.value = ''
error.value = ''
history.value.push({ role: 'user', content: text })
await scrollToBottom()
isLoading.value = true
try {
const res = await sendChat(text, props.model, history.value)
history.value.push({
role: 'assistant',
content: res.reply,
citations: res.citations,
model_used: res.model_used,
})
} catch (e: any) {
error.value = e.message || 'Greska pri slanju poruke'
} finally {
isLoading.value = false
await scrollToBottom()
}
}
function handleKeydown(e: KeyboardEvent) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
handleSend()
}
}
</script>
<template>
<div class="chat-area">
<!-- Messages -->
<div class="messages-container" ref="messagesEl">
<!-- Empty -->
<div v-if="history.length === 0" style="text-align: center; margin-top: 3rem;">
<div style="font-size: 3rem; margin-bottom: 0.75rem;">📜</div>
<p style="font-family: var(--font-heading); color: var(--wc3-gold); font-size: 1rem;">
Dobrodosli!
</p>
<p style="color: var(--wc3-text-dim); font-size: 0.9rem; max-width: 400px; margin: 0.5rem auto;">
Postavi pitanje o patofiziologiji.
</p>
</div>
<template v-for="(msg, idx) in history" :key="idx">
<div class="msg" :class="msg.role">
<div v-html="renderMd(msg.content)"></div>
<div class="msg-meta" v-if="msg.model_used">
{{ msg.model_used }}
</div>
<CitationPanel
v-if="msg.role === 'assistant' && showCitations && msg.citations?.length"
:citations="msg.citations"
/>
</div>
</template>
<div v-if="isLoading" class="loading">
<span>Generiranje odgovora</span>
<span class="dot-pulse"><span></span><span></span><span></span></span>
</div>
<div v-if="error" class="error-msg">⚠️ {{ error }}</div>
</div>
<!-- Input -->
<div class="chat-input-bar">
<input
class="wc3-input"
v-model="inputText"
@keydown="handleKeydown"
placeholder="Postavi pitanje o patofiziologiji..."
:disabled="isLoading"
/>
<div class="chat-send-btn">
<Wc3Button size="s" @click="handleSend" :disabled="isLoading || !inputText.trim()">
Posalji
</Wc3Button>
</div>
</div>
</div>
</template>
<style scoped>
.chat-area {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.messages-container {
flex: 1;
overflow-y: auto;
padding: 1rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
</style>
|