libervia-web: libervia/web/pages/chat/_browser/__init_

comparison libervia/web/pages/chat/_browser/init.py @ 1625:698eaabfca0e

browser (chat): side/panel and keyword handling: - `dialog.Modal` can now be used with a `position` argument. The default `center` keeps the old behaviour of modal in the middle of the screen, while using one of the direction makes the modal appear from top/bottom/right/left with an animation. The closing cross has been removed in favor of clicking/touching any part outside of the modal. - A method to create mockup clones of elements is now used to make placeholders. It is used for the input panel in the main area when it is moved to a sub-panel modal, this way there is not element disappearing. - Clicking on a keyword now shows a sub-messages panel with all messages with this keyword, in a similar way as for threads. Writing a messages there will add the keyword automatically. - Sub-messages panel will auto-scroll when messages are added. rel 458

author	Goffi <goffi@goffi.org>
date	Fri, 06 Jun 2025 11:08:05 +0200
parents	fdb5689fb826
children	84e287565fab

comparison

equal deleted inserted replaced

-:fd421f1be8f5
+:698eaabfca0e
+from html import escape
 import json
 import re
 from typing import Callable
 import errors
 from javascript import pyobj2jsobj
 from js_modules import emoji_picker_element
 from js_modules.tippy_js import tippy as tippy_ori
 import popup
 from template import Template, safe
-from tools import is_touch_device, remove_ids
+from tools import is_touch_device, remove_ids, make_placeholder
 from loading import remove_loading_screen
 from jid_search import JidSearch
 from interpreter import Inspector
 from components import init_collapsible_cards
 )
 self.attachments_elt = document["attachments"]
 self.message_input = document["message_input_area"]
 # reply to/thread
-self.thread_panel_tpl = Template("chat/thread_panel.html")
+self.sub_messages_panel_tpl = Template("chat/sub_messages_panel.html")
 # current thread panel, if any.
-self.thread_panel = None
+self.sub_messages_panel = None
-self._reply_to = None
+# Method to call to check if a new message must be displayer in sub-messages
-self.thread_id = None
+# panel.
+self.sub_messages_check_cb: Callable|None = None
+self._reply_to: str|None = None
+self.thread_id: str|None = None
+self.keyword: str|None = None
 document["cancel_reply_btn"].bind(
 "click",
 lambda __: setattr(self, "reply_to", None)
 )
 # use `thead` property to modify.
 target_elt.classList.add(MODE_CLASS.format(new_mode))
 self.input_data.clear()
 @property
 def is_at_bottom(self):
-return (
+return self.is_elt_at_bottom(self.messages_elt)
-self.messages_elt.scrollHeight
-- self.messages_elt.scrollTop
-- self.messages_elt.clientHeight
-<= SCROLL_SENSITIVITY
-)
 @property
 def reply_to(self) -> dict|None:
 return self._reply_to
 f"Not message core found for message {message_elt['id']!r}."
 )
 else:
 message_core_elt.classList.add(SELECTED_THREAD_CLS)
+def is_elt_at_bottom(self, elt) -> bool:
+"""Tell is a scrollable elemement is scrolled down.
+There is a margin to check it set with SCROLL_SENSITIVITY.
+@param element: Scrollable element to check.
+@return: True if the element is as its bottom.
+"""
+return elt.scrollHeight - elt.scrollTop - elt.clientHeight <= SCROLL_SENSITIVITY
 def open_chat(self, entity_jid: str) -> None:
 """Change the current chat for the given one."""
 # For now we keep it simple and just load the new location.
 window.location = f"{chat_url}/{entity_jid}"
 if self.reply_to:
 extra["reply"] = self.reply_to
 if self.thread_id:
 extra["thread"] = self.thread_id
+if self.keyword:
+extra.setdefault("keywords", []).append(self.keyword)
 # now we send the message
 try:
 if self.input_mode == "edit":
 message_id = self.input_data["id"]
 if "thread" not in parent_message_elt.dataset:
 parent_message_elt.dataset["thread"] = thread_id
 # TODO: Regenerate parent message, so thread icon will appear.
 if (
-"thread" in extra
+self.sub_messages_check_cb is not None
-and self.thread_panel
+and self.sub_messages_panel is not None
-and self.thread_id
+and self.sub_messages_check_cb(extra)
-and extra["thread"] == self.thread_id
 ):
 # FIXME: This is quite fragile, IDs are removed, meaning that some listener
-#   may not be working correctly, and it's using #input-panel as reference,
+#   may not be working correctly,
-#   but in the future, it may not moved from main area the thread panel like
-#   that anymore.
 cloned_message_elt = message_elt.cloneNode(True)
 remove_ids(cloned_message_elt)
-thread_messages_elt = document["thread-messages"]
+sub_messages_elt = document["sub-messages"]
-thread_messages_elt.insertBefore(cloned_message_elt, document["input-panel"])
+is_at_bottom = self.is_elt_at_bottom(sub_messages_elt)
+sub_messages_elt.appendChild(cloned_message_elt)
+if is_at_bottom:
+sub_messages_elt.scrollTop = sub_messages_elt.scrollHeight
 # Check if user is viewing older messages or is at the bottom
 is_at_bottom = self.is_at_bottom
 self.messages_elt <= message_elt
 )
 # if evt.deltaY != 0:
 #     document["attachments"].scrollLeft += evt.deltaY * 0.8
 #     evt.preventDefault()
-async def on_show_thread(self, thread_id: str) -> None:
+async def show_filtered_messages(
-assert thread_id
+self,
-self.thread_id = thread_id
+filters: dict,
+sub_messages_panel_args: dict|None = None,
-thread_panel_elt = self.thread_panel_tpl.get_elt({
+sub_messages_check_cb: Callable[[dict], bool]|None = None
-"messages": []
+) -> None:
-})
+"""Show message matching a filter in a sub-messages panel.
-self.thread_panel = thread_panel_elt
-thread_messages_elt = thread_panel_elt.select_one("#thread-messages")
+A panel will slide-in from the right to show filtered messages.
-assert thread_messages_elt is not None
+@param filters: Filters to use in ``bridge.history_get``.
+@param sub_messages_panel_args: Args to use with sub_messages_panel template.
+@param sub_messages_check_cb: Method to call to check if a new message must go to
+the sub-messages panel. The method must return True if the message is to be
+displayed in the panel.
+"""
+if sub_messages_panel_args is None:
+sub_messages_panel_args = {}
+self.sub_messages_check_cb = sub_messages_check_cb
+sub_messages_panel_elt = self.sub_messages_panel_tpl.get_elt(
+sub_messages_panel_args
+)
+self.sub_messages_panel = sub_messages_panel_elt
+sub_messages_elt = sub_messages_panel_elt.select_one("#sub-messages")
+sub_messages_input_elt = sub_messages_panel_elt.select_one("#sub-messages-input")
+assert sub_messages_elt is not None
 history_data = await bridge.history_get(
-"", "", -2, True, {"thread_id": thread_id}
+"", "", -2, True, filters
 )
 for message_data in history_data:
 uid, timestamp, from_jid_s, to_jid_s, message_data, subject_data, mess_type, extra_s = message_data
 template_data = await self.message_to_template_data(
 uid,
 subject_data=subject_data,
 mess_type=mess_type,
 extra=json.loads(extra_s)
 )
 message_elt = self.message_tpl.get_elt(template_data)
-thread_messages_elt <= message_elt
+sub_messages_elt <= message_elt
-# FIXME: The whole input-panel is currently moved to the thread panel so listeners
+# FIXME: The whole input-panel is currently moved to the filtered messages panel
-#   don't have to be moved. At some point, it may be better to make a clone
+#   so listeners don't have to be moved. At some point, it may be better to make a
-#   (without the IDs) and to clone listeners too, this way a slide-in panel could
+#   clone (without the IDs) and to clone listeners too, this way a non-modal panel
-#   be used instead of a modal.
+#   could be used.
 input_panel_elt = document["input-panel"]
-thread_messages_elt <= input_panel_elt
+placeholder = make_placeholder(input_panel_elt)
+sub_messages_input_elt <= input_panel_elt
-def on_thread_panel_close():
+document["input-panel-area"].appendChild(placeholder)
-document["input-panel-area"].appendChild(input_panel_elt)
+def on_sub_messages_panel_close():
+placeholder.replaceWith(input_panel_elt)
 self.thread_id = None
-self.thread_panel = None
+self.keyword = None
+self.sub_messages_panel = None
-thread_modal = dialog.Modal(
+self.sub_messages_check_cb = None
-thread_panel_elt,
+sub_messages_modal = dialog.Modal(
+sub_messages_panel_elt,
 closable=True,
-close_cb=on_thread_panel_close
+close_cb=on_sub_messages_panel_close,
-)
+position="right"
-thread_modal.show()
+)
+sub_messages_modal.show()
+async def on_show_thread(self, thread_id: str) -> None:
+assert thread_id
+self.thread_id = thread_id
+def sub_messages_check_cb(extra: dict) -> bool:
+return bool(
+self.thread_id
+and "thread" in extra
+and extra["thread"] == self.thread_id
+)
+await self.show_filtered_messages(
+{"thread_id": thread_id},
+{"title": "Thread view"},
+sub_messages_check_cb
+)
+async def _on_keyword_click(self, keyword_elt) -> None:
+self.keyword = keyword_elt.text
+def sub_messages_check_cb(extra: dict) -> bool:
+return self.keyword in extra.get("keywords", [])
+await self.show_filtered_messages(
+{"keyword": self.keyword},
+{"title": f"🏷 Label view: {self.keyword}."},
+sub_messages_check_cb
+)
 async def get_message_tuple(self, message_elt) -> tuple|None:
 """Retrieve message tuple from as sent by [message_new]
 thread_icon_elt.bind(
 "click",
 lambda __, thread_id=thread_id: aio.run(self.on_show_thread(thread_id))
 )
+## keywords
+for keyword_elt in parent_elt.select(".message-keyword"):
+keyword_elt.bind(
+"click",
+lambda __, keyword_elt=keyword_elt: aio.run(
+self._on_keyword_click(keyword_elt)
+)
+)
 def add_reactions_listeners(self, parent_elt=None) -> None:
 """Add listener on reactions to handle details and reaction toggle"""
 if parent_elt is None:
 parent_elt = document

Mercurial > libervia-web

comparison libervia/web/pages/chat/_browser/__init__.py @ 1625:698eaabfca0e

comparison libervia/web/pages/chat/_browser/init.py @ 1625:698eaabfca0e