--- a/sat_templates/templates/bulma/chat/chat.html	Wed Jun 28 10:40:53 2023 +0200
+++ b/sat_templates/templates/bulma/chat/chat.html	Wed Jun 28 10:40:53 2023 +0200
@@ -1,7 +1,10 @@
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
 {% block title %}{{ target_jid }} - {{ super() }}{% endblock %}
 {% block body %}
-        {{ icon_defs("lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach", "paper-plane-empty", "doc", "download") }}
+    {{ icon_defs(
+    "lock-open", "lock-filled", "ok", "pencil", "dot-3", "share", "attach",
+    "paper-plane-empty", "doc", "download", "wrench", "eye"
+    ) }}
 
     {# TODO: this should be done in a more generic way in dialog module #}
     <div id="modal" class="modal">

--- a/sat_templates/templates/bulma/chat/message.html	Wed Jun 28 10:40:53 2023 +0200
+++ b/sat_templates/templates/bulma/chat/message.html	Wed Jun 28 10:40:53 2023 +0200
@@ -39,6 +39,11 @@
             <p class="msg_body has-whitespace-pre-wrap" id="msg_body_{{msg.id}}" style="margin: 0;">
             {{- msg.html or (msg.text|e|urlize|safe) -}}
             </p>
+
+            <div class="url-previews is-hidden">
+                <div class="icon-container"></div>
+            </div>
+
             <div id="actions_{{msg.id}}" class="level is-mobile actions mb-0">
                 <div class="level-right">
                     {#{{ icon('share', cls='icon is-small action-button', id='msg_share_{{msg.id}}') }} #}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/components/url_preview.html	Wed Jun 28 10:40:53 2023 +0200
@@ -0,0 +1,46 @@
+
+{% if url_preview %}
+
+<div id="url-preview" class="box m-2 url-preview has-background-light">
+  <div class="has-text-right">
+    <span class="tag is-dark is-rounded is-fullwidth-mobile has-text-centered-mobile mb-2">
+      {% trans %}Preview{% endtrans %}
+    </span>
+  </div>
+  <article class="media">
+    {% if url_preview.image %}
+      <figure class="media-left is-hidden-touch">
+        <p class="image is-64x64">
+          <img src="{{ url_preview.image }}" alt="">
+        </p>
+      </figure>
+    {% endif %}
+    <div class="media-content">
+      <div class="content">
+        {% if url_preview.image %}
+          <p class="is-hidden-desktop">
+            <img src="{{ url_preview.image }}" alt="" class="image is-64x64 mb-2">
+          </p>
+        {% endif %}
+        <p>
+          <strong><a href="{{ url_preview.url }}" class="has-text-dark">{{ url_preview.title }}</a></strong> <br>
+          {% if url_preview.author_name %}
+            <small>{% trans %}By{% endtrans %} <a href="{{ url_preview.author_url }}">{{ url_preview.author_name }}</a></small> <br>
+          {% endif %}
+          {{ url_preview.description }}
+        </p>
+
+      </div>
+    </div>
+  </article>
+{% if url_preview.html %}
+  <div class="url-preview-iframe-container">
+      <iframe class="url-preview-iframe" srcdoc="{{url_preview.html}}" frameborder="0" sandbox="{{'allow-scripts allow-same-origin' if url_preview.html_known}}"></iframe>
+  </div>
+{% endif %}
+
+  <footer class="content has-text-right">
+    <a href="{{ url_preview.provider_url }}" class="has-text-grey">{% trans %}source:{% endtrans %} {{ url_preview.provider_name }}</a>
+  </footer>
+</div>
+{% endif %}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/components/url_preview_control.html	Wed Jun 28 10:40:53 2023 +0200
@@ -0,0 +1,22 @@
+{% block url_preview %}
+<div class="notification is-info is-light m-5">
+    <div class="content">
+        <h4 class="title is-4">{% trans %}URL Preview{% endtrans %}</h4>
+        <p class="mb-4">{% trans %}To protect your privacy, we don't automatically fetch URL previews. If you want to preview this URL, just hit the "Fetch Preview" button. You can customize this preference in your settings.{% endtrans %}</p>
+        <div class="buttons">
+            <a class="button is-link action_go_to_settings" href="#">
+                <span class="icon">
+                    {{ icon('wrench') }}
+                </span>
+                <span>{% trans %}Go to Settings{% endtrans %}</span>
+            </a>
+            <button class="button is-primary action_fetch_preview">
+                <span class="icon">
+                    {{ icon('eye') }}
+                </span>
+                <span>{% trans %}Fetch Preview{% endtrans %}</span>
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock url_preview %}

--- a/sat_templates/templates/bulma/static/chat.css	Wed Jun 28 10:40:53 2023 +0200
+++ b/sat_templates/templates/bulma/static/chat.css	Wed Jun 28 10:40:53 2023 +0200
@@ -65,7 +65,27 @@
     height: 100%;
 }
 
-/* attachments */
+/* URL previews */
+
+.url-preview-iframe-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  background: #000;
+}
+
+.url-preview-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+/* Attachments */
 
 #attachments {
     opacity: 1;