mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
added components
This commit is contained in:
Saifeddine ALOUI
parent
35e13f8d84
commit
2324503ea4
169
web/src/components/DictManager.vue
Normal file
169
web/src/components/DictManager.vue
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<div class="max-w-4xl mx-auto p-4">
|
||||||
|
<div class="flex flex-col sm:flex-row mb-4 gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="newKey"
|
||||||
|
placeholder="Enter key"
|
||||||
|
@keyup.enter="addItem"
|
||||||
|
class="flex-grow px-4 py-2 border border-gray-300 rounded dark:bg-gray-700 dark:text-white text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="newValue"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
@keyup.enter="addItem"
|
||||||
|
class="flex-grow px-4 py-2 border border-gray-300 rounded dark:bg-gray-700 dark:text-white text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<button @click="addItem" class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 text-lg transition duration-300 ease-in-out">Add</button>
|
||||||
|
</div>
|
||||||
|
<ul class="space-y-4" v-if="Object.keys(modelValue).length > 0">
|
||||||
|
<li
|
||||||
|
v-for="(value, key) in modelValue"
|
||||||
|
:key="key"
|
||||||
|
class="flex flex-col sm:flex-row items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
|
||||||
|
:class="{ 'bg-gray-100 dark:bg-gray-700': draggingKey === key }"
|
||||||
|
>
|
||||||
|
<div class="flex-grow mb-2 sm:mb-0 sm:mr-4 w-full sm:w-auto">
|
||||||
|
<input
|
||||||
|
:value="key"
|
||||||
|
@input="updateKey(key, $event.target.value)"
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded dark:bg-gray-600 dark:text-white text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow mb-2 sm:mb-0 sm:mr-4 w-full sm:w-auto">
|
||||||
|
<input
|
||||||
|
:value="value"
|
||||||
|
@input="updateValue(key, $event.target.value)"
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded dark:bg-gray-600 dark:text-white text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<button
|
||||||
|
@click="removeItem(key)"
|
||||||
|
class="text-red-500 hover:text-red-700 p-2 rounded-full hover:bg-red-100 dark:hover:bg-red-900 transition duration-300 ease-in-out"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="moveUp(key)"
|
||||||
|
class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 p-2 rounded-full transition duration-300 ease-in-out"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="moveDown(key)"
|
||||||
|
class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 p-2 rounded-full transition duration-300 ease-in-out"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="mt-6" v-if="Object.keys(modelValue).length > 0">
|
||||||
|
<button @click="removeAll" class="bg-red-500 text-white px-6 py-2 rounded hover:bg-red-600 text-lg transition duration-300 ease-in-out">Remove All</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DictionaryManager',
|
||||||
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: 'Enter a value',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['update:modelValue', 'change'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
newKey: '',
|
||||||
|
newValue: '',
|
||||||
|
draggingKey: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addItem() {
|
||||||
|
if (this.newKey.trim() && this.newValue.trim()) {
|
||||||
|
const updatedDict = { ...this.modelValue };
|
||||||
|
updatedDict[this.newKey.trim()] = this.newValue.trim();
|
||||||
|
this.$emit('update:modelValue', updatedDict);
|
||||||
|
this.$emit('change');
|
||||||
|
this.newKey = '';
|
||||||
|
this.newValue = '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
removeItem(key) {
|
||||||
|
const updatedDict = { ...this.modelValue };
|
||||||
|
delete updatedDict[key];
|
||||||
|
this.$emit('update:modelValue', updatedDict);
|
||||||
|
this.$emit('change');
|
||||||
|
},
|
||||||
|
removeAll() {
|
||||||
|
this.$emit('update:modelValue', {});
|
||||||
|
this.$emit('change');
|
||||||
|
},
|
||||||
|
updateKey(oldKey, newKey) {
|
||||||
|
if (newKey.trim() && newKey !== oldKey) {
|
||||||
|
const updatedDict = { ...this.modelValue };
|
||||||
|
updatedDict[newKey.trim()] = updatedDict[oldKey];
|
||||||
|
delete updatedDict[oldKey];
|
||||||
|
this.$emit('update:modelValue', updatedDict);
|
||||||
|
this.$emit('change');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateValue(key, newValue) {
|
||||||
|
const updatedDict = { ...this.modelValue };
|
||||||
|
updatedDict[key] = newValue.trim();
|
||||||
|
this.$emit('update:modelValue', updatedDict);
|
||||||
|
this.$emit('change');
|
||||||
|
},
|
||||||
|
moveUp(key) {
|
||||||
|
const keys = Object.keys(this.modelValue);
|
||||||
|
const index = keys.indexOf(key);
|
||||||
|
if (index > 0) {
|
||||||
|
const updatedDict = {};
|
||||||
|
keys.forEach((k, i) => {
|
||||||
|
if (i === index - 1) {
|
||||||
|
updatedDict[key] = this.modelValue[key];
|
||||||
|
}
|
||||||
|
if (k !== key) {
|
||||||
|
updatedDict[k] = this.modelValue[k];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.$emit('update:modelValue', updatedDict);
|
||||||
|
this.$emit('change');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
moveDown(key) {
|
||||||
|
const keys = Object.keys(this.modelValue);
|
||||||
|
const index = keys.indexOf(key);
|
||||||
|
if (index < keys.length - 1) {
|
||||||
|
const updatedDict = {};
|
||||||
|
keys.forEach((k, i) => {
|
||||||
|
if (k !== key) {
|
||||||
|
updatedDict[k] = this.modelValue[k];
|
||||||
|
}
|
||||||
|
if (i === index + 1) {
|
||||||
|
updatedDict[key] = this.modelValue[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.$emit('update:modelValue', updatedDict);
|
||||||
|
this.$emit('change');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
24
web/src/components/StatusIndicator.vue
Normal file
24
web/src/components/StatusIndicator.vue
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div :title="title" :class="['text-2xl cursor-pointer', isOk ? 'text-green-500' : 'text-red-500']">
|
||||||
|
<i v-if="typeof icon === 'string'" :data-feather="icon"></i>
|
||||||
|
<b v-else class="text-2xl">{{ icon }}</b>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import feather from 'feather-icons'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
isOk: Boolean,
|
||||||
|
icon: [String, Object],
|
||||||
|
title: String
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (typeof this.icon === 'string') {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
feather.replace()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
420
web/src/components/code.vue
Normal file
420
web/src/components/code.vue
Normal file
@ -0,0 +1,420 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm">
|
||||||
|
<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm">
|
||||||
|
<div ref="editorContainer" class="monaco-editor"></div>
|
||||||
|
<div v-if="isLoading" class="loading-overlay">
|
||||||
|
<span>Loading...</span>
|
||||||
|
</div>
|
||||||
|
<!-- ... rest of your template -->
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm">
|
||||||
|
<span class="text-2xl mr-2">{{ language.trim() }}</span>
|
||||||
|
<button @click="copyCode"
|
||||||
|
:title="isCopied ? 'Copied!' : 'Copy code'"
|
||||||
|
:class="isCopied ? 'bg-green-500' : ''"
|
||||||
|
class="px-2 py-1 mr-2 mb-2 text-left text-sm font-medium rounded-lg hover:bg-primary dark:hover:bg-primary text-white transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<i data-feather="copy"></i>
|
||||||
|
</button>
|
||||||
|
<button v-if="['function', 'python', 'sh', 'shell', 'bash', 'cmd', 'powershell', 'latex', 'mermaid', 'graphviz', 'dot', 'javascript', 'html', 'html5', 'svg'].includes(language)" ref="btn_code_exec" @click="executeCode" title="execute"
|
||||||
|
class="px-2 py-1 mr-2 mb-2 text-left text-sm font-medium rounded-lg hover:bg-primary dark:hover:bg-primary text-white transition-colors duration-200"
|
||||||
|
:class="isExecuting?'bg-green-500':''">
|
||||||
|
<i data-feather="play-circle"></i>
|
||||||
|
</button>
|
||||||
|
<button v-if="['airplay', 'mermaid', 'graphviz', 'dot', 'javascript', 'html', 'html5', 'svg', 'css'].includes(language.trim())" ref="btn_code_exec_in_new_tab" @click="executeCode_in_new_tab" title="execute"
|
||||||
|
class="px-2 py-1 mr-2 mb-2 text-left text-sm font-medium rounded-lg hover:bg-primary dark:hover:bg-primary text-white transition-colors duration-200"
|
||||||
|
:class="isExecuting?'bg-green-500':''">
|
||||||
|
<i data-feather="airplay"></i>
|
||||||
|
</button>
|
||||||
|
<button @click="openFolder" title="open code project folder"
|
||||||
|
class="px-2 py-1 mr-2 mb-2 text-left text-sm font-medium rounded-lg hover:bg-primary dark:hover:bg-primary text-white transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<i data-feather="folder"></i>
|
||||||
|
</button>
|
||||||
|
<button v-if="['python', 'latex', 'html'].includes(language.trim())" @click="openFolderVsCode" title="open code project folder in vscode"
|
||||||
|
class="px-2 py-1 mr-2 mb-2 text-left text-sm font-medium rounded-lg hover:bg-primary dark:hover:bg-primary text-white transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<img src="@/assets/vscode_black.svg" width="25" height="25">
|
||||||
|
</button>
|
||||||
|
<button v-if="['python', 'latex', 'html'].includes(language.trim())" @click="openVsCode" title="open code in vscode"
|
||||||
|
class="px-2 py-1 mr-2 mb-2 text-left text-sm font-medium rounded-lg hover:bg-primary dark:hover:bg-primary text-white transition-colors duration-200"
|
||||||
|
>
|
||||||
|
<img src="@/assets/vscode.svg" width="25" height="25">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span v-if="executionOutput" class="text-2xl">Execution output</span>
|
||||||
|
<pre class="hljs mt-0 p-1 rounded-md break-all grid grid-cols-1" v-if="executionOutput">
|
||||||
|
<div class="container h-[200px] overflow-x-auto break-all scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
|
||||||
|
<div ref="execution_output" class="w-full h-full overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" v-html="executionOutput"></div>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as monaco from 'monaco-editor';
|
||||||
|
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||||
|
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
||||||
|
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
|
||||||
|
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
|
||||||
|
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
|
||||||
|
|
||||||
|
import { nextTick } from 'vue'
|
||||||
|
import hljs from 'highlight.js'
|
||||||
|
import feather from 'feather-icons';
|
||||||
|
import 'highlight.js/styles/tomorrow-night-blue.css';
|
||||||
|
import 'highlight.js/styles/tokyo-night-dark.css';
|
||||||
|
|
||||||
|
hljs.configure({ languages: [] }); // Reset languages
|
||||||
|
hljs.configure({ languages: ['bash'] }); // Set bash as the default language
|
||||||
|
|
||||||
|
hljs.highlightAll();
|
||||||
|
|
||||||
|
self.MonacoEnvironment = {
|
||||||
|
getWorker(_, label) {
|
||||||
|
if (label === 'json') {
|
||||||
|
return new jsonWorker();
|
||||||
|
}
|
||||||
|
if (label === 'css' || label === 'scss' || label === 'less') {
|
||||||
|
return new cssWorker();
|
||||||
|
}
|
||||||
|
if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
||||||
|
return new htmlWorker();
|
||||||
|
}
|
||||||
|
if (label === 'typescript' || label === 'javascript') {
|
||||||
|
return new tsWorker();
|
||||||
|
}
|
||||||
|
return new editorWorker();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
host: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: "http://localhost:9600",
|
||||||
|
},
|
||||||
|
language: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
client_id: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
code: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
discussion_id: {
|
||||||
|
type: [String, Number],
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
message_id: {
|
||||||
|
type: [String, Number],
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isExecuting:false,
|
||||||
|
isCopied: false,
|
||||||
|
executionOutput: '', // new property
|
||||||
|
editor: null,
|
||||||
|
isLoading: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
nextTick(() => {
|
||||||
|
feather.replace();
|
||||||
|
this.initMonaco();
|
||||||
|
// Listen for theme changes
|
||||||
|
window.addEventListener('themeChanged', this.handleThemeChange);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
if (this.editor) {
|
||||||
|
this.editor.dispose();
|
||||||
|
}
|
||||||
|
window.removeEventListener('themeChanged', this.handleThemeChange);
|
||||||
|
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.updateEditorTheme);
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
highlightedCode() {
|
||||||
|
let validLanguage;
|
||||||
|
if (this.language === 'vue' || this.language === 'vue.js') {
|
||||||
|
validLanguage = 'javascript';
|
||||||
|
} else
|
||||||
|
if (this.language === 'function') {
|
||||||
|
validLanguage = 'json';
|
||||||
|
} else {
|
||||||
|
validLanguage = hljs.getLanguage(this.language) ? this.language : 'plaintext';
|
||||||
|
}
|
||||||
|
const trimmedCode = this.code.trim(); // Remove leading and trailing whitespace
|
||||||
|
const lines = trimmedCode.split('\n');
|
||||||
|
const lineNumberWidth = lines.length.toString().length;
|
||||||
|
const lineNumbers = lines.map((line, index) => {
|
||||||
|
const lineNumber = index + 1;
|
||||||
|
return lineNumber.toString().padStart(lineNumberWidth, ' ');
|
||||||
|
});
|
||||||
|
const lineNumbersContainer = document.createElement('div');
|
||||||
|
lineNumbersContainer.classList.add('line-numbers');
|
||||||
|
lineNumbersContainer.innerHTML = lineNumbers.join('<br>');
|
||||||
|
const codeContainer = document.createElement('div');
|
||||||
|
codeContainer.classList.add('code-container');
|
||||||
|
const codeContent = document.createElement('pre');
|
||||||
|
const codeContentCode = document.createElement('code');
|
||||||
|
codeContentCode.classList.add('code-content');
|
||||||
|
codeContentCode.innerHTML = hljs.highlight(trimmedCode, {language: validLanguage, ignoreIllegals: true }).value;
|
||||||
|
codeContent.appendChild(codeContentCode);
|
||||||
|
codeContainer.appendChild(lineNumbersContainer);
|
||||||
|
codeContainer.appendChild(codeContent);
|
||||||
|
return codeContainer.outerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
code(newValue) {
|
||||||
|
if (this.editor && newValue !== this.editor.getValue()) {
|
||||||
|
this.editor.setValue(newValue);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
language(newValue) {
|
||||||
|
if (this.editor) {
|
||||||
|
monaco.editor.setModelLanguage(this.editor.getModel(), newValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
initMonaco() {
|
||||||
|
const isDarkMode = document.documentElement.classList.contains('dark');
|
||||||
|
this.editor = monaco.editor.create(this.$refs.editorContainer, {
|
||||||
|
value: this.code,
|
||||||
|
language: this.language,
|
||||||
|
theme: isDarkMode ? 'vs-dark' : 'vs-light',
|
||||||
|
fontSize: 16, // Increase font size
|
||||||
|
automaticLayout: true
|
||||||
|
});
|
||||||
|
|
||||||
|
this.editor.onDidChangeModelContent(() => {
|
||||||
|
this.$emit('update:code', this.editor.getValue());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for theme changes
|
||||||
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.updateEditorTheme);
|
||||||
|
},
|
||||||
|
updateEditorContentInChunks(newCode) {
|
||||||
|
this.isLoading = true;
|
||||||
|
// ... existing updateEditorContentInChunks code
|
||||||
|
|
||||||
|
const updateChunk = () => {
|
||||||
|
// ... existing updateChunk code
|
||||||
|
|
||||||
|
if (index < newCode.length) {
|
||||||
|
requestAnimationFrame(updateChunk);
|
||||||
|
} else {
|
||||||
|
this.isLoading = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(updateChunk);
|
||||||
|
},
|
||||||
|
handleThemeChange() {
|
||||||
|
this.updateEditorTheme();
|
||||||
|
},
|
||||||
|
changeFontSize(size) {
|
||||||
|
if (this.editor) {
|
||||||
|
this.editor.updateOptions({ fontSize: size });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
copyCode() {
|
||||||
|
this.isCopied = true;
|
||||||
|
console.log("Copying code")
|
||||||
|
const el = document.createElement('textarea');
|
||||||
|
el.value = this.code;
|
||||||
|
document.body.appendChild(el);
|
||||||
|
el.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(el);
|
||||||
|
nextTick(() => {
|
||||||
|
feather.replace()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
executeCode() {
|
||||||
|
this.isExecuting=true;
|
||||||
|
const json = JSON.stringify({
|
||||||
|
'client_id': this.client_id,
|
||||||
|
'code': this.code,
|
||||||
|
'discussion_id': this.discussion_id?this.discussion_id:0,
|
||||||
|
'message_id': this.message_id?this.message_id:0,
|
||||||
|
'language': this.language
|
||||||
|
})
|
||||||
|
console.log(json)
|
||||||
|
fetch(`${this.host}/execute_code`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: json
|
||||||
|
}).then(response=>{
|
||||||
|
this.isExecuting=false;
|
||||||
|
// Parse the JSON data from the response body
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(jsonData => {
|
||||||
|
// Now you can work with the JSON data
|
||||||
|
console.log(jsonData);
|
||||||
|
this.executionOutput = jsonData.output;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.isExecuting=false;
|
||||||
|
// Handle any errors that occurred during the fetch process
|
||||||
|
console.error('Fetch error:', error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
executeCode_in_new_tab(){
|
||||||
|
this.isExecuting=true;
|
||||||
|
const json = JSON.stringify({
|
||||||
|
'client_id': this.client_id,
|
||||||
|
'code': this.code,
|
||||||
|
'discussion_id': this.discussion_id,
|
||||||
|
'message_id': this.message_id,
|
||||||
|
'language': this.language
|
||||||
|
})
|
||||||
|
console.log(json)
|
||||||
|
fetch(`${this.host}/execute_code_in_new_tab`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: json
|
||||||
|
}).then(response=>{
|
||||||
|
this.isExecuting=false;
|
||||||
|
// Parse the JSON data from the response body
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(jsonData => {
|
||||||
|
// Now you can work with the JSON data
|
||||||
|
console.log(jsonData);
|
||||||
|
this.executionOutput = jsonData.output;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.isExecuting=false;
|
||||||
|
// Handle any errors that occurred during the fetch process
|
||||||
|
console.error('Fetch error:', error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
openFolderVsCode(){
|
||||||
|
const json = JSON.stringify({
|
||||||
|
'client_id': this.client_id,
|
||||||
|
'code': this.code,
|
||||||
|
'discussion_id': this.discussion_id,
|
||||||
|
'message_id': this.message_id
|
||||||
|
})
|
||||||
|
console.log(json)
|
||||||
|
fetch(`${this.host}/open_discussion_folder_in_vs_code`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: json
|
||||||
|
}).then(response=>{
|
||||||
|
// Parse the JSON data from the response body
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(jsonData => {
|
||||||
|
// Now you can work with the JSON data
|
||||||
|
console.log(jsonData);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
// Handle any errors that occurred during the fetch process
|
||||||
|
console.error('Fetch error:', error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
openVsCode() {
|
||||||
|
const json = JSON.stringify({
|
||||||
|
'client_id': this.client_id,
|
||||||
|
'discussion_id': typeof this.discussion_id === 'string' ? parseInt(this.discussion_id) : this.discussion_id ,
|
||||||
|
'message_id': this.message_id,
|
||||||
|
'code': this.code
|
||||||
|
})
|
||||||
|
console.log(json)
|
||||||
|
fetch(`${this.host}/open_code_in_vs_code`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: json
|
||||||
|
}).then(response=>{
|
||||||
|
// Parse the JSON data from the response body
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(jsonData => {
|
||||||
|
// Now you can work with the JSON data
|
||||||
|
console.log(jsonData);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
// Handle any errors that occurred during the fetch process
|
||||||
|
console.error('Fetch error:', error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
openFolder() {
|
||||||
|
const json = JSON.stringify({ 'client_id': this.client_id, 'discussion_id': this.discussion_id })
|
||||||
|
console.log(json)
|
||||||
|
fetch(`${this.host}/open_discussion_folder`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: json
|
||||||
|
}).then(response=>{
|
||||||
|
// Parse the JSON data from the response body
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(jsonData => {
|
||||||
|
// Now you can work with the JSON data
|
||||||
|
console.log(jsonData);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
// Handle any errors that occurred during the fetch process
|
||||||
|
console.error('Fetch error:', error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.code-container {
|
||||||
|
display: flex;
|
||||||
|
margin: 0; /* Remove the default margin */
|
||||||
|
}
|
||||||
|
.line-numbers {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-right: 5px; /* Adjust the padding as needed */
|
||||||
|
color: #999;
|
||||||
|
user-select: none; /* Prevent line numbers from being selected */
|
||||||
|
white-space: nowrap; /* Prevent line numbers from wrapping */
|
||||||
|
margin: 0; /* Remove the default margin */
|
||||||
|
}
|
||||||
|
.code-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0; /* Remove the default margin */
|
||||||
|
outline: none; /* Remove the default focus outline */
|
||||||
|
}
|
||||||
|
|
||||||
|
.monaco-editor {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px; /* Adjust as needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure the editor's internal elements use the full height */
|
||||||
|
.monaco-editor .overflow-guard {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
.loading-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user