vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix bg-base classes

Browse source
This commit is contained in:
Xuan Son Nguyen 2024-11-05 16:57:48 +01:00
parent 9719450232
commit 521be4c31a
1 changed files with 15 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

25
examples/server/public/index.html
View file

@ -15,6 +15,9 @@
pre { @apply whitespace-pre-wrap; } pre { @apply whitespace-pre-wrap; }
/* TODO: fix markdown table */ /* TODO: fix markdown table */
} }
.bg-base-100 {background-color: var(--fallback-b1,oklch(var(--b1)/1))}
.bg-base-200 {background-color: var(--fallback-b2,oklch(var(--b2)/1))}
.bg-base-300 {background-color: var(--fallback-b3,oklch(var(--b3)/1))}
</style> </style>
</head> </head>
@ -134,7 +137,7 @@
// markdown support // markdown support
const VueMarkdown = defineComponent( const VueMarkdown = defineComponent(
(props) => { (props) => {
const md = shallowRef(new markdownit(props.options ?? {})); const md = shallowRef(new markdownit(props.options ?? { breaks: true }));
for (const plugin of props.plugins ?? []) { for (const plugin of props.plugins ?? []) {
md.value.use(plugin); md.value.use(plugin);
} }
@ -182,7 +185,12 @@
}, },
}; };
// format of message: { id: number, role: 'user' | 'assistant', content: string } // scroll to bottom of chat messages
const chatScrollToBottom = () => {
const msgListElem = document.getElementById('messages-list');
setTimeout(() => msgListElem.scrollTo({ top: msgListElem.scrollHeight }), 1);
};
createApp({ createApp({
components: { components: {
VueMarkdown, VueMarkdown,
@ -190,7 +198,7 @@
data() { data() {
return { return {
conversations: Conversations.getAll(), conversations: Conversations.getAll(),
messages: [], messages: [], // { id: number, role: 'user' | 'assistant', content: string }
viewingConvId: Conversations.getNewConvId(), viewingConvId: Conversations.getNewConvId(),
inputMsg: '', inputMsg: '',
isGenerating: false, isGenerating: false,
@ -204,11 +212,8 @@
mounted() { mounted() {
// scroll to the bottom when the pending message height is updated // scroll to the bottom when the pending message height is updated
const pendingMsgElem = document.getElementById('pending-msg'); const pendingMsgElem = document.getElementById('pending-msg');
const msgListElem = document.getElementById('messages-list');
const resizeObserver = new ResizeObserver(() => { const resizeObserver = new ResizeObserver(() => {
if (this.isGenerating) { if (this.isGenerating) chatScrollToBottom();
msgListElem.scrollTo({ top: msgListElem.scrollHeight });
}
}); });
resizeObserver.observe(pendingMsgElem); resizeObserver.observe(pendingMsgElem);
}, },
@ -217,11 +222,13 @@
if (this.isGenerating) return; if (this.isGenerating) return;
this.viewingConvId = Conversations.getNewConvId(); this.viewingConvId = Conversations.getNewConvId();
this.fetchMessages(); this.fetchMessages();
chatScrollToBottom();
}, },
setViewingConv(convId) { setViewingConv(convId) {
if (this.isGenerating) return; if (this.isGenerating) return;
this.viewingConvId = convId; this.viewingConvId = convId;
this.fetchMessages(); this.fetchMessages();
chatScrollToBottom();
}, },
deleteConv(convId) { deleteConv(convId) {
if (this.isGenerating) return; if (this.isGenerating) return;
@ -280,9 +287,7 @@
this.fetchMessages(); this.fetchMessages();
this.pendingMsg = null; this.pendingMsg = null;
this.isGenerating = false; this.isGenerating = false;
setTimeout(() => { setTimeout(() => document.getElementById('msg-input').focus(), 1);
document.getElementById('msg-input').focus();
}, 1);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
alert(error); alert(error);