From: ebraminio <redacted>
Date: Mon, 13 Jan 2025 19:23:31 +0000 (+0330)
Subject: server : (UI) Improve messages bubble shape in RTL (#11220)
X-Git-Tag: upstream/0.0.4488~12
X-Git-Url: https://git.djapps.eu/?a=commitdiff_plain;h=504af20ee4eae72080a56d59d744f6774f7901ce;p=pkg%2Fggml%2Fsources%2Fllama.cpp

server : (UI) Improve messages bubble shape in RTL (#11220)

I simply have overlooked message bubble's tail placement for RTL
text as I use the dark mode and that isn't visible there and this
fixes it.
---

diff --git a/examples/server/public/index.html.gz b/examples/server/public/index.html.gz
index 489bff84..18f7ecac 100644
Binary files a/examples/server/public/index.html.gz and b/examples/server/public/index.html.gz differ
diff --git a/examples/server/webui/index.html b/examples/server/webui/index.html
index a76d831a..2180ef4a 100644
--- a/examples/server/webui/index.html
+++ b/examples/server/webui/index.html
@@ -245,10 +245,11 @@
       <div :class="{
         'chat-bubble markdown': true,
         'chat-bubble-base-300': msg.role !== 'user',
-      }" dir="auto">
+      }">
         <!-- textarea for editing message -->
         <template v-if="editingContent !== null">
           <textarea
+            dir="auto"
             class="textarea textarea-bordered bg-base-100 text-base-content w-[calc(90vw-8em)] lg:w-96"
             v-model="editingContent"></textarea>
           <br/>
@@ -259,7 +260,9 @@
           <!-- show loading dots for pending message -->
           <span v-if="msg.content === null" class="loading loading-dots loading-md"></span>
           <!-- render message as markdown -->
-          <vue-markdown v-else :source="msg.content"></vue-markdown>
+          <div v-else dir="auto">
+            <vue-markdown :source="msg.content"></vue-markdown>
+          </div>
           <!-- render timings if enabled -->
           <div class="dropdown dropdown-hover dropdown-top mt-2" v-if="timings && config.showTokensPerSecond">
             <div tabindex="0" role="button" class="cursor-pointer font-semibold text-sm opacity-60">Speed: {{ timings.predicted_per_second.toFixed(1) }} t/s</div>