Spaces:
Running
Running
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store } from "/components/chat/input/input-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <template x-if="$store.chatInput"> | |
| <div class="text-buttons-row chat-bottom-actions-bar"> | |
| <x-extension id="chat-input-bottom-actions-start"></x-extension> | |
| <button type="button" class="text-button" @click="$store.chatInput.pauseAgent(!$store.chatInput.paused)"> | |
| <template x-if="!$store.chatInput.paused"> | |
| <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"> | |
| <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path> | |
| </svg> | |
| </template> | |
| <template x-if="$store.chatInput.paused"> | |
| <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"> | |
| <path d="M8 5v14l11-7z"></path> | |
| </svg> | |
| </template> | |
| <span x-text="$store.chatInput.paused ? 'Resume Agent' : 'Pause Agent'"></span> | |
| </button> | |
| <button type="button" class="text-button" id="nudges_window" @click="$store.chatInput.nudge()"> | |
| <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"> | |
| <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"/> | |
| <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"/> | |
| </svg> | |
| <p>Nudge</p> | |
| </button> | |
| <x-extension id="chat-input-bottom-actions-end"></x-extension> | |
| </div> | |
| </template> | |
| <style> | |
| .text-buttons-row { | |
| width: 100%; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--spacing-xs); | |
| padding-top: var(--spacing-xs); | |
| margin-left: var(--spacing-xs); | |
| } | |
| .text-buttons-row > x-extension:not(:empty) { display: contents; } | |
| .text-buttons-row > x-extension:empty { display: none; } | |
| .text-buttons-row > x-extension > x-component, | |
| .text-buttons-row > x-extension > x-component > div[x-data] { display: contents; } | |
| .text-button { | |
| background-color: transparent; | |
| border: none; | |
| border-radius: 5px; | |
| color: var(--color-text); | |
| font-family: "Rubik", Arial, Helvetica, sans-serif; | |
| font-size: 0.6rem; | |
| padding: 6px var(--spacing-sm); | |
| cursor: pointer; | |
| opacity: 0.8; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| } | |
| .text-button:hover:not(:disabled) { | |
| opacity: 1; | |
| background-color: var(--color-background-hover); | |
| border-radius: 4px; | |
| } | |
| .text-button:active:not(:disabled) { opacity: 0.5; } | |
| .text-button:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .text-button svg { | |
| width: 14px; | |
| height: 14px; | |
| flex-shrink: 0; | |
| } | |
| .text-button p { margin-block: 0; } | |
| @media (max-width: 768px) { | |
| .text-buttons-row { | |
| width: 90%; | |
| white-space: pre-wrap; | |
| } | |
| .text-button svg { width: 18px; height: 18px; } | |
| } | |
| @media (max-width: 640px) { | |
| .text-buttons-row { | |
| width: 90%; | |
| white-space: pre-wrap; | |
| } | |
| .text-button { max-height: 25px; } | |
| .text-button p { display: none; } | |
| } | |
| </style> | |
| </body> | |
| </html> | |