ydy0615/llm-in-text
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance logging and error handling in backend and editor components

Browse Source
This commit is contained in:
ydy0615
2026-01-25 13:29:11 +08:00
parent bf7dec86ab
commit 5f00e71ceb
6 changed files with 179 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/GhostTextOverlay.vue
View File

@@ -7,6 +7,7 @@
<script setup>
import { computed } from 'vue'
import { onMounted, onUnmounted, watch } from 'vue'
const props = defineProps({
suggestion: { type: String, default: '' },
@@ -15,6 +16,26 @@ const props = defineProps({
const emit = defineEmits(['accept', 'dismiss'])
onMounted(() => {
console.log('[GhostTextOverlay] Component mounted')
if (props.suggestion && props.position) {
console.log('[GhostTextOverlay] Suggestion visible:', props.suggestion.substring(0, 50))
console.log('[GhostTextOverlay] Position:', JSON.stringify(props.position))
}
})
onUnmounted(() => {
console.log('[GhostTextOverlay] Component unmounted')
})
watch([() => props.suggestion, () => props.position], ([newSuggestion, newPosition]) => {
console.log('[GhostTextOverlay] Props changed:', {
suggestionLength: newSuggestion?.length || 0,
hasPosition: !!newPosition,
positionKeys: newPosition ? Object.keys(newPosition) : []
})
}, { immediate: true })
const visible = computed(() => props.suggestion && props.position)
const overlayStyle = computed(() => ({
@@ -31,7 +52,10 @@ const overlayStyle = computed(() => ({
zIndex: 1000,
}))
const acceptSuggestion = () => emit('accept')
const acceptSuggestion = () => {
console.log('[GhostTextOverlay] acceptSuggestion called')
emit('accept')
}
</script>
<style scoped>

52
src/components/MilkdownEditor.vue
View File

@@ -16,8 +16,9 @@
<script setup>
import { onMounted, ref } from 'vue'
import { Crepe } from '@milkdown/crepe'
import { Crepe, rootCtx, defaultValueCtx } from '@milkdown/crepe'
import GhostTextOverlay from './GhostTextOverlay.vue'
import { createInlineSuggestionPlugin } from '../plugins/inlineSuggestionPlugin'
const root = ref(null)
const containerRef = ref(null)
@@ -25,11 +26,8 @@ let crepe = null
const suggestion = ref('')
const cursorRect = ref(null)
let debounceTimer = null
let lastPos = -1
const API_URL = 'http://localhost:8000/v1/completions'
const DEBOUNCE_MS = 150
onMounted(async () => {
console.log('[Debug] onMounted called')
@@ -39,9 +37,11 @@ onMounted(async () => {
}
console.log('[Debug] Creating Crepe editor...')
const inlineSuggestionPlugin = createInlineSuggestionPlugin({ apiUrl: API_URL })
crepe = new Crepe({
root: root.value,
defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
defaultValue: '# Welcome to Milkdown\n\nStart writing your markdown content here...',
plugins: [inlineSuggestionPlugin],
})
await crepe.create()
@@ -141,25 +141,14 @@ const onInput = async () => {
const view = ctx.get('view')
const { from } = view.state.selection
if (from === lastPos) {
console.log('[Debug] Same position, skipping')
return
}
lastPos = from
console.log('[Debug] onInput triggered at position:', from)
const prefix = view.state.doc.textBetween(0, from)
const suffix = view.state.doc.textBetween(from, view.state.doc.content.size)
console.log('[Debug] Prefix preview:', prefix.substring(-50))
clearTimeout(debounceTimer)
debounceTimer = setTimeout(async () => {
cursorRect.value = await getCursorPosition()
suggestion.value = await fetchSuggestion(prefix, suffix)
console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
}, DEBOUNCE_MS)
cursorRect.value = await getCursorPosition()
suggestion.value = await fetchSuggestion(prefix, suffix)
console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
} catch (e) {
console.error('[Debug] onInput error:', e)
}
@@ -201,31 +190,6 @@ const exportMarkdown = async () => {
a.click()
URL.revokeObjectURL(url)
}
// 监听 crepe 创建完成后绑定事件
const initEditorEvents = () => {
if (!crepe) return
try {
const ctx = crepe.ctx.get()
const view = ctx.get('view')
console.log('[Debug] Binding input event to editor DOM')
// 直接在编辑器 DOM 上监听输入事件
view.dom.addEventListener('input', onInput)
view.dom.addEventListener('keydown', (e) => {
console.log('[Debug] Keydown:', e.key, 'code:', e.code)
if (e.key === 'Tab') {
handleTab()
}
})
} catch (e) {
console.error('[Debug] Failed to bind events:', e)
}
}
// 延迟初始化事件绑定
setTimeout(initEditorEvents, 500)
</script>
<style scoped>

83
src/plugins/inlineSuggestionPlugin.ts
View File

@@ -13,25 +13,40 @@ interface InlineSuggestionOptions {
function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
const apiUrl = options.apiUrl || 'http://localhost:8000/v1/completions';
console.log('[InlineSuggestion] Plugin initialized with API URL:', apiUrl);
return new Plugin({
key: INLINE_SUGGESTION_KEY,
state: {
init: () => ({ suggestion: '', visible: false }),
init: () => {
console.log('[InlineSuggestion] State initialized');
return { suggestion: '', visible: false };
},
apply: (tr, value) => {
if (!tr.docChanged) return value;
const { from, to } = tr.selection;
if (from === suggestionPos.from && to === suggestionPos.to) {
if (!tr.docChanged) {
console.log('[InlineSuggestion] No doc change in apply, returning same state');
return value;
}
return { suggestion: '', visible: false };
const { from, to } = tr.selection;
console.log('[InlineSuggestion] Apply called - selection changed:', { from, to }, 'current suggestionPos:', suggestionPos);
if (from === suggestionPos.from && to === suggestionPos.to) {
console.log('[InlineSuggestion] Selection matches suggestion position, keeping state');
return value;
}
const newState = { suggestion: '', visible: false };
console.log('[InlineSuggestion] Resetting suggestion state');
return newState;
},
},
props: {
handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
if (event.key === 'Tab' && INLINE_SUGGESTION_KEY.getState(view.state).visible) {
const currentState = INLINE_SUGGESTION_KEY.getState(view.state);
console.log('[InlineSuggestion] Key pressed:', event.key, 'suggestion visible:', currentState.visible);
if (event.key === 'Tab' && currentState.visible) {
event.preventDefault();
const { suggestion } = INLINE_SUGGESTION_KEY.getState(view.state);
const { suggestion } = currentState;
console.log('[InlineSuggestion] Tab pressed - accepting suggestion:', suggestion.substring(0, 50));
if (suggestion) {
view.dispatch(view.state.tr.insertText(suggestion, view.state.selection.from));
currentSuggestion = '';
@@ -41,6 +56,7 @@ function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
if (event.key === 'Escape') {
const state = INLINE_SUGGESTION_KEY.getState(view.state);
if (state.visible) {
console.log('[InlineSuggestion] Escape pressed - dismissing suggestion');
view.dispatch(view.state.tr.setMeta(INLINE_SUGGESTION_KEY, { suggestion: '', visible: false }));
currentSuggestion = '';
return true;
@@ -51,7 +67,12 @@ function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
},
appendTransaction: (transactions, oldState, newState) => {
const lastTr = transactions[transactions.length - 1];
if (!lastTr || !lastTr.docChanged) return null;
if (!lastTr || !lastTr.docChanged) {
console.log('[InlineSuggestion] No document change in transaction');
return null;
}
console.log('[InlineSuggestion] Document changed, setting up debounce for', DEBOUNCE_MS, 'ms');
clearTimeout(debounceTimer);
debounceTimer = setTimeout(async () => {
@@ -59,40 +80,72 @@ function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
const prefix = newState.doc.textBetween(0, from);
const suffix = newState.doc.textBetween(to, newState.doc.content.size);
console.log('[InlineSuggestion] Debounce fired - position:', { from, to });
console.log('[InlineSuggestion] Prefix length:', prefix.length, 'Suffix length:', suffix.length);
console.log('[InlineSuggestion] Prefix (last 100):', prefix.slice(-100));
console.log('[InlineSuggestion] Suffix (first 100):', suffix.slice(0, 100));
try {
console.log('[InlineSuggestion] Fetching from:', apiUrl);
const res = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
});
if (!res.ok) return;
console.log('[InlineSuggestion] Response status:', res.status);
if (!res.ok) {
const errorText = await res.text();
console.error('[InlineSuggestion] API error:', errorText);
return;
}
const reader = res.body?.getReader();
if (!reader) return;
if (!reader) {
console.error('[InlineSuggestion] No response body reader');
return;
}
let text = '';
let chunkCount = 0;
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunkCount++;
const chunk = new TextDecoder().decode(value);
console.log('[InlineSuggestion] Raw chunk', chunkCount, ':', chunk.substring(0, 200));
const lines = chunk.split('\n').filter(l => l.startsWith('data: '));
for (const line of lines) {
try {
const data = JSON.parse(line.slice(6));
if (data.content) text += data.content;
if (data.done) break;
} catch {}
if (data.content) {
text += data.content;
console.log('[InlineSuggestion] Accumulated suggestion:', text.substring(0, 100));
}
if (data.done) {
console.log('[InlineSuggestion] Stream done signal received');
break;
}
} catch (e) {
console.error('[InlineSuggestion] JSON parse error:', e);
}
}
}
console.log('[InlineSuggestion] Total chunks received:', chunkCount, 'Total text length:', text.length);
if (text && newState.selection.from === from) {
currentSuggestion = text;
suggestionPos = { from, to: from + text.length };
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, { suggestion: text, visible: true }));
const metaUpdate = { suggestion: text, visible: true };
console.log('[InlineSuggestion] Setting suggestion:', text.substring(0, 50), '...');
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, metaUpdate));
} else {
console.log('[InlineSuggestion] Suggestion not applied - empty text or cursor moved');
}
} catch (e) {
console.error('Inline suggestion error:', e);
console.error('[InlineSuggestion] Error:', e);
}
}, DEBOUNCE_MS);