|
2 | 2 |
|
3 | 3 | import { useMemo } from 'react' |
4 | 4 | import { useParams } from 'next/navigation' |
5 | | -import { |
6 | | - Button, |
7 | | - ChipConfirmModal, |
8 | | - ChipInput, |
9 | | - ChipModal, |
10 | | - ChipModalBody, |
11 | | - ChipModalError, |
12 | | - ChipModalField, |
13 | | - ChipModalFooter, |
14 | | - ChipModalHeader, |
15 | | -} from '@/components/emcn' |
16 | 5 | import { |
17 | 6 | AnthropicIcon, |
18 | 7 | BasetenIcon, |
@@ -321,128 +310,6 @@ export function BYOK() { |
321 | 310 | /> |
322 | 311 | </div> |
323 | 312 | </div> |
324 | | - |
325 | | - <ChipModal |
326 | | - open={!!editingProvider} |
327 | | - onOpenChange={(open) => { |
328 | | - if (!open) { |
329 | | - setEditingProvider(null) |
330 | | - setApiKeyInput('') |
331 | | - setShowApiKey(false) |
332 | | - setError(null) |
333 | | - } |
334 | | - }} |
335 | | - srTitle='Add/Update API Key' |
336 | | - > |
337 | | - <ChipModalHeader |
338 | | - onClose={() => { |
339 | | - setEditingProvider(null) |
340 | | - setApiKeyInput('') |
341 | | - setShowApiKey(false) |
342 | | - setError(null) |
343 | | - }} |
344 | | - > |
345 | | - {editingProvider && ( |
346 | | - <> |
347 | | - {getKeyForProvider(editingProvider) ? 'Update' : 'Add'}{' '} |
348 | | - {PROVIDERS.find((p) => p.id === editingProvider)?.name} API Key |
349 | | - </> |
350 | | - )} |
351 | | - </ChipModalHeader> |
352 | | - <ChipModalBody> |
353 | | - <p className='px-2 text-[var(--text-secondary)] text-sm'> |
354 | | - This key will be used for all {PROVIDERS.find((p) => p.id === editingProvider)?.name}{' '} |
355 | | - requests in this workspace. Your key is encrypted and stored securely. |
356 | | - </p> |
357 | | - <ChipModalField type='custom' title='API Key' required> |
358 | | - {/* Hidden decoy fields to prevent browser autofill */} |
359 | | - <input |
360 | | - type='text' |
361 | | - name='fakeusernameremembered' |
362 | | - autoComplete='username' |
363 | | - style={{ |
364 | | - position: 'absolute', |
365 | | - left: '-9999px', |
366 | | - opacity: 0, |
367 | | - pointerEvents: 'none', |
368 | | - }} |
369 | | - tabIndex={-1} |
370 | | - readOnly |
371 | | - /> |
372 | | - <ChipInput |
373 | | - type={showApiKey ? 'text' : 'password'} |
374 | | - value={apiKeyInput} |
375 | | - onChange={(e) => { |
376 | | - setApiKeyInput(e.target.value) |
377 | | - if (error) setError(null) |
378 | | - }} |
379 | | - placeholder={PROVIDERS.find((p) => p.id === editingProvider)?.placeholder} |
380 | | - name='byok_api_key' |
381 | | - autoComplete='off' |
382 | | - autoCorrect='off' |
383 | | - autoCapitalize='off' |
384 | | - data-lpignore='true' |
385 | | - data-form-type='other' |
386 | | - endAdornment={ |
387 | | - <Button |
388 | | - variant='ghost' |
389 | | - className='size-[28px] p-0' |
390 | | - onClick={() => setShowApiKey(!showApiKey)} |
391 | | - > |
392 | | - {showApiKey ? ( |
393 | | - <EyeOff className='size-[14px]' /> |
394 | | - ) : ( |
395 | | - <Eye className='size-[14px]' /> |
396 | | - )} |
397 | | - </Button> |
398 | | - } |
399 | | - /> |
400 | | - </ChipModalField> |
401 | | - <ChipModalError>{error}</ChipModalError> |
402 | | - </ChipModalBody> |
403 | | - <ChipModalFooter |
404 | | - onCancel={() => { |
405 | | - setEditingProvider(null) |
406 | | - setApiKeyInput('') |
407 | | - setShowApiKey(false) |
408 | | - setError(null) |
409 | | - }} |
410 | | - cancelDisabled={upsertKey.isPending} |
411 | | - primaryAction={{ |
412 | | - label: upsertKey.isPending ? 'Saving...' : 'Save', |
413 | | - onClick: handleSave, |
414 | | - disabled: !apiKeyInput.trim() || upsertKey.isPending, |
415 | | - }} |
416 | | - /> |
417 | | - </ChipModal> |
418 | | - |
419 | | - <ChipConfirmModal |
420 | | - open={!!deleteConfirmProvider} |
421 | | - onOpenChange={(open) => { |
422 | | - if (!open) setDeleteConfirmProvider(null) |
423 | | - }} |
424 | | - srTitle='Delete API Key' |
425 | | - title='Delete API Key' |
426 | | - description={ |
427 | | - <> |
428 | | - Are you sure you want to delete the{' '} |
429 | | - <span className='font-medium text-[var(--text-primary)]'> |
430 | | - {PROVIDERS.find((p) => p.id === deleteConfirmProvider)?.name} |
431 | | - </span>{' '} |
432 | | - API key?{' '} |
433 | | - <span className='text-[var(--text-error)]'> |
434 | | - This workspace will revert to using platform hosted keys. |
435 | | - </span>{' '} |
436 | | - This action cannot be undone. |
437 | | - </> |
438 | | - } |
439 | | - confirm={{ |
440 | | - label: 'Delete', |
441 | | - onClick: handleDelete, |
442 | | - pending: deleteKey.isPending, |
443 | | - pendingLabel: 'Deleting...', |
444 | | - }} |
445 | | - /> |
446 | 313 | </div> |
447 | 314 | ) |
448 | 315 | } |
0 commit comments