| 1 | <html> |
| 2 | <head> |
| 3 | <script type="module"> |
| 4 | import { store } from "/components/chat/input/input-store.js"; |
| 5 | import { store as attachmentsStore } from "/components/chat/attachments/attachmentsStore.js"; |
| 6 | import { store as historyStore } from "/components/modals/history/history-store.js"; |
| 7 | import { store as contextStore } from "/components/modals/context/context-store.js"; |
| 8 | import { store as chatsStore } from "/components/sidebar/chats/chats-store.js"; |
| 9 | import { store as mcpServersStore } from "/components/settings/mcp/client/mcp-servers-store.js"; |
| 10 | </script> |
| 11 | </head> |
| 12 | <body> |
| 13 | <template x-if="$store.chatInput"> |
| 14 | <div class="chat-bottom-actions-menu"> |
| 15 | <input |
| 16 | type="file" |
| 17 | x-ref="chatFileInput" |
| 18 | class="chat-bottom-menu-file-input" |
| 19 | accept="*" |
| 20 | multiple |
| 21 | @change="$store.chatAttachments.handleFileUpload($event); $store.chatInput.closeChatMoreMenu()" |
| 22 | > |
| 23 | <button |
| 24 | type="button" |
| 25 | class="chat-bottom-menu-item" |
| 26 | @click.stop="$refs.chatFileInput?.click()" |
| 27 | > |
| 28 | <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> |
| 29 | <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" /> |
| 30 | </svg> |
| 31 | <span>Attach files</span> |
| 32 | </button> |
| 33 | |
| 34 | <input |
| 35 | type="file" |
| 36 | x-ref="chatFolderInput" |
| 37 | class="chat-bottom-menu-file-input" |
| 38 | webkitdirectory |
| 39 | directory |
| 40 | multiple |
| 41 | @change="$store.chatAttachments.handleFileUpload($event); $store.chatInput.closeChatMoreMenu()" |
| 42 | > |
| 43 | <button |
| 44 | type="button" |
| 45 | class="chat-bottom-menu-item" |
| 46 | @click.stop="$refs.chatFolderInput?.click()" |
| 47 | > |
| 48 | <x-icon aria-hidden="true" name="drive_folder_upload"></x-icon> |
| 49 | <span>Attach folder</span> |
| 50 | </button> |
| 51 | |
| 52 | <button |
| 53 | type="button" |
| 54 | class="chat-bottom-menu-item" |
| 55 | @click="$store.mcpServersStore.openFromComposer($store.chats.selectedContext?.project?.name || ''); $store.chatInput.closeChatMoreMenu()" |
| 56 | > |
| 57 | <x-icon aria-hidden="true" name="hub"></x-icon> |
| 58 | <span>MCP Servers</span> |
| 59 | </button> |
| 60 | |
| 61 | <button |
| 62 | type="button" |
| 63 | class="chat-bottom-menu-item" |
| 64 | @click="$confirmClick($event, () => { $store.chats.resetChat(); $store.chatInput.closeChatMoreMenu() })" |
| 65 | :disabled="!$store.chats.selected" |
| 66 | > |
| 67 | <x-icon aria-hidden="true" name="delete_sweep"></x-icon> |
| 68 | <span>Clear Chat</span> |
| 69 | </button> |
| 70 | |
| 71 | <button |
| 72 | type="button" |
| 73 | class="chat-bottom-menu-item" |
| 74 | id="history_inspect" |
| 75 | @click="$store.history.open(); $store.chatInput.closeChatMoreMenu()" |
| 76 | :disabled="!$store.chats.selected" |
| 77 | > |
| 78 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="5 10 85 85" width="18" height="18" aria-hidden="true"> |
| 79 | <path fill="currentColor" d="m59.572,57.949c-.41,0-.826-.105-1.207-.325l-9.574-5.528c-.749-.432-1.21-1.231-1.21-2.095v-14.923c0-1.336,1.083-2.419,2.419-2.419s2.419,1.083,2.419,2.419v13.526l8.364,4.829c1.157.668,1.554,2.148.886,3.305-.448.776-1.261,1.21-2.097,1.21Zm30.427-7.947c0,10.684-4.161,20.728-11.716,28.283-6.593,6.59-15.325,10.69-24.59,11.544-1.223.113-2.448.169-3.669.169-7.492,0-14.878-2.102-21.22-6.068l-15.356,5.733c-.888.331-1.887.114-2.557-.556s-.887-1.669-.556-2.557l5.733-15.351c-4.613-7.377-6.704-16.165-5.899-24.891.854-9.266,4.954-17.998,11.544-24.588,7.555-7.555,17.6-11.716,28.285-11.716s20.73,4.161,28.285,11.716c7.555,7.555,11.716,17.599,11.716,28.283Zm-15.137-24.861c-13.71-13.71-36.018-13.71-49.728,0-11.846,11.846-13.682,30.526-4.365,44.417.434.647.53,1.464.257,2.194l-4.303,11.523,11.528-4.304c.274-.102.561-.153.846-.153.474,0,.944.139,1.348.41,13.888,9.315,32.568,7.479,44.417-4.365,13.707-13.708,13.706-36.014,0-49.723Zm-24.861-4.13c-15.989,0-28.996,13.006-28.996,28.992s13.008,28.992,28.996,28.992c1.336,0,2.419-1.083,2.419-2.419s-1.083-2.419-2.419-2.419c-13.32,0-24.157-10.835-24.157-24.153s10.837-24.153,24.157-24.153,24.153,10.835,24.153,24.153c0,1.336,1.083,2.419,2.419,2.419c0-15.986-13.006-28.992-28.992-28.992Zm25.041,33.531c-1.294.347-2.057,1.673-1.71,2.963.343,1.289,1.669,2.057,2.963,1.71,1.289-.343,2.053-1.669,1.71-2.963-.347-1.289-1.673-2.057-2.963-1.71Zm-2.03,6.328c-1.335,0-2.419,1.084-2.419,2.419s1.084,2.419,2.419,2.419,2.419-1.084,2.419-2.419-1.084-2.419-2.419-2.419Zm-3.598,5.587c-1.289-.347-2.615.416-2.963,1.71-.343,1.289.421,2.615,1.71,2.963,1.294.347,2.62-.421,2.963-1.71.347-1.294-.416-2.62-1.71-2.963Zm-4.919,4.462c-1.157-.667-2.638-.27-3.306.887-.667,1.157-.27,2.638.887,3.305,1.157.668,2.638.27,3.306-.887.667-1.157.27-2.638-.887-3.306Zm-9.327,3.04c-.946.946-.946,2.478,0,3.42.942.946,2.473.946,3.42,0,.946-.942.946-2.473,0-3.42-.946-.942-2.478-.946-3.42,0Z"></path> |
| 80 | </svg> |
| 81 | <span>History</span> |
| 82 | </button> |
| 83 | |
| 84 | <button |
| 85 | type="button" |
| 86 | class="chat-bottom-menu-item" |
| 87 | id="ctx_window" |
| 88 | @click="$store.context.open(); $store.chatInput.closeChatMoreMenu()" |
| 89 | :disabled="!$store.chats.selected" |
| 90 | > |
| 91 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="17 15 70 70" width="18" height="18" fill="currentColor" aria-hidden="true"> |
| 92 | <path d="m63 25c1.1016 0 2-0.89844 2-2s-0.89844-2-2-2h-26c-1.1016 0-2 0.89844-2 2s0.89844 2 2 2z"></path> |
| 93 | <path d="m63 79c1.1016 0 2-0.89844 2-2s-0.89844-2-2-2h-26c-1.1016 0-2 0.89844-2 2s0.89844 2 2 2z"></path> |
| 94 | <path d="m68 39h-36c-6.0703 0-11 4.9297-11 11s4.9297 11 11 11h36c6.0703 0 11-4.9297 11-11s-4.9297-11-11-11zm0 18h-36c-3.8594 0-7-3.1406-7-7s3.1406-7 7-7h36c3.8594 0 7 3.1406 7 7s-3.1406 7-7 7z"></path> |
| 95 | </svg> |
| 96 | <span>Context</span> |
| 97 | </button> |
| 98 | </div> |
| 99 | </template> |
| 100 | |
| 101 | <style> |
| 102 | .chat-bottom-actions-menu { |
| 103 | display: flex; |
| 104 | flex-direction: column; |
| 105 | width: 100%; |
| 106 | font-family: var(--font-family-main, "Rubik", Arial, Helvetica, sans-serif); |
| 107 | font-size: 0.8125rem; |
| 108 | } |
| 109 | |
| 110 | .chat-bottom-menu-item { |
| 111 | display: flex; |
| 112 | align-items: center; |
| 113 | gap: 0.4rem; |
| 114 | width: 100%; |
| 115 | margin: 0; |
| 116 | padding: var(--spacing-xs) var(--spacing-sm); |
| 117 | border-radius: 0.25rem; |
| 118 | background: transparent; |
| 119 | color: var(--color-text); |
| 120 | font-family: 'Rubik', Arial, Helvetica, sans-serif; |
| 121 | text-align: left; |
| 122 | cursor: pointer; |
| 123 | opacity: 0.88; |
| 124 | transition: background-color 0.12s ease, opacity 0.12s ease; |
| 125 | white-space: nowrap; |
| 126 | box-sizing: border-box; |
| 127 | } |
| 128 | button.chat-bottom-menu-item { |
| 129 | border: none; |
| 130 | } |
| 131 | .chat-bottom-menu-file-input { |
| 132 | position: absolute; |
| 133 | width: 1px; |
| 134 | height: 1px; |
| 135 | padding: 0; |
| 136 | margin: -1px; |
| 137 | overflow: hidden; |
| 138 | clip: rect(0, 0, 0, 0); |
| 139 | white-space: nowrap; |
| 140 | border: 0; |
| 141 | opacity: 0; |
| 142 | } |
| 143 | button.chat-bottom-menu-item:hover:not(:disabled) { |
| 144 | opacity: 1; |
| 145 | background-color: var(--color-background-hover); |
| 146 | } |
| 147 | button.chat-bottom-menu-item:active:not(:disabled) { opacity: 0.72; } |
| 148 | button.chat-bottom-menu-item:disabled { |
| 149 | opacity: 0.38; |
| 150 | cursor: not-allowed; |
| 151 | pointer-events: none; |
| 152 | } |
| 153 | .chat-bottom-menu-item .material-symbols-outlined { |
| 154 | font-size: 18px; |
| 155 | flex-shrink: 0; |
| 156 | opacity: 0.9; |
| 157 | } |
| 158 | .chat-bottom-menu-item svg { flex-shrink: 0; opacity: 0.88; } |
| 159 | </style> |
| 160 | </body> |
| 161 | </html> |