@vibe-forge/client 0.2.0-alpha.0

package/src/components/sidebar/SessionItem.tsx

@@ -0,0 +1,265 @@
+import './SessionItem.scss'
+
+import type { Session, SessionStatus } from '@vibe-forge/core'
+import { Badge, Button, Checkbox, List, Tag, Tooltip } from 'antd'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import 'dayjs/locale/zh-cn'
+
+dayjs.extend(relativeTime)
+
+interface SessionItemProps {
+  session: Session
+  isActive: boolean
+  isBatchMode: boolean
+  isSelected: boolean
+  onSelect: (session: Session) => void
+  onArchive: (id: string) => void | Promise<void>
+  onDelete: (id: string) => void | Promise<void>
+  onStar: (id: string, isStarred: boolean) => void | Promise<void>
+  onUpdateTags: (id: string, tags: string[]) => void | Promise<void>
+  onToggleSelect: (id: string) => void
+}
+
+export function SessionItem({
+  session,
+  isActive,
+  isBatchMode,
+  isSelected,
+  onSelect,
+  onArchive,
+  onDelete,
+  onStar,
+  onUpdateTags,
+  onToggleSelect
+}: SessionItemProps) {
+  const { t, i18n } = useTranslation()
+  const [isAddingTag, setIsAddingTag] = React.useState(false)
+  const [newTag, setNewTag] = React.useState('')
+  const automationPrefix = 'automation:'
+
+  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 displayTitle = (session.title != null && session.title !== '')
+    ? session.title
+    : (session.lastUserMessage != null && session.lastUserMessage !== '')
+    ? session.lastUserMessage
+    : t('common.newChat')
+  const messageCount = session.messageCount ?? 0
+
+  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={title}>
+            <div className='waiting-input-indicator' />
+          </Tooltip>
+        )
+      default:
+        return <div className={`status-dot ${isActive ? 'active' : ''}`} />
+    }
+
+    return (
+      <Tooltip title={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>
+    )
+  }
+
+  return (
+    <List.Item
+      onClick={() => isBatchMode ? onToggleSelect(session.id) : onSelect(session)}
+      onDoubleClick={() => {
+        // eslint-disable-next-line no-console
+        console.log('Session Details:', session)
+      }}
+      className={`session-item ${isActive ? 'active' : ''} ${isSelected ? 'selected' : ''} ${
+        session.isStarred ? 'starred' : ''
+      }`}
+    >
+      <div className='session-item-content'>
+        {!isBatchMode && (
+          <div className='status-indicator'>
+            {getStatusIcon(session.status)}
+          </div>
+        )}
+        {isBatchMode && (
+          <div className='batch-checkbox-wrapper'>
+            <Checkbox
+              checked={isSelected}
+              onChange={() => onToggleSelect(session.id)}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+        )}
+        <div className={`session-info ${isBatchMode ? '' : 'with-actions'}`}>
+          <div className='session-header'>
+            <div className='session-title'>
+              <span className='session-title-text'>
+                {displayTitle}
+              </span>
+            </div>
+            {!isBatchMode && (
+              <div className='session-item-actions'>
+                <Tooltip title={session.isStarred ? t('common.unstar') : t('common.star')}>
+                  <Button
+                    type='text'
+                    size='small'
+                    className={`action-btn ${session.isStarred ? 'starred' : ''}`}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      void onStar(session.id, !session.isStarred)
+                    }}
+                    icon={
+                      <span
+                        className={`material-symbols-rounded ${session.isStarred ? 'filled' : ''}`}
+                      >
+                        star
+                      </span>
+                    }
+                  />
+                </Tooltip>
+                <Tooltip title={t('common.archive')}>
+                  <Button
+                    type='text'
+                    size='small'
+                    className='action-btn archive-btn'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      void onArchive(session.id)
+                    }}
+                    icon={<span className='material-symbols-rounded'>archive</span>}
+                  />
+                </Tooltip>
+              </div>
+            )}
+          </div>
+          {lastMessageSnippet != null && (
+            <div className='last-message'>
+              {lastMessageSnippet}
+            </div>
+          )}
+          <div className='session-meta'>
+            {session.status && (
+              <span
+                className='status-text'
+                style={{ fontSize: '11px', color: 'var(--sub-text-color)', marginRight: '8px' }}
+              >
+                {t(`common.status.${session.status}`)}
+              </span>
+            )}
+            <Tooltip title={timeDisplay.full}>
+              <span className='time-display'>
+                {timeDisplay.relative}
+              </span>
+            </Tooltip>
+          </div>
+          <div className='tags-container'>
+            {session.tags?.map(tag => {
+              const automationTag = parseAutomationTag(tag)
+              if (automationTag) {
+                const href = `/automation?rule=${encodeURIComponent(automationTag.ruleId)}`
+                return (
+                  <Tag
+                    key={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>
+                )
+              }
+              return (
+                <Tag
+                  key={tag}
+                  className='session-tag'
+                >
+                  {tag}
+                </Tag>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {messageCount > 0 && (
+        <Badge
+          count={messageCount > 99 ? '99+' : messageCount}
+          className='session-item-badge'
+        />
+      )}
+    </List.Item>
+  )
+}

package/src/components/sidebar/SessionList.scss

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

package/src/components/sidebar/SessionList.tsx

@@ -0,0 +1,166 @@
+import './SessionList.scss'
+
+import type { Session } from '@vibe-forge/core'
+import { Button, List } from 'antd'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SessionItem } from './SessionItem'
+
+interface SessionListProps {
+  sessions: Session[]
+  activeId?: string
+  isBatchMode: boolean
+  selectedIds: Set<string>
+  searchQuery?: string
+  onSelectSession: (session: Session) => void
+  onArchiveSession: (id: string) => void | Promise<void>
+  onDeleteSession: (id: string) => void | Promise<void>
+  onStarSession: (id: string, isStarred: boolean) => void | Promise<void>
+  onUpdateTags: (id: string, tags: string[]) => void | Promise<void>
+  onToggleSelect: (id: string) => void
+}
+
+export function SessionList({
+  sessions,
+  activeId,
+  isBatchMode,
+  selectedIds,
+  searchQuery,
+  onSelectSession,
+  onArchiveSession,
+  onDeleteSession,
+  onStarSession,
+  onUpdateTags,
+  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 ? 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}
+            >
+              <SessionItem
+                session={s}
+                isActive={activeId === s.id}
+                isBatchMode={isBatchMode}
+                isSelected={selectedIds.has(s.id)}
+                onSelect={onSelectSession}
+                onArchive={onArchiveSession}
+                onDelete={onDeleteSession}
+                onStar={onStarSession}
+                onUpdateTags={onUpdateTags}
+                onToggleSelect={onToggleSelect}
+              />
+              {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>
+  )
+}

package/src/components/sidebar/SidebarHeader.scss

@@ -0,0 +1,79 @@
+.sidebar-header {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex-shrink: 0;
+
+  .header-bottom {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .batch-select-wrapper {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .search-input {
+      border-radius: 6px;
+      flex: 1;
+      height: 36px;
+
+      .search-icon {
+        font-size: 18px;
+        color: var(--sub-text-color);
+        display: inline-flex;
+        align-items: center;
+        line-height: 1;
+      }
+    }
+
+    .batch-actions {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+
+      .action-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        flex-shrink: 0;
+        color: var(--sub-text-color);
+
+        &.active {
+          color: var(--primary-color);
+        }
+
+        .material-symbols-rounded {
+          font-size: 20px;
+          display: inline-flex;
+          align-items: center;
+          line-height: 1;
+        }
+      }
+    }
+
+    .sidebar-collapse-btn, .sidebar-new-chat-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      color: var(--sub-text-color);
+      flex-shrink: 0;
+
+      .material-symbols-rounded {
+        font-size: 20px;
+      }
+    }
+  }
+}