@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/chat/sender/@components/session-target/SenderSessionTargetBar.scss

@@ -0,0 +1,215 @@
+.sender-session-target {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: 5px 6px;
+  margin: -12px -12px 6px;
+  border-radius: 11px 11px 0 0;
+  background: color-mix(in srgb, var(--sub-bg-color) 82%, var(--border-color));
+}
+
+.sender-session-target__controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+}
+
+.sender-session-target__actions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.sender-session-target__trigger {
+  width: fit-content;
+  min-width: 0;
+  max-width: min(420px, 100%);
+  height: 24px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color .2s ease, color .2s ease;
+}
+
+.sender-session-target__trigger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+}
+
+.sender-session-target__trigger:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--primary-color) 42%, transparent);
+  outline-offset: 2px;
+}
+
+.sender-session-target__trigger:disabled {
+  cursor: not-allowed;
+  opacity: .72;
+}
+
+.sender-session-target__trigger-icon,
+.sender-session-target__trigger-chevron,
+.sender-session-target__menu-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.sender-session-target__trigger-icon {
+  color: var(--primary-color);
+}
+
+.sender-session-target__trigger-copy {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  flex: 0 1 auto;
+}
+
+.sender-session-target__trigger-mode {
+  flex-shrink: 0;
+  color: var(--sub-text-color);
+  font-size: 10px;
+  line-height: 1.2;
+}
+
+.sender-session-target__trigger-value {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-color);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sender-session-target__trigger-chevron {
+  flex-shrink: 0;
+  color: var(--sub-text-color);
+}
+
+.sender-session-target__menu-icon {
+  color: var(--sub-text-color);
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 16px;
+  vertical-align: middle;
+}
+
+.sender-session-target__menu-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 160px;
+  max-width: 280px;
+}
+
+.sender-session-target__menu-item-name {
+  overflow: hidden;
+  color: var(--text-color);
+  font-size: 11px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sender-session-target__menu-item-desc {
+  overflow: hidden;
+  color: var(--sub-text-color);
+  font-size: 10px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sender-session-target__dropdown.ant-dropdown,
+.sender-session-target__submenu-popup {
+  .ant-dropdown-menu {
+    min-width: 168px;
+    padding: 4px !important;
+  }
+
+  .ant-dropdown-menu-item,
+  .ant-dropdown-menu-submenu-title {
+    min-height: 28px !important;
+    height: auto;
+    display: flex !important;
+    align-items: center !important;
+    padding: 4px 8px !important;
+    border-radius: 8px !important;
+    font-size: 11px !important;
+    line-height: 16px !important;
+  }
+
+  .ant-dropdown-menu-item-icon {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    display: inline-flex !important;
+    align-items: center !important;
+    align-self: center !important;
+    justify-content: center !important;
+    margin-inline-end: 8px !important;
+    line-height: 16px !important;
+  }
+
+  .ant-dropdown-menu-title-content {
+    display: inline-flex !important;
+    align-items: center !important;
+    min-height: 16px;
+    font-size: 11px !important;
+    line-height: 16px !important;
+  }
+
+  .ant-dropdown-menu-submenu-expand-icon {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    inset-inline-end: 8px !important;
+    color: var(--placeholder-color, #9ca3af) !important;
+  }
+}
+
+.sender-session-target__submenu-chevron {
+  font-size: 14px;
+  line-height: 1;
+}
+
+@media (max-width: 720px) {
+  .sender-session-target__controls {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .sender-session-target__actions {
+    margin-left: 0;
+    justify-self: end;
+    max-width: 100%;
+  }
+
+  .sender-session-target__trigger {
+    max-width: 100%;
+  }
+
+  .sender-session-target__trigger-copy {
+    gap: 6px;
+  }
+}

package/src/components/chat/sender/@components/session-target/SenderSessionTargetBar.tsx

@@ -0,0 +1,185 @@
+import './SenderSessionTargetBar.scss'
+
+import { Dropdown } from 'antd'
+import type { MenuProps } from 'antd'
+import type { ReactNode } from 'react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { EntitySummary, SpecSummary, WorkspaceSummary } from '#~/api.js'
+import { DEFAULT_CHAT_SESSION_TARGET_DRAFT, createChatSessionTargetDraft } from '#~/hooks/chat/chat-session-target'
+import type {
+  ChatSessionTargetDraft,
+  ChatSessionTargetResource,
+  ChatSessionTargetType
+} from '#~/hooks/chat/chat-session-target'
+
+type SelectableTargetType = Exclude<ChatSessionTargetType, 'default'>
+
+const modeIcons: Record<ChatSessionTargetType, string> = {
+  default: 'radio_button_checked',
+  workspace: 'workspaces',
+  entity: 'group_work',
+  spec: 'account_tree'
+}
+
+const selectableTypes: SelectableTargetType[] = ['workspace', 'entity', 'spec']
+const menuKeySeparator = '::'
+
+const toResource = (item: WorkspaceSummary | EntitySummary | SpecSummary): ChatSessionTargetResource => ({
+  id: item.id,
+  name: item.name,
+  description: item.description,
+  path: 'path' in item ? item.path : item.id
+})
+
+export function SenderSessionTargetBar({
+  draft,
+  locked,
+  disabled,
+  onChange,
+  actions,
+  className,
+  ariaHidden
+}: {
+  draft: ChatSessionTargetDraft
+  locked: boolean
+  disabled?: boolean
+  onChange: (target: ChatSessionTargetDraft) => void
+  actions?: ReactNode
+  className?: string
+  ariaHidden?: boolean
+}) {
+  const { t } = useTranslation()
+  const { data: specsRes } = useSWR<{ specs: SpecSummary[] }>('/api/ai/specs')
+  const { data: entitiesRes } = useSWR<{ entities: EntitySummary[] }>('/api/ai/entities')
+  const { data: workspacesRes } = useSWR<{ workspaces: WorkspaceSummary[] }>('/api/ai/workspaces')
+
+  const resourcesByType = useMemo<Record<SelectableTargetType, ChatSessionTargetResource[]>>(() => ({
+    workspace: (workspacesRes?.workspaces ?? []).map(toResource),
+    entity: (entitiesRes?.entities ?? []).map(toResource),
+    spec: (specsRes?.specs ?? []).map(toResource)
+  }), [entitiesRes?.entities, specsRes?.specs, workspacesRes?.workspaces])
+
+  const activeType = draft.type
+  const isControlDisabled = locked || disabled === true
+  const selectedLabel = draft.label ?? draft.name
+  const selectedText = activeType === 'default'
+    ? null
+    : selectedLabel ?? t(`chat.sessionTarget.placeholders.${activeType}`)
+
+  const handleSelect = (type: ChatSessionTargetType, resource?: ChatSessionTargetResource) => {
+    if (isControlDisabled) return
+
+    if (type === 'default') {
+      onChange({ ...DEFAULT_CHAT_SESSION_TARGET_DRAFT })
+      return
+    }
+
+    onChange(
+      resource == null
+        ? { type }
+        : createChatSessionTargetDraft(type, resource)
+    )
+  }
+
+  const menuItems = useMemo<MenuProps['items']>(() => [
+    {
+      key: 'default',
+      label: t('chat.sessionTarget.modes.default'),
+      icon: <span className='material-symbols-rounded sender-session-target__menu-icon'>{modeIcons.default}</span>
+    },
+    { type: 'divider' },
+    ...selectableTypes.map(type => ({
+      key: type,
+      label: t(`chat.sessionTarget.modes.${type}`),
+      icon: <span className='material-symbols-rounded sender-session-target__menu-icon'>{modeIcons[type]}</span>,
+      popupClassName: 'sender-session-target__submenu-popup',
+      children: resourcesByType[type].length > 0
+        ? resourcesByType[type].map(resource => ({
+          key: `${type}${menuKeySeparator}${type === 'workspace' ? resource.id : resource.name}`,
+          label: (
+            <span className='sender-session-target__menu-item'>
+              <span className='sender-session-target__menu-item-name'>{resource.name}</span>
+              {(resource.description ?? resource.path) != null && (
+                <span className='sender-session-target__menu-item-desc'>{resource.description ?? resource.path}</span>
+              )}
+            </span>
+          )
+        }))
+        : [{
+          key: `${type}${menuKeySeparator}__empty`,
+          label: t(`chat.sessionTarget.empty.${type}`),
+          disabled: true
+        }]
+    }))
+  ], [resourcesByType, t])
+
+  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
+    const rawKey = String(key)
+    if (rawKey === 'default') {
+      handleSelect('default')
+      return
+    }
+
+    const [type, resourceValue] = rawKey.split(menuKeySeparator) as [SelectableTargetType | undefined, string?]
+    if (type == null || !selectableTypes.includes(type) || resourceValue == null || resourceValue === '__empty') {
+      return
+    }
+
+    const resource = resourcesByType[type].find(item => (type === 'workspace' ? item.id : item.name) === resourceValue)
+    handleSelect(type, resource)
+  }
+
+  return (
+    <div
+      className={['sender-session-target', locked ? 'is-locked' : '', className ?? ''].filter(Boolean).join(' ')}
+      aria-hidden={ariaHidden}
+    >
+      <div className='sender-session-target__controls'>
+        <Dropdown
+          menu={{
+            items: menuItems,
+            onClick: handleMenuClick,
+            className: 'sender-session-target__dropdown-menu',
+            expandIcon: (
+              <span className='material-symbols-rounded sender-session-target__submenu-chevron'>
+                chevron_right
+              </span>
+            )
+          }}
+          trigger={['click']}
+          placement='topLeft'
+          overlayClassName='sender-session-target__dropdown'
+          disabled={isControlDisabled}
+        >
+          <button
+            type='button'
+            className='sender-session-target__trigger'
+            disabled={isControlDisabled}
+            aria-label={t('chat.sessionTarget.title')}
+          >
+            <span className='material-symbols-rounded sender-session-target__trigger-icon'>
+              {modeIcons[activeType]}
+            </span>
+            <span className='sender-session-target__trigger-copy'>
+              <span className='sender-session-target__trigger-mode'>
+                {t(`chat.sessionTarget.modes.${activeType}`)}
+              </span>
+              {selectedText != null && (
+                <span className='sender-session-target__trigger-value'>{selectedText}</span>
+              )}
+            </span>
+            <span className='material-symbols-rounded sender-session-target__trigger-chevron'>expand_more</span>
+          </button>
+        </Dropdown>
+        {actions != null && (
+          <div className='sender-session-target__actions'>
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/chat/sender/@core/build-sender-toolbar.ts

@@ -92,6 +92,7 @@ export const buildSenderToolbar = ({
     attachments,
     callbacks: {
       onAdapterChange: props.onAdapterChange,
+      onAccountChange: props.onAccountChange,
       onEffortChange: props.onEffortChange,
       onInterrupt: props.onInterrupt,
       onModelChange: props.onModelChange,
@@ -106,6 +107,7 @@ export const buildSenderToolbar = ({
     resources: { message, t },
     selection: {
       adapterOptions: props.adapterOptions,
+      accountOptions: props.accountOptions,
       effort: props.effort ?? 'default',
       effortOptions: props.effortOptions ?? [],
       modelMenuGroups: props.modelMenuGroups,
@@ -118,6 +120,7 @@ export const buildSenderToolbar = ({
       servicePreviewModelOptions: props.servicePreviewModelOptions,
       resolvedSendShortcut,
       selectedAdapter: props.selectedAdapter,
+      selectedAccount: props.selectedAccount,
       selectedModel: props.selectedModel,
       updatingRecommendedModelValue: props.updatingRecommendedModelValue
     },
@@ -133,9 +136,12 @@ export const buildSenderToolbar = ({
       sendBlockedTooltip,
       showConfirmInteractionAction,
       modelUnavailable: props.modelUnavailable,
+      hideReferenceActions: props.hideReferenceActions === true,
+      hideSubmitAction: props.hideSubmitAction === true,
       referenceActions,
       refs,
       selectOverlays,
+      showAccountSelector: props.showAccountSelector === true,
       confirmInteractionLabel,
       submitLabel: props.submitLabel,
       submitLoading: props.submitLoading === true,

package/src/components/chat/sender/@core/create-sender-toolbar-handlers.ts

@@ -15,6 +15,7 @@ export const createSenderToolbarHandlers = ({
   message,
   modelUnavailable,
   onAdapterChange,
+  onAccountChange,
   onEffortChange,
   onInterrupt,
   onModelChange,
@@ -39,6 +40,7 @@ export const createSenderToolbarHandlers = ({
   message: { warning: (content: ReactNode) => unknown }
   modelUnavailable?: boolean
   onAdapterChange?: (adapter: string) => void
+  onAccountChange?: (account: string) => void
   onEffortChange?: (effort: ChatEffort) => void
   onInterrupt: () => void
   onModelChange?: (model: string) => void
@@ -87,7 +89,24 @@ export const createSenderToolbarHandlers = ({
     },
     onShowModelSelectChange: selectOverlays.setShowModelSelect,
     onShowEffortSelectChange: selectOverlays.setShowEffortSelect,
-    onShowPermissionActionsChange: referenceActions.setShowPermissionActions,
+    onPermissionOpenChange: (nextOpen) => {
+      if (nextOpen && !canOpenReferenceActions) {
+        if (!isInlineEdit && modelUnavailable) {
+          void message.warning(t('chat.modelConfigRequired'))
+        }
+        return
+      }
+
+      if (!nextOpen) {
+        referenceActions.closeReferenceActions({ restoreFocus: true })
+        return
+      }
+
+      selectOverlays.setShowModelSelect(false)
+      selectOverlays.setShowEffortSelect(false)
+      referenceActions.setShowReferenceActions(false)
+      referenceActions.setShowPermissionActions(true)
+    },
     onModelSearchValueChange: selectOverlays.setModelSearchValue,
     onOpenContextPicker: attachments.handleOpenContextPicker,
     onReferenceImageSelect: attachments.handleImageUpload,
@@ -113,6 +132,7 @@ export const createSenderToolbarHandlers = ({
     onToggleRecommendedModel,
     onEffortChange,
     onAdapterChange,
+    onAccountChange,
     onQueueModeChange,
     onSend,
     onInterrupt,

package/src/components/chat/sender/@core/get-sender-runtime-state.ts

@@ -1,13 +1,14 @@
 import type { SenderProps } from '../@types/sender-props'
 
 export const getSenderRuntimeState = (
-  props: Pick<SenderProps, 'selectedAdapter' | 'sessionStatus' | 'submitLoading' | 'variant'>
+  props: Pick<SenderProps, 'forceEffortControl' | 'selectedAdapter' | 'sessionStatus' | 'submitLoading' | 'variant'>
 ) => {
   const isInlineEdit = props.variant === 'inline-edit'
   const isMac = navigator.platform.includes('Mac')
   const isThinking = !isInlineEdit && props.sessionStatus === 'running'
   const isBusy = isThinking || props.submitLoading === true
-  const supportsEffort = props.selectedAdapter === 'codex' || props.selectedAdapter === 'claude-code' ||
+  const supportsEffort = props.forceEffortControl === true ||
+    props.selectedAdapter === 'codex' || props.selectedAdapter === 'claude-code' ||
     props.selectedAdapter === 'copilot' || props.selectedAdapter === 'opencode'
 
   return { isInlineEdit, isMac, isThinking, isBusy, supportsEffort }

package/src/components/chat/sender/@core/sender-toolbar-bindings.ts

@@ -30,6 +30,7 @@ export const createSenderToolbarBindings = ({
   }
   callbacks: {
     onAdapterChange?: (adapter: string) => void
+    onAccountChange?: (account: string) => void
     onEffortChange?: (effort: ChatEffort) => void
     onInterrupt: () => void
     onModelChange?: (model: string) => void
@@ -44,6 +45,7 @@ export const createSenderToolbarBindings = ({
   resources: { message: { warning: (content: ReactNode) => unknown }; t: (key: string) => string }
   selection: {
     adapterOptions?: Array<{ value: string; label: ReactNode }>
+    accountOptions?: SenderToolbarData['accountOptions']
     effort: ChatEffort
     effortOptions: SenderToolbarData['effortOptions']
     modelMenuGroups?: ModelSelectMenuGroup[]
@@ -56,6 +58,7 @@ export const createSenderToolbarBindings = ({
     servicePreviewModelOptions?: ModelSelectOption[]
     resolvedSendShortcut: string
     selectedAdapter?: string
+    selectedAccount?: string
     selectedModel?: string
     updatingRecommendedModelValue?: string
   }
@@ -74,6 +77,8 @@ export const createSenderToolbarBindings = ({
     sendBlockedTooltip?: string
     showConfirmInteractionAction: boolean
     modelUnavailable?: boolean
+    hideReferenceActions: boolean
+    hideSubmitAction: boolean
     referenceActions: {
       showReferenceActions: boolean
       showPermissionActions: boolean
@@ -96,6 +101,7 @@ export const createSenderToolbarBindings = ({
       openModelSelector: () => boolean
       openEffortSelector: () => boolean
     }
+    showAccountSelector: boolean
     submitLabel?: string
     confirmInteractionLabel?: string
     submitLoading: boolean
@@ -117,11 +123,15 @@ export const createSenderToolbarBindings = ({
     showEffortSelect: ui.selectOverlays.showEffortSelect,
     showReferenceActions: ui.referenceActions.showReferenceActions,
     showPermissionActions: ui.referenceActions.showPermissionActions,
+    hideReferenceActions: ui.hideReferenceActions,
+    hideSubmitAction: ui.hideSubmitAction,
     modelSearchValue: ui.selectOverlays.modelSearchValue,
     selectedModel: selection.selectedModel,
     effort: selection.effort,
     permissionMode: selection.permissionMode,
     selectedAdapter: selection.selectedAdapter,
+    selectedAccount: selection.selectedAccount,
+    showAccountSelector: ui.showAccountSelector,
     isMac: ui.isMac,
     resolvedSendShortcut: selection.resolvedSendShortcut,
     queueMode: selection.queueMode,
@@ -139,6 +149,7 @@ export const createSenderToolbarBindings = ({
     effortOptions: selection.effortOptions,
     permissionModeOptions: selection.permissionModeOptions,
     adapterOptions: selection.adapterOptions,
+    accountOptions: selection.accountOptions,
     composerControlShortcuts: {
       ...ui.composerControlShortcuts,
       ...selection.queuedMessageShortcuts
@@ -161,6 +172,7 @@ export const createSenderToolbarBindings = ({
     message: resources.message,
     modelUnavailable: ui.modelUnavailable,
     onAdapterChange: callbacks.onAdapterChange,
+    onAccountChange: callbacks.onAccountChange,
     onEffortChange: callbacks.onEffortChange,
     onInterrupt: callbacks.onInterrupt,
     onModelChange: callbacks.onModelChange,

package/src/components/chat/sender/@hooks/use-sender-controller.ts

@@ -1,5 +1,6 @@
 /* eslint-disable max-lines */
 import { App } from 'antd'
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { buildSenderControllerResult } from '#~/components/chat/sender/@core/build-sender-controller-result'
@@ -22,10 +23,22 @@ import { useSenderSelectOverlays } from './use-sender-select-overlays'
 import { useSenderShortcuts } from './use-sender-shortcuts'
 import { useSenderSubmit } from './use-sender-submit'
 
+const mergePendingContextFiles = <T extends { path: string }>(current: T[], incoming: T[]) => {
+  const nextByPath = new Map(current.map(file => [file.path, file]))
+  for (const file of incoming) {
+    if (file.path.trim() === '') {
+      continue
+    }
+    nextByPath.set(file.path, file)
+  }
+  return Array.from(nextByPath.values())
+}
+
 export const useSenderController = (props: SenderProps) => {
   const { t } = useTranslation()
   const { message } = App.useApp()
   const { editorRef, fileInputRef, modelSelectRef, effortSelectRef } = useSenderRefs()
+  const handledContextReferenceRequestIdRef = useRef<number | null>(null)
   const { isInlineEdit, isMac, isThinking, isBusy, supportsEffort } = getSenderRuntimeState(props)
   const composer = useSenderComposerState(props.initialContent)
   const completion = useSenderCompletion({
@@ -127,6 +140,9 @@ export const useSenderController = (props: SenderProps) => {
     })
   }
   const triggerSend = (mode?: 'steer' | 'next') => {
+    if (props.hideSubmitAction === true) {
+      return
+    }
     if (isPermissionInteraction) {
       handleBlockedSendAttempt()
       return
@@ -135,6 +151,37 @@ export const useSenderController = (props: SenderProps) => {
     void handleSend(mode)
   }
 
+  useEffect(() => {
+    const request = props.contextReferenceRequest
+    if (request == null || request.files.length === 0 || isInlineEdit) {
+      return
+    }
+    if (handledContextReferenceRequestIdRef.current === request.id) {
+      return
+    }
+    handledContextReferenceRequestIdRef.current = request.id
+    if (props.modelUnavailable) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+    if (props.interactionRequest != null) {
+      void message.warning(t('chat.fileNotSupportedInInteraction'))
+      return
+    }
+
+    composer.setPendingFiles(current => mergePendingContextFiles(current, request.files))
+    focusRestore.queueEditorFocusRestore()
+  }, [
+    focusRestore,
+    isInlineEdit,
+    message,
+    composer.setPendingFiles,
+    props.contextReferenceRequest,
+    props.interactionRequest,
+    props.modelUnavailable,
+    t
+  ])
+
   useSenderAutofocus({ autoFocus: props.autoFocus === true, editorRef })
   useSenderReferenceFocusRestore({ focusRestore, referenceActions })
 
@@ -209,7 +256,7 @@ export const useSenderController = (props: SenderProps) => {
     t
   })
 
-  return buildSenderControllerResult({
+  const controller = buildSenderControllerResult({
     attachments,
     completion,
     composer,
@@ -233,4 +280,12 @@ export const useSenderController = (props: SenderProps) => {
       : undefined,
     toolbar
   })
+
+  return {
+    ...controller,
+    onInputChange: (value: string, cursorOffset: number | null) => {
+      controller.onInputChange(value, cursorOffset)
+      props.onInputChange?.(value)
+    }
+  }
 }