@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

package/src/components/chat/NewSessionGuideStarterList.tsx

@@ -1,190 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { ConversationStarterConfig } from '@vibe-forge/types'
-
-import { NewSessionGuideStarterSection } from './NewSessionGuideStarterSection'
-import { buildConversationStarterListItems, partitionConversationStarterListItems } from './new-session-guide-config'
-
-const FAVORITE_STARTER_STORAGE_KEY = 'vf_new_session_guide_favorites'
-const RECENT_STARTER_STORAGE_KEY = 'vf_new_session_guide_recent'
-const DEFAULT_VISIBLE_STARTER_COUNT = 8
-const MAX_RECENT_STARTER_COUNT = 3
-
-const readStoredStarterKeys = (storageKey: string) => {
-  try {
-    const raw = localStorage.getItem(storageKey)
-    if (raw == null) return []
-    const parsed = JSON.parse(raw) as unknown
-    return Array.isArray(parsed)
-      ? parsed.filter((item): item is string => typeof item === 'string')
-      : []
-  } catch {
-    return []
-  }
-}
-
-const areListsEqual = (left: string[], right: string[]) => (
-  left.length === right.length && left.every((value, index) => value === right[index])
-)
-
-export function NewSessionGuideStarterList({
-  startupPresets,
-  builtinActions,
-  onApplyStarter
-}: {
-  startupPresets: ConversationStarterConfig[]
-  builtinActions: ConversationStarterConfig[]
-  onApplyStarter: (starter: ConversationStarterConfig) => void
-}) {
-  const { t } = useTranslation()
-  const [searchQuery, setSearchQuery] = useState('')
-  const [showAllRemaining, setShowAllRemaining] = useState(false)
-  const [searchPinnedHeight, setSearchPinnedHeight] = useState<number | null>(null)
-  const [favoriteKeys, setFavoriteKeys] = useState<string[]>(() => readStoredStarterKeys(FAVORITE_STARTER_STORAGE_KEY))
-  const [recentKeys, setRecentKeys] = useState<string[]>(() => readStoredStarterKeys(RECENT_STARTER_STORAGE_KEY))
-  const sectionsRef = useRef<HTMLDivElement | null>(null)
-  const starterItems = useMemo(
-    () => buildConversationStarterListItems(startupPresets, builtinActions),
-    [builtinActions, startupPresets]
-  )
-  const visibleStarterState = useMemo(
-    () =>
-      partitionConversationStarterListItems({
-        items: starterItems,
-        favoriteKeys,
-        recentKeys,
-        query: searchQuery,
-        remainingLimit: showAllRemaining ? starterItems.length : DEFAULT_VISIBLE_STARTER_COUNT
-      }),
-    [favoriteKeys, recentKeys, searchQuery, showAllRemaining, starterItems]
-  )
-
-  useEffect(() => {
-    try {
-      localStorage.setItem(FAVORITE_STARTER_STORAGE_KEY, JSON.stringify(favoriteKeys))
-      localStorage.setItem(RECENT_STARTER_STORAGE_KEY, JSON.stringify(recentKeys))
-    } catch {}
-  }, [favoriteKeys, recentKeys])
-
-  useEffect(() => {
-    const validKeySet = new Set(starterItems.map(item => item.key))
-    setFavoriteKeys((prev) => {
-      const next = prev.filter(key => validKeySet.has(key))
-      return areListsEqual(prev, next) ? prev : next
-    })
-    setRecentKeys((prev) => {
-      const next = prev.filter(key => validKeySet.has(key)).slice(0, MAX_RECENT_STARTER_COUNT)
-      return areListsEqual(prev, next) ? prev : next
-    })
-  }, [starterItems])
-
-  useEffect(() => {
-    setShowAllRemaining(false)
-  }, [searchQuery])
-
-  useEffect(() => {
-    if (!visibleStarterState.isSearchMode && searchPinnedHeight != null) {
-      setSearchPinnedHeight(null)
-    }
-  }, [searchPinnedHeight, visibleStarterState.isSearchMode])
-
-  if (starterItems.length === 0) return null
-
-  const handleToggleFavorite = (key: string) => {
-    setFavoriteKeys(prev => prev.includes(key) ? prev.filter(item => item !== key) : [...prev, key])
-  }
-
-  const handleApplyListItem = (item: typeof starterItems[number]) => {
-    setRecentKeys(prev => [item.key, ...prev.filter(key => key !== item.key)].slice(0, MAX_RECENT_STARTER_COUNT))
-    onApplyStarter(item.starter)
-  }
-  const isExpanded = showAllRemaining && !visibleStarterState.isSearchMode
-  const shouldShowExpand = !visibleStarterState.isSearchMode && visibleStarterState.hiddenRemainingCount > 0
-  const shouldShowCollapse = !visibleStarterState.isSearchMode &&
-    showAllRemaining &&
-    visibleStarterState.totalRemainingCount > DEFAULT_VISIBLE_STARTER_COUNT
-  const shouldShowFooter = shouldShowExpand || shouldShowCollapse
-  const sectionsStyle = visibleStarterState.isSearchMode && searchPinnedHeight != null
-    ? { minHeight: `${searchPinnedHeight}px` }
-    : undefined
-
-  const handleSearchChange = (nextQuery: string) => {
-    if (searchQuery.length === 0 && nextQuery.length > 0) {
-      const nextHeight = sectionsRef.current?.getBoundingClientRect().height
-      if (nextHeight != null && Number.isFinite(nextHeight)) {
-        setSearchPinnedHeight(Math.round(nextHeight))
-      }
-    }
-    if (nextQuery.length === 0) {
-      setSearchPinnedHeight(null)
-    }
-    setSearchQuery(nextQuery)
-  }
-
-  return (
-    <div
-      ref={sectionsRef}
-      style={sectionsStyle}
-      className={['new-session-guide__sections', isExpanded ? 'is-expanded' : ''].filter(Boolean).join(' ')}
-    >
-      <div
-        className={['new-session-guide__sections-header', isExpanded ? 'is-expanded' : ''].filter(Boolean).join(' ')}
-      >
-        <label className='new-session-guide__search'>
-          <span className='material-symbols-rounded new-session-guide__search-icon'>search</span>
-          <input
-            type='search'
-            className='new-session-guide__search-input'
-            value={searchQuery}
-            placeholder={t('chat.newSessionGuide.searchPlaceholder')}
-            onChange={event => handleSearchChange(event.target.value)}
-          />
-        </label>
-      </div>
-      <div className={['new-session-guide__sections-body', isExpanded ? 'is-expanded' : ''].filter(Boolean).join(' ')}>
-        {!visibleStarterState.isSearchMode && (
-          <NewSessionGuideStarterSection
-            items={visibleStarterState.favorites}
-            label={t('chat.newSessionGuide.favoriteTitle')}
-            favoriteKeys={favoriteKeys}
-            recentKeys={visibleStarterState.recentKeys}
-            onToggleFavorite={handleToggleFavorite}
-            onApplyStarter={handleApplyListItem}
-          />
-        )}
-        {visibleStarterState.visibleRemaining.length > 0 && (
-          <NewSessionGuideStarterSection
-            items={visibleStarterState.visibleRemaining}
-            favoriteKeys={favoriteKeys}
-            recentKeys={visibleStarterState.recentKeys}
-            showRecentBadge={!visibleStarterState.isSearchMode}
-            onToggleFavorite={handleToggleFavorite}
-            onApplyStarter={handleApplyListItem}
-          />
-        )}
-        {visibleStarterState.isSearchMode && visibleStarterState.visibleRemaining.length === 0 && (
-          <div className='new-session-guide__empty-search'>{t('chat.newSessionGuide.emptySearch')}</div>
-        )}
-      </div>
-      {shouldShowFooter && (
-        <div className='new-session-guide__sections-footer'>
-          {shouldShowExpand && (
-            <button type='button' className='new-session-guide__more-button' onClick={() => setShowAllRemaining(true)}>
-              {t('chat.newSessionGuide.showMore', { count: visibleStarterState.hiddenRemainingCount })}
-            </button>
-          )}
-          {shouldShowCollapse && (
-            <button
-              type='button'
-              className='new-session-guide__more-button is-secondary'
-              onClick={() => setShowAllRemaining(false)}
-            >
-              {t('chat.newSessionGuide.showLess')}
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/chat/NewSessionGuideStarterSection.tsx

@@ -1,121 +0,0 @@
-import { Tooltip } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import type { ConversationStarterConfig } from '@vibe-forge/types'
-
-import type { ConversationStarterListItem } from './new-session-guide-config'
-import { normalizeConversationStarterMode } from './new-session-guide-config'
-
-const trimText = (value: string | undefined) => value?.trim() ?? ''
-
-const resolveStarterIcon = (starter: ConversationStarterConfig) => {
-  const customIcon = trimText(starter.icon)
-  if (customIcon !== '') return customIcon
-
-  switch (normalizeConversationStarterMode(starter.mode)) {
-    case 'workspace':
-      return 'workspaces'
-    case 'entity':
-      return 'group_work'
-    case 'spec':
-      return 'account_tree'
-    default:
-      return 'bolt'
-  }
-}
-
-const buildFallbackTitle = (
-  item: ConversationStarterListItem,
-  presetPrefix: string,
-  actionPrefix: string
-) => {
-  const title = trimText(item.starter.title)
-  if (title !== '') return title
-  return `${item.source === 'builtinActions' ? actionPrefix : presetPrefix} #${item.sourceIndex + 1}`
-}
-
-export function NewSessionGuideStarterSection({
-  items,
-  label,
-  favoriteKeys,
-  recentKeys,
-  showRecentBadge = true,
-  onToggleFavorite,
-  onApplyStarter
-}: {
-  items: ConversationStarterListItem[]
-  label?: string
-  favoriteKeys: string[]
-  recentKeys: string[]
-  showRecentBadge?: boolean
-  onToggleFavorite: (key: string) => void
-  onApplyStarter: (item: ConversationStarterListItem) => void
-}) {
-  const { t } = useTranslation()
-
-  if (items.length === 0) return null
-
-  return (
-    <section className='new-session-guide__section'>
-      {label != null && label !== '' && <div className='new-session-guide__section-title'>{label}</div>}
-      <div className='new-session-guide__list' role='list'>
-        {items.map((item) => {
-          const isFavorite = favoriteKeys.includes(item.key)
-          const isRecent = recentKeys.includes(item.key)
-          const description = trimText(item.starter.description)
-
-          return (
-            <div key={item.key} className='new-session-guide__list-row' role='listitem'>
-              <Tooltip
-                title={description !== '' ? description : undefined}
-                placement='topLeft'
-                mouseEnterDelay={2}
-              >
-                <button
-                  type='button'
-                  className='new-session-guide__list-item'
-                  onClick={() => onApplyStarter(item)}
-                >
-                  <span className='material-symbols-rounded new-session-guide__list-item-icon'>
-                    {resolveStarterIcon(item.starter)}
-                  </span>
-                  <span className='new-session-guide__list-item-copy'>
-                    <span className='new-session-guide__list-item-title-row'>
-                      <span className='new-session-guide__list-item-title'>
-                        {buildFallbackTitle(
-                          item,
-                          t('chat.newSessionGuide.fallbackPresetPrefix'),
-                          t('chat.newSessionGuide.fallbackActionPrefix')
-                        )}
-                      </span>
-                      {showRecentBadge && isRecent && (
-                        <span className='new-session-guide__status-badge'>
-                          {t('chat.newSessionGuide.recentTitle')}
-                        </span>
-                      )}
-                    </span>
-                  </span>
-                </button>
-              </Tooltip>
-              <button
-                type='button'
-                className={['new-session-guide__favorite-button', isFavorite ? 'is-active' : ''].filter(Boolean).join(
-                  ' '
-                )}
-                aria-label={t(
-                  isFavorite ? 'chat.newSessionGuide.unfavoriteAction' : 'chat.newSessionGuide.favoriteAction'
-                )}
-                title={t(
-                  isFavorite ? 'chat.newSessionGuide.unfavoriteAction' : 'chat.newSessionGuide.favoriteAction'
-                )}
-                onClick={() => onToggleFavorite(item.key)}
-              >
-                <span className='material-symbols-rounded'>{isFavorite ? 'star' : 'star_outline'}</span>
-              </button>
-            </div>
-          )
-        })}
-      </div>
-    </section>
-  )
-}

package/src/components/chat/QueuedMessagesCard.scss

@@ -1,195 +0,0 @@
-.queued-messages-card {
-  &__summary {
-    align-items: center;
-  }
-
-  &__body {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &__headline {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-  }
-
-  &__headline-icon {
-    flex: 0 0 auto;
-    font-size: 15px;
-    color: var(--primary-color, #2563eb);
-  }
-
-  &__headline-copy {
-    min-width: 0;
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-    flex-wrap: wrap;
-  }
-
-  &__headline-title {
-    font-size: 11px;
-    font-weight: 600;
-    line-height: 1.25;
-    color: var(--text-color);
-  }
-
-  &__headline-meta {
-    font-size: 10px;
-    line-height: 1.2;
-    color: var(--sub-text-color, #6b7280);
-  }
-
-  &__list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    padding: 5px 8px;
-    border: 1px solid rgba(148, 163, 184, .16);
-    border-radius: 10px;
-    background: transparent;
-    transition: background-color .18s ease, border-color .18s ease;
-
-    &:hover {
-      background: var(--tag-hover-bg, rgba(148, 163, 184, .08));
-      border-color: rgba(148, 163, 184, .26);
-    }
-  }
-
-  &__item-main {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex: 1;
-  }
-
-  &__drag {
-    flex: 0 0 auto;
-    color: var(--sub-text-color, #94a3b8);
-    font-size: 14px;
-    cursor: grab;
-  }
-
-  &__item-copy {
-    min-width: 0;
-    flex: 1;
-  }
-
-  &__item-summary {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-  }
-
-  &__flags {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    flex: 0 0 auto;
-  }
-
-  &__flag {
-    width: 18px;
-    height: 18px;
-    border-radius: 999px;
-    background: var(--tag-bg, rgba(15, 23, 42, .06));
-    color: var(--sub-text-color, #6b7280);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    .material-symbols-rounded {
-      font-size: 12px;
-      line-height: 1;
-    }
-  }
-
-  &__item-text {
-    display: -webkit-box;
-    overflow: hidden;
-    color: var(--text-color);
-    font-size: 12px;
-    line-height: 1.45;
-    white-space: pre-wrap;
-    word-break: break-word;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-
-  &__actions {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    flex: 0 0 auto;
-  }
-
-  &__action {
-    width: 24px;
-    height: 24px;
-    border: 0;
-    border-radius: 8px;
-    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: var(--tag-hover-bg, rgba(148, 163, 184, .12));
-    }
-
-    .material-symbols-rounded {
-      font-size: 14px;
-      line-height: 1;
-    }
-  }
-
-  &__action--edit {
-    color: var(--sub-text-color, #6b7280);
-
-    &:hover {
-      background: var(--tag-hover-bg, rgba(148, 163, 184, .12));
-      color: var(--text-color);
-    }
-  }
-
-  &__action--move {
-    color: var(--primary-color, #2563eb);
-
-    &:hover {
-      background: color-mix(
-        in srgb,
-        var(--primary-color, #2563eb) 12%,
-        transparent
-      );
-      color: color-mix(
-        in srgb,
-        var(--primary-color, #2563eb) 82%,
-        var(--text-color) 18%
-      );
-    }
-  }
-
-  &__action--delete {
-    color: #dc2626;
-
-    &:hover {
-      background: rgba(220, 38, 38, .12);
-      color: #b91c1c;
-    }
-  }
-}

package/src/components/chat/QueuedMessagesCard.tsx

@@ -1,170 +0,0 @@
-import './QueuedMessagesCard.scss'
-
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { ChatMessageContent, SessionQueuedMessage, SessionQueuedMessageMode } from '@vibe-forge/core'
-
-import { ChatComposerCard } from './ChatComposerCard'
-
-const getSummaryText = (content: ChatMessageContent[]) => {
-  const text = content
-    .filter((item): item is Extract<ChatMessageContent, { type: 'text' }> => item.type === 'text')
-    .map(item => item.text.trim())
-    .filter(Boolean)
-    .join('\n')
-
-  return text
-}
-
-const getContentFlags = (content: ChatMessageContent[]) => ({
-  hasImages: content.some(item => item.type === 'image'),
-  hasReferences: content.some(item => item.type === 'file')
-})
-
-const reorderIds = (ids: string[], draggedId: string, targetId: string) => {
-  if (draggedId === targetId) {
-    return ids
-  }
-
-  const current = [...ids]
-  const fromIndex = current.indexOf(draggedId)
-  const toIndex = current.indexOf(targetId)
-  if (fromIndex === -1 || toIndex === -1) {
-    return ids
-  }
-
-  current.splice(fromIndex, 1)
-  current.splice(toIndex, 0, draggedId)
-  return current
-}
-
-export function QueuedMessagesCard({
-  mode,
-  items,
-  onMove,
-  onDelete,
-  onEdit,
-  onReorder
-}: {
-  mode: SessionQueuedMessageMode
-  items: SessionQueuedMessage[]
-  onMove: (item: SessionQueuedMessage, targetMode: SessionQueuedMessageMode) => void | Promise<unknown>
-  onDelete: (item: SessionQueuedMessage) => void | Promise<unknown>
-  onEdit: (item: SessionQueuedMessage) => void | Promise<unknown>
-  onReorder: (ids: string[]) => void | Promise<unknown>
-}) {
-  const { t } = useTranslation()
-  const [draggedId, setDraggedId] = useState<string | null>(null)
-
-  const summaryLabel = mode === 'next'
-    ? t('chat.queue.nextTitle')
-    : t('chat.queue.steerTitle')
-  const summaryCount = t('chat.queue.count', { count: items.length })
-
-  if (items.length === 0) {
-    return null
-  }
-
-  const targetMode = mode === 'next' ? 'steer' : 'next'
-
-  return (
-    <ChatComposerCard
-      className='queued-messages-card'
-      summaryClassName='queued-messages-card__summary'
-      bodyClassName='queued-messages-card__body'
-      narrow
-      summary={
-        <div className='queued-messages-card__headline'>
-          <span className='material-symbols-rounded queued-messages-card__headline-icon'>
-            {mode === 'next' ? 'pending' : 'schedule'}
-          </span>
-          <div className='queued-messages-card__headline-copy'>
-            <div className='queued-messages-card__headline-title'>{summaryLabel}</div>
-            <div className='queued-messages-card__headline-meta'>{summaryCount}</div>
-          </div>
-        </div>
-      }
-    >
-      <div className='queued-messages-card__list'>
-        {items.map((item) => {
-          const summaryText = getSummaryText(item.content)
-          const { hasImages, hasReferences } = getContentFlags(item.content)
-          return (
-            <div
-              key={item.id}
-              className='queued-messages-card__item'
-              draggable
-              onDragStart={() => setDraggedId(item.id)}
-              onDragEnd={() => setDraggedId(null)}
-              onDragOver={(event) => {
-                event.preventDefault()
-              }}
-              onDrop={(event) => {
-                event.preventDefault()
-                if (draggedId == null) {
-                  return
-                }
-                const nextIds = reorderIds(items.map(queueItem => queueItem.id), draggedId, item.id)
-                setDraggedId(null)
-                void onReorder(nextIds)
-              }}
-            >
-              <div className='queued-messages-card__item-main'>
-                <span className='queued-messages-card__drag material-symbols-rounded' aria-hidden='true'>
-                  drag_indicator
-                </span>
-                <div className='queued-messages-card__item-copy'>
-                  <div className='queued-messages-card__item-summary'>
-                    {(hasImages || hasReferences) && (
-                      <div className='queued-messages-card__flags'>
-                        {hasImages && (
-                          <span className='queued-messages-card__flag' title={t('chat.queue.hasImage')}>
-                            <span className='material-symbols-rounded'>image</span>
-                          </span>
-                        )}
-                        {hasReferences && (
-                          <span className='queued-messages-card__flag' title={t('chat.queue.hasReference')}>
-                            <span className='material-symbols-rounded'>attach_file</span>
-                          </span>
-                        )}
-                      </div>
-                    )}
-                    <div className='queued-messages-card__item-text'>
-                      {summaryText !== '' ? summaryText : t('chat.queue.attachmentsOnly')}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className='queued-messages-card__actions'>
-                <button
-                  type='button'
-                  className='queued-messages-card__action queued-messages-card__action--move'
-                  onClick={() => void onMove(item, targetMode)}
-                  title={t(targetMode === 'next' ? 'chat.queue.moveToNext' : 'chat.queue.moveToSteer')}
-                  aria-label={t(targetMode === 'next' ? 'chat.queue.moveToNext' : 'chat.queue.moveToSteer')}
-                >
-                  <span className='material-symbols-rounded'>swap_horiz</span>
-                </button>
-                <button
-                  type='button'
-                  className='queued-messages-card__action queued-messages-card__action--edit'
-                  onClick={() => void onEdit(item)}
-                >
-                  <span className='material-symbols-rounded'>edit</span>
-                </button>
-                <button
-                  type='button'
-                  className='queued-messages-card__action queued-messages-card__action--delete'
-                  onClick={() => void onDelete(item)}
-                >
-                  <span className='material-symbols-rounded'>delete</span>
-                </button>
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </ChatComposerCard>
-  )
-}

package/src/components/chat/bottom-dock-constants.ts

@@ -1,4 +0,0 @@
-export const CHAT_BOTTOM_DOCK_DEFAULT_HEIGHT = 320
-export const CHAT_BOTTOM_DOCK_HEIGHT_STORAGE_KEY = 'chatBottomDockHeight'
-export const CHAT_BOTTOM_DOCK_MAX_HEIGHT = 620
-export const CHAT_BOTTOM_DOCK_MIN_HEIGHT = 220