cirry/electron-opencode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 开发对话功能

Browse Source
This commit is contained in:
cirry
2026-04-11 16:54:09 +08:00
parent 5151379726
commit 8c2ea4488b
8 changed files with 466 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/renderer/views/chat/ChatView.vue
View File

@@ -7,12 +7,8 @@
<span class="status-text">{{ statusText }}</span>
</div>
<div class="status-actions">
<el-button v-if="!isRunning" size="small" type="primary" :loading="isStarting" @click="startService">
启动服务
</el-button>
<el-button v-else size="small" type="danger" plain @click="stopService">
停止服务
</el-button>
<el-button v-if="!isRunning" size="small" type="primary" :loading="isStarting" @click="startService"> 启动服务 </el-button>
<el-button v-else size="small" type="danger" plain @click="stopService"> 停止服务 </el-button>
</div>
</div>
@@ -22,12 +18,7 @@
<el-icon :size="40" color="#c0c4cc"><ChatDotRound /></el-icon>
<p>启动服务后开始对话</p>
</div>
<div
v-for="msg in messages"
:key="msg.id"
class="bubble-wrap"
:class="msg.role"
>
<div v-for="msg in messages" :key="msg.id" class="bubble-wrap" :class="msg.role">
<div class="bubble">
<pre class="bubble-text">{{ msg.text }}</pre>
</div>
@@ -45,153 +36,171 @@
resize="none"
@keydown.ctrl.enter.prevent="send"
/>
<el-button
type="primary"
:disabled="!isRunning || isSending || !inputText.trim()"
:loading="isSending"
@click="send"
>
发送
</el-button>
<el-button type="primary" :disabled="!isRunning || isSending || !inputText.trim()" :loading="isSending" @click="send"> 发送 </el-button>
</div>
</div>
</template>
<script setup>
import { ref, computed, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { ChatDotRound } from '@element-plus/icons-vue'
import { createEventSource } from '@/http/api.js'
import { ref, computed, onUnmounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { ChatDotRound } from '@element-plus/icons-vue';
import { createEventSource } from '@/http/api.js';
const isRunning = ref(false)
const isStarting = ref(false)
const isSending = ref(false)
const inputText = ref('')
const messages = ref([])
const messagesRef = ref(null)
const currentSessionId = ref(null)
let eventSource = null
const isRunning = ref(false);
const isStarting = ref(false);
const isSending = ref(false);
const inputText = ref('');
const messages = ref([]);
const messagesRef = ref(null);
const currentSessionId = ref(null);
const assistantMessageIds = new Set();
let eventSource = null;
const serviceStatus = computed(() => {
if (isStarting.value) return 'starting'
return isRunning.value ? 'running' : 'stopped'
})
if (isStarting.value) return 'starting';
return isRunning.value ? 'running' : 'stopped';
});
const statusText = computed(() => {
if (isStarting.value) return '正在启动...'
return isRunning.value ? '服务运行中' : '服务未启动'
})
if (isStarting.value) return '正在启动...';
return isRunning.value ? '服务运行中' : '服务未启动';
});
function scrollToBottom() {
nextTick(() => {
if (messagesRef.value) {
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
}
})
});
}
function upsertAssistantBubble(msgId, text) {
const existing = messages.value.find(m => m.id === msgId)
const existing = messages.value.find((m) => m.id === msgId);
if (existing) {
existing.text = text
existing.text = text;
} else {
messages.value.push({ id: msgId, role: 'assistant', text })
messages.value.push({ id: msgId, role: 'assistant', text });
}
scrollToBottom()
scrollToBottom();
}
function connectSSE() {
if (eventSource) eventSource.close()
eventSource = createEventSource()
if (eventSource) eventSource.close();
eventSource = createEventSource();
eventSource.onmessage = (e) => {
try {
const data = JSON.parse(e.data)
const props = data.properties || {}
const data = JSON.parse(e.data);
// 打印所有 SSE 事件，便于调试事件结构
console.log('[SSE]', data.type, JSON.stringify(data));
const props = data.properties || {};
if (data.type === 'message.part.updated') {
const part = props.part
if (!part || part.type !== 'text') return
if (part.sessionID !== currentSessionId.value) return
upsertAssistantBubble(part.messageID, part.text || '')
const part = props.part;
if (!part || part.type !== 'text') return;
if (part.sessionID !== currentSessionId.value) return;
// 通过 messageID 前缀区分用户/助手消息：只渲染 assistant 消息的 part
// assistant 消息的 messageID 会在 message.updated 事件中记录，用 assistantMessageIds 集合过滤
if (!assistantMessageIds.has(part.messageID)) return;
upsertAssistantBubble(part.messageID, part.text || '');
}
if (data.type === 'message.completed') {
isSending.value = false
if (data.type === 'message.updated') {
const info = props.info;
// 记录 assistant 消息的 ID，供 message.part.updated 过滤使用
if (info && info.role === 'assistant' && info.sessionID === currentSessionId.value) {
assistantMessageIds.add(info.id);
}
}
if (data.type === 'session.idle') {
// session.idle 表示 AI 响应已全部完成，重置发送状态
if (props.sessionID === currentSessionId.value) {
isSending.value = false;
}
}
} catch (_) {}
}
};
eventSource.onerror = () => {
isSending.value = false
}
isSending.value = false;
};
}
async function startService() {
isStarting.value = true
isStarting.value = true;
try {
const info = await window.opencode.start()
isRunning.value = info.running
const info = await window.opencode.start();
isRunning.value = info.running;
// 更新 baseUrl 供 http 层使用
if (info.url) window.__opencodeBaseUrl = info.url
connectSSE()
ElMessage.success('服务已启动')
if (info.url) window.__opencodeBaseUrl = info.url;
connectSSE();
ElMessage.success('服务已启动');
} catch (err) {
ElMessage.error(`启动失败: ${err.message}`)
ElMessage.error(`启动失败: ${err.message}`);
} finally {
isStarting.value = false
isStarting.value = false;
}
}
async function stopService() {
await window.opencode.stop()
isRunning.value = false
currentSessionId.value = null
messages.value = []
if (eventSource) { eventSource.close(); eventSource = null }
ElMessage.info('服务已停止')
await window.opencode.stop();
isRunning.value = false;
currentSessionId.value = null;
messages.value = [];
assistantMessageIds.clear();
if (eventSource) {
eventSource.close();
eventSource = null;
}
ElMessage.info('服务已停止');
}
async function send() {
const text = inputText.value.trim()
if (!text || isSending.value) return
const text = inputText.value.trim();
if (!text || isSending.value) return;
// 首次发送时创建会话
if (!currentSessionId.value) {
try {
const session = await window.opencode.createSession()
currentSessionId.value = session.id
const session = await window.opencode.createSession();
currentSessionId.value = session.id;
} catch (err) {
ElMessage.error(`创建会话失败: ${err.message}`)
return
ElMessage.error(`创建会话失败: ${err.message}`);
return;
}
}
messages.value.push({ id: Date.now(), role: 'user', text })
inputText.value = ''
isSending.value = true
scrollToBottom()
messages.value.push({ id: Date.now(), role: 'user', text });
inputText.value = '';
isSending.value = true;
scrollToBottom();
try {
await window.opencode.sendMessage(currentSessionId.value, text)
await window.opencode.promptAsync(currentSessionId.value, text);
// 发送成功后等待 SSE 事件流推送 AI 响应，isSending 由 message.completed 事件重置
} catch (err) {
ElMessage.error(`发送失败: ${err.message}`)
isSending.value = false
ElMessage.error(`发送失败: ${err.message}`);
isSending.value = false;
}
}
// 初始化时同步服务状态
window.opencode?.info().then((info) => {
isRunning.value = info.running
if (info.running) {
if (info.url) window.__opencodeBaseUrl = info.url
connectSSE()
}
}).catch(() => {})
window.opencode
?.info()
.then((info) => {
isRunning.value = info.running;
if (info.running) {
if (info.url) window.__opencodeBaseUrl = info.url;
connectSSE();
}
})
.catch(() => {});
onUnmounted(() => {
if (eventSource) eventSource.close()
})
if (eventSource) eventSource.close();
});
</script>
<style scoped>
@@ -228,13 +237,25 @@ onUnmounted(() => {
flex-shrink: 0;
}
.dot.stopped { background: #c0c4cc; }
.dot.starting { background: #e6a23c; animation: pulse 1s infinite; }
.dot.running { background: #67c23a; }
.dot.stopped {
background: #c0c4cc;
}
.dot.starting {
background: #e6a23c;
animation: pulse 1s infinite;
}
.dot.running {
background: #67c23a;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
.messages {
@@ -263,8 +284,12 @@ onUnmounted(() => {
display: flex;
}
.bubble-wrap.user { justify-content: flex-end; }
.bubble-wrap.assistant { justify-content: flex-start; }
.bubble-wrap.user {
justify-content: flex-end;
}
.bubble-wrap.assistant {
justify-content: flex-start;
}
.bubble {
max-width: 75%;