3 files changed, 58 insertions, 12 deletions

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index 3c428f38..a2f883d9 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -32,10 +32,10 @@
     <script type="module" src="https://cdn.jsdelivr.net/npm/mistral-tokenizer-js" async>
         import mistralTokenizer from "mistral-tokenizer-js"
     </script>
-    <script type="module" src="https://belladoreai.github.io/llama-tokenizer-js/llama-tokenizer.js" async>
+    <script type="module" src="https://cdn.jsdelivr.net/gh/belladoreai/llama-tokenizer-js@master/llama-tokenizer.js" async>
         import llamaTokenizer from "llama-tokenizer-js"
     </script>
-    <script src="https://unpkg.com/gpt-tokenizer/dist/cl100k_base.js" async></script>
+    <script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/cl100k_base.js" async></script>
     <script src="/static/js/text_to_speech/index.js" async></script>
     <!--
             <script src="/static/js/whisper-web/index.js" async></script>
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 200a79d4..e8ed0a6f 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -265,6 +265,14 @@ body {
     padding-bottom: 0;
 }
 
+.message.print {
+    height: 100%;
+    position: absolute;
+    background-color: #fff;
+    z-index: 100;
+    top: 0;
+}
+
 .message.regenerate {
     opacity: 0.75;
 }
@@ -339,14 +347,14 @@ body {
     flex-wrap: wrap;
 }
 
-.message .content,
-.message .content a:link,
-.message .content a:visited{
+.message .content_inner,
+.message .content_inner a:link,
+.message .content_inner a:visited{
     font-size: 15px;
     line-height: 1.3;
     color: var(--colour-3);
 }
-.message .content pre{
+.message .content_inner pre{
     white-space: pre-wrap;
 }
 
@@ -389,19 +397,19 @@ body {
 
 .message .count .fa-clipboard,
 .message .count .fa-volume-high,
-.message .count .fa-rotate {
+.message .count .fa-rotate,
+.message .count .fa-print {
     z-index: 1000;
     cursor: pointer;
 }
 
-.message .count .fa-clipboard {
+.message .count .fa-clipboard,
+.message .count .fa-whatsapp {
     color: var(--colour-3);
 }
 
-.message .count .fa-clipboard.clicked {
-    color: var(--accent);
-}
-
+.message .count .fa-clipboard.clicked,
+.message .count .fa-print.clicked,
 .message .count .fa-volume-high.active {
     color: var(--accent);
 }
@@ -1121,4 +1129,18 @@ a:-webkit-any-link {
     50% {
         opacity: 0;
     }
+}
+
+@media print {
+    #systemPrompt:placeholder-shown,
+    .conversations,
+    .conversation .user-input,
+    .conversation .buttons,
+    .conversation .toolbar,
+    .conversation .slide-systemPrompt,
+    .message .count i,
+    .message .assistant,
+    .message .user {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 47bfdd3b..9790b261 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -192,6 +192,26 @@ const register_message_buttons = async () => {
             })
         }
     });
+    document.querySelectorAll(".message .fa-whatsapp").forEach(async (el) => {
+        if (!el.parentElement.href) {
+            const text = el.parentElement.parentElement.parentElement.innerText;
+            el.parentElement.href = `https://wa.me/?text=${encodeURIComponent(text)}`;
+        }
+    });
+    document.querySelectorAll(".message .fa-print").forEach(async (el) => {
+        if (!("click" in el.dataset)) {
+            el.dataset.click = "true";
+            el.addEventListener("click", async () => {
+                const message_el = el.parentElement.parentElement.parentElement;
+                el.classList.add("clicked");
+                message_box.scrollTop = 0;
+                message_el.classList.add("print");
+                setTimeout(() => el.classList.remove("clicked"), 1000);
+                setTimeout(() => message_el.classList.remove("print"), 1000);
+                window.print()
+            })
+        }
+    });
 }
 
 const delete_conversations = async () => {
@@ -253,6 +273,8 @@ const handle_ask = async () => {
                     ${count_words_and_tokens(message, get_selected_model())}
                     <i class="fa-solid fa-volume-high"></i>
                     <i class="fa-regular fa-clipboard"></i>
+                    <a><i class="fa-brands fa-whatsapp"></i></a>
+                    <i class="fa-solid fa-print"></i>
                 </div>
             </div>
         </div>
@@ -625,6 +647,8 @@ const load_conversation = async (conversation_id, scroll=true) => {
                         ${count_words_and_tokens(item.content, next_provider?.model)}
                         <i class="fa-solid fa-volume-high"></i>
                         <i class="fa-regular fa-clipboard"></i>
+                        <a><i class="fa-brands fa-whatsapp"></i></a>
+                        <i class="fa-solid fa-print"></i>
                     </div>
                 </div>
             </div>