mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
Enhanced ui
This commit is contained in:
Saifeddine ALOUI
parent
1c2069c1a5
commit
a6ccb2f030
@ -26,6 +26,10 @@ const localizer = new WebAppLocalizer(translations, localStoragePrefix, language
|
||||
name: "Language Name",
|
||||
translations: {
|
||||
[key]: "Translation"
|
||||
},
|
||||
// optional
|
||||
promptTranslations: {
|
||||
[prompt name]: "Translation"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -37,3 +41,10 @@ const localizer = new WebAppLocalizer(translations, localStoragePrefix, language
|
||||
```
|
||||
|
||||
Apply translations: `localizer.apply();`
|
||||
Get the translation of a prompt with options:
|
||||
```javascript
|
||||
localizer.formatPrompt([prompt name], {
|
||||
variable name: variable value to substitude in the translation string
|
||||
})
|
||||
```
|
||||
In the translation string use the syntax {variable name}. This will allow using variable string parts when translating.
|
||||
@ -78,13 +78,22 @@ const translations = {
|
||||
translations: {
|
||||
"welcome-message": "Welcome to our website!",
|
||||
"about-us": "About Us"
|
||||
},
|
||||
// optional
|
||||
promptTranslations: {
|
||||
main_prompt: "Act as an assistant and answer the user question.\nquestion:{question}"
|
||||
}
|
||||
|
||||
},
|
||||
fr: {
|
||||
name: "Français",
|
||||
translations: {
|
||||
"welcome-message": "Bienvenue sur notre site web!",
|
||||
"about-us": "À propos de nous"
|
||||
},
|
||||
// optional
|
||||
promptTranslations: {
|
||||
main_prompt: "Act as an assistant and answer the user question.\nquestion:{question}"
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -93,4 +102,14 @@ const localizer = new WebAppLocalizer(translations, 'myApp_', document.getElemen
|
||||
localizer.apply();
|
||||
```
|
||||
|
||||
## Advanced use with prompts
|
||||
Get the translation of a prompt with options:
|
||||
```javascript
|
||||
localizer.formatPrompt([prompt name], {
|
||||
variable name: variable value to substitude in the translation string
|
||||
})
|
||||
```
|
||||
In the translation string use the syntax {variable name}. This will allow using variable string parts when translating.
|
||||
|
||||
|
||||
This will initialize the localizer, set up a language selector (if provided), and apply translations to your HTML elements.
|
||||
|
||||
@ -92,4 +92,10 @@ class WebAppLocalizer {
|
||||
this.setLanguage(event.target.value);
|
||||
});
|
||||
}
|
||||
// helper functions
|
||||
// A format prompt function
|
||||
formatPrompt(prompt_name, values) {
|
||||
return this.translations[this.lang].promptTranslations[prompt_name].replace(/\{(\w+)\}/g, (match, key) => values[key] || match);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-b411a75c.css
vendored
Normal file
8
web/dist/assets/index-b411a75c.css
vendored
Normal file
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-fd8a3263.css
vendored
8
web/dist/assets/index-fd8a3263.css
vendored
File diff suppressed because one or more lines are too long
4
web/dist/index.html
vendored
4
web/dist/index.html
vendored
@ -6,8 +6,8 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI</title>
|
||||
<script type="module" crossorigin src="/assets/index-ef994b8a.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-fd8a3263.css">
|
||||
<script type="module" crossorigin src="/assets/index-16bc4928.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-b411a75c.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
17
web/package-lock.json
generated
17
web/package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "lollms-webui-vue",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"axios": "^1.3.6",
|
||||
"baklavajs": "^2.3.0",
|
||||
"dompurify": "^3.0.8",
|
||||
@ -1075,11 +1076,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
|
||||
"integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.5.tgz",
|
||||
"integrity": "sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
@ -2874,11 +2875,11 @@
|
||||
"integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
|
||||
},
|
||||
"node_modules/micromatch": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
|
||||
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
||||
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
|
||||
"dependencies": {
|
||||
"braces": "^3.0.2",
|
||||
"braces": "^3.0.3",
|
||||
"picomatch": "^2.3.1"
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"axios": "^1.3.6",
|
||||
"baklavajs": "^2.3.0",
|
||||
"dompurify": "^3.0.8",
|
||||
|
||||
@ -5,15 +5,18 @@
|
||||
<ToolbarButton @click.stop="toggleMenu" :title="title" icon="code" />
|
||||
</div>
|
||||
|
||||
<div v-if="isOpen" class="z-50 origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<teleport to="body">
|
||||
<div v-if="isOpen" ref="dropdown" class="z-50 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-20 focus:outline-none dropdown-shadow text-gray-700 dark:text-white">
|
||||
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createPopper } from '@popperjs/core';
|
||||
import ToolbarButton from './ToolbarButton.vue'
|
||||
|
||||
export default {
|
||||
@ -23,12 +26,8 @@ export default {
|
||||
props: ['title'],
|
||||
data() {
|
||||
return {
|
||||
isOpen: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleMenu() {
|
||||
this.isOpen = !this.isOpen
|
||||
isOpen: false,
|
||||
popperInstance: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -36,6 +35,9 @@ export default {
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('click', this.closeMenu)
|
||||
if (this.popperInstance) {
|
||||
this.popperInstance.destroy()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleMenu(event) {
|
||||
@ -43,12 +45,51 @@ export default {
|
||||
event.stopPropagation()
|
||||
}
|
||||
this.isOpen = !this.isOpen
|
||||
if (this.isOpen) {
|
||||
this.$nextTick(() => {
|
||||
this.createPopper()
|
||||
})
|
||||
}
|
||||
},
|
||||
closeMenu(event) {
|
||||
if (!this.$el.contains(event.target)) {
|
||||
if (!this.$el.contains(event.target) && !this.$refs.dropdown?.contains(event.target)) {
|
||||
this.isOpen = false
|
||||
}
|
||||
},
|
||||
createPopper() {
|
||||
const button = this.$el.querySelector('button')
|
||||
const dropdown = this.$refs.dropdown
|
||||
|
||||
if (button && dropdown) {
|
||||
this.popperInstance = createPopper(button, dropdown, {
|
||||
placement: 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'flip',
|
||||
options: {
|
||||
fallbackPlacements: ['top-end', 'bottom-start', 'top-start'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundary: document.body,
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropdown-shadow {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:root.dark .dropdown-shadow {
|
||||
box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -110,17 +110,61 @@
|
||||
<ToolbarButton @click.stop="editMsgMode = false" title="Cancel edit" icon="x" />
|
||||
<ToolbarButton @click.stop="updateMessage" title="Update message" icon="check" />
|
||||
<DropdownMenu title="Add Block">
|
||||
<ToolbarButton @click.stop="addBlock('')" title="Generic Block" icon="code" />
|
||||
<!-- Programming Languages -->
|
||||
<DropdownSubmenu title="Programming Languages" icon="code">
|
||||
<ToolbarButton @click.stop="addBlock('python')" title="Python" icon="python" />
|
||||
<ToolbarButton @click.stop="addBlock('javascript')" title="JavaScript" icon="js" />
|
||||
<ToolbarButton @click.stop="addBlock('json')" title="JSON" icon="braces" />
|
||||
<ToolbarButton @click.stop="addBlock('typescript')" title="TypeScript" icon="typescript" />
|
||||
<ToolbarButton @click.stop="addBlock('java')" title="Java" icon="java" />
|
||||
<ToolbarButton @click.stop="addBlock('c++')" title="C++" icon="cplusplus" />
|
||||
<ToolbarButton @click.stop="addBlock('csharp')" title="C#" icon="csharp" />
|
||||
<ToolbarButton @click.stop="addBlock('go')" title="Go" icon="go" />
|
||||
<ToolbarButton @click.stop="addBlock('rust')" title="Rust" icon="rust" />
|
||||
<ToolbarButton @click.stop="addBlock('swift')" title="Swift" icon="swift" />
|
||||
<ToolbarButton @click.stop="addBlock('kotlin')" title="Kotlin" icon="kotlin" />
|
||||
<ToolbarButton @click.stop="addBlock('r')" title="R" icon="r-project" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Web Technologies -->
|
||||
<DropdownSubmenu title="Web Technologies" icon="web">
|
||||
<ToolbarButton @click.stop="addBlock('html')" title="HTML" icon="html5" />
|
||||
<ToolbarButton @click.stop="addBlock('latex')" title="LaTeX" icon="mathFunction" />
|
||||
<ToolbarButton @click.stop="addBlock('bash')" title="Bash" icon="terminal" />
|
||||
<ToolbarButton @click.stop="addBlock('mermaid')" title="Mermaid" icon="diagram" />
|
||||
<ToolbarButton @click.stop="addBlock('graphviz')" title="Graphviz" icon="graph" />
|
||||
<!-- Add more language options here -->
|
||||
<ToolbarButton @click.stop="addBlock('css')" title="CSS" icon="css3" />
|
||||
<ToolbarButton @click.stop="addBlock('vue')" title="Vue.js" icon="vuejs" />
|
||||
<ToolbarButton @click.stop="addBlock('react')" title="React" icon="react" />
|
||||
<ToolbarButton @click.stop="addBlock('angular')" title="Angular" icon="angular" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Markup and Data Formats -->
|
||||
<DropdownSubmenu title="Markup and Data" icon="file-code">
|
||||
<ToolbarButton @click.stop="addBlock('xml')" title="XML" icon="xml" />
|
||||
<ToolbarButton @click.stop="addBlock('json')" title="JSON" icon="json" />
|
||||
<ToolbarButton @click.stop="addBlock('yaml')" title="YAML" icon="yaml" />
|
||||
<ToolbarButton @click.stop="addBlock('markdown')" title="Markdown" icon="markdown" />
|
||||
<ToolbarButton @click.stop="addBlock('latex')" title="LaTeX" icon="latex" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Scripting and Shell -->
|
||||
<DropdownSubmenu title="Scripting and Shell" icon="terminal">
|
||||
<ToolbarButton @click.stop="addBlock('bash')" title="Bash" icon="bash" />
|
||||
<ToolbarButton @click.stop="addBlock('powershell')" title="PowerShell" icon="powershell" />
|
||||
<ToolbarButton @click.stop="addBlock('perl')" title="Perl" icon="perl" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Diagramming -->
|
||||
<DropdownSubmenu title="Diagramming" icon="sitemap">
|
||||
<ToolbarButton @click.stop="addBlock('mermaid')" title="Mermaid" icon="mermaid" />
|
||||
<ToolbarButton @click.stop="addBlock('graphviz')" title="Graphviz" icon="graphviz" />
|
||||
<ToolbarButton @click.stop="addBlock('plantuml')" title="PlantUML" icon="plantuml" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Database -->
|
||||
<DropdownSubmenu title="Database" icon="database">
|
||||
<ToolbarButton @click.stop="addBlock('sql')" title="SQL" icon="sql" />
|
||||
<ToolbarButton @click.stop="addBlock('mongodb')" title="MongoDB" icon="mongodb" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Other -->
|
||||
<ToolbarButton @click.stop="addBlock('')" title="Generic Block" icon="code" />
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div v-else>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
:title="title"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g v-html="iconPath"></g>
|
||||
</svg>
|
||||
</button>
|
||||
@ -37,21 +37,84 @@
|
||||
case 'check':
|
||||
return '<path d="M20 6L9 17l-5-5"/>'
|
||||
case 'code':
|
||||
return '<path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/>'
|
||||
return '<path d="M8 7l-5 5 5 5"/><path d="M16 7l5 5-5 5"/><line x1="10" y1="4" x2="14" y2="20"/>'
|
||||
case 'python':
|
||||
return '<path d="M12 9H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h3m6-8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-3"/><path d="M8 9v8m8-8v8"/>'
|
||||
return '<path d="M12 2C5.4 2 6 4.5 6 4.5v2.8h6.5v1H4.5S2 7.7 2 12c0 4.3 2.5 4.2 2.5 4.2h2.3v-2.5c0-2.5 2.2-2.5 2.2-2.5h6.1c2.3 0 2.2-2.2 2.2-2.2V5c0-2.8-2.9-3-5.8-3zm-3.5 1.7c.5 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1z" fill="currentColor"/><path d="M12 22c6.6 0 6-2.5 6-2.5v-2.8h-6.5v-1H19.5s2.5-.6 2.5-4.9c0-4.3-2.5-4.2-2.5-4.2h-2.3v2.5c0 2.5-2.2 2.5-2.2 2.5H8.9c-2.3 0-2.2 2.2-2.2 2.2V19c0 2.8 2.9 3 5.8 3zm3.5-1.7c-.5 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" fill="currentColor"/>'
|
||||
case 'js':
|
||||
return '<path d="M20 4l-2 14.5-6 2-6-2L4 4z"/><path d="M7.5 8h3v8l-2-1"/><path d="M16.5 8H13v8l2-1"/>'
|
||||
return '<text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="currentColor">JS</text>'
|
||||
case 'typescript':
|
||||
return '<text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="currentColor">TS</text>'
|
||||
case 'braces':
|
||||
return '<path d="M7 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3m10-10h3a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-3"/>'
|
||||
case 'cplusplus':
|
||||
return '<path d="M16 9h2m-1-1v2m3-2h2m-1-1v2M20 4L4 20"/><path d="M4 4l16 16"/>'
|
||||
case 'c++':
|
||||
return '<text x="12" y="17" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="currentColor">C++</text>'
|
||||
case 'csharp':
|
||||
return '<text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="currentColor">C#</text>'
|
||||
case 'go':
|
||||
return '<text x="12" y="17" font-family="Arial, sans-serif" font-size="14" font-weight="bold" text-anchor="middle" fill="currentColor">Go</text>'
|
||||
case 'r-project':
|
||||
return '<text x="12" y="17" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="currentColor">R</text>'
|
||||
case 'rust':
|
||||
return '<path d="M12 2L2 7v10l10 5 10-5V7L12 2z M12 22v-6 M22 7l-10 5-10-5 M2 17l10-5 10 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
case 'swift':
|
||||
return '<path d="M21 12c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8c1.4 0 2.8-.4 4-1 M14 9c-1.7-1.7-3.7-2.6-5.5-2.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
case 'kotlin':
|
||||
return '<path d="M2 2v20h20L2 2z M2 22L22 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
case 'java':
|
||||
return '<path fill="currentColor" d="M8.5 18.5c0 0-1.3.7.9 1 2.7.3 4.1.3 7-.3 0 0 .8.5 1.9.9-6.7 2.9-15.2-.7-9.8-1.6zm-1-3.5c0 0-1.5 1.1.8 1.3 2.9.3 5.2.3 9.1-.4 0 0 .6.6 1.4.9-7.9 2.3-16.7.2-11.3-1.8zm9.2-6.5c1.7 1.9-.4 3.6-.4 3.6s4.2-2.2 2.3-4.9c-1.8-2.5-3.2-3.8 4.3-8.1 0 0-11.8 3-6.2 9.4zm4.9 12.4c0 0 1 .8-1.1 1.4-3.9 1.2-16.3 1.5-19.7.1-1.2-.5 1.1-1.3 1.8-1.4.8-.2 1.2-.1 1.2-.1-1.4-1-9 1.9-3.8 2.7 14.1 2.3 25.8-1 21.6-2.7zm-15.4-9.3c0 0-6.3 1.5-2.2 2 1.7.2 5.1.2 8.3-.1 2.6-.2 5.2-.7 5.2-.7s-.9.4-1.6.8c-6.4 1.7-18.8.9-15.2-.8 3-1.4 5.5-1.2 5.5-1.2zm12.4 6.9c6.5-3.4 3.5-6.6 1.4-6.2-.5.1-.7.2-.7.2s.2-.3.6-.4c4.2-1.5 7.4 4.3-1.4 6.6 0-.1.1-.1.1-.2z"/>'
|
||||
|
||||
case 'html5':
|
||||
return '<path d="M13 16l5-5-5-5M11 8L6 13l5 5"/>'
|
||||
return '<path fill="currentColor" d="M3 2l1.5 17L12 22l7.5-3L21 2H3zm4.5 6h9l-.3 3H8.4l.2 2h8.5l-.6 6.5L12 21l-4.5-1.5L7 16h2.2l.2 2.2 2.6.7 2.6-.7.4-3.7H7.3L6.5 8z"/>'
|
||||
case 'css3':
|
||||
return '<path d="M4 3l1.5 17L12 22l6.5-2L20 3H4zm3.5 7h9l-.3 3H8.4l.2 2h8l-.5 5.5-3.8 1.3-3.8-1.3-.3-3H5.5l.5 5.5L12 22l6-2 .8-9H7.5l.3-3z" fill="currentColor"/>'
|
||||
case 'vuejs':
|
||||
return '<path d="M2 3l10 18L22 3h-4l-6 10.5L6 3H2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
case 'react':
|
||||
return '<circle cx="12" cy="12" r="2.5" fill="currentColor"/><path d="M12 9.5c1.8-2.3 3.7-3.8 5.5-3.8 1.3 0 2.4.6 3.1 1.7 1.1 1.9.4 4.5-1.8 7.1M12 14.5c-1.8 2.3-3.7 3.8-5.5 3.8-1.3 0-2.4-.6-3.1-1.7-1.1-1.9-.4-4.5 1.8-7.1M5.5 6.5c1.9-1.1 4.5-.4 7.1 1.8M18.5 17.5c-1.9 1.1-4.5.4-7.1-1.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
case 'angular':
|
||||
return '<path d="M12 2L3 6l1.5 13L12 22l7.5-3L21 6L12 2z M12 2v20 M3 6l9 4 M21 6l-9 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
|
||||
case 'xml':
|
||||
return '<path d="M16 3l-4 18M8 8l-4 4 4 4M16 8l4 4-4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
|
||||
case 'json':
|
||||
return '<path d="M4 6h16M4 10h16M4 14h10M4 18h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="18" cy="18" r="2" fill="currentColor"/>'
|
||||
case 'yaml':
|
||||
return '<path d="M3 6h18M3 10h18M3 14l4 4M11 14l-4 4M17 14l4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
case 'markdown':
|
||||
return '<path d="M3 3h18v18H3zM5 7v10M9 7v10M9 12l3-3 3 3M15 7l4 5-4 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
case 'latex':
|
||||
return '<text x="12" y="17" font-family="Times New Roman, serif" font-size="14" font-style="italic" font-weight="bold" text-anchor="middle" fill="currentColor">TEX</text>'
|
||||
|
||||
case 'bash':
|
||||
return '<path d="M3 3h18v18H3zM6 7l4 4-4 4M12 15h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
|
||||
case 'powershell':
|
||||
return '<path d="M3 3h18v18H3zM6 7l6 5-6 5M13 17h5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
|
||||
case 'perl':
|
||||
return '<path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 7v10M7 12h10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
|
||||
case 'mermaid':
|
||||
return '<circle cx="5" cy="12" r="3" fill="currentColor"/><circle cx="19" cy="12" r="3" fill="currentColor"/><circle cx="12" cy="5" r="3" fill="currentColor"/><circle cx="12" cy="19" r="3" fill="currentColor"/><path d="M5 12h14M12 5v14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>'
|
||||
|
||||
case 'graphviz':
|
||||
return '<circle cx="6" cy="6" r="3" fill="currentColor"/><circle cx="18" cy="6" r="3" fill="currentColor"/><circle cx="6" cy="18" r="3" fill="currentColor"/><circle cx="18" cy="18" r="3" fill="currentColor"/><path d="M6 9v6M18 9v6M9 6h6M9 18h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>'
|
||||
|
||||
case 'plantuml':
|
||||
return '<path d="M3 3h18v18H3z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 7h10v4H7zM7 15h10M12 11v7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
case 'sql':
|
||||
return '<path d="M3 5h18M3 10h18M3 15h18M3 20h18M7 5v15M17 5v15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
|
||||
case 'mongodb':
|
||||
return '<path d="M12 2v20M12 2c-3.5 0-7 3-7 8s3.5 8 7 8 7-3 7-8-3.5-8-7-8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 18c1.5-1 2-2.5 2-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
|
||||
|
||||
case 'mathFunction':
|
||||
return '<path d="M4 4h16v16H4z"/><path d="M9 8v8m3-8v8m3-8v8"/>'
|
||||
return '<path d="M3 20h18M3 4v16M3 12h4c3 0 4-3 4-3s1 6 3 6h7" fill="none" stroke="currentColor" stroke-width="2"/>'
|
||||
case 'terminal':
|
||||
return '<path d="M4 17l6-6-6-6m8 14h8"/>'
|
||||
return '<rect x="2" y="4" width="20" height="16" rx="2" ry="2" fill="none"/><path d="M6 8l4 4-4 4M12 16h6"/>'
|
||||
case 'edit':
|
||||
return '<path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>'
|
||||
case 'copy':
|
||||
@ -67,6 +130,7 @@
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,44 +132,64 @@
|
||||
</div>
|
||||
<div class="flex-grow m-2 p-2 border panels-color border-blue-300 rounded-md" :class="{ 'border-red-500': generating }">
|
||||
<div v-if="tab_id === 'source'">
|
||||
<div class="flex flex-row justify-end mx-2">
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Add generic block" @click.stop="addBlock('')">
|
||||
<img :src="code_block" width="25" height="25">
|
||||
</div>
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Add python block" @click.stop="addBlock('python')">
|
||||
<img :src="python_block" width="25" height="25">
|
||||
</div>
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Add javascript block" @click.stop="addBlock('javascript')">
|
||||
<img :src="javascript_block" width="25" height="25">
|
||||
</div>
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Add json block" @click.stop="addBlock('json')">
|
||||
<img :src="json_block" width="25" height="25">
|
||||
</div>
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Add c++ block" @click.stop="addBlock('c++')">
|
||||
<img :src="cpp_block" width="25" height="25">
|
||||
</div>
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Add html block" @click.stop="addBlock('html')">
|
||||
<img :src="html5_block" width="25" height="25">
|
||||
</div>
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Add LaTex block" @click.stop="addBlock('latex')">
|
||||
<img :src="LaTeX_block" width="25" height="25">
|
||||
</div>
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Add bash block" @click.stop="addBlock('bash')">
|
||||
<img :src="bash_block" width="25" height="25">
|
||||
</div>
|
||||
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2"
|
||||
title="Copy message to clipboard" @click.stop="copyContentToClipboard()">
|
||||
<i data-feather="copy"></i>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownMenu title="Add Block">
|
||||
<!-- Programming Languages -->
|
||||
<DropdownSubmenu title="Programming Languages" icon="code">
|
||||
<ToolbarButton @click.stop="addBlock('python')" title="Python" icon="python" />
|
||||
<ToolbarButton @click.stop="addBlock('javascript')" title="JavaScript" icon="js" />
|
||||
<ToolbarButton @click.stop="addBlock('typescript')" title="TypeScript" icon="typescript" />
|
||||
<ToolbarButton @click.stop="addBlock('java')" title="Java" icon="java" />
|
||||
<ToolbarButton @click.stop="addBlock('c++')" title="C++" icon="cplusplus" />
|
||||
<ToolbarButton @click.stop="addBlock('csharp')" title="C#" icon="csharp" />
|
||||
<ToolbarButton @click.stop="addBlock('go')" title="Go" icon="go" />
|
||||
<ToolbarButton @click.stop="addBlock('rust')" title="Rust" icon="rust" />
|
||||
<ToolbarButton @click.stop="addBlock('swift')" title="Swift" icon="swift" />
|
||||
<ToolbarButton @click.stop="addBlock('kotlin')" title="Kotlin" icon="kotlin" />
|
||||
<ToolbarButton @click.stop="addBlock('r')" title="R" icon="r-project" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Web Technologies -->
|
||||
<DropdownSubmenu title="Web Technologies" icon="web">
|
||||
<ToolbarButton @click.stop="addBlock('html')" title="HTML" icon="html5" />
|
||||
<ToolbarButton @click.stop="addBlock('css')" title="CSS" icon="css3" />
|
||||
<ToolbarButton @click.stop="addBlock('vue')" title="Vue.js" icon="vuejs" />
|
||||
<ToolbarButton @click.stop="addBlock('react')" title="React" icon="react" />
|
||||
<ToolbarButton @click.stop="addBlock('angular')" title="Angular" icon="angular" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Markup and Data Formats -->
|
||||
<DropdownSubmenu title="Markup and Data" icon="file-code">
|
||||
<ToolbarButton @click.stop="addBlock('xml')" title="XML" icon="xml" />
|
||||
<ToolbarButton @click.stop="addBlock('json')" title="JSON" icon="json" />
|
||||
<ToolbarButton @click.stop="addBlock('yaml')" title="YAML" icon="yaml" />
|
||||
<ToolbarButton @click.stop="addBlock('markdown')" title="Markdown" icon="markdown" />
|
||||
<ToolbarButton @click.stop="addBlock('latex')" title="LaTeX" icon="latex" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Scripting and Shell -->
|
||||
<DropdownSubmenu title="Scripting and Shell" icon="terminal">
|
||||
<ToolbarButton @click.stop="addBlock('bash')" title="Bash" icon="bash" />
|
||||
<ToolbarButton @click.stop="addBlock('powershell')" title="PowerShell" icon="powershell" />
|
||||
<ToolbarButton @click.stop="addBlock('perl')" title="Perl" icon="perl" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Diagramming -->
|
||||
<DropdownSubmenu title="Diagramming" icon="sitemap">
|
||||
<ToolbarButton @click.stop="addBlock('mermaid')" title="Mermaid" icon="mermaid" />
|
||||
<ToolbarButton @click.stop="addBlock('graphviz')" title="Graphviz" icon="graphviz" />
|
||||
<ToolbarButton @click.stop="addBlock('plantuml')" title="PlantUML" icon="plantuml" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Database -->
|
||||
<DropdownSubmenu title="Database" icon="database">
|
||||
<ToolbarButton @click.stop="addBlock('sql')" title="SQL" icon="sql" />
|
||||
<ToolbarButton @click.stop="addBlock('mongodb')" title="MongoDB" icon="mongodb" />
|
||||
</DropdownSubmenu>
|
||||
|
||||
<!-- Other -->
|
||||
<ToolbarButton @click.stop="addBlock('')" title="Generic Block" icon="code" />
|
||||
</DropdownMenu>
|
||||
<ToolbarButton @click.stop="copyContentToClipboard()" title="Copy message to clipboard" icon="copy" />
|
||||
<textarea ref="mdTextarea" @keydown.tab.prevent="insertTab"
|
||||
class="block min-h-500 p-2.5 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 overflow-y-scroll flex flex-col shadow-lg p-10 pt-0 overflow-y-scroll dark:bg-bg-dark 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"
|
||||
:rows="4"
|
||||
@ -316,6 +336,10 @@ import rec_on from '@/assets/rec_on.svg';
|
||||
import rec_off from '@/assets/rec_off.svg';
|
||||
import loading_icon from '@/assets/loading.svg';
|
||||
|
||||
import ToolbarButton from '@/components/ToolbarButton.vue'
|
||||
import DropdownMenu from '@/components/DropdownMenu.vue'
|
||||
|
||||
|
||||
|
||||
async function showInputPanel(name, default_value="", options=[]) {
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -525,7 +549,9 @@ export default {
|
||||
ClipBoardTextInput,
|
||||
TokensHilighter,
|
||||
ChatBarButton,
|
||||
Card
|
||||
Card,
|
||||
ToolbarButton,
|
||||
DropdownMenu
|
||||
},
|
||||
mounted() {
|
||||
axios.get('./get_presets').then(response => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user