feat(wip): code completion with llm

app/src/components/CodeEditor/CodeEditor.vue

@@ -1,49 +1,55 @@
 <script setup lang="ts">
+import type { Editor } from 'ace-builds'
 import ace from 'ace-builds'
 import extSearchboxUrl from 'ace-builds/src-noconflict/ext-searchbox?url'
 import { VAceEditor } from 'vue3-ace-editor'
+import useCodeCompletion from './CodeCompletion'
 import 'ace-builds/src-noconflict/mode-nginx'
 import 'ace-builds/src-noconflict/theme-monokai'
 
 const props = defineProps<{
-  content?: string
   defaultHeight?: string
   readonly?: boolean
   placeholder?: string
 }>()
 
-const emit = defineEmits(['update:content'])
-
-const value = computed({
-  get() {
-    return props.content ?? ''
-  },
-  set(v) {
-    emit('update:content', v)
-  },
-})
+const content = defineModel<string>('content', { default: '' })
 
 onMounted(() => {
   try {
     ace.config.setModuleUrl('ace/ext/searchbox', extSearchboxUrl)
   }
   catch (error) {
-    console.error('Failed to initialize Ace editor:', error)
+    console.error(`Failed to initialize Ace editor: ${error}`)
   }
 })
+
+const codeCompletion = useCodeCompletion()
+
+function init(editor: Editor) {
+  if (props.readonly) {
+    return
+  }
+  codeCompletion.init(editor)
+}
+
+onUnmounted(() => {
+  codeCompletion.cleanUp()
+})
 </script>
 
 <template>
   <VAceEditor
-    v-model:value="value"
+    v-model:value="content"
     lang="nginx"
     theme="monokai"
     :style="{
       minHeight: defaultHeight || '100vh',
       borderRadius: '5px',
     }"
-    :readonly="readonly"
-    :placeholder="placeholder"
+    :readonly
+    :placeholder
+    @init="init"
   />
 </template>
 
@@ -52,4 +58,9 @@ onMounted(() => {
   z-index: 1;
   position: relative;
 }
+
+:deep(.ace_ghost-text) {
+  color: #6a737d;
+  opacity: 0.8;
+}
 </style>