starred/minne
1
0
Fork 0
mirror of https://github.com/perstarkse/minne.git synced 2026-04-27 11:17:03 +02:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: site wide sidebar

Browse Source
This commit is contained in:
Per Stark
2025-04-22 11:58:54 +02:00
parent 0185607384
commit 0d2162e796
16 changed files with 348 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
html-router/templates/chat/base.html
View File

@@ -1,42 +1,18 @@
{% extends 'body_base.html' %}
{% block title %} Minne Chat {% endblock %}
{% block title %}Minne Chat{% endblock %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="/assets/marked.min.js"></script>
<script src="/assets/htmx-ext-sse.js" defer></script>
{% endblock %}
{% block main %}
<div class="drawer xl:drawer-open h-[calc(100vh-65px)] overflow-auto">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<!-- Drawer Content -->
<div class="drawer-content flex justify-center ">
<main class="flex justify-center grow mt-2 sm:mt-4 gap-6 mb-10 max-w-3xl w-full absolute left-0 right-0 mx-auto">
<div class="relative w-full">
{% include "chat/history.html" %}
{% include "chat/new_message_form.html" %}
</div>
</main>
<div class="flex justify-center mt-2 sm:mt-4 mb-10">
<div class="max-w-3xl w-full overflow-auto hide-scrollbar">
{% include "chat/history.html" %}
{% include "chat/new_message_form.html" %}
</div>
<!-- Drawer Sidebar -->
{% include "chat/drawer.html" %}
</div>
<style>
/* Custom styles to override DaisyUI defaults */
.drawer-content {
width: 100%;
padding: 0;
}
.drawer-side {
z-index: 20;
/* Ensure drawer is above content */
}
@media (min-width: 1280px) {
.drawer-open .drawer-content {
margin-left: 0;
}
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
@@ -111,10 +87,12 @@
}
</style>
<script>
marked.setOptions({
breaks: true, gfm: true, headerIds: false, mangle: false,
smartLists: true, smartypants: true, xhtml: false
});
function initialize() {
marked.setOptions({
breaks: true, gfm: true, headerIds: false, mangle: false,
smartLists: true, smartypants: true, xhtml: false
});
}
// Render static markdown (any .markdown-content[data-content])
function renderStaticMarkdown() {
@@ -125,11 +103,14 @@
}
function scrollChatToBottom() {
console.log("scrolling chat");
const chatContainer = document.getElementById('chat_container');
console.log(chatContainer);
if (chatContainer) chatContainer.scrollTop = chatContainer.scrollHeight;
}
function processChatUi() {
initialize();
renderStaticMarkdown();
scrollChatToBottom();
}

44
html-router/templates/chat/drawer.html
View File

@@ -1,44 +0,0 @@
<div class="drawer-side z-50 max-h-[calc(100vh-65px)]">
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 text-base-content w-72 ">
<!-- Sidebar content here -->
<li class=" mt-4 cursor-pointer "><a href=" /chat" hx-boost="true" class="flex justify-between">Create new
chat<span>{% include
"icons/edit_icon.html" %}
</span></a></li>
<div class="divider"></div>
{% for conversation in conversation_archive %}
{% if edit_conversation_id == conversation.id %}
<!-- Render the editable title form variant -->
<li class="align-center" id="conversation-{{ conversation.id }}">
<form hx-patch="/chat/{{ conversation.id }}/title" hx-target=".drawer-side" hx-swap="outerHTML"
class="flex items-center gap-2">
<input type="text" name="title" value="{{ conversation.title }}" class="input input-sm" />
<button type="submit">{% include "icons/check_icon.html" %}
</button>
<button type="button" hx-get="/chat/sidebar" hx-target=".drawer-side" hx-swap="outerHTML">{% include
"icons/x_icon.html" %}
</button>
</form>
</li>
{% else %}
<!-- Render the normal view mode conversation item -->
<li class="align-center" id="conversation-{{ conversation.id }}">
<div class="justify-between">
<a href="/chat/{{ conversation.id }}" hx-boost="true">
{{ conversation.title }} - {{ conversation.created_at | datetimeformat(format="short", tz=user.timezone) }}
</a>
<div class="flex gap-0.5">
<button hx-get="/chat/{{ conversation.id }}/title" hx-target=".drawer-side" hx-swap="outerHTML">
{% include "icons/edit_icon.html" %}
</button>
<button hx-delete="/chat/{{ conversation.id }}" hx-target=".drawer-side" hx-swap="outerHTML">
{% include "icons/delete_icon.html" %}
</button>
</div>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>

2
html-router/templates/chat/history.html
View File

@@ -1,4 +1,4 @@
<div id="chat_container" class="pl-3 overflow-y-auto h-[calc(100vh-155px)] hide-scrollbar">
<div id="chat_container" class="pl-3 overflow-y-auto h-[calc(100vh-170px)] sm:h-[calc(100vh-190px)] hide-scrollbar">
{% for message in history %}
{% if message.role == "AI" %}
<div class="chat chat-start">

9
html-router/templates/chat/new_message_form.html
View File

@@ -1,15 +1,12 @@
<div class="fixed w-full mx-auto max-w-3xl p-0 pb-0 sm:pb-4 left-0 right-0 bottom-0 bg-base-100 z-10">
<div class="fixed w-full mx-auto max-w-3xl p-0 pb-0 sm:pb-4 left-0 right-0 bottom-0 z-10">
<form hx-post="{% if conversation %} /chat/{{conversation.id}} {% else %} /chat {% endif %}"
hx-target="#chat_container" hx-swap="beforeend" class="relative flex gap-2" id="chat-form">
<textarea autofocus required name="content" placeholder="Type your message..." rows="2"
class="textarea textarea-ghost rounded-2xl rounded-b-none h-24 sm:rounded-b-2xl pr-8 bg-base-200 flex-grow resize-none"
class="textarea textarea-ghost rounded-2xl rounded-b-none h-24 sm:rounded-b-2xl pr-8 bg-base-200 flex-grow resize-none focus:outline-none focus:bg-base-200"
id="chat-input"></textarea>
<button type="submit" class="absolute p-2 cursor-pointer right-0.5 btn-ghost btn-sm top-1">{% include
<button type="submit" class="absolute p-2 cursor-pointer right-0.5 btn-ghost btn-sm top-6">{% include
"icons/send_icon.html" %}
</button>
<label for="my-drawer-2" class="absolute cursor-pointer top-9 right-0.5 p-2 drawer-button xl:hidden z-20 ">
{% include "icons/hamburger_icon.html" %}
</label>
</form>
</div>