mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-01-29 15:44:12 +00:00
upgraded ui
This commit is contained in:
Saifeddine ALOUI
parent
ffe2066ef1
commit
a5f6af74e2
@ -1 +1 @@
|
||||
Subproject commit 7424d7a960212ff94bc7564bc25a397f7e34599c
|
||||
Subproject commit 6c07bf0b1d84e5cb836b9b04f1ad802ba02f697d
|
||||
8
web/dist/assets/index-BnGFpX1y.css
vendored
8
web/dist/assets/index-BnGFpX1y.css
vendored
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-DlM79bnx.css
vendored
Normal file
8
web/dist/assets/index-DlM79bnx.css
vendored
Normal file
File diff suppressed because one or more lines are too long
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-BjLC6vKM.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BnGFpX1y.css">
|
||||
<script type="module" crossorigin src="/assets/index-dzsueSII.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DlM79bnx.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -161,32 +161,7 @@
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</ChatBarButton>
|
||||
|
||||
<ChatBarButton
|
||||
@click="toggleViewMode"
|
||||
:class="{ 'text-red-500': isCompactMode }"
|
||||
title="Toggle View Mode"
|
||||
>
|
||||
<template #icon>
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
v-if="isCompactMode"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 12h18M3 6h18M3 18h18"
|
||||
/>
|
||||
<path
|
||||
v-else
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 12h18M3 6h18M3 18h18M12 6v12"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</ChatBarButton>
|
||||
</ChatBarButton>
|
||||
<div class="w-fit group relative" v-if="!loading" >
|
||||
<div class= "hide top-50 hide opacity-0 group-hover:bottom-0 opacity-0 .group-hover:block fixed w-[1000px] group absolute group-hover:opacity-100 transform group-hover:translate-y-[-50px] group-hover:translate-x-[0px] transition-all duration-300">
|
||||
<div class="w-fit flex-wrap flex bg-white bg-opacity-50 backdrop-blur-md rounded p-4">
|
||||
@ -263,77 +238,37 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-fit group relative" v-if="!loading">
|
||||
<!-- :onShowPersList="onShowPersListFun" -->
|
||||
<div class= "top-50 hide opacity-0 group-hover:bottom-0 .group-hover:block fixed w-[1000px] group absolute group-hover:opacity-100 transform group-hover:translate-y-[-50px] group-hover:translate-x-[0px] transition-all duration-300">
|
||||
<div class="w-fit flex-wrap flex bg-white bg-opacity-50 backdrop-blur-md rounded p-4">
|
||||
<div class="w-fit h-fit inset-0 opacity-100"
|
||||
v-for="(item, index) in mountedPersonalities" :key="index + '-' + item.name"
|
||||
ref="mountedPersonalities"
|
||||
@mouseover="showPersonalityHoveredIn(index)" @mouseleave="showPersonalityHoveredOut()"
|
||||
>
|
||||
<div v-if="index!=personality_name" class="items-center flex flex-row relative z-20 hover:-translate-y-8 duration-300"
|
||||
:class="personalityHoveredIndex === index?'scale-150':''"
|
||||
>
|
||||
<div class="relative">
|
||||
<button @click.prevent="onPersonalitySelected(item)" class="w-10 h-10 relative">
|
||||
<img :src="bUrl + item.avatar" @error="personalityImgPlacehodler"
|
||||
class="z-50 w-10 h-10 rounded-full object-fill text-red-700 border-2 border-gray-500 active:scale-90"
|
||||
:class="personalityHoveredIndex === index?'scale-150 ':'' + this.$store.state.active_personality_id == this.$store.state.personalities.indexOf(item.full_path) ? 'border-secondary' : 'border-transparent z-0'"
|
||||
:title="item.name">
|
||||
<!-- Personalities menu positioned above the dock -->
|
||||
<div class="relative" @mouseleave="hidePersonalitiesMenu" v-if="!loading">
|
||||
<div class="relative inline-block">
|
||||
<!-- Personalities menu positioned above the button -->
|
||||
<div v-show="isPersonalitiesMenuVisible" class="absolute z-10 bottom-full left-1/2 transform -translate-x-1/2 w-60 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-all duration-300 ease-out mb-2">
|
||||
<div class="p-2 grid grid-cols-4 gap-4 max-h-60 overflow-y-auto custom-scrollbar">
|
||||
<div v-for="(item, index) in mountedPersonalities" :key="index" class="relative group/item">
|
||||
<button @click.prevent="onPersonalitySelected(item)" :title="item.name" class="w-10 h-10 rounded-full overflow-hidden transition-transform duration-200 transform group-hover/item:scale-110 focus:outline-none">
|
||||
<img :src="bUrl + item.avatar" @error="personalityImgPlacehodler" :alt="item.name" class="w-full h-full object-cover" :class="{'border-2 border-secondary': $store.state.active_personality_id == $store.state.personalities.indexOf(item.full_path)}">
|
||||
</button>
|
||||
<button @click.prevent="unmountPersonality(item)" v-if="personalityHoveredIndex === index" >
|
||||
<span
|
||||
class="-top-6 -right-6 border-gray-500 absolute active:scale-90 w-7 h-7 hover:scale-150 transition bg-bg-light dark:bg-bg-dark rounded-full border-2"
|
||||
title="Unmount personality">
|
||||
<!-- UNMOUNT BUTTON -->
|
||||
<svg aria-hidden="true" class="top-1 left-1 relative w-5 h-5 text-red-600 hover:text-red-500 "
|
||||
fill="currentColor" viewBox="0 0 20 20" stroke-width="1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button @click.prevent="remount_personality(item)" v-if="personalityHoveredIndex === index">
|
||||
<span
|
||||
class="-top-9 left-2 border-gray-500 active:scale-90 absolute items-center w-7 h-7 hover:scale-150 transition text-red-200 absolute active:scale-90 bg-bg-light dark:bg-bg-dark rounded-full border-2"
|
||||
title="Remount">
|
||||
<!-- UNMOUNT BUTTON -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="top-1 left-1 relative w-4 h-4 text-red-600 hover:text-red-500 " viewBox="0 0 30 30" width="2" height="2" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="surface1">
|
||||
<path style=" " d="M 16 4 C 10.886719 4 6.617188 7.160156 4.875 11.625 L 6.71875 12.375 C 8.175781 8.640625 11.710938 6 16 6 C 19.242188 6 22.132813 7.589844 23.9375 10 L 20 10 L 20 12 L 27 12 L 27 5 L 25 5 L 25 8.09375 C 22.808594 5.582031 19.570313 4 16 4 Z M 25.28125 19.625 C 23.824219 23.359375 20.289063 26 16 26 C 12.722656 26 9.84375 24.386719 8.03125 22 L 12 22 L 12 20 L 5 20 L 5 27 L 7 27 L 7 23.90625 C 9.1875 26.386719 12.394531 28 16 28 C 21.113281 28 25.382813 24.839844 27.125 20.375 Z "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</button>
|
||||
|
||||
|
||||
<button @click.prevent="handleOnTalk(item)" v-if="personalityHoveredIndex === index">
|
||||
<span
|
||||
class="-top-6 -left-6 border-gray-500 active:scale-90 absolute items-center w-7 h-7 hover:scale-150 transition text-red-200 absolute active:scale-90 bg-bg-light dark:bg-bg-dark rounded-full border-2"
|
||||
title="Talk">
|
||||
<!-- UNMOUNT BUTTON -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="top-1 left-1 relative w-4 h-4 text-red-600 hover:text-red-500 " viewBox="0 0 24 24" width="2" height="2" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="22" y1="2" x2="11" y2="13"></line>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</button>
|
||||
<div class="absolute -bottom-4 left-0 w-full flex items-center justify-center opacity-0 group-hover/item:opacity-100 transition-opacity duration-200 bg-white rounded-md shadow-md p-1">
|
||||
<button @click.prevent="unmountPersonality(item)" class="p-1 bg-red-500 rounded-full text-white hover:bg-red-600 focus:outline-none" title="Unmount">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
</button>
|
||||
<button @click.prevent="remount_personality(item)" class="p-1 bg-blue-500 rounded-full text-white hover:bg-blue-600 focus:outline-none ml-1" title="Remount">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
|
||||
</button>
|
||||
<button @click.prevent="handleOnTalk(item)" class="p-1 bg-green-500 rounded-full text-white hover:bg-green-600 focus:outline-none ml-1" title="Talk">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div @mouseenter="showPersonalitiesMenu">
|
||||
<MountedPersonalities ref="mountedPers" :onShowPersList="onShowPersListFun" :onReady="onPersonalitiesReadyFun"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MountedPersonalities ref="mountedPers" :onShowPersList="onShowPersListFun" :onReady="onPersonalitiesReadyFun"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-fit">
|
||||
<PersonalitiesCommands
|
||||
v-if="personalities_ready && this.$store.state.mountedPersArr[this.$store.state.config.active_personality_id].commands!=''"
|
||||
@ -489,6 +424,24 @@
|
||||
<UniversalForm ref="universalForm" class="z-20" />
|
||||
</template>
|
||||
<style scoped>
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(155, 155, 155, 0.5);
|
||||
border-radius: 20px;
|
||||
border: transparent;
|
||||
}
|
||||
.chat-bar {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@ -567,6 +520,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isPersonalitiesMenuVisible: false,
|
||||
is_rt:false,
|
||||
bindingHoveredIndex:null,
|
||||
modelHoveredIndex:null,
|
||||
@ -685,14 +639,16 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPersonalitiesMenu() {
|
||||
this.isPersonalitiesMenuVisible = true
|
||||
},
|
||||
hidePersonalitiesMenu() {
|
||||
this.isPersonalitiesMenuVisible = false
|
||||
},
|
||||
toggleLeftPanel(){
|
||||
console.log(this.leftPanelCollapsed)
|
||||
this.$store.commit('setLeftPanelCollapsed', ! this.leftPanelCollapsed); // Assuming you have a mutation to set the view mode
|
||||
},
|
||||
toggleViewMode() {
|
||||
const newMode = this.isCompactMode ? 'full' : 'compact';
|
||||
this.$store.commit('setViewMode', newMode); // Assuming you have a mutation to set the view mode
|
||||
},
|
||||
async toggleRightPanel(){
|
||||
console.log(this.rightPanelCollapsed)
|
||||
this.$store.commit('setRightPanelCollapsed', !this.rightPanelCollapsed); // Assuming you have a mutation to set the view mode
|
||||
|
||||
@ -1,47 +1,23 @@
|
||||
<template>
|
||||
<!-- LIST OF MOUNTED PERSONALITIES -->
|
||||
|
||||
<div class="w-fit flex select-none">
|
||||
<div class="w-fit flex select-none">
|
||||
<div class="w-8 h-8 group relative" >
|
||||
<img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
|
||||
class="w-8 h-8 rounded-full object-fill text-red-700 hover:scale-150 active:scale-90 hover:z-50 hover:-translate-y-2 duration-150 border-secondary cursor-pointer"
|
||||
:title="'Active personality: '+mountedPers.name" @click="onSettingsPersonality(mountedPers)">
|
||||
<div class="opacity-0 group-hover:opacity-100">
|
||||
<button class="z-50 -top-1 group-hover:translate-x-5 border-gray-500 absolute active:scale-90 w-7 h-7 hover:scale-150 transition bg-bg-light dark:bg-bg-dark rounded-full border-2" @click.prevent="remount_personality()" v-if="personalityHoveredIndex === index">
|
||||
<span
|
||||
title="Remount">
|
||||
<!-- UNMOUNT BUTTON -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="top-0 left-1 relative w-4 h-4 text-red-600 hover:text-red-500 " viewBox="0 0 30 30" width="2" height="2" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="surface1">
|
||||
<path style=" " d="M 16 4 C 10.886719 4 6.617188 7.160156 4.875 11.625 L 6.71875 12.375 C 8.175781 8.640625 11.710938 6 16 6 C 19.242188 6 22.132813 7.589844 23.9375 10 L 20 10 L 20 12 L 27 12 L 27 5 L 25 5 L 25 8.09375 C 22.808594 5.582031 19.570313 4 16 4 Z M 25.28125 19.625 C 23.824219 23.359375 20.289063 26 16 26 C 12.722656 26 9.84375 24.386719 8.03125 22 L 12 22 L 12 20 L 5 20 L 5 27 L 7 27 L 7 23.90625 C 9.1875 26.386719 12.394531 28 16 28 C 21.113281 28 25.382813 24.839844 27.125 20.375 Z "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</button>
|
||||
|
||||
|
||||
<button class="-top-1 group-hover:-translate-x-12 border-gray-500 active:scale-90 absolute items-center w-7 h-7 hover:scale-150 transition text-red-200 absolute active:scale-90 bg-bg-light dark:bg-bg-dark rounded-full border-2" @click.prevent="handleOnTalk()" v-if="personalityHoveredIndex === index">
|
||||
<span
|
||||
title="Talk">
|
||||
<!-- UNMOUNT BUTTON -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="left-1 relative w-4 h-4 text-red-600 hover:text-red-500 " viewBox="0 0 24 24" width="2" height="2" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="22" y1="2" x2="11" y2="13"></line>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</button>
|
||||
<div class="top-0 group-hover:-translate-x-8 group-hover:-translate-y-8 left-0 border-gray-500 active:scale-90 absolute items-center w-7 h-7 hover:scale-150 transition text-red-500 absolute active:scale-90 bg-bg-light dark:bg-bg-dark rounded-full border-2"
|
||||
@click.stop="toggleShowPersList" title="Click to show more">+{{ mountedPersArr.length - 1 }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative group/item">
|
||||
<button @click.prevent="toggleShowPersList" class="w-10 h-10 rounded-full overflow-hidden transition-transform duration-200 transform group-hover/item:scale-110 focus:outline-none">
|
||||
<img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler" :alt="mountedPers.name" class="w-full h-full object-cover" :class="{'border-2 border-secondary': isActive}">
|
||||
</button>
|
||||
|
||||
<div class="absolute -bottom-4 left-0 w-full flex items-center justify-center opacity-0 group-hover/item:opacity-100 transition-opacity duration-200 p-1">
|
||||
<button @click.prevent="remount_personality()" class="p-1 bg-blue-500 rounded-full text-white hover:bg-blue-600 focus:outline-none" title="Remount">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
|
||||
</button>
|
||||
<button @click.prevent="handleOnTalk()" class="p-1 bg-green-500 rounded-full text-white hover:bg-green-600 focus:outline-none ml-1" title="Talk">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</button>
|
||||
<button @click.prevent="toggleShowPersList" class="p-1 bg-gray-500 rounded-full text-white hover:bg-gray-600 focus:outline-none ml-1" title="Show more">
|
||||
<span class="text-xs font-bold">+{{ mountedPersArr.length - 1 }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<UniversalForm ref="universalForm" class="z-50" />
|
||||
</template>
|
||||
</template>
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-if="$store.state.ready" class="navbar-container z-60">
|
||||
<div class="navbar-container z-60">
|
||||
<nav class="game-menu">
|
||||
<RouterLink
|
||||
v-for="(link, index) in filteredNavLinks"
|
||||
|
||||
@ -1,111 +1,110 @@
|
||||
<template>
|
||||
<div class="dock-container" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
|
||||
<header class="navbar-container" :class="{ 'translate-y-0 opacity-100': showDock || isFullMode, '-translate-y-full opacity-0': !showDock && !isFullMode}">
|
||||
<div class="flex flex-row items-center justify-between w-full max-w-screen-xl mx-auto px-4">
|
||||
<!-- NAVIGATION BUTTONS -->
|
||||
<Navigation />
|
||||
<!-- PIN BUTTON -->
|
||||
<button @click="togglePin" class="pin-button" :class="{ 'pinned': isFullMode }">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
|
||||
<div class="topbar-container" @mouseenter="show" @mouseleave="hide">
|
||||
<div class="topbar" :class="{ 'topbar-hidden': !isVisible }">
|
||||
<div class="topbar-content">
|
||||
<slot name="navigation"></slot>
|
||||
<button class="pin-button" @click="togglePin" :title="isPinned ? 'Unpin' : 'Pin'">
|
||||
<svg :fill="isPinned ? '#FF0000' : '#000000'" height="24px" width="24px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 490.125 490.125" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M300.625,5.025c-6.7-6.7-17.6-6.7-24.3,0l-72.6,72.6c-6.7,6.7-6.7,17.6,0,24.3l16.3,16.3l-40.3,40.3l-63.5-7
|
||||
c-3-0.3-6-0.5-8.9-0.5c-21.7,0-42.2,8.5-57.5,23.8l-20.8,20.8c-6.7,6.7-6.7,17.6,0,24.3l108.5,108.5l-132.4,132.4
|
||||
c-6.7,6.7-6.7,17.6,0,24.3c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5l132.5-132.5l108.5,108.5c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5
|
||||
l20.8-20.8c17.6-17.6,26.1-41.8,23.3-66.4l-7-63.5l40.3-40.3l16.2,16.2c6.7,6.7,17.6,6.7,24.3,0l72.6-72.6c3.2-3.2,5-7.6,5-12.1
|
||||
s-1.8-8.9-5-12.1L300.625,5.025z M400.425,250.025l-16.2-16.3c-6.4-6.4-17.8-6.4-24.3,0l-58.2,58.3c-3.7,3.7-5.5,8.8-4.9,14
|
||||
l7.9,71.6c1.6,14.3-3.3,28.3-13.5,38.4l-8.7,8.7l-217.1-217.1l8.7-8.6c10.1-10.1,24.2-15,38.4-13.5l71.7,7.9
|
||||
c5.2,0.6,10.3-1.2,14-4.9l58.2-58.2c6.7-6.7,6.7-17.6,0-24.3l-16.3-16.3l48.3-48.3l160.3,160.3L400.425,250.025z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<Navigation></Navigation>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<div class="placeholder" v-if="!isVisible"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import Navigation from '@/components/Navigation.vue'
|
||||
import { store } from '../main';
|
||||
import Navigation from '@/components/Navigation.vue';
|
||||
|
||||
export default {
|
||||
name: 'TopBar',
|
||||
components: {
|
||||
Navigation
|
||||
},
|
||||
computed:{
|
||||
isFullMode() {
|
||||
return store.state.view_mode === 'full'; // Accessing the mode directly
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const store = useStore()
|
||||
const showDock = ref(false)
|
||||
const isFullMode = computed(() => store.state.view_mode === 'full')
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
if (!isFullMode.value) {
|
||||
showDock.value = event.clientY <= 50
|
||||
}
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (!isFullMode.value) {
|
||||
showDock.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const togglePin = () => {
|
||||
const newMode = store.state.view_mode=='compact' ? 'full' : 'compact';
|
||||
store.commit('setViewMode', newMode); // Assuming you have a mutation to set the view mode
|
||||
showDock.value = isFullMode.value
|
||||
}
|
||||
|
||||
data() {
|
||||
return {
|
||||
showDock,
|
||||
handleMouseMove,
|
||||
handleMouseLeave,
|
||||
togglePin
|
||||
isVisible: false,
|
||||
isPinned: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.isVisible = true
|
||||
},
|
||||
hide() {
|
||||
if (!this.isPinned) {
|
||||
this.isVisible = false
|
||||
}
|
||||
},
|
||||
togglePin() {
|
||||
this.isPinned = !this.isPinned
|
||||
this.isVisible = this.isPinned
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dock-container {
|
||||
@apply fixed flex m-[50px] flex-row top-0 left-0 right-0 h-[50px] z-50;
|
||||
}
|
||||
.topbar-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
@apply fixed top-0 left-0 right-0 flex justify-center items-center
|
||||
py-2 rounded-b-2xl shadow-lg bg-white bg-opacity-80 backdrop-blur-sm
|
||||
transition-all duration-300 ease-in-out;
|
||||
}
|
||||
.topbar {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.dark .navbar-container {
|
||||
@apply bg-gray-800 bg-opacity-80;
|
||||
}
|
||||
.topbar-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.topbar-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pin-button {
|
||||
@apply p-2 rounded-full transition-colors duration-200 z-10;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.pin-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pin-button:hover {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
.pin-button svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.dark .pin-button {
|
||||
background-color: rgba(31, 41, 55, 0.8);
|
||||
}
|
||||
.pin-button:hover svg {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.dark .pin-button:hover {
|
||||
@apply bg-gray-700;
|
||||
}
|
||||
|
||||
.pin-button.pinned {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
|
||||
.dark .pin-button.pinned {
|
||||
@apply text-blue-400;
|
||||
}
|
||||
.placeholder {
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
</button>
|
||||
|
||||
<!-- Expandable menu -->
|
||||
<div v-if="isMenuVisible" class="expandable-menu discussion z-50 p-4 bg-white dark:bg-bg-dark rounded-lg shadow-lg">
|
||||
<div v-if="isMenuVisible" @mouseleave="hideMenu" class="expandable-menu discussion z-50 p-4 bg-white dark:bg-bg-dark rounded-lg shadow-lg">
|
||||
<!-- Edit discussion list -->
|
||||
<button class="text-3xl hover:text-secondary dark:hover:text-secondary-light duration-150 active:scale-95" title="Edit discussion list" type="button" @click="isCheckbox = !isCheckbox" :class="isCheckbox ? 'text-secondary dark:text-secondary-light' : 'text-gray-700 dark:text-gray-300'">
|
||||
<i data-feather="check-square"></i>
|
||||
@ -1047,6 +1047,14 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleShortcut(event) {
|
||||
if (event.ctrlKey && event.key === 'd') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.createNewDiscussion();
|
||||
}
|
||||
},
|
||||
|
||||
toggleMenu() {
|
||||
this.isMenuVisible = !this.isMenuVisible;
|
||||
if (this.isMenuVisible){
|
||||
@ -1056,7 +1064,22 @@ export default {
|
||||
feather.replace()
|
||||
|
||||
})
|
||||
},
|
||||
},
|
||||
showMenu() {
|
||||
this.isMenuVisible = true;
|
||||
this.isinfosMenuVisible=false;
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
})
|
||||
},
|
||||
hideMenu() {
|
||||
this.isMenuVisible = false;
|
||||
nextTick(() => {
|
||||
feather.replace()
|
||||
|
||||
})
|
||||
},
|
||||
toggleInfosMenu() {
|
||||
this.isinfosMenuVisible = !this.isinfosMenuVisible;
|
||||
if (this.isinfosMenuVisible){
|
||||
@ -2972,6 +2995,7 @@ export default {
|
||||
window.removeEventListener('resize', this.adjustMenuPosition);
|
||||
},
|
||||
async mounted() {
|
||||
window.addEventListener('keydown', this.handleShortcut);
|
||||
this.$store.state.toast = this.$refs.toast
|
||||
this.$store.state.news = this.$refs.news
|
||||
this.$store.state.messageBox = this.$refs.messageBox
|
||||
|
||||
@ -574,6 +574,7 @@
|
||||
<option value="bare">Bare, useful when in chat mode</option>
|
||||
<option value="llama3">LLama3 communication template</option>
|
||||
<option value="mistral">Mistral communication template</option>
|
||||
<option value="deepseek">DeepSeek communication template</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
@ -4684,6 +4685,19 @@ export default {
|
||||
this.configFile.end_ai_header_id_template = ": "
|
||||
this.configFile.end_ai_message_id_template = "[/INST]"
|
||||
this.settingsChanged=true
|
||||
} else if (selectedOption === 'deepseek') {
|
||||
console.log("Using deepseek template")
|
||||
this.configFile.start_header_id_template = ""
|
||||
this.configFile.system_message_template = " Using this information"
|
||||
this.configFile.end_header_id_template = ": "
|
||||
this.configFile.separator_template = "\n"
|
||||
this.configFile.start_user_header_id_template = ""
|
||||
this.configFile.end_user_header_id_template = ": "
|
||||
this.configFile.end_user_message_id_template = ""
|
||||
this.configFile.start_ai_header_id_template = ""
|
||||
this.configFile.end_ai_header_id_template = ": "
|
||||
this.configFile.end_ai_message_id_template = ""
|
||||
this.settingsChanged=true
|
||||
}
|
||||
},
|
||||
install_model(){
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit dbf465af36302d4d8ecfb7f86332062006f5d2eb
|
||||
Subproject commit 96cff88ab4f0d0a70f93b1b138a7c233df707f43
|
||||
Loading…
x
Reference in New Issue
Block a user