ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-30 09:08:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enhanced ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-08-22 03:26:32 +02:00
parent 701c93669d
commit 72612f41f2
8 changed files with 4041 additions and 4066 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/dist/assets/index-057fde26.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

3979
web/dist/assets/index-14cd1bfc.js vendored
View File

File diff suppressed because one or more lines are too long

3979
web/dist/assets/index-b4757eb4.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-f1d31414.css vendored
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI</title> <title>LoLLMS WebUI</title>
<script type="module" crossorigin src="/assets/index-14cd1bfc.js"></script> <script type="module" crossorigin src="/assets/index-b4757eb4.js"></script>
<link rel="stylesheet" href="/assets/index-f1d31414.css"> <link rel="stylesheet" href="/assets/index-057fde26.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

23
web/src/components/DropdownMenu.vue
View File

@ -2,10 +2,10 @@
<template> <template>
<div class="relative inline-block text-left"> <div class="relative inline-block text-left">
<div> <div>
<ToolbarButton @click="toggleMenu" :title="title" icon="code" /> <ToolbarButton @click.stop="toggleMenu" :title="title" icon="code" />
</div> </div>
<div v-if="isOpen" class="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"> <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">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu"> <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<slot></slot> <slot></slot>
</div> </div>
@ -30,6 +30,25 @@ export default {
toggleMenu() { toggleMenu() {
this.isOpen = !this.isOpen this.isOpen = !this.isOpen
} }
},
mounted() {
document.addEventListener('click', this.closeMenu)
},
beforeUnmount() {
document.removeEventListener('click', this.closeMenu)
},
methods: {
toggleMenu(event) {
if (event && typeof event.stopPropagation === 'function') {
event.stopPropagation()
}
this.isOpen = !this.isOpen
},
closeMenu(event) {
if (!this.$el.contains(event.target)) {
this.isOpen = false
}
}
} }
} }
</script> </script>

104
web/src/components/Message.vue
View File

@ -107,83 +107,34 @@
<div class="invisible group-hover:visible flex flex-row "> <div class="invisible group-hover:visible flex flex-row ">
<!-- MESSAGE CONTROLS --> <!-- MESSAGE CONTROLS -->
<!-- EDIT CONFIRMATION --> <!-- EDIT CONFIRMATION -->
<div v-if="editMsgMode" class="flex items-center duration-75"> <div v-if="editMsgMode">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2" <ToolbarButton @click.stop="editMsgMode = false" title="Cancel edit" icon="x" />
title="Cancel edit" type="button" @click.stop="editMsgMode = false"> <ToolbarButton @click.stop="updateMessage" title="Update message" icon="check" />
<i data-feather="x"></i> <DropdownMenu title="Add Block">
</button> <ToolbarButton @click.stop="addBlock('')" title="Generic Block" icon="code" />
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2" <ToolbarButton @click.stop="addBlock('python')" title="Python" icon="python" />
title="Update message" type="button" @click.stop="updateMessage"> <ToolbarButton @click.stop="addBlock('javascript')" title="JavaScript" icon="js" />
<i data-feather="check"></i> <ToolbarButton @click.stop="addBlock('json')" title="JSON" icon="braces" />
</button> <ToolbarButton @click.stop="addBlock('c++')" title="C++" icon="cplusplus" />
<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 -->
</DropdownMenu>
</div> </div>
<div v-if="!editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer" <div v-else>
title="Edit message" @click.stop="editMsgMode = true"> <ToolbarButton @click.stop="editMsgMode = true" title="Edit message" icon="edit" />
<i data-feather="edit"></i>
</div> </div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2" <ToolbarButton @click="copyContentToClipboard" title="Copy message to clipboard" icon="copy" />
title="Add generic block" @click.stop="addBlock('')"> <div v-if="!editMsgMode && message.sender !== $store.state.mountedPers.name">
<img :src="code_block" width="25" height="25"> <ToolbarButton @click.stop="resendMessage('full_context')" title="Resend message with full context" icon="send" />
<ToolbarButton @click.stop="resendMessage('full_context_with_internet')" title="Resend message with internet search" icon="globe" />
<ToolbarButton @click.stop="resendMessage('simple_question')" title="Resend message without context" icon="sendSimple" />
</div> </div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer hover:border-2" <div v-if="!editMsgMode && message.sender === $store.state.mountedPers.name">
title="Add python block" @click.stop="addBlock('python')"> <ToolbarButton @click="continueMessage" title="Continue message" icon="fastForward" />
<img :src="python_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add javascript block" @click.stop="addBlock('javascript')">
<img :src="javascript_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add json block" @click.stop="addBlock('json')">
<img :src="json_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add c++ block" @click.stop="addBlock('c++')">
<img :src="cpp_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add html block" @click.stop="addBlock('html')">
<img :src="html5_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Add LaTex block" @click.stop="addBlock('latex')">
<img :src="LaTeX_block" width="25" height="25">
</div>
<div v-if="editMsgMode" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
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"
title="Copy message to clipboard" @click.stop="copyContentToClipboard()">
<i data-feather="copy"></i>
</div>
<div v-if="!editMsgMode && message.sender!=this.$store.state.mountedPers.name" class="text-lg text-red-500 hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Resend message with full context"
@click.stop="resendMessage('full_context')"
:class="{ 'text-5xl': editMsgMode }">
<i data-feather="send"></i>
</div>
<div v-if="!editMsgMode && message.sender!=this.$store.state.mountedPers.name" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Resend message without the full context"
@click.stop="resendMessage('full_context_with_internet')"
:class="{ 'text-5xl': editMsgMode }">
<img :src="sendGlobe" width="25" height="25">
</div>
<div v-if="!editMsgMode && message.sender!=this.$store.state.mountedPers.name" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Resend message without the full context"
@click.stop="resendMessage('simple_question')"
:class="{ 'text-5xl': editMsgMode }">
<i data-feather="send"></i>
</div>
<div v-if="!editMsgMode && message.sender==this.$store.state.mountedPers.name" class="text-lg hover:text-secondary duration-75 active:scale-90 p-2 cursor-pointer"
title="Resend message"
@click.stop="continueMessage()"
>
<i data-feather="fast-forward"></i>
</div> </div>
<!-- DELETE CONFIRMATION --> <!-- DELETE CONFIRMATION -->
<div v-if="deleteMsgMode" class="flex items-center duration-75"> <div v-if="deleteMsgMode" class="flex items-center duration-75">
@ -306,6 +257,9 @@ import failed_svg from '@/assets/failed.svg';
import loading_svg from '@/assets/loading.svg'; import loading_svg from '@/assets/loading.svg';
import sendGlobe from "../assets/send_globe.svg" import sendGlobe from "../assets/send_globe.svg"
import ToolbarButton from './ToolbarButton.vue'
import DropdownMenu from './DropdownMenu.vue'
export default { export default {
// eslint-disable-next-line vue/multi-word-component-names // eslint-disable-next-line vue/multi-word-component-names
name: 'Message', name: 'Message',
@ -316,6 +270,8 @@ export default {
RenderHTMLJS, RenderHTMLJS,
JsonViewer, JsonViewer,
DynamicUIRenderer, DynamicUIRenderer,
ToolbarButton,
DropdownMenu
}, },
props: { props: {
host: { host: {

2
web/src/views/DiscussionsView.vue
View File

@ -19,7 +19,7 @@
<div class="flex flex-col items-center text-center max-w-4xl w-full px-4 relative z-10"> <div class="flex flex-col items-center text-center max-w-4xl w-full px-4 relative z-10">
<div class="mb-8 w-full"> <div class="mb-8 w-full">
<h1 class="text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 mb-2 animate-glow"> <h1 class="text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 mb-2 animate-glow">
Lord Of Large Language & Multimodal Systems LoLLMS
</h1> </h1>
<p class="text-2xl text-gray-600 dark:text-gray-300 italic"> <p class="text-2xl text-gray-600 dark:text-gray-300 italic">
One tool to rule them all One tool to rule them all