Fix/update styles in chatbot (#2196)

Fix/update styles in chatbot (#2196)



Co-authored-by: Heitor Carvalho <heitorado@users.noreply.github.com>
diff --git a/ankihub/templates/ai/chatbot.html b/ankihub/templates/ai/chatbot.html
index 6b3438d..a662854 100644
--- a/ankihub/templates/ai/chatbot.html
+++ b/ankihub/templates/ai/chatbot.html
@@ -16,8 +16,8 @@
 
     <main x-show="!showPreview" class="pb-1 flex flex-col justify-between w-full overflow-x-hidden">
         <header class="flex w-full bg-gray-100 dark:bg-gray-900">
-            <div class="container mx-auto px-6 py-2 flex items-center justify-between">
-                <div class="flex items-center">
+            <div class="{% if not is_on_anki %}container mx-auto{% endif %} px-6 py-2 flex flex-1 items-center justify-between">
+                <div class="flex flex-1 items-center">
                     <div class="w-11 h-11 flex items-center">
                         <picture >
                             <source media="(min-width: 800px)" srcset="{% static "images/robotking4x.png" %}">
@@ -33,13 +33,13 @@
             </div>
         </header>
 
-        <div id="chatbot-chat-container" class="h-full px-6 mt-2 mb-32 w-full flex flex-col container mx-auto">
+        <div id="chatbot-chat-container" class="h-full px-6 mt-2 mb-32 w-full flex flex-col {% if not is_on_anki %}container{% endif %} mx-auto">
 
             {% include 'ai/partials/chatbot_related_sources_template.html' with deck=deck note_sources=note_sources %}
 
             <template id="question-template">
                 <div class="user-question flex px-2 items-end mb-3">
-                    <div class="text-base text-gray-800 dark:text-gray-200 bg-indigo-50 dark:bg-indigo-950 mr-3 w-full flex flex-col py-3 px-4 rounded-tr-[20px] rounded-tl-[20px] rounded-bl-[20px]">
+                    <div class="text-base text-gray-800 dark:text-gray-200 bg-indigo-50 dark:bg-indigo-950 mr-3 flex-1 flex flex-col py-3 px-4 rounded-tr-[20px] rounded-tl-[20px] rounded-bl-[20px]">
                         <h4 class="mb-2 font-extrabold text-indigo-600 dark:text-indigo-400">QUESTION</h4>
                         <span class="question-content"></span>
                     </div>
@@ -51,7 +51,7 @@
 
             <template id="answer-template">
                 <div class="bot-answer flex flex-row-reverse px-2 mb-3 items-end">
-                    <div class="text-base text-gray-800 dark:text-gray-200 bg-purple-50 dark:bg-purple-950 ml-3 w-full flex flex-col py-3 px-4 rounded-tr-[20px] rounded-tl-[20px] rounded-br-[20px]">
+                    <div class="text-base text-gray-800 dark:text-gray-200 bg-purple-50 dark:bg-purple-950 ml-3 flex flex-1 flex-col py-3 px-4 rounded-tr-[20px] rounded-tl-[20px] rounded-br-[20px]">
                         <h4 class="mb-2 font-extrabold text-purple-600 dark:text-purple-400 flex items-center">{% Icons icon="exclamation-triangle-solid" class="chatbot-not-found-answer-icon mr-1 h-6 w-6 text-purple-600 dark:text-purple-400 hidden" %}ANSWER</h4>
                         <div class="flex flex-col">
                             <div class="loading-dots flex items-center space-x-1 animate-pulse">
@@ -80,7 +80,7 @@
 
     {% include "./partials/note_preview.html" %}
 
-    <footer class="fixed bottom-0 w-full flex flex-col container mx-auto">
+    <footer class="fixed bottom-0 w-full flex flex-col {% if not is_on_anki %}container{% endif %} mx-auto">
         <div class="bg-white dark:bg-gray-950 w-full flex flex-col px-8 py-1">
             <form x-show="!showPreview" id="postForm" x-data="{ questionContent: '' }" @submit="questionContent = ''" :class="{ 'border border-indigo-600 dark:border-indigo-400': inputClicked }" class="flex items-center py-2 px-5 rounded-xl bg-gray-100 dark:bg-gray-900">
                 <label for="chatbot-user-input">
@@ -116,7 +116,6 @@
             updateNoteSuspensionStates(newState) {
                 this.state = newState;
                 this.computeIsAllRelatedNotesUnsuspended();
-                console.log(this.state)
             },
 
             refreshNoteSuspensionStates(){
diff --git a/ankihub/templates/ai/partials/chatbot_related_sources_template.html b/ankihub/templates/ai/partials/chatbot_related_sources_template.html
index af802e0..19c4e9b 100644
--- a/ankihub/templates/ai/partials/chatbot_related_sources_template.html
+++ b/ankihub/templates/ai/partials/chatbot_related_sources_template.html
@@ -2,9 +2,9 @@
     {% if note_embedding_sources %}
     <div class="related-sources border rounded-[20px] mx-2 py-2 px-4 mb-3 border-blue-300 dark:border-blue-700" x-data="{ viewMoreRelatedCards: false, sourcesSectionCollapsed: false }">
         <div class="flex justify-between py-1.5">
-            <div class="flex items-center">
-                {% Icons icon="document-plus" class="h-4 w-4 mr-1 text-blue-900 dark:text-blue-100" %}
-                <div class="flex items-baseline">
+            <div class="flex sm:items-center">
+                {% Icons icon="document-plus" class="mt-1 sm:mt-0 h-4 w-4 mr-1 text-blue-900 dark:text-blue-100" %}
+                <div class="flex flex-col sm:flex-row items-baseline">
                     <p class="text-base font-bold mr-1 text-blue-900 dark:text-blue-100">Sources</p>
                     <p class="text-xs text-blue-900 dark:text-blue-100">(Related cards and resources)</p>
                 </div>
@@ -31,6 +31,7 @@
                 border-color: transparent transparent #1f2937 transparent; /* gray-800 */
                 z-index: 100;
             }
+
             .dark .dropdown-spike::after {
                 border-color: transparent transparent #f3f4f6 transparent; /* gray-200 */
             }
@@ -45,11 +46,11 @@
                     <div class="dropdown-spike hidden group-hover:block">
                         <div
                             id="related-note-source-card-dropdown-{{ note_embedding.note.id }}"
-                            hx-get="{% url "decks:get-note-cards" note_id=note_embedding.note.id %}?display=only_answer"
+                            hx-get="{% url 'decks:get-note-cards' note_id=note_embedding.note.id %}?display=only_answer"
                             hx-swap="innerHTML"
                             hx-trigger="intersect once"
                             hx-target="#related-note-source-card-dropdown-{{ note_embedding.note.id }}"
-                            class="z-[200] cursor-default absolute left-1/2 transform top -translate-x-1/2 w-72 h-80 overflow-y-auto py-3 px-2 rounded hidden group-hover:flex flex-col items-center justify-center bg-gray-800 dark:bg-gray-200 text-white dark:text-black mt-1 p-2 rounded-md shadow-lg opacity-0 group-hover:opacity-100"
+                            class="z-[200] cursor-default absolute {% if forloop.first %}left-[120%]{% elif forloop.last %}-left-[20%]{% else %}left-1/2{% endif %} sm:left-1/2 transform -translate-x-1/2 w-72 h-80 overflow-y-auto py-3 px-2 rounded hidden group-hover:flex flex-col items-center justify-center bg-gray-800 dark:bg-gray-200 text-white dark:text-black mt-1 p-2 rounded-md shadow-lg opacity-0 group-hover:opacity-100"
                         >
                             Loading...
                         </div>
@@ -67,11 +68,11 @@
                     <div class="dropdown-spike hidden group-hover:block">
                         <div
                             id="related-note-source-card-dropdown-{{ note_embedding.note.id }}"
-                            hx-get="{% url "decks:get-note-cards" note_id=note_embedding.note.id %}?display=only_answer"
+                            hx-get="{% url 'decks:get-note-cards' note_id=note_embedding.note.id %}?display=only_answer"
                             hx-swap="innerHTML"
                             hx-trigger="intersect once"
                             hx-target="#related-note-source-card-dropdown-{{ note_embedding.note.id }}"

[... diff too long, it was truncated ...]

GitHub
sha: 282e51cd1c54dc6e036e396e929e7d850b56833b