@vibe-forge/client 0.9.0 → 0.10.1

package/src/components/chat/messages/message-content-utils.ts

@@ -0,0 +1,121 @@
+import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
+
+export type EditableMessageItem =
+  | Extract<ChatMessageContent, { type: 'text' }>
+  | Extract<ChatMessageContent, { type: 'image' }>
+
+export type EditableMessageContent = string | EditableMessageItem[]
+
+const isEditableMessageItem = (item: ChatMessageContent): item is EditableMessageItem => {
+  return item.type === 'text' || item.type === 'image'
+}
+
+const cloneEditableMessageContent = (content: EditableMessageContent) => {
+  if (typeof content === 'string') {
+    return content
+  }
+
+  return content.map((item) => {
+    if (item.type === 'text') {
+      return { type: 'text', text: item.text } satisfies ChatMessageContent
+    }
+
+    return {
+      type: 'image',
+      url: item.url,
+      name: item.name,
+      size: item.size,
+      mimeType: item.mimeType
+    } satisfies ChatMessageContent
+  })
+}
+
+export const normalizeEditableMessageContent = (content: string | ChatMessageContent[] | undefined) => {
+  if (content == null) {
+    return undefined
+  }
+
+  if (typeof content === 'string') {
+    const trimmed = content.trim()
+    return trimmed === '' ? undefined : trimmed
+  }
+
+  const normalized: EditableMessageItem[] = []
+  for (const item of content) {
+    if (!isEditableMessageItem(item)) {
+      return undefined
+    }
+
+    if (item.type === 'text') {
+      const text = item.text.trim()
+      if (text !== '') {
+        normalized.push({ type: 'text', text })
+      }
+      continue
+    }
+
+    normalized.push({
+      type: 'image',
+      url: item.url,
+      name: item.name,
+      size: item.size,
+      mimeType: item.mimeType
+    })
+  }
+
+  return normalized.length === 0 ? undefined : normalized
+}
+
+export const getEditableMessageContent = (message: ChatMessage) => {
+  if (typeof message.content === 'string') {
+    const trimmed = message.content.trim()
+    return trimmed === '' ? undefined : message.content
+  }
+
+  if (!Array.isArray(message.content) || message.toolCall != null) {
+    return undefined
+  }
+
+  const editableItems = message.content.filter(isEditableMessageItem)
+  if (editableItems.length !== message.content.length || editableItems.length === 0) {
+    return undefined
+  }
+
+  const hasVisibleContent = editableItems.some((item) => item.type === 'image' || item.text.trim() !== '')
+  if (!hasVisibleContent) {
+    return undefined
+  }
+
+  return cloneEditableMessageContent(editableItems)
+}
+
+export const isSameEditableMessageContent = (
+  left: EditableMessageContent | undefined,
+  right: EditableMessageContent | undefined
+) => {
+  const normalizedLeft = normalizeEditableMessageContent(left)
+  const normalizedRight = normalizeEditableMessageContent(right)
+
+  return JSON.stringify(normalizedLeft) === JSON.stringify(normalizedRight)
+}
+
+export const getCopyableMessageText = (message: ChatMessage) => {
+  if (typeof message.content === 'string') {
+    return message.content.trim() === '' ? undefined : message.content
+  }
+
+  if (!Array.isArray(message.content)) {
+    return undefined
+  }
+
+  const textItems = message.content
+    .filter((item): item is Extract<ChatMessageContent, { type: 'text' }> => item.type === 'text')
+    .map(item => item.text)
+    .filter(text => text.trim() !== '')
+
+  if (textItems.length === 0) {
+    return undefined
+  }
+
+  return textItems.join('\n\n')
+}

package/src/components/chat/messages/message-turns.ts

@@ -0,0 +1,88 @@
+import type { ChatRenderItem } from './message-utils'
+
+interface MessageTurnDraft {
+  id: string
+  items: ChatRenderItem[]
+  startedByUser: boolean
+}
+
+export interface MessageTurn {
+  durationMs: number | null
+  hiddenCount: number
+  id: string
+  isCollapsed: boolean
+  isExpandable: boolean
+  items: ChatRenderItem[]
+  visibleItems: ChatRenderItem[]
+}
+
+const isUserTurnStarter = (item: ChatRenderItem) => {
+  return item.type === 'message' && item.originalMessage.role === 'user'
+}
+
+export const buildMessageTurns = (params: {
+  expandedTurnIds: Set<string>
+  hashAnchorId?: string
+  keepLastTurnExpanded: boolean
+  renderItems: ChatRenderItem[]
+}): MessageTurn[] => {
+  const drafts: MessageTurnDraft[] = []
+  let currentDraft: MessageTurnDraft | null = null
+
+  for (const item of params.renderItems) {
+    if (isUserTurnStarter(item)) {
+      if (currentDraft != null) {
+        drafts.push(currentDraft)
+      }
+
+      currentDraft = {
+        id: item.originalMessage.id,
+        items: [item],
+        startedByUser: true
+      }
+      continue
+    }
+
+    if (currentDraft == null) {
+      currentDraft = {
+        id: `orphan:${item.anchorId}`,
+        items: [item],
+        startedByUser: false
+      }
+      continue
+    }
+
+    currentDraft.items.push(item)
+  }
+
+  if (currentDraft != null) {
+    drafts.push(currentDraft)
+  }
+
+  return drafts.map((draft, index) => {
+    const isLastTurn = index === drafts.length - 1
+    const startTimestamp = draft.items[0]?.originalMessage.createdAt ?? null
+    const endTimestamp = draft.items[draft.items.length - 1]?.originalMessage.createdAt ?? null
+    const hiddenCount = Math.max(draft.items.length - 2, 0)
+    const isExpandable = draft.startedByUser && hiddenCount > 0
+    const hasHashTarget = params.hashAnchorId != null && params.hashAnchorId !== ''
+      ? draft.items.some((item) => item.anchorId === params.hashAnchorId)
+      : false
+    const shouldCollapseByDefault = isExpandable && !(isLastTurn && params.keepLastTurnExpanded)
+    const isCollapsed = shouldCollapseByDefault && !params.expandedTurnIds.has(draft.id) && !hasHashTarget
+
+    return {
+      durationMs: startTimestamp != null && endTimestamp != null
+        ? Math.max(endTimestamp - startTimestamp, 0)
+        : null,
+      hiddenCount,
+      id: draft.id,
+      isCollapsed,
+      isExpandable,
+      items: draft.items,
+      visibleItems: isCollapsed
+        ? [draft.items[0]!, draft.items[draft.items.length - 1]!]
+        : draft.items
+    }
+  })
+}

package/src/components/chat/messages/message-utils.ts

@@ -1,6 +1,10 @@
 import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
 
+import { getMessageAnchorId } from '#~/utils/chat-links.js'
+
 export interface ToolGroupItem {
+  anchorId: string
+  originalMessage: ChatMessage
   type: 'tool-group'
   id: string
   items: {
@@ -16,6 +20,8 @@ export interface ToolGroupItem {
 }
 
 export interface MessageRenderItem {
+  anchorId: string
+  originalMessage: ChatMessage
   type: 'message'
   message: ChatMessage
   isFirstInGroup: boolean
@@ -52,6 +58,8 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
       // If content is null/empty but legacy toolCall exists, we should render it
       if (msg && msg.toolCall) {
         result.push({
+          anchorId: getMessageAnchorId(msg.id),
+          originalMessage: msg,
           type: 'message',
           message: msg,
           isFirstInGroup: i === 0 || (i > 0 && messages[i - 1]?.role !== msg.role)
@@ -66,6 +74,8 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
 
     if (typeof msg.content === 'string') {
       result.push({
+        anchorId: getMessageAnchorId(msg.id),
+        originalMessage: msg,
         type: 'message',
         message: msg,
         isFirstInGroup
@@ -87,6 +97,8 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
       const flushTools = () => {
         if (currentToolGroup.length > 0) {
           result.push({
+            anchorId: getMessageAnchorId(msg.id, `tool-${producedCount}`),
+            originalMessage: msg,
             type: 'tool-group',
             id: `group-${msg.id}-${producedCount}`,
             items: [...currentToolGroup],
@@ -100,6 +112,8 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
       const flushText = () => {
         if (textParts.length > 0) {
           result.push({
+            anchorId: getMessageAnchorId(msg.id, `text-${producedCount}`),
+            originalMessage: msg,
             type: 'message',
             message: {
               ...msg,
@@ -114,7 +128,7 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
       }
 
       for (const item of content) {
-        if (item.type === 'text' || item.type === 'image') {
+        if (item.type === 'text' || item.type === 'image' || item.type === 'file') {
           flushTools()
           textParts.push(item)
         } else if (item.type === 'tool_use') {
@@ -130,6 +144,8 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
       // Handle legacy toolCall if no other content was produced
       if (producedCount === 0 && msg.toolCall) {
         result.push({
+          anchorId: getMessageAnchorId(msg.id),
+          originalMessage: msg,
           type: 'message',
           message: msg,
           isFirstInGroup
@@ -158,6 +174,8 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
       const prev = mergedResult[mergedResult.length - 1]
       if (prev && prev.type === 'tool-group') {
         prev.items.push(...item.items)
+        prev.originalMessage = item.originalMessage
+        prev.anchorId = item.anchorId
         if (item.footer) {
           prev.footer = item.footer
         }

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

@@ -0,0 +1,86 @@
+.adapter-select,
+.adapter-select--locked {
+  width: 28px;
+  min-width: 28px;
+}
+
+.adapter-select {
+  height: var(--sender-control-height);
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--sender-control-radius);
+  align-self: center;
+  flex-shrink: 0;
+  color: var(--placeholder-color, #9ca3af);
+  transition: background-color .18s ease, color .18s ease;
+
+  .ant-select-selector,
+  &.ant-select-single .ant-select-selector {
+    height: var(--sender-control-height) !important;
+    min-height: var(--sender-control-height) !important;
+    justify-content: center;
+    align-items: center;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    display: flex;
+  }
+
+  .ant-select-selection-wrap,
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 0;
+    padding: 0 !important;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    line-height: 1 !important;
+  }
+
+  .adapter-option {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    flex: 0 0 100%;
+  }
+
+  .adapter-option__text,
+  .ant-select-arrow {
+    display: none !important;
+  }
+
+  &.ant-select-disabled {
+    opacity: 1;
+  }
+}
+
+.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);
+}
+
+.adapter-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.adapter-option__icon {
+  width: 16px;
+  height: 16px;
+  display: block;
+  object-fit: contain;
+  flex-shrink: 0;
+  opacity: .9;
+}

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

@@ -0,0 +1,54 @@
+import '../sender-toolbar/SenderSelectShared.scss'
+import './AdapterSelectControl.scss'
+import './AdapterSelectDropdown.scss'
+
+import { Select, Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { SenderToolbarData, SenderToolbarHandlers, SenderToolbarState } from '../../@types/sender-toolbar-types'
+
+export function AdapterSelectControl({
+  state,
+  data,
+  handlers
+}: {
+  state: Pick<SenderToolbarState, 'adapterLocked' | 'modelUnavailable' | 'isThinking' | 'selectedAdapter'>
+  data: Pick<SenderToolbarData, 'adapterOptions'>
+  handlers: Pick<SenderToolbarHandlers, 'onAdapterChange'>
+}) {
+  const { t } = useTranslation()
+  const { adapterLocked, modelUnavailable, isThinking, selectedAdapter } = state
+  const { adapterOptions } = data
+  const { onAdapterChange } = handlers
+  const isDisabled = adapterLocked || modelUnavailable || isThinking
+
+  if (adapterOptions == null || adapterOptions.length <= 1) {
+    return null
+  }
+
+  return (
+    <Tooltip title={adapterLocked ? t('chat.adapterLockedTooltip') : undefined} placement='top' arrow={false}>
+      <span
+        className={`adapter-select-tooltip-target ${adapterLocked ? 'adapter-select-tooltip-target--locked' : ''}`
+          .trim()}
+      >
+        <div className={`sender-select-shell sender-select-shell--adapter ${isDisabled ? 'is-disabled' : ''}`.trim()}>
+          <Select
+            className={`adapter-select ${adapterLocked ? 'adapter-select--locked' : ''}`.trim()}
+            classNames={{ popup: { root: 'adapter-select-popup' } }}
+            value={selectedAdapter}
+            options={adapterOptions}
+            showSearch={false}
+            allowClear={false}
+            disabled={isDisabled}
+            onChange={(value) => onAdapterChange?.(value)}
+            placeholder={t('chat.adapterSelectPlaceholder', { defaultValue: 'Adapter' })}
+            optionLabelProp='label'
+            popupMatchSelectWidth={false}
+            suffixIcon={null}
+          />
+        </div>
+      </span>
+    </Tooltip>
+  )
+}

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

@@ -0,0 +1,42 @@
+.adapter-select-popup {
+  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: 28px;
+    margin: 0;
+    padding: 4px 8px;
+    border-radius: 8px;
+    color: var(--text-color);
+    font-weight: 400 !important;
+  }
+
+  .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;
+  }
+
+  .ant-select-item-option-content,
+  .adapter-option,
+  .adapter-option__text {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 400 !important;
+  }
+}

package/src/components/chat/sender/@components/effort-select/EffortSelectControl.scss

@@ -0,0 +1,68 @@
+.effort-select {
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    justify-content: flex-start;
+    color: var(--placeholder-color, #9ca3af);
+    -webkit-text-fill-color: var(--placeholder-color, #9ca3af);
+  }
+
+  .ant-select-selection-item .effort-option__icon,
+  .ant-select-selection-placeholder .effort-option__icon,
+  .ant-select-selection-item .effort-option__text,
+  .ant-select-selection-placeholder .effort-option__text {
+    color: inherit !important;
+    -webkit-text-fill-color: inherit !important;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
+
+  &.ant-select-open .ant-select-selection-item,
+  &.ant-select-open .ant-select-selection-placeholder,
+  &.ant-select-open .effort-option__text,
+  &.ant-select-open .effort-option__icon,
+  &.ant-select-open .sender-select-arrow,
+  &:hover .ant-select-selection-item,
+  &:hover .ant-select-selection-placeholder,
+  &:hover .effort-option__text,
+  &:hover .effort-option__icon,
+  &:hover .sender-select-arrow,
+  &.ant-select-focused .ant-select-selection-item,
+  &.ant-select-focused .ant-select-selection-placeholder,
+  &.ant-select-focused .effort-option__text,
+  &.ant-select-focused .effort-option__icon,
+  &.ant-select-focused .sender-select-arrow {
+    color: var(--sender-control-hover-color) !important;
+    -webkit-text-fill-color: var(--sender-control-hover-color) !important;
+  }
+}
+
+.effort-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  height: 100%;
+}
+
+.effort-option__icon {
+  flex-shrink: 0;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.effort-option__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.effort-select-popup {
+  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;
+}

package/src/components/chat/sender/@components/effort-select/EffortSelectControl.tsx

@@ -0,0 +1,137 @@
+import '../sender-toolbar/SenderSelectShared.scss'
+import '../sender-toolbar/SenderSelectBase.scss'
+import './EffortSelectControl.scss'
+import './EffortSelectDropdown.scss'
+
+import { Select } from 'antd'
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
+import type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../../@types/sender-toolbar-types'
+import { effortIconMap } from '../../@utils/sender-constants'
+
+const renderSelectArrow = (onMouseDown: (event: React.MouseEvent<HTMLSpanElement>) => void) => (
+  <span className='material-symbols-rounded sender-select-arrow' onMouseDown={onMouseDown}>
+    keyboard_arrow_down
+  </span>
+)
+
+export function EffortSelectControl({
+  state,
+  data,
+  refs,
+  handlers
+}: {
+  state: Pick<
+    SenderToolbarState,
+    'isThinking' | 'modelUnavailable' | 'showModelSelect' | 'showEffortSelect' | 'effort' | 'isMac'
+  >
+  data: Pick<SenderToolbarData, 'effortOptions' | 'composerControlShortcuts'>
+  refs: Pick<SenderToolbarRefs, 'effortSelectRef'>
+  handlers: Pick<
+    SenderToolbarHandlers,
+    | 'onShowModelSelectChange'
+    | 'onShowEffortSelectChange'
+    | 'onOpenEffortSelector'
+    | 'onQueueTextareaFocusRestore'
+    | 'onCloseReferenceActions'
+    | 'onEffortChange'
+  >
+}) {
+  const { t } = useTranslation()
+  const { isThinking, modelUnavailable, showEffortSelect, effort, isMac } = state
+  const { effortOptions, composerControlShortcuts } = data
+  const { effortSelectRef } = refs
+  const {
+    onShowModelSelectChange,
+    onShowEffortSelectChange,
+    onOpenEffortSelector,
+    onQueueTextareaFocusRestore,
+    onCloseReferenceActions,
+    onEffortChange
+  } = handlers
+
+  const decoratedEffortOptions = useMemo(() => {
+    return effortOptions.map(option => ({
+      ...option,
+      label: (
+        <span className={`effort-option effort-option--${option.value}`.trim()}>
+          <span className='material-symbols-rounded effort-option__icon'>{effortIconMap[option.value]}</span>
+          <span className='effort-option__text'>
+            {option.value === 'default' ? t('chat.effortLabels.default') : t(`chat.effortLabels.${option.value}`)}
+          </span>
+        </span>
+      )
+    }))
+  }, [effortOptions, t])
+
+  return (
+    <ShortcutTooltip
+      shortcut={composerControlShortcuts.switchEffort}
+      isMac={isMac}
+      title={t('chat.effortShortcutTooltip')}
+      targetClassName='sender-control-tooltip-target'
+      enabled={!showEffortSelect}
+    >
+      <div className='sender-select-shell'>
+        {!showEffortSelect && !(modelUnavailable || isThinking) && (
+          <button
+            type='button'
+            className='sender-select-body-trigger'
+            aria-label={t('chat.effortShortcutTooltip')}
+            onMouseDown={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              onOpenEffortSelector()
+            }}
+          />
+        )}
+        <Select
+          ref={effortSelectRef}
+          className='effort-select'
+          classNames={{ popup: { root: 'effort-select-popup' } }}
+          open={showEffortSelect}
+          value={effort}
+          options={decoratedEffortOptions}
+          showSearch={false}
+          allowClear={false}
+          disabled={modelUnavailable || isThinking}
+          onChange={(value) => {
+            onEffortChange?.(value)
+            onShowEffortSelectChange(false)
+            onQueueTextareaFocusRestore()
+          }}
+          onOpenChange={(nextOpen) => {
+            if (nextOpen) {
+              onShowModelSelectChange(false)
+              onCloseReferenceActions()
+            } else {
+              onQueueTextareaFocusRestore()
+            }
+            onShowEffortSelectChange(nextOpen)
+          }}
+          placeholder={t('chat.effortSelectPlaceholder')}
+          optionLabelProp='label'
+          popupMatchSelectWidth={false}
+          menuItemSelectedIcon={<span className='material-symbols-rounded effort-select-check-icon'>check</span>}
+          suffixIcon={renderSelectArrow((event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            if (showEffortSelect) {
+              onShowEffortSelectChange(false)
+              onQueueTextareaFocusRestore()
+              return
+            }
+            onOpenEffortSelector()
+          })}
+        />
+      </div>
+    </ShortcutTooltip>
+  )
+}