From 9c8332bee64ecf22c5ae55b53eddfc20e747226b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=CE=94BL=C3=98=20=E1=84=83=CE=9E?= <pabloce@poscye.com>
Date: Mon, 11 Sep 2023 00:43:10 -0500
Subject: [PATCH] UI: Code block fixes (#710)

* fix: code block bad typo and margin

* eslint

* lint

---------

Co-authored-by: pabl-o-ce <cye@poscye.com>
---
 web/src/app.css                       |  2 +-
 web/src/routes/chat/[id]/+page.svelte | 54 ++++++++++++---------------
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 0c0d391..dab1455 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -14,7 +14,7 @@
   padding: 4px;
   overflow-x: auto;
   overflow-wrap: break-word;
-  margin: 0.5rem 0;
+  margin: 0;
   width: auto;
 }
 
diff --git a/web/src/routes/chat/[id]/+page.svelte b/web/src/routes/chat/[id]/+page.svelte
index 2ca5b0a..ac91d3c 100644
--- a/web/src/routes/chat/[id]/+page.svelte
+++ b/web/src/routes/chat/[id]/+page.svelte
@@ -189,16 +189,7 @@
     if (!originalFenceRenderer)
       throw new Error("originalFenceRenderer is undefined");
     // Create copy button HTML
-    const copyButton = `<div class="tooltip tooltip-top absolute top-0.5 right-1" data-tip="copy">
-      <button class="btn btn-xs btn-square btn-ghost copy-button" data-clipboard-target="#${id}">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="12" height="12">
-          <path class="fill-base-content" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z">
-          </path>
-          <path class="fill-base-content" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
-            </path>
-        </svg>
-      </button>
-    </div>`;
+    const copyButton = `<div class="tooltip tooltip-top absolute top-0.5 right-1" data-tip="copy"><button class="btn btn-xs btn-square btn-ghost copy-button" data-clipboard-target="#${id}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="12" height="12"><path class="fill-base-content" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path class="fill-base-content" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button></div>`;
 
     const codeBlock = originalFenceRenderer(tokens, index, options, env, self)
       .replace(`<code `, `<code id="${id}"`)
@@ -443,28 +434,29 @@
                   {@html renderMarkdown(question.data.content)}
                 </div>
               </div>
-            </div>
-            {#if i === history.length - 1 && !isLoading}
-              <div style="width: 100%; text-align: right;">
-                <button
-                  disabled={isLoading}
-                  class="btn-ghost btn-sm btn"
-                  on:click|preventDefault={() => deletePrompt(data.chat.id, i)}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    height="16"
+              {#if i === history.length - 1 && !isLoading}
+                <div style="width: 100%; text-align: right;">
+                  <button
+                    disabled={isLoading}
+                    class="btn-ghost btn-sm btn"
+                    on:click|preventDefault={() =>
+                      deletePrompt(data.chat.id, i)}
                   >
-                    <path
-                      class="fill-base-content"
-                      d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            {/if}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      height="16"
+                    >
+                      <path
+                        class="fill-base-content"
+                        d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              {/if}
+            </div>
           </div>
         {:else if question.type === "ai"}
           <div class="w-11/12 mx-auto sm:w-10/12 chat chat-start py-4">