120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
|
<div class="chat-panel">
|
|
<header class="chat-header">
|
|
<span class="chat-title">Robin</span>
|
|
<span class="chat-status">● ready</span>
|
|
</header>
|
|
|
|
<div class="chat-messages" ref="messagesEl">
|
|
<div v-if="messages.length === 0" class="chat-empty">
|
|
<p>Robin is watching your system.</p>
|
|
<p>Ask me anything about Linux, or wait for me to notice something.</p>
|
|
</div>
|
|
<div
|
|
v-for="(msg, i) in messages"
|
|
:key="i"
|
|
class="message"
|
|
:class="msg.role"
|
|
>
|
|
<p>{{ msg.content }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="chat-footer">
|
|
<input
|
|
v-model="input"
|
|
class="chat-input"
|
|
placeholder="Ask Robin something..."
|
|
@keydown.enter="send"
|
|
/>
|
|
<button class="send-btn" @click="send">→</button>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, nextTick } from 'vue'
|
|
|
|
interface Message { role: 'user' | 'robin'; content: string }
|
|
|
|
const messages = ref<Message[]>([])
|
|
const input = ref('')
|
|
const messagesEl = ref<HTMLElement | null>(null)
|
|
|
|
async function send() {
|
|
const text = input.value.trim()
|
|
if (!text) return
|
|
input.value = ''
|
|
messages.value.push({ role: 'user', content: text })
|
|
// M4: invoke('chat', { message: text }) and stream response
|
|
messages.value.push({ role: 'robin', content: '(LLM chat not yet connected — M4)' })
|
|
await nextTick()
|
|
messagesEl.value?.scrollTo({ top: messagesEl.value.scrollHeight, behavior: 'smooth' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chat-panel {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid #2a2a4a;
|
|
}
|
|
|
|
.chat-title { font-weight: 600; color: #fff; }
|
|
.chat-status { font-size: 11px; color: #4caf50; }
|
|
|
|
.chat-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.chat-empty p { color: #555; font-size: 13px; line-height: 1.6; }
|
|
|
|
.message { max-width: 88%; }
|
|
.message.user { align-self: flex-end; background: #2a3a5a; padding: 8px 12px; border-radius: 12px 12px 2px 12px; }
|
|
.message.robin { align-self: flex-start; background: #252535; padding: 8px 12px; border-radius: 12px 12px 12px 2px; }
|
|
.message p { line-height: 1.5; }
|
|
|
|
.chat-footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
border-top: 1px solid #2a2a4a;
|
|
}
|
|
|
|
.chat-input {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
background: #252535;
|
|
border: 1px solid #3a3a5a;
|
|
border-radius: 8px;
|
|
color: #e0e0e0;
|
|
font-size: 14px;
|
|
outline: none;
|
|
}
|
|
.chat-input:focus { border-color: #4a7abf; }
|
|
|
|
.send-btn {
|
|
padding: 8px 14px;
|
|
background: #4a7abf;
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
.send-btn:hover { opacity: 0.85; }
|
|
</style>
|