| 1 | <html> |
| 2 | <head> |
| 3 | <script type="module"> |
| 4 | import { store } from "/components/chat/input/input-store.js"; |
| 5 | </script> |
| 6 | </head> |
| 7 | <body> |
| 8 | <template x-if="$store.chatInput"> |
| 9 | <div class="text-buttons-row chat-bottom-actions-bar"> |
| 10 | <x-extension id="chat-input-bottom-actions-start"></x-extension> |
| 11 | <button type="button" class="text-button" @click="$store.chatInput.pauseAgent(!$store.chatInput.paused)"> |
| 12 | <template x-if="!$store.chatInput.paused"> |
| 13 | <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="14" height="14" aria-hidden="true"> |
| 14 | <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path> |
| 15 | </svg> |
| 16 | </template> |
| 17 | <template x-if="$store.chatInput.paused"> |
| 18 | <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="14" height="14" aria-hidden="true"> |
| 19 | <path d="M8 5v14l11-7z"></path> |
| 20 | </svg> |
| 21 | </template> |
| 22 | <span x-text="$store.chatInput.paused ? 'Resume Agent' : 'Pause Agent'"></span> |
| 23 | </button> |
| 24 | |
| 25 | <button type="button" class="text-button" id="nudges_window" @click="$store.chatInput.nudge()"> |
| 26 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 58" fill="currentColor" width="14" height="14" aria-hidden="true"> |
| 27 | <path d="m11.97,16.32c-.46,0-.91-.25-1.15-.68-.9-1.63-1.36-3.34-1.36-5.1C9.45,4.73,14.18,0,20,0s10.55,4.73,10.55,10.55c0,.87-.13,1.75-.41,2.76-.19.7-.9,1.13-1.62.93-.7-.19-1.12-.92-.93-1.62.21-.79.31-1.44.31-2.07,0-4.36-3.55-7.91-7.91-7.91s-7.91,3.55-7.91,7.91c0,1.3.35,2.59,1.03,3.82.36.64.13,1.44-.51,1.79-.21.11-.42.17-.64.17Z" stroke-width="0.5" stroke="currentColor"/> |
| 28 | <path d="M34.5,58h-6.18c-3.17,0-6.15-1.23-8.39-3.47L1.16,35.75c-1.54-1.54-1.54-4.05,0-5.59,2.4-2.4,6.27-2.68,8.99-.64l4.58,3.44V10.55c0-2.91,2.36-5.27,5.27-5.27s5.27,2.36,5.27,5.27v8.62c.78-.45,1.68-.71,2.64-.71,2.3,0,4.26,1.48,4.98,3.53.84-.56,1.85-.89,2.93-.89,2.3,0,4.26,1.48,4.98,3.53.84-.56,1.85-.89,2.93-.89,2.91,0,5.27,2.36,5.27,5.27v14.5c0,8-6.51,14.5-14.5,14.5ZM6.03,30.79c-1.1,0-2.19.42-3.01,1.23-.51.51-.51,1.35,0,1.86l18.77,18.78c1.74,1.74,4.06,2.7,6.53,2.7h6.18c6.54,0,11.86-5.32,11.86-11.86v-14.5c0-1.45-1.18-2.64-2.64-2.64s-2.64,1.18-2.64,2.64v1.32c0,.73-.59,1.32-1.32,1.32s-1.32-.59-1.32-1.32v-3.95c0-1.45-1.18-2.64-2.64-2.64s-2.64,1.18-2.64,2.64v3.95c0,.73-.59,1.32-1.32,1.32s-1.32-.59-1.32-1.32v-6.59c0-1.45-1.18-2.64-2.64-2.64s-2.64,1.18-2.64,2.64v6.59c0,.73-.59,1.32-1.32,1.32s-1.32-.59-1.32-1.32V10.55c0-1.45-1.18-2.64-2.64-2.64s-2.64,1.18-2.64,2.64v25.05c0,.5-.28.95-.73,1.18s-.98.18-1.38-.12l-6.69-5.02c-.75-.56-1.65-.84-2.54-.84Z" stroke-width="0.5" stroke="currentColor"/> |
| 29 | </svg> |
| 30 | <p>Nudge</p> |
| 31 | </button> |
| 32 | <x-extension id="chat-input-bottom-actions-end"></x-extension> |
| 33 | </div> |
| 34 | </template> |
| 35 | |
| 36 | <style> |
| 37 | .text-buttons-row { |
| 38 | width: 100%; |
| 39 | display: flex; |
| 40 | flex-wrap: wrap; |
| 41 | gap: var(--spacing-xs); |
| 42 | padding-top: var(--spacing-xs); |
| 43 | margin-left: var(--spacing-xs); |
| 44 | } |
| 45 | .text-buttons-row > x-extension:not(:empty) { display: contents; } |
| 46 | .text-buttons-row > x-extension:empty { display: none; } |
| 47 | .text-buttons-row > x-extension > x-component, |
| 48 | .text-buttons-row > x-extension > x-component > div[x-data] { display: contents; } |
| 49 | .text-button { |
| 50 | background-color: transparent; |
| 51 | border: none; |
| 52 | border-radius: 5px; |
| 53 | color: var(--color-text); |
| 54 | font-family: "Rubik", Arial, Helvetica, sans-serif; |
| 55 | font-size: 0.6rem; |
| 56 | padding: 6px var(--spacing-sm); |
| 57 | cursor: pointer; |
| 58 | opacity: 0.8; |
| 59 | transition: all 0.3s; |
| 60 | display: flex; |
| 61 | align-items: center; |
| 62 | gap: var(--spacing-xs); |
| 63 | } |
| 64 | .text-button:hover:not(:disabled) { |
| 65 | opacity: 1; |
| 66 | background-color: var(--color-background-hover); |
| 67 | border-radius: 4px; |
| 68 | } |
| 69 | .text-button:active:not(:disabled) { opacity: 0.5; } |
| 70 | .text-button:disabled { |
| 71 | opacity: 0.4; |
| 72 | cursor: not-allowed; |
| 73 | } |
| 74 | .text-button svg { |
| 75 | width: 14px; |
| 76 | height: 14px; |
| 77 | flex-shrink: 0; |
| 78 | } |
| 79 | .text-button p { margin-block: 0; } |
| 80 | |
| 81 | @media (max-width: 768px) { |
| 82 | .text-buttons-row { |
| 83 | width: 90%; |
| 84 | white-space: pre-wrap; |
| 85 | } |
| 86 | .text-button svg { width: 18px; height: 18px; } |
| 87 | } |
| 88 | @media (max-width: 640px) { |
| 89 | .text-buttons-row { |
| 90 | width: 90%; |
| 91 | white-space: pre-wrap; |
| 92 | } |
| 93 | .text-button { max-height: 25px; } |
| 94 | .text-button p { display: none; } |
| 95 | } |
| 96 | </style> |
| 97 | </body> |
| 98 | </html> |