Update chatbox design and add send icon SVG file (#461)

* feat: Add send icon SVG file * chore: Update chatbox header and footer design * feat: Update chatbox design and add send icon SVG file * fix: Adjust position of video overlay to left side * chore: Adjust position of chatbox and update CSS styles * chore: Update chatbox header to display user's name * chore: Update chatbox header and footer design * Add close-icon.svg file * refactor: Improve chatbox textarea resizing This commit improves the resizing behavior of the chatbox textarea. Previously, the textarea would resize vertically as the user typed, but it would not reset to its original height after sending a message. This commit fixes that issue by resetting the height of the textarea to "auto" after sending a message. Co-authored-by: John Solly <[email protected]> * refactor: Increase chatbox height for better user experience This commit increases the height of the chatbox in the main.css file to improve the user experience. The chatbox height was increased from 500px to 550px to provide more space for messages. This change ensures that users have enough room to view and interact with the chatbox comfortably. Co-authored-by: John Solly <[email protected]> * refactor: Update chatbox UI for better user experience * refactor: Update chatbox UI for better user experience * reduce textarea font size to 0.9em * refactor: Update chatbox UI for better user experience * refactor: Update chatbox UI for better user experience * refactor: Update chatbox UI for better user experience * Add styling for close button in chatbox header. * refactor: Update chatbox UI for better user experience * refactor: Adjust opacity of textarea placeholder in main.css This commit adjusts the opacity of the textarea placeholder in the main.css file. The opacity was changed from 0 to 0.3 to provide a subtle hint to the user that the textarea is a placeholder. This change improves the user experience by making the placeholder text more visible. Co-authored-by: John Solly <[email protected]> * refactor: Update chatbox UI for better user experience --------- Co-authored-by: John Solly <[email protected]>
jsolly · Sep 9, 2024 · 545a690 · 545a690
1 parent 9196124
commit 545a690
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 123 deletions.
diff --git a/app/blog/templates/blog/parts/chatbox.html b/app/blog/templates/blog/parts/chatbox.html
@@ -7,27 +7,54 @@
                     <img src="{% static 'svg/man-avatar.svg' %}" alt="Ezra's avatar">
                 </div>
                 <div class="chatbox__content--header">
-                    <p class="chatbox__heading--header">Ask a Question</p>
-                    <p class="chatbox__description--header">Hi, I'm Ezra! I can answer questions about any blog post on
-                        this site!</p>
+                    <p class="chatbox__heading--header">Ezra</p>
+                    <p class="chatbox__time--header"> {% now "jS F Y" %} </p>
                 </div>
+                <div class="chatbox__close--header">
+                    <button aria-label="Close chatbox">
+                        <svg width="40" height="40" viewBox="0 0 1024 1024" version="1.1"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <div class="chatbox__messages">
+                <div class="messages__item messages__item--bot"> I can answer questions about any blog post on this
+                    site! </div>
+                <div class="messages__item messages__item--bot"> Hi, I'm Ezra! </div>
             </div>
-            <div class="chatbox__messages"></div>
             <div class="chatbox__footer">
                 <form id="chatbox-submit">
                     {% csrf_token %}
-                    <textarea name="question-text-area" id="question-text-area" placeholder="Write a message..."
-                        hx-trigger="keyup[key === 'Enter' && !shiftKey]" hx-post="/answer-with-gpt/"
-                        hx-include="#question-text-area" hx-target=".chatbox__messages" hx-swap="afterbegin"></textarea>
-                    <button class="chatbox__send--footer send__button" hx-post="/answer-with-gpt/"
-                        hx-include="#question-text-area" hx-target=".chatbox__messages" hx-swap="afterbegin"
-                        aria-label="Send message">Send</button>
+                    <div class="chatbox__input-container">
+                        <textarea name="question-text-area" id="question-text-area" placeholder="Send a message..."
+                            hx-trigger="keyup[key === 'Enter' && !shiftKey]" hx-post="/answer-with-gpt/"
+                            hx-include="#question-text-area" hx-target=".chatbox__messages"
+                            hx-swap="afterbegin"></textarea>
+                        <button class="chatbox__send--footer send__button" hx-post="/answer-with-gpt/"
+                            hx-include="#question-text-area" hx-target=".chatbox__messages" hx-swap="afterbegin"
+                            aria-label="Send message">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 256 256">
+                                <g transform="translate(1.41 1.41) scale(2.81 2.81)">
+                                    <path
+                                        d="M 89.999 3.075 C 90 3.02 90 2.967 89.999 2.912 c -0.004 -0.134 -0.017 -0.266 -0.038 -0.398 c -0.007 -0.041 -0.009 -0.081 -0.018 -0.122 c -0.034 -0.165 -0.082 -0.327 -0.144 -0.484 c -0.018 -0.046 -0.041 -0.089 -0.061 -0.134 c -0.053 -0.119 -0.113 -0.234 -0.182 -0.346 C 89.528 1.382 89.5 1.336 89.469 1.29 c -0.102 -0.147 -0.212 -0.288 -0.341 -0.417 c -0.13 -0.13 -0.273 -0.241 -0.421 -0.344 c -0.042 -0.029 -0.085 -0.056 -0.129 -0.082 c -0.118 -0.073 -0.239 -0.136 -0.364 -0.191 c -0.039 -0.017 -0.076 -0.037 -0.116 -0.053 c -0.161 -0.063 -0.327 -0.113 -0.497 -0.147 c -0.031 -0.006 -0.063 -0.008 -0.094 -0.014 c -0.142 -0.024 -0.285 -0.038 -0.429 -0.041 C 87.03 0 86.983 0 86.936 0.001 c -0.141 0.003 -0.282 0.017 -0.423 0.041 c -0.035 0.006 -0.069 0.008 -0.104 0.015 c -0.154 0.031 -0.306 0.073 -0.456 0.129 L 1.946 31.709 c -1.124 0.422 -1.888 1.473 -1.943 2.673 c -0.054 1.199 0.612 2.316 1.693 2.838 l 34.455 16.628 l 16.627 34.455 C 53.281 89.344 54.334 90 55.481 90 c 0.046 0 0.091 -0.001 0.137 -0.003 c 1.199 -0.055 2.251 -0.819 2.673 -1.943 L 89.815 4.048 c 0.056 -0.149 0.097 -0.3 0.128 -0.453 c 0.008 -0.041 0.011 -0.081 0.017 -0.122 C 89.982 3.341 89.995 3.208 89.999 3.075 z M 75.086 10.672 L 37.785 47.973 L 10.619 34.864 L 75.086 10.672 z M 55.136 79.381 L 42.027 52.216 l 37.302 -37.302 L 55.136 79.381 z"
+                                        fill="rgb(0,0,0)" stroke-linecap="round" />
+                                </g>
+                            </svg>
+                        </button>
+                    </div>
                 </form>
             </div>
+            <div class="chatbox__footer--small">
+                <p>Powered by <a href="https://blogthedata.com">Blogthedata</a></p>
+            </div>
         </div>
         <div class="chatbox__button">
-            <button aria-label="Toggle chatbox"><img id="chatbox-icon" src="{% static 'svg/chatbox-icon.svg' %}"
-                    alt="Chatbox icon" /></button>
+            <button aria-label="Toggle chatbox">
+                <img id="chatbox-icon" src="{% static 'svg/chatbox-icon.svg' %}" alt="Chatbox icon" />
+            </button>
         </div>
     </div>
 </div>