@vibe-forge/client 0.9.0 → 0.10.1

package/src/components/sidebar/SessionItem.tsx

@@ -1,11 +1,14 @@
 import './SessionItem.scss'
 
 import type { Session, SessionStatus } from '@vibe-forge/core'
-import { Badge, Button, Checkbox, List, Tag, Tooltip } from 'antd'
+import { Button, List, Tag, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import React, { useMemo } from 'react'
+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)
@@ -18,11 +21,13 @@ interface SessionItemProps {
   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>
-  onUpdateTags: (id: string, tags: string[]) => void | Promise<void>
   onToggleSelect: (id: string) => void
 }
 
+type PendingSessionAction = 'archive' | null
+
 export function SessionItem({
   session,
   isActive,
@@ -31,14 +36,37 @@ export function SessionItem({
   onSelect,
   onArchive,
   onDelete,
+  onRename,
   onStar,
-  onUpdateTags,
   onToggleSelect
 }: SessionItemProps) {
   const { t, i18n } = useTranslation()
-  const [isAddingTag, setIsAddingTag] = React.useState(false)
-  const [newTag, setNewTag] = React.useState('')
   const automationPrefix = 'automation:'
+  const itemContentRef = useRef<HTMLDivElement | null>(null)
+  const [pendingAction, setPendingAction] = useState<PendingSessionAction>(null)
+
+  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)
@@ -53,12 +81,17 @@ export function SessionItem({
     }
   }, [session.createdAt, i18n.language])
 
+  const archiveActionLabel = session.isArchived ? t('common.restore') : t('common.archive')
+  const archiveConfirmLabel = t('common.confirmAction', { action: archiveActionLabel })
+
   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 adapterDisplay = session.adapter != null && session.adapter !== ''
+    ? getAdapterDisplay(session.adapter)
+    : undefined
 
   const lastMessageSnippet = useMemo(() => {
     if (session.lastMessage == null || session.lastMessage === '') return null
@@ -132,142 +165,158 @@ export function SessionItem({
     )
   }
 
+  const handleConfirmableActionClick = (action: Exclude<PendingSessionAction, null>) => {
+    if (pendingAction === action) {
+      setPendingAction(null)
+      void onArchive(session.id)
+      return
+    }
+
+    setPendingAction(action)
+  }
+
   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' : ''
-      }`}
+    <SessionContextMenu
+      session={session}
+      onArchive={onArchive}
+      onDelete={onDelete}
+      onRename={onRename}
+      onStar={onStar}
     >
-      <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>
+      <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' : ''
+        }`}
+      >
+        <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>
-            {!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
+          </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 && (
+                  <>
+                    <Tooltip title={timeDisplay.full}>
+                      <span className='time-display'>
+                        {timeDisplay.relative}
                       </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>
+                    </Tooltip>
+                    <div className='session-item-actions'>
+                      <Tooltip title={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={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>
-          {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>
+            {lastMessageSnippet != null && (
+              <div className='last-message'>
+                {lastMessageSnippet}
+              </div>
             )}
-            <Tooltip title={timeDisplay.full}>
-              <span className='time-display'>
-                {timeDisplay.relative}
-              </span>
-            </Tooltip>
-          </div>
-          <div className='tags-container'>
-            {session.tags?.map((tag: string) => {
-              const automationTag = parseAutomationTag(tag)
-              if (automationTag) {
-                const href = `/automation?rule=${encodeURIComponent(automationTag.ruleId)}`
-                return (
-                  <Tooltip
-                    key={tag}
-                    title={automationTag.ruleTitle}
-                  >
-                    <Tag
-                      className='session-tag session-tag--automation'
-                      onClick={(event) => event.stopPropagation()}
-                    >
-                      <a
-                        className='session-tag__link'
-                        href={href}
-                        onClick={(event) => event.stopPropagation()}
+            {session.tags != null && session.tags.length > 0 && (
+              <div className='tags-container'>
+                {session.tags.map((tag: string) => {
+                  const automationTag = parseAutomationTag(tag)
+                  if (automationTag) {
+                    const href = `/automation?rule=${encodeURIComponent(automationTag.ruleId)}`
+                    return (
+                      <Tooltip
+                        key={tag}
+                        title={automationTag.ruleTitle}
                       >
-                        {automationTag.ruleTitle}
-                      </a>
-                    </Tag>
-                  </Tooltip>
-                )
-              }
-              return (
-                <Tooltip
-                  key={tag}
-                  title={tag}
-                >
-                  <Tag className='session-tag'>
-                    <span className='session-tag__text'>
-                      {tag}
-                    </span>
-                  </Tag>
-                </Tooltip>
-              )
-            })}
+                        <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={tag}
+                    >
+                      <Tag className='session-tag'>
+                        <span className='session-tag__text'>
+                          {tag}
+                        </span>
+                      </Tag>
+                    </Tooltip>
+                  )
+                })}
+              </div>
+            )}
           </div>
         </div>
-      </div>
-
-      {messageCount > 0 && (
-        <Badge
-          count={messageCount > 99 ? '99+' : messageCount}
-          className='session-item-badge'
-        />
-      )}
-    </List.Item>
+      </List.Item>
+    </SessionContextMenu>
   )
 }

package/src/components/sidebar/SessionList.scss

@@ -9,15 +9,15 @@
     overflow-y: auto;
 
     .session-list {
-      padding: 12px 16px;
+      padding: 8px 12px;
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 6px;
 
       .ant-list-items {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: 6px;
       }
 
       .session-row {
@@ -27,30 +27,60 @@
           &::before {
             content: '';
             position: absolute;
-            top: -8px;
-            bottom: -8px;
-            left: calc((var(--session-depth, 0) - 1) * 22px + 8px);
+            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 {
-          margin-left: calc(var(--session-depth, 0) * 22px);
+          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: 6px;
-          margin-left: calc(var(--session-depth, 0) * 22px);
+          margin-top: 4px;
+          margin-left: calc(var(--session-depth, 0) * 18px);
           display: flex;
           align-items: center;
-          gap: 6px;
+          gap: 4px;
           color: var(--sub-text-color);
 
           .session-tree-toggle {
-            width: 20px;
-            height: 20px;
+            width: 18px;
+            height: 18px;
             padding: 0;
             display: flex;
             align-items: center;
@@ -58,7 +88,7 @@
             color: var(--sub-text-color);
 
             .material-symbols-rounded {
-              font-size: 18px;
+              font-size: 16px;
               transition: transform .2s ease;
             }
 
@@ -70,11 +100,11 @@
           }
 
           .session-collapse-label {
-            font-size: 11px;
+            font-size: 10px;
           }
 
           .session-collapse-summary {
-            font-size: 11px;
+            font-size: 10px;
             color: var(--sub-text-color);
             opacity: .8;
           }
@@ -84,9 +114,9 @@
   }
 
   .empty-text {
-    padding: 32px 16px;
+    padding: 28px 12px;
     text-align: center;
     color: var(--sub-text-color);
-    font-size: 14px;
+    font-size: 13px;
   }
 }

package/src/components/sidebar/SessionList.tsx

@@ -1,7 +1,7 @@
 import './SessionList.scss'
 
 import type { Session } from '@vibe-forge/core'
-import { Button, List } from 'antd'
+import { Button, Checkbox, List } from 'antd'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SessionItem } from './SessionItem'
@@ -9,28 +9,30 @@ import { SessionItem } from './SessionItem'
 interface SessionListProps {
   sessions: Session[]
   activeId?: string
+  hasActiveFilters: boolean
   isBatchMode: boolean
   selectedIds: Set<string>
   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>
-  onUpdateTags: (id: string, tags: string[]) => void | Promise<void>
   onToggleSelect: (id: string) => void
 }
 
 export function SessionList({
   sessions,
   activeId,
+  hasActiveFilters,
   isBatchMode,
   selectedIds,
   searchQuery,
   onSelectSession,
   onArchiveSession,
   onDeleteSession,
+  onRenameSession,
   onStarSession,
-  onUpdateTags,
   onToggleSelect
 }: SessionListProps) {
   const { t } = useTranslation()
@@ -115,7 +117,7 @@ export function SessionList({
           size='small'
           locale={{
             emptyText: <div className='empty-text'>
-              {searchQuery ? t('common.noSessions') : t('common.startNewChat')}
+              {searchQuery || hasActiveFilters ? t('common.noSessions') : t('common.startNewChat')}
             </div>
           }}
           dataSource={flattenedSessions}
@@ -124,18 +126,31 @@ export function SessionList({
               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}
-              />
+              <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}
+                  isSelected={selectedIds.has(s.id)}
+                  onSelect={onSelectSession}
+                  onArchive={onArchiveSession}
+                  onDelete={onDeleteSession}
+                  onRename={onRenameSession}
+                  onStar={onStarSession}
+                  onToggleSelect={onToggleSelect}
+                />
+              </div>
               {hasChildren && !isBatchMode && (
                 <div
                   className='session-collapse-row'