mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-02-05 02:19:16 +00:00
Added new stuff
This commit is contained in:
Saifeddine ALOUI
parent
732a2ba96b
commit
0119a3df53
212
web/src/components/ChangelogPopup.vue
Normal file
212
web/src/components/ChangelogPopup.vue
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="showChangelogPopup" class="changelog-popup-overlay">
|
||||||
|
<div class="changelog-popup">
|
||||||
|
<div class="changelog-header">
|
||||||
|
<h2>What's New in LoLLMs</h2>
|
||||||
|
<button class="close-button" @click="closePopup">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="changelog-content markdown-body" v-html="parsedChangelogContent"></div>
|
||||||
|
<div class="changelog-footer">
|
||||||
|
<button class="understood-button" @click="handleUnderstand">
|
||||||
|
I understood
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
|
import { marked } from 'marked';
|
||||||
|
import DOMPurify from 'dompurify'; // For security
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ChangelogPopup',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showChangelogPopup: false,
|
||||||
|
changelogContent: '',
|
||||||
|
currentVersion: '0.0.0'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
parsedChangelogContent() {
|
||||||
|
// Convert markdown to HTML and sanitize
|
||||||
|
return DOMPurify.sanitize(marked(this.changelogContent));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
await this.checkChangelogUpdate();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async checkChangelogUpdate() {
|
||||||
|
try {
|
||||||
|
// Get current changelog
|
||||||
|
const changelogResponse = await axios.get("/get_changelog");
|
||||||
|
this.changelogContent = changelogResponse.data;
|
||||||
|
|
||||||
|
// Extract version from changelog
|
||||||
|
let res = await axios.get('/get_lollms_webui_version', {});
|
||||||
|
if (res) {
|
||||||
|
res = res.data
|
||||||
|
if(res.version_type != "") {
|
||||||
|
this.$store.state.version = `${res.version_main}.${res.version_secondary} ${res.version_type} (${res.version_codename})`
|
||||||
|
} else {
|
||||||
|
this.$store.state.version = `${res.version_main}.${res.version_secondary} (${res.version_codename})`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.currentVersion = this.$store.state.version
|
||||||
|
console.log("checkChangelogUpdate")
|
||||||
|
console.log(this.$store.state.version)
|
||||||
|
|
||||||
|
// Get last viewed version
|
||||||
|
const lastViewedResponse = await axios.get("/get_last_viewed_changelog_version");
|
||||||
|
const lastViewedVersion = lastViewedResponse.data;
|
||||||
|
|
||||||
|
// Show popup if versions don't match
|
||||||
|
if (this.currentVersion !== lastViewedVersion) {
|
||||||
|
console.log("Showing changelog")
|
||||||
|
this.showChangelogPopup = true;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error checking changelog:", error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async handleUnderstand() {
|
||||||
|
try {
|
||||||
|
await axios.post("/set_last_viewed_changelog_version", {
|
||||||
|
client_id: this.$store.state.client_id,
|
||||||
|
version: this.currentVersion
|
||||||
|
});
|
||||||
|
this.closePopup();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error setting changelog version:", error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closePopup() {
|
||||||
|
this.showChangelogPopup = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.changelog-popup-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-popup {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 600px;
|
||||||
|
max-height: 80vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-header {
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-content {
|
||||||
|
padding: 1rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-footer {
|
||||||
|
padding: 1rem;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.understood-button {
|
||||||
|
background: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Markdown Styles */
|
||||||
|
.markdown-body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body h1,
|
||||||
|
.markdown-body h2,
|
||||||
|
.markdown-body h3,
|
||||||
|
.markdown-body h4,
|
||||||
|
.markdown-body h5,
|
||||||
|
.markdown-body h6 {
|
||||||
|
margin-top: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body h1 { font-size: 2em; }
|
||||||
|
.markdown-body h2 { font-size: 1.5em; }
|
||||||
|
.markdown-body h3 { font-size: 1.25em; }
|
||||||
|
|
||||||
|
.markdown-body p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body ul,
|
||||||
|
.markdown-body ol {
|
||||||
|
padding-left: 2em;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body code {
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 85%;
|
||||||
|
background-color: rgba(27,31,35,0.05);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body pre {
|
||||||
|
padding: 16px;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 1.45;
|
||||||
|
background-color: #f6f8fa;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body blockquote {
|
||||||
|
padding: 0 1em;
|
||||||
|
color: #6a737d;
|
||||||
|
border-left: 0.25em solid #dfe2e5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
223
web/src/components/ThinkingBlock.vue
Normal file
223
web/src/components/ThinkingBlock.vue
Normal file
@ -0,0 +1,223 @@
|
|||||||
|
<!-- ThinkingBlock.vue -->
|
||||||
|
<template>
|
||||||
|
<div class="my-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
@click="toggle"
|
||||||
|
class="group flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors duration-200 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||||
|
:aria-expanded="isOpen"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 transition-transform duration-200"
|
||||||
|
:class="{ 'rotate-90': isOpen }"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<span v-if="isThinking" class="flex items-center gap-2">
|
||||||
|
Thinking
|
||||||
|
<div class="flex space-x-1">
|
||||||
|
<div v-for="i in 3" :key="i"
|
||||||
|
class="w-1 h-1 bg-blue-500 rounded-full animate-pulse"
|
||||||
|
:style="{ animationDelay: `${(i-1)*150}ms` }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span v-else>AI Thoughts</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-if="!isThinking && content"
|
||||||
|
@click="downloadMarkdown"
|
||||||
|
class="px-2 py-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
|
||||||
|
title="Download as Markdown"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<transition
|
||||||
|
enter-active-class="transition duration-200 ease-out"
|
||||||
|
enter-from-class="transform scale-95 opacity-0"
|
||||||
|
enter-to-class="transform scale-100 opacity-100"
|
||||||
|
leave-active-class="transition duration-150 ease-in"
|
||||||
|
leave-from-class="transform scale-100 opacity-100"
|
||||||
|
leave-to-class="transform scale-95 opacity-0"
|
||||||
|
>
|
||||||
|
<div v-if="isOpen" class="mt-2 text-gray-600">
|
||||||
|
<div
|
||||||
|
ref="contentContainer"
|
||||||
|
class="p-4 rounded-lg prose prose-sm max-w-none overflow-y-auto max-h-[500px]"
|
||||||
|
>
|
||||||
|
<div v-if="$slots.default">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div v-else v-html="renderedContent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { marked } from 'marked';
|
||||||
|
import DOMPurify from 'dompurify';
|
||||||
|
import hljs from 'highlight.js';
|
||||||
|
import 'highlight.js/styles/github.css';
|
||||||
|
|
||||||
|
marked.setOptions({
|
||||||
|
highlight: function(code, lang) {
|
||||||
|
if (lang && hljs.getLanguage(lang)) {
|
||||||
|
return hljs.highlight(code, { language: lang }).value;
|
||||||
|
}
|
||||||
|
return hljs.highlightAuto(code).value;
|
||||||
|
},
|
||||||
|
breaks: true,
|
||||||
|
gfm: true
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ThinkingBlock',
|
||||||
|
props: {
|
||||||
|
content: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
isDone: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isOpen: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isThinking() {
|
||||||
|
return !this.isDone
|
||||||
|
},
|
||||||
|
renderedContent() {
|
||||||
|
return DOMPurify.sanitize(marked.parse(this.content));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
content: {
|
||||||
|
handler() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollToBottom();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggle() {
|
||||||
|
this.isOpen = !this.isOpen;
|
||||||
|
if (this.isOpen) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollToBottom();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scrollToBottom() {
|
||||||
|
if (this.$refs.contentContainer) {
|
||||||
|
const container = this.$refs.contentContainer;
|
||||||
|
container.scrollTop = container.scrollHeight;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
downloadMarkdown() {
|
||||||
|
const blob = new Blob([this.content], { type: 'text/markdown' });
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute('download', 'ai_thoughts.md');
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Base markdown styles */
|
||||||
|
.prose {
|
||||||
|
@apply text-inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h1 {
|
||||||
|
@apply text-2xl font-bold mb-4 mt-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h2 {
|
||||||
|
@apply text-xl font-bold mb-3 mt-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h3 {
|
||||||
|
@apply text-lg font-bold mb-2 mt-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose p {
|
||||||
|
@apply mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ul {
|
||||||
|
@apply list-disc pl-5 mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ol {
|
||||||
|
@apply list-decimal pl-5 mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose code {
|
||||||
|
@apply px-1 py-0.5 rounded text-sm font-mono bg-opacity-10 bg-gray-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose pre {
|
||||||
|
@apply p-4 rounded-lg overflow-x-auto mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose pre code {
|
||||||
|
@apply bg-transparent p-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose blockquote {
|
||||||
|
@apply pl-4 border-l-4 border-gray-300 italic my-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose a {
|
||||||
|
@apply text-blue-600 hover:text-blue-800 underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
.prose::-webkit-scrollbar {
|
||||||
|
@apply w-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose::-webkit-scrollbar-track {
|
||||||
|
@apply bg-transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose::-webkit-scrollbar-thumb {
|
||||||
|
@apply bg-gray-300 rounded-full hover:bg-gray-400 transition-colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth scrolling */
|
||||||
|
.prose {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user