@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/chat/sender/@components/account-select/AccountSelectControl.scss

@@ -0,0 +1,112 @@
+.account-select {
+  min-width: 116px;
+  max-width: 220px;
+
+  .ant-select-selector {
+    position: relative;
+  }
+
+  .ant-select-selector::before {
+    content: 'switch_account';
+    font-family: 'Material Symbols Rounded';
+    font-size: 16px;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: currentColor;
+    margin-right: 6px;
+  }
+
+  .ant-select-selection-wrap {
+    min-width: 0;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+}
+
+.account-select--compact {
+  min-width: var(--sender-control-height);
+  max-width: var(--sender-control-height);
+
+  &.ant-select-single .ant-select-selector {
+    position: relative;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    padding-inline-start: 0 !important;
+    padding-inline-end: 0 !important;
+    justify-content: center;
+  }
+
+  .ant-select-selector::before {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .ant-select-selection-wrap,
+  .ant-select-selection-search {
+    display: none !important;
+  }
+
+  &.ant-select-single .ant-select-selector .ant-select-selection-item,
+  &.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    display: none !important;
+    width: 0 !important;
+    min-width: 0 !important;
+    max-width: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    opacity: 0 !important;
+    overflow: hidden !important;
+  }
+}
+
+.account-select-create-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 4px 4px;
+  text-align: center;
+}
+
+.account-select-create-modal__icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  background: color-mix(
+    in srgb,
+    var(--primary-soft-bg, #eff6ff) 80%,
+    transparent
+  );
+  color: var(--primary-color, #2563eb);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.account-select-create-modal__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.account-select-create-modal__description {
+  max-width: 360px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--sub-text-color, #6b7280);
+}

package/src/components/chat/sender/@components/account-select/AccountSelectControl.tsx

@@ -0,0 +1,280 @@
+/* eslint-disable max-lines -- account selector keeps control, menu actions, and connect flow together. */
+import '../sender-toolbar/SenderSelectShared.scss'
+import '../sender-toolbar/SenderSelectBase.scss'
+import './AccountSelectControl.scss'
+import './AccountSelectDropdown.scss'
+
+import { App, Button, Modal, Select, Tooltip } from 'antd'
+import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { useSWRConfig } from 'swr'
+
+import { getApiErrorMessage, manageAdapterAccount } from '#~/api'
+import type { ChatAdapterAccountOption } from '#~/hooks/chat/use-chat-adapter-account-selection'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+
+import type { SenderToolbarData, SenderToolbarHandlers, SenderToolbarState } from '../../@types/sender-toolbar-types'
+
+const renderSelectArrow = (onMouseDown: (event: ReactMouseEvent<HTMLSpanElement>) => void) => (
+  <span className='material-symbols-rounded sender-select-arrow' onMouseDown={onMouseDown}>
+    keyboard_arrow_down
+  </span>
+)
+
+export function AccountSelectControl({
+  state,
+  data,
+  handlers
+}: {
+  state: Pick<
+    SenderToolbarState,
+    'isThinking' | 'modelUnavailable' | 'selectedAccount' | 'selectedAdapter' | 'showAccountSelector'
+  >
+  data: Pick<SenderToolbarData, 'accountOptions'>
+  handlers: Pick<SenderToolbarHandlers, 'onAccountChange'>
+}) {
+  const { t } = useTranslation()
+  const { message } = App.useApp()
+  const navigate = useNavigate()
+  const { mutate } = useSWRConfig()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
+  const { isThinking, modelUnavailable, selectedAccount, selectedAdapter, showAccountSelector } = state
+  const { accountOptions } = data
+  const [showAccountSelect, setShowAccountSelect] = useState(false)
+  const [creatingAccount, setCreatingAccount] = useState(false)
+  const [cancelingCreateAccount, setCancelingCreateAccount] = useState(false)
+  const createAccountAbortRef = useRef<AbortController | null>(null)
+  const isCompactControl = isCompactLayout || isTouchInteraction
+
+  const selectedOption = useMemo(
+    () => accountOptions?.find(option => option.value === selectedAccount),
+    [accountOptions, selectedAccount]
+  )
+  const isDisabled = modelUnavailable || isThinking
+
+  if (!showAccountSelector || accountOptions == null || accountOptions.length === 0) {
+    return null
+  }
+
+  const openAdapterConfig = () => {
+    if (selectedAdapter == null || selectedAdapter.trim() === '') {
+      return
+    }
+
+    setShowAccountSelect(false)
+    void navigate(
+      `/config?tab=adapters&source=user&detail=${encodeURIComponent(`${selectedAdapter}/accounts`)}`
+    )
+  }
+
+  const createAccount = () => {
+    if (selectedAdapter == null || selectedAdapter.trim() === '') {
+      return
+    }
+
+    setShowAccountSelect(false)
+    const abortController = new AbortController()
+    createAccountAbortRef.current = abortController
+    setCreatingAccount(true)
+    setCancelingCreateAccount(false)
+
+    void (async () => {
+      try {
+        const result = await manageAdapterAccount(
+          selectedAdapter,
+          { action: 'add' },
+          { signal: abortController.signal }
+        )
+
+        await mutate((key) => (
+          Array.isArray(key) &&
+          key[0] === '/api/adapters' &&
+          key[1] === selectedAdapter
+        ))
+
+        if (result.accountKey != null && result.accountKey.trim() !== '') {
+          handlers.onAccountChange?.(result.accountKey)
+        }
+
+        void message.success(result.message ?? t('config.accounts.actionSuccess.add'))
+      } catch (error) {
+        if (abortController.signal.aborted || (error instanceof DOMException && error.name === 'AbortError')) {
+          void message.info(t('chat.accountSelectCreateCanceled'))
+          return
+        }
+
+        void message.error(getApiErrorMessage(error, t('config.accounts.actionFailed.add')))
+      } finally {
+        if (createAccountAbortRef.current === abortController) {
+          createAccountAbortRef.current = null
+        }
+        setCreatingAccount(false)
+        setCancelingCreateAccount(false)
+      }
+    })()
+  }
+
+  const cancelCreateAccount = () => {
+    const controller = createAccountAbortRef.current
+    if (controller == null || controller.signal.aborted) {
+      return
+    }
+
+    setCancelingCreateAccount(true)
+    controller.abort()
+  }
+
+  const openAccountConfig = (accountKey: string) => {
+    if (selectedAdapter == null || selectedAdapter.trim() === '') {
+      return
+    }
+
+    setShowAccountSelect(false)
+    void navigate(
+      `/config?tab=adapters&source=user&detail=${encodeURIComponent(`${selectedAdapter}/accounts/${accountKey}`)}`
+    )
+  }
+
+  const renderOption = (option: ChatAdapterAccountOption) => (
+    <div className='account-option'>
+      <div className='account-option__title-row'>
+        <span className='account-option__title'>{option.label}</span>
+        <div className='account-option__actions'>
+          <Tooltip
+            title={t('chat.accountSelectOpenAccountConfig', { account: option.label })}
+            placement='left'
+            arrow={false}
+          >
+            <button
+              type='button'
+              className='account-option__action'
+              aria-label={t('chat.accountSelectOpenAccountConfig', { account: option.label })}
+              onMouseDown={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+              }}
+              onClick={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                openAccountConfig(option.value)
+              }}
+            >
+              <span className='material-symbols-rounded'>settings</span>
+            </button>
+          </Tooltip>
+        </div>
+      </div>
+      {option.meta != null && option.meta !== '' && (
+        <div className='account-option__meta'>{option.meta}</div>
+      )}
+    </div>
+  )
+
+  const renderPopup = (originNode: ReactNode) => (
+    <>
+      {originNode}
+      {selectedAdapter != null && selectedAdapter.trim() !== '' && (
+        <div className='account-select-popup__footer'>
+          <button
+            type='button'
+            className='account-select-popup__footer-action'
+            onMouseDown={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+            }}
+            onClick={createAccount}
+          >
+            <span className='material-symbols-rounded'>person_add</span>
+            <span>{t('chat.accountSelectCreateAccount', { adapter: selectedAdapter })}</span>
+          </button>
+          <button
+            type='button'
+            className='account-select-popup__footer-action'
+            onMouseDown={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+            }}
+            onClick={openAdapterConfig}
+          >
+            <span className='material-symbols-rounded'>settings</span>
+            <span>{t('chat.accountSelectOpenAdapterConfig', { adapter: selectedAdapter })}</span>
+          </button>
+        </div>
+      )}
+    </>
+  )
+
+  return (
+    <div className={`sender-select-shell ${isCompactControl ? 'sender-select-shell--compact' : ''}`.trim()}>
+      {!showAccountSelect && !isDisabled && (
+        <button
+          type='button'
+          className='sender-select-body-trigger'
+          aria-label={selectedOption?.label ?? t('chat.accountSelectPlaceholder')}
+          onMouseDown={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            setShowAccountSelect(true)
+          }}
+        />
+      )}
+      <Select
+        className={`account-select ${isCompactControl ? 'account-select--compact' : ''}`.trim()}
+        classNames={{ popup: { root: 'account-select-popup' } }}
+        open={showAccountSelect}
+        value={selectedAccount}
+        options={accountOptions}
+        disabled={isDisabled}
+        onChange={(value) => {
+          handlers.onAccountChange?.(value)
+          setShowAccountSelect(false)
+        }}
+        onOpenChange={setShowAccountSelect}
+        optionRender={(option) => renderOption(option.data as ChatAdapterAccountOption)}
+        optionLabelProp='label'
+        placeholder={t('chat.accountSelectPlaceholder')}
+        popupMatchSelectWidth={false}
+        popupRender={renderPopup}
+        suffixIcon={isCompactControl
+          ? null
+          : renderSelectArrow((event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            setShowAccountSelect(prev => !prev)
+          })}
+      />
+      <Modal
+        open={creatingAccount}
+        centered
+        maskClosable={false}
+        keyboard={false}
+        closable={false}
+        title={t('chat.accountSelectCreateTitle', { adapter: selectedAdapter ?? 'adapter' })}
+        footer={[
+          <Button
+            key='cancel'
+            danger
+            disabled={cancelingCreateAccount}
+            onClick={cancelCreateAccount}
+          >
+            {cancelingCreateAccount ? t('chat.accountSelectCreateCanceling') : t('common.cancel')}
+          </Button>
+        ]}
+      >
+        <div className='account-select-create-modal'>
+          <span className='material-symbols-rounded account-select-create-modal__icon'>
+            pending_actions
+          </span>
+          <div className='account-select-create-modal__title'>
+            {t('chat.accountSelectCreateWaiting')}
+          </div>
+          <div className='account-select-create-modal__description'>
+            {t('chat.accountSelectCreateDescription', { adapter: selectedAdapter ?? 'adapter' })}
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}

package/src/components/chat/sender/@components/account-select/AccountSelectDropdown.scss

@@ -0,0 +1,155 @@
+.account-select-popup {
+  min-width: 320px;
+  max-width: 380px;
+  background: var(--bg-color) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: var(--sender-popup-radius, 8px) !important;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, .12) !important;
+  padding: 6px !important;
+
+  .ant-select-item-option {
+    min-height: 36px;
+    margin: 0;
+    padding: 6px 8px;
+    border-radius: 8px;
+    color: var(--text-color);
+  }
+
+  .ant-select-item-option-content {
+    overflow: visible;
+  }
+
+  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+    background: color-mix(
+      in srgb,
+      var(--primary-soft-bg, #eff6ff) 72%,
+      var(--bg-color) 28%
+    ) !important;
+  }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled),
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+    background: color-mix(
+      in srgb,
+      var(--primary-color, #2563eb) 18%,
+      var(--bg-color) 82%
+    ) !important;
+    color: var(--text-color) !important;
+    -webkit-text-fill-color: var(--text-color) !important;
+  }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    .account-option__title,
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    .account-option__meta,
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    .account-option__action,
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled)
+    .account-option__title,
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled)
+    .account-option__meta,
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled)
+    .account-option__action {
+    color: var(--text-color) !important;
+    -webkit-text-fill-color: var(--text-color) !important;
+  }
+}
+
+.account-option {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.account-option__title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.account-option__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.account-option__actions {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.account-option__action {
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--sub-text-color, #6b7280);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color .18s ease, color .18s ease;
+
+  &:hover {
+    background: color-mix(in srgb, var(--border-color) 22%, transparent);
+    color: var(--text-color);
+  }
+
+  .material-symbols-rounded {
+    font-size: 15px;
+    line-height: 1;
+  }
+}
+
+.account-option__meta {
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--sub-text-color, #6b7280);
+}
+
+.account-select-popup__footer {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid
+    color-mix(in srgb, var(--border-color) 72%, transparent);
+}
+
+.account-select-popup__footer-action {
+  width: 100%;
+  min-height: 30px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-color);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background-color .18s ease, color .18s ease;
+
+  &:hover {
+    background: color-mix(
+      in srgb,
+      var(--primary-soft-bg, #eff6ff) 72%,
+      var(--bg-color) 28%
+    );
+  }
+
+  .material-symbols-rounded {
+    font-size: 16px;
+    line-height: 1;
+  }
+}

package/src/components/chat/sender/@components/adapter-select/AdapterSelectControl.scss

@@ -1,7 +1,13 @@
 .adapter-select,
 .adapter-select--locked {
-  width: 28px;
-  min-width: 28px;
+  width: calc(
+    var(--sender-control-height) + var(--chat-input-container-padding, 12px) +
+      3px
+  );
+  min-width: calc(
+    var(--sender-control-height) + var(--chat-input-container-padding, 12px) +
+      3px
+  );
 }
 
 .adapter-select {
@@ -28,22 +34,32 @@
   }
 
   .ant-select-selection-wrap,
+  .ant-select-selection-search,
   .ant-select-selection-item,
   .ant-select-selection-placeholder {
     display: flex;
     height: 100%;
     align-items: center;
     justify-content: center;
-    width: 100%;
+    width: auto;
     min-width: 0;
     padding: 0 !important;
   }
 
+  .ant-select-selection-wrap {
+    flex: 1;
+    justify-content: center;
+  }
+
   .ant-select-selection-item,
   .ant-select-selection-placeholder {
     line-height: 1 !important;
   }
 
+  .ant-select-arrow {
+    display: none !important;
+  }
+
   .adapter-option {
     justify-content: center;
     align-items: center;
@@ -52,8 +68,7 @@
     flex: 0 0 100%;
   }
 
-  .adapter-option__text,
-  .ant-select-arrow {
+  .adapter-option__text {
     display: none !important;
   }
 
@@ -62,12 +77,30 @@
   }
 }
 
+.adapter-select:not(.ant-select-disabled):hover,
 .adapter-select:not(.ant-select-disabled).ant-select-focused,
 .adapter-select:not(.ant-select-disabled).ant-select-open {
   background: var(--sender-control-hover-bg);
   color: var(--sender-control-hover-color);
 }
 
+html.dark {
+  .sender-select-shell.sender-select-shell--adapter:not(.is-disabled):hover
+    .adapter-select,
+  .adapter-select:not(.ant-select-disabled):hover,
+  .adapter-select:not(.ant-select-disabled).ant-select-focused,
+  .adapter-select:not(.ant-select-disabled).ant-select-open {
+    background: color-mix(
+      in srgb,
+      var(--primary-color, #3b82f6) 10%,
+      var(--input-bg, #1f1f1f) 90%
+    );
+    color: var(--text-color, #ffffff);
+    box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--primary-color, #3b82f6) 18%, transparent);
+  }
+}
+
 .adapter-option {
   display: inline-flex;
   align-items: center;
@@ -77,8 +110,8 @@
 }
 
 .adapter-option__icon {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   display: block;
   object-fit: contain;
   flex-shrink: 0;
@@ -89,21 +122,27 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 15px;
+  font-size: 13px;
   line-height: 1;
 }
 
 @media (max-width: 960px) {
   .adapter-select,
   .adapter-select--locked {
-    width: var(--sender-control-height);
-    min-width: var(--sender-control-height);
+    width: calc(
+      var(--sender-control-height) + var(--chat-input-container-padding, 12px) +
+        3px
+    );
+    min-width: calc(
+      var(--sender-control-height) + var(--chat-input-container-padding, 12px) +
+        3px
+    );
   }
 
   .adapter-option__icon,
   .adapter-option__icon--fallback {
-    width: 14px;
-    height: 14px;
+    width: 12px;
+    height: 12px;
     margin: 0 auto;
   }
 }

package/src/components/chat/sender/@components/adapter-select/AdapterSelectDropdown.scss

@@ -29,6 +29,8 @@
       var(--primary-color, #2563eb) 18%,
       var(--bg-color) 82%
     ) !important;
+    color: var(--text-color) !important;
+    -webkit-text-fill-color: var(--text-color) !important;
   }
 
   .ant-select-item-option-content,
@@ -39,4 +41,16 @@
     font-size: 12px;
     font-weight: 400 !important;
   }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    .adapter-option,
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled)
+    .adapter-option,
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    .adapter-option__text,
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled)
+    .adapter-option__text {
+    color: var(--text-color) !important;
+    -webkit-text-fill-color: var(--text-color) !important;
+  }
 }