live_prompt_draft.vue

<script setup lang="ts">
import { ref } from 'vue';

import { allComponents, provideVSCodeDesignSystem } from '@vscode/webview-ui-toolkit';

import { vscodeApi } from './utils';

provideVSCodeDesignSystem().register(allComponents);



const prompt = ref('');
const promptSuggestion = ref('');

function onPromptInput(event) {
    console.log("onPromptInput");


    var span = document.getElementById('dynamicPromptField');
    const currentContent = span.innerHTML.split("<i>")[0];
    console.log(span.innerHTML);
    console.log(currentContent);

    
    vscodeApi.postAndReceive('promptInput', currentContent).then((data: string[]) => {

    const filtered = data.filter((entry: string) => entry.startsWith(currentContent));
    console.log(filtered);
    if (filtered.length > 0) {
        console.log('data', filtered);
        span.innerHTML = currentContent + `<i>${filtered[0].slice(currentContent.length)}</i>`;
        window.getSelection().setPosition(span, currentContent.length);
    }
    promptSuggestion.value = data;




  });
}



function onPostMessage() {
  vscodeApi.postMessage({
    type: 'hello',
    data: `💬: ${message.value || 'Empty'}`,
  });

  setTimeout(() => {
    vscodeApi.post('hello3', `⛅: ${message.value || 'Empty'}`);
  }, 100);
}
</script>

<template>

{{ promptSuggestion }}
<vscode-text-field rows=5 resize="vertical"
                placeholder="I want to write a role that will..."
                id="playbook-text-area" @input="onPromptInput">
            </vscode-text-field>

<div contentEditable="true" @input="onPromptInput" id="dynamicPromptField">

</div>


</template>

<style scoped></style>