You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
2.3 KiB
57 lines
2.3 KiB
{{ define "chat" }} |
|
<label for="chat-checkbox"> |
|
<div aria-label="Send message" id="start-chat"> |
|
|
|
<svg class="chat-bubble" width="32" height="32" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" |
|
fill="none" stroke="white" stroke-width="4"> |
|
<path |
|
d="M4 12C4 7.58 8.03 4 13 4h38c4.97 0 9 3.58 9 8v24c0 4.42-4.03 8-9 8H22l-12 12v-12H13c-4.97 0-9-3.58-9-8V12z" /> |
|
</svg> |
|
|
|
</div> |
|
</label> |
|
<input type="checkbox" name="chat-checkbox" id="chat-checkbox" class="chat-checkbox" /> |
|
<div class="chat"> |
|
<div id="chat-header"> |
|
<p class="chat-title">System Design Assistant</p> |
|
<p class="powered-by">Powered by AI</p> |
|
</div> |
|
<section id="messages"> |
|
<p class="me"> |
|
1 |
|
</p> |
|
<p class="other"> |
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem doloremque exercitationem, blanditiis |
|
obcaecati |
|
earum recusandae quia laudantium assumenda nihil mollitia velit eos molestias odio quasi facilis suscipit |
|
rem |
|
nulla sapiente ea voluptatum repudiandae dicta enim ut! Sed perferendis aliquid vel ad incidunt? In sit id |
|
voluptatibus fugit voluptates, architecto sequi. |
|
</p> |
|
<p class="me"> |
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex beatae vero sit delectus, rem totam molestias. |
|
Officia, suscipit error. Voluptatibus. |
|
</p> |
|
<div class="loading-indicator"> |
|
<div class="loading-dots"> |
|
<div class="loading-dot"></div> |
|
<div class="loading-dot"></div> |
|
<div class="loading-dot"></div> |
|
</div> |
|
<span>loading...</span> |
|
</div> |
|
</section> |
|
<footer> |
|
<textarea name="chat-message" placeholder="Type your message here..."></textarea> |
|
<button aria-label="Send message"> |
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" |
|
stroke="currentColor"> |
|
<path stroke-linecap="round" stroke-linejoin="round" |
|
d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /> |
|
</svg> |
|
</button> |
|
</footer> |
|
</div> |
|
|
|
|
|
{{ end }}
|
|
|