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

package/src/components/sidebar/SessionItem.tsx

@@ -1,367 +0,0 @@
-import './SessionItem.scss'
-
-import type { Session, SessionStatus } from '@vibe-forge/core'
-import { Button, List, Tag, Tooltip } from 'antd'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { getAdapterDisplay } from '#~/resources/adapters.js'
-import { SessionContextMenu } from './SessionContextMenu'
-import 'dayjs/locale/zh-cn'
-
-dayjs.extend(relativeTime)
-
-interface SessionItemProps {
-  session: Session
-  isActive: boolean
-  isBatchMode: boolean
-  isCompactLayout: boolean
-  isSelected: boolean
-  isTouchInteraction: boolean
-  onSelect: (session: Session) => void
-  onArchive: (id: string) => void | Promise<void>
-  onDelete: (id: string) => void | Promise<void>
-  onRename: (id: string, title: string) => Promise<void>
-  onStar: (id: string, isStarred: boolean) => void | Promise<void>
-  onToggleSelect: (id: string) => void
-}
-
-type PendingSessionAction = 'archive' | null
-
-export function SessionItem({
-  session,
-  isActive,
-  isBatchMode,
-  isCompactLayout,
-  isSelected,
-  isTouchInteraction,
-  onSelect,
-  onArchive,
-  onDelete,
-  onRename,
-  onStar,
-  onToggleSelect
-}: SessionItemProps) {
-  const { t, i18n } = useTranslation()
-  const automationPrefix = 'automation:'
-  const itemContentRef = useRef<HTMLDivElement | null>(null)
-  const [pendingAction, setPendingAction] = useState<PendingSessionAction>(null)
-  const showCompactActionMenu = isCompactLayout || isTouchInteraction
-  const resolveTooltipTitle = (title: string) => isTouchInteraction ? undefined : title
-
-  useEffect(() => {
-    if (pendingAction == null) {
-      return
-    }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const nextTarget = event.target
-      if (!(nextTarget instanceof Node)) {
-        setPendingAction(null)
-        return
-      }
-
-      if (!itemContentRef.current?.contains(nextTarget)) {
-        setPendingAction(null)
-      }
-    }
-
-    document.addEventListener('pointerdown', handlePointerDown, true)
-    return () => {
-      document.removeEventListener('pointerdown', handlePointerDown, true)
-    }
-  }, [pendingAction])
-
-  const timeDisplay = useMemo(() => {
-    const d = dayjs(session.createdAt)
-    if (i18n.language === 'zh') {
-      d.locale('zh-cn')
-    } else {
-      d.locale('en')
-    }
-    return {
-      relative: d.fromNow(),
-      full: d.format('YYYY-MM-DD HH:mm:ss')
-    }
-  }, [session.createdAt, i18n.language])
-
-  const archiveActionLabel = session.isArchived ? t('common.restore') : t('common.archive')
-  const archiveConfirmLabel = t('common.confirmAction', { action: archiveActionLabel })
-  const sessionTags = session.tags ?? []
-  const visibleTags = isCompactLayout ? sessionTags.slice(0, 1) : sessionTags
-  const hiddenTagCount = Math.max(sessionTags.length - visibleTags.length, 0)
-
-  const displayTitle = (session.title != null && session.title !== '')
-    ? session.title
-    : (session.lastUserMessage != null && session.lastUserMessage !== '')
-    ? session.lastUserMessage
-    : t('common.newChat')
-  const adapterDisplay = session.adapter != null && session.adapter !== ''
-    ? getAdapterDisplay(session.adapter)
-    : undefined
-
-  const lastMessageSnippet = useMemo(() => {
-    if (session.lastMessage == null || session.lastMessage === '') return null
-    return session.lastMessage.length > 60 ? `${session.lastMessage.slice(0, 60)}...` : session.lastMessage
-  }, [session.lastMessage])
-
-  const parseAutomationTag = useMemo(() => {
-    return (tag: string) => {
-      if (!tag.startsWith(automationPrefix)) return null
-      const parts = tag.split(':')
-      if (parts.length < 3) return null
-      return {
-        ruleId: parts[1],
-        ruleTitle: parts.slice(2).join(':')
-      }
-    }
-  }, [automationPrefix])
-
-  const getStatusIcon = (status?: SessionStatus) => {
-    if (!status) {
-      return <div className={`status-dot ${isActive ? 'active' : ''}`} />
-    }
-
-    let icon = ''
-    let color = ''
-    const title = t(`common.status.${status}`)
-
-    switch (status) {
-      case 'completed':
-        icon = 'check_circle'
-        color = '#52c41a' // Green
-        break
-      case 'terminated':
-        icon = 'remove_circle'
-        color = '#bfbfbf' // Grey
-        break
-      case 'failed':
-        icon = 'cancel'
-        color = '#ff4d4f' // Red
-        break
-      case 'running':
-        icon = 'sync'
-        color = '#1890ff' // Blue
-        break
-      case 'waiting_input':
-        return (
-          <Tooltip title={resolveTooltipTitle(title)}>
-            <div className='waiting-input-indicator' />
-          </Tooltip>
-        )
-      default:
-        return <div className={`status-dot ${isActive ? 'active' : ''}`} />
-    }
-
-    return (
-      <Tooltip title={resolveTooltipTitle(title)}>
-        <span
-          className={`material-symbols-rounded status-icon ${status === 'running' ? 'spin' : ''}`}
-          style={{
-            color,
-            fontSize: '16px',
-            lineHeight: '16px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          {icon}
-        </span>
-      </Tooltip>
-    )
-  }
-
-  const handleConfirmableActionClick = (action: Exclude<PendingSessionAction, null>) => {
-    if (pendingAction === action) {
-      setPendingAction(null)
-      void onArchive(session.id)
-      return
-    }
-
-    setPendingAction(action)
-  }
-
-  return (
-    <SessionContextMenu
-      session={session}
-      onArchive={onArchive}
-      onDelete={onDelete}
-      onRename={onRename}
-      onStar={onStar}
-    >
-      <List.Item
-        onClick={() => isBatchMode ? onToggleSelect(session.id) : onSelect(session)}
-        onMouseLeave={() => setPendingAction(null)}
-        onDoubleClick={() => {
-          // eslint-disable-next-line no-console
-          console.log('Session Details:', session)
-        }}
-        className={`session-item ${isActive ? 'active' : ''} ${isSelected ? 'selected' : ''} ${
-          session.isStarred ? 'starred' : ''
-        } ${isCompactLayout ? 'session-item--compact' : ''} ${showCompactActionMenu ? 'session-item--touch' : ''}`}
-      >
-        <div ref={itemContentRef} className='session-item-content'>
-          <div className={`session-leading ${adapterDisplay?.icon != null ? 'has-adapter' : ''}`}>
-            {adapterDisplay?.icon != null && (
-              <img
-                className='session-adapter-icon'
-                src={adapterDisplay.icon}
-                alt=''
-                aria-hidden='true'
-              />
-            )}
-            <div className={`status-indicator ${adapterDisplay?.icon != null ? 'is-overlay' : ''}`}>
-              {getStatusIcon(session.status)}
-            </div>
-          </div>
-          <div className={`session-info ${isBatchMode ? '' : 'with-actions'}`}>
-            <div className='session-header'>
-              <div className='session-title'>
-                <span className='session-title-text'>
-                  {displayTitle}
-                </span>
-              </div>
-              <div className='session-header-side'>
-                {!isBatchMode && (
-                  <>
-                    {!isCompactLayout && (
-                      <Tooltip title={resolveTooltipTitle(timeDisplay.full)}>
-                        <span className='time-display'>
-                          {timeDisplay.relative}
-                        </span>
-                      </Tooltip>
-                    )}
-                    {showCompactActionMenu
-                      ? (
-                        <SessionContextMenu
-                          session={session}
-                          trigger={['click']}
-                          onArchive={onArchive}
-                          onDelete={onDelete}
-                          onRename={onRename}
-                          onStar={onStar}
-                        >
-                          <Button
-                            type='text'
-                            size='small'
-                            className='action-btn action-btn--more'
-                            title={t('common.moreActions')}
-                            aria-label={t('common.moreActions')}
-                            onClick={(event) => {
-                              event.stopPropagation()
-                            }}
-                            icon={<span className='material-symbols-rounded'>more_horiz</span>}
-                          />
-                        </SessionContextMenu>
-                      )
-                      : (
-                        <div className='session-item-actions'>
-                          <Tooltip
-                            title={resolveTooltipTitle(session.isStarred ? t('common.unstar') : t('common.star'))}
-                          >
-                            <Button
-                              type='text'
-                              size='small'
-                              className={`action-btn star-btn ${session.isStarred ? 'starred' : ''}`}
-                              onClick={(e) => {
-                                e.stopPropagation()
-                                setPendingAction(null)
-                                void onStar(session.id, !session.isStarred)
-                              }}
-                              icon={
-                                <span
-                                  className={`material-symbols-rounded ${session.isStarred ? 'filled' : ''}`}
-                                >
-                                  star
-                                </span>
-                              }
-                            />
-                          </Tooltip>
-                          <Tooltip
-                            title={resolveTooltipTitle(
-                              pendingAction === 'archive' ? archiveConfirmLabel : archiveActionLabel
-                            )}
-                          >
-                            <Button
-                              type='text'
-                              size='small'
-                              className={`action-btn archive-btn ${pendingAction === 'archive' ? 'is-confirming' : ''}`}
-                              onClick={(e) => {
-                                e.stopPropagation()
-                                handleConfirmableActionClick('archive')
-                              }}
-                            >
-                              <span className='material-symbols-rounded'>
-                                {session.isArchived ? 'unarchive' : 'archive'}
-                              </span>
-                              {pendingAction === 'archive' && (
-                                <span className='action-btn__label'>{archiveConfirmLabel}</span>
-                              )}
-                            </Button>
-                          </Tooltip>
-                        </div>
-                      )}
-                  </>
-                )}
-              </div>
-            </div>
-            {!isCompactLayout && lastMessageSnippet != null && (
-              <div className='last-message'>
-                {lastMessageSnippet}
-              </div>
-            )}
-            {visibleTags.length > 0 && (
-              <div className='tags-container'>
-                {visibleTags.map((tag: string) => {
-                  const automationTag = parseAutomationTag(tag)
-                  if (automationTag) {
-                    const href = `/automation?rule=${encodeURIComponent(automationTag.ruleId)}`
-                    return (
-                      <Tooltip
-                        key={tag}
-                        title={resolveTooltipTitle(automationTag.ruleTitle)}
-                      >
-                        <Tag
-                          className='session-tag session-tag--automation'
-                          onClick={(event) => event.stopPropagation()}
-                        >
-                          <a
-                            className='session-tag__link'
-                            href={href}
-                            onClick={(event) => event.stopPropagation()}
-                          >
-                            {automationTag.ruleTitle}
-                          </a>
-                        </Tag>
-                      </Tooltip>
-                    )
-                  }
-                  return (
-                    <Tooltip
-                      key={tag}
-                      title={resolveTooltipTitle(tag)}
-                    >
-                      <Tag className='session-tag'>
-                        <span className='session-tag__text'>
-                          {tag}
-                        </span>
-                      </Tag>
-                    </Tooltip>
-                  )
-                })}
-                {hiddenTagCount > 0 && (
-                  <Tag className='session-tag session-tag--count'>
-                    +{hiddenTagCount}
-                  </Tag>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </List.Item>
-    </SessionContextMenu>
-  )
-}

package/src/components/sidebar/SessionList.scss

@@ -1,122 +0,0 @@
-.session-list-container {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-
-  .session-list-scroll {
-    flex: 1;
-    overflow-y: auto;
-
-    .session-list {
-      padding: 8px 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-
-      .ant-list-items {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-      }
-
-      .session-row {
-        position: relative;
-
-        &.has-parent {
-          &::before {
-            content: '';
-            position: absolute;
-            top: -6px;
-            bottom: -6px;
-            left: calc((var(--session-depth, 0) - 1) * 18px + 7px);
-            width: 3px;
-            background-color: var(--primary-color);
-            border-radius: 2px;
-          }
-        }
-
-        .session-row-main {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-        }
-
-        .session-select-toggle {
-          width: 28px;
-          height: 28px;
-          margin-left: calc(var(--session-depth, 0) * 18px);
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-          align-self: center;
-          border-radius: 6px;
-          background-color: var(--bg-color);
-          color: var(--sub-text-color);
-
-          .ant-checkbox-wrapper {
-            margin-inline-start: 0;
-          }
-        }
-
-        .session-item {
-          flex: 1;
-          min-width: 0;
-          margin-left: calc(var(--session-depth, 0) * 18px);
-        }
-
-        .session-select-toggle + .session-item {
-          margin-left: 0;
-        }
-
-        .session-collapse-row {
-          margin-top: 4px;
-          margin-left: calc(var(--session-depth, 0) * 18px);
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          color: var(--sub-text-color);
-
-          .session-tree-toggle {
-            width: 18px;
-            height: 18px;
-            padding: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--sub-text-color);
-
-            .material-symbols-rounded {
-              font-size: 16px;
-              transition: transform .2s ease;
-            }
-
-            &.collapsed {
-              .material-symbols-rounded {
-                transform: rotate(-90deg);
-              }
-            }
-          }
-
-          .session-collapse-label {
-            font-size: 10px;
-          }
-
-          .session-collapse-summary {
-            font-size: 10px;
-            color: var(--sub-text-color);
-            opacity: .8;
-          }
-        }
-      }
-    }
-  }
-
-  .empty-text {
-    padding: 28px 12px;
-    text-align: center;
-    color: var(--sub-text-color);
-    font-size: 13px;
-  }
-}

package/src/components/sidebar/SessionList.tsx

@@ -1,187 +0,0 @@
-import './SessionList.scss'
-
-import type { Session } from '@vibe-forge/core'
-import { Button, Checkbox, List } from 'antd'
-import React, { useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { SessionItem } from './SessionItem'
-
-interface SessionListProps {
-  sessions: Session[]
-  activeId?: string
-  hasActiveFilters: boolean
-  isBatchMode: boolean
-  isCompactLayout: boolean
-  selectedIds: Set<string>
-  isTouchInteraction: boolean
-  searchQuery?: string
-  onSelectSession: (session: Session) => void
-  onArchiveSession: (id: string) => void | Promise<void>
-  onDeleteSession: (id: string) => void | Promise<void>
-  onRenameSession: (id: string, title: string) => Promise<void>
-  onStarSession: (id: string, isStarred: boolean) => void | Promise<void>
-  onToggleSelect: (id: string) => void
-}
-
-export function SessionList({
-  sessions,
-  activeId,
-  hasActiveFilters,
-  isBatchMode,
-  isCompactLayout,
-  selectedIds,
-  isTouchInteraction,
-  searchQuery,
-  onSelectSession,
-  onArchiveSession,
-  onDeleteSession,
-  onRenameSession,
-  onStarSession,
-  onToggleSelect
-}: SessionListProps) {
-  const { t } = useTranslation()
-  const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set())
-
-  const { flattenedSessions, childSummaryMap } = useMemo(() => {
-    const sessionMap = new Map(sessions.map((s) => [s.id, s]))
-    const childrenMap = new Map<string, Session[]>()
-    for (const session of sessions) {
-      if (session.parentSessionId) {
-        const list = childrenMap.get(session.parentSessionId) ?? []
-        list.push(session)
-        childrenMap.set(session.parentSessionId, list)
-      }
-    }
-
-    const roots = sessions.filter((s) => {
-      if (!s.parentSessionId) return true
-      return !sessionMap.has(s.parentSessionId)
-    })
-
-    const childSummary = new Map<string, string>()
-    for (const [parentId, children] of childrenMap.entries()) {
-      const total = children.length
-      const statusCount = new Map<string, number>()
-      for (const child of children) {
-        const status = child.status ?? 'running'
-        statusCount.set(status, (statusCount.get(status) ?? 0) + 1)
-      }
-      const parts = [t('common.childSummary', { count: total })]
-      for (const [status, count] of statusCount.entries()) {
-        parts.push(t('common.childStatusItem', { count, status: t(`common.status.${status}`) }))
-      }
-      childSummary.set(parentId, parts.join(' · '))
-    }
-
-    const result: Array<{ session: Session; depth: number; hasChildren: boolean }> = []
-    const visited = new Set<string>()
-
-    const walk = (session: Session, depth: number) => {
-      if (visited.has(session.id)) return
-      visited.add(session.id)
-      const children = childrenMap.get(session.id) ?? []
-      result.push({
-        session,
-        depth,
-        hasChildren: children.length > 0
-      })
-      if (collapsedIds.has(session.id)) return
-      for (const child of children) {
-        walk(child, depth + 1)
-      }
-    }
-
-    for (const root of roots) {
-      walk(root, 0)
-    }
-
-    return {
-      flattenedSessions: result,
-      childSummaryMap: childSummary
-    }
-  }, [sessions, collapsedIds, t])
-
-  const toggleCollapse = (id: string) => {
-    setCollapsedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) {
-        next.delete(id)
-      } else {
-        next.add(id)
-      }
-      return next
-    })
-  }
-
-  return (
-    <div className='session-list-container'>
-      <div className='session-list-scroll'>
-        <List
-          className='session-list'
-          size='small'
-          locale={{
-            emptyText: <div className='empty-text'>
-              {searchQuery || hasActiveFilters ? t('common.noSessions') : t('common.startNewChat')}
-            </div>
-          }}
-          dataSource={flattenedSessions}
-          renderItem={({ session: s, depth, hasChildren }) => (
-            <div
-              className={`session-row ${depth > 0 ? 'has-parent' : ''}`}
-              style={{ '--session-depth': depth } as React.CSSProperties}
-            >
-              <div className='session-row-main'>
-                {isBatchMode && (
-                  <div
-                    className='session-select-toggle'
-                    onClick={(event) => event.stopPropagation()}
-                  >
-                    <Checkbox
-                      checked={selectedIds.has(s.id)}
-                      onChange={() => onToggleSelect(s.id)}
-                    />
-                  </div>
-                )}
-                <SessionItem
-                  session={s}
-                  isActive={activeId === s.id}
-                  isBatchMode={isBatchMode}
-                  isCompactLayout={isCompactLayout}
-                  isSelected={selectedIds.has(s.id)}
-                  isTouchInteraction={isTouchInteraction}
-                  onSelect={onSelectSession}
-                  onArchive={onArchiveSession}
-                  onDelete={onDeleteSession}
-                  onRename={onRenameSession}
-                  onStar={onStarSession}
-                  onToggleSelect={onToggleSelect}
-                />
-              </div>
-              {hasChildren && !isBatchMode && (
-                <div
-                  className='session-collapse-row'
-                  style={{ '--session-depth': depth } as React.CSSProperties}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Button
-                    type='text'
-                    size='small'
-                    className={`session-tree-toggle ${collapsedIds.has(s.id) ? 'collapsed' : ''}`}
-                    onClick={() => toggleCollapse(s.id)}
-                    icon={<span className='material-symbols-rounded'>chevron_right</span>}
-                  />
-                  <span className='session-collapse-label'>
-                    {collapsedIds.has(s.id) ? t('common.expandChildren') : t('common.collapseChildren')}
-                  </span>
-                  <span className='session-collapse-summary'>
-                    {childSummaryMap.get(s.id) ?? t('common.childSummary', { count: 0 })}
-                  </span>
-                </div>
-              )}
-            </div>
-          )}
-        />
-      </div>
-    </div>
-  )
-}