feat: switch from OpenAI API to native Ollama Python client
This commit refactors the LLM integration to use Ollama's native Python client instead of OpenAI-compatible API, while fixing critical template syntax errors and improving project structure. Key changes: - Replace openai package with ollama package in backend requirements - Rewrite llm.py to use ollama.AsyncClient for direct Ollama API calls - Update main.py to use non-streaming Ollama responses with thinking extraction - Fix template syntax error in MilkdownEditor.vue (GhostTextOverlay component tags) - Fix string截取错误 by using slice() instead of substring() - Add src/utils/api.js and src/utils/config.js for shared configuration - Add CORS middleware to FastAPI backend - Update prompt.py with clearer instructions for continuation generation - Add comprehensive README.md documentation BREAKING CHANGE: Environment variables OLLAMA_BASE_URL changed to OLLAMA_HOST (remove /v1/ suffix)
This commit is contained in:
“ydy0615”
@@ -1,43 +1,35 @@
|
||||
<template>
|
||||
<div v-if="visible" class="ghost-text-overlay" :style="overlayStyle"
|
||||
@click="acceptSuggestion"
|
||||
>{{ suggestion }}
|
||||
>{{ truncatedSuggestion }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { onMounted, onUnmounted, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
suggestion: { type: String, default: '' },
|
||||
position: { type: Object, required: true },
|
||||
position: {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => typeof value.left === 'number' && typeof value.top === 'number'
|
||||
}
|
||||
})
|
||||
|
||||
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 MAX_SUGGESTION_LENGTH = 200
|
||||
|
||||
const visible = computed(() => props.suggestion && props.position)
|
||||
|
||||
const truncatedSuggestion = computed(() => {
|
||||
if (props.suggestion.length > MAX_SUGGESTION_LENGTH) {
|
||||
return props.suggestion.slice(0, MAX_SUGGESTION_LENGTH) + '...'
|
||||
}
|
||||
return props.suggestion
|
||||
})
|
||||
|
||||
const overlayStyle = computed(() => ({
|
||||
position: 'absolute',
|
||||
left: `${props.position.left}px`,
|
||||
@@ -52,10 +44,7 @@ const overlayStyle = computed(() => ({
|
||||
zIndex: 1000,
|
||||
}))
|
||||
|
||||
const acceptSuggestion = () => {
|
||||
console.log('[GhostTextOverlay] acceptSuggestion called')
|
||||
emit('accept')
|
||||
}
|
||||
const acceptSuggestion = () => emit('accept')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
+171
-119
@@ -3,179 +3,212 @@
|
||||
<button class="export-btn" @click="exportMarkdown">导出文件</button>
|
||||
|
||||
<div ref="root" class="milkdown-editor"></div>
|
||||
|
||||
GhostTextOverlay
|
||||
|
||||
<GhostTextOverlay
|
||||
v-if="suggestion && cursorRect"
|
||||
:suggestion="suggestion"
|
||||
:position="cursorRect"
|
||||
@accept="acceptSuggestion"
|
||||
@dismiss="dismissSuggestion"
|
||||
/GhostTextOverlay
|
||||
/>
|
||||
|
||||
<div v-if="isLoading" class="loading-indicator">正在获取建议...</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Crepe, rootCtx, defaultValueCtx } from '@milkdown/crepe'
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { Crepe } from '@milkdown/crepe'
|
||||
import GhostTextOverlay from './GhostTextOverlay.vue'
|
||||
import { createInlineSuggestionPlugin } from '../plugins/inlineSuggestionPlugin'
|
||||
import { fetchSuggestion } from '../utils/api.js'
|
||||
import { DEBUG } from '../utils/config.js'
|
||||
|
||||
const root = ref(null)
|
||||
const containerRef = ref(null)
|
||||
let crepe = null
|
||||
let editorElement = null
|
||||
|
||||
const suggestion = ref('')
|
||||
const cursorRect = ref(null)
|
||||
const isLoading = ref(false)
|
||||
const lastFetchedContent = ref('')
|
||||
let debounceTimer = null
|
||||
|
||||
const API_URL = 'http://localhost:8000/v1/completions'
|
||||
const DEBOUNCE_MS = 500
|
||||
|
||||
onMounted(async () => {
|
||||
console.log('[Debug] onMounted called')
|
||||
if (!root.value) {
|
||||
console.log('[Debug] root.value is null')
|
||||
return
|
||||
}
|
||||
if (DEBUG) console.log('[Debug] onMounted called')
|
||||
if (!root.value) throw new Error('root.value is null')
|
||||
|
||||
console.log('[Debug] Creating Crepe editor...')
|
||||
const inlineSuggestionPlugin = createInlineSuggestionPlugin({ apiUrl: API_URL })
|
||||
if (DEBUG) console.log('[Debug] Creating Crepe editor...')
|
||||
crepe = new Crepe({
|
||||
root: root.value,
|
||||
defaultValue: '# Welcome to Milkdown\n\nStart writing your markdown content here...',
|
||||
plugins: [inlineSuggestionPlugin],
|
||||
defaultValue: '# Welcome to LLM in text\n\nStart writing your content here...',
|
||||
})
|
||||
|
||||
await crepe.create()
|
||||
console.log('[Debug] Crepe editor created')
|
||||
if (DEBUG) console.log('[Debug] Crepe editor created')
|
||||
|
||||
observeEditor()
|
||||
})
|
||||
|
||||
const getCursorPosition = async () => {
|
||||
if (!crepe) {
|
||||
console.log('[Debug] getCursorPosition: crepe is null')
|
||||
return null
|
||||
}
|
||||
const observeEditor = () => {
|
||||
if (!containerRef.value) throw new Error('containerRef.value is null')
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
const { from } = view.state.selection
|
||||
console.log('[Debug] Cursor position:', from)
|
||||
|
||||
const coords = view.coordsAtPos(from)
|
||||
const containerRect = containerRef.value?.getBoundingClientRect()
|
||||
if (!containerRect) {
|
||||
console.log('[Debug] containerRect is null')
|
||||
return null
|
||||
const observer = new MutationObserver(() => {
|
||||
const editorEl = containerRef.value?.querySelector('.milkdown .editor') ||
|
||||
containerRef.value?.querySelector('.milkdown')
|
||||
if (editorEl) {
|
||||
editorElement = editorEl
|
||||
bindEditorEvents(editorEl)
|
||||
observer.disconnect()
|
||||
if (DEBUG) console.log('[Debug] Editor element found and events bound')
|
||||
}
|
||||
|
||||
return {
|
||||
left: coords.left - containerRect.left,
|
||||
top: coords.top - containerRect.top + window.scrollY,
|
||||
fontSize: 16,
|
||||
fontFamily: 'monospace',
|
||||
})
|
||||
|
||||
observer.observe(containerRef.value, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
const existingEl = containerRef.value?.querySelector('.milkdown .editor') ||
|
||||
containerRef.value?.querySelector('.milkdown')
|
||||
if (existingEl) {
|
||||
editorElement = existingEl
|
||||
bindEditorEvents(existingEl)
|
||||
observer.disconnect()
|
||||
if (DEBUG) console.log('[Debug] Editor element found immediately')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[Debug] getCursorPosition error:', e)
|
||||
return null
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const bindEditorEvents = (editorEl) => {
|
||||
editorEl.addEventListener('input', onInput)
|
||||
editorEl.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
handleTab()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getEditorContent = () => {
|
||||
if (!editorElement) throw new Error('editorElement is null')
|
||||
return editorElement.innerText || ''
|
||||
}
|
||||
|
||||
const getCursorPositionFromDOM = () => {
|
||||
if (!editorElement) throw new Error('editorElement is null')
|
||||
const selection = window.getSelection()
|
||||
if (!selection.rangeCount) throw new Error('No selection')
|
||||
|
||||
const range = selection.getRangeAt(0)
|
||||
const rect = range.getBoundingClientRect()
|
||||
const containerRect = containerRef.value?.getBoundingClientRect()
|
||||
if (!containerRect) throw new Error('containerRect is null')
|
||||
|
||||
return {
|
||||
left: rect.left - containerRect.left,
|
||||
top: rect.top - containerRect.top + window.scrollY,
|
||||
fontSize: 16,
|
||||
fontFamily: 'monospace',
|
||||
}
|
||||
}
|
||||
|
||||
const fetchSuggestion = async (prefix, suffix) => {
|
||||
console.log('[Debug] fetchSuggestion called with prefix length:', prefix.length, 'suffix length:', suffix.length)
|
||||
try {
|
||||
const res = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
})
|
||||
|
||||
console.log('[Debug] fetchSuggestion response status:', res.status)
|
||||
if (!res.ok) {
|
||||
console.log('[Debug] Response not ok')
|
||||
return ''
|
||||
}
|
||||
|
||||
const reader = res.body?.getReader()
|
||||
if (!reader) {
|
||||
console.log('[Debug] No reader available')
|
||||
return ''
|
||||
}
|
||||
|
||||
let text = ''
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
const chunk = new TextDecoder().decode(value)
|
||||
console.log('[Debug] Received chunk:', chunk.substring(0, 100))
|
||||
|
||||
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
|
||||
console.log('[Debug] Added content:', data.content)
|
||||
}
|
||||
if (data.done || data.error) break
|
||||
} catch (e) {
|
||||
console.warn('[Debug] JSON parse error:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[Debug] Final suggestion text:', text.substring(0, 100))
|
||||
return text
|
||||
} catch (e) {
|
||||
console.error('[Debug] fetchSuggestion error:', e)
|
||||
return ''
|
||||
}
|
||||
const getCursorPosition = async () => {
|
||||
return getCursorPositionFromDOM()
|
||||
}
|
||||
|
||||
const onInput = async () => {
|
||||
if (!crepe) {
|
||||
console.log('[Debug] onInput: crepe is null')
|
||||
return
|
||||
if (!editorElement) throw new Error('editorElement is null')
|
||||
|
||||
const selection = window.getSelection()
|
||||
if (!selection.rangeCount) return
|
||||
|
||||
const range = selection.getRangeAt(0)
|
||||
const from = range.startOffset
|
||||
|
||||
const content = getEditorContent()
|
||||
const prefix = content.slice(0, from)
|
||||
const suffix = content.slice(from)
|
||||
|
||||
if (DEBUG) console.log('[Debug] onInput triggered at position:', from)
|
||||
|
||||
// 清除之前的定时器
|
||||
if (debounceTimer) {
|
||||
clearTimeout(debounceTimer)
|
||||
}
|
||||
|
||||
try {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
const { from } = view.state.selection
|
||||
// 设置新的定时器 - 只有停止输入后才触发
|
||||
debounceTimer = setTimeout(async () => {
|
||||
if (DEBUG) console.log('[Debug] Debounce timeout reached, fetching suggestion...')
|
||||
|
||||
console.log('[Debug] onInput triggered at position:', from)
|
||||
// 检查是否已经有建议在显示，如果内容没变则跳过
|
||||
if (suggestion.value && content === lastFetchedContent.value) {
|
||||
if (DEBUG) console.log('[Debug] Content unchanged, skipping fetch')
|
||||
return
|
||||
}
|
||||
|
||||
const prefix = view.state.doc.textBetween(0, from)
|
||||
const suffix = view.state.doc.textBetween(from, view.state.doc.content.size)
|
||||
|
||||
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)
|
||||
}
|
||||
isLoading.value = true
|
||||
try {
|
||||
cursorRect.value = await getCursorPosition()
|
||||
suggestion.value = await fetchSuggestion(prefix, suffix)
|
||||
lastFetchedContent.value = content
|
||||
if (DEBUG) console.log('[Debug] Suggestion updated:', suggestion.value ? 'yes' : 'no')
|
||||
} catch (e) {
|
||||
if (DEBUG) console.error('[Debug] Fetch error:', e)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
debounceTimer = null
|
||||
}
|
||||
}, DEBOUNCE_MS)
|
||||
}
|
||||
|
||||
const handleTab = () => {
|
||||
if (suggestion.value) {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
view.dispatch(view.state.tr.insertText(suggestion.value))
|
||||
const selection = window.getSelection()
|
||||
if (!selection.rangeCount) return
|
||||
|
||||
const range = selection.getRangeAt(0)
|
||||
range.deleteContents()
|
||||
|
||||
const textNode = document.createTextNode(suggestion.value)
|
||||
range.insertNode(textNode)
|
||||
|
||||
range.setStartAfter(textNode)
|
||||
range.setEndAfter(textNode)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
|
||||
suggestion.value = ''
|
||||
console.log('[Debug] Tab pressed, accepted suggestion')
|
||||
if (DEBUG) console.log('[Debug] Tab pressed, accepted suggestion')
|
||||
}
|
||||
}
|
||||
|
||||
const dismissSuggestion = () => {
|
||||
suggestion.value = ''
|
||||
console.log('[Debug] Suggestion dismissed')
|
||||
if (DEBUG) console.log('[Debug] Suggestion dismissed')
|
||||
}
|
||||
|
||||
const acceptSuggestion = () => {
|
||||
if (suggestion.value) {
|
||||
const ctx = crepe.ctx.get()
|
||||
const view = ctx.get('view')
|
||||
view.dispatch(view.state.tr.insertText(suggestion.value))
|
||||
const selection = window.getSelection()
|
||||
if (!selection.rangeCount) return
|
||||
|
||||
const range = selection.getRangeAt(0)
|
||||
range.deleteContents()
|
||||
|
||||
const textNode = document.createTextNode(suggestion.value)
|
||||
range.insertNode(textNode)
|
||||
|
||||
range.setStartAfter(textNode)
|
||||
range.setEndAfter(textNode)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
|
||||
suggestion.value = ''
|
||||
console.log('[Debug] Suggestion accepted via click')
|
||||
if (DEBUG) console.log('[Debug] Suggestion accepted via click')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -190,6 +223,13 @@ const exportMarkdown = async () => {
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (debounceTimer) {
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -197,7 +237,7 @@ const exportMarkdown = async () => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
export-btn {
|
||||
.export-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
@@ -210,7 +250,7 @@ export-btn {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
export-btn:hover {
|
||||
.export-btn:hover {
|
||||
background-color: #3a7bc8;
|
||||
}
|
||||
|
||||
@@ -247,4 +287,16 @@ export-btn:hover {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
padding: 8px 16px;
|
||||
background-color: #4a90d9;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,64 +1,58 @@
|
||||
import { Plugin, PluginKey } from '@milkdown/prose/state';
|
||||
import { EditorView } from '@milkdown/prose/view';
|
||||
import { fetchSuggestion } from '../utils/api.js';
|
||||
import { DEBUG, API_URL } from '../utils/config.js';
|
||||
|
||||
const INLINE_SUGGESTION_KEY = new PluginKey('inline-suggestion');
|
||||
const DEBOUNCE_MS = 150;
|
||||
let debounceTimer = null;
|
||||
let currentSuggestion = '';
|
||||
let suggestionPos = { from: 0, to: 0 };
|
||||
|
||||
interface InlineSuggestionOptions {
|
||||
apiUrl?: string;
|
||||
}
|
||||
|
||||
function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
|
||||
const apiUrl = options.apiUrl || 'http://localhost:8000/v1/completions';
|
||||
console.log('[InlineSuggestion] Plugin initialized with API URL:', apiUrl);
|
||||
interface InlineSuggestionState {
|
||||
suggestion: string;
|
||||
visible: boolean;
|
||||
debounceTimer: ReturnType<typeof setTimeout> | null;
|
||||
currentSuggestion: string;
|
||||
suggestionPos: { from: number; to: number };
|
||||
}
|
||||
|
||||
return new Plugin({
|
||||
function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
|
||||
const apiUrl = options.apiUrl || API_URL;
|
||||
|
||||
return new Plugin<InlineSuggestionState>({
|
||||
key: INLINE_SUGGESTION_KEY,
|
||||
state: {
|
||||
init: () => {
|
||||
console.log('[InlineSuggestion] State initialized');
|
||||
return { suggestion: '', visible: false };
|
||||
},
|
||||
init: () => ({
|
||||
suggestion: '',
|
||||
visible: false,
|
||||
debounceTimer: null,
|
||||
currentSuggestion: '',
|
||||
suggestionPos: { from: 0, to: 0 }
|
||||
}),
|
||||
apply: (tr, value) => {
|
||||
if (!tr.docChanged) {
|
||||
console.log('[InlineSuggestion] No doc change in apply, returning same state');
|
||||
return value;
|
||||
}
|
||||
if (!tr.docChanged) return value;
|
||||
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');
|
||||
if (from === value.suggestionPos.from && to === value.suggestionPos.to) {
|
||||
return value;
|
||||
}
|
||||
const newState = { suggestion: '', visible: false };
|
||||
console.log('[InlineSuggestion] Resetting suggestion state');
|
||||
return newState;
|
||||
return { ...value, suggestion: '', visible: false };
|
||||
},
|
||||
},
|
||||
props: {
|
||||
handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
|
||||
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) {
|
||||
const state = INLINE_SUGGESTION_KEY.getState(view.state);
|
||||
if (event.key === 'Tab' && state.visible) {
|
||||
event.preventDefault();
|
||||
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 = '';
|
||||
if (state.suggestion) {
|
||||
view.dispatch(view.state.tr.insertText(state.suggestion, view.state.selection.from));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
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 = '';
|
||||
view.dispatch(view.state.tr.setMeta(INLINE_SUGGESTION_KEY, { ...state, suggestion: '', visible: false }));
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -67,85 +61,30 @@ function createInlineSuggestionPlugin(options: InlineSuggestionOptions = {}) {
|
||||
},
|
||||
appendTransaction: (transactions, oldState, newState) => {
|
||||
const lastTr = transactions[transactions.length - 1];
|
||||
if (!lastTr || !lastTr.docChanged) {
|
||||
console.log('[InlineSuggestion] No document change in transaction');
|
||||
return null;
|
||||
}
|
||||
if (!lastTr || !lastTr.docChanged) return null;
|
||||
|
||||
console.log('[InlineSuggestion] Document changed, setting up debounce for', DEBOUNCE_MS, 'ms');
|
||||
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(async () => {
|
||||
const currentState = INLINE_SUGGESTION_KEY.getState(newState);
|
||||
|
||||
clearTimeout(currentState.debounceTimer);
|
||||
currentState.debounceTimer = setTimeout(async () => {
|
||||
const { from, to } = newState.selection;
|
||||
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' }),
|
||||
});
|
||||
|
||||
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) {
|
||||
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;
|
||||
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);
|
||||
const text = await fetchSuggestion(prefix, suffix, apiUrl);
|
||||
|
||||
if (text && newState.selection.from === from) {
|
||||
currentSuggestion = text;
|
||||
suggestionPos = { from, to: from + text.length };
|
||||
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');
|
||||
newState.apply(newState.tr.setMeta(INLINE_SUGGESTION_KEY, {
|
||||
...currentState,
|
||||
currentSuggestion: text,
|
||||
suggestionPos: { from, to: from + text.length },
|
||||
suggestion: text,
|
||||
visible: true
|
||||
}));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[InlineSuggestion] Error:', e);
|
||||
if (DEBUG) console.error('Inline suggestion error:', e);
|
||||
}
|
||||
}, DEBOUNCE_MS);
|
||||
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { DEBUG, API_URL } from './config.js'
|
||||
|
||||
export async function fetchSuggestion(prefix, suffix, apiUrl = API_URL) {
|
||||
if (DEBUG) console.log('[Debug] fetchSuggestion called with prefix length:', prefix.length, 'suffix length:', suffix.length)
|
||||
try {
|
||||
const res = await fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prefix, suffix, languageId: 'markdown' }),
|
||||
})
|
||||
|
||||
if (DEBUG) console.log('[Debug] fetchSuggestion response status:', res.status)
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text()
|
||||
throw new Error(`HTTP ${res.status}: ${errorText}`)
|
||||
}
|
||||
|
||||
const reader = res.body?.getReader()
|
||||
if (!reader) {
|
||||
if (DEBUG) console.log('[Debug] No reader available')
|
||||
throw new Error('No reader available')
|
||||
}
|
||||
|
||||
let text = ''
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
const chunk = new TextDecoder().decode(value)
|
||||
if (DEBUG) console.log('[Debug] Received chunk:', chunk.substring(0, 100))
|
||||
|
||||
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 (DEBUG) console.log('[Debug] Added content:', data.content)
|
||||
}
|
||||
if (data.done || data.error) break
|
||||
} catch (e) {
|
||||
if (DEBUG) console.warn('[Debug] JSON parse error:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (DEBUG) console.log('[Debug] Final suggestion text:', text.substring(0, 100))
|
||||
return text
|
||||
} catch (e) {
|
||||
if (DEBUG) console.error('[Debug] fetchSuggestion error:', e)
|
||||
throw e
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export const DEBUG = import.meta.env.DEV
|
||||
export const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/v1/completions'
|
||||
Reference in New Issue
Block a user