@vibe-forge/client 0.8.4 → 0.10.0

package/src/components/chat/tools/core/ToolGroup.tsx

@@ -3,14 +3,19 @@ import './ToolGroup.scss'
 import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useSearchParams } from 'react-router-dom'
+import { MessageContextMenu } from '../../messages/MessageContextMenu'
 import { MessageFooter } from '../../messages/MessageFooter'
 import { ToolRenderer } from './ToolRenderer'
 
 interface ToolGroupProps {
+  anchorId: string
   items: {
     item: Extract<ChatMessageContent, { type: 'tool_use' }>
     resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
   }[]
+  originalMessage: ChatMessage
+  sessionId?: string
   footer?: {
     model?: string
     usage?: ChatMessage['usage']
@@ -20,10 +25,15 @@ interface ToolGroupProps {
 }
 
 function ToolGroupComponent({
+  anchorId,
   items,
+  originalMessage,
+  sessionId,
   footer
 }: ToolGroupProps) {
   const { t } = useTranslation()
+  const [searchParams] = useSearchParams()
+  const isDebugMode = searchParams.get('debug') === 'true'
   const [expanded, setExpanded] = useState(false)
 
   if (items.length === 0) return null
@@ -31,19 +41,33 @@ function ToolGroupComponent({
   // If only one item, just render it directly (wrapped in container for footer)
   if (items.length === 1) {
     return (
-      <div className='tool-group-container'>
-        <div className='tool-group-wrapper single-item'>
-          <ToolRenderer
-            item={items[0].item}
-            resultItem={items[0].resultItem}
-          />
-        </div>
-        {footer && (
-          <div className='tool-group-footer-wrapper'>
-            <MessageFooter msg={footer.originalMessage} isUser={false} />
+      <MessageContextMenu
+        anchorId={anchorId}
+        canEdit={false}
+        canFork={false}
+        canRecall={false}
+        isDebugMode={isDebugMode}
+        isEditing={false}
+        message={originalMessage}
+        sessionId={sessionId}
+        onFork={() => {}}
+        onRecall={() => {}}
+        onStartEditing={() => {}}
+      >
+        <div id={anchorId} className='tool-group-container'>
+          <div className='tool-group-wrapper single-item'>
+            <ToolRenderer
+              item={items[0].item}
+              resultItem={items[0].resultItem}
+            />
           </div>
-        )}
-      </div>
+          {footer && isDebugMode && (
+            <div className='tool-group-footer-wrapper'>
+              <MessageFooter msg={footer.originalMessage} isUser={false} />
+            </div>
+          )}
+        </div>
+      </MessageContextMenu>
     )
   }
 
@@ -51,65 +75,82 @@ function ToolGroupComponent({
   const otherItems = items.slice(0, -1)
 
   return (
-    <div className='tool-group-container'>
-      <div className='tool-group-wrapper card-style'>
-        <div
-          className='tool-group-header'
-          onClick={() => setExpanded(!expanded)}
-        >
-          <div className='header-left'>
-            <span className='material-symbols-rounded'>dataset</span>
-            <span>{t('chat.usedTools', { count: items.length })}</span>
+    <MessageContextMenu
+      anchorId={anchorId}
+      canEdit={false}
+      canFork={false}
+      canRecall={false}
+      isDebugMode={isDebugMode}
+      isEditing={false}
+      message={originalMessage}
+      sessionId={sessionId}
+      onFork={() => {}}
+      onRecall={() => {}}
+      onStartEditing={() => {}}
+    >
+      <div id={anchorId} className='tool-group-container'>
+        <div className='tool-group-wrapper card-style'>
+          <div
+            className='tool-group-header'
+            onClick={() => setExpanded(!expanded)}
+          >
+            <div className='header-left'>
+              <span className='material-symbols-rounded'>dataset</span>
+              <span>{t('chat.usedTools', { count: items.length })}</span>
+            </div>
+            <span className='material-symbols-rounded expand-icon'>
+              {expanded ? 'expand_less' : 'expand_more'}
+            </span>
           </div>
-          <span className='material-symbols-rounded expand-icon'>
-            {expanded ? 'expand_less' : 'expand_more'}
-          </span>
-        </div>
 
-        {expanded && (
-          <div className='tool-group-list'>
-            {otherItems.map((it, idx) => (
-              <ToolRenderer
-                key={it.item.id || idx}
-                item={it.item}
-                resultItem={it.resultItem}
-              />
-            ))}
-          </div>
-        )}
+          {expanded && (
+            <div className='tool-group-list'>
+              {otherItems.map((it, idx) => (
+                <ToolRenderer
+                  key={it.item.id || idx}
+                  item={it.item}
+                  resultItem={it.resultItem}
+                />
+              ))}
+            </div>
+          )}
 
-        {
-          /* Always show the last item, but if expanded, it's just part of the list visually.
-            If collapsed, it appears "below" the header.
-            Actually, to make it look like "part of the list", we should just put it in the flow.
+          {
+            /* Always show the last item, but if expanded, it's just part of the list visually.
+              If collapsed, it appears "below" the header.
+              Actually, to make it look like "part of the list", we should just put it in the flow.
 
-            When collapsed: Header + Last Item
-            When expanded: Header + Other Items + Last Item
-        */
-        }
-        <div className='tool-group-last-item'>
-          <ToolRenderer
-            item={lastItem.item}
-            resultItem={lastItem.resultItem}
-          />
+              When collapsed: Header + Last Item
+              When expanded: Header + Other Items + Last Item
+          */
+          }
+          <div className='tool-group-last-item'>
+            <ToolRenderer
+              item={lastItem.item}
+              resultItem={lastItem.resultItem}
+            />
+          </div>
         </div>
-      </div>
 
-      {footer && (
-        <div className='tool-group-footer-wrapper'>
-          <MessageFooter msg={footer.originalMessage} isUser={false} />
-        </div>
-      )}
-    </div>
+        {footer && isDebugMode && (
+          <div className='tool-group-footer-wrapper'>
+            <MessageFooter msg={footer.originalMessage} isUser={false} />
+          </div>
+        )}
+      </div>
+    </MessageContextMenu>
   )
 }
 
 const areToolGroupPropsEqual = (prev: ToolGroupProps, next: ToolGroupProps) => {
+  if (prev.anchorId !== next.anchorId) return false
   if (prev.items.length !== next.items.length) return false
   for (let i = 0; i < prev.items.length; i++) {
     if (prev.items[i].item !== next.items[i].item) return false
     if (prev.items[i].resultItem !== next.items[i].resultItem) return false
   }
+  if (prev.originalMessage !== next.originalMessage) return false
+  if (prev.sessionId !== next.sessionId) return false
   if (prev.footer == null && next.footer == null) return true
   if (prev.footer == null || next.footer == null) return false
   return prev.footer.originalMessage === next.footer.originalMessage &&

package/src/components/config/ConfigSectionForm.tsx

@@ -3,6 +3,7 @@ import './ConfigSectionForm.scss'
 import { Collapse, Empty, Input, InputNumber, Select, Slider, Switch } from 'antd'
 import type { ReactNode } from 'react'
 
+import { normalizeSendShortcut, resolveSendShortcut } from '#~/utils/shortcutUtils'
 import { ComplexTextEditor, StringArrayEditor } from './ConfigEditors'
 import { FieldRow } from './ConfigFieldRow'
 import { ShortcutInput } from './ConfigShortcutInput'
@@ -297,11 +298,17 @@ export const SectionForm = ({
       }
     } else if (field.type === 'shortcut') {
       const isMac = navigator.platform.includes('Mac')
+      const rawValue = typeof valueToUse === 'string' ? valueToUse : ''
+      const isSendMessageShortcut = field.shortcutKind === 'sendMessage'
       control = (
         <ShortcutInput
-          value={typeof valueToUse === 'string' ? valueToUse : ''}
+          value={rawValue}
+          displayValue={isSendMessageShortcut ? resolveSendShortcut(rawValue, isMac) : undefined}
           onChange={(next) => handleValueChange(next)}
           placeholder={t('config.editor.shortcutPlaceholder')}
+          normalizeShortcut={isSendMessageShortcut
+            ? (next) => normalizeSendShortcut(next, isMac)
+            : undefined}
           isMac={isMac}
           t={t}
         />

package/src/components/config/ConfigShortcutInput.tsx

@@ -7,18 +7,23 @@ import { formatShortcutLabel, getShortcutFromEvent } from '../../utils/shortcutU
 
 export const ShortcutInput = ({
   value,
+  displayValue,
   onChange,
   placeholder,
+  normalizeShortcut,
   isMac,
   t
 }: {
   value: string
+  displayValue?: string
   onChange: (nextValue: string) => void
   placeholder: string
+  normalizeShortcut?: (nextValue: string) => string | null
   isMac: boolean
   t: (key: string) => string
 }) => {
-  const label = value.trim() === '' ? '' : formatShortcutLabel(value, isMac)
+  const effectiveValue = (displayValue ?? value).trim()
+  const label = effectiveValue === '' ? '' : formatShortcutLabel(effectiveValue, isMac)
   return (
     <div className='config-shortcut-input'>
       <Input
@@ -33,8 +38,10 @@ export const ShortcutInput = ({
           }
           const nextShortcut = getShortcutFromEvent(event)
           if (nextShortcut == null) return
+          const normalizedShortcut = normalizeShortcut?.(nextShortcut) ?? nextShortcut
+          if (normalizedShortcut == null) return
           event.preventDefault()
-          onChange(nextShortcut)
+          onChange(normalizedShortcut)
         }}
       />
       <Tooltip title={t('config.editor.clearShortcut')}>

package/src/components/config/configSchema.ts

@@ -20,6 +20,7 @@ export interface FieldSpec {
   path: string[]
   type: FieldValueType
   defaultValue: unknown
+  shortcutKind?: 'sendMessage'
   icon?: string
   options?: FieldOption[]
   placeholderKey?: string
@@ -312,6 +313,12 @@ export const configSchema: Record<string, FieldSpec[]> = {
       type: 'json',
       defaultValue: [],
       icon: 'extension'
+    },
+    {
+      path: ['marketplaces'],
+      type: 'json',
+      defaultValue: {},
+      icon: 'store'
     }
   ],
   mcp: [
@@ -329,7 +336,10 @@ export const configSchema: Record<string, FieldSpec[]> = {
   shortcuts: [
     { path: ['newSession'], type: 'shortcut', defaultValue: '', icon: 'add_comment' },
     { path: ['openConfig'], type: 'shortcut', defaultValue: '', icon: 'settings' },
-    { path: ['sendMessage'], type: 'shortcut', defaultValue: '', icon: 'send' },
-    { path: ['clearInput'], type: 'shortcut', defaultValue: '', icon: 'clear' }
+    { path: ['sendMessage'], type: 'shortcut', shortcutKind: 'sendMessage', defaultValue: '', icon: 'send' },
+    { path: ['clearInput'], type: 'shortcut', defaultValue: '', icon: 'clear' },
+    { path: ['switchModel'], type: 'shortcut', defaultValue: '', icon: 'model_training' },
+    { path: ['switchEffort'], type: 'shortcut', defaultValue: '', icon: 'psychology' },
+    { path: ['switchPermissionMode'], type: 'shortcut', defaultValue: '', icon: 'lock' }
   ]
 }

package/src/components/config/record-editors/ModelServicesRecordEditor.tsx

@@ -165,19 +165,6 @@ export const ModelServicesRecordEditor = ({
                     t={t}
                   />
                 </FieldRow>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.modelsAlias.label')}
-                  description={t('config.fields.modelServices.item.modelsAlias.desc')}
-                  icon={getTypeIcon('object')}
-                  layout='stacked'
-                >
-                  <ComplexTextEditor
-                    value={recordValue.modelsAlias ?? {}}
-                    onChange={(next) => {
-                      onChange({ ...value, [key]: { ...recordValue, modelsAlias: next } })
-                    }}
-                  />
-                </FieldRow>
                 <FieldRow
                   title={t('config.fields.modelServices.item.timeoutMs.label')}
                   description={t('config.fields.modelServices.item.timeoutMs.desc')}
@@ -262,7 +249,6 @@ export const ModelServicesRecordEditor = ({
                     apiBaseUrl: '',
                     apiKey: '',
                     models: [],
-                    modelsAlias: {},
                     timeoutMs: undefined,
                     maxOutputTokens: undefined,
                     extra: {}

package/src/components/dock-panel/DockPanel.scss

@@ -0,0 +1,152 @@
+.dock-panel {
+  flex: 0 0 var(--dock-panel-current-height, var(--dock-panel-height, 240px));
+  height: var(--dock-panel-current-height, var(--dock-panel-height, 240px));
+  min-height: 0;
+  max-height: var(--dock-panel-max-height, 520px);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: var(--dock-panel-padding-top, 12px) 12px
+    var(--dock-panel-padding-bottom, 12px);
+  background-color: var(--bg-color);
+  border-top: 1px solid var(--dock-panel-border-color, var(--border-color));
+  gap: 6px;
+  overflow: hidden;
+  opacity: var(--dock-panel-opacity, 1);
+  transform: translateY(var(--dock-panel-translate-y, 0));
+  transition:
+    flex-basis .24s cubic-bezier(.22, 1, .36, 1),
+    height .24s cubic-bezier(.22, 1, .36, 1),
+    padding-top .24s cubic-bezier(.22, 1, .36, 1),
+    padding-bottom .24s cubic-bezier(.22, 1, .36, 1),
+    opacity .18s ease,
+    transform .24s cubic-bezier(.22, 1, .36, 1),
+    border-top-color .18s ease;
+
+  &.is-resizing {
+    cursor: row-resize;
+  }
+}
+
+.dock-panel.is-closing {
+  --dock-panel-current-height: 0px;
+  --dock-panel-padding-top: 0px;
+  --dock-panel-padding-bottom: 0px;
+  --dock-panel-border-color: transparent;
+  --dock-panel-opacity: 0;
+  --dock-panel-translate-y: 20px;
+  pointer-events: none;
+}
+
+.dock-panel__resize-handle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 24px;
+  margin: -12px -12px 0;
+  padding: 12px 12px 0;
+  cursor: row-resize;
+  flex-shrink: 0;
+  transition: opacity .18s ease;
+
+  &:hover {
+    opacity: .92;
+  }
+}
+
+.dock-panel__header-main {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.dock-panel__title,
+.dock-panel__meta {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 6px;
+  background-color: var(--sub-bg-color);
+  color: var(--text-color);
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dock-panel__title {
+  font-weight: 600;
+  flex: 0 1 auto;
+  max-width: 100%;
+}
+
+.dock-panel__meta {
+  flex: 0 1 auto;
+  max-width: min(180px, 40%);
+  color: var(--sub-text-color);
+  font-family:
+    ui-monospace, sfmono-regular, 'SF Mono', menlo, consolas, monospace;
+}
+
+.dock-panel__header-spacer {
+  flex: 1;
+  min-width: 24px;
+}
+
+.dock-panel__header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dock-panel__close-btn.ant-btn.ant-btn-text {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  color: var(--sub-text-color, #6b7280);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color .2s ease, color .2s ease;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  &:hover {
+    background-color: var(--nav-hover-bg, #f3f4f6);
+    color: var(--text-color, #111827);
+  }
+}
+
+.dock-panel__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.dock-panel__footer {
+  flex-shrink: 0;
+}
+
+html.dark .dock-panel__close-btn.ant-btn.ant-btn-text {
+  --nav-hover-bg: #1a1a1a;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dock-panel {
+    transition: none;
+  }
+}

package/src/components/dock-panel/DockPanel.tsx

@@ -0,0 +1,195 @@
+import './DockPanel.scss'
+
+import { Button } from 'antd'
+import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+const DEFAULT_PANEL_HEIGHT = 240
+
+const clampPanelHeight = (height: number, minHeight: number, maxHeight: number) => {
+  return Math.min(Math.max(height, minHeight), Math.max(minHeight, maxHeight))
+}
+
+const shouldIgnoreResizePointerDown = (target: HTMLElement | null) => {
+  if (target == null) {
+    return false
+  }
+
+  return target.closest(
+    'button, a, input, textarea, select, option, [role="button"], [data-dock-panel-no-resize="true"]'
+  ) != null
+}
+
+export function DockPanel({
+  enterMotion = 'slide-up',
+  children,
+  className,
+  closeLabel,
+  defaultHeight = DEFAULT_PANEL_HEIGHT,
+  footer,
+  isOpen = true,
+  maxHeight = 520,
+  meta,
+  minHeight = 180,
+  onClose,
+  resizeLabel,
+  storageKey,
+  title,
+  actions
+}: {
+  enterMotion?: 'none' | 'slide-up'
+  actions?: ReactNode
+  children: ReactNode
+  className?: string
+  closeLabel?: string
+  defaultHeight?: number
+  footer?: ReactNode
+  isOpen?: boolean
+  maxHeight?: number
+  meta?: ReactNode
+  minHeight?: number
+  onClose?: () => void
+  resizeLabel: string
+  storageKey: string
+  title: ReactNode
+}) {
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const resizeSessionRef = useRef<{ maxHeight: number; startHeight: number; startY: number } | null>(null)
+  const [isResizing, setIsResizing] = useState(false)
+  const [panelHeight, setPanelHeight] = useState(() => {
+    const storedHeight = Number(localStorage.getItem(storageKey))
+    return Number.isFinite(storedHeight) && storedHeight > 0
+      ? clampPanelHeight(storedHeight, minHeight, maxHeight)
+      : clampPanelHeight(defaultHeight, minHeight, maxHeight)
+  })
+
+  useEffect(() => {
+    localStorage.setItem(storageKey, String(panelHeight))
+  }, [panelHeight, storageKey])
+
+  useEffect(() => {
+    return () => {
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isResizing) {
+      return
+    }
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const resizeSession = resizeSessionRef.current
+      if (resizeSession == null) {
+        return
+      }
+
+      const nextHeight = clampPanelHeight(
+        resizeSession.startHeight + resizeSession.startY - event.clientY,
+        minHeight,
+        resizeSession.maxHeight
+      )
+
+      setPanelHeight(nextHeight)
+    }
+
+    const stopResizing = () => {
+      resizeSessionRef.current = null
+      setIsResizing(false)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+
+    window.addEventListener('pointermove', handlePointerMove)
+    window.addEventListener('pointerup', stopResizing)
+    window.addEventListener('pointercancel', stopResizing)
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove)
+      window.removeEventListener('pointerup', stopResizing)
+      window.removeEventListener('pointercancel', stopResizing)
+    }
+  }, [isResizing, minHeight])
+
+  const handleResizePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (shouldIgnoreResizePointerDown(event.target as HTMLElement | null)) {
+      return
+    }
+
+    event.preventDefault()
+
+    const panel = panelRef.current
+    const parent = panel?.parentElement
+    const parentHeight = parent?.getBoundingClientRect().height
+
+    resizeSessionRef.current = {
+      startY: event.clientY,
+      startHeight: panel?.getBoundingClientRect().height ?? panelHeight,
+      maxHeight: parentHeight != null ? Math.min(maxHeight, parentHeight - 96) : maxHeight
+    }
+
+    setIsResizing(true)
+    document.body.style.cursor = 'row-resize'
+    document.body.style.userSelect = 'none'
+  }
+
+  const panelStyle = useMemo(
+    () => ({
+      '--dock-panel-height': `${panelHeight}px`,
+      '--dock-panel-max-height': `${maxHeight}px`,
+      '--dock-panel-min-height': `${minHeight}px`
+    }),
+    [maxHeight, minHeight, panelHeight]
+  )
+
+  return (
+    <div
+      ref={panelRef}
+      className={`dock-panel ${isOpen && enterMotion === 'slide-up' ? 'is-entering-slide-up' : ''} ${
+        isOpen ? 'is-open' : 'is-closing'
+      } ${className ?? ''} ${isResizing ? 'is-resizing' : ''}`}
+      style={panelStyle as CSSProperties}
+    >
+      <div
+        className='dock-panel__resize-handle'
+        title={resizeLabel}
+        onPointerDown={handleResizePointerDown}
+      >
+        <div className='dock-panel__header-main'>
+          <span className='dock-panel__title'>{title}</span>
+          {meta != null && (
+            <span className='dock-panel__meta'>{meta}</span>
+          )}
+        </div>
+        <div className='dock-panel__header-spacer' />
+        {(actions != null || onClose != null) && (
+          <div className='dock-panel__header-actions'>
+            {actions}
+            {onClose != null && closeLabel != null && (
+              <Button
+                type='text'
+                className='dock-panel__close-btn'
+                data-dock-panel-no-resize='true'
+                icon={<span className='material-symbols-rounded'>close</span>}
+                title={closeLabel}
+                aria-label={closeLabel}
+                onClick={onClose}
+              />
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className='dock-panel__body'>
+        {children}
+      </div>
+
+      {footer != null && (
+        <div className='dock-panel__footer'>
+          {footer}
+        </div>
+      )}
+    </div>
+  )
+}