mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-01-18 10:46:27 +00:00
Added skills viewer
This commit is contained in:
Saifeddine ALOUI
parent
e77edde7d8
commit
20236ea863
@ -1 +1 @@
|
||||
Subproject commit 4a70abd9b3087d5bcfc3f9ae41fb4e4aac13f1b0
|
||||
Subproject commit fb03900ef6a04212c4b7ba58abff5b129026f764
|
||||
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-87cd6088.css
vendored
8
web/dist/assets/index-87cd6088.css
vendored
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-b3fd63c8.css
vendored
Normal file
8
web/dist/assets/index-b3fd63c8.css
vendored
Normal file
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 @@
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI - Welcome</title>
|
||||
<script type="module" crossorigin src="/assets/index-0d7b4d08.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-87cd6088.css">
|
||||
<script type="module" crossorigin src="/assets/index-23e002d5.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-b3fd63c8.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,71 +1,138 @@
|
||||
<template>
|
||||
<div class="skills-viewer">
|
||||
<div class="categories">
|
||||
<ul>
|
||||
<li v-for="category in categories" :key="category.id" @click="fetchTitles(category)">
|
||||
{{ category.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<div :class="{ 'hidden': !isVisible }" class="absolute top-20 left-20 bottom-20 right-20 bg-bg-light shadow-lg rounded">
|
||||
<div id="leftPanel" class="flex flex-row flex-grow overflow-y-scroll no-scrollbar shadow-lg rounded">
|
||||
<div class=" sticky z-10 top-0 bg-bg-light-tone dark:bg-bg-dark-tone shadow-md ">
|
||||
<div class="search p-4">
|
||||
<input type="text" v-model="searchQuery" placeholder="Search skills" class="border border-gray-300 rounded px-2 py-1 mr-2">
|
||||
<button @click="searchSkills" class="bg-blue-500 text-white rounded px-4 py-1">Search</button>
|
||||
</div>
|
||||
|
||||
<div class="titles">
|
||||
<ul>
|
||||
<li v-for="title in titles" :key="title.id" @click="fetchContent(title)">
|
||||
{{ title.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-1/4 p-4 max-h-64">
|
||||
<h2 class="text-xl font-bold m-4">Categories</h2>
|
||||
<TransitionGroup v-if="categories.length > 0" name="list">
|
||||
<Discussion v-for="category in categories" :key="category" :id="category" :title="category"
|
||||
:selected="fetchTitles(category)" :loading="loading" :isCheckbox="isCheckbox"
|
||||
:checkBoxValue="false"
|
||||
@select="fetchTitles(category)"
|
||||
@delete="deleteCategory(category)"
|
||||
@editTitle="editCategory"
|
||||
@makeTitle="makeCategory"
|
||||
@checked="checkUncheckCategory" />
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
<div class="w-1/4 p-4">
|
||||
<h2 class="text-xl font-bold m-4">Titles</h2>
|
||||
<TransitionGroup v-if="categories.length > 0" name="list">
|
||||
<Discussion v-for="title in titles" :key="title.id" :id="title.id" :title="title.title"
|
||||
:selected="fetchTitles(title)" :loading="loading" :isCheckbox="isCheckbox"
|
||||
:checkBoxValue="false"
|
||||
@select="fetchContent(title.id)"
|
||||
@delete="deleteSkill(title.id)"
|
||||
@editTitle="editTitle"
|
||||
@makeTitle="makeTitle"
|
||||
@checked="checkUncheckTitle" />
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
|
||||
<div class="search">
|
||||
<input type="text" v-model="searchQuery" placeholder="Search skills">
|
||||
<button @click="searchSkills">Search</button>
|
||||
<div class="w-full z-0 flex flex-col flex-grow 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">
|
||||
<h2 class="text-xl font-bold m-4">Content</h2>
|
||||
<p class="m-4">{{ content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button @click="closeComponent" class="absolute top-2 right-2 bg-red-500 text-white rounded px-2 py-1">Close</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Discussion from '../components/Discussion.vue'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
isCheckbox: false,
|
||||
isVisible: false,
|
||||
categories: [],
|
||||
selectedCategory: null,
|
||||
titles: [],
|
||||
selectedTitle: null,
|
||||
content: '',
|
||||
searchQuery: ''
|
||||
};
|
||||
},
|
||||
components:{
|
||||
Discussion
|
||||
},
|
||||
methods: {
|
||||
showSkillsLibrary() {
|
||||
this.isVisible = true;
|
||||
this.fetchCategories();
|
||||
},
|
||||
closeComponent() {
|
||||
this.isVisible = false;
|
||||
},
|
||||
fetchCategories() {
|
||||
axios.get('/api/categories')
|
||||
axios.post('/get_skills_library_categories', { client_id: this.$store.state.client_id })
|
||||
.then(response => {
|
||||
this.categories = response.data;
|
||||
this.categories = response.data.categories;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching categories:', error);
|
||||
});
|
||||
}
|
||||
|
||||
fetchTitles(category) {
|
||||
// Make an API call to fetch the titles for the selected category
|
||||
// Update the `titles` data property with the fetched data
|
||||
},
|
||||
fetchContent(title) {
|
||||
// Make an API call to fetch the content for the selected title
|
||||
// Update the `content` data property with the fetched data
|
||||
fetchTitles(category) {
|
||||
console.log("Fetching categories")
|
||||
axios.post('/get_skills_library_titles', { client_id: this.$store.state.client_id, category: category })
|
||||
.then(response => {
|
||||
this.titles = response.data.titles;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching titles:', error);
|
||||
});
|
||||
},
|
||||
fetchContent(skillId) {
|
||||
axios.post('/get_skills_library_content', { client_id: this.$store.state.client_id, skill_id: skillId })
|
||||
.then(response => {
|
||||
const skill = response.data.contents[0];
|
||||
this.content = skill.content;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching content:', error);
|
||||
});
|
||||
},
|
||||
deleteCategory(category) {
|
||||
console.log("Delete category")
|
||||
|
||||
},
|
||||
editCategory(category){
|
||||
console.log("Edit category")
|
||||
|
||||
},
|
||||
checkUncheckCategory(category){
|
||||
console.log("Unchecked category")
|
||||
|
||||
},
|
||||
deleteSkill(id){
|
||||
console.log("Delete skill")
|
||||
},
|
||||
|
||||
editTitle(id){
|
||||
console.log("Edit title")
|
||||
},
|
||||
makeTitle(id){
|
||||
console.log("Make title")
|
||||
|
||||
},
|
||||
checkUncheckTitle(id){
|
||||
|
||||
},
|
||||
searchSkills() {
|
||||
// Make an API call to search for skills based on the `searchQuery`
|
||||
// Update the `titles` and `content` data properties with the search results
|
||||
// Implement the search functionality by making an API call with the searchQuery
|
||||
// Update the titles and content based on the search results
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchCategories();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -203,11 +203,8 @@
|
||||
|
||||
</div>
|
||||
<div class="relative flex flex-row flex-grow mb-10 z-0 w-full">
|
||||
|
||||
<!-- DISCUSSION LIST -->
|
||||
<div class="mx-4 flex flex-col flex-grow w-full " :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
|
||||
|
||||
|
||||
<div id="dis-list" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"
|
||||
class="flex flex-col flex-grow w-full">
|
||||
<TransitionGroup v-if="list.length > 0" name="list">
|
||||
@ -300,7 +297,7 @@
|
||||
<p class="text-2xl animate-pulse mt-2 text-white">{{ loading_infos }} ...</p>
|
||||
</div>
|
||||
<InputBox prompt-text="Enter the url to the page to use as discussion support" @ok="handleOk" ref="web_url_input_box"></InputBox>
|
||||
|
||||
<SkillsLibraryViewer ref="skills_lib"></SkillsLibraryViewer>
|
||||
</template>
|
||||
|
||||
|
||||
@ -577,12 +574,7 @@ export default {
|
||||
socket.emit('upgrade_vectorization');
|
||||
},
|
||||
async showSkillsLib(){
|
||||
let result = await axios.post("/get_skills_lib", {
|
||||
client_id: this.client_id
|
||||
}, {headers: this.posts_headers});
|
||||
if(result.status){
|
||||
console.log("done")
|
||||
}
|
||||
this.$refs.skills_lib.showSkillsLibrary()
|
||||
},
|
||||
|
||||
async applyConfiguration() {
|
||||
@ -2058,7 +2050,8 @@ export default {
|
||||
WelcomeComponent,
|
||||
ChoiceDialog,
|
||||
ProgressBar,
|
||||
InputBox
|
||||
InputBox,
|
||||
SkillsLibraryViewer
|
||||
},
|
||||
watch: {
|
||||
progress_visibility_val(newVal) {
|
||||
@ -2194,7 +2187,7 @@ import Discussion from '../components/Discussion.vue'
|
||||
import ChoiceDialog from '@/components/ChoiceDialog.vue'
|
||||
import ProgressBar from "@/components/ProgressBar.vue";
|
||||
import InputBox from "@/components/input_box.vue";
|
||||
|
||||
import SkillsLibraryViewer from "@/components/SkillsViewer.vue"
|
||||
|
||||
import Message from '../components/Message.vue'
|
||||
import ChatBox from '../components/ChatBox.vue'
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 6375917fdfa3750a5a93a9aaea6b926107a15cf8
|
||||
Subproject commit 47762d34c39c6a792c00d0f83a5cb5c89bc360ac
|
||||
Loading…
Reference in New Issue
Block a user