enhanced step management

This commit is contained in:
saloui 2023-07-06 19:19:48 +02:00
parent 3182ad1481
commit a14e2f75e4
9 changed files with 94 additions and 78 deletions

1
app.py
View File

@ -1196,6 +1196,7 @@ class LoLLMsWebUI(LoLLMsAPPI):
return jsonify({"status": False,"message":"No discussion is selected"}) return jsonify({"status": False,"message":"No discussion is selected"})
else: else:
new_rank = self.current_discussion.delete_message(discussion_id) new_rank = self.current_discussion.delete_message(discussion_id)
ASCIIColors.yellow("Message deleted")
return jsonify({"status":True,"new_rank": new_rank}) return jsonify({"status":True,"new_rank": new_rank})

View File

@ -17,9 +17,10 @@ var globals={
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port); var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
socket.on('connect', function() { socket.on('connect', function() {
console.log("Disconnected")
}); });
socket.on('disconnect', function() { socket.on('disconnect', function() {
console.log("Disconnected") console.log("Disconnected")
}); });
socket.on('infos', function(msg) { socket.on('infos', function(msg) {
console.log(msg) console.log(msg)

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
View File

@ -6,8 +6,8 @@
<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 - Welcome</title> <title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-9e25fab0.js"></script> <script type="module" crossorigin src="/assets/index-3107af8d.js"></script>
<link rel="stylesheet" href="/assets/index-953504b7.css"> <link rel="stylesheet" href="/assets/index-8af7331e.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@ -117,9 +117,13 @@
<div class="overflow-x-auto w-full "> <div class="overflow-x-auto w-full ">
<!-- MESSAGE CONTENT --> <!-- MESSAGE CONTENT -->
<div v-for="(step, index) in steps" :key="index" class="step"> <div class="flex flex-col items-start w-full">
<Step :done="step.done" :message="step.message" /> <div v-for="(step, index) in message.steps" :key="'step-' + message.id + '-' + index" class="step font-bold" :style="{ backgroundColor: step.done ? 'transparent' : 'inherit' }">
<Step :done="step.done" :message="step.message" />
</div>
</div> </div>
<MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content"> <MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content">
</MarkdownRenderer> </MarkdownRenderer>
<textarea v-if="editMsgMode" ref="mdTextarea" :rows="4" <textarea v-if="editMsgMode" ref="mdTextarea" :rows="4"
@ -182,7 +186,6 @@ export default {
data() { data() {
return { return {
expanded: false, expanded: false,
steps: [],
new_message_content: '', new_message_content: '',
showConfirmation: false, showConfirmation: false,
editMsgMode: false, editMsgMode: false,

View File

@ -1,16 +1,25 @@
<template> <template>
<div class="step flex items-center mb-4"> <div class="step flex items-center mb-4">
<div class="checkbox flex items-center justify-center w-6 h-6 rounded border border-gray-300 mr-2"> <div class="checkbox flex items-center justify-center w-6 h-6 rounded border border-gray-300 mr-2">
<i data-feather <i
v-if="done" data-feather="square"
name="check" v-if="!done"
class="text-green-500 w-4 h-4" class="text-gray-400 w-4 h-4"
></i> ></i>
</div> <i
<div class="content flex-1">{{ message }}</div> data-feather="check-square"
<div class="loader w-6 h-6 border-t-4 border-b-4 border-blue-500 rounded-full animate-spin" v-if="!done"></div> v-if="done"
class="text-green-500 w-4 h-4"
></i>
</div> </div>
</template> <div class="content flex-1" :class="{'text-green-500': done, 'text-yellow-500': !done}">{{ message }}</div>
<div class="loader w-6 h-6 border-t-4 border-b-4 border-blue-500 rounded-full animate-spin ml-2" v-if="!done"></div>
</div>
</template>
<script> <script>
export default { export default {

View File

@ -8,7 +8,7 @@ import './assets/tailwind.css'
const app = createApp(App) const app = createApp(App)
// Create a new store instance. // Create a new store instance.
const store = createStore({ export const store = createStore({
state () { state () {
return { return {
// count: 0, // count: 0,
@ -20,14 +20,10 @@ const store = createStore({
mutations: { mutations: {
// increment (state) { // increment (state) {
// state.count++ // state.count++
// } // }
setConnectionStatus(state, status) {
state.isConnected = status;
},
} }
}) })
app.use(router) app.use(router)
app.use(store) app.use(store)

View File

@ -170,7 +170,7 @@
<!-- CHAT AREA --> <!-- CHAT AREA -->
<div class=" container pt-4 pb-10 mb-28"> <div class=" container pt-4 pb-10 mb-28">
<TransitionGroup v-if="discussionArr.length > 0" name="list"> <TransitionGroup v-if="discussionArr.length > 0" name="list">
<Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id" <Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id"
ref="messages" @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage" ref="messages" @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage"
@rankDown="rankDownMessage" @updateMessage="updateMessage" @resendMessage="resendMessage" @rankDown="rankDownMessage" @updateMessage="updateMessage" @resendMessage="resendMessage"
:avatar="getAvatar(msg.sender)" /> :avatar="getAvatar(msg.sender)" />
@ -227,7 +227,7 @@
} }
</style> </style>
<script> <script>
import { mapMutations } from 'vuex';
export default { export default {
@ -282,7 +282,16 @@ export default {
} }
}, },
methods: { methods: {
...mapMutations(['setConnectionStatus']), socketIOConnected() {
console.log("socketIOConnected")
this.$store.state.isConnected=true;
return true
},
socketIODisonnected() {
console.log("socketIOConnected")
this.$store.state.isConnected=false;
return true
},
async api_get_req(endpoint) { async api_get_req(endpoint) {
try { try {
const res = await axios.get("/" + endpoint); const res = await axios.get("/" + endpoint);
@ -544,16 +553,6 @@ export default {
}) })
} }
}, },
socketIOConnected() {
console.log("Websocket connected")
this.setConnectionStatus(true);
return true
},
socketIODisonnected() {
console.log("Websocket disconnected")
this.setConnectionStatus(false);
return true
},
scrollToElement(el) { scrollToElement(el) {
@ -614,7 +613,8 @@ export default {
//parent: 10, //parent: 10,
rank: 0, rank: 0,
sender: msgObj.user, sender: msgObj.user,
created_at: msgObj.created_at created_at: msgObj.created_at,
steps: []
//type: 0 //type: 0
} }
this.discussionArr.push(usrMessage) this.discussionArr.push(usrMessage)
@ -766,6 +766,9 @@ export default {
else if (msgObj.message_type == this.msgTypes.MSG_TYPE_STEP_START){ else if (msgObj.message_type == this.msgTypes.MSG_TYPE_STEP_START){
console.log("Step started: ",msgObj.data) console.log("Step started: ",msgObj.data)
messageItem.steps.push({"message":msgObj.data,"done":false}) messageItem.steps.push({"message":msgObj.data,"done":false})
console.log("Steps: ",messageItem.steps)
console.log("this.discussionArr: ",this.discussionArr)
} else if (msgObj.message_type == this.msgTypes.MSG_TYPE_STEP_END) { } else if (msgObj.message_type == this.msgTypes.MSG_TYPE_STEP_END) {
@ -1309,9 +1312,10 @@ export default {
// socket responses // socket responses
socket.on('infos', this.createBotMsg) socket.on('infos', this.createBotMsg)
socket.on('message', this.streamMessageContent) socket.on('message', this.streamMessageContent)
socket.on("final", this.finalMsgEvent) socket.on('final', this.finalMsgEvent)
socket.on('connected',this.socketIOConnected) socket.on('connected',this.socketIOConnected)
socket.on('disconnected',this.socketIODisconnected) socket.on('disconnected',this.socketIODisconnected)
console.log("Added events")
}, },
mounted() { mounted() {
//console.log('chatbox mnt',this.$refs) //console.log('chatbox mnt',this.$refs)
@ -1323,7 +1327,7 @@ export default {
// To fix scrolling back to last message, this hook is needed. // To fix scrolling back to last message, this hook is needed.
// If anyone knows hor to fix scroll issue when changing pages, please do fix it :D // If anyone knows hor to fix scroll issue when changing pages, please do fix it :D
console.log("Websocket connected (activated)", this.socketConnected) console.log("Websocket connected (activated)", this.socketConnected)
//console.log('settings changed acc', this.$store.state.settingsChanged) //console.log('settings changed acc', this.$store.state.settingsChanged)
// await this.getPersonalityAvatars() // await this.getPersonalityAvatars()
await this.getPersonalityAvatars() await this.getPersonalityAvatars()
@ -1377,15 +1381,17 @@ export default {
}) })
}, },
}, },
computed: { computed: {
socketConnected() { socketConnected() {
console.log("Websocket connected") console.log(" --- > Websocket connected")
this.$store.state.isConnected=true;// ('setConnectionStatus', true);
return true return true
}, },
socketDisconnected() { socketDisconnected() {
console.log("Websocket disconnected") this.$store.state.isConnected=false;// .$store.commit('setConnectionStatus', false);
console.log(" --- > Websocket disconnected")
return true return true
}, },
selectedDiscussions() { selectedDiscussions() {